Vue3生命周期钩子函数（Vue3生命周期）

news2024/11/24 19:41:25

前言

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 钩子的组合。在这个阶段，你可以初始化状态、设置响应式属性、定义计算属性等。
onBeforeMount：在挂载开始之前调用。
onMounted：在组件挂载完成后调用。
onBeforeUpdate：在组件更新之前调用。
onUpdated：在组件更新并重新渲染后调用。
onBeforeUnmount：在组件卸载前调用。
onUnmounted：在组件卸载后调用。
等等，会不定时更新

更多生命周期函数，请看

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

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

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

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

更多生命周期函数，请看

VueJS 官网，选项式 API：生命周期钩子https://cn.vuejs.org/api/composition-api-lifecycle.html

三. 使用方式

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

import { onMounted, onBeforeUnmount } from 'vue';

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

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

语法糖写法

<script setup>
import { ref } from 'vue';
import { onMounted, onBeforeUnmount } from 'vue';

const message = ref('Hello, world!');

onMounted(() => {
  console.log('Component is mounted');
});

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

四. 总结

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

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