Vue 3 中 Promise 函数内数据实时更新解决方案

在 Vue 3 中，可以使用 'reactive' 函数将一个对象转换为响应式对象，以便在 Promise 函数中实时更新数据。

以下是一个示例代码：

import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      message: ''
    });

    const fetchData = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          data.message = 'Data has been updated'; // 修改数据
          resolve();
        }, 1000);
      });
    };

    const handleClick = () => {
      fetchData().then(() => {
        console.log(data.message); // 实时更新的数据
      });
    };

    return {
      data,
      handleClick
    };
  }
}

在上面的代码中，通过 'reactive' 函数将 'data' 对象转换为响应式对象，然后在 'fetchData' 函数中修改 'data.message' 的值。当 'fetchData' 函数被调用后，'data.message' 会实时更新，并且在 'handleClick' 函数中可以获取到最新的值。

这样，就可以在 Promise 函数中实时更新数据了。