一、创建前(beforeCreate
)
此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM
节点。
二、创建后(created
)
在这个阶段vue
实例已经创建,仍然不能获取DOM
元素。
三、载入前(beforeMount
)
在这一阶段,我们虽然依然得不到具体的DOM
元素,但vue
挂载的根节点已经创建,
下面vue
对DOM
的操作将围绕这个根元素继续进行;
beforeMount
这个阶段是过渡性的,一般一个项目只能用到一两次。
四、载入后(mounted
)
mounted
是平时我们使用最多的函数了,一般我们的异步请求都写在这里。
在这个阶段,数据和DOM
都已被渲染出来。
五、更新前(beforeUpdate
)
在这一阶段,vue
遵循数据驱动DOM
的原则。
beforeUpdate
函数在数据更新后虽然没立即更新数据,但是DOM
中的数据会改变,这是Vue
双向数据绑定的作用。
六、更新后(updated
)
在这一阶段DOM
会和更改过的内容同步。
七、销毁前(beforeDestroy
)
在上一阶段Vue
已经成功的通过数据驱动DOM
更新,当我们不再需要vue
操纵DOM
时,
就要销毁Vue
,也就是清除vue
实例与DOM
的关联,调用destroy
方法可以销毁当前组件。
在销毁前会触发beforeDestroy
钩子函数。
八、销毁后(destroyed
)
在销毁后,会触发destroyed
钩子函数。
还有在组件之间切换的时候都会请求一些请求过的数据,每次请求都会导致重复渲染影响性能。
这些数据可以存到缓存。
此时使用keep-alive
将组建包裹起来。
但这样以上八种生命周期钩子将失效。
取而代之的时activate
和deactivated
activate:
是在被包裹组建被激活的状态下使用的生命周期钩子
deactivated:
在被包裹组件停止使用时调用