实现computed基本功能
先写一个简单的测试, 这里的逻辑是调用computed函数之后我们能够拿到age的值，因为computed底层借助了ref创建计算属性的响应式对象,所以需要通过.value拿到值
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这部分功能是已经完成了的，我们的getter只有在get value时才会执行
脏值检测
在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，响应式原理系列将会告一段落了，接下来开启新的篇章，继续后面的学习!
