created钩子是Vue Options API中获取初始数据最常用且推荐的时机，因其实例初始化完成、响应式系统就绪但DOM未挂载，适合纯数据层初始化请求。
在 Vue Options API 中，created 钩子是获取初始数据最常用、也最推荐的时机之一——它发生在实例初始化完成、响应式系统已就绪，但 DOM 还未挂载时。
为什么选 created 而不是 mounted？
因为此时 data、methods、computed 和 watch 都已可用，且不依赖 DOM。适合做纯数据层的初始化请求，比如拉取列表、配置项或用户信息。如果数据不需要操作 DOM 就能渲染（如直接绑定到模板），早一点加载还能提升首屏感知速度。
基本写法：在 created 里调用请求方法
确保请求逻辑封装在 methods 中，并在 created 内触发：
- 定义响应式数据字段（如
list: []、loading: false） - 在
created()中调用this.fetchData() - 在
methods里用axios或fetch发起请求，成功后赋值给data属性
注意异步处理和错误边界
created 是同步执行的钩子，但请求本身是异步的。要避免未处理的 Promise 拒绝导致静默失败：
立即学习“前端免费学习笔记（深入）”；
- 务必加上
.catch()或try/catch（配合async/await） - 建议设置
loading: true开始前、loading: false结束后，便于 UI 反馈 - 不要在 created 里直接操作
$el或调用this.$nextTick()——DOM 还不存在
常见误用提醒
以下情况不适合放在 created：
- 需要访问真实 DOM 元素（比如计算尺寸、聚焦 input）→ 应改用
mounted - 依赖路由参数或 URL 查询字符串，且需响应参数变化 → 应结合
watch: $route或beforeRouteUpdate - 服务端渲染（SSR）场景下，created 在服务端也会执行，需判断环境避免重复请求或报错
