모델 인스턴스의 VueJs 워처와 여러 이벤트 리스너

모델 인스턴스의 VueJs 워처와 여러 이벤트 리스너

어떤 접근 방식이 더 적절하고 리소스 사용량이 적은지 파악하려고 합니다.아래 두 예시는 동일한 작업을 수행하지만, 제가 이해한 것은 두 이벤트가 모두 동일한 상황에서@keyup그리고.@change불필요하게 트리거될 수 있습니다.따라서 제 질문은watch방법이 더 나은 선택일까요?

이 또한 체크해야 하는 이유는@change이벤트는 누군가가 입력값을 입력하는 것이 아니라 단순히 선택한 경우입니다.

<template>
      <input
          type="text"
          :name="name"
          @keyup="update()"
          @change="update()"
          v-model="field"
      >
</template>

<script>
    export default {
        props: {
            name: {
                type: String,
                required: true
            },
            initialValue: {
                type: String,
                required: false,
                default: ''
            }
        },
        data() {
            return {
                field: this.initialValue
            }
        },
        mounted() {
            this.update();
        },
        methods: {
            update() {
                this.$emit('input', this.field);
            }
        }
    }
</script>

대

<template>
      <input
          type="text"
          :name="name"
          v-model="field"
      >
</template>

<script>
    export default {
        props: {
            name: {
                type: String,
                required: true
            },
            initialValue: {
                type: String,
                required: false,
                default: ''
            }
        },
        data() {
            return {
                field: this.initialValue
            }
        },
        mounted() {
            this.update();
        },
        watch: {
            field() {
                this.update();
            }
        },
        methods: {
            update() {
                this.$emit('input', this.field);
            }
        }
    }
</script>

언급URL : https://stackoverflow.com/questions/44412292/vuejs-watcher-vs-multiple-event-listeners-on-the-instance-of-the-model