vue生命周期

431 阅读2分钟

vue的声明周期

vue的生命周期分为八个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后) 以及activated(活动中)和deactivated(不活动)

生命周期是代码执行的阶段,是时间轴上的时间点,你可以在这个时间点上做一些你想做的事(写代码)

beforeCreate

实例创建前:这个阶段实例的data、methods是读不到的 ,很少用到

data 和 $el 都没有初始化 全部为 undefined

created

在实例创建完成后被立即调用,挂载阶段还没开始,$el 属性目前不可见。

data 初始化完成,但 $el 没有初始化

常用场景:

  1. 异步请求适合在created钩子中调用
  2. init()初始化

beforeMount

在挂载之前,首次调用render
data 和 $el 均已存在,但 DOM 为虚拟DOM 仍未完全加载

mounted

数据全部在dom树上渲染完毕,在这个钩子上对dom进行操作 el 被新创建的vm.$el 替换,并挂载到实例上去之后调用该钩子,可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom
data 和 $el 均已存在,并且 DOM 加载完成 ,完成挂载

beforeUpdate

数据更新时调用,但不进行DOM重新渲染,在数据更新时DOM没渲染前可以在这个钩子里进行状态处理

updated

数据更新完毕,如果要对数据更新做统一处理可以在updated钩子中进行,不过你最好还是用watch和computed vue进行异步dom更新的时候会进入队列,不会立即重新渲染,只有下一次执行的时候才有效,如果你想在数据变化后doSomeThing操作dom,请使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

beforeDestory

实例销毁之前调用。在这一步,实例仍然完全可用。。

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

activated

keep-alive 组件激活时调用。

deactivated

keep-alive 组件停用时调用。

nextTick

针对单一事件更新数据后立即操作dom