Vue 3 组件生命周期变化详解：不同阶段的影响和使用方法

狗蛋的博客之旅

已于 2023-05-21 14:32:07 修改

阅读量3k

点赞数 2

分类专栏： Vue3 文章标签： javascript 前端 vue.js

于 2022-10-02 15:25:02 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/127143242

版权

Vue3 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

部分数据来源：ChatGPT

简介

Vue 3相对于Vue 2有很多新特性和改进。其中之一就是对组件生命周期进行了一些更新和更改。在本篇文章中，我们将深入了解Vue 3中组件生命周期的变化及其在不同阶段的影响和使用方法。

组件生命周期的变化

在Vue 3中，组件生命周期与Vue 2中的生命周期在功能上是相同的，但是名称和触发的时间有所变化。以下是Vue 3中组件生命周期的变化：

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted

setup()函数

首先，我们需要深入了解新的setup()函数。setup()函数是在Vue 3.x中引入的一个新生命周期钩子函数，它用于替代Vue 2.x版本中的beforeCreate和created钩子函数。它返回一个对象，该对象可用于组件中的数据和方法的公用配置。这个对象中可以包含响应式的数据、引入的组件等等。

由于setup()函数在创建组件实例之前调用，因此无法访问到this上下文，您只能使用传递给setup()函数的context参数。

以下是一个简单的例子：

import { reactive } from 'vue'

export default {
  setup(props, context) {
    const state = reactive({
      count: 0
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

在这个例子中，我们定义了一个名为state的响应式数据，并定义了一个名为increment的函数。setup()函数将这些数据和方法作为一个对象返回。

生命周期函数

在Vue 3中，setup()函数在beforeCreate和created钩子函数之前被调用。这就意味着我们需要使用Vue 3中新的生命周期函数来替代这些旧的函数。

以下是Vue 3中更新后的生命周期函数及其描述：

onBeforeMount: 组件挂载之前
onMounted: 组件挂载后
onBeforeUpdate: 组件更新之前
onUpdated: 组件更新后
onBeforeUnmount: 组件卸载之前
onUnmounted: 组件卸载后

生命周期函数的使用方法

在Vue 3中，我们使用新的生命周期函数来替换Vue 2中的生命周期函数。这些函数的使用方式与在Vue 2中使用旧函数的方式非常相似。以下是一些使用方法的示例：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 组件挂载后执行的操作
    })

    onUnmounted(() => {
      // 组件卸载后执行的操作
    })
  }
}

在这个例子中，我们使用onMounted()和onUnmounted()函数来执行相应的操作。在onMounted()函数中，我们触发组件挂载后的操作，而在onUnmounted()函数中，我们触发组件卸载后的操作。

总结

在Vue 3中，组件生命周期和Vue 2的生命周期在功能上是相同的，但是名称和触发的时间有所变化。setup()函数是在Vue 3.x中引入的一个新生命周期钩子函数，它用于替代Vue 2.x版本中的beforeCreate和created钩子函数。onBeforeMount()、onMounted()、onBeforeUpdate()、onUpdated()、onBeforeUnmount()和onUnmounted()是在Vue 3中新的生命周期函数。

虽然有些Vue 2生命周期函数的名称和Vue 3中的不同，但由于功能和用法上的相似性，我们可以通过相似的用法来快速适应Vue 3的生命周期函数。使用new Vue构造函数创建应用程序的方式已经过时，而使用createApp()函数创建应用程序则是Vue 3新的创建方式。在组件生命周期中使用setup()函数和新的生命周期函数，可以让我们更加方便地使用Vue 3的新特性和功能，以提高组件的性能和可维护性。

在Vue 3中，组件生命周期中的不同阶段对组件的影响也略有不同。以下是一些不同阶段的影响：

setup()函数阶段

在setup()函数阶段，您可以做一些准备性的工作。您可以定义响应式数据、计算属性、方法等等。但是，您需要注意的是，由于setup()函数是在组件实例化之前调用的，因此您无法访问到this上下文并且应该使用第二个参数—— context 对象。context 包含了一些有用的属性和方法，比如如何访问父级或子级组件等。在setup()函数中定义的数据和方法将不会在模板中直接使用，如果需要在模板中使用，则需要通过 return 语句把它们暴露出去。
onBeforeMount()和onMounted()阶段

在组件进入onBeforeMount()阶段时，Vue 3会创建虚拟DOM并将其与组件关联起来。在该阶段中，您可以访问组件的DOM，并在挂载期之前对其进行修改。在组件进入onMounted()阶段后，Vue 3完成了组件的挂载。在此阶段，您可以进行一些副作用操作（如API调用、添加事件监听器等）。
onBeforeUpdate()和onUpdated()阶段

在组件进入onBeforeUpdate()阶段时，Vue 3检测到响应式数据发生了变化，并准备重新渲染组件。在该阶段，您可以访问并修改组件的DOM。在组件进入onUpdated()阶段后，Vue 3完成了重新渲染。在此阶段，您可以进行一些副作用操作（如API调用、添加事件监听器等）。
onBeforeUnmount()和onUnmounted()阶段

在组件进入onBeforeUnmount()阶段时，Vue 3已经准备卸载组件。在该阶段，您可以执行一些销毁操作（如取消订阅、清除计时器等）。在组件进入onUnmounted()阶段后，Vue 3完成了组件的卸载。在此阶段，您不能访问组件的DOM或响应式数据。

总结

在Vue 3的组件生命周期中，不同阶段对应的影响也略有不同。setup()函数阶段可以用来定义和准备数据和方法，而Vue 3的新生命周期函数则提供了更细致的钩子，以便于您在不同阶段完成不同的操作。理解不同阶段的影响和使用方法，可以使您更好地掌握Vue 3的组件生命周期，以提高组件的性能和可维护性。