vue3의 Reactive와 ref의 차이점에 대한 자세한 설명(소스코드 분석)

vue에서 반응성과 심판의 차이점은 무엇입니까? 다음 기사는 vue3의 반응성과 참조의 차이점을 철저하게 이해하기 위해 소스 코드에 대해 자세히 설명합니다. 도움이 되기를 바랍니다!

vue3의 일상적인 개발에서 많은 사람들이 자신의 습관에 따라 reactive 또는 ref를 사용하는 것을 발견했습니다. 그렇다면 이미 reactive가 있는데 왜 또 다른 ref를 디자인해야 합니까? 실제 적용 시나리오와 둘 사이의 차이점은 무엇입니까? reactive或ref一把梭，虽然这样都可以实现需求，既然这样那为什么已经有了reactive还需要再去设计一个ref呢？这两者的实际运用场景以及区别是什么呢？

并且关于ref的底层逻辑，有的人说ref的底层逻辑还是reactive。有的人说ref的底层是class，value只是这个class的一个属性，那这两种说法哪种正确呢？都有没有依据呢？

抱着这样的疑问我们本次就深入源码，彻底搞清vue3中reactive和ref的区别。（学习视频分享：vue视频教程）

不想看源码的童鞋，可以直接拉到后面看总结

reactive

源码地址：packages/reactivity/reactive.ts

首先我们看一下vue3中用来标记目标对象target类型的ReactiveFlags

// 标记目标对象 target 类型的 ReactiveFlags
export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  RAW = '__v_raw'
}

export interface Target {
  [ReactiveFlags.SKIP]?: boolean          // 不做响应式处理的数据
  [ReactiveFlags.IS_REACTIVE]?: boolean   // target 是否是响应式
  [ReactiveFlags.IS_READONLY]?: boolean   // target 是否是只读
  [ReactiveFlags.RAW]?: any               // 表示proxy 对应的源数据， target 已经是 proxy 对象时会有该属性
}

reactive

export function reactive<t>(target: T): UnwrapNestedRefs<t>
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  // 如果目标对象是一个只读的响应数据，则直接返回目标对象
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  // 创建 observe
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}</t></t>

reactive函数接收一个target对象，如果target对象只读则直接返回该对象

若非只读则直接通过createReactiveObject创建observe对象

createReactiveObject

看着长不要怕，先贴createReactiveObject完整代码，我们分段阅读

/**
 * 
 * @param target 目标对象
 * @param isReadonly 是否只读
 * @param baseHandlers 基本类型的 handlers
 * @param collectionHandlers 主要针对(set、map、weakSet、weakMap)的 handlers
 * @param proxyMap  WeakMap数据结构
 * @returns 
 */

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<target>
) {

  // typeof 不是 object 类型的，在开发模式抛出警告，生产环境直接返回目标对象
  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
  // 已经是响应式的就直接返回(取ReactiveFlags.RAW 属性会返回true，因为进行reactive的过程中会用weakMap进行保存，
  // 通过target能判断出是否有ReactiveFlags.RAW属性)
  // 例外：对reactive对象进行readonly()
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  // 对已经Proxy的，则直接从WeakMap数据结构中取出这个Proxy对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a whitelist of value types can be observed.
  // 只对targetTypeMap类型白名单中的类型进行响应式处理
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  // proxy 代理 target
  // (set、map、weakSet、weakMap) collectionHandlers
  // (Object、Array) baseHandlers
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}</target></any></any>

首先我们看到createReactiveObject接收了五个参数

  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<target></target></any></any>

target 目标对象

isReadonly 是否只读

baseHandlers 基本类型的 handlers 处理数组，对象

collectionHandlers 处理 set、map、weakSet、weakMap

proxyMap WeakMap数据结构存储副作用函数

---

这里主要是通过ReactiveFlags.RAW和ReactiveFlags.IS_REACTIVE判断是否是响应式数据，若是则直接返回该对象

 if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }

---

对于已经是Proxy的，则直接从WeakMap数据结构中取出这个Proxy对象并返回

  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

---

这里则是校验了一下当前target的类型是不是Object、Array、Map、Set、WeakMap、WeakSet，如果都不是则直接返回该对象，不做响应式处理

 // 只对targetTypeMap类型白名单中的类型进行响应式处理
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }

校验类型的逻辑

function getTargetType(value: Target) {
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
    ? TargetType.INVALID
    : targetTypeMap(toRawType(value))
}

function targetTypeMap(rawType: string) {
  switch (rawType) {
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}

---

所有的前置校验完后，就可以使用proxy 代理target对象了

这里使用了一个三目运算符通过TargetType.COLLECTION来执行不同的处理逻辑

• (set、map、weakSet、weakMap) 使用 collectionHandlers
• (Object、Array) 使用 baseHandlers

// proxy 代理 target
  // (set、map、weakSet、weakMap) collectionHandlers
  // (Object、Array) baseHandlers
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy

---

现在对createReactiveObject的执行逻辑是不是就很清晰了

到这里还没有结束，createReactiveObject中最后proxy是如何去代理target的呢？这里我们用baseHandlers举例，深入baseHandlers的内部去看看

baseHandlers

源码地址：packages/reactivity/baseHandlers.ts

在reactive.ts中我们可以看到一共引入了四种 handler

import {
  mutableHandlers,
  readonlyHandlers,
  shallowReactiveHandlers,
  shallowReadonlyHandlers
} from './baseHandlers'

• mutableHandlers 可变处理
• readonlyHandlers 只读处理
• shallowReactiveHandlers 浅观察处理（只观察目标对象的第一层属性）
• shallowReadonlyHandlers 浅观察 && 只读

我们以mutableHandlers为例

// 可变处理
// const get = /*#__PURE__*/ createGetter()
// const set = /*#__PURE__*/ createSetter()
// get、has、ownKeys 会触发依赖收集 track()
// set、deleteProperty 会触发更新 trigger()
export const mutableHandlers: ProxyHandler<object> = {
  get,                  // 用于拦截对象的读取属性操作
  set,                  // 用于拦截对象的设置属性操作
  deleteProperty,       // 用于拦截对象的删除属性操作
  has,                  // 检查一个对象是否拥有某个属性
  ownKeys               // 针对 getOwnPropertyNames,  getOwnPropertySymbols, keys 的代理方法
}</object>

这里的get和set分别对应着createGetter()、createSetter()

• createGetter()

先上完整版代码

/**
 * 用于拦截对象的读取属性操作
 * @param isReadonly 是否只读
 * @param shallow 是否浅观察
 * @returns 
 */
function createGetter(isReadonly = false, shallow = false) {
  /**
   * @param target 目标对象
   * @param key 需要获取的值的键值
   * @param receiver 如果遇到 setter，receiver 则为setter调用时的this值
   */
  return function get(target: Target, key: string | symbol, receiver: object) {
    // ReactiveFlags 是在reactive中声明的枚举值，如果key是枚举值则直接返回对应的布尔值
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    } else if (
      // 如果key是raw  receiver 指向调用者，则直接返回目标对象。
      // 这里判断是为了保证触发拦截 handle 的是 proxy 本身而不是 proxy 的继承者
      // 触发拦的两种方式：一是访问 proxy 对象本身的属性，二是访问对象原型链上有 proxy 对象的对象的属性，因为查询会沿着原型链向下找
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }

    const targetIsArray = isArray(target)
    // 如果目标对象 不为只读、是数组、key属于arrayInstrumentations：['includes', 'indexOf', 'lastIndexOf']方法之一，即触发了这三个方法之一
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      // 通过 proxy 调用，arrayInstrumentations[key]的this一定指向 proxy
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

    const res = Reflect.get(target, key, receiver)

    // 如果 key 是 symbol 内置方法，或者访问的是原型对象__proto__，直接返回结果，不收集依赖
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }

    // 不是只读类型的 target 就收集依赖。因为只读类型不会变化，无法触发 setter，也就会触发更新
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    // 如果是浅观察，不做递归转化，就是说对象有属性值还是对象的话不递归调用 reactive()
    if (shallow) {
      return res
    }

    // 如果get的结果是ref
    if (isRef(res)) {
      // ref unwrapping - does not apply for Array + integer key.
      // 返回 ref.value，数组除外
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      return shouldUnwrap ? res.value : res
    }

    // 由于 proxy 只能代理一层，如果子元素是对象，需要递归继续代理
    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      return isReadonly ? readonly(res) : reactive(res)
    }

    return res
  }
}

看着长，最终就是track()依赖收集

track()依赖收集内容过多，和trigger()

그리고 ref의 기본 논리와 관련하여 어떤 사람들은 ref의 기본 논리가 여전히 반응적이라고 말합니다. 어떤 사람들은 ref의 맨 아래 레이어가 class이고 value는 이 class의 속성일 뿐이라고 말합니다. 그럼 이 두 문장 중 어느 것이 옳은가요? 이에 대한 근거가 있나요?

이 질문을 통해 이번에는 소스 코드에 깊이 들어가 vue3의 reactive와 ref의 차이점을 철저하게 이해하겠습니다. (학습 영상 공유: vue video tutorial
• )

  소스 코드를 보고 싶지 않다면 바로 뒤로 스크롤하여 요약을 볼 수 있습니다

  🎜reactive🎜

  🎜소스 코드 주소: packages/reactivity/reactive.ts<br>🎜🎜먼저 <code>vue3에서 대상을 표시하는 데 사용되는 ReactiveFlags를 살펴보겠습니다. 객체 대상 유형 🎜

  /**
   * 拦截对象的设置属性操作
   * @param shallow 是否是浅观察
   * @returns 
   */
  function createSetter(shallow = false) {
    /**
     * @param target 目标对象
     * @param key 设置的属性名称
     * @param value 要改变的属性值
     * @param receiver 如果遇到setter，receiver则为setter调用时的this值
     */
    return function set(
      target: object,
      key: string | symbol,
      value: unknown,
      receiver: object
    ): boolean {
      let oldValue = (target as any)[key]
      // 如果模式不是浅观察模式
      if (!shallow) {
        // 拿新值和老值的原始值，因为新传入的值可能是响应式数据，如果直接和 target 上原始值比较是没有意义的
        value = toRaw(value)
        oldValue = toRaw(oldValue)
        // 目标对象不是数组，旧值是ref，新值不是ref，则直接赋值，这里提到ref
        if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
          oldValue.value = value
          return true
        }
      } else {
        // in shallow mode, objects are set as-is regardless of reactive or not
      }
      // 检查对象是否有这个属性
      const hadKey =
        isArray(target) && isIntegerKey(key)
          ? Number(key) 🎜<span style="font-size: 18px;">🎜<code>반응형</code>🎜</span>🎜<pre class="brush:php;toolbar:false">export function ref(value?: unknown) {
    return createRef(value, false)
  }

  🎜반응형 함수는 target 객체를 받습니다. target 객체가 읽기 전용이면 객체를 직접 반환하세요🎜🎜읽기 전용이 아니면 를 생성하세요 <code>createReactiveObject🎜🎜🎜createReactiveObject🎜🎜🎜를 통해 객체를 직접 관찰하지 마세요. 길어 보이면 먼저 createReactiveObject의 전체 코드를 게시하고 섹션🎜

  export function shallowRef(value?: unknown) {
    return createRef(value, true)
  }

  🎜에서 읽어보겠습니다. 먼저 createReactiveObject가 5개의 매개변수🎜

  function createRef(rawValue: unknown, shallow: boolean) {
    // 是否是 ref 数据
    if (isRef(rawValue)) {
      return rawValue
    }
    return new RefImpl(rawValue, shallow)
  }

  🎜🎜target을 받는 것을 볼 수 있습니다. 대상 객체🎜🎜🎜🎜isReadonly 읽기 전용인지 여부🎜🎜🎜🎜baseHandlers 기본 유형 핸들러🎜는 배열과 객체를 처리합니다🎜🎜🎜collectionHandlers🎜 처리 세트, 맵, WeakSet, WeakMap🎜🎜🎜proxyMap🎜 WeakMap 데이터 구조는 부작용을 저장합니다. function🎜

  ---

  🎜여기서는 주로 ReactiveFlags.RAW와 ReactiveFlags.IS_REACTIVE를 통해 반응형 데이터인지 판단합니다. 그렇다면 객체를 직접 반환하세요 🎜

  export function isRef(r: any): r is Ref {
    return Boolean(r && r.__v_isRef === true)
  }

  ---

  🎜이미 프록시인 경우 WeakMap 데이터 구조 개체에서 직접 프록시를 꺼내고 🎜

  class RefImpl<t> {
    private _value: T
    private _rawValue: T
  
    public dep?: Dep = undefined
    // 只读属性 __v_isRef 判断是否是ref数据的静态标识
    public readonly __v_isRef = true
  
    constructor(value: T, public readonly _shallow: boolean) {
      this._rawValue = _shallow ? value : toRaw(value)  // 非浅观察用toRaw()包裹原始值
      this._value = _shallow ? value : toReactive(value) // 非浅观察用toReactive()处理数据
    }
  
    get value() {
    // 依赖收集
      trackRefValue(this)
      return this._value
    }
  
    set value(newVal) {
      newVal = this._shallow ? newVal : toRaw(newVal) // 非浅观察用toRaw()包裹值
      // 两个值不相等
      if (hasChanged(newVal, this._rawValue)) {
        this._rawValue = newVal
        this._value = this._shallow ? newVal : toReactive(newVal)
        triggerRefValue(this, newVal) // 触发依赖，派发更新
      }
    }
  }</t>

  ---

  🎜를 반환합니다. 현재 target의 유형이 Object, Array, Map, Set인지 확인하세요. >, WeakMap, WeakSet, 둘 다 해당되지 않으면 객체는 응답 처리 없이 직접 반환됩니다🎜

  export const toReactive = <t>(value: T): T =>
    isObject(value) ? reactive(value) : value</t>

  🎜검증 유형 논리🎜

  export function trackRefValue(ref: RefBase<any>) {
    if (isTracking()) {
      ref = toRaw(ref)
      if (!ref.dep) {
        ref.dep = createDep()
      }
      if (__DEV__) {
        trackEffects(ref.dep, {
          target: ref,
          type: TrackOpTypes.GET,
          key: 'value'
        })
      } else {
        trackEffects(ref.dep)
      }
    }
  }</any>

  ---

  🎜After 모든 사전 검증이 완료되면 프록시를 사용하여 대상 객체를 프록시할 수 있습니다🎜🎜여기 Ternary 연산자가 TargetType을 사용합니다. <code>collectionHandlers

🎜(Object, Array)를 사용하여 다양한 처리 로직🎜
🎜(set, map, WeakSet, WeakMap)을 수행하는 COLLECTION baseHandlers 사용 code>

export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  ref = toRaw(ref)
  if (ref.dep) {
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: 'value',
        newValue: newVal
      })
    } else {
      triggerEffects(ref.dep)
    }
  }
}</any>

---

🎜이제 createReactiveObject의 실행 로직이 동일합니까? 매우 명확합니다🎜🎜아직 끝나지 않았습니다. 마지막 는 어떻게 되나요? <code>createReactiveObject 프록시 대상의 프록시? 여기서는 baseHandlers를 예로 사용하고 baseHandlers🎜🎜🎜baseHandlers내부를 살펴보겠습니다. >🎜🎜🎜소스 코드 주소: packages/reactivity/baseHandlers.ts🎜🎜reactive.ts에서 총 4개의 핸들러가 생성된 것을 볼 수 있습니다. 도입됨🎜

// obj是响应式数据
const obj = reactive({ foo: 1, bar: 2 })

// newObj 对象下具有与 obj对象同名的属性，并且每个属性值都是一个对象
// 该对象具有一个访问器属性 value，当读取 value的值时，其实读取的是 obj 对象下相应的属性值 
const newObj = {
    foo: {
        get value() {
            return obj.foo
        }
    },
    bar: {
        get value() {
            return obj.bar
        }
    }
}

effect(() => {
    // 在副作用函数内通过新对象 newObj 读取 foo 的属性值
    console.log(newObj.foo)
})
// 正常触发响应
obj.foo = 100

🎜mutableHandlers 변수 처리🎜readonlyHandlers 읽기 전용 처리🎜shallowReactiveHandlers 얕은 관찰 처리 (대상 개체의 첫 번째 수준 속성만 관찰)🎜shallowReadonlyHandlers 얕은 관찰 및& 읽기 전용
🎜 mutableHandlers를 사용하겠습니다. > 예를 들어🎜

{
    get value() {
        return obj.foo
    }
}

🎜여기서 get 및 set는 각각 createGetter() 및 createSetter()에 해당합니다. 🎜🎜🎜🎜🎜createGetter()🎜🎜

🎜먼저 정식 버전의 코드로 가보세요🎜rrreee🎜길어보이고 마지막으로 track() 의존성입니다 collection🎜

🎜track() 너무 많은 콘텐츠를 수집하는 데 의존합니다. 업데이트를 트리거하는 trigger()와 함께 별도의 기사🎜🎜🎜🎜🎜🎜createSetter( )🎜🎜

/**
 * 拦截对象的设置属性操作
 * @param shallow 是否是浅观察
 * @returns 
 */
function createSetter(shallow = false) {
  /**
   * @param target 目标对象
   * @param key 设置的属性名称
   * @param value 要改变的属性值
   * @param receiver 如果遇到setter，receiver则为setter调用时的this值
   */
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    // 如果模式不是浅观察模式
    if (!shallow) {
      // 拿新值和老值的原始值，因为新传入的值可能是响应式数据，如果直接和 target 上原始值比较是没有意义的
      value = toRaw(value)
      oldValue = toRaw(oldValue)
      // 目标对象不是数组，旧值是ref，新值不是ref，则直接赋值，这里提到ref
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }
    // 检查对象是否有这个属性
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) <p><code>trigger()</code>触发更新</p><h2 id="strong-ref-strong"><strong>ref</strong></h2><p>源码地址：<code>packages/reactivity/src/ref.ts</code></p><p>接收一个可选<code>unknown</code>，接着直接调用<code>createRef()</code></p><pre class="brush:php;toolbar:false">export function ref(value?: unknown) {
  return createRef(value, false)
}

与ref的区别就是在调用createRef()时第二个值传的是true

export function shallowRef(value?: unknown) {
  return createRef(value, true)
}

看一下官方文档上对shallowRef的解释

createRef

通过isRef()判断是否是ref数据，是则直接返回该数据，不是则通过new RefImpl创建ref数据

在创建时会传两个值一个是rawValue(原始值)，一个是shallow(是否是浅观察)，具体使用场景可看上面ref和shallowRef的介绍

function createRef(rawValue: unknown, shallow: boolean) {
  // 是否是 ref 数据
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

• isRef()

通过__v_isRef只读属性判断是否是ref数据，此属性会在RefImpl创建ref数据时添加

export function isRef(r: any): r is Ref {
  return Boolean(r && r.__v_isRef === true)
}

RefImpl

class RefImpl<t> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  // 只读属性 __v_isRef 判断是否是ref数据的静态标识
  public readonly __v_isRef = true

  constructor(value: T, public readonly _shallow: boolean) {
    this._rawValue = _shallow ? value : toRaw(value)  // 非浅观察用toRaw()包裹原始值
    this._value = _shallow ? value : toReactive(value) // 非浅观察用toReactive()处理数据
  }

  get value() {
  // 依赖收集
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    newVal = this._shallow ? newVal : toRaw(newVal) // 非浅观察用toRaw()包裹值
    // 两个值不相等
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal) // 触发依赖，派发更新
    }
  }
}</t>

根据RefImpl我们可以看到ref的底层逻辑，如果是对象确实会使用reactive进行处理，并且ref的创建使用的也是RefImpl class实例，value只是RefImpl的属性

在我们访问和设置 ref的value值时，也分别是通过get和set拦截进行依赖收集和派发更新的

• toReactive

我们来看一下toReactive()这个方法，在RefImpl中创建ref数据时会调用toReactive()方法，这里会先判断传进来的值是不是对象，如果是就用reactive()包裹，否则就返回其本身

export const toReactive = <t>(value: T): T =>
  isObject(value) ? reactive(value) : value</t>

• trackRefValue

ref的依赖收集方法

export function trackRefValue(ref: RefBase<any>) {
  if (isTracking()) {
    ref = toRaw(ref)
    if (!ref.dep) {
      ref.dep = createDep()
    }
    if (__DEV__) {
      trackEffects(ref.dep, {
        target: ref,
        type: TrackOpTypes.GET,
        key: 'value'
      })
    } else {
      trackEffects(ref.dep)
    }
  }
}</any>

• triggerRefValue

ref的派发更新方法

export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  ref = toRaw(ref)
  if (ref.dep) {
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: 'value',
        newValue: newVal
      })
    } else {
      triggerEffects(ref.dep)
    }
  }
}</any>

总结

看完reactive和ref源码，相信对本文一开始的几个问题也都有了答案，这里也总结了几个问题：

• 问：ref的底层逻辑是什么，具体是如何实现的

答：ref底层会通过 new RefImpl()来创造ref数据，在new RefImpl()会首先给数据添加__v_isRef只读属性用来标识ref数据。而后判断传入的值是否是对象，如果是对象则使用toReactive()处理成reactive，并将值赋给RefImpl()的value属性上。在访问和设置ref数据的value时会分别触发依赖收集和派发更新流程。

---

• 问：ref底层是否会使用reactive处理数据

答：RefImpl中非浅观察会调用toReactive()方法处理数据，toReactive()中会先判断传入的值是不是一个对象，如果是对象则使用reactive进行处理，不是则直接返回值本身。

---

• 问：为什么已经有了reactive还需要在设计一个ref呢？

答： 因为vue3响应式方案使用的是proxy，而proxy的代理目标必须是非原始值，没有任何方式能去拦截对原始值的操作，所以就需要一层对象作为包裹，间接实现原始值的响应式方案。

---

• 问：为什么ref数据必须要有个value属性，访问ref数据必须要通过.value的方式呢？

答：这是因为要解决响应式丢失的问题，举个例子：

// obj是响应式数据
const obj = reactive({ foo: 1, bar: 2 })

// newObj 对象下具有与 obj对象同名的属性，并且每个属性值都是一个对象
// 该对象具有一个访问器属性 value，当读取 value的值时，其实读取的是 obj 对象下相应的属性值 
const newObj = {
    foo: {
        get value() {
            return obj.foo
        }
    },
    bar: {
        get value() {
            return obj.bar
        }
    }
}

effect(() => {
    // 在副作用函数内通过新对象 newObj 读取 foo 的属性值
    console.log(newObj.foo)
})
// 正常触发响应
obj.foo = 100

可以看到，在现在的newObj对象下，具有与obj对象同名的属性，而且每个属性的值都是一个对象，例如foo 属性的值是：

{
    get value() {
        return obj.foo
    }
}

该对象有一个访问器属性value，当读取value的值时，最终读取的是响应式数据obj下的同名属性值。也就是说，当在副作用函数内读取newObj.foo时，等价于间接读取了obj.foo的值。这样响应式数据就能够与副作用函数建立响应联系

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 vue3의 Reactive와 ref의 차이점에 대한 자세한 설명(소스코드 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!