Vue3 + TypeScript Promise<string> 转 string 类型错误解析与异步处理

3. 使用 .then()

在非 async 函数中，可以使用 .then() 处理 Promise 结果。

const promiseString: Promise<string> = fetchSomeString();
promiseString.then((resolvedString: string) => {
  // 在这里使用 resolvedString
});

异步和同步在 Vue 3 中的处理

在 Vue 3 中，同步（Synchronous） 和 异步（Asynchronous） 操作的处理方式有所不同，尤其是在 响应式数据更新、生命周期钩子 和 Composition API 中。

1. 同步（Synchronous）操作

同步代码会立即执行，不会等待其他任务完成。Vue 3 的响应式系统会同步更新数据，但 DOM 更新可能是异步的。

示例：同步数据更新

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++; // 同步更新
  console.log(count.value); // 立即输出新值
}

• count.value 的变化是同步的，但 Vue 的 DOM 更新可能是异步的（为了优化性能）。

2. 异步（Asynchronous）操作

异步操作不会阻塞代码执行，常见的异步场景包括：

• setTimeout / setInterval
• Promise / async/await
• API 请求（如 fetch、axios）

示例 1：setTimeout

function delayedIncrement() {
  setTimeout(() => {
    count.value++; // 异步更新
    console.log(count.value); // 1 秒后输出
  }, 1000);
}

示例 2：async/await

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  count.value = data.value; // 异步更新
}

3. Vue 3 的异步更新机制

Vue 的 DOM 更新是异步的，这意味着：

• 即使你同步修改了 ref 或 reactive 数据，DOM 不会立即更新。
• Vue 会批量处理更新以提高性能。

如何等待 DOM 更新？

使用 nextTick：

import { nextTick } from 'vue';

async function updateAndLog() {
  count.value++;
  console.log('同步数据:', count.value); // 数据已变
  
  await nextTick();
  console.log('DOM 已更新'); // 现在可以获取更新后的 DOM
}

4. 生命周期钩子中的异步

Vue 3 的生命周期钩子（如 onMounted）可以包含异步操作：

import { onMounted } from 'vue';

onMounted(async () => {
  const data = await fetchData(); // 异步获取数据
  count.value = data.value;
});

5. 总结

最佳实践

• 同步操作：直接修改 ref 或 reactive。
• 异步操作：使用 async/await 或 then，结合 nextTick 确保 DOM 更新。
• 避免直接依赖 DOM：用 nextTick 确保 DOM 已渲染。

这样能更好地管理 Vue 3 中的同步和异步逻辑！