自定义指令本地化

🆕 7.3 新增

你不仅可以使用方法进行翻译，还可以使用 v-t 自定义指令。

你可以使用字符串语法传递语言环境信息的键名路径。

JavaScript：

模板：

<div id="string-syntax">
  <!-- 字符串 -->
  <p v-t="'hello'"></p>
  <!-- 通过数据进行键名路径绑定 -->
</div>

输出：

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

你可以使用对象语法。

Javascript：

<div id="object-syntax">
  <!-- 文字 -->
  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
  <!-- 通过 `data` 绑定数据 -->
  <p v-t="{ path: path, args: { name: nickName } }"></p>
</div>

输出：

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

支持版本

🆕 8.7 新增

当指令应用于 <transition> 组件内的元素时，你可能会注意到过渡动画之后的翻译过的信息会消失。这与 <transition> 组件实现的方式有关——在过渡开始之前 ，<transition> 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁，但在长过渡时最明显。

为了确保在转换期间指令内容不会被触及，只需将添加到 v-t 指令定义中。

Javascript：

模板：

<div id="in-transitions">
  <transition name="fade">
    <span v-if="toggle" v-t.preserve="'preserve'"></span>
  </transition>
  <button @click="toggle = !toggle">Toggle</button>
</div>

也可以在 VueI18n 实例本身设置全局设置，这将对没有修饰符的所有 v-t 指令产生影响。

new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { preserve: 'with preserve' },
    },
    preserveDirectiveContent: true
  }),
  data: { toggle: true }
}).$mount('#in-transitions')

模板：

关于上面的例子，请参阅示例

$t 是扩展的 Vue 实例方法，它有以下优点和缺点：

优点

你可以灵活地在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法。

缺点

$t 在每次重新渲染时都会被执行，因此它确实有翻译成本。

v-t

v-t 是一个自定义指令，它有以下优点和缺点：

优点

v-t 比 $t 方法具有更好的性能，因为在一次翻译时自定义指令会进行缓存。此外可以使用由提供的 Vue 编译器模块进行预翻译。

因此，可以进行更多性能优化。