Vue3中reactive函数toRef函数ref函数简介
更新时间:2021年9月24日 00:00 点击:2930
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函数的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了C#中out与ref的区别实例解析,对C#初学者有不错的学习借鉴价值,需要的朋友可以参考下...2020-06-25
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 有过C#基础知识的都应该清楚Ref和Out的使用方法,所以下面这篇文章主要给大家介绍了关于c#基础系列之ref和out的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 本文将通过实例和说明,给大家详细讲解C#中的ref和out参数...2020-06-25
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 本篇文章是对params,ref,out的参数问题进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 今天又遇到这个问题了,问了问同事,他说最近面试的时候,也问道他了,于是给我讲了讲,现在大概是记住了,分享一下。...2020-06-25
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07