Vue3为什么抛弃defineProperty？从性能与设计角度全面解析 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位编程爱好者、系统架构师以及前端领域的探索者们，大家好。

今天，我们将深入探讨Vue.js框架中一个至关重要的演进——其响应式系统的核心机制从Vue 2的Object.defineProperty到Vue 3的Proxy的转变。这不仅仅是一次简单的API更新，而是一次深思熟虑的架构革新，它深刻影响了Vue的性能、开发体验以及未来发展的潜力。作为一名深耕前端多年的开发者，我将结合我的实践经验，从性能与设计角度，全面剖析这次“抛弃”背后的技术考量。

一、响应式编程的魅力与Vue 2的早期探索

在现代前端框架中，响应式编程（Reactive Programming）已成为构建动态用户界面的基石。其核心思想是：当数据发生变化时，与之相关的界面会自动更新，开发者无需手动操作DOM。Vue.js正是这一理念的杰出实践者。

Vue 2的响应式系统，是其成功的关键之一。它通过劫持数据对象的属性访问和修改，实现了数据的“可观察性”。每当数据属性被读取时，Vue会追踪当前正在执行的依赖（比如一个渲染函数），并在属性被修改时通知这些依赖进行更新。而实现这一魔术的核心，正是JavaScript原生的Object.defineProperty方法。

让我们先回顾一下Object.defineProperty在Vue 2中是如何运作的。

1.1 `Object.defineProperty`简介

Object.defineProperty() 方法允许你精确地添加或修改对象的属性。它接收三个参数：

obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor: 将被定义或修改的属性的描述符。

属性描述符是一个配置对象，其中可以包含以下键：

value: 属性的值。
writable: 如果为 true，属性的值可以被修改。
enumerable: 如果为 true，属性可以被枚举（例如，通过 for...in 循环或 Object.keys()）。
configurable: 如果为 true，属性的描述符可以被改变，并且属性可以从对象中删除。
get: 属性的 getter 函数，当访问该属性时，会调用此函数。
set: 属性的 setter 函数，当修改该属性时，会调用此函数。

Vue 2正是利用了get和set这两个访问器属性来劫持数据。

1.2 Vue 2 响应式系统的核心机制

Vue 2的响应式系统可以概括为以下三个核心组件：Observer、Dep和Watcher。

Observer (观察者)
Observer负责遍历数据对象的每一个属性，并使用Object.defineProperty将其转换为getter/setter。对于嵌套对象，它会递归地进行观察。
Dep (依赖收集器)
Dep是一个“发布者”，它负责收集那些依赖于当前属性的Watcher。每个响应式属性都会拥有一个Dep实例。当属性的getter被访问时，当前的Watcher会被添加到Dep的订阅者列表中；当属性的setter被调用时，Dep会通知其所有订阅者进行更新。
Watcher (订阅者)
Watcher是一个“订阅者”，它代表一个需要响应数据变化的计算或渲染任务。例如，组件的渲染函数、computed属性或watch选项。当Watcher执行其内部逻辑时，它会访问一些响应式数据。在访问过程中，这些数据属性的Dep实例就会把这个Watcher收集起来。当数据变化时，Dep会通知Watcher，然后Watcher会重新执行其任务（比如重新渲染组件）。

简化版Vue 2响应式系统代码示例：

// 1. Dep (Dependency) 类
class Dep {
    constructor() {
        this.subscribers = []; // 存储所有订阅该属性的Watcher
    }

    // 收集依赖
    depend() {
        if (Dep.target) {
            this.subscribers.push(Dep.target);
        }
    }

    // 通知依赖更新
    notify() {
        this.subscribers.forEach(sub => sub.update());
    }
}

// 静态属性，用于存放当前正在执行的Watcher
Dep.target = null;
const targetStack = [];

function pushTarget(target) {
    targetStack.push(target);
    Dep.target = target;
}

function popTarget() {
    targetStack.pop();
    Dep.target = targetStack[targetStack.length - 1];
}

// 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(); // 立即执行一次，触发依赖收集
    }

    // 获取表达式的值，并触发依赖收集
    get() {
        pushTarget(this); // 将当前Watcher设置为Dep.target
        let value;
        try {
            value = this.getter.call(this.vm, this.vm);
        } catch (e) {
            console.error(e);
        } finally {
            popTarget(); // 移除当前Watcher
        }
        return value;
    }

    // 路径解析，例如 'a.b.c'
    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;
        };
    }

    // 收到通知后执行更新
    update() {
        const oldValue = this.value;
        this.value = this.get(); // 重新计算值
        this.cb.call(this.vm, this.value, oldValue); // 调用回调函数
    }
}

// 3. defineReactive 函数 (Observer的核心)
function defineReactive(obj, key, val) {
    // 递归处理嵌套对象
    if (typeof val === 'object' && val !== null) {
        observe(val);
    }

    const dep = new Dep(); // 每个响应式属性都有一个Dep实例

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            // 访问属性时，如果当前有Watcher，就将其添加到Dep中
            if (Dep.target) {
                dep.depend();
            }
            return val;
        },
        set(newVal) {
            if (newVal === val) {
                return;
            }
            val = newVal;
            // 如果新值是对象，也需要进行响应式化
            if (typeof newVal === 'object' && newVal !== null) {
                observe(newVal);
            }
            dep.notify(); // 值改变时，通知所有订阅者
        }
    });
}

// 4. observe 函数
function observe(value) {
    if (typeof value !== 'object' || value === null) {
        return;
    }
    // 避免重复观察
    if (value.__ob__) {
        return value.__ob__;
    }
    return new Observer(value);
}

class Observer {
    constructor(value) {
        this.value = value;
        // 在对象上添加一个不可枚举的__ob__属性，表示它已经被观察
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        });

        if (Array.isArray(value)) {
            // 数组的特殊处理，这里简化，实际Vue 2会劫持数组方法
            this.observeArray(value);
        } else {
            this.walk(value);
        }
    }

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

    observeArray(items) {
        for (let i = 0, l = items.length; i < l; i++) {
            observe(items[i]);
        }
    }
}

// 模拟Vue实例
class Vue {
    constructor(options) {
        this.$data = options.data();
        this.$options = options;

        observe(this.$data); // 使数据响应式

        // 代理 $data 到 Vue 实例
        for (let key in this.$data) {
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get() {
                    return this.$data[key];
                },
                set(newVal) {
                    this.$data[key] = newVal;
                }
            });
        }

        // 模拟计算属性
        if (options.computed) {
            for (let key in options.computed) {
                Object.defineProperty(this, key, {
                    enumerable: true,
                    configurable: true,
                    get: this.createComputedGetter(options.computed[key])
                });
            }
        }

        // 模拟watch
        if (options.watch) {
            for (let key in options.watch) {
                new Watcher(this, key, options.watch[key]);
            }
        }

        // 模拟渲染函数或模板编译
        if (options.render) {
            new Watcher(this, options.render, (value) => {
                console.log('UI更新:', value);
            });
        }
    }

    createComputedGetter(fn) {
        const watcher = new Watcher(this, fn, () => {
            // computed watcher 的回调是惰性的，它只在依赖变化时标记自己为脏，
            // 并在下次访问时重新计算
        });
        return function computedGetter() {
            if (watcher.dirty) {
                watcher.evaluate();
            }
            if (Dep.target) {
                watcher.depend();
            }
            return watcher.value;
        };
    }
}

// 示例用法
console.log("--- Vue 2 响应式系统示例 ---");
const vm = new Vue({
    data() {
        return {
            message: 'Hello',
            count: 0,
            user: {
                firstName: 'John',
                lastName: 'Doe',
                address: {
                    city: 'New York'
                }
            },
            items: ['apple', 'banana']
        };
    },
    computed: {
        fullName() {
            console.log('Computing fullName...');
            return this.user.firstName + ' ' + this.user.lastName;
        }
    },
    watch: {
        count(newVal, oldVal) {
            console.log(`Watch: count changed from ${oldVal} to ${newVal}`);
        },
        'user.address.city'(newVal, oldVal) {
            console.log(`Watch: city changed from ${oldVal} to ${newVal}`);
        }
    },
    render() {
        // 模拟组件渲染，会访问数据
        return `Message: ${this.message}, Count: ${this.count}, FullName: ${this.fullName}, City: ${this.user.address.city}`;
    }
});

console.log('Initial Render:', vm.$options.render.call(vm));

vm.message = 'Hi'; // 触发message的setter，通知渲染Watcher
vm.count++; // 触发count的setter，通知渲染Watcher和watch:count
vm.user.firstName = 'Jane'; // 触发user.firstName的setter，通知fullName的watcher和渲染Watcher
vm.user.address.city = 'London'; // 触发user.address.city的setter，通知watch:city和渲染Watcher

// 注意：直接修改数组索引或length不会被Vue 2原生检测到
console.log('n--- 数组问题 (Vue 2 无法原生检测) ---');
vm.items[0] = 'orange'; // 不会触发响应式更新
console.log('After items[0] = "orange":', vm.items);

// Vue 2 通过劫持数组方法解决
const originalPush = Array.prototype.push;
Object.defineProperty(vm.items, 'push', {
    value: function(...args) {
        const result = originalPush.apply(this, args);
        console.log('Array push detected by patched method!');
        // 实际Vue 2中会在这里通知依赖
        // dep.notify(); // 假设数组也有自己的dep
        return result;
    },
    enumerable: false,
    configurable: true,
    writable: true
});
vm.items.push('grape'); // 可以被劫持到
console.log('After items.push("grape"):', vm.items);

console.log('n--- 添加新属性问题 (Vue 2 无法原生检测) ---');
vm.user.age = 30; // 不会触发响应式更新
console.log('After vm.user.age = 30:', vm.user);
// Vue 2 解决方案：Vue.set
// Vue.set(vm.user, 'age', 30); // 假设Vue.set存在
// console.log('After Vue.set(vm.user, "age", 30):', vm.user);

这段代码虽然是高度简化的，但它展示了Vue 2响应式系统的核心思想：为每个属性创建getter/setter，在getter中收集依赖，在setter中触发更新。

二、`Object.defineProperty`的局限与痛点

尽管Object.defineProperty在Vue 2中发挥了巨大作用，但也带来了几个显著的局限性，这些局限性成为了Vue 3寻求新方案的主要驱动力。

2.1 无法检测属性的添加和删除

这是Object.defineProperty最广为人知的痛点。由于它只能劫持已经存在的属性，对于在对象初始化之后动态添加或删除的属性，Vue 2无法检测到这些操作。

问题示例：

const vm = new Vue({
    data() {
        return {
            user: {
                name: 'Alice'
            }
        };
    },
    render() {
        return `User: ${this.user.name}, Age: ${this.user.age || 'N/A'}`;
    }
});

console.log('Initial render:', vm.$options.render.call(vm)); // User: Alice, Age: N/A

vm.user.age = 25; // 添加新属性
console.log('After adding age:', vm.$options.render.call(vm)); // User: Alice, Age: N/A (UI不会更新)

delete vm.user.name; // 删除属性
console.log('After deleting name:', vm.$options.render.call(vm)); // User: , Age: N/A (UI不会更新)

为了解决这个问题，Vue 2提供了特殊的API：Vue.set (或 vm.$set) 和 Vue.delete (或 vm.$delete)。

Vue 2的解决方案：Vue.set 和 Vue.delete

// 假设Vue.set和Vue.delete已实现
// Vue.set(target, key, value)
// Vue.delete(target, key)

// 假设我们有一个Vue实例
const vm2 = new Vue({
    data() {
        return {
            person: {
                name: 'Bob'
            }
        };
    },
    render() {
        return `Person: ${this.person.name}, Occupation: ${this.person.occupation || 'Unknown'}`;
    }
});

console.log('Initial render (vm2):', vm2.$options.render.call(vm2));

// 使用 Vue.set 添加响应式属性
// Vue.set(vm2.person, 'occupation', 'Engineer'); // 实际中会调用defineReactive
// 假设Vue.set的简化实现
function VueSet(target, key, value) {
    if (Array.isArray(target)) {
        target.splice(key, 1, value);
        return value;
    }
    if (key in target) { // 如果属性已存在，直接赋值
        target[key] = value;
        return value;
    }
    // 否则，劫持新属性
    defineReactive(target, key, value);
    // 还需要通知父级对象，因为父级可能正在监听子对象的属性变化
    // target.__ob__.dep.notify(); // 假设有
    return value;
}
VueSet(vm2.person, 'occupation', 'Engineer');
console.log('After Vue.set adding occupation:', vm2.$options.render.call(vm2)); // UI会更新

// 使用 Vue.delete 删除响应式属性
// Vue.delete(vm2.person, 'name'); // 实际中会删除属性并通知
// 假设Vue.delete的简化实现
function VueDelete(target, key) {
    if (Array.isArray(target)) {
        target.splice(key, 1);
        return;
    }
    if (!target.hasOwnProperty(key)) {
        return;
    }
    delete target[key];
    // target.__ob__.dep.notify(); // 假设有
}
VueDelete(vm2.person, 'name');
console.log('After Vue.delete deleting name:', vm2.$options.render.call(vm2)); // UI会更新

这些特殊API虽然解决了问题，但增加了学习成本和心智负担，开发者需要时刻记住什么时候该用普通赋值，什么时候该用Vue.set。

2.2 数组变化的检测限制

Object.defineProperty无法检测到以下数组变化：

通过索引直接修改数组元素，例如 arr[index] = newValue。
修改数组的长度，例如 arr.length = newLength。

问题示例：

const vm3 = new Vue({
    data() {
        return {
            items: ['A', 'B', 'C']
        };
    },
    render() {
        return `Items: ${this.items.join(', ')}`;
    }
});

console.log('Initial render (vm3):', vm3.$options.render.call(vm3));

vm3.items[0] = 'X'; // 直接通过索引修改，UI不会更新
console.log('After items[0] = "X":', vm3.$options.render.call(vm3)); // Items: X, B, C (UI不会更新)

vm3.items.length = 1; // 修改长度，UI不会更新
console.log('After items.length = 1:', vm3.$options.render.call(vm3)); // Items: A (UI不会更新)

为了解决数组的响应式问题，Vue 2采取了一种“曲线救国”的方式：劫持了数组的原型方法。它修改了Array.prototype上的一些方法（如push、pop、shift、unshift、splice、sort、reverse），在这些方法内部执行原始操作后，手动触发依赖更新。

Vue 2的解决方案：劫持数组方法

// 假设 Vue 2 对数组方法的劫持逻辑
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
    // 缓存原始方法
    const original = arrayProto[method];
    Object.defineProperty(arrayMethods, method, {
        value: function mutator(...args) {
            const result = original.apply(this, args); // 执行原始方法
            const ob = this.__ob__; // 获取当前数组的Observer实例
            let inserted;
            switch (method) {
                case 'push':
                case 'unshift':
                    inserted = args; // 新增元素
                    break;
                case 'splice':
                    inserted = args.slice(2); // splice的第三个参数是新增元素
                    break;
            }
            if (inserted) ob.observeArray(inserted); // 对新增元素进行响应式化
            // 通知依赖
            // ob.dep.notify(); // 假设数组也有一个顶层dep
            console.log(`Array method "${method}" detected! Notifying dependencies.`);
            return result;
        },
        enumerable: false,
        writable: true,
        configurable: true
    });
});

// 在Observer中应用劫持后的方法
class ObserverForArray {
    constructor(value) {
        this.value = value;
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        });
        // 将数组的原型指向劫持后的arrayMethods
        value.__proto__ = arrayMethods;
        this.observeArray(value);
    }

    observeArray(items) {
        for (let i = 0, l = items.length; i < l; i++) {
            observe(items[i]); // 递归观察数组中的对象元素
        }
    }
}

// 示例：
const vm4 = new Vue({
    data() {
        return {
            list: [{
                id: 1,
                name: 'Item A'
            }, {
                id: 2,
                name: 'Item B'
            }]
        };
    },
    render() {
        return `List: ${this.list.map(item => item.name).join(', ')}`;
    }
});

// 在观察数组时，实际Vue会把ObserverForArray应用到数组上
// 假设这里vm4.list已经被ObserverForArray处理
// vm4.list.__proto__ = arrayMethods;

console.log('Initial render (vm4):', vm4.$options.render.call(vm4));

vm4.list.push({
    id: 3,
    name: 'Item C'
}); // 触发劫持后的push方法，UI会更新
console.log('After push:', vm4.$options.render.call(vm4));

vm4.list.splice(0, 1, {
    id: 4,
    name: 'Item D'
}); // 触发劫持后的splice方法，UI会更新
console.log('After splice:', vm4.$options.render.call(vm4));

这种方法虽然有效，但它有以下弊端：

不优雅：直接修改Array.prototype可能与其他库产生冲突（尽管Vue通过创建新原型对象来降低风险）。
不全面：对于arr[index] = value和arr.length = newLength这两种常见操作仍然无能为力，仍需开发者手动避免或使用Vue.set。
性能考量：对大数组进行操作时，即使只是修改一个元素，也需要遍历整个数组，可能会有性能损耗。

2.3 深度嵌套对象的性能开销

在使用Object.defineProperty时，Vue 2需要递归地遍历数据对象的所有属性，为每个属性都添加getter/setter。这意味着，即使某个深层嵌套的属性从未被访问过，它也会在组件初始化时被响应式化。

问题：

const largeData = {
    a: {
        b: {
            c: { /* ... 几十层嵌套 ... */
                z: 1
            }
        }
    },
    // ... 很多其他未使用的属性
};

// 在 observe(largeData) 时，会立即遍历所有属性，无论是否会被使用
observe(largeData);

性能影响：

启动性能：对于拥有大量数据的组件，初始化的开销会非常大，导致页面加载变慢。
内存消耗：每个响应式属性都需要一个Dep实例，以及额外的闭包和内存开销。对于大型数据集，这会显著增加内存占用。

2.4 对ES6新数据结构的不支持

Object.defineProperty只能用于普通JavaScript对象。对于ES6新增的Map、Set等数据结构，它无法提供原生的响应式支持。Vue 2只能通过额外的封装或手动处理来实现对这些数据结构的响应。

总结Object.defineProperty的痛点：

痛点	描述	Vue 2解决方案
无法检测属性的添加/删除	无法在对象创建后动态添加或删除属性并使其响应式。	`Vue.set(object, key, value)` / `vm.$set`， `Vue.delete(object, key)` / `vm.$delete`
数组索引/长度修改不响应式	`arr[index] = value` 和 `arr.length = newLength` 不会触发视图更新。	劫持数组原型方法（`push`, `pop`, `splice`等），但仍有不足。
深度监听的性能开销	初始化时递归遍历所有属性并添加getter/setter，即使属性未被使用，导致启动慢、内存占用高。	无原生解决方案，只能通过优化数据结构或手动控制观察深度来缓解（例如使用`Object.freeze`）。
对ES6新数据结构支持不足	`Map`, `Set`等无法通过`defineProperty`实现原生响应式。	需要手动封装或额外处理。
API不统一	开发者需要区分普通赋值和特殊API（`$set`, `$delete`），增加心智负担。	–

三、`Proxy`的崛起：Vue 3的全新选择

为了彻底解决Object.defineProperty带来的这些限制，Vue 3转向了ES6中引入的Proxy对象。Proxy提供了一种更强大、更灵活的方式来拦截对对象的各种操作。

3.1 `Proxy`是什么？

Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义行为。它允许你在目标对象上定义自定义行为，这些行为可以在对目标对象执行操作时触发。

Proxy的语法是 new Proxy(target, handler)：

target: 被代理的目标对象。
handler: 一个对象，其属性是当执行一个操作时定义拦截行为的函数。这些函数被称为“陷阱”（traps）。

与Object.defineProperty只能劫持属性的get和set不同，Proxy可以劫持多达13种操作，包括：

get(target, property, receiver): 拦截属性读取。
set(target, property, value, receiver): 拦截属性设置。
has(target, property): 拦截 in 操作符。
deleteProperty(target, property): 拦截 delete 操作符。
apply(target, thisArg, argumentsList): 拦截函数调用。
construct(target, argumentsList, newTarget): 拦截 new 操作符。
ownKeys(target): 拦截 Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()。
…等等。

3.2 `Proxy`如何解决`Object.defineProperty`的痛点

Proxy的强大之处在于，它代理的是整个对象，而不是对象上的特定属性。这意味着它可以监听对象上所有操作，包括那些Object.defineProperty无法监听到的。

1. 完美检测属性的添加和删除：
Proxy的set陷阱可以在任何属性被设置时触发，包括新添加的属性。deleteProperty陷阱则可以完美拦截属性的删除。

const handler = {
    set(target, key, value, receiver) {
        console.log(`Set operation detected: key=${key}, value=${value}`);
        return Reflect.set(target, key, value, receiver); // 执行默认的设置行为
    },
    deleteProperty(target, key) {
        console.log(`Delete operation detected: key=${key}`);
        return Reflect.deleteProperty(target, key); // 执行默认的删除行为
    }
};

const data = new Proxy({
    name: 'Alice'
}, handler);

console.log('--- Proxy 属性添加/删除示例 ---');
data.age = 25; // 可以被检测到
delete data.name; // 可以被检测到
console.log(data); // { age: 25 }

2. 完美检测数组变化：
Proxy的set陷阱同样可以检测到数组索引的直接修改（arr[index] = value）和length属性的修改。deleteProperty陷阱可以检测到通过delete arr[index]删除数组元素。

const arrHandler = {
    set(target, key, value, receiver) {
        console.log(`Array set operation: index/key=${key}, value=${value}`);
        return Reflect.set(target, key, value, receiver);
    },
    deleteProperty(target, key) {
        console.log(`Array delete operation: index/key=${key}`);
        return Reflect.deleteProperty(target, key);
    }
};

const reactiveArr = new Proxy(['A', 'B', 'C'], arrHandler);

console.log('n--- Proxy 数组变化示例 ---');
reactiveArr[0] = 'X'; // 可以被检测到
reactiveArr.push('D'); // push方法内部也会触发set操作
reactiveArr.length = 1; // 改变length也可以被检测到 (会触发多次deleteProperty)
console.log(reactiveArr); // ['X']

3. 惰性监听，提升性能：
Proxy的get陷阱只会在属性被访问时触发。这意味着Vue 3不需要在初始化时递归遍历整个数据对象。只有当组件的渲染函数真正访问到某个深层嵌套属性时，Proxy才会对其进行处理（比如创建子对象的Proxy）。这种“按需响应式”的机制，显著降低了大型数据结构的初始化开销和内存占用。

function createReactive(target) {
    if (typeof target !== 'object' || target === null) {
        return target;
    }
    // 避免重复代理
    if (target.__isReactive__) {
        return target;
    }

    return new Proxy(target, {
        get(obj, key, receiver) {
            console.log(`Getting property: ${key}`);
            const res = Reflect.get(obj, key, receiver);
            // 递归将获取到的对象也进行响应式处理
            return createReactive(res);
        },
        set(obj, key, value, receiver) {
            console.log(`Setting property: ${key} = ${value}`);
            return Reflect.set(obj, key, value, receiver);
        }
    });
}

const lazyData = createReactive({
    a: 1,
    b: {
        c: 2
    },
    d: {
        e: {
            f: 3
        }
    }
});

console.log('n--- Proxy 惰性监听示例 ---');
console.log(lazyData.a); // 只会触发a的get
console.log(lazyData.b.c); // 第一次访问b时，b被代理；第一次访问c时，c被代理
// console.log(lazyData.d.e.f); // 如果不访问，d、e、f都不会被代理

在Vue 3的实际实现中，createReactive会配合track和trigger机制，在get时收集依赖，在set时触发更新，并且只对真正被访问到的对象进行递归代理。

4. 原生支持ES6新数据结构：
Proxy可以代理Map、Set等数据结构，从而实现对其操作的原生响应式。Vue 3的响应式系统对此提供了良好的支持，尽管其内部对Map和Set的实现略有不同（例如，对于Map.prototype.get等方法，Vue 3会进行劫持，确保依赖收集和触发）。

5. 统一的API：
借助Proxy，开发者在Vue 3中无需再使用Vue.set或Vue.delete。无论是添加、删除属性，还是修改数组元素，都可以直接通过标准的JavaScript语法进行操作，代码更简洁，心智负担更轻。

// 假设Vue 3的reactive函数
import { reactive, effect } from './vue3-simplified-reactivity'; // 稍后会实现

const state = reactive({
    message: 'Hello',
    user: {
        name: 'Alice'
    },
    items: ['apple', 'banana']
});

effect(() => {
    console.log(`Effect: ${state.message}, User: ${state.user.name}, Items: ${state.items.join(', ')}`);
});

console.log('n--- Vue 3 Proxy 统一 API 示例 ---');
state.message = 'Hi'; // 直接赋值，响应式
state.user.age = 30; // 添加新属性，响应式
delete state.user.name; // 删除属性，响应式
state.items[0] = 'orange'; // 修改数组元素，响应式
state.items.push('grape'); // 数组方法，响应式
state.items.length = 1; // 修改数组长度，响应式

3.3 `Proxy`的唯一缺点：浏览器兼容性

Proxy是ES6（ES2015）引入的新特性，这意味着它无法在IE 11及更早的浏览器中使用。这是Vue 2选择Object.defineProperty的主要原因之一，因为当时IE 11仍然有较大的市场份额。

随着Web技术的发展和浏览器环境的现代化，IE 11的市场份额已大幅萎缩。Vue 3团队权衡了利弊，认为Proxy带来的巨大优势远超放弃IE 11支持的代价。因此，Vue 3明确放弃了对IE 11的支持，拥抱了更现代、更强大的Proxy。

四、Vue 3响应式系统：`Proxy`的实现细节

Vue 3的响应式系统（称为Reactivity模块）利用Proxy和Reflect对象，结合了effect、track、trigger等核心概念，构建了一个高效、健壮且易于使用的系统。

4.1 核心概念：`reactive`、`effect`、`track`、`trigger`

reactive(obj):
这是Vue 3中创建响应式数据的主要API。它接收一个普通JavaScript对象，并返回一个该对象的Proxy版本。当这个Proxy对象的属性被访问或修改时，它会触发Proxy的get和set陷阱。
effect(fn):
effect函数接收一个副作用函数fn作为参数。这个fn会在effect被调用时立即执行一次，并且在fn所依赖的响应式数据发生变化时，会重新执行。它类似于Vue 2中的Watcher，但设计上更加纯粹和灵活。
track(target, type, key):
当一个响应式属性被get访问时，Proxy的get陷阱会调用track函数。track函数的作用是将当前正在执行的effect（如果有）与被访问的target对象的key关联起来。这意味着“这个effect依赖于target对象的key属性”。
trigger(target, type, key, newValue, oldValue):
当一个响应式属性被set修改时，Proxy的set陷阱会调用trigger函数。trigger函数的作用是查找所有依赖于target对象的key属性的effect，并通知它们重新执行。

4.2 简化版Vue 3响应式系统代码示例

// 用于存储当前正在执行的副作用函数 (effect)
let activeEffect = null;
const effectStack = []; // effect 栈，处理嵌套 effect

// WeakMap: target -> Map(key -> Set(effects))
// 存储所有响应式对象及其属性的依赖关系
const targetMap = new WeakMap();

// 1. track: 依赖收集
function track(target, key) {
    if (!activeEffect) { // 如果当前没有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); // 将当前activeEffect添加到依赖集合中
    activeEffect.deps.push(dep); // 记录activeEffect所依赖的dep，方便清理
}

// 2. trigger: 派发更新
function trigger(target, key, newValue, oldValue) {
    const depsMap = targetMap.get(target);
    if (!depsMap) { // 如果没有依赖，直接返回
        return;
    }

    const effects = new Set(); // 使用Set去重
    const add = (effectsToAdd) => {
        if (effectsToAdd) {
            effectsToAdd.forEach(effect => effects.add(effect));
        }
    };

    // 收集所有依赖于该key的effect
    add(depsMap.get(key));

    // 对于数组的length修改或元素删除，可能需要触发所有依赖该数组的effect
    // 实际Vue 3的trigger逻辑更复杂，会处理数组的索引、length等特殊情况
    // 简单起见，这里只处理key
    if (Array.isArray(target) && key === 'length') {
        depsMap.forEach((dep, depKey) => {
            if (depKey >= newValue) { // 如果length变小，需要触发所有被截断的索引的effect
                add(dep);
            }
        });
    }

    effects.forEach(effect => {
        // 避免effect自身触发无限循环
        if (effect.options.scheduler) {
            effect.options.scheduler(effect);
        } else {
            effect();
        }
    });
}

// 3. effect: 副作用函数
function effect(fn, options = {}) {
    const effectFn = () => {
        cleanup(effectFn); // 清理旧的依赖
        effectStack.push(effectFn); // 将当前effect推入栈
        activeEffect = effectFn; // 设置当前正在执行的effect
        const res = fn(); // 执行副作用函数，触发track
        effectStack.pop(); // 弹出当前effect
        activeEffect = effectStack[effectStack.length - 1]; // 恢复上一个effect
        return res;
    };
    effectFn.deps = []; // 存储该effect所依赖的所有dep
    effectFn.options = options;

    if (!options.lazy) {
        effectFn(); // 立即执行一次，进行依赖收集
    }
    return effectFn;
}

// 清理effect的依赖
function cleanup(effectFn) {
    for (let i = 0; i < effectFn.deps.length; i++) {
        const dep = effectFn.deps[i];
        dep.delete(effectFn);
    }
    effectFn.deps.length = 0;
}

// 4. createReactiveObject: 创建响应式Proxy
function createReactiveObject(target) {
    if (typeof target !== 'object' || target === null) {
        return target;
    }
    // 避免重复代理
    if (target.__v_isReactive) { // 真实Vue 3会使用symbol标识
        return target;
    }

    // Proxy 陷阱
    const baseHandlers = {
        get(obj, key, receiver) {
            if (key === '__v_isReactive') return true; // 标识为响应式对象

            // 依赖收集
            track(obj, key);

            const res = Reflect.get(obj, key, receiver);
            // 递归将获取到的对象也进行响应式处理
            return createReactiveObject(res); // 深度响应式
        },
        set(obj, key, value, receiver) {
            const oldValue = obj[key];
            const result = Reflect.set(obj, key, value, receiver);

            // 触发更新
            // 检查新旧值是否相同，避免不必要的更新
            // 对于 NaN === NaN 为 false 的情况，Vue 3 有特殊处理
            if (result && oldValue !== value) {
                trigger(obj, key, value, oldValue);
            }
            return result;
        },
        deleteProperty(obj, key) {
            const hadKey = Object.prototype.hasOwnProperty.call(obj, key);
            const result = Reflect.deleteProperty(obj, key);
            if (result && hadKey) {
                trigger(obj, key); // 触发更新
            }
            return result;
        },
        has(obj, key) {
            track(obj, key); // 拦截 in 操作符，也进行依赖收集
            return Reflect.has(obj, key);
        },
        ownKeys(obj) {
            track(obj, Array.isArray(obj) ? 'length' : Symbol('iterator')); // 拦截 Object.keys 等，依赖收集
            return Reflect.ownKeys(obj);
        }
    };

    const proxy = new Proxy(target, baseHandlers);
    Object.defineProperty(target, '__v_isReactive', {
        value: true,
        enumerable: false,
        writable: false,
        configurable: false
    });
    return proxy;
}

// 5. reactive API
function reactive(target) {
    return createReactiveObject(target);
}

// 示例用法
console.log("n--- Vue 3 响应式系统示例 ---");
const state = reactive({
    count: 0,
    message: 'Hello Vue 3',
    user: {
        firstName: 'John',
        lastName: 'Doe',
        address: {
            city: 'New York'
        }
    },
    items: ['apple', 'banana'],
    isActive: true
});

// 使用 effect 创建一个副作用函数，模拟组件渲染或computed属性
effect(() => {
    console.log(`Render Effect: Count is ${state.count}, Message: "${state.message}", User Name: ${state.user.firstName} ${state.user.lastName}, City: ${state.user.address.city}, Items: ${state.items.join(', ')}`);
});

// 模拟一个Watcher，只关注count
effect(() => {
    console.log(`Watcher Effect: Count changed to ${state.count}`);
});

console.log('n--- 触发更新 ---');
state.count++; // 触发count的set，通知两个effect
state.message = 'Hello world'; // 触发message的set，通知第一个effect

console.log('n--- 处理嵌套对象 ---');
state.user.lastName = 'Smith'; // 触发user.lastName的set，通知第一个effect
state.user.address.city = 'London'; // 触发user.address.city的set，通知第一个effect

console.log('n--- 动态添加属性 (Vue 3 完美支持) ---');
state.user.age = 30; // 触发user.age的set，通知第一个effect (因为在effect中访问了state.user)
console.log('User after adding age:', state.user);
state.isActive = false; // 触发isActive的set

console.log('n--- 删除属性 (Vue 3 完美支持) ---');
delete state.user.age; // 触发user.age的deleteProperty，通知第一个effect
console.log('User after deleting age:', state.user);

console.log('n--- 数组操作 (Vue 3 完美支持) ---');
state.items[0] = 'orange'; // 触发items[0]的set，通知第一个effect
state.items.push('grape'); // 触发items.length和新元素的set，通知第一个effect
state.items.length = 1; // 触发items.length的set，并可能触发被删除元素的deleteProperty，通知第一个effect
console.log('Items after operations:', state.items);

// 惰性访问
const lazyObj = reactive({
    deep: {
        nested: {
            value: 100
        }
    },
    shallow: 'shallow value'
});

console.log('n--- 惰性响应式示例 ---');
effect(() => {
    console.log('Lazy Effect: ', lazyObj.shallow);
}); // 只有shallow被访问

console.log(lazyObj.deep); // 访问deep，deep会被代理，但nested还不会
console.log(lazyObj.deep.nested.value); // 访问nested和value，它们才会被代理

这个简化示例展示了Vue 3响应式系统的核心工作原理。它通过Proxy的get和set陷阱，实现了track（依赖收集）和trigger（派发更新）。effect函数则负责包装副作用函数，并在其中设置activeEffect以进行依赖收集。

4.3 `ref` 和 `readonly`

除了reactive，Vue 3还引入了ref和readonly等辅助API：

ref(value): 用于将原始值（primitive values，如字符串、数字、布尔值）或对象包装成一个响应式对象。访问时通过.value属性。这是因为Proxy只能代理对象，不能代理原始值。
readonly(obj): 创建一个只读的响应式对象。任何对其属性的修改尝试都会失败并发出警告。

这些API进一步完善了Vue 3的响应式生态系统，提供了更细粒度的控制和更安全的开发模式。

五、性能与设计角度的全面解析

5.1 性能对比

| 特性/方案 | Vue 2 (Object.defineProperty)

// 核心依赖管理
const targetMap = new WeakMap(); // WeakMap: target -> Map(key -> Set(effects))

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); // 将当前激活的effect添加到依赖集合中
    activeEffect.deps.push(dep); // 记录effect所依赖的dep，方便cleanup
}

function trigger(target, key, newValue, oldValue) {
    const depsMap = targetMap.get(target);
    if (!depsMap) return;

    const effects = new Set();
    const add = (effectsToAdd) => {
        if (effectsToAdd) {
            effectsToAdd.forEach(effect => {
                if (effect !== activeEffect) { // 避免触发当前正在运行的effect自身
                    effects.add(effect);
                }
            });
        }
    };

    // 收集所有依赖于该key的effect
    add(depsMap.get(key));

    // 特殊处理：数组的length属性修改
    // 如果修改了数组的长度，可能影响到之前依赖于被截断部分的索引的effect
    if (Array.isArray(target) && key === 'length') {
        depsMap.forEach((dep, depKey) => {
            // 如果依赖的key是一个索引，且这个索引大于等于新的length，说明它可能被删除了
            if (typeof depKey === 'number' && depKey >= newValue) {
                add(dep);
            }
        });
    }

    // 触发所有收集到的effect
    effects.forEach(effect => {
        if (effect.options.scheduler) {
            effect.options.scheduler(effect); // 使用调度器，例如Vue的nextTick
        } else {
            effect();
        }
    });
}

// 副作用函数管理
let activeEffect = null;
const effectStack = [];

function effect(fn, options = {}) {
    const effectFn = () => {
        cleanup(effectFn); // 清理旧依赖
        effectStack.push(effectFn);
        activeEffect = effectFn;
        const res = fn(); // 执行副作用函数，触发track
        effectStack.pop();
        activeEffect = effectStack[effectStack.length - 1];
        return res;
    };
    effectFn.deps = []; // 存储该effect所依赖的所有dep
    effectFn.options = options;
    effectFn.raw = fn; // 存储原始函数

    if (!options.lazy) {
        effectFn(); // 立即执行一次，进行依赖收集
    }
    return effectFn;
}

function cleanup(effectFn) {
    for (let i = 0; i < effectFn.deps.length; i++) {
        effectFn.deps[i].delete(effectFn);
    }
    effectFn.deps.length = 0;
}

// Proxy 陷阱处理器
const mutableHandlers = {
    get(target, key, receiver) {
        if (key === '__v_isReactive') return true; // 标识为响应式对象
        // 依赖收集
        track(target, key);

        const res = Reflect.get(target, key, receiver);
        // 深度响应式：如果获取到的值是对象，则递归将其转换为响应式对象
        return isObject(res) ? reactive(res) : res;
    },
    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 (target === receiver.raw) { // 确保是操作原始target
            if (!hadKey) { // 新增属性
                trigger(target, key, value, oldValue);
            } else if (value !== oldValue && !(Number.isNaN(value) && Number.isNaN(oldValue))) {
                // 修改属性，且新旧值不同 (NaN === NaN 为 false，需特殊处理)
                trigger(target, key, value, oldValue);
            }
        }
        return result;
    },
    deleteProperty(target, key) {
        const hadKey = Object.prototype.hasOwnProperty.call(target, key);
        const oldValue = target[key]; // 记录旧值，虽然trigger不直接用
        const result = Reflect.deleteProperty(target, key);
        if (result && hadKey) {
            trigger(target, key, undefined, oldValue); // 触发更新
        }
        return result;
    },
    has(target, key) { // 拦截 'key' in obj 操作
        track(target, key);
        return Reflect.has(target, key);
    },
    ownKeys(target) { // 拦截 Object.keys(), Object.getOwnPropertyNames() 等
        // 对于数组，访问length会收集依赖
        // 对于对象，如果依赖于key的添加/删除，则需要特殊处理，Vue 3会用一个特殊的Symbol作为key
        track(target, Array.isArray(target) ? 'length' : Symbol('iterator'));
        return Reflect.ownKeys(target);
    }
};

function isObject(val) {
    return val !== null && typeof val === 'object';
}

// reactive API
const reactiveMap = new WeakMap(); // 缓存已代理的对象，避免重复代理

function reactive(target) {
    if (!isObject(target)) {
        return target;
    }
    // 如果已经被代理过，直接返回缓存的代理对象
    if (target.__v_isReactive) {
        return target;
    }
    const existingProxy = reactiveMap.get(target);
    if (existingProxy) {
        return existingProxy;
    }

    const proxy = new Proxy(target, mutableHandlers);
    reactiveMap.set(target, proxy);
    // 标记原始对象已被代理
    Object.defineProperty(target, '__v_isReactive', {
        value: true,
        enumerable: false,
        writable: false,
        configurable: true // 允许在开发模式下修改，方便调试
    });
    return proxy;
}

// ref API (简化的实现)
function ref(raw) {
    const r = {
        get value() {
            track(r, 'value');
            return raw;
        },
        set value(newVal) {
            if (newVal !== raw) {
                const oldValue = raw;
                raw = newVal;
                trigger(r, 'value', newVal, oldValue);
            }
        }
    };
    return r;
}

// computed API (简化的实现)
function computed(getter) {
    let value;
    let dirty = true; // 标记是否需要重新计算

    const runner = effect(getter, {
        lazy: true, // 惰性执行
        scheduler: () => {
            if (!dirty) {
                dirty = true;
                trigger(wrapper, 'value'); // 通知依赖computed的effect重新执行
            }
        }
    });

    const wrapper = {
        get value() {
            if (dirty) {
                value = runner(); // 重新计算
                dirty = false;
            }
            track(wrapper, 'value'); // 收集依赖computed的effect
            return value;
        }
    };
    return wrapper;
}

// 示例用法
console.log("n--- Vue 3 响应式系统 (更完整示例) ---");
const state = reactive({
    count: 0,
    message: 'Hello Vue 3',
    user: {
        firstName: 'John',
        lastName: 'Doe',
        address: {
            city: 'New York'
        }
    },
    items: ['apple', 'banana'],
    isActive: true
});

const myRef = ref(10);
const doubledCount = computed(() => {
    console.log('Computing doubledCount...');
    return state.count * 2;
});
const userName = computed(() => {
    console.log('Computing userName...');
    return `${state.user.firstName} ${state.user.lastName}`;
});

effect(() => {
    console.log(`Render Effect: Count: ${state.count}, Doubled: ${doubledCount.value}, Msg: "${state.message}", User: ${userName.value}, City: ${state.user.address.city}, Ref: ${myRef.value}`);
});

console.log('n--- 触发更新 ---');
state.count++; // 触发count的set，通知Render Effect和doubledCount的scheduler
state.message = 'Hello world'; // 触发message的set，通知Render Effect

console.log('n--- 处理嵌套对象 ---');
state.user.lastName = 'Smith'; // 触发user.lastName的set，通知Render Effect和userName的scheduler
state.user.address.city = 'London'; // 触发user.address.city的set，通知Render Effect

console.log('n--- 动态添加/删除属性 ---');
state.user.age = 30; // 添加新属性
delete state.user.age; // 删除属性

console.log('n--- 数组操作 ---');
state.items[0] = 'orange';
state.items.push('grape');
state.items.length = 1;

console.log('n--- Ref 操作 ---');
myRef.value = 20; // 触发myRef的set，通知Render Effect

这是一个更接近Vue 3核心响应式模块的简化实现。它展示了Proxy如何与effect、track、trigger、ref、computed等协同工作，构建出一个强大而灵活的响应式系统。

5.2 设计角度

从设计角度看，Vue 3选择Proxy是框架成熟和演进的必然结果，体现了以下设计理念：

直观性与开发体验 (DX):
- 统一API: 开发者不再需要记忆Vue.set和Vue.delete等特殊API。直接使用原生JavaScript操作（obj.prop = value, delete obj.prop, arr[index] = value, arr.length = newLength）即可实现响应式，大大降低了心智负担和学习成本。
- 更少的魔法: 虽然Proxy本身也是一种“魔法”，但它在底层提供了更全面的拦截能力，使得上层API能够更接近原生JS语义，减少了Vue 2中为了弥补defineProperty不足而采取的各种“补丁”和“黑科技”（例如数组方法的劫持）。
性能与效率:
- 按需响应式 (Lazy Reactivity): Proxy的惰性特性意味着只有当数据真正被访问时才会被响应式化。这对于具有深层嵌套或大量属性的对象来说，显著减少了初始化的开销和内存占用。Vue 2的defineProperty需要在初始化时递归遍历所有属性，这在大数据场景下是性能瓶颈。
- 更细粒度的控制: Proxy可以提供更细粒度的控制，例如在set陷阱中，可以精确判断是属性的添加、修改还是删除，从而进行更精准的trigger。
可维护性与可扩展性:
- 清晰的职责分离: Proxy负责拦截操作，track和trigger负责依赖管理，effect负责副作用执行。这种模块化的设计使得每个部分职责清晰，更易于理解、测试和维护。
- 拥抱现代JS特性: 采用ES6的Proxy，是拥抱现代JavaScript标准和生态的体现。它使得Vue能够利用语言层面的新能力，而不是依赖于旧有API的巧妙变通。
- 支持更多数据结构: Proxy能够原生支持Map、Set等ES6新数据结构，为框架的未来扩展提供了更广阔的空间。
架构纯粹性:
- Vue 3的响应式系统被设计成一个独立的模块，可以独立于Vue框架本身使用（例如在VueUse等库中）。这种设计使得响应式逻辑更加纯粹，不与渲染层紧密耦合，提升了其通用性和复用价值。

六、Vue 3的战略性转变及其深远影响

Vue 3“抛弃”Object.defineProperty，转而拥抱Proxy，是其走向成熟和现代化的一个里程碑。这次战略性转变带来了以下深远影响：

提升了框架的竞争力: 在与其他现代前端框架（如React、Svelte）的竞争中，Vue 3的响应式系统在开发体验和性能方面更具优势，特别是在处理复杂数据结构时。
降低了开发者的心智负担: 统一的API使得开发者能够更自然地编写JavaScript代码，减少了对框架特殊规则的记忆和学习成本，从而提高了开发效率。
为未来发展奠定了基础: Proxy的强大拦截能力为Vue团队在未来引入更多高级特性（如更强大的状态管理、更灵活的调试工具等）提供了坚实的基础。例如，computed属性的实现也因此变得更加高效和纯粹。
促使社区生态升级: 随着Vue 3的普及，基于新响应式系统开发的库和工具将不断涌现，形成一个更加健壮和现代化的生态系统。

当然，这次转变也带来了对IE 11兼容性的放弃，但这在当前浏览器市场格局下是合理的取舍。多数现代应用已经不再需要支持IE 11，而Proxy带来的巨大收益远超这一兼容性代价。

七、总结

Vue 3从Object.defineProperty到Proxy的转变，是其在响应式系统设计上的一次重大飞跃。它不仅解决了Vue 2长期存在的痛点，如属性增删和数组变化的检测限制，还在性能和开发体验上带来了显著提升。通过拥抱Proxy这一现代JavaScript特性，Vue 3构建了一个更强大、更高效、更符合直觉的响应式系统，为开发者带来了更流畅、更愉悦的开发体验，并为框架的未来发展开启了新的篇章。

一、响应式编程的魅力与Vue 2的早期探索

1.1 Object.defineProperty简介

1.2 Vue 2 响应式系统的核心机制

二、Object.defineProperty的局限与痛点

2.1 无法检测属性的添加和删除

2.2 数组变化的检测限制

2.3 深度嵌套对象的性能开销

2.4 对ES6新数据结构的不支持

三、Proxy的崛起：Vue 3的全新选择

3.1 Proxy是什么？

3.2 Proxy如何解决Object.defineProperty的痛点

3.3 Proxy的唯一缺点：浏览器兼容性

四、Vue 3响应式系统：Proxy的实现细节

4.1 核心概念：reactive、effect、track、trigger