vue是近年来大火的前端框架,采用数据驱动思想,其中双向绑定是最重要的特点之一。vue2中双向绑定的实现使用了`Object.defineProperty()`方法劫持数据每个属性的`setter`和`getter`,数据发生变动时候就触发执行相应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](https://peal.cc/static/image/16082142526082308.jpeg)

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

1408 58 前端 2019-07-10