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

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>

20.0 vue3 vue-router路由跳转，参数的传递与接收（请求操作）_十一月的萧邦-CSDN博客

19.0 vue3 ref，reactive请求后的赋值问题以及解决方法相关推荐

vue3 ref，reactive请求后的赋值问题以及解决方法
vue3 ref,reactive请求后的赋值问题以及解决方法开发的过程中,我们一定会进行接口的对接,将响应的结果赋值给我们页面上需要展示或者操作的变量,在vue3中,我们可能会稍微的有点不适应 ...
服务器启动成功网页无法访问,apache启动后无法访问网页的解决方法
apache启动后无法访问网页的解决方法发布时间:2021-01-27 11:31:08 来源:亿速云阅读:146 作者:小新小编给大家分享一下apache启动后无法访问网页的解决方法,希望大家 ...
idea创建web项目运行报404错误_IDEA JavaWeb项目启动运行后出现404错误的解决方法...
404这个错误真的是一言难尽!不过大多是配置文件出错,认真修改还是可以的 1.web.xml配置错误: 默认首页没有写的,在web.xml添加一个就行(前提是你有jsp页面,名字不要写错): 比如这个 ...
所有服务器显示不兼容,魔兽世界6.0服务器显示不兼容怎么办服务器显示不兼容解决方法介绍...
今天小编为大家带来了魔兽世界6.0服务器显示不兼容怎么办服务器显示不兼容解决方法介绍,感兴趣的朋友们可以跟着小编去下文了解一下哦! <魔兽世界>6.0版本游戏"德拉诺之王&qu ...
hp打印机无法与计算机,电脑中安装HP打印机后重启无法打印的解决方法
电脑中安装HP打印机后重启无法打印怎么办?近来不少朋友都向小编咨询了这个问题.HP有一个型号重启以后无法打印,今天系统城小编就要在这里给大家介绍一个方法可以解决这个问题. 具体方法如下: 1.这是第一 ...
@Data注解使用后get set报错解决方法
@Data注解使用后get set报错解决方法参考文章: (1)@Data注解使用后get set报错解决方法 (2)https://www.cnblogs.com/lijinshan950823/ ...
宝塔控制面板创建ftp后链接不上的解决方法
宝塔控制面板创建ftp后链接不上的解决方法参考文章: (1)宝塔控制面板创建ftp后链接不上的解决方法 (2)https://www.cnblogs.com/cncom/p/10772078.htm ...
SQLServer 数据库变成单个用户后无法访问问题的解决方法
SQLServer 数据库变成单个用户后无法访问问题的解决方法参考文章: (1)SQLServer 数据库变成单个用户后无法访问问题的解决方法 (2)https://www.cnblogs.com/ ...
$.ajax返回的JSON格式的数据后无法执行success的解决方法
$.ajax返回的JSON格式的数据后无法执行success的解决方法参考文章: (1)$.ajax返回的JSON格式的数据后无法执行success的解决方法 (2)https://www.cnbl ...

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

19.0 vue3 ref，reactive请求后的赋值问题以及解决方法相关推荐

最新文章

热门文章