vue中的computed計算屬性

computed：相當于method一樣，可以當做方法執行，傳回function内return的值指派在DOM上。但是多個{{}}(模闆文法)使用了computed，computed内的function也隻執行一次。僅當function内涉及到Vue執行個體綁定的data的值的改變，function才會從新執行，并修改DOM上的内容。

computed與method方法的不同點在于：

計算屬性(computed)的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應式屬性) 在該執行個體範疇之外，則計算屬性是不會被更新的。

任何複雜的運算都應該放在computed裡進行 ，這是vue官方給的解釋。

當你需要比如改變字元串的順序（反轉），或者執行一段計算等等，任何的一種運算，或者最終傳回值的這種，你都應該放在computed裡進行.

computed會儲存目前狀态，一直到資料再次發生改變，

這樣就不用每次都執行運算，每次都傳回值，或許值并未改變。

<span @click="packup">{{putContText}}</span>
           

 packup函數會動态綁定bol的值，bol值發生改變的時候，就會觸發頁面内容的改變，當頁面内容改變就會就會觸發putConText函數。

data:function(){
    return {
      bol:true,
    }
},
methods:{
    packup(){
      this.bol=!this.bol;
    }
},
computed:{
    putContText(){
      if(this.bol===true){
        return "收起";
      }else if(this.bol===false){
        return "展開";
      }
    }
}
           

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 執行個體
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
           

this.reversedMessage的值始終取決于this.message的值。

你可以像綁定普通屬性一樣在模闆中綁定計算屬性。Vue 知道this.reversedMessage依賴于this.message，

是以當this.message 發生改變時，所有依賴this.reversedMessage的綁定也會更新。而且最妙的是我們已經以聲明的方式建立了這種依賴關系：計算屬性的 getter 函數是沒有副作用 (side effect) 的，這使它更易于測試和了解