这个key我查了，没问题

在吗，遇到过这个问题没有

同事 K 微信里发过来一张手机拍的图片，他在客户现场，原来我们都是开发部前端组的，现在开发人员按业务线划分，他去另外一个组了，客户现场那里的开发电脑由于安全需要不能连外网。

这是个 Vue 项目, 当看到这个 TypeError: Cannot read properties of undefined(reading 'key') 这行报错的时候，我的第一反应是 v-for 绑定的 key 有问题？

案发现场

Vue 项目，页面上点击在某个功能按钮后，切换左侧菜单，控制台报照片上的错误，页面卡死。

初步分析

这个 Vue 项目侧边栏是登录后根据用户权限数据动态渲染出来的，侧边栏菜单深度达到三级，动态绑定的部分涉及到 v-for 的嵌套使用，侧边栏点击的时候会不会是那里的 key 有问题导致的，由于之前这个项目也了解一些，这是我当时的第一反应，然后 K 给了我确定回复: 这个key我查了，没问题

2.png

那侧边栏点击对应的页面里的 <template> 中有没有相关的key数据绑定异常？

都没有查出异常，好吧，目前没其他思路了，你再排查一下代码

两天后

K:"那个问题还有别的思路吗？我研究了两天还是没进展"

想了一会儿，又看了看终端报错，查了查 Google 和 Baidu，查的都是 key 绑定问题， 我："我也没思路了，只能调试代码好好查一下了"

K: "只能调试代码了呀，你能来现场看一下吗？"

balabala...

然后 K 找领导申请去了，这时候是周五下午5点多，周五晚上我领导给我打电话，说他们领导说时间比较紧张，周二要封版，想协调我能不能周末过去帮忙看看，问我方不方便周末就去，周二他们那边要封版。

难得休个两天周末，那破问题要么现场排查一下半天多解决，要么一两天根本没进展，周末去也不一定能解决，K在的客户现场距离住的地方还死远死远的，他们几个驻场的几个人每天通勤时间可长了，还好我们领导好说话，周一早上去

现场解决

周一，起了个大早去K所在的工作现场，先坐了一个小时地铁，又坐了三站公交，下公交后又走了十几分钟路。

开机，运行项目，复现问题，9点进的办公区，由于那个他用的笔记本比较卡，快10点了才看到真正的问题，感叹一句：真慢呀

问题详细描述

登录后，侧边栏数据动态渲染，这时候侧边栏点击都是正常的，在点击了一个 签入 功能按钮后，再次点击侧边栏切换页面异常。根据多次测试发现如下几点

• 侧边栏的 key 是正常的，签入功能执行后会影响页面渲染，侧边栏点击切换异常是 签入 功能导致的
• 通过打印log，发现 vue 页面的 created 事件能进入， mounted 事件无响应，说明侧边栏功能其实正常，关键在渲染层
• 控制台报的 key 错误通过 runtime.js 文件分析是 签入 功能执行后虚拟dom渲染过程key异常了

签入 是个啥

这是个第三方呼叫中心的功能，在网页系统中打电话用的，整个呼叫中心功能基于 jQuery 实现

问题排查

由于呼叫中心的代码是编译压缩后的，基于 jQuery 实现的，找呼叫中心那边协助，但是他们反馈他们的代码在另外一个 Vue 项目中能正常运行，这就只能改我们写的代码了。

之前分析页面切换能进入 created 函数，通过把 template 里面内容全部注释随便写个文字运行尝试，发现侧边栏点击后页面正常切换，内容正常显示，控制台无报错，看来是 template 里面的某个元素收影响了，通过把功能代码一行行的注释放开，最后问题定位到了，竟然是 ElementUI 里面的分页组件报错了

1.png

第二天封版了，接下来怎么办

**换呗**，换个分页组件试试，单独引入了 Ant Design 里面的分页多次测试，功能OK，但是项目里所有页面有分页的组件的地方都得改，第一时间向上反馈，领导了解情况后同意，这次现场支援任务完成

总结

这次的问题虽然困扰了K几天，其实这个问题并不难，解决后发现也没有用到什么高深技术，重要的是遇到问题用纯工程化的思维去把思路理清楚，一层层分析排查，验证问题的原因点，最后定位到问题点在哪，整个过程用了多半天，剩下的就是复制粘贴代码了。以他的手速，晚上加个两三小时班就搞定了 ^-^