【Vue3】组件生命周期

news2024/11/28 19:44:25

【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/，观察浏览器控制台中的日志打印。
启动日志
从日志中可以看出，先执行根组件创建和 挂载前，在 根组件挂载过程中 执行子组件的创建和挂载，当子组件 挂载完毕 后才触发根组件 挂载完毕。