实现vue3源码-Computed

在 Vue 3 中, computed 是一个用于定义和计算响应式计算属性的函数。它可以根据依赖的响应式数据进行自动更新，并且具有缓存机制，只有当依赖的数据发生变化时，才会重新计算计算属性的值。使用computd函数定义计算属性时，需要传入一个计算函数，该函数返回计算属性的值。Vue 3 内部会创建一个专门用于计算属性的响应式对象，并自动追踪其依赖关系，当依赖的数据发生变化时，会重新计算计算属性的值。

实现computed基本功能

  it("happy path", () => {
        const user = reactive({
            age: 1
        })

        const age = computed(() => {
            return user.age
        })

        expect(age.value).toBe(1)
    })

来实现一下computed函数, 当我们调用computed函数时，会创建一个类，我们在读取.value时会触发getter传入的计算函数，从而将结果返回出去

class computedRefImpl {
    private _getter
    constructor(getter) {
        this._getter = getter
    }
    get value() {
        return this._getter()
    }
}


export function computed(getter) {
    return new computedRefImpl(getter)
}

完善computed功能

接下来实现一下computed的脏值检查，懒值，以及响应式处理等功能

懒值处理

当我们不读取value时，不会触发getter函数

 it("center ability", () => {
            const user = reactive({
                age: 1
            })
            const getter = jest.fn(() => {
                return user.age
            })

            const cvalue = computed(getter)
            //lazy 
            expect(getter).not.toHaveBeenCalled()
            expect(cvalue.value).toBe(1)
            expect(getter).toBeCalledTimes(1)

        })

脏值检测

在computed很重要的一个功能就是缓存，对于没改变的数据缓存，提高性能,这里就用到了脏值检查机制

单测

   it("center ability", () => {
            const user = reactive({
                age: 1
            })
            const getter = jest.fn(() => {
                return user.age
            })

            const cvalue = computed(getter)
            //lazy 
            expect(getter).not.toHaveBeenCalled()
            expect(cvalue.value).toBe(1)
            expect(getter).toBeCalledTimes(1)

            //脏值检测
            cvalue.value
            expect(getter).toBeCalledTimes(1)
            expect(cvalue.value).toBe(1)
        })

当我们读取cValue的值时，我们没有改变它，所以不触发getter，用缓存的值返回，所以应该让getter只调用一次

class computedRefImpl {
    private _getter
    private _dirty = true
    private _value
    constructor(getter) {
        this._getter = getter
    }
    get value() {
        if (this._dirty) {
            this._dirty = false
            this._value = this._getter()
        }
        return this._value
    }
}

用一个dirty变量来控制get value的操作是否更新值

响应式处理

当我们修改属性的值的时候，会触发set操作，我们也会触发getter，那么我们需要将dirty设置为true,然后重置value的值，这里就涉及到了track依赖收集以及trigger依赖触发,我们想一想在触发一依赖时会发生什么，要取出dep里面的依赖，取出来执行，但是如果有配置项scheduler时，就会执行scheduler,那么我们可以把修改dirty的值在scheduler中执行

   it("center ability", () => {
            const user = reactive({
                age: 1
            })
            const getter = jest.fn(() => {
                return user.age
            })

            const cvalue = computed(getter)
            //lazy 
            expect(getter).not.toHaveBeenCalled()
            expect(cvalue.value).toBe(1)
            expect(getter).toBeCalledTimes(1)

            //脏值检测
            cvalue.value
            expect(getter).toBeCalledTimes(1)
            expect(cvalue.value).toBe(1)

            //响应式
            user.age = 2
            expect(cvalue.value).toBe(2)
            expect(getter).toBeCalledTimes(2)

        })

接着实现以下功能, 我们在内部实现一个effect函数， reactiveEffect是我们在最初创建reactive对象时写的类，可以做依赖收集，调用等功能，详情可以看第一篇手写vue3系列的博客， 这里我们每次run的时候进行依赖收集，当值未改变时，我们直接返回缓存的值，不会进行依赖收集，当我们的值更新时，会触发trigger函数，trigger函数会将我们的dep中的依赖拿出来执行，因为我们传入了scheduler,所以会执行scheduler，这个时候dirty就为true了，依赖执行完之后，又会走到get操作

这个时候就触发了get value 此时dirty值为true，所以值会进行更新操作

class computedRefImpl {
    private _getter
    private _dirty = true
    private _value
    private _effect
    constructor(getter) {
        this._getter = getter
        this._effect = new reactiveEffect(getter, () => {
            if (!this._dirty) {
                this._dirty = true
            }
        })

    }
    get value() {
        if (this._dirty) {
            this._dirty = false
            this._value = this._effect.run()
        }
        return this._value
    }
}

结语

从reactive effect readonly 以及对应的一些工具类函数，再到ref以及配套工具函数，再到computed，响应式原理系列也就完了，后面会结合运行时开发