VUE中created() 和 mounted()俩种生命周期钩子函数的区别

在 Vue.js 中，created() 和 mounted() 是两个关键的生命周期钩子函数，它们的主要区别在于​​调用时机​​和​​可访问的实例属性​​：

1. 调用时机
   ​​created()​​
   在 Vue 实例创建完成后立即调用（​​数据初始化完成，但尚未挂载到 DOM​​）。
   此时已完成：数据观测（data）、计算属性（computed）、方法（methods）、事件回调的配置，​​但尚未生成 $el（DOM 元素）​​。
   ​​mounted()​​
   在 Vue 实例挂载到 DOM 后调用（​​首次渲染完成​​）。
   此时已完成：模板编译、虚拟 DOM 渲染，​​实例的 $el 已替换为真实的 DOM 节点​​。
2. 可访问的属性对比
   能力 created() mounted()
   访问 data 数据 ✅ 是 ✅ 是
   访问 methods 方法 ✅ 是 ✅ 是
   访问 computed 属性 ✅ 是 ✅ 是
   访问 $el (DOM 元素) ❌ 否 ✅ 是
   访问 $refs ❌ 否 ✅ 是
   操作 DOM ❌ 不能 ✅ 可以
3. 使用场景
   ​​created() 适用场景​​：
   初始化非 DOM 相关的数据（如从 API 获取初始数据）
   设置定时器、事件总线监听等非 DOM 操作
   执行不需要 DOM 的逻辑

created() {this.fetchData(); this.timer = setInterval(...); 
}

mounted() 适用场景​​：
操作 DOM 元素（如初始化第三方库：图表、地图等）
访问 $refs 获取子组件或 DOM 节点
执行依赖 DOM 渲染的逻辑

mounted() {if (this.$route.query.autoScan) {this.$nextTick(() => {if (this.$refs.tgScan) {this.$refs.tgScan.onScan();setTimeout(() => {this.$router.replace({ ...this.$route,query: {} });}, 500); }});}}

4. 执行顺序图示
   父组件 created → 子组件 created → 子组件 mounted → 父组件 mounted
   父组件的 created 先于子组件执行
   子组件的 mounted 先于父组件执行（因为子组件需要先挂载完成）
5. 核心区别总结