<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2的数据双向绑定实现原理</title>
</head>
<body>
<div><input id="ipt" type="text" value="" oninput="changeVal(this)" /></div>
<div id="cnt"></div>
<script>
// 定义初始的数据
var data = {
msg: "八月再贱，九月你好！"
}
// 定义object的使用（代理）
// 对象可以看作是一个空的公司，要想做代理公司，公司得招人，招的人（就是属性）
var proxy = {}
Object.defineProperty(proxy, "zhangsan", {
// 描述zhangsan这个人（属性）该如何干活
// 属性在对象中的操作就赋值、取值俩个操作
// 告诉zhangsan代理取值操作
get() {
// 从data中取值
return data.msg
},
// 告诉zhangsan代理赋值操作
// 形参就是要赋值的值
set(value) {
// 等同于修改vue中的m
data.msg = value
// 模型变化后也需要更新页面
document.getElementById("ipt").value = value
document.getElementById("cnt").innerText = value
}
})
// 一锤子买卖，显示页面的初始渲染效果（让zhangsan代理去取数据）
document.getElementById("ipt").value = proxy.zhangsan
document.getElementById("cnt").innerText = proxy.zhangsan
// 输入框输入内容触发的事件处理程序
function changeVal(o) {
// o指的是当前事件所在元素对应的dom对象
// 找zhangsan，让zhangsan帮我们存数据o.value
proxy.zhangsan = o.value
}
</script>
</body>
</html>?