VueJS：对象的反应性数组

Question

这听起来很琐碎，但事实并非如此。总结一下：

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

问题：生成的对象没有反应性，并且对this.foo的更改没有反应。

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

到目前为止，我已经尝试过：

1. 使用hack返回新的this.foo以使对象具有响应性（https://github.com/vuejs/vue/issues/2660）。
2. 使用Vue(...)在fabric方法中设置其他属性。

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

P.S。我知道使用观察者/计算是一种选择，但在这种情况下不是。我希望对象是反应性的，而不是手动更新对象的整个数组。

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

修改的代码

谢谢