[JavaScript知识库]vue2的生命周期以及各个生命周期的作用

四个阶段

? ? ? ? 初始化阶段? ? ? ?

? ? ? ? ? ? ? ? beforeCreate? ? ? ? 创建前

? ? ? ? ? ? ? ? Created? ? ? ? ? ? ? ? 创建后

? ? ? ? 挂载阶段

? ? ? ? ? ? ? ? beforeMount? ? ? ? 挂载前

? ? ? ? ? ? ? ? Mounted? ? ? ? ? ? ? ?挂载后

? ? ? ? 更新阶段

? ? ? ? ? ? ? ? beforeUpdate? ? ? ? 更新前

? ? ? ? ? ? ? ? Updated? ? ? ? ? ? ? ? ?更新后

? ? ? ? 销毁阶段

? ? ? ? ? ? ? ? beforeDestroy? ? ? ? 销毁前

? ? ? ? ? ? ? ? Destroyed? ? ? ? ? ? ? ?销毁后

作用：

? ? ? ? 生命周期执行性的操作 阶段一：初始化阶段

? ? ? ? ? ? ? ? 1、new Vue({}) vue实例化对象? ? ? ?

? ? ? ? ? ? ? ? 2、初始化事件和生命周期函数

? ? ? ? ? ? ? ? 3、beforeCreate被触发，不能访问data methods

? ? ? ? ? ? ? ? 4、给vue添加data methods

? ? ? ? ? ? ? ? 5、created创建后

? ? ? ? ? ? ? ? 6、开始分析编译模板

? ? ? ? ? ? ? ? 7、检查是否有el选项？检查将数据挂载到哪里去

? ? ? ? ? ? ? ? 8、是否调用$mount方法

? ? ? ? ? ? ? ? 9、如果有继续检查选项

? ? ? ? 生命周期执行的操作 阶段二：挂载阶段

? ? ? ? ? ? ? ? 1、检查template

? ? ? ? ? ? ? ? ? ? ? ? 1-1有 编译template通过render进行渲染

? ? ? ? ? ? ? ? ? ? ? ? 1-2没有 编译el选项对应的标签作为template //vue项目中不知此

? ? ? ? ? ? ? ? 2、虚拟DOM挂载到真实dom之前

? ? ? ? ? ? ? ? 3、beforeMount钩子函数被执行

? ? ? ? ? ? ? ? 4、create:将虚拟的dom和渲染数据一并挂载到真实dom

? ? ? ? ? ? ? ? 5、挂载完毕：Mounted钩子函数被执行

? ? ? ? 生命周期执行的操作 阶段三：更新阶段

? ? ? ? ? ? ? ? 1、当data数据被更新、修改时触发钩子函数beforeUpdate此阶段获取不到更新的真实dom

? ? ? ? ? ? ? ? 2、虚拟dom重新渲染到真实dom

? ? ? ? ? ? ? ? 3、触发钩子函数updated

? ? ? ? ? ? ? ? 4、当data数据再次发生改变时，重复执行此操作

? ? ? ? 生命周期执行的操作 阶段四：销毁阶段

? ? ? ? ? ? ? ? 1、当$destroy触发时(比如子组件的dom被移除)

? ? ? ? ? ? ? ? 2、beforeDestroy被触发

? ? ? ? ? ? ? ? 3、拆卸数据监听器、子组件和事件监听器

? ? ? ? ? ? ? ? 4、当实例销毁后触发destroyed

总结：以上就是vue2生命周期以及各个生命周期的作用，感谢您的观看。

????????