版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82820619
每个Vue实例都有个完整的生命周期,也就是Vue实例从创建到销毁的整个过程,实际上在这个过程中Vue的实例经历了很多变化
更多精彩
- 更多技术博客,请移步 asing1elife’s blog
解读生命周期图例
每个钩子函数的触发时间
- beforeCreate
- 在实例初始化之前被调用
- 数据观测和初始化事件都还没开始
- created
- 实例已经创建完之后被调用
- 此处已经完成数据观测和初始化事件[数据、方法的运算,watch/event回调]
- beforeMount
- 在对象挂载之前被调用
- 相关联的render函数首次被执行
- mounted
-
new Vue()
声明中的el
被vm.$el
替换,并挂载到实例上之后,调用此钩子 - 在整个生命周期中只执行一次,即时之后实例被update
-
- beforeUpdate
- 数据更新时被调用
- 此操作发生在虚拟DOM重新渲染和打补丁之前
- 可在该钩子中对状态做进一步更改,此时不会触发重新渲染,而是直接执行本次渲染
- updated
- 虚拟DOM重新渲染和打补丁之后被调用
- 该钩子被调用时,组件的DOM元素已经被更新,理论上可以在此时对DOM进行操作,但不推荐在此时更改实例状态,因为可能会导致无限循环
- 该钩子在服务器首次渲染实例时不会被调用
- beforeDestroy
- 实例销毁之前被调用
- 在此时实例依旧可以被调用
- destroyed
- 实例销毁之后被调用
- 该钩子执行完毕之后会带来以下操作
- 实例所指向的所有属性、方法都会解绑
- 所有的监听事件都会被移除
- 所有的子实例也会被销毁
- 该钩子在服务器首次渲染实例时不会被调用