記 Ant Designer Vue 2.0.1 layout 丟失樣式類名問題分析

<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.1.2，還是沒有修復該問題，然後安裝了 2.2.0-beta.2 該問題修復了。

看更新日誌，其中在 2.2.0-beta.1 里有這麼一條

本版本重構組件 Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate

然後看了下源碼，那段有問題的程式碼的確重寫了，現在改成這樣了

調整了合併屬性的順序。