### computed

1. computed 依赖于 data 中的数据，只要在它的相关依赖发生改变时就会触发
2. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

computed:{
          computedCBA:function(){
             return  'ABCDE'.substring(0,3).split('').reverse().join('')
          }
}

### watch

1. 当数据改变时，直接触发对应操作；
2. 可以监听的数据有三部分，即props，data，computed；当数据变化时，触发其他操作，函数有两个参数，immediate：组件加载立即触发回调函数执行deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用
3. 不支持缓存，但支持异步，在数据变化时执行异步或开销较大的操作时使用；
4. 一对多，即一个数据改变时，可以通过触发对应操作改变多个其他的数据。

watch:{
    changeValue:{
            handler:function(){
               setTimeout(()=>{
                   this.computedCBA = 'ABCDE'.substring(0,3).split('').reverse().join('')
               },2000)
            },
            immediate:false,
            deep:true
}

总结：当需要在数据变化时执行异步或开销较大的操作时，就使用watch；不需要根据数据变化，操作一次很耗费性能的计算，就用computed