vue3中ref,vue3 torefs
本文主要详细介绍了vue3的ref、computed、reactive和toRefs。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
1，ref2，计算3，反应4 4，参考文献汇总。在vue2中，数据函数中返回的值是直接响应的，但在vue3中，我们需要使用一些函数来达到这种效果。
无法在设置功能中获得vue的这个。
1、ref
本质上是一个函数，输入参数是一个值(原始类型)，以及一个返回响应类型的对象。
2、computed
本质上是函数，输入参数是函数，我们需要的值可以作为输入函数的返回值。
示例：单击按钮将屏幕上的数字加1。
模板
div id=应用程序
img alt=vue logo src=。/assets/logo.png
！在模板中引用- ref对象时，vue可以直接显示内部值，不需要写count.value -
h1{{count}}/h1
h1{{double}}/h1
按钮@click=增加点击/按钮
/div
/模板
脚本语言
//ref API:是函数，输入参数是值，返回响应式对象。
//computed API:是函数，输入参数是函数类型，输入函数包含我们需要的值。
//reactive:将响应变量包装在一起，使其更加清晰。
从“vue”导入{计算值、参考值、反应值}
导出默认值({
名称：“应用程序”，
/*data(){
返回{
计数：0
}
},
方法：{
增加(){
这个.计数
}
}*/
//注意：不用vue3中的数据和方法，可以用ref函数来完成响应。
setup(){
Const count=ref(0) //传入0并返回一个对象
const double=computed(()={
返回count.value*2
})
常数增加=()={
Count.value //通过返回对象的value属性获取响应数据
}
Return{ //要在外部使用的变量必须通过Return导出才能使用。
数数，
增加，
两倍
}
}
});
/脚本
3、reactive
本质上是一个函数，接受一个对象作为传入参数。
上面的代码在setup函数中有很多响应式的数据，而且都是分散的。我们可以用reactive把它们都包起来。数据需要取出的输出类型。属性。
模板
div id=应用程序
img alt=vue logo src=。/assets/logo.png
h1{{data.count}}/h1
h1{{data.double}}/h1
Button @click=data.increase 单击/button
/div
/模板
脚本语言
从“vue”导入{计算值、参考值、反应值}
导出默认值({
名称：“应用程序”，
//注意：不用vue3中的数据和方法，可以用ref函数来完成响应。
setup(){
常数数据=反应({
计数：0，
增加：()={
数据.计数
},
double:计算的(()=
data.count*2
)
})
Return{ //要在外部使用的变量必须通过Return导出才能使用。
数据
}
}
});
/脚本
上面的代码运行时会报错，数据类型错误。这是因为需要解决由内部计算函数引起的数据类型推理循环。您可以手动设置要分配给数据的数据类型。
接口数据端口{
计数：数量，
double:数字，
增加：()=无效
}
继续修改上面的代码，发现每次使用模板中的数据，都需要这些数据。属性来获取它。可以直接使用属性吗？这时，我们想到了.es6的扩展字符，但是改了之后我们发现点击按钮并没有改变屏幕上的数字，数据也没有反应。
这是因为这样返回的数据都是普通的js数据类型，不是响应式ref数据类型，所以我们需要一个新的方法。
4、toRefs
本质上是一个函数，接受反应函数作为输入参数，并返回ref类型的对象。
模板
div id=应用程序
img alt=vue logo src=。/assets/logo.png
！在模板中引用- ref对象时，vue可以直接显示内部值，不需要写count.value -
h1{{count}}/h1
h1{{double}}/h1
按钮@click=增加点击/按钮
/div
/模板
const refData=toRefs(data)
Return{ //要在外部使用的变量必须通过Return导出才能使用。
.refData
}
此时，我们扩展refData，就可以实现响应了。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。