Vue全家桶之 生命周期「建议收藏」

大家好，欢迎来到IT知识分享网。

Vue实例的生命周期

1、什么是vue的生命周期？

【1】、定义： 指的就是vue实例在页面中创建到销毁的整个过程

【2】、vue生命周期钩子（vue生命周期函数）

特点： 伴随着vue实例生命周期过程中自动触发的，不需要人为手动触发

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

1、初始化阶段（4）：

【1】beforeCreate ————————————–Vue初始化阶段触发的第一个生命周期函数

（在这个函数执行时Vue对象仅仅完成自身内部事件和生命周期函数的注入）

【2】created ——————————————— Vue初始化阶段触发的第二个生命周期函数

（在这个函数执行时Vue对象已经存在自身内部事件和生命周期函数，还包括自定义的data、methods、computed…）

【3】beforeMount ————————————Vue初始化阶段触发的第三个生命周期函数

（这个函数执行的时候, el执行html还是一个原始模板，还没有完成数据渲染工作）

【4】mounted —————————————- Vue初始化阶段触发的第四个生命周期函数

（这个函数在执行的时候，此时vue会根据模板创建虚拟dom 并进行数据渲染 ，最后将虚拟dom 替换 el）

——————————————全部Vue初始化完成了 ——————————————

2、运行阶段：

【5】beforeUpdate ——————————— Vue实例中的数据发生变化，会先触发这个函数 ( 当有数据变化的时候才能触发 )

(在这个函数触发时 ，vue实例中data的数据已经变化 ， 但是页面数据还没有替换 )

【6】update —————————————— data 数据与页面数据保持一致

（ 此时 vue 实例中 data 的数据和 页面 的数据完全一致）

3、销毁阶段：

【7】beforeDestroy —————————— 销毁时第一个生命周期函数

（这个函数执行时候，vue实例还没有销毁，此时vue的所有特性都是存在的）

【8】destroyed ————————————-销毁时第二个生命周期函数，这个函数执行时Vue实例已经彻底销毁

调用 app. $ destroy ( )，销毁后，双向绑定机制就没有了