响应式与代理模式

共 17 题
#

1. Proxy 与 Object.defineProperty 在 Vue 2/3 响应式系统的对比

A defineProperty 能原生监听数组索引与 length 变化
B Vue 3 使用 Proxy 是为了兼容 IE 等旧浏览器
C Proxy 与 defineProperty 在拦截能力上完全等价
D Proxy 可拦截属性增删与数组、Map/Set 变更,比 defineProperty 只能拦截已有属性更完整 ✓ 正确答案
#

2. Proxy 模式在 Vue 3 响应式系统的实现

A get 拦截收集依赖、set 拦截触发更新,嵌套对象采用惰性递归代理 ✓ 正确答案
B Vue 3 在初始化时立即深度代理所有嵌套对象
C Proxy 无法拦截对象的属性删除
D Vue 3 的响应式不进行依赖收集
#

3. 依赖收集(track/trigger)的双向链表与栈式依赖在大型应用的性能差异

A 双向链表使依赖插入与清理更高效,栈式 activeEffect 正确处理嵌套 effect ✓ 正确答案
B Vue 3 仍在用数组和 indexOf 逐项查找依赖
C 栈式依赖与嵌套 effect 无关
D 双向链表比数组在依赖清理上更慢
#

4. Vue 的 customRef 与 triggerRef 在异步响应的工程价值

A customRef 只能用于同步响应
B customRef 自定义 track/trigger 实现防抖等异步响应,triggerRef 可手动触发 ref 更新 ✓ 正确答案
C triggerRef 无法强制刷新已读取的 ref
D 两者都必须是框架内置的固定行为
#

5. 迭代器模式在前端数据流(迭代器协议)的应用

A 迭代器只能用于数组
B 异步数据流无法用迭代器表达
C 迭代器会强制一次性载入所有数据
D 迭代器协议统一遍历接口,Generator 与异步迭代支持惰性和异步数据流 ✓ 正确答案
#

6. Proxy 实现响应式,get/set 拦截与依赖收集?

A get 陷阱收集依赖、set 陷阱触发更新,用 WeakMap 存储依赖并避免重复代理 ✓ 正确答案
B 响应式只需在 set 中触发更新,无需 get 收集
C 依赖表无需标识具体属性
D 使用数组存储依赖即可避免内存泄漏
#

7. toRaw 与 markRaw 在绕过响应式代理(第三方库对象、性能敏感对象、跨库引用)时的工程价值与逃逸风险?

A toRaw 返回的对象仍会触发响应式更新
B toRaw 取原始对象、markRaw 标记永不响应,但绕过后修改可能失去响应更新 ✓ 正确答案
C markRaw 的对象仍会自动转为响应式
D 两者没有逃逸风险,可放心使用
#

8. shallowRef 与 shallowReactive 在大型不可变数据(列表、画布对象)上的性能取舍,以及 triggerRef 手动触发更新的时机?

A shallowRef 会对 .value 内部对象深度代理
B triggerRef 只能用于深层响应式数据
C 浅层响应式会降低大型数据更新的性能
D 浅层响应式适合整体替换的不可变数据,triggerRef 用于原地修改后手动触发更新 ✓ 正确答案
#

9. Reflect API 在代理拦截的元数据获取与返回值控制

A Reflect 转发目标默认行为,正确处理 receiver 的 this 绑定与返回值语义 ✓ 正确答案
B 在 get 陷阱中直接 target[key] 即可正确处理 this
C Reflect 与 Proxy 陷阱无法配合使用
D Reflect.set 的返回值与赋值失败无关
#

10. Proxy 在 MobX 与 Solid Signals 的实现差异

A MobX 用 Proxy 观察对象,Solid 用 signal 存取函数做细粒度依赖收集 ✓ 正确答案
B 两者都用 Proxy 拦截对象属性
C Solid 的更新需要重新渲染整个组件树
D MobX 不对嵌套对象做响应式
#

11. 发布订阅与 EventEmitter 在前端事件总线的应用

A 事件订阅无需手动清理,不会泄漏
B 事件总线应取代状态管理用于所有数据流
C 事件总线会自动处理重复触发
D 事件总线解耦通信,但需在卸载时 off 防泄漏、规范事件名并避免滥用 ✓ 正确答案
#

12. Vue 的 reactive 解包与 ref 自动解包在模板的边界

A 顶层与 reactive 属性会解包,但数组/集合元素中的 ref 需显式 .value ✓ 正确答案
B 数组中的 ref 会自动解包
C 所有场景下 ref 都会自动解包
D 解包会改变 ref 对象的引用
#

13. 代理模式在 Service Worker 的 Fetch 拦截应用

A Service Worker 只能直接访问网络,无法拦截请求
B Service Worker 无法实现离线缓存
C Service Worker 拦截请求与代理模式无关
D Service Worker 作为中间层拦截 fetch 请求,可实施缓存、离线与请求改写策略 ✓ 正确答案
#

14. Immer produce 与 mutable state 在 reducer 的工程价值

A produce 必须修改原 state 对象
B produce 会深拷贝所有未修改部分
C produce 用 draft 代理实现可变更的不可变更新,结构共享提升性能与可读性 ✓ 正确答案
D Immer 无法在 reducer 中使用
#

15. Proxy 陷阱中 set 返回值与不变性约束(configurable/writable)

A set 返回 false 在严格模式下仍会静默成功
B set 返回值与赋值结果无关
C 代理可以绕过不可写属性的赋值限制
D set 应返回 Reflect.set 的结果以保持语义一致,且不可写/不可配置属性不能被代理改写 ✓ 正确答案
#

16. Reflect 与 Proxy 的配合,为什么用 Reflect?

A 直接 target[key] 也能正确绑定 this
B Reflect 无法转发 deleteProperty
C Reflect 会绕过不变性约束
D Reflect 转发默认行为并正确传递 receiver 的 this 绑定,保证拦截语义与原生一致 ✓ 正确答案
#

17. 响应式系统的边界,数组、Map/Set 的特殊处理?

A Vue 3 对数组索引赋值也无法响应
B Vue 2 能原生响应数组 length 变化
C Vue 3 用 Proxy 拦截数组索引、length 与 Map/Set 方法,Vue 2 需重写数组方法并靠 Vue.set ✓ 正确答案
D Map/Set 在 Vue 3 中完全无法响应