记 Ant Designer Vue 2.0.1 layout 丢失样式类名问题分析
成熟如 Ant Desinger 这类框架，也不可避免会出现问题，掌握排查问题的能力令人获益匪浅。
现象
<a-layout-sider /> 渲染到页面上会变成 <section class="undefined-has-sider"> 丢失了 layout 前缀
问题分析
排查了源码，看了下 antd 的文件结构，发现其大体上是按组件模块分类
那么 layout 组件自然就在 layout 文件夹下了。
定位到 layout.js 下的 generator 方法，下面是该方法的源码截图：
注意第 68 行到 72 行这块代码，不难理解这里做的是属性合并，问题就出在了 _extends 这个工具方法，同样看下该方法的源码：
方法不难解读，当浏览器支持 Object.assign 的时候，优先使用该方法进行属性合并。
但是， Object.assign 最大的问题“无脑”合并，即后面的对象字段即使是 undefined 也是会覆盖前面的属性的。
这也是出现这个问题的关键。
下面的截图是我在浏览器里断点的时候，将 68 行到 72 行代码分开执行的结果：
layout 被 undefined 无情的覆盖了
后记
虽然 2.0.1 版本肯定早就不用了，官方也应该修复了这个问题，但养成从根本上查到问题的原因，还是很重要的。
版权声明：本文为yinyuxing原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。