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

目前創(chuàng)新互聯(lián)建站已為上千余家的企業(yè)提供了網(wǎng)站建設、域名、雅安服務器托管、網(wǎng)站托管運營、企業(yè)網(wǎng)站設計、恒山網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

本教程操作環(huán)境：windows7系統(tǒng)、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` 回調(diào)傳遞組件定義
            resolve({
                template: '
I am async!
'
            })
        }, 1000)
    })

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

動態(tài)組件

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

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

直接上總結(jié)

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

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

到此，相信大家對“vue中異步組件和動態(tài)組件的區(qū)別有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！