记录–源码视角，Vue3为什么推荐使用ref而不是reactive

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

reactive 的内部工作原理

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

function reactive(target) {   if (target && target.__v_isReactive) {     return target   }    return createReactiveObject(     target,     false,     mutableHandlers,     mutableCollectionHandlers,     reactiveMap   ) }  function createReactiveObject(   target,   isReadonly,   baseHandlers,   collectionHandlers,   proxyMap ) {   if (!isObject(target)) {     return target   }      const existingProxy = proxyMap.get(target)   if (existingProxy) {     return existingProxy   }      const proxy = new Proxy(target, baseHandlers)   proxyMap.set(target, proxy)   return proxy }

import { reactive } from 'vue'   const state = reactive({ count: 0 }) state.count++

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

ref 更深入的理解

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

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

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

class Dep {   constructor() {     this.subscribers = new Set();   }    depend() {     if (activeEffect) {       this.subscribers.add(activeEffect);     }   }    notify() {     this.subscribers.forEach(effect => effect());   } }  let activeEffect = null;  function watchEffect(effect) {   activeEffect = effect;   effect();   activeEffect = null; }  class RefImpl {   constructor(value) {     this._value = value;     this.dep = new Dep();   }    get value() {     // 当获取值时，进行依赖收集     this.dep.depend();     return this._value;   }    set value(newValue) {     if (newValue !== this._value) {       this._value = newValue;       // 值改变时，触发更新       this.dep.notify();     }   } }  // 使用示例 const count = new RefImpl(0);  watchEffect(() => {   console.log(`The count is: ${count.value}`); // 订阅变化 });  count.value++; // 修改值，触发通知，重新执行watchEffect中的函数

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

使用不当会失去响应

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

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

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

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

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

　　　好家伙！常用的解构赋值不能用。为了解决这个问题，需要使用 toRefs 函数来将响应式对象转换为 ref 对象。

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

为什么推荐使用 ref ？

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

统一性

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

import { ref } from 'vue';  const num = ref(0); const str = ref('Hello'); const obj = ref({ count: 0 });  // 修改基本数据类型 num.value++; str.value += ' World';  // 修改对象 obj.value.count++;

import { ref } from 'vue';  const obj = ref({   user: {     name: 'xiaoming',     details: {       age: 18     }   } });  // 修改嵌套对象 obj.value.user.details.age++;

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