區(qū)別：1、動(dòng)態(tài)組件是Vue中一個(gè)特殊的Html元素“<component>”，它擁有一個(gè)特殊的is屬性，屬性值可以是“已注冊組件的名稱”或“一個(gè)組件的選項(xiàng)對象”；而異步組件不是實(shí)物，是一個(gè)概念，一個(gè)可以讓組件異步加載的方式。2、動(dòng)態(tài)組件用于不同組件之間進(jìn)行動(dòng)態(tài)切換；而異步組件用于性能優(yōu)化，比如減小首屏加載時(shí)間、加載資源大小。

如何快速入門VUE3.0：進(jìn)入學(xué)習(xí)

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

異步組件

在一些大型的Vue應(yīng)用中，不管是為了代碼的抽離，還是邏輯的劃分，不可避免的會(huì)將應(yīng)用分割成一些很小的代碼塊，形成我們意識上的組件，在需要的地方可以進(jìn)行 import 引入，例如下面：

    import MyComponent from '../components/my-component.vue'      new Vue({         // ...         components: {MyComponent}     })

這種方式引入，MyComponent 在構(gòu)建的過程中，會(huì)被同步打入頁面的bundle.js中

這個(gè)時(shí)候，在某些場景中，比如：

1、這個(gè)組件的體積很大

2、它不是頁面一開始就需要的

那么我們在構(gòu)建的過程中，就將組件代碼打入頁面js中，顯然是不合適的

Vue提供了一種異步組件的概念：只在需要的時(shí)候才從服務(wù)器加載

我們可以這么定義：

    Vue.component('async-example', function (resolve, reject) {         setTimeout(function () {             // 向 `resolve` 回調(diào)傳遞組件定義             resolve({                 template: '<div>I am async!</div>'             })         }, 1000)     })

上面的例子，采用 setTimeout 模擬異步獲取組件，真實(shí)情況，甚至可以通過ajax請求組件編譯之后的template，然后調(diào)用 resolve 方法；如果加載失敗，可以調(diào)用 reject 方法

大部分情況下，我們的組件都是單獨(dú)分割成一個(gè) .vue 文件，那么我們可以這么做：

    Vue.component('async-webpack-example', function (resolve) {         require(['./my-async-component'], resolve)     })

這個(gè)特殊的 require 語法將會(huì)告訴 webpack，自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包，這些包會(huì)通過 Ajax 請求加載

那么如果你的頁面沒有用到這個(gè)組件，自然就不會(huì)請求組件的js包

當(dāng)然，也可以局部注冊異步組件

    new Vue({     // ...         components: {             'my-component': () => import('./my-async-component')         }     })

動(dòng)態(tài)組件

說到異步組件，很多人就會(huì)想到另一個(gè)類似的 動(dòng)態(tài)組件，并且總是會(huì)弄混兩者的關(guān)系。

其實(shí) 動(dòng)態(tài)組件 和 異步組件 完全不是一碼事?。?！

直接上總結(jié)

動(dòng)態(tài)組件：是Vue中一個(gè)特殊的Html元素：<component>，它擁有一個(gè)特殊的 is 屬性，屬性值可以是 已注冊組件的名稱 或 一個(gè)組件的選項(xiàng)對象，它是用于不同組件之間進(jìn)行動(dòng)態(tài)切換的。

異步組件：簡單來說是一個(gè)概念，一個(gè)可以讓組件異步加載的方式；它一般會(huì)用于性能優(yōu)化，比如減小首屏加載時(shí)間、加載資源大小。

（學(xué)習(xí)視頻分享：web前端入門、vue視頻教程）