Vue.js之computed与watch的使用及区别

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更适用于直接计算数据,如在统计购物车的总价时,数量发生改变时,价能够自动更新,而不用写一个计算总价的方法,然后每次更改数量时进行调用,减少了性能的开销.

若有相关错误,希望大佬能够指出🙏