vue-development-guides

Vue.js 开发指南

任务清单

• 遵循核心原则
• 遵循默认做法，除非有充分理由不这样做
• 遵循响应性最佳实践
• 遵循组件最佳实践
  • 遵循 Vue SFC 最佳实践
  • 保持组件专注
    • 必要时将大型组件拆分为更小的组件
    • 适用时将状态／副作用移至组合式函数
  • 遵循数据流最佳实践

---

核心原则

• 让状态保持可预测： 只设一个事实来源，其他内容都由此派生。
• 让数据流明确： 大多数情况下，Props 向下传递，Events 向上传递。
• 优先使用小而专注的组件： 这样更易于测试、复用和维护。
• 避免不必要的重新渲染： 合理使用计算属性和侦听器。
• 重视可读性： 编写清晰且能自我说明的代码。

默认做法（除非用户另有说明）

• 优先使用 Composition API，而不是 Options API。

响应性

重要：创建或更新组件、组合式函数时，必须遵循 references/reactivity-guide.md 中关于响应式状态管理的指南。

组件

重要：处理 Vue SFC 时，必须遵循 references/sfc-guide.md 中的最佳实践。

• 默认优先使用 Vue 单文件组件（SFC），并采用 <script setup lang="ts">（TypeScript）。
• 在 Vue SFC 中，按以下顺序排列各部分：<script> → <template> → <style>。

保持组件专注

当组件承担多个明确职责时（例如，数据编排与 UI，或多个彼此独立的 UI 区域），应将其拆分。

• 优先使用较小的组件和组合式函数，而不是一个“大型组件”
• 将 UI 区域移至子组件（传入 props，传出 events）。
• 将状态／副作用移至组合式函数（useXxx()）。

注意：默认情况下，此规则也适用于 Vue／Nuxt 项目中的入口组件（例如 App.vue）。

数据流

重要：使用以下方式在组件间传递和接收数据时，必须遵循 references/data-flow-guide.md：

• Props
• Emits
• v-model
• provide/inject

如需在整个应用中共享数据，请遵循 references/state-management-guide.md，并考虑使用 Store 进行状态管理。