转载请注明出处：葡萄城官网 葡萄城为开发者提供专业的开发工具、解决方案和服务，为开发者赋能。

反应系统是现代前端框架的关键组件之一。它支持应用系统的高度交互性、动态性和响应性。每个网络开发人员都应该了解该系统的功能和实际工作。

原理

反应式系统是一种自动同步数据源（模型）层和数据表示（视图）层的机制。每次模型更改时，视图都会重新渲染。

以简单的 Markdown 编辑器为例。编辑器通常有两个窗口：一个用于编写 Markdown 代码（用于编辑基础模型），另一个用于预览编译后的 HTML（显示更新后的视图）。当我们在书写窗格中写入内容时，预览窗格中会立即自动出现预览。这个例子比较简单，但实际情况会复杂很多。

很多情况下，我们想要显示的数据取决于其他数据。这种情况下就需要对相关数据进行跟踪，并在跟踪的基础上进行更新。例如，我们有 fullName，它由firstName 和lastName 属性组成。修改其任何依赖项后，fullName 将自动重新评估并将结果显示在视图中。

了解了什么是响应式系统之后，在了解 Vue 3 中的响应式系统如何工作以及如何在实践中使用之前，我们先快速回顾一下 Vue 2 中的响应式系统的内容及其措施。

Vue响应式系统简介2

Vue 2 中的响应能力或多或少是“隐藏的”。无论我们在数据对象中放入什么，Vue 都会隐式地使其成为响应式的。虽然这可能会让开发人员的工作变得更轻松，但灵活性将不可避免地降低。
在幕后，Vue 2 使用 ES5 Object.defineProperty 将所有数据对象属性转换为 getter 和 setter。对于组件的每个实例，Vue 实例化一个依赖观察者，并记录组件渲染时依赖收集/观察到的所有属性。当属性触发依赖项设置器时，观察者会收到通知，组件会重新渲染，视图也会更新。但也会出现一些问题。

更改检测警报

由于 Object.defineProperty 方法的限制，Vue 无法检测到某些数据更改。其中：

• 向对象添加属性或从对象中删除属性（例如 obj.newKey = value）
• 按索引设置数组项（例如arr[index] = newValue）
• 编辑字段长度（例如arr.length = newLength）

但是，为了解决这些问题，Vue 提供了 Vue.set API 方法，该方法向响应对象添加一个属性，并确保新属性也是响应的，从而触发视图更新。

使用以下示例讨论情况：