vue计算属性computed和侦听器watch的使用场景

原文链接: https://dsx2016.com/?p=679
微信公众号: 大师兄2016

特点和区别

vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.

这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.

computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.

计算属性

抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.

金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed.

不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.

电商领域的购物车统计,一个数据依赖于一个或者多个数据.

当购物车数量和产品变化时,自动计算出价格*数量的总和.

如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算.

只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

侦听器

watch侦听器能做到的计算属性computed也能做到,什么时候适合用侦听器呢?

主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.

如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度.

可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.

抽象概念

弹框提示等事件交互的,适用于watch,数据计算和字符处理的适用于computed

computer

一个姓输入框,一个名输入框,实时展示全名.

<div id="name">  {{fullName}}  </div>

<script>
    export default {  
        name: 'test',  
        data: {  
            firstName: 'da',  
            lastName: 'shixiong',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    }
</script>

watch

一个金额输入框,监听金额数值大小,达到条件时给出温馨提示

<div id="Amount">  
    <input v-model="Amount" /> 
</div>

<script>
    export default {  
        name: 'test',  
        data: {  
            Amount: 100,  
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    alert("最大额度可借5000元")
                    this.Amount=5000
                }
            }  
        }  
    }
</script>