在 Vue 3（特别是与 TypeScript 一起使用时，但不仅限于 TypeScript）中，onMounted 是 Composition API 中的一个生命周期钩子。这个钩子在组件被挂载到 DOM 后立即被调用。这意味着在 onMounted 内部的代码会在组件的模板和渲染函数首次被渲染和添加到 DOM 之后执行。

与 Vue 2 的 mounted 选项类似，但 onMounted 是 Vue 3 Composition API 的一部分，它允许你以更函数式的方式组织和重用逻辑。

以下是一个简单的例子，展示了如何在 Vue 3 的 setup 函数中使用 onMounted：

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  

<script lang="ts">  
import { ref, onMounted } from 'vue';  

export default {  
  setup() {  
    const message = ref('Loading...');  

    onMounted(() => {  
      // 这段代码将在组件被挂载到 DOM 后执行  
      setTimeout(() => {  
        message.value = 'Component is mounted!';  
      }, 1000);  
    });  

    return {  
      message  
    };  
  },  
};  
</script>

在上面的例子中，当组件被挂载到 DOM 后，onMounted 钩子中的函数将被调用，这会导致 message 的值在 1 秒后从 'Loading...' 更改为 'Component is mounted!'。

还有哪些其他的生命周期钩子

在Vue 3中，除了onMounted之外，还有其他几个重要的生命周期钩子。这些钩子允许开发者在组件的不同生命周期阶段执行特定的代码。以下是Vue 3中主要的生命周期钩子及其描述：

1. 创建期：
   • beforeCreate：组件实例被创建之前调用。此时，组件的props和data还未被初始化。
   • created：组件实例创建完成后调用。此时，组件的props和data已经被初始化，但DOM还未挂载。
2. 挂载期：
   • beforeMount：组件的模板编译和虚拟DOM已经创建，但尚未挂载到真实DOM上。
   • mounted：组件已经挂载到真实DOM上，可以访问和操作DOM元素。
3. 更新期：
   • beforeUpdate：组件的响应式数据发生变化，但尚未重新渲染和更新DOM之前调用。
   • updated：组件已经重新渲染和更新DOM之后调用。
4. 销毁期：
   • beforeUnmount：组件实例被销毁之前调用。在这个阶段，组件仍然完全可用，但即将被卸载。
   • unmounted：组件实例已经被销毁，组件的所有功能都已失效。
5. 其他：
   • setup：这是Vue 3引入的新生命周期钩子，在beforeCreate和created钩子之前调用。在setup中，你可以使用ref和reactive来创建响应式状态，并且可以直接访问组件的props。
6. 额外的钩子（非官方但可用于特定场景）：
   • onRenderTriggered 和 onRenderTracked：这些钩子在Vue 3的响应式系统中被触发，用于跟踪和调试组件的渲染和更新过程。这些钩子主要用于调试和性能优化，一般不在常规应用逻辑中使用。
   • onErrorCaptured：这是一个可以捕获和处理子组件错误的生命周期钩子。
     以上生命周期钩子覆盖了Vue组件从创建到销毁的整个过程，开发者可以根据需要在不同的阶段执行特定的代码逻辑。