亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    vue中異步組件和動(dòng)態(tài)組件的區(qū)別是什么

    區(qū)別:1、動(dòng)態(tài)組件是Vue中一個(gè)特殊的Html元素“<component>”,它擁有一個(gè)特殊的is屬性,屬性值可以是“已注冊(cè)組件的名稱(chēng)”或“一個(gè)組件的選項(xiàng)對(duì)象”;而異步組件不是實(shí)物,是一個(gè)概念,一個(gè)可以讓組件異步加載的方式。2、動(dòng)態(tài)組件用于不同組件之間進(jìn)行動(dòng)態(tài)切換;而異步組件用于性能優(yōu)化,比如減小首屏加載時(shí)間、加載資源大小。

    vue中異步組件和動(dòng)態(tài)組件的區(qū)別是什么

    如何快速入門(mén)VUE3.0:進(jìn)入學(xué)習(xí)

    本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。

    異步組件

    在一些大型的Vue應(yīng)用中,不管是為了代碼的抽離,還是邏輯的劃分,不可避免的會(huì)將應(yīng)用分割成一些很小的代碼塊,形成我們意識(shí)上的組件,在需要的地方可以進(jìn)行 import 引入,例如下面:

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

    這種方式引入,MyComponent 在構(gòu)建的過(guò)程中,會(huì)被同步打入頁(yè)面的bundle.js中

    這個(gè)時(shí)候,在某些場(chǎng)景中,比如:

    1、這個(gè)組件的體積很大

    2、它不是頁(yè)面一開(kāi)始就需要的

    那么我們?cè)跇?gòu)建的過(guò)程中,就將組件代碼打入頁(yè)面js中,顯然是不合適的

    Vue提供了一種異步組件的概念:只在需要的時(shí)候才從服務(wù)器加載

    我們可以這么定義:

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

    上面的例子,采用 setTimeout 模擬異步獲取組件,真實(shí)情況,甚至可以通過(guò)ajax請(qǐng)求組件編譯之后的template,然后調(diào)用 resolve 方法;如果加載失敗,可以調(diào)用 reject 方法

    大部分情況下,我們的組件都是單獨(dú)分割成一個(gè) .vue 文件,那么我們可以這么做:

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

    這個(gè)特殊的 require 語(yǔ)法將會(huì)告訴 webpack,自動(dòng)將你的構(gòu)建代碼切割成多個(gè)包,這些包會(huì)通過(guò) Ajax 請(qǐng)求加載

    那么如果你的頁(yè)面沒(méi)有用到這個(gè)組件,自然就不會(huì)請(qǐng)求組件的js包

    當(dāng)然,也可以局部注冊(cè)異步組件

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

    動(dòng)態(tài)組件

    說(shuō)到異步組件,很多人就會(huì)想到另一個(gè)類(lèi)似的 動(dòng)態(tài)組件,并且總是會(huì)弄混兩者的關(guān)系。

    其實(shí) 動(dòng)態(tài)組件異步組件 完全不是一碼事?。?!

    直接上總結(jié)

    動(dòng)態(tài)組件:是Vue中一個(gè)特殊的Html元素:<component>,它擁有一個(gè)特殊的 is 屬性,屬性值可以是 已注冊(cè)組件的名稱(chēng)一個(gè)組件的選項(xiàng)對(duì)象,它是用于不同組件之間進(jìn)行動(dòng)態(tài)切換的。

    異步組件:簡(jiǎn)單來(lái)說(shuō)是一個(gè)概念,一個(gè)可以讓組件異步加載的方式;它一般會(huì)用于性能優(yōu)化,比如減小首屏加載時(shí)間、加載資源大小。

    (學(xué)習(xí)視頻分享:web前端入門(mén)、vue視頻教程)

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)