Vue3中reactive函数toRef函数ref函数简介
短信预约 -IT技能 免费直播动态提醒
reactive函数
reactive用于定义响应式数据（可以理解 成data的替代品）
用法：
导入 import {reactive} from ‘vue'
使用：
const state=reactive({
参数名:参数值
})
访问： state.参数名
访问： state.参数名
toRef函数(了解即可)
toRef：将响应式数据中某个字段提取出来成单独响应式数据
用法：
导入 import {toRef} from ‘vue'
使用：
const state=reactive({
num:0
})
const num=toRef(state（响应式数据）,'num属性名')
num:{
value:0
}
Ref实际可以理解成一种数据类型：{value:值}
访问：num.value===0
注意点：
html：中使用响应式数据时可以不用写value
js中一定要写value
ref函数
定义响应式数据
{
value:值
}
直接定义使用
导入
import {ref} from 'vue'
setup(){
定义
const num=ref({a:1,b:2})
num:{
value:{a:1,b:2}
}
}
访问： num.value===0
reactive:适用于多个数据，ref适用于单个数据
获取dom
<template>
<div ref="target">123</div>
</template>
scripte
import {ref} from 'vue'
setup(){
const target=ref(null)
return {target}
target.value就是相应dom
}
获取组件实例对象
ref用于原生标签就是获取dom
ref用于组件标签就是获取组件实例对象
用法和获取dom一样的
<template>
<组件标签 ref="target">123</组件标签>
</template>
script
import {ref} from 'vue'
setup(){
const target=ref(null)
return {target}
target.value就是组件实例对象
}
以上就是Vue3中reactive函数toRef函数ref函数简介的详细内容，更多关于Vue3函数的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
