### 組件數據 組件的 data 必須是一個函數。 ~~~js // bad export default { data: { foo: 'bar', }, }; // good export default { data() { return { foo: 'bar', }; }, }; ~~~ ### 單文件組件文件名稱 單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase)，要么始終是橫線連接 (kebab-case)。 ~~~ // bad mycomponent.vue myComponent.vue // good my-component.vue MyComponent.vue ~~~ ### 緊密耦合的組件名 和父組件緊密耦合的子組件應該以父組件名作為前綴命名。 ~~~ // bad components/ |- TodoList.vue |- TodoItem.vue └─ TodoButton.vue // good components/ |- TodoList.vue |- TodoListItem.vue └─ TodoListItemButton.vue ~~~ ### 自閉合組件 在單文件組件中沒有內容的組件應該是自閉合的。 ~~~html <!-- bad --> <my-component></my-component> <!-- good --> <my-component /> ~~~ ### Prop 名大小寫 在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用 kebab-case。 ~~~js // bad export default { props: { 'greeting-text': String, }, }; // good export default { props: { greetingText: String, }, }; ~~~ ~~~html <!-- bad --> <welcome-message greetingText="hi" /> <!-- good --> <welcome-message greeting-text="hi" /> ~~~ ### 指令縮寫 指令縮寫，用`:`表示`v-bind:`，用`@`表示`v-on:` ~~~html <!-- bad --> <input v-bind:value="value" v-on:input="onInput" /> <!-- good --> <input :value="value" @input="onInput" /> ~~~ ### Props 順序 標簽的 Props 應該有統一的順序，依次為指令、屬性和事件。 ~~~html <my-component v-if="if" v-show="show" v-model="value" ref="ref" :key="key" :text="text" @input="onInput" @change="onChange" /> ~~~ ### 組件選項的順序 組件選項應該有統一的順序。 ~~~js export default { name: '', mixins: [], components: {}, props: {}, data() {}, computed: {}, watch: {}, created() {}, mounted() {}, destroyed() {}, methods: {}, }; ~~~ ### 組件選項中的空行 組件選項較多時，建議在屬性之間添加空行。 ~~~js export default { computed: { formattedValue() { // ... }, styles() { // ... }, }, methods: { onInput() { // ... }, onChange() { // ... }, }, }; ~~~ ### 單文件組件頂級標簽的順序 單文件組件應該總是讓頂級標簽的順序保持一致，且標簽之間留有空行。 ~~~html <template> ... </template> <script> /* ... */ </script> <style> /* ... */ </style> ~~~