vue组件设计

Vue设计思想

组件设计主要是模块设计，主要体现在UI、基本功能、业务需求、性能。
UI即我们写的html代码主要是界面布局样式等。
基本功能指的是实现我们需要的如按钮的常用功能。
业务需求指的是在基础功能的基础上进行场景化的添加。
性能指组件的渲染时间等。
例子实现一个按钮组件：

  <div :class="[readonly?'readonly-hover':'',appointment?'appointment-style':'',ghost?'primary-ghost':'']" class="button-wrap">
    {{ text }}
  </div>
</template>
<script>
export default {
name: 'BtnComponent',
//所有得样式都根据使用情况，根据props来传
  props: ['text', 'readonly', 'appointment', 'ghost'],
};
</script>
<style scoped lang="less">
.button-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
    transition: background-color 0.2s linear;
    &:hover{
      background-color: #57a3f3;
    }
}
.appointment-style{
  &:hover{
      background-color: #3F7DD7;
    }
}
.primary-ghost{
  color: #57a3f3;
  border: 1px solid #57a3f3;
  background-color: #fff;
  &:hover{
    background-color: rgba(81, 151, 252, 0.2);
  }
}
.readonly-hover{
  color:#AFC0D4;
  border-color: #AFC0D4;
}
.readonly-hover:hover{
  background: #FFFFFF;
    cursor:not-allowed;
}
</style>

在页面中调用时：

      @click.native="getCode"
      :text="codeMsg"
      :readonly="sendFlag"
      style="width:35%"
    />

Vue封装主要的API

Vue组件的主要是能够接收父组件传过来的值以及方法，还有使用匿名或具名槽进行html部分的代码的嵌入。
主要的使用的是Vue的props、event、solt.
props表示组件接收的参数，最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，此外还可以通过type、validator等方式对输入进行验证。
slot可以给组件动态插入一些内容或组件，是实现高阶组件的重要途径；当需要多个插槽时，可以使用具名slot
event是子组件向父组件传递消息的重要途径。

组件中需要避免

• 避免隐性的父子间通信
  应该优先通过prop跟事件进行父子组件通信，而不是使用this.$parent或者改变prop。
  vue应用是prop向下传递，事件向上传递。问题在于这样使用方便但是会牺牲数据流的简洁性。
• 避免在scoped中使用元素选择器。
• 避免v-if跟v-for一起使用，可以更换为在一个计算器属性上遍历并过滤列表.。

如何拆分组件通常有两种场景

• 基础组件
  主要是指可复用，实现某类功能，且不包含任何业务的组件，比如像 ElementUI 这样的组件库，提供的就是基础组件库。
  但是基础组件并不一定是单一组件，它可以是一个复合组件，由若干更小的组件单元甚至是其它基础组件组成。比如 Table 组件，它内部就是由 Header、Body 组件组成。
• 业务组件
  业务组件是在基础组件的基础上，开发出的融入业务逻辑的复合组件，通常，业务组件是为了解决某个特定的业务场景，它的复用性相比于基础组件而言，没有那么的强。
  不过，业务组件也是可以复用的。比如弹窗登录的场景，就有一套完整的业务逻辑以及和服务端的交互流程，我们可以把它拆成一个登录组件，这样就可以在页面中方便的接入和复用。
  在日常开发工作中，需不需要把某类场景的业务抽象成业务组件，因为随着业务组件的积累，工作效率也会得到明显的提升。-
  因此，拆分组件主要是从代码的复用性和维护性方面考虑，另外，从性能方面考虑，组件拆分粒度不易过细。

组件的颗粒度

在组件的挂载过程中，出了前面说的创建和渲染 VNode 之外，内部还创建一个组件实例，用来维护组件的状态和数据，此外，还有组件初始化阶段的一些响应式数据处理，都会有一定耗时和内存占用。
拆分组件力度过细，会导致嵌套组件过深，显而易见是整个应用的初始化时长会变长，占用的内存空间也会变大。