vue用Object.defineProperty手写一个简单的双向绑定的示例

前言 上次写了一个Object.defineProperty() 不详解，文末说要写用它来写个双向绑定。说话算话，说来就来

前文链接

先看最后效果

什么是双向绑定？

1.当一个对象（或变量）的属性改变，那么调用这个属性的地方显示也应该改变，模型到视图（model => view）

2.当调用属性的这个地方改变了这个属性（通常是一个表单元素），那么这个对象（或变量）的属性也会改为最新的值 ，即视图到模型（view => model）

我们怎么知道对象的属性变了？

上文说到，Object.defineProperty 设置对象属性的描述字段里面有两个属性 set （设置属性时被调用）和get（获取属性时被调用），只说不练，你再讲什么？眼见为实好吗？OK ，上代码

如上图所示 每当我获取user.name属性时，get方法被调用，get 方法对应的函数被执行，输出 你是不是来获取值啦；每当我设置user.name属性时，set方法对应的函数被执行，输出 你是不是来设置值啦 ； 是的，我们监控到了代码对user.name属性的存取。

说明 假设id="model" 的元素的 value 是user.name的值，既然我们可以在改变属性的执行日志输出（console.log("你是不是来设置值啦");），那么，我们在设置值的时候给id="model" 的元素设置下新值，不就实现了从模型到视图？！！，说干就干

模型到视图（model => view）的同步

说明 假设id="model" 的元素的 value 是user.name的值，既然我们可以在改变属性的执行日志输出（console.log("你是不是来设置值啦");），那么，我们在设置值的时候给id="model" 的元素设置下新值，不就实现了从模型到视图？！！，说干就干