vue 循环多个 watch 监听

可以使用$watch来循环监听多个属性的变化，将需要监听的属性放在一个数组中，然后遍历数组进行监听。如下所示：

watch: {
  // 监听多个属性
  $props: {
    handler: function(newVal, oldVal) {
      console.log('$props changed', newVal, oldVal)
    },
    deep: true
  },
  $route: {
    handler: function(newVal, oldVal) {
      console.log('$route changed', newVal, oldVal)
    },
    deep: true
  },
  // 循环监听多个属性
  multipleProps: {
    handler: function(newVal, oldVal) {
      console.log('multipleProps changed', newVal, oldVal)
    },
    deep: true,
    immediate: true
  }
},
computed: {
  // 获取需要监听的属性列表
  propsList: function() {
    return ['$props', '$route']
  }
},
created: function() {
  // 循环监听多个属性
  for (var i = 0; i < this.propsList.length; i++) {
    this.$watch(this.propsList[i], function(newVal, oldVal) {
      console.log(this.propsList[i], 'changed', newVal, oldVal)
    }, { deep: true, immediate: true })
  }
}

在上面的例子中，我们定义了三个watch，其中$props和$route是直接监听的属性，而multipleProps是需要循环监听的属性，我们将需要监听的属性放在了一个数组propsList中，然后遍历数组进行监听。需要注意的是，由于watch函数中的this指向的是Vue实例本身，所以在循环中使用this.propsList[i]获取属性名时需要使用闭包来获取正确的属性名