Back to Details

vue-development-guides

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue.js Development Guides

Vue.js 开发指南

Tasks Checklist

任务检查清单

  • Followed the core principles
  • Followed the defaults unless there is a good reason not to
  • Followed the reactivity best practices
  • Followed the component best practices
    • Followed the Vue SFC best practices
    • Kept components focused
      • Split large components into smaller ones when needed
      • Moved state/side effects into composables if applicable
    • Followed data flow best practices
  • 遵循核心原则
  • 除非有充分理由，否则遵循默认规范
  • 遵循响应式最佳实践
  • 遵循组件最佳实践
    • 遵循Vue SFC最佳实践
    • 保持组件聚焦
      • 必要时将大型组件拆分为更小的组件
      • 若适用，将状态/副作用转移到组合式函数中
    • 遵循数据流最佳实践

Core Principles

核心原则

  • Keep state predictable: one source of truth, derive everything else.
  • Make data flow explicit: Props down, Events up for most cases.
  • Favor small, focused components: easier to test, reuse, and maintain.
  • Avoid unnecessary re-renders: use computed properties and watchers wisely.
  • Readability counts: write clear, self-documenting code.
  • 保持状态可预测： 单一数据源，其他所有数据均派生自它。
  • 使数据流清晰： 大多数情况下遵循“Props向下传递，Events向上触发”。
  • 偏好小型、聚焦的组件： 更易于测试、复用和维护。
  • 避免不必要的重渲染： 明智地使用计算属性和侦听器。
  • 可读性至关重要： 编写清晰、自文档化的代码。

Defaults (unless the user says otherwise)

默认规范（除非用户另有说明）

  • Prefer the Composition API over the Options API.
  • 优先使用Composition API而非Options API。

Reactivity

响应式

IMPORTANT: You MUST follow the 
references/reactivity-guide.md
for reactive state management when creating, updating a component or a composable.
重要提示：在创建、更新组件或组合式函数时，必须遵循
references/reactivity-guide.md
中的响应式状态管理规范。

Components

组件

IMPORTANT: You MUST follow the 
references/sfc-guide.md
for best practices when working with Vue SFCs.
  • Prefer Vue Single-File Components (SFC) using 
    <script setup lang="ts">
     (TypeScript) by default.
  • In Vue SFCs, keep sections in this order: 
    <script>
    → 
    <template>
    → 
    <style>
    .
重要提示：在处理Vue SFC时，必须遵循
references/sfc-guide.md
中的最佳实践。
  • 默认优先使用**
    <script setup lang="ts">
    **（TypeScript）编写Vue单文件组件（SFC）。
  • 在Vue SFC中，保持代码块顺序为：
    <script>
    → 
    <template>
    → 
    <style>
    。

Keep components focused

保持组件聚焦

Split a component when it has more than one clear responsibility (e.g. data orchestration + UI, or multiple independent UI sections).
  • Prefer smaller components + composables over one “mega component”
  • Move UI sections into child components (props in, events out).
  • Move state/side effects into composables (
    useXxx()
    ).
NOTE: This rule also applies to the entry component (e.g. App.vue) in a Vue / Nuxt project by default.
当组件有多个明确职责时（例如数据编排+UI，或多个独立UI区域），应拆分组件。
  • 优先选择小型组件+组合式函数而非“巨型组件”
  • 将UI区域转移到子组件中（Props传入，Events传出）。
  • 将状态/副作用转移到组合式函数（
    useXxx()
    ）中。
注意：默认情况下，此规则也适用于Vue / Nuxt项目的入口组件（如App.vue）。

Data Flow

数据流

IMPORTANT: You MUST follow the 
references/data-flow-guide.md
for passing and receiving data between components using:
  • Props
  • Emits
  • v-model
  • provide/inject
For sharing data across the app, please follow the 
references/state-management-guide.md
and consider using a Store for state management solution.
重要提示：在组件间传递和接收数据时，必须遵循
references/data-flow-guide.md
，可使用：
  • Props
  • Emits
  • v-model
  • provide/inject
如需在整个应用中共享数据，请遵循
references/state-management-guide.md
，并考虑使用Store作为状态管理方案。