vue中的computed和watch区别

<input type="number" v-model.number="a"/>
  <input type="number" v-model.number="b"/>
  <p>总和： {{ sum }}</p>
  <p>总和： {{ sum }}</p>
  <p>总和： {{ sum }}</p>
<input type="serach" v-model="message"/>
  <button>搜索</button>

data(){
    return {
      a: 10,
      b: 20,
    }
  },

  // 计算属性,根据计算得到结果后会将结果进行缓存
  // 一个值根据其他的属性计算而得到
  computed: {
    sum(){
      console.log('计算了');
      return this.a + this.b;
    }
  },
  
  // 数据发生变化，需要重新请求ajax， 操作dom， 节流
  watch: {
    sum(oldval, newval){
      console.log('sum变化了');
    }
  },

watch没有返回值，依赖发生变化会重新进行计算从而触发监听的回调函数，而computed有返回值，并对返回值的结果进行缓存以便于下次使用

简而言之computed能做的watch就一定能做，而watch能做的computed不一定能做，当input中值发生变化时computed不可以发生异步请求，watch就可以

上图每输入一个数值用户都得发送一次异步请求，用户如果频繁的发数据，就可以做一个节流的操作