引出问题

为什么会写这篇文章?

假设我们在vue3里定义了一个reactive对象,如何我们请求接口,并把接口的所有数据赋值给reactive这个响应式对象

//<script setup>
let apiData = reactive({});
(async()=>apiData = await Api.getUserInfo())();
//</script>

像上面这样写肯定是不行的,因为reactive是proxy代理的对象,直接赋值等于放弃了vue的响应式代理

如何快捷优雅的解决

使用es6的Object.assign()方法

//<script setup>
let apiData = reactive({});
(async()=>Object.assign(apiData,await Api.getUserInfo()||{}))();
//</script>

这个方法会将第二个参数中的数据快速的浅拷贝到第一个参数的对象中，重复的key将被合并。

后言

在之前的es6的学习中,我学习了展开运算符,作对象合并的时候我会使用

let obj1 = {name:'zs'};
obj1={...obj1,age:18};

boj1//=>{name:'zs',age:18}

想必大家也是这么写的,使用展开运算符。而在后续学到Object.assign()函数的时候我觉得它没啥用，没想到在这里这个函数可以对vue代码做出优化，只能说：emmm多学多练吧！浮躁的不要