在构建大型 Web 应用时，许多开发者容易陷入“能跑就行”的误区。作为 Codex 中文指南，我们聚焦于 Vue 3 开发团队的官方建议与实际落地中的常见陷阱，帮助你在代码质量与开发效率之间找到平衡。
响应式数据的正确选择
一个高频错误是滥用 ref 或 reactive。对于基本类型，ref 是首选；但对于对象或数组，若需保持引用稳定性且避免解构丢失响应性，reactive 更合适。切记不要在模板中直接调用函数来生成数据，这会触发不必要的重新渲染。应利用计算属性（computed）缓存结果，仅当依赖项变化时才更新。
组件通信与状态管理
Props 向下传递、事件向上传递是基础，但深层嵌套组件间通信会导致“道具地狱”。此时应引入 Pinia 进行全局状态管理，而非 Vuex 的遗留模式。Pinia 支持 TypeScript 且结构更扁平。避免在多个组件中维护同一份重复状态，这会导致数据不一致。通过组合式函数（Composables）提取逻辑，实现跨组件复用，比混入（Mixins）更安全且易于追踪。
性能优化与代码分割
懒加载是提升首屏速度的关键。使用 defineAsyncComponent 或路由级的动态导入，将非核心资源拆分。同时，注意监听器（watch）的使用场景：若只需在值变化时执行副作用，使用 watchEffect 更简洁；若需精确控制依赖，则用 watch 并手动清理副作用，防止内存泄漏。遵循这些实践，可显著降低维护成本，确保项目长期健壮性。