vue生命周期是什么?
-
vue
实例从创建到销毁的过程就是vue
生命周期,可以理解为vue
实例从创建、初始化数据、编译模板、挂载Dom渲染、更新、渲染、卸载等整个过程。
-
vue
生命周期主要包括创建阶段、挂载阶段、运行阶段、销毁阶段
- 通俗理解:
vue
生命周期就是vue
的一生,类似于人的一生,从出生到死亡的整个过程。
vue生命周期图示
vue2
vue3
vue常用生命周期对比介绍
使用场景介绍
//这里以 vue2 为例,其它写法请参考官方文档
export default {
created() {
// 做一些初始化工作,比如说进行ajax请求异步数据的获取、初始化数据
},
mounted() {
// 可以拿到 DOM 节点
},
beforeDestroy() {
// 做一些清理操作,比如说清理页面定时器
},
};
//下面是一些其它场景介绍补充
beforecreate:可以在这加个loading事件
created:可以在这结束loading,接口请求之类的,然后做一些数据的初始化,实现函数自执行(这个在Vue的生命周期只会执行一次)
mounted:获取DOM节点,使用echarts之类的,也可以在这发起接口请求,配合路由钩子做一些事情 (会经常进行数据处理和更新)
beforUpdate、updated:因为在 mounted 的时候就会经常进行数据的更新,所以就没必要在这个生命周期进行数据处理
beforeDestroy: 常用于处理一些具有负面影响的代码,如定时器,事件监听等
destroyed :当前组件已被删除,清空相关内容。下一步,跳转路由。等等
补充
- 一般情况下,最常用的是
mounted
、updated
和 unmounted