Vue2——响应式原理

1.数据和视图的同步更新究竟是怎样实现？原理是什么？

通过数据劫持+观察者模式（发布者—订阅者模式）相结合的方式，实现双向绑定——vue的响应式原理。

2.vue内部是如何监听数据的改变？

利用Object.defineProperty -> 监听对象属性的改变（也就是数据劫持）;怎么理解Object.defineProperty？看一下例子（不是vue源码）

const obj = {
      name : 'cgt',
      message: '好的'
    } //相当于data里面的数据

    Object.key(obj).forEach(key => {
      let value = obj[key] 
      //获取obj的每一个属性的值，为defineProperty提供准备
      //defineProperty 给某个对象定义属性  
      Object.defineProperty(obj,key,{
        //当对象属性值改变时，会调用这个函数
        set(newValue) {
          console.log('监听'+key+'改变')
          //这里就可以监听到对象改变时，做出一系列操作，例如告诉dep对象里面的watcher
          value = newValue
          dep.notify()
        },
        //当获取对象属性的值，则会调用这个get函数
        get() {
          console.log('获取'+key+'对应的值')
          //根据解析html代码，渲染时会调用这个get，就可以知道谁在用，把它作为watcher（订阅者）加到dep对象里面
          return value 
        }
      })
    });
     console.log(obj.name) //会调用get
     obj.name = 'cgt1'; //会调用set

3.当数据改变时，Vue如何知道通知哪些人？

通过发布者——订阅者模式来实现；那两者的关系如何呢，可以通过以下例子了解（不是vue源码）

//发布者——订阅者
    class Dep { //发布者
      constructor() {
        this.subs = [] //用来存放该属性数据的订阅者，也就是那个谁用了这个数据
      }
      addSub(watcher) {
        this.subs.push(watcher) //将用这个数据的订阅者加进来，后面方便告诉它们数据变化
      }
      notify() { //在数据劫持中，set函数被调用，则可以在里面调用这个函数
        this.subs.forEach(item=>{
          item.update()
        })
      }
    }

    class watcher { //订阅者
      constructor(name) {
        this.name = name
      }
      update() {
        console.log(this.name + '发送update')
      }
    }

    const dep = new Dep()
    const w1 = new watcher('cgt') //相当用到这个数据的那些地方
    const w2 = new watcher('cgt1')
    dep.addSub(w1)
    dep.addSub(w2)
    //当数据变了，dep直接调用这个函数，告诉所有这个属性数据的地方，需要update
    dep.notify()

4.了解了响应式原理用到的是什么，具体看以下图，详细解释vue中的是如何把数据劫持和观察者模式结合使用的

• 大致流程

1. 首先，使用new Vue()初始化新建一个vue对象，在响应式系统中，new Vue里面不同的属性参数，会走不同的流程；其中data数据，会传入到Observer（观察者对象中），作用是监听劫持所有data属性，通过object.key遍历获取data每个属性，核心主要是用Object.defineProperty 给data每个属性添加set和get方法，并且每个分配构建相关的dep对象，然后监听属性的set和get，如果数据改变，则通知变化给dep。在dep对象里面，会有一个subs数组，用于存放订阅者watcher（也就是用到这个属性数据的地方）
2. new Vue中 el参数，会执行Compile（指令解析器），实现初始化view视图，其中在解析el模板，寻找node文本节点中，如果哪个地方用到data数据的属性，就new watcher()构建一个订阅者对象，因为渲染时会调用到这个data里面的属性，则会触发get，这时候就可以把new的watcher对象push到dep对象的subs数组中。则所有用到这个属性的地方，就全部放在这个subs数组里，方便后面的通知。
3. 那么现在data中每个属性都有一个Dep，这个Dep又包含subs数组，subs数组存放着watcher，当data数据中的某一个属性改变了，会触发set，而Object.defineproperty会监听到该属性的set，去通知对应的dep对象，也就是dep去调用notify函数，这个函数里面会遍历dep中subs数组，去告诉所有使用过这个属性的订阅者（watcher），然后watcher对象中包含vm对象和回调函数，通过vm对象找到相关dom，去触发回调函数更新视图；从而实现数据的响应式。

注释：通过学习视频，总结的响应式原理，如有错误，请多多指教！