vue中的input使用e.target.value赋值的问题

很久不写博客了。。。

vue中对表单的处理，相对原生js，增加了一个双向绑定的语法糖：v-model。官方文档里有一段：

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

这段话很重要。我们知道，input有各种原生事件（oninput,onchange等），而原生事件里可以用e.target.value对输入框进行赋值。这时候就有个问题了，对e.target.value渎职和v-model绑定的数据直接修改有什么冲突吗？

答案是有的，有可能造成数据不统一的情况：页面上显示的值与绑定的值不一致。

如果要进行校验等操作，可以修改v-model绑定的值，而不是修改e.target.value。

<template>
    <div class="hello">
        <input @input="onInput" @change="onChange"  @keydown="onKeyDown" v-model="value" />
        <input type="button" value="点我" @click="onClick">
    </div>
</template>
 
<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                value:1
            }
        },
        methods:{
            onInput(e){
                console.log('onInput');
                // e.target.value = 5;
                // this.value = 5;
            },
            onChange(e) {
                // console.log('onChange');
                // e.target.value = 7;
                // console.log(this.value);
            },
            onKeyDown(e){
                console.log('onKeyDown');
                e.target.value = 6;
            },
            onClick(e){
                // this.value = this.value+1;
                console.log(this.value);
                console.log();
            }
        }
    }
</script>

　　上面这个例子里就会出现数据不统一的情况。页面显示6，而获取this.value真实值是64。