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

墨蓝 2023-10-09 23:11 13阅读 0赞

![ceef8ad901d14daf9078510fd94564bd.png][]

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

## 数组Array的响应式赋值 ##

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

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

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

正确的使用方式应该是：

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

## 对象Object重新赋值 ##

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

// 对象的响应式
    type res = {
      code: number
      data: string[]
      message: string
      state?: string
    }
    const response: res = reactive({ code: 0, data: [], message: '' })
    // 修改对象的值
    const editRes = function () {
      response.code = 200
    }
    // 增加对象的值
    const addRed = function () {
      response.state = 'success'
    }
    // 删除对象的值
    const delRes = function () {
      delete response.message
    }
    // 重新赋值
    const newRes = function () {
      const newValue = {
        code: 500,
        data: ['error'],
        message: '出错了'
      }
      Object.assign(response, newValue)
    }

## 集合Set响应式赋值 ##

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

// 集合的重新赋值
    const set1 = reactive(new Set(['1', '2', '3']))
    // 添加
    const addSet = () => {
      set1.add('六')
    }
    
    // 删除
    const delSet = () => {
      set1.delete('一')
    }
    
    // 清空集合
    const clsSet = () => {
      set1.clear()
    }
    
    // 重新赋值
    const newSet = () => {
      const newSet = new Set(['4', '5', '6'])
      set1.clear()
      newSet.forEach((item) => {
        set1.add(item)
      })
    }

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

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

![16df77dd3e1d4ad6b4fdf4813513b260.png][]

[ceef8ad901d14daf9078510fd94564bd.png]: https://img-blog.csdnimg.cn/ceef8ad901d14daf9078510fd94564bd.png
[16df77dd3e1d4ad6b4fdf4813513b260.png]: https://img-blog.csdnimg.cn/16df77dd3e1d4ad6b4fdf4813513b260.png