自定义指令

注意

v-t 指令在版本 11 中将被弃用，并在版本 12 中移除。本节旨在为仍在使用版本 10 的用户提供参考。

除了使用 $t 之外，您还可以使用 v-t 自定义指令进行翻译。

字符串语法

您可以使用字符串语法传递本地化消息的键路径。

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'hi there!' },
    ja: { hello: 'こんにちは！' }
  }
})

const app = createApp({
  data: () => ({ path: 'hello' })
})
app.use(i18n)
app.mount('#app')

模板:

<div id="string-syntax">
  <!-- 使用字符串字面量 -->
  <p v-t="'hello'"></p>
  <!-- 通过数据绑定键路径 -->
  <p v-t="path"></p>
</div>

输出:

<div id="string-syntax">
  <p>hi there!</p>
  <p>hi there!</p>
</div>

对象语法

或者，您可以使用对象语法。

JavaScript:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hi: 'Hi, {name}!'
        bye: 'Goodbye!',
        apple: 'no apples | one apple | {count} apples'
      }
    },
    ja: {
      message: {
        hi: 'こんにちは、{name}！',
        bye: 'さようなら！',
        apple: 'リンゴはありません | 一つのりんご | {count} りんご'
      }
    }
  }
})

const app = createApp({
  data() {
    return {
      byePath: 'message.bye',
      appleCount: 7,
    }
  }
})
app.use(i18n)
app.mount('#object-syntax')

模板:

<div id="object-syntax">
  <!-- 使用带有参数的对象 -->
  <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
  <!-- 通过数据绑定键路径 -->
  <p v-t="{ path: byePath, locale: 'en' }"></p>
  <!-- 复数形式 -->
  <p v-t="{ path: 'message.apple', plural: appleCount }"></p>
</div>

输出:

<div id="object-syntax">
  <p>こんにちは、kazupon！</p>
  <p>Goodbye!</p>
  <p>7 りんご</p>
</div>

作用域

如作用域部分所述，vue-i18n 支持全局和局部作用域。

v-t 的行为取决于其使用的范围：

• 局部作用域：当使用传统 API 风格的 i18n 选项或在 useI18n 中设置 useScope: 'local' 时应用。
• 全局作用域：在所有其他情况下使用。

$t 与 v-t

$t

$t 是 VueI18n 实例的一个函数，具有以下优缺点：

优点：

• 允许在模板中灵活使用，包括 Mustache 语法 {}。
• 支持 Vue 组件中的计算属性和方法。

缺点：

• $t 在每次重新渲染时都会执行，这会增加翻译开销。

v-t

v-t 是一个自定义指令，它有自己的优缺点：

优点：

• 性能优于 $t，因为翻译可以由 vue-i18n-extensions 提供的 Vue 编译器模块预处理。
• 通过减少运行时翻译开销来实现性能优化。

缺点：

• 不如 $t 灵活；使用起来更复杂。
• 将翻译内容直接插入到元素的 textContent 中，这意味着无法在内联 HTML 结构中使用或与其他动态模板表达式组合。
• 在使用服务端渲染（SSR）时，必须通过在 @vue/compiler-ssr 的 compile 函数中设置 directiveTransforms 选项来配置 自定义转换。