<div id="app">
  <span @click="change">{{sum}}</span>
</div>
<script src="./vue2.6.js"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        count: 1,
      }
    },
    methods: {
      change() {
        this.count = 2
      },
    },
    computed: {
      sum() {
        return this.count + 1
      },
    },
  })
</script>

if (opts.computed) {initComputed(vm, opts.computed);}

var watchers = vm._computedWatchers = Object.create(null); 
// 依次為每個 computed 屬性定義一個計算watcher
for (const key in computed) {
  const userDef = computed[key]
  watchers[key] = new Watcher(
      vm, // 實例
      getter, // 用戶傳入的求值函數(shù) sum
      noop, // 回調(diào)函數(shù) 可以先忽視
      { lazy: true } // 聲明 lazy 屬性 標記 computed watcher
  )
  // 用戶在調(diào)用 this.sum 的時候，會發(fā)生的事情
  defineComputed(vm, key, userDef)
}

{
    deps: [],
    dirty: true,
    getter: ƒ sum(),
    lazy: true,
    value: undefined
}

Object.defineProperty(target, key, { 
    get() {
        // 從剛剛說過的組件實例上拿到 computed watcher
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          // 只有dirty了才會重新求值
          if (watcher.dirty) {
            // 這里會求值，會調(diào)用get，會設置Dep.target
            watcher.evaluate()
          }
          // 這里也是個關鍵 等會細講
          if (Dep.target) {
            watcher.depend()
          }
          // 最后返回計算出來的值
          return watcher.value
        }
    }
})

evaluate () {
  // 調(diào)用 get 函數(shù)求值
  this.value = this.get()
  // 把 dirty 標記為 false
  this.dirty = false
}

updateComponent = () => {
  vm._update(vm._render(), hydrating)
}
// 創(chuàng)建一個渲染watcher，渲染watcher初始化時，就會調(diào)用其get()方法，即render函數(shù)，就會進行依賴收集
new Watcher(vm, updateComponent, noop, {}, true /* isRenderWatcher */)

get () {
    // 將當前watcher放入棧頂，同時設置給Dep.target
    pushTarget(this)
    let value
    const vm = this.vm
    // 調(diào)用用戶定義的函數(shù)，會訪問到this.count，從而訪問其getter方法，下面會講到
    value = this.getter.call(vm, vm)
    // 求值結束后，當前watcher出棧
    popTarget()
    this.cleanupDeps()
    return value
 }

// 在閉包中，會保留對于 count 這個 key 所定義的 dep
const dep = new Dep()
 
// 閉包中也會保留上一次 set 函數(shù)所設置的 val
let val
 
Object.defineProperty(obj, key, {
  get: function reactiveGetter () {
    const value = val
    // Dep.target 此時就是計算watcher
    if (Dep.target) {
      // 收集依賴
      dep.depend()
    }
    return value
  },
})

// dep.depend()
depend () {
  if (Dep.target) {
    Dep.target.addDep(this)
  }
}

// watcher 的 addDep函數(shù)
addDep (dep: Dep) {
  // 這里做了一系列的去重操作 簡化掉 
  
  // 這里會把 count 的 dep 也存在自身的 deps 上
  this.deps.push(dep)
  // 又帶著 watcher 自身作為參數(shù)
  // 回到 dep 的 addSub 函數(shù)了
  dep.addSub(this)
}

class Dep {
  subs = []
 
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
}

// watcher.depend
depend () {
  let i = this.deps.length
  while (i--) {
    this.deps[i].depend()
  }
}

class Dep {
  subs = []
  
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
}

{
    subs: [ sum的計算watcher，渲染watcher ]
}

// 在閉包中，會保留對于 count 這個 key 所定義的 dep
const dep = new Dep()
 
// 閉包中也會保留上一次 set 函數(shù)所設置的 val
let val
 
Object.defineProperty(obj, key, {
  set: function reactiveSetter (newVal) {
      val = newVal
      // 觸發(fā) count 的 dep 的 notify
      dep.notify()
    }
  })
})

class Dep {
  subs = []
  
  notify () {
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

update () {
  if (this.lazy) {
    this.dirty = true
  }
}

Object.defineProperty(target, key, { 
    get() {
        const watcher = this._computedWatchers && this._computedWatchers[key]
        if (watcher) {
          // 上一步中 dirty 已經(jīng)置為 true, 所以會重新求值
          if (watcher.dirty) {
            watcher.evaluate()
          }
          if (Dep.target) {
            watcher.depend()
          }
          // 最后返回計算出來的值
          return watcher.value
        }
    }
})