如何在 Composition API 中访问组件的生命周期 hooks？

在Vue.js 3中，Composition API提供了一种新的方式来组织和复用逻辑，它包括了对组件生命周期钩子的访问。在Composition API中，我们通过特定的函数来访问这些生命周期钩子。这些函数与传统的Options API中的生命周期钩子相对应，但是用法上有所不同。下面是如何在Composition API中访问和使用这些生命周期钩子的方法。

基本的生命周期钩子

首先，导入需要的生命周期钩子函数。Vue 3提供了一系列函数，如onMounted, onUpdated, onUnmounted等，这些都可以从vue包中直接导入。

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

使用onMounted

onMounted钩子会在组件首次渲染到DOM后执行。这是执行如初始化操作或者开始异步操作的好时机。

javascript
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载到DOM');
      // 在这里执行挂载后的初始化操作
    });
  }
}

使用onUnmounted

当组件即将卸载和销毁时，onUnmounted钩子被调用。这是执行清理操作的理想时机，比如清除定时器或取消外部订阅。

javascript
import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log('组件即将被卸载');
      // 在这里执行清理操作
    });
  }
}

使用onUpdated

每当组件的响应式依赖发生变化导致组件重新渲染后，onUpdated钩子会被调用。

javascript
import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      console.log('组件已更新');
      // 可以在这里执行依赖于DOM更新后的操作
    });
  }
}

示例

假设我们有一个组件，需要在组件加载时从API获取数据，并在组件卸载前取消任何未完成的API请求。我们可以这样做：

javascript
import { onMounted, onUnmounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    let cancelTokenSource = axios.CancelToken.source();

    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/data', {
          cancelToken: cancelTokenSource.token
        });
        console.log('数据: ', response.data);
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('请求被取消');
        } else {
          console.error('请求错误: ', error);
        }
      }
    });

    onUnmounted(() => {
      cancelTokenSource.cancel('组件卸载，取消请求');
    });
  }
}

通过这个例子，我们可以看到如何在Composition API中有效地利用生命周期钩子来管理和优化组件行为。