首页 新闻 会员 周边

vue3中复制对象中的问题

0
悬赏园豆:5 [待解决问题]

我有一个对象是响应式的
然后类似通过
let o=reactive({})
liet arr=[]
for(let i=0;i<3;i++){
arr.push(o)
}
然后修改数据里面的任意一个对象,其它对象也会被影响到,请问有什么办法解决


部分代码如下

灬丶的主页 灬丶 | 初学一级 | 园豆:5
提问于:2024-04-17 17:40
< >
分享
所有回答(2)
0

官文
响应式基础
https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
你为啥不建立 3个 o:o1\o2\o3
let o1=reactive({})
let o2=reactive({})
let o3=reactive({})

快乐的凡人721 | 园豆:3975 (老鸟四级) | 2024-04-17 19:45
0

在 Vue 3 中,reactive 函数创建的对象是响应式的,这意味着当你修改一个对象的属性时,所有引用该对象的地方都会感知到这个变化。这就是为什么当你修改一个对象的属性时,所有其他对象也会被影响到的原因。

如果你想要复制一个对象而不影响其他对象,你可以使用 toRefs 函数来创建一个对象的响应式引用,然后再将其解构为普通的 JavaScript 对象。这样做会创建一个全新的对象,而不是原对象的引用。例如:

javascript
Copy code
import { reactive, toRefs } from 'vue';

let original = reactive({ count: 0 });
let copied = { ...toRefs(original) };

// 修改原对象
original.count++;

// 查看修改后的值
console.log(original.count); // 输出:1
console.log(copied.count); // 输出:0
在这个例子中,修改 original 对象的 count 属性不会影响 copied 对象的 count 属性。

通过使用 toRefs 创建一个响应式对象的引用,并将其解构为普通对象,你可以确保创建了一个独立的对象副本,而不是原对象的引用,从而避免了修改一个对象影响到其他对象的问题。

Technologyforgood | 园豆:6468 (大侠五级) | 2024-04-17 20:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册