動態組件 & 非同步組件

切換組件保持組件的原狀態

1.使用 is 進行組件的切換顯示

<component v-bind:is="currentTabComponent"></component>

這樣是重新創建了組件 如果要保持組件的狀態，比如打開的菜單欄還是保持展開的 ，就可以這樣

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

非同步組件

1.定義
就是組件在定義的時候什麼都不做，只是在需要組件的時候進行載入，第一次載入完成後，進行緩存，下次訪問直接用
2.實現按需載入
Vue實現按需載入，官方推薦使用結合webpack的代碼分割功能進行。定義為非同步載入的組件，在打包的時候，會打包成單獨的js文件存儲在static/js文件夾裡面，在調用時使用ajax請求回來插入到html中。
簡單例子實現：

<template>
	<button @click="show">展示載入子組件</button>
	<div v-if="ifshow">
		<p>展示組件</p>
		 <child></child>
	</div>
</template>
<script>
export default {
 components: {
   	'child': function(resolve) { require(['./components/child.vue'], resolve);
  }
  data(){
        return {
         ifshow:false
        }
  },
  methods: {
        showchild:function(){
           this.show=true;
         }
  },

</script>

child.vue是非同步組件，所以會先ajax獲取組件然後渲染
參考其他人的 https://blog.csdn.net/weixin_36094484/article/details/74555017

具體使用 感覺還待考證 這裡只是明白相應的作用，明確簡單的案例使用，在項目使用的是時候還得繼續補充其相關的作用