双向数据绑定介绍
所谓双向数据绑定，是指当 view 的数据变化时将变化同步到 model，而当 model数据变化时将数据同步到 view。
什么是 view 和 model
view 可以理解为浏览器页面上看到的数据，例如 input 等各种标签中的数据。
model可以理解为看不见的数据，是给后台处理的数据，或者从后台接收到的数据。
双向数据绑定的业务需求
我们需要把 view 中的数据同步到 model然后交给后台处理。
也需要把从后台获取到的 model数据显示到 view。
双向数据绑定的原理分析
- 当
view中数据变化时，我们需要监听变化然后将变化后的数据同步到model中。 - 当
model中的数据变化时，我们需要监听变化将变化后的数同步到view中。
双向数据绑定实现
首先我们看下 VUE 中的双向绑定
<body>
<input id="app" v-model:value="message" >
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'Hello, VUE!'
}
})
</script>
</body>
我们看下控制台输出
当我们在控制台输入 vm.message 我们看到 model 数据与 view 数据一致。
当我们修改 model 数据 为 i am ok! 时，我们看到 view 的数据也发生变化。
当我们修改 view 数据为 i am ok! jmc 时，我们看到 model 数据也跟着改变。
这就是 VUE 的双向数据绑定。
双向数据绑定简易实现（单属性）
- 给
input标签添加keyup监听事件，当input值发生变化时会触发时间将值同步给book.model。 - 我们使用
Object.defineProperty()监听book对象的model属性值，当model变化时会调用set函数同步view。
Object.defineProperty()的详细用法可以参考 MDN文档
<body>
<div id="app">
<input id="view" value="哈利波特"/>
</div>
</body>
<script>
const book = {}
model = document.getElementById("view").value
// defineProperty监听model，只要model数据改变，就执行set操作
Object.defineProperty(book, 'model', {
set: function (newValue) {
model = newValue;
document.getElementById("view").value = newValue;
},
get: function () {
return model
}
})
// 监听input，只要view数据有变化就同步赋值给model
document.addEventListener("keyup", (e) => book.model = e.target.value)
</script>
同样我们看下控制台输出
我们将 model 数据改为 java入门 ，view 数据也一起变化。
我们再将 view 数据改为 七天入门 Python，发现 model 数据也改变了。
可以看到，我们已经实现了一个简易的单属性的双向数据绑定。
END