VueJs观察者对模型实例上的多个事件监听器

Question

我正在试图找出哪种方法更合适/更少资源。下面的两个示例都将执行相同的工作，但我的理解是，可能会出现不必要地触发事件@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>

VS

<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>