computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
computed
计算属性：通过属性计算得来的属性
计算属性,是在相关联的属性发生变化才计算，计算过一次，如果相关属性没有变化，下一次就不需要计算了，直接去缓存的值
a: b:<!--c:--> 总和：{{sum()}} 总和：{{count}} 平均值：{{avg}} <p>单价：{{price}}</p><p>数量：</p><p>总价：{{sum}}</p><p>运费：{{free}}</p><p>应付：{{pay}}</p> 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
属性变化，就会触发监听
本文来源gaodai.ma#com搞##代!^码网(
的函数。
监听属性变化，一般是用于跟数据无关的业务逻辑操作。
计算属性，适用于属性发生变化后，需要计算得到新的数据。
<div id="app"> a: <br /> b: <br /> 总和：{{count}} <br /><br /><br /> name: <br /> age: <br /></div>
watch 也可以在methods里面进行监听配置
<div id="app"> a: <br /> b: <br /> 总和：{{count}} <br /><br /><br /> name: <br /> age: <br /><button>开始监听</button></div>
下面在看下computed 和 watch
都可以观察页面的数据变化。当处理页面的数据变化时，我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性，而不是命令是的watch回调。
/*html: 我们要实现 第三个表单的值 是第一个和第二个的拼接，并且在前俩表单数值变化时，第三个表单数值也在变化 */ <div id="myDiv"> </div><!--js: 用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 } } }) <!--js: 利用computed 来写--> //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 //这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 new Vue({ el:"#myDiv", data:{ firstName:"Den", lastName:"wang", }, computed:{ fullName:function(){ return this.firstName + " " +this.lastName; } } })
很容易看出 computed 在实现上边的效果时，是更简单的。
总结
以上就是深入浅析Vue中的 computed 和 watch的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：深入浅析Vue中的 computed 和 watch
转载请注明原文链接：深入浅析Vue中的 computed 和 watch
