reactive + effect + track + trigger 实现响应式系统

原创

PHP开发工程师

发布于 2022-07-23 10:33:43

7090

发布于 2022-07-23 10:33:43

文章被收录于专栏：thinkphp+vue

effect 方法

基本用法

如果之前了解过 Vue2 的响应式原理，那么对于 Watcher 你一定不会陌生。它是 Vue2 响应式系统中的核心之一，无论是响应式数据，还是 computed 计算属性，watch 监听器，内部都是用了 Watcher。简单来说，它就是把需要用户手动执行的逻辑进行了封装，控制权从用户手中转移到了框架层面，从而实现了数据变化，页面自动更新的响应式系统。

Vue3 中的 effect 方法的作用和 Watcher 一样。

先来看一个简单示例：

<body>
    <div id="app"></div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>

    <script>
        const { reactive, effect } = Vue
        const person = { name: 'kw', age: 18 }
        const state = reactive(person)

        // effect 方法接收一个函数作为参数。
        effect(() => {
          app.innerHTML = 'Hello! ' + state.name
        })

        setTimeout(() => {
          state.name = 'zk'
        }, 1000)
    </script>
</body>
复制代码

打开浏览器，可以发现 effect 方法执行，它接收的回调函数也执行了，于是页面上有了内容：

当 1s 过后，我们修改了 state 的属性，发现页面会自动更新：

这就是响应式系统带给我们的能力。

副作用函数

关于 effect 方法的理解，一直以来都十分模糊，直到看了《Vue.js设计与实现》这本书中的相关介绍。书中将 Vue3 提供的 effect 定义为用来注册副作用函数的一个方法。所谓的副作用函数，可以理解为一个函数执行，会影响到其他函数的执行。比如：

var num = 10

function fn1(){
    num = 20
}

function fn2(){
    // fn2 的本职工作：
    console.log('fn2')
    // fn2 产生的副作用
    num = 30
}
复制代码

fn1 函数的作用是修改 num 变量的值。当 fn2 函数执行时，也修改了 num 的值，于是产生了对 fn1 的影响，也就是产生了副作用。上面示例中 effect 方法所接收的函数参数，就是一个副作用函数：

为了方便清楚描述 effect 方法和它接收的副作用函数，我们将前者依然叫 effect 方法，后者叫作副作用函数 fn。示例中的 fn 其实就是本来要用户自己手动执行的逻辑：当页面渲染时，需要用户手动渲染数据到页面上；当数据更新了，需要用户再手动调用渲染一次。

effect 方法要做的事情，就是将这个原本属于用户的逻辑封装起来，交给框架来管理，在合适的时机去调用。

所谓合适的时机，无非就两个，一是页面首次渲染时，二是它依赖的数据更新时。

在此基础上，结合前面所实现的 reactive 方法，已经初步具备响应式系统的雏形了：页面首次渲染时，执行 effect 方法，将副作用函数 fn 收集起来并执行，此时会用到某些响应式数据，需要记住 fn 所依赖的属性；当其依赖的属性发生变化后，再想办法通知 fn 再次执行。

实现 effect

有了上面的思路，我们先来实现 effect 方法。

// reactivity/src/effect.ts

export function effect(fn) {
  // effect 方法接收一个函数参数，需要将其保存，并执行一次；以后还会扩展出更多的功能，所以将其封装为一个 ReactiveEffect 类进行维护
  const _effect = new ReactiveEffect(fn)
  _effect.run()
}

class ReactiveEffect {
    constructor(fn) {
        this.fn = fn
    }
    
    run() {
        this.fn()
    }
}
复制代码

上面我们实现了 effect 方法和一个新的类 ReactiveEffect。 effect 方法执行，会创建一个 ReactiveEffect 类的实例对象，命名为 _effect。这个类会将副作用函数 fn 保存起来，并立即执行一次。后面要实现的依赖收集功能，收集的就是这个 _effect 实例。其实这个 ReactiveEffect 会更像 Vue2 中的 Watcher，Vue2 中的依赖收集，收集的就是一个 Watcher 类的实例。注意，要区分 effect方法和它创建的 _effect 实例。前者用来注册副作用函数，生成 _effect实例，这才是依赖收集的真正要收集的东西。将 effect 方法暴露出去：

// reactivity/src/index.ts

export { reactive } from './reactive' 
export { effect } from './effect' 
复制代码

到这里，我们实现的 effect 方法也能像原版那样，在初始化时执行一次 fn，并将 fn 保存下来。

track 依赖收集

前面示例中的副作用函数 fn 执行时，用到了一个 name 属性，也就是访问到了响应式对象的属性，所以逻辑会走到 reactive 方法中实现代理那里，对属性 get 操作的监听。此时就可以做依赖收集了。那么我们先去定义一个全局变量 activeEffect ，表示当前正在执行的 effect 方法生成的 ReactiveEffect 类的实例 _effect。这样，只要 effect 方法执行，我们就能拿到此时的 _effect。

// reactivity/src/effect.ts

export let activeEffect;

export class ReactiveEffect {
  constructor(fn) {
    this.fn = fn
  }

  run() {
    // 将 _effect 赋给全局的变量 activeEffect
    activeEffect = this
    // fn执行时，内部用到的响应式数据的属性会被访问到，就能触发 proxy 对象的 get 取值操作
    this.fn() 
  }
}
复制代码

回到 reactive 方法中，我们要使用一个 track 方法，用于“追踪”并保存 target，key 和此时的 _effect 的关系：

const handler = {
    // 监听属性访问操作
    get(target, key, receiver) {
      if(key === ReactiveFlags.IS_REACTIVE) {
        return true
      }
      console.log(`${key}属性被访问，依赖收集`)
      // 依赖收集，让 target, key 和 当前的 _effect 关联起来
      track(target, key)

      const res = Reflect.get(target, key)
      if(isObject(res)) {
        return reactive(res)
      }
      return res
    }
}
复制代码

实现 track 方法

该方法定义在 effect.ts 中。所谓收集，就是需要有一个存储空间来存放所有的依赖信息。

我们使用一个 WeakMap 结构来存储所有的依赖信息，key 是_effect 中用到的响应式对象的原始对象，也就是 target；value 则又是一个 Map结构，它的 key 就是 target 的 key 了，它的 value 又是一个 Set结构，用来存储所有的 _effect。如下图：

// 存储所有的依赖信息，包含 target、key 和 _effect
const targetMap = new WeakMap

/**
 * 依赖收集。关联对象、属性和 _effect。
 */
export function track(target, key) {
  if(!activeEffect) return

  // 从缓存中找到 target 对象所有的依赖信息
  let depsMap = targetMap.get(target)
  if(!depsMap) {
    targetMap.set(target, depsMap = new Map)
  }
  // 再找到属性 key 所对应的 _effect集合
  let deps = depsMap.get(key)
  if(!deps) {
    depsMap.set(key, deps = new Set)
  }
    
  // 如果 _effect 已经被收集过了，则不再收集
  let shouldTrack = !deps.has(activeEffect)
  if(shouldTrack) {
    deps.add(activeEffect)
  }
}
复制代码

到这里，就实现了一个可用的依赖收集功能。

trigger 派发更新

接下来，当属性发生变化了，还应该有一个机制去做派发更新。我们使用一个 trigger 方法，用于派发更新：

// reactivity/src/index.ts

const handler = {
    //...
      
    // 监听设置属性操作
    set(target, key, value, receiver) {
      console.log(`${key}属性变化了，派发更新`)
     
      if(target[key] !== value) {
        const result = Reflect.set(target, key, value, receiver);
        // 派发更新，通知 target 的属性，让依赖它的 _effect 再次执行
        trigger(target, key);
        return result
      }
    }
}
复制代码

实现 trigger 方法

回到 effect.ts 中。trigger 方法的实现思路也很简单，就是从前面的依赖缓存 targetMap 中，找到此时 target 的某个 key 对应的 _effect 依赖集合，让其中的所有 _effect 依次执行即可：

// reactivity/src/effect.ts

export function trigger(target, key) {
  // 找到 target 的所有依赖
  let depsMap = targetMap.get(target)
  if(!depsMap) {
    return 
  }

  // 属性依赖的 _effect 列表
  let effects = depsMap.get(key)
  if(effects) {
    // 属性的值发生变化，找到它依赖的 _effect 列表，让所有的 _effect 依次执行
    effects.forEach(effect => {
      effect.run()
    })
 }
}
复制代码

测试

先执行打包命令：

pnpm dev
复制代码

编写测试文件：

// reactivity/test/2.effect-track-trigger.html

<body>
    <div id="app"></div>

    <script src="../dist/reactivity.global.js"></script>
    <script>
        const { reactive, effect } = VueReactivity
        const obj = { name: 'kw', age: 18, grade: { math: 60 } }
        const state = reactive(obj)
        effect(() => {
            app.innerHTML = `${state.name}数学考了${state.grade.math}分`
        })
        setTimeout(() => {
            state.grade.math = 80
        }, 1000)
    </script>
</body>
复制代码

访问浏览器，结果如图：

到这里，我们基本上实现了一个响应式系统：数据变化，页面自动更新。

小结

我们先实现了一个 effect 方法，用于管理一些需要重复执行的逻辑，原本这些都是由用户控制的，比如设置页面的显示内容。之后，结合上篇文章实现的 reactive 方法，在属性被访问到时，进行依赖收集，主要依靠 track 方法；当属性发生变化后，再利用 trigger 方法，通知收集来的 _effect 重新执行。经过这样的整合，基本上实现了一个可用的响应式系统：