vue组件设计

Vue设计思想

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

  
    {{ text }}

在页面中调用时：

      @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 之外，内部还创建一个组件实例，用来维护组件的状态和数据，此外，还有组件初始化阶段的一些响应式数据处理，都会有一定耗时和内存占用。
拆分组件力度过细，会导致嵌套组件过深，显而易见是整个应用的初始化时长会变长，占用的内存空间也会变大。