vue3 reactive丢失响应式

问题

使用 reactive 构造响应式对象时，当对其进行重新赋值后，会导致原有变量失去响应式，页面不会发生联动更新

例如：

1、使用 reactive 定义一个响应式的对象变量

let data1= reactive(
    {
        name: '小李',
        date: '2024-03-18',
        address: 'xx地址'
    }
)

2、将属性渲染到页面上

<button @click="change">点击更新</button>
<div>{{data1.name}}</div>

const change = () => {
    let data2 = {
        name: '小胡',
        date: '2024-03-1',
        address: 'xx地址2'
    }
    data1 = data2 // 将 data2 赋值给 data1
}

点击按钮后，发现，<div>{{data1.name}}</div> 并没有变成 小胡

原因

data2 赋值给 data1 时，data1 的引用地址指向了 data2，但 data2 不是响应式的，所以更新后的 data1 并不会与 {{data1.name}} 产生联动

解决

方法一：简单数据类型用 ref 

let data1= ref(
    {
        name: '小李',
        date: '2024-03-18',
        address: 'xx地址'
    }
)

ref 定义数据（包括对象）时，都会变成 RefImpl(Ref 引用对象) 类的实例，无论是修改还是重新赋值都会调用 setter，都会经过 reactive 方法处理为响应式对象。

注意赋值时是 data1.value = data2

方法二：复杂数据类型避免直接赋值，在外层包裹一个对象

let data = reactive(
    {
        data1: {} 
    }
) 
const change = () => {
    let data2 = {xxxx}
    data.data1 = data2
}

拓展

既然你说 data2 不是响应式的，那把 data2 变成响应式的再赋值不就好了吗？

例如使用element-plus中的表格组件，点击某一行时，需要将此行的数据赋值给一个响应式对象，由于获取的行数据是被Proxy包裹的，那会发生什么？

答案：响应会很慢，因为reactive响应式转换是“深层”的，它会影响到所有嵌套的属性。