深入理解 Vue2 响应式原理与实现

深入理解 Vue2 响应式原理与实现

目录

1. 前言
2. 响应式的定义
3. 响应式系统的组成
4. 响应式系统的核心工作流程
5. 手写一个响应式系统
   • 步骤 1：实现 Observer
   • 步骤 2：实现 Dep
   • 步骤 3：实现 Watcher
   • 步骤 4：测试系统
6. Vue2 响应式的局限性
7. Vue3 的改进：Proxy 替代 defineProperty
8. 总结与展望

---

前言

Vue2 的响应式系统是其核心特性之一，驱动了数据与视图的自动同步，让开发者可以专注于业务逻辑而不必手动更新 DOM。然而，很多开发者对其背后的工作机制知之甚少。本文将深入探讨 Vue2 响应式系统的原理与实现，并通过手写简化版响应式系统加深理解。

---

响应式的定义

在 Vue2 中，所谓“响应式”是指当数据发生变化时，视图能够自动更新，反之亦然。核心在于：

• 数据劫持：通过 Object.defineProperty 对对象属性进行拦截。
• 依赖收集：追踪哪些地方使用了该数据，从而在数据变化时通知这些依赖更新。

---

响应式系统的组成

Vue2 响应式系统可以拆分为以下几个核心模块：

1. Observer
   监控数据的变化，利用 Object.defineProperty 劫持对象属性。

2. Dep（Dependency）
   用于依赖收集和通知。Dep 是一个发布-订阅模式的实现。

3. Watcher
   数据与视图的桥梁，观察数据的变化，并触发视图更新逻辑。

---

响应式系统的核心工作流程

以下是 Vue2 响应式的基本工作流程：

1. 初始化数据
   Vue 在实例创建时，通过递归遍历数据对象的每个属性，使用 Object.defineProperty 将其转换为 getter 和 setter。

2. 依赖收集
   当视图模板中访问数据时，Watcher 被触发，并将自己添加到对应数据的 Dep 中。

3. 派发更新
   当数据发生变化时，setter 通知 Dep，Dep 通知所有 Watcher 更新视图。

---

手写一个响应式系统

步骤 1：实现 Observer

Observer 的作用是拦截对象属性的访问和修改。

function defineReactive(obj, key) {
   
  let value = obj[key];
  const dep = new Dep(); // 每个属性对应一个 Dep 实例

  Object.defineProperty(obj, key, {
   
    get(