双向绑定所使用到的defineProperty()
2019-07-10 本文已影响1人
叫我汪汪
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>
运行结果：
运行结果
