[TOC] ## 1.組件名為多個單詞，根組件 App 和內置組件 \<transition> \<component> 等除外 ```js // bad Vue.component('todo', { // ... }) export default { name: 'Todo', // ... } // good Vue.component('todo-item', { // ... }) export default { name: 'TodoItem', // ... } ``` ## 2.組件的 data 必須是一個函數 當在組件中使用`data`屬性的時候 (除了`new Vue`外的任何地方)，它的值必須是返回一個對象的函數。當`data`的值是一個對象時，它會在這個組件的所有實例之間共享，如果該組件被復用將難以管理數據。 ```js // good export default { data () { return { foo: 'bar' } } } ``` ## 3.Prop 定義應該盡量詳細，至少需要指定其類型 細致的 prop 定義有兩個好處： - 它們寫明了組件的 API，所以很容易看懂組件的用法； - 在開發環境下，如果向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源。 ```js // good props: { status: String } // better props: { status: { type: String, required: true, validator: function (value) { return [ 'syncing', 'synced', 'version-conflict', 'error' ].indexOf(value) !== -1 } } } ``` ## 4.避免 v-if 和 v-for 同時用在一個元素上 當 Vue 處理指令時，`v-for`比`v-if`具有更高的優先級，所以這個模板： ```html <ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li> </ul> ``` 將會經過如下運算： ```js this.users.map(function (user) { if (user.isActive) { return user.name } }) ``` 因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍用戶是否發生了變化。 通過將其更換為在如下的一個計算屬性上遍歷： ```js computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } ``` ```html <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> ``` 我們將會獲得如下好處： - 過濾后的列表只會在 users 數組發生相關變化時才被重新運算，過濾更高效。 - 使用 v-for="user in activeUsers" 之后，我們在渲染的時候只遍歷活躍用戶，渲染更高效。 - 解耦渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。 ## 5.為組件樣式設置作用域 當 \<style> 標簽有 scoped 屬性時，它通過使用 PostCSS 來實現以下轉換： ```html <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ``` 轉換結果： ```html <style> .example[data-v-f3f3eg9] { color: red; } </style> <template> <div class="example" data-v-f3f3eg9>hi</div> </template> ``` ## 6.組件文件 只要有能夠拼接文件的構建系統，就把每個組件單獨分成文件。 ```js // bad Vue.component('TodoList', { // ... }) // good components/ |- TodoList.js |- TodoItem.js ``` ## 7.組件文件的大小寫 單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase)，要么始終是橫線連接 (kebab-case)。 ```js // bad components/ |- mycomponent.vue components/ |- myComponent.vue // good components/ |- MyComponent.vue components/ |- my-component.vue ``` ## 8.基礎組件名 應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭，比如 Base、App 或 V。 ```js // bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue // good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue components/ |- AppButton.vue |- AppTable.vue |- AppIcon.vue components/ |- VButton.vue |- VTable.vue |- VIcon.vue ``` ## 9.單例組件名 **只應該擁有單個活躍實例的組件應該以`The`前綴命名，以示其唯一性。** 這不意味著組件只可用于一個單頁面，而是*每個頁面* 只使用一次。這些組件永遠不接受任何 prop，因為它們是為你的應用定制的，而不是它們在你的應用中的上下文。如果你發現有必要添加 prop，那就表明這實際上是一個可復用的組件，*只是目前*在每個頁面里只使用一次。 ```js // bad components/ |- Heading.vue |- MySidebar.vue // good components/ |- TheHeading.vue |- TheSidebar.vue ``` ## 10.模板中的組件名大小寫 **對于絕大多數項目來說，在單文件組件和字符串模板中組件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的。** 由于 HTML 是大小寫不敏感的，在 DOM 模板中必須仍使用 kebab-case。 ```html // bad <!-- 在單文件組件和字符串模板中 --> <mycomponent/> <!-- 在單文件組件和字符串模板中 --> <myComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent> // good <!-- 在單文件組件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component> ``` ## 11.多個特性的元素 **多個特性的元素應該分多行撰寫，每個特性一行。** ```html // bad <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/> // good <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" /> ``` ## 12.帶引號的特性值 **非空 HTML 特性值應該始終帶引號 (一般是雙引號)** 在 HTML 中不帶空格的特性值是可以沒有引號的，但這鼓勵了大家在特征值里 *不寫* 空格，導致可讀性變差。 ```html // bad <input type=text> <AppSidebar :style={width:sidebarWidth+'px'}> // good <input type="text"> <AppSidebar :style="{ width: sidebarWidth + 'px' }"> ```