Vue生命周期理解

详解Vue生命周期

定义：

vue生命周期： 从vue实例创建、运行、销毁的过程，在这个过程中会伴随各种各样的事件，这些事件统称为 生命周期 。

生命周期钩子：生命周期中的事件的别名（函数）；

三个阶段：

生命周期大致分为三个阶段：

1.创建阶段

2.运行阶段

3.销毁阶段

生命周期三个阶段内的事件（函数，生命周期钩子）

1. 创建阶段的生命周期函数
   • beforeCreate( ) ：实例刚从内存中被创建出来，此时，data和methods属性还没有初始化好，就是（不能使用this来调用）
   • created( ) ：实例已经在内存中被创建好了，此时，data和methods初始化完成（可以用this来调用），但是还没有开始编译模板
   • beforeMount( ) ：此时，模板已经编译完成放在了内存中，但是还没有挂载到页面中（这时获取页面的值是没有的）
   • mounted( ) ：此时，已经将编译好的模板挂载到指定的容器上，页面已经可以显示了
2. 运行阶段的生命周期函数
   • beforeUpdate( ) ：此时data数据已经被更新了，但是页面上的数据还是旧的，因为还没有开始重新渲染dom节点到页面
   • updated( ) ：此时实例已经更新完毕，data数据的值与页面显示的值一致，页面已经重新渲染完成
3. 销毁阶段的生命周期函数
   • beforeDestroy( ) ：实例在被销毁之前调用，此时实例仍然可以调用
   • destroyed( ) ：vue实例已经被销毁，（不能调用this）

Vue流程图理解：