Vue.js를 사용한 커스텀 v-모델: 업데이트

얼마 전인 2019년에 맞춤 Vue 구성 요소를 만들고 v-model 기능을 처리하는 방법을 설명하는 기사를 썼습니다.

나는 최근에 감시자가 필요하지 않은 다른 방법을 발견하여 코드를 훨씬 빠르고 리소스를 적게 사용합니다.

원래 게시물은 다음 방법을 제안했습니다.

<template>
  <div class="custom-input">
    <input v-model="localValue" placeholder="Enter your name">
  </div>
</template>

<script>
export default {
  name: "TextField",
  props: {
    value: String // 1. Receives the value as a prop
  },
  data() {
    return {
      localValue: ""
    };
  },
  created() {
    this.localValue = this.value; // 2. Copy the value in a local value variable

    // Set a watcher to emit the changes to the parent component
    this.$watch("localValue", value => {
      this.$emit("input", value);
    });
  }
};
</script>

작동하는 동안 여기에서 감시자를 사용하면 리소스가 많이 소모될 수 있습니다(특히 이러한 구성 요소를 많이 만드는 경우).

더 나은 접근 방식은 다음과 같이 계산된 속성을 사용하는 것입니다.

<template>
  <div class="custom-input">
    <input v-model="localValue" placeholder="Enter your name">
  </div>
</template>

<script>
export default {
  name: "TextField",
  props: {
    value: String // 1. Receives the value as a prop
  },
  computed: {
    localValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
  }
};
</script>

상용구 코드를 줄일 뿐만 아니라 감시자 사용을 방지하여 구성 요소를 더 빠르게 만들고 리소스를 덜 사용하게 합니다 🎉