Props
props定义应尽量详细。
showLoading: {
type: Boolean,
default: () => true,
required: true,
validator: () =>{
return []
}
}
避免v-for和v-if用在一起
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个该模板会做map操作，每次改变都必须重新遍历整个列表。
建议：先自己做过滤操作，筛选出需要渲染的数组，再做v-for绑定。
<li v-for="(user, index) in activeUsers" :key="index">{{ user.name }}</li>
computed: {
activeUsers() {
this.users.filter((user)=> {
return user.active
})
}
}
推荐使用自闭合组件
自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。
<my-component />
组件有多个属性、事件时应推荐换行
多个特性的元素应该分多行撰写，每个特性一行。
<el-table border
max-height="500"
ref="table"
:data="tableData"
:height="height"
:stripe="stripe"
:size="size"
:fit="fit"
:show-header="showHeader"
:highlight-current-row="highlightCurrentRow"
:current-row-key="currentRowKey"
:row-class-name="rowClassName"
:row-style="rowStyle"
:cell-class-name="cellClassName"
:cell-style="cellStyle"
:header-row-class-name="headerRowClassName"
:header-row-style="headerRowStyle"
:header-cell-class-name="headerCellClassName"
:header-cell-style="headerCellStyle"
:row-key="rowKey"
:empty-text="emptyText"
:default-expand-all="defaultExpandAll"
:expand-row-keys="expandRowKeys"
:default-sort="defaultSort"
:tooltip-effect="tooltipEffect"
:show-summary="showSummary"
:sum-text="sumText"
:summary-method="summaryMethod"
:span-method="spanMethod"
:select-on-indeterminate="selectOnIndeterminate"
@select="onSelect"
@select-all="onSelectAll"
@selection-change="onSelectionChange"
@cell-mouse-enter="onCellMouseEnter"
@cell-mouse-leave="onCellMouseLeave"
@cell-click="onCellClick"
@cell-dblclick="onCellDblclick"
@row-click="onRowClick"
@row-contextmenu="onRowContextmenu"
@row-dblclick="onRowDblclick"
@header-click="onHeaderClick"
@header-contextmenu="onHeaderContextmenu"
@sort-change="onSortChange"
@filter-change="onFilterChange"
@current-change="onCurrentRowChange"
@header-dragend="onHeaderDragend"
@expand-change="onExpandChange" />
在v-for设置键值key
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化(object constancy)，也是一种好的做法。
在 v-if/v-if-else/v-else 中使用 key
如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。
默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的副作用。
尽量不要在scoped中使用元素选择器
在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
为了给样式设置作用域，Vue 会为元素添加一个独一无二的特性，例如 data-v-f3f3eg9。然后修改选择器，使得在匹配选择器的元素中，只有带这个特性才会真正生效 (比如 button[data-v-f3f3eg9])。
问题在于大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) 会比类和特性组合的选择器 慢，所以应该尽可能选用类选择器。
