手写vue3核心源码——响应式原理(Computed篇)

简介: 手写vue3核心源码——响应式原理(Computed篇)

实现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)
        })

image.png

可以看到我们的单测是通过的,所以刚刚的我们写的基本的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的操作是否更新值

image.png

这样一个图解能够很直观的将功能展示出来


响应式处理

当我们修改属性的值的时候,会触发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,响应式原理系列将会告一段落了,接下来开启新的篇章,继续后面的学习!

相关文章
|
2天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
20 9
|
5天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
14 3
|
8天前
|
缓存 JavaScript UED
优化Vue的响应式性能
【10月更文挑战第13天】优化 Vue 的响应式性能是一个持续的过程,需要不断地探索和实践,以适应不断变化的应用需求和性能挑战。
17 2
|
4天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
11 0
|
JavaScript
Vue -computed传参数
vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text"/> computed:{ newIt...
3032 0
|
2天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
1天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
1天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
5天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
13 6