Vue 循环监听多个属性的最佳实践

可以使用 $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] 获取属性名时需要使用闭包来获取正确的属性名。