Vue 89 ，Vue3生命周期钩子函数（Vue3生命周期）

目录

前言

Vue 3 引入了一些变化，特别是针对生命周期钩子函数。Vue 3 支持两种API风格：传统的选项式API（Options API）和新的组合式API（Composition API）。我们都知道选项式 API 是 Vue 2 中熟悉的语法风格，它在 Vue 3 中仍然得到支持。这里来分享记录，两种API下的生命周期钩子函数。

一. 组合式API (Vue3，Composition API)

二. 选项式API (Vue2，Options API)

三. 使用方式

四. 本篇总结

五. 更多操作，请看

---

前言

Vue 3 引入了一些变化，特别是针对生命周期钩子函数。Vue 3 支持两种API风格：传统的选项式API（Options API）和新的组合式API（Composition API）。我们都知道选项式 API 是 Vue 2 中熟悉的语法风格，它在 Vue 3 中仍然得到支持。这里来分享记录，两种API下的生命周期钩子函数。

一. 组合式API (Vue3，Composition API)

在组合式API中，生命周期钩子采用了函数的形式，并且可以导入和使用：

setup()：这是组合式API中最核心的部分，它在生命周期早期执行，类似于 beforeCreate 和 created 钩子的组合。在这个阶段，你可以初始化状态、设置响应式属性、定义计算属性等。

1. onBeforeMount：在挂载开始之前调用。
2. onMounted：在组件挂载完成后调用。
3. onBeforeUpdate：在组件更新之前调用。
4. onUpdated：在组件更新并重新渲染后调用。
5. onBeforeUnmount：在组件卸载前调用。
6. onUnmounted：在组件卸载后调用。

等等，Vue官网会不定时更新

更多生命周期函数介绍，请看

Vue3.0JS 官网，组合式 API：生命周期钩子https://cn.vuejs.org/api/composition-api-lifecycle.html

---

二. 选项式API (Vue2，Options API)

在选项式API中，生命周期钩子与Vue 2相似，但是有一些细微的变化。Vue 3中仍然支持以下生命周期钩子：

1. beforeCreate：在实例创建完成后，数据观测 (data observer) 和事件/ watcher 事件配置之前被调用。
2. created：实例创建完成后被立即调用。此时，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，事件/ watcher 事件回调。不过，挂载步骤还没开始，$el 属性当前不可用。
3. beforeMount：实例开始挂载之前被调用。
4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上之后调用该钩子。
5. beforeUpdate：Vue 实例重新渲染之前调用。发生在虚拟 DOM 打补丁之前。
6. updated：组件 DOM 已经更新之后调用。
7. beforeUnmount：实例销毁之前调用。
8. unmounted：实例被销毁之后调用。

等等

 更多生命周期函数介绍，请看

Vue2.0JS 官网，选项式 API：生命周期钩子https://v2.cn.vuejs.org/v2/api/#beforeCreate

---

三. 使用方式

选项势API我们都比较熟悉，这里我们介绍一下组合式API。在组合式API中，这些生命周期函数通常是从 Vue 库中导入并在 setup 函数中使用。例如：

import { onMounted, onBeforeUnmount } from 'vue';

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

    onBeforeUnmount(() => {
      // 在组件卸载前执行的操作，例如清理定时器或事件监听器
    });
  }
}

语法糖：

---

四. 本篇总结

Vue 3 提供了更加灵活的方式来处理生命周期钩子，允许我们根据自己的需求选择使用选项式API还是组合式API。组合式API提供了更强大的功能来组织和复用逻辑，而选项式API则保留了Vue 2的编程模型，使得迁移更为平滑。

• Composition API，组合式API是Vue3语法，
• Options API，选项式API是Vue2语法。

---

五. 更多操作，请看

Vue3.0 官网https://cn.vuejs.org/guide/introduction.html

创作不易，感觉有用，就一键三连，感谢(●'◡'●)