The life cycle in Vue component programming can be understood as different functions that the component can execute in different time periods. These functions are also called hook functions.
The hook function is accompanied by the life cycle and is specifically exposed to the user to control the life cycle. Therefore, if we want to understand the life cycle, we need to understand the hook function.
In Vue3.x, the hook function has made some changes. Let's understand it through the following example framework.
<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>
Click the button to update the component
table of Contents
setup()
Execute before creating the component.
<script lang="ts">
// setup()不需要多余的import引入
import { ref, reactive, toRefs } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
const refData = toRefs(data);
return {
...refData,
};
},
};
onBeforeMount()
The component is executed before hanging on the page.
<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeMount } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onBeforeMount
onBeforeMount(() => {
console.log("2...onBeforeMount()组件挂在到页面之前执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onMounted()
The component is executed after hanging to the page.
<script lang="ts">
// 引入onMounted 钩子
import { ref, reactive, toRefs, onMounted } from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onMounted
onMounted(() => {
console.log("3...onMounted()组件挂在到页面之后执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onBeforeUpdate()
Execute before component update.
<script lang="ts">
// 引入onBeforeUpdate钩子
import { ref, reactive, toRefs, onBeforeUpdate} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onBeforeUpdate
onBeforeUpdate(() => {
console.log("4...onBeforeUpdate()在组件更新之前执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onUpdated()
Execute after component update.
<script lang="ts">
// 引入onUpdated钩子
import { ref, reactive, toRefs, onUpdated} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onUpdated
onUpdated(() => {
console.log("5...onUpdated()在组件更新之后执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onBeforeUnmount()
Execute before the component is uninstalled.
<script lang="ts">
// 引入onBeforeMount 钩子
import { ref, reactive, toRefs, onBeforeUnmount} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onBeforeUnmount
onBeforeUnmount(() => {
console.log("6...onBeforeUnmount()在组件卸载之前执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onUnmounted()
Execute after the component is uninstalled.
<script lang="ts">
// 引入onUnmounted钩子
import { ref, reactive, toRefs, onUnmounted} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onUnmounted
onUnmounted(() => {
console.log("7...onUnmounted()在组件卸载之后执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
onDeactivated()
Execute when the old component disappears during component switching.
<script lang="ts">
// 引入onDeactivated钩子
import { ref, reactive, toRefs, onDeactivated} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onDeactivated
onDeactivated(() => {
console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
Combine the above code and run it briefly
<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()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
onBeforeMount(() => {
console.log("2...onBeforeMount()组件挂在到页面之前执行");
});
onMounted(() => {
console.log("3...onMounted()组件挂在到页面之后执行");
});
onBeforeUpdate(() => {
console.log("4...onBeforeUpdate()在组件更新之前执行");
});
onUpdated(() => {
console.log("5...onUpdated()在组件更新之后执行");
});
onBeforeUnmount(() => {
console.log("6...onBeforeUnmount()在组件卸载之前执行");
});
onUnmounted(() => {
console.log("7...onUnmounted()在组件卸载之后执行");
});
onDeactivated(() => {
console.log("8...onDeactivated()在组件切换中老组件消失的时候执行");
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
<style>
</style>
Run it
- initialization
- Click the button to update the component
Reference material: https://www.bilibili.com/video/BV1L5411j7vj?p=7
Special hook function onRenderTriggered
The onRenderTriggered function has a special function that tracks the state of the component and returns a parameter to save these states. For example, let's take an example of updating the component state:
<script lang="ts">
// 引入onUpdated，onRenderTriggered钩子
import { ref, reactive, toRefs, onUpdated, onRenderTriggered} from "vue";
export default {
name: "App",
setup() {
console.log("1...setup()开始创建组件");
const data = reactive({
arr: ["Yes", "NO"],
selectOne: "",
selectOneFun: (index: number) => {
data.selectOne = data.arr[index];
},
});
//调用onUpdated
onUpdated(() => {
console.log("5...onUpdated()在组件更新之后执行");
});
//调用onRenderTriggered
onRenderTriggered((event) => {
console.log("9...onRenderTriggered()状态跟踪钩子函数");
console.log(event);
});
const refData = toRefs(data);
return {
...refData,
};
},
};
</script>
Click the button to update the component, you can see that the onRenderTriggered function is executed first, and then the onUpdated function is executed, and the onRenderTriggered function returns an object that contains the information of the component whose status is updated.
