vue动态加载组件

      本篇只对使用vue框架经验不足的开发者来参考和学习，各位技术大佬不喜勿喷，如有错误还望指正。

      最近公司产品经理提出一个需求，要求公司项目首页当中的每个模块要根据后台返回数据中的序号排序然后显示

      随后就查阅资料发现了vue中的component is方法，原来我们的尤雨溪大大早已经考虑到这样的问题，才得以及时的挽救了我。

      话不多说直接上代码：

 

下图是后台返回的数据，是一个包括5个对象的数组，每个对象中都有一个sort参数以供排序使用，获取数据后进行数组排序（我使用的是快速排序）。

排好序之后直接对数组进行v-for遍历，这里注意有一个v-if判断，一定要确保数据获取到之后在进行渲染，否则会因为页面渲染速度大于数据获取速度从而导致数据未定义报错（接口请求是异步）。

  重点来了，遍历的objList数组中都有每个对象对应的组件名称，所以渲染时，直接利用<component is="组件名称">就可以实现按数组顺序加载模块了。is其实可以从字面意思来理解，也就是问我们是否渲染该名称的组件（这里需要你提前把所有需要渲染的组件都定义好）。