phase 5 part 1: typescript, vue, react, ssr(Next.js 16) topics with lessons, scenarios, interviews, verified examples

topics/frontend/vue/interview.md

@@ -0,0 +1,67 @@
+---
+id: frontend.vue.interview
+title: Vue 面试题
+type: interview
+domain: frontend
+stack: [vue]
+tags: [Vue 3, 响应式, Pinia, 面试]
+level: intermediate
+related: [frontend.vue.reactivity-composition]
+week: [7, 16]
+---
+
+# Vue 面试题
+
+## 基础
+
+### 【基础】Vue 3 的响应式原理是什么？
+
+**参考答案**：`reactive` 用 Proxy 拦截读写，读取时把当前运行的副作用（渲染函数、computed、watch）记录为依赖，写入时触发这些副作用重新执行；`ref` 通过 `.value` 的访问器实现。更新是异步批量的，同一轮修改只渲染一次。
+
+**追问**：和 Vue 2 有什么区别？→ Vue 2 用 `Object.defineProperty`，需要初始化时递归转换，无法检测新增属性和数组索引修改；Proxy 可以拦截这些操作，并且是惰性代理。
+
+### 【基础】`ref` 和 `reactive` 有什么区别？
+
+**参考答案**：`ref` 可以包装任何值，通过 `.value` 访问，模板中自动解包，可以整体替换；`reactive` 只能用于对象，直接访问属性，解构会丢失响应性，整体替换会断开引用。很多团队统一用 `ref`。
+
+**追问**：解构 Pinia store 怎么保持响应性？→ 用 `storeToRefs(store)` 解构状态和 getter，方法直接从 store 解构。
+
+### 【基础】`computed` 和 `watch` 的区别？
+
+**参考答案**：`computed` 用于派生值，有缓存，依赖不变不重新计算，不应有副作用；`watch` 用于响应变化执行副作用（请求、写存储），可以拿到新旧值、控制立即执行和深度监听。
+
+**追问**：`watch` 和 `watchEffect` 的区别？→ `watch` 显式指定数据源、惰性执行；`watchEffect` 自动收集依赖、立即执行一次。
+
+## 进阶
+
+### 【进阶】组合式函数和 React Hooks 有什么区别？
+
+**参考答案**：Vue 的 `setup` 只执行一次，响应式系统自动追踪依赖，没有依赖数组和闭包陈旧值问题，也没有“Hooks 必须按顺序调用”的限制；React 组件每次渲染都执行函数体，靠依赖数组和 memo 控制。Vue 组合式函数要注意返回值保持响应性和副作用清理。
+
+**追问**：组合式函数里怎么清理副作用？→ `onScopeDispose` 或 `onUnmounted` 中取消请求、清除定时器；`watch` 的清理回调处理竞态。
+
+### 【进阶】`nextTick` 的作用和原理？
+
+**参考答案**：Vue 把 DOM 更新放进异步队列批量执行，`nextTick` 返回一个在下一次 DOM 更新完成后 resolve 的 Promise（基于微任务），用于在修改数据后读取更新后的 DOM。
+
+**追问**：为什么要批量异步更新？→ 避免同一轮中多次修改导致多次渲染，提高性能。
+
+### 【进阶】Vue 应用有哪些性能优化手段？
+
+**参考答案**：路由和组件懒加载；长列表虚拟滚动；`shallowRef` / `markRaw` 减少深度代理；`v-memo`、`v-once`；`computed` 缓存；避免不必要的组件重渲染（稳定的 props）；按需引入组件库；图片懒加载和压缩；构建层面的拆包。
+
+**追问**：怎么定位是哪个组件渲染慢？→ Vue DevTools 的性能面板、浏览器 Performance 面板录制，查看组件渲染耗时和次数。
+
+## 场景题
+
+### 【场景题】做一个 AI 对话界面，流式输出要注意什么？
+
+**参考答案**：fetch + 增量 SSE 解析（POST、鉴权头）；状态机；停止生成和卸载时取消；断线带 `Last-Event-ID` 续传；结构化的 final 事件返回引用；渲染节流和 XSS 清洗；网关关闭缓冲。详见[AI 对话界面场景](scenarios/ai-chat-stream.md)。
+
+**追问**：为什么不用 EventSource？→ 只支持 GET、不能自定义请求头，问题内容和令牌不适合放在 URL 中。
+
+### 【场景题】一个后台表格页面有 1 万行数据，滚动很卡，怎么优化？
+
+**参考答案**：虚拟滚动只渲染可见行；数据用 `shallowRef` 存放；行组件保持 props 稳定、减少响应式开销；能分页就分页（服务端分页）；复杂单元格延迟渲染；排序筛选放到 Web Worker 或服务端。
+
+**追问**：虚拟滚动的原理？→ 根据滚动位置和行高计算可见范围，只渲染这一段，用占位高度撑开滚动条；行高不固定时需要测量和缓存高度。