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

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

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

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

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

    如何快速入門VUE3.0:進入學習

    本教程操作環(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` 回調傳遞組件定義             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')         }     })

    動態(tài)組件

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

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

    直接上總結

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

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

    (學習視頻分享:web前端入門、vue視頻教程)

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