Vue.js 生命周期钩子在 Composition API 中的应用

Vue.js 生命周期钩子在 Composition API 中的应用

今天我们来聊聊在 Vue 3 的组合式 API（Composition API）中，如何使用生命周期钩子。如果你对如何在 setup() 函数中处理组件的生命周期事件感到困惑，那么这篇文章将为你解答。

什么是生命周期钩子？

在 Vue 组件的生命周期中，不同的阶段会触发特定的钩子函数，例如组件挂载、更新或卸载时。这些钩子函数允许开发者在组件的特定阶段执行自定义逻辑。

在组合式 API 中使用生命周期钩子

在 Vue 3 的组合式 API 中，我们可以通过在 setup() 函数中导入并调用相应的钩子函数来处理生命周期事件。这些钩子函数的命名通常以 on 开头，后接生命周期事件的名称。

以下是选项式 API 与组合式 API 中生命周期钩子的对应关系：

需要注意的是，由于 setup() 函数本身会在 beforeCreate 和 created 阶段执行，因此不需要显式定义这两个钩子。

示例：在组合式 API 中使用生命周期钩子

让我们通过一个示例来了解如何在组合式 API 中使用生命周期钩子。

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('组件已挂载');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
    });

    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，我们定义了一个简单的计数器组件，并在 setup() 函数中使用了 onMounted、onUpdated 和 onUnmounted 钩子函数来监听组件的挂载、更新和卸载事件。

注意事项

• 调用时机：这些生命周期钩子函数只能在 setup() 函数中同步调用。

• 服务端渲染：某些钩子函数（如 onMounted、onUpdated 和 onUnmounted）在服务端渲染期间不会被调用。

总结

在 Vue 3 的组合式 API 中，使用生命周期钩子变得更加直观和灵活。通过在 setup() 函数中导入并调用相应的钩子函数，我们可以轻松地在组件的不同生命周期阶段执行自定义逻辑。