Vue之v-model双身绑定的理解

大家都知道Vue中, v-model可以实现控件的双向绑定,其实v-model只是一个语法糖,它真正的实现方式是这样的

<input v-model="valueData" />
<input v-bind:value="valueData" v-on:input="valueData = $event.target.value" />

可以看到,第一行是我们常规的写法,第二行是它真正实现方法。

那么它是如何实现数据监听的呢,比如通过{{}}绑定到页面

{{valueData}}

Vue采用 ES5 提供的 Object.defineProperty() 方法,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

Object.defineProperty()的基本实现,点击这里查看示例

<script>
        var el = document.getElementById('nickname');
        var el2 = document.getElementById('introduce');
        var userInfo = {};
        Object.defineProperty(userInfo, 'nickName', {
            get: function () {
                return el.value;
            },
            set: function (nick) {
                el.value = nick;
            }
        });
        Object.defineProperty(userInfo, 'introduce', {
            get: function () {
                return el2.innerHTML;
            },
            set: function (introduce) {
                el2.innerHTML = introduce;
            }
        })

        el.addEventListener('change', function (e) {
            elInput(e.target.value)
        });
        el.addEventListener('keyup', function (e) {
            elInput(e.target.value)
        });
        el.addEventListener('keydown', function (e) {
            elInput(e.target.value)
        });

        function elInput(value) {
            userInfo.nickName = value;
            userInfo.introduce = "我是" + value
        }
        userInfo.nickName = "xxx";
        userInfo.introduce = "我是xxx"
    </script>

 

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注