Vue生命周期

每个Vue实例都有个完整的生命周期,也就是Vue实例从创建到销毁的整个过程,实际上在这个过程中Vue的实例经历了很多变化

解读生命周期图例

Vue生命周期图例

每个钩子函数的触发时间

  1. beforeCreate
    • 在实例初始化之前被调用
    • 数据观测和初始化事件都还没开始
  2. created
    • 实例已经创建完之后被调用
    • 此处已经完成数据观测和初始化事件[数据、方法的运算,watch/event回调]
  3. beforeMount
    • 在对象挂载之前被调用
    • 相关联的render函数首次被执行
  4. mounted
    • new Vue() 声明中的 elvm.$el 替换,并挂载到实例上之后,调用此钩子
    • 在整个生命周期中只执行一次,即时之后实例被update
  5. beforeUpdate
    • 数据更新时被调用
    • 此操作发生在虚拟DOM重新渲染和打补丁之前
    • 可在该钩子中对状态做进一步更改,此时不会触发重新渲染,而是直接执行本次渲染
  6. updated
    • 虚拟DOM重新渲染和打补丁之后被调用
    • 该钩子被调用时,组件的DOM元素已经被更新,理论上可以在此时对DOM进行操作,但不推荐在此时更改实例状态,因为可能会导致无限循环
    • 该钩子在服务器首次渲染实例时不会被调用
  7. beforeDestroy
    • 实例销毁之前被调用
    • 在此时实例依旧可以被调用
  8. destroyed
    • 实例销毁之后被调用
    • 该钩子执行完毕之后会带来以下操作
      • 实例所指向的所有属性、方法都会解绑
      • 所有的监听事件都会被移除
      • 所有的子实例也会被销毁
    • 该钩子在服务器首次渲染实例时不会被调用