Vue.js 計算屬性

        模板內的表達式經常使用於簡單的運算，當其過長或邏輯複雜時，會難以維護，而計算屬性就是用於解決該問題的。

1、什麼是計算屬性

        在一個簡單的 Vue 應用，在模板中雙向綁定一些數據或表達式了。可是表達式若是過長，或邏輯更爲複雜時，就會變得臃腫甚至難以閱讀和維護，好比：

<div>
        {{ text.split(',').reverse().join(',') }}
    </div>

        上面的表達式包含 3 個操做，並非很清晰，因此在遇到複雜的邏輯時應該使用計算屬性。上例能夠用計算屬性進行改寫：

<div>
        {{ reversedText }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                text: '123,456'
            },
            computed: {
                reversedText: function () {
                    // 這裏的 this 指向的是當前的 Vue 實例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        全部的計算屬性都以函數的形式寫在 Vue 實例內的 computed 選項內，最終返回計算後的結果。

2、計算屬性用法

        在一個計算屬性裏能夠完成各類複雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就能夠。除了上述簡單的用法，計算屬性還能夠依賴多個 Vue 實例的數據，只要其中任一數據變化，計算屬性就會從新執行，視圖也會更新。以在購物車內兩個包裹的物品總價威力展現：

        

<div id="app">
        結算商品總價：{{ prices }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                package1: [
                    {
                        name: 'iPhoneX',
                        price: 18999,
                        count: 2
                    },
                    {
                        name: 'iPad',
                        price: 6666,
                        count: 1
                    }
                ],
                package2: [
                    {
                        name: 'apple',
                        price: 3,
                        count: 5
                    },
                    {
                        name: 'banana',
                        price: 2,
                        count: 10
                    }
                ]
            },
            computed: {
                prices: function () {
                    var prices = 0;
                    for (var i = 0; i < this.package1.length; i++) {
                        prices += this.package1[i].price * this.package1[i].count;
                    }
                    for (var i = 0; i < this.package2.length; i++) {
                        prices += this.package2[i].price * this.package2[i].count;
                    }
                    return prices;
                }
            }
        })
    </script>

        當 package1 或 package2 中的商品有任何變化，好比購買數量變化或增刪商品時，計算屬性 prices 就會自動更新，視圖的總價也會自動變化。

        每個計算屬性都包含一個 getter 和 setter，上面的兩個示例都是計算屬性的默認用法，只是利用了 getter 來讀取。在你須要時，也能夠提供一個 setter 函數，當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發 setter 函數，執行一些自定義的操做。例如：

        

<div id="app">
        姓名：{{ fullName }}
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                firstName: 'Mark',
                lastName: 'Green'
            },
            computed: {
                fullName: {
                    // getter 用於讀取
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },
                    // setter 寫入時觸發
                    set: function () {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    }
                }
            }
        });
    </script>

        當執行 app.fullName = 'Constantine Lee'；時，setter 就會調用，數據 firstName 和 lastName 都會相對更新，視圖一樣也會更新。

        絕大多數狀況下，只會用默認的 getter 方法來讀取一個計算屬性，實際業務中不多用到 setter ，因此在聲明一個計算屬性時，能夠直接使用默認的寫法，沒必要將 getter 和 setter 都聲明。

        計算屬性除了上述簡單的文本插值外，還常常用於動態地設置元素的樣式名稱 class 和內置樣式 style 。當使用組件時，計算屬性也常常用來動態傳遞 props 。

        計算屬性還有兩個很實用的小雞技巧：1）計算屬性能夠依賴其餘計算屬性；2）計算屬性不只能夠依賴當前 Vue 實例的數據，還能夠依賴其餘實例的數據，例如：

<div id="app1">

    </div>
    <div id="app2">
        {{ reversedText }}
    </div>
    <script>
        var app1 = new Vue ({
            el: '#app1',
            data: {
                text: '123,456'
            }
        });

        var app2 = new Vue ({
            el: '#app2',
            computed: {
                reversedText: function () {
                    // 這裏實例 app1 的數據 text
                    return app1.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        這裏建立的兩個 Vue 實例 app1 和 app2 ，在 app2 的計算屬性 reversedText 中，依賴的是 app1 的數據 text ，因此當 text 變化時，實例 app2 的計算屬性也會變化。這樣的用法在組件和組件化裏會用到，尤爲是在多人協同開發時很常見，由於你寫的一個組件所用到的數據須要依賴他人的組件提供。

3、計算屬性緩存

        上述的示例代碼，調用 methods 裏的方法也能夠與計算屬性起到一樣的做用，好比用 methods 改寫爲：

<div id="app">
        <!-- 注意：這裏的 reversedText 是方法，因此要帶 () -->
        {{ reversedText() }}
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                text: '123,456'
            },
            methods: {
                reversedText: function () {
                    // 這裏的 this 指向的是當前 Vue 實例
                    return this.text.split(',').reverse().join(',');
                }
            }
        })
    </script>

        沒有使用計算屬性，在 methods 裏定義了一個方法實現了相同的效果，甚至該方法還能夠接受參數，使用起來更靈活。既然使用 methods 就能夠實現，那麼爲何還須要計算屬性呢？緣由就是計算屬性是基於它的依賴緩存的。一個計算屬性所依賴的數據發生變化時，它纔會從新取值，因此 text 只要不改變，計算屬性也就不更新。例如：

computed: {
            now: function () {
                return Date.now();
            }
        }

        這裏的 Data.now() 不是響應式依賴，因此計算屬性 now 不會更新。可是 methods 則不一樣，只要從新渲染，它就會被調用，所以函數也會被執行。

        使用計算屬性仍是 methods 取決於你是否須要緩存，當遍歷大數組和作大量計算時，應當使用計算屬性，除非不但願獲得緩存。