通过v-model实现双向数据绑,其原理是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
例子代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue中v-model双向数据绑定实现原理</title>
</head>
<body>
<div>
<input type="text" id="ins" />
<span id="b"></span>
</div>
<script>
let obj = {};
let nameValue = "";
Object.defineProperty(obj, "name", {
set(value) {
// ins.value = nameValue = value;
nameValue = value;
ins.value = value;
// document.getElementById('ins').value = val;//让文本框的内容等于val
document.getElementById('b').innerHTML = nameValue;//让span的内容等于val
},
get() {
return nameValue;
}
})
// 双向绑定：其实描述的就是视图和数据的关系，视图的变化会同步更新数据，数据变化也会同步更新视图
// 1. 视图中用户输入数据的时候，我们需要获取到用户的输入，然后赋值给obj.name
// 1.1 注册事件
let ins = document.querySelector("#ins");
ins.oninput = function () {
// 1.2 获取用户的输入
// 1.3 赋值给obj.name
obj.name = this.value;
console.log(obj.name)
};
// 2. 数据在发生改变的时候，我们需要把数据赋值给input框
// 当用户通过=给obj.name赋值的时候，会触发上面的set方法
// 我们只需要在set方法中，把当前的更新的数据，赋值给input框即可
// obj.name = "123";
</script>
</body>
</html>
