用过vue的开发者肯定都暗爽于双向绑定带来的便利,但是就像那句话说的一样

哪有什么岁月静好,只是有人替你负重前行。

虽然我们用的方便,那可是vue辛苦换来的。

这篇文章就来简单介绍一下vue是如何实现双向绑定的。


vue的双向绑定是通过数据劫持来实现的,而数据劫持的核心方法则是javascript语法中的Object.defineProperty()来实现的。

Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

defineProperty的语法为:

Object.defineProperty(obj, prop, descriptor)

其中,obj:要在其上定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。

数据描述符在这里就不做介绍了,感兴趣的可以查看文档:defineProperty文档

存取描述符是由getter-setter函数对描述的属性。

存取描述符同时具有以下可选键值:

get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

set:一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

vue就是利用了defineProperty方法中的getter-setter函数来实现双向绑定,下面来看看我写的一个模拟双向绑定的简单例子:

<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="app">
        <p>输入字符:</p>
        <input type="text" id="inputDom">
        <p>双向绑定:</p>
        <p id="show"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('inputDom').value = newValue
                document.getElementById('show').innerHTML = newValue
            }
        });

        $('#inputDom').on('input',function(e){
             obj.txt = e.target.value
        });

    </script>
</body>
</html>

(把代码copy到本地文件中保存为html格式就能运行查看了)

上面的代码通过Object.defineProperty方法向obj对象中添加了一个属性txt,并且自定义了txt属性的set和get方法,在set方法中,当txt的属性值发生变化时,会去同步改变将input框和用于展示的id为show的

标签中的内容。

然后通过jquery绑定了input框的输入事件,每输入一个字符串就将obj对象的txt值更新,由于txt值更新会触发set方法,因此实现了双向绑定。

发表评论

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