vue3中ref实现原理，传入值为基本数据类型和引用数据类型时是怎么区分的？

1.ref

在 Vue 3 中，ref 的实现主要依赖于 Proxy 对象和 Dep（依赖）机制来追踪依赖关系和触发更新。不过，对于基本数据类型，ref 并不会直接使用 Proxy，因为 Proxy 需要一个对象作为目标，而基本数据类型本身不是对象。相反，ref 会创建一个包含 value 属性的对象来包装基本数据类型，从而使其能够被响应式系统所管理。

下面是一个简化的 ref 源码分析：

源码位置

ref 的定义位于 @vue/reactivity 包中的 src/ref.ts 文件中。

源码分析

// @vue/reactivity/src/ref.ts

import { isObject, hasOwn, isFunction } from '@vue/shared'
import { track, trigger } from './effect'
import { ReactiveFlags, Target, TargetWithMemo } from './reactive'
import { EffectScope, recordEffectScope } from './effectScope'
import { toRaw, toReactive } from './reactive'

export interface Ref<T> {
  value: T
  __v_isRef: true
}

export function ref<T>(value: T): Ref<UnwrapRef<T>> {
  return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean): Ref<unknown> {
  if (isRef(rawValue)) {
    return rawValue
  }

  const r: Ref<any> = {
    __v_isRef: true,
    _rawValue: rawValue,
    _value: shallow ? rawValue : toReactive(rawValue),
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return r._value
    },
    set value(newVal) {
      if (hasChanged(r._rawValue, newVal)) {
        r._rawValue = newVal
        r._value = shallow ? newVal : toReactive(newVal)
        trigger(r, TriggerOpTypes.SET, 'value', newVal)
      }
    }
  }

  return r
}

关键点解析

1. createRef 函数:

   • createRef 是 ref 的实际实现函数。它接受两个参数：rawValue（原始值）和 shallow（是否浅层响应式）。
   • 如果传入的 rawValue 已经是一个 ref，则直接返回该 ref。
   • 创建一个 r 对象，该对象具有以下属性：
     • __v_isRef: 标记这是一个 ref。
     • _rawValue: 存储原始值。
     • _value: 存储响应式值。如果 shallow 为 false，则将原始值转换为响应式对象（使用 toReactive）。
     • get value 和 set value 方法用于访问和设置 value 属性。

2. get value 方法:

   • 当访问 r.value 时，会调用 track 函数来追踪依赖关系。这使得 Vue 能够知道哪些组件或计算属性依赖于这个 ref。
   • 返回 _value 属性的值。

3. set value 方法:

   • 当设置 r.value 时，首先检查新值 newVal 是否与 _rawValue 不同。如果不同，则更新 _rawValue 和 _value。
   • 调用 trigger 函数来触发依赖的更新。这会导致所有依赖于这个 ref 的组件或计算属性重新渲染或计算。

小结

• 对于基本数据类型，ref 通过创建一个包含 value 属性的对象来包装该值，从而使该值变得响应式。
• get value 和 set value 方法分别用于追踪依赖关系和触发更新。
• toReactive 函数用于将值转换为响应式对象，对于基本数据类型，它不会做任何特殊处理，只是返回原值。

通过这种方式，Vue 3 能够有效地管理基本数据类型的响应式变化。

2.toReactive

在 Vue 3 中，toReactive 函数用于将一个值转换为响应式对象。toReactive 主要通过 reactive 函数来实现，而 reactive 函数的核心是使用 Proxy 对象来拦截对对象属性的访问和修改，从而实现响应式。

源码位置

toReactive 和 reactive 的定义位于 @vue/reactivity 包中的 src/reactive.ts 文件中。

源码分析

toReactive 函数

// @vue/reactivity/src/reactive.ts

import { isObject, hasOwn, isFunction } from '@vue/shared'
import { reactiveMap, readonlyMap } from './baseHandlers'
import { ReactiveFlags, Target, TargetWithMemo } from './reactive'
import { EffectScope, recordEffectScope } from './effectScope'
import { toRaw, toReactive } from './reactive'

export function toReactive<T>(value: T): T {
  return isObject(value) ? reactive(value) : value
}

export function reactive<T extends object>(target: T): UnwrapNestedRefs<T> {
  // 如果目标已经是响应式对象，直接返回
  if (isReactive(target)) {
    return target
  }
  // 如果目标是只读对象，返回只读版本
  if (isReadonly(target)) {
    return readonly(target)
  }
  // 创建响应式代理
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

createReactiveObject 函数

function createReactiveObject(
  target: Target,
  isShallow: 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
  }

  // 查找缓存的代理对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  // 创建新的代理对象
  const proxy = new Proxy(target, collectionHandlers)
  proxyMap.set(target, proxy)
  return proxy
}

关键点解析

1. toReactive 函数:

   • toReactive 函数首先检查传入的值是否是对象。如果是对象，调用 reactive 函数将其转换为响应式对象；否则，直接返回原值。
   • 这意味着对于基本数据类型（如数字、字符串等），toReactive 直接返回原值，不会进行任何包装或转换。

2. reactive 函数:

   • reactive 函数首先检查传入的目标是否已经是响应式对象。如果是，直接返回该对象。
   • 如果目标是只读对象，返回只读版本。
   • 否则，调用 createReactiveObject 函数创建一个新的响应式代理对象。

3. createReactiveObject 函数:

   • createReactiveObject 函数首先检查传入的目标是否是对象。如果不是对象，直接返回原值。
   • 检查是否有缓存的代理对象。如果有，返回缓存的代理对象。
   • 否则，使用 Proxy 创建一个新的代理对象，并将其缓存到 proxyMap 中。

处理基本数据类型和引用数据类型

• 基本数据类型:

  • 对于基本数据类型（如数字、字符串等），toReactive 直接返回原值，不会进行任何包装或转换。这是因为基本数据类型本身不能通过 Proxy 进行拦截，所以没有必要对其进行响应式处理。

• 引用数据类型:

  • 对于引用数据类型（如对象、数组等），toReactive 会调用 reactive 函数，reactive 函数会进一步调用 createReactiveObject 函数。
  • createReactiveObject 使用 Proxy 创建一个新的代理对象，该代理对象会拦截对目标对象属性的访问和修改，从而实现响应式。

小结

• toReactive 函数通过 reactive 函数将引用数据类型转换为响应式对象。
• 对于基本数据类型，toReactive 直接返回原值，不进行任何包装或转换。
• reactive 函数使用 Proxy 创建响应式代理对象，从而实现对引用数据类型的响应式管理。

通过这种方式，Vue 3 能够高效地管理和追踪复杂数据结构的变化，同时保持对基本数据类型的简洁处理。