[JavaScript知识库]Vue 的生命周期总结

Vue生命周期包含四个阶段

?1、创建阶段（create）

?在这个阶段会创建data对象，为每个变量自动添加访问器属性，引入并打散methods。

2、挂载阶段阶段（mount）

?扫描真实的DOM树，生成虚拟DOM树，并首次更新页面元素内容。

3、更新阶段（update）

?这个阶段只有在更新data中的数据并影响到页面显示时，才触发。通过访问器属性修改属性值，触发通知函数，扫描虚拟DOM树，只更新受影响的元素。

4、销毁阶段（destroy）

在主动调用vm.$destroy() 函数后触发。 但是只是解除了new? Vue（）对象与界面之间的数据联系，但new Vue（）对象依然保留在内存中，且单击页面元素依然会修改new Vue（）中的数据。

使用vm.$mount("#app") 还能将旧的new Vue（）对象与页面重新建立联系，重新将数据更新到页面上。

生命周期钩子函数

? ? 在每个阶段前后都提供了一对回调函数，允许我们在特定的时机执行我们自定义的操作。当生命周期发展到某个阶段时，vue会自动调用对应的回调函数执行。

beforeCreate（）{..}? ?

没有data对象、访问器属性以及虚拟DOM树

created （）{...}

有data对象、访问器属性、无虚拟DOM树

beforeMount（） {...}

有data对象、访问器属性以及虚拟DOM树，但暂时未将data中数据加载到页面上显示。

mounted（）{....}

有data对象、访问器属性以及虚拟DOM树，同时data中数据加载到页面上显示。

beforeUpdate（）{}

updated（）{}

beforeDestroy（）{}

destroyed（）{}

$nextTick()

专门在Vue所有声明周期执行完之后才触发的一个回调函数，只要希望写在任何位置的自定义DOM操作都不会被Vue覆盖，就可以用$nextTick()