Vue3中的响应式对象ref，reactive，toRef，toRefsVue3中的响应式对象ref，reactive，

reactive

reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个响应式状态的副本
特点： 1:传入的必须是对象 2：修改值的时候不需要传给value

ref

ref 为数据添加响应式状态
特点： 可以传入基本数据类型也可以传js对象 传基本数据类型时要加value

toRef

toRef 为响应式源对象上的属性新建一个ref
接收两个参数 源响应式对象和属性名，返回一个ref的数据
用途： 使用父组件传递的props数据时，要引用props的某个属性并且要保持响应式连接时就很有用。

toRefs

toRefs：将一个响应式对象转换为普通对象，并且将其中的属性转换为Ref对象
用途：常用于解构赋值操作，因为一个响应式对象直接解构之后的数据不再有响应式
特点：数据的获取需要加value，toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用。改变结果数据也会改变原始数据

import { reactive, ref, toRef, toRefs } from "vue";
const reactiveState = {
  a: 1,
  b: 2,
};
reactiveState.a++;

const refState = ref("Neo");
console.log(refState.value);
refState.value += "-----";
const refState2 = ref({
  a: 1,
});
refState2.value.a++;

const toRefState = toRef(reactiveState, "a");
toRefState.value++;


let person = reactive({
  name: "hyman",
  age: 18,
});
let wrapPerson = toRefs(person);

person.name += "-";
wrapPerson.name.value += "+";