vuejs

Vue.js响应式系统核心原理

本文目标

学完本文，你将能够：

  • 理解Vue.js响应式系统的设计思想和运行机制
  • 掌握数据劫持的具体实现方法
  • 了解Vue 2.x和Vue 3.x响应式系统的差异
  • 能够手写简化版响应式系统
  • 在实际项目中优化响应式性能

系列导航

上一篇: Vue.js整体架构与设计理念 | 下一篇: 依赖收集与追踪机制

引言：数据变化，视图自动更新的魔法

在传统的前端开发中，当数据发生变化时，我们需要手动操作DOM来更新视图：

// 传统方式：手动更新DOM
let message = 'Hello World';
document.getElementById('app').innerHTML = message;

// 当数据变化时，需要手动更新
message = 'Hello Vue';
document.getElementById('app').innerHTML = message; // 手动同步

而在Vue.js中，我们只需要：

// Vue.js方式：自动响应
new Vue({
  data: {
    message: 'Hello World'
  }
});

// 数据变化时，视图自动更新
this.message = 'Hello Vue'; // 视图自动同步！

这种"魔法"般的自动更新是如何实现的？答案就在Vue.js的响应式系统中。

核心概念解析

什么是响应式？

响应式系统是指当数据发生变化时，所有依赖这个数据的地方都会自动更新。这个过程包含三个核心要素：

  1. 数据劫持（Data Hijacking）：拦截数据的读取和设置操作
  2. 依赖收集（Dependency Collection）：记录谁在使用这个数据
  3. 派发更新（Dispatch Updates）：数据变化时通知所有依赖方
graph LR A[数据对象] --> B[数据劫持] B --> C{操作类型} C -->|读取| D[依赖收集] C -->|设置| E[派发更新] D --> F[Watcher队列] E --> F F --> G[视图更新]

响应式的核心原理

Vue.js的响应式系统基于观察者模式和发布-订阅模式：

  • 观察者（Observer）：负责将数据转换为响应式
  • 依赖（Dep）：收集和管理观察者
  • 观察者（Watcher）：数据的使用方，当数据变化时执行回调

数据劫持的实现原理

Vue 2.x：Object.defineProperty

Vue 2.x使用Object.defineProperty来实现数据劫持：

// 第一层：理解Object.defineProperty的基本用法
function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log(`获取${key}的值: ${val}`);
      return val;
    },
    set: function reactiveSetter(newVal) {
      console.log(`设置${key}的值: ${val} -> ${newVal}`);
      val = newVal;
    }
  });
}

// 使用示例
const data = {};
defineReactive(data, 'message', 'Hello Vue');

console.log(data.message); // 获取message的值: Hello Vue
data.message = 'Hello World'; // 设置message的值: Hello Vue -> Hello World

第二层：完整的响应式系统实现

// Vue 2.x 响应式系统简化实现
class Dep {
  constructor() {
    this.subs = []; // 存储所有的观察者
  }
  
  // 添加观察者
  addSub(sub) {
    this.subs.push(sub);
  }
  
  // 移除观察者
  removeSub(sub) {
    const index = this.subs.indexOf(sub);
    if (index > -1) {
      this.subs.splice(index, 1);
    }
  }
  
  // 通知所有观察者
  notify() {
    this.subs.forEach(sub => {
      sub.update();
    });
  }
}

// 全局变量，用于存储当前正在计算的Watcher
Dep.target = null;

class Watcher {
  constructor(vm, expOrFn, cb) {
    this.vm = vm;
    this.cb = cb;
    this.getter = typeof expOrFn === 'function' ? expOrFn : () => vm[expOrFn];
    this.value = this.get();
  }
  
  get() {
    Dep.target = this; // 设置当前watcher
    const value = this.getter.call(this.vm);
    Dep.target = null; // 清空
    return value;
  }
  
  update() {
    const oldValue = this.value;
    this.value = this.get();
    this.cb.call(this.vm, this.value, oldValue);
  }
}

class Observer {
  constructor(value) {
    this.value = value;
    this.walk(value);
  }
  
  walk(obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 每个属性都有一个dep实例
  
  // 递归处理嵌套对象
  if (typeof val === 'object' && val !== null) {
    new Observer(val);
  }
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 依赖收集
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      
      val = newVal;
      // 新值也要变成响应式
      if (typeof newVal === 'object' && newVal !== null) {
        new Observer(newVal);
      }
      // 派发更新
      dep.notify();
    }
  });
}

// 使用示例
const vm = {
  data: {
    message: 'Hello Vue',
    user: {
      name: 'John',
      age: 30
    }
  }
};

// 将数据变为响应式
new Observer(vm.data);

// 创建watcher，模拟组件渲染
new Watcher(vm.data, 'message', (newVal, oldVal) => {
  console.log(`message changed: ${oldVal} -> ${newVal}`);
});

new Watcher(vm.data, () => vm.data.user.name, (newVal, oldVal) => {
  console.log(`user.name changed: ${oldVal} -> ${newVal}`);
});

// 测试响应式
vm.data.message = 'Hello World'; // message changed: Hello Vue -> Hello World
vm.data.user.name = 'Jane'; // user.name changed: John -> Jane

Vue 3.x：Proxy实现

Vue 3.x使用ES6的Proxy来实现响应式，解决了Object.defineProperty的诸多限制：

// Vue 3.x 响应式系统简化实现
const targetMap = new WeakMap(); // 存储目标对象和其依赖关系

// 获取依赖
function track(target, key) {
  if (!activeEffect) return;
  
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  
  dep.add(activeEffect);
}

// 触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  
  const dep = depsMap.get(key);
  if (!dep) return;
  
  dep.forEach(effect => effect());
}

let activeEffect = null;

// effect函数：创建响应式副作用
function effect(fn) {
  activeEffect = fn;
  fn(); // 执行函数，触发依赖收集
  activeEffect = null;
}

// reactive函数：将对象转换为响应式
function reactive(target) {
  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 收集依赖
      
      // 深层响应式
      if (typeof result === 'object' && result !== null) {
        return reactive(result);
      }
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    },
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key);
      trigger(target, key);
      return result;
    }
  };
  
  return new Proxy(target, handler);
}

// 使用示例
const state = reactive({
  count: 0,
  user: {
    name: 'Vue 3',
    settings: {
      theme: 'dark'
    }
  },
  todos: []
});

// 创建响应式副作用
effect(() => {
  console.log(`count is: ${state.count}`);
});

effect(() => {
  console.log(`user theme is: ${state.user.settings.theme}`);
});

effect(() => {
  console.log(`todos length: ${state.todos.length}`);
});

// 测试响应式
state.count++; // count is: 1
state.user.settings.theme = 'light'; // user theme is: light
state.todos.push('Learn Vue 3'); // todos length: 1

// Proxy可以监听数组方法
state.todos.push('Build App'); // todos length: 2

Vue 2.x vs Vue 3.x 响应式对比

graph TB subgraph "Vue 2.x - Object.defineProperty" A1[数据对象] --> B1[遍历所有属性] B1 --> C1[defineProperty劫持] C1 --> D1[Dep依赖收集] D1 --> E1[Watcher更新] F1[限制] F1 --> G1[无法监听新增属性] F1 --> H1[无法监听数组索引] F1 --> I1[深层对象需要递归] end subgraph "Vue 3.x - Proxy" A2[数据对象] --> B2[Proxy代理] B2 --> C2[自动拦截所有操作] C2 --> D2[WeakMap存储依赖] D2 --> E2[Effect副作用更新] F2[优势] F2 --> G2[可以监听新增属性] F2 --> H2[可以监听数组变化] F2 --> I2[惰性深层响应式] end

详细对比分析

// 1. 新增属性的处理
// Vue 2.x - 需要使用Vue.set
const vm2 = new Vue({
  data: {
    user: { name: 'John' }
  }
});
// vm2.user.age = 30; // 不是响应式的！
Vue.set(vm2.user, 'age', 30); // 需要特殊API

// Vue 3.x - 自动响应式
const state3 = reactive({
  user: { name: 'John' }
});
state3.user.age = 30; // 自动响应式！

// 2. 数组索引和长度
// Vue 2.x - 无法监听索引赋值
const vm2Array = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
});
// vm2Array.items[0] = 'x'; // 不触发更新！
Vue.set(vm2Array.items, 0, 'x'); // 需要特殊处理

// Vue 3.x - 完全支持
const state3Array = reactive({
  items: ['a', 'b', 'c']
});
state3Array.items[0] = 'x'; // 自动触发更新！
state3Array.items.length = 2; // 也能触发更新！

// 3. 性能差异
// Vue 2.x - 初始化时递归处理所有属性
const deepData2 = {
  level1: {
    level2: {
      level3: {
        value: 'deep'
      }
    }
  }
};
// 立即递归处理所有层级

// Vue 3.x - 惰性处理，访问时才递归
const deepData3 = reactive({
  level1: {
    level2: {
      level3: {
        value: 'deep'
      }
    }
  }
});
// 只有访问到深层属性时才会处理

第三层：生产级响应式系统实现

让我们实现一个更接近Vue.js实际使用的响应式系统：

// 完整的响应式系统实现
class ReactiveSystem {
  constructor() {
    this.targetMap = new WeakMap();
    this.effectStack = [];
    this.activeEffect = null;
  }
  
  // 创建响应式对象
  reactive(target) {
    // 基础类型直接返回
    if (typeof target !== 'object' || target === null) {
      return target;
    }
    
    // 避免重复代理
    if (this.targetMap.has(target)) {
      return target;
    }
    
    const handler = {
      get: (target, key, receiver) => {
        // 排除Symbol和私有属性
        if (typeof key === 'symbol' || key.startsWith('_')) {
          return Reflect.get(target, key, receiver);
        }
        
        const result = Reflect.get(target, key, receiver);
        this.track(target, key);
        
        // 深层响应式
        if (typeof result === 'object' && result !== null) {
          return this.reactive(result);
        }
        
        return result;
      },
      
      set: (target, key, value, receiver) => {
        const oldValue = target[key];
        const hadKey = Object.prototype.hasOwnProperty.call(target, key);
        const result = Reflect.set(target, key, value, receiver);
        
        // 只在值真正改变时触发更新
        if (!hadKey || oldValue !== value) {
          this.trigger(target, key, hadKey ? 'SET' : 'ADD');
        }
        
        return result;
      },
      
      deleteProperty: (target, key) => {
        const hadKey = Object.prototype.hasOwnProperty.call(target, key);
        const result = Reflect.deleteProperty(target, key);
        
        if (hadKey) {
          this.trigger(target, key, 'DELETE');
        }
        
        return result;
      },
      
      has: (target, key) => {
        this.track(target, key);
        return Reflect.has(target, key);
      }
    };
    
    const proxy = new Proxy(target, handler);
    this.targetMap.set(proxy, new Map());
    return proxy;
  }
  
  // 依赖收集
  track(target, key) {
    if (!this.activeEffect) return;
    
    let depsMap = this.targetMap.get(target);
    if (!depsMap) {
      this.targetMap.set(target, (depsMap = new Map()));
    }
    
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    
    // 避免重复收集
    if (!dep.has(this.activeEffect)) {
      dep.add(this.activeEffect);
      this.activeEffect.deps.push(dep);
    }
  }
  
  // 触发更新
  trigger(target, key, type) {
    const depsMap = this.targetMap.get(target);
    if (!depsMap) return;
    
    const effects = new Set();
    
    // 收集需要执行的effects
    const add = (effectsToAdd) => {
      if (effectsToAdd) {
        effectsToAdd.forEach(effect => {
          if (effect !== this.activeEffect) {
            effects.add(effect);
          }
        });
      }
    };
    
    // 特殊处理数组长度变化
    if (key === 'length' && Array.isArray(target)) {
      depsMap.forEach((dep, key) => {
        if (key === 'length' || key >= target.length) {
          add(dep);
        }
      });
    } else {
      // 普通属性变化
      if (key !== void 0) {
        add(depsMap.get(key));
      }
      
      // ADD和DELETE操作需要触发迭代器相关的effect
      if (type === 'ADD' || type === 'DELETE') {
        if (!Array.isArray(target)) {
          add(depsMap.get(Symbol.iterator));
        }
      }
    }
    
    // 执行effects
    effects.forEach(effect => {
      if (effect.options && effect.options.scheduler) {
        effect.options.scheduler(effect);
      } else {
        effect();
      }
    });
  }
  
  // 创建响应式副作用
  effect(fn, options = {}) {
    const effect = () => {
      if (!this.effectStack.includes(effect)) {
        this.cleanup(effect);
        
        try {
          this.effectStack.push(effect);
          this.activeEffect = effect;
          return fn();
        } finally {
          this.effectStack.pop();
          this.activeEffect = this.effectStack[this.effectStack.length - 1];
        }
      }
    };
    
    effect.deps = [];
    effect.options = options;
    
    if (!options.lazy) {
      effect();
    }
    
    return effect;
  }
  
  // 清理依赖
  cleanup(effect) {
    const { deps } = effect;
    if (deps.length) {
      for (let i = 0; i < deps.length; i++) {
        deps[i].delete(effect);
      }
      deps.length = 0;
    }
  }
  
  // computed实现
  computed(getter) {
    let value;
    let dirty = true;
    
    const runner = this.effect(getter, {
      lazy: true,
      scheduler: () => {
        if (!dirty) {
          dirty = true;
          this.trigger(obj, 'value', 'SET');
        }
      }
    });
    
    const obj = {
      get value() {
        if (dirty) {
          value = runner();
          dirty = false;
        }
        this.track(obj, 'value');
        return value;
      }
    };
    
    return obj;
  }
  
  // watch实现
  watch(source, cb, options = {}) {
    let getter;
    let oldValue;
    
    if (typeof source === 'function') {
      getter = source;
    } else {
      getter = () => this.traverse(source);
    }
    
    const job = () => {
      const newValue = runner();
      if (newValue !== oldValue || options.deep) {
        cb(newValue, oldValue);
        oldValue = newValue;
      }
    };
    
    const runner = this.effect(getter, {
      lazy: true,
      scheduler: job
    });
    
    if (options.immediate) {
      job();
    } else {
      oldValue = runner();
    }
  }
  
  // 深度遍历
  traverse(value, seen = new Set()) {
    if (typeof value !== 'object' || value === null || seen.has(value)) {
      return value;
    }
    
    seen.add(value);
    
    if (Array.isArray(value)) {
      for (let i = 0; i < value.length; i++) {
        this.traverse(value[i], seen);
      }
    } else {
      for (const key in value) {
        this.traverse(value[key], seen);
      }
    }
    
    return value;
  }
}

// 使用示例
const reactiveSystem = new ReactiveSystem();

// 1. 基础响应式
const state = reactiveSystem.reactive({
  count: 0,
  todos: [],
  user: {
    name: 'Vue Developer',
    skills: ['JavaScript', 'Vue.js']
  }
});

// 2. effect副作用
reactiveSystem.effect(() => {
  console.log(`Total todos: ${state.todos.length}`);
});

// 3. computed计算属性
const doubled = reactiveSystem.computed(() => state.count * 2);

reactiveSystem.effect(() => {
  console.log(`Count: ${state.count}, Doubled: ${doubled.value}`);
});

// 4. watch监听器
reactiveSystem.watch(
  () => state.user.name,
  (newName, oldName) => {
    console.log(`Name changed: ${oldName} -> ${newName}`);
  }
);

// 测试
state.count++; // Count: 1, Doubled: 2
state.todos.push('Learn Vue 3'); // Total todos: 1
state.user.name = 'Expert Developer'; // Name changed: Vue Developer -> Expert Developer

实际应用和最佳实践

1. 合理使用响应式

// 错误：过度使用响应式
const state = reactive({
  // 静态配置不需要响应式
  config: {
    apiUrl: 'https://api.example.com',
    timeout: 5000
  },
  // 大量数据可能造成性能问题
  largeList: new Array(10000).fill(0).map((_, i) => ({ id: i }))
});

// 正确：只对需要响应的数据使用
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

const state = reactive({
  user: null,
  isLoading: false,
  currentPage: 1
});

// 对于大量数据，使用shallowReactive
const list = shallowReactive({
  items: []
});

2. 避免响应式丢失

// 错误：解构会丢失响应式
const state = reactive({ count: 0 });
let { count } = state;
count++; // 不会触发更新！

// 正确：使用toRefs保持响应式
import { toRefs } from 'vue';
const { count } = toRefs(state);
count.value++; // 正确触发更新

// 或者保持整体引用
state.count++; // 正确触发更新

3. 性能优化技巧

// 1. 使用shallowReactive减少嵌套响应式
const state = shallowReactive({
  list: [], // list本身是响应式的
  // 但list中的对象不是响应式的
});

// 2. 使用markRaw标记非响应式对象
import { markRaw } from 'vue';

const state = reactive({
  // 标记为非响应式，提升性能
  heavyObject: markRaw({
    // 大型对象或第三方实例
  })
});

// 3. 合理使用computed缓存计算结果
const filtered = computed(() => {
  // 只有依赖变化时才重新计算
  return state.list.filter(item => item.active);
});

// 4. 批量更新优化
function batchUpdate() {
  // Vue会自动批量处理同步更新
  state.a = 1;
  state.b = 2;
  state.c = 3;
  // 只触发一次更新
}

4. 调试响应式系统

// 开发环境下的调试技巧
function debugReactive(target, name) {
  return new Proxy(target, {
    get(target, key, receiver) {
      console.log(`[${name}] Getting ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`[${name}] Setting ${key} = ${value}`);
      return Reflect.set(target, key, value, receiver);
    }
  });
}

// 使用调试包装
const state = reactive(debugReactive({
  count: 0
}, 'AppState'));

深入理解：响应式系统的设计哲学

为什么Vue选择这种设计？

  1. 自动化依赖追踪：开发者不需要手动声明依赖关系
  2. 细粒度更新：只更新真正变化的部分
  3. 直观的编程模型：像操作普通对象一样操作响应式数据
  4. 渐进式增强：可以选择性地使用响应式特性

响应式的边界和权衡

// 响应式系统的限制示例
const state = reactive({
  map: new Map(),
  set: new Set(),
  date: new Date()
});

// Map和Set的原生方法需要特殊处理
state.map.set('key', 'value'); // Vue 3会正确处理
state.set.add('item'); // Vue 3会正确处理

// 但某些操作仍需注意
state.date.setHours(10); // Date对象的方法不会触发更新
state.date = new Date(); // 需要重新赋值才能触发

总结与展望

Vue.js的响应式系统是整个框架的核心基础，它通过精巧的设计实现了数据和视图的自动同步。从Vue 2.x的Object.defineProperty到Vue 3.x的Proxy，响应式系统不断进化，提供了更强大、更灵活的能力。

关键要点回顾

  1. 响应式原理：数据劫持 + 依赖收集 + 派发更新
  2. 技术演进：从Object.defineProperty到Proxy的进化
  3. 性能优化：合理使用响应式，避免过度响应
  4. 实践技巧：理解响应式边界，掌握调试方法

下一步学习

在下一篇文章中，我们将深入探讨依赖收集的具体机制，了解Vue.js如何精确地追踪数据依赖，以及如何高效地触发更新。这将帮助你更深入地理解响应式系统的运作细节。

相关文章

思考题：在你的项目中，有哪些数据适合使用响应式？哪些不适合？如何在性能和便利性之间找到平衡？

Read more

Vue.js异步更新与nextTick机制深度解析（上篇）

Vue.js异步更新与nextTick机制深度解析（上篇）

本文目标 学完本文，你将能够： * 理解Vue.js为什么采用异步更新策略 * 掌握更新队列的设计思想和实现机制 * 深入理解Event Loop在Vue中的应用 * 了解nextTick的多种实现方式 系列导航 上一篇: Diff算法深度剖析 | 下一篇: Vue.js异步更新与nextTick机制（下篇） | 组件系统架构 引言：为什么DOM更新是异步的？ 在Vue.js开发中，你可能遇到过这样的场景： // 场景1：连续修改数据 export default { data() { return { count: 0 } }, methods: { increment() { // 如果每次修改都立即更新DOM，会触发3次DOM更新 this.count++ // 触发一次？ this.count++ // 触发一次？ this.count++ // 触发一次？ // 实际上：Vue只会触发一次DOM更新！

Vue.js组件系统架构深度解析

本文目标 学完本文，你将能够： * 理解Vue.js组件从创建到销毁的完整生命周期 * 掌握组件实例化和初始化的内部流程 * 深入理解父子组件通信的底层机制 * 学会实现完整的插槽系统（包括作用域插槽） * 掌握动态组件和异步组件的实现原理 * 应用组件级别的性能优化技巧 系列导航 上一篇: 异步更新与nextTick（下篇） | 下一篇: 状态管理模式 引言：组件是如何工作的？ 在Vue.js开发中，我们每天都在使用组件。但你是否想过： // 当我们这样定义一个组件 const MyComponent = { data() { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' } // 并使用它时 new Vue({ components: { MyComponent }, template:

Vue.js状态管理模式：构建可扩展的应用架构

本文目标 学完本文，你将能够： * 理解为什么大型应用需要状态管理 * 掌握Vuex的核心设计模式和实现原理 * 实现一个简化版的状态管理库 * 理解模块化和命名空间的设计思想 * 掌握大型应用的状态管理最佳实践 * 了解现代状态管理方案的演进 系列导航 上一篇: 组件系统架构 | 下一篇: 性能优化实践 1. 为什么需要状态管理？ 1.1 组件通信的困境 在大型Vue.js应用中，组件间的通信会变得异常复杂： // 问题场景：多层级组件的状态共享 // GrandParent.vue <template> <Parent :user="user" @update-user="updateUser" /> </template> // Parent.vue <template> <Child

Vue.js依赖收集与追踪机制深度剖析

本文目标 学完本文，你将能够： * 理解Vue.js如何精确知道哪些组件需要更新 * 掌握Dep、Watcher、Observer三大核心类的协作机制 * 深入理解依赖收集的时机和完整过程 * 能够手写一个完整的依赖收集系统 * 解决实际开发中的依赖追踪问题 系列导航 上一篇: 响应式系统核心原理 | 下一篇: Virtual DOM实现详解 引言：为什么Vue知道哪些组件需要更新？ 在使用Vue.js时，你是否想过这样一个问题：当我们修改一个数据时，Vue是如何精确地知道哪些组件用到了这个数据，并只更新这些组件的？ // 假设有这样的场景 const app = new Vue({ data: { user: { name: 'John', age: 25 } } }); // 组件A只用到了user.name // 组件B只用到了user.age // 组件C同时用到了name和age // 当我们修改user.name时 app.user.name = 'Jane&