双向绑定所使用到的defineProperty()
2589 70 0 技术 2019-07-10
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>
运行结果: