
全栈代码评审该看哪些细节前端评审里空格和命名并不该占据大部分时间。格式化器、类型检查和 lint 更适合处理这类确定问题。人工评审应该顺着用户操作走一遍一次输入会发起多少请求路由切走后哪些工作还在运行大数据进入页面后会怎样渲染错误会不会把整个界面带倒。Vue 3 的响应式机制解决了很多状态同步问题但它不会替开发者判断哪些数据值得深度追踪。审查时不必把ref、reactive或shallowRef当成教条而要看数据是否会被深层修改、是否需要被模板追踪以及转换和渲染成本是否已经成为实际瓶颈。大对象的瓶颈不只在响应式将较大的 API 结果放进普通ref可能带来深层代理成本若页面只在整体替换时更新shallowRef会更合适。第三方图表、编辑器或 SDK 实例通常也不应被转换为响应式对象可以用markRaw保存。但不要为了“性能”让本应更新的嵌套数据失去响应选择前先确认组件如何读取和更新它。列表卡顿还可能来自 DOM 数量、复杂计算属性、重复排序和图片解码。即使用了浅层引用几万行节点仍会让浏览器吃力。评审应看是否需要分页、虚拟列表、后端筛选或缓存而不是只改一处状态声明就认为问题解决。副作用要有自己的清理责任组件创建的定时器、事件监听、订阅、WebSocket 和异步请求都应在合适的生命周期结束时停止。Vue 会自动停止在组件 setup 作用域内创建的 watcher但外部事件监听器、手动订阅和未受控的资源仍需要显式清理。若 composable 可能在组件外使用清理入口更应该由调用者看得见。下面的搜索 composable 把“新请求覆盖旧请求”的规则放在 watcher 清理里。它既取消旧网络请求也用请求编号避免不支持取消的服务端响应倒灌。import { ref, shallowRef, watch, type Ref } from vue export function useSearch(keyword: Refstring) { const results shallowRefunknown[]([]) const loading ref(false) const error refstring | null(null) let sequence 0 const stop watch(keyword, async (value, _, onCleanup) { const current sequence const controller new AbortController() onCleanup(() controller.abort()) if (!value.trim()) { results.value [] return } loading.value true error.value null try { const response await fetch(/api/search?q${encodeURIComponent(value)}, { signal: controller.signal, }) if (!response.ok) throw new Error(请求失败${response.status}) const data await response.json() if (current sequence Array.isArray(data)) results.value data } catch (cause) { if ((cause as DOMException).name ! AbortError current sequence) { error.value 搜索暂时不可用 } } finally { if (current sequence) loading.value false } }, { immediate: true }) return { results, loading, error, stop } }调用方若在组件外建立这个 composable应调用返回的stop若在 setup 中使用watcher 随组件卸载停止。评审意见应说明该资源的所有权而不是笼统要求“加 onUnmounted”。看竞态也看错误边界快速切换筛选条件、关闭弹窗、切换路由时旧请求可能晚于新请求返回。取消请求是首选但服务端不一定会立刻停止所以结果写入前仍需确认它属于当前状态。对保存、支付等有副作用的操作则不能简单取消后重发需要幂等键和明确的提交状态。组件级错误处理也要区分可恢复与不可恢复。引用卡片解析失败可以只隐藏卡片并记录诊断认证状态或核心数据加载失败则应给用户一个清楚的重试、退出或刷新入口。把所有异常捕获后只打印日志会让页面看似正常却没有结果。把评审落到可验证行为一条有价值的意见应能对应测试或观察方式路由往返后监听器数量是否增加连续输入时是否只展示最后一次结果弱网下 loading 是否恢复大列表滚动是否仍可用。把格式问题留给自动工具把时间投入在资源生命周期、异步顺序和失败路径上评审才能真正降低上线后的返工。