嵌套组件页面渲染完了还请求不到数据

Posted 2023-05-01

参考技术A 在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。
如何解决？
使用 v-if
根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。

vue先加载数据再渲染

参考技术A title: vue先加载数据再渲染
date: 2021-05-05 01:41:59

vue 使用中 bug 记录。

版本： vue 3.0

由于 JavaScript 中请求通常是异步，因此几乎无法实现先加载数据再渲染页面。

但是，我们可以用 v-if 判断数据是否已加载，来实现加载完数据再渲染的效果。

比如，有如下数据，需要请求后端获取：

在页面中，我们可能如此使用：

由于渲染通常快于数据请求，则可能报如下错误：

不过可能无伤大雅（页面最终能展现）。

但如果如此使用（传入组件）：

则可能报如下错误，甚至页面无法显示：

直接使用 v-if 全部解决：