vue中watch属性监听多个值的方法

使用场景

日常开发中，经常会遇到同时监听多个值是否改变的情况，比如计算某一个值的结果，结果依据多个值计算而成，此时则需要监听多个值是否都不为空。

实现原理

watch可以监视computed计算属性，可以使用computed把所有要监听的数据组成对象，再监听该对象。

实现方法

1.先借用computed计算属性将所监测的值封装到方法里；

computed: {
  // 项目年节约标煤量
  yearCoal(){
    const { amount, scale, hour, rate, electricLoss, heat, heatLoss, heatRate, projectType } = this.formItem
    return { amount, scale, hour, rate, electricLoss, heat, heatLoss, heatRate, projectType }
  },
  }

2.在监视属性中使用计算属性中的方法；

yearCoal(val){
  console.log(val, val.amount)
}

3.打印方法中的val，val即所监视的所有数据组成的对象，val.amount即监视的amount值，则实现yearCoal一个方法中可以监视多个值。

补充

监视属性的属性值：
1.deep深度监听：
当监听一个嵌套有多层对象的对象时，使用deep：true属性，可以监听嵌套多层对象的内层属性值。
例：数据formItem内嵌套有projectType属性

formItem: {
  projectType: 'finance'
},

watch： {
    'formItem': {
      deep: true,
      handler(newValue,oldValue){
        this.watchYear(newValue, this.yearEle)
      }
    },
}

此时监测formItem可以监测到projectType属性。
2.immediate立即监听
设置immediate：true属性，即当页面初次加载，组件初始化的时候就会调用此监听方法；
设置immediate：false属性，即只有当监听的值改变的时候才会此方法，组件初始化的时候并不调用。
欢迎大家指正补充！！