如何仅使用 v-bind 绑定属性一次？

Question

我正在使用vue-i18n进行本地化。当我想翻译输入占位符时，如：

<input type="text" v-model="someValue" :placeholder="$t('translation.string')">

我必须使用$t()在每次重新渲染时执行的函数（也提到了库文档）。这在我的简单预订表单中添加了数千个不必要的函数调用，我想避免这种情况。

有没有办法只绑定一次属性？翻译后的值在 Vue 实例的整个生命周期中都不会改变。v-once不是我要找的，因为我想保持组件/节点的反应性，并且只对属性进行“硬编码”。

我知道我可以通过简单地将翻译后的字符串存储在数据对象中来实现我所需要的，但我想知道是否有替代的、更简单的解决方案（不需要大量的代码重复）。

Answer 1

属性将执行您正在寻找的操作，因为它们仅在其依赖项更改时触发重新运行computed。由于this.$t(\'LOCALE.STRING\')除非您的语言环境发生更改，否则不会更改，因此您只能保证一次运行，之后该值将由 Vue 缓存以供后续渲染。

\n

<template>\n  ...\n  <input\n    ...\n    :placeholder="translatedPlaceholder"\n  >\n  ...\n</template>\n\n<script>\n  ...\n  computed: {\n    translatedPlaceholder() {\n      return $t(\'translation.string\');\n    },\n  },\n  ...\n</script>\n

\n

这个解决方案最棒的部分是，如果语言环境确实发生变化，那么 Vue 确实会刷新计算属性，将其更新为正确的值。

\n\n

如果您正在寻找更广泛的示例，我已经整理了一个交互式片段来帮助演示此语法。

\n

该代码片段包括一个简单的本地化问候语，后跟<p>标签中的随机数字，以及两个按钮。文本中的本地化字符串是从计算属性中提取的。

\n

第一个按钮将生成一个新数字，导致<p>在 DOM 中重新渲染。
\n第二个按钮将切换语言环境，导致 Vue-i18n 刷新本地化字符串。

\n

每当重新执行计算的本地化属性时，它将记录到控制台。
\n我还将脚本设置为在 Vue 更新 DOM 时记录到控制台。

\n

\r\n

\r\n

const messages = {\n  en: {\n    "greeting": \'Hello!\',\n  },\n  es: {\n    "greeting": \'\xc2\xa1Hola!\',\n  },\n};\n\nnew Vue({ \n  i18n: new VueI18n({\n    locale: \'en\',\n    messages,\n  }),\n  data() {\n    return {\n      num: 1,\n    }\n  },\n  computed: {\n    localizedGreeting() {\n      console.log(\'Computed executed\');\n      return this.$t(\'greeting\');\n    },\n  },\n  methods: {\n    swapLocale() {\n      this.$i18n.locale = (this.$i18n.locale == \'en\' ? \'es\' : \'en\');\n    },\n    randomNum() {\n      this.num = Math.floor(Math.random() * 10000);\n    },\n  },\n  updated() {\n    console.log(\'DOM updated\');\n  },\n}).$mount(\'#app\')

\r\n

.as-console-wrapper {\n  max-height: 120px !important;\n}

\r\n

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>\n<script src="https://unpkg.com/vue-i18n@8"></script>\n\n<div id="app">\n  <p>{{ `${localizedGreeting} #${num}` }}</p>\n  <button @click="randomNum()">Re-render Greeting</button>\n  <button @click="swapLocale">Swap Greeting Locale</button>\n</div>

\r\n

\r\n

\r\n

\n

正如您所看到的，重新渲染不会导致计算属性重新执行，但交换区域设置会导致重新执行，这正是我们在这里寻找的。

\n\n

最后一点是\xe2\x80\x93，虽然从技术上讲，原始代码中存在性能影响，但由于您正在重新执行$t()调用，因此值得记住的是，实际的性能影响可能很小。除非确实有意义，否则不要以简单性来换取性能提升。

\n

请记住，过早的优化是万恶之源！

\n