嘿，这个场景我太熟悉了——表单里大量用$t绑定占位符，结果重渲染时一堆不必要的函数调用，确实挺烦的。既然你说翻译值在Vue实例生命周期内不会变，那咱们可以用这几个方法来一次性绑定：

方法1：在created钩子中预存翻译值 #

把翻译结果提前存在data里，之后模板直接用这个变量，这样$t只会在组件创建时执行一次：

export default {
  data() {
    return {
      inputPlaceholder: ''
    }
  },
  created() {
    // 只在组件初始化时执行一次$t
    this.inputPlaceholder = this.$t('translation.string')
  }
}

模板里直接绑定这个变量：

<input type="text" v-model="someValue" :placeholder="inputPlaceholder">

方法2：Vue3中用setup预计算（推荐） #

如果是Vue3项目，用组合式API可以更简洁地处理，在setup里直接计算一次翻译值并返回：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    // 初始化时执行一次，之后不会重复调用
    const inputPlaceholder = t('translation.string')

    return { inputPlaceholder }
  }
}

模板用法和上面一样，直接绑定inputPlaceholder就行。

方法3：谨慎使用v-once（不推荐带v-model的场景） #

如果你确定这个input元素除了placeholder之外，其他属性（比如v-model绑定的值）不需要更新，可以给input加上v-once指令，让元素只渲染一次：

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

⚠️ 注意：这个方法有局限性，因为v-once会让整个元素停止响应式更新，如果你需要v-model的someValue变化时同步更新输入框内容，那这个方法就不适用了，所以一般不推荐在带v-model的表单元素上用。

本质上，之所以$t会重复调用，是因为模板中的函数表达式会在每次组件重渲染时重新执行。把翻译结果提前缓存起来，就能彻底避免这个问题啦～

内容的提问来源于stack exchange，提问作者Amade