vue3源码：reactive与ref深度对比，为什么要使用 ref

reactive的局限性：reactive函数会把传入的object作为proxy的target参数，而proxy只能代理对象，不能代理基本数据类型

ref的实现原理：在类RefImpl的构造函数中执行了一个toReactive 方法，传入了value，该方法把数据分成了两种类型：

1. 复杂数据类型：调用了 reactive 函数，即把 value 变为响应性的。
2. 简单数据类型：直接把 value 原样返回。

---

下面进行核心源码解读

reactive简要源码

1. 触发 reactive 方法：return createReactiveObject
2. 执行createReactiveObject方法：从WeakMap缓存对象中读取object
   • 存在：return existingProxy
   • 不存在：生成proxy，并执行 proxyMap.set(target, proxy) 进行缓存，最后return proxy
3. 最终都是返回了代理对象。

import {
    mutableHandlers } from './baseHandlers'

/**
 * 响应性 Map 缓存对象
 * key：target
 * val：proxy
 */
export const reactiveMap = new WeakMap<object, any>()

/**
 * 为复杂数据类型，创建响应性对象
 * @param target 被代理对象
 * @returns 代理对象
 */
export function reactive(target: object) {
   
	return createReactiveObject(target, mutableHandlers, reactiveMap)
}

/**
 * 创建响应性对象
 * @param target 被代理对象
 * @param baseHandlers handler
 */
function createReactiveObject(
	target: object,
	baseHandlers: ProxyHandler<any>,
	proxyMap: WeakMap<object, any>
) {
   
	// 如果该实例已经被代理，则直接读取即可
	const existingProxy = proxyMap.get(target)
	if (existingProxy) {
   
		return existingProxy
	}

	// 未被代理,则生成 proxy 实例
	const proxy = new Proxy(target, baseHandlers)

	// 缓存代理对象
	proxyMap.set(target, proxy)
	return proxy
}

baseHandlers 就是导入 的mutableHandlers