Vue3中reactive函数toRef函数ref函数简介

更新时间：2021年09月23日 16:49:39 作者：SpringSir

这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下

reactive函数

reactive用于定义响应式数据（可以理解成data的替代品）

用法：

导入 import {reactive} from ‘vue'

使用：

const state=reactive({
    参数名:参数值
})

访问： 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函数的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vuex中mutations的用法及说明
这篇文章主要介绍了Vuex中mutations的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
在elementui中Notification组件添加点击事件实例
这篇文章主要介绍了在elementui中Notification组件添加点击事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue2+elementUI实现下拉树形多选框效果实例
这篇文章主要给大家介绍了关于vue2+elementUI实现下拉树形多选框效果的相关资料,这是最近的工作中遇到的一个需求,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07
基于vue实现一个禅道主页拖拽效果
最近在做一个基于vue的后台管理项目。接下来通过本文给大家分析一款基于vue做一个禅道主页拖拽效果,需要的朋友可以参考下
2019-05-05
Vue中插槽slot的使用方法
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
2023-03-03
vue用复选框实现组件且支持单选和多选操作方式
这篇文章主要介绍了vue用复选框实现组件且支持单选和多选操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
Electron store及shareObject进程间数据交互存储功能封装
这篇文章主要为大家介绍了Electron store及shareObject进程间数据交互存储功能封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue实现登录数据的持久化的使用示例
在Vue.js中,实现登录数据的持久化需要使用浏览器提供的本地存储功能,Vue.js支持使用localStorage和sessionStorage来实现本地存储,本文就来介绍一下如何实现,感兴趣的可以了解一下
2023-10-10
结合axios对项目中的api请求进行封装操作
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09