优先级 C 的规则：推荐 (将选择和认知成本最小化)

组件/实例选项的顺序

组件/实例的选项应该有统一的顺序。这是我们为组件选项推荐的默认顺序。它们被划分为几大类，你能够由此知道新的 property 应该被放到哪里。

全局感知(要求在组件以外被感知)
- name
模板编译选项(改变模板编译的方式)
- compilerOptions
模板依赖(模板内使用的资源)
- components
- directives
组合(合并 property 至选项内)
- extends
- mixins
- provide/inject
接口(组件的接口)
- inheritAttrs
- props
- emits
- expose
组合式 API(使用组合式 API 的入口点)
- setup
本地状态(本地的响应式 property)
- data
- computed
事件(通过响应式事件触发的回调)
- watch
- 生命周期事件(按照它们被调用的顺序)
  - beforeCreate
  - created
  - beforeMount
  - mounted
  - beforeUpdate
  - updated
  - activated
  - deactivated
  - beforeUnmount
  - unmounted
  - errorCaptured
  - renderTracked
  - renderTriggered
非响应式的 property(不依赖响应性系统的实例 property)
- methods
渲染(组件输出的声明式描述)
- template/render

元素 attribute 的顺序

元素(包括组件)的 attribute 应该有统一的顺序。这是我们为组件选项推荐的默认顺序。它们被划分为几大类，你能够由此知道新添加的自定义 attribute 和指令应该被放到哪里。

定义(提供组件的选项)
- is
列表渲染(创建相同元素的多个变体)
- v-for
条件(元素是否渲染/显示)
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
渲染修饰符(改变元素的渲染方式)
- v-pre
- v-once
全局感知(要求在组件以外被感知)
- id
唯一性 Attribute(需要唯一值的 attribute)
- ref
- key
双向绑定(结合了绑定与事件)
- v-model
其他 Attribute(所有普通的、绑定或未绑定的 attribute)
事件(组件事件监听器)
- v-on
内容(覆写元素的内容)
- v-html
- v-text

组件/实例选项中的空行

你可能想在多个 property 之间增加一个空行，特别是在这些选项多到一屏放不下，需要滚动才能看完的时候。当你开始觉得组件密集或难以阅读时，在多个 property 之间添加空行可以使其重新变得易于阅读。在一些诸如 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() {
    // ...
  }
}

单文件组件的顶级元素的顺序

单文件组件应始终保持<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>