《Vue.js中created方法作用详解》
Vue.js作为一款渐进式前端框架，以其响应式数据绑定和组件化开发模式深受开发者青睐。在Vue实例的生命周期中，created方法是一个关键阶段，它承载着初始化数据、异步请求和逻辑处理等核心功能。本文将系统剖析created方法的作用机制、使用场景及最佳实践，帮助开发者深入理解其设计理念与应用价值。
一、Vue生命周期与created方法定位
Vue实例的生命周期分为创建、挂载、更新和销毁四个阶段，每个阶段对应特定的钩子函数。created方法属于创建阶段的核心钩子，在实例初始化完成后、DOM挂载前触发。其执行时机可通过以下流程图理解：
new Vue() → 初始化事件和生命周期 → beforeCreate → 初始化注入和响应式数据 → created → 编译模板 → beforeMount → 创建虚拟DOM → mounted与beforeCreate相比，created阶段已完成数据观测(data)、属性计算(computed)和方法注册(methods)，但尚未渲染DOM。这种设计使得开发者可以在created中安全地访问数据属性，同时避免操作未生成的DOM元素。
二、created方法的核心作用
1. 数据初始化与预处理
created阶段最适合进行数据初始化操作，包括从API获取初始数据、格式化数据结构或设置默认值。例如：
export default {
data() {
return {
userInfo: null,
loading: false
}
},
created() {
this.fetchUserData()
},
methods: {
async fetchUserData() {
this.loading = true
try {
const res = await axios.get('/api/user')
this.userInfo = this.formatUserData(res.data)
} finally {
this.loading = false
}
},
formatUserData(rawData) {
return {
...rawData,
registerTime: new Date(rawData.registerTime).toLocaleDateString()
}
}
}
}这种模式将数据获取与组件渲染解耦，避免因异步操作导致的模板闪烁问题。同时通过loading状态管理，可实现优雅的用户反馈。
2. 事件监听与全局配置
在created中注册事件监听器是常见实践，特别是需要监听非组件特定事件时。例如：
created() {
window.addEventListener('resize', this.handleResize)
this.$bus.$on('global-event', this.handleGlobalEvent)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
this.$bus.$off('global-event', this.handleGlobalEvent)
}注意需在beforeDestroy中移除监听器，防止内存泄漏。对于Vue内置事件总线($bus)，推荐使用命名空间或唯一ID管理事件，避免命名冲突。
3. 第三方库初始化
需要DOM操作的库(如D3.js、ECharts)通常不适合在created中直接使用，但纯数据处理的库(如Moment.js、Lodash)可在此初始化：
import _ from 'lodash'
import moment from 'moment'
export default {
created() {
this._ = _ // 暴露到实例
this.moment = moment
this.initDateRange()
},
methods: {
initDateRange() {
this.dateRange = [
moment().subtract(7, 'days').format('YYYY-MM-DD'),
moment().format('YYYY-MM-DD')
]
}
}
}4. 路由参数处理
结合vue-router，可在created中处理路由参数变化：
export default {
watch: {
'$route.params.id'(newId) {
this.loadDetail(newId)
}
},
created() {
this.loadDetail(this.$route.params.id)
},
methods: {
async loadDetail(id) {
const { data } = await axios.get(`/api/detail/${id}`)
this.detail = data
}
}
}通过watch监听配合created初始化，可确保路由参数变化时数据同步更新。
三、created方法的使用禁忌
1. 避免直接操作DOM
created阶段DOM尚未生成，以下操作会导致错误：
created() {
// 错误示例：DOM未渲染
document.getElementById('non-exist').innerHTML = 'test'
// 正确做法：使用mounted或$nextTick
this.$nextTick(() => {
// DOM操作
})
}2. 慎用同步阻塞操作
created中的同步代码会阻塞实例初始化，对于耗时操作应使用异步方案：
// 反模式：同步阻塞
created() {
const heavyData = this.computeHeavyData() // 耗时计算
this.data = heavyData
}
// 推荐模式：Web Worker或分块处理
created() {
if (window.Worker) {
const worker = new Worker('heavy-task.js')
worker.onmessage = (e) => {
this.data = e.data
}
worker.postMessage({ start: 0, end: 1000000 })
}
}3. 避免过度依赖实例顺序
在混合使用选项式API和组合式API时，created的执行顺序可能与预期不符。组合式API中应使用setup函数替代：
// 选项式API
export default {
created() {
console.log('选项式created')
}
}
// 组合式API
import { onMounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('组合式mounted')
})
}
}四、created与相关方法的对比
| 方法 | 执行时机 | 可否访问DOM | 典型用例 |
|---|---|---|---|
| beforeCreate | 实例初始化前 | 否 | 注入全局属性 |
| created | 数据观测后 | 否 | 数据初始化 |
| beforeMount | 模板编译后 | 否 | 最后数据修正 |
| mounted | DOM挂载后 | 是 | DOM操作 |
五、最佳实践与进阶技巧
1. 组合使用async/await
处理多个异步请求时，可通过async/await实现顺序执行：
created() {
this.initData()
},
methods: {
async initData() {
const [userRes, configRes] = await Promise.all([
axios.get('/api/user'),
axios.get('/api/config')
])
this.user = userRes.data
this.config = configRes.data
this.prepareDerivedData()
}
}2. 错误边界处理
为created中的异步操作添加错误处理：
created() {
this.loadData().catch(err => {
console.error('初始化失败:', err)
this.$notify.error({
title: '初始化错误',
message: err.message
})
})
},
methods: {
async loadData() {
// 可能抛出异常的代码
}
}3. 性能优化策略
对于大型应用，可采用以下优化：
- 代码分割：将created中的逻辑拆分为独立模块
- 懒加载：对非首屏数据使用动态导入
- 缓存策略：对不变数据使用localStorage缓存
created() {
const cachedData = localStorage.getItem('app-cache')
if (cachedData) {
this.data = JSON.parse(cachedData)
this.fetchFreshData()
} else {
this.fetchFreshData()
}
},
methods: {
async fetchFreshData() {
const res = await axios.get('/api/data')
this.data = res.data
localStorage.setItem('app-cache', JSON.stringify(res.data))
}
}六、Vue 3中的变化
在Vue 3的组合式API中，created的功能被拆解到setup函数中：
// Vue 2选项式
export default {
data() { return { count: 0 } },
created() {
console.log('count:', this.count) // 0
}
}
// Vue 3组合式
import { ref, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
console.log('setup中:', count.value) // 0
onMounted(() => {
console.log('mounted中:', count.value) // 0
})
return { count }
}
}组合式API提供了更灵活的生命周期管理，可通过导入特定钩子函数实现精确控制。
七、常见问题解答
Q1: created和mounted都可以发请求，如何选择？
A1: 需要数据但不需要DOM时用created，需要操作DOM时用mounted。首屏数据加载推荐created，图表初始化推荐mounted。
Q2: 多个created方法执行顺序如何？
A2: 混合使用时，选项式API的created按代码定义顺序执行，组合式API的setup函数在选项式created之前执行。
Q3: 如何在created中访问子组件？
A3: 不可直接访问，应通过props/emit通信或使用provide/inject。需要操作子组件时，应在mounted中使用$refs。
关键词：Vue.js生命周期、created方法、异步初始化、数据预处理、Vue3组合式API、生命周期钩子、DOM操作禁忌、性能优化
简介：本文深入解析Vue.js中created方法的作用机制，涵盖数据初始化、事件监听、第三方库集成等核心场景，对比不同生命周期方法的差异，提供异步处理、错误边界和性能优化等最佳实践，并探讨Vue3组合式API中的变化，帮助开发者全面掌握created方法的使用技巧。
