created 阶段适合发起异步请求、初始化非 DOM 状态、订阅事件；mounted 是 DOM 操作的正确时机，可安全访问 this.$el 和 this.$refs，执行第三方库初始化、聚焦、尺寸获取等，SSR 下需注意浏览器 API 兼容性。
在 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 */ }) 确保子组件也已渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
