reactive的局限性:reactive
函数会把传入的object作为proxy
的target
参数,而proxy
只能代理对象,不能代理基本数据类型
ref的实现原理:在类RefImpl
的构造函数中执行了一个toReactive
方法,传入了value
,该方法把数据分成了两种类型:
- 复杂数据类型:调用了
reactive
函数,即把value
变为响应性的。 - 简单数据类型:直接把
value
原样返回。
下面进行核心源码解读
reactive简要源码
- 触发
reactive
方法:return createReactiveObject
- 执行
createReactiveObject
方法:从WeakMap
缓存对象中读取object- 存在:
return existingProxy
- 不存在:生成
proxy
,并执行proxyMap.set(target, proxy)
进行缓存,最后return proxy
- 存在:
- 最终都是返回了代理对象。
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