vue

所谓双向绑定，就是数据变化了，视图也随之改变，同时，视图改变了，数据也会变化。这是MVVM模式的一显著特征

之前对于双向绑定，只是简单，很表面上的认识，知道vue的数据双向绑定主要通过Object.defineProperty()方法来进行数据劫持以及发布者-订阅模式来实现的，但是如何进行数据劫持呢？发布订阅者模式又是什么呢？等等问题，需要明确。。。

最近花了点时间，结合源码（vue2），重新学习分析了下，在此作一下总结笔记，供个人进一步理解记忆，同时也欢迎大家阅读评论，指出问题。相关的一些笔记是在学习了黄轶老师的课程后记录的，很不错，推荐一波

先来总结一下：

vue在初始化init过程中，会对data，props中的数据进行初始化。对props初始化（initProps），主要执行了defineReactive对props中定义的数据进行响应式处理，执行proxy对数据做了代理；对data的初始化（initData），也是执行了proxy做数据代理，然后执行observe函数，对数据进行响应式化。

这个observe函数，就是创建观察者，new 一个Observer，在new这个Observer之前，会先检查是否有_ob_这个属性，是否已经对数据响应式处理过了，如果处理过了，直接取缓存，如果没有处理过，再去new Observer创建观察者。

这个Observer是一个封装好的构造函数，在这里面会处理传入的数据，如果是数组，会去遍历数组，然后对数组的每一项执行obeserve函数,如果是对象，就执行walk函数，将对象的每一个key作为参数传入defineReactive函数进行响应式处理

这个defineReactive函数就是对 Object.defineProperty的一个封装，给每一个属性加上一个getter和setter，并且在其中实例化（new Dep）一个dep对象。在getter中执行dep.depend方法做依赖收集，在setter中执行dep.notify方法做派发更新

dep.depend方法，会执行构造函数Dep中的depend方法，在depend方法中如果存在Dep.target就会执行Dep.target.addDep(this)，这个Dep.target即是当前正在处理的watcher，最后会把这个watcher保存到一个subs数组中，这就是依赖收集，收集watcher

当数据发生修改时，就会触发setter，执行dep.notify方法进行派发更新，就会遍历subs，让subs中收集的每一个watcher执行update函数，进行相对应的更新。