vue中異步組件和動態組件的區別是什么

區別：1、動態組件是Vue中一個特殊的Html元素“<component>”，它擁有一個特殊的is屬性，屬性值可以是“已注冊組件的名稱”或“一個組件的選項對象”；而異步組件不是實物，是一個概念，一個可以讓組件異步加載的方式。2、動態組件用于不同組件之間進行動態切換；而異步組件用于性能優化，比如減小首屏加載時間、加載資源大小。

如何快速入門VUE3.0：進入學習

本教程操作環境：windows7系統、vue3版，DELL G3電腦。

異步組件

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

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

這種方式引入，MyComponent 在構建的過程中，會被同步打入頁面的bundle.js中

這個時候，在某些場景中，比如：

1、這個組件的體積很大

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

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

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

我們可以這么定義：

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

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

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

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

這個特殊的 require 語法將會告訴 webpack，自動將你的構建代碼切割成多個包，這些包會通過 Ajax 請求加載

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

當然，也可以局部注冊異步組件

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

動態組件

說到異步組件，很多人就會想到另一個類似的 動態組件，并且總是會弄混兩者的關系。

其實 動態組件 和 異步組件 完全不是一碼事！??！

直接上總結

動態組件：是Vue中一個特殊的Html元素：<component>，它擁有一個特殊的 is 屬性，屬性值可以是 已注冊組件的名稱 或 一個組件的選項對象，它是用于不同組件之間進行動態切換的。

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

（學習視頻分享：web前端入門、vue視頻教程）