Vue-i18n internationalization cannot use function variables

foreword

The reason is that the found Vantcomponent Calendarwas not displayed in the project in xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy--bit oldy .

Troubleshooting process

The following is the official component display, and the red box means that it is not displayed correctly in the project.

Check the cause

1. I went to see Calendarthe display of this field in the component source code. First, I controlled showMonthtitlethe conditional dependency of this field showSubTitleto default true, which was not set manually in the project. falseThen I checked the source of this field, and found that it was transformed by internationalization, and the internationalization of this field The variable is a function:
   
   t for internationalization
   
2. Then check whether his internationalization has been introduced in the project, and found that the internationalization of vant and the internationalization in the project have been introduced and merged in our project. The merge method is the spread operator
   
3. But looking at i18.messages, you can't see the field of monthTitle. Preliminary suspicion that the JSON.Parse used by the bottom layer of i18n to parse variables when merging. It turns out that this is indeed the case,
   i18n uses looseClone when getting the message.
   
4. See that looseClone
   
   uses JSON.parse(JSON.stringify)deep cloning, which leads to the loss of function variables.
   This is also vue-i18nthe biggest disadvantage of it, and it can also be said to be JSON.parse(JSON.stringify)the biggest disadvantage. However, everyone will still use this method for deep cloning in most scenes, and few people will implement their own set of deep cloning methods.

at last

Our solution is Vantto use our own language pack instead of merging ours. In the project itself, what we pass to components is the internationalized data, so there is no need for us to manually wrap a Vantlayer of language packs