Vue生命周期

版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82820619

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

解读生命周期图例

Vue生命周期图例

每个钩子函数的触发时间

1. beforeCreate
   • 在实例初始化之前被调用
   • 数据观测和初始化事件都还没开始
2. created
   • 实例已经创建完之后被调用
   • 此处已经完成数据观测和初始化事件[数据、方法的运算，watch/event回调]
3. beforeMount
   • 在对象挂载之前被调用
   • 相关联的render函数首次被执行
4. mounted

   • new Vue()

     声明中的

     el

     被

     vm.$el

     替换，并挂载到实例上之后，调用此钩子
   • 在整个生命周期中只执行一次，即时之后实例被update
5. beforeUpdate
   • 数据更新时被调用
   • 此操作发生在虚拟DOM重新渲染和打补丁之前
   • 可在该钩子中对状态做进一步更改，此时不会触发重新渲染，而是直接执行本次渲染
6. updated
   • 虚拟DOM重新渲染和打补丁之后被调用
   • 该钩子被调用时，组件的DOM元素已经被更新，理论上可以在此时对DOM进行操作，但不推荐在此时更改实例状态，因为可能会导致无限循环
   • 该钩子在服务器首次渲染实例时不会被调用
7. beforeDestroy
   • 实例销毁之前被调用
   • 在此时实例依旧可以被调用
8. destroyed
   • 实例销毁之后被调用
   • 该钩子执行完毕之后会带来以下操作
     • 实例所指向的所有属性、方法都会解绑
     • 所有的监听事件都会被移除
     • 所有的子实例也会被销毁