vue3.0 torefs,vue3中的ref函数
本文主要介绍Vue3如何理解reftoRef和toRefs的区别。用示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
一.基金会
1 .参考
2.toRef3.toRefs4 .最好的使用方法II。深入的
1.为什么需要ref2.ref为什么需要？价值3。为什么需要几种新方法在toRef和toRefsVue3中创建响应数据？它们各自的功能当然不同，每种方法都有自己的应用场景。今天，我们来谈谈什么是ref和toRef？三种使用方式有什么区别？最好的使用方法是什么？
目录
一、基础
(1)生成值类型的响应数据，并通过。价值。
模板
div{{ ageRef }}/div
/模板
脚本
从“vue”导入{ ref }
导出默认值{
setup() {
const ageRef=ref(20)
setInterval(()={
ageRef.value=1
}, 1000)
返回{
ageRef
}
},
}
/脚本
上面的代码定义了一个ageRef变量，每秒钟将ageRef递增1，页面上显示的值也会递增1。
(2)可用于无功
将上面的代码修改如下，引入reactive定义的变量，将ref定义的变量引入reactive，在模板中显示reactive的变量。最终效果与上面(1)中的效果相同。
模板
div{{ info.age }}/div
/模板
脚本
从“vue”导入{ ref，reactive }
导出默认值{
setup() {
const ageRef=ref(20)
常量信息=反应({
年龄：ageRef
})
setInterval(()={
ageRef.value=1
}, 1000)
返回{
信息
}
},
}
/脚本
(3)可用于获取Dom
模板
div ref= eleDom ref-DOM-test/div
/模板
脚本
从“vue”导入{ ref，onMounted }
导出默认值{
setup() {
const eleDom=ref(null)
onMounted(()={
console . log(eledom . value . innerhtml)//ref-DOM-test
})
返回{
eleDom
}
},
}
上面的代码控制台输出ref-dom-test，表示获得了dom元素。
要获取Dom元素，必须满足以下规则
定义的ref变量名必须与模板中ref的值一致，比如代码中的eleDom。
1.ref
响应对象的道具
创建一个有响应的引用。
两者保持引用关系。
让我们看看下面的代码。
模板
div { { state . age } }-{ { ageRef } }/div
/模板
脚本
从“vue”导入{ toRef，reactive }
导出默认值{
setup() {
恒定状态=反应({
姓名：“JL”，
年龄：18岁
})
const ageRef=toRef(状态，“年龄”)
setTimeout(()={
年龄=20岁
}, 1000)
setTimeout(()={
ageRef.value=21
}, 2000)
返回{
状态，
ageRef
}
},
}
/脚本
在上面的代码中，使用toRef将state的age属性改为响应式变量，1秒后再将state的age值改为20，此时ageRef也会变成20；2秒后，把ageRef的值改成21，state的年龄值也变成21，说明两者保持相互参照。
ToRef针对的是响应式，而不是普通对象。如果用于非响应型，则输出结果没有响应。
2.toRef
把一个有反应的物体变成正常的物体。
对象的每个属性都是一个相应的引用。
两者保持引用关系。
让我们看看下面的代码。
模板
div{{姓名}} - {{年龄}}/div
/模板
脚本
从“vue”导入{ reactive，toRefs }
导出默认值{
setup() {
恒定状态=反应({
姓名：“JL”，
年龄：18岁
})
const stateRefs=toRefs(state)
setTimeout(()={
年龄=20岁
}, 1000)
setTimeout(()={
stateRefs.age.value=21
}, 2000)
返回状态参考
},
}
/脚本
在上面的代码中，toRefs用于将状态转换为普通对象。这时可以直接返回stateRefs。这时可以在模板中直接调用姓名和年龄。然后1秒后将state的年龄值改为20，那么页面中的年龄也会变成20；2秒后，将stateRefs中name的值改为21，页面中的age值也将变为21，说明两者保持相互引用。
在toRefs将响应对象变成普通对象后，每个属性都有一个响应ref，所以。需要价值才能得到它的价值。
3.toRefs
Reactive是对象的响应，ref是值类型的响应。
安装程序返回toref (state)或toref(state， XXX)-(这样您就不能在模板中使用state.xxx)
ref的变量以xxxRef命名。
合成函数返回的响应对象时使用toRefs。
例如：
模板
divx:{{x}} y:{{y}}/div
/模板
脚本
从“vue”导入{ reactive，toRefs }
导出默认值{
setup() {
功能测试(){
恒定状态=反应({
x: 1，
y: 2
})
返回参考(状态)
}
const {x，y}=test()
setTimeout(()={
x.value=2
}, 1000)
返回{
x，
y
}
}
}
/脚本
在上面的代码中，响应对象状态是在测试函数中定义的，它通过toRefs转换成普通对象并返回。此时结构可以赋值，值有响应。
4.最佳的使用方式
二、深入
正如我们上面提到的，值类型也可以通过使用reactive和toRef转换成responsive类型。为什么需要ref？
值类型没有代理
设置()，计算().可能都返回值类型。如果vue没有定义ref，用户在需要响应式值类型时，会通过其他方式(reactive/toRef，reactive/toRefs)创建ref，这样会造成代码更加混乱。
1.为什么需要ref
ref为什么需要加一个. value才能得到值？何必呢？
Ref是对象(不会丢失任何响应)，value存储值。
响应由的get和set实现。价值属性。
你不需要。值，但在其他情况下需要它。
2.ref为什么需要.value
初衷：解构对象数据，又不失响应性。
前提：是针对有反应的对象，不是普通对象。
结果：不创建响应，只继续响应。
关于Vue3如何理解ref和toRef之间的区别的这篇文章到此为止。关于Vue3 ref和toRefs的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。