双向数据绑定原理

1.双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter,如果数据有变动,就发布消息给订阅者触发监听。

2.双向数据绑定的步骤:
**第一步:**实现一个数据监听器observer,能够对数据对象的所有属性就行监听。如果有变动就拿到最新值并通知订阅者。
**第二步:**实现一个指令解析器compile,对每个元素节点和指令进行扫描和解析,根据指令模板替换数据以及绑定相应的更新函数。
**第三步:**实现一个watcher,作为链接observer和compile之间的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图。
**第四步:**实现一个MVVM作为数据绑定的入口,作为Observer、compile、watcher之间的桥梁,通过observer来监听自己的modle数据变化,通过compile来解析扫描模板指令,最终利用watcher搭起observer和compile之间的桥梁,实现双向数据绑定的效果。

2.什么是setter、getter

对象有两个属性:1.数据属性,就是我们经常用的属性。2.访问器属性,

1.get和set就是关键字,他们后面各自对应一个函数,这个函数就是存储型属性。

2.get对应的方法就是getter,负责获取值,他不带任何参数,set对应的方法为setter,负责设置值,在他的函数体中,一切的return都是无效的。

3.什么是object.defineoroperty

对象是由多个名/值对组成的无序的集合。对象中的每个属性对应任意类型的值。
定义对象可以使用构造函数或字面量的形式:
在这里插入图片描述
除了以上添加属性的方式,当然还可以使用object.defineproprety定义新属性或修改原有的属性。

参数:

  1. obj:必需。目标对象。
  2. prop:必需。需定义或修改的属性的名字。
  3. descriptor:必需。目标属性所拥有的特性。

返回值:
传入函数的对象,即第一个参数obj:

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页