从源代码看 Vue3.2 双向绑定的秘密

前端

2023-09-17 07:04:20

Vue.js 中双向绑定的深入解析：揭秘 track、trigger 和 effect 函数

双向绑定的魔术：无缝同步数据模型与视图

在 Vue.js 的世界里，双向绑定是一种魔法，它可以无缝地将数据模型的变化同步到视图中，反之亦然。这种机制极大地简化了前端开发，让我们告别繁琐的手动更新，拥抱优雅的响应式编程。

核心三剑客：track、trigger、effect

Vue3.2 中的双向绑定基于三个核心函数：track、trigger 和 effect。它们携手合作，创造出一种高效、可响应的同步机制。

track 函数：追踪数据的脉搏

track 函数就像一位敏锐的侦探，密切追踪数据模型的每一丝变化。当它发现模型被修改，它就会悄悄地记录下哪些视图组件依赖于这些数据。它将这些依赖关系存储在一个称为 targetMap 的秘密文件中。

// track 函数追踪数据模型的变化
track(target, type, key)

trigger 函数：更新视图的号角

当数据模型发生变化时，trigger 函数就会发出号角，召集所有依赖于这些数据的视图组件。它遍历 targetMap，找到那些被标记为依赖的组件，并命令它们更新自己，将最新数据反映在视图中。

// trigger 函数触发视图组件的更新
trigger(target, type, key, newValue, oldValue, oldTarget)

effect 函数：副作用的导演

effect 函数就像一位导演，它协调着数据模型变化带来的各种副作用。它创建一个副作用函数，负责在数据模型变化时执行特定的动作，例如更新视图或发出网络请求。

// effect 函数创建副作用函数
effect(fn, options)

源码一探究竟：揭秘双向绑定的后台

要真正理解双向绑定的工作原理，我们不妨潜入 Vue3.2 的源码世界。

track 函数剖析

export function track(target, type, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) {
      depsMap.set(key, (dep = new Set()))
    }
    trackEffects(dep)
  }
}

解读：

track 函数检查是否存在 activeEffect，如果有，它就从 targetMap 中获取 depsMap，如果没有，它就创建一个新的。
然后，它获取 depsMap 中存储的 dep，如果没有，它就创建一个新的 dep。
最后，它将 activeEffect 添加到 dep 中。

trigger 函数剖析

export function trigger(target, type, key, newValue, oldValue, oldTarget) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  let deps = depsMap.get(key)
  if (!deps) {
    return
  }
  triggerEffects(deps)
}

解读：

trigger 函数从 targetMap 中获取 depsMap，如果没有，它就返回。
然后，它获取 depsMap 中存储的 dep，如果没有，它就返回。
最后，它调用 triggerEffects 函数来触发 dep 中存储的副作用函数。

effect 函数剖析

export function effect(fn, options = {}) {
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

解读：