Skip to main content

Vue2 的生命周期

#Vue2 的生命周期

是什么

vue 实例或者组件 从创建 到使用 到最后销毁的 这个过程 叫做 vue 的生命周期函数。

生命周期有哪些?

Vue 2 文档写得很清楚,红色空心框中的文字皆为生命周期钩子:

  1. BeforeCreate 函数 在 vue 实例初始化前被调用 ,这个时候的 this 不能用,在 data 中的数据 methods 的方法 还有 watcher 中的事件 都获取不到

  2. Created 函数 vue 实例已经创建完成了,实例对象已经完成了,这时候可以访问 data 中的 数据 ,一级 methods 中的方法和 watcher 中的事件了,但是 不能操作 dom 节点

  3. Beforemounte 函数 在 js 的数据挂载到 html 之前 调用 render 函数,第一次被调用

  4. mounted 函数 挂载完毕(js 中的数据挂载到 html 之后) 这时候可以使用 dom 节点 ,一些需要 dom 的操作这时候才可以进行

  5. BeforeUpdate 函数 组件更新前(vue 中的 data 数据发生改变之前) 也就是说数据更新了,但是 vue 中的组件(事件)对应 dom 内部中的数据没有变,所以说叫做组件更新前

  6. Updated 函数 组件更新完成之后的操作(vue 中的 data 数据发生改变之后) vue 中的组件(事件)已经对应 dom 内部中的数据了

  7. beforeDestroy 函数 vue 实例销毁之前调用 ,在这个时候实例还是可以用的

  8. Destroy 函数 摧毁阶段 vue 的 生命周期结束 ,vue 实例不能用了

便于记忆:

  1. create x 2 (before + ed) - SSR
  2. mount x 2
  3. update x 2
  4. destroy x 2

拓展:还有三个写在钩子列表里:

  1. activated
  2. deactivated
  3. errorCaptured

数据请求放在那个周期

数据请求放在 mounted 里面,因为放在其他地方都不合适。

参考文章

https://segmentfault.com/q/1010000010643393