vue3组合式api的七个生命周期

vue3组合式api的七个生命周期

<script setup>
console.log("setup");
onBeforeMount(() => {
	console.log("挂载前");
});
onMounted(() => {
	console.log("已挂载");
});
onBeforeUpdate(() => {
	console.log("更新前");
});
onUpdated(() => {
	console.log("已更新");
});
onBeforeUnmount(() => {
	console.log("卸载前");
});
onUnmounted(() => {
	console.log("已卸载");
});
</script>

个人理解：

1. setup():解析代码阶段。
2. onBeforeMount()：页面渲染dom元素前。
3. onMounted()：页面已渲染dom元素，此刻可操作dom。
4. onBeforeUpdate()：页面数据更新前，此时内部数据已经改变，只是页面上还没有更新。
5. onUpdated()：页面已更新数据。
6. onBeforeUnmount()：组件卸载前。
7. onUnmounted()：组件已卸载。

下面有一个测试代码案例，需要两个组件，一个是Test组件，一个是App组件

Test组件代码如下

<script setup>
import {
	ref,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted,
} from "vue";

const a = ref(1);
const el = ref();

console.log("setup");
onBeforeMount(() => {
	console.log("挂载前", el.value);
});
onMounted(() => {
	console.log("已挂载", el.value);
});
onBeforeUpdate(() => {
	console.log("更新前", el.value?.innerText);
});
onUpdated(() => {
	console.log("已更新", el.value?.innerText);
});
onBeforeUnmount(() => {
	console.log("卸载前", el.value);
});
onUnmounted(() => {
	console.log("已卸载", el.value);
});
</script>

<template>
	<button @click="a += 1">修改值</button>
	<div ref="el">{{ a }}</div>
</template>

App组件代码如下

<script setup>
import { ref } from "vue";
import Test from "/src/views/Test.vue";
const is = ref(true);
</script>

<template>
	<div>
		<button @click="is = !is">创建/销毁</button>
		<Test v-if="is" />
	</div>
</template>

展示