Directive "v-t" rendering slower than "$t"

[zemkogabor]

When rendering more than 50 elements, the v-t directive is noticeably slower.

<template>
  <div>
    <div v-if="numbers.length === 1000">
      <div v-for="number in numbers" :key="number">
        <span v-t="'shop.item.card.ask'" />
      </div>
    </div>
    <div v-else>
      loading
    </div>
  </div>
</template>

<script>
export default {
  name: 'Example',
  data() {
    return {
      numbers: [],
    }
  },
  created() {
    for (let i = 0; i < 1000; i++) {
      this.numbers.push(i)
    }
  },
}
</script>

The language key exists, no warning in console output.
Using <span v-text="$t('shop.item.card.ask')" /> instead of v-t then it's much faster.
According to the documentation, v-t should be even faster: https://kazupon.github.io/vue-i18n/guide/directive.html#t-vs-v-t

System info:

  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 AMD Ryzen 3 3100 4-Core Processor
    Memory: 6.06 GB / 31.37 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.1 - /usr/local/bin/npm
  npmPackages:
    vue: ^2.6.11 => 2.7.14 
    vue-i18n: ^8.0.0 => 8.28.2  
    vuex: ^3.0.1 => 3.6.2 

Screenshots

v-t 1000 element:

$t 1000 element:

[amurf]

Noticed this as well and found the issue, figured I'd leave it here in case it's found by somebody else.

• https://github.com/kazupon/vue-i18n/blob/v8.x/src/directive.js#L82
• https://github.com/kazupon/vue-i18n/blob/v8.x/src/index.js#L796

When you use the v-t directive, it copies the entire set of translations for the current locale into the $el so its incredibly slow when rendering many items in one page, as it needs to copy the translations for every single v-t usage.

It only gets worse the more your translations file grows.