vue的created和mounted区别

在Vue.js中,created和mounted的核心区别在于调用时机和DOM可访问性‌:created钩子在组件实例创建后、DOM挂载前调用,适用于数据初始化;mounted钩子在DOM挂载后调用,支持DOM操作。‌‌

‌调用时机与核心能力对比‌

‌created钩子‌。

触发时机:组件实例已创建完成,数据观测(data)、计算属性(computed)、方法(methods)等已初始化,但模板尚未编译,‌DOM元素($el)未生成‌。‌‌

典型用途:初始化非DOM相关数据(如API请求)、设置定时器或事件监听等。‌‌

‌mounted钩子‌。

触发时机:组件模板已渲染为真实DOM节点,‌可通过 e l 或 el或 el或refs操作DOM‌。‌‌

典型用途:初始化依赖DOM的第三方库(如图表、地图)、动态修改DOM结构、访问子组件等。‌‌

‌可访问属性对比‌

功能 created mounted

访问data数据 ✅ ✅

操作DOM ❌ ✅

使用$refs引用元素 ❌ ✅

$el属性可用性 ❌ ✅

‌使用场景建议‌

‌优先使用created的场景‌:

初始化数据(如通过API获取初始列表)。‌‌

设置非DOM交互的逻辑(如定时任务、全局事件总线监听)。‌‌

‌必须使用mounted的场景‌:

需要操作DOM元素(如调整元素尺寸、绑定滚动事件)。‌‌

初始化依赖DOM的插件(如ECharts图表渲染)。‌‌

相关推荐
我命由我1234511 小时前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
抱抱宝12 小时前
Agent-study项目教程(03):手写 Mini-ReAct Agent(不依赖框架)
javascript·人工智能·gpt·react.js·prompt·agent
用户9385156350712 小时前
Next.js 笔记系统(二):Redis 数据服务与侧边栏组件拆分实战
javascript·全栈
java1234_小锋13 小时前
Vue3专题 - 组件基础
vue.js·vite
Heo16 小时前
大厂前端调试不能只会debugger
前端·javascript·面试
windliang17 小时前
Claude Code 源码分析(十二):错误处理与自动恢复:让 Agent 稳定运行
前端·javascript·面试
默_笙17 小时前
🛬 前端路由的"高级玩法":懒加载、404、鉴权路由,一个都不能少(下篇)
前端·javascript
sunly_17 小时前
TypeScript:3、类型声明与类型推断
javascript·ubuntu·typescript
奥莱维19 小时前
【无标题】
java·前端·javascript
阿懂在掘金19 小时前
同一份弹窗我重构了三次:从 v-model 地狱到路由式调用,终于治好了模板臃肿
前端·vue.js·前端框架