Vue实现双向数据绑定的原理
程序员文章站
2022-04-18 23:13:45
...
Vue实现双向数据绑定的原理
Vue实现双向数据绑定的原理就是利用了 Object.defineProperty()，这个方法通过重新定义对象，获取属性值(get)和设置属性值(set)的操作来实现。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Object.defineProperty()方法有三个参数：
- obj 要修改或定义key值的对象
- key 对应obj对象的里面某有已有或要修改的属性
- options 这个参数对象里面有get,set两个函数，用来定义属性值
简单的实现
同步输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="a">
<span id="b"></span>
</div>
</body>
<script>
var obj = {};
var val = "she";
Object.defineProperty(obj, 'val', {
get: function () {
return val;
},
set: function (newVal) {
val = newVal;
document.getElementById('a').value = val;
document.getElementById('b').innerHTML = val;
}
});
document.addEventListener('keyup', function (e) {
obj.val = e.target.value;
})
</script>
</html>
上一篇： Vue 实现数据双向绑定的原理
下一篇： Vue实现数据双向绑定的原理