Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）

冷不防 2022-09-15 05:39 159阅读 0赞

### 前言 ###

> 小伙伴们大家好，今天要跟大家分享的是能够提升幸福感的关于组件导入的两个小技巧。做前端开发的小伙伴都知道，当前前端中有两大流行的框架Vue和React。而现在的前端开发中大部分公司用的也都是这两大框架。那么不管是用的vue还是react都离不开第三方的UI组件库，比如elementui、ant-design和vant等等。  
> 既然用到了第三方库，那么势必就少不了安装、导入和注册，然后才能使用，接下来我们就以vue+elementui为例来分享一下如何提升幸福感。

### 按需导入的瑕疵 ###

> 在我们使用elementui库时，官方为我们提供了两种导入组件库的方式，一种是将整个ui库全部导入，也就是说不管系统中用不用的到我都给你导进来，想用拿来就用，不用拉到放在墙角堆着。显然这不是一个很好的方案，因为导入全部的组件势必会导致程序的体积变大，一般情况下是不用这种导入方式的。而另一种导入方式也是比较常用的导入方式就是“按需导入”，也就是说用到哪个组件我就导入哪个组件。比起第一种方案确实会缩小整个程序的体积。但同时也会带来一些使用上的不便。  
> 下面我们先来看下elementui官方为我们提供的使用方法：

import Vue from 'vue';
    import {  Button, Select } from 'element-ui';
    import App from './App.vue';
    
    Vue.component(Button.name, Button);
    Vue.component(Select.name, Select);
    /* 或写为 * Vue.use(Button) * Vue.use(Select) */
    
    new Vue({ 
      el: '#app',
      render: h => h(App)
    });

> 从上面的代码中不难看出：每一个被用到的组件都需要先通过import导进来，然后再通过Vue.component或Vue.use注册，这样才能在程序中使用。试想如果只有一个两个或者是三个四个，这样写没有问题，无非就是多摁几下ctrl c/v。但是假如说要用到的组件有十几个甚至是几十个，那岂不是整个页面代码都被Vue.component()或Vue.use()霸屏了，如下图所示，看上去是不是太恶心了，想找个代码得滚半天。那么我们就要想个办法来优化一下这坨恶心的代码。  
> ![在这里插入图片描述][0bc0bae5ff9947f1b57baf6386232a83.png]

### 技巧：循环代替Ctrl C/V ###

>  *  仔细观察上面图片中的代码，发现其实都是一坨重复的代码，唯一不同的就是use函数中的参数。这时我们就应该想到既然是相同的代码，那么完全可以用循环来代替ctrl c/v，然后参数可以动态的传给use，而参数列表就是要循环的主体。
>  *  好了既然方案已经确定了，那么现在要做的就是把要传的参数（也就是组件名称）变成循环体。其实也非常简单，想到循环那么必然会想到数组，因此我们在把所需的组件导入以后，然后再把组件名组装成一个数组，最后在遍历循环数组并在循环体内通过Vue.use()注册每个组件。
>  *  通过上面的分析是不是非常简单，下面就来看下代码实现吧！

//伪代码
    import Vue from 'vue';
    import {  Button, Select,Pagination,  Dialog,  Autocomplete,  Dropdown, ... } from 'element-ui';
    const comps = [Button, Select,Pagination,  Dialog,  Autocomplete,  Dropdown, ... ]
    comps.forEach(comp =>{ 
    	Vue.use(comp)
    });

### 总结 ###

> 小伙伴们怎么样，通过如此一番折腾，代码是不是简洁很多了，再也不会被Vue.use霸屏了。当然了导入组件这一步是必不可少的，目前也是没有更好的优化方案，毕竟我们要用别人家的东西嘛。  
> 好了本篇文章就分享到这里，下一篇我们将继续分享下一个幸福的小技巧哦，喜欢的小伙伴欢迎点赞关注加留言哦

[0bc0bae5ff9947f1b57baf6386232a83.png]: /images/20220828/ac9d91cc3e82420d96a40980ddb7a12b.png