vue的風格指南（必要的）

一、v-if與v-for不要放在同一個元素上

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。永遠不要把 v-if 和 v-for 同時用在同一個元素上。

通常咱們在兩種常見的狀況下會傾向於這樣作：

爲了過濾一個列表中的項目 (好比 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users替換爲一個計算屬性 (好比 activeUsers)，讓其返回過濾後的列表。

爲了不渲染本應該被隱藏的列表 (好比 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (好比 ul, ol)。

使用計算屬性咱們將會得到以下好處：

過濾後的列表只會在 users 數組發生相關變化時才被從新運算，過濾更高效。

使用 v-for="user in activeUsers" 以後，咱們在渲染的時候只遍歷活躍用戶，渲染更高效。

解藕渲染層的邏輯，可維護性 (對邏輯的更改和擴展) 更強。

經過將 v-if 移動到容器元素，咱們不會再對列表中的每一個用戶檢查 shouldShowUsers。取而代之的是，咱們只檢查它一次，且不會在 shouldShowUsers 爲否的時候運算 v-for。

 

二、組件名爲多個單詞

組件名應該始終是多個單詞的，根組件 App 除外。

這樣作能夠避免跟現有的以及將來的 HTML 元素相沖突，由於全部的 HTML 元素名稱都是單個單詞的。例如：HolleWorld

 

三、組件數據 組件的 data 必須是一個函數。

當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數。

當 data 的值是一個對象時，它會在這個組件的全部實例之間共享。想象一下，假如一個 TodoList 組件的數據是這樣的：

data: {
    listTitle: '',
    todos: []
}

咱們可能但願重用這個組件，容許用戶維護多個列表 (好比分爲購物、心願單、平常事務等)。這時就會產生問題。由於每一個組件的實例都引用了相同的數據對象，更改其中一個列表的標題就會改變其它每個列表的標題。增刪改一個待辦事項的時候也是如此。

取而代之的是，咱們但願每一個組件實例都管理其本身的數據。爲了作到這一點，每一個實例必須生成一個獨立的數據對象。在 JavaScript 中，在一個函數中返回這個對象就能夠了：

data() {
    return {
        listTitle: '',
        todos: []
    }
}
//data() {   == data: function () {

 

四、Prop 定義應該儘可能詳細。

在你提交的代碼中，prop 的定義應該儘可能詳細，至少須要指定其類型。

細緻的 prop 定義有兩個好處：

它們寫明瞭組件的 API，因此很容易看懂組件的用法；

在開發環境下，若是向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源。

 

五、爲 v-for 設置鍵值

老是用 key 配合 v-for。

在組件上老是必須用 key 配合 v-for，以便維護內部組件及其子樹的狀態。

 

六、爲組件樣式設置做用域

對於應用來講，頂級 App 組件和佈局組件中的樣式能夠是全局的，可是其它全部組件都應該是有做用域的。

這條規則只和單文件組件有關。你不必定要使用 scoped 特性。設置做用域也能夠經過 CSS Modules，那是一個基於 class 的相似 BEM 的策略，固然你也可使用其它的庫或約定。

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

這讓覆寫內部樣式更容易：使用了常人可理解的 class 名稱且沒有過高的選擇器優先級，並且不太會致使衝突。

若是你和其餘開發者一塊兒開發一個大型工程，或有時引入三方 HTML/CSS (好比來自 Auth0)，設置一致的做用域會確保你的樣式只會運用在它們想要做用的組件上。

不止要使用 scoped 特性，使用惟一的 class 名能夠幫你確保那些三方庫的 CSS 不會運用在你本身的 HTML 上。好比許多工程都使用了 button、btn或 icon class 名，因此即使你不使用相似 BEM 的策略，添加一個 app 專屬或組件專屬的前綴 (好比 ButtonClose-icon) 也能夠提供不少保護。

三種方式：

<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>


<template>
  <button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 約定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

爲組件設置做用域

 

七、私有屬性名

在插件、混入等擴展中始終爲自定義的私有屬性使用 $_ 前綴。並附帶一個命名空間以迴避和其它做者的衝突 (好比 $_yourPluginName_)。

Vue 使用 _ 前綴來定義其自身的私有屬性，因此使用相同的前綴 (好比 _update) 有覆寫實例屬性的風險。即使你檢查確認 Vue 當前版本沒有用到這個屬性名，也不能保證和未來的版本沒有衝突。

對於 $ 前綴來講，其在 Vue 生態系統中的目的是暴露給用戶的一個特殊的實例屬性，因此把它用於私有屬性並不合適。

不過，咱們推薦把這兩個前綴結合爲 $_，做爲一個用戶定義的私有屬性的約定，以確保不會和 Vue 自身相沖突。