Vue 响应式系统

共 19 题
#

1. Vue 3.5 useId SSR 友好 ID 在水合不一致的工程价值

A useId() 返回的 ID 在全局范围内唯一,每次调用结果都不同
B useId() 基于组件树位置生成确定性 ID,SSR 与客户端水合结果一致 ✓ 正确答案
C useId() 只能在客户端使用,SSR 下会直接报错
D useId() 是 Math.random() 的性能优化替代品,与水合一致性无关
#

2. Vue 3.5(latest stable)响应式系统的 release effect 清理与 onScopeStop 在 SSR/异步的工程价值

A effect 重新执行前不会清理旧依赖,只追加新依赖
B onScopeStop() 在 effectScope 停止时执行注册的回调,用于释放该作用域内的资源 ✓ 正确答案
C onScopeStop() 只能在组件 onMounted 之后使用
D effectScope 停止时不会影响其内部注册的 effect
#

3. ref 与 reactive 在解构/展开时的响应性丢失与 toRef/toRefs 的修复

A reactive 对象解构后仍保持响应性
B 展开运算符展开 reactive 对象后响应性不受影响
C ref 可以直接解构且不会丢失响应性
D toRefs 返回的对象与源 reactive 对象解构后保持双向响应 ✓ 正确答案
#

4. Vue 3 响应式系统的依赖收集(track/trigger)

A track 发生在 set 拦截中,trigger 发生在 get 拦截中
B 数组 push 修改 length 不需要特殊处理
C 删除对象属性不会触发任何依赖更新
D 依赖收集把 target、key 与当前 effect 建立映射,写入时按 key 派发更新 ✓ 正确答案
#

5. computed 与 watch/watchEffect 的依赖追踪与副作用清理

A watchEffect 自动追踪回调内访问的响应式依赖,变化时重新执行 ✓ 正确答案
B computed 每次依赖变化都会立即重算并执行回调
C watch 必须传入 getter,不能监听 ref
D onCleanup 在组件挂载时执行
#

6. ref、reactive、shallowRef、shallowReactive 的语义差异

A shallowRef 修改 .value 内部对象的深层属性会自动触发更新
B shallowReactive 仅代理对象第一层属性,深层不参与响应 ✓ 正确答案
C reactive 可以直接替换整个变量引用
D shallowRef 的 .value 在模板中不会自动解包
#

7. Vue 3.5 响应式重构后的精确依赖收集与 alien-signals 集成

A Vue 3.5 用双向链表管理依赖链接,清理依赖可在 O(1) 完成 ✓ 正确答案
B Vue 3.5 重构后依赖收集仍使用 Set,只是减少了调用次数
C alien-signals 是 Vue 3.5 必选的响应式运行时,不可关闭
D 数组索引赋值始终会触发所有订阅者
#

8. Vue 3 深度响应(reactive 数组 vs ref 数组)

A reactive 数组整体赋值 arr = newArr 可以保持原有代理
B ref 数组修改元素深层属性永远不会触发更新
C ref 数组整体替换 .value 即可触发视图更新 ✓ 正确答案
D 模板中 reactive 数组与 ref 数组的遍历写法完全不同
#

9. customRef 在防抖搜索与异步校验的工程化应用

A customRef 通过自定义 get/set 并在适当时机调用 track/trigger 实现防抖等定制行为 ✓ 正确答案
B customRef 的 set 中必须立即调用 trigger 才能更新视图
C customRef 无法与 v-model 配合使用
D customRef 只能在 Options API 中使用
#

10. onWatcherCleanup() 的副作用清理时机

A onWatcherCleanup() 注册的清理函数在 watcher 首次创建时立即执行
B onWatcherCleanup() 必须在异步 setTimeout 中调用
C onWatcherCleanup() 可以注册到任意非 watcher 的 effect 中
D onWatcherCleanup() 在回调同步阶段注册,于下次触发前或停止时执行清理 ✓ 正确答案
#

11. effectScope 与 getCurrentScope() 的作用域隔离

A getCurrentScope() 用于获取当前执行代码所在的作用域实例 ✓ 正确答案
B effectScope.stop() 只会停止作用域内第一个创建的 effect
C effectScope 内的 watch 在组件卸载后仍会继续执行
D getCurrentScope() 返回的是全局响应式系统的版本号
#

12. effectScope 在可拔插功能模块与依赖收集隔离的工程价值

A effectScope 只能在组件内部使用,无法用于模块
B 每个模块独立创建 effectScope 可在模块卸载时一次性回收其全部副作用 ✓ 正确答案
C 共享同一个 scope 才能实现模块间的依赖隔离
D scope.stop() 后其内部的 computed 仍会继续更新
#

13. Vue 响应式系统的循环引用警告策略与 WeakMap/WeakSet 链路

A 循环引用对象无法被 Vue 3 响应式系统代理
B targetMap 使用 WeakMap 存储依赖元数据,对象无业务引用后可被 GC 回收 ✓ 正确答案
C 依赖集合必须使用数组以保证顺序
D WeakMap 强持有 target 导致永远无法回收
#

14. Vue 3.5+ 响应式的内存优化(版本计数/数组监听)与 Vue 2 的差异?

A Vue 2 的 defineProperty 可以自动监听运行时新增的属性
B Vue 3 无法追踪 Map/Set 的修改
C Vue 3.5 的版本计数替代了全部响应式机制,不再使用 Proxy
D Vue 3 基于 Proxy,可原生追踪新增属性与数组索引变化 ✓ 正确答案
#

15. Vue 的响应式在 SSR/Hydration 时的注意事项?

A SSR 阶段 watchEffect 会持续订阅依赖并多次触发
B SSR 渲染为一次性快照,浏览器专属副作用应放入 onMounted 等客户端钩子 ✓ 正确答案
C 组件 setup 顶层可以直接访问 window 对象
D Hydration Mismatch 只影响性能,不影响渲染结果
#

16. triggerRef/shallowRef 与大数据列表的渲染优化

A shallowRef 的深层修改会自动触发视图更新
B triggerRef 可以替代所有自动响应式更新
C 大数据列表可结合 shallowRef 与 triggerRef,在批量修改后手动触发一次更新 ✓ 正确答案
D shallowRef 无法用于数组数据
#

17. Vue 3.6 中 alien-signals 与 Vue Vapor Mode 的集成现状(Vapor 仍标记实验性/逐步开放)

A Vue 3.6 集成 alien-signals 作为响应式运行时优化,Vapor 仍为实验性且需 opt-in 启用 ✓ 正确答案
B Vapor Mode 已完全稳定,默认对所有项目启用
C Vapor Mode 仍然依赖虚拟 DOM 完成更新
D alien-signals 与 Vapor 完全独立,互不影响
#

18. Vue 3.6 在 alien-signals 重构后,动态分支 effect、嵌套 computed 和数组索引更新分别如何建立与清理依赖链接

A 依赖链接以双向链表组织,更新时先清理旧链接再按需重建 ✓ 正确答案
B 嵌套 computed 中内层失效会立即触发外层重新计算
C 动态分支 effect 依赖变化时会保留旧分支的依赖链接
D 数组索引更新始终触发所有订阅者重跑
#

19. Pinia 与组合式 API 的状态设计最佳实践?

A 所有状态都应放入全局 store,方便统一管理
B state 应保持扁平、可序列化,变更统一收敛到 actions,仅共享状态才进入 store ✓ 正确答案
C getters 中应直接修改 state 以简化逻辑
D options store 完全不能使用组合式 API 的能力