关于vue.js:Vuejs之watch与computed的使用及区别

watch与computed都是以Vue的依赖追踪机制为根底的，它们都试图解决这样一件事件：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相干”数据“主动”发生变化，也就是主动调用相干的函数去实现数据的变动。
它们与methods中办法的区别就在于，methos外面的办法须要手动去调用，而它们会主动执行。

watch

1、watch善于解决的场景：一个数据影响多个数据
2、应用

<div id="app">
   <div>
     <span>数量: {{num}}</span>
   </div>
   <button @click="sub">数量减一</button>
</div>

new Vue({
   el: '#app',
   data: {
      num: 2,
   },
   watch: {
      num: {
        handler(newVal, oldVal) {
           if (newVal == 0 && oldVal == 1) {
              console.log(`商品数量从${oldVal}减为 ${newVal}, 马上执行删除`);
              console.log('删除商品');
           }
           else {
              console.log('数量缩小');
           }
        }
      }
   },
   methods: {
      sub: function () {
         this.num--;
      },
})

3、总结

* 相似监听机制+事件机制

computed

1、computed善于解决的场景：一个数据受多个数据影响
2、应用

<div id="app">
   <div>
     <span>数量: {{num}}</span>
   </div>
   <div>
     <span>单价: {{price}}</span>
   </div>
   <div>
     <span>总价: {{totalPrice}}</span>
   </div>
   <button @click="add">数量加一</button>
</div>

new Vue({
   el: '#app',
   data: {
      num: 0,
      price: 0,
   },
   computed: {
      // 监听总价的变动
      totalPrice: function () {
         return this.price * this.num;
      },
   },
   methods: {
      add: function () {
         this.num++;
      },
})

3、总结

* 反对缓存,有依赖数据发生变化时才会从新计算
* 性能开销更小
* 不反对异步
* 属于计算属性,应用上和data对象里的数据属性是同一类的

集体认识

watch更实用的场景是当某个数据发生变化时,应的去做出相干的操作,computed更实用于间接计算数据,如在统计购物车的总价时,数量产生扭转时,价可能自动更新,而不必写一个计算总价的办法,而后每次更改数量时进行调用,缩小了性能的开销.

若有相干谬误,心愿大佬可能指出????