在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图表渲染)。