一、必要
1、组件名应该始终是多个单词
Vue.component('todo-item', { // ... }) export default { name: 'TodoItem', // ... }
2、组件的 data 必须是一个函数
Vue.component('some-comp', { data: function () { return { foo: 'bar' } } }) export default { data () { return { foo: 'bar' } } }
3、Prop 定义应该尽量详细，至少需要指定其类型
props: { status: String }
4、总是用 key 配合 v-for
<ul> <li v-for="todo in todos" :key="todo.id" > {{ todo.text }} </li> </ul>
5、永远不要把 v-if 和 v-for 同时用在同一个元素上
<ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id" > {{ user.name }} </li> </ul>
6、为组件样式设置作用域
<template> <button class="button button-close">X</button> </template> <!-- 使用 `scoped` 特性 --> <style scoped> .button { border: none; border-radius: 2px; } .button-close { background-color: red; } </style>
7、私有属性名使用 $_ 前缀
var myGreatMixin = { // ... methods: { $_myGreatMixin_update: function () { // ... } } }
二、强烈推荐（增强可读性）
1、只要有能够拼接文件的构建系统，就把每个组件单独分成文件
components/ |- TodoList.vue |- TodoItem.vue
2、单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)
components/ |- MyComponent.vue
3、应用特定样式和约定的基础组件应该全部以一个特定的前缀开头，比如 Base、App 或 V。
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
4、只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
components/ |- TheHeading.vue |- TheSidebar.vue
5、和父组件紧密耦合的子组件应该以父组件名作为前缀命名
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue
6、组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue
7、在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
<!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
8、对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
9、JS/JSX 中的组件名应该始终是 PascalCase 的
Vue.component('MyComponent', { // ... }) import MyComponent from './MyComponent.vue' export default { name: 'MyComponent', // ... }
10、组件名应该倾向于完整单词而不是缩写
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
11、在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case
props: { greetingText: String } <WelcomeMessage greeting-text="hi"/>
12、多个特性的元素应该分多行撰写，每个特性一行。
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" />
13、组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
<!-- 在模板中 --> {{ normalizedFullName }} <script> // 复杂表达式已经移入一个计算属性 computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } } </script>
14、应该把复杂计算属性分割为尽可能多的更简单的属性。
computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } }
15、非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
<input type="text"> <AppSidebar :style="{ width: sidebarWidth + 'px' }">
16、指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
<input :value="newTodoText" :placeholder="newTodoInstructions" > <input @input="onInput" @focus="onFocus" > <template #header> <h1>Here might be a page title</h1> </template>
三、推荐（将选择和认知成本最小化）
1、组件/实例的选项应该有统一的顺序。
1、副作用 (触发组件外的影响) el 2、全局感知 (要求组件以外的知识) name parent 3、组件类型 (更改组件的类型) functional 4、模板修改器 (改变模板的编译方式) delimiters comments 5、模板依赖 (模板内使用的资源) components directives filters 6、组合 (向选项里合并属性) extends mixins 7、接口 (组件的接口) inheritAttrs model props/propsData 8、本地状态 (本地的响应式属性) data computed 9、事件 (通过响应式事件触发的回调) watch 10、生命周期钩子 (按照它们被调用的顺序) beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed 11、非响应式的属性 (不依赖响应系统的实例属性) methods 12、渲染 (组件输出的声明式描述) template/render renderError
2、元素 (包括组件) 的特性应该有统一的顺序。
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
3、你可能想在多个属性之间增加一个空行，特别是在这些选项一屏放不下，需要滚动才能都看到的时候。
props: { value: { type: String, required: true }, focused: { type: Boolean, default: false }, label: String, icon: String }, computed: { formattedValue: function () { // ... }, inputClasses: function () { // ... } }
4、单文件组件顺序因为另外两个标签至少要有一个。
<!-- ComponentA.vue --> <template>...</template> <script>/* ... */</script> <style>/* ... */</style>
四、谨慎使用 (有潜在危险的模式)
1、如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 div 元素)。
<div v-if="error" key="search-status" > 错误：{{ error }} </div> <div v-else key="search-results" > {{ results }} </div>
2、元素选择器应该避免在 scoped 中出现，应该使用类选择器。
<template> <button class="btn btn-close">X</button> </template> <style scoped> .btn-close { background-color: red; } </style>
3、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
4、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。
// store/modules/todos.js export default { state: { list: [] }, mutations: { REMOVE_TODO (state, todoId) { state.list = state.list.filter(todo => todo.id !== todoId) } }, actions: { removeTodo ({ commit, state }, todo) { commit('REMOVE_TODO', todo.id) } } }
<!-- TodoItem.vue --> <template> <span> {{ todo.text }} <button @click="removeTodo(todo)"> X </button> </span> </template> <script> import { mapActions } from 'vuex' export default { props: { todo: { type: Object, required: true } }, methods: mapActions(['removeTodo']) } </script>
