Vue <input type="file"> 中的@input 和@change 有什么区别？

Question

请看这两个代码sn-ps，它们都输出相同的结果：

<template>
  <input type="file" @input="input" />
</template>

<script>
export default {
  methods: {
    input(event) {
      console.log(event.target.files);
    },
  },
};
</script>

<template>
  <input type="file" @change="change" />
</template>

<script>
export default {
  methods: {
    change(event) {
      console.log(event.target.files);
    },
  },
};
</script>

<input type="file" />元素中的@input和@change事件有什么区别吗？

Answer 1

这些事件继承自javascript事件oninput和onchange，根据this你可以看到区别：

oninput 事件在元素获得用户输入时发生。 当 <input> 或 <textarea> 元素的值发生更改时，将发生此事件。 提示：此事件类似于onchange 事件。不同之处在于oninput 事件在元素的值发生更改后立即发生，而onchange 事件发生在元素失去焦点时，在内容发生更改后。另一个区别是onchange 事件也适用于<select> 元素。

简单输入文本示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  methods: {
    input() {
      console.log("input")
    },
    change() {
      console.log("change")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input @change="change" @input="input" />
</div>