Vue3 基于组合式 API 使异步获取的数据对象具有响应性

Vue3 基于组合式 API 使异步获取的数据对象具有响应性

在 Vue 3 中，可以使用组合式 API 中的 ref 和 reactive 函数来使异步获取的数据具有响应性。

一、使用ref

首先，使用 ref 函数创建一个响应式的基本数据类型，例如字符串、数字或布尔值。然后，在异步获取数据的回调函数中，更新该 ref 对象的值。由于 ref 对象是响应式的，因此当数据发生变化时，组件会自动重新渲染。

例如，假设有一个异步获取数据的函数 fetchData()，获取到数据后，可以将其保存在一个 ref 对象中：

import { ref } from "vue";

export default {
  setup() {
    const data = ref(null);

    const fetchData = async () => {
      const response = await fetch("https://example.com/data");
      const result = await response.json();
      data.value = result;
    };

    fetchData();

    return {
      data,
    };
  },
};

在上面的例子中，使用 ref 函数创建了一个名为 data 的响应式对象，并将其初始值设置为 null。然后，在 fetchData 函数中，使用 fetch 函数异步获取数据，并将其保存在 data.value 中。由于 data 对象是响应式的，因此当其值发生变化时，组件会自动重新渲染。

二、使用reactive

除了 ref 函数之外，还可以使用 reactive 函数创建一个响应式的对象。例如，假设有一个异步获取数据的函数 fetchData()，获取到数据后，可以将其保存在一个 reactive 对象中：

import { reactive } from "vue";

export default {
  setup() {
    const data = reactive({
      value: null,
    });

    const fetchData = async () => {
      const response = await fetch("https://example.com/data");
      const result = await response.json();
      data.value = result;
    };

    fetchData();

    return {
      data,
    };
  },
};

在上面的例子中，使用 reactive 函数创建了一个名为 data 的响应式对象，并将其初始值设置为 { value: null }。然后，在 fetchData 函数中，使用 fetch 函数异步获取数据，并将其保存在 data.value 中。由于 data 对象是响应式的，因此当其值发生变化时，组件会自动重新渲染。

总之，使用组合式 API 中的 ref 和 reactive 函数可以很方便地使异步获取的数据具有响应性，从而实现数据的动态更新和自动重新渲染。