Vue反应性问题，需要一些解释答案

【问题标题】：Vue reactivity issue, need some explanationsVue反应性问题，需要一些解释
【发布时间】：2019-07-08 20:07:36
【问题描述】：

我已经删除了我的代码中大部分无用的部分，所以如果这段代码没有真正的意义，请不要担心，它只是向你展示什么不起作用。

首先，我从一个名为 objects 的基本数组创建一个数组：

objects: [
        {
          text: "I dont trigger stuff",
        },
        {
          "text": "I dont trigger stuff",
        },
        {
          text:"I trigger stuff",
          activated: undefined,
        },
],

还有创建函数

created() {
    const newArray = [];

    this.objects.forEach(anObj => {
      anObj.activated = false;
      newArray.push(anObj);
    });

    this.filteredObjects = newArray;
},

我将属性activated 初始化为false。在我的真实代码中，我使用的不是forEach，而是find，但结果是一样的。

然后，我显示几个按钮来触发“激活”

<button
    v-for="(myObj, index) in filteredObjects"
    :key="index"
    @click="activateObject(myObj, index)">
    {{ myObj.text }}
</button>

而被触发的功能就是这个：

activateObject(anObj, anObjIndex) {
      this.$set(this.filteredObjects[anObjIndex], 'activated', !anObj.activated)
},

我的目标只是更新activated 属性。

为了检查反应是否有效，我有一个观察者：

watch: {
    filteredObjects: {
      handler() {
          alert('called')
      },
      deep: true,
    }
},

我有两个问题：

1/ 既然所有对象的所有activated 属性都设置为false，为什么只有一个工作，即属性最初设置为undefined 的那个？

2/ 如果我将激活函数更新为：

activateObject(anObj, anObjIndex) {
      anObj.activated = !anObj.activated;
      this.$set(this.filteredObjects, anObjIndex, anObj);
},

效果很好。谁能解释一下为什么，有什么区别？

在这两种情况下，VueJS Devtools 都会在单击刷新时显示更新的值。这是一个反应性问题。

你可以在这里找到一个小提琴：

https://jsfiddle.net/dv1jgneb/

【问题讨论】：

如果它在挂载时不存在，则它不是反应性的。就这么简单。在data() 中将其声明为空数组，一切就绪。它在 Vue 文档中有详细记录，几乎是搜索“vue 反应性”或您看到的错误文本时出现的第一件事。

标签： javascript vue.js vuejs2 vue-reactivity

【解决方案1】：

来自Docs：

由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 对其进行转换并使其具有响应性。

这解释了为什么只有第三个按钮“触发东西”。

因此，您可以在data() 中添加该属性，或者如文档中所述，使用this.$set：

this.objects.forEach(anObj => {
  this.$set(anObj, 'activated', false);
  newArray.push(anObj);
});

JS Fiddle

希望这会有所帮助！

【讨论】：

谢谢，有道理！