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]);

這樣的話就可以啦！