前言

Vue的特点之一,数据驱动视图

正文

1,使数据变的可观测

var obj = {}

Object.defineProperty()

通过observer类将正常的object转换成可观测的object

2,怎么确保没有重复操作呢

给object对象添加“__ob__”属性 值为该value的Observer实例

现在数据是可观测的了 如果数据发生变化 我应该通知谁去更改视图呢 总不能把所有视图都更新吧?

3,依赖收集

谁用到了这个数据,我就收集到一个数组里,等到数据更新了 我在通知你更新

那何时收集?何时更新呢?

可观测的数据被获取时触发getter属性,可以在getter中收集依赖,
同样数据在修改时会触发setter属性,可以再setter中通知依赖更新

4,把依赖收集到哪里?

把依赖收集到一个Dep类中,里面初始化一个subs数组用来存放依赖, 并定义几个实例方进行添加、删除、更新等操作

依赖到底是谁?
虽然依赖是收集起来了 但是到底是谁用到这个依赖了呢?

5,Watcher 类来处理’谁‘用到了这个依赖

总结

首先,通过Object.defineProperty()方法实现了数据的可观测性,并且封装了Observer类,让我们能够方便的把object中的数据转换成getter/setter的形式来侦测变化
接着,依赖收集,在getter中收集依赖,在setter中更新依赖,
最后,我们为每个依赖创建Watcher实例,当数据变化时,通知Watcher实例,由Watcher实例去做真是的更新操作。

大致流程:
1,Data通过observer转换成了getter/setter的形式来追踪变化,
2,当外界通过Watcher来读取数据的时候,触发getter从而将Watcher添加到依赖中去
3,当数据发生变化是触发setter,从而向Dep中的依赖(既Watcher)发送通知
4,Watcher接到通知之后,会想外界发送通知,变化通知到外界后可能会触发视图更新、等。。