为什么使用shallowRef和shallowReactive？
我们在之前的博客进过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监听，啥意思呢? 就是 reactive 包裹的对象，就算有100层，也就是连续点一百个属性那种，去修改最深层的数据也是可以监听到的，这样的话就会存在问题了
深度监听的问题:
- 无论 ref 函数还是 reactive 函数都是深度监听
- 如果数据量过大，超级超级消耗性能
- 如果我们不需要对数据进行深度监听的时候，就可以使用 shallowRef 函数和 shallowReactive 函数
前言
shallowReactive和shadowRef就是浅层的reactive和ref。可以理解成，shallowReactive只能处理引用类型，只能监听对象的最外层属性，如果深度属性发生改变，是监听不到的，没法实现响应式。shallowRef和ref不同，只能处理基本类型，不能处理引用类型。处理基本类型的时候和ref一样
shallowRef 和 shallowReactive概述区别
shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
shallowReactive
浅层作用的响应式数据处理，也就是只处理第一层对象的数据,在往下嵌套的数据,操作数据是不起作用的；与reactive()不同,没有深层及的转换,一个浅层响应式对象里只有根级别的属性是响应式的,属性的值会被原样存储和暴露,这意味着值为ref的属性不会被自动解构的
例如：如果有一个对象数据,数据结构比较深,复杂,但变化时只需要外层属性变化,那么就可以使用shallowReactive。 • 1
<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是浅响应的，即修改深层数据视图应该是不更新得，但是使用过程中往往会出现视图更新得情况；发现视图更新了，这是为什么呢？
原因是有其他响应式数据更新了，从而触发了视图更新：
