深入浅析Vue中的 computed 和 watch

发布时间：2020-12-17 03:12:20 所属栏目：百科来源：网络整理

导读：computed 计算属性：通过属性计算得来的属性计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值 b: 总和：{{sum()}} 总和：{{count}} 平均值：{{avg}} 单价：{{price}} 数量：总价：{{sum

computed

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

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

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

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

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

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

b:
总和：{{count}}

name:
age:

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

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。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!