vue中非同步元件和動態元件的差別是什麼

區別：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元素：

###它擁有一個特殊的###is### 屬性，屬性值可以是###已註冊元件的名稱### 或###一個元件的選項物件###，它是用於不同元件之間進行動態切換的。 #########非同步元件###：簡單來說就是一個概念，一個可以讓元件非同步載入的方式；它一般會用於效能最佳化，例如減少首屏載入時間、載入資源大小。 ######（學習影片分享：###web前端入門###、###vue影片教學###）###

以上是vue中非同步元件和動態元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！