Vue3中的shallowRef和shallowReactive怎么使用

这篇文章主要介绍了vue3中的shallowref和shallowreactive怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue3中的shallowRef和shallowReactive怎么使用文章都会有所收获，下面我们一起来看看吧。

shallowRef 和 shallowReactive

上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。

我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。

但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监听，啥意思呢？就是 reactive 包裹的对象，就算有100层，也就是连续点一百个属性那种，去修改最深层的数据，也是可以监听到的，这样的话就会存在问题了。

深度监听的问题：

明白了吗？不明白没关系，我们通过几个案例就知道了。

使用 shallowReactive 非深度监听

记住一点，shallowReactive 函数，只能处理第一层数据。

假设我们页面有一个个人信息展示，有名字、有年龄需要展示，我们数据是存在 boy 对象里面，然后 age 是在 boy 对象的 news 属性下面，也就是深层，但是 name 是在 boy 对象下面，也就是第一层，我们有两个按钮，分别修改 name 和 age，看一下会有什么效果。

姓名：{{name}}

年龄：{{news.age}}

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 }; } };

我们分别点击两个按钮，看一下页面变化。

通过效果，我们稍微总结一下：

使用 shallowRef 非深度监听

开头已经说过了，shallowRef 函数，只能处理基本类型数据，为啥呢，因为 shallowRef 函数监听的是.value 变化。并不是第一层的数据的变化。所以如果要更改 shallowRef 创建的数据，应该 xxx.value = XXX。

看代码：

姓名：{{boy}}

import { shallowRef } from “vue”; export default { name: “App”, setup() { const boy = shallowRef(“我是????????.”); const btn = () => { boy.value = “????????.”; }; return { boy, btn }; } };

点击按钮，修改 boy 的值。

通过上面的截图可以看见，数据是可以正常修改的。

然后遗留了一个问题：shallowRef 函数，只处理基本类型数据吗？

看下面的案例：

姓名：{{boy.name}}

年龄：{{boy.news.age}}

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 }; } };

在这个代码里面，我们用 shallowRef 包裹了一个对象，然后在页面显示 name 和 age ，然后我们通过按钮修改 name 和 age，看一下页面的效果。

所以说呢，shallowRef 函数，只能处理基本类型数据。

关于“Vue3中的shallowRef和shallowReactive怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue3中的shallowRef和shallowReactive怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云服务器网(yuntue.com)行业资讯频道。

本文来源：https://www.yuntue.com/post/47516.html | 云服务器网，转载请注明出处！