当前位置：首页 > article >正文

Vue 组件生命周期（四）

article 2024/12/24 11:35:33

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(() => {
    //获取的是更新之前的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>