最近做Vue项目的时候经常会遇到这两个API，在使用的时候，会有些疑问，后面去查了资料，学习了一下，现在做个笔记以防忘记。

首先

两个API最本质的差别就在翻译上可以体现出来，一个是监听的意思，一个是计算属性，这是两者最字面的区别。

然后

分别用代码的例子来描述两个内容的话，是这样的：

watch（监听）

• 不支持缓存，数据变化时会直接触发相应的操作。

• watch支持异步。

• 监听的函数接受两个参数，第一个参数是最新的值、第二个参数是输入之前的值。

• 当一个属性发生变化时，需要执行对应的操作。

watch的两个选项

immediate：组件加载立即触发回调函数执行。

watch:{
  Name:{
    handler(newName,oldName){
      this.fullNmae = newName + '' + this.lastName;
    },
    //代表在watch里声明了Name这个方法之后立即执行handler方法
    immediate:true
  }
}

deep:deep的意思就是深入观察，任何修改obj里面任何一个属性都会触发这个监听器里的handler。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

computed（计算属性）

• 支持缓存，只有依赖数据发生改变，才会重新进行计算。

• 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。

• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一的话，一般用computed。

• 如果computed属性值是函数，那么默认会走get方法、函数的返回值就是属性的属性值。在computed中的属性都有一个get和一个set方法，当数据变化是，调用set方法。