vue中Watch 和 Computed 的区别是什么？

Watch 和 Computed 的区别

监听属性watch:

1. 不支持缓存，数据变，直接会触发相应的操作；
2. watch支持异步；
3. 监听的函数接收两个参数，第一个参数是最新的值，第二个参数是输入之前的值；
4. 当一个属性发生变化时，需要执行对应的操作；一对多；
5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数；
6. 详解watch中immediate、handler和deep属性
   • handle:watch中需要具体执行的方法
   • immediate：组件加载立即触发回调函数执行，
   • deep 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数据中的对象内容的改变，注意监听数据的变动不需要这么做。注意：deep无法监听到数组的变动的对象的新增，参考vue数组变异，只有以响应式的方式触发才会被监听到。

     data(){
         return {
             docData: {
                 'doc_id': 1,
                 'tpl_data': 'abc'
             }
         }
     },
     watch: {
         docData: {
             handler(newVal) {
             	//当immediate：true,将会加载立即触发回调函数执行change_number会加1
                 this.change_number++
             },
         	deep: true,
         	immediate: true
         },
         //使用字符串的形式监听对象属性   
         'docData.doc_id': {
             handler(newVal, oldVal) {
                  ......
             },
         	deep: true
         }, 
     }
     

计算属性computed :

1. 支持缓存，只有依赖数据发送改变，才会重新进行计算；
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
3. computed属性值会默认走缓存，计算属性时基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

   data(){
      return {
          message: 'hello'，
          firstName: 'Foo',
      	   lastName: 'Bar'
      }
   },
   computed:{
      // 计算属性的getter
      reversedMessage(){
      		return this.meessage.split('').reverse().join('')
      }
      fullName: {
          // getter
          get() {
            return this.firstName + ' ' + this.lastName
          },
          // setter
          set(newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
   }