Vue中的計算屬性

1、什麼是計算屬性

　　模板內的表達式很是便利，可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護。

2、計算屬性的用法

　　在一個計算屬性裏能夠完成各類複雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就能夠。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//咱們把複雜處理放在了計算屬性裏面了
</div>

　　

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        reversedMessage: function () {
            // `this` 指向 vm 實例
            return this.message.split('').reverse().join('')
        }
    }
});

　　

結果：

Original message: "Hello"

Computed reversed message: "olleH"

　　除了上例簡單的用法，計算屬性還能夠依賴多個Vue 實例的數據，只要其中任一數據變化，計算屬性就會從新執行，視圖也會更新。

　　計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性能夠依賴其餘計算屬性;  二是計算屬性不只能夠依賴當前Vue 實例的數據，還能夠依賴其餘實例的數據，例如：

    <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>

var app1 = new Vue({
   el: '#app1',
 data: {
      text: 'computed'
    }
});

var app2 = new Vue({
    el: '#app2',
    computed: {
        reverseText: function(){
            return app1.text.split('').reverse().join('');  //使用app1的數據進行計算
        }
    }
});

　　

每個計算屬性都包含一個getter 和一個setter ，咱們上面的兩個示例都是計算屬性的默認用法， 只是利用了getter 來讀取。

在你須要時，也能夠提供一個setter 函數， 當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發setter 函數，執行一些自定義的操做，例如：

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
            }
        }
    }
});
//如今再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

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

3、計算屬性緩存　

　　咱們能夠將同一函數定義爲一個方法而不是一個計算屬性，兩種方式的最終結果確實是徹底相同的。只是一個使用reverseTitle()取值，一個使用reverseTitle取值。

　　然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。

　　這就意味着只要 title尚未發生改變，屢次訪問 reverseTitle計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

<div>{{reverseTitle()}}</div>

// 在組件中
methods: {
  reverseTitle: function () {
    return this.title.split('').reverse().join('')
  }
}

　　

4、computed VS methods

　　你可能已經注意到咱們能夠經過在表達式中調用方法來達到一樣的效果，咱們能夠將同一函數定義爲一個方法而不是一個計算屬性。兩種方式的最終結果確實是徹底相同的。然而，不一樣的是計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。（緩存的效果）這也一樣意味着下面的計算屬性將再也不更新，由於 Date.now() 不是響應式依賴：

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

相比之下，每當觸發從新渲染時，調用方法將總會再次執行函數。

　　咱們爲何須要緩存？假設咱們有一個性能開銷比較大的的計算屬性 A，它須要遍歷一個巨大的數組並作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter！若是你不但願有緩存，請用方法來替代。

5、計算屬性禁用箭頭函數

　　注意，不該該使用箭頭函數來定義計算屬性函數 (例如 aDouble: () => this.a * 2)。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.a 將是 undefined。

　　固然有不少this須要指向vue實例的時候，都須要慎用箭頭函數。