mounted vue3

### Vue3 中 `mounted` 生命周期钩子的用法

在 Vue 3 中，组件实例经历了一系列的初始化过程——例如设置监听器、解析 prop、data 初始化等，在这些过程中会触发不同的生命周期钩子。`mounted` 是其中一个重要的生命周期阶段，当组件完成挂载时调用此钩子函数[^2]。

#### 使用 Composition API 的方式定义 Mounted 钩子

对于采用组合式API风格的应用程序来说，可以通过 setup 函数来注册 mounted 钩子：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component has been mounted');
      
      // 可以在这里执行一些 DOM 操作或者其他逻辑
    });
    
    return {};
  }
}

这段代码展示了如何利用 composition api 来声明 mounted 钩子并打印一条消息表示组件已经成功挂载到了页面上[^1]。

#### Options API 方式的 Mounted Hook 定义

如果项目仍然基于选项式API，则可以在 script 标签内直接指定 mounted 属性作为方法集合的一部分:

<script>
export default {
  data() {
    return {};
  },
  
  mounted() {
    console.log('Component has been mounted using options API');
    
    // 执行其他必要的操作...
  }
};
</script>

上述两种形式都可以有效地处理组件被插入到DOM树之后发生的事件或行为。