Vue生命周期

我们新手学习Vue周明周期时会有一个疑惑,我们知道了常用的8个函数,但是它们都在什么地方调用呢? 下面我放入了一张 Vue声明周期解析图,并写上了对每个生命周期函数的简单理解,希望能够给你们带来帮助!

我的理解:

1. created(创建之前)：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。
2. created(创建之后)：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3. beforeMount(挂载之前)：在挂载开始之前调用，相关的 render函数首次调用。
4. mounted(挂载之后): el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。
5. beforeUpdate(更新之前)：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。
6. updated(更新之后)：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。
7. beforeDestroy(销毁之前)：在实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed(销毁之后)：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

当使用组件的kep- alive功能时，增加以下两个周期。

• activated在keep- alive组件激活时调用
• deactivated在keep-live组件停用时调用

Vue2.5.0版本新增了一个周期钩子：ErrorCaptured，当捕获一个来自子孙组件的错误时调用。