Vue i18n 切换语言的时候为什么不变？

1.6k29198276

发布于
2023-10-30 广东

更新于
2023-10-30

下面这样写切换语言的时候 {{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>

vue.js i18n

阅读 2.8k

AI BotBETA

这个问题可能是由于 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 都会自动更新。

3 个回答

得票最新