MVVM
MVVM全称是Model View ViewModel
MVVM 由三部分组成分别是:
M:Model
V:View
VM:ViewModel
在MVVM中 ,ViewModel之中有一个 Binder,或者是Data-binding engine。我们需要在View中声明View(视图)上所显示的东西 与Model的哪部分的数据进行绑定。在ViewModel更新Model上的数据时,Binder会自动将更行后的数据传给View。反过来当用户对View进行操作时,Binder会将数据自动更新到Model中 。这就是 双向数据绑定。
vue的双向数据绑定原理
vue
在创建vm
的时候,会将数据配置到实例中,然后通过Object.defineProperty
方法,为数据动态的添加getter
与setter
方法。
当获取数据的时候,会触发对应的getter
方法,当设置数据的时候,触发对应的setter
方法。
然后当setter
方法触发完成的时候,内部会进一步触发watcher
,当数据改变了,视图则更新操作完毕。
vue内部通过数据劫持&发布订阅模式实现数据的双向绑定
通过Object.defineProperty方法对所有的数据进行数据劫持,就是给这些数据动态的添加了getter与setter方法。
在数据变化的时候发布消息给订阅者(Watcher),触发响应的监听回调。
Object.defineProperty(obj
,attr
,desc
)
方法中的三个参数分别是
- obj: 需要进行定义或修改属性的对象;
- attr: 需要进行定义或者修改的属性;
- desc: 该属性的描述符(包含存取描述符和数据描述符),该参数以一个对象的形式传入,该参数有六个选项:
- value: 设定该属性的值;
- writable: 布尔,该属性是否可写入(是否可改变其value);
- enumerable: 布尔,该属性是否可被遍历得到(for…in, Object.keys等);
- configurable: 布尔,设定该属性是否可被删除,且除writable外的其他描述符是否可被修改;
- get: 函数,该属性的值被获取时执行的回调函数(例如console.log(prop)),默认为undefined;
- set: 函数,该属性的值被设置时执行的回调函数,默认为undefined;
vue3 中的 Object.defineProperty 缺点。
1、无法监听es6的Set、Map 变化;
2、无法监听Class类型的数据;
3、属性的新加或者删除也无法监听;
4、数组元素的增加和删除也无法监听。
我们通过一个简单的实例来理解
var obj = {}
let middel = 123
Object.defineProperty(obj,"msg",{
get(){
return middel
},
set(val){
middel = val
}
})
console.log(obj.msg) //获取对象的属性的时候,会调用自身的get方法 返回123
obj.msg = 123456 //设置对象的属性的时候,会调用自身的set方法
console.log(obj.msg) //123456
当我们 打印obj.msg的时候 , 就是去获取obj 中的msg的值 ,此时他就会去 desc 中调用 get方法 ,我们得到返回值 middel,打印123。 obj.msg = 123456 就是为obj中的msg 赋值 ,此时调用desc中的set 方法 将123456 作为参数val 传递,再将 val赋值给middel ,此时middel = 123456 。我们再次打印 obj.msg时返回的值也就是 123456。