vue3 ref，reactive请求后的赋值问题以及解决方法

vue3 ref，reactive请求后的赋值问题以及解决方法

​ 开发的过程中，我们一定会进行接口的对接，将响应的结果赋值给我们页面上需要展示或者操作的变量，在vue3中，我们可能会稍微的有点不适应，在赋值的过程中，使用了错误的做法，导致一直失败

1. 错误代码演示

   <template>
           <ul>
               <li v-for="(p,index) in images2" :key="index">
                   {{p.pic}}
               </li>
               <li v-for="(p,index) in images" :key="index">
                   {{p.pic}}
               </li>
           </ul>
   </template>
   <script>
   import {onMounted,reactive,ref} from 'vue'
   import {postBanner} from '@/api/index'
   
   export default {
      setup() {
           let  images = ref([])
           let images2 = reactive([])
           
           onMounted(async()=>{
               getSwipeAPI()
           })
           function getSwipeAPI(){
               postBanner(1).then((res)=>{
                   images.value = res
                   images2 = res
               })
           }
           console.log(images2);
           console.log(images);
       return { images,images2 };
     },
   }
   </script>
   

   

   最开始的想法是通过赋值然后拿到数据，渲染到页面上，但是ref可以拿到数据，reactive拿不到数据

​

​ 然后我看了一下我的数据，是个对象类型的数据

​ 我们知道ref在存储对象类型的数据还是求助了reactive函数

​ 解决办法

1、push

        let images2 = reactive([])
         postBanner(1).then((res)=>{
                images2.push(res)
            })

2、对象赋值

        let images2 = reactive({
			list: []
		})
         postBanner(1).then((res)=>{
                images2.list = res
            })

这样就可以拿到值了