vue風格指南小結

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

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