vue3.0 torefs,toref torefs
本文主要介绍了Vue3中toRef和toRefs函数的使用，并通过实例进行了详细说明。有兴趣的朋友可以跟边肖学习一下。
目录
toref函数toref函数使用ref函数验证toRef函数。toRefs函数使用摘要。上一篇博文介绍了vue3中的Ref函数和reactive函数实现响应式数据。今天主要讲一下toRef函数和toRef函数的基本用法。
toRef 函数
从上一篇博客中，我们知道ref函数可以创建响应式数据，toRef函数也可以创建响应式数据。那么它们之间的区别是什么呢？
首先，ref函数的本质其实是复制数据的一个副本，脱离了与源数据的交互。你什么意思？也就是说，ref函数可以将对象中的属性值更改为响应数据。修改响应数据不会影响源数据，但视图图层上的数据将会更新。但是toRef函数的本质是引用，也就是说toRef函数会和源数据交互，修改响应数据会引起源数据的修改，但是他的修改不会引起视图层数据的更新。
你理解上面这段话吗？不懂也没关系。下面举几个案例来了解一下。
toRef 函数使用
首先，toRef函数有两个参数。
操作对象，对象属性
好，接下来，我们用toRef函数写一个案例。和以前一样，该页面显示用户的姓名和年龄。
模板
差异
h1参考参考函数/h1
P name: {{boy_toRef}}/p
P: {{boy.age}}/p
/div
/模板
脚本
从“vue”导入{ toRef }
导出默认值{
setup() {
Const boy={//创建用户对象
姓名：“我是。”，//用户名
年龄：10 //用户年龄
}
//使用toRef函数包装并操作boy对象的name属性。
const boy_toRef=toRef(boy， name )
Console.log(boy_toRef) //我们直接把打包后的数据格式打印出来吧。
return { boy，boy_toRef }
}
}
/脚本
保存代码并刷新页面。
我们可以看到数据的结构。在value中，直接是boy下面name的属性值。因此，接下来，我们编写一个按钮，单击按钮，并修改这个名称值。
模板
差异
h1参考参考函数/h1
P name: {{boy_toRef}}/p
P: {{boy.age}}/p
El-button type= primary @ click= BTN 修改名称/el-button
/div
/模板
脚本
从“vue”导入{ toRef }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
//This boy_toRef是toRef函数操作的男孩的名字值。
const boy_toRef=toRef(boy， name )
常量btn=()={
Boy _ toref.value= . //将名称修改为。
Console.log(boy_toRef) //修改后，打印结果。
}
return { boy，btn，boy_toRef }
}
}
/脚本
保存代码刷新页面，然后单击按钮查看页面效果。
通过截图显示的效果，我们可以发现boy_toRef的值确实被修改了。但是，页面没有改变，页面上没有错误。
这是什么原因呢？其实这不是Bug。这篇博文开头说toRef函数会和源数据交互，修改响应数据会引起源数据的修改，但是他的修改不会引起视图层数据的更新。所以，这就是toRef函数的作用。视图中确实没有数据更新。我们通过上面的截图看到了，但是源数据修改呢？没关系。在回答这个问题之前，我们首先要知道源数据是什么。
就像上面的代码一样：
常量男孩={
姓名：“我是。”,
年龄：10岁
}
const boy_toRef=toRef(boy， name )
toRef函数包装男孩对象，因此男孩对象是源数据。
所以，如果你想知道源数据是否有变化，点击按钮后，打印男孩对象，看看男孩是否有变化。
模板
差异
h1参考参考函数/h1
P name: {{boy_toRef}}/p
P: {{boy.age}}/p
El-button type= primary @ click= BTN 修改名称/el-button
/div
/模板
脚本
从“vue”导入{ toRef }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
Constboy_toRef=toRef (boy， name )//这个boy_toRef是toRef函数操作的男孩的名字值。
常量btn=()={
Boy _ toref.value= . //将名称修改为。
Console.log(boy_toRef) //修改后，打印结果。
Console.log(boy) //修改后，打印男孩结果。
}
return { boy，btn，boy_toRef }
}
}
/脚本
保存代码，刷新页面，点击按钮修改name值，然后检查控制台上打印的boy对象。
发现boy对象的名称值已经从我是.更改为.，但是页面仍然没有更新。
记住！
toRef 函数会与源数据交互，修改响应式数据会造成源数据的修改，但是他的修改不会造成视图层数据的更新。
ref 函数验证
ref函数可以把对象中的属性值改成响应式数据，修改响应式数据，不会影响源数据，但是视图层的数据会被更新是正确的吗？上次没测试，这里也测试一下。
让我们写一个案例，页面显示一个名称，点击按钮，修改页面名称。
模板
差异
H1ref反应函数/h1
P name: {{name_ref}}/p
El-button type= primary @ click= BTN 修改信息/el-button
/div
/模板
脚本
从“vue”导入{ ref }
导出默认值{
setup() {
Const name=我是。
const name_ref=ref(name)
常量btn=()={
name_ref.value=.
Console.log(name_ref) //打印ref封装的数据
Console.log(name) //打印源数据
}
return { name_ref，btn }
}
}
/脚本
保存代码，刷新页面，点击按钮查看页面控制台打印的结果，主要是看ref函数包装的数据是否修改成功，源数据是否修改成功，最后一页是否修改。见下面截图。
好了，通过上面的截图，我们都明白了！
所以再次记住！
ref 函数可以将对象里面的属性值变成响应式的数据，修改响应式数据，是不会影响到源数据，但是视图层上的数据会被更新
toRefs 函数
toRef函数的用法其实和toRef函数差不多。
ToRefs函数用于批量设置多个数据为对应数据。ToRefs函数与原始数据交互。修改响应数据将影响源数据，但不会更新视图图层。ToRefs函数还可以与其他响应数据进行交互，这使得处理视图层数据更加容易。
toRefs 函数使用
像往常一样，创建一个对象，然后用toRefs函数包装它，并在页面上显示它。
模板
差异
h1参考参考函数/h1
P name: {{boy_toRefs.name}}/p
P: {{boy_toRefs.age}}/p
/div
/模板
脚本
从“vue”导入{ toRefs }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
Const boy_toRefs=toRefs(boy) //用toRefs包装男孩
Console.log(boy_toRefs) //打印结果
返回{ boy_toRefs }
}
}
/脚本
保存代码并刷新页面进行查看。
所以，我们来修改一下代码。除了。属性，我们需要。值。
p name:{ { boy _ tore fs . name . value } }/p
P: {{boy_toRefs.age.value}}/p
修改视图层代码，然后看效果。
哎，现在正常了！
可能有人会疑惑，这东西不是越来越复杂了吗？本来直接点属性就可以了，现在要点属性值。脱裤子放P不是没必要吗？嘿嘿！我也这么认为
为什么说没必要？很正常，因为就像之前的博文说的，这种复杂结构的数据可以用reactive函数来处理。最多可以渲染一次，但是toRefs函数需要点击两次。
模板
差异
h1参考参考函数/h1
P name: {{boy_toRefs.name}}/p
P: {{boy_toRefs.age}}/p
/div
/模板
脚本
从“vue”导入{ toRefs，reactive }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
const boy_toRefs=reactive(boy)
返回{ boy_toRefs }
}
}
/脚本
我们不使用toRefs函数，而是使用reactive函数来处理数据。
正如我们所看到的，页面可以正常解析，那么我们为什么还要使用toRefs函数呢？
其实是有原因的！
实际上，toRefs函数的最大用途就在这里！
在我们的男孩对象中只有两个相对较少的参数。如果我们的boy对象中有十个以上的参数，那么每次显示boy点都要写那么多次是不是很麻烦？所以使用toRefs函数可以解决这个问题。看看下面的代码。
模板
差异
h1参考参考函数/h1
P name: {{name}}/p
P: {{age}}/p
/div
/模板
脚本
从“vue”导入{ toRefs }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
return { boy_toRefs，toRefs(男孩)}
}
}
/脚本
当return抛出reactive时，可以使用扩展的operator和toRefs函数，通过直接写入属性来显示数据。
但是深度对象还是要通过点来实现。
也许你还有疑虑。直接扩展无功函数就可以了。为什么需要设置toRefs函数？记住这个！
toRefs 函数修改，原始数据被改变，页面不会被触发。
请看下面的代码：
模板
差异
h1参考参考函数/h1
P name: {{name}}/p
P: {{age}}/p
El-button type= primary @ click= BTN 修改名称/el-button
/div
/模板
脚本
从“vue”导入{ toRefs，reactive }
导出默认值{
setup() {
常量男孩={
姓名：“我是。”,
年龄：10岁
}
const new_toRefs=toRefs(boy)
常量btn=()={
new_toRefs.name.value=.
console.log(男孩)
}
返回{ btn，toRefs(男孩)}
}
}
/脚本
打印结果：
从打印结果可以看出，原始数据已经被修改，页面没有被触发。但是从我的写作中要注意的是，toRefs返回的对象可以随便求解和构造，根本不会影响值的响应性。
总结
有些朋友可能还不了解这两个功能。我们稍微总结一下。
如果希望将响应数据与以前的数据相关联，并且希望在不更新视图的情况下更新响应数据，请使用toRef函数。如果希望将对象的多个属性更改为响应数据，并且要求响应数据与原始数据相关联，并且响应数据更新时视图不更新，则可以使用toRefs函数将多个数据批量设置为响应数据。因为toRef函数一次只能设置一个数据。toRef函数接收一个对象作为参数，它遍历对象上的所有属性，然后逐个调用toRef函数来执行。关于理解Vue3中toRef和toRefs函数的用法的文章到此结束。有关Vue3中Toref的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。