v-bind로 특성을 한 번만 바인딩하는 방법

v-bind로 특성을 한 번만 바인딩하는 방법

현지화에 vue-i18n을 사용하고 있습니다.다음과 같이 입력 플레이스 홀더를 변환하는 경우:

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

를 사용해야 합니다.$t()이 기능은 재검출 시마다 실행됩니다(도큐먼트에 기재되어 있는 것도 마찬가지입니다).이것에 의해, 간단한 예약 폼에 불필요한 기능 호출이 수천개 추가되어 버립니다.

Atribute를 한 번만 바인드할 수 있는 방법이 있나요?변환된 값은 Vue 인스턴스의 라이프사이클 전체에 걸쳐 변경되지 않습니다. v-once컴포넌트/노드를 무효로 해, 어트리뷰트만을 「하드 코드」하고 싶기 때문에, 이것은 내가 찾고 있는 것이 아닙니다.

데이터 오브젝트에 번역된 문자열을 저장하는 것만으로 필요한 것을 얻을 수 있다는 것은 알고 있습니다만, 대체적이고 심플한 솔루션(대규모 코드 복제 불필요)이 있는지 알고 싶습니다.

속성은 종속성이 변경될 때만 재실행을 트리거하므로 원하는 작업을 수행합니다.부터this.$t('LOCALE.STRING')로케일이 변경되지 않는 한 변경되지 않고 한 번의 실행만 보장되며 그 후 Vue에 의해 값이 캐시되어 후속 렌더링이 이루어집니다.

<template>
  ...
  <input
    ...
    :placeholder="translatedPlaceholder"
  >
  ...
</template>

<script>
  ...
  computed: {
    translatedPlaceholder() {
      return $t('translation.string');
    },
  },
  ...
</script>

이 솔루션의 놀라운 점은 로케일이 변경되면 Vue가 계산된 속성을 새로 고치고 올바른 값으로 업데이트한다는 것입니다.

---

보다 광범위한 예를 찾고 있다면 이 구문을 설명하기 위해 대화형 스니펫을 정리했습니다.

이 스니펫에는 현지화된 간단한 그리팅 뒤에 랜덤 번호가 계속됩니다.<p>태그, 두 개의 버튼이 있습니다.텍스트의 현지화된 문자열은 계산된 속성에서 가져옵니다.

첫 번째 버튼을 누르면 새로운 번호가 생성되어<p>DOM에서 다시 렌더링합니다.
두 번째 버튼을 누르면 로케일이 전환되어 Vue-i18n이 현지화된 문자열을 새로 고칩니다.

계산된 현지화 속성이 다시 실행될 때마다 콘솔에 기록됩니다.
또한 Vue가 DOM을 업데이트할 때마다 콘솔에 기록하도록 스크립트를 설정합니다.

const messages = {
  en: {
    "greeting": 'Hello!',
  },
  es: {
    "greeting": '¡Hola!',
  },
};

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

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

<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-i18n@8"></script>

<div id="app">
  <p>{{ `${localizedGreeting} #${num}` }}</p>
  <button @click="randomNum()">Re-render Greeting</button>
  <button @click="swapLocale">Swap Greeting Locale</button>
</div>

보시다시피 재렌더링으로 인해 계산된 속성이 재실행되는 것은 아니지만 로케일을 스왑하면 재실행됩니다.이것이 바로 여기서 찾고 있는 것입니다.

---

마지막으로 기술적으로는 원래 코드에 퍼포먼스가 적중하지만 재실행 중이기 때문에$t()실제 퍼포먼스 히트폭은 작을 수 있다는 점에 유의할 필요가 있습니다.이치에 맞지 않는 한 단순성과 성능 향상을 바꾸지 마십시오.

섣부른 최적화는 모든 악의 근원임을 기억하십시오!

언급URL : https://stackoverflow.com/questions/49053575/how-to-bind-attributes-with-v-bind-only-once