Element-plus提交pr有感

Element-plus简介

基于 Vue 3，面向设计师和开发者的组件库

Element Plus 使用 TypeScript 与 Vue 3.2 开发，提供完整的类型定义文件。并使用 Composition API 降低耦合，简化逻辑。在2022-02-07对外发布稳定版本v2.0.0，我基本是从1.0.0-beta版本开始关注，那会刚好也是Vue3 刚刚发布，不得不说饿了么团队重构的速度还挺快。

与Ant Design不同点

Ps：这里我们不谈ele与ant的具体性能参数分析啥的，工作中需要取舍的话。套用尤大大的话就是哪个给的钱多我用哪个。大厂的源码都值得我们分析与学习。

以下是个人的一些总结（通过阅读Ant Design 与 Element-plus的源码发现）

1、ant的框架jsx语法用的比较多，hooks的写法遵循react语法较多。

2、ant的库重一点，但他们家的性能组件开始有收费版本，并没有开源。而ele一直在开源，在plus版本中也对性能组件进行重构，在源码中 **-v2版本中都有体现。

3、element-puls 按需引用的方式 提供了插件版本的方式，相对于传统组件方式按需引入的方式更加简洁、方便。

按需导入 #
您需要使用额外的插件来导入要使用的组件。
自动导入
推荐
#
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
具体的方式请参考官方文档 

关于loading 组件的pr

本次提交的pr是关于loading组件的

背景

我在搭建一个vue3+element-plus+vite项目框架的时候，基于axios封装网络请求hook的时候发现。需要一个全局的loading效果，按照element-plus的文档使用·loading组件

 //在拦截器中添加loading
this.instance.interceptors.request.use(
    (config) => {
        if (this.showLoading) {
          this.loading = ElLoading.service({
            lock: true,
            text: '正在请求数据....',
            background: 'rgba(0, 0, 0, 0.5)'
        })
      }
        return config
    },
    (err) => {
        return err
    }
  )
//在响应拦截中关闭loading
this.instance.interceptors.response.use(
    (res) => {
        // 将loading移除
        this.loading?.close()
        const data = res.data
        if (data.returnCode === '-1001') {
          console.log('请求失败~, 错误信息')
      } else {
          return data
      }
    },
    (err) => {
        // 将loading移除
        this.loading?.close()
        // 例子: 判断不同的HttpErrorCode显示不同的错误信息
        if (err.response.status === 404) {
          console.log('404的错误~')
      }
        return err
    }
  ) 

封装与处理是没有问题的，但当进入某个业务场景的时候，需要发起多个网络请求的时候loading 出现了短暂的重叠效果。于是对于 loading组件进行了排查。

仔细观察前0.5s左右出现loading 背景色重叠

分析问题

Step1：

fo