ref和reactive底层原理的区别

zzz

ref和reactive都是构建响应式数据模型的两大核心工具，分别服务于不同的场景并具有独特的使用方式与底层实现机制。

数据类型支持
  ref：支持基本类型（如字符串、数字、布尔值）和对象类型，内部会自动将对象类型转换为reactive实现响应式代理。
  reactive：仅支持对象、数组、Map/Set等复杂类型，通过Proxy代理实现深度响应式追踪。

响应式实现机制
  ref：通过封装对象的.value属性实现响应式，对基本类型使用Object.defineProperty劫持数据，对象类型则调用reactive转换为代理。
  它的实现依赖于RefImpl类，并通过track和trigger机制 实现依赖收集和更新触发。

1. //源码分析
   
2. class RefImpl<T> {
   
3.   private _value: T
   
4.   public readonly __v_isRef = true
   
5. 
   
6.   constructor(private _rawValue: T, public readonly _shallow = false) {
   
7.     // 将原始值转换为响应式值
   
8.     this._value = _shallow ? _rawValue : convert(_rawValue)
   
9.   }
   
10. 
    
11.   get value() {
    
12.     // 依赖收集
    
13.     track(toRaw(this), TrackOpTypes.GET, 'value')
    
14.     return this._value
    
15.   }
    
16. 
    
17.   set value(newVal) {
    
18.     // 检查值是否发生变化
    
19.     if (hasChanged(toRaw(newVal), this._rawValue)) {
    
20.       this._rawValue = newVal
    
21.       // 更新值并转换为响应式
    
22.       this._value = this._shallow ? newVal : convert(newVal)
    
23.       // 触发更新
    
24.       trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    
25.     }
    
26.   }
    
27. }
    
28. 
    
29. function ref(value) {
    
30.   return createRef(value)
    
31. }
    
32. 
    
33. function createRef(rawValue, shallow = false) {
    
34.   if (isRef(rawValue)) {
    
35.     return rawValue
    
36.   }
    
37.   return new RefImpl(rawValue, shallow)
    
38. }
    
39. // RefImpl类：ref的核心实现类，通过get和set访问器拦截对.value的访问和修改。
    
40. //   get：在访问.value时，调用track进行依赖收集。
    
41. //   set：在修改.value时，调用trigger触发更新。
    
42. // convert函数：将原始值转换为响应式值。如果原始值是对象，则调用reactive将其转换为响应式对象。
    
43. // track和trigger：Vue 3的响应式系统的核心机制，分别用于依赖收集和更新触发。
    

复制代码

reactive：Proxy拦截对象的增删改查操作，结合Reflect操作原始数据，实现深层响应式追踪。

1. function reactive(target) {
   
2.   if (target && target.__v_isReadonly) {
   
3.     return target
   
4.   }
   
5.   return createReactiveObject(
   
6.     target,
   
7.     false,
   
8.     mutableHandlers,
   
9.     mutableCollectionHandlers
   
10.   )
    
11. }
    
12. 
    
13. function createReactiveObject(
    
14.   target,
    
15.   isReadonly,
    
16.   baseHandlers,
    
17.   collectionHandlers
    
18. ) {
    
19.   if (!isObject(target)) {
    
20.     return target
    
21.   }
    
22.   // 创建Proxy代理
    
23.   const proxy = new Proxy(target, baseHandlers)
    
24.   return proxy
    
25. }
    
26. // Proxy：reactive通过Proxy代理目标对象，拦截对对象属性的访问和修改。
    
27. //   get：在访问属性时，调用track进行依赖收集。
    
28. //   set：在修改属性时，调用trigger触发更新。
    
29. // mutableHandlers：Proxy的处理器对象，定义了get、set、deleteProperty等拦截器。
    
30. // createReactiveObject函数：负责创建Proxy代理对象，并处理边界情况（如只读对象、非对象值等）。

复制代码

适应场景
‌  ref：适合简单数据、需跨组件传递的独立变量或需替换整个对象的场景。
‌  reactive：适合复杂嵌套对象、数组或需深度响应式追踪的场景。