Пользовательская директива

ПРИМЕЧАНИЕ

Директива 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 зависит от области видимости, в которой она используется:

• Локальная область: Применяется при использовании опции i18n в стиле Legacy API или установке useScope: 'local' в useI18n.
• Глобальная область: Используется во всех остальных случаях.

$t против v-t

$t

t - это функция экземпляра VueI18n со следующими преимуществами и недостатками:

Преимущества:

• Позволяет гибкое использование в шаблонах, включая синтаксис фигурных скобок {}.
• Поддерживает вычисляемые свойства и методы внутри компонентов Vue.

Недостатки:

• $t выполняется при каждом перерендере, что может добавить накладные расходы на перевод.

v-t

v-t - это пользовательская директива со своими преимуществами и недостатками:

Преимущества:

• Предоставляет лучшую производительность по сравнению с $t, поскольку переводы могут быть предварительно обработаны модулем компилятора Vue, предоставленным vue-i18n-extensions.
• Позволяет оптимизировать производительность, снижая накладные расходы на перевод во время выполнения.

Недостатки:

• Менее гибкая по сравнению с $t; её использование более сложное.
• Вставляет переведенный контент непосредственно в textContent элемента, что означает, что она не может использоваться внутри встроенных HTML-структур или комбинироваться с другими динамическими выражениями шаблона.
• При использовании серверного рендеринга (SSR) вы должны настроить пользовательское преобразование, установив параметр directiveTransforms в функции compile из @vue/compiler-ssr.