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

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

碧海醫心

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

原创

490人浏览过

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

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

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

问题示例：

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

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

<code class="javascript">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 };
}</code>

登录后复制

组件中：

<code class="vue"><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></code>

登录后复制

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

原因：