Question

考虑使用琐碎的应用程序：

<div id="app">
  <counters :counter1="counter1" :counter2="counter2">
  </counters>
  <button @click="onClick">Click Here</button>
</div>

JS：

Vue.component('counters', {
  template: '<h1>{{counter1.count}} {{counter2.count}}</h1>',
  //template: '<h1>{{count1}} {{count2}}</h1>',
  props: {
    'counter1': {
      type: Object
    },
    'counter2': {
      type: Object
    }
  },
  data: function() {
    return {
      'count1': 0,
      'count2': 0,
    }
  },
  watch: {
    counter1: function(n, o) {
      console.log(JSON.stringify(n));
      this.count1 = n.count;
    },
    counter2: function(n, o) {
      console.log(JSON.stringify(n));
      this.count2 = n.count;
    }
  }
});


var vm = new Vue({
  el: '#app',
  data: {
    counter1: {
      count: 0
    },
    counter2: {
      count: 0
    }
  },
  methods: {
    onClick: function() {
      this.counter1.count++;
      this.counter2.count++;
    }
  }
});

＆＃34;计数器＆＃34;期望两个道具counter1和counter2，两个对象。 counter1.count和counter2.count属性直接在模板中使用。单击该按钮时，两个计数器都会加1。这可以完美地运行，如下所示：jsfiddle

但是我想用＆＃34;观看＆＃34;用于更新计数器。所以我定义了反应属性count1和count2，并在counter1和counter2改变时更新它们。出于某种原因，这不起作用。虽然使用手表的效率较低，但我认为这两种方法都会产生相同的效果。但可能我在这里遗漏了一些东西。你可以解释吗？

Answer 1

如果您想要观察对象的更改，则需要使用watch: { counter1: { handler(n, o) { this.count1 = n.count; }, deep: true }, counter2: { handler(n, o) { this.count2 = n.count; }, deep: true } }：

  watch: {
    'counter1.count': function(n, o) {
      this.count1 = n;
    },
    'counter2.count': function(n, o) {
      this.count2 = n;
    }
  }

这里是JSFiddle：https://jsfiddle.net/osyam658/

或者，您可以通过将属性名称包装在观察者的引号中来查看对象属性本身：

25 + 4556 < 5544

这里是JSFiddle：https://jsfiddle.net/b7drpy7j/

Answer 2

您需要设置一个深度观察器来观察嵌套在对象内的更改，如下所示：

deep watcher

以下是updated fiddle

参考：deep option for vm.$watch()

Vue.js道具手表不起作用

2 个答案: