好资源导航 » 文章资讯 » 深入浅析Vue中的 computed 和 watch

深入浅析Vue中的 computed 和 watch

2023-09-11 20:58:04 243

computed

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

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

a:
b:

总和：{{sum()}}
总和：{{count}}
平均值：{{avg}}
单价：{{price}}
数量：
总价：{{sum}}
运费：{{free}}
应付：{{pay}}
data:{
a:'',
b:'',
c:'',
price:28.8,
count:'',
free:10
},
computed:{
count(){
console.log('计算属性触发了');
returnthis.a+this.b;
},
avg(){
returnthis.count/2;
},
sum(){
returnthis.price*this.count;
},
pay(){
if(this.count>0){
if(this.sum>=299){
returnthis.sum;
}else{
returnthis.sum+this.free;
}
}else{
return0;
}
}
}

watch

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

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

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


a:

b:

总和：{{count}}




name:

age:

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


a:

b:

总和：{{count}}




name:

age:

开始监听

下面在看下computed和watch

都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。而通常更好的办法是使用computed属性，而不是命令是的watch回调。

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

//将需要watch的属性定义在watch中，当属性变化氏就会动态的执行watch中的操作，并动态的可以更新到dom中 newVue({ el:'#myDiv', data:{ firstName:'Foo', lastName:'Bar', fullName:'FooBar' }, watch:{ firstName:function(val){ this.fullName=val+''+this.lastName }, lastName:function(val){ this.fullName=this.firstName+''+val } } }) //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 //这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。 newVue({ el:"#myDiv", data:{ firstName:"Den", lastName:"wang", }, computed:{ fullName:function(){ returnthis.firstName+""+this.lastName; } } })

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

总结

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

返回顶部
3162201930
czq8825@qq.com

深入浅析Vue中的 computed 和 watch

热门推荐

随机推荐