Vue3：shallowRef与shallowReactive

目录

一.shallowRef 和 shallowReactive

1.shallowRef

2.shallowReactive

二.ref 和 reactive

1. ref 

 2. reactive

三.各自使用场景

1.shallowRef

2.shallowReactive

3.ref

4.reactive

四.shallowRef 使用

五.shallowReactive使用

六.效果

---

一.shallowRef 和 shallowReactive

1.shallowRef

用于创建一个基本类型的响应式引用。它只对该引用本身进行响应式处理，不会深入到引用所指向的对象内部。这意味着如果引用的值是一个对象或数组，那么这个对象或数组内部的变化将不会触发视图更新。

2.shallowReactive

用于创建一个对象的响应式包装。与reactive类似，但它只会使对象的第一层属性变为响应式，而不会递归地使所有嵌套属性变为响应式。这可以减少不必要的性能开销，特别是在处理大型对象时。

二.ref 和 reactive

1. ref 

用于创建一个响应式引用，它可以用于任何类型的值（包括对象、数组等）。当引用的值发生变化时，会触发视图的更新。

 2. reactive

用于创建一个对象的响应式包装，它会递归地使所有嵌套属性变为响应式。这使得对嵌套属性的任何更改都会触发视图的更新。

三.各自使用场景

1.shallowRef

当你需要创建一个基本类型的响应式引用，并且希望避免深度监听时，可以使用 shallowRef。例如，如果你有一个布尔值或数字作为状态，并且不希望这些值的变化导致整个对象被重新渲染，可以使用 shallowRef。

2.shallowReactive

当你需要创建一个对象的响应式包装，但只关心第一层属性的变化，并且希望减少性能开销时，可以使用 shallowReactive。例如，如果你有一个包含大量嵌套属性的大型对象，但只需要监视顶层属性的变化，可以使用 shallowReactive。

3.ref

当你需要创建一个可以包含任何类型值的响应式引用时，可以使用 ref。例如，如果你有一个复杂的对象或数组作为状态，并且希望对其整体进行响应式处理，可以使用 ref。

4.reactive

当你需要创建一个对象的完全响应式包装，并希望所有嵌套属性的变化都能触发视图更新时，可以使用 reactive。例如，如果你有一个包含多个嵌套属性的对象，并且希望每个属性的变化都能引起视图的更新，可以使用 reactive。

四.shallowRef 使用

求和与修改整个人可成功修改

修改名字无法成功修改

五.shallowReactive使用

修改汽车品牌可成功修改

修改汽车颜色和引擎无法成功修改

六.代码

<template><h2>求和为：{{ sum }}</h2><h2>名字为: {{ person.name }}</h2><h2>年龄为：{{ person.age }}</h2><button @click="ChangeSum">求和加一</button><button @click="ChangeName">修改名字</button><button @click="ChangePerson">修改整个人</button><span></span><h2>汽车品牌: {{ car.brand }}</h2><h2>汽车颜色：{{ car.options.color }}</h2><h2>汽车引擎：{{ car.options.engine }}</h2><button @click="ChangeBrand">修改汽车品牌</button><button @click="ChangeColor">修改汽车颜色</button><button @click="ChangeEngine">修改引擎</button></template><script lang="ts" setup name="App">
import { options } from 'node_modules/axios/index.cjs';
import { ref , reactive, shallowRef , shallowReactive} from 'vue';let car = shallowReactive({brand:'宝马',options:{color:'红色',engine:'V6',}})function ChangeBrand(){car.brand = '奔驰'}function ChangeColor(){car.options.color = '白色'}function ChangeEngine(){car.options.engine = 'V16'}let sum = shallowRef(0)let person = shallowRef({name:'小明',age:18})function ChangeSum(){sum.value += 1}function ChangeName(){person.value.name = '小红'}function ChangePerson(){person.value = {name:'小兰',age:28}}</script><style>
button{width: 150;height: 40;
}</style>

六.效果