做swf网站台州做网站

问题复现

在使用Vue-i18n对页面进行国际化的时候，使用浏览器翻译插件（如腾讯翻译）后，切换国际化语言，随后当我们关闭浏览器翻译插件后，再次切换国际化语言，原来被翻译的文字无法正确切换

出现原因

浏览器翻译插件对文本翻译时使用了display对原文本进行修改，当关闭浏览器翻译插件后,没有触发浏览器的重排机制，所以没有导致vue并没有刷新dom

解决办法

给失效的页面组件使用key绑定，当切换语言的时候，使得Vue的Diff算法能够识别到虚拟dom的改变从而重新渲染DOM以此解决此问题

<template><div :key="locale">
</template><script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
</script>