1 优先级 A 的规则：必要的
组件名为多个单词
除了 new Vue 外的任何地方,组件的 data 必须是一个函数
当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。
Prop 定义应该尽量详细
为
v-for设置键值
避免
v-if和v-for用在一起
将 v-if 移动至容器元素上 (比如 ul, ol)
为组件样式设置作用域
使用 scoped 特性或CSS Modules
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style>
私有属性名
使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有属性使用 $_ 前缀。
var myGreatMixin = {
// ...
methods: {
$_myGreatMixin_update: function () {
// ...
}
}
}
// 甚至更好！
var myGreatMixin = {
// ...
methods: {
publicMethod() {
// ...
myPrivateFunction()
}
}
}
function myPrivateFunction() {
// ...
}
export default myGreatMixin
2优先级 B 的规则：强烈推荐
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
MyComponent.vue
my-component.vue
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
BaseButton.vue
AppButton.vue
VButton.vue
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
SearchButtonClear.vue
SearchInputQuery.vue
在单文件组件、字符串模板和 JSX中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX中应该始终使用 kebab-case
多个特性的元素应该分多行撰写，每个特性一行
应该把复杂计算属性分割为尽可能多的更简单的属性
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
非空 HTML 特性值应该始终带引号
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
3优先级 C 的规则：推荐
组件/实例的选项应该有统一的顺序
副作用 (触发组件外的影响)
el
全局感知 (要求组件以外的知识)
name
parent
组件类型 (更改组件的类型)
functional
模板修改器 (改变模板的编译方式)
delimiters
comments
模板依赖 (模板内使用的资源)
components
directives
filters
组合 (向选项里合并属性)
extends
mixins
接口 (组件的接口)
inheritAttrs
model
props/propsData
本地状态 (本地的响应式属性)
data
computed
事件 (通过响应式事件触发的回调)
watch
生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
非响应式的属性 (不依赖响应系统的实例属性)
methods
渲染 (组件输出的声明式描述)
template/render
renderError
