国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue.js 異步組件

XanaHopper / 1396人閱讀

摘要：使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時異步組件的實現(xiàn)允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。組件和首頁同步加載，而組件則按需加載。

使用時才裝入需要的組件，可以有效的提高首次裝入頁面的速度。比如在路由切換時

異步組件的實現(xiàn)

Vue.js允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。工廠函數(shù)接收一個resolve回調(diào)，成功獲取組件定義時調(diào)用。也可以調(diào)用reject(reason)指示失敗。

假設(shè)我們有兩個組件Home、About。Home組件和首頁同步加載，而About組件則按需加載。案例的代碼有首頁index.html，組件代碼about.js構(gòu)成。

首先是about.js代碼：

Vue.component("about", {
  template: "
About page
"
});

接下來是index.html代碼：



  Async Component test



  

    /home
    /about

為了加載在服務(wù)器的js文件，我們需要一個HTTP服務(wù)器?？梢允褂胣ode.js的http-server實現(xiàn)。安裝并啟動一個服務(wù)器的方法：

npm install http-server -g
http-server

訪問：

http://127.0.0.1:8080

我們即可在首頁看到home和about的鏈接，點擊home可以顯示home組件，點擊about，如果還沒有加載過，就加載about組件。

對index.html內(nèi)的代碼稍作解釋:

組件定義為function(resolve, reject) {}函數(shù)，其內(nèi)調(diào)用load函數(shù)，成功后resolve，否則reject

函數(shù)load內(nèi)通過創(chuàng)建標簽script加載指定文件，并通過onload事件當(dāng)加載完成后，通過Vue.component驗證組件，存在就resolve,否則reject

異步組件的webpack方案

如果使用webpack腳手架的方式，加載異步組件將會更加直觀。本節(jié)會用同樣的案例，使用webpack做一次演示。

首先創(chuàng)建腳手架，并安裝依賴

vue init webpack vuetest
cd vuetest
npm i
npm run dev

訪問localhost:8080，可以看到Vue的默認頁面。然后替換main.js文件為：

import Vue from "vue"
import App from "./App"

import VueRouter from "vue-router"
import About from "./components/about"
Vue.use(VueRouter)

const Home = { template: "
home page
" }
// const About = { template: "
about page
" }
const router = new VueRouter({
  routes :[
    { path: "/home", component: Home },
    { path: "/about", component: function (resolve) {
        require(["./components/about"], resolve)
        } 
    },
    { path: "/", redirect: "/home" }
  ]
})
new Vue({
  el: "#app",
  template: "",
  router: router,
  components: { App }
})

并添加組件about到src/components/about.vue:

再次訪問localhost:8080，可以看到Home組件和about組件的鏈接，點擊鏈接試試，可以看到組件home和about都是可以加載的。

這里特別要解釋的是代碼：

component: function (resolve) {
    require(["./components/about"], resolve)
    } 
}

Vue.js支持component定義為一個函數(shù)：function (resolve) {}，在函數(shù)內(nèi)，可以使用類似node.js的庫引入模式

require(["./components/about"], resolve)

從而大大的簡化了異步組件的開發(fā)。當(dāng)然，代價是你需要使用腳手架代碼。這個特殊的require語法告訴webpack自動將編譯后的代碼分割成不同的塊，這些塊將通過按需自動下載。

關(guān)于

作者：劉傳君

創(chuàng)建過產(chǎn)品，創(chuàng)過業(yè)。好讀書，求甚解。
可以通過 1000copy#gmail.com 聯(lián)系到我

出品

bootstrap小書 https://www.gitbook.com/book/...
http小書 http://www.ituring.com.cn/boo...
Git小書 http://www.ituring.com.cn/boo...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/81233.html

相關(guān)文章

  • Vue.js 子組件的異步加載及其生命周期控制

    摘要：本文主要對組件化開發(fā)中子組件的異步加載和其生命周期進行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時，我們可能需要在子組件實例化或者叫創(chuàng)建完畢后做某些事情。 前端開發(fā)社區(qū)的繁榮，造就了很多優(yōu)秀的基于 MVVM 設(shè)計模式的框架，而組件化開發(fā)思想也越來越深入人心。這其中不得不提到 Vue.js 這個專注于 VM 層的框架。 本文主要對 Vue...

    lidashuang 評論0 收藏0

  • Vue異步組件Demo

    摘要：異步組件在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個小模塊，按需從服務(wù)器下載。為了進一步簡化，允許將組件定義為一個工廠函數(shù)，異步地解析組件的定義。下面是我寫的一個簡單異步組件。 Vue異步組件Demo 在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個小模塊，按需從服務(wù)器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數(shù)，異步地解析組件的定義。Vue.js 只在組件需要渲染時觸發(fā)工...

    lovXin 評論0 收藏0

  • VueJS 如何編譯服務(wù)器端遠程模板【異步組件+簡單方法】

    摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴謹不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...

    褰辯話 評論0 收藏0

  • VueJS 如何編譯服務(wù)器端遠程模板【異步組件+簡單方法】

    摘要：，常規(guī)組件，卒。小結(jié)總之呢，上面分析了在中編譯遠程模板的可能性，最后得出了兩種方法異步組件，應(yīng)該是官方的推薦方法動態(tài)組件，變通之法，論壇上發(fā)現(xiàn)的思路當(dāng)然如果有其他方法歡迎交流，本文如果有不嚴謹不正確的地方也歡迎指出本文發(fā)自我的，原文鏈接我的 說明 有些時候你可能需要從后臺獲取模板，并在前臺在自己編譯，這在用 AngularJS 1.x 的時候似乎很常見，可以直接用 ng-include...

    2i18ns 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<