vue onmounted

### Vue.js `onMounted` 生命周期钩子的用法

在 Vue 3 中，组合式 API 提供了一种新的方式来处理组件逻辑，其中就包含了生命周期钩子函数如 `onMounted`。此钩子允许开发者定义一段代码，在组件挂载完成后执行。

#### 使用 Composition API 和 `<script setup>` 定义 `onMounted`

当采用最新的脚手架工具创建项目时，默认会使用现代模块化构建设置[^1]。下面是一个简单的例子展示如何利用 TypeScript 支持下的 Vue 组件中应用 `onMounted` 钩子：

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

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

const message = ref('Hello World')

// 当组件被挂载到DOM之后触发该回调
onMounted(() => {
  console.log('Component has been mounted.')
})
</script>

这段代码展示了怎样声明响应式的 `message` 变量以及注册一个会在 DOM 更新完毕后立即调用的方法。这有助于执行一些依赖于真实 DOM 节点的操作，比如初始化第三方库或启动动画效果等。

对于传统选项API风格的应用程序，则可以这样写：

export default {
  data() {
    return {
      message: "Hello World"
    };
  },
  mounted() {
    console.log("Component has been mounted.");
  }
};

值得注意的是，虽然这里讨论的是基于 JavaScript 编写的案例，但在实际开发过程中推荐尽可能地迁移到带有更强类型安全性的 TypeScript 上去[^4]。