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

相关推荐
guoyp212628 分钟前
前端实验(二)模板语法
前端·vue.js
一只小风华~36 分钟前
学习笔记:Vue Router 中的嵌套路由详解[特殊字符]概述
前端·javascript·vue.js
一只小风华~1 小时前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
对岸住着星星2 小时前
vue3+ts实现拖拽缩放,全屏
前端·javascript
老华带你飞2 小时前
小区服务|基于Java+vue的小区服务管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·小区服务管理系统
珍宝商店2 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
计算机学姐2 小时前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蓝莓味的口香糖2 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
C++chaofan3 小时前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family3 小时前
Vue3 v-slot 详解与示例
前端·javascript·vue.js