19.0 vue3 ref,reactive请求后的赋值问题以及解决方法
上一篇:18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应,在赋值的过程中,使用了错误的做法,导致一直失败错误示范:无论是使用ref声明的数组还是使用reactive声明的数组,此种写法都是错误的<template><d
·
上一篇:
18.0 vue3 Vue Router的使用(1)_十一月的萧邦-CSDN博客
开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应,在赋值的过程中,使用了错误的做法,导致一直失败
错误示范:无论是使用ref声明的数组还是使用reactive声明的数组,此种写法都是错误的
<template>
<div>
list:{{ list }}
</div>
</template>
<script>
import {ref, reactive, toRefs} from "vue";
export default {
name: "Test",
setup() {
let list = ref([])
getList()
async function getList() {
list = await httpGetList()
}
//
// let list = reactive([])
// getList()
//
// async function getList() {
// list = await httpGetList()
// }
function httpGetList() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3, 4, 5])
}, 500)
})
}
return {
list
}
}
}
</script>
正确写法:
方法1
let list1 = ref([])
getList1()
async function getList1() {
list1.value = await httpGetList()
}
方法2
let list2 = reactive([])
getList2()
async function getList2() {
let resp = await httpGetList()
list2.push(...resp)
}
方法3
let data = reactive({
list3: []
})
getList3()
async function getList3() {
data.list3 = await httpGetList()
}
个人比较推荐 方法3或者方法1,优先使用方法3 ,对于对象也是一样的操作哦!
完整代码
<template>
<div>
list:{{ list }}
</div>
<div>
list1:{{ list1 }}
</div>
<div>
list2:{{ list2 }}
</div>
<div>
list3:{{ list3 }}
</div>
</template>
<script>
import {ref, reactive, toRefs} from "vue";
export default {
name: "Test",
setup() {
// let list = ref([])
// getList()
//
// async function getList() {
// list = await httpGetList()
// }
//
let list = reactive([])
getList()
async function getList() {
list = await httpGetList()
}
let list1 = ref([])
getList1()
async function getList1() {
list1.value = await httpGetList()
}
let list2 = reactive([])
getList2()
async function getList2() {
let resp = await httpGetList()
list2.push(...resp)
}
///
let data = reactive({
list3: []
})
getList3()
async function getList3() {
data.list3 = await httpGetList()
}
function httpGetList() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3, 4, 5])
}, 500)
})
}
return {
list,
list1,
list2,
...toRefs(data)
}
}
}
</script>
<style scoped>
</style>
下一篇:
更多推荐
已为社区贡献17条内容
所有评论(0)