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