前言

Vue2 将在 2023 年年底停止维护了，但是 Vue2 的代码却不会在 2023 年消失，还会越来越多；难以想象几十万行或者几百万行的 Vue2 代码迁移到 Vue3，这是不可能办到的；

老一点的前端程序员肯定经历过把大型项目从 jQuery 迁移到 Vue/React/Angular 的经历，那是一次思想的大变革，也是生产效率的一次大革新，但是这一次就不一样了，Vue2 迁移到 Vue3 虽然优点很多，但是这不足以说服老板们花费$去让你进行重构；

既然 Vue2 还能用，那我就想把他用到极致，日常中最常用的就是 Table 组件，所以 Table 组件出现屎山的概率大大增加了，再加上 UI 框架的加持，这个屎山就被放大了！Vue2 写后台也就是这几个 UI 框架：Antd-vue、Element、iView,两款是个人开发者出品，一款是饿了么出品，来看看他们的 Table 组件

iView

iView Table 屎山

为什么先说 iView，因为 iView 早期版本里面的 Table 组件有一个很奇葩的设定那就是使用 render 函数来渲染 columns，而我们刚好用的 iView 版本就是这个时期的，后面也难以再升级，这个时候就产生大量屎山代码了：

render:(h,{row})=>{     return h('div',[         h('a',{             props:{                          },             styles:{                          },             on:{                 click:()=>{                                      }             }         },'新增'),         h('a',{             class:'xxx'         },'修改'),         h('a',{             class:'xxx',             on:{                 click:()=>{                     Modal.confirm({                         ...                     })                 }             }         },'删除'),         h('a',{             class:'xxx'         },'配置'),     ]) }

render:(h,{row})=>{     return <div>         <a>新增</a>         <a>修改</a>         <a onClick={()=> this.onDelete(row)}>删除</a>         <a>配置</a>     </div> }

这样的话看起来就舒服很多了，但是有人会说了：在 Vue 里边写 jsx，又有 template 又有 jsx 搞得是四不像，不伦不类了，这种方式我不喜欢，还是想利用 Vue 的特性，要么我就还是情愿回到原始社会去钻木取火；那么下面一种方式就是 scopedSlots

scopedSlots 优化

先说怎么用：在 columns 数组中增加一个参数 slot，然后定义作用域插槽：

<template>     <Table :columns="columns">         <template #actions="{row,index}">             <a>新增</a>             <a>修改</a>             <a @click="onDelete(row)"}>删除</a>             <a>配置</a>         </template>     </Table> <template> <script> export default{     data(){         return {             columns:[{                 title:'操作'，                 slot:'actions',                 key:'actions'             ]}     } } </script>

<td>   <!-- 如果遍历 colums 之后 slot 属性存在，那么渲染 slot，否则按照默认规则渲染 -->   <slot v-if="slotName" :name="slotName" v-bind="{row,index}"/>   <span v-else>...</span> </td>

 翻到后面，可以看到一个 template 风格 API，与 Element 这种用法类似，但是后面紧接着提示：不推荐使用，会有一定的性能损耗。，为什么会有性能损耗呢？那么 Element 这么用会有性能损耗吗？