深入详解Vue3ref底层实现原理

function ref(value) { // ref方法
    return createRef(value, false);
}

function shallowRef(value) { // 浅层ref
    return createRef(value, true);
}

function createRef(rawValue, shallow) { // 创建ref
    if (isRef(rawValue)) { // 判断是否为ref
        return rawValue;
    }
    return new RefImpl(rawValue, shallow); // 返回RefImpl实例对象
}

class RefImpl {
    constructor(value, __v_isshallow) { // 值，是否浅层ref
        this.__v_isShallow = __v_isShallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = __v_isShallow ? value : toRaw(value);
        this._value = __v_isShallow ? value : toReactive(value);  // 判断是否为浅层ref，否则调用toReactive，方法在下面
    }
    get value() { // getter方法 获取value值
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) { // setter方法 设置value值
        const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
        newVal = useDirectValue ? newVal : toRaw(newVal);
        if (hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = useDirectValue ? newVal : toReactive(newVal); // 在value值更新时进行判断是否为浅层ref，否则调用toReactive
            triggerRefValue(this, newVal);
        }
    }
}

const toReactive = (value) => isObject(value) ? reactive(value) : value; // 是否为对象，如果是则调用reactive

class RefImpl {
    #value = '' // #value 私有属性

    constructor(value) {
        this.#value = value 
    }
    get value() {
        console.log('触发获取', this.#value)
        return this.#value
    }
    set value(newVal) {
        console.log('触发更新', newVal)
        this.#value = newVal
    }
}

function ref(value) {
    return new RefImpl(value)
}

const test = ref('我是小涛测试')

setTimeout(() => {
  test.value = '我设置了值'
}, 2000)

const test = {
  _value: '',
  get value() {
      console.log('触发获取', this._value)
      return this._value
  },
  set value(newVal) {
      console.log('触发更新', newVal)
      this._value = newVal
  }
}