一、响应式数据：Vue2.0的核心灵魂

Vue2.0的响应式系统是其区别于其他框架的核心竞争力。当数据变化时，视图自动更新，这种”数据驱动视图”的机制极大提升了开发效率。但鲜有人深入探究其底层实现——本文将通过手写核心代码，拆解这一魔法背后的技术原理。

1.1 响应式系统的本质

响应式系统的核心是建立数据与视图的双向绑定。当数据被读取时（get），系统记录依赖关系；当数据被修改时（set），系统触发通知机制更新视图。这种设计模式在计算机科学中被称为”观察者模式”的变种。

1.2 技术选型分析

Vue2.0选择Object.defineProperty而非Proxy，主要基于以下考量：

• 兼容性：Proxy在IE11等旧浏览器中不支持
• 性能：对于静态数据结构，defineProperty性能更优
• 渐进式增强：可逐步迁移到Vue3的Proxy方案

二、手写Observer：数据劫持实现

2.1 基础Observer实现

class Observer {
  constructor(value) {
    this.value = value;
    // 处理对象类型
    if (typeof value === 'object' && value !== null) {
      this.walk(value);
    }
  }
  walk(obj) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      this.defineReactive(obj, keys[i], obj[keys[i]]);
    }
  }
  defineReactive(obj, key, val) {
    // 递归处理嵌套对象
    const childObserver = observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        console.log(`读取${key}: ${val}`);
        return val;
      },
      set(newVal) {
        if (newVal === val) return;
        console.log(`设置${key}: ${newVal}`);
        val = newVal;
        // 新值是对象时需要重新观察
        childObserver.value = newVal;
        observe(newVal);
      }
    });
  }
}
function observe(value) {
  if (typeof value !== 'object' || value === null) {
    return;
  }
  return new Observer(value);
}

2.2 关键技术点解析

1. 递归观察：通过observe函数实现嵌套对象的深度劫持
2. 性能优化：使用enumerable和configurable控制属性特性
3. 边界处理：对null和原始值进行提前返回

2.3 常见问题解决方案

• 数组处理：Vue2.0重写了数组的7个变异方法（push/pop等）
• 新增属性：需使用Vue.set或this.$set方法
• 删除属性：需使用Vue.delete或this.$delete方法

三、依赖收集与派发更新

3.1 Dep与Watcher设计

let uid = 0;
class Dep {
  constructor() {
    this.id = uid++;
    this.subs = []; // 订阅者数组
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  removeSub(sub) {
    remove(this.subs, sub);
  }
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }
  notify() {
    const subs = this.subs.slice();
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update();
    }
  }
}
// 全局存储当前Watcher
Dep.target = null;

3.2 Watcher实现原理

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.getter = parsePath(expOrFn);
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this; // 设置当前Watcher
    const value = this.getter.call(this.vm, this.vm);
    Dep.target = null; // 清除当前Watcher
    return value;
  }
  addDep(dep) {
    dep.addSub(this);
  }
  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb.call(this.vm, this.value, oldValue);
  }
}

3.3 依赖收集流程

1. 模板编译阶段：生成渲染函数，函数中读取数据触发getter
2. 依赖建立阶段：getter中调用dep.depend()收集当前Watcher
3. 数据更新阶段：setter中调用dep.notify()触发所有Watcher更新

四、性能优化策略

4.1 异步更新队列

Vue使用nextTick将多次更新合并为一次：

function nextTick(cb, ctx) {
  let pending = false;
  const timerFunc = () => {
    pending = false;
    const copies = timerFunc.callbacks.slice();
    timerFunc.callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
      copies[i].call(ctx);
    }
  };
  timerFunc.callbacks = [];
  timerFunc.pending = false;
  if (!pending) {
    pending = true;
    // 根据环境选择异步方案
    if (typeof Promise !== 'undefined') {
      Promise.resolve().then(timerFunc);
    } else if (typeof MutationObserver !== 'undefined') {
      // ...其他降级方案
    }
  }
  if (cb) {
    timerFunc.callbacks.push(() => {
      cb.call(ctx);
    });
  }
}

4.2 虚拟DOM差异更新

Vue2.0通过patch算法对比新旧虚拟DOM，只更新变化的部分：

function patch(oldVnode, vnode) {
  // 同级比较算法
  if (sameVnode(oldVnode, vnode)) {
    patchVnode(oldVnode, vnode);
  } else {
    // 完全替换
    const parent = renderParent(oldVnode);
    parent.insertBefore(createElm(vnode), oldVnode.elm);
    parent.removeChild(oldVnode.elm);
  }
}

五、技术实践建议

1. 避免过度响应式：对不需要响应式的数据使用Object.freeze()
2. 合理使用计算属性：将复杂逻辑提取到计算属性中
3. 注意响应式开销：大型对象建议使用Vue.set按需更新
4. 性能监控：使用Vue.config.performance开启性能追踪

六、与Vue3.0的对比

特性	Vue2.0	Vue3.0
响应式基础	Object.defineProperty	Proxy
性能	静态结构优化	惰性代理+细粒度更新
兼容性	IE9+	现代浏览器
数组处理	重写变异方法	天然支持

七、总结与展望

手写Vue2.0响应式系统不仅能帮助深入理解框架原理，更能培养解决复杂问题的能力。在实际开发中，理解这些底层机制有助于：

1. 精准定位性能瓶颈
2. 合理设计数据结构
3. 避免常见使用陷阱

随着Vue3.0的普及，响应式系统已升级为基于Proxy的实现，但Vue2.0的设计思想仍值得深入研究。建议开发者在掌握2.0原理后，再对比学习3.0的改进方案，形成完整的知识体系。