vue生命周期

vue生命周期

1.vue生命周期的作用？

vue 的生命周期中有多个钩子函数，让咱们在控制整个 vue 实例的过程当中，更容易造成良好的逻辑。

2.对vue生命周期的理解，分别有哪些阶段？

vue生命周期分为8个阶段，创建前，创建后，载入前，载入后，销毁前，销毁后

1. 创建前
   beforeCreated 阶段，vue 实例的挂载元素$el 和数据对象 data 都为 undefined，还未初始化。
2. 创建后
   created 阶段，vue 实例的数据对象 data 有了，$el 还没有。
3. 载入前
   beforeMount 阶段， vue 实例的$el 和 data 都初始化了， 但还是挂载之前为虚拟的 dom 节点， data.message 还未替换。
4. 载入后
   在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
5. 更新前
   当 data 变化时，会触发 beforeUpdate 方法。
6. 更新后
   当 data 变化后，会触发 updated 方法。
7. 销毁前
   beforeDestory 阶段，在执行 destroy 方法时会触发。
8. 销毁后
   destoryed 阶段，在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。
9. dctivated阶段，被 keep-alive 缓存的组件激活时调用。
10. deactivated阶段，被 keep-alive 缓存的组件失活时调用。
11. errorCaptured阶段，在捕获一个来自后代组件的错误时被调用。

3.vue 实例生命周期钩子函数具体适用的场景？

1. beforecreate:可以在这加个loading事件，在加载实例时触发
2. created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用。
3. mounted : 挂载元素，获取到 DOM 节点。
4. updated : 如果对数据统一处理，在这里写上相应函数。
5. beforeDestroy : 可以做一个确认停止事件的确认框。

4.第一次加载时会触发哪几个钩子？

会触发
beforeCreate;
created;
beforeMount;
mounted;