Javascript Vue.js-如何反应性地添加；多级嵌套；成员对对象

我正在一个web项目中使用vue.js版本2

我知道在向对象添加新成员时，反应性有一些限制

也就是说，我正在处理一个相对复杂的数据对象，它有许多嵌套成员、子对象数组等等

我现在使用计算属性来获取/设置特定组件中的某些成员，并使用lodadh

\uuuz.set

例如：

\uuu.set（myObj，'GeneralData.Body[0].MainAddress.StreetNumber'）

我的问题是，除了

GeneralData

，其余部分不可能存在，因此整个事情不是被动的

如何在vue.js中实现这一点？

---

我试图使用vue.js提供的

$set

函数，但它创建了一个名为“GeneralData.Body[0].MainAddress.StreetNumber”（作为字符串）的嵌套属性，而不是对象树作为lodash函数。

首先将对象分配给变量：

const objToDeploy = myObj

_.set(objToDeploy, 'GeneralData.Body[0].MainAddress.StreetNumber')

完成后，使用

Vue.set

Vue.set(this, 'myObj', objToDeploy)

---

您应该知道，使用这些重嵌套数据集和反应性属性将导致虚拟DOM的整个重新绘制，因为

可观察的
反应性在Vue中是如何工作的。因此，最好将多嵌套子对象的
数组
拆分为它们自己的
模型
，这样就不会出现此问题。
您可以使用
.setWith
告诉
lodash
使用什么函数来创建道具

因此，您的问题的解决方案如下：

_.setWith(myObj, 'GeneralData.Body[0].MainAddress.StreetNumber', 'somevalue', function(nsValue, key, nsObject){
 return Vue.set(nsObject, key, nsValue)
})

参考资料：


感谢您指出有关虚拟DOM和反应性的问题。不幸的是，目前我无法对UI进行重新设计以避免出现这种情况，但我肯定会将此作为未来的一项任务。这似乎是比@pranavjindal999Smart更可靠的解决方案。我不知道塞维思。这个答案基本上和我的答案一样，带有回调函数+1刚刚花了两个小时研究这一点，但在这种方法中，叶子属性（如
.StreetNumber
）似乎不会发生反应。（我注意到，在chrome开发工具中，尽管持有/parent object
.MainAddress
是一个可观察的（它有
\uuuuuuuuuuuuuuuuuuuuuuuuuuoObservable
属性），但实际的
.StreetNumber
似乎不是被动的，因为它没有
被动的getter StreetNumber
和
被动的setter StreetNumber）。如果我们使用@Ohgodwhy的解决方案，
.StreetNumber
将具有reactiveSetter和reactiveGetter。。。