点击公众关注号，“技术干货”及时达！

ref 和 reactive 是 Vue3 中实现响应式数据的核心 API。ref 用于包装基本数据类型，而 reactive 用于处理对象和数组。尽管 reactive 似乎更适合处理对象，但 Vue3 官方文档更推荐使用 ref。

我的想法，ref就是比reactive好用，官方也是这么说的，不服来踩！下面我们从源码的角度详细讨论这两个 API，以及 Vue3 为什么推荐使用ref而不是reactive？

ref 的内部工作原理

ref是一个函数，它接受一个内部值并返回一个响应式且可变的引用对象。这个引用对象有一个.value属性，该属性指向内部值。

//深响应式
exportfunctionref(value?:unknown){
returncreateRef(value,false)
}

//浅响应式
exportfunctionshallowRef(value?:unknown){
returncreateRef(value,true)
}

functioncreateRef(rawValue:unknown,shallow:boolean){
//如果传入的值已经是一个ref，则直接返回它
if(isRef(rawValue)){
returnrawValue
}
//否则，创建一个新的RefImpl实例
returnnewRefImpl(rawValue,shallow)
}

classRefImpl<T>{
//存储响应式的值。我们追踪和更新的就是_value。（这个是重点）
private_value:T
//用于存储原始值，即未经任何响应式处理的值。（用于对比的，这块的内容可以不看）
private_rawValue:T

//用于依赖跟踪的Dep类实例
publicdep?:Dep=undefined
//一个标记，表示这是一个ref实例
publicreadonly__v_isRef=true

constructor(
value:T,
publicreadonly__v_isShallow:boolean,
){
//如果是浅响应式，直接使用原始值，否则转换为非响应式原始值
this._rawValue=__v_isShallow?value:toRaw(value)
//如果是浅响应式，直接使用原始值，否则转换为响应式值
this._value=__v_isShallow?value:toReactive(value)

//toRaw用于将响应式引用转换回原始值
// toReactive 函数用于将传入的值转换为响应式对象。对于基本数据类型，toReactive 直接返回原始值。
//对于对象和数组，toReactive 内部会调用 reactive 来创建一个响应式代理。
//因此，对于ref来说，基本数据类型的值会被RefImpl直接包装，而对象和数组
//会被 reactive 转换为响应式代理，最后也会被 RefImpl 包装。
//这样，无论是哪种类型的数据，ref都可以提供响应式的value属性，
//使得数据变化可以被 Vue 正确追踪和更新。
//exportconsttoReactive=(value)=>isObject(value)?reactive(value):value
}

getvalue(){
//追踪依赖，这样当 ref 的值发生变化时，依赖这个 ref 的组件或副作用函数可以重新运行。
trackRefValue(this)
//返回存储的响应式值
returnthis._value
}

setvalue(newVal){
//判断是否应该使用新值的直接形式（浅响应式或只读）
constuseDirectValue=
this.__v_isShallow||isShallow(newVal)||isReadonly(newVal)
//如果需要，将新值转换为非响应式原始值
newVal=useDirectValue?newVal:toRaw(newVal)
//如果新值与旧值不同，更新_rawValue和_value
if(hasChanged(newVal,this._rawValue)){
this._rawValue=newVal
this._value=useDirectValue?newVal:toReactive(newVal)
//触发依赖更新
triggerRefValue(this,DirtyLevels.Dirty,newVal)
}
}
}

在上述代码中，ref 函数通过 new RefImpl(value) 创建了一个新的 RefImpl 实例。这个实例包含 getter 和 setter，分别用于追踪依赖和触发更新。使用 ref 可以声明任何数据类型的响应式状态，包括对象和数组。

import{ref}from'vue'

letstate=ref({count:0})
state.value.count++

注意，ref核心是返回「响应式且可变的引用对象」，而reactive核心是返回的是「响应式代理」，这是两者本质上的核心区别，也就导致了ref优于reactive，我们接着看下reactive源码实现。

reactive 的内部工作原理

reactive 是一个函数，它接受一个对象并返回该对象的响应式代理，也就是 Proxy。

functionreactive(target){
if(target&&target.__v_isReactive){
returntarget
}

returncreateReactiveObject(
target,
false,
mutableHandlers,
mutableCollectionHandlers,
reactiveMap
)
}

functioncreateReactiveObject(
target,
isReadonly,
baseHandlers,
collectionHandlers,
proxyMap
){
if(!isObject(target)){
returntarget
}

constexistingProxy=proxyMap.get(target)
if(existingProxy){
returnexistingProxy
}

constproxy=newProxy(target,baseHandlers)
proxyMap.set(target,proxy)
returnproxy
}

reactive的源码相对就简单多了，reactive 通过 new Proxy(target, baseHandlers) 创建了一个代理。这个代理会拦截对目标对象的操作，从而实现响应式。

import{reactive}from'vue'

letstate=reactive({count:0})
state.count++

到这里我们可以看出 ref 和 reactive 在声明数据的响应式状态上，底层原理是不一样的。ref 采用 RefImpl对象实例，reactive采用Proxy代理对象。

ref 更深入的理解

当你使用new RefImpl(value)创建一个RefImpl实例时，这个实例大致上会包含以下几部分：

2. 「依赖收集」：实例需要跟踪所有依赖于它的效果（effect），例如计算属性或者副作用函数。这通常通过一个依赖列表或者集合来实现。
3. 「触发更新」：当实例的值发生变化时，它需要通知所有依赖于它的效果，以便它们可以重新计算或执行。

RefImpl 类似于发布-订阅模式的设计，以下是一个简化的RefImpl类的伪代码实现，展示这个实现过程：

classDep{
constructor(){
this.subscribers=newSet();
}

depend(){
if(activeEffect){
this.subscribers.add(activeEffect);
}
}

notify(){
this.subscribers.forEach(effect=>effect());
}
}

letactiveEffect=null;

functionwatchEffect(effect){
activeEffect=effect;
effect();
activeEffect=null;
}

classRefImpl{
constructor(value){
this._value=value;
this.dep=newDep();
}

getvalue(){
//当获取值时，进行依赖收集
this.dep.depend();
returnthis._value;
}

setvalue(newValue){
if(newValue!==this._value){
this._value=newValue;
//值改变时，触发更新
this.dep.notify();
}
}
}

//使用示例
letcount=newRefImpl(0);

watchEffect(()=>{
console.log(`Thecountis:${count.value}`);//订阅变化
});

count.value++;//修改值，触发通知，重新执行watchEffect中的函数

Dep 类负责管理一个依赖列表，并提供依赖收集和通知更新的功能。RefImpl 类包含一个内部值 _value 和一个 Dep 实例。当 value 被访问时，通过 get 方法进行依赖收集；当 value 被赋予新值时，通过 set 方法触发更新。

ref 和 reactive 尽管两者在内部实现上有所不同，但它们都能满足我们对于声明响应式变量的要求，但是 reactive 却存在一定的局限性。

reactive 的局限性

在 Vue3 中，reactive API 通过 Proxy 实现了一种响应式数据的方法，尽管这种方法在性能上比 Vue2 有所提升，但 Proxy 的局限性也导致了 reactive 的局限性，这些局限性可能会影响开发者的使用体验。

仅对引用数据类型有效

reactive 主要适用于对象，包括数组和一些集合类型（如 Map 和 Set）。对于基础数据类型（如 string、number 和 boolean），reactive 是无效的。这意味着如果你尝试使用 reactive 来处理这些基础数据类型，将会得到一个非响应式的对象。

import{reactive}from'vue';
conststate=reactive({count:0});

使用不当会失去响应

1. 「直接赋值对象」：如果直接将一个响应式对象赋值给另一个变量，将会失去响应性。这是因为 reactive 返回的是对象本身，而不仅仅是代理。

   import{reactive}from'vue';
   
   letstate=reactive({count:0});
   state={count:1};//失去响应性
   

2. 「直接替换响应式对象」：同样，直接替换一个响应式对象也会导致失去响应性。

   import{reactive}from'vue';
   
   letstate=reactive({count:0});
   state=reactive({count:1});//失去响应性
   

3. 「直接解构对象」：在解构响应式对象时，如果直接解构对象属性，将会得到一个非响应式的变量。

   conststate=reactive({count:0});
   
   let{count}=state;
   count++;//count仍然是0
   

   解决这个问题，需要使用 toRefs 函数来将响应式对象转换为 ref 对象。

   import{toRefs}from'vue';
   
   conststate=reactive({count:0});
   let{count}=toRefs(state);
   count++;//count现在是1
   

4. 「将响应式对象的属性赋值给变量」：如果将响应式对象的属性赋值给一个变量，这个变量的值将不会是响应式的。

   letstate=reactive({count:0})
   
   letcount=state.count
   count++//count仍然是0
   console.log(state.count)
   

使用 reactive 声明响应式变量的确存在一些不便之处，尤其是对于喜欢使用解构赋值的开发者而言。这些局限性可能会导致意外的行为，因此在使用 reactive 时需要格外注意。相比之下，ref API 提供了一种更灵活和统一的方式来处理响应式数据。

为什么推荐使用 ref ？

ref()它为响应式编程提供了一种统一的解决方案，适用于所有类型的数据，包括基本数据类型和复杂对象。以下是推荐使用 ref 的几个关键原因：

统一性

ref 的核心优势之一是它的统一性。它提供了一种简单、一致的方式来处理所有类型的数据，无论是数字、字符串、对象还是数组。这种统一性极大地简化了开发者的代码，减少了在不同数据类型之间切换时的复杂性。

import{ref}from'vue';

letnum=ref(0);
letstr=ref('Hello');
letobj=ref({count:0});

//修改基本数据类型
num.value++;
str.value+='World';

//修改对象
obj.value.count++;

深层响应性

ref 支持深层响应性，这意味着它可以追踪和更新嵌套对象和数组中的变化。这种特性使得 ref 非常适合处理复杂的数据结构，如对象和数组。

import{ref}from'vue';

letobj=ref({
user:{
name:'xiaoming',
details:{
age:18
}
}
});

//修改嵌套对象
obj.value.user.details.age++;

当然，为了减少大型不可变数据的响应式开销，也可以通过使用shallowRef来放弃深层响应性。

letshallowObj=shallowRef({
details:{age:18,},
});

灵活性

ref 提供了高度的灵活性，尤其在处理「普通赋值」方面。这种灵活性使得 ref 在开发中的使用更加方便，特别是在进行复杂的数据操作时。

import{ref}from'vue';

letstate=ref({
count:0,
name:'Vue'
});

//替换整个对象
state.value={
count:10,
name:'Vue4'
};
//修改对象内的属性
state.value.count=20;
state.value.name='Vue5';
//添加新的属性
state.value.newProperty='NewProperty';
//删除属性
deletestate.value.newProperty;
//使用解构更新属性（注意要保持响应性）
let{count,name}=state.value;
state.value={count:count+1,name};
//复杂操作，例如根据条件更新属性
if(someCondition){
state.value={
...state.value,
name:'UpdatedName'
};
}
console.log(state.value)

总结

ref 在 Vue3 中提供了一种更统一、灵活的响应式解决方案，还能避免了 reactive 的某些局限性。希望这篇文章对你有所帮助，有所借鉴。大家怎么认为呢，评论区我们一起讨论下！