vue生命周期详解

Posted 2023-03-20

参考技术A vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

vue生命周期包括四个阶段，8个钩子函数，作用在某个阶段给你一个做某些处理的机会。

beforeCreate、created、beforeMount，mounted

beforecreate：可以在这加个loading事件，在加载实例的时候触发；
created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
mounted：挂在元素，获取到DOM节点；
updated：如果对数据统一处理，在这里写上相应函数；
beforeDestory：可以做一个确认停止事件的确认框nextTick，更新数据后立即操作dom；

created不能操作DOM节点，mounted可以操作DOM节点；

created/beforeMount/mounted

创建前/后：在beforeCreated阶段，vue实例的挂载完el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会在触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。