Vue 组件生命周期
Vue3 的组件生命周期可以概括为四个阶段：创建、挂载、更新、销毁。每个阶段都包含了一组钩子函数，用于在不同阶段执行特定的操作。
生命周期各阶段对应以下 Hooks 函数：
一、创建阶段
- setup()
- Vue3 引入的新生命周期函数，替代了 Vue2 的
beforeCreate和created。setup()在组件创建之前被调用，用于设置响应式数据、方法等。- 注意：
setup()中无法访问this，因为它在组件实例初始化之前执行。二、挂载阶段
- onBeforeMount()
- 组件挂载前调用，此时模板已编译成渲染函数，但尚未挂载到 DOM。
- onMounted()
- 组件挂载后调用，此时组件已渲染到 DOM 中，可以执行 DOM 相关的操作。
三、更新阶段
Vue3 组件在响应式数据变化时会进入更新阶段，这个阶段包括两个重要的钩子函数。
- onBeforeUpdate()
- 组件即将因为响应式数据变化而重新渲染前调用，可用于访问当前的 DOM 状态。
- onUpdated()
- 组件因为响应式数据变化而重新渲染后调用，可用于执行更新后的副作用操作。
四、销毁阶段
当 Vue 组件不再需要时，会进入销毁阶段，这个阶段包括两个钩子函数。
- onBeforeUnmount()
- 组件即将被卸载前调用，可用于执行清理操作，如取消事件监听器、清除定时器等。
- onUnmounted()
- 组件已卸载后调用，此时组件的所有指令都已解绑，所有事件监听器都已被移除，所有的子实例也都被销毁。
演示：
<template><div><p>我是组件</p><el-button @click="change">{{name}}</el-button><!-- <hr/><button @click="show = !show">隐藏/显示自定义功能组件</button><My v-if="show" />--></div>
</template><script setup>import{ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'//导入组件import My from './My.vue'const name=ref("mike");const show=ref(true)const change=()=>{//数据处理逻辑name.value = (name.value == 'mike') ? '麦克' : 'mike'}console.log('创建', name.value)//创建钩子onBeforeMount(() => {//创建之前是读不到dom的console.log("挂载之前",name.value)
});onMounted(() => {//创建完成之后console.log("挂载完毕",name.value)
});//更新
onBeforeUpdate(() => {//获取的是更新之前的domconsole.log("更新之前",name.value);
});onUpdated(() => {console.log("更新完毕",name.value);
});
//销毁
onBeforeUnmount(() => {console.log("销毁之前",name.value);
});onUnmounted(() => {console.log("销毁完毕",name.value);
});</script><style>.el-button{width:150px;}
</style>
演示效果：
1、运行后
2、单击按钮
3、重新保存
总结：
Vue3 的组件生命周期为开发者提供了更精细的控制能力，通过合理使用这些生命周期钩子，可以编写出更加高效、可维护的 Vue 应用。希望本文能帮助读者更好地理解 Vue3 的组件生命周期，并在实际开发中灵活运用。