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>六.效果
