温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue3中reactive函数、toRef函数和ref函数有什么用

发布时间:2021-09-24 16:51:26 来源:亿速云 阅读:170 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关Vue3中reactive函数、toRef函数和ref函数有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

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函数有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI