Vue 3 中如何处理异步更新 `ref` 的值？

在 Vue 3 中，由于默认采用的是 Composition API，对于异步修改 `ref` 的值，可以直接在 Promise 回调或者 async/await 函数中更新，但是为了确保 UI 能在下一次渲染时立即反映出新的值，你可以使用 `reactive` 或者 `ref` 的 `.value` 属性结合 `nextTick`。

1. 如果是在一个函数返回 Promise 中更新：

import { ref, nextTick } from 'vue';

const myAsyncValue = ref(null);

async function fetchNewValue() {
  const newValue = await someAsyncCall();
  myAsyncValue.value = newValue;
}

fetchNewValue().then(() => {
  nextTick(() => {
    // 这里保证在下一次 DOM 渲染时，myAsyncValue 已经被更新
  });
});

2. 或者在 `async` 函数内部直接修改并使用 `nextTick`：

async function updateMyValue() {
  const newValue = await someAsyncCall();
  myAsyncValue.value = newValue;
  await nextTick(); // 等待下次更新周期结束后再渲染
}

这里，`nextTick` 会在当前事件循环结束后的下一个tick执行，确保视图能够接收到最新的数据更新。