vue for循环往数组里push时数据覆盖问题

问题

var a=ref({ b:"hello"})
var b =ref([]);
b.value.push(a.value);
a.value={b:"hi"};
for(var i=0;i<b.value.length;i++){
  if(a.value.b !== b.value[i].b){
    b.value.push(a.value)
  }
}
console.log(b.value);
//实际结果--[{b:"hi"}]
//期待结果--[{b:"hello"},{b:"hi"}]

解决办法

方法1. b.value.push(JSON.parse(JSON.stringify(a.value)));深拷贝
方法2. b.value.push(toRaw(a.value)); toRaw获取原始对象，普通对象被push是新增一个存储，跟原对象没关系

知识点

浅拷贝和深拷贝

对象是引用类型，引用类型名存在栈内存中，值存在于堆内存，赋值属于浅拷贝，浅拷贝用指针指向相同地址。基本类型存在栈里，赋值开辟新内存。

var a=ref({ b:"hello",c:"hhh"})
var b = toRaw(a.value)
delete b.c
console.log(a.value)//{ b:"hello"}

proxy

proxy是代理，所以它实际算是浅拷贝。数组push的对象是浅拷贝，原数据被改变数组中的对象就会改变。vue里数组proxy代理后本身也是类数组。