mounted 是 Vue2 的生命周期钩子，这个阶段代表组件已经挂载到真实 DOM，DOM 节点已经渲染完成，所以 mounted 里面最适合获取 DOM 元素、获取路由参数、获取 props、发起初始请求、初始化第三方插件，Vue3 里面没有 mounted 这个选项式写法，对应改成 onMounted 组合式 API，很多新手踩坑就是在 created 里面获取 DOM，created 的时候真实 DOM 还没生成，拿不到，必须放到 mounted 钩子里面执行，mounted 只会在组件首次挂载执行一次，组件更新不会再次触发 mounted。
核心可获取内容对照表
| 获取目标 | Vue2 写法 | Vue3 写法 | 说明 |
|---|---|---|---|
| DOM 元素 | this.$refs.xxx | ref 变量 | 挂载完成后 ref 绑定的 DOM 可以读取 |
| 路由参数 | this.$route | useRoute() | mounted 读取 query params |
| props 数据 | this.xxx | props.xxx | props 在 mounted 已经可以拿到 |
| 父组件传值 | this.$emit 已经可用 | defineEmits | 挂载完成可以调用事件 |
| store 数据 | this.$store | useStore() | vuex/pinia 初始数据读取 |
分项深度讲解
第一 获取 DOM（refs.box，就可以拿到这个 dom 节点，适合初始化 echarts，swiper 这类需要 dom 容器的插件。
// Vue2
mounted() {
const dom = this.$refs.box
console.log(dom)
}
Vue3 组合式，使用 ref 定义变量，模板 ref 同名，onMounted 里面直接读取变量
// Vue3
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(()=>{
console.log(box.value)
})
第二 获取路由参数
// Vue2 mounted
mounted(){
console.log(this.$route.query.id)
console.log(this.$route.params.id)
}
// Vue3
import {useRoute, onMounted} from 'vue'
const route = useRoute()
onMounted(()=>{
console.log(route.query.id)
})
第三 获取 props
props 在 created 阶段就已经初始化完成，mounted 当然可以读取，注意 props 是父组件传入，不要在 mounted 直接修改 props，属于单向数据流规范。
第四 初始请求接口
mounted 是最常用的请求初始数据位置，页面挂载完成后调用 axios 拉取列表数据。
重点易错点
- mounted 只执行一次，如果路由参数变化，组件复用，mounted 不会再次触发，这个时候需要监听 $route 变化
- 如果是异步组件，v-if 控制销毁重建，每次重新挂载才会重新执行 mounted
- 服务端渲染 SSR，mounted 不会在服务器端执行，只在浏览器端运行
使用判断步骤
第一步 判断你是 Vue2 还是 Vue3，Vue2 使用 mounted 选项，Vue3 使用 onMounted
第二步 确认目标是 DOM 路由 props store，选择对应的获取方式
第三步 如果组件复用时参数更新，额外增加路由监听，不要依赖 mounted 重复执行
最终结论 mounted 钩子是组件 DOM 挂载完成阶段，主要用来获取 dom、路由参数、props，初始化插件与请求初始数据，Vue3 替换为 onMounted，注意 mounted 只执行一次这个特性。
【常见问题】
问题 1 mounted 里面为什么获取不到 dom
回答 1 mounted 钩子获取不到 dom 一般是 dom 还被 v-if 隐藏，或者是嵌套子组件还没挂载完成，需要 nextTick 或者等待子组件 mounted。
问题 2 Vue3 还有 mounted 钩子吗
回答 2 Vue3 选项式依然保留 mounted，组合式 API 里面需要使用 onMounted，这是 mounted 钩子获取数据最常混淆的点。
问题 3 mounted 可以获取 props 吗
回答 3 可以，mounted 钩子里面 props 已经初始化完成，能够正常读取父组件传入的 props，但是不能直接修改 props。
问题 4 路由切换 mounted 会重新执行吗
回答 4 如果是同一个组件复用，路由切换 mounted 不会再次执行，所以不能只依靠 mounted 钩子获取新路由参数，需要监听路由变化。
【免责申明】
本内容基于 Vue 官方生命周期机制讲解，不同 Vue 版本 2.x/ 3.x 语法存在差异，项目如果搭配 SSR、keep-alive 会改变生命周期执行行为，本内容仅作为前端学习参考。
