vue3.0在半年前，就有利用平台尝试过一波。为什么优先考虑平台尝试，主要原因是因为使用ant的api，已有的api使用代码对于页面规范以及代码规范起到一个模板作用，而且具有一定的参考价值。以便于更好的入门。当时vite也是一个大热门，于是就一起照猫画虎的都用上了。后来果然还是半路夭折了，原因很简单，当时vue3.0还属于在社区范畴，遇到的一些问题在网上找不到对应的解决方法，才疏学浅，无法知晓原因（其中记得有一个报错注释了源码才清掉），加上当时自己的业务组遇上很多需求，于是搁浅了很久。
前言：
于是，现在操手重新试一下，不过之前得平台还是在试手的时候不够灵活。想想现在已经慢慢开始普及vue3.0，平常有自己封装自己使用H5模板的习惯，开发项目的时候直接套用，合心应手。于是这次就开始封装自己常用的H5-vue3.0模版。
fine。言归正传，现在回到开头我们看到的这个问题。 =>vue3.0页面显示空白的问题处理:
此时的代码背景有：
- 路由
- 接口请求
- vite编译
看一下主页代码home.vue：
代码语言：javascript复制<template>
<div>
1234679
{{ res }}
</div>
</template>
复制代码测试接口请求代码：
代码语言：javascript复制import { defineComponent } from "vue";
import homeApi from "../api/index.js";
export default defineComponent({
async setup() {
const params = {
id: "2313a6b2a89d4b11a1d16dee2047663a",
};
const res = await homeApi.testApi(params.id);
console.log(res);
return {
res
};
},
});
复制代码fine。此时页面上无任何信息，是一个空白页。但是接口请求是可以的。
来找一下原因：
1.首先查看路由，跳转的是正确的页面，说明不是路由的问题。
2.把js代码注释：页面上出现 123456789 ，及说明页面渲染没问题，那就是接口的问题了。
但是接口此时已经打印出了内容，但是没有渲染问题。说明是接口请求的时机不对。接口是使用了 async/await 来请求接口的，说明在异步的时候与渲染的函数时机不对。查看一下最新的3.0文档,里面的有一个介绍 suspense 的使用介绍
第一种解决方法:使用suspense 包裹你的组件
果然还是使用时机的问题：大多数组合式 API 函数只会在第一个 await 之前工作，它隐性地包裹在一个 Promise 内，因为我们此时所用的函数是async的，所以这其实也是在说明笼统的使用这个方法是不好的
处理方法：使用suspense 包裹你的组件
在app.vue里
代码语言：javascript复制<div>
<suspense>
<router-view></router-view>
</suspense>
</div>
复制代码使用vite，页面刷新很快，页面出现内容：
渲染也可以，说明渲染成功。
第二种解决方法：函数式处理
其实，现在我们想了想，上面会出这种渲染错误的原因，主要是：大多数组合式 API 函数只会在第一个 await 之前工作。那我们如果直接使用函数处理其实不也是可以直接解决。
<script>
import { defineComponent, toRefs, reactive } from "vue";
import homeApi from "../api/index.js";
export default defineComponent({
setup() {
let testData = reactive({
res: {},
});
const params = {
id: "2313a6b2a89d4b11a1d16dee2047663a",
};
const getTestData = async () => {
const res = await homeApi.testApi(params.id);
testData.res = res;
console.log(testData);
};
getTestData();
return {
...toRefs(testData),
};
},
});
</script>
复制代码页面出现内容，正常。
此时想到之前在社区里面看到的现在的有关于vue3.0的语法糖，刚好可以测试一下。
第三种解决方法：结合第二种使用vue3.0语法糖
代码语言：javascript复制<script setup>
import { ref } from "vue";
import homeApi from "../api/index.js";
let testData = ref({});
const params = {
id: "2313a6b2a89d4b11a1d16dee2047663a",
};
const getTestData = async () => {
const res = await homeApi.testApi(params.id);
testData.value = res;
};
getTestData();
</script>
复制代码页面正常。
