自己的答案

  1. 组件渲染时, 设置组件对应的watcher, watcher设置Dep.target, 将watcher指向全局
  2. 所有data都被Object.definePrototype进行get和set的劫持, 数组重写了7个能改改变数组本身的方法, 设置新的属性也会进行observe监听
  3. render渲染触发在data中的get, 所有data中的属性都单独设置了自己的Dep, Dep使用depend方法收集当前Dep.target指向的watcher
  4. watcher同时使用addDep方法收集对应的dep
  5. 将Dep.target指向的watcher清空
  6. 修改属性时, 触发data中属性的set, 拿到属性对应的Dep, Dep中有对应的watcher, 使用watcher的update方法进行更新
  7. 更新的过程使用nextTick进行调度, 优化性能

参考答案

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过ES5提供的Object.defineProperty()方法来劫持(监视)各个属性的setter,getter，在数据变动的时发布消息给订阅者，触发相应的监听回调。
并且，由于是在不同的数据上触发同步，可以精确的将变更发送发送给绑定的视图，而不是对所有的数据都执行一次检测。

具体的步骤：

  1. 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上getter和setter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
  2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
  3. Watcher订阅者是Observer和compile之间通信桥梁，主要做的事情是：
    • 在自身实例化时往属性订阅器(dep)里面添加自己
    • 自身必须有一个update()的方法
    • 待属性变动dep.notice()通知的时候，能调用自身的update()方法，并触发compile中绑定的回调，则功成身退
  4. MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，通过compile来编译模板指令，最终利用watcher搭起的observer和compile之间的通信桥梁，达到数据变化—-试图更新;视图交互变化(input)—>数据model变更的双向绑定效果


版本比较

vue是基于依赖收集的双向绑定； 3.0版本之前使用Object.definePropetry,3.0新版使用Proxy

  • 1.基于数据劫持/依赖收集 的双向绑定的优点
    • 不需要显示的调用，Vue利用数据劫持+发布订阅，可以直接通知变化并且驱动视图
    • 直接得到精确的变化数据，劫持了属性setter，当属性值改变，我们可以精确的获取变化的内容newValue，不需要额外的diff操作
  • 2.Object.defineProperty的缺点
    • 不能监听数组：因为数组没有getter和setter，因为数组长度不确定，如果太长性能负担太大
    • 只能监听属性，而不是整个对象，需要遍历循环属性
    • 只能监听属性变化，不能监听属性的删减
  • 3.proxy的好处
    • 可以监听数组
    • 监听整个对象不是属性
    • 13种来截方法，强大很多
    • 返回新对象而不是直接修改原对象，更符合immutable；
  • 4.proxy的缺点
    • 兼容性不好，而且无法用polyfill磨平；