您的位置：首页 > 编程技术 > js  >  Vue3中reactive函数toRef函数ref函数简介

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

 更新时间：2021年9月24日 00:00  点击：2764

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函数的资料请关注猪先飞其它相关文章！

[!--infotagslink--]

相关文章

  • 浅谈vue2的$refs在vue3组合式API中的替代方法

    这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18

  • C#中out与ref的区别实例解析

    这篇文章主要介绍了C#中out与ref的区别实例解析,对C#初学者有不错的学习借鉴价值,需要的朋友可以参考下...2020-06-25

  • Vue3 编译流程-源码解析

    今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥...2021-09-25

  • vue3弹出层V3Popup实例详解

    这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-01-04

  • vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07

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

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

  • c#基础系列之ref和out的深入理解

    有过C#基础知识的都应该清楚Ref和Out的使用方法，所以下面这篇文章主要给大家介绍了关于c#基础系列之ref和out的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧...2020-06-25

  • 利用Vue3 创建Vue CLI 项目（一）

    这篇文章主要介绍利用Vue3 创建Vue CLI 项目，下面文章内容附有官方文档链接，安装过程，需要的可以参考一下...2021-10-18

  • 浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧...2021-10-26

  • vue3封装放大镜组件的实例代码

    这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20

  • 使用Vue3进行数据绑定及显示列表数据

    这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据，整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23

  • 利用vue3+ts实现管理后台（增删改查）

    这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-10-30

  • 详解Ref在React中的交叉用法

    众所周知，react推出了hooks之后，很多项目就开始往hooks上靠拢，所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20

  • 解析C#中的ref和out参数

    本文将通过实例和说明，给大家详细讲解C#中的ref和out参数...2020-06-25

  • 40行代码把Vue3的响应式集成进React做状态管理

    这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-20

  • 详解vue3 沙箱机制

    这篇文章主要介绍了详解vue3 沙箱机制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-15

  • 基于params,ref,out的参数问题详解

    本篇文章是对params,ref,out的参数问题进行了详细的分析介绍，需要的朋友参考下...2020-06-25

  • ref 和out传参的区别分析

    今天又遇到这个问题了，问了问同事，他说最近面试的时候，也问道他了，于是给我讲了讲，现在大概是记住了，分享一下。...2020-06-25

  • C#中按引用传递与按值传递的区别,以及ref与out关键字的用法详解

    以下是对C#中按引用传递与按值传递的区别，以及ref与out关键字的用法进行了详细的分析介绍，需要的朋友可以过来参考下...2020-06-25

  • Vue3 AST解析器-源码解析

    这篇文章我们从 ast 生成时调用的 baseParse 函数分析，再到 baseParse 返回 createRoot 的调用结果，一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25