首页 > 基础资料博客日记

响应式原理 —— 数据变了，视图怎么知道？

2026-06-08 11:00:04基础资料围观11次

本篇文章分享响应式原理 —— 数据变了，视图怎么知道？，对你有帮助的话记得收藏一下，看极客资料网收获更多编程知识

一个困惑

先来思考一个看起来很简单的问题。

下面这两行代码之间，发生了什么？

let message = '你好'

// ... 某个时刻 ...
message = '再见'  // ← 这一行执行之后
//                  ↑
//        如果页面上显示了 message，
//        框架是怎么知道它变了、并且更新页面的？

在纯 JavaScript 里，给一个变量赋值，不会有任何通知。没有事件触发，没有回调调用，什么都没有。变量就是悄悄地从 '你好' 变成了 '再见'。

但如果 Vue 能在我改数据的时候自动更新视图——它一定是"监听"了数据的变化。

问题是：JS 没有提供"变量被修改时触发回调"的功能。那 Vue 是怎么做到的？

一段生活比喻：快递柜 vs 家门口

想象两种收快递的方式。

方式一：快递柜

快递员把包裹放进快递柜，发个短信给你。你被动等待通知，收到短信后去取。

能被"通知"的前提是：快递柜有你的手机号。

方式二：家门口

快递员直接把包裹扔你门口。没人通知你，你要主动去门口看看有没有新包裹。

纯 JS 变量就像方式二——改了就是改了，没有任何通知机制。

Vue 做的事情，就像给每个变量都装了一个"快递柜系统"——在变量被访问和修改的时候，拦截下来，执行额外的逻辑。

JavaScript 的拦截能力

Object.defineProperty —— Vue 2 的方案

JavaScript 有一个不太常用但非常强大的 API：Object.defineProperty。

它的作用是：让你自定义"读取属性"和"设置属性"时发生什么。

let obj = {}

// 定义一个内部变量来存储真实值
let internalValue = '你好'

Object.defineProperty(obj, 'message', {
  get() {
    console.log('🔍 有人在读 message！')
    return internalValue
  },
  set(newValue) {
    console.log('✏️ 有人在改 message！从', internalValue, '变成', newValue)
    internalValue = newValue
    // 🎯 这里就是"通知视图更新"的好时机！
  }
})

obj.message           // 控制台：🔍 有人在读 message！  返回 '你好'
obj.message = '再见'  // 控制台：✏️ 有人在改 message！从 你好 变成 再见

看到魔法了吗？obj.message = '再见' 这行看起来普普通通的赋值语句，实际上触发了一个函数调用。

这就是 Vue 2 响应式系统的核心基石。Vue 遍历 data 里的每一个属性，用 Object.defineProperty 把它们变成"能被拦截"的属性。

Proxy —— Vue 3 的方案

Vue 3 用了更现代的 Proxy：

let obj = { message: '你好' }

let proxy = new Proxy(obj, {
  get(target, key) {
    console.log('🔍 有人在读', key)
    return target[key]
  },
  set(target, key, value) {
    console.log('✏️ 有人在改', key, '从', target[key], '变成', value)
    target[key] = value
    return true
  }
})

proxy.message           // 🔍 有人在读 message
proxy.message = '再见'  // ✏️ 有人在改 message 从 你好 变成 再见

Proxy 的优势我们会后续文章详细对比。现在先用 Object.defineProperty 来理解核心思想（它更直观）。

动手实现一个迷你响应式系统

版本 1：能检测读写

/**
 * 把普通对象变成"响应式对象"
 * 遍历每个属性，用 defineProperty 拦截 get/set
 */
function defineReactive(obj, key) {
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}: ${value}`)
      return value
    },
    set(newValue) {
      if (newValue === value) return  // 值没变，不用更新
      console.log(`set ${key}: ${value} → ${newValue}`)
      value = newValue
      // TODO: 这里要通知视图更新
    }
  })
}

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return
  Object.keys(obj).forEach(key => defineReactive(obj, key))
}

// ─── 测试 ───
let data = { name: '小明', age: 18 }
observe(data)

data.name       // 控制台：get name: 小明
data.name = '小红' // 控制台：set name: 小明 → 小红
data.age = 20   // 控制台：set age: 18 → 20

现在 data 的每个属性都变成了"可监听"的属性。但还差关键一步：set 的时候，通知谁？

版本 2：加上"更新视图"的回调

假设视图是一个简单的渲染函数：

function render() {
  document.getElementById('app').textContent = data.name
}

每次 data.name 变化时，我们希望自动调用 render()。

最朴素的想法：在 set 里直接调用 render。

function defineReactive(obj, key) {
  let value = obj[key]

  Object.defineProperty(obj, key, {
    get() { return value },
    set(newValue) {
      if (newValue === value) return
      value = newValue
      render()  // ← 简单粗暴！
    }
  })
}

这就实现了一个最简单的响应式系统！

但问题是：

每个属性的 set 都会调用 render？ 如果 data 有 100 个属性，改任何一个都触发 render，太浪费了。
render 函数从哪来？ 硬编码在 defineReactive 里，完全不灵活。
render 函数里读了哪些属性？ 如果 render 只用了 name，改 age 就不应该触发 render。

我们需要一个更聪明的方案：render（或任何依赖数据的函数）在执行的时候，声明自己用了哪些数据。然后当那些数据变化时，只通知声明了依赖的函数。

核心设计：依赖收集

这引出了 Vue 响应式系统最精妙的设计——依赖收集。

用一个比喻来理解

想象一个图书馆：

📚 图书馆（响应式数据）
├── 📕 《name》     ← 每一本书是一个"响应式属性"
├── 📗 《age》
└── 📘 《message》

👥 读者们（依赖数据的函数/组件）
├── 读者A：读《name》和《age》    ← render 函数 A
├── 读者B：只读《message》        ← computed B
└── 读者C：读《name》和《message》 ← watch C

📋 借阅登记表（每个属性维护的依赖列表）
《name》 → [读者A, 读者C]     ← name 变了要通知 A 和 C
《age》  → [读者A]             ← age 变了只通知 A
《message》→ [读者B, 读者C]    ← message 变了通知 B 和 C

流程是这样的：

1. 借书时（getter → 依赖收集）

读者 A 走进图书馆，拿起《name》看。图书管理员在登记表上记录："《name》→ 读者 A 借阅过"。

读者 A 又拿起《age》。管理员记录："《age》→ 读者 A 借阅过"。

2. 修书时（setter → 派发更新）

有人修改了《name》这本书的内容。管理员翻开登记表，看到读者 A 和读者 C 都借阅过，于是通知他们："你们之前看的那本《name》内容变了，如果有需要可以来重新看一眼"。

读者 B 呢？他没借过《name》，所以不被打扰。

3. 核心洞察

依赖收集的本质是：在 getter 中记录"谁在用我"，在 setter 中通知"用我的人该更新了"。

代码实现：Dep + Watcher

Vue 用两个类来实现这个模式：

Dep（Dependency，依赖管理器）：每个响应式属性都有自己的 Dep，负责维护一个"谁依赖我"的列表，并在值变化时通知它们。
Watcher（观察者）：每个依赖数据的函数（比如组件的 render、computed、watch）都是一个 Watcher。Watcher 负责执行函数，并在执行过程中把自己注册到用到的属性的 Dep 中。

Dep：依赖管理器

class Dep {
  constructor() {
    this.subs = []  // subscribers — 订阅者列表，每个订阅者都是一个 Watcher
  }

  // 添加订阅者
  depend() {
    if (Dep.target) {
      // Dep.target 指向当前正在执行的 Watcher
      this.subs.push(Dep.target)
    }
  }

  // 通知所有订阅者：数据变了，你们该更新了
  notify() {
    this.subs.forEach(watcher => watcher.update())
  }
}

// 全局的"当前 Watcher"标记
// 类似于图书馆的"当前在馆读者"
Dep.target = null

Watcher：观察者

class Watcher {
  constructor(getter, callback) {
    this.getter = getter   // 一个函数，执行时会读取响应式数据
    this.callback = callback // getter 返回值变了之后要调的回调
    this.value = this.get()  // 首次执行，收集依赖
  }

  get() {
    // 把自己设为"当前活跃的 Watcher"
    Dep.target = this
    // 执行 getter，过程中会触发响应式属性的 getter
    // 那些 getter 里会调用 dep.depend()，把这个 Watcher 收集进去
    let value = this.getter()
    // 收集完毕，清空标记
    Dep.target = null
    return value
  }

  update() {
    // 被 Dep 通知：你依赖的数据变了
    let newValue = this.get()  // 重新执行 getter，获取新值
    this.callback(newValue)     // 通知外部
  }
}

改进 defineReactive，接入 Dep

function defineReactive(obj, key) {
  let value = obj[key]
  let dep = new Dep()  // ← 每个属性有自己的 Dep

  Object.defineProperty(obj, key, {
    get() {
      // 如果有 Watcher 正在收集依赖，把自己注册进去
      if (Dep.target) {
        dep.depend()
      }
      return value
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue
      // 通知所有依赖这个属性的 Watcher
      dep.notify()
    }
  })
}

现在，完整流程走一遍：

// 1. 创建响应式数据
let data = { name: '小明', age: 18 }
observe(data)

// 2. 创建一个 Watcher，它依赖 data.name
new Watcher(
  () => data.name + '同学',        // getter：读了 data.name
  (newValue) => console.log('视图更新:', newValue)  // callback
)

// 执行过程：
// → new Watcher() 调用 this.get()
// → 设置 Dep.target = 这个 watcher
// → 执行 getter: data.name  ← 触发 name 的 getter
// → name 的 getter 里 dep.depend()
// → dep.subs.push(这个watcher)  ← 依赖收集完毕！
// → Dep.target = null

// 3. 修改数据
data.name = '小红'

// 执行过程：
// → name 的 setter 触发 dep.notify()
// → dep.subs.forEach(w => w.update())
// → watcher.update() 重新执行 getter，拿到新值 '小红同学'
// → callback('小红同学')  ← 视图更新！

画一张完整的图

     new Watcher(getter, callback)
              │
              ▼
    ┌─────────────────────┐
    │  Dep.target = this  │  ← "现在是 Watcher#1 在执行"
    └──────────┬──────────┘
               │
               ▼
    ┌─────────────────────┐
    │  执行 getter()       │
    │  getter 读取 data.name │
    └──────────┬──────────┘
               │
               ▼
    ┌─────────────────────┐
    │  data.name 的 getter │
    │  if (Dep.target)    │  ← "有人正在收集依赖！"
    │    dep.depend()     │  ← 把 Watcher#1 加入 subs
    └──────────┬──────────┘
               │
               ▼
    ┌─────────────────────┐
    │  Dep.target = null  │  ← 收集完毕，恢复
    └─────────────────────┘

    ══════════ 时间流逝 ══════════

    data.name = '新值'
               │
               ▼
    ┌─────────────────────┐
    │  data.name 的 setter │
    │  dep.notify()       │
    └──────────┬──────────┘
               │
               ▼
    ┌─────────────────────┐
    │  Watcher#1.update() │
    │  重新执行 getter     │
    │  调用 callback       │
    └─────────────────────┘

还有两个问题要解决

问题 1：嵌套对象

let data = { user: { name: '小明', age: 18 } }

observe(data) 只拦截了 data.user，但如果有人直接修改 data.user.name，user 的 getter 会触发，但 name 没有自己的 defineProperty。

解决：递归 observe

function defineReactive(obj, key) {
  let value = obj[key]
  let dep = new Dep()
  observe(value)  // ← 递归！如果 value 是对象，也给它的属性加上拦截

  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) dep.depend()
      return value
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue
      observe(newValue)  // ← 新值也可能是对象，也要递归
      dep.notify()
    }
  })
}

问题 2：数组

Object.defineProperty 可以拦截 arr[0] = 'xxx'，但：

你很少那样改数组
push、pop、splice 等方法不会被 set 拦截

Vue 2 的解决方案：重写数组的 7 个变异方法：

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']

methodsToPatch.forEach(method => {
  arrayMethods[method] = function(...args) {
    // 先执行原始方法
    const result = arrayProto[method].apply(this, args)
    // 再通知依赖更新
    this.__ob__.dep.notify()
    return result
  }
})

Vue 3 的 Proxy 直接解决了这个问题——Proxy 可以拦截数组方法的调用。

总结

响应式系统的核心思想用一句话概括：

在 getter 中收集依赖（谁在用我），在 setter 中通知更新（用我的人该更新了）。

实现它只需要三个类：

Observer：遍历对象，把属性变成响应式
Dep：管理依赖列表，通知更新
Watcher：代表一个依赖数据的"执行单元"，被通知后重新执行

这篇文章我们实现了 Vue 响应式系统的骨架。下一讲，我们会更深入地看 Watcher 的细节：多个 Watcher 之间怎么协作？嵌套的 Watcher 怎么处理？Watcher 的更新怎么和视图关联？

文章来源:https://www.cnblogs.com/zhuoshengjie/p/20369573
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：AI Coding 如何影响交付链路重构：写代码更快了，为什么人反而觉得更累了？
下一篇：当Agent决定“改造环境”：记一次因弱模型作弊导致的实验数据全零事件

首页 > 基础资料博客日记

响应式原理 —— 数据变了，视图怎么知道？

一个困惑

一段生活比喻：快递柜 vs 家门口

JavaScript 的拦截能力

Object.defineProperty —— Vue 2 的方案

Proxy —— Vue 3 的方案

动手实现一个迷你响应式系统

版本 1：能检测读写

版本 2：加上"更新视图"的回调

核心设计：依赖收集

用一个比喻来理解

代码实现：Dep + Watcher

Dep：依赖管理器

Watcher：观察者

改进 defineReactive，接入 Dep

画一张完整的图

还有两个问题要解决

问题 1：嵌套对象

问题 2：数组

总结

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料 博客日记

响应式原理 —— 数据变了，视图怎么知道？

一个困惑

一段生活比喻：快递柜 vs 家门口

JavaScript 的拦截能力

Object.defineProperty —— Vue 2 的方案

Proxy —— Vue 3 的方案

动手实现一个迷你响应式系统

版本 1：能检测读写

版本 2：加上"更新视图"的回调

核心设计：依赖收集

用一个比喻来理解

代码实现：Dep + Watcher

Dep：依赖管理器

Watcher：观察者

改进 defineReactive，接入 Dep

画一张完整的图

还有两个问题要解决

问题 1：嵌套对象

问题 2：数组

总结

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > 基础资料博客日记