v-model底层原理分析

1.1.1 原理分析

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model的实现原理大致是，通过Object.defineProperty()方法来实现Vue数据的属性的绑定，一旦监听到数据变化，则更新数据关联的虚拟DOM树，当然在模版编译的时候，为指令v-model绑定input事件，当输入的内容发生改变时，同步更新data中绑定的数据。

1.1.2 实现

我们可以通过给input框绑定一个input事件来模拟实现数据的双向绑定的效果

<div id="app">
        <p>{{msg}}</p>
        <p>
            <input type="text"  v-bind:value="msg" v-on:input="change">
        </p>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   msg:'hi vuejs'
                }

            },
            methods:{
                change(event){
                console.log(event);
                this.msg=event.target.value
                
                }
            
            }
           })

预览：

等价于：

 <div id="app">
        <p>{{msg}}</p>
        <p>
            <input type="text"  v-model='msg' v-on:input="change">
        </p>
    </div>

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   msg:'hi vuejs'
                }

            },
            methods:{
                change(event){
                    console.log(event);
                   
                }

            }
        })
    </script>