【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を使用する場合は、主に具体的なニーズを見て、対応する方法を選択します.