Vue3生命周期钩子如何全面应用详解？

更新于

2026-09-19 00:03:42

49阅读来源：SEO教程

内容介绍
文章标签
相关推荐

本文共计2250个文字，预计阅读时间需要9分钟。

Vue3的生命周期钩子函数详解：全面掌握Vue3生命周期的应用+Vue作为一款流行的JavaScript框架，一直以来都受到广泛关注和喜爱。随着Vue3的发布，其生命周期钩子函数也经历了一些变化。以下是Vue3生命周期钩子函数的详细介绍：

1. `beforeCreate`：在实例初始化之后、数据观测和事件配置之前被调用。在这个阶段，实例已完成数据观测、属性和方法的运算，这时还没有开始调用任何生命周期钩子，`$el` 属性目前不可见。

2. `created`：在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，`$el` 属性目前不可见。这个钩子在服务器端渲染期间不被调用。

3. `beforeMount`：在挂载开始之前被调用：相关的 `render` 函数首次被调用。该钩子在服务器端渲染期间不被调用。

4. `mounted`：在 `el` 被新创建的 `vm.$el` 替换，并挂载到实例上去之后调用该钩子。如果 `root` 实例挂载了一个文档内元素，当 `mounted` 被调用时 `vm.$el` 在文档内可见。

5. `beforeUpdate`：数据更新时调用，发生在虚拟DOM打补丁之前。这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

6. `updated`：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。

7. `beforeDestroy`：实例销毁之前调用。在这一步，实例仍然完全可用。

8. `destroyed`：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

通过熟练掌握这些生命周期钩子函数，开发者可以更好地控制组件的创建、更新和销毁过程，从而实现复杂的业务逻辑。

Vue3中的生命周期钩子函数详解：全面掌握Vue3生命周期的应用

Vue作为一款流行的JavaScript框架，一直以来都受到广泛的关注和热爱。而随着Vue3的发布，其生命周期钩子函数也有了一些变化和优化。了解Vue3的生命周期钩子函数，对于前端开发人员而言，是非常重要的。本文将详细介绍Vue3中的生命周期钩子函数及其应用。

Vue3中的生命周期钩子函数

Vue3中的生命周期钩子函数同样分为四个阶段：创建、挂载、更新、销毁。下面我们将详细介绍Vue3中这四个阶段的生命周期钩子函数及其使用方法。

创建阶段

在创建阶段中，Vue3提供了两个生命周期钩子函数：setup()和onBeforeMount()。

setup()

setup()是Vue3引入的新的生命周期钩子函数，在Vue3中代码中必须要有这个函数，setup()函数会在组件初始化的时候执行，其主要目的是用于设置组件的数据和方法等。

setup()函数的使用方式与Vue2.x中的data和methods类似，我们可以在setup()函数中声明组件需要使用的数据和方法，如下所示：

<template> <div>{{ message }}</div> </template> <script> export default { setup() { const message = 'Hello, Vue3!' return { message } } } </script>

上面的例子中，我们使用了const关键字声明了一个名为message的变量，该变量的值为'Hello, Vue3!'，然后将其返回，在模板中使用{{ message }}就可以渲染出文本内容。

onBeforeMount()

onBeforeMount()生命周期钩子函数与Vue2.x中的beforeMount()类似，表示组件在挂载到DOM之前的事件，它会在setup()函数执行之后执行。

下面是一个使用onBeforeMount()的例子：

<template> <div>{{ message }}</div> </template> <script> export default { setup() { const message = 'Hello, Vue3!' return { message } }, onBeforeMount() { console.log('组件挂载前执行') } } </script>

上面的例子中，onBeforeMount()函数会在组件模板挂载到DOM之前执行，在控制台输出 组件挂载前执行。

挂载阶段

在挂载阶段中，Vue3提供了两个生命周期钩子函数：onMounted()和onBeforeUpdate()。

onMounted()

onMounted()与Vue2.x中的mounted()类似，表示组件挂载到DOM后的事件，它会在setup()函数执行之后执行。

下面是一个使用onMounted()的例子：

<template> <div ref="box">{{ message }}</div> </template> <script> import { onMounted, ref } from 'vue' export default { setup() { const message = ref('Hello, Vue3!') onMounted(() => { console.log('组件已经挂载到DOM上') console.log(this.$refs.box) }) return { message } } } </script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onMounted()函数，在组件挂载之后输出 组件已经挂载到DOM上，以及组件中的div元素的引用。

onBeforeUpdate()

onBeforeUpdate()与Vue2.x中的beforeUpdate()类似，表示组件在更新之前的事件，它会在组件的状态发生改变之后、视图开始重新渲染之前执行。

下面是一个使用onBeforeUpdate()的例子：

<template> <div>{{ message }}</div> <button @click="changeMessage">修改消息</button> </template> <script> import { onBeforeUpdate, ref } from 'vue' export default { setup() { const message = ref('Hello, Vue3!') const changeMessage = () => { message.value = 'Hello, World!' } onBeforeUpdate(() => { console.log('组件即将更新，当前消息为：' + message.value) }) return { message, changeMessage } } } </script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onBeforeUpdate()函数，在组件更新之前输出当前消息的值。

更新阶段

在更新阶段中，Vue3提供了两个生命周期钩子函数：onUpdated()和onDeactivated()。

onUpdated()

onUpdated()与Vue2.x中的updated()类似，表示组件在更新之后的事件，它会在组件的状态发生改变之后、视图重新渲染之后执行。

下面是一个使用onUpdated()的例子：

<template> <div>{{ message }}</div> <button @click="changeMessage">修改消息</button> </template> <script> import { onUpdated, ref } from 'vue' export default { setup() { const message = ref('Hello, Vue3!') const changeMessage = () => { message.value = 'Hello, World!' } onUpdated(() => { console.log('组件已更新，当前消息为：' + message.value) }) return { message, changeMessage } } } </script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUpdated()函数，在组件更新之后输出当前消息的值。

onDeactivated()

onDeactivated()与Vue2.x中的deactivated()类似，表示组件被激活后的事件，它会在组件从激活状态切换到非激活状态时执行。

下面是一个使用onDeactivated()的例子：

<template> <div>{{ message }}</div> </template> <script> import { onDeactivated, ref } from 'vue' export default { setup() { const message = ref('Hello, Vue3!') onDeactivated(() => { console.log('组件被激活') }) return { message } } } </script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onDeactivated()函数，在组件被激活时输出 组件被激活。

销毁阶段

在销毁阶段中，Vue3提供了一个生命周期钩子函数：onUnmounted()。

onUnmounted()

onUnmounted()与Vue2.x中的beforeDestroy()类似，表示组件销毁的事件，它会在组件被销毁之前执行。

下面是一个使用onUnmounted()的例子：

<template> <div>{{ message }}</div> </template> <script> import { onUnmounted, ref } from 'vue' export default { setup() { const message = ref('Hello, Vue3!') onUnmounted(() => { console.log('组件被销毁') }) return { message } } } </script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUnmounted()函数，在组件被销毁时输出 组件被销毁。

总结

本文介绍了Vue3中的生命周期钩子函数，它们包括创建阶段的setup()和onBeforeMount()，挂载阶段的onMounted()和onBeforeUpdate()，更新阶段的onUpdated()和onDeactivated()，以及销毁阶段的onUnmounted()。掌握这些生命周期钩子函数，可以帮助我们更好地理解Vue3组件的生命周期，并且在开发Vue3应用时更加得心应手。

标签：生命周期钩子函数详解