Vue2 的生命周期
#Vue2 的生命周期
是什么
vue 实例或者组件 从创建 到使用 到最后销毁的 这个过程 叫做 vue 的生命周期函数。
生命周期有哪些?
Vue 2 文档写得很清楚,红色空心框中的文字皆为生命周期钩子:
BeforeCreate 函数 在 vue 实例初始化前被调用 ,这个时候的 this 不能用,在 data 中的数据 methods 的方法 还有 watcher 中的事件 都获取不到
Created 函数 vue 实例已经创建完成了,实例对象已经完成了,这时候可以访问 data 中的 数据 ,一级 methods 中的方法和 watcher 中的事件了,但是 不能操作 dom 节点
Beforemounte 函数 在 js 的数据挂载到 html 之前 调用 render 函数,第一次被调用
mounted 函数 挂载完毕(js 中的数据挂载到 html 之后) 这时候可以使用 dom 节点 ,一些需要 dom 的操作这时候才可以进行
BeforeUpdate 函数 组件更新前(vue 中的 data 数据发生改变之前) 也就是说数据更新了,但是 vue 中的组件(事件)对应 dom 内部中的数据没有变,所以说叫做组件更新前
Updated 函数 组件更新完成之后的操作(vue 中的 data 数据发生改变之后) vue 中的组件(事件)已经对应 dom 内部中的数据了
beforeDestroy 函数 vue 实例销毁之前调用 ,在这个时候实例还是可以用的
Destroy 函数 摧毁阶段 vue 的 生命周期结束 ,vue 实例不能用了
便于记忆:
- create x 2 (before + ed) - SSR
- mount x 2
- update x 2
- destroy x 2
拓展:还有三个写在钩子列表里:
- activated
- deactivated
- errorCaptured
数据请求放在那个周期
数据请求放在 mounted 里面,因为放在其他地方都不合适。