图表初始化必须在 onmounted，销毁必须在 onbeforeunmount；因 setup/created 时 dom 未生成，ref 为空会导致初始化失败；onmounted 确保元素存在，onbeforeunmount 可清理定时器、事件监听和实例，防止内存泄漏与异常。
图表实例的初始化和销毁必须严格匹配 DOM 的可用性与组件的存续状态，否则容易出现“操作已移除元素”或“内存泄漏”。核心原则是：初始化在 onMounted，销毁在 onBeforeUnmount。
为什么不能在 setup 或 created 里初始化图表？
setup 和 created 阶段 DOM 尚未生成，document.getElementById 或 ref 对应的元素为 null。ECharts、Chart.js 等库初始化时需要真实容器节点，强行调用会报错或静默失败。
onMounted 是唯一安全的初始化时机
此时组件已完成挂载，ref 已绑定到真实 DOM 元素，可放心传入图表库：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章