目录Reactive函数用法:toRef函数(了解即可)用法:ref函数定义响应式数据直接定义使用获取dom获取组件实例对象reactive函数 reactive用于定义响应式数据(
reactive用于定义响应式数据(可以理解 成data的替代品)
导入 import {reactive} from ‘Vue'
使用:
const state=reactive({
参数名:参数值
})
访问: state.参数名
访问: state.参数名
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
{
value:值
}
导入
import {ref} from 'vue'
setup(){
定义
const num=ref({a:1,b:2})
num:{
value:{a:1,b:2}
}
}
访问: num.value===0
reactive:适用于多个数据,ref适用于单个数据
<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函数的资料请关注编程网其它相关文章!
--结束END--
本文标题: Vue3中reactive函数toRef函数ref函数简介
本文链接: https://www.lsjlt.com/news/136512.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0