后端重构，如果接口做好抽象封装，只需要考虑jar之间的兼容性问题，jdk版本不变，基本不用做太大的调整，但是前端就不一样，除了vue框架本身，css的调整，改起来更是让人头疼。前面写了vue2项目升级到vue3经历分享1,vue2项目升级到vue3经历分享2,vue2项目升级到vue3经历分享3,因为没有改造完，于是又写了一篇。还有7天时间，希望能顺利推进。
1 el-table-column外层不能加span
很奇怪，为什么只有两列，其他的不见。
检查代码，第一个不规范的地方，为何el-table-column外层多了一个<span>，这个再新框架里面直接就显示不了，更为严谨。
去掉之后，列出来了，说明一个问题el-table-column再el-table中很重要，列存在才可以显示。
element-ui中这么写可以，但是element-plus中，这种外面加<span>就不规范了。
一般情况下vue2使用Element UI这个组件库，表格组件的插槽的话一般都是使用v-slot，而vue3使用Element Plus组件库，表格组件中插槽一般为#default，不过不改，也能运行。调整后，问题解决。
2 $event.target使用问题
下面的代码，运行后提示 TypeError: Cannot read properties of undefined (reading 'target')
<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120"><template #default="scope"><span v-show="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}</span><el-input v-show="scope.row.isEditCell" v-model="scope.row.remark" @blur="cellBlur(scope.row,scope.column)" @focus="cellFocus(scope.row)" :ref="'remark'+scope.row.id" @keyup.enter.native="$event.target.blur"></el-input></template></el-table-column>
根据文心一言的指导，调整后代码如下,如此界面可以出来了。
<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120"><template #default="scope"><span v-show="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}</span><el-input v-show="scope.row.isEditCell" v-model="scope.row.remark" @blur="cellBlur(scope.row,scope.column)" @focus="cellFocus(scope.row)" :ref="el => { if (el) scope.remarkInput = el; }" @keyup.enter.native="finishEdit(scope.row)"></el-input></template></el-table-column>
finishEdit(row){row.isEditCell = false;},
3 this.$set is not a function
触发cellClick,这里提示this.$set不是跟函数，vue3为什么舍弃了this.$set
由于 Vue 3 使用 Proxy 使其数据属性自动成为响应式的，所以可以直接修改对象属性，而无需使用 $set。直接赋值即可。
3 TypeError: Cannot read properties of undefined (reading ‘querySelector’)
下面可以看到项目中前端工程师设计了一个select组件，里面直接操作了dom,这个却是很忌讳，为啥，看看现在的我就知道了，升级改造，非常麻烦，因为el-select随便一改造，项目肯定需要花费成本去修复这个问题。然成本从而而来？除非是想防御式编程。但问题是高级工程师随着年龄增长，边界效应递减，低级工程师跳槽涨工资，剩下就是丢给高级工程师的烂摊子，最终承受这些憋屈的就是这些高级工程师。这个也是为什么有些公司招所谓架构师或者技术经理，实际就是去救火的原因。
待补充。。。
