Vue在input的input事件handler里给当前组件data赋值，导致input的值错乱

Question

<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<div id="app"></div>

new Vue({
  data: {
    a: 1,
    data: ''
  },
  template: '<div><input @input="handleInput" :value="a" /><div>{{data}}</div></div>',
  methods: {
    handleInput(e) {
      this.data = e.target.value
    }
  }
}).$mount('#app')

各位可以把这代码拿去自己跑一下，input控件输入的时候会出问题。

Answer 1

你并没有在 @input 事件里重新设置 a，所以 input 控件表现的很鬼畜

handleInput(e) {
  // 不设置 this.a ，input 框里的值肯定一直为 1 
  this.a = e.target.value
  this.data = e.target.value
}

-------------- 顺便补充下出现这个现象的原因 -----------

这跟你设置 this.data 有关

如果你仔细观察，你上面的例子是会短暂的出现你刚才输入的值，于是立刻又变成了 1, 这是因为当你在 handleInput 里设置了 this.data，vue 观察到有数据变化了，会去更新页面，于是 input 框里的 value 会从上一次的 e.target.value 被重置为 1 (因为 :value = 1)

当你不在 handleInput 里不做任何操作的时候，即 vue 没有观察到数据变化，那么它就不会去更新页面，所以 input 框里到值还是 e.target.value，但是 a 的值还是 1

稍微改一下这个例子，在 handleInput 的例子里，直接 this.data = 2，那么只有第一次设置的时候 input 会出现奇怪的现象，后面就正常了，因为只有第一次 data 改变了

Answer 2

不是很清楚你要实现怎样的效果。如果要实现表单的双向绑定用v-model就可以了

new Vue({
  data: {
    a: 1
  },
  template: '<div><input v-model="a" /><div>{{a}}</div></div>',
}).$mount('#app');

Answer 3

@input并非官方推荐的写法，实际computed计算属性会更合适一些

Answer 4

绑定input的value为什么要用:value="a"，没有这种用法的，应该用v-model="a"