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>
最终效果
在文本输入框输入值，会同步展示出来，内存中也同样发生了改变；
改变内存中的数据值，直接映射到页面上。
关注下方公众号，有更多资料、实例代码、面试技巧奉上！
转载：https://blog.csdn.net/dkm123456/article/details/115531729
查看评论