Vue-i18n国际化不能使用函数变量

前言

起因是发现VantCalendar组件的 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语言包包裹一层了
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41028148/article/details/127049103