图解VUE -- obj的变化检测

由于是对vue源码的解析,文章中不可避免的会出现一些代码。但我经量会以图来解释obj的变化检测原理

对obj的变化检测，实际上就是双向绑定，那么vue的双向绑定是怎么回事呢？对于对象（Object）来说，实际就是把每个数据进行“双向绑定"，以下是最粗略的图解，如何进行双向绑定？又如何进行视图管理？之后我会一一讲解。

大致过程.png

双向绑定，实际上是通过对象方法 Object.defineProperty+发布订阅模式来实现，他可以让数据的修改与读取被“代理” :

let car = {}
let val = 3000
Object.defineProperty(car, 'price', {
  enumerable: true,
  configurable: true,
  get(){
    console.log('price属性被读取了')
    return val
  },
  set(newVal){
    console.log('price属性被修改了')
    val = newVal
  }
})

对car进行读取和修改操作，都会触发上面的代理器,如下图：

控制台打印图.png
那么，如何对obj的每个数据都进行绑定操作呢?很简单！将对象的每个数据都取出，然后进行Object.defineProperty如下图：（想象这是一个流水线，中间的大方块就是一个处理模块，过去的数据都变成了可侦测的数据！ 可侦测的数据.png

但这只是第一步，数据只是变得可侦测了，达到于视图进行绑定还远远不够。
接下来说明一个概念：依赖，含义：依赖于数据的目标，可以理解为视图，但这里，我们的视图和数据之间隔着两层东西，一是DEP，二是watcher,

DEP是在object.defineproperty时就为数据添加的依赖管理器，其负责通知依赖更新与收集依赖的工作，最主要的还是发布操作。所以上面的流水线还得多一步操作： 带DEP的流水线.png

而watcher负责的是订阅操作，对数据进行订阅，在数据变化时，dep会发布这则消息（即:我的数据变化了！watcher你快去帮我更新视图）

他们之间的关系是这样的：

Object的变化侦测.png

以上可以看出，一个数据可能有多个依赖，每次通知变化时交给DEP来干，DEP会把消息发布给每个watcher，watcher负责完成真正视图的重新渲染。

即： image.png

那么，Watcher具体是如何完成订阅操作的呢？即watcher如何与DATA建立联系？,
很简单，利用DEP的依赖收集功能即可，watcher实际上也是一个代理器，所以他拥有两种方法，一种是update视图更新，上图已经演示过这一流程了，一种是getter与DATA建立联系(订阅操作)，下图将会演示建立过程:

image.png

这样就完成了OBJECT对象的双向绑定操作。
这是第一次开坑图解VUE系列，本人绘图功底只限于思维导图水平所以......辣眼睛就不要在意了！