数据劫持

数据劫持,指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。

最常见的方法是通过Object.defineProperty()进行实现

语法:

Object.defineProperty(obj, prop, descriptor)

参数说明:

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

返回值:

传入函数的对象。即第一个参数obj

在descriptor中可以设置getter和setter,分别在访问和改变数据的时候进行数据拦截

Vue的双向绑定主要是通过数据劫持完成的,双向绑定分为两个部分,视图改变之后model改变,和model改变之后view改变,第一个相对比较容易,在视图上增加事件即可,重点是如果让model改变时view也改变

这里使用了数据劫持配合发布订阅模式

img

这里的observer就是一般的publisher,通过object.defineProperty监听数据是否发生改变,如果发生改变就发布事件,dep就相当于发布订阅模型中的调度中心,负责将所有的观测者(watcher subscriber)统计,如果发生了变化就将通知watcher调用函数

compile的功能是对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图