vue3响应式的核心
vue3响应式的核心在于reactive创建响应式数据对象, effect(副作用函数)与响应式数据对象进行关联实时监听响应式数据的变化,达到数据的实时更新
编辑
reactive
背景分析
在vue3的源码中，摒弃了vue2所使用的Object.defineProperty对数据进行劫持,转而应用es6中新增的Proxy 对数据进行代理
对比来看，在vue2中Object.defineProperty他只可以对对象已经拥有的属性进行劫持，不可以新增属性, 而且对于数组对象，它只有7个方法，其他的需要$set重写
相比之下，Proxy 提供了更强大且灵活的拦截能力,
1.Proxy 可以直接监听数组的所有操作，包括 push、pop、splice 等，并触发相应的变化通知
- 可以在访问和修改属性时动态地拦截和处理，无需预先定义响应式属性
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等。
