提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

shallowReactive和shadowRef就是浅层的reactive和ref。可以理解成，shallowReactive只能处理引用类型，只能监听对象的最外层属性，如果深度属性发生改变，是监听不到的，没法实现响应式。shallowRef和ref不同，只能处理基本类型，不能处理引用类型。处理基本类型的时候和ref一样

shallowRef 和 shallowReactive

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

shallowReactive

浅层作用的响应式数据处理，也就是只处理第一层对象的数据,在往下嵌套的数据,操作数据是不起作用的
只考虑对象第一层的数据响应式,在第一层嵌套下的数据不考虑
与reactive()不同,没有深层及的转换,一个浅层响应式对象里只有根级别的属性是响应式的,属性的值会被原样存储和暴露,这意味着值为ref的属性不会被自动解构的

例如：如果有一个对象数据,数据结构比较深,复杂,但变化时只需要外层属性变化,那么就可以使用shallowReactive。

<template><div><h1>shallowReactive姓名：{{ name }}</h1><h1>shallowReactive年龄：{{ news.age }}</h1><button @click="reactivebtn">修改name</button><button @click="btn2">修改age</button><hr /></div></template><script>import { shallowReactive, toRefs, shallowRef } from "vue";export default {name: "App",setup() {// shallowReactive的练习const boy = shallowReactive({  //shallowReactive 函数，只能处理第一层数据（浅响应式） name: "Reactive",news: {age: 10,},});const reactivebtn = () => {boy.name += 1;};const btn2 = () => {boy.news.age+=1;};// shallowRef的练习//结论：shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的；// 前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理return { ...toRefs(boy), reactivebtn, btn2 };},};</script>

我们修改数据只有定义在对象第一层的属性 才是响应式的 深层次的数据将不在具有响应式的功能 因为深层次的数据将不在是一个响应式对象 而是一给普通对象

shallowRef

<template><div><h1>shallowRef姓名:{{ refboy }}</h1><h1>shallowRef年龄:{{refobj.refnews.age  }}</h1><button @click="refbtn">修改refboy</button><button @click="refobj_btn">修改age</button></div></template><script>import { shallowReactive, toRefs, shallowRef } from "vue";export default {name: "App",setup() {// shallowRef的练习const refboy = shallowRef("Ref张三"); //shallowRef 函数，只能处理基本类型数据const refobj = shallowRef({refnews: {birthday: "2012-10-14",age: 11,},});const refbtn = () => {refboy.value += "*";};const refobj_btn=()=>{refobj.value.refnews.age +='ref'console.log(refobj.value.refnews,'11');}//结论：shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的；// 前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理return { refboy, refbtn,refobj,refobj_btn }; //, ...toRefs(boy), reactivebtn, btn2},};</script>

总结：

shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。

**

按照vue3文档中得说明，在使用shallowRef和shallowReactive是浅响应的，即修改深层数据视图应该是不更新得，但是使用过程中往往会出现视图更新得情况；发现视图更新了，这是为什么呢？
原因是有其他响应式数据更新了，从而触发了视图更新：