Vue Hook 异步数据处理与视图更新

本文探讨如何在 Vue Hook 中有效处理异步数据并更新视图。 常见的错误在于直接修改响应式变量的引用，导致视图无法更新。

问题描述：

如何确保在 Vue Hook 中获取的异步数据正确地更新视图？

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

代码示例及问题分析：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

以下代码演示了常见的错误：异步数据获取后，直接用新数据覆盖了响应式变量 tabledata，导致 Vue 无法追踪到变化。

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

<code class="vue"><template>
  <el-table :data="tabledata" style="width: 100%">
    <el-table-column label="id" prop="id" width="180"></el-table-column>
    <el-table-column label="标题" prop="title" width="180"></el-table-column>
    <el-table-column label="create_at" prop="create_at"></el-table-column>
  </el-table>
</template>

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

export default {
  setup() {
    const { tabledata, getdata } = usetable()
    onMounted(async () => {
      await getdata()
    })
    return { tabledata }
  }
}
</script></code>

解决方案：

为了正确更新视图，我们需要确保 Vue 能够追踪到响应式变量的变化。 以下两种方法可以解决这个问题：

方法一： 使用 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 对象更新数据

<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 // 正确：更新ref.value
    console.log('tableData', tableData)
  }

  return { tableData, getData }
}</code>

在 Vue 模板中，使用 tableData.data (方法一) 或 tableData (方法二) 绑定到 el-table 组件的 :data 属性。 这两种方法都能确保 Vue 能够正确地追踪数据变化并更新视图。 选择哪种方法取决于你的代码风格和项目需求。