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.参数名
访问： 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实现固定底部组件的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要为大家介绍了Vue3项目中使用自适应Rem示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-08-08
这篇文章主要介绍了如何在项目中使用JSON动画组件,包括创建目录结构、下载JSON文件、编写自定义组件代码以及组件的使用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue $mount 和 el的区别说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了Vue新增内置组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要为大家详细介绍了vue的props如何实现子组件随父组件一起变化,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了vuex的mapGetters无效原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
ElementUI级联选择器实现同一父级下最多只能选中一个子级
本文主要介绍了ElementUI级联选择器实现同一父级下最多只能选中一个子级,同一父级下的子节点单选,又可以选择多个不同父级下的节点,具有一定参考价值,感兴趣的可以了解一下2023-10-10
最新评论