created 是初始化数据的首选，因其已完成响应式绑定且未挂载 DOM，可安全访问响应式数据、执行同步逻辑及发起不依赖 DOM 的异步请求。
Vue 初始化数据最合适的生命周期是 created（组合式 API 中对应 setup 或 onBeforeMount 前的逻辑），但具体选择需结合数据用途和是否依赖 DOM 来判断。
为什么 created 是初始化数据的首选？
在 created 阶段，实例已完成数据响应式绑定、计算属性、侦听器和方法的配置，但尚未挂载到 DOM。此时可以安全地：
- 访问
this.data、ref、reactive等响应式数据 - 执行同步初始化逻辑（如设置默认值、合并初始配置）
- 发起不依赖 DOM 的异步请求（如拉取列表、用户信息）
相比 beforeCreate（数据还未初始化），mounted（已挂载，但可能造成首屏延迟或闪动），created 是平衡可访问性与性能的最佳节点。
什么时候该用 mounted 而不是 created？
仅当初始化操作明确需要 DOM 存在时才推迟到 mounted，例如：
立即学习“前端免费学习笔记（深入）”；
- 初始化第三方 UI 库（如 ECharts、Swiper），需操作真实 DOM 节点
- 读取元素尺寸、偏移量（
offsetHeight、getBoundingClientRect()） - 手动聚焦某个输入框（
inputRef.value?.focus()）
注意：这些操作和“数据初始化”本质不同——它们是视图副作用，不属于数据层准备。
组合式 API 中的等效时机
在 setup() 函数中，所有同步代码天然运行在类 created 的阶段：
- 定义
ref/reactive、computed、watch都在此完成 - 直接调用
api.getData()发起请求也是安全且推荐的 - 若需访问 DOM，应配合
onMounted(() => {...})，而非在 setup 顶层操作 ref.value
避免常见错误：在 setup 中对未挂载的 ref（如 divRef.value）做操作，此时值为 null。
如何避免请求时机错误？一个检查清单
发起数据请求前，快速确认以下三点：
- 是否需要 DOM？ → 否 → 用 created 或 setup
-
是否依赖路由参数或 props？ → 是 → 在 created 中读取
this.$route或props后再请求（组合式 API 中用useRoute/defineProps） -
是否要防重复/节流/取消上一次请求？ → 是 → 在请求前清理 pending 请求（如用
AbortController或取消 token）
把请求逻辑封装进函数（如 fetchList()），并在合适钩子中调用，比堆砌在钩子里更清晰可控。
