vue3 reactive值不更新

标签：index 修改 更新 reactive let vue3 arrayB array

即上一个随笔里面的form表单数据定义的问题之后，又出现了另一个问题。

页面里面有一个数组：

let ruleForm = reactive([    　{ 　　　　name:'123456'　　 　　} ])

我要动态的修改这个数组里面的值，并且对这个值进行校验，方法很简单：

let arrayB = react({})
arrayB = array[index];

然后校验修改后的arrayB，没问题后赋值给array[index]

思路很清楚，确实也可以，但是页面是会发现arrayB改动的同是array[index]也在同步的改变，因为上面的赋值属于是浅拷贝，这个不用过多的解释。

es6里面实现深拷贝最简单两种办法：

Object.assign({},array[index]); 另一种就是： JSON.parse(JSON.stringify(array[index])) 实现也很简单，但是这样放上去以后发现arrayB里面的数据无法修改了。 解决方案很简单: 在定义arrayB的时候，我们给arrayB定义一个属性名，然后对属性名进行深拷贝赋值，修改也是修改那个属性名，简单来讲就是再套一层数据：

let arrayB = react(obj:{})
arrayB.obj = Object.assign({}, array[index]);

这样的话就可以啦！

 

标签：index,修改,更新,reactive,let,vue3,arrayB,array
From： https://www.cnblogs.com/sixrookie/p/17137879.html