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

【问题标题】：multiple watchers same function vue.js多个观察者相同的功能 vue.js
【发布时间】：2017-06-04 19:22:01
【问题描述】：

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

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

类似于'param.a,param.b,param.c' (nv) {...} 的东西？

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

【问题讨论】：

sum 应该是computed，这很容易
对不起，我应该从一开始就说明，我不能简单地使用计算属性。

标签： vue.js vuejs2

【解决方案1】：

不确定为什么不能使用计算属性，但可以在 created 钩子中添加观察者，如下面的演示或 fiddle 所示。

我认为在 vue 中没有实现对数组的监视。 SO 也有一个类似的问题，只是使用 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>

【讨论】：