vue3剖析:响应式原理——effect

  • A+
所属分类:Web前端
摘要

源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivityref:
reactive:
computed:
effect:
operations:提供TrackOpTypes和TriggerOpTypes两个枚举类型,供其他模块使用


响应式原理

源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity

模块

ref:
reactive:
computed:
effect:
operations:提供TrackOpTypes和TriggerOpTypes两个枚举类型,供其他模块使用

剖析

Vue2响应式原理

什么是响应式数据?即A依赖于B数据,当B值发生变化时,通知A。很显然,这里应该使用观察者模式
在vue2中的响应式原理:剖析Vue原理&实现双向绑定MVVM
上面的文章将整个Vue的大致实现都分析了,就响应式这块来说,大概的逻辑是这几个模块Observer,Watcher,Dep。
Observer负责通过defineProperty劫持数据Data,每个被劫持的Data都各自在闭包中维护一个Dep的实例,用于收集依赖着它的Watcher【即观察者】(都实现了一个update方法),被收集的Watcher存入Dep实例的subs数组中。如果Data是对象,则递归搜集。
Dep维护一个公共的Target属性,在触发劫持前,将Target设置为当前Watcher, 然后触发getter将Target(Watcher)收集到subs中。然后再将Target置为null
Data数据变更的时候触发setter,然后从Data维护的Dep实例的subs数组中将Watcher取出来一一执行其update方法。如果变更的值是对象,再劫持之。
用一个最简单的伪代码来说明(省略掉了对值是复杂数据的处理,原理是一样的)

// Vue2响应式原理的基本使用(伪代码) data = { age: 10 }; new Observer(data) // 数据劫持,黑色箭头 new Wachter(target, 'age', function update() { ... }) // 添加观察者,绿色箭头 data.age = 20 // 被观察者变更,通知观察者, 红色箭头 

对应的数据流程如下
vue3剖析:响应式原理——effect

就上面的过程,实际上还是有比较大的问题
1.如果Watcher使用的Data是对象类型,那么Data中所有的子属性都需要递归将Watcher收集,这是个资源浪费。
2.数据劫持和依赖收集是强耦合关系
3.对数组的劫持也没有做好,部分操作不是响应式的。

effect.ts

为了解决vue2的问题,依赖收集(即添加观察者/通知观察者)模块单独出来,就是现在的effect
用来生成/处理/追踪reactiveEffect数据,主要是收集数据依赖(观察者),通知收集的依赖(观察者)。
提供了三个函数主要函数:effect/track/trigger。
effect是将传入的函数转化为reactiveEffect格式的函数
track主要功能是将reactiveEffect添加为target[key]的观察者
trigger主要功能是通知target[key]的观察者(将观察者队列函数一一取出来执行)

effect(fn, options):ReactiveEffect
返回一个effect数据:reactiveEffect函数。
执行reactiveEffect即可将数据加入可追踪队列effectStack,并将当前数据设置为activeEffect,并执行fn,fn执行完毕之后恢复activeEffect。
【注意】:必须要在fn函数中执行track才能将reactiveEffect添加为target[key]的观察者,因为track内部只会处理当前的activeEffect,activeEffect没有值则直接返回

track(target, type, key)
将activeEffect添加为target[key]的观察者,如果activeEffect无值,则直接返回。target[key]数据被缓存到targetMap中以{target-> key-> dep}格式存储,优化内存开销。
当前activeEffect(在调用reactiveEffect函数时会将reactiveEffect设置为activeEffect)添加为target[key]的观察者,被添加到target[key]的观察者队列dep中【dep.add(activeEffect)】
当前target[key]的观察者队列dep也会被activeEffect收集【activeEffect.deps.push(dep)】

trigger(target, type, key, newValue, oldValue, oldTarget)
通知target[key]的观察者,即target-> key-> dep中存放的数据,全部一一取出来执行
如果观察者有提供scheduler则执行scheduler函数,否则执行观察者(函数类型)本身

流程是:
首先要将某个函数fn包裹一层为reactiveEffect函数。
当执行reactiveEffect函数时内部会将当前reactiveEffect函数标记为activeEffect,然后执行fn。
fn内部可以调用track,将activeEffect添加为target[key]的观察者,加入队列dep中。当然activeEffect也收集了target[key]的观察者队列dep。
这时,如果修改target[key]的值,然后调用trigger,触发通知target[key]的观察者。trigger中会将对应的观察者队列中的观察者一一取出执行。

import { effect, track, trigger } from 'vue' let target = {     age: 10 } const fn = () => {     // 将fn对应的reactiveEffect函数添加到target.age的观察者队列     track(target, 'get', 'age')     // 触发target.age的trigger【通知观察者】, 也会执行该函数 } // 将fn函数包裹一层为reactiveEffect函数 const myEffect = effect(fn, { lazy: true }) // myEffect每次执行都会将自己设置为activeEffect,并执行fn函数 // fn内部会将对应的reactiveEffect函数添加到target.age的观察者队列 myEffect() // 设置新值并手动通知target.age的所有观察者 target.age = 20 // 通知target.age的观察者 trigger(target, 'set', 'age') 

结合流程说明看这段代码,数据流图
vue3剖析:响应式原理——effect

理论上来说,将reactiveEffect添加为target[key]的观察者不一定要在fn中进行。但不这样,用户需要手动为target[key]指定观察者,形如

activeEffect = reactiveEffect track(target, 'get', 'age') // 内部会将activeEffect添加为target.age的观察者 activeEffect = null 

为了简化处理,reactiveEffect内部处理为

// reactiveEffect 内部 try {     effectStack.push(effect)     // 当前effect设置为activeEffect     // 第一次track被调用时,该effect会被加入effectStack     activeEffect = effect     // 执行fn的过程中会对activeEffect做处理     return fn() } finally {     effectStack.pop()     activeEffect = effectStack[effectStack.length - 1] }  

在fn执行之前已经将reactiveEffect设置为activeEffect,并且fn执行完毕之后会恢复activeEffect,
这样fn中只需要调用一下track,就将fn对应的reactiveEffect添加为target.age的观察者了,代码如下

// fn const fn = () => {     ...     track(target, 'get', 'age')     return get.age } 

我们将最开始的那个例子改造成一个更加真实的的例子

import { effect, track, trigger } from 'vue' let target = {     _age: 10,     set age(val) {         this._age = val         trigger(this, 'set', 'age')     } } const watcher = () => {     console.log('target.age有更改,则通知我') } const fn = () => {     if(!target._isTracked){         target._isTracked = true         track(target, 'get', 'age')         console.log('添加fn的reactiveEffect函数添加到target.age的观察者队列')     }else{         watcher()     } } fn._isTracked = false  const myEffect = effect(fn, { lazy: true }) myEffect() //打印: '添加fn的reactiveEffect函数添加到target.age的观察者队列' target.age = 20 //打印: '触发target.age的trigger【通知观察者】, 进入此处' 

欢迎造访本人剖析vue3的github仓库