开发中遇到个问题。在点击切换语言时，同一个页面中有的内容可以切换成功，有的则没有反应。在页面刷新后却又发现全部内容都已经切换成功。个人分析了一下原因，如果有误还请各位大佬指正。 

1、原因分析

       1.1、直接在差值表达式中渲染，在这种情况下直接去切换语言时可以成功切换的。

       1.2、在定义变量时使用国际化定义，然后在插值表达式中去渲染该变量。

比如定义了一个变量typeList,使用循环渲染，可以正常显示，在这种情况下直接去切换语言时则没有效果。如图：

      1.3、原因总结

    当在切换语言时，只是修改了 VueI18n 的实例状态，但 Vue 可能没有察觉到这个变化，所以不会自动更新页面。

2、解决办法

     2.1、使用计算属性

     把需要定义的国际化变量通过computed计算属性返回，这样在切换时可以生效。例如把1.2的 typeList通过计算属性返回。这样虽然可以解决，但是有局限性，接下来看第二种方法。

       2.2、刷新组件重新加载

      点击切换语言时，触发当前组件刷新。 在组件刷新时，会重新加载从而确保在模板中的显示能及时响应语言变化。以下是几种刷新组件的方法：

     1、使用key属性，  在模板中为组件添加一个动态的 key 属性：

2、使用动态组件并通过改变组件的名称来触发重新渲染

3、结合自身解决问题

以我当前系统为原型做了一个小demo。页面分为典型的三部分，头部导航栏，左侧菜单栏以及中间的组件视图部分。在头部导航栏有语言按钮，在点击时实现切换语言并刷新当前渲染的组件。

 1、在头部导航栏Header组件中定义刷新方法。

<script setup>
   import { ref } from 'vue';
   import { emit } from 'vue';

   const changeLanguage = () => {
     emit('refreshComponent');
   };
   </script>

   <template>
     <button @click="changeLanguage">切换</button>
   </template>

 2、在父组件中监听这个事件，并根据当前路由对应的组件进行刷新操作。

 <script setup>
   import { ref } from 'vue';
   import Header from './Header.vue';
   import Sidebar from './Sidebar.vue';
   import { useRouter } from 'vue-router';
   import { useI18n } from 'vue-i18n';
   const { locale } = useI18n();
   const router = useRouter();
   const componentKey = ref(0);

   const handleRefreshComponent = () => {
     //切换国际化语言
     locale.value === 'zh-CN'? (locale.value = 'en-US') : (locale.value = 'zh-CN');
     componentKey.value++;

   };
   </script>

   <template>
     <Header @refreshComponent="handleRefreshComponent" />
     <Sidebar />
     <router-view :key="componentKey" />
   </template>