手撸vue3核心源码——响应式原理(reactive以及effect)

前端不是渣男

已于 2023-07-20 15:04:54 修改

阅读量506

点赞数 3

文章标签： typescript vue.js

于 2023-07-18 21:48:09 首次发布

本文链接：https://blog.csdn.net/qq_63204040/article/details/131795202

版权

vue3使用这么久以来,知识点也是不太扎实,鉴于此与几位志同道合的朋友,一起手撸一遍vue3的核心源码，从0到1实现属于自己的vue3

本篇章将作为新的起点，主要以图解以及代码的形式呈现给大家，一方面增强自己对这方面知识的理解，另一方面希望更多的前端小伙伴们能够真正理解vue3的底层实现逻辑

vue3响应式的核心

vue3响应式的核心在于reactive创建响应式数据对象, effect(副作用函数)与响应式数据对象进行关联实时监听响应式数据的变化,达到数据的实时更新

reactive

背景分析

在vue3的源码中，摒弃了vue2所使用的Object.defineProperty对数据进行劫持,转而应用es6中新增的Proxy 对数据进行代理

对比来看，在vue2中Object.defineProperty他只可以对对象已经拥有的属性进行劫持，不可以新增属性, 而且对于数组对象，它只有7个方法，其他的需要$set重写

相比之下，Proxy 提供了更强大且灵活的拦截能力,

1.Proxy 可以直接监听数组的所有操作，包括 push、pop、splice 等，并触发相应的变化通知

2. 可以在访问和修改属性时动态地拦截和处理，无需预先定义响应式属性

3.拦截能力更加精细，可以根据需要选择具体拦截的操作，避免不必要的劫持，从而提高性能

鉴于此，vue3直接选择了Proxy

代码实现

先来实现一下reactive最基本的结构,这样我们就实现了reactive最基本的结构, 我们知道要完成响应式的操作,还需要与effect搭配一起使用，最核心的东西就是如何对依赖收集以及触发依赖


export function reactive(raw) {
    return new Proxy(raw, {
        get(target, key) {
            const res = Reflect.get(target, key)
            //todo收集依赖

            return res
        },
        set(target, key, value) {
            const res = Reflect.set(target, key, value)
            //todo触发依赖

            return res
        }
    })
}

effect

effect的核心是当响应式数据发生改变时,会被重新执行,以便保持数据和界面的同步, 当我们的effect函数执行时，就会将里面的逻辑再执行一遍,关键在于run函数的调用

class reactiveEffect{
    private _fn: any
    constructor(fn) {
        this._fn = fn
    }
    run() {
        this._fn()
    }
}

export function effect(fn) {
    const _effect = new reactiveEffect(fn)
    _effect.run()
}

到此我们也写出了最基本的副作用函数，接下来开始实现track以及trigger

track

track的作用是收集依赖,我们先来看一下如何targetMap数据的格式

可以看到是一层一层建立起对应关系的，而dep是存放我们依赖的地方，当触发依赖时可以将里面的依赖取出来执行

代码实现

const targetMap = new WeakMap()
export function track(target, key) {
    const depMap = targetMap.get(target)
    if (!depMap) {
        const depMap = new Map()
        targetMap.set(target, depMap)
    }
    const dep = depMap.get(key)
    if (!dep) {
        const dep = new Set()
        depMap.set(key, dep)
    }
}

通过这样，一个track函数就已经实现了,当我们第一次进入收集依赖时是没有depMap以及dep的，所以初始化的时候要创建，我们结合reactiveEffect来把依赖收集进去

class reactiveEffect {
    private _fn: any
    constructor(fn) {
        this._fn = fn
    }
    run() {
        activeEffect = this
        this._fn()
    }
}

let activeEffect
export function effect(fn) {
    const _effect = new reactiveEffect(fn)
    _effect.run()
}

const targetMap = new WeakMap()
export function track(target, key) {
    const depMap = targetMap.get(target)
    if (!depMap) {
        const depMap = new Map()
        targetMap.set(target, depMap)
    }
    const dep = depMap.get(key)
    if (!dep) {
        const dep = new Set()
        depMap.set(key, dep)
    }
    dep.add(activeEffect)
}

我们在最外层创建一个全局对象activeEffect,当run(）执行时，就可以将依赖项给我们的activeEffect,这样可以解耦,接下来让我们实现trigger函数

trigger

trigger函数是为了触发依赖, 所以我们的步骤是，取出依赖然后执行,到此我们的trigger函数也已经实现了

export function trigger(target, key) {
    const depMap = targetMap.get(target)
    const dep = depMap.get(key)
    for (const _effect of dep) {
        _effect.run()
    }
}

完善effect

当我们调用effect的时候需要完成这样一个功能

我们在调用effect时，返回一个runner函数,它可以拿到我们传给effect的fn，然后调用fn获取它的返回值

export function effect(fn) {
    const _effect = new reactiveEffect(fn)
    const runner: any = _effect.run.bind(_effect)
    runner._effect = _effect
    return runner
}

这里为什么要用bind，是因为这里涉及到一个this指向问题,因为我们run函数里面的this是当前实例，所以runner函数的this指向effect,这一层我们就拿到了runner, 而我们的runner身上挂的有_effect实例，所以fn也拿到的，接着实现fn的返回值

class reactiveEffect {
    private _fn: any
    constructor(fn) {
        this._fn = fn
    }
    run() {
        activeEffect = this
        return this._fn()
    }
}

我们直接返回this._fn()即可

到此，基本的一个依赖收集，依赖触发的机制就已经完成了，实现了vue3的响应式的核心源码。

effect.ts

class reactiveEffect {
    private _fn: any
    constructor(fn) {
        this._fn = fn
    }
    run() {
        activeEffect = this
        return this._fn()
    }
}

let activeEffect
export function effect(fn) {
    const _effect = new reactiveEffect(fn)
    const runner: any = _effect.run.bind(_effect)
    runner._effect = _effect
    return runner
}

const targetMap = new WeakMap()
export function track(target, key) {
    const depMap = targetMap.get(target)
    if (!depMap) {
        const depMap = new Map()
        targetMap.set(target, depMap)
    }
    const dep = depMap.get(key)
    if (!dep) {
        const dep = new Set()
        depMap.set(key, dep)
    }
    dep.add(activeEffect)
}

export function trigger(target, key) {
    const depMap = targetMap.get(target)
    const dep = depMap.get(key)
    for (const _effect of dep) {
        _effect.run()
    }
}

reactive.ts


import { track, trigger } from './effect'
export function reactive(raw) {
    return new Proxy(raw, {
        get(target, key) {
            const res = Reflect.get(target, key)
            //todo收集依赖
            track(target, key)
            return res
        },
        set(target, key, value) {

            const res = Reflect.set(target, key, value)
            //todo触发依赖
            trigger(target, key)
            return res
        }
    })
}