mounted是处理挂载后DOM操作最安全的时机，此时this.$el和this.$refs已可用，可安全初始化图表、绑定事件或读取尺寸，但需在beforeUnmount中清理监听器。
在 Options API 中，mounted 是处理挂载后 DOM 操作最安全、最常用的时机。它确保组件模板已渲染为真实 DOM，并插入文档，此时 this.$el 可用，this.$refs 已解析，原生 DOM 方法也能可靠执行。
DOM 操作必须等 mounted 才能进行
在 data 或 created 阶段，DOM 尚未生成，this.$el 为 undefined，this.$refs.xxx 也为空对象。强行操作会报错或静默失败。只有进入 mounted，Vue 才完成首次挂载，所有 DOM 节点才真正可访问。
正确获取和操作 DOM 元素的写法
- 用
ref绑定元素，再通过this.$refs获取（推荐）：
`` → `mounted() { const container = this.$refs.chartContainer; }` - 用
document.querySelector或this.$el.querySelector查找子元素（适合无 ref 场景）：
`const btn = this.$el.querySelector('.submit-btn'); btn.addEventListener('click', ...);` - 避免直接操作父级或全局 DOM（如
document.body），除非明确需要脱离组件作用域
常见用途与注意事项
- 初始化图表库（ECharts、Chart.js）：传入
this.$refs.container作为渲染容器 - 绑定原生事件监听器（如
window.resize），记得在beforeUnmount中清理，防止内存泄漏 - 读取元素尺寸或位置（
getBoundingClientRect()、offsetHeight）——此时值才准确 - 不要在
mounted中反复调用this.$nextTick，它已处于 DOM 更新后的状态，无需额外等待
不推荐的做法
- 在
created里尝试访问this.$refs或this.$el - 用
setTimeout延迟 DOM 操作（不可靠，且掩盖了生命周期理解偏差） - 在
v-if包裹的组件中假设mounted总会执行（条件为假时不会触发）
