Vue note 2

1.异步加载组件

一般单页面的缺点是首屏加载比较慢，因为首屏会把所有所需静态资源全部加载，对于中大型项目来说这样可能不是很合理。初步采用异步组件的方式，配合webpack，组件内部可以采用：

components:{
  '组建名称': _ => import('url')
}

当所需加载的组件信息在数据库中，需要通过后台返回的数据来确定加载的组件时，甚至加载的组件数量也无法确定，这种情况下利用Vue保留的<component>组件，绑定is属性设置需要加载的组建名称。本次数据可视化的页面开发中，数据展示页面采用以下方法：

1、在当前组件data中设置模块数组：

nowModulesArr: []

2、mounted时发起数据请求，在数据确认无误时，进行组件注册动作。

//arr就是从后台拿到的当前大屏的模块数组
regComponents (arr) {
   arr.forEach((item) => {
      let obj = {};  //设置一个空对象，用以注册当前组件的子组件
      if (!this.$options.components[item.id]) obj[item.id] = _ => import(item.url);  //动态命名+引入，而且在组件未注册的情况下才进行注册
   })
   this.$options.components = Object.assign(this.$options.components, obj;  //组件注册，这个api可在vue官网找到。
}    

2、异步组件

https://cn.vuejs.org/v2/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6