1.html中多次使用V-if vi-else-if..来判断组件dom是否创建，优化使用<template v-if-"condition">dom.../template>包裹。原因:使用template条件渲
染，在Vue渲染时，生成vm对象时，
template作为虚拟容器不会熏染到dom中，当条件变化时，它内部的元素会根据条件动态创建或者销毁，惰性渲染的方式减少了不必要的dom操作，对于不
平凡切换的条件判断，性能上会有一定优化。
优化前
<div v-if-"condition">dom... </div>
<div v-else-if="condition">dom...=/divs
<div v-if-"condition">dom...</div>
优化后
<template v-if-"condition">dom...</template>
<template v-else-if-"condition">dom...</template>
<template v-if-"condition">dom...-/template»
2.html中在多个V-if,vi-else-if中使用相同的参数作为判断条件，优化使用computed计算属性返回值作为判断条件。computed计算属性，具有自动缓存计算
结果，在以来的数据没有发生变化，
会返回上-次计算结果。响应式更新，在依赖的数据变化才会计算新值，多个判断逻辑集中管理代码易于理解，computedi计算可以避免在vue模板编写复杂的
判断逻辑，在Vm对象里判断条件跟简洁，性能上会有一定优化。
优化前
v-else-if-"row[item.prop] && item.prop---readDocumentStateName"
v-else-if="row[item.prop] && item.prop - label"
优化后
v-else-if-"showTableColumn(row,item.prop,'readDocumentStateName')"
v-else-if-"showTableColumn(row,item.prop,'label')"
computed:{
showTableColumn0 {
return (row, showType, type) ->{
return row[showType] && showType---type
3.html中table表格渲染，列表在多次分页数据时，页面渲染list过多会造成浏览器性能下降，用户体验上卡顿和loading时间过长。可以在el-table外面包裹
<VirtualScroll :data-"tableData" :virtualized-"tableData.length>20" key-prop-"row" throttle-time-"1' @change-'res =>(VirtualTableData -
res)"
@selection-change="selectionChange//如果有select-Column
<el-table :data-"VirtualTableData"
<virtual-column key="row+'selection"/>
</el-table>
</NirtualScroll>
import VirtualScroll from 'el-table-virtual-scroll'
import ( VirtualColumn ) from 'el-table-virtual-scroll
components:{
VirtualScroll,
VirtualColumn
