博客站

在 Vue 3 中，生命周期钩子函数用于在组件的不同生命周期阶段执行特定的代码。Vue 3 提供了与 Vue 2 类似的生命周期钩子，但在组合式 API 中，这些钩子函数是通过特定的函数来使用的。以下是 Vue 3 中常用的生命周期钩子函数及其使用方法：

1. 引入生命周期钩子函数

首先，你需要在 Vue 组件中引入所需的生命周期钩子函数。

import { onMounted, onUpdated, onUnmounted } from 'vue';

2. 常用生命周期钩子函数

以下是 Vue 3 中常用的生命周期钩子函数及其对应的组合式 API 函数：

• onBeforeMount: 在挂载开始之前被调用。
• onMounted: 在组件挂载完成后调用。
• onBeforeUpdate: 在组件更新之前调用。
• onUpdated: 在组件更新之后调用。
• onBeforeUnmount: 在组件卸载之前调用。
• onUnmounted: 在组件卸载之后调用。
• onErrorCaptured: 在捕获到后代组件的错误时调用。

3. 使用生命周期钩子函数

在组合式 API 中，生命周期钩子函数通常在 setup 函数中使用。

import { onMounted, onUpdated, onUnmounted } from 'vue';

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

    onUpdated(() => {
      console.log('Component is updated');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });
  }
};

4. 在 <script setup> 语法中使用

如果你使用 <script setup> 语法，可以更简洁地使用生命周期钩子函数。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);

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

onUpdated(() => {
  console.log('Component is updated');
});

onUnmounted(() => {
  console.log('Component is unmounted');
});

function increment() {
  count.value++;
}
</script>

5. 完整的生命周期钩子函数示例

以下是一个完整的示例，展示了如何在 Vue 3 中使用各个生命周期钩子函数。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

    onBeforeMount(() => {
      console.log('Component is about to be mounted');
    });

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

    onBeforeUpdate(() => {
      console.log('Component is about to be updated');
    });

    onUpdated(() => {
      console.log('Component is updated');
    });

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

    onUnmounted(() => {
      console.log('Component is unmounted');
    });

    function increment() {
      count.value++;
    }

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

6. 处理错误

使用 onErrorCaptured 钩子函数可以捕获后代组件的错误。

import { onErrorCaptured } from 'vue';

export default {
  setup() {
    onErrorCaptured((err, vm, info) => {
      console.error('Error captured:', err, vm, info);
      // 返回 false 阻止错误继续向上传播
      return false;
    });
  }
};

7. 在 <script setup> 语法中处理错误

在 <script setup> 语法中，你也可以使用 onErrorCaptured 钩子函数。

<script setup>
import { onErrorCaptured } from 'vue';

onErrorCaptured((err, vm, info) => {
  console.error('Error captured:', err, vm, info);
  // 返回 false 阻止错误继续向上传播
  return false;
});
</script>

总结

• Vue 3 提供了与 Vue 2 类似的生命周期钩子函数，但在组合式 API 中，这些钩子函数是通过特定的函数来使用的。
• 常用的生命周期钩子函数包括 onMounted、onUpdated、onUnmounted 等。
• 在 setup 函数或 <script setup> 语法中，可以使用这些生命周期钩子函数来执行特定的代码。
• 使用 onErrorCaptured 钩子函数可以捕获后代组件的错误。