【vue】地图显示缓慢问题

【vue】地图显示缓慢问题

最近写代码，又掉进了css运用不熟练的坑里。我的需求是，针对tabs不同的标签页，点击某个tab页时才将隐藏的元素显示出来。一开始先去element-UI官网中查询了，tabs的事件用法。
我把官网示例简单化一下

<el-tabs @tab-click="handleClick">
  <el-tab-pane label="用户基本信息" name="1">用户基本信息</el-tab-pane>
  <el-tab-pane label="用户其他信息" name="2">用户其他信息</el-tab-pane>
  <el-tab-pane label="地理显示" name="3">地理显示</el-tab-pane>
</el-tabs>
//调用，写在methods里面
methods: {
  handleClick(tab, event) {
    console.log(tab, event);
  }
}

在实际调用中，通过name对其进行分类。
我想要在用户其他信息不显示地图模块，在地理显示才显示。
一开始我用的是

display: none;//隐藏
此元素不会被显示。
display: block;//显示
此元素将显示为块级元素，此元素前后会带有换行符(可能正是这个原因导致了地图加载缓慢)
显隐是实现了，但是地图的反应十分缓慢，甚至要等5、6分钟的样子。

后来我发现了一个平常我没怎么用过的属性，即visibility

visibility：hidden//隐藏
提示：即使不可见的元素也会占据页面上的空间。
这就可以保证地图从一开始进页面就开始加载。

display和visibility的区别

简单粗暴的说法：
display:none;//不占据空间，直接就没了。
visibility:hidden;//占据空间，加载了，只是在视觉上看不到

所以，最后采用了visibility:hidden，只有在地里显示的时候，才将元素可见，即visibility：visible；这样地图就可以正常的显示了。

handleClick(tab, event) {
	console.log(tab, event);
	if(tab.name == 1){
		showdiv.style.visibility = "hidden";
	}
	if (tab.name == 2) {
		//此处也可调用别的方法
		showdiv.style.visibility = "hidden";
	}
	if (tab.name == 3) {
		//此处也可调用别的方法
		showdiv.style.visibility = "visible";
	}
},

最后，display和visibility使用时主要还是看具体的需求，选择对应的方式。