Vue3响应式个人理解（七）Watch实现原理

文章参考了霍春阳的《Vue.js设计与实现》，是自己在阅读过程中的一些思考和理解

watch的本质就是监视一个响应式数据，当数据发生变化时，执行相应的函数或操作。
例子：

watch(obj, () => {/**/})
obj.value++

假设obj就是一个响应式，当他的值发生变化时，执行回调函数。
回顾effect函数的原理，有个调度器属性，可以将effect交给调度器执行，不难想到可以在调度器中执行自己的回调函数。再次回顾之前的effect函数，如果在effect函数中读取响应式数据，那么会建立副作用函数和响应式数据之间的联系，这样在改变响应式数据的时候，就能触发副作用函数的再次执行，这时，如果存在调度器函数，就会执行调度器函数了。综上，调度器就相当于用于执行自己函数的一个回调函数。代码如下：
简单版本：

function watch(source, cb) {
  // 读取数据，建立联系
  effect(() => source.value, {
    // 添加调度器，执行回调函数
    scheduler() {
      cb()
    }
  })
}
// 监视数据，传入回调函数
watch(proxy, () => {
  console.log('change?')
})
// 改变数据，触发副作用函数，从而执行调度器，进而执行自己的函数，达到监视的作用
proxy.value ++

在简单版本中，我们在effect函数中读取响应式数据，同时加上调度器且中调度器中执行传入的监视数据变化后的函数，这样在effect函数中，就能将响应式数据和副作用函数绑定，由于存在调度器，在改变数据的时候，执行调度器，进而执行传入的回调函数，达到数据监视和函数执行的目的。

但是在上述的简单版本中，只能监视对象中的一个数据，为了达到监视整个对象的目的，我们需要遍历整个对象，读取整个对象中的数据，从而将每个数据都与其副作用函数绑定，这样在改变对象中的任意一个数据时，都能执行传入的回调函数。代码如下：

function traverse(value, seen = new Set()) {
  // 如果value不再是对象，或者已经被读取过了，则返回
  if(typeof value !== 'object' || value === null || seen.has(value)) return
  // 将要读取的对象添加到集合中，防止死循环
  seen.add(value)
  // 遍历对象的每个值，如果值不为对象了，那么这里就相当于在读取响应式数据了
  for(const k in value) {
    traverse(value[k], seen)
  }
  return value
}
function watch(source, cb) {
  effect(() => traverse(source), {
    scheduler() {
      cb()
    }
  })
}
watch(proxy, () => {
  console.log('change?')
})
proxy.text ++

完善一点的watch，添加了遍历对象的函数，作用如上所述。

Watch一个函数

function watch(source, cb) {
  let getter
  // 判断一下传入的是不是函数
  if(typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }
  effect(() => getter(), {
    scheduler() {
      cb()
    }
  })
}

然而，传入的函数也是读取响应式数据，感觉有点鸡肋，怪怪的。例子：

watch(() => obj.value, () => console.log('xxxx'))

回调函数中的新值和旧值

function watch(source, cb) {
  let getter
  if(typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }
  let oldValue, newValue
  const effectfn = effect(() => getter(), {
    // 加入lazy属性
    lazy: true,
    scheduler() {
      // 当数据发生变化时，执行effectfn，同时将新值赋予newValue
      newValue = effectfn()
      // 执行watch的回调函数，将newValue和oldValue传入
      cb(oldValue, newValue)
      // 执行完后将新值赋予旧值，等待下次数据变化
      oldValue = newValue
    }
  })
  // 第一次调用watch时，拿到第一次的值，将作为下一次变化的旧值
  oldValue = effectfn()
}
// 传入读取函数
watch(() => proxy.ok, (oldVal, newVal) => {
  console.log('change?', oldVal, newVal) // 1, 2
})
proxy.ok++

这里有个问题，就是当传入的不是getter函数而是一个响应式数据时，例如传入obj.value。就不能实现watch的功能。这个undifined是我在else模块中执行getter函数得到的结果，从而可以知道，应该是traverse遍历函数的问题。因为如果不是Object对象就直接返回，导致不能在effect函数中执行读取操作，进而无法将其与副作用函数绑定，从而set中没有相应操作。估计是因为简单原理没考虑周全？

立即执行的watch与回调执行时机

立即执行watch是指在执行watch函数时就执行一次callback函数，而原本的watch的在数据发生变化时才执行。在Vue3中，是通过添加属性immediate并设置true来操作的。因此需要在watch实现中对该属性进行判断并执行相应的操作。代码如下：

function watch(source, cb, options = {}) {
  let getter
  if(typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
    console.log(getter())
  }
  let oldValue, newValue
  // 将scheduler封装出去
  const job = () => {
    newValue = effectfn()
    cb(oldValue, newValue)
    oldValue = newValue
  }
  const effectfn = effect(() => getter(), {
    lazy: true,
    scheduler: job
  })
  if(options.immediate) {
    // 当immediate为true时，立即执行job。此时可以的到newValue，oldValue为undefined，合理
    job()
  } else {
    oldValue = effectfn()
  }
}

通过其他配置项可以指定回调函数的执行时机，例如flush属性，可以传递(‘pre’, ‘post’, ‘sunc’)这三个选择。当flush为post时，需要将副作用函数放在微队列中，在DOM更新完毕后再执行回调函数。代码如下（部分）：

 scheduler: () => {
      // 在scheduler中判断参数类型，决定其在何时执行
      if (options.flush === 'post') {
        // 将其放入微任务队列，实现异步延迟执行
        const p = Promise.resolve()
        p.then(job)
      } else {
        job()
      }