??Vue組件化編程中的生命周期绩鸣，可以理解為組件在不同時間段能執(zhí)行的不同的函數(shù)，這些函數(shù)也叫鉤子函數(shù)纱兑。
??鉤子函數(shù)伴隨著生命周期呀闻，是專門暴露給用戶的，用來控制生命周期潜慎。因此捡多，我們想要理解生命周期，就需要理解鉤子函數(shù)铐炫。
??在Vue3.x中垒手，鉤子函數(shù)做了一些改動，我們通過下面的例子框架來了解它倒信。
<template>
<div>
<button
v-for="(item, index) in arr"
v-bind:key="index"
@click="selectOneFun(index)"
>
{{ index }}:{{ item }}
</button>
</div>
<div>你選擇了【{{ selectOne }}】</div>
</template>
<script lang="ts">
import { ref, reactive, toRefs } from "vue";
export default {
name: "App",
setup() {
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style>
</style>
在這里插入圖片描述
點擊按鈕可以更新組件
在這里插入圖片描述
setup()
??在創(chuàng)建組件之前執(zhí)行科贬。
<script lang="ts">
// setup()不需要多余的import引入
import { ref, reactive, toRefs } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
const refData = toRefs(data);
return {
...refData,
};
},
};
onBeforeMount()
??組件掛在到頁面之前執(zhí)行。
<script lang="ts">
// 引入onBeforeMount 鉤子
import { ref, reactive, toRefs, onBeforeMount } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onBeforeMount
onBeforeMount(() => {
console.log("2...onBeforeMount()組件掛在到頁面之前執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onMounted()
??組件掛在到頁面之后執(zhí)行鳖悠。
<script lang="ts">
// 引入onMounted 鉤子
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onMounted
onMounted(() => {
console.log("3...onMounted()組件掛在到頁面之后執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onBeforeUpdate()
??在組件更新之前執(zhí)行榜掌。
<script lang="ts">
// 引入onBeforeUpdate鉤子
import { ref, reactive, toRefs, onBeforeUpdate} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onBeforeUpdate
onBeforeUpdate(() => {
console.log("4...onBeforeUpdate()在組件更新之前執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onUpdated()
??在組件更新之后執(zhí)行。
<script lang="ts">
// 引入onUpdated鉤子
import { ref, reactive, toRefs, onUpdated} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onUpdated
onUpdated(() => {
console.log("5...onUpdated()在組件更新之后執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onBeforeUnmount()
??在組件卸載之前執(zhí)行乘综。
<script lang="ts">
// 引入onBeforeMount 鉤子
import { ref, reactive, toRefs, onBeforeUnmount} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onBeforeUnmount
onBeforeUnmount(() => {
console.log("6...onBeforeUnmount()在組件卸載之前執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onUnmounted()
??在組件卸載之后執(zhí)行唐责。
<script lang="ts">
// 引入onUnmounted鉤子
import { ref, reactive, toRefs, onUnmounted} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onUnmounted
onUnmounted(() => {
console.log("7...onUnmounted()在組件卸載之后執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onDeactivated()
??在組件切換中老組件消失的時候執(zhí)行。
<script lang="ts">
// 引入onDeactivated鉤子
import { ref, reactive, toRefs, onDeactivated} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onDeactivated
onDeactivated(() => {
console.log("8...onDeactivated()在組件切換中老組件消失的時候執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
合并一下上面的代碼并簡單運行一下
<template>
<div>
<button
v-for="(item, index) in arr"
v-bind:key="index"
@click="selectOneFun(index)"
>
{{ index }}:{{ item }}
</button>
</div>
<div>你選擇了【{{ selectOne }}】</div>
</template>
<script lang="ts">
import {
ref,
reactive,
toRefs,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onDeactivated,
} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
onBeforeMount(() => {
console.log("2...onBeforeMount()組件掛在到頁面之前執(zhí)行");
});
onMounted(() => {
console.log("3...onMounted()組件掛在到頁面之后執(zhí)行");
});
onBeforeUpdate(() => {
console.log("4...onBeforeUpdate()在組件更新之前執(zhí)行");
});
onUpdated(() => {
console.log("5...onUpdated()在組件更新之后執(zhí)行");
});
onBeforeUnmount(() => {
console.log("6...onBeforeUnmount()在組件卸載之前執(zhí)行");
});
onUnmounted(() => {
console.log("7...onUnmounted()在組件卸載之后執(zhí)行");
});
onDeactivated(() => {
console.log("8...onDeactivated()在組件切換中老組件消失的時候執(zhí)行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style>
</style>
運行一下
-
初始化
在這里插入圖片描述 -
點擊按鈕更新組件在這里插入圖片描述
特殊的鉤子函數(shù)onRenderTriggered
??onRenderTriggered函數(shù)有一個特殊的功能瘾带，會跟蹤組件的狀態(tài)鼠哥，并且返回一個參數(shù)保存這些狀態(tài)。比如我們以更新組件狀態(tài)舉一個例子：
<script lang="ts">
// 引入onUpdated看政，onRenderTriggered鉤子
import { ref, reactive, toRefs, onUpdated, onRenderTriggered} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()開始創(chuàng)建組件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//調(diào)用onUpdated
onUpdated(() => {
console.log("5...onUpdated()在組件更新之后執(zhí)行");
});
//調(diào)用onRenderTriggered
onRenderTriggered((event) => {
console.log("9...onRenderTriggered()狀態(tài)跟蹤鉤子函數(shù)");
console.log(event);
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
??點擊按鈕更新組件朴恳，可以看到先執(zhí)行了onRenderTriggered函數(shù)，后執(zhí)行了onUpdated函數(shù)允蚣，且onRenderTriggered函數(shù)返回了一個對象于颖，其中包含了狀態(tài)更新的組件的信息。
在這里插入圖片描述
