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