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

  • Z时代
  • 2024-03-11
  • 分类：IT

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

回答：

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

回答：

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

回答：

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

以上是 Vue i18n 切换语言的时候为什么不变？ 的全部内容， 来源链接： utcz.com/p/935080.html

回到顶部