Vue中的computed

引言

使用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的原理的文章。由於有些神奇的現象是必需要經過原理來解釋的。

發現好博

https://juejin.im/post/5a6f21...
https://knownsec-fed.com/2018...
https://www.jianshu.com/p/56f...

很感謝你們利用這麼長時間來讀這篇文章，文章中如有錯誤請在下方留言，會盡快作出修改。