深入浅析Vue中的 computed 和 watch

computed

计算属性：通过属性计算得来的属性

    计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值

a:
 b:
 
 总和：{{sum()}}
 总和：{{count}}
 平均值：{{avg}}
 
单价：{{price}}
 
数量：
 
总价：{{sum}}
 
运费：{{free}}
 
应付：{{pay}}
  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

属性变化，就会触发监听的函数。

监听属性变化，一般是用于跟数据无关的业务逻辑操作。

计算属性，适用于属性发生变化后，需要计算得到新的数据。        

      a: 

      b: 

      总和：{{count}}
      



      name: 

      age: 

    
    
    

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

      a: 

      b: 

      总和：{{count}}
      



      name: 

      age: 

      开始监听
    
    
    

下面在看下computed 和 watch

  都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性，而不是命令是的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
  }
 }
})

  //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
  //这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
 new Vue({
    el:"#myDiv",
      data:{
 firstName:"Den",
 lastName:"wang",
      },
      computed:{
 fullName:function(){
   return this.firstName + " " +this.lastName;
 }
      }
  })

  很容易看出 computed 在实现上边的效果时，是更简单的。

总结

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