Vue3中的shallowRef和shallowReactive怎么使用
这篇文章主要介绍了Vue3中的shallowRef和shallowReactive怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3中的shallowRef和shallowReactive怎么使用文章都会有所收获,下面我们一起来看看吧。
创新互联公司专业为企业提供白沙黎族网站建设、白沙黎族做网站、白沙黎族网站设计、白沙黎族网站制作等企业网站建设、网页设计与制作、白沙黎族企业网站模板建站服务,10多年白沙黎族做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
shallowRef 和 shallowReactive
shallowRef 函数,只处理基本类型数据。
shallowReactive 函数,只处理第一层数据。
两个在使用的时候都需要引入才可以。
上面说了是不是还是没看懂?没关系哈,先记住上面三条,然后详细的说一下。
我们在之前的博客讲过 ref 函数和 reactive 函数,他们的作用是将数据转换成响应式的数据,在修改数据的时候,可以将数据实时展示在页面上,基本数据也好,对象也好,都是这样。
但是有一个问题呀,我们在把数据改为响应式数据的时候,不管是用 ref 函数还是使用 reactive 函数,他俩都是深度监听,啥意思呢?就是 reactive 包裹的对象,就算有100层,也就是连续点一百个属性那种,去修改最深层的数据,也是可以监听到的,这样的话就会存在问题了。
深度监听的问题:
无论 ref 函数还是 reactive 函数都是深度监听。
如果数据量过大,超级超级消耗性能。
如果我们不需要对数据进行深度监听的时候,就可以使用 shallowRef 函数和 shallowReactive 函数。
明白了吗?不明白没关系,我们通过几个案例就知道了。
使用 shallowReactive 非深度监听
记住一点,shallowReactive 函数,只能处理第一层数据。
假设我们页面有一个个人信息展示,有名字、有年龄需要展示,我们数据是存在 boy 对象里面,然后 age 是在 boy 对象的 news 属性下面,也就是深层,但是 name 是在 boy 对象下面,也就是第一层,我们有两个按钮,分别修改 name 和 age,看一下会有什么效果。
姓名:{{name}}
年龄:{{news.age}}
我们分别点击两个按钮,看一下页面变化。
通过效果,我们稍微总结一下:
shallowReactive只会包装第一层的数据
默认情况它只能够监听数据的第一层。
如果想更改多层的数据,必须先更改第一层的数据,然后在去更改其他层的数据。这样视图上的数据才会发生变化。
使用 shallowRef 非深度监听
开头已经说过了,shallowRef 函数,只能处理基本类型数据,为啥呢,因为 shallowRef 函数监听的是.value 变化。并不是第一层的数据的变化。所以如果要更改 shallowRef 创建的数据,应该 xxx.value = XXX。
看代码:
姓名:{{boy}}
点击按钮,修改 boy 的值。
通过上面的截图可以看见,数据是可以正常修改的。
然后遗留了一个问题:shallowRef 函数,只处理基本类型数据 吗?
看下面的案例:
姓名:{{boy.name}}
年龄:{{boy.news.age}}
在这个代码里面,我们用 shallowRef 包裹了一个对象, 然后在页面显示 name 和 age ,然后我们通过按钮修改 name 和 age,看一下页面的效果。
所以说呢,shallowRef 函数,只能处理基本类型数据。
关于“Vue3中的shallowRef和shallowReactive怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue3中的shallowRef和shallowReactive怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。
本文题目:Vue3中的shallowRef和shallowReactive怎么使用
分享URL:http://scyanting.com/article/gehocp.html