ECharts 初始化代码为什么写在 mounted 生命周期钩子中
Vue 生命周期与 DOM 可用性：
- beforeCreate ：组件实例刚创建，DOM 还未生成， $refs 不可用
- created ：组件实例创建完成，数据观测开始，但 DOM 仍未生成， $refs 不可用
- beforeMount ：模板编译完成，即将挂载到 DOM，但 $refs 仍不可用
- mounted ： 组件已挂载到 DOM ， $refs 可以访问到真实的 DOM 元素
- updated ：组件更新时触发，通常用于处理数据变化后的 DOM 操作
- beforeDestroy ：组件销毁前触发，用于清理资源
为什么必须在 mounted 中初始化：
DOM 元素必须存在 ：
- ECharts 需要一个真实的 DOM 元素作为容器
- 只有在 mounted 后， this.$refs 才能获取到真实的 DOM 元素
- 在此之前，模板只是虚拟 DOM，还未渲染为真实 DOM
容器尺寸必须确定 ：
- ECharts 需要知道容器的宽高来渲染图表
- 在 mounted 阶段，DOM 元素的尺寸已经计算完成
- 确保图表能够正确显示在容器中
初始化时机最佳 ：
- mounted 是进行 DOM 操作的最早时机
- 确保图表在组件显示时就已经渲染完成
- 避免用户看到空白容器后图表才加载的情况
第三方库集成标准 ：
- 所有需要操作 DOM 的第三方库（如 ECharts、地图库等）
- 都应该在 mounted 钩子中初始化
- 这是 Vue 开发的标准实践
