详解Vue3中shallowRef和shallowReactive的使用
嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。
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只会包装第一层的数据
- 默认情况它只能够监听数据的第一层。
- 如果想更改多层的数据，必须先更改第一层的数据，然后在去更改其他层的数据。这样视图上的数据才会发生变化。
使用 shallowRef 非深度监听
开头已经说过了，shallowRef 函数，只能处理基本类型数据，为啥呢，因为 shallowRef 函数监听的是.value 变化。并不是第一层的数据的变化。所以如果要更改 shallowRef 创建的数据，应该 xxx.value = XXX。
看代码：
<template>
<div>
<h1>姓名：{{boy}}</h1>
<button @click="btn">修改boy</button>
</div>
</template>
<script>
import { shallowRef } from "vue";
export default {
name: "App",
setup() {
const boy = shallowRef("我是𝒆𝒅.");
const btn = () => {
boy.value = "𝒆𝒅.";
};
return { boy, btn };
}
};
</script>点击按钮，修改 boy 的值。
通过上面的截图可以看见，数据是可以正常修改的。
然后遗留了一个问题：shallowRef 函数，只处理基本类型数据 吗？
看下面的案例：
<template>
<div>
<h1>姓名：{{boy.name}}</h1>
<h1>年龄：{{boy.news.age}}</h1>
<button @click="btn">修改name</button>
<button @click="btn2">修改age</button>
</div>
</template>
<script>
import { shallowRef } from "vue";
export default {
name: "App",
setup() {
const boy = shallowRef({
name: "我是𝒆𝒅.",
news: {
birthday: "2012-10-14",
age: 10
}
});
const btn = () => {
boy.value.name = "𝒆𝒅.";
};
const btn2 = () => {
boy.value.news.age++;
};
return { boy, btn, btn2 };
}
};
</script>在这个代码里面，我们用 shallowRef 包裹了一个对象， 然后在页面显示 name 和 age ，然后我们通过按钮修改 name 和 age，看一下页面的效果。
所以说呢，shallowRef 函数，只能处理基本类型数据。
好了，今天的内容大体就这么多，其实这两个函数不怎么用，知道就好，万一用到也好明白怎么用。
到此这篇关于详解Vue3中shallowRef和shallowReactive的使用的文章就介绍到这了,更多相关Vue3 shallowRef shallowReactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家介绍了关于Element UI表单验证规则动态失效问题的解决办法,Element UI提供了强大的表单验证功能,可以轻松地对表单进行验证,需要的朋友可以参考下2023-09-09
接收一个输入的手机号,判断输入的手机号是否正确是一个很常见的功能,这篇文章主要给大家介绍了关于前端Vue手机号校验以及后端Java手机号校验的相关资料,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue项目实现设置根据路由高亮对应的菜单项操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Canvas是HTML5中新增的元素,专门用来绘制图形,下面这篇文章主要给大家介绍了关于Vue使用Canvas生成随机大小且不重叠圆的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要为大家详细介绍了vue组件父与子通信详解，实现登录窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了Vue3侦听器的实现原理详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了学习笔记之Vuex的用法总结(Vue状态管理)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了解决echart在vue中id重复问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在做文字处理的项目时经常会遇到搜索文字并高亮的需求,常见的实现方式有插入标签和贴标签两种,这两种方式适用于不同的场景,各有优劣,下面我们就来看看他们的具体实现吧2023-11-11
最新评论