双向数据绑定:
我们这里拿vue举例,vue中的双向数据绑定主要是利用Object.defineProperty()
这个方法进行数据劫持,进而实现双向数据绑定,我们先来看一幅图:
我们手动实现一个简易的双向数据绑定
<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>
效果:
我们可以看到,以上代码中对数据操作的主要是
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了。
网友评论