如何开发一个 “完美” 组件，看这篇就够了

最后一个月了，回顾整个 2022，开发的方向由 To C 偏向于 To B，由用组件转向写组件。这一年写了很多组件，下面分享一些“过来人”的经验。因为更熟悉 Vue 框架，所以本文主要针对 Vue 的组件开发进行总结。

什么是组件

在开发的时候经常会遇到重复的样式、类似的功能，比如文件上传、Toast 提示等，为了减少重复的开发，也为了功能、样式的统一，我们对其进行总结封装，这就是组件化。

怎么规划组件

1. 适当选用开源组件

社区为我们提供了很多优秀的开源组件库，像 Ant Design、vant，里面的很多组件是可以拿来就用的，因此不必重复造轮子（个人观点）。

2. 二次封装

当然有些组件需要适配自己公司产品风格的 UI、增加些通用的业务逻辑。二次封装是一个相对较优的选择。二次封装的话建议通过 $attrs、$listeners（不知道怎么用没关系，后面有讲怎么用） 进行属性透传，这样能最大限度的保证原组件的功能。👇 是我封装的 vant-picker 组件（根据业务对样式做了兼容）

<template>
  <div @touchmove.prevent>
    <div class="fl_bg"></div>
    <van-picker
      v-bind="$attrs"
      v-on="$listeners"
      ref="vantPicker"
      class="faiz-picker-container"
    />
  </div>
</template>

<script>
import "vant/lib/picker/style";
import VanPicker from "vant/lib/picker";
export default {
  components: {
    VanPicker
  },
  inheritAttrs: false,
  mounted() {
    this.vantPickerInstance = this.$refs.vantPicker;
  }
};
</script>

3. 造轮子

大家可能最喜欢的就是造轮子，想怎么写就怎么写，想加什么功能就有什么功能。不过为了使用者能更好的用“轮子”我们在开发的时候应遵循一些原则。

开发组件的原则

一个组件是否优秀的指标之一就是看它的使用体验如何。

1. Vue 项目 Props 数据传递的要明确, 不要直接扔一个复杂对象。

// bad
<sn-button :options="{ type:'primary', shape:'default', disable:true }">默认按钮</sn-button>

// good
<sn-button type="primary" shape="default" disabled>默认按钮</sn-button>

2. Props 增加校验，重点、易错的应增加 validator 自定义校验, 错误要给出提示。

propF: {
  type: String,
  required: true,
  validator: function (value) {
    if (['success', 'warning', 'danger'].includes(value)) {
      return true;
    }
    console.error('propF 必须匹配[success', 'warning', 'danger]字符串中的一个')
  }
}

3. 组件内应多提供插槽、事件。避免组件内处理业务，如果存在需要提供覆盖、操作方法。

4. 良好的 TS 支持，对外暴露的类型应减少使用 any。

5. 组件要有 namespace 概念，内部功能绝对不能影响整个页面。

// ------------- css ---------------
// bad
div {
    display: flex;
}

// good 推荐使用 bem
.van-button {
    display: flex;
}
.van-button__content {
    color: red;
}

// ------------- js ----------------
// bad
window.foo = 'foo'

// good 组件内的变量可以通过某个文件存储并导出
export const foo = 'foo'

6. 对一些非指定版本的第三方库应由 dependencies 转到 peerDependencies，防止项目存在不同版本依赖导致打包体积变大。

  // dependencies 适合存放强依赖的版本 比如这里的 vue-lazy
  "dependencies": {
    "@babel/runtime": "7.x",
    "@vant/icons": "^1.7.1",
    "@vant/popperjs": "^1.1.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "vue-lazyload": "1.2.3"
  },
  // peerDependencies 存放项目所推荐使用的三方包版本
  "peerDependencies": {
    "vue": ">= 2.6.0"
  },
  "devDependencies": {
    "@vant/cli": "^2.11.11",
    "prettier": "2.1.0",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
  },

7. 避免在全局或者原型上挂载变量、方法。不能完全否定这种实现方式，只能说是把双刃剑，好处是使用者开发方便，坏处就是增加了代码维护成本，以及出错排查的难度。而且这种方式不利于组件的 TreeShaking（参考 Vue2）

// bad
Vue.prototype.foo = 'foo'

// 如果有需要 可以通过 Vue.use 显示的声明
Vue.use(fooPlugin) // 此处的 fooPlugin 功能就是向原型上挂载 'foo'

组件的实现

组件的分类

1. 基础组件

像 Toast提示、Button 等基础组件。

2. UI 组件

像头像展示、进度条等。

3. 接口组件

像一些固定后端接口可以将其包装，好处是能统一管理、通参统一处理、同时可以利用 TS 的类型校验。

4. 业务组件

有一些业务场景是完全相同的，A页面、B页面、D页面都是相同的 UI 相同的逻辑，一点小差异也是可以通过配置改变的。这样的建议抽成组件，但是经常出现的问题是组件越写越大、功能越来越复杂。因此我们在实现这类组件时一定要避免一个文件（一处代码块）做多个逻辑，要对其解耦，对其进行分层处理，可以理解为组件内拆分出多个子组件，并在入口文件通过配置将各个子组件分配、组合（策略模式）。

Vue 组件的通信

1. props && $emit

最基本的通信方案，也是最常用的，推荐使用。

2. $parent、$children、$ref

在组件中我们能明确的知道 $parent 和 $children, 所以通过获取组件实例进行通信的方式很适用。

• $ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在组件上，引用就指向组件实例
• $parent：访问父实例
• $children：子实例

3. $attrs、$listeners

主要用于实现隔代通信

<template>
  <Sub v-bind="$attrs" v-on="$listeners" />
</template>
<script>
import Sub from './SubChild.vue';
export default {
  inheritAttrs: false,
  components: { Sub }
};
</script>

• $attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件

• $listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

• inheritAttrs

用于控制是否启用默认的组件 attribute 透传行为, 默认情况下(inheritAttrs: true)子组件的 props 没有接收的 值会被透传

// parent
data() {
  return {
    name: 'limy',
    age: 18
  };
}

// child
export default {
  inheritAttrs: false,
  // 没有接收 age
  props: ['name']
}

<!-- inheritAttrs: false -->
<div data-v-5c5c8dbe="" data-v-fb07bed6="" class="ccc"></div>
<!-- inheritAttrs: true -->
<div data-v-5c5c8dbe="" data-v-fb07bed6="" age="18" class="ccc"></div>

EventBus、vuex、provide、inject

这个几个特点是作用范围过大，容易影响外部，或者受到外部影响。不推荐

总结

好的组件往往有着相同的特点：易用、稳定、体验好

作为开发者，我们需要规范的开发、设计以此来达到 👆 目的。

最后，建议大家多用开源、多学开源、少造重复轮子（狗头保命）