为什么切换语言MenuItem组件的generateTitle会自动执行

Question

当我进行国际化语言切换的时候，我发现generateTitle()这个函数重新进行了执行，这个函数是如何被触发进行执行的呢？

Answer 1

johnny_2008 2023-05-14 11:53:41

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>message: {{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
 setup() {
   const { t, locale } = useI18n({
     locale: 'ja',
     messages: {
       en: { ... },
       ja: { ... }
     }
   })
   // Something to do ...

   return { ..., t, locale }
 }
}
</script>

locale 是响应式的 i18n 监听到 locale 的变化进行了处理

Answer 2

Sunday 2023-03-16 12:27:03

你好

因为 generateTitle 在 template 中被引用。

• 提问者 城北丶 #1

  为什么template会被执行？我在点击切换语言按钮，并没有对菜单列表进行重新渲染操作，只是做了i18n.locale.value = lang的操作 ，但是我发现fiterRoutes这个函数在每次切换语言的时候被执行。
  如果按照你的回复来看，那么为什么切换语言MenuItem.vue会重新渲染，是哪一步操作让MenuItem.vue渲染的？

• 提问者 城北丶 #2

  经过我测试，我发现只要执行i18n.locale.value = lang，就会导致所有页面渲染，是因为这行代码的问题吗？

• Sunday 回复 提问者 城北丶 #3

  你好，可以看下这个问答：https://coding.imooc.com/learn/questiondetail/W48BaXRxx49PALwG.html

点开查看后面1条评论