Vue Hooks中正确处理和展示异步数据的技巧
在Vue中使用Hooks处理异步数据并将其渲染到模板中，需要确保数据响应性的完整性。以下是如何避免常见错误并实现正确数据展示的方法。
问题示例：数据更新不生效
以下代码演示了一个常见问题：使用reactive创建响应式对象，但直接重新赋值导致Vue无法追踪数据变化，从而模板无法更新。
立即学习“前端免费学习笔记（深入）”；
// 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 }
}
解决方案：保持响应性
为了解决这个问题，我们应该避免直接重新赋值tabledata。可以使用以下两种方法：
方法一：使用reactive并更新其属性
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 }
}
方法二：使用ref
ref可以更直接地处理这种情况：
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 }
}
在组件中，使用tableData.value访问数据。
通过以上方法，我们确保了数据在异步操作后仍然保持响应性，从而在Vue模板中正确地展示更新后的数据。 选择reactive还是ref取决于你的数据结构和使用习惯，两者都能有效解决这个问题。 记住，关键在于避免直接替换响应式对象，而是更新其内部属性或使用.value来修改ref的值。
