VUE3.0中的 ref和recative的区别

VUE的 ref和recative =杨星河–20230314==

作为一个很喜欢前端的java开发，同事突然问我vue3.0中ref与reactive的区别。我这里总结了一下，可能认识还比较浅，欢迎大牛继续提意见。

1、reactive

//reactive接受一个原始对象，并将其封装成一个proxy对象，使其具有响应式。
const data = reactive(
	//原始对象
    {
    	queryParams:{},
        name:"yangh",
        age:"25"
    }
)

//解构：将reactive的首层对象解构成单独的ref对象。
const {
      queryParams,
      name,
      age
   } = toRefs(data);
   

2、ref

// ref结构：vlue:proxy
//ref接受一个原始对象。并将其封装成一个value->proxy的对象
const data = ref(
	//原始数据
	{
    	queryParams:{},
        name:"yangh",
        age:"25"
    }
); 
//使用：
	data.value.name
//ps：此时的data.value是一个proxy对象。

3、ref与reactive的区别

对比	ref	reactive
返回数据类型	RefImpl对象（也叫ref对象）	Proxy对象
传入基本类型返回	{value: 基本类型}	禁止这么做
传入引用类型返回	{value: Proxy对象}	Proxy对象

4、两者分别适用场合：

ref可以为基本类型添加响应式，也可以为引用类型添加响应式，reactive只能为引用类型添加响应式。
对于引用类型，什么时候用ref，什么时候用reactive？简单说，如果你只打算修改引用类型的一个属性，那么推荐用reactive，如果你打算变量重赋值，那么一定要用ref。具体见下文。

5、unref

unref类似于toRaw。unref的本质就是解包，
把{value: Proxy || 基本数据}--->解成Proxy || 基本数据。
unref对toRefs创造的对象的各个属性也起作用，因为各个属性也是ref对象。

ps：
	state为ref对象时，state.value === unref(state)
 	注意：state.value是proxy对象，unref(state)也是proxy对象
 	

6、toRaw

toRaw接受一个proxy对象，并返回它的原始对象

当变量state为ref对象时：
toRaw(state.value) === toRaw(unref(state))，两边都是原始值。
也说明想获得ref对象的原始值且原始值为引用类型时，有2种方式，toRaw(state.value)或者toRaw(unref(state))。
如果原始值为基本类型，也有2种方式，state.value或者unref(state)。
所以，toRaw并不是对ref没用，ref想得到原始对象就得用toRaw。

toRaw对ref对象无效，必须作用于ref.value

7、如有不足，请完善----2023-03-14----