vue3 reactive值不更新

即上一个随笔里面的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]);

这样的话就可以啦！