下面这样写切换语言的时候 {{welcome1}} 和 {{welcome2}} 都不会变，只能 {{welcome3}} 这么写，为什么？
极客观点
项目管理
HarmonyOS
<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>
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 都会自动更新。
webcome1和webcome2都是函数的调用，他只执行一次，当切换语言时，并不会再次调用，webcome3你使用了computed属性，当t('welcome')值变化时，他就会触发依赖的模版页面的显示变更，还有你既然使用computed，外面就不用包一个ref了
9 回答1.5k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
6 回答711 阅读
2 回答1.8k 阅读
2 回答1k 阅读✓ 已解决
4 回答780 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
它为什么可以把
welcome替换成欢迎，它是有一个这个映射关系，代码中做了处理，不是魔法，他处理的地方就是t函数，$t('welcome')和computed都是动态的，所以切换语言后，页面重新渲染，可以重新计算，换成映射到的东西，但welcome1和welcome2是你写死在页面中的，换不了，除非你重新初始化组件