javascript - 在创建的函数中定义的数据对象但不是 react 性的？

Question

我有一个 Vue 实例，其中数据属性被初始化为对象:

var app = new Vue({
  el: '#app',
  data: {
    obj: { }
  },
  methods: {

  },
  created: function() {
    this.obj["obj2"] = {}
    this.obj["obj2"].count = 0
  },
  mounted: function() {
    setInterval(function() {
      this.obj.obj2.count++
      console.log(this.obj.obj2.count)
    }.bind(this), 1000)
  }
})

<div id="app">
  {{ obj['obj2'].count }}
</div>

然后，当创建实例时，我向 obj 添加一个属性。

但是，当我想显示对象的对象属性count时，它显示0并且不是 react 性的。如果我在数据中定义了整个对象，它是 react 性的，但我无法在数据中定义该对象，因为它的数据依赖于外部源 - API，这就是为什么它在创建中填充了数据> 功能。

我设法使其显示当前计数的唯一方法是强制更新 View ，但我认为这不是正确的解决方案。

有什么建议吗？

Answer 1

问题是 Vue 无法跟踪其响应式对象的全新属性。 (这是 JavaScript 的限制)。

这里有详细描述:https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

简短的版本是:你必须这样做

created: function() {
  Vue.set(this.obj, 'obj2', {})
  Vue.set(this.obj.obj2, 'count', 0)
}

或

created: function() {
  Vue.set(this.obj, 'obj2', {
    count: 0
  })
}