前端vue自学总结 Week02

vue源码学习之数据依赖，实现数据驱动页面

自述总结：

根据vue数据驱动视图的特点，我们得到一个公式 UI = render（state）;其中UI表示界面（输出），state表示状态（输入），但是输入和输出都是用户确定的，这之中vue所实现的功能就是render（）函数。

接着vue如何如何监听到用户输入的state变化，以及如何根据state变化来更新UI界面，JS为刚好提供了Object.defineProperty 方法，

关于Object.defineProperty：

Object.defineProperty() - JavaScript | MDN

简而言之，Object.defineProperty()会为某个数据对象的个属性的读和写，分别使用get（）和set（）进行拦截，每当该属性进行读和写时，就会出发get()和set()，这就意味着该数据对象已经变成可观测的

上述源码中，定义一个observer类，将每个正常的object转成可观测的object，并且对当前的数据进行判断，如果是object类型，逐层递归，直到所有object中的子元素，并且也是非数组类型时，转成可观测的object。

但是数据可观测后，目前只清楚数据何时发生了变化，但是如何让视图更新呢？如果是一个数据变了，但是更新整个视图，这样显然是不合理的？这样就引入了依赖收集，换而言之，视图中谁依赖这个数据，我们给每个数据建立一个依赖数组，谁依赖这个数据，我们就把谁放到这个依赖数组中，当数据变化时，我们就去它对应的数组，把每个依赖都通知一遍，这就是依赖收集的过程。

在上述总结中，我们可知可观测的数据被获取时会触发getter属性，那么我们就可以在getter中收集这个依赖。同样，当这个数据变化时会触发setter属性，那么我们就可以在setter中通知依赖更新。

但是我们把依赖收集存到哪里呢，这时我们建议依赖管理器Dep类

在上面的依赖管理器Dep类中，我们先初始化了一个subs数组，用来存放依赖，并且定义了几个实例方法用来对依赖进行添加，删除，通知等操作。

如此，我们在getter中调用了dep.depend()方法收集依赖，在setter中调用dep.notify()更新依赖。

在vue中，watcher类实现的就是上述中“谁”的功能，简而言之，就是谁用了数据，谁就是依赖，就为谁创建一个watcher实例。等到数据变化时，就去通知watcher(即调用watcher),去通知真正的视图。

watcher类源码

此文只讲述了object对象依赖收集，还有关于Array类型依赖收集还未继续总结

未完待续....

自学文章地址：Vue源码系列-Vue中文社区