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

目录

• reactive函数
• 用法：
• toRef函数(了解即可)
• 用法：
• ref函数
• 定义响应式数据
• 直接定义使用
• 获取dom
• 获取组件实例对象

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函数的资料请关注华域联盟其它相关文章！

您可能感兴趣的文章:

• setup+ref+reactive实现vue3响应式功能
• Vue之ref属性详解
• Vue3中的Refs和Ref详情
• Vue.js $refs用法案例详解
• Vue3.0中Ref与Reactive的区别示例详析
• Vue3中ref与reactive的详解与扩展
• Vue3中ref与toRef的区别浅析
• vue3组合API中setup、 ref、reactive的使用大全
• Vue中ref的用法及演示

本文由 华域联盟 原创撰写：华域联盟 » Vue3中reactive函数toRef函数ref函数简介

转载请保留出处和原文链接：https://www.cnhackhy.com/82088.htm