Vue 面试题

基础

参考答案：reactive 用 Proxy 拦截读写，读取时把当前运行的副作用（渲染函数、computed、watch）记录为依赖，写入时触发这些副作用重新执行；ref 通过 .value 的访问器实现。更新是异步批量的，同一轮修改只渲染一次。

追问：和 Vue 2 有什么区别？→ Vue 2 用 Object.defineProperty，需要初始化时递归转换，无法检测新增属性和数组索引修改；Proxy 可以拦截这些操作，并且是惰性代理。

参考答案：ref 可以包装任何值，通过 .value 访问，模板中自动解包，可以整体替换；reactive 只能用于对象，直接访问属性，解构会丢失响应性，整体替换会断开引用。很多团队统一用 ref。

追问：解构 Pinia store 怎么保持响应性？→ 用 storeToRefs(store) 解构状态和 getter，方法直接从 store 解构。

参考答案：computed 用于派生值，有缓存，依赖不变不重新计算，不应有副作用；watch 用于响应变化执行副作用（请求、写存储），可以拿到新旧值、控制立即执行和深度监听。

追问：watch 和 watchEffect 的区别？→ watch 显式指定数据源、惰性执行；watchEffect 自动收集依赖、立即执行一次。

参考答案：Vue 的 setup 只执行一次，响应式系统自动追踪依赖，没有依赖数组和闭包陈旧值问题，也没有“Hooks 必须按顺序调用”的限制；React 组件每次渲染都执行函数体，靠依赖数组和 memo 控制。Vue 组合式函数要注意返回值保持响应性和副作用清理。

追问：组合式函数里怎么清理副作用？→ onScopeDispose 或 onUnmounted 中取消请求、清除定时器；watch 的清理回调处理竞态。

参考答案：Vue 把 DOM 更新放进异步队列批量执行，nextTick 返回一个在下一次 DOM 更新完成后 resolve 的 Promise（基于微任务），用于在修改数据后读取更新后的 DOM。

追问：为什么要批量异步更新？→ 避免同一轮中多次修改导致多次渲染，提高性能。

参考答案：路由和组件懒加载；长列表虚拟滚动；shallowRef / markRaw 减少深度代理；v-memo、v-once；computed 缓存；避免不必要的组件重渲染（稳定的 props）；按需引入组件库；图片懒加载和压缩；构建层面的拆包。

追问：怎么定位是哪个组件渲染慢？→ Vue DevTools 的性能面板、浏览器 Performance 面板录制，查看组件渲染耗时和次数。

参考答案：fetch + 增量 SSE 解析（POST、鉴权头）；状态机；停止生成和卸载时取消；断线带 Last-Event-ID 续传；结构化的 final 事件返回引用；渲染节流和 XSS 清洗；网关关闭缓冲。详见AI 对话界面场景。

追问：为什么不用 EventSource？→ 只支持 GET、不能自定义请求头，问题内容和令牌不适合放在 URL 中。

参考答案：虚拟滚动只渲染可见行；数据用 shallowRef 存放；行组件保持 props 稳定、减少响应式开销；能分页就分页（服务端分页）；复杂单元格延迟渲染；排序筛选放到 Web Worker 或服务端。

追问：虚拟滚动的原理？→ 根据滚动位置和行高计算可见范围，只渲染这一段，用占位高度撑开滚动条；行高不固定时需要测量和缓存高度。