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

1024小神 2024-07-02 14:03:02 阅读 77

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 实例



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。