Vue3响应式系统为何更快？深入Proxy实现原理与性能优化细节

引言：响应式系统的核心魅力

在现代前端开发中，构建动态、交互式的用户界面是核心需求。用户界面的状态会随着用户操作、数据请求等不断变化，而界面需要能够自动地、高效地响应这些变化并进行更新。这就是“响应式系统”的魅力所在。一个优秀的响应式系统能够极大地简化开发者管理状态和更新界面的心智负担，让开发者能够专注于业务逻辑而非繁琐的DOM操作。

Vue.js 作为一个流行的渐进式前端框架，其核心竞争力之一便是其强大而直观的响应式系统。从 Vue 2 到 Vue 3，响应式系统的底层实现经历了一次根本性的变革，从基于 Object.defineProperty 转向了基于 ES6 Proxy。这次变革不仅解决了 Vue 2 中长期存在的一些痛点，更带来了显著的性能提升和更优雅的设计。

本讲座将深入剖析 Vue 3 响应式系统为何更快、更强大。我们将从 Vue 2 的 Object.defineProperty 实现原理及其局限性开始，逐步过渡到 ES6 Proxy 的强大功能，最终详细阐述 Vue 3 如何利用 Proxy 构建出高效、灵活且易于维护的响应式系统，并探讨其中的性能优化细节和最佳实践。

Vue 2 的响应式之旅：Object.defineProperty 的辉煌与局限

在 Vue 3 之前，Vue 2 的响应式系统是基于 JavaScript 的 Object.defineProperty API 实现的。这个 API 允许我们定义对象属性的特性，包括其值、是否可写、是否可枚举以及最重要的——是否可配置 getter 和 setter。

原理剖析：getter 和 setter

Object.defineProperty 的核心思想是劫持（intercept）对象属性的访问（get）和修改（set）操作。当一个组件渲染时，它会访问其数据对象上的属性。Vue 会在这些属性的 getter 中“偷偷地”记录下当前正在渲染的组件（或更准确地说，是当前正在运行的副作用函数，通常是渲染函数），将其作为一个“依赖”收集起来。当数据属性发生变化时，它的 setter 会被触发，此时 Vue 会通知所有依赖于这个属性的组件进行重新渲染。

代码示例：Vue 2 风格的观察者模式（简化版）

// 模拟一个Watcher，它会在数据变化时执行回调
class Watcher {
    constructor(vm, expOrFn, cb) {
        this.vm = vm;
        this.getter = typeof expOrFn === 'function' ? expOrFn : this.parsePath(expOrFn);
        this.cb = cb;
        this.value = this.get();
    }

    // 模拟将当前Watcher实例设置为全局的“正在观察者”
    get() {
        Dep.target = this; // 将当前Watcher实例挂载到Dep.target上
        const value = this.getter.call(this.vm, this.vm); // 触发getter，进行依赖收集
        Dep.target = null; // 收集完成后清空
        return value;
    }

    // 模拟数据变化时通知Watcher更新
    update() {
        const oldValue = this.value;
        this.value = this.get();
        this.cb.call(this.vm, this.value, oldValue);
    }

    // 将Watcher添加到Dep的订阅者列表中
    addDep(dep) {
        dep.addSub(this);
    }

    parsePath(path) {
        const segments = path.split('.');
        return function(obj) {
            for (let i = 0; i < segments.length; i++) {
                if (!obj) return;
                obj = obj[segments[i]];
            }
            return obj;
        };
    }
}

// 依赖管理中心
class Dep {
    constructor() {
        this.subs = []; // 存储订阅者（Watcher实例）
    }

    // 添加订阅者
    addSub(sub) {
        this.subs.push(sub);
    }

    // 通知所有订阅者更新
    notify() {
        this.subs.forEach(sub => sub.update());
    }

    // 依赖收集，将当前Watcher添加到Dep中
    depend() {
        if (Dep.target) {
            Dep.target.addDep(this);
        }
    }
}

Dep.target = null; // 全局变量，用于存放当前正在收集依赖的Watcher

// 核心：将对象属性转换为响应式
function defineReactive(obj, key, val) {
    // 为每个属性创建一个Dep实例
    const dep = new Dep();

    // 如果val是对象，则递归使其响应式
    let childOb = observe(val);

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log(`访问了属性：${key}`);
            // 依赖收集
            dep.depend();
            // 如果子对象也响应式，也要进行依赖收集，以处理数组或对象本身的变化
            if (childOb) {
                childOb.dep.depend();
            }
            return val;
        },
        set(newVal) {
            console.log(`设置了属性：${key} = ${newVal}`);
            if (newVal === val) {
                return;
            }
            val = newVal;
            // 新值也需要被观察
            childOb = observe(newVal);
            // 派发更新
            dep.notify();
        }
    });
}

// 观察者类，用于将整个数据对象转换为响应式
class Observer {
    constructor(value) {
        this.value = value;
        this.dep = new Dep(); // 为对象/数组本身创建一个Dep，用于收集对整个对象/数组的依赖
        // 将Observer实例自身添加到被观察对象的__ob__属性上
        // 这是Vue内部用来避免重复观察和获取Observer实例的方法
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        });

        if (Array.isArray(value)) {
            // 劫持数组方法
            // 这里为了简化，不展示具体劫持逻辑，但在Vue 2中会重写push/pop/splice等方法
            this.observeArray(value);
        } else {
            this.walk(value);
        }
    }

    walk(obj) {
        Object.keys(obj).forEach(key => {
            defineReactive(obj, key, obj[key]);
        });
    }

    observeArray(arr) {
        arr.forEach(item => observe(item));
    }
}

function observe(value) {
    if (typeof value !== 'object' || value === null) {
        return;
    }
    let ob;
    if (Object.prototype.hasOwnProperty.call(value, '__ob__') && value.__ob__ instanceof Observer) {
        ob = value.__ob__; // 避免重复观察
    } else {
        ob = new Observer(value);
    }
    return ob;
}

// ---- 使用示例 ----
const data = {
    message: 'Hello Vue 2!',
    user: {
        name: 'Alice',
        age: 30
    },
    items: ['apple', 'banana']
};

observe(data); // 开始观察数据

// 模拟渲染函数或effect
new Watcher(null, () => {
    console.log('--- Watcher 1 triggered ---');
    console.log(`Message is: ${data.message}`);
    console.log(`User name is: ${data.user.name}`);
    console.log(`First item is: ${data.items[0]}`);
}, (newValue, oldValue) => {
    console.log('Watcher 1 callback:', newValue, oldValue);
});

console.log('n--- 修改数据 ---');
data.message = 'Hello World!'; // 触发 message 的 setter，通知 Watcher 1
data.user.name = 'Bob'; // 触发 user.name 的 setter，通知 Watcher 1

console.log('n--- 尝试新增属性 (Vue 2 痛点) ---');
data.newProp = 'This is a new property'; // 无法响应式，因为没有为其定义 getter/setter
console.log('New property:', data.newProp); // 访问正常，但修改不会触发更新

console.log('n--- 尝试修改数组 (Vue 2 痛点) ---');
// data.items.push('orange'); // 在Vue 2中，需要劫持数组方法才能响应
// 这里为了简化，没有实现数组方法劫持，所以直接push不会触发更新
// 如果要触发更新，需要类似Vue.set(data.items, 2, 'orange')
// 或者直接替换数组 data.items = [...data.items, 'orange']
data.items[0] = 'grape'; // 直接通过索引修改数组元素，也无法响应式（因为数组索引不是属性）
console.log('Modified item:', data.items[0]);

核心问题与性能开销

尽管 Object.defineProperty 在 Vue 2 中表现出色，但它存在几个固有的局限性，这些局限性不仅增加了开发者的心智负担，也带来了性能上的挑战：

1. 新增属性无法追踪：

   • Object.defineProperty 只能劫持对象已经存在的属性。当你向一个响应式对象添加一个新属性时，由于这个新属性没有被定义 getter/setter，Vue 无法感知它的存在，因此无法使其响应式。
   • 解决方案：Vue 提供了 Vue.set(object, key, value) 或 vm.$set(object, key, value) 方法来显式地添加响应式属性。这本质上是在内部调用 Object.defineProperty。

2. 删除属性无法追踪：

   • 同理，删除一个属性也无法被 Object.defineProperty 拦截。
   • 解决方案：Vue 提供了 Vue.delete(object, key) 或 vm.$delete(object, key) 方法来显式地删除响应式属性并触发更新。

3. 数组变异方法问题：

   • Object.defineProperty 无法直接拦截数组的索引赋值（例如 arr[0] = newValue）和一些非变异方法（如 filter, concat, slice，它们返回新数组）。
   • 对于变异方法（如 push, pop, shift, unshift, splice, sort, reverse），Vue 2 采取了“猴子补丁”（monkey patching）的方式，重写了这些方法，在执行原生操作后手动触发更新。
   • 解决方案：对于非变异方法，通常建议用新数组替换旧数组（例如 this.items = this.items.filter(...)）。对于索引赋值，需要使用 Vue.set(array, index, value)。

4. 深层嵌套对象的性能开销（递归遍历）：

   • Vue 2 在初始化时，会递归遍历数据对象的所有属性，为每个属性都定义 getter/setter。这意味着，即使一个深层嵌套的属性从未被访问过，它也会在初始化时被劫持。
   • 对于大型数据结构，这种深度观察会导致显著的初始化性能开销和内存消耗。每个响应式属性都需要一个 Dep 实例来管理依赖，每个对象都需要一个 Observer 实例。

这些限制使得 Vue 2 在处理某些数据结构或场景时显得不够优雅，需要开发者记住特定的 API 规则，增加了学习曲线和潜在的陷阱。

ES6 Proxy：深入理解现代JavaScript的魔法

为了解决 Object.defineProperty 的这些局限性，并为更强大的响应式系统铺平道路，Vue 3 拥抱了 ES6 引入的 Proxy 对象。Proxy 是一个强大的特性，它允许你创建一个对象的代理，从而拦截对该对象的所有操作，包括属性的读取、写入、删除、函数调用等等。

Proxy 是什么？用途？

Proxy 对象用于创建一个对象的代理。这个代理可以拦截目标对象上的各种操作，例如属性查找、赋值、枚举、函数调用等，并允许你在这些操作发生时执行自定义行为。

核心概念：target, handler, traps

• target：被 Proxy 代理的原始对象。
• handler：一个对象，其属性是用于定义拦截行为的“陷阱”（traps）函数。
• traps：handler 对象中的方法，它们定义了当对 Proxy 对象执行特定操作时要执行的行为。常见的陷阱包括 get（读取属性）、set（设置属性）、deleteProperty（删除属性）、has（in 操作符）、ownKeys（Object.keys 等）等。

Proxy 与 Reflect API

Reflect 是一个内置对象，它提供了拦截 JavaScript 操作的方法，这些方法与 Proxy 的陷阱方法相对应。使用 Reflect 方法的好处是它们提供了一种执行默认行为的机制，这在 Proxy 陷阱中非常有用，可以避免手动编写 target[key] 这样的操作。例如，在 set 陷阱中，你可以使用 Reflect.set(target, key, value, receiver) 来执行默认的赋值操作。

代码示例：Proxy 的基本用法

const target = {
    message: 'Hello',
    count: 0
};

const handler = {
    get(target, key, receiver) {
        console.log(`[Proxy Get] 访问了属性: ${String(key)}`);
        // 使用 Reflect API 执行默认行为，确保this指向正确
        return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
        console.log(`[Proxy Set] 设置了属性: ${String(key)} = ${value}`);
        // 可以在这里添加验证逻辑
        if (typeof value === 'string' && value.length === 0) {
            console.warn('不允许设置空字符串！');
            return false; // 拒绝修改
        }
        // 使用 Reflect API 执行默认行为
        return Reflect.set(target, key, value, receiver);
    },
    deleteProperty(target, key) {
        console.log(`[Proxy Delete] 删除了属性: ${String(key)}`);
        // 可以添加权限检查等
        if (key === 'message') {
            console.warn('不允许删除 message 属性！');
            return false;
        }
        return Reflect.deleteProperty(target, key);
    },
    has(target, key) {
        console.log(`[Proxy Has] 检查属性是否存在: ${String(key)}`);
        return Reflect.has(target, key);
    },
    ownKeys(target) {
        console.log(`[Proxy OwnKeys] 获取所有属性键`);
        return Reflect.ownKeys(target);
    }
};

const proxy = new Proxy(target, handler);

console.log('--- 访问属性 ---');
console.log(proxy.message);
console.log(proxy.count);

console.log('n--- 设置属性 ---');
proxy.message = 'World';
proxy.count++;
proxy.newProp = 'A new property'; // 新增属性也可以被拦截！

console.log('n--- 检查属性 ---');
console.log('message' in proxy);
console.log('nonExistent' in proxy);

console.log('n--- 获取所有键 ---');
console.log(Object.keys(proxy));
console.log(Object.getOwnPropertyNames(proxy));

console.log('n--- 删除属性 ---');
delete proxy.count;
delete proxy.message; // 会被 handler 拒绝
console.log(proxy);

Proxy 如何解决 Object.defineProperty 的痛点

Proxy 的强大之处在于它能够提供对整个对象的全面拦截，而不是仅仅针对特定属性。这直接解决了 Object.defineProperty 的核心痛点：

• 全面拦截操作：Proxy 可以拦截 get, set, deleteProperty, has, ownKeys 等几乎所有对对象的操作。这意味着无论是新增属性、删除属性，还是检查属性是否存在，Proxy 都能捕获到。
  • 解决新增/删除属性问题：当 proxy.newProp = 'value' 发生时，set 陷阱会被触发，我们可以在其中进行依赖收集和派发更新。删除属性时 delete proxy.prop 也会触发 deleteProperty 陷阱。
• 无需递归，按需响应（Lazy Observation）：Proxy 代理的是整个对象，而不是对象的每个属性。只有当属性被实际访问时，get 陷阱才会被触发；只有当属性被修改时，set 陷阱才会被触发。这意味着对于深层嵌套的对象，Vue 3 不需要在一开始就递归遍历所有属性并为其设置 getter/setter。只有当嵌套属性被首次访问时，Vue 3 才会对其进行响应式处理。这大大降低了初始化时的性能开销。
• 原生支持数组操作：Proxy 可以拦截数组的所有操作，包括 push, pop, splice 等变异方法，以及通过索引访问（arr[0] = newValue）等。无需像 Vue 2 那样进行“猴子补丁”或依赖 Vue.set。

Vue 3 响应式系统核心构建：Proxy 的实践

Vue 3 的响应式系统是基于 Proxy 和 WeakMap 构建的。它提供了一套直观的 API，如 reactive、ref、computed、watch 等，让开发者能够轻松地创建和管理响应式状态。

reactive 函数的实现原理

reactive 是 Vue 3 响应式系统的核心，它接受一个普通 JavaScript 对象，并返回一个该对象的响应式代理。

核心流程：

1. 当调用 reactive(obj) 时，Vue 会检查 obj 是否已经是一个响应式对象。如果不是，它会创建一个新的 Proxy 实例。
2. 这个 Proxy 实例的 handler 中包含了 get、set、deleteProperty 等陷阱。
3. get 陷阱：在属性被访问时触发。它会执行“依赖收集”（track），将当前正在执行的副作用函数（例如组件的渲染函数或 watch 回调）记录下来。
4. set 陷阱：在属性被修改时触发。它会执行“派发更新”（trigger），通知所有依赖于该属性的副作用函数重新执行。
5. deleteProperty 陷阱：在属性被删除时触发。它也会执行派发更新。

代码示例：简化版 reactive 和 effect

为了演示核心机制，我们将构建一个极度简化的响应式系统。

// 存储所有响应式对象及其依赖的全局WeakMap
// targetMap: WeakMap<target, Map<key, Set<effect>>>
const targetMap = new WeakMap();

// 全局变量，用于存储当前正在执行的副作用函数（effect）
let activeEffect = null;

/**
 * effect 函数：创建一个副作用函数，并使其自动收集依赖
 * @param {Function} fn 要执行的副作用函数
 */
function effect(fn) {
    const effectFn = () => {
        // 1. 运行时清空依赖，确保每次重新执行时都重新收集
        cleanup(effectFn);
        // 2. 设置当前正在收集依赖的effect
        activeEffect = effectFn;
        // 3. 执行副作用函数，触发响应式数据的getter，从而收集依赖
        const result = fn();
        // 4. 清空activeEffect，防止意外收集
        activeEffect = null;
        return result;
    };
    // 用于存储所有该effect所依赖的dep集合
    effectFn.deps = [];
    // 立即执行一次，进行首次依赖收集
    effectFn();
    return effectFn;
}

/**
 * 清除一个effect的所有依赖
 * @param {Function} effectFn
 */
function cleanup(effectFn) {
    for (let i = 0; i < effectFn.deps.length; i++) {
        const dep = effectFn.deps[i];
        dep.delete(effectFn); // 从依赖集合中移除
    }
    effectFn.deps.length = 0; // 清空effect自身的依赖列表
}

/**
 * 依赖收集：在getter中调用
 * @param {Object} target 目标对象
 * @param {string} key 属性名
 */
function track(target, key) {
    if (!activeEffect) return; // 如果没有正在执行的effect，则不收集

    let depsMap = targetMap.get(target);
    if (!depsMap) {
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
        dep = new Set(); // 使用Set确保effect的唯一性
        depsMap.set(key, dep);
    }

    // 将当前activeEffect添加到该属性的依赖集合中
    dep.add(activeEffect);
    // 同时也将该dep添加到activeEffect的deps列表中，方便cleanup
    activeEffect.deps.push(dep);
}

/**
 * 派发更新：在setter中调用
 * @param {Object} target 目标对象
 * @param {string} key 属性名
 * @param {*} newValue 新值 (这里简化，实际Vue会传递更多参数)
 */
function trigger(target, key) {
    const depsMap = targetMap.get(target);
    if (!depsMap) return; // 没有依赖，无需更新

    const dep = depsMap.get(key);
    if (dep) {
        // 遍历并执行所有依赖于该属性的effect
        // 这里需要创建一个新的Set，避免在遍历过程中对原Set进行修改
        [...dep].forEach(effectFn => {
            // Vue 3 实际有调度器进行批处理，这里直接执行
            effectFn();
        });
    }
}

/**
 * reactive 函数：创建响应式对象
 * @param {Object} target
 */
function reactive(target) {
    // 检查是否已经是响应式对象，避免重复代理
    // 实际Vue中会通过一个特殊的标记来判断
    if (target.__isReactive__) {
        return target;
    }

    const proxy = new Proxy(target, {
        get(target, key, receiver) {
            // 如果是特殊的 __isReactive__ 标记，直接返回true
            if (key === '__isReactive__') {
                return true;
            }
            // 依赖收集
            track(target, key);
            // 处理嵌套对象：如果获取的值是对象，也需要将其转换为响应式
            const res = Reflect.get(target, key, receiver);
            return typeof res === 'object' && res !== null ? reactive(res) : res;
        },
        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 hadKey = Object.prototype.hasOwnProperty.call(target, key);
            const result = Reflect.deleteProperty(target, key);
            if (hadKey && result) { // 只有成功删除了已存在的属性才触发更新
                trigger(target, key);
            }
            return result;
        }
    });

    // 标记为响应式对象
    Object.defineProperty(proxy, '__isReactive__', {
        value: true,
        enumerable: false,
        writable: false,
        configurable: false
    });

    return proxy;
}

// --- 使用示例 ---
const state = reactive({
    message: 'Hello',
    count: 0,
    user: {
        name: 'Alice'
    },
    items: ['apple', 'banana']
});

console.log('--- 初始渲染 ---');
effect(() => {
    console.log(`Effect 1: Message is ${state.message}, Count is ${state.count}`);
    console.log(`Effect 1: User name is ${state.user.name}`);
    console.log(`Effect 1: First item is ${state.items[0]}`);
});

console.log('n--- 修改基本属性 ---');
state.message = 'World'; // 触发Effect 1更新
state.count++; // 触发Effect 1更新

console.log('n--- 修改嵌套属性 ---');
state.user.name = 'Bob'; // 触发Effect 1更新

console.log('n--- 新增属性 ---');
state.newProp = 'This is a new reactive property'; // 也会被拦截并触发更新
effect(() => {
    console.log(`Effect 2: New prop is ${state.newProp}`);
});
state.newProp = 'Updated new prop'; // 触发Effect 2更新

console.log('n--- 删除属性 ---');
delete state.count; // 触发Effect 1更新
console.log('Count after deletion:', state.count); // undefined

console.log('n--- 修改数组元素 ---');
state.items[0] = 'grape'; // 触发Effect 1更新
console.log(`Effect 1: First item is ${state.items[0]}`);

console.log('n--- 数组变异方法 ---');
state.items.push('orange'); // 触发Effect 1更新 (Proxy能拦截push操作)
console.log(`Effect 1: Items are ${state.items}`);

这段代码展示了 Proxy 如何通过 get 陷阱实现依赖收集 (track)，通过 set 和 deleteProperty 陷阱实现派发更新 (trigger)。在 get 陷阱中，我们还递归地将嵌套对象也转换为响应式，实现了“按需深度响应”。

ref 的实现与自动解包

ref 是 Vue 3 引入的另一个核心响应式 API，主要用于处理基本类型值（如字符串、数字、布尔值）的响应式。由于 Proxy 只能代理对象，不能直接代理基本类型，ref 通过创建一个包含 .value 属性的对象来包装基本类型值，从而使其响应式。

// 简化版 ref
function ref(value) {
    const wrapper = {
        value
    };

    // 为 ref 包装器添加一个标记，方便 Vue 识别
    Object.defineProperty(wrapper, '__isRef__', {
        value: true,
        enumerable: false,
        writable: false,
        configurable: false
    });

    return reactive(wrapper); // 将包装器对象转换为响应式
}

// 使用示例
const countRef = ref(0);

effect(() => {
    console.log(`Effect for ref: Count is ${countRef.value}`);
});

countRef.value++; // 触发更新
console.log(countRef.value);

// 在reactive对象中，ref会被自动解包
const stateWithRef = reactive({
    someRef: ref('Initial Ref Value')
});

effect(() => {
    // 访问 stateWithRef.someRef 时，会自动解包为 'Initial Ref Value'
    console.log(`Effect for reactive with ref: ${stateWithRef.someRef}`);
});

stateWithRef.someRef = 'New Ref Value'; // 这里的赋值会触发 set 陷阱，然后更新 ref 的 .value
console.log(stateWithRef.someRef);

在 Vue 模板中，ref 也会被自动解包，无需手动 .value。但在 <script setup> 中，顶层的 ref 依然需要 .value 访问，除非被 reactive 包裹。

readonly：不可变状态

readonly 函数用于创建一个目标对象的只读代理。任何尝试修改只读代理的操作都将被拦截并拒绝，通常会在开发模式下发出警告。

function readonly(target) {
    return new Proxy(target, {
        get(target, key, receiver) {
            // 同样处理嵌套对象
            const res = Reflect.get(target, key, receiver);
            return typeof res === 'object' && res !== null ? readonly(res) : res;
        },
        set(target, key, value, receiver) {
            console.warn(`Attempting to set property "${String(key)}" on a readonly object.`);
            return true; // 即使拒绝，也返回 true，表示操作被“处理”了
        },
        deleteProperty(target, key) {
            console.warn(`Attempting to delete property "${String(key)}" on a readonly object.`);
            return true;
        }
        // ...其他陷阱也都需要拒绝修改操作
    });
}

const original = { foo: 1, bar: { baz: 2 } };
const readOnlyObj = readonly(original);

console.log('n--- Readonly Object ---');
console.log(readOnlyObj.foo); // 1
readOnlyObj.foo = 2; // Warn: Attempting to set property "foo" on a readonly object.
console.log(readOnlyObj.foo); // Still 1

readOnlyObj.bar.baz = 3; // Warn: Attempting to set property "baz" on a readonly object.
console.log(readOnlyObj.bar.baz); // Still 2

readonly 通常用于优化性能，当你知道某些数据不会改变时，可以将其标记为只读，避免不必要的依赖收集和更新。

shallowReactive 和 shallowRef：性能优化利器

Vue 3 还提供了 shallowReactive 和 shallowRef，它们创建的响应式对象只会对其自身的第一层属性进行响应式处理，而不会递归地将嵌套对象转换为响应式。

• shallowReactive(object)：只对对象的第一层属性进行响应式处理。如果某个属性的值是一个对象，它将保持为普通对象，不会被进一步代理。
• shallowRef(value)：只对 .value 属性进行响应式处理。如果 value 是一个对象，该对象本身不会被响应式代理。

const shallowState = shallowReactive({
    foo: 1,
    nested: {
        bar: 2
    }
});

console.log('n--- Shallow Reactive ---');
effect(() => {
    console.log(`Shallow Effect: foo is ${shallowState.foo}, nested.bar is ${shallowState.nested.bar}`);
});

shallowState.foo = 10; // 触发更新
shallowState.nested.bar = 20; // 不会触发更新，因为 nested 对象本身不是响应式的
console.log(shallowState.nested.bar); // 20 (值改变了，但没有触发effect)

shallowState.nested = { // 替换整个 nested 对象会触发更新
    bar: 30
};
console.log(shallowState.nested.bar); // 30

const shallowCountRef = shallowRef({
    value: 0
});

console.log('n--- Shallow Ref ---');
effect(() => {
    console.log(`Shallow Ref Effect: count is ${shallowCountRef.value.value}`);
});

shallowCountRef.value.value = 10; // 不会触发更新，因为 .value 属性是一个普通对象，其内部属性不被代理
console.log(shallowCountRef.value.value); // 10

shallowCountRef.value = { // 替换整个 .value 对象会触发更新
    value: 20
};
console.log(shallowCountRef.value.value); // 20

shallowReactive 和 shallowRef 在处理大型、静态或由第三方库管理的数据时非常有用，可以避免不必要的深度观察，从而显著提升性能。

数据结构的响应式：Map, Set 的支持

Vue 3 的响应式系统不仅仅限于普通对象和数组，它还扩展了对 ES6 内置数据结构 Map 和 Set 的支持。通过 Proxy，Vue 可以拦截 Map 的 get, set, delete 以及 Set 的 add, delete 等操作，使其同样具备响应式能力。这在处理键值对集合或唯一值集合时提供了更大的灵活性。

响应式系统的内部结构：WeakMap 存储依赖

在上述的简化代码中，我们使用了 WeakMap 来存储 targetMap。WeakMap 的键必须是对象，并且是弱引用的。这意味着如果对 WeakMap 键的唯一引用是来自 WeakMap 本身，那么垃圾回收机制可以回收这个键。这对于 Vue 的响应式系统至关重要，因为它可以自动清理不再被引用的响应式对象所对应的依赖，避免内存泄漏。

• targetMap (WeakMap<Object, Map>)：键是原始对象（target），值是 depsMap。
• depsMap (Map<string | symbol, Set>)：键是属性名（key），值是 dep。
• dep (Set<effect>)：键是副作用函数（effect）的集合。

这种结构确保了每个原始对象、每个属性都有其独立的依赖集合，从而实现了精确的依赖收集和派发更新。

性能优势深度剖析：Proxy 为何更快？

Vue 3 响应式系统之所以比 Vue 2 更快、更高效，核心原因在于 Proxy 相比 Object.defineProperty 的底层机制优势。

1. 懒观察（Lazy Observation）

这是 Proxy 带来的最显著的性能优势之一。

• Vue 2 (Object.defineProperty)：在数据对象初始化时，无论属性是否被访问，Vue 都会递归遍历数据对象的所有属性，并为每个属性都执行 Object.defineProperty 来设置 getter/setter。对于深层嵌套或庞大的数据结构，这意味着巨大的初始化开销。
• Vue 3 (Proxy)：Proxy 代理的是整个对象，而不是对象的每个属性。只有当属性被实际访问时 (get 陷阱)，Vue 才会对其进行依赖收集。如果被访问的属性是一个嵌套对象，Vue 才会按需对其进行 reactive 转换。这种“懒观察”机制意味着：
  • 更快的初始化速度：Vue 3 在组件挂载时，只需要对根数据对象进行一次 Proxy 封装，而无需深度遍历。
  • 按需深度响应：只有当深层嵌套的属性被实际访问时，才会将其转换为响应式。如果某个分支的数据从未被使用，它就不会产生任何响应式开销。

2. 更低的内存开销

• Vue 2 (Object.defineProperty)：每个响应式属性都需要一个 Dep 实例来管理其依赖，每个对象都需要一个 Observer 实例。对于一个拥有大量属性或深层嵌套的对象，这将创建大量的 Dep 和 Observer 实例，导致较高的内存占用。
• Vue 3 (Proxy)：每个响应式对象（包括嵌套对象）只需要一个 Proxy 实例。依赖集合 (Set<effect>) 仅在属性被访问时按需创建。WeakMap 的使用也确保了不再被引用的对象及其依赖能够被垃圾回收，进一步优化了内存使用。

3. 原生支持数组操作

• Vue 2 (Object.defineProperty)：无法直接拦截数组的索引赋值和非变异方法。为了实现数组的响应式，Vue 2 需要：
  • 重写数组的 7 个变异方法（push, pop, shift, unshift, splice, sort, reverse），在调用原生方法后手动触发更新。
  • 对于索引赋值 (arr[idx] = val)，需要开发者手动使用 Vue.set。
  • 对于非变异方法，通常需要替换整个数组。
  • 这些“补丁”机制增加了复杂性和维护成本，也可能导致一些边缘情况。
• Vue 3 (Proxy)：Proxy 可以全面拦截对数组的所有操作，包括索引赋值和所有方法调用。这意味着 Vue 3 可以更自然、更高效地处理数组的响应式，无需额外的“猴子补丁”或特殊 API。这不仅简化了代码，也消除了 Vue 2 中数组响应式的一些限制和性能陷阱。

4. 新增/删除属性的无缝支持

• Vue 2 (Object.defineProperty)：无法劫持新增或删除的属性，需要使用 Vue.set 和 Vue.delete。这不仅增加了开发者的心智负担，也可能在不经意间导致非响应式行为。
• Vue 3 (Proxy)：Proxy 的 set 陷阱可以捕获新增属性的操作，deleteProperty 陷阱可以捕获删除属性的操作。这意味着开发者可以直接使用标准的 JavaScript 语法添加或删除属性，而无需担心响应式问题，并且这些操作会自然地触发更新。

5. 类型系统友好

Proxy 的设计使得它更容易与 TypeScript 等类型系统集成。因为 Proxy 是对整个对象的代理，它的类型可以更准确地反映原始对象的类型。而在 Vue 2 中，由于 Object.defineProperty 会在每个属性上添加 getter/setter，这在类型推断上会带来一些挑战，尽管 Vue 2 自身也通过一些技巧解决了大部分问题。Vue 3 的响应式 API 更好地支持了 TypeScript 的类型推断，提供了更强的类型安全性。

表格对比：Object.defineProperty vs Proxy

特性/API	Vue 2 (Object.defineProperty)	Vue 3 (Proxy)	性能影响
拦截粒度	属性级别 (只能劫持已存在的属性)	对象级别 (拦截所有操作，包括新增/删除属性)	Proxy 更好：更全面的拦截能力，无需特殊处理新增/删除属性。
深度观察	初始化时递归遍历所有属性，设置 getter/setter	懒观察：只在属性被访问时才进行深度响应式转换	Proxy 更好：大幅减少初始化开销，特别是对于大型或深层嵌套数据，性能提升显著。
新增属性	无法直接追踪，需 Vue.set()	原生支持，直接赋值即可响应式	Proxy 更好：简化开发，消除 Vue.set() 的心智负担。
删除属性	无法直接追踪，需 Vue.delete()	原生支持，delete obj.prop 即可响应式	Proxy 更好：简化开发，消除 Vue.delete() 的心智负担。
数组操作	劫持变异方法 (push等)，索引赋值需 Vue.set()	全面拦截所有数组操作，包括索引赋值和所有方法	Proxy 更好：更自然、高效的数组响应式，无需猴子补丁。
初始化性能	较高（需递归遍历和定义大量 getter/setter）	较低（只对根对象进行一次 Proxy 封装，按需深度响应）	Proxy 更好：更快的应用启动和组件挂载速度。
内存占用	较高（每个属性一个 Dep，每个对象一个 Observer）	较低（每个响应式对象一个 Proxy，依赖按需创建，WeakMap 辅助垃圾回收）	Proxy 更好：减少内存消耗，避免内存泄漏。
浏览器兼容性	IE9+	IE11+ (但 Proxy 不支持 IE，Vue 3 不支持 IE)	Proxy 更好：虽然放弃了 IE 支持，但在现代浏览器中提供了更优的性能和更优雅的实现。
API 限制	Object.defineProperty 无法拦截 Map/Set 等新数据结构	Proxy 可以拦截 Map/Set 等所有对象类型	Proxy 更好：提供了对更多数据结构的响应式支持。

综上所述，Proxy 在机制上完全超越了 Object.defineProperty，为 Vue 3 的响应式系统带来了根本性的性能和开发体验提升。

Vue 3 性能优化细节与最佳实践

除了 Proxy 带来的底层优势，Vue 3 还通过一系列精细的设计和优化，进一步提升了响应式系统的性能和效率。

1. 依赖收集与派发更新的精细化

Vue 3 的 track 和 trigger 函数在内部实现上非常精细，确保了依赖的精确收集和更新的最小化。

• targetMap (WeakMap<Object, Map<Key, Set<Effect>>>)：这种三层嵌套的结构确保了每个原始对象、每个属性都有其独立的依赖集合。
  • WeakMap 用于存储响应式对象，当对象不再被引用时，WeakMap 中的键值对会被垃圾回收，防止内存泄漏。
  • Map 用于存储对象中每个属性的依赖。
  • Set 用于存储依赖于该属性的所有副作用函数（effect），确保同一个 effect 不会被重复收集。
• track 函数的优化：
  • 在 get 陷阱中，只有当存在 activeEffect 时才进行依赖收集，避免不必要的收集。
  • 使用 Set 结构自动去重，避免同一个 effect 被重复收集到同一个 dep 中。
• trigger 函数的优化：
  • 在 set 陷阱中，只有当新值与旧值不同时才触发更新，避免不必要的重新渲染。
  • 对于数组的 length 属性的修改，Vue 会智能地触发所有可能受影响的依赖。
  • 对于 Map 和 Set，Vue 会根据操作类型（add、delete）触发不同的依赖集合。

2. 调度器（Scheduler）与批处理更新

直接在 set 陷阱中同步执行所有 effect 函数会导致性能问题，因为一个数据变化可能会触发多个 effect，甚至同一个 effect 会被多次触发。为了避免频繁的同步更新导致的性能瓶颈和抖动，Vue 3 引入了一个高度优化的调度器。

• queueJob 机制：当 trigger 函数通知 effect 更新时，它不是立即执行 effect，而是将 effect 推入一个队列 (queueJob)。
• 异步更新：这个队列会在下一个 JavaScript 事件循环的微任务 (microtask) 队列中被异步执行。这意味着：
  • 批处理更新：在同一个事件循环周期内，即使有多个响应式数据发生变化，所有相关的 effect 也只会在下一个微任务中被执行一次。这避免了重复计算和 DOM 更新，从而提升了性能。
  • 去重：queueJob 内部会确保同一个 effect 在一次事件循环中只被执行一次。
  • 保持数据一致性：所有状态更新在同一帧内完成，确保了组件渲染时的数据一致性。

// 简化调度器概念
const queue = new Set();
let isFlushing = false;
const p = Promise.resolve(); // 使用微任务

function queueJob(job) {
    if (!queue.has(job)) {
        queue.add(job);
        if (!isFlushing) {
            isFlushing = true;
            p.then(flushJobs);
        }
    }
}

function flushJobs() {
    // 按照特定顺序执行 job (例如：parent before child)
    // 实际Vue有更复杂的排序和优先级逻辑
    queue.forEach(job => job());
    queue.clear();
    isFlushing = false;
}

// 在 trigger 函数中，会将 effectFn() 替换为 queueJob(effectFn)
// 例如：
// trigger(target, key) {
//     const depsMap = targetMap.get(target);
//     if (!depsMap) return;
//     const dep = depsMap.get(key);
//     if (dep) {
//         [...dep].forEach(effectFn => {
//             queueJob(effectFn); // 将 effect 推入队列
//         });
//     }
// }

3. Memoization/Caching (computed)

computed 属性是 Vue 中一种重要的性能优化手段。

• 缓存机制：computed 属性的值会被缓存起来。只有当它所依赖的响应式数据发生变化时，computed 属性的计算函数才会重新执行。
• 懒计算：如果 computed 属性的值从未被访问，它的计算函数也永远不会执行。
• 精确依赖：computed 内部也是一个 effect，它会收集自身所依赖的数据。当这些数据变化时，它会标记自身为“脏”（dirty），等待下次访问时重新计算。

这避免了不必要的重复计算，特别是在复杂的数据转换或过滤场景中，能够显著提升性能。

4. shallowReactive, shallowRef 的应用场景

前面已经提到，shallowReactive 和 shallowRef 可以避免深度观察。它们在以下场景中非常有用：

• 大型不可变数据结构：如果你有一个非常大的对象或数组，并且你知道其内部数据结构是不可变的（即你总是通过替换整个对象/数组来更新它，而不是修改其内部属性），那么使用 shallowReactive 或 shallowRef 可以避免 Vue 对其内部进行深度代理，从而节省大量的初始化和内存开销。
• 与第三方库集成：当你需要将由第三方库（如 immutable.js、Lodash 等）管理的数据暴露为响应式时，使用 shallowReactive 可以避免 Vue 与这些库的内部机制冲突，同时保持外部的响应式更新。
• 性能瓶颈优化：在对应用进行性能分析后，如果发现某个大型数据结构的深度响应式是性能瓶颈，可以考虑将其转换为 shallow 版本。

5. 编译器优化 (Compiler Optimizations)

Vue 3 的性能提升不仅仅局限于运行时，其编译器在构建时也发挥了重要作用。

• 静态提升 (Static Hoisting)：Vue 3 编译器能够识别模板中的静态内容（不依赖任何响应式数据变化的部分），将其提升到渲染函数之外，只创建一次，避免在每次重新渲染时都创建这些静态 VNode。
• 补丁标志 (Patch Flags)：Vue 3 编译器会为 VNode 添加“补丁标志”，这些标志指示了该 VNode 的哪些部分可能会发生变化（例如，文本内容变化、类名变化、样式变化等）。在运行时，Vue 的渲染器可以根据这些标志，只更新 VNode 中真正发生变化的部分，从而实现了“靶向更新”，极大地减少了 DOM 操作的开销。
• 块树 (Block Tree)：Vue 3 引入了“块”的概念。在渲染函数中，动态内容被组织成“块”，每个块只包含需要更新的动态节点。这使得 Vue 在更新时可以跳过整个静态子树，只遍历和更新动态块，进一步提高了更新效率。

6. Tree-shaking 友好

Vue 3 的模块化设计使其对 tree-shaking 更加友好。这意味着在打包时，如果你的应用没有使用 Vue 的某个功能（例如 Transition、Suspense），那么相关的代码就不会被打包到最终的生产代码中，从而减小了打包体积。虽然这不直接影响响应式系统的运行时性能，但它提升了整体应用的加载性能。

7. computed 属性的缓存机制

如前所述，computed 属性的值会被缓存。只有当其依赖的响应式数据发生变化时，它才会重新计算。这种缓存机制对于避免重复计算非常重要。

const state = reactive({
    firstName: 'John',
    lastName: 'Doe'
});

const fullName = computed(() => {
    console.log('Calculating fullName...'); // 只有依赖变化时才会执行
    return state.firstName + ' ' + state.lastName;
});

console.log(fullName.value); // Calculating fullName... John Doe
console.log(fullName.value); // John Doe (从缓存中获取，不会再次计算)

state.firstName = 'Jane'; // 依赖变化

console.log(fullName.value); // Calculating fullName... Jane Doe (重新计算)
console.log(fullName.value); // Jane Doe (从缓存中获取)

最佳实践

• 何时使用 ref，何时使用 reactive：
  • ref：适用于包装基本类型值（字符串、数字、布尔值、null、undefined）以及当你需要将响应式对象作为单个变量传递时。在模板中会自动解包。
  • reactive：适用于包装对象和数组。它提供深层响应式，是处理复杂数据结构的首选。
• 避免直接解构 reactive 对象：当你解构一个 reactive 对象时，解构出来的变量会失去响应性，因为它们只是原始值的副本。

  const state = reactive({ count: 0 });
  let { count } = state; // count 此时是一个普通数字 0，不再是响应式
  count++; // state.count 仍然是 0

  应该使用 toRefs 或 toRef 来解构响应式对象，或者直接访问代理对象。

• 理解 toRaw 的作用：toRaw 函数可以获取一个响应式代理的原始对象。这在某些场景下很有用，例如当你需要将响应式对象传递给一个不期望处理 Proxy 对象的第三方库时，或者当你需要避免不必要的响应式开销时。但请注意，修改 toRaw 返回的原始对象不会触发视图更新。
• 合理使用 shallowReactive / shallowRef：在确定不需要深度响应式的场景下，利用 shallow API 可以显著提升性能。

展望未来：响应式系统的演进与挑战

Vue 3 的响应式系统凭借 Proxy 的强大能力，在性能、功能和开发体验上都迈出了一大步。它不仅解决了 Vue 2 时代的诸多痛点，更提供了一个更为健壮和高效的底层机制。这种基于 Proxy 的设计理念也影响了其他前端框架和库的发展，例如 Solid.js 和 Svelte 等也采用了类似编译时或运行时代理的策略来优化响应式。

响应式系统仍然面临一些挑战，例如在某些极端场景下，Proxy 的性能可能略低于经过高度优化的 Object.defineProperty 实现（这通常发生在微基准测试中，在实际应用中 Proxy 的综合优势更为明显）。此外，对于超大规模的数据集，如何进一步优化内存使用和更新效率仍是持续研究的方向。

Vue 3 的响应式系统无疑是现代前端框架的杰出代表，它通过深思熟虑的架构设计、充分利用新的 JavaScript 语言特性，为开发者提供了一个强大、高效且易用的工具集。理解其底层原理和性能优化细节，对于构建高性能、可维护的 Vue.js 应用至关重要，也为我们理解未来前端技术的发展趋势提供了宝贵的视角。