vue声明周期及其作用

vue声明周期及其作用

1. 生命周期总览

2. beforeCreate

• 我们在new Vue()时，初始化一个Vue空的实例对象，此时对象身上只有默认的声明周期函数和事件，此时data,methods都未被初始化

3. created

• 此时，已经完成数据观测，属性和方法的运算，watch、event事件回调的配置
• 可以调用methods中的的方法，访问和修改data数据出发响应式渲染dom，可以通过compute和watch完成数据计算
• 此时，vm.$el并没有被创建

4. created->beforeMounted

• 判断是否存在el选项，如果不存在，则停止编译，直到调用vm.$mount（el）才会继续编译
• vm.el获取到的事挂载DOM的

5. beforeMount

• 此时可以获取到vm.el
• vm.el已完成DOM初始化，但未挂载到el选项上

6. beforeMount->Mounted

• 此阶段vm.el完成挂载，vm.￥el生成的DOM替换了el选项所对应的DOM

7. Mounted

• vm.el已完成DOM的挂载和渲染，

8. beforeUpdate

• 更新的数据必须是被渲染在模板上的
• 此时view层还没有更新

9. updated

• 完成view层的更新

10. beforeDestroy

• 实例被销毁前调用，此时实例属性与方法仍可访问

11. destroyed

• 完全销毁一个实例，仅销毁实例，并不能清楚DOM

12. 总结

生命周期	描述
beforeCreate	执行时组件实例还未被创建，可用于插件开发中执行一些初始化任务
created	组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	未执行渲染、更新，dom未创建
mounted	初始化结束，DOM已经创建，可用于获取访问数据和DOM元素
beforeUpdate	更新前，可用于获取更新前各种状态
updated	更新后，所有状态意识最新
beforeDestroy	销毁前，可用于一些定时器清楚或者订阅的取消
destroyed	组件已销毁

13. created和mounted数据请求的区别

• created是在实例创建完成之后立刻调用，这时候dom节点未生成，如果进行数据请求，后续在mounted时就一次性渲染结束
• mounted是在dom挂载完立刻执行，这时候如果再进行数据请求，可能会发生回流和重绘，页面会闪动
• 所以，数据请求一般放在created中