區別：1、動態元件是Vue中一個特殊的Html元素“
”，它擁有一個特殊的is屬性，屬性值可以是“已註冊元件的名稱”或“一個元件的選項物件」；而異步元件不是實物，是一個概念，一個可以讓元件非同步載入的方式。 2.動態元件用於不同元件之間進行動態切換；而異步元件用於效能最佳化，例如減少首屏載入時間、載入資源大小。
本教學操作環境：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元素：
以上是vue中非同步元件和動態元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
