前端面试-关于vue3的响应式原理
现在工作不好找的环境中，想要更好获得工作机会，让我们一起准备面试题吧～
Vue3 的响应式系统采用 ES6 的 Proxy 实现数据劫持，与 Vue2 的 Object.defineProperty 有本质区别。
Proxy 的拦截机制
- Proxy 拦截对象的所有操作（如 get、set、deleteProperty 等），无需递归遍历对象属性。
- 支持动态属性增删：无需 Vue.set/Vue.delete，直接操作属性即可触发响应式更新。
- 原生数组支持：通过 Proxy 直接监听数组索引修改和 length 变化，无需重写数组方法
依赖收集与触发更新
- 依赖收集（Track）：通过 WeakMap 存储对象与属性的依赖关系（target → key → effect），仅在属性被访问时记录依赖，避免冗余。
- 触发更新（Trigger）：当属性变化时，从依赖关系中找到所有关联的副作用函数（effect）并执行
常见面试问题解析
1：Vue3 如何处理循环引用对象？
通过 WeakMap 缓存已代理对象，避免重复代理。
2：ref与reactive如何选择？
场景 | 推荐 API | 原因 |
基本类型 | ref | reactive 无法代理原始类型 |
对象/数组 | reactive | 直接访问属性，无需 .value |
模板中解构使用 | ref | 保持引用稳定性，避免丢失响应性 |
3：为什么 Vue3 删除了Vue.set？
Proxy 自动拦截动态属性操作，无需手动 API。
讲了Vue3里的响应式，有些同学可能对js里的Proxy有些好奇，这个API具体的理解是什么呢？下篇文章我们一起分析分析。