computed和watch都可以对vue组件中的数据进行监听，computed可以完成的功能，watch基本上都可以去实现；computed是有缓存的，而watch没有缓存。反之不行 例如 :watch可以执行异步操作
计算属性：computed
定义的时候是一个方法，return中返回值就是这个这个计算属性的值，使用的时候当作属性使用，再其他地方可以通过this.来直接调用。 只要 return 后面的数据发生变化，该计算属性就会重新计算 计算属性具有缓存特性；如果他所依赖的这些属性值没有发生改变，那么计算属性的值是从缓存中来的，而不是重新编译，那么性能要高一些，所以vue中尽可能使用computed替代watch。
计算属性是基于它们的响应式依赖进行缓存的
也就是`基于data中`声明过或者`父组件传递的props中的数据`通过计算得到的值,
每一个计算属性都包含一个 getter 函数和 setter 函数。即使你没有明确写出 getter 函数，计算属性也会默认使用它。
- 计算属性的基础写法默认使用getter
data: {
firstName: 'avatar',
c: 'Tom'
},
computed: {
// 计算属性的 getter
fullName: function () {
// 1、`this` 指向 vue 实例
// 2、return计算结果
return this.firstName + ' ' + this.lastName
}
你也可以提供 setter 函数，当修改计算属性的值时，就会触发 setter 函数，执行一些自定义的操作。
只是写getter的话，这个数据只是可读的，加上setter就实现了可读可写。实现视图修改数据，vue中data中或者props中的绑定的数据也发生改变，实现了数据的双向绑定如下：
- 高级用法增加setter
setter 函数与 getter 函数类似，也是写在计算属性中。而不同之处在于，getter 函数是默认用法，setter 函数不是默认用法。如果你要使用 setter 函数，那么你必须要手动写出 setter 函数。
你也可以提供 setter 函数，当修改计算属性的值时，就会触发 setter 函数，执行一些自定义的操作。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter中有一个参数，就是视图中传过来的值
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
侦听器watch
可以监听数据发生变化，可以监听的数据有（props、data、computed、$route） 不支持缓存，监听的数据变，直接会触发相应的操作；
书写的示例代码
watch:{
watchOBJ:{
immediate:true,
handler(newValue,oldValue){
console.log("监听watchOBJ：","newValue="+newValue,"oldValue="+oldValue);
}
}
//侦听器如果监听的是一个对象，需要开启深度监听，deep属性设置为true
}
watch支持异步；
监听数据是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发操作，
监听的函数接收两个参数，
第一个参数是最新的值；第二个参数是输入之前的值；
watch 侦听器如果监听的是一个对象，需要开启深度监听，deep属性设置为true
如果想实现页面一卡开的时候就立即监听一次，首次监听配置 immediate 为 true
根据平时的经验：
- computed可以完成的功能，watch基本上都可以去实现；只是说用哪种更合适一些；computed有缓存，watch没有缓存，
- computed这个属性，针对的是对各数据导致某一个数据发生变化，也就是多对一的时候，用的比较多一些，一对一的情况也是可以使用的
- 而watch针对的是一个数据变化，会导致多个数据发生变化，针对的像是一对多的情况用watch会比较合适一些
- watch中可以做一些异步的操作，这个是computed中不能实现的，如果有异步的才做需要侦听，请使用watch，
