生命周期基础怎么在组合式 API 中使用 onMounted 钩子处理组件挂载后的逻辑-Vue.js-PHP中文网

onmounted 是组合式 api 中组件挂载后同步执行一次的生命周期钩子，需从 vue 显式导入并在 setup 内调用，适用于访问 dom、启定时器、发请求等，不可在条件语句中使用。

生命周期基础怎么在组合式 api 中使用 onmounted 钩子处理组件挂载后的逻辑

在组合式 API 中，onMounted 是处理组件挂载后逻辑的核心生命周期钩子，它会在组件 DOM 渲染完成、首次挂载到页面后**同步执行一次**。和选项式 API 的 mounted 对应，但需通过导入并调用的方式使用，不能直接写在 setup 函数顶层。

如何正确声明和使用 onMounted

必须从 vue 显式导入，并在 setup() 函数内部调用：

不导入直接使用会报错（如 onMounted is not defined）
不能在条件语句或循环中调用（Vue 要求生命周期钩子在 setup 顶层同步注册）
支持多个 onMounted 调用，它们会按注册顺序依次执行

示例：

import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      // DOM 已就绪，可安全访问 ref 元素或发起请求
    })
    return {}
  }
}

常见适用场景与注意事项

适合做的事：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

访问 ref 绑定的 DOM 元素（如 inputRef.value.focus()）
启动定时器、监听事件（记得在 onUnmounted 中清理）
触发初始数据请求（尤其依赖 DOM 尺寸或位置的请求，如获取容器宽高后再请求图表数据）
初始化第三方库实例（如初始化地图、富文本编辑器等）

不适合做的事：

修改响应式状态并期望立即触发 DOM 更新（onMounted 是同步钩子，DOM 已渲染完，更新会触发下一轮更新）
执行耗时同步操作（会阻塞主线程，影响首屏体验；建议用 nextTick 或异步封装）
依赖父组件 props 刚更新后的值（props 在 setup 执行时已可用，无需等到 mounted）

与 nextTick 的配合使用

如果需要确保 DOM 更新完全完成（比如刚通过 v-if 切换内容后立即测量），可在 onMounted 内部结合 nextTick：

import { onMounted, nextTick } from 'vue'
onMounted(async () => {
  await nextTick()
  // 此时所有响应式更新导致的 DOM 变更已完成
  console.log(elRef.value.offsetHeight)
})