组合式API常用方法解析

考察点分析 link

本题主要考核以下核心能力维度：

1. 响应式系统原理：对Vue3响应式机制的理解深度
2. 组合式API应用能力：核心API的适用场景与实现差异
3. 异步状态管理：事件循环与响应式更新的协同机制

具体技术评估点：

• ref与reactive的响应式实现差异
• computed的缓存特性与依赖收集机制
• provide/inject的跨层级通信原理
• 微任务队列与DOM更新时机的关联性

技术解析 link

关键知识点 link

响应式基础（ref/reactive） > 计算属性（computed） > 依赖注入（provide/inject） > 异步更新机制

原理剖析 link

1. ref：通过Object.defineProperty实现基本类型值的响应式包装，内部值存储在.value属性中。当操作.value时触发依赖收集与更新通知。
2. reactive：基于Proxy代理对象，实现深层次响应式。直接操作属性即可触发更新，但解构会丢失响应性。
3. computed：惰性求值的响应式引用，依赖变更时缓存失效。内部通过effect实现依赖追踪。
4. 异步陷阱：Vue的响应式更新在同步代码中自动批处理，但在异步回调（如setTimeout或Promise）中直接赋值.value可能导致更新未及时触发，需配合nextTick确保DOM更新队列执行。

常见误区 link

• 误将reactive用于基本类型导致性能浪费
• 异步回调中遗漏.value操作引发更新丢失
• 混淆computed与methods的使用场景

问题解答 link

核心API作用：

• ref：包装基本类型值为响应式对象，通过.value访问
• reactive：创建深层次响应式对象，适用于复杂数据结构
• computed：创建依赖其他响应式状态的计算属性，具有缓存优化
• provide/inject：实现跨组件层级的状态注入，解决prop逐层传递问题

异步场景注意点： 在异步回调中直接修改.value可能错过Vue的批量更新时机 。由于Vue的响应式更新在同步任务中合并处理，而异步任务处于新的调用栈（Call Stack），此时赋值操作会立即触发渲染队列，可能导致重复计算或视图更新不同步。需在修改后调用nextTick确保更新时序正确。

解决方案 link

编码示例 link

  // 异步请求中的正确用法
const dataRef = ref(null);

fetchData().then((response) => {
  dataRef.value = response; // 正确触发响应式更新
}).catch(() => {
  dataRef.value = null; // 边界条件处理
});

// 组件卸载时取消请求（示例）
onBeforeUnmount(() => {
  abortController.abort();
});
  

优化建议 link

• 低端设备优化：对大型响应式对象使用shallowRef减少代理开销
• 高并发场景：结合watchEffect自动清理副作用，避免内存泄漏

深度追问 link

1. reactive处理Map/Set的局限？ 回答提示：需使用reactive包装容器+自定义拦截器

2. computed缓存机制如何实现？ 回答提示：基于脏检查（dirty）标志位控制重新求值

3. provide/inject与Vuex的区别？ 回答提示：依赖注入适合局部作用域，Vuex全局状态管理