你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语)

通过以前的博客,我们知道ref函数可以生成反应式数据。那个toRef函数也是制作反应式数据。那么他们之间有什么区别呢?

首先,ref函数的本质实际上是脱离与源数据的交互,复制数据。什么意思?也就是说,ref函数会将对象内的属性值更改为响应数据,并修改响应数据,从而不影响源数据,但会更新视图层中的数据。但是toRefs函数的本质是引用。也就是说,toRef函数与源数据交互,修改响应数据会修改源数据,但修改不会更新视图级别的数据。

你理解上面这句话吗?如果你不明白,没关系。可以通过几个例子知道。

首先,toRef函数有两个参数。

好了,现在我要用toRef函数写一个例子。或者像以前一样,显示一个用户的姓名和年龄。

保存代码并刷新页面。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

我们可以看到数据的结构。在value中,直接在boy下name的属性值。因此,请创建按钮,然后单击按钮以修改name值。

保存代码以刷新页面,然后单击按钮以查看页面效果。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

屏幕截图中显示的效果表明,boy_toRef的值实际上已修改,但页面未更改,页面未发生错误。

原因是什么?事实上,这不是Bugha。正如这篇博客文章开头所说,这是toRef函数的功能。事实上,视图中没有数据更新。通过上面的截图看到的,源数据修改怎么看?没关系。在回答这个问题之前,首先要知道源数据是什么。

和上面的代码一样。

ToRef函数包装boy对象,因此boy对象是源数据。

因此,如果想知道源数据是否已更改,请单击按钮,然后打印boy对象以查看boy是否已更改。

保存代码刷新页面单击按钮修改name值,并查看控制台打印的boy对象。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

Boy对象的name值已从更改为,但页面尚未更新。

记住!

ToRef函数与源数据交互,修改响应数据会修改源数据,但修改不会更新视图层数据。

那这句话对吗?上一节我们没有测试,所以在这里也测试一下。

我们仍然写一个案例,在页面上显示名称,然后单击按钮修改页面名称。

保存代码,刷新页面,然后单击按钮查看页面控制台打印结果。主要是ref函数包围的数据是否被成功修改,源数据是否被成功修改,最后一页是否被修改,请看下面的截图。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

OK,通过上面的截图大家都明白了吧!

所以再次记住!

Ref函数将对象内的属性值更改为响应数据,修改响应数据,不影响源数据,但视图层中的数据将更新

ToRefs函数的使用实际上类似于toRef函数。

ToRefs函数用于批量设置多个数据,并相应地设置数据。

ToRefs函数与原始数据交互,修改响应数据会影响源数据,但不会更新视图层。

toRefs函数还可以与其他响应数据交互,从而更轻松地处理视图层数据。

像往常一样,创建对象,然后使用toRefs函数包装该对象,使其显示在页面上。

保存代码并刷新页面视图。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

因此,修改代码进行渲染时。除了属性。需要value。

修改视图层代码并查看效果。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

呃,现在正常了!

你可能会怀疑这东西会不会越来越复杂。本来直接点属性就可以了,现在还要点属性点value,平白无故脱裤子加P?嘿嘿!我想也是。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

我们可以看到页面可以正常分析。那么为什么我们还在使用toRefs函数呢?

其实是有原因的啊!

事实上,toRefs函数最大的用途在这里!

我们这个boy对象里面只有两个参数,如果我们这个对象里面有10个以上的参数,每次展示都要用那么多boy点,不麻烦吗?所以,使用toRefs函数可以解决这个问题。请看下面的代码。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

但是,深层个体仍然需要通过点来实现。

ToRefs函数已修改,原始数据已更改,页面未触发。

请看下面的代码。

请打印一下结果。

在这里插入图片描述 


你理解上面这句话吗(你理解上面这句话吗英语)(你能看懂这句话吗 英语) 热门话题

如列印结果所示,原始资料已变更,页面未触发。但是,从我的文章话中可以看出,toRefs返回的对象完全不影响值的反应性,而是随意求解和配置的。。

有些小伙伴可能还是不太理解这两个函数,姑且概括一下吧。

如果要将响应数据与以前的数据相关联,并且不希望在更新响应数据时更新视图,请使用toRef函数。

如果要使对象的多个属性成为响应数据,并将响应数据与原始数据相关联,并且不希望在更新响应数据时更新视图,请使用toRefs函数将多个数据批量设置为响应数据。这是因为ToRef函数一次只能设置一个数据。

ToRefs函数接受一个对象作为参数,通过对象的所有属性,然后逐个调用toRef函数来执行。

好了,今天的内容大致是这样的。晚安,宝贝们,明天见!


[热门文章]

发表评论

Copyright 2002-2022 by 曲佐生物有限公司(琼ICP备2022001899号-3).All Rights Reserved.