vuemounted 组件的使用，核心就是 mounted 属于 Vue 生命周期钩子函数，在组件 DOM 节点成功渲染挂载到页面之后自动执行，这个阶段可以访问已经渲染完成的 dom 元素，适合做接口请求 初始化插件 绑定事件 获取节点尺寸 初始化地图图表这类操作，很多新手容易混淆 created 和 mounted，created 执行的时候页面 DOM 还没有渲染，无法操作 dom，mounted 执行的时候模板已经渲染完毕，dom 可以正常读取，Vue2 和 Vue3 写法有区别，Vue2 是选项式写法直接写 mounted 函数，Vue3 选项式依旧保留 mounted，组合式 API 里面使用 onMounted 来注册这个钩子，需要从 vue 里面导入，这个钩子只在组件首次挂载执行一次，组件更新不会再次触发，下文深度讲解写法 执行时机 常见场景 注意事项和踩坑点。
Vue2 选项式写法
export default {
name: "Demo",
data() {
return {
list: []
}
},
mounted() {
// 这里可以操作dom，发起请求
console.log("组件已经挂载完成")
}
}
Vue3 两种写法
选项式 API 写法 和 Vue2 保持一致，直接写 mounted
组合式 API 写法，需要导入 onMounted
import { onMounted } from "vue"
export default {
setup() {
onMounted(() => {
console.log("组件挂载完成")
})
}
}
生命周期执行顺序表格
| 钩子 | 执行时机 | 能否访问 DOM |
|---|---|---|
| beforeCreate | 实例初始化之前 | 不能 |
| created | 实例创建完成，模板未渲染 | 不能 |
| beforeMount | 模板编译完成，还未挂载页面 | 不能 |
| mounted | DOM 已经挂载到页面 | 可以 |
| beforeUpdate | 数据更新，dom 还没重新渲染 | 旧 dom |
| updated | dom 更新完成 | 新 dom |
常用业务场景清单
1 调用后端接口加载列表数据，页面挂载之后拉取初始数据
2 初始化第三方插件，比如 echarts 图表 富文本编辑器 地图组件
3 获取 dom 元素，通过 ref 或者原生 querySelector 读取节点
4 绑定 window 或者 document 全局事件，比如 resize 滚动监听
5 获取元素宽高，初始化动画 轮播组件
深度注意事项
执行次数
mounted 只在组件第一次挂载的时候执行一次，组件内部数据修改触发重新渲染，不会再次执行 mounted，如果需要在每次更新之后执行，应该使用 updated 钩子
异步请求
mounted 里面发起接口请求是常规用法，但是接口返回数据是异步，不要认为接口返回的时候 dom 还保持初始状态，后续数据更新会触发组件重新渲染
全局事件内存泄漏
如果在 mounted 里面绑定 window resize scroll 监听，一定要在 beforeUnmount 或者 beforeDestroy 里面解绑，不然组件销毁之后监听器仍然存在，造成内存泄漏
keepalive 缓存组件
使用 keepalive 包裹组件的时候，组件缓存之后再次激活，mounted 不会再次执行，这种场景需要搭配 activated 钩子来做初始化
子组件挂载顺序
父组件 mounted 执行的时候，默认子组件已经挂载完成，如果需要确保所有子组件渲染完毕，可以使用 nextTick 辅助处理
常见踩坑排查表格
| 问题现象 | 原因 | 解决办法 |
|---|---|---|
| mounted 里面获取 dom 是空 | DOM 还未渲染或者 ref 还未绑定 | 确认是 mounted 钩子，必要时搭配 nextTick |
| 组件缓存切换之后 mounted 不执行 | keepalive 缓存机制 | 改用 activated 钩子 |
| 组件销毁之后报错 | 全局事件没有解绑 | 在销毁钩子移除事件监听 |
| Vue3 组合式报错 | 没有导入 onMounted | 从 vue 导入 onMounted |
总结
vuemounted 组件的使用重点记住它是挂载完成之后触发，能够正常访问 dom，适合初始化请求和第三方插件，Vue2 直接写 mounted，Vue3 组合式使用 onMounted，只执行一次，搭配 keepalive 的时候要区分 activated，绑定全局事件记得在销毁钩子解绑，避免内存泄漏。
【常见问题】
问题 1 vuemounted 组件的使用，mounted 和 created 有什么区别
回答 1 vuemounted 组件的使用，created 执行时 DOM 还没有渲染，不能操作 dom，mounted 组件挂载完成，可以正常读取 dom 节点。
问题 2 vuemounted 组件的使用，mounted 会执行多次吗
回答 2 vuemounted 组件的使用，默认只在组件首次挂载执行一次，组件数据更新重新渲染不会再次触发 mounted。
问题 3 vuemounted 组件的使用，Vue3 里面还能直接写 mounted 吗
回答 3 vuemounted 组件的使用，Vue3 选项式 API 依旧可以直接写 mounted，组合式 API 需要导入 onMounted 注册钩子。
问题 4 vuemounted 组件的使用，keepalive 缓存组件切换回来 mounted 不执行怎么办
回答 4 vuemounted 组件的使用，keepalive 缓存组件再次激活的时候 mounted 不会重新运行，需要改用 activated 钩子处理初始化逻辑。
【免责申明】
本文内容仅作为 vuemounted 组件的使用科普参考，Vue 版本不同 API 细节存在差异，代码示例仅用于学习演示，实际项目请对照对应版本官方文档，代码改造风险由使用者自行承担。
