成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

vue.js 異步組件

XanaHopper / 1398人閱讀

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

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

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

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

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

首先是about.js代碼：

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

接下來(lái)是index.html代碼：



  Async Component test



  

    /home
    /about

為了加載在服務(wù)器的js文件，我們需要一個(gè)HTTP服務(wù)器。可以使用node.js的http-server實(shí)現(xiàn)。安裝并啟動(dòng)一個(gè)服務(wù)器的方法：

npm install http-server -g
http-server

訪(fǎng)問(wèn)：

http://127.0.0.1:8080

我們即可在首頁(yè)看到home和about的鏈接，點(diǎn)擊home可以顯示home組件，點(diǎn)擊about，如果還沒(méi)有加載過(guò)，就加載about組件。

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

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

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

異步組件的webpack方案

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

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

vue init webpack vuetest
cd vuetest
npm i
npm run dev

訪(fǎng)問(wèn)localhost:8080，可以看到Vue的默認(rèn)頁(yè)面。然后替換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:

再次訪(fǎng)問(wèn)localhost:8080，可以看到Home組件和about組件的鏈接，點(diǎn)擊鏈接試試，可以看到組件home和about都是可以加載的。

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

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

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

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

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

關(guān)于

作者：劉傳君

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

出品

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81233.html

相關(guān)文章

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

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

    lidashuang 評(píng)論0 收藏0

  • Vue異步組件Demo

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

    lovXin 評(píng)論0 收藏0

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

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

    褰辯話(huà) 評(píng)論0 收藏0

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

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

    2i18ns 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<