Vue3顶层使用await获取ref数据无法渲染HTML内容的解决办法

你的问题核心不是异步获取的逻辑有问题，而是Vue默认会把插值语法{{ }}里的内容转义成纯文本——不管是不是异步获取的HTML字符串，都会被当成普通文本展示。要渲染HTML内容，必须使用v-html指令。

修改后的完整代码如下：

<template>
    <div>
      <div v-if="loading">Loading...</div>
      <div v-else v-html="data"></div>
    </div>
</template>
  
<script setup>
  import { ref } from 'vue';
  const data = ref(null);
  const loading = ref(true);
  async function fetchData() {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log("333");
        data.value = '<p>HTML</p>';

    loading.value = false;
  }
await fetchData();
</script>

关键调整说明：

• 用v-html="data"替换原有的{{ data.value }}，v-html会将绑定的字符串当作HTML解析并渲染到DOM中
• 模板里直接写data即可，无需加.value——Vue在模板中会自动为ref类型做解包处理
• 异步获取的逻辑完全保留即可，顶层await本身没有问题，之前的渲染失败只是因为用错了展示方式

内容的提问来源于stack exchange，提问作者Vzz1c Demo