【结合vue源码，分析vue2及vue3的数据绑定实现原理】

Vue 2 数据绑定实现

整体思路

Vue 2 的数据绑定主要基于 Object.defineProperty() 方法来实现数据劫持，配合发布 - 订阅模式，当数据发生变化时通知视图更新。主要涉及三个核心部分：Observer 用于数据劫持、Dep 进行依赖收集、Watcher 作为订阅者接收更新通知。

详细实现

1. Observer 类：数据劫持

// 定义 Observer 类，用于对对象属性进行劫持
class Observer {
    constructor(data) {
        // 遍历对象属性
        this.walk(data);
    }

    walk(data) {
        if (!data || typeof data!== 'object') {
            return;
        }
        Object.keys(data).forEach(key => {
            this.defineReactive(data, key, data[key]);
        });
    }

    defineReactive(obj, key, val) {
        // 创建一个 Dep 实例用于依赖收集
        const dep = new Dep();
        // 递归处理子对象
        new Observer(val);
        Object.defineProperty(obj, key, {
            enumerable: true,
            configurable: true,
            get() {
                // 收集依赖
                if (Dep.target) {
                    dep.depend();
                }
                return val;
            },
            set(newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                // 对新值进行递归处理
                new Observer(newVal);
                // 通知依赖更新
                dep.notify();
            }
        });
    }
}

Observer 类会遍历对象的所有属性，使用 Object.defineProperty() 重写属性的 getter 和 setter。在 getter 中收集依赖，在 setter 中通知依赖更新。

2. Dep 类：依赖收集

// Dep 类用于管理依赖
class Dep {
    constructor() {
        // 存储依赖的数组
        this.subs = [];
    }

    depend() {
        if (Dep.target) {
            Dep.target.addDep(this);
        }
    }

    addSub(sub) {
        this.subs.push(sub);
    }

    notify() {
        this.subs.forEach(sub => sub.update());
    }
}
Dep.target = null;

Dep 类有一个 subs 数组来存储依赖（Watcher 实例）。depend 方法用于收集依赖，notify 方法用于通知所有依赖更新。

3. Watcher 类：订阅者

// Watcher 类作为订阅者，监听数据变化
class Watcher {
    constructor(vm, expOrFn, cb) {
        this.vm = vm;
        this.cb = cb;
        this.getter = parsePath(expOrFn);
        this.value = this.get();
    }

    get() {
        Dep.target = this;
        const value = this.getter.call(this.vm, this.vm);
        Dep.target = null;
        return value;
    }

    addDep(dep) {
        dep.addSub(this);
    }

    update() {
        const oldValue = this.value;
        this.value = this.get();
        this.cb.call(this.vm, this.value, oldValue);
    }
}

function 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;
    };
}

Watcher 类在实例化时会触发 get 方法，从而触发 getter 进行依赖收集。当数据变化时，Dep 会调用 Watcher 的 update 方法，update 方法会重新获取数据并调用回调函数更新视图。

Vue 3 数据绑定实现

整体思路

Vue 3 使用 ES6 的 Proxy 对象来实现数据劫持，结合 WeakMap 进行依赖收集，相比 Vue 2 更加灵活高效。核心部分包括 reactive 函数创建响应式对象、effect 函数用于副作用收集、track 和 trigger 函数进行依赖收集和触发更新。

详细实现

1. reactive 函数：创建响应式对象

// reactive 函数用于创建响应式对象
function reactive(target) {
    const handler = {
        get(target, key, receiver) {
            // 收集依赖
            track(target, key);
            return Reflect.get(target, key, receiver);
        },
        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;
        }
    };
    return new Proxy(target, handler);
}

reactive 函数使用 Proxy 对象拦截对象的 get 和 set 操作。在 get 操作中调用 track 进行依赖收集，在 set 操作中调用 trigger 触发更新。

2. 依赖收集和触发更新

// 用于存储对象及其依赖映射的 WeakMap
const targetMap = new WeakMap();

function track(target, key) {
    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()));
    }
    if (activeEffect) {
        dep.add(activeEffect);
    }
}

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

targetMap 是一个 WeakMap，用于存储对象及其依赖映射。track 函数负责收集依赖，将 activeEffect 添加到对应的依赖集合中。trigger 函数负责触发更新，遍历依赖集合并执行其中的副作用函数。

3. effect 函数：副作用收集

let activeEffect = null;

function effect(fn) {
    const _effect = function () {
        activeEffect = _effect;
        fn();
        activeEffect = null;
    };
    _effect();
    return _effect;
}

effect 函数用于创建副作用函数，在执行副作用函数之前将其赋值给 activeEffect，以便在 track 函数中进行依赖收集。

总结

• Vue 2：使用 Object.defineProperty() 实现数据劫持，需要递归处理对象属性，对于新增和删除属性需要额外处理。
• Vue 3：使用 Proxy 对象实现数据劫持，能拦截更多操作，无需递归处理，对新增和删除属性的处理更加自然，性能和灵活性更高。