用JS简单实现Vue的双向绑定
Vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用Object.defineProperty()将它们转为getter/se
·
Vue实现数据双向绑定原理：
采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。
这里来简单模拟一下双向绑定。
特点
1.比如input被监视，当输入发送改变时，会将数据推送到模型中。
2.当模型中的数据发生改变时，会映射到视图上。
思路
1.用defineProperty 劫持对象，添加好getter/setter方法，对劫持对象进行赋值时会执行setter，取值时执行getter。
2.页面监视很容易想到事件监听，输入框用addEventListener 添加 input事件，输入发生改变时，触发事件回调，将值赋值给劫持的对象，触发劫持对象的setter，在setter中把新数据写到模型中、同时更新到页面上。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
输入：<input type='text' id='inputText'/><br>
动态值：<span id="show"></span>
</body>
<script>
var inputText = document.getElementById("inputText");
var show = document.getElementById("show");
//输入框添加 input事件
inputText.addEventListener("input",function(e){
//给劫持对象设置为输入后的值
defineObj.value = e.target.value;
})
//劫持对象
var defineObj = {};
//defineProperty进行劫持
Object.defineProperty(defineObj, 'value', {
configurable: true,
enumerable: true,
get:function() {
return val;
},
set: function(newVal){
val = newVal;
//设置输入值跟随变化
inputText.value = val;
//设置显示值跟随变化
show.innerHTML = val;
}
})
</script>
</html>最终效果
在文本输入框输入值，会同步展示出来，内存中也同样发生了改变；
改变内存中的数据值，直接映射到页面上。
关注下方公众号，有更多资料、实例代码、面试技巧奉上！
前往低代码交流专区
更多推荐
13
0- 0
已为社区贡献15条内容
所有评论(0)