MiniVue 系列 --- 依赖收集与追踪

2023-10-23 10:39:08

前言

在上一篇文章中，我们介绍了 MiniVue 的基本原理和实现方式。在本文中，我们将详细介绍 MiniVue 中的依赖收集与追踪机制。依赖收集和追踪是响应式系统的重要组成部分，它们可以帮助 Vue 在数据发生变化时自动更新视图。

依赖收集

依赖收集是指收集所有依赖于某个数据的组件或函数。在 Vue 中，依赖收集可以通过两种方式实现：

直接依赖收集： 直接依赖收集是指直接将依赖的组件或函数存储在数据对象上。例如，在以下代码中，componentA 和 componentB 都依赖于 data.name：

const data = {
  name: 'John'
}

const componentA = {
  render() {
    return this.$data.name
  }
}

const componentB = {
  render() {
    return this.$data.name
  }
}

间接依赖收集： 间接依赖收集是指通过一个中间层来收集依赖的组件或函数。例如，在以下代码中，observer 对象负责收集依赖于 data.name 的组件或函数：

const data = {
  name: 'John'
}

const observer = new Observer(data)

const componentA = {
  render() {
    return this.$data.name
  }
}

const componentB = {
  render() {
    return this.$data.name
  }
}

observer.addDep(componentA)
observer.addDep(componentB)

在 MiniVue 中，我们使用直接依赖收集的方式来收集依赖。这是因为直接依赖收集的实现方式更加简单，并且性能也更好。

依赖追踪

依赖追踪是指在数据发生变化时通知所有依赖于该数据的组件或函数。在 Vue 中，依赖追踪可以通过两种方式实现：

直接依赖追踪： 直接依赖追踪是指直接调用依赖的组件或函数的更新方法。例如，在以下代码中，componentA 和 componentB 都依赖于 data.name，当 data.name 发生变化时，componentA 和 componentB 的更新方法都会被调用：

const data = {
  name: 'John'
}

const componentA = {
  render() {
    return this.$data.name
  },
  update() {
    this.render()
  }
}

const componentB = {
  render() {
    return this.$data.name
  },
  update() {
    this.render()
  }
}

data.name = 'Jane'
componentA.update()
componentB.update()

间接依赖追踪： 间接依赖追踪是指通过一个中间层来通知依赖于该数据的组件或函数。例如，在以下代码中，observer 对象负责通知依赖于 data.name 的组件或函数：

const data = {
  name: 'John'
}

const observer = new Observer(data)

const componentA = {
  render() {
    return this.$data.name
  },
  update() {
    this.render()
  }
}

const componentB = {
  render() {
    return this.$data.name
  },
  update() {
    this.render()
  }
}

observer.addDep(componentA)
observer.addDep(componentB)

data.name = 'Jane'
observer.notifyDeps()