watch 和 computed 都是以 Vue的依赖追踪机制 为基础的，都在处理这么一件事情：当某一个或者多个数据发生变化时，所有依赖这些数据的“相关”数据可以自动发生变化，也就是自动调用相关函数去实现数据的变动。
1、computed
支持缓存，只有依赖数据发生改变，才会重新计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed是计算属性，也就是依赖某个值或props通过计算得来的数据
computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化时，会重新调用getter来计算
即使data中没有直接声明要计算的变量，也可以在computed中写入。 比如 data只有lastName和firstName。 但是可以在computed直接写 fullName
2、watch
不支持缓存，数据变直接触发相应操作
支持异步操作
watch是监听器，可以监听某一个数据，然后执行相应操作。 里面有一个属性是deep，含义为：是否深度监听某个对象的值，默认为false
监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值
如果data中没有相应的属性的话，是不能watch的
3、两者的区别
computed是计算属性，watch是监听data中的数据变化
computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算。反之，则使用缓存中的属性值； watch不支持缓存，当对应属性发生变化时，响应执行
computed不支持异步，有异步操作时无法监听数据变化， watch支持异步操作
computed第一次加载时就监听， watch默认第一次加载时不监听
immediate：组件创建时执行与否
immediate：true 第一次加载时监听（默认为false）
deep：深度监听，不推荐使用（非常消耗性能）
监听的属性是对象的话，不开启deep时，对象子属性变化不会触发watch
开启deep后对象内部所有子属性变化都会触发watch
computed中的函数必须调用return， watch不是
4、使用场景
computed： 一个属性受到多个属性的影响，如 购物车商品结算
watch： 一个数据影响多条数据，如：搜索数据
数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择