vue.js 异步组件

XanaHopper 发布于2019-08-20 13:46 / 1354人阅读

摘要：使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时异步组件的实现允许将组件定义为一个工厂函数，动态地解析组件的定义。组件和首页同步加载，而组件则按需加载。

使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时

异步组件的实现

Vue.js允许将组件定义为一个工厂函数，动态地解析组件的定义。工厂函数接收一个resolve回调，成功获取组件定义时调用。也可以调用reject(reason)指示失败。

假设我们有两个组件Home、About。Home组件和首页同步加载，而About组件则按需加载。案例的代码有首页index.html，组件代码about.js构成。

首先是about.js代码：

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

接下来是index.html代码：



  Async Component test



  
    /home
    /about

为了加载在服务器的js文件，我们需要一个HTTP服务器。可以使用node.js的http-server实现。安装并启动一个服务器的方法：

npm install http-server -g
http-server

访问：

http://127.0.0.1:8080

我们即可在首页看到home和about的链接，点击home可以显示home组件，点击about，如果还没有加载过，就加载about组件。

对index.html内的代码稍作解释:

组件定义为function(resolve, reject) {}函数，其内调用load函数，成功后resolve，否则reject

函数load内通过创建标签script加载指定文件，并通过onload事件当加载完成后，通过Vue.component验证组件，存在就resolve,否则reject

异步组件的webpack方案

如果使用webpack脚手架的方式，加载异步组件将会更加直观。本节会用同样的案例，使用webpack做一次演示。

首先创建脚手架，并安装依赖

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定义为一个函数：function (resolve) {}，在函数内，可以使用类似node.js的库引入模式

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

从而大大的简化了异步组件的开发。当然，代价是你需要使用脚手架代码。这个特殊的require语法告诉webpack自动将编译后的代码分割成不同的块，这些块将通过按需自动下载。

关于

作者：刘传君

创建过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81233.html

Vue.js 子组件的异步加载及其生命周期控制

摘要：本文主要对组件化开发中子组件的异步加载和其生命周期进行一些探讨。异步组件讨论异步加载，需要先了解下异步组件。生命周期控制在使用子组件或者叫局部注册时，我们可能需要在子组件实例化或者叫创建完毕后做某些事情。前端开发社区的繁荣，造就了很多优秀的基于 MVVM 设计模式的框架，而组件化开发思想也越来越深入人心。这其中不得不提到 Vue.js 这个专注于 VM 层的框架。本文主要对 Vue...

lidashuang 2019-08-22 11:17 评论0 收藏0
Vue异步组件Demo

摘要：异步组件在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，允许将组件定义为一个工厂函数，异步地解析组件的定义。下面是我写的一个简单异步组件。 Vue异步组件Demo 在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工...

lovXin 2019-08-21 18:23 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

褰辩话 2019-08-01 17:30 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

2i18ns 2019-08-20 19:00 评论0 收藏0