完整的生命周期可以在官网中查看生命周期图示
这边列举了一些常用的生命周期钩子函数,这些生命钩子将按照下图的顺序进行执行
挂载前-onBeforeMount
组件挂载前,此时组件dom树还不能访问,基本等同于直接在setup中。
在此初始化数据、发送网络请求或执行其他需要在组件挂载之前立即执行的逻辑。
onBeforeMount(() => {
console.log("挂载前-onBeforeMount")
})
挂载后-onMounted
组件挂载后,此时组件已经准备完成,可以访问组件dom树。
一开始需要获取组件dom、初始化第三方库、发送网络请求等,在此使用
onMounted(() => {
console.log("挂载后-onMounted")
})
更新后-onUpdated
当因为响应式数据更新,触发组件dom刷新触发。
不要在此修改响应式数据,可能会导致无限循环如果要改变组件状态,通常使用计算属性或侦听器。
在这个阶段,可以访问到更新后的DOM和数据,并进行一些相应操作。但是这些更新可能是由不同的状态变更导致的,如果需要在某个特定的状态更改后访问更新后的 DOM需使用nextTick
onUpdated(() => {
console.log("更新后-onUpdated")
})
卸载前-onBeforeUnmount
组件即将卸载,现在功能仍然是完整的
可以用于执行一些在组件卸载之前需要完成的操作,例如清理定时器、取消订阅或释放资源等。
onBeforeUnmount(() => {
console.log("卸载前-onBeforeUnmount")
})
卸载后-onUnmounted
子组件已卸载,响应式作用已停止。此时无法访问组件dom树。
可以用于执行一些在组件卸载之后需要完成的操作,例如发送请求、记录日志或执行其他需要在组件卸载之后立即执行的逻辑。
onUnmounted(() => {
console.log("卸载后-onUnmounted")
})
function handleClick() {
count.value++
nextTick(() => { //修改完状态想要马上获取更新后的状态使用nextTick
console.log("触发点击事件", document.getElementById('box').innerText)
})
}
缓存组件的钩子
组件默认是不缓存的,当销毁后重新加载,它的数据将会初始化。
我们可以通过KeepAlive标签来缓存组件。
组件被缓存后不会被真正销毁,当重新加载时,数据状态将会被恢复。
// 组件fourClass将被缓存
<KeepAlive>
<fourClass v-if="isShow"></fourClass>
</KeepAlive>
组件dom插入后-onActivated
当组件被缓存后,仅在首次渲染时会触发挂载事件,之后切换isShow的状态不会再次触发挂载事件,但组件dom仍然会正常加载。
此时可以使用onActivated来替代挂载事件。
onActivated(()=>{
console.log("dom插入后")
})
组件dom移除时-onDeactivated
当组件被缓存时,即使isShow的状态改为false,也不会触发卸载事件,但组件dom仍然会正常移除。
此时可以使用onDeactivated来替代卸载事件。
onDeactivated(()=>{
console.log("dom移除时-onDeactivated")
})