如何开发一个优秀的vue组件
2017-09-17 本文已影响184人
zhifeichuan
好的组件可以极大地提高前端开发效率,而一个优秀的组件应该符合以下特性
image.png
一、稳定性
组件的稳定性，是组件使用的基础，也是前端能实现快速迭代的必备条件
如何做到稳定呢？
- 代码的执行流程必须要可预期
- 熟知组件的生命周期， 知道该在哪个钩子中做什么事
例如：data在create()钩子中已经初始化完毕，故可在此出发出ajax请求并获取回传的数据
在mounted()钩子中实例已经挂载在el上，故可进行dom操作(不保证子组件已经渲染完成)
image.png
- 覆盖用户的所有操作流程，避免因考虑不周全而导致bug
例如：路由的切换会导致组件重新渲染，如果只是id变了则组件不会重新渲染，可考虑用beforeRouteUpdate (2.2 新增,路由组件内生命周期)，
再例如：组件应用了keep-alive, 初次渲染组件时mounted()和activated()都会被触发，切换到其它路由的时候则不会触发destroyed(), 第二次激活组件只会触发activated(),离开组件则会触发deactivated()，为了尽可能避免重复的操作，使代码流程清晰，我们只在恰当的生命周期做该做的事
image.png
- 少用watch 避免流程不可控
过多的使用watch会导致组件变动复杂，如果watch的是一个对象且对象很复杂，则尝尝会出现某个地方改变了
该对象的一个属性，则触发了watch，这回导致过多无用的执行，而也许这并不是我们期望的
如果我们在一个组件内watch了很多这样这样的对象，则会变得异常难以维护，因为我们无法把控触发watch的
源头，特别这个对象是用vuex维护时
如果不能避免使用watch，要尽快能让watch函数逻辑简单些
二、一套靠谱的ui组件（自己造或第三方）
在这里推荐饿了吗 http://element.eleme.io/2.0/#/zh-CN/component/table （最新v2.0）
三、功能单一的组件聚合在一起
- 尽量保证组件的最小化和功能单一化
小到一个button就是一个组件 -
将小的组件聚合在一起，实现特定的功能
例如下图的tablelist组件 = 工具栏 + 列表 + 页码
image.png
image.png
-
规范的钩子函数和参数（props）
image.png
// tablelist 组件（子组件）
// 获取远程数据
searchRemote() {
this.loading = true
// 主动获取数据
this.$emit('getBaseList', [
this.pagination,
this.days,
this.startDate,
this.endDate,
this.search_word,
this.sortBy
])
}
// 父组件（调用方）
searchRemote([pagination, days, startDate, endDate, search_word, sortBy]) {
if (startDate && endDate) {
days = ''
}
// 主动获取数据
this.getResultDetail([pagination, this.taskId, days, startDate, endDate, search_word])
}
- 尽量少用$refs
$refs需要直接调用组件内部的方法，如果大量使用，如果组件有变动（比如名字或逻辑变了）将导致不可预期的错误
四、插槽功能slot（分发）
组件提供数据给<slot>，调用方可重写<slot>内的html
image.png
// tableList组件
<slot name="tableData" :data="filterListData.curPageData" :remotePageData="filterListData"></slot>
// 调用方（父组件）
<table-list :sortBy="sortBy" :showQuickSearchByDays="true" :showDateRangeSearch="true" :showSearchKey="true" dateRangeSearchPlaceholder="请选择营销时间段" @getBaseList="searchRemote" @getFilterList="searchLocal" ref="tableList" :filterListData="resultDetailData">
<template slot="tableData" scope="scope">
<el-table :data="scope.remotePageData" max-height="560" stripe border></el-table>
</template>
</table-list>
五、兼容性
- Autocomplete
小隐患是，可能相邻父子选择器会失效，比方说.parent > input选择器，会因为莫名其妙爸爸变爷爷导致文本框样式失效，这个问题嘛，改改CSS就可以了；以及多了一个relative, 元素的z-index层级管理又更复杂了一步，维护成本增加了！
超级大隐患是，Autocomplete组件下拉框高度超出容器高度是很常见的，但是，由于你外层有了一个position:relative的父级，只要外面任意一个容器有overflow:hidden，你的Autocomplete下拉就会被拦腰斩断，部分内容不可见；如果是overflow:auto/scroll，则会出现讨厌的滚动条。这个组件基本上就废了！但是，如果没有外面这层讨厌的position:relative父级，overflow:hidden就干不掉下拉列表，Autocomplete组件就能长青不老，适用性提升了整整一个量级。
