手把手教你搞懂Vue响应式系统如何追踪依赖

想深入了解 Vue 响应式系统如何追踪依赖，实现自动更新视图吗？本文将带你手把手搞懂 Vue 响应式系统的源码核心。Vue 通过**数据劫持**，利用 Vue 2 的 `Object.defineProperty` 或 Vue 3 的 `Proxy`，使数据在被访问或修改时可以被观测。接着，在**依赖收集**阶段，当数据被读取时，例如在模板中使用 `{{ message }}`，当前 watcher 会被记录到该数据的依赖列表中。最后，当数据发生变化时，会触发 setter 或 Proxy 的 set 方法，从而**派发更新**，通知所有依赖的 watcher 进行异步批量更新。掌握数据劫持、依赖收集和派发更新这三个关键步骤，你就能彻底理解 Vue 响应式系统的核心原理，并能有效解决实际开发中遇到的相关问题。

Vue 的响应式系统通过依赖追踪实现自动更新视图。1. 数据劫持：Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy，使数据在被访问或修改时可被观测；2. 依赖收集：当数据被读取时，如在模板中使用 {{ message }}，当前 watcher 会被记录到该数据的依赖列表中；3. 派发更新：数据变化时触发 setter 或 Proxy 的 set，通知所有依赖的 watcher 异步批量更新。此外，数组需用变异方法更新，新增属性需用 Vue.set，深层响应则通过递归实现。掌握这三步机制，便能理解 Vue 响应式系统的核心原理。

Vue 的响应式系统之所以能自动更新视图，关键就在于它能够追踪依赖。简单来说，当数据变化时，Vue 能知道哪些组件或计算属性需要重新渲染，这背后靠的就是依赖追踪机制。

那它是怎么做到的呢？我们来分几个角度看看。

数据劫持：让数据“可观测”

Vue 2 和 Vue 3 在实现上略有不同，但核心思想是一样的：对数据进行劫持，使其在被访问或修改时可以触发一些行为。

• 在 Vue 2 中，使用的是 Object.defineProperty 来监听对象属性的变化。
• 在 Vue 3 中，使用了更现代的 Proxy，可以监听整个对象的操作，而不仅仅是某个属性。

一旦数据被访问（比如模板里用了 {{ message }}），Vue 就会记录下这个“谁”用到了这个数据，也就是建立一个依赖关系。

依赖收集：谁用了我？

依赖收集的过程其实就是在读取数据的时候，把当前正在执行的 watcher（观察者）记录下来。

举个例子：

data() {
  return {
    message: 'Hello Vue'
  }
}

当组件渲染时，它会访问 message，这时候 Vue 就知道：“哦，这个组件用到了 message”，于是把这个组件对应的 watcher 加入到 message 的依赖列表中。

你可以把它想象成这样：

• 每个数据都有一个“小本本”，上面记着谁用过我。
• 当数据变了，就告诉这些“用过我的人”：“我变了，你该更新了。”

派发更新：数据变了，通知订阅者

当你修改了响应式数据，比如：

this.message = 'New Message'

这时候 Vue 会触发数据的 setter（或者 Proxy 的 set 拦截），然后去遍历之前收集到的依赖，一个个通知它们更新。

这个过程就是“派发更新”。

注意几点：

• 更新不是立即执行的，而是异步批量处理的，这样可以避免频繁重渲染。
• 计算属性、watch、组件模板里的变量都会形成不同的 watcher，并各自管理自己的依赖。

一些容易忽略的细节

• 数组的响应式处理有点特殊：Vue 不能直接通过索引修改数组元素来触发更新，必须使用变异方法（如 push、splice）或用 Vue.set。
• 新增属性不会自动响应：如果对象一开始没有定义某个属性，后面再加进去，是不会被追踪的。可以用 Vue.set 或 this.$set 解决。
• 深层响应是递归完成的：如果你的数据嵌套很深，Vue 会在初始化时递归地把所有子属性也变成响应式的。

基本上就这些。理解依赖追踪的核心逻辑后，你会发现 Vue 的响应式系统虽然强大，但并不神秘。只要记住三点：数据劫持 → 依赖收集 → 派发更新，就能掌握它的运作方式。

本篇关于《手把手教你搞懂Vue响应式系统如何追踪依赖》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！