computed

計算屬性：通過屬性計算得來的屬性

    計算屬性,是在相關聯的屬性發生變化才計算，計算過一次，如果相關屬性沒有變化，下一次就不需要計算了，直接去緩存的值

a:<input type="number" v-model.number="a" /> b:<input type="number" v-model.number="b" /> <!--c:<input type="number" v-model.number="c" />--> 總和：{{sum()}} 總和：{{count}} 平均值：{{avg}} <p v-once>單價：{{price}}</p> <p>數量：<input type="number" v-model.number="count"/></p> <p>總價：{{sum}}</p> <p>運費：{{free}}</p> <p>應付：{{pay}}</p>  data: {      a: '',      b:'',      c:'',      price: 28.8,      count: '',      free: 10  },  computed: {    count(){      console.log('計算屬性觸發了');        return this.a+this.b;    },    avg(){      return this.count/2;    },    sum(){      return this.price * this.count;    },   pay(){    if(this.count>0){      if(this.sum>=299){        return this.sum;    }else{      return this.sum + this.free;    }     }else{        return 0;    }    }   }

watch

屬性變化，就會觸發監聽的函數。

監聽屬性變化，一般是用于跟數據無關的業務邏輯操作。

計算屬性，適用于屬性發生變化后，需要計算得到新的數據。        

<div id="app">      a: <input type="number" v-model.number="a" /><br />      b: <input type="number" v-model.number="b" /><br />      總和：{{count}}      <br /><br /><br />      name: <input type="text" v-model="obj.name" /><br />      age: <input type="text" v-model.number="obj.age" /><br />    </div>    <script src="vue.js"></script>    <script>      var vm = new Vue({        el: '#app',        data: {          a: '',          b: '',          count: '',          obj: {            name: '',            age: ''          }        },        watch: {          a(newVal, oldVal){            console.log('觸發了a-watch');            this.count = this.a + this.b;          },          b(newVal){            console.log('觸發了b-watch');            this.count = this.a + this.b;          },//          obj(newVal, oldVal){//            console.log('觸發了obj的監聽');//          }//          obj: {            //監聽對象中的每一個值            handler(newVal, oldVal){              console.log('觸發了obj的監聽');            },            deep: true//深度監聽          },          //監聽對象中的某個屬性          'obj.name': function(){            console.log('觸發了obj.name的監聽');          }        }      })    </script>

watch 也可以在methods里面進行監聽配置