Vue 3.0 - effect

前言

此文章为早期版本,可能与当前最新版本有出入,敬请等待更新~

effect是一个函数

const num = reactive({currentNum:0})
                 
let changeValue

const callBackFn = ()=>{ changeValue = num.currentNum }

effect(callBackFn)

effect 是一个随着依赖变化而执行自定义函数的函数?

const num = reactive({currentNum:0})
                 
let changeValue

const callBackFn = ()=>{ changeValue = num.currentNum }

console.log(changeValue) // 0;

effect(callBackFn)

num.currentNum = 1;

console.log(changeValue) // 1;

它们是怎样勾搭一起的?

effect 函数

function effect(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

effect 函数做了三步工作:

  1. 是否已经被effect勾搭过
  2. 创建effect勾搭过程
  3. 是否默认执行effect函数
    第一步分析省略...

createReactiveEffect函数

function createReactiveEffect(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    return run(effect, fn, args)
  } as ReactiveEffect
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}

把目光移向 fn 变量,看看它被怎样处理:

  1. 被放进一个 reactiveEffect 函数
  2. 存放到一个叫 raw 的key
    总的来说 createReactiveEffect 函数就是负责创建一个真正的 effect 函数的工作。但到现在还没有看到它们是怎么勾搭一起的,下面看看 run 函数。

run函数

function run(effect: ReactiveEffect, fn: Function, args: unknown[]): unknown {
  if (!effect.active) {
    return fn(...args)
  }
  if (!effectStack.includes(effect)) {
    cleanup(effect)
    try {
      effectStack.push(effect)
      activeEffect = effect
      return fn(...args)
    } finally {
      effectStack.pop()
      activeEffect = effectStack[effectStack.length - 1]
    }
  }
}

嗯!找到了!来!抓重点!看try-fially!
先分析try-finally的运行顺序:

  1. effectStack.push(effect)
  2. activeEffect = effect
  3. fn(...args)
  4. effectStack.pop()
  5. activeEffect = effectStack[effectStack.length - 1]
    activeEffect ,这是一个全局变量。
    官宣:2-3序列,就是勾搭过程了。

num.currentNum 与 fn 的关联在哪?

先来看看下面这段代码,是关于 Proxy 的 Get 阶段里的 track 函数:

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (depsMap === void 0) {
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (dep === void 0) {
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

还记得 fn 函数里的 changeValue = num.currentNum 吗?
当 num 去获取 currentNum 的时候,触发了 Get ,而当前没有存储此 effect ,所以进入到这里:

if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }

理所当然的被存储了,然后就是勾搭上了,因为每个key都会有对应的 dep 容器。

num.currentNum产生变化,回调存取函数

建立了关联,只需要在需要的时候,执行对应的 dep 容器就可以了。可以了解一下 trigger

effect第二个参数是什么?

从上面代码看到第二个options参数是一个对象,里面有:

export interface ReactiveEffectOptions {
  lazy?: boolean
  computed?: boolean
  scheduler?: (run: Function) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}

你可能感兴趣的:(Vue 3.0 - effect)