深入浅析Vue中的 computed 和 watch

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里面进行监听配置