vue项目中代码优化点

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