双向绑定所使用到的defineProperty()

1627 58 前端 2019-07-10

vue是近年来大火的前端框架,采用数据驱动思想,其中双向绑定是最重要的特点之一。vue2中双向绑定的实现使用了Object.defineProperty()方法劫持数据每个属性的settergetter,数据发生变动时候就触发执行相应dom操作。那么这个Object.defineProperty()方法是怎么做数据劫持的呢?

Object.defineProperty()方法有三个参数 obj, prop, descriptor,分别对应(对象,对象属性名,属性描述符 )

它的原理就是修改一个数据对象,使得其能够在数据被set和get的时候进行处理,下面的例子可以很好地说明:

<!DOCTYPE html>
<head>
    <style>
        body, input {text-align: center;}
    </style>
</head>

<body>
    <input id="input" type="text">
    <h3 id="text"></h3>

    <script>
        window.onload = function() {
            Object.defineProperty(window, 'number', {
                get() {
                    return data.value;
                },
                set(newValue) {
                    text.innerHTML = newValue;
                    input.value = newValue;
                },
            });

            input.addEventListener('input', () => {
                window.number = input.value
            });
        }
    </script>
</body>
</html>

运行结果: 13653457-e0fee5a9c5aa7d8d

© 2020 peal.cc 粤ICP备2020133024号