40 行原生代码理解 Vue 响应式

Vue 的一大核心是响应式，所以理解她的响应式实现是很重要的。为了帮助最核心的原理理解，我抽丝剥茧于 Vue 源码，实现了一个最简单的响应式系统。明白依赖如何收集；在哪个时机收集的；数据变化了又应该在哪个时机触发视图的更新。

 var data = {foo: 1}
 defineReactive(data)
 function defineReactive(data) {
     let _data = {}
     let dep = new Dep()
     for(let key in data) {
         _data[key] = data[key]
         Object.defineProperty(data, key, {
             get() {
                 dep.depend()
                 return _data[key]
             },
             set(newV){
                 _data[key] = newV
                 dep.notify()
             }
         })
     }
 }
 Dep.target = null
 function Dep(){
     this.subs = new Set()
 }
 Dep.prototype.depend = function () {
     if(Dep.target) {
         this.subs.add(Dep.target)
     }
 }
 Dep.prototype.notify = function () {
     for(let wacther of this.subs) wacther.update()
 }
 function Watcher(update, k) {
     Dep.target = this
     data[k]
     this.update = function () {
         update(data[k])
     }
     this.update()
     Dep.target = null
 }
 new Watcher((v) => {
     console.log('Value is updated to ', v)
 }, 'foo')