Vue hooks中如何正确地将异步数据渲染到模板？-js教程-PHP中文网

Vue hooks中如何正确地将异步数据渲染到模板？

碧海醫心

发布： 2025-02-24 21:34:10

原创

445人浏览过

vue hooks中如何正确地将异步数据渲染到模板？

Vue Hooks：正确渲染异步数据到模板

在Vue Hooks中，将异步数据渲染到模板经常会遇到数据更新后视图未更新的问题。本文将分析原因并提供解决方案。

问题示例：

假设我们使用axios获取数据，并用响应式变量tableData存储：

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

import { reactive, ref } from 'vue';
import axios from 'axios';

export function useTableData() {
  // 方法一：使用ref
  const tableData = ref([]); 

  // 方法二：使用reactive (改进版)
  // const tableData = reactive({ data: [] });

  const getData = async () => {
    const res = await axios.get('https://example.com/api/data');
    // 方法一：
    tableData.value = res.data; 
    // 方法二：
    // tableData.data = res.data;
  };

  return { tableData, getData };
}

登录后复制

组件中：

<template>
  <ul>
    <li v-for="item in tableData" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
import { onMounted } from 'vue';
import { useTableData } from './hooks/useTableData';

export default {
  setup() {
    const { tableData, getData } = useTableData();
    onMounted(async () => {
      await getData();
    });
    return { tableData };
  },
};
</script>

登录后复制

问题： 数据获取成功，但模板未更新。

原因：

直接用tabledata = res.data替换了tableData的引用，Vue无法追踪到变化。

解决方案：

方法一：使用ref

ref创建的响应式变量，通过修改.value属性来更新值，Vue可以正确追踪变化。 (如上例所示)

方法二：使用reactive (改进版)

如果坚持使用reactive，需要创建一个包含数据的对象，然后修改对象的属性： (如上例注释所示) 这比直接用reactive([])更清晰，避免了潜在的混淆。

关键点： 避免直接替换响应式变量的引用，始终通过修改其属性来更新数据。选择ref或reactive取决于你的数据结构和个人偏好，但务必正确地更新响应式数据。

以上就是Vue hooks中如何正确地将异步数据渲染到模板？的详细内容，更多请关注php中文网其它相关文章！