源码是ts编写的,这里部分简化成js便于阅读
function ref(value) {
return createRef(value, false)
}
function createRef(rawValue, shallow) { //shallow是否是浅层定义数据,用于区别ref和shallowRef
if (isRef(rawValue)) {//如果已经是ref直接返回源数据
return rawValue
}
return new RefImpl(rawValue, shallow)
}
class RefImpl<T> {
private _value: T
private _rawValue: T
public dep?: Dep = undefined
public readonly __v_isRef = true
constructor(
value: T,//第一个参数value:传入的源数据
public readonly __v_isShallow: boolean //第二个参数__v_isShallow:是否是浅层次响应的属性
) {
this._rawValue = __v_isShallow ? value : toRaw(value)
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 = newVal
this._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 object
if (
target[ReactiveFlags.RAW] &&
!(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
return target
}
// target already has corresponding Proxy
const 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://www.toymoban.com/news/detail-682555.html
附源码地址 https://github.com/vuejs/core/tree/v3.3.4/packages/reactivity/src文章来源地址https://www.toymoban.com/news/detail-682555.html
到了这里,关于vue3.3中ref和reactive原理源代码分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!