vue3源码学习（二）简单的依赖收集和派发更新

一、 原理

vue的模板本质上是个render函数，在初始化的过程中搜集render函数中的呼应式目标，并在呼应式目标特点值发生变化时，重新履行render函数

二、实现

• 依靠搜集：当即履行一个函数，将该函数搜集到函数中涉及到的一切呼应式目标中
• 派发更新：修正呼应式目标的特点值时，履行搜集在该呼应式目标中一切的函数

界说一个依靠类，用于存储依靠和派发更新

let activeEffect // 建一个大局变量，用于存储当时正在搜集依靠的 effect 函数
/**
 *  界说一个依靠类，用于存储依靠和派发更新
 */
class Dep {
  constructor() { 
    this.effects = new Set()
  }
  /**
   * 依靠搜集
   */
  depend() {
    if (activeEffect) {
      this.effects.add(activeEffect)
    }
  }
  /**
   * 派发更新
   */
  notify() {
    this.effects.forEach((_effect) => {
      _effect()
    })
  }
}

界说一个创立呼应式目标的函数

• 在读取呼应式目标特点时，触发依靠搜集
• 在修正呼应式目标特点时，派发更新

/**
 *  创立呼应式目标的函数
 * @param {Object} obj
 */
function reactive(obj) {
  const proxy = new Proxy(obj, {
    get(target, prop) {
      const result = Reflect.get(target, prop, proxy)
      // 依靠搜集
      track(target, prop)
      return result
    },
    set(target, prop, value) {
      const result = Reflect.set(target, prop, value, proxy)
      // 派发更新
      trigger(target, prop)
      return result
    },
  })
  return proxy
}

实现依靠搜集（track）和派发更新（trigger）

// 一切依靠调集
const targetMap = new WeakMap()
// 搜集依靠
function track(target, prop) {
  let depMap = targetMap.get(target)
  if (!depMap) {
    depMap = new Map()
    targetMap.set(target, depMap)
  }
  let dep = depMap.get(prop)
  if (!dep) {
    dep = new Dep()
    depMap.set(prop, dep)
  }
  dep.depend()
}
// 派发更新
function trigger(target, prop) {
  const depMap = targetMap.get(target)
  const dep = depMap.get(prop)
  if (dep) {
    dep.notify()
  }
}

界说一个 effect 函数，用于搜集依靠

• 传入一个函数，设置为当时正在搜集依靠的 effect 函数。
• 履行该函数，履行函数时，会触发函数中一切呼应式目标的 get 函数 ，从而将当时 effect 函数搜集到当时呼应式目标的依靠调集里。
• 将当时正在搜集依靠的 effect 函数置为null

/**
 * 界说一个 effect 函数，用于搜集依靠
 * @param {function} fn
 */
function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

运用示例

// 界说呼应式目标
const person = reactive({
  name: '张三',
  age: 18,
})
// 依靠搜集
effect(() => {
  console.log(`person -> ${person.name} -> ${person.age}`)
})
effect(() => {
  console.log(`${person.name} -> ${person.age} -> person`)
})
// 修正呼应式变量特点的值，派发更新
person.name = '李四'
person.age = 20

完整代码

let activeEffect // 建一个大局变量，用于存储当时正在搜集依靠的 effect 函数
/**
 *  界说一个依靠类，用于存储依靠和派发更新
 */
class Dep {
  constructor() {
    this.effects = new Set()
  }
  /**
   * 依靠搜集
   */
  depend() {
    if (activeEffect) {
      this.effects.add(activeEffect)
    }
  }
  /**
   * 派发更新
   */
  notify() {
    this.effects.forEach((_effect) => {
      _effect()
    })
  }
}
// 一切依靠调集
const targetMap = new WeakMap()
// 搜集依靠
function track(target, prop) {
  let depMap = targetMap.get(target)
  if (!depMap) {
    depMap = new Map()
    targetMap.set(target, depMap)
  }
  let dep = depMap.get(prop)
  if (!dep) {
    dep = new Dep()
    depMap.set(prop, dep)
  }
  dep.depend()
}
// 派发更新
function trigger(target, prop) {
  const depMap = targetMap.get(target)
  const dep = depMap.get(prop)
  if (dep) {
    dep.notify()
  }
}
/**
 *  创立一个呼应式目标
 * @param {Object} obj
 */
function reactive(obj) {
  const proxy = new Proxy(obj, {
    get(target, prop) {
      const result = Reflect.get(target, prop, proxy)
      track(target, prop)
      return result
    },
    set(target, prop, value) {
      const result = Reflect.set(target, prop, value, proxy)
      trigger(target, prop)
      return result
    },
  })
  return proxy
}
/**
 * 界说一个 effect 函数，用于搜集依靠
 * @param {function} fn
 */
function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}
// 运用示例
const person = reactive({
  name: '张三',
  age: 18,
})
effect(() => {
  console.log(`person -> ${person.name} -> ${person.age}`)
})
effect(() => {
  console.log(`${person.name} -> ${person.age} -> person`)
})
person.name = '李四'
person.age = 20