vue3 异步给reactive赋值
时间: 2023-08-16 17:15:06 浏览: 86
在 Vue 3 中,你可以通过 `markRaw` 函数将异步获取的数据赋值给 `reactive` 对象。下面是一个示例代码:
```javascript
import { reactive, markRaw } from 'vue';
const data = reactive({
asyncValue: undefined,
});
// 异步获取数据
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
// 使用 markRaw 函数将异步获取的数据赋值给 reactive 对象
data.asyncValue = markRaw(result);
}
fetchData();
// 在组件中使用异步数据
<template>
<div>{{ data.asyncValue }}</div>
</template>
<script>
import { toRef } from 'vue';
export default {
setup() {
const data = toRef(window, 'data');
return {
data,
};
},
};
</script>
```
在上述代码中,我们使用 `reactive` 函数创建一个响应式对象 `data`,并将其初始化为 `{ asyncValue: undefined }`。然后,在 `fetchData` 函数中,我们使用 `markRaw` 函数将异步获取的数据赋值给 `data.asyncValue`。最后,在组件中使用 `toRef` 函数将 `data` 对象转换成一个引用类型,以便在模板中使用。
需要注意的是,使用 `markRaw` 函数将数据标记为非响应式,这意味着它不会触发组件的重新渲染。如果你希望异步数据变化时触发组件的重新渲染,可以考虑使用 `ref` 或 `reactive` 函数来包装异步数据。