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的作用是什么
分享地址:http://scyanting.com/article/phoohj.html