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
}
})
}
写在最后
对于vue3它的响应式代码也不止这些,也做了许多处理, ,有不足的地方希望大家指出来,一起学习,预告一下明天的内容,继续完善相应的功能,比如stop,onStop,readonly等。