風格指南官方文檔

一、優(yōu)先級A

1、組件名為多個單詞

避免跟html元素相沖突。根組件除外。

2、組件data必須是一個函數(shù)。

使每個組件都管理自己的數(shù)據(jù)。

3、prop定義應該盡量詳細，至少要指定其類型。

【最好的做法】
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

4、為v-for設置鍵值key。

以便維護內部組件及其子數(shù)的狀態(tài)。

5、永遠不要把v-if 和 v-for 同時用在一個元素上。

當 Vue 處理指令時，v-for 比 v-if 具有更高的優(yōu)先級，所以如下代碼：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

運算順序：

this.users.map(fuction(user){
  if (user.isActive) {
    return user.name
  }
})

這樣就導致，哪怕只渲染出小部分用戶的元素，也得在每次重新渲染的時候遍歷整個列表，不論活躍用戶是否發(fā)生改變。

• 修改方法一：
  所以，最好將 v-if 改成一個計算屬性，返回篩選好的值，v-for在返回值的基礎上進行遍歷。

computed:{
  activeUsers: function(){
    return this.users.filter(function(user){
      return user.isActive
    })
  }
}

<ul>
  <li 
    v-for = "user in activeUsers"
    :key = "user.id"
    >
     {{ user.name }}
  </li>
</ul>

這樣子的好處是：
1、過濾后的列表 activeUsers只會在users列表發(fā)生變化時才被重新運算，過濾更加高效。
2、使用了v-for = “user in activeUsers”之后，我們在渲染的時候只遍歷activeUser，渲染更高效。
3、解耦渲染曾的邏輯，可維護性更強。

• 修改方法二：
  把v-if 上移一層到容器元素，這樣就不會對列表中的每一個用戶檢查isActive，且不會再isActive為否的時候運算v-for。

<ul  v-if="user.isActive">
  <li
    v-for="user in users" 
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

6、為組件樣式設置作用域

根組件App和布局組件中的樣式可以是全局的，但是其他組件都應該是有作用域的。

使用scoped屬性，還可以使用唯一的class名，這樣不會和第三方庫的css不會運用到自己的html上，或者也可以選擇添加一個app專屬或者組件專屬的前綴。

CSS Modules 用法教程-阮一峰

7、私有屬性名

在插件、混入等擴展中始終為自定義的私有屬性使用 $_ 前綴。

• Vue使用_ 來定義自身的私有屬性，如果單使用_有覆蓋實例屬性的風險。
• Vue使用$前綴，來規(guī)定其自身的實例屬性。
• 將 $、_、一個自定義名結合，就可以作為用戶定義的私有屬性的約定，不會和Vue自身沖突。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}