vue3.3中ref和reactive原理源代码分析

源码是ts编写的,这里部分简化成js便于阅读

function ref(value) {return createRef(value, false)
}function createRef(rawValue, shallow) { //shallow是否是浅层定义数据,用于区别ref和shallowRefif (isRef(rawValue)) {//如果已经是ref直接返回源数据return rawValue}return new RefImpl(rawValue, shallow)
}class RefImpl<T> {private _value: Tprivate _rawValue: Tpublic dep?: Dep = undefinedpublic readonly __v_isRef = trueconstructor(value: T,//第一个参数value:传入的源数据public readonly __v_isShallow: boolean //第二个参数__v_isShallow:是否是浅层次响应的属性) {this._rawValue = __v_isShallow ? value : toRaw(value)//toRaw是为了防止死循环this._value = __v_isShallow ? value : toReactive(value)//初始化数据如果是已经包装过的__v_isShallow就是true,否则通过toReactive包装传入的参数}get value() {trackRefValue(this) //依赖收集return this._value}set value(newVal) {const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)//判断是否已经是vue包装过的对象newVal = useDirectValue ? newVal : toRaw(newVal)if (hasChanged(newVal, this._rawValue)) {this._rawValue = newValthis._value = useDirectValue ? newVal : toReactive(newVal)//如果已经包装过返回源数据,否则通过toReactive包装传入的参数triggerRefValue(this, newVal)//触发响应式更新}}
}toReactive = (value) => isObject(value) ? reactive(value) : value //基本数据类型通过class类依赖收集触发更新,引用数据类型通过Proxy代理实现isObject = (val) => val !== null && typeof val === 'object' //上面用到的函数:判断是否是一个对象//reactive()函数调用createReactiveObject函数(内部通过new Proxy())创建响应式数据,如下:function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandler<any>,collectionHandlers: ProxyHandler<any>,proxyMap: WeakMap<Target, any>
) {if (!isObject(target)) { //如果不是对象直接返回源数据,所以必须传入对象才有效if (__DEV__) {console.warn(`value cannot be made reactive: ${String(target)}`)}return target}// target is already a Proxy, return it.// exception: calling readonly() on a reactive objectif (target[ReactiveFlags.RAW] &&!(isReadonly && target[ReactiveFlags.IS_REACTIVE])) {return target}// target already has corresponding Proxyconst existingProxy = proxyMap.get(target)if (existingProxy) {return existingProxy}// only specific value types can be observed.const targetType = getTargetType(target)if (targetType === TargetType.INVALID) {return target}const proxy = new Proxy(//创建Proxy代理target,targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers)proxyMap.set(target, proxy)return proxy
}

总结:

ref() 函数通过调用new RefImpl(rawValue, shallow)这个class类来包装数据,内部有value属性(可读get通过trackRefValue收集依赖;可写set通过triggerRefValue更新依赖), 传入的值会调用toReactive函数进行封装. 
toReactive = (value) => isObject(value) ? reactive(value) : value

isObject = (val) => val !== null && typeof val === 'object'

reactive()函数调用createReactiveObject函数(内部通过new Proxy())创建响应式数据

ref:定义基本数据类型通过class类中的value属性依赖收集触发更新;定义引用数据类型会调用reactive()实现数据代理

reactive:只用于定义引用数据类型,通过Proxy代理实现

附源码地址 https://github.com/vuejs/core/tree/v3.3.4/packages/reactivity/src