生命周期是什么
生命周期:一个对象从生成(new)到销毁(destory)的过程,就是这个vue实例的生命周期。
生命周期函数是在某个时刻会自动执行的函数。
每个vue在被创建时都要经过一系列的初始化过程,例如:创建实例、装载模板、渲染模板、数据监听、编译模板、将实例挂载到DOM并在数据变化是对DOM进行更新。在vue在初始化的过程中也会运行一些叫做生命周期钩子的函数,这时候用户可以在不同的阶段添加自己的代码。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
生命周期的三个阶段
三个阶段分别是:创建-->更新-->销毁
-
第一阶段:有四个钩子函数(beforeCreate、created、beforeMount、mounted)
-
第二阶段:有两个钩子函数(beforeUpdate、updated)
-
第三阶段:有两个钩子函数(beforeDestroy、destroyed)
生命周期的钩子函数
函数 | 调用时间 |
---|---|
beforeCreate | vue实例初始化之前调用 |
created | vue实例初始化之后调用 |
beforeMount | 挂载到DOM树之前调用 |
mounted | 挂载到DOM树之后调用 |
beforeUpdate | 数据更新之前调用 |
updated | 数据更新之后调用 |
beforeDestroy | vue实例销毁之前调用 |
destroyed | vue实例销毁之后调用 |
生命周期图示
要简单的理解这幅图的含义,我们可以根据图片上的注释去理解。