mounted与created区别：DOM操作详解

在 Vue.js 生命周期中，created 和 mounted 阶段虽紧密相连，却承载着截然不同的职责：created 适合发起异步请求、初始化非 DOM 状态和订阅事件，但此时真实 DOM 尚未生成，$el 为 undefined，任何 DOM 操作都会报错；而 mounted 才是真正安全的 DOM 操作“黄金时机”，此时组件已挂载，this.$el 和 this.$refs 均可可靠访问，适用于聚焦输入框、初始化 Chart.js 等第三方库、获取元素尺寸等依赖真实节点的操作——尤其在 SSR 场景下，还需注意浏览器 API 兼容性并善用 nextTick 和 window 判断，避免常见陷阱。理解这一关键区别，是写出健壮、可维护 Vue 应用的基础。

在 Vue.js 中，created 阶段 DOM 尚未生成，无法进行真实 DOM 操作；mounted 阶段组件已挂载，真实 DOM 可访问，是执行依赖 DOM 的逻辑（如初始化第三方库、获取元素尺寸、聚焦输入框）的正确时机。

created 中能做什么？

此时实例已完成数据观测、属性和方法的运算、watch/event 事件配置，但尚未挂载，$el 为 undefined。适合做：

• 发起异步请求（如拉取初始数据）
• 初始化非 DOM 相关的状态（如设置 loading 标志、计算初始变量）
• 订阅事件或创建定时器（记得在 beforeUnmount 中清理）

mounted 是 DOM 操作的“安全区”

this.$el 此时已存在，且是真实的 DOM 节点。可直接操作或传给第三方库：

• 调用 this.$el.querySelector() 或 ref 获取元素并操作
• 初始化 Chart.js、Mapbox、Swiper 等依赖 DOM 容器的库
• 调用 focus()、scrollIntoView() 等需真实节点的方法

注意：若使用 ref，推荐在 mounted 中通过 this.$refs.xxx 访问，确保其已渲染。

服务端渲染（SSR）下的特别提醒

在 created 和 mounted 中都可能执行（客户端会再次执行 mounted），因此：

• 避免在 created 中写仅浏览器可用的 API（如 window、document）
• DOM 操作必须放在 mounted，且最好包裹 if (typeof window !== 'undefined') 以兼容 SSR
• 使用 nextTick 可确保 DOM 更新完成后再操作（例如在数据变更后立即读取更新后的元素尺寸）

常见错误示例与修正

❌ 错误：在 created 中尝试 this.$el.innerHTML = 'hello' → 报错，$el 不存在

✅ 修正：移到 mounted，或改用响应式数据（this.msg = 'hello' + 模板插值）

❌ 错误：在 mounted 中直接操作子组件的 DOM（如 this.$refs.child.$el）→ 可能为空，因子组件挂载有微小延迟

✅ 修正：用 this.$nextTick(() => { /* 操作子组件 DOM */ }) 确保子组件也已渲染

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。