问题：vue3中reactive对象赋值，不能响应式变化

在使用vue3中，使用reactive创建的对象或者数组进行赋值时，可以正常赋值，但是不会触发响应式变化。

例子：

<script setup lang="ts">
import { ref,reactive } from 'vue'
let list = reactive<string[]>([]);
let obj = reactive({});
function add(){
    setTimeout(()=>{
        obj = {
            name:'meowrain',
            age:20
        }
        console.log(obj);
    },2000)
}
</script>
<template>
  <div>
    <button @click="add">add</button>
    
    <div>{{ obj }}</div>
  </div>
</template>
<style></style>

我们按下按钮，等待2秒

可以看到obj的值已经发生了变化，但是页面没有进行渲染,与此同时，obj的响应式对象被破坏(本来应该是Proxy(Object) {}类型的，现在成了纯粹的普通对象了

解决办法

方法1

直接添加对象的属性

<script setup lang="ts">
import { ref,reactive } from 'vue'
let list = reactive<string[]>([]);

let obj = reactive({});
console.log(obj);
function add(){
    setTimeout(()=>{
        obj.name = 'meowrain'
        obj.age = '120'
        console.log(obj);
    },2000)
}
</script>
<template>
  <div>
    <button @click="add">add</button>
    
    <div>{{ obj }}</div>
  </div>
</template>
<style></style>

按下按钮

数组的话就是调用push,然后把异步获取的数据解构传入就行了

方法2

使用ref
不必多说，直接ref包起来给xxx.value赋值就行