在 Vue 3 中, computed 是一个用于定义和计算响应式计算属性的函数。它可以根据依赖的响应式数据进行自动更新,并且具有缓存机制 ,只有当依赖的数据发生变化时,才会重新计算计算属性的值。使用computd函数定义计算属性时,需要传入一个计算函数,该函数返回计算属性的值。Vue 3 内部会创建一个专门用于计算属性的响应式对象,并自动追踪其依赖关系,当依赖的数据发生变化时,会重新计算计算属性的值。
让我们来实现一下computd函数吧
实现computed基本功能
先写一个简单的测试, 这里的逻辑是调用computed函数之后我们能够拿到age的值,因为computed底层借助了ref创建计算属性的响应式对象,所以需要通过.value拿到值
scss
it("happy path", () => {
const user = reactive({
age: 1
})
const age = computed(() => {
return user.age
})
expect(age.value).toBe(1)
})
来实现一下computed函数, 当我们调用computed函数时,会创建一个类,我们在读取.value时会触发getter传入的计算函数,从而将结果返回出去
javascript
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函数,我们来写一下单测
scss
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很重要的一个功能就是缓存,对于没改变的数据缓存,提高性能,这里就用到了脏值检查机制
先来看一下单测
scss
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只调用一次,我们来实现一下,
kotlin
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中执行
看一下单测
scss
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,所以值会进行更新操作
kotlin
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,响应式原理系列将会告一段落了,接下来开启新的篇章,继续后面的学习!