setup,ref,reactive

news/2024/4/27 5:50:08/文章来源:https://blog.csdn.net/qq_52563729/article/details/130181605

初识setup

1.理解:Vue3.0中一个新的配置项,值为一个函数。

2.setup是所有Composition API(组合API)“表演的舞台”。

3.组件中所用到的:数据、方法等等,均要配置在setup中。

4.setup函数的两种返回值:

1.若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)
2.若返回一个渲染函数:则可以自定义渲染内容。(了解)

在这里插入图片描述

**注意点 **
1.尽量不要与Vue2.x配置混用

1. Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。2·但在setup中不能访问到Vue2.x配置(data、methos、computed...)3·如果有重名, setup优先。

2.setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

3.setup执行的时机
在beforeCreate之前执行一次,this是undefined。

4.setup的参数

props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。

context:上下文对象
1.attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
2.slots:收到的插槽内容,相当于this.$slots
3.emit:分发自定义事件的函数,相当于this.$emit


ref函数

将变量加工成响应式!!ref加工完后会变成一个对象,定义响应式数据

在这里插入图片描述

在底层中,vue3中对象我们使用的是我们的proxy代理

对象的错误修改方式:

在这里插入图片描述
正确的:

在这里插入图片描述


reavtive函数给对象使用的!!

reactive处理不了基本类型,只能处理我们对象和数组

在这里插入图片描述

所以一般我们将所有得数据放在一个对象里

在这里插入图片描述
这样我们就ok了 ,reactive定义的响应式是深层次的!!!

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

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

相关文章

软件测试,想找一份20k以上的工作需要掌握哪些知识?

都知道IT行业是高薪人员的聚集地,但想要成为高薪程序员却并不容易。月薪20k是测试工程师的一个门槛,想要突破就必须掌握更多的技能。 因为程序员职业发展很快,即使是相同起点的人,经过几年的工作或学习,会迅速拉开极…

[网络原理] 详解Cookie与Session

做好准备,迎接所有的成功吧 文章目录 1. Cookie的概念2. Session的概念3. Cookie与Session的关联与区别3.1 关联3.2 区别 4. Cookie与Session中的核心方法 1. Cookie的概念 Cookie是用户首次登陆网站成功之后,对应页面的服务器会返回给用户一个身份标识,被保存在用户主机的硬盘…

自动驾驶方案及相关对标

华为: 2021年4月18日,在华为智能汽车解决方案BU新品发布会上,华为智能汽车解决方案BU总裁王军表示,华为要持续加大对汽车行业的投入,今年在研发上的投资将达到10亿美元,未来每年保持30%左右增长&#xff0…

工程化:vite4+vue3里面的less预处理的mixin,when和伪元素的使用研究

本文的起因 项目的重构,之前的语法是scss,新项目选型选的less,两种基本的使用是差不多的,细节方面有很大的差异,今天拎出来重点的细说。。。 区别 *.scss *.less mixin .bg-dp(@number: 0) {

一文讲清莱迪斯 LCMXO2-4000HC-4BG256I 可编程逻辑FPGA 特性及运用领域

一文讲清lattice莱迪斯深力科 LCMXO2-4000HC-4BG256I 可编程逻辑FPGA 特性及运用领域 适用于低成本的复杂系统控制和视频接口设计开发,满足了通信、计算、工业、消费电子和医疗市场所需的系统控制和接口应用。 瞬时启动,迅速实现控制——启动时间小于1m…

AI数字人产品“世优BOTA”发布会落幕,世优科技纪智辉演讲回顾

4月20日,世优科技式发布了新一代AI数字人产品——“世优BOTA”。在会上,世优科技创始人纪智辉介绍了数字人技术、驱动形式、数字人应用、“世优BOTA”的前世今生及未来。 以下是纪智辉的演讲内容概要: 各位嘉宾、各位朋友:大家下…

【 Spring Mybatis 复杂的查询操作 】

文章目录 引言一、参数占位符 #{} 和 ${}二、SQL 注入三、like 模糊查询四、返回类型:resultType 和 resultMap五、多表查询 引言 前面我们已经学会了使用 Mybatis 进行增,删,改操作,也实现了简单的查询操作 !下面我们…

mysql主从复制搭建--待实践完善

一、什么是mysql主从复制 参考链接:MySQL主从介绍_rain_yunlx的博客-CSDN博客 Linux下搭建Mysql主从复制详细步骤(Mysql版本5.7.35)_linuxmysql主从_Direct_的博客-CSDN博客 Linux环境MySQL数据库主从复制保姆级教程_linux主从复制_小学生…

【SWAT水文模型】ArcSWAT输入准备:土地利用/土壤/气象数据

ArcSWAT输入准备:土地利用/土壤/气象数据 1 土地利用数据的处理1.1 数据下载 2 土壤库建立2.1 数据下载 3 气象数据库参考 1 土地利用数据的处理 1.1 数据下载 下载地址如下: 中科院1km土地利用数据 清华大学高精度土地利用数据 2 土壤库建立 SW…

如何将pdf图片文字转换成word 文字word图片怎么转换pdf

如今大家在工作中常常会运用到电脑来办公,电脑的运用大大提高了我们的工作效率,在带来机会的同时同样也带来了新挑战。 pdf图片怎么转换成word文档?PDF格式是一种常用的文档格式,它可以保持文档内容和格式的完整性,但是…

【UE】制作简单的山脉地形

在上一篇博客中(【UE】使用Quixel Bridge下载免费贴图),介绍了如何下载免费贴图,本篇博客介绍如何使用这些贴图制作地形贴图。 1. 创建地形 2. 用雕刻工具绘制地形 3. 新建两个材质函数,分别命名为“GrassAuto”、“R…

离散数学期末复习第一章 数理逻辑

离散数学 离散数学是研究各种各样的离散量的结构及离散量之间的关系一门学科,是计算机科学中基础理论的核心课程。 什么是连续变量? 在一定区间内可以任意取值的变量叫连续变量,其数值是连续不断的,相邻两个数值可作无限分割&a…

在线问诊小程序系统方案以及价值

方案价值zlzwgz0127 1.扩大医院流量 a.预约到院 在线展示专家的介绍,更能彰显实力,吸引患者来院就医, 用户可选择在线问诊和预约到院 b.社区团购导流 与我们合作社区团购给医院的体检产品导流 c.专家直播导流 通过专家直播吸引潜在患者…

观察者设计模式(Observer Design Pattern)[论点:概念、组成角色、相关图示、示例代码、框架中的运用、适用场景]

文章目录 概念组成角色相关图示示例代码框架中的运用适用场景 概念 观察者设计模式(Observer Design Pattern)是一种行为型设计模式,它定义了一种对象间的一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当…

机器学习 Rider数据集分析和预测

介绍数据集 ride_id:乘车ID rideable_type:乘车类型 started_at:开始日期 ended_at :结束日期 start_station_name:开始站的名字 start_station_id:开始站的ID end_station_name:结束站的名字 …

内网渗透之横向移动rdpwinrmwinrsspnkerberos

0x00 准备 环境:god.org cs上线 win2008web 提权利用ms14-058 抓取hash和明文密码(当获取到其他主机就重复提权和抓取密码) 扫描存活主机,扫描端口 代理转发-转发上线,生成反向连接木马,绑定监听器,上传至web根目录(方…

中小企业真的需要CRM吗?

如果你的企业没有CRM客户关系管理系统,企业主需要问问自己,他们将利用什么来扩展业务。福布斯进行的研究恰当地表明,充分利用CRM系统的企业可以将销售额提高29%。 中小企业定期产生大量客户,这可能会难以管理。这正是CRM系统在有…

《编码——隐藏在计算机软硬件背后的语言》精炼——第12章(二进制加法器)

“I hear and I forget. I see and I remember. I do and I understand”——Confucius 人类计算二进制数的方法 我们先计算本位的结果,称为加法位;再计算是否进位,称为进位位。 搭建二进制加法器 我们用逻辑门来搭建二进制加法器。它的思想…

高可用消息服务消息一致、可靠性、链路稳定性核心关注点

面临的问题 初期业务主要的场景是直播间的群聊消息以及一小部分的单聊消息。由于是教育场景,所以业务在划分聊天室的时候是以班级为单位进行划分的,假设每个聊天室的人数为500人。 问题一:用户的维护 直播场景的群聊与微信等常见的群聊在用…

OpenPCDet复现过程记录

0、前言 OpenPCDet项目之前我就复现过,一个很优秀的项目,这几天又需要用到这个项目,再次复现遇到了不少问题,特此记录复现的流程 1、环境准备 1.1、前置条件 以下是我安装的版本 CUDA 11.3CUDNN 8.2.1 CUDA和CUDNN安装可以参考…