vue風格指南

vue風格指南：

1. 組件名爲多個單詞 ： 
```
Vue.component('todo-item',{
    //...
})

export default{
    name:"TodoItem"
    //...
}
```

2. 組件的data必須是一個函數
除了new Vue外的任何地方，它的值必須是一個返回函數。當 data 的值是一個對象時，它會在這個組件的全部實例之間共享，這樣致使各個組件data會互相影響

3. Prop定義 儘可能詳細
至少指定類型。
```
// 這樣作只有開發原型系統時能夠接受  
props: ['status']   //只在開發原型系統時能夠接受

//好例子
props:{
    Status:{
        type:String,
        required:true,
        validator:function(value){
            return [
                'syncing',
                'synced',
                'version-conflict',
                'error'
            ].indexOf(value) !==-1
        }
    }
}
```

4. 爲v-for設置鍵值
```
<li v-for="todo in todos" :key="todo.id">{{todo.text}}</li>
```

5. 避免v-if和v-for用在一塊兒

6. 爲組件樣式設置做用域 
對於應用來講，頂級 App 組件和佈局組件中的樣式能夠是全局的，可是其它全部組件都應該是有做用域的。
設置做用域，也能夠經過css modules 

對於組件庫，咱們應該更傾向於選用基於 class 的策略而不是 scoped 特性。

7. 私有屬性名 
使用模塊做用域保持不容許外部訪問的函數的私有性使用$_ 前綴。並附帶一個命名空間以迴避和其它做者的衝突 (好比 $_yourPluginName_)
```
var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

export default myGreatMixin;
```
或者更好
```
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin
```

8. 組件文件
把每一個組件單獨分紅文件

```很差的例子 寫在一塊兒了
Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})
```

```好的例子

components/
|- TodoList.js
|- TodoItem.js
components/
|- TodoList.vue
|- TodoItem.vue
```

9. 單文件組件文件的大小寫  
單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線鏈接
```
components/
|- MyComponent.vue
components/
|- my-component.vue
```

10. 基礎組件（公共組件）
應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V。
```
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
或
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
或
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
``` 

11. 單例組件名
只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其惟一性。

不意味着組件只可用於一個單頁面，而是每一個頁面只使用一次。這些組件永遠不接受任何 prop，由於它們是爲你的應用定製的，而不是它們在你的應用中的上下文。若是你發現有必要添加 prop，那就代表這其實是一個可複用的組件

```
components/
|- TheHeading.vue
|- TheSidebar.vue
```

12. 緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名做爲前綴命名。

若是一個組件只在某個父組件的場景下有意義，這層關係應該體如今其名字上

``` 很差的示例
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
```

``` 好的示例
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
```

13. 組件名中的單詞順序
組件名應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。

``` 很差的示例
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
```

```好的示例
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
```

14. JS/JSX 中的組件名大小寫
JS/JSX 中的組件名應該始終是 PascalCase 的，
```好的示例
Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}
```

15. 完整單詞的組件名
組件名應該傾向於完整單詞而不是縮寫
編輯器中的自動補全已經讓書寫長命名的代價很是之低了，而其帶來的明確性倒是很是寶貴的。不經常使用的縮寫尤爲應該避免。
```好的示例
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

```

16. Prop 名大小寫
在 JavaScript 中更天然的是 camelCase。而在 HTML 中則是 kebab-case。
```好的示例
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
```

```很差的示例
props: {
  'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>
```

17. 多個特性的元素
多個特性的元素應該分多行撰寫，每一個特性一行。在 JavaScript 中，用多行分隔對象的多個屬性是很常見的最佳實踐，由於這樣更易讀
```好的示例
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>
```

18. 模板中簡單的表達式
組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法

```很差的示例
{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}
```

```好的示例

<!-- 在模板中 -->
{{ normalizedFullName }}
// 複雜表達式已經移入一個計算屬性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}
```

19. 簡單的計算屬性
應該把複雜計算屬性分割爲儘量多的更簡單的屬性。

```好的示例
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}
```

20. 帶引號的特性值
非空 HTML 特性值應該始終帶引號

```很差的示例
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

```

```好的示例
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
```

21. 組件/實例的選項的順序
組件/實例的選項應該有統一的順序

a. el
b. name , parent
c. functional (更改組件的類型)
d. delimiters, comments (模板修改器)     
e. components , directives,filters   
f. extends, mixins 
g. model, props/propsData
h. data, computed
i. watch, 生命週期 beforeCreate,created, beforeMounted, mounted, beforeUpdate,updated,activated, deactivated , beforeDestroy, destroyed 
j. methods(非響應式的屬性)不依賴響應系統的實例屬性
k. 渲染template/render,  renderError

22. 元素特性的順序
a. is
b. v-for
c. v-if/v-show/v-cloak
d. v-pre/v-once
e. id
f. ref/key
g. v-model
h. 其餘特性（全部普通的綁定或未綁定的特性）
i. v-on
j. v-html/v-text

23. 若是一組 v-if + v-else 的元素類型相同，最好使用 key

```好的示例
<div
  v-if="error"
  key="search-status"
>
  錯誤：{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  {{ results }}
</div>
```

24. scoped 中的元素選擇器
在 scoped 樣式中，類選擇器比元素選擇器更好，由於大量使用元素選擇器是很慢的。

```很差的示例
<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>

```

```好的示例
<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

```

25. 隱性的父子組件通訊
優先使用prop和事件進行父子組件通訊

26. 非Flux的全局狀態管理 應該優先經過 Vuex 管理全局狀態，而不是經過 this.$root 或一個全局事件總線