推荐规则 {#priority-c-rules-recommended}

当存在多个同样好的选项时，可以任意选择一个以确保一致性。在这些规则中，我们描述了每个可接受的选项，并建议一个默认选择。这意味着你可以在自己的代码库中自由做出不同的选择，只要保持一致并且有充分的理由。但请务必有充分的理由！通过适应社区标准，你将：

1. 训练你的大脑，更容易解析你遇到的大多数社区代码
2. 能够无需修改地复制和粘贴大多数社区代码示例
3. 经常发现新员工已经习惯了你的首选编码风格，至少在 Vue 方面是如此

组件/实例选项的顺序 {#component-instance-options-order}

组件/实例选项应该保持一致顺序。

这是我们推荐的组件选项默认顺序。它们被分为几个类别，这样你就知道从哪里添加插件新增的属性。

1. 全局感知（需要超出组件本身的知识）

   • name

2. 模板编译器选项（改变模板的编译方式）

   • compilerOptions

3. 模板依赖（模板中使用的资源）

   • components
   • directives

4. 组合（将属性合并到选项中）

   • extends
   • mixins
   • provide/inject

5. 接口（组件的接口）

   • inheritAttrs
   • props
   • emits
   • expose

6. 组合式 API（使用组合式 API 的入口点）

   • setup

7. 局部状态（局部响应式属性）

   • data
   • computed

8. 事件（由响应式事件触发的回调）

   • watch
   • 生命周期事件（按调用顺序排列）
     • beforeCreate
     • created
     • beforeMount
     • mounted
     • beforeUpdate
     • updated
     • activated
     • deactivated
     • beforeUnmount
     • unmounted
     • errorCaptured
     • renderTracked
     • renderTriggered
     • serverPrefetch（仅限 SSR）

9. 非响应式属性（独立于响应式系统的实例属性）

   • methods

10. 渲染（组件输出的声明式描述）

    • template/render

元素属性的顺序 {#element-attribute-order}

元素（包括组件）的属性应该保持一致顺序。

这是我们推荐的组件选项默认顺序。它们被分为几个类别，这样你就知道从哪里添加自定义属性和指令。

1. 定义（提供组件选项）

   • is

2. 列表渲染（创建同一元素的多个变体）

   • v-for

3. 条件（元素是否被渲染/显示）

   • v-if
   • v-else-if
   • v-else
   • v-show
   • v-cloak

4. 渲染修饰符（改变元素的渲染方式）

   • v-pre
   • v-once

5. 全局感知（需要超出组件本身的知识）

   • id

6. 唯一属性（需要唯一值的属性）

   • ref
   • key

7. 双向绑定（结合绑定和事件）

   • v-model

8. 其他属性（所有未指定的绑定和非绑定属性）

9. 事件（组件事件监听器）

   • v-on

10. 内容（覆盖元素的内容）

    • v-html
    • v-text

组件/实例选项中的空行 {#empty-lines-in-component-instance-options}

你可能希望在多行属性之间添加一个空行，特别是当选项超出屏幕需要滚动时。

当组件开始变得拥挤或难以阅读时，在多行属性之间添加空格可以让它们更容易被浏览。在某些编辑器中，例如 Vim，这样的格式化选项也可以让它们更容易用键盘导航。

props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue() {
    // ...
  },

  inputClasses() {
    // ...
  }
}

// 不加空行也可以，只要组件
// 仍然易于阅读和导航。
props: {
  value: {
    type: String,
    required: true
  },
  focused: {
    type: Boolean,
    default: false
  },
  label: String,
  icon: String
},
computed: {
  formattedValue() {
    // ...
  },
  inputClasses() {
    // ...
  }
}

defineProps({
  value: {
    type: String,
    required: true
  },
  focused: {
    type: Boolean,
    default: false
  },
  label: String,
  icon: String
})
const formattedValue = computed(() => {
  // ...
})
const inputClasses = computed(() => {
  // ...
})

defineProps({
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
})

const formattedValue = computed(() => {
  // ...
})

const inputClasses = computed(() => {
  // ...
})

单文件组件顶级元素顺序 {#single-file-component-top-level-element-order}

单文件组件 应该始终让 <script>、<template> 和 <style> 标签保持一致的顺序，并且 <style> 放在最后，因为其他两个中至少有一个是始终必需的。

<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>

<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>