优先级C规则：推荐 ​

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

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

组件/实例选项顺序 ​

组件/实例选项应该有序排列。

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

1. 全局意识（需要超出组件的知识）

   • name

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

   • compilerOptions

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

   • components
   • directives

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

   • extends
   • mixins
   • provide/inject

5. 接口（组件的接口）

   • inheritAttrs
   • props
   • emits

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

   • setup

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

   • data
   • computed

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

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

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

   • methods

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

    • template/render

元素属性顺序 ​

元素的属性（包括组件）应该有序排列。

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

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

组件/实例选项中的空行 ​

您可能希望在多行属性之间添加一个空行，尤其是如果选项在屏幕上无法显示而需要滚动时。

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

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

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

  label: String,
  icon: String
},

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

  inputClasses() {
    // ...
  }
}

// No spaces are also fine, as long as the component
// is still easy to read and navigate.
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(() => {
  // ...
})

单文件组件顶层元素顺序 ​

单文件组件 应始终按顺序排列 <script>、<template> 和 <style> 标签，其中 <style> 最后，因为其中至少有一个是必需的。

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

<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>