Vue-i18n国际化不能使用函数变量_vue 动态变量 i18不变

前言

起因是发现Vant的Calendar组件的 x年x月 在项目里没有展示，需要解决，由此记录解决过程。

排查过程

下面是官方组件展示，红框即表示在项目里未正确展示。

排查原因

1. 去看了Calendar组件源码中该字段的展示，首先控制该字段的showMonthtitle条件依赖的showSubTitle默认为true，项目里也未手动设为false，再查看该字段的来源，发现是国际化转化的，且该字段的国际化变量是一个函数：
   
   t为国际化
   
2. 再看项目里是否有引入他的国际化，发现引入且在我们项目里合并了vant的国际化和项目里的国际化。合并方式为扩展运算符
   
3. 而查看i18.messages却看不到monthTitle这个字段。初步怀疑i18n底层在合并时使用的JSON.Parse去解析变量了。事实证明确实如此
   i18n获取message时使用了looseClone。
   
4. 看looseClone
   
   使用了JSON.parse(JSON.stringify)深克隆导致了函数变量的丢失。
   这也是vue-i18n的弊端吧， 也可以说是JSON.parse(JSON.stringify)的弊端。然而大部分场景的深克隆大家还是会使用这个方式，很少有人会实现自己的一套深克隆方法。

最后

我们的解决方案就是Vant使用自己的语言包，就不合并我们的，本身在项目中我们传给组件的就是国际化后的数据，就没必要我们手动给Vant语言包包裹一层了