029-81773686

宏 · 新闻

当前位置: 首页 > 宏 · 新闻宏博观点  

vue生命周期函数

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实例指示的所有东西都会被解除绑定,所有事件监听器都会被移除,所有的子实例也会被销毁。


精彩案例