vue中異步組件和動態組件的區別有哪些

本篇內容主要講解“vue中異步組件和動態組件的區別有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue中異步組件和動態組件的區別有哪些”吧!

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

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

到此，相信大家對“vue中異步組件和動態組件的區別有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！