vue.js - vue js 使用单个处理程序监视多个属性

Question

目前我必须看几个属性。如果它们中的每一个都发生变化，我必须调用相同的函数:

export default{
  // ...... rest of code 
  watch: {
    propa: function(after,before) {
      doSomething(after,before);
    },
    propb: function(after,before) {
      doSomething(after,before);
    }
    // ... so on
  }
}

所以我不得不在上面多次编写相同的代码。是否可以简单地监视所有属性并调用它们的更改处理程序，而不必多次编写相同的代码？

PS:我用的是vue 1.x

Answer 1

更新:2020 年 4 月

对于使用 Vue 3 的人，watch API 可以接受多个源

import { watch, ref } from 'vue';

export default {
  setup(() => {
    const a = ref(1), b = ref('hello');

    watch([a, b], ([newA, newB], [prevA, prevB]) => {
      // do whatever you want
    });
  });
};

---

Vue 2 的原始答案

没有官方方法可以解决您的问题(see this)。但您可以将计算属性用作技巧:

    export default {
      // ...
      computed: {
        propertyAAndPropertyB() {
          return `${this.propertyA}|${this.propertyB}`;
        },
      },
      watch: {
        propertyAAndPropertyB(newVal, oldVal) {
          const [oldPropertyA, oldProvertyB] = oldVal.split('|');
          const [newPropertyA, newProvertyB] = newVal.split('|');
          // doSomething
        },
      },
    }

如果你只是想做点什么而不关心什么是新/旧值。忽略两行

    const [oldPropertyA, oldProvertyB] = oldVal.split('|');
    const [newPropertyA, newProvertyB] = newVal.split('|');