iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue3中reactive函数toRef函数ref函数简介
  • 304
分享到

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

2024-04-02 19:04:59 304人浏览 安东尼
摘要

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

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函数的资料请关注编程网其它相关文章!

--结束END--

本文标题: Vue3中reactive函数toRef函数ref函数简介

本文链接: https://www.lsjlt.com/news/136512.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作