前端系列-7 Vue3响应式数据

1.响应式数据和实现

响应式数据的核心是当数据模型发生变化时,与之相关(使用该数据模型)的视图或组件可以自动更新,以反映最新的数据状态。
实现原理是数据劫持、依赖收集和分发更新,数据劫持是一种AOP策略。
在vue2中通过Object.defineProperty方法为对象的每个属性设置setter和getter方法,当访问或者修改对象的属性时,进入setter/getter方法,从而实现拦截。getter方法被调用时,可以进行依赖收集,确认属性被哪些组件依赖;setter方法被调用时,则进行分发更新,将属性的更新事件发送到对应依赖的组件。
在vue3中,通过Proxy创建一个对象的代理,从而可以拦截其属性的读取、设置等操作。Proxy相对于Object.defineProperty具有更大和更灵活的数据拦截能力,并且优化了内存使用。

2.使用方式

2.1 ref

当基本类型变量或者对象通过ref函数包裹后,形成响应式数据对象,使用方式如下:

<template><div><p>姓名:{{name}}</p><button @click="changeName">修改名字</button></div>
</template><script setup lang="ts">import { ref } from 'vue';let name =ref('ewen');function changeName() {name.value = "ewens";console.log(name);console.log(name.value);    }
</script>

浏览器Console显示name为RefImpl类型对象,value属性存放实际的数值:

RefImpl {__v_isShallow: false, dep: Map(1), __v_isRef: true, _rawValue: "ewens", _value: "ewens"}
App.vue:8 ewens

说明:在template组件中直接使用name, 而在script中使用name.value进行取值和设值。

2.2 reactive

reactive只能用于对象和数组类型,不能用于基本类型

当对象或数组通过reactive函数包裹后,形成响应式数据对象,使用方式如下:

<template><div><p>姓名:{{person.name}}</p><p>年龄:{{person.age}}</p><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div>
</template><script lang="ts" setup name="Person">
import { reactive } from 'vue'// person 是一个Proxy类型的对象
let person = reactive({ name: 'ewen', age: 18})function changeName() {person.name = 'ewens'
}
function changeAge(){person.age = 999
}
</script>

说明:在template组件和script块中直接使用对象.属性名进行取值和设值。

2.3 toRef与toRefs

当希望从响应式对象中提取某个属性,且希望保持这个属性的响应性,可以通过toRef和toRefs来实现。

import {reactive,toRefs,toRef} from 'vue'let person = reactive({ name: 'ewen', age: 18})
// 使用toRef可以提取响应式对象的某个属性
const name = toRef(person, 'name');
const age = toRef(person, 'age');//使用toRef可以一次性提取响应式对象的多个属性:
const { name, age } = toRefs(person);

在响应式属性提取之后,在template组件或者script脚本中原本需要使用person.name的地方也可以使用name替换,使用person.age的地方也可以使用age替换。

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

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

相关文章

(四)js前端开发中设计模式之简单工厂模式

简单工厂模式,又叫静态工厂方法&#xff0c;由一个工厂对象决定创建出哪一种产品类的实例&#xff0c;主要用来创建同一类对象 let LoginAlert function (msg) {this.content msg } LoginAlert.prototype {show() {const div document.createElement(div)div.style.cssText…

C#开发的全屏图片切换效果应用 - 开源研究系列文章 - 个人小作品

这天无聊&#xff0c;想到上次开发的图片显示软件《 PhotoNet看图软件 》&#xff0c;然后想到开发一个全屏图片切换效果的应用&#xff0c;类似于屏幕保护程序&#xff0c;于是就写了此博文。这个应用比较简单&#xff0c;主要是全屏切换换图片效果的问题。 1、 项目目录&…

设计模式实战:文件系统的设计与实现

问题描述 设计一个文件系统模拟器,用户可以创建文件和文件夹,对文件进行复制、删除等操作,并支持克隆文件和文件夹。系统需要实现组合模式来处理文件和文件夹的层次结构,使用命令模式来封装操作,并利用原型模式实现文件和文件夹的克隆。 设计分析 组合模式 组合模式用…

自动驾驶-机器人-slam-定位面经和面试知识系列04之高频面试题(02)

这个博客系列会分为C STL-面经、常考公式推导和SLAM面经面试题等三个系列进行更新&#xff0c;基本涵盖了自己秋招历程被问过的面试内容&#xff08;除了实习和学校项目相关的具体细节&#xff09;。在知乎和牛客&#xff08;牛客上某些文章上会附上内推码&#xff09;也会同步…

【Vue3】watch 监视 ref 定义的数据

【Vue3】watch 监视 ref 定义的数据 背景简介开发环境开发步骤及源码参数说明 背景 随着年龄的增长&#xff0c;很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来&#xff0c;技术出身的人总是很难放下一些执念&#xff0c;遂将这些知识整理成文&#xff0c;以纪念曾经努…

【C++进阶学习】第八弹——红黑树的原理与实现——探讨树形结构存储的最优解

二叉搜索树&#xff1a;【C进阶学习】第五弹——二叉搜索树——二叉树进阶及set和map的铺垫-CSDN博客 AVL树&#xff1a; ​​​​​​【C进阶学习】第七弹——AVL树——树形结构存储数据的经典模块-CSDN博客 前言&#xff1a; 在前面&#xff0c;我们已经学习了二叉搜索树和…

PCIe 6.0为什么需要14-bit tag

1.TLP中的tag是什么 在PCIe TLP&#xff08;Transaction Layer Packet&#xff09;中&#xff0c;tag是分配给特定Non-Posted Request的编号&#xff0c;协议要求CPL/CPLD中的tag 与对应non-post request TLP中的tag保持一致&#xff0c;因此Requester可以使用tag来识别CPL…

Windows通过命令查看mac : getmac

要查看本机网卡mac&#xff0c;可以通过ipconfig /all 显示&#xff0c;但输出内容过多 可以通过getmac命令查看 示例 C:\Users\Desktop> getmac物理地址 传输名称暂缺 没有硬件 1C-1B-B5-04-E2-7D \Device\Tcpip_{80096E40-D51D-490C-9AF7-…

Java 扫雷游戏

程序分析 使用Java编写的扫雷游戏界面程序&#xff0c;主要内容总结如下&#xff1a; Frame类继承自JFrame&#xff0c;构建了扫雷游戏的界面。 包含文本框text、标签nowBomb和setBomb、按钮start、面板MenuPamel和bombPanel等组件。通过jbInit方法进行初始化设置&#xff0c;…

note24:表分区规范

目录 分区设计原则 分区维护 存储方式及分布键规范 分区设计原则 表分区用于解决数据量特别大的表的问题&#xff0c;比如事实表&#xff0c;解决办法就是将表分成很多小且更容易管理的部分。 表分区参考以下几个原则 &#xff08;1&#xff09;表是否足够大&#xff1f;…

免费【2024】springboot 趵突泉景区的智慧导游小程序

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

MATLAB基础:数组

今天我们继续学习MATLAB中的数组 我们在学习MATLAB时了解到&#xff0c;MATLAB作者秉持着“万物皆可矩阵”的思想企图将数学甚至世间万物使用矩阵表示出来&#xff0c;而矩阵的处理&#xff0c;自然成了这门语言的重中之重。 数组基础 在MATLAB中&#xff0c;数组是一个基本…

十、SpringBoot 统⼀功能处理【拦截器、统一数据返回格式、统一异常处理】

十、SpringBoot 统⼀功能处理 1. 拦截器【HandlerInterceptor、WebMvcConfig】1.1 拦截器快速⼊⻔⾃定义拦截器&#xff1a;实现HandlerInterceptor接⼝&#xff0c;并重写其所有⽅法注册配置拦截器&#xff1a;实现WebMvcConfigurer接⼝&#xff0c;并重写addInterceptors⽅法…

堆(c++)

堆是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵树的数组对象。 堆总是满足下列性质&#xff1a; 堆中某个节点的值总是不大于或不小于其父节点的值&#xff1b;堆总是一棵完全二叉树。 常见的堆有二叉堆、斐波那契堆等。 堆是非线性数据结构&#…

初识C++ · map和set的使用

目录 前言&#xff1a; 1 set 2 map 前言&#xff1a; 在前面阶段&#xff0c;我们已经学习了stl里面的部分容器&#xff0c;比如vector,list,deque等&#xff0c;这些容器都被称为序列式容器&#xff0c;也就是每个值之间式没有关联的&#xff0c;那么今天介绍的容器&…

【笔记本触摸屏】超级好用技巧

选中文字&#xff1a;点一下要复制的文字开头&#xff0c;按住shift键不放&#xff0c;然后点一下你想要的文字结尾滚动&#xff1a;双指向 水平 或者 垂直 方向滑动放大或者缩小: 将两个手指放在触摸板上&#xff0c;让后收缩后者拉伸显示更多命令&#xff08;类似于右键单击&…

四十九、 通过境内数据交易所进行跨境数据贸易应考虑哪些跨境数据合规问题?

根据中国信通院数据显示&#xff0c;2023 年我国数字经济规模可达 56.1 万亿元, 数字经济占 GDP 比重接近于第二产业&#xff0c;占国民经济的比重&#xff0c;达到 40%以上。伴随数字技术兴起以及各项数字经济相关的政策和法律的落地&#xff0c;以跨境数据流动为底层支撑的跨…

智能音箱和普通音箱有什么区别

智能音箱和普通音箱在多个方面存在显著的区别&#xff0c;主要包括设计目的、功能特点、连接方式、音质表现以及交互方式等。 一、设计目的和功能特点 智能音箱&#xff1a;设计目的不仅仅是为了播放音乐&#xff0c;更重要的是集成了语音识别和语音交互功能&#xff0c;成为…

IGV.js | 载入自己下载的gtf文件

1.安装 htslib-1.20 https://www.htslib.org/doc/tabix.html J3$ cd ~/Downloads/ $ wget https://github.com/samtools/htslib/releases/download/1.20/htslib-1.20.tar.bz2 $ tar jxvf htslib-1.20.tar.bz2编译安装&#xff1a; $ cd htslib-1.20/ $ ./configure --prefix/…

ts -> class -> abstract

在TypeScript中&#xff0c;你可以直接使用abstract关键字来定义抽象类和抽象方法。抽象类不能被实例化&#xff0c;而抽象方法必须在派生类中被实现。以下是一个具体的例子&#xff1a; abstract class Animal {name: string;constructor(name: string) {this.name name;}//…