深入浅析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="/UploadFiles/2021-04-02/vue.js">

watch 也可以在methods里面进行监听配置


<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="/UploadFiles/2021-04-02/vue.js">

下面在看下computed 和 watch


"htmlcode">

/*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;
        }
      }
  })


"color: #ff0000">总结
以上所述是小编给大家介绍的Vue中的 computed 和 watch，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！