vue3的响应式赋值中数组array，对象object，集合set的重新赋值怎么操作，问过Chatgpt的答案

vue3和ts结合开发的时候，总是会遇到引用数据类型的重新赋值的情况，但是在vue3中，又不能使用直接赋值的情况，因为会改变proxy的结构，导致响应式失败，那么该如何重新赋值响应式对象数据成为了一个技巧问题，今天它来了

数组Array的响应式赋值

如果是数组的话，踩坑点：**清空数组，然后再重新给数组赋值的时候，发现数组变化了页面没有响应，代码如下：

1. derwayList = [];
3. // 或者使用下面的也不行
4. derwayList = reactive([]);

原因：虽然重新代理了，但是这个数组已经不是页面上的数组，也就不是setup返回出去的那个，通俗来说就是你大爷已经不是你大爷了

正确的使用方式应该是：

1. //方案一：
2. derwayList.splice(0, derwayList.length);
4. //方案二：
5. derwayList.length = 0;
8. // 然后使用解构重新赋值
9. derwayList.push(...newList)

对象Object重新赋值

对于对象不能直接重新赋值原因和数组是一样的，正确的赋值方式应该是

1. // 对象的响应式
2. type res = {
3. code: number
4. data: string[]
5. message: string
6. state?: string
7. }
8. const response: res = reactive({ code: 0, data: [], message: '' })
9. // 修改对象的值
10. const editRes = function () {
11. response.code = 200
12. }
13. // 增加对象的值
14. const addRed = function () {
15. response.state = 'success'
16. }
17. // 删除对象的值
18. const delRes = function () {
19. delete response.message
20. }
21. // 重新赋值
22. const newRes = function () {
23. const newValue = {
24. code: 500,
25. data: ['error'],
26. message: '出错了'
27. }
28. Object.assign(response, newValue)
29. }

集合Set响应式赋值

集合响应式不能重新赋值也是一样的道理，所以集合的重新赋值应该是：

1. // 集合的重新赋值
2. const set1 = reactive(new Set(['1', '2', '3']))
3. // 添加
4. const addSet = () => {
5. set1.add('六')
6. }
8. // 删除
9. const delSet = () => {
10. set1.delete('一')
11. }
13. // 清空集合
14. const clsSet = () => {
15. set1.clear()
16. }
18. // 重新赋值
19. const newSet = () => {
20. const newSet = new Set(['4', '5', '6'])
21. set1.clear()
22. newSet.forEach((item) => {
23. set1.add(item)
24. })
25. }

而且这部分修改我还专门问了chatgpt，但是chatgpt给我的一种方式不知道为什么不起作用，然后我又问它，它告诉我了上面的方式，所以下面的方式可能会不起作用：

1. const newSet = new Set([4, 5, 6]);
2. Object.setPrototypeOf(newSet, setCollection); // 继承原始的 Set 实例