手撸 Vue 3 的响应式 “丐版”

我们都知道了在 Vue2 中的响应式是通过 Object.defineProperty 重写 get set，进行数据劫持来实现的。那么 Vue3 中是如何实现的呢？

要了解响应式，我们先认识一下副作用函数。 本文参考自霍春阳大大的《Vue.js 设计与实现》

副作用函数

副作用函数指的就是会产生副作用的函数（听君一席话，胜读一席话 🤣），代码如下

let a = 1

function effect(x) {
    a++
    return a + x
}
effect(1) // 2
console.log(a) // 2

effect 函数中执行自身逻辑中，修改了全局变量 a，对其他使用的产生了影响，那么这就是一个副作用，这种会影响除了自身局部变量以外的变量的函数，我们称之为 “副作用函数”

响应式数据

理解了副作用函数，那么我看来看一下什么是响应式。假设在一个副作用函数读取一个变量的属性并赋值，代码如下

let obj = {
    text: 'hello effect'
}

function effect() {
    document.body.innerHTML = obj.text
}
effect()

effect 函数执行后，页面会显示 hello effect，同时当我们再次修改 obj.text = "hello world" ，effect 再次执行，页面同步刷新成为 hello world，那么我们就实现了数据的响应式。 接下来让我们来尝试实现以下最基本的响应式吧。

no bb，show me the code! 🤐

响应式数据的基本实现

由上面可知，只要我们再 obj.text 每次变化的时候，重新执行 effect 不就好了么？是的就这么简单。 核心就是代理对象 “Proxy” 来实现。代码如下

// 原始数据
let data = {
    text: 'hello effect'
}
// 用于存储副作用函数
let bucket = new Set()
// 原始数据代理
let obj = new Proxy(data, {
    // 拦截读取
    get(target, key) {
        // 将副作用函数存入 bucket
        bucket.add(effect)
        return target[key]
    },
    // 拦截设置值
    set(target, key, value) {
        target[key] = value
        // 执行副作用函数
        bucket.forEach((fn) => fn())
        return true
    }
})
const effect = () => {
    document.body.innerHTML = obj.text
    console.log('effect run')
}
effect()
setTimeout(() => {
    obj.text = 'hello world'
}, 1000)

页面展示 hello effect ，1s 之后页面展示 hello world ，这样我们就实现了最简单的响应式。

但是是有问题的，我们执行 obj.desc = 'aaa' 也会触发副作用函数，原因在于这句 activeEffect = effectFn ，可以通过栈来解决。

并且当先副作用函数执行之前没有清理之前收集的依赖。下面我们进行优化

let obj = {
    flag: true,
    text: 'hello world'
}
let activeEffect
let effectStack = []
let bucket = new WeakMap()
let data = new Proxy(obj, {
    get(target, key) {
        track(target, key)
        return target[key]
    },
    set(target, key, value) {
        target[key] = value
        trigger(target, key)
    }
})

function effect(fn) {
    let effectFn = () => {
        // 当前副作用函数执行之前，清理其他属性对它依赖，因为副作用函数执行的时候会重新进行依赖收集
        cleanup(effectFn)
        activeEffect = effectFn
        // 调用之前副作用函数入栈
        effectStack.push(effectFn)
        fn()
        // 还原 activeEffect
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
    }
    // activeEffect.deps 用来存储所有与该副作用函数相关的依赖集合
    effectFn.deps = []
    effectFn()
}

function cleanup(effectFn) {
    // 将当前 effect，在所有副作用set中删除
    effectFn.deps.forEach((deps) => {
        deps.delete(effectFn)
    })
    effectFn.deps.length = 0
}

function track(target, key) {
    if (!activeEffect) return
    let depsMap = bucket.get(target)
    if (!depsMap) bucket.set(target, (depsMap = new Map()))
    let deps = depsMap.get(key)
    if (!deps) depsMap.set(key, (deps = new Set()))
    deps.add(activeEffect)
    activeEffect.deps.push(deps)
}

function trigger(target, key) {
    let deps = bucket.get(target)?.get(key)
    if (deps) {
        // 执行的时候会 cleanup 会触发 delete，而副作用函数会触发依赖收集导致for死循环
        // 需要使用一个新的 set 进行处理
        let effectRun = new Set()
        deps.forEach((fn) => {
            // 防止副作用函数在执行的过程中再次触发 trigger 而死循环
            fn !== activeEffect && effectRun.add(fn)
        })
        effectRun.forEach((fn) => fn())
    } else {
        return
    }
}
effect(() => {
    console.log(data.flag ? data.text : 'none')
}) // "hello world"
data.text = 'aaa' // "aaa"
data.flag = false // "none"
data.text = 'bbb' // 不会再次触发副作用函数
// 嵌套的 effect
effect(() => {
    data.count++
    console.log('嵌套的 effect count:', data.count)
})

data.count++

这样我们一个基本的数据响应式就完成了。

调度执行

有时候我们控制副作用函数的执行时机，那我们就需要对副作用注册函数进行扩展，增加一个参数，代码如下

// 省略部分重复代码
function effect(fn, options = {}) {
    let effectFn = () => {
        // ...
    }
    // 新增代码    挂载 options
    effectFn.options = options
}

function trigger(target, key) {
    // ...
    effectRun.forEach((fn) => {
        // 有调度器，不执行函数交给 scheduler
        if (fn?.options?.scheduler) {
            fn.options.scheduler(fn)
        } else {
            fn()
        }
    })
}

// 案例
effect(() => {
    console.log('count:', data.count)
}, {
    scheduler(fn) {
        setTimeout(fn, 1000)
    }
})

计算属性 computed

结合上面的副作用函数，和 options 参数，我们就可以来实现一个有趣的功能--计算属性

现在我们看到 effect 函数注册之后时立即执行的，我们需要改造一下，用于后面的使用，其实就是另一个参数 lazy

// 省略部分代码
function effect(fn, options = {}) {
    const effectFn = () => {
        // ...
        const res = fn();
        // ...
        return res
    }
    // 没有 lazy 就直接执行，有的话就不执行
    if (!options.lazy) {
        effectFn()
    }
    return effectFn
}

let effectFn = effect(() => data.count + 2, {
    lazy: true,
})
effectFn() // 2
data.count++
effectFn() // 3

现在就可以来实现一个计算属性，首先定义一个 computed 函数，接受一个 getter 函数作为参数，我们将这个 getter 作为副作用函数来返回。

function computed(getter) {
    let effectFn = effect(getter)

    const obj = {
        get value() {
            return effectFn()
        }
    }
    return obj
}
let count = computed(() => data.count * 2)

count.value // 2
data.count = 2
count.value // 4

上面已经实现了基本的 computed，我们都知道，计算属性是有缓存的，而我们上面的实现，是每次调用都会去进行计算，现在我们增加一个 dirty 检测。

function computed(getter) {
    let value
    // 标记是否需要重新计算
    let dirty = true
    let effectFn = effect(getter, {
        // 副作用函数执行的时候，说明依赖的数据发生了变化
        scheduler() {
            dirty = true
        }
    })

    const obj = {
        get value() {
            if (dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

先写这么多后面，后面继续完善 computed 和 watch 🤐