Vue3/ref_ reactive 实现逻辑浅析

ref reactive 实现逻辑

我们都常说reactive只能代理对象，ref可以代理基本数据类型和对象，我根据源码浅分析了一下原因（个人感觉不是很重要，知道一下就可以了）

reactive实现逻辑摘要

export function reactive<T extends object>(raw:T):T{
  return createProxyObject(raw, mutableHandlers) as unknown as T;
}
//创建proxy对象
function createProxyObject<T extends object>(raw:T,handlers:ProxyHandler<T>):T{
  //加一层是不是对象的判断，防止传入基本类型
  if(!isObject(raw)){
    console.warn(`target ${raw} is not a object`)
    return raw
  }
  return new Proxy(raw,handlers) //!!!!
}

ok我们可以看到reactive是通过proxy实现的，因为proxy只能代理对象，所以reactive只能代理对象

ref实现逻辑摘要

class RefIml{
    private _value:any;
    public dep:Set<ReactiveEffect>
    public _rawvalue:any;
    public __v_isRef:boolean= true
    constructor(value:any){
        this._rawvalue = value
        this._value = convert(value)
        this.dep = new Set()
    }
    get value(){
       
        tarckRefValue(this)
       
        return this._value
    }
    set value(newValue){
        if(!hasChanged(newValue,this._rawvalue)) return
        this._rawvalue = newValue
        this._value = convert(newValue)
        triggerEffects(this.dep)
    }
}

export function ref(raw:any):RefIml{
    return new RefIml(raw)
}
function convert(value:any){
    return  isObject(value) ? reactive(value) : value;
}

• Vue3 中的 ref 是通过一个类实现的，内部用 getter/setter 拦截 .value 的访问来实现响应式。基本类型的值直接存储，引用类型则通过 reactive() 再用 Proxy 包装，以保持嵌套对象的响应式能力。
• ref 的核心思想是，通过一个类来封装原始值，并在访问这个值时触发响应式行为。