手抄Vue（八）—— 封装Watcher和Dep类

当我回看自己的博客时，发现有些写得很不好。拿写个更好的柯里化函数那篇来说，原本简简单单的几行代码，被我一写，成了巨长一篇，实不相瞒，连我自己都懒得看。这和杨洋大佬的博客形成了鲜明对比，也让我想起了 Linus 大神说的 —— Talk is cheap. Show me the code. 所以我决定换个简洁一点的方式来记我的笔记，虽然不知道会不会矫枉过正，但，就先这么着吧。

watcher.js

import { pushTarget } from './dep'

export default class Watcher {
  getter
  cb

  constructor (expOrFn, depFn) {
    this.cb = depFn
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = () => {
        if (/\./.test(expOrFn)) {
          let helpData = data
          expOrFn.split('.').forEach((path) => {
            helpData = helpData[path]
          })
          return helpData
        }
        return data[expOrFn]
      }
    }
    this.get()
  }

  get () {
    pushTarget(this)
    this.getter()
  }

  addDep (dep) {
    dep.addSub(this)
  }

  update () {
    this.getter()
    this.cb && this.cb()
  }
}

Watcher 的主要功能是从原来的 myWatch 方法移植过来的，即对被观察对象求值，达到触发属性 getter 并辅助收集依赖的作用。

这时调用的方式也从 myWatch(render, render) 变成了 new Watcher(render)，实例化 Watcher 时如果传递了第二个参数作为回调函数，依赖执行时会执行传入的回调函数，如果没传，实际上只执行了传入的渲染函数。

dep.js

export default class Dep {
  subs = []

  constructor () {
  }

  depend () {
    Dep.target.addDep(this)
  }

  addSub (sub) {
    this.subs.push(sub)
  }

  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

Dep.target = null

export function pushTarget (_target) {
  Dep.target = _target
}

depend 实例方法用来收集依赖，notify 实例方法用来触发依赖的执行。经过了 depend => watcher.addDep => addSub （watcher 表示 Watcher 的一个实例）之后，subs 中收集的依赖实际上都是 Watcher 实例，再经过 notify => watcher.update 之后就可以触发实例化 Watcher 时的渲染函数和回调函数（如果有）的执行了。

observer.js

// ......
import Dep from './dep'

// ......

export function defineReactive (obj, key, val) {
  const deps = new Dep();

  // ......

  Object.defineProperty(obj, key, {
    get () {
      // ......
      // 替代原来收集依赖的方式
      deps.depend()
      // ......
    },
    set (newVal) {
      // ......
      // 替代原来触发依赖执行的方式
      deps.notify()
    }
  })
}

相应地，在Object.defineProperty 方法定义的 getter 和 setter 中使用 Dep 类来修改一下收集和触发依赖的方式。