源码搬运工——watch()的实现原理

我不生产代码，只是代码的搬运工，超级有用的干货->

所谓watch()，其本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。举个例子：

watch(obj,()=>{
  console.log('数据变了')
})

obj.foo++

假设obj是一个响应式数据，使用watch（）函数观测它，并传递一个回调函数，当修改响应式数据的值时，会触发该回调函数执行。

实际上，watch（）函数的额实现本质上是利用了effect以及options.scheduler选项，如以下代码：

effect(()  =>{
  console.log(obj.foo)
},{
  scheduler(){
    //当obj.foo发生变化时，会执行调度函数
  }
})

在一个副作用函数里访问一个响应式数据时，我们知道这会在副作用函数与响应式数据之间建立联系，当数据发生变化时，这会导致副作用函数的重新执行，但有一个例外，那就是副作用函数存在scheduler选项，那么，当响应式的数据发生变化时，会触发scheduler调度函数执行，而非直接触发副作用函数执行，从这个角度看，scheduler调度函数就相当于一个回到函数，而watch（）函数的实现就利用了这一特点，下面是最简单的watch（）函数的实现：

//watch函数接受两个数据，source是响应式的数据，cb是回调函数
function watch(source,cb){
  effect(
    //触发读取操作，从而建立联系
    () => source.foo,
    {
      scheduler(){
        //当数据变化时，调用回调函数
        cb()
      }
    }
  )
}

下面，我们可以这样使用watch()函数：

const data = {foo:1}
const obj = new Proxy(data,{})

watch(obj,()=>{
  console.log("数据变化了")
})

obj.foo++

这段代码可以正常的工作，但是可以注意到在watch（）函数的实现中，只可以观测到obj.foo的值，为了让watch函数具有通用性，我们需要封装一个通用的读取操作：

function watch(source,cb){
  effect(
    //调用自定义函数递归数据
    () => traverse(source),
    {
      scheduler(){
        //当数据变化时，调用回调函数cb
        cb()
      }
    }
  )
}

function traverse(value,seen = new Set()) {
  //如果读取的数据时原始值，或者已经读取过了，那么什么也不做
  if(typeof value !== 'object' || value === null || seen.has(value)) return
  //将数据添加到seen中，代表遍历地读取过了，避免计入死循环
  seen.add(value)
  //假设value是一个对象，暂时不考虑其他结构
  for(const key in value){
    traverse(value[key],seen)
  }

  return value
}

通过上述方式，在watch内部的effect中调用traverse函数进行递归的操作读取数据，这样就可以读取对象上的任意属性，而当任意属性变化时都能触发回调函数执行。

本文章所采用的例子源自书籍《vue.js设计与实现》