宜宾网站建设公司

Vue中computed与watch的作用是什么

这篇文章给大家介绍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回调。

/*html:
  我们要实现 第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化
  */

  
  
  
//将需要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;         }       }   })

关于Vue中computed与watch的作用是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


文章名称：Vue中computed与watch的作用是什么
链接URL：http://ybzwz.com/article/phoohj.html

其他资讯