当前位置: 首页 > news >正文

reactive与ref VCA

简介

Vue3 最大的一个变动应该就是推出了 CompositionAPI,可以说它受ReactHook 启发而来;它我们编写逻辑更灵活,便于提取公共逻辑,代码的复用率得到了提高,也不用再使用 mixin 担心命名冲突的问题。

ref 与 reactive 是 Vue3 新推出的主要 API 之一,它们主要用于响应式数据的创建。

reactive 能做的,ref 都能胜任,并且 ref 底层还是使用 reactive 来做的!!!

ref 函数可以接收原始数据类型引用数据类型

reactive 函数只能接收引用数据类型

reactive包装函数

<template><div><!-- 案列1 --><button @click="myClick">点我</button><div>{{ obj.name }}--{{ obj.age }}</div><div>{{ obj2.email }}</div><!-- <div>{{ obj3 }}</div> --><hr><!-- 列表案列 --><ul><li v-for="item in obj.datalist" :key="item">{{ item }}</li></ul><!-- 模糊查询案列 --><input type="text" v-model="obj.mytitle"><ul><li v-for="item in GetSelectItems()" :key="item">{{ item }}</li></ul></div>
</template>
<script>
import { reactive } from 'vue';
export default {setup() {//用reactive是一个包装函数,包装后就得到了一个响应式对象obj (setup中可以存在多个reactive,只是正常情况下一个就够用了,比如下面的obj 和obj2)//注意const是申明常量的,常量不是不可变的吗?为什么还可以通过obj.name = "李四"来改变它呢? //其实obj只是reactive({name: "张三",age: 29})这个对象的一个引用(指针),obj不能再进行修改,只是说obj不能再指向其他的对象了,例如:obj="aaa"就会报错,因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.name = "李四"不会报错const obj = reactive({name: "张三",age: 29,datalist: ["aaa", "bbb", "ccc"],mytitle: ""})const obj2 = reactive({ email: "abc@qq.com" })//const obj3=reactive("张三"); //reactive不支持这种简单类型的包装,它只支持复杂类型的包装,如对象,数组等。//const obj3=reactive("");     //reactive不支持这种简单类型的包装//const obj3=reactive(1);      //reactive不支持这种简单类型的包装const myClick = () => {obj.name = "李四"}const GetSelectItems = () => {//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法, item表示当前遍历datalist数组的项,如果当前项包含了input中输入的值,则找出来,然后统一返回一个数组var selectIitemArr = obj.datalist.filter(item => item.includes(obj.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//obj,myClick是定义在setup中的,它只能在setup中使用,为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去,就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,myClick, //返回myClickGetSelectItems,}}
}</script>

ref包装函数

<template><div><!-- 案列1 --><button @click="myClick">点我</button><div>{{ obj.name }}--{{ obj.age }}</div><div>{{ obj2.email }}</div><div>{{ obj3 }}</div><div>{{ obj4 }}</div><div>{{ obj5 }}</div><div>{{ obj6?"中国":"美国" }}</div><hr><!-- 列表案列 --><ul><li v-for="item in obj.datalist" :key="item">{{ item }}</li></ul><!-- 模糊查询案列 --><input type="text" v-model="obj.mytitle"><ul><li v-for="item in GetSelectItems()" :key="item">{{ item }}</li></ul></div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {setup() {//用reactive是一个包装函数,包装后就得到了一个响应式对象obj (setup中可以存在多个reactive,只是正常情况下一个就够用了,比如下面的obj 和obj2)//注意const是申明常量的,常量不是不可变的吗?为什么还可以通过obj.name = "李四"来改变它呢? //其实obj只是ref({name: "张三",age: 29})这个对象的一个引用(指针),obj不能再进行修改,只是说obj不能再指向其他的对象了,例如:obj="aaa"就会报错,因为obj所指向对象的引用已经变化了。//但是obj指向的这个对象它本身的属性是可以修改的,所以 obj.value.name = "李四"不会报错const obj = ref({name: "张三",age: 29,datalist: ["aaa", "bbb", "ccc"],mytitle: ""})const obj2 = ref({ email: "abc@qq.com" })const obj3=ref("王五"); //ref支持这种简单类型的包装  原理就是new Proxy({value:"王五"}) 注意:在DOM模板中使用{{obj3}}  在<script>中使用需要在后面加.value 如:obj3.valueconst obj4=ref("");     //ref支持这种简单类型的包装  原理就是new Proxy({value:""})const obj5=ref(1);      //ref支持这种简单类型的包装  原理就是new Proxy({value:1})const obj6=ref(true);const myClick = () => {obj.value.name = "李四"}const GetSelectItems = () => {//特别注意:经过ref包装函数包装的对象,在<script>中必须要在对象名称后面.value ,在DOM模板中则不需要.value// 比如:// obj.value.name; 获取obj对象中的name值// obj.value.age;  获取obj对象中的age值// obj.value.datalist; 获取obj对象中的datalist值// obj.value.mytitle;  获取obj对象中的mytitle值//includes() 方法用于判断字符串是否包含指定的子字符串//filter方法是过滤方法, item表示当前遍历datalist数组的项,如果当前项包含了input中输入的值,则找出来,然后统一返回一个数组var selectIitemArr = obj.value.datalist.filter(item => item.includes(obj.value.mytitle))return selectIitemArr;}//所有的函数与对象都需要在return中进行返回//obj,myClick是定义在setup中的,它只能在setup中使用,为了在setup外面使用(例如DOM中)我们就必须要把他们暴露出去,就需要放到return中进行返回return {obj, //等同于obj:objobj2,obj3,obj4,obj5,obj6,myClick, //返回myClickGetSelectItems,}}
}</script>

相关文章:

reactive与ref VCA

简介 Vue3 最大的一个变动应该就是推出了 CompositionAPI&#xff0c;可以说它受ReactHook 启发而来&#xff1b;它我们编写逻辑更灵活&#xff0c;便于提取公共逻辑&#xff0c;代码的复用率得到了提高&#xff0c;也不用再使用 mixin 担心命名冲突的问题。 ref 与 reactive…...

小程序day01

简介: 小程序项目的基本结构 页面的组成部分 一个页面对应一个文件夹&#xff0c;所有有关的内容都放在一起。 JSON配置文件 2.app.json文件 3.project.config.json文件 4.sitemap.json文件 5.页面的.json配置文件 6. 新建小程序页面 7.修改项目首页 小程序代码构成 小程序的宿…...

redis主要支持的数据类型有哪些?—— 筑梦之路

Redis支持的主要数据类型&#xff1a; 1、字符串&#xff08;String&#xff09;&#xff1a;字符串是最简单的数据结构&#xff0c;可以存储文本或二进制数据。常用操作&#xff1a;设置值、获取值、追加、自增自减等。 2、列表&#xff08;List&#xff09;&#xff1a;列表是…...

解决国际阿里云服务器挂载云盘的问题!!

跟着云计算技术的开展&#xff0c;越来越多的企业和个人挑选运用云服务器。然而&#xff0c;在运用过程中&#xff0c;可能会遇到一些问题&#xff0c;比如云服务器无法挂载云盘。这篇文章将详细说明如何处理这个问题。 一、云服务器无法挂载云盘的原因 云服务器无法挂载云盘可…...

基于吉萨金字塔建造算法的无人机航迹规划-附代码

基于吉萨金字塔建造算法的无人机航迹规划 文章目录 基于吉萨金字塔建造算法的无人机航迹规划1.吉萨金字塔建造搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用吉萨金字塔建造算法…...

高频SQL50题(基础版)-1

文章目录 主要内容一.SQL练习题1.1757-可回收且抵制的产品代码如下&#xff08;示例&#xff09;: 2.584-寻找用户推荐人代码如下&#xff08;示例&#xff09;: 3.595-大的国家代码如下&#xff08;示例&#xff09;: 4.1148-文章浏览代码如下&#xff08;示例&#xff09;: 5…...

RecyclerView自定义LayoutManager从0到1实践

此前大部分涉及到 RecyclerView 页面的 LayoutManager基本上用系统提供的 LinearLayoutManager 、GridLayoutManager 就能解决&#xff0c;但在一些特殊场景上还是需要我们自定义 LayoutManager。之前基本上没有自己写过&#xff0c;在网上看各种源码各种文章&#xff0c;刚开始…...

【虹科干货】5个关于微服务的误解

你认为微服务架构能为你带来什么&#xff1f;难道微服务真的是一劳永逸的吗&#xff1f;又或者&#xff0c;难道微服务的威力并不如传闻所言&#xff1f;微服务架构应当如何设计才能真正彰显它作为一种解决方案的好处呢&#xff1f; 文章速览&#xff1a; 误解一&#xff1a;…...

利用卷影拷贝服务攻击域控五大绝招

点击星标&#xff0c;即时接收最新推文 在微软Active Directory&#xff08;活动目录&#xff09;中&#xff0c;所有的数据都被保存在ntds.dit中&#xff0c; NTDS.DIT是一个二进制文件&#xff0c; 它存在于域控制器中的 %SystemRoot%\ntds\NTDS.DIT。ntds.dit包括但不限于Us…...

web3 在React dapp中全局管理web3当前登录用户/智能合约等信息

上文 Web3 React项目Dapp获取智能合约对象我们在自己的前端dapp项目中链接获取到了 自己的智能合约 我们继续 我们还是先启动ganache环境 终端输入 ganache -d然后发布一下我们的智能合约 打开我们的合约项目 终端输入 truffle migrate --reset这样 我们的智能合约就部署到区…...

Golang硬件控制:将软件力量扩展到物理世界

引言 在过去的几十年中&#xff0c;计算机科学和软件工程领域取得了巨大的发展和进步。现在&#xff0c;我们可以编写各种强大的软件应用程序来解决各种问题。然而&#xff0c;软件并不仅限于在计算机上运行&#xff0c;它也可以扩展到物理世界中。这就是Golang的魅力所在。Go…...

Docker 查看Image镜像的Dockerfile方法

1、创建测试镜像 Dockerfile: FROM centos LABEL maintainer"NGINX Docker Maintainers docker-maintnginx.com" RUN yum install -y nginx RUN echo "Nginx Web: CMD defining default arguments for an ENTRYPOINT" > /usr/share/nginx/html/index.…...

el-dialog中嵌套iframe之后拿不到iframe的id 的解决办法

在vueelement项目中想用到el-dialog弹窗加iframe嵌套外部页面的方法,但是这时候要获取iframe里面的ID 但是这时候怎么也获取不到 <el-dialog ref"middleFlag" v-if"middleFlag" width"1100px" height1200px title"文章管理" :visib…...

汇总公安局网站建设想法,QPQ盐浴氮化处理

功能描述 网站管理平台 1、主要功能&#xff1a;网站信息发布功能组件、文章数据转移、内容管理word导入发布、一键排版、统一互动、网站管理、权限分配管理 2、跨浏览器的后台管理界面&#xff0c;支持IE\FIREFOX\CHROME\SAFARI\OPERA及其他第三方浏览器&#xff1b; 3、系统…...

前度开发面试题

面试题总结 vue页面跳转会经过两个钩子函数beforeEach、afterEach 组见守卫 beforeRouteEnter前置组见守卫 *beforeRouteUpdate更新之前 watch和computed区别 数据没有改变&#xff0c;则 computed 不会重新计算&#xff09;。若没改变&#xff0c;计算属性会立即返回之前缓…...

如何保证缓存中都是热点数据?

确保缓存中保留热点数据是关键&#xff0c;因为热点数据通常是最常被访问的数据&#xff0c;提高了缓存的命中率和整体性能。以下是一些策略和方法&#xff0c;能够帮助你维护缓存中的热点数据&#xff1a; 缓存策略&#xff1a; 缓存预热&#xff1a; 在系统启动时或负载较低的…...

什么是Webpack?它的主要功能是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

基于深度学习的人脸性别年龄识别 - 图像识别 opencv 计算机竞赛

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…...

宝塔安装mongodb插件失败的解决办法

安装时始终不成功。 进入控制台进行安装 /www/server/php/71# pecl install mongodb WARNING: channel "pecl.php.net" has updated its protocols, use "pecl channel-update pecl.php.net" to update pecl/mongodb requires PHP (version > 7.2.0, …...

CVE-2018-8174 IE浏览器远程代码执行漏洞

一、漏洞简介 该漏洞影响最新版本的IE浏览器及使用了IE内核的应用程序。用户在浏览网页或打开Office文档时都可能中招&#xff0c;最终被黑客植入后门木马完全控制电脑。微软在4月20日早上确认此漏洞&#xff0c;并于5月8号发布了官方安全补丁&#xff0c;对该0day漏洞进行了修…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化

是不是受够了安装了oracle database之后sqlplus的简陋&#xff0c;无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话&#xff0c;配置.bahs_profile后也能解决上下翻页这些&#xff0c;但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可&#xff0c…...