第一阶段：Vue 基础入门（第 13天）

Vue2 数据响应式原理详解

一、响应式概念

当数据发生变化时，视图能够自动同步更新的机制。

二、核心原理：Object.defineProperty()

Vue2 通过遍历数据对象的属性，利用 $Object.defineProperty()$ 方法为每个属性添加拦截器：

javascript 复制代码

function defineReactive(obj, key) {
  let value = obj[key]
  const dep = new Dep() // 依赖收集器

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      dep.depend() // 收集当前依赖
      return value
    },
    set(newVal) {
      if (newVal === value) return
      value = newVal
      dep.notify() // 通知更新
    }
  })
}

三、依赖收集与派发更新

依赖收集：在渲染过程中访问数据时触发 getter，将当前渲染函数（Watcher）添加到依赖列表 $$ \text{getter} \rightarrow \text{dep.depend()} \rightarrow \text{Watcher 登记} $$
派发更新：数据修改时触发 setter，通知所有关联的 Watcher 重新渲染 $$ \text{setter} \rightarrow \text{dep.notify()} \rightarrow \text{Watcher.update()} $$

四、局限性及解决方案

案例1：数组变异方法

javascript 复制代码

// 问题场景
const vm = new Vue({
  data: { items: [1, 2, 3] }
})
vm.items.push(4) // 视图不更新

// 解决方案
Vue.set(vm.items, vm.items.length, 4)
// 或
vm.items.splice(vm.items.length, 0, 4)

案例2：对象新增属性

javascript 复制代码

// 问题场景
const vm = new Vue({
  data: { user: { name: 'Alice' } }
})
vm.user.age = 25 // 视图不更新

// 解决方案
Vue.set(vm.user, 'age', 25)
// 或
this.$set(this.user, 'age', 25)

五、原理总结

机制	实现方式	作用周期
数据劫持	$Object.defineProperty()$	初始化阶段
依赖收集	getter 中调用 dep.depend()	渲染/计算时
派发更新	setter 中调用 dep.notify()	数据变更时

六、手动实现示例

javascript 复制代码

class Dep {
  constructor() {
    this.subs = []
  }
  depend() {
    if (Dep.target) this.subs.push(Dep.target)
  }
  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

function observe(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    const dep = new Dep()
    Object.defineProperty(obj, key, {
      get() {
        dep.depend()
        return value
      },
      set(newVal) {
        value = newVal
        dep.notify()
      }
    })
  })
}

关键记忆点

响应式核心是通过 $Object.defineProperty()$ 实现的属性访问拦截

数组变异方法和对象新增属性需要 $Vue.set$ 强制触发更新

Vue3 已改用 $Proxy$ 方案解决这些局限性