Vue 源码初探（六）：数组依赖收集与触发更新

2024-02-29 17:55:47

在上一篇文章中，我们深入剖析了 Vue.js 中对象异步更新机制 nextTick()，了解到 Vue.js 如何通过收集依赖信息并将其放到微任务中执行，有效避免了对象频繁修改值的性能问题。本次，我们将继续探索 Vue 源码，深入研究数组依赖收集与触发更新的机制，进一步理解 Vue.js 的响应式系统。

背景回顾

在 Vue.js 的响应式系统中，数组也是响应式的，这意味着当数组发生变化（如添加、删除或修改元素）时，与该数组相关的视图也会自动更新。为了实现这一响应性，Vue.js 采用了依赖收集和触发更新的机制，该机制的运作原理如下：

依赖收集： 当我们使用 v-for 指令渲染一个数组时，Vue.js 会自动为该数组创建一个依赖收集器，负责收集与数组相关的依赖项（例如 DOM 元素）。
触发更新： 当数组发生变化时，Vue.js 会触发依赖收集器，依赖收集器会通知所有依赖项更新视图。

数组依赖收集

在 Vue.js 中，数组依赖收集主要通过 observeArray 函数来实现。该函数接收一个数组参数，并为其添加以下响应式特性：

ob: 该属性指向数组的依赖收集器。
dep: 该属性指向与数组相关的依赖收集器实例。
_isVue: 该属性标识该数组是一个响应式数组。

当我们为数组调用 observeArray 函数时，Vue.js 会遍历数组中的每一个元素，并将其转换为响应式对象。同时，Vue.js 还为数组创建一个依赖收集器实例，该实例负责收集与数组相关的依赖项。

触发更新

当数组发生变化时，Vue.js 会触发依赖收集器实例，依赖收集器实例会通知所有依赖项更新视图。触发更新的过程主要通过 notify 函数来实现。该函数接收一个依赖项参数，并执行以下操作：

调用依赖项的 update 函数： 依赖项的 update 函数负责更新视图。
将依赖项从依赖收集器实例中移除： 当依赖项被更新后，将其从依赖收集器实例中移除，以避免重复更新。

实际应用

在实际应用中，Vue.js 利用数组依赖收集与触发更新机制，实现了以下功能：

v-for 指令： v-for 指令可以动态渲染数组中的元素。当数组发生变化时，Vue.js 会触发 v-for 指令的更新，从而重新渲染元素。
响应式方法： Vue.js 提供了 push、pop 等响应式方法，可以修改数组。当使用这些方法修改数组时，Vue.js 会自动触发数组的依赖收集器，从而更新视图。
计算属性： 计算属性可以依赖于数组。当数组发生变化时，Vue.js 会重新计算计算属性，从而更新视图。