vue-review

Vue 3 / Nuxt 框架常见陷阱及修复方案（基于 Composition API 与 TypeScript） 1. 响应式丢失（Lost Reactivity） **问题**：在解构 props 或 reactive 对象时，直接赋值会丢失响应性。 **修复**：使用 `toRefs` 解构 props，或使用 `computed` 包装派生值。 ```ts const { propA } = toRefs(props); // ✅ 保持响应式 const derived = computed(() => propA.value * 2); ``` 2. SSR 水合不匹配（SSR Hydration Mismatches） **问题**：客户端渲染的 DOM 结构与服务端生成的不一致，导致水合失败。 **修复**：避免在 `onMounted` 中执行仅客户端的逻辑；使用 `useState` 或 `useAsyncData`（Nuxt）确保数据一致性；确保模板中无浏览器 API 调用。 ```ts // ❌ 错误：在 setup 中访问 window // ✅ 正确：在 onMounted 中访问 onMounted(() => { if (process.client) { // 客户端逻辑 } }); ``` 3. 缺少 key（Missing Keys） **问题**：在 `v-for` 中未使用唯一 `key`，导致渲染错误或性能问题。 **修复**：始终为列表项提供稳定唯一的 `key`，优先使用 ID 而非索引。 ```vue <div v-for="item in items" :key="item.id">{{ item.name }}</div> ``` 4. 未清理的侦听器（Uncleaned Watchers） **问题**：在组件卸载后，`watch` 或 `watchEffect` 仍可能执行，导致内存泄漏或错误。 **修复**：使用 `watch` 返回的停止函数，或在 `onScopeDispose` 中清理。 ```ts const stop = watch(someRef, () => { /* ... */ }); onScopeDispose(() => stop()); // ✅ 组件卸载时自动清理 ``` 5. 就地修改 props（Props Mutated In Place） **问题**：直接修改 props 违反单向数据流，导致不可预测行为。 **修复**：使用 `emit` 通知父组件更新，或使用 `computed` 创建本地副本。 ```ts const localValue = computed({ get: () => props.modelValue, set: (val) => emit('update:modelValue', val) }); ``` > 触发条件：`/dev vue-review`、`review this Vue`、`review the Nuxt`、`revê este componente Vue`、`revê o composable`、`porque é que a reactividade não funciona?`，或任何涉及 `*.vue` / `composables` 的差异。 > 跳过：语言无关审查 → `dev/code-review` 优先；处理顺序/状态取消 bug → `dev/click-path-audit` 优先；视觉/品牌审查 → `brand/design-review` 优先。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本