shallowRef 和 shallowReactive
- shallowRef 函数，只处理基本类型数据
- shallowReactive 函数，只处理第一层数据
- 两个在使用的时候都需要引入才可以
上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。
我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。
但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监听，啥意思呢？就是 reactive 包裹的对象，就算有100层，也就是连续点一百个属性那种，去修改最深层的数据，也是可以监听到的，这样的话就会存在问题了。
深度监听的问题：
- 无论 ref 函数还是 reactive 函数都是深度监听
- 如果数据量过大，超级超级消耗性能
- 如果我们不需要对数据进行深度监听的时候，就可以使用 shallowRef 函数和 shallowReactive 函数
使用 shallowReactive 非深度监听：
记住一点，shallowReactive 函数，只能处理第一层数据。
假设我们页面有一个个人信息展示，有名字、有年龄需要展示，我们数据是存在 boy 对象里面，然后 age 是在 boy 对象的 news 属性下面，也就是深层，但是 name 是在 boy 对象下面，也就是第一层，我们有两个按钮，分别修改 name 和 age，看一下会有什么效果。
<template>
<div>
<h1>姓名：{{name}}</h1>
<h1>年龄：{{news.age}}</h1>
<button @click="btn">修改name</button>
<button @click="btn2">修改age</button>
</div>
</template>
<script>
import { shallowReactive, toRefs } from "vue";
export default {
name: "App",
setup() {
const boy = shallowReactive({
name: "我是𝒆𝒅.",
news: {
birthday: "2012-10-14",
age: 10
}
});
const btn = () => {
boy.name = "𝒆𝒅.";
};
const btn2 = () => {
boy.news.age++;
};
return { ...toRefs(boy), btn, btn2 };
}
};
</script>
我们分别点击两个按钮，看一下页面变化
通过效果，我们稍微总结一下：
- shallowReactive只会包装第一层的数据
- 默认情况它只能够监听数据的第一层
- 如果想更改多层的数据，必须先更改第一层的数据，然后在去更改其他层的数据。这样视图上的数据才会发生变化
