Vue3 reactive 源码分析

// 假设以下是Vue3中reactive函数的核心代码
function reactive(target) {
    // 如果是基本类型数据，则直接返回
    if (typeof target !== 'object' || target === null) {
        return target;
    }
 
    // 如果目标已经是响应式的，则直接返回
    if (isReactive(target)) {
        return target;
    }
 
    // 创建响应式对象
    const observed = new Proxy(target, {
        get(target, key, receiver) {
            // 触发依赖收集
            track(target, key);
            // 如果属性的值是对象，则递归转为响应式
            const result = Reflect.get(target, key, receiver);
            if (typeof result === 'object') {
                return reactive(result);
            }
            return result;
        },
        set(target, key, value, receiver) {
            // 为了简化代码，这里不包含响应式依赖的追踪和通知
            const oldValue = target[key];
            const result = Reflect.set(target, key, value, receiver);
            // 如果新旧值都是对象，且不相等，则需要将新值也转为响应式
            if (typeof oldValue === 'object' && oldValue !== value) {
                if (value && typeof value === 'object') {
                    reactive(value);
                }
            }
            return result;
        }
    });
 
    return observed;
}

这个代码示例提供了reactive函数的核心功能，包括基本类型数据的处理、目标是否已经是响应式的检查，以及Proxy的使用来创建可观察的对象。在get代理中，它会触发依赖收集，并递归地将属性值转换为响应式的。在set代理中，它会处理对象的嵌套响应式属性，确保所有引用到的对象也是响应式的。