vue3的ref和reactive对比，reactive失去响应式的情况及解决

QQ_1727702625833.png

reactive 定义数据（对象），是直接调用 reactive 方法处理成响应式对象。如果重新赋值，就会丢失原来响应式对象的引用地址，变成一个新的引用地址，这个新的引用地址指向的对象是没有经过 reactive 方法处理的，所以是一个普通对象，而不是响应式对象。解构同理。
解决方法：
1.逐个赋值，如果属性比较少的话。
2.使用 Object.assign() 。
3.使用ref()来进行定义（最简单）
4.直接在reactive中嵌套一层

<script setup>
import { reactive } from 'vue';
 
// 定义一个响应式变量
const data = reactive ({
    dataObj:{
        name:"",
        age:""
    }
});
 
// 请求接口
axios.get('/api/data')
  .then(res => {
    // 修改的是data对象的dataObj这个属性，所以具有响应式
    data.dataObj= res.data;
  })
  .catch(err => console.log(err));
 
</script>