VUE watch与computed异同

在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？笔者将在接下来进行解析

computed:计算属性

通过属性计算而得来的属性

1. get用法

data: {
  firstName: 'Liu',
  lastName: 'lu'
},
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值

2.get和set用法

data: {
    firstName: 'Liu',
    lastName: 'lu'
  },
  computed: {
  fullName：{
   get(){//回调函数 当需要读取当前属性值时执行，根据相关数据计算并返回当前属性的值
      return this.firstName + ' ' + this.lastName
    },
   set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
       //val就是fullName的最新属性值
       console.log(val)
        const names = val.split(' ');
        console.log(names)
        this.firstName = names[0];
        this.lastName = names[1];
   }
   }
  }

注意：
1、computed内部的函数名称可以随意编写
2、computed内部的函数必须通过return的方式将结果进行返回，最好不要在内部进行赋值操作
3、虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加()
4、只要函数内部所依赖的属性发生了改变，那么这个函数就会自己调用
5、如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果

总结：computed中的方法都是依赖于Vue中data里面的属性，如果属性发生了改变那么computed中所对应的函数就会去执行

使用的场景：当多个属性影响一个属性的时候我们就需要用到computed，如下图

image.png

watch:属性监听

作用：监听data中属性的变化 当data中的属性发生了改变后，那么watch中相对应的函数就会执行

image.png

1.示例

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
     firstName: function (val) {
     this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
     this.fullName = this.firstName + ' ' + val
   }
   }

2.监听简单数据类型

data(){
      return{
        'first':2
      }
    },
    watch:{
      first(){
        console.log(this.first)
      }
    }

3.监听对象（数组）需用深度监听

data(){
      return{
        'first':{
          second:0
        }
      }
    },
    watch:{
      secondChange:{
        handler(oldVal,newVal){
          console.log(oldVal)
          console.log(newVal)
        },
        deep:true
      }
    }

console.log打印的结果,发现oldVal和newVal值是一样的,说明深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化（地址没有被改变，原先的数据被覆盖）

注意事项：
1、watch中的函数名称必须是所依赖data中的属性名称
2、watch中的函数是不需要调用的，只要函数所依赖的属性发生了改变 那么相对应的函数就会执行
3、watch中的函数会有2个参数 一个是新值，一个是旧值
4、watch默认情况下无法监听对象的改变，如果需要进行监听则需要进行深度监听 深度监听需要配置handler函数以及deep为true。(因为它只会监听对象的地址是否发生了改变，而值是不会监听的)
5、watch默认情况下第一次的时候不会去做监听，如果需要在第一次加载的时候也需要去做监听的话需要设置immediate:true
6、watch在特殊情况下是无法监听到数组的变化
- 通过下标来更改数组中的数据
- 通过length来改变数组的长度

解决方案：

• 通过Vue实例方法set(object,key/index,value);

 this.$set(this.arr,0,100);

• 通过splice来数组清空 $delete(object,key/index)

this.$delete(this.arr,0)

7、深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

总结：

computed常用于值的计算，如简化tempalte里面{{}}计算和处理props或$emit的传值，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch常用来观察动作，听props，$emit或本组件的值执行异步操作,页面重新渲染时值不变化也会执行