Vue 3 Composition API 中的主要生命周期“钩子”

1. onMounted：组件挂载后调用。此时，组件的 DOM 已经渲染完成，并可以访问。

2. onUnmounted：组件卸载前调用。在此阶段，你可以执行清理操作，比如取消事件监听器或清除定时器。

3. onUpdated：组件更新后调用。当组件的响应式状态发生变化，并导致组件重新渲染后，此钩子将被触发。

4. onBeforeMount：组件挂载前调用。此时，组件的 DOM 尚未渲染。

5. onBeforeUpdate：组件更新前调用。当组件的响应式状态即将变化，但组件尚未重新渲染时，此钩子将被触发。

6. onErrorCaptured：捕获子组件中的错误时调用。

7. onActivated：在 <keep-alive> 包裹的组件被激活时调用。

8. onDeactivated：在 <keep-alive> 包裹的组件被停用时调用。

使用这些函数时，你需要将它们作为回调函数传递给相应的 Composition API 函数。例如：

import { onMounted, onUnmounted, ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    onMounted(() => {  
      console.log('Component mounted!');  
      // 可以在这里执行挂载后的操作  
    });  
  
    onUnmounted(() => {  
      console.log('Component unmounted!');  
      // 可以在这里执行清理操作  
    });  
  
    // ...其他逻辑  
  
    return {  
      count,  
      // ...其他需要暴露给模板的响应式数据或函数  
    };  
  },  
};