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中实现。在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>

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

1 个答案: