vue---computed計算屬性的使用

一直以來在使用vue的時候，會對vue的computed屬性和watch屬性具體的使用分不清楚，總算花點時間整理了下。

computed:一般用於監控本身定義的變量，這個變量能夠再也不data中定義，直接在computed裏面定義，而後能夠在頁面上作雙向數據綁定獲得這個數據。一般的使用場景：添加商品到購物車，商品數量和總金額會發生變化，若是用watch來作監聽就會比較麻煩，使用computed來作監聽是最好的選擇。

watch:一般用於監聽data裏面定義好的變量。一般用於 model 作雙向數據綁定的監聽，能夠監聽變量，也能夠監聽一個對象，可是咱們不能這樣來監聽。

watch:{
    goodsList.price(newVal,oldVal){
        //監控商品列表中是商品價格
    }
}

這樣監聽會報錯。

詳細說下計算屬性：

計算屬性可用於快速計算視圖（View）中顯示的屬性。這些計算將被緩存，而且只在須要時更新。

在Vue中有多種方法爲視圖設置值：

使用指令直接將數據值綁定到視圖
使用簡單的表達式對內容進行簡單的轉換
使用過濾器對內容進行簡單的轉換

除此以外，咱們還能夠使用計算屬性根據數據模型中的值或一組值來計算顯示值。

舉個簡單的例子：

<template>
  <div class="app-container">
    <span v-text="title"></span>
    <ul>
      <li v-for="x in results">
        {{x.name}}: <input type="text" v-model="x.score">
      </li>
    </ul>
    <p>總分：{{totalMarks}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
        title:'我是一個計算器',
        results:[
          {name:'English',score:80},
          {name:'Math',score:90},
          {name:'History',score:70},
        ]
    }
  },
  methods: {
  },
  computed:{
    totalMarks:function(){
      let total = 0;
      let self = this;
      for(let i = 0; i < self.results.length; ++i){
        total += parseInt(self.results[i].score);
      };
      return total;
    }
  }
}
</script>

<style scoped>
*{margin:0px; padding:0px;}
</style>

除此以外，computed計算屬性還提供 get 和 set 方法來使用。

具體參考：https://www.cnblogs.com/gunelark/p/8492468.html