深入浅析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;

}

}

})

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

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。