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 开发的标准实践