这听起来可能微不足道,但事实并非如此。所以总结一下:
- 我们有一个存储在数据中的对象数组(最初为空(。
- 创建组件时,我们通过自定义结构方法将一些对象添加到数组中。
- 织物方法接受基对象,并使用一些额外的道具对其进行扩展。
- 通过织物方法添加的道具之一是对数据的引用(
this.foo
(。
问题:生成的对象不是响应性的,也不会对this.foo
更改做出反应。
演示:https://codesandbox.io/s/vigilant-framework-47me6?fontsize=14&hidenavigation=1&theme=dark
到目前为止我尝试过:
- 使用 hack 返回新
Vue(...)
以使对象响应 (https://github.com/vuejs/vue/issues/2660(。 - 使用
$set
在构造方法中设置其他属性。
所以问题是:我们如何使对象响应式?
附言我知道使用观察者/计算是选项,但在这种情况下不是。我希望对象是反应式的,而不是手动更新整个对象数组。
好吧,问题是当你这样做时
{ foo: this.foo }
您只需将存储在this.foo中的实际值传递给新的对象foo属性,该属性在实例化时为0,这就是javascript处理原始值的方式。
如果不想使用计算属性或观察程序,可以使用对象而不是通过引用而不是按值分配的基元值。
因此,您可以在数据对象中定义foo属性,如下所示:
foo: {val: 0}
像这样在添加的道具中分配你的值
{foo: this.foo}
并像这样增加价值
setInterval(() => this.foo.val++, 250);
这是使用上述 https://codesandbox.io/s/vue-reactive-object-ybji5 修改的代码
谢谢