2019.07.26
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。今天跟大家讲讲Vue的生命周期函数。
1.beforeCreate
数据初始化之前,此时Vue实例在内存中被创建,但还未初始化data和methods属性。
2.created
数据初始化之后,Vue实例已经被创建完成,此时data和methods也被创建,但是还未进行模板编译。
3.boforeMount
此时,模板编译已完成,但还未挂载到页面中。
4.mounted
此时,已经将编译好的模板添加到了页面指定的容器中。
5.beforeUpdate
状态更新之前执行此函数,此时data中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点。
6.updated
实例更新完毕之后调用此函数,此时data中的状态值和界面上显示的数据都已更新,界面已经被重新渲染好了。
7.beforeDestroy
实例销毁之前调用,在这一步,实例仍然完全可用。
8.destroyed
Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会被解除绑定,所有事件监听器都会被移除,所有的子实例也会被销毁。