vue开发中，数据还没获取，页面已经渲染，导致页面没有数据

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

22552人浏览 · 2021-12-28 09:58:36

· 2021-12-28 09:58:36 发布

在使用vue的时候，经常会遇到这种问题：异步请求，或者是通过组件传值获取数据时，部分页面会在数据获取之前就渲染，导致数据加载不出来。

如何解决？

使用 v-if
根据需求,可以在vue生命周期beforeCreate，created的时候就调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，可以最大程度上避免页面跳动的问题。由于渲染和请求是异步的，我们可以等到数据请求回来之后，再把页面放出来。

上代码

<h4 v-if="isShow">{{ data }}</h4>

<script>
 data: function () {
 	data: {},
 	// 不显示数据
 	isShow:false
 },
 created() {
   	this.getData();
 },
 methods:{
 	async getData(){
 		let data = await axios.get('/url')
 		this.data = data
 		// 显示数据
 		this.isShow = true
 	}
 }
</script>