vue3的ref和reactive的区别

reactive和ref的对比

使用

ref，需要通过.value 访问和修改；可以声明基本类型，也可以声明引用类型

reactive，可以直接访问和修改；适用于复杂的数据类型，如嵌套对象和数组，只能声明引用数据类型

问题

reactive 失去响应；

直接赋值，对象或reactive对象。（获取接口数据的时候，直接赋值）

javascript 复制代码

let obj=reactive({state:1});
obj={state:2}
//Object.assign(obj,{state:2})

解决：一个个属性赋值，而不是整个替换；使用Object.assgin

直接解构

javascript 复制代码

let obj=reactive({state:1});
let {state}=obj;
state=2;
//obj.state 没有改变
let {state}=toRefs(obj);
state=2;
//obj.state 等于2

解决；使用toRefs(); 将所有属性转为ref

浅层响应对象shallowReactive()

javascript 复制代码

let obj=shallowReactive({state:1,child:{state:2}});
//自身属性，是响应式
obj.state=2;
//嵌套属性不是响应式
obj.child.state=4;

ref定义的属性等价于reactive（{value:xxx})

使用场景建议：

1.请求参数对象，可以使用reactive，赋值时也是一个个属性赋值，不会失去响应式

2.其他需要整体赋值的，使用ref，解构时，如果是对象（引用类型），会失去响应式

ref 的解包

常用： .value 和 unref()，Vue 提供的方法unref() ，如果参数是 ref ，则返回 value 属性的值，否则返回参数本身。

顶层属性，自动解包，则在html里面直接访问
非顶层属性，计算最终值是ref则会自动解包，否则不会自动解包
嵌套在响应属性里面，会自动解包，和一般属性一样
当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

javascript 复制代码

<script setup>
const object = { foo: ref(1) };
const state=ref(1);
const obj=reactive({state});
obj.state=2; //会改变
//不会自动解包
const obj2=shallowReactive({state});
console.log(obj2.state); {{value:2}}
//不会自动解包
const num= reactive([ref('232132')])
// 这里需要 .value
console.log(num[0].value)

const map = reactive(new Map([['num2', ref(0)]]))
// 这里需要 .value
console.log(map.get('num2').value)

html 复制代码

<template>
  <div>
    {{ object.foo }} <!-- 无需 .value -->
    {{object.foo+1}}  <!-- 报错 -->
  </div>
</template>