Vue中computed和watch的区别和不同的使用场景

计算属性computed :

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

computed优点

1. 当我们改变data变量值时，整个应用会重新渲染，vue 会被数据重新渲染到 dom 中。这时，如果我们使用 names方法，随着渲染，方法也会被调用，而 computed 不会重新进行计算，从而性能开销比较小。当新的值需要大量计算才能得到，缓存的意义就非常大。
2. 如果 computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性 并不会重新计算，从而提升性能。
3. 当我们拿到的值需要进行一定处理使用时，就可以使用 computed。

<template>
  <div>
    <el-input v-model="firstText"></el-input>
    <el-input v-model="lastText"></el-input>
    <el-input v-model="mergeText1"></el-input>
    <el-input v-model="mergeText2"></el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        firstText:'内容1',
        lastText:'内容2',
      }
    },
    computed:{
      mergeText1(){
        return this.firstText + ' ' + this.lastText
      },
      mergeText2:{      /*通过mergeText2反向赋值给 firstText和lastText */
        get() {  //回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
          return `${this.firstText} ${this.lastText}`;
        },
        set(val) {  //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据,val就是fullName的最新属性值
          const names = val.split(' ');
          console.log(names);
          this.firstText = names[0];
          this.lastText = names[1];
        }
      }
    }
  }
</script>

侦听属性watch：

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

• 一般用法，监听单个变量或一个数组

<template>
  <div>
    <el-input v-model="firstText"></el-input>
    <el-input v-model="lastText"></el-input>
    <el-input v-model="mergeText"></el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        firstText:'内容1',
        lastText:'内容2',
        mergeText:'',
      }
    },
    watch:{
      //监听当firstText的值变化，触发此事件，改变mergeText的值
      firstText(newText,oldText){
        console.log('this firstName newText '+ newText);
        console.log('this firstName oldText '+ oldText);
        this.mergeText = newText + ' ' + this.lastText;
      }
    }
  }
</script>

• 监听简单数据

<template>
  <div>
    <el-input v-model="mergeText"></el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mergeText:'',
      }
    },
    watch:{
      //mergeText值变化即触发
      mergeText(){
        console.log(this.mergeText);
      }
    }
  }
</script>

• 监听复杂数据
  深度监听deep

不使用 deep 时，当我们改变 obj.a 的值时，watch不能监听到数据变化，默认情况下，handler 只监听属性引用的变化，也就是只监听了一层，但改对象内部的属性是监听不到的。

<template>
  <div>
    <el-input v-model="obj.text"></el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        obj:{
          text:'内容'
        }
      }
    },
    watch:{
      //监听对象obj的变化
      obj:{
        handler () {
          console.log('obj.text changed')
        },
        // immediate: true
        deep: true
      }
    }
  }
</script>

immerdiate 属性:通过声明 immediate 选项为 true，可以立即执行一次 handler。

通过使用 deep: true 进行深入观察，这时，我们监听 obj，会把 obj 下面的属性层层遍历，都加上监听事件，这样做，性能开销也会变大，只要修改 obj 中任意属性值，都会触发 handler,那么如何优化性能呢？
~~可以直接对用对象.属性的方法拿到属性

watch: {
    'obj.text': {　　//监听对象单个属性text
      handler () {
        console.log('obj.text changed')
      },
      immediate: true    //该属性会先执行一次handler
      // deep: true
    }
  }