Vue-动态组件&异步导入

动态组件&异步导入

动态组件搭配异步导入做为webpack编译组件的基础，提升代码可读性的同时使项目更加轻量且简洁。

本文介绍在Vue项目开发中，动态组件、异步导入过程及实践

动态组件

动态组件渲染使用 is attribute属性 来切换不一样的组件：

<component v-bind:is="currentTabComponent"></component>
复制代码

每次切换新标签。Vue都建立了一个新的currentTabComponent实例。
从新建立动态组件的行为尽管是很是有用的，可是某些标签组件实例内部数据不会发生变化，若是但愿可以在第一次被建立的时候被缓存下来，能够用<keep-alive>元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent" ></component>
</keep-alive>
复制代码

异步组件

在大型应用开发中，组件的数量多且庞杂，此时组件的按需加载显得重要且必要。
Vue容许以一个工厂函数的方式定义组件，工厂函数会异步解析组件的定义。
Vue只有在这个组件须要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供将来渲染使用。

• require模式

webpack遗留功能require.ensure

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会经过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})
复制代码

• import模式-推荐使用

在工厂函数中返回Promise,利用es2015+webpack2动态导入：

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)
复制代码

当使用局部注册时，直接返回Promise函数：

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

动态组件 && 异步组件导入

讲解实际项目案例、分析过程及要点

需求分析

项目工做流审批详情根据业务要求，须要展现每一个模块独立的审批详情数据。

需求拆解

• 项目工做流审批详情页面属于公共页面，各自模块审批详情页面属于业务范畴。
• 在公共页面展现的不一样模块的页面数据。

实现思路分析

• 公共页面提供页面总体布局，页面内容由各模块组件填充。
• 公共页面组件为动态的异步导入组件。
• 动态组件传递给各模块组件聚合参数及方法
• 组件数据整合为JSON的数组

代码实践

代码实践分三个部分组件数据、页面渲染、异步导入

JSON的组件数据

在大型应用中，能够用在线excel收集组件信息，组件路径能够直接粘贴组件的相对路径，再用脚本处理成标准的可直接使用的JSON数组作半自动化处理。

[
    {
        "id": 111,//组件编号
        "urlPath": "src/components/Card.vue",//组件相对路径
        "tag": "Card",//组件名称
        "extra":{}//冗余参数
    },
    {
        "id": 112,
        "urlPath": "src/components/Message.vue",
        "tag": "Message",
        "extra":{}
    }
]
复制代码

公共详情页面配置

公共详情页面此刻做为一个壳子，各自的模块组件放在壳中，代码示例：

<template>
    <div class="hello"> <!--带缓存的动态组件--> <keep-alive> <component v-bind:is="currentTabComponent" :extra="extra" @updateCom="updateComponent" class="tab"></component> </keep-alive> </div>
</template>

<script> import componentList from "../work/components.json"//导入组件数据 import components from "../work/dataFlow";//组件异步导入 export default { name: "HelloWorld", components,//当即执行的异步导入组件 data() { return { msg: "Welcome to Your Vue.js App", currentTabComponent: "Message",//当前渲染组件 extra:{} }; }, created() { //模拟异步请求返回数据 setTimeout({code,data} => { //to do  let result= componentList.find(item=>item.id == +data.id) let extra = result.extra this.extra = Object.keys(extra).length>0?extra:data this.currentTabComponent = result.tag; }, 500); }, methods:{ updateComponent(){ //to do } } }; </script>
复制代码

渲染过程

异步导入的组件总体在dataFlow.js中处理，示例代码：

// dataFlow.js
import list from '../work/components.json'
var result = ( ()=> {
        let component = {};
        for (let i = 0; i < list.length; i++) {
            let com, path;
            com = list[i]
            path = com['urlPath'].substring(4,com['urlPath'].length)
            component[com.tag] = ()=>import(`@/${path}`)//注意要点
        }
       return component

})()//当即执行函数
export default result
复制代码

要点剖析

一、import没法导入变量字符串做为路径
导入失败写法：

let path = '@/components/Message.vue';
let com = ()=>import(path)
复制代码

导入成功写法：

let path = '@/components/Message.vue';
copyPath = path.substring(2,path.length)
let com = ()=>import(`@/path`)
复制代码

webpack目前不支持彻底意义上的动态导入。
能够经过字符串模板功能帮助webpack识别主要路径，这样编译时会编译src下的模块，但组件的只有在被渲染时才加载，从而实现异步导入。
二、当即执行函数
异步组件的导入处理成当即执行函数，会在页面调用时导入的components函数做为变量直接被执行导入过程，避免导入的函数再次调用。

参考资料

Vue-动态组件&异步组件
webpack-动态导入
es6-import()