原文链接: 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>