【十八】vue生命周期

【十八】vue生命周期

前言

本篇博客简单了解一下vue的生命周期，以及其执行顺序和注意点。

面试回答

vue生命周期：Vue生命周期主要有四个阶段，分别是初始化、挂载、更新、销毁。在初始化阶段的钩子函数有beforeCreate、create，beforeCreate则一般是插件中去实现响应式数据的钩子函数，而create钩子函数中DOM节点尚未渲染，因此拿不到DOM节点。在挂载阶段的钩子函数有beforeMounted、mounted，此时DOM节点已经渲染。更新阶段有beforeUpdate以及Update，这两个平时倒是用的比较少。最后的销毁阶段有beforeDestroy和destroy两个钩子函数，这两个钩子函数一般用于销毁定时器、释放DOM引用、解绑监听事件，来避免性能浪费。如果是父子组件，则触发生命周期的顺序稍有差异。在初始化、挂载阶段，首先执行父组件的beforeCreate、created、beforeMounted，然后执行子组件的beforeCreate、created、beforeMount、mounted，最后再执行父组件的mounted。在更新阶段，则是父beforeUpdate、子beforeUpdate、父update、子update的执行顺序。在销毁阶段，是父beforeDestroy、子beforeDestroy、子destory、父destory的执行顺序。

知识点

1.生命周期阶段

vue生命周期主要有四个阶段

初始化阶段：为Vue实例初始化一些事件、属性和响应式数据等，涉及beforeCreate、created钩子函数

挂载阶段：把模板渲染到真实的DOM节点上，以及数据变更时执行更新操作，涉及beforeMount、mouted钩子函数

更新阶段：数据更新时调用相关的钩子函数，涉及beforeUpdate、updated钩子函数

销毁阶段：把组件实例从父组件中删除，并取消依赖监听和事件监听，涉及beforeDestory、destoryed钩子函数

1. beforeCreate：在实例初始化之后，数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用。
2. created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el属性目前不可见。
3. beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
4. mounted：el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。
7. beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
9. activated：keep-alive 组件激活时调用
10. deactivated：keep-alive 组件停用时调用（PS：与组件相关，关于 keep-alive 会在讲解组件时介绍）。

PS：如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内（PS：注意 mounted 不会承诺所有的子组件也都一起被挂载。 如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：。

2.钩子函数执行顺序

加载渲染过程：

1. 父 beforeCreate
2. 父 created
3. 父 beforeMount
4. 子 beforeCreate
5. 子 created
6. 子 beforeMount
7. 子 mounted
8. 父 mounted

更新过程：

1. 父 beforeUpdate
2. 子 beforeUpdate
3. 子 updated
4. 父 updated

销毁过程：

1. 父 beforeDestroy
2. 子 beforeDestroy
3. 子 destroyed
4. 父 destroyed

最后

走过路过，不要错过，点赞、收藏、评论三连~