一、面试题Vue 3 为什么使用Proxy它和 Vue 2 的响应式有什么区别核心思路一句话Vue 2 通过Object.defineProperty劫持已有属性Vue 3 通过Proxy代理整个对象因此 Vue 3 对新增、删除、数组下标等操作的响应式支持更自然。解决方案流程图Vue 2 对象 ↓ 遍历已有属性 ↓ Object.defineProperty ↓ 分别给每个属性添加 getter / setter ↓ 访问属性 → 收集依赖 修改属性 → 触发更新 Vue 3 对象 ↓ Proxy 代理整个对象 ↓ get / set / deleteProperty / has / ownKeys ... ↓ 访问操作 → track() 修改操作 → trigger() ↓ 更新相关副作用底层实现原理Vue 2Object.defineProperty(state,count,{get(){// 收集依赖},set(newValue){// 修改数据// 通知依赖更新}});主要问题新增属性 ↓ 原来的对象属性上没有 getter / setter ↓ 无法自动被拦截 删除属性 ↓ 无法直接通过已有 setter 感知 数组下标 ↓ defineProperty 对数组变化的处理复杂所以 Vue 2 中才需要额外的$set、$delete等机制。Vue 3constproxynewProxy(target,{get(target,key,receiver){// track()returnReflect.get(target,key,receiver);},set(target,key,value,receiver){// Reflect.set()// trigger()returnReflect.set(target,key,value,receiver);},deleteProperty(target,key){// trigger()returnReflect.deleteProperty(target,key);}});它代理的是整个对象的操作而不是给每个已有属性单独安装 getter / setter。二、面试题既然Proxy能代理对象为什么 Vue 3 还需要ref核心思路一句话Proxy解决的是“对象的响应式”ref解决的是“单值状态的响应式容器”同时提供稳定的引用身份和统一的响应式接口。这是整道题最重要的核心。解决方案流程图Vue 3 响应式 │ ┌────────────┴────────────┐ ↓ ↓ reactive ref │ │ 面向对象 面向单值 │ │ Proxy RefImpl │ │ 对象属性操作拦截 value getter / setter │ │ track / trigger track / trigger1.reactive的核心模型conststatereactive({count:0});state.count;本质state ↓ Proxy ↓ state.count ↓ get ↓ track(state, count) state.count ↓ set ↓ trigger(state, count) ↓ 重新执行依赖2.ref的核心模型constcountref(0);count.value;可以把它理解成constrefObject{value:0};但真实 Vue 实现远比普通对象复杂它会通过get value/set value进行依赖追踪和触发。简化模型classRefImpl{constructor(value){this._valuevalue;}getvalue(){track(this,value);returnthis._value;}setvalue(newValue){if(newValue!this._value){this._valuenewValue;trigger(this,value);}}}所以ref(0) ↓ 创建一个稳定的 Ref 对象 ↓ .value ↓ get → track set → trigger三、为什么ref不只支持基本类型传入对象也可以这是非常容易被面试官追问的一层。constuserref({name:张三,age:20});很多人会误以为ref只能解决基本类型。这是错误的。实际上ref(基本类型) ↓ 直接保存值 ref(对象) ↓ 内部会将对象转换为响应式对象 ↓ 通常表现为 reactive(...)所以可以constuserref({name:张三});user.value.name李四;四、为什么ref包对象的时候还要转换成reactive核心思路因为ref负责解决“这个状态整体变化”而对象内部属性变化仍然需要Proxy提供深层属性响应式。流程const user ref({ name: 张三 }) │ ↓ ref 容器 │ ↓ .value │ ↓ 对象 │ ↓ reactive Proxy │ ↓ user.value.name │ ↓ Proxy.get / Proxy.set │ ↓ track / trigger所以constuserref({name:张三});user.value.name李四;并不是简单的ref ↓ 保存普通对象而是ref ↓ value ↓ 响应式对象 ↓ Proxy五、为什么不全部使用reactive这是面试最核心的追问之一。核心思路一句话reactive适合“对象本身就是状态”ref适合“状态是一个独立变量”尤其适合基本类型、整体替换、组合式函数返回值。主要矛盾真正的主要矛盾不是ref和reactive谁性能更好而是你的状态需要什么样的“引用模型”和“变化方式”对比场景refreactive基本类型✅❌对象✅✅数组✅✅整体替换✅⚠️对象属性操作可以✅ 更自然解构配合toRefs直接解构容易丢响应式组合式函数返回✅ 推荐需要注意解构问题表单对象可以✅ 常见单个状态✅ 推荐不适合六、reactive为什么不能直接整体替换letstatereactive({name:张三});state{name:李四};这里实际上不是 reactive 对象被替换后“所有绑定自动更新”。真正发生的是原来的 Proxy ↓ state ↓ 重新赋值 ↓ state 指向普通对象你已经把原来的响应式 Proxy 引用丢掉了。正确做法如果需要整体替换方案一使用refconstuserref({name:张三});// 整体替换user.value{name:李四};流程user ↓ 稳定的 Ref 对象 ↓ user.value ↓ 重新赋值 ↓ trigger() ↓ 更新方案二继续使用reactive修改原对象属性constuserreactive({name:张三,age:20});Object.assign(user,{name:李四,age:30});但注意usernewUser;和Object.assign(user,newUser);完全不是一回事。七、为什么reactive解构之后会丢失响应式核心思路一句话reactive的响应式依赖建立在 Proxy 属性访问上普通解构会把属性当前值取出来而不是把 Proxy 的访问能力一起带走。例如conststatereactive({count:0});const{count}state;相当于constcountstate.count;执行state.count ↓ Proxy.get ↓ 得到 0 ↓ count 0之后state.count;实际上改变的是state.count而不是count所以console.log(count);// 仍然是 0八、怎么解决reactive解构丢失响应式推荐方案toRefsconststatereactive({count:0,name:张三});const{count,name}toRefs(state);此时state ↓ reactive Proxy ↓ toRefs ↓ count Ref name Ref所以count.value;本质上仍然会操作state.count完整示例import{reactive,toRefs}fromvue;functionuseUser(){// 原始状态由 reactive 管理conststatereactive({name:张三,age:20});// 使用 toRefs 将每个属性转换成 Ref// 这样调用方解构之后仍然保持响应式returntoRefs(state);}// 调用组合式函数const{name,age}useUser();// name 和 age 都是 Ref// 因此访问和修改时需要 .valueconsole.log(name.value);age.value;九、为什么ref解构不会像reactive那样丢响应式constcountref(0);constanothercount;这是another ↓ 仍然指向同一个 Ref 对象所以不会丢。another.value;仍然会触发count.value ↓ trigger()但是conststate{count:ref(0)};const{count}state;这里得到的count仍然是原来的 Ref 对象所以也能保持响应式。真正需要注意的是reactive属性解构会把属性值取出来而ref本身就是一个带.value的稳定响应式对象。十、为什么 Vue 模板中ref不需要写.value例如constcountref(0);模板template div{{ count }}/div /template不需要div{{ count.value }}/div核心思路这是 Vue 模板编译与运行时的自动解包机制不是 JavaScript 本身的行为。流程图script setup const count ref(0) ↓ 暴露给模板 ↓ Vue 模板编译 / 运行时处理 ↓ 自动识别 Ref ↓ 访问其 value ↓ 模板中直接使用 count所以{{ count }}在模板环境下能够得到count.value十一、模板中的ref自动解包有什么边界这是非常典型的追问。1. 顶层模板变量通常constcountref(0);模板{{ count }}可以自动解包。2. 嵌套属性不一定自动解包例如conststate{count:ref(0)};模板中{{ state.count }}这里就不能简单理解成所有场景都会递归自动解包。不要把 Vue 的 Ref 自动解包理解成“任何深层 Ref 都自动.value”。十二、为什么ref是 Vue 3 响应式系统的重要基础抽象核心思路reactive ↓ 解决“对象属性”的响应式 ref ↓ 解决“值”的响应式 computed ↓ 基于响应式依赖派生值 watch / watchEffect ↓ 消费响应式变化 effect ↓ 响应式系统的副作用执行机制可以理解成响应式系统 │ ┌─────────┴─────────┐ ↓ ↓ reactive ref │ │ Proxy Ref 对象 │ │ └─────────┬─────────┘ ↓ track / trigger ↓ effect ↓ UI / 副作用更新因此不能把ref理解成“Proxy 做不到基本类型所以临时补出来的 API”。这是这道题真正考察的深层知识点。十三、ref和reactive到底应该怎么选一句话记忆单值用ref对象状态可以用reactive需要整体替换、组合式函数返回、跨函数传递时优先考虑ref。场景一基本类型constcountref(0);constloadingref(false);constnameref();推荐基本类型 → ref场景二固定结构的对象例如表单constformreactive({username:,password:,remember:false});推荐固定对象状态 ↓ reactive代码非常自然form.username张三;form.password123456;场景三对象需要整体替换constuserref(null);user.value{id:1,name:张三};// 后续重新替换整个对象user.value{id:2,name:李四};推荐整体替换 → ref十四、组合式函数为什么更推荐返回ref这是非常重要的工程实践。假设functionuseCounter(){conststatereactive({count:0,step:1});returnstate;}调用const{count,step}useCounter();问题reactive ↓ 解构 ↓ 普通值 ↓ 响应式关系断裂更推荐import{ref}fromvue;exportfunctionuseCounter(){// 使用 ref 保存独立状态constcountref(0);conststepref(1);functionincrement(){count.valuestep.value;}// 返回 Ref// 调用方即使解构也不会因为“解构 Ref 本身”而丢失响应式return{count,step,increment};}调用const{count,step,increment}useCounter();increment();console.log(count.value);结构useCounter() │ ├── count Ref ├── step Ref └── increment() │ ↓ 调用方解构 │ ↓ 仍然拿到原来的 Ref │ ↓ 响应式保持十五、如果组合式函数本身使用reactive怎么办可以使用import{reactive,toRefs}fromvue;exportfunctionuseUser(){conststatereactive({name:张三,age:20});returntoRefs(state);}这样const{name,age}useUser();得到的是name → Ref age → Ref而不是普通值。十六、shallowRef有什么作用shallowRef只让.value本身保持响应式不会自动把.value内部对象转换成深层响应式。例如conststateshallowRef({user:{name:张三}});修改state.value.user.name李四;不会因为内部属性变化而自动触发shallowRef自身的更新。但state.value{user:{name:李四}};会触发更新。适用场景大型第三方对象 大型不可变数据 外部状态管理对象 复杂实例对象 只关心整体替换例如constchartshallowRef(null);// 第三方图表实例放进去chart.valuecreateChart();没有必要让 Vue 深度代理整个第三方实例。十七、customRef解决什么问题customRef允许开发者自己控制什么时候 track() 什么时候 trigger()典型场景防抖 节流 缓存 异步状态控制 自定义更新时机完整示例防抖customRefimport{customRef}fromvue;functionuseDebouncedRef(initialValue,delay300){letvalueinitialValue;lettimer;returncustomRef((track,trigger){return{// 读取 value 时建立依赖get(){track();returnvalue;},// 修改 value 时不立即触发更新// 而是等待 delay 时间set(newValue){valuenewValue;clearTimeout(timer);timersetTimeout((){// 防抖结束后才通知依赖更新trigger();},delay);}};});}// 使用constkeyworduseDebouncedRef(,500);// keyword.value Vue// keyword.value Vue 3// keyword.value Vue 3 响应式//// 最终只在停止输入 500ms 后触发响应式更新。十八、ref/reactive的底层依赖收集到底是什么这是面试官继续深挖时最重要的一层。核心结构响应式对象 ↓ Proxy / Ref ↓ track() ↓ 建立 target → key → effect ↓ 数据发生变化 ↓ trigger() ↓ 找到相关 effect ↓ 重新执行可以抽象成WeakMap │ └── target │ └── Map │ ├── count → Set(effect1, effect2) ├── name → Set(effect3) └── age → Set(effect4)例如conststatereactive({count:0});effect((){console.log(state.count);});第一次执行effect() ↓ state.count ↓ Proxy.get ↓ track(state, count) ↓ effect 加入依赖集合修改state.count;流程Proxy.set ↓ trigger(state, count) ↓ 找到 effect ↓ 重新执行 effect ↓ console.log(state.count)十九、这道题的主要矛盾和次要矛盾主要矛盾①ref和reactive的设计定位不同reactive → 对象级响应式 ref → 值级响应式 稳定响应式容器这是最核心的。次要矛盾②Proxy与基本类型确实Proxy → 只能代理对象所以ref → 可以把基本值放进对象容器但这不是 ref 存在的全部原因。③reactive解构reactive ↓ 属性解构 ↓ 拿到当前值 ↓ 丢失 Proxy 访问链解决toRefs / toRef④ 整体替换reactive → 不适合直接重新赋值 Proxy 变量 ref → value 可以整体替换⑤ 模板自动.value不是ref 自己不需要 value而是JavaScript → 必须 .value Vue 模板 → Vue 提供自动解包二十、常见错误答案错误一ref只是为了弥补Proxy不能代理基本类型。修正这是原因之一但不是完整答案。ref还解决单值状态建模 稳定引用 整体替换 组合式函数返回 响应式值传递 自定义响应式逻辑错误二reactive不能用于基本类型所以对象都应该使用 reactive。错误。constuserref({name:张三});完全合法而且非常常见。错误三ref解构一定不会丢响应式。准确说法解构 Ref 对象本身 → 不会丢 解构 reactive 属性 → 可能丢 reactive toRefs → 可以安全解构错误四模板不用.value是因为 ref 内部自动处理。不准确。script JavaScript 语义 → count.value而template Vue 模板编译 / 运行时 → 自动解包这是两个不同层次。二十一、实际项目中的选择决策树我要定义响应式状态 │ ↓ 是不是基本类型 │ │ 是 否 │ │ ↓ ↓ ref 是不是需要整体替换 │ ┌──────┴──────┐ ↓ ↓ 是 否 │ │ ↓ ↓ ref 是否固定对象结构 │ ┌──────┴──────┐ ↓ ↓ 是 否 │ │ ↓ ↓ reactive ref工程实践中还可以继续考虑大型对象 ↓ 是否只需要整体替换 ↓ shallowRef 需要自定义响应式行为 ↓ customRef reactive 对象需要解构 ↓ toRefs / toRef二十二、满分答案Vue 3 为什么同时设计ref和reactive核心结论reactive和ref不是重复设计而是两种不同的响应式抽象reactive面向“对象”ref面向“值和稳定的响应式容器”。结构图Vue 3 响应式 │ ┌────────────┴────────────┐ ↓ ↓ reactive ref │ │ Proxy Ref 对象 │ │ 对象属性拦截 value 读写拦截 │ │ └────────────┬────────────┘ ↓ track / trigger ↓ effect ↓ UI / 副作用第一层为什么需要refProxy只能代理对象而constcount0;本身不是对象。因此 Vue 用constcountref(0);把值放进一个稳定的响应式容器通过count.value进行依赖收集和更新。但不能只回答到这里。第二层为什么对象也可以用ref因为ref的定位不是“基本类型补丁”而是统一的响应式值容器。所以constuserref({name:张三});对象内部仍然可以通过reactive/Proxy实现深层响应式。第三层为什么不全部使用reactive因为reactive更适合constformreactive({username:,password:});它直接代理对象属性代码自然。但它存在两个工程上的注意点reactive ↓ 直接解构 ↓ 容易丢响应式 reactive ↓ 重新赋值变量 ↓ 容易丢掉原来的 Proxy 引用而refconstuserref(null);user.valuenewUser;可以非常自然地进行整体替换。第四层组合式函数怎么选如果组合式函数functionuseCounter(){constcountref(0);return{count};}调用const{count}useCounter();这里解构的是Ref 对象本身所以响应式仍然存在。如果返回conststatereactive({count:0});returnstate;调用方const{count}useCounter();就可能丢失响应式。因此组合式函数对外暴露独立状态 ↓ 优先 ref 组合式函数内部管理固定对象 ↓ 可以 reactive reactive 需要解构 ↓ toRefs / toRef第五层模板为什么不用.value{{ count }}不代表 JavaScript 中ref不需要.value。实际上script ↓ count.value template ↓ Vue 自动解包 ↓ count这是模板编译 / 运行时能力不是ref改变了 JavaScript 语义。最终背诵版Vue 3 的 ref 和 reactive 不是重复设计 1. reactive 面向对象通过 Proxy 拦截对象操作 2. ref 面向值通过稳定的 Ref 对象管理响应式状态 3. Proxy 不能直接代理基本类型所以基本类型必须用 ref 4. ref 也可以包对象此时对象内部仍可通过 reactive 实现深层响应式 5. reactive 适合固定结构的对象状态例如表单 6. ref 更适合基本类型、整体替换以及组合式函数返回值 7. reactive 解构容易丢响应式需要 toRefs / toRef 8. 模板不用写 .value是 Vue 的自动解包机制JavaScript 中仍然需要 .value 9. shallowRef 适合只关心整体替换的大型对象或第三方实例 10. customRef 可以自定义 track 和 trigger例如实现防抖。 一句话 **reactive 解决“对象怎么响应式”ref 解决“一个值怎么稳定地作为响应式状态存在”真正的选择依据不是 API 喜好而是状态的结构、替换方式和传递方式。**这就是这道题真正要考的不是背ref、reactive的 API而是能解释“为什么 Vue 需要两个抽象以及在什么状态模型下应该选哪个”。