非同步元件：
vue的一種效能優化的方法，可以實現元件的按需載入

元件通過import函式引用，什麼時候需要什麼時候載入

有利於專案的效能優化，提高頁面的載入速度

路由懶載入就是使用了非同步元件的原理

規則：使用import引入
components: {
IsAsyncDemo: () => import(‘./IsAsyncD.vue’)
},

ex：點選按鈕才載入元件

在非同步載入的過程中可能會出現以下錯誤：

報錯：Syntax Error: Unexpected token (10:25)

解決辦法：
1.安裝babel 動態匯入外掛：npm install --save-dev babel-plugin-syntax-dynamic-impor
2.在.babelrc中配置使用此外掛

{ “presets”: [“env”], “plugins”: [“syntax-dynamic-import”] }

動態元件
讓多個元件同使用一個掛載點，並且元件間可以動態切換，這個掛載點就是 component 標籤
簡單來說是在 component 標籤上新增一個is屬性，屬性值（即currentTabComponent）是控制組件間的切換的
可配合keep-alive使用，這樣切換的時候就可以不用頻繁渲染
1.keep-alive是vue的內建元件，可以包含動態元件，當元件之間進行切換時，可以保持元件的狀態，在記憶體中快取不活動元件的例項，而不是銷燬它們）
2.並且自身也不會渲染成一個DOM元素，不會顯示在父元件鏈中
規則1. 語法:is=‘compoent-name’ 動態對應 data 中對應的元件值

template:

<component :is=“DynamicName”/> // 動態的對應是 data 的值

引入動態子元件

import Dynamic from ‘./Dynamic.vue’

在components中宣告

components: {
Dynamic,
}

在data中定義

data(){
return {
DynamicName: ‘Dynamic’, // 這裡DynamicName 的屬性名必須是引入元件名Dynamic
}
}
如果是用在keep-alive中

ex2：可切換、迴圈動態引入 - 動態載入圖片、視訊、文字等元件

取迴圈中專案的值，對應子元件名字