vue3的ref和reactive的区别
reactive和ref的对比
使用
ref，需要通过.value 访问和修改；可以声明基本类型，也可以声明引用类型
reactive，可以直接访问和修改；适用于复杂的数据类型，如嵌套对象和数组，只能声明引用数据类型
问题
reactive 失去响应；
- 直接赋值，对象或reactive对象。（获取接口数据的时候，直接赋值）
let obj=reactive({state:1});
obj={state:2}
//Object.assign(obj,{state:2})
解决：一个个属性赋值，而不是整个替换；使用Object.assgin
- 直接解构
let obj=reactive({state:1});
let {state}=obj;
state=2;
//obj.state 没有改变
let {state}=toRefs(obj);
state=2;
//obj.state 等于2
解决；使用toRefs(); 将所有属性转为ref
浅层响应对象shallowReactive()
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 这种原生集合类型的元素被访问时，不会进行解包。
<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)
<template>
<div>
{{ object.foo }} <!-- 无需 .value -->
{{object.foo+1}} <!-- 报错 -->
</div>
</template>
原文地址：https://blog.csdn.net/HDdgut/article/details/144208333
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！