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博客