vue中的计算属性和侦听器的区别

1、computed和watch区别？

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

computed: 计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。

watch：computed和watch都是依赖数据发生变化后而执行的操作，但是计算属性初始化的时候就可以被监听到并且计算， 但是watch是发生改变的时候才会触发。当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

watch和computed各自处理的数据关系场景不同

• 1.watch擅长处理的场景：一个数据影响多个数据
• 2.computed擅长处理的场景：一个数据受多个数据影响

2、深度监听怎么做

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，设置为true时，可进行深度监听，任何属性发生变化，都可以监听到

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。但是可以适当优化，我们可以对个别属性进行监听，使用字符串形式监听。
例如：

 watch: {
    'obj.a': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

immediate:true （立即执行）这个配置也要慎用