vue.js - 为什么可以在挂载时添加 react 元素？

Question

Reactivity in Depth 的文档解释了为什么无法向已创建的实例添加新的根级响应式属性(以及如何通过 this.$set() 实际添加它们)。

在那种情况下，为什么可以在实例初始化后的挂载时更新(和 react )最初为空的对象？或者初始化部分是否包括挂载？ (尽管在初始化后可以 mount an instance manually)

new Vue({
  el: "#app",
  data: {
    myobject: {}
  },
  mounted() {
    setTimeout(() => {
      this.myobject = {
        "x": 1
      }
    }, 2000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
  {{myobject}}
</div>

根据文档，不考虑挂载后的直接进一步修改(例如 this.myobject.y = 2 将不起作用，而 this.$set( this.myobject, "y", 2) 就可以了)

Answer 1

示例中的代码不属于变更检测警告，因为您没有向 myobject 添加属性，而是将 myobject 设置为 全新的对象。 Vue 在检测对象引用更改时没有问题。

Vue 无法检测到的是向不存在的对象添加属性。例如，如果您这样做:

mounted() {
  setTimeout(() => {
    this.myobject.someNewProperty = "some value"
  }, 2000)
}

Vue 不会检测到更改。这是您更新的示例，以证明 DOM 在对象更改后永远不会更改。

new Vue({
  el: "#app",
  data: {
    myobject: {}
  },
  mounted() {
    setTimeout(() => {
      this.myobject.someNewProperty = "some value"
    }, 2000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
  {{myobject}}
</div>

文档中所说的是什么意思

Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

就是不能在Vue实例创建之后再给数据对象添加其他属性。例如这段代码:

var vm = new Vue({
  el: "#app",
  data: {
    myobject: {}
  },
  mounted() {
    setTimeout(() => {
      this.$set(vm.$data, 'newRootLevelProperty', "some value") 
    }, 2000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
  {{myobject}}
</div>

警告中的结果

[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

但是您可以向嵌套对象(例如myobject)添加属性，只要您使用$set。