如何更新反应式对象（以及一般的属性）？

Question

Vue.js关于深度反应性的文档提到

数据对象中必须存在一个属性，以便Vue转换该属性并使其具有反应性

(...)

您必须通过预先声明所有根级反应性数据属性来初始化Vue实例，即使只是使用空值

考虑这两个代码片段，其中标记被定义为空对象，并在脚本过程中以两种不同的方式进行更新：

var vm = new Vue({
  el: "#root",
  data: {
    tags: {}
  }
});

vm.tags = {
  hello: true,
  world: true
};

html prettyprint-override"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  {{tags}}
</div>

var vm = new Vue({
  el: "#root",
  data: {
    tags: {}
  }
});

vm.tags["hello"] = true
vm.tags["world"] = true

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  {{tags}}
</div>

在第一种情况下，内容被正确更新，而在第二种情况下，内容没有被正确更新。

为什么会这样，尽管在这两种情况下标签都是在VM实例化时声明的？

Answer 1

这是因为在第一种情况下，您正在＜code＞标签数据：{tags:{定义中，因此它们不是被动的。

留档中的更改检测警告部分涵盖了这一点，但与您的情况（嵌套属性情况）不完全相同。您必须像这样声明您的数据：

data: {
  tags: {
    hello: null,
    world: null,
  }
}

Answer 2

这并不是说标签对象是声明的，而是当 Vue 实例化时，tags 对象的属性不存在。

在第二种情况下，您使用索引器将两个新属性添加到标记对象。Vue无法检测到已添加这些属性。

这就是为什么＜code＞$set＜code＞方法存在的原因。向对象添加新属性时，需要通过$set或Vue.set添加它

 Vue.set(vm.tags, 'hello', true)

或者，如果您在Vue方法中，

this.$set(this.tags, 'hello', true)

在第一种情况下，您将添加一个具有属性的完全不同的对象。在这种情况下，Vue知道这些属性，并在向数据添加新值时将它们转换为反应属性。

相反，如果您添加了一个新的空对象，然后添加了属性，则您将返回到与第二个示例相同的大小写中。

通常，您只想使用空属性初始化对象。

data: {
    tags:{
        hello: false,
        world: false
    }
}

在这种情况下，属性将被转换为反应属性，并且将检测到变化。

编辑

@WoJ用笔发表了一条评论，代码如下所示：

var vm = new Vue({
  el: "#root",
  data: {
    posts: {},
    tags: {}
  }
});

vm.tags = {
  hello: true,
  world: true
};

vm.posts["bonjour"] = true
vm.posts["monde"] = true

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="root">
  <!-- show all tags which are on -->
  {{tags}}
  {{posts}}
</div>