【Vue3】组件生命周期

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue 组件生命周期。

Vue 组件生命周期包含四个阶段：

• 创建
• 挂载
• 更新
• 销毁

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

阶段	Vue3 Hooks 函数	Vue2 Hooks 函数
创建 - 创建前	setup	beforeCreate
创建 - 创建完毕	setup	created
挂载 - 挂载前	onBeforeMount	beforeMount
挂载 - 挂载完毕	onMounted	mounted
更新 - 更新前	onBeforeUpdate	beforeUpdate
更新 - 更新完毕	onUpdated	updated
销毁 - 销毁前	onBeforeUnmounted	beforeDestroy
销毁 - 销毁完毕	onUnmounted	destroyed

Vue3 与 Vue2 生命周期 Hooks 函数的区别：

• Vue3 创建阶段对应 setup；
• Vue3 Hooks 函数名添加了 on 前缀；
• Vue3 挂载（Mount）和销毁（Unmount）对应的 Hooks 函数名相互对应。

本文主要演示 Vue3 生命周期 Hooks 函数代码。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 自定义功能组件 src/components/Demo.vue，在生命周期各阶段对应的 Hooks 函数中执行打印。

<template><div class="demo" @click="changeColor" :style="{ backgroundColor: color }"><h1>{{ title }}</h1></div>
</template><script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'const title = ref('自定义功能组件')
const color = ref('orange')function changeColor() {color.value = (color.value == 'orange') ? 'yellow' : 'orange'
}console.log('创建：', title.value)onBeforeMount(() => {console.log('挂载前：', title.value)
})onMounted(() => {console.log('挂载完毕：', title.value)
})onBeforeUpdate(() => {console.log('更新前：', title.value)
})onUpdated(() => {console.log('更新完毕：', title.value)
})onBeforeUnmount(() => {console.log('销毁（卸载）前：', title.value)
})onUnmounted(() => {console.log('销毁（卸载）完毕：', title.value)
})
</script>

5> 修改 Vue 根组件 src/App.vue，引用自定义功能组件，并在生命周期各阶段对应的 Hooks 函数中执行打印。

<template><div class="root"@click="changeColor":style="{ backgroundColor: color }"><h1>{{ title }}</h1><button @click="presence = !presence">隐藏/显示自定义功能组件</button><Demo v-if="presence" /></div>
</template><script setup lang="ts">
import Demo from './components/Demo.vue'
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'const title = ref('App组件')
const color = ref('blue')
const presence = ref(true)function changeColor() {color.value = (color.value == 'blue') ? 'green' : 'blue'
}console.log('创建：', title.value)onBeforeMount(() => {console.log('挂载前：', title.value)
})onMounted(() => {console.log('挂载完毕：', title.value)
})onBeforeUpdate(() => {console.log('更新前：', title.value)
})onUpdated(() => {console.log('更新完毕：', title.value)
})onBeforeUnmount(() => {console.log('销毁（卸载）前：', title.value)
})onUnmounted(() => {console.log('销毁（卸载）完毕：', title.value)
})
</script><style scoped lang="scss">
.root {padding: 20px;
}
</style>

注意：需要执行 npm install -D sass 命令安装 CSS 预处理器。

6> 执行命令 npm run dev，浏览器访问 http://localhost:5173/，观察浏览器控制台中的日志打印。

从日志中可以看出，先执行根组件 创建 和 挂载前，在 根组件挂载过程中 执行子组件的 创建 和 挂载，当子组件 挂载完毕 后才触发根组件 挂载完毕。

7> 点击根组件 <div> 区域，注意不要点击到子组件的 <div> 区域，观察日志打印。

可见只触发了根组件 更新。

8> 点击子组件的 <div> 区域，观察日志打印。

先触发子组件 更新，然后触发根组件 更新，因为默认 JS 事件冒泡。

9> 点击页面中 隐藏/显示自定义功能组件 按钮隐藏组件，观察日志打印。

首先触发根组件 更新前，在 根组件更新过程中 触发子组件 销毁（卸载），然后触发根组件 更新完毕。

10> 点击页面中 隐藏/显示自定义功能组件 按钮显示组件，观察日志打印。

首先触发根组件 更新前，在 根组件更新过程中 触发子组件 创建 和 挂载，子组件 挂载完毕 后触发根组件 更新完毕。