Vue3-Ref Reactive toRef toRefs对比学习、标签ref与组件ref

响应式数据:

Ref

  • 作用:定义响应式变量。

  • 语法:let xxx = ref(初始值)(里面可以是任何规定内类型、数组等)

  • 返回值:一个RefImpl的实例对象,简称ref对象refref对象的value属性是响应式的

  • 注意点:

    • JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。(或者配置插件完成自动提示,但仍需理解value的意义)

    • 对于let name = ref('张三')来说,name不是响应式的,name.value是响应式的。

    • 其实ref接收的数据可以是:基本类型对象类型

    • ref接收的是对象类型,内部其实也是调用了reactive函数。其对象类型也显示为Proxy

    • 可以创建对象实例时田间深层次访问

Reactive 

  • 作用:定义一个响应式对象(基本类型不要用它,要用ref,否则报错)

  • 语法:let 响应式对象= reactive(源对象)

  • 返回值:一个Proxy的实例对象,简称:响应式对象。

  • 注意点:reactive定义的响应式数据是“深层次”的。

宏观角度看:ref用来定义:基本类型数据对象类型数据

  1. reactive用来定义:对象类型数据

  • 区别:

  1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value,现在volar被废弃,平替为Vue - Official)。

  1. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

  • 使用原则:

  1. 若需要一个基本类型的响应式数据,必须使用ref

  2. 若需要一个响应式对象,层级不深,refreactive都可以。

  3. 若需要一个响应式对象,且层级较深,推荐使用reactive

转换成响应式数据:

toRef 和 toRefs:

  • 作用:将一个响应式对象中的每一个属性,转换为ref对象。

  • 备注:toRefstoRef功能一致,但toRefs可以批量转换

语法如下:

<template><div class="person"><h2>姓名:{{person.name}}</h2><h2>年龄:{{person.age}}</h2><h2>性别:{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeGender">修改性别</button></div>
</template><script lang="ts" setup name="Person">import {ref,reactive,toRefs,toRef} from 'vue'// 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力let {name,gender} =  toRefs(person)// 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>

标签ref与组件ref:

作用:用于注册模板引用。

  • 用在普通DOM标签上,获取的是DOM节点。

  • 用在组件标签上,获取的是组件实例对象。

用在普通DOM标签上:

<template><div class="person"><h1 ref="title1">aa</h1><h2 ref="title2">bb</h2><h3 ref="title3">cc</h3><input type="text" ref="inpt"> <br><br><button @click="showLog">点我打印内容</button></div>
</template><script lang="ts" setup name="Person">import {ref} from 'vue'let title1 = ref()let title2 = ref()let title3 = ref()function showLog(){// 通过id获取元素const t1 = document.getElementById('title1')// 打印内容console.log((t1 as HTMLElement).innerText)console.log((<HTMLElement>t1).innerText)console.log(t1?.innerText)// 通过ref获取元素console.log(title1.value)console.log(title2.value)console.log(title3.value)}
</script>

用在组件标签上:

<!-- 父组件App.vue -->
<template><Person ref="ren"/><button @click="test">测试</button>
</template><script lang="ts" setup name="App">import Person from './components/Person.vue'import {ref} from 'vue'let ren = ref()function test(){console.log(ren.value.name)console.log(ren.value.age)}
</script><!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
<script lang="ts" setup name="Person">import {ref,defineExpose} from 'vue'// 数据let name = ref('张三')let age = ref(18)/****************************//****************************/// 使用defineExpose将组件中的数据交给外部defineExpose({name,age})
</script>

注意:

  1. 有些时候我们试图从reactive中解构出数据,如:const {XX1,XX2} = sthReactive但XX1和XX2一旦被提取出来就变成普通数据失去响应式。
  2. 对于响应式嵌套较深的数据,使用reactive可以一路.出来,而ref需要开启deep模式,因为ref只能访问浅层数据。
  3. 修改reactive中的数据时,单个数据能够修改,但是直接修改整个对象,相当于用一个带有新地址值的响应式对象(即使你再给他套个reactive也于事无补)覆盖,原先的值销毁,无法访问和修改了(换家具还是换房?)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/21112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python安装pystan教程

简介 PyStan是Stan编程语言的Python接口&#xff0c;Stan是一种用于统计建模和数据分析的概率编程语言。PyStan使用户能够在Python环境中定义、编译和采样Stan模型。 安装步骤 首先&#xff0c;需要先安装 Cython pip install Cython -i https://mirrors.aliyun.com/pypi/sim…

三十三篇: 解锁决策之门:专家系统深度探索与未来展望

解锁决策之门&#xff1a;专家系统深度探索与未来展望 在今天这个日益复杂的世界中&#xff0c;我们对决策的速度和质量提出了更高的要求。在众多解决方案中&#xff0c;专家系统作为人工智能的一大分支&#xff0c;扮演着不可或缺的角色。它不仅是技术创新的产物&#xff0c;…

在[0,1]随机生成一个数

要在[0, 1]范围内生成一个随机数&#xff0c;你可以使用各种编程语言的内置函数或库。以下是几种常见的方法&#xff1a; 使用编程语言的内置函数或库 1.Python import random random_number random.random() # 生成一个[0,1)范围内的随机数JavaScript var random_number …

MySQL基础进阶:汇总数据

汇总数据 聚合函数GROUP BY子句HAVING子句ROLLUP运算符 聚合函数 聚合函数&#xff1a;输入一系列值并聚合为一个结果的函数。 MAX()&#xff1a;求最大值MIN()&#xff1a;求最小值AVG()&#xff1a;求平均值SUM()&#xff1a;求和COUNT()&#xff1a;计数 SELECT MAX(invo…

Linux网卡绑定mode参数解析

在Linux中&#xff0c;使用bonding&#xff08;也称为Ethernet Channel Bonding&#xff09;可以将多个物理网络接口&#xff08;网卡&#xff09;绑定成一个逻辑接口&#xff0c;以提供更高的网络带宽、冗余以及故障转移能力。mode参数决定了如何在这些物理接口间分配网络流量…

React常见的一些坑

文章目录 两个基础知识1. react的更新问题, react更新会重新执行react函数组件方法本身,并且子组件也会一起更新2. useCallback和useMemo滥用useCallback和useMemo要解决什么3. react的state有个经典的闭包,导致拿不到最新数据的问题.常见于useEffect, useMemo, useCallback4. …

【激光雕刻机上位机的成品软件】核心功能 - 参考wecreat

Software | WeCreat MakeIt! https://wecreat.com/pages/software 体验软件如上&#xff0c;自行下载体验。 价格5W&#xff0c;本人为 wecreat 创立之初上位机软件开发的核心员工&#xff0c;详细内容私信我。 由于该公司快3个月未给我竞业补偿了&#xff0c;对我不仁那我…

Anaconda创建python环境默认C盘,如何修改路径

文章目录 前言解决方案1.找到Anaconda的根目录2. 找到根目录文件夹&#xff0c;右键-属性-安全 测试-重新创建新的python环境 前言 使用 Anaconda创建python环境&#xff0c;默认在C盘。 如何修改到别的路径呢&#xff1f; base环境 是安装 Anaconda是安装的默认环境&#x…

Python3 函数参数

前言 本文主要介绍python中的函数参数&#xff0c;主要内容包括形式参数与实际参数的概念、位置参数、关键字参数、默认参数、可变参数。 文章目录 前言一、形式参数与实际参数的概念二、位置参数&#xff08;也叫必需参数&#xff09;三、关键字参数四、默认参数五、可变参数…

设计模式——结构型模式——责任链模式

责任链模式简介 责任链模式&#xff0c;又名职责链模式&#xff0c;为了避免请求发送者与多个请求处理者耦合在一起&#xff0c;将所有请求处理者通过前一对象记住其下一个对象的引用而成一条链&#xff1b;当有请求发生时&#xff0c;可将请求沿着这条链传递&#xff0c;传递过…

python dlib 面部特征点检测

运行环境macos m2芯片 Python 3.11.7&#xff0c;python3.9都能通过&#xff0c;windows系统应该也是一样的效果 import dlib import cv2 import matplotlib.pyplot as plt# Load the image image_path path_to_your_image.jpg # Replace with the path to your image image…

【Qt】【模型视图架构】代理模型

文章目录 代理模型简单介绍QSortFilterProxyModel类简单介绍排序过滤子类化 代理模型简单介绍 代理模型的作用是可以将一个模型中的数据进行排序或者过滤&#xff0c;然后提供给视图进行显示。 如下所示&#xff0c;创建一个源模型、一个代理模型&#xff0c;界面上创建一个列…

QT 信号和槽 一对多关联示例,一个信号,多个槽函数响应,一个信号源如何绑定多个槽函数

在窗体里放置一个单行文本编辑控件&#xff08;QLineEdit&#xff09;、一个标签控件&#xff08;QLabel&#xff09;和一个文本浏览控件&#xff08;QTextBrowser&#xff09;&#xff0c;在单行文 本编辑控件里的文本被编辑时&#xff0c;标签控件和文本浏览控件都会同步显示…

网安速成之选择题(详细解析版)

网安速成之选择题 单选多选 单选 密码学的目的是&#xff08; C &#xff09;。 A. 研究数据压缩 B. 研究数据解密 C. 研究数据保密 D. 研究漏洞扫描 密码学的目的是研究数据加密&#xff0c;保证数据的机密性 数据机密性安全服务的基础是&#xff08; D &#xff09;。 A. 数…

C++ 的 Tag Dispatching(标签派发) 惯用法

目录 1.概述 2.标准库中的例子 3.使用自己的 Tag Dispatching 3.1.使用 type traits 技术 3.2.使用 Type_2_Type 技术 4.Tag Dispatching的使用场景 5.总结 1.概述 一般重载函数的设计是根据不同的参数决定具体做什么事情&#xff0c;编译器会根据参数匹配的原则确定正确…

面试题 - Java基础个人总结

1、Java语言特点/优势 1.1、什么是面向对象编程 2、Java的八种基本数据类型 2.1、为什么要有基本数据类型的封装类 2.2、Java自动装箱和拆箱 笔试题-1 笔试题-2 2.3、为什么浮点数运行时&#xff0c;会有丢失精度的风险&#xff1f; 2.4、补充知识&#xff1a; 3、重载…

WP All Import插件

使用 WP All Imports 插件并将亚马逊产品集成到 WooCommerce 网站中。在您的网站上&#xff0c;他们可以添加到购物车...然后一旦他们按下结帐&#xff0c;他们就会被发送到亚马逊进行付款 WP All Import 是一个强大的WordPress插件&#xff0c;它允许用户从XML或CSV文件中导入…

封装uview-plus上传组件up-upload,支持v-model绑定

痛点 vue上传组件拿到了一般无法直接使用&#xff0c;需要对其上下传的接口按照业务进行处理及定制。本次拿到的uview-plus也是一样&#xff0c;对其上传组件up-upload进行封装&#xff0c;令其更方便开发 目标 封装希望达到的目标&#xff0c;就是实现v-model的绑定。令其支…

字符串-将str1编辑成str2所需最小代价(hard)

一、题目描述 二、解题思路 该题目使用动态规划的思想来解决问题 刚开始我还在想&#xff0c;删除添加的操作可以等价为替换操作&#xff0c;如果替换操作的Cost大于删除添加组合操作的Cost之和就需要把 rcdcic。 但是在动态规划中&#xff0c;如果对三种不同的操作方式进行…

【Centos7】解决 CentOS 7 中出现 “xx: command not found“ 错误的全面指南

【Centos7】初探xx:command not found解决方案 大家好 我是寸铁&#x1f44a; 【Centos7】解决 CentOS 7 中出现 “xx: command not found” 错误的全面指南✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 经常有小伙伴问我&#xff0c;xx:command not found怎么办&#xff1…