概述
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函数的资料请关注靠谱客其它相关文章！
最后
以上就是冷艳寒风为你收集整理的Vue3中reactive函数toRef函数ref函数简介的全部内容，希望文章能够帮你解决Vue3中reactive函数toRef函数ref函数简介所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复