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

最新推荐文章于 2025-10-10 09:12:42 发布

原创最新推荐文章于 2025-10-10 09:12:42 发布 · 1.2w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue报错专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在Vue3中如何正确使用ref和reactive进行接口数据赋值的问题，重点介绍了对象类型数据处理的两种方法：push操作和属性直接赋值，并提供了实例和解决策略。

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

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

错误代码演示

<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拿不到数据

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

121321321dsaf

我们知道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
            })

这样就可以拿到值了