vue双向绑定原理（Proxy）
程序员文章站
2022-04-18 20:52:33
...
vue 3.0将使用proxy 来实现 双向绑定 于是简单做了个 双向绑定的demo
<!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>双向绑定</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
</head>
<div id="scope">
<div>
<input type="text" v-model="test1">
<input type="text" v-model="test1">
</div>
<div>
<input type="text" v-model="test2">
<input type="text" v-model="test2">
</div>
<div>
<input type="text" v-model="test3">
<input type="text" v-model="test3">
</div>
</div>
<button οnclick="app.test1 = 'haha'">点击改变value</button>
<body>
<script>
const scope = $("#scope");
const length = scope.find('input').length;
scope.find('input').keyup(function (event) {
const key = $(this).attr("v-model");
app[key] = $(this).val();
})
const vue = new class Vue {
constructor() {
this.test1 = '';
this.test2 = '';
this.test3 = '';
}
}
let app = new Proxy(vue, {
get: function (target, key, receiver) {
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
for (let i = 0; i < length; i++) {
if (scope.find('input').eq(i).attr("v-model") === key) {
scope.find('input').eq(i).val(value);
}
}
return Reflect.set(target, key, value, receiver);
}
});
</script>
</body>
</html>