侦听器和计算属性的比较(纯概念)

358 阅读1分钟

特点和区别

  • Vue的computed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步;
  • 这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分;
  • computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会发生变化,适用于计算或者格式化数据的场景;
  • watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行。

计算属性

  • 抽象的概念不容易理解,用多了高频的场景自然熟悉了,计算属性表现为同步处理数据;
  • 金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed
  • 不需要关注点击事件或者其他数据,只要计算规则写在属性里,就能实时获取对应的数据。

image.png

侦听器

  • watch侦听器能做的计算属性computed也能做到,什么时候适用侦听器呢?
    • 主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物;
    • 如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度;
    • 可以看到数据的变化出发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发。

image.png 抽象概念

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