Vue Hooks中如何正确返回并展示异步获取的数据？-js教程-PHP中文网

Vue Hooks中如何正确返回并展示异步获取的数据？

DDD

发布： 2025-02-24 13:48:10

原创

304人浏览过

vue hooks中如何正确返回并展示异步获取的数据？

Vue Hooks中正确处理和展示异步数据的技巧

在Vue中使用Hooks处理异步数据并将其渲染到模板中，需要确保数据响应性的完整性。以下是如何避免常见错误并实现正确数据展示的方法。

问题示例：数据更新不生效

以下代码演示了一个常见问题：使用reactive创建响应式对象，但直接重新赋值导致Vue无法追踪数据变化，从而模板无法更新。

立即学习“前端免费学习笔记（深入）”；

<code class="javascript">// hooks
import { reactive } from 'vue'
import axios from 'axios'
export default function () {
  let tabledata = reactive({}) // 初始为空对象

  const getdata = async () => {
    const res = await axios.get('https://cnodejs.org/api/v1/topics')
    tabledata = res.data.data // 直接重新赋值，破坏响应性
    console.log('tabledata', tabledata)
  }

  return { tabledata, getdata }
}</code>

登录后复制

解决方案：保持响应性

为了解决这个问题，我们应该避免直接重新赋值tabledata。可以使用以下两种方法：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

方法一：使用reactive并更新其属性

<code class="javascript">import { reactive } from 'vue'
import axios from 'axios'
export default function () {
  let tabledata = reactive({ data: [] }) // 使用对象，更新其属性

  const getdata = async () => {
    const res = await axios.get('https://cnodejs.org/api/v1/topics')
    tabledata.data = res.data.data // 更新对象的属性
    console.log('tabledata', tabledata)
  }

  return { tabledata, getdata }
}</code>

登录后复制

方法二：使用ref

ref可以更直接地处理这种情况：

<code class="javascript">import { ref } from 'vue'
import axios from 'axios'
export default function () {
  let tableData = ref([]) // 使用ref

  const getData = async () => {
    const res = await axios.get('https://cnodejs.org/api/v1/topics')
    tableData.value = res.data.data // 使用.value赋值
    console.log('tableData', tableData)
  }

  return { tableData, getData }
}</code>

登录后复制

在组件中，使用tableData.value访问数据。

通过以上方法，我们确保了数据在异步操作后仍然保持响应性，从而在Vue模板中正确地展示更新后的数据。选择reactive还是ref取决于你的数据结构和使用习惯，两者都能有效解决这个问题。记住，关键在于避免直接替换响应式对象，而是更新其内部属性或使用.value来修改ref的值。

以上就是Vue Hooks中如何正确返回并展示异步获取的数据？的详细内容，更多请关注php中文网其它相关文章！