vue 的computed

定義：

當其依賴的屬性的值發生變化時，計算屬性會重新計算，反之，則使用緩存中的屬性值。

為什么要使用computed

首先，通過vue官方文檔的案例，來解釋一下，為什么要使用computed。我們都知道，在模板內的表達式非常遍歷的，但是，有時候，我們會在模板內的放入太多邏輯的東西。會讓模板變重，且難於維護。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在這模板中的代碼中，其實，我們需要花費上一小段時間去理解，這塊渲染的是什么---message的翻轉字符串。然而，當初模板中使用表達式的初衷時為了簡單運算的。所以，從這點出發，我們是不是就不建議在模板中使用過於復雜的表達式了。此時，計算屬性就橫空出世了。計算屬性就是當依賴的屬性的值發生變化的時候，才會觸發他的更改，如果依賴的值，不發生變化的時候，使用的是緩存中的屬性值。

<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: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

computed的getter函數

在vue中，computed的屬性可以被視為是data一樣，可以讀取和設值。因此，在computed中可以分為getter(讀取)和setter(設值)，一般情況下，是沒有setter的，computed只是預設了getter，也就是只能讀取，不可以改變設值。所以，computed默認格式（是不表明getter函數的）：
html:

    <div>
     message: {{message}}
    </div>

    <!-- 計算屬性 -->
    <div>
     計算屬性： {{updateMessage}}
   </div>

computed: {
    updateMessage(): {
            console.log('計算屬性', this.message)
            return this.message
    }
}

等價於

computed: {
    
    updateMessage: {
      get: function() {
        console.log('計算屬性', this.message)
        return this.message
      }
    }
  },

發現了一個小小的驚喜：當模板中不使用updateMessage，即使message發生改變之后，也不會走computed。神奇不神奇？？哈哈哈

在這里，就需要我們注意一下，不是說我們更改了getter中使用的變量（即依賴的屬性）,就會觸發computed的更新，他有一個前提是computed里的值必須要在模板中使用才可以。但是會觸發生命周期的updated()

computed中的setter函數

當賦值給計算屬性的時候，將調用setter函數。多用於在模板組件中需要修改計算屬性自身的值的時候。

computed: {
    updateMessage: {
      get: function() {
        console.log('計算屬性', this.message)
        return this.message
      },
      set: function(newVal) {
        this.message = newVal
        console.log('newVal', newVal)
      }
    }
  },
 mounted () {
    this.updateMessage = '222'
    console.log('測試：', this)
 },

只有當計算屬性中的屬性被直接賦值的時候，才會走setter函數，而且，setter函數和getter函數是相互獨立的，不是說，走setter函數，就必須走getter函數。上面的案例，打印結果是

newVal: 222,
計算屬性： 222

是因為，在setter中觸發了message的更改，當message發生改變的時候，getter函數中就會改變。

computed: {
    updateMessage: {
      get: function() {
        console.log('計算屬性', this.message)
        return this.message
      },
      set: function(newVal) {
        console.log('newVal', newVal)
      }
    }
  },
 mounted () {
    console.log('測試：', this)
 },

這種情況下，打印結果是：

newVal 222

此時，就只是單單的走了setter的函數，而沒有走getter函數。

總結

這篇文章呢，主要是介紹一下關於computed的基本構成和使用，也算是，自己對computed的一個簡單的總結把。不會讓自己在做項目的過程中，遇見關於類似的問題，而無法解決。不知道如何使用。然后呢，等擼vue的源碼的時候，在深入的寫一篇關於computed的原理的文章。因為有些神奇的現象是必須要通過原理來解釋的。