Vue3快速上手（十三）Vue3的生命周期

最新推荐文章于 2024-04-18 16:53:09 发布

一掬净土

最新推荐文章于 2024-04-18 16:53:09 发布

阅读量436

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端生命周期 vue3

本文链接：https://blog.csdn.net/wdy_2099/article/details/135693471

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue2和Vue3的生命周期函数，包括创建、挂载、更新和销毁阶段的8个和7个函数。通过实例展示了Vue3中setup和相关钩子的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

一、Vue2的生命周期

生命嘛，总是和人类比。从出生到死亡的整个过程。
vue2的生命周期是分为4个阶段8个函数
具体如下：

生命周期	函数
创建	beforeCreate(), created()
挂载	beforeMount(), mounted()
更新	beforeUpdate(), updated()
销毁	beforeDestroy()，destroyed()

二、Vue3的生命周期

vue2的生命周期是分为4个阶段7个函数
具体如下：

生命周期	函数
创建	setup
挂载	onBeforeMount(), onMounted()
更新	onBeforeUpdate(), onUpdated()
销毁	onBeforeUnmount()，onUnmounted()

对比vue2基本是一样的，创建合并到了一起
通过代码查看下效果：

<template>
    <div class="person">
        <h3>姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>
        <button @click="updatePersonAge">修改age</button>
    </div>
</template>
<script lang='ts' setup name="Vue3life">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
let person = ref(
    {
        name: "李四",
        age: 99
    }
)
function updatePersonAge() {
    person.value.age += 1
}
console.log('创建');

onBeforeMount(() => {
    console.log('挂載前')
})
// 挂载完毕
onMounted(() => {
    console.log('挂载完毕')
})
// 更新前
onBeforeUpdate(() => {
    console.log('更新前')
})
// 更新完毕
onUpdated(() => {
    console.log('更新完毕')
})
// 卸载前
onBeforeUnmount(() => {
    console.log('卸载前')
})
// 卸载前
onUnmounted(() => {
    console.log('卸载完成');
})
</script>