揭秘Vue.js中watch监听多值秘诀，让你的响应式编程更胜一筹

2023-03-11 11:05:19

Vue.js 中使用计算属性和 watch 监听多值的变化

引言

在 Vue.js 中，监听数据的变化至关重要，以便在数据更新时及时做出响应。通常，watch 指令用于监听单个数据属性的变化，但有时我们需要一次性监听多个值的更改。本文将探讨如何通过结合计算属性和 watch 来实现这一目标。

计算属性

计算属性是 Vue.js 中的一种特殊属性，它依赖于其他数据属性的值计算而来。它的语法如下：

computed: {
  // 计算属性的名称
  'computedName': {
    // 计算属性的计算函数
    get() {
      // 根据其他数据属性的值计算出计算属性的值
      return computedValue;
    }
  }
}

Watch

watch 指令用于监听数据的变化，并做出响应。它的语法如下：

watch: {
  // 要监听的数据
  'dataName': {
    // 数据变化时触发的回调函数
    handler(newValue, oldValue) {
      // 做出响应
    },
    // 可选参数，指定回调函数是否在组件初始化时立即执行一次
    immediate: true
  }
}

结合计算属性和 watch 监听多值

默认情况下，watch 只能监听单个值的变化。但是，通过返回一个包含计算属性的对象，然后监听该对象，我们可以一次性“监听多个变量”。

watch: {
  // 监听计算属性的对象
  'computedObject': {
    // 数据变化时触发的回调函数
    handler(newValue, oldValue) {
      // 做出响应
    },
    // 可选参数，指定回调函数是否在组件初始化时立即执行一次
    immediate: true
  }
}

computed: {
  // 计算属性的对象
  'computedObject': {
    // 计算属性的计算函数
    get() {
      // 根据其他数据属性的值计算出计算属性的值
      return {
        prop1: this.prop1,
        prop2: this.prop2
      };
    }
  }
}

代码示例

假设我们有一个组件，包含两个数据属性 prop1 和 prop2，我们希望监听这两个属性的变化。我们可以这样写：

<template>
  <div>
    <input v-model="prop1">
    <input v-model="prop2">
  </div>
</template>

<script>
export default {
  data() {
    return {
      prop1: '',
      prop2: ''
    }
  },
  watch: {
    computedObject: {
      handler(newValue, oldValue) {
        // 在 prop1 或 prop2 的值发生变化时执行
        console.log('prop1 或 prop2 的值发生变化了！');
      },
      immediate: true
    }
  },
  computed: {
    computedObject: {
      get() {
        return {
          prop1: this.prop1,
          prop2: this.prop2
        }
      }
    }
  }
}
</script>