vue的created和mounted区别

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

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

‌created钩子‌。

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

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

‌mounted钩子‌。

触发时机：组件模板已渲染为真实DOM节点，‌可通过$el或$refs操作DOM‌。‌‌

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

‌可访问属性对比‌

功能 created mounted
访问data数据 ✅ ✅
操作DOM ❌ ✅
使用$refs引用元素 ❌ ✅
$el属性可用性 ❌ ✅
‌使用场景建议‌

‌优先使用created的场景‌：
初始化数据（如通过API获取初始列表）。‌‌
设置非DOM交互的逻辑（如定时任务、全局事件总线监听）。‌‌
‌必须使用mounted的场景‌：
需要操作DOM元素（如调整元素尺寸、绑定滚动事件）。‌‌
初始化依赖DOM的插件（如ECharts图表渲染）。‌‌