面试官：竟然用广度优先搜索实现Vue的watch？有意思...

1.# 两种watch的基本用法

1.1# 通过函数回调监听数据

最基本的用法是给watch指定一个回调函数并返回你想要监听的响应式数据。

const state1 = reactive({
  name: '前端胖头鱼',
  age: 100
})

watch(() => state1.age, () => {
  console.log('state1的age发生变化了', state1.age)
})

state1.age = 200

setTimeout(() => {
  state1.age = 300
}, 500)

1.2# 直接监听一个对象

还可以直接监听一个响应式对象来观测它的变化。

const state1 = reactive({
  name: '前端胖头鱼',
  age: 100,
  children: {
    name: '胖小鱼',
    age: 10
  }
})

watch(state1, () => {
  console.log('state1发生变化了', state1)
})

state1.age = 200

setTimeout(() => {
  state1.children.age = 100
}, 500)

2.# 实现watch最核心的点

其实watch的底层实现非常简单，和computed一样都需要借助任务调度。

简单来说就是感知数据的变化，数据发生了变化就执行对应的回调，那么怎么感知呢？

const state = reactive({
  name: '前端胖头鱼'
})

useEffect(() => {
  // 原本state发生变化之后，应该执行这里
  console.log(state.name)
}, {
  // 但是指定scheduler之后，会执行这里
  scheduler () {
    console.log('state变化了')
  }
})

state.name = '胖小鱼'

聪明的你肯定也猜到了，scheduler不就是天然感知数据的变化的工具吗？

没错，watch的实现少不了它，来吧，搞起！！！

3.# 支持两种使用方式

3.1 支持回调函数形式

const watch = (source, cb) => {
  effect(source, {
    scheduler () {
      cb()
    },
  })
}

// 测试一波
const state = reactive({
  name: '前端胖头鱼',
})

watch(() => state.name, () => {
  console.log('state.name发生了变化', state.name)
})

state.name = '胖小鱼'

3.2 支持直接传递响应式对象

不错哦！第一种方式已经初步实现了，接下来搞第二种。

第二种直接传入响应式对象的方式和第一种传入回调函数并指向响应式数据的区别是什么？

在于我们需要手动遍历这个响应式对象使得它的任意属性发生变化我们都能感知到。

3.3 广度优先搜索遍历深层嵌套的属性

此时就到了这篇文章装逼(额~~)的点了。如果想访问一个深层嵌套对象的所有属性，最常见的做法就是递归。

如果你想在面试的过程中秀一波，我觉得使用广度优先搜索是个不错的主意（狗头脸