vue 3.0 中的 reactive 和 ref 区别

1. reactive

处理接受的对象，并将其转换成具有深层响应式的 Proxy 对象。

入参：数组、对象等（引用类型）
返回值：Proxy 对象
注意：不能传入基本类型的值，因为 vue 在源码中进行了类型声明。

这里需要注意不能传入基本类型的值，因为 vue 在源码中进行了类型声明。

// 源码中的类型声明
// T extends object
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

1. 场景一：输入为一个对象

   const info = { name: '张三', age: 18, };
   const reactiveInfo = reactive(info);
   
   // 输出 reactive 处理后的对象
   console.log(reactiveInfo);
   
   // 控制台实际输出（可以明显的看到其属于一个 Proxy 对象）
   // 输出：Proxy {name: '张三', age: 18}
   

2. 场景二：输入为一个基本类型的数据

   // 静态类型检查错误
   // Argument of type 'number' is not assignable to parameter of type 'object'.
   
   const count = 10;
   const reactiveInfo = reactive(count);
   

使用：因为返回值属于一个 Proxy 对象，所以使用时和ES5中的对象访问一样，使用 .property 即可访问对象中的属性。

const info = {
  name: '张三',
  age: 18,
};
const reactiveInfo = reactive(info);

console.log(reactiveInfo.name);
// 输出：张三

2. ref

处理接受的对象，并将其转换成具有深层响应式的 ref 对象。ref 对象仅有一个 .value 属性，指向该内部值（即真实的值）。

入参：不限制，可以为基本类型，也可以为引用类型
返回值：ref 对象
注意：当输入为引用类型的值时，源码中的处理方式和 reactive 一样

1. 场景一：输入一个基本类型的值

   const count = 10;
   const reactiveInfo = ref(count);
   
   console.log(reactiveInfo);
   
   // 输出：
   // RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: 10, _value: 10}
   

2. 场景二：输入一个对象

   const info = {
     name: '张三',
     age: 18,
   };
   const reactiveInfo = ref(info);
   
   console.log(reactiveInfo);
   
   // 输出：
   // RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: {…}, _value: Proxy}
   

使用：因为ref对象中仅有一个 .value 属性指向内部值，所以我们获取内部值时需要用 .value 的形式。

const info = {
  name: '张三',
  age: 18,
};
const count = 10;
const reactiveInfo = ref(info);
const reactiveCount = ref(count);

console.log(reactiveInfo.value);
console.log(reactiveCount.value);

// 输出：Proxy {name: '张三', age: 18}
// 输出：10

3. 总结

API	入参	返回值	使用
ref	基本类型、引用类型	ref 对象	variable.value、variable.value.property
reactive	引用类型	Proxy 对象	variable.property