双向数据绑定：
我们这里拿vue举例，vue中的双向数据绑定主要是利用Object.defineProperty（）这个方法进行数据劫持，进而实现双向数据绑定，我们先来看一幅图：
a.png
我们手动实现一个简易的双向数据绑定
<body>
<input type="text" id="input" placeholder="请输入内容">
<p id="p"></p>
</body>
<script>
let input = document.getElementById('input')
let p = document.getElementById('p')
let obj = {
name: '曹操'
}
p.innerText = obj.name
input.value = obj.name
// v -> M 视图到数据
input.oninput = function () {
obj.name = input.value
}
// M -> v 数据到视图
let temp = obj.name
// 参数1：把属性添加到哪个对象上去
// 参数2：添加的属性
// 参数3：属性描述符 对象形式
Object.defineProperty(obj, 'name', {
get () {
return temp
},
set (value) {
temp = value
p.innerText = value
input.value = value
}
})
</script>
效果：
1585710196165.gif
我们可以看到，以上代码中对数据操作的主要是
Object.defineProperty这个方法中的get和set方法。
MVVM
相应大家有工作经验的朋友都知道原来主要的用架构模式都是MVC或者MVP模式，在功能逐渐增多的情况下，Controller的工作量大大的增加，已经变的不易维护，使得无数的开发者头疼，直到MVVM模式的框架出现，极大的减轻了开发者的工作量，深受喜爱，它的核心功能就是双向数据绑定，因为这一特性得到广泛应用。
MVVM.png
MVVM设计模式：
5af2bcdd0001ccfd19201080.jpg
运行概述：Observer会实时监听data中的数据变化，Observer背后其实还是Object.defineProperty,当data中的数据变化时会触发Object.defineProperty中的set函数，set会执行对观察者列表Dep（由被观察的对象组成）的触发，Dep中的列表页是由Watcher添加的，Dep得到通知后会执行更新函数，也就是Watcher给的回调函数，Watcher根据回调函数拿到的更新数据，就可以去更新View了。
网友评论