往期内容：

《Vue进阶教程》第十六课：深入完善响应式系统之单例模式

《Vue进阶教程》第十七课：支持分支切换

《Vue进阶教程》第十八课：避免死循环

《Vue进阶教程》第十九课：computed初步实现

《Vue进阶教程》第二十课：lazy懒执行

《Vue进阶教程》第二十一课：支持缓存

《Vue进阶教程》第二十二课：自定义更新(调度器)

《Vue进阶教程》第二十三课：渲染计算属性的结果

《Vue进阶教程》第二十四课：优化

《Vue进阶教程》第二十五课：watch基本概念

《Vue进阶教程》第二十六课：实现侦听函数

1) 基本实现

如果第一个参数不是副作用函数, 可以将其包装成一个副作用函数

javascript">function watch(source, cb) {let getterif (typeof source === 'function') {getter = source} else {getter = () => source}effect(getter, {scheduler() {cb()},})
}

由于并没有触发代理对象的取值操作, 因此不会收集依赖

考虑实现一个函数, 遍历访问source中的每一个属性

javascript">function traverse(value) {for (const k in value) {// 将代理对象的每个属性访问一次value[k]}
}
function watch(source, cb) {let getterif (typeof source == 'function') {getter = source} else {getter = () => traverse(source)}effect(getter, {scheduler() {cb()},})
}

2) 支持嵌套

如果代理对象中存在嵌套情况

1. 在reactive中要递归为嵌套的对象创建代理
2. 在traverse中要递归访问嵌套的属性

示例

javascript">get(target, key) {if (key == '__v_isReactive') return true // 新增// console.log(`自定义访问${key}`)// 收集依赖track(target, key)if (typeof target[key] == 'object') {// 递归处理对象类型return reactive(target[key])}return target[key]
},

javascript">function traverse(value) {for (const k in value) {if (typeof value[k] == 'object') {traverse(value[k])} else {// 将代理对象的每个属性访问一次value[k]}}
}

3) 解决循环引用问题

如果按上述写法, 会出现递归循环引用, 陷入死循环

什么是循环引用

如果一个对象的某个属性引用自身, 在递归时会死循环

问题示例

javascript">const state = reactive({ name: 'xiaoming', address: { city: '武汉' } })
state.test = state// watch接收响应式对象的情况
watch(state, () => {console.log('该函数默认不执行, 只有状态更新时执行...')
})setTimeout(() => {// 侦听对象时, 是深度侦听state.address.city = '北京'
}, 1000)

以上问题可以简化为

javascript">const obj = {foo: 'foo',
}
// obj的一个属性引用obj本身, 出现循环引用问题
obj.bar = objfunction traverse(value) {for (const k in value) {if (typeof value[k] == 'object') {traverse(value[k])} else {// 将代理对象的每个属性访问一次value[k]}}
}traverse(obj)

为了避免递归循环引用陷入死循环, 改造traverse方法

javascript">function traverse(value, seen = new Set()) {// 如果这个对象已经被遍历过了, 直接返回if (typeof value !== 'object' || seen.has(value)) return// 将遍历的对象记录下来, 再递归时判断seen.add(value)for (let key in value) {// 这里取值, 会触发proxy对象的getter操作traverse(value[key], seen)}
}