深入浅析Vue中的 computed 和 watch

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;    }    }   }

<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>

<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 />      <button @click="btnAction()">开始监听</button>    </div>    <script src="vue.js"></script>    <script>      var vm = new Vue({        el: '#app',        data: {          a: '',          b: '',          count: '',          obj: {            name: '',            age: ''          }        },        methods: {          btnAction(){            this.$watch('a', (newVal, oldval)=>{              console.log('监听到了a的变化');              console.log(newVal, oldval);            })            this.$watch('obj.name', (newVal, oldval)=>{              console.log('监听到了obj.name的变化');              console.log(newVal, oldval);            })            this.$watch('obj', (newVal, oldval)=>{              console.log('监听到了obj的变化');              console.log(newVal, oldval);            }, {              deep: true            })          }        }      })//      vm.$watch('a', (newVal, oldval)=>{//        console.log('监听到了a的变化');//        console.log(newVal, oldval);//      })//      //      vm.$watch('obj.name', (newVal, oldval)=>{//        console.log('监听到了obj.name的变化');//        console.log(newVal, oldval);//      })//      //      vm.$watch('obj', (newVal, oldval)=>{//        console.log('监听到了obj的变化');//        console.log(newVal, oldval);//      }, {//        deep: true//      })    </script>

/*html:  我们要实现 第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化  */<div id="myDiv">  <input type="text" v-model="firstName">  <input type="text" v-model="lastName">  <input type="text" v-model="fullName"></div><!--js: 用watch方法来实现-->//将需要watch的属性定义在watch中，当属性变化氏就会动态的执行watch中的操作，并动态的可以更新到dom中  new Vue({ el: '#myDiv', data: {  firstName: 'Foo',  lastName: 'Bar',  fullName: 'Foo Bar' }, watch: {  firstName: function (val) {   this.fullName = val + ' ' + this.lastName  },  lastName: function (val) {   this.fullName = this.firstName + ' ' + val  } }})<!--js: 利用computed 来写-->  //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。  //这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 new Vue({    el:"#myDiv",      data:{        firstName:"Den",        lastName:"wang",      },      computed:{        fullName:function(){          return this.firstName + " " +this.lastName;        }      }  })