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()