mounted 钩子是初始化第三方库的黄金时机，此时 $el 已存在且已挂载；created 和 beforeMount 因 DOM 未就绪而不可用；需注意销毁清理、异步加载及 SSR 兼容性，并推荐使用 ref 精准控制挂载元素。

在 Vue.js 中，第三方库初始化必须等 DOM 挂载完成之后才能安全操作真实节点，否则容易报错或渲染异常。最稳妥的时机是 mounted 钩子 —— 此时组件已挂载到页面，$el 可访问，且数据已完成首次响应式绑定。

为什么不能在 created 或 beforeMount 中初始化？

created 时 DOM 尚未生成，$el 为 null；beforeMount 时模板已编译但尚未插入文档，$el 内容为空或不完整。像 Chart.js、Swiper、Flatpickr 等依赖真实 DOM 尺寸、样式或事件绑定的库，在这两个阶段调用会失败或行为不可控。

mounted 是初始化第三方库的黄金时机

此时 $el 已存在且已挂载，可直接传入 DOM 元素。常见写法如下：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 使用 this.$el 获取根元素（适用于库支持原生 DOM 节点）
• 用 ref 精准获取特定容器（推荐，避免误操作父级结构）
• 若库需等待子组件也渲染完毕（如含 v-for 动态列表），可在 mounted 内加 this.$nextTick() 确保 DOM 更新完成

注意异步加载与销毁清理

第三方库实例通常持有 DOM 引用和事件监听器，若不手动销毁，可能造成内存泄漏：

立即学习“前端免费学习笔记（深入）”；

• 在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用库提供的 destroy()、destroyAll() 或手动移除事件监听
• 若库按需动态加载（如 import()），建议在 mounted 中加载并缓存实例，避免重复请求
• 服务端渲染（SSR）场景下，需用 if (typeof window !== 'undefined') 包裹初始化逻辑，防止 Node 环境报错

结合 ref 实现更可控的挂载流程

相比直接操作 this.$el，用 ref 更语义化、更易维护：

• 模板中：
• setup 中：const chartContainer = ref(null)，并在 mounted 中通过 chartContainer.value 获取 DOM
• 配合 TypeScript 时，还能获得类型提示（如 HTMLElement | null）