如何理解 Vue 的响应式系统的？

秦JaccLink

于 2024-07-08 13:58:12 发布

阅读量698

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/My_wife_QBL/article/details/140266921

版权

Vue.js 是一个流行的前端框架，以其简洁的 API 和强大的功能而受到广泛欢迎。其中，Vue 的响应式系统是其核心特性之一，使得开发者能够以声明式的方式构建用户界面。本文将深入探讨 Vue 的响应式系统，包括其工作原理、实现细节以及在实际开发中的应用。

响应式系统是指一种能够自动追踪数据变化并更新视图的机制。在 Vue 中，响应式系统使得当数据发生变化时，相关的视图会自动更新，从而简化了状态管理和视图更新的过程。

Vue 的响应式系统基于数据绑定。通过将数据与视图绑定，当数据发生变化时，视图会自动更新。这种绑定可以是单向的（从数据到视图）或双向的（数据与视图相互影响）。

Vue 的响应式系统通过依赖追踪来实现自动更新。当一个数据被访问时，Vue 会记录下这个访问操作，并将其与当前的渲染上下文关联起来。这样，当数据发生变化时，Vue 就能够知道哪些视图需要更新。

Vue 的响应式系统主要通过以下几个核心概念来实现：

Vue 通过数据劫持来实现响应式。具体来说，Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）来拦截对数据的访问和修改操作。

Vue 2：使用 Object.defineProperty 来定义对象属性的 getter 和 setter。当数据被访问时，getter 会被调用，从而记录下依赖关系；当数据被修改时，setter 会被调用，从而触发视图更新。
Vue 3：使用 Proxy 来代理对象。Proxy 提供了更强大的拦截能力，能够拦截更多的操作，如对象属性的新增和删除。

在 Vue 的响应式系统中，依赖收集是一个关键步骤。当一个数据被访问时，Vue 会将其与当前的渲染上下文关联起来，形成一个依赖关系。

Watcher：Vue 通过 Watcher 来实现依赖收集。Watcher 是一个中介，它负责监听数据的变化，并在数据变化时通知相关的视图进行更新。
Dep：Dep 是一个依赖收集器，它负责管理 Watcher。每个响应式数据都有一个对应的 Dep 实例，当数据被访问时，Dep 会将当前的 Watcher 添加到自己的依赖列表中。

当数据发生变化时，Vue 会通过 Watcher 来通知相关的视图进行更新。Vue 使用虚拟 DOM 来优化视图更新的性能，通过对比新旧虚拟 DOM 树的差异，最小化实际 DOM 操作的数量。

为了更好地理解 Vue 的响应式系统，我们需要深入探讨一些实现细节。

由于 JavaScript 的限制，Object.defineProperty 无法直接拦截数组的变更操作（如 push、pop 等）。为了解决这个问题，Vue 对数组进行了特殊处理。

重写数组方法：Vue 重写了数组的变更方法，如 push、pop、shift、unshift、splice、sort 和 reverse。这些方法在执行时会触发视图更新。
监听数组变化：Vue 通过 __ob__ 属性来标记数组，并在数组变化时通知相关的 Watcher。