Vue 组件生命周期（四）

Vue 组件生命周期

    Vue3 的组件生命周期可以概括为四个阶段：创建、挂载、更新、销毁。每个阶段都包含了一组钩子函数，用于在不同阶段执行特定的操作。

生命周期各阶段对应以下 Hooks 函数：

 

一、创建阶段

1. setup()
   • Vue3 引入的新生命周期函数，替代了 Vue2 的 beforeCreate 和 created。setup() 在组件创建之前被调用，用于设置响应式数据、方法等。
   • 注意：setup() 中无法访问 this，因为它在组件实例初始化之前执行。

二、挂载阶段

1. onBeforeMount()
   • 组件挂载前调用，此时模板已编译成渲染函数，但尚未挂载到 DOM。
2. onMounted()
   • 组件挂载后调用，此时组件已渲染到 DOM 中，可以执行 DOM 相关的操作。

三、更新阶段

    Vue3 组件在响应式数据变化时会进入更新阶段，这个阶段包括两个重要的钩子函数。

1. onBeforeUpdate()
   • 组件即将因为响应式数据变化而重新渲染前调用，可用于访问当前的 DOM 状态。
2. onUpdated()
   • 组件因为响应式数据变化而重新渲染后调用，可用于执行更新后的副作用操作。

四、销毁阶段

当 Vue 组件不再需要时，会进入销毁阶段，这个阶段包括两个钩子函数。

1. onBeforeUnmount()
   • 组件即将被卸载前调用，可用于执行清理操作，如取消事件监听器、清除定时器等。
2. 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(() => {
    //获取的是更新之前的dom
    console.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 的组件生命周期，并在实际开发中灵活运用。