前言
起因是发现Vant
的Calendar
组件的 x年x月 在项目里没有展示,需要解决,由此记录解决过程。
排查过程
下面是官方组件展示,红框即表示在项目里未正确展示。
排查原因
- 去看了
Calendar
组件源码中该字段的展示,首先控制该字段的showMonthtitle
条件依赖的showSubTitle
默认为true
,项目里也未手动设为false
,再查看该字段的来源,发现是国际化转化的,且该字段的国际化变量是一个函数:
t为国际化
- 再看项目里是否有引入他的国际化,发现引入且在我们项目里合并了vant的国际化和项目里的国际化。合并方式为扩展运算符
- 而查看i18.messages却看不到monthTitle这个字段。初步怀疑i18n底层在合并时使用的JSON.Parse去解析变量了。事实证明确实如此
i18n获取message时使用了looseClone。
- 看looseClone
使用了JSON.parse(JSON.stringify)
深克隆导致了函数变量的丢失。
这也是vue-i18n
的弊端吧, 也可以说是JSON.parse(JSON.stringify)
的弊端。然而大部分场景的深克隆大家还是会使用这个方式,很少有人会实现自己的一套深克隆方法。
最后
我们的解决方案就是Vant
使用自己的语言包,就不合并我们的,本身在项目中我们传给组件的就是国际化后的数据,就没必要我们手动给Vant
语言包包裹一层了