vue生命周期

 

Vue生命周期

【vue生命周期】：从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程伴随的事件，这些事件统称为生命周期

【vue生命周期钩子函数】：就是Vue对象生命周期的某个阶段执行的已定义的方法 = 生命周期事件的别名，生命周期钩子  =  生命周期函数  =  生命周期事件

【vue生命周期函数分类】：

                 - 创建期间的生命周期函数：

                          +  【beforeCreate】：（ 实例 Vue 对象之前执行 ）实例刚在内存中被创建出来，此时，data 和 methods 属性还没有初始化完成

                          +  【created】: （ Vue对象及其事件完全初始化 ）实例已经在内存中创建OK，此时， data 和 methods 属性创建OK，但此时还没有开始编译模板

                          +  【beforeMount】: （ 检查是否有任何模板可用，在DOM中呈现的对象，如果没有找到模板，那么将所有定义元素的外部HTML视为模板 ）此时模板编译完成， 但还没有挂载到页面中

                          +  【mounted】: （ DOM已准备就绪并放置在页面内 ）此时，将编译好的模板，挂载到页面制定的容器中显示

                 - 运行期间的生命周期函数：

                          +  【breforeUpdate】: ( 状态更新前执行的函数，更改已完成，但没有更新DOM ) 此时 data 中的状态值是最新的，但是页面上显示的数据还是旧的，因为此时还没有开始重新渲染 DOM 节点

                          +  【updated】: （ 实例更新完毕之后调用此函数 ，DOM的变化在界面中呈现），此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经都被重新渲染完成

                 - 销毁期间的生命周期函数：

                          +  【beforeDestroy】: 实例销毁之前调用， 在这一步，实例仍然完全可用

                          +  【destroyed】:  实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例都会被销毁。

【vue生命周期过程】：

【Vue生命周期钩子函数详解】：

【Vue生命周期图，表示挂钩顺序】：

文章参考链接：https://blog.youkuaiyun.com/mqingo/article/details/86031260

                         https://segmentfault.com/a/1190000014640577