vue.js - Vue i18n 切换语言的时候为什么不变？

Question

下面这样写切换语言的时候 {{welcome1}} 和 {{welcome2}} 都不会变，只能 {{welcome3}} 这么写，为什么？

<script setup>import {useI18n} from "vue-i18n";import {computed, ref} from "vue";const {t} = useI18n();const welcome1 = t('welcome');const welcome2 = ref(t('welcome'));const welcome3 = ref(computed(() => t('welcome')));</script><template>    <p>{{$t('welcome')}}</p>    <p>{{welcome1}}</p>    <p>{{welcome2}}</p>    <p>{{welcome3}}</p></template><style scoped></style>

Answer 1

你webcome1和webcome2都只是在那一刻使用了语言的值 然后用了另一个变量存起来 后面你语言的值发生变化 跟你存的这个变量有啥关系

Answer 2

webcome1和webcome2都是函数的调用，他只执行一次，当切换语言时，并不会再次调用，webcome3你使用了computed属性，当t('welcome')值变化时，他就会触发依赖的模版页面的显示变更，还有你既然使用computed，外面就不用包一个ref了

Answer 3

它为什么可以把welcome替换成欢迎，它是有一个这个映射关系，代码中做了处理，不是魔法，他处理的地方就是t函数，$t('welcome')和computed都是动态的，所以切换语言后，页面重新渲染，可以重新计算，换成映射到的东西，但welcome1和welcome2是你写死在页面中的，换不了，除非你重新初始化组件

Answer 4

这个问题可能是由于 vue-i18n 的初始化和更新时间导致的。在 Vue 3 中，ref 和 computed 创建的数据是延迟计算的，只有当其依赖的数据发生变化时，它们才会重新计算。

对于 welcome1 和 welcome2，它们都是 useI18n 创建的实例，并且在其内部，它们使用的是同一个 t 函数。当你更改语言时，t 函数返回的文本会变化，但是这个变化只会在 useI18n 内部生效，不会影响到已经创建的 welcome1 和 welcome2 实例。

然而，对于 welcome3，它是一个通过 computed 创建的实例。当其依赖的数据（即 t('welcome')）发生变化时，它会自动重新计算。因此，当你更改语言时，welcome3 会自动更新。

所以，如果你想让 welcome1 和 welcome2 在更改语言时更新，你可能需要重新创建它们。你可以将它们设置为 useI18n 的返回值的一部分，这样它们就会随着 t 函数的变化而变化。例如：

<script setup>import {useI18n} from "vue-i18n";import {computed, ref} from "vue";const {t} = useI18n();const locale = ref(navigator.language || navigator.userLanguage); // 使用浏览器的语言设置作为默认语言const welcome1 = computed(() => t('welcome', { locale: locale.value })); // 使用浏览器的语言设置作为参数const welcome2 = computed(() => t('welcome', { locale: locale.value })); // 使用浏览器的语言设置作为参数</script><template>    <p>{{$t('welcome')}}</p>    <p>{{welcome1}}</p>    <p>{{welcome2}}</p></template><style scoped></style>

这样，无论何时更改语言，welcome1 和 welcome2 都会自动更新。