特点和区别
- Vue的
computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步; - 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分;
computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会发生变化,适用于计算或者格式化数据的场景;watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行。
计算属性
- 抽象的概念不容易理解,用多了高频的场景自然熟悉了,计算属性表现为同步处理数据;
- 金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑
computed; - 不需要关注点击事件或者其他数据,只要计算规则写在属性里,就能实时获取对应的数据。
侦听器
watch侦听器能做的计算属性computed也能做到,什么时候适用侦听器呢?- 主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物;
- 如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度;
- 可以看到数据的变化出发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发。
抽象概念
- 弹框提示等事件交互的适用于
watch,数据计算和字符处理的适用与computed;