关于VUE3的数据

接口请求出来的数据一般为对象类型的

这里有三种方法存储数据：

1. ref

2. reactive([])不太推荐

3. reactive（[]）嵌套一个对象去存储，推荐

1、ref

<template>

<van-swipe :autoplay="3000"lazy-render>

<van-swipe-itemv-for="(image,index) in images" :key="index">

<img :src="image.pic"/>

</van-swipe-item>

</van-swipe>

</template>

<script>

import{onMounted,reactive,ref} from 'vue'

import{postBanner} from '@/api/index'

export default {

setup() {

let images = ref([])

onMounted(async()=>{

getSwipeAPI()

})

async function getSwipeAPI(){

images.value = await postBanner(1)

}

console.log(images);

return { images };

},

}

</script>

2、reactive([]) 通过push存储，不推荐

<template>

<divv-for="(image,index1) in images3" :key="index1">

<van-swipe :autoplay="3000"lazy-render>

<van-swipe-itemv-for="(i,index) in image" :key="index">

<img :src="i" />

</van-swipe-item>

</van-swipe>

</div>

</template>

<script>

import{onMounted,reactive,ref} from 'vue'

import {postBanner}from '@/api/index'

export default {

setup() {

let images3 = reactive([])

onMounted(async()=>{

getSwipeAPI()

})

async function getSwipeAPI(){

let x = await postBanner(1)

x = x.map(v=>v.pic)

images3.push(x)

}

console.log(images3);

return {images3};

},

}

</script>

3、reactive（[]）嵌套对象

<template>

<van-swipe :autoplay="3000"lazy-render>

<van-swipe-itemv-for="(image,index) in images2.list" :key="index">

<img :src="image.pic"/>

</van-swipe-item>

</van-swipe>

</template>

<script>

import{onMounted,reactive,ref} from 'vue'

import{postBanner} from '@/api/index'

export default {

setup() {

let images2 = reactive({

list:[]

})

onMounted(async()=>{

getSwipeAPI()

})

async function getSwipeAPI(){

images2.list = await postBanner(1)

}

return {images2};

},

}

</script>

推荐使用reactive()