Vue2:关于数据绑定，何时更新引用

Question

我在 parent Vue 中有数据，这些数据作为prop传递给child视图。如果父级中的数据发生更改，child何时会看到此更改？

我看到这不是瞬间的。

在下面的片段中，我将父母的data作为prop传递给child。 然后在parent中递增data，event通过bus广播到child。child读取parent data并看到较旧的值，而不仅仅是增量值。

<div id="wrapper">
  data in parent: {{ data }}
  <child :data="data" :bus="bus"></child>
  <button @click="incrementParentData">
    Increment parent data
  </button>
</div>
var Child = {
  template: '<div>data ref in child: {{ data }}</div>',
  props: ['data', 'bus'],
  created: function() {
    var self = this;
    this.bus.$on('parentDataChanged', function(data) {
      alert("data ref in child $on handler:" + self.data);
    });
  }
}
new Vue({
  el: '#wrapper',
  data: function() {
    return {
      data: 1,
      bus: new Vue()
    }
  },
  components: {
    'child': Child
  },
  methods: {
    incrementParentData: function() {
      this.data = this.data + 1;
      alert("data in parent incremented to:" + this.data);
      this.bus.$emit("parentDataChanged", this.data);
    }
  }
})

JSFiddle： 这里

问题：

1. child什么时候会看到变化？
2. 我该怎么做才能在$on处理程序的child中查看更新的值？

PS：我将更改的值作为argument传递给$emit，但是在我的现实世界中，孩子不需要知道父项中更改了哪些数据。孩子所要做的就是获取父级的数据并将其传递给后端 API。

Answer 1

问题是你不需要使用总线来捕捉道具何时更改。

您正在寻找的是观察者，一旦被监视的道具发生变化，它就会被触发。

你可以在 vuejs 文档中阅读更多关于观察者的信息。

https://v2.vuejs.org/v2/guide/computed.html#Watchers

希望这对你有帮助。