# 共通

# 请求优化

如果多个组件调用一个接口，那么势必会造成资源的浪费，通过封装request阻止不必要的请求，返回之前请求的结果：

思考：以下方案只能取消重复请求，不会返回值。是否可以通过返回最后一次的值给之前重复调用来解决这个问题？

![image-20211025114102373](/Users/l.rain/Library/Application Support/typora-user-images/image-20211025114102373.png)

# 思考

做每一个组件时都应该思考如下几种情境：

  1. 数组量特别大时
  2. 组件特别多时
  3. 网速不太稳定时
  4. 交互体验
  5. 性能要求高时

# vue

# 封装第三方组件模板

<template>
  <el-input
    ref="elRef"
    v-bind="{ ...$attrs, ...props }"
    v-on="$listeners"
    class="b-input"
  >
    <template v-for="name in Object.keys($slots)" #[name]>
      <slot :name="name"></slot>
    </template>
  </el-input>
</template>
<script setup>
const props = defineProps({
  size: {
    type: String,
    default: 'mini',
  },
})
// 父组件通过ref.value.elRef.xxx调用element-ui组件方法
const elRef=ref(null)
</script>
<script>
export default {
  inheritAttrs: false,
}
</script>
<style lang="less" scoped>
.b-input {
}
</style>

# 测试

一般的单元测试都是基于通用组件，因为业务组件频繁变动，写测试意义不大。

# 远程组件

为什么要使用远程组件，远程组件与页面解耦，不需要再重新部署。

# 文档

storybook

# 浏览器插件

  1. 提供项目相关信息，和ui组件版本信息，更新日期等

# 大型团队

# 组件赋能

为组件添加标签用来分类，比如基础组件或者业务组件或者废弃组件。可以在gui中快速分类供产品或者其他非前端人员使用。