原有核心题

1. Vue 3 响应式的基本原理？

展开答案与追问

参考答案： reactive 使用 Proxy 跟踪对象属性访问与修改，ref 通过 value 暴露可跟踪值；响应式副作用读取数据时收集依赖，修改时通知相关副作用。DOM 更新通常会批处理。

追问与易错点： 响应式基础

2. ref 与 reactive 怎么选？

展开答案与追问

参考答案： ref 可包装基本值和对象，脚本中通过 .value；reactive 返回对象代理，不适用于基本值。ref 便于整体替换，reactive 适合稳定对象结构。模板解包有适用条件，不能假定所有嵌套场景都自动解包。

追问与易错点： 直接解构 reactive 的基本值属性会失去与原属性的关联，可用 toRefs 或 getter。参考

3. computed、watch、watchEffect 有何区别？

展开答案与追问

参考答案： computed 表示派生值，按依赖缓存，getter 应保持纯净。watch 显式指定源并处理副作用，能访问旧值；watchEffect 在同步执行阶段自动收集读取的依赖，异步函数首次 await 后的读取不会被自动收集。

追问与易错点： computed 能表达的派生数据通常不必用 watch 再维护一份状态。

4. v-if 与 v-show 的区别？

展开答案与追问

参考答案： v-if 按条件创建和销毁子树，切换涉及生命周期；v-show 保持节点并切换 display，适合频繁显示隐藏。初始不显示且很少打开的复杂区域常用 v-if。

追问与易错点： v-show 隐藏并不意味着组件订阅或计时器已经停止。

5. 为什么 v-for 需要 key？

展开答案与追问

参考答案： 稳定 key 表示节点身份，有助于正确复用组件和 DOM 状态。会增删重排的列表优先使用业务 ID，索引可能导致状态错位。不要在同一元素上混用依赖循环变量的 v-if 与 v-for，先筛选或增加外层结构。

追问与易错点： 切换 key 可能强制重建组件，不应把它作为普通刷新手段滥用。

6. nextTick 解决什么问题？

展开答案与追问

参考答案： 修改状态后 DOM 不一定已同步更新，await nextTick() 可以等待本轮 DOM 更新完成，再测量或聚焦。它不是等待网络完成，也不保证所有图片加载或浏览器绘制已完成。

追问与易错点： 如需观察布局尺寸长期变化，可能更适合 ResizeObserver。

7. 组件通信有哪些方式？

展开答案与追问

参考答案： 父传子用 props，子通知父用 emits；双向约定可用 v-model；跨层依赖可用 provide/inject，共享业务状态可使用状态管理。遵循单向数据流，避免子组件隐式修改父级拥有的数据。

追问与易错点： 组件卸载时清理外部监听、连接和订阅，KeepAlive 场景还要考虑激活/停用。