VueJS：对象的反应数组

Question

这听起来可能微不足道，但事实并非如此。总结一下：

1. 我们有一个对象数组（最初为空）存储在数据中。
2. 创建组件时，我们通过自定义结构方法将一些对象添加到数组中。
3. Fabric 方法接受基础对象并使用一些额外的属性对其进行扩展。
4. fabric 方法添加的道具之一是对数据的引用(this.foo)。

问题：生成的对象不是反应性的，不会对 this.foo 变化做出反应。

演示：https://codesandbox.io/s/vigilant-framework-47me6?fontsize=14&hidenavigation=1&theme=dark

到目前为止我尝试过的：

1. 使用 hack to return new Vue(...) 使对象具有反应性 (https://github.com/vuejs/vue/issues/2660)。
2. 使用 $set 在 fabric 方法中设置附加属性。

所以问题是：我们如何使对象具有反应性？

P.S。我知道使用 watchers/computed 是一个选项，但在这种情况下不是。我希望对象具有反应性，而不是手动更新整个对象数组。

Answer 1

嗯，问题是当你这样做的时候

{ foo: this.foo }

您只是将 this.foo 中存储的实际值传递给新对象 foo 属性，在实例化时为 0 并且这就是 javascript 使用原始值的方式。

如果您不想使用计算属性或观察者，您可以使用对象而不是原始值，原始值通过引用而不是值来赋值。

因此您可以像这样在数据对象中定义您的 foo 属性：

foo: {val: 0}

像这样在 addedProps 中分配你的值

{foo: this.foo}

并像这样增加值

setInterval(() => this.foo.val++, 250);

这是你用上面的代码修改过的代码 https://codesandbox.io/s/vue-reactive-object-ybji5

谢谢，