Vue風格指南小結

Miloo發表於2018-02-01
Vue

fountain
攝於2018年01月26日 20:04:56 杭州西湖音樂噴泉

有一個良好的編碼習慣風格對程式設計師來說也是功底的考究，而且還能規避一些不必要的錯誤，提高程式碼可讀性，況且這也是一個優雅編寫Vue的開始，嗯，完美Perfect。個人部落格

元件資料

元件的 data 必須是一個函式。

當在元件中使用 data 屬性的時候（除了 new Vue 外的任何地方），它的值必須是返回一個物件的函式。 Vue希望每個元件例項都相對應地管理自己的資料，而不是在複用元件時各個元件之間出現資料混亂的情況，所以要求每個例項必須生成一個獨立的資料物件。

Bad =>

Vue.component('todo-list', {
    data: {
        foo: 'bar'
    }
})
複製程式碼

Good =>

Vue.component('todo-list', {
    data: function() {
        return {
            foo: 'bar'
        }
    }
})
複製程式碼
Prop 定義

Prop定義應該儘量詳細，至少需要指定其型別。

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

  • 他們寫明瞭元件的API，所以很容易看懂元件的用法；
  • 在開發環境下，如果向一個元件提供格式不正確的prop，Vue將會丟擲警告，以幫助你捕獲潛在的錯誤來源。

Bad =>

// 這樣做只有開發原型系統時可以接受
props: ['status']
複製程式碼

Good =>

props: {
    status: String
}
複製程式碼

Better =>

props: {
    status: {
        type: String,
        required: true,
        // 自定義函式驗證
        validator: function(value) {
            return value > 10
        }
    }
}
複製程式碼
為 v-for 設定鍵值

總是用 key 配合 v-for ，以便維護內部元件及其子樹的狀態（虛擬DOM，diff演算法）。 Bad =>

<ul>
    <li v-for= "todo in todos">
        {{todo.text}}
    </li>
</ul>
複製程式碼

Good =>

<ul>
    <li v-for= "todo in todos" :key="todo.id">
        {{todo.text}}
    </li>
</ul>
複製程式碼
避免 v-if 和 v-for 用在一起

永遠不要把 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）。

詳解 當Vue處理指令時，v-for 比 v-if 具有更高的優先順序，所以這個模板：

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

將會經過如下運算：

this.users.map( user => {
    if(user.isActive) {
        return user.name
    }
})
複製程式碼

因此哪怕只渲染出一小部分使用者的元素，也得在每次重渲染的時候遍歷整個列表，不論活躍使用者是否發生了變化。 通過將其更換為在如下的一個計算屬性上遍歷：

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

computed: {
    activeUsers: function () {
        return this.users.filter(function (user) {
            return user.isActive
        })
    }
}
複製程式碼

這樣寫將會獲得以下好處：

  • 過濾後的列表只會在 users 陣列發生相關變化時才被重新運算，過濾更高效。
  • 使用 v-for="user in activeUsers" 之後，在渲染的時候只遍歷活躍使用者，渲染更高效。
  • 解耦渲染層的邏輯，可維護性更強。

為了獲得同樣的好處，也可以這樣寫：

<ul v-if="shouldShowUsers">
    <li
        v-for="user in users"
        :key="user.id"
    >
        {{ user.name }}
    <li>
</ul>
複製程式碼

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

END

以上主要總結了一些常用的規範，具體完整的文件請移步這裡

相關文章