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

原文由 rahulserver 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的原始答案

没有官方方法可以解决您的问题（ 请参阅此）。但是您可以使用计算属性作为技巧：

     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('|');

原文由 Yi Feng Xie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

另一种可能：

 new Vue({
  el: '#app',
  data: {
    name: 'Alice',
    surname: 'Smith',
    fullName: '' // IRL you would use a computed for this, I'm updating it using a watch just to demo how it'd be used
  },
  mounted() {
    this.$watch(vm => [vm.name, vm.surname], val => {

      this.fullName = this.name + ' ' + this.surname;

    }, {
      immediate: true, // run immediately
      deep: true // detects changes inside objects. not needed here, but maybe in other cases
    })
  }
});

 <script src="https://unpkg.com/vue"></script>

<div id="app">
  <div>
    name:<input v-model="name">
  </div>
  <div>
    surname:<input v-model="surname">
  </div>
  <div>
    full name: {{ fullName }}
  </div>
</div>

有关 vm.$watch 的 Vue API 文档的 更多信息。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议