乐趣区

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

jiezi

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 更实用于间接计算数据, 如在统计购物车的总价时, 数量产生扭转时, 价可能自动更新, 而不必写一个计算总价的办法, 而后每次更改数量时进行调用, 缩小了性能的开销.

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

退出移动版