多个观察者相同的功能 vue.js

Question

我有几个观察者应该调用同一个函数，有没有办法在一次语句中列出它们？

watch: {
    'param.a' (nv) {
        this.calc();
    }
    ,'param.b' (nv) {
        this.calc();
    }
    ,'param.c' (nv) {
        this.calc();
    }
}

类似于 'param.a,param.b,param.c' (nv) {...} ?

编辑：我应该澄清一下，这不是实际代码，但我不能使用计算属性.

Answer 1

不知道为什么你不能使用计算的属性但你可以在 created 挂钩中添加观察者，就像下面的演示或这个 fiddle.

我认为数组的监视在 vue 中没有实现。在也有类似的问题，只是使用 Vue 1.x 语法。（手表已添加到已安装的挂钩中（之前已准备就绪），但我认为您不必等待 DOM 准备好添加手表。无论如何，这也可以。）

我的代码受此启发github issue。只更改为 mixin 和 ES6 箭头函数。

Vue.mixin({
  methods: {
    watchCollection(arr, cb) {
      arr.forEach((val) => this.$watch(val, cb))
    }
  }
})

new Vue({
  el: '#app',
  /*watch: {
    'param.a' (nv) {
        this.calc();
    }
    ,'param.b' (nv) {
        this.calc();
    }
    ,'param.c' (nv) {
        this.calc();
    }
 },*/
  /* // not suported
   watch: {
    ['param.a', 'param.b', 'param.c'] : (nv) {
        this.calc();
    }
 },*/
  created() {
    this.watchCollection(
      ['param.a', 'param.b', 'param.c'],
      this.calc)
  },
  computed: {
    resultComputed() {
      return this.calc();
    }
  },
  methods: {
    calc() {
      let a = parseInt(this.param.a);
      let b = parseInt(this.param.b);
      let c = parseInt(this.param.c);
      this.result = a + b + c;
      return this.result;
    }
  },
  data() {
    return {
      param: {
        a: 0,
        b: 0,
        c: 0
      },
      // msg: 'hello',
      result: 0
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <input v-model="param.a" />
  <input v-model="param.b" />
  <input v-model="param.c" />{{result}} {{resultComputed}}
  <!--{{msg}}-->
</div>

多个观察者相同的功能 vue.js

multiple watchers same function vue.js

vue.js

vuejs2