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

二、什么是Vue中的响应式？Vue的响应式原理

news 2026/5/19 12:27:29

什么是Vue中的响应式

Vue中的响应式，简而言之就是当数据发生变化时，页面跟随变化。使用过Vue的v-model都有比较深刻的感受，我们在代码中修改双向绑定的数据后，页面上的数据也会自动更新，页面跟随变化
我们看个例子：

<div id="app"><div>价格:￥{{ price }}</div><div>支付金额:￥{{ price * quantity }}</div><button @click="changePrice">改变价格</button>
</div>

var app = new Vue({el: '#app',data() {return {price: 5.0,quantity: 2};},methods: {changePrice() {this.price = 10;}}
})

在这个例子中，我们调用changePrice方法，修改price的值，页面上价格 、支付金额，都会自动改变。这就是Vue中的响应式

Vue中如何实现响应式

当数据发生变化后，会重新对页面渲染，这就是Vue响应式，那么这一切是怎么做到的呢？

想完成这个过程，我们需要完成这几个步骤：

（1）侦测数据的变化（数据劫持 / 数据代理）
（2）收集视图依赖了哪些数据（依赖收集）
（3）数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）

1.侦测数据的变化（数据劫持 / 数据代理）

在Javascript中，如何侦测一个对象的变化？我们有两种办法可以侦测到变化：使用Object.defineProperty和ES6的Proxy，这就是进行数据劫持或数据代理。

在Vue2中，使用的是Object.defineProperty的方式侦测数据的变化,
类似如下代码，当属性被读取或设置时，相应的getter或setter将被调用。修改obj.value的值时，会监听到obj.value，执行set方法，执行console.log(obj.value)时，又会调用get方法。

    <script>const obj = {};// 定义属性'value'，包含getter和setterObject.defineProperty(obj, "value", {get() {console.log("get value");return this._value;},set(newValue) {console.log("set value");this._value = newValue;},// 可以通过这个属性来控制属性的可枚举性configurable: true,// 可以通过这个属性来控制属性的可写性enumerable: true,});obj.value = 5;console.log(obj.value); // get value ,set value, 5</script>

但在Vue3中，使用的是ES6的Proxy的方式侦测数据的变化。
Proxy对象允许你拦截并自定义对象的基本操作，包括属性访问和修改。这使得你可以创建一个代理对象，当访问或修改目标对象的属性时，会触发预定义的行为。如下代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>基础 ref（）</title></head><body><button id="updateButton">点击+1</button><div id="message"></div><script>const createRef = (initialValue) => {return new Proxy({ value: initialValue },{get(target, key) {return target[key];},set(target, key, value) {target[key] = value;if (key === "value") {updateDisplay(); // 当.value被设置时，更新DOM}return true;},});};// 初始化refconst numberRef = createRef(0);// 更新DOM的函数const updateDisplay = () => {document.getElementById("message").innerText = numberRef.value;};// 绑定按钮点击事件document.getElementById("updateButton").addEventListener("click", () => {numberRef.value++; // 点击按钮时计数器加一});// 初始显示updateDisplay();</script></body>
</html>

2.收集视图依赖了哪些数据（依赖收集）

当模板渲染或计算属性计算时，Vue 会追踪哪些数据被访问了。这通过 Dep 类和 Watcher 类完成。Watcher 会在读取数据时将自身添加到数据的依赖列表中。

订阅者 Dep
收集依赖需要为依赖找一个存储依赖的地方，为此我们创建了Dep,它用来收集依赖、删除依赖和向依赖发送消息等。
于是我们先来实现一个订阅者 Dep 类，用于解耦属性的依赖收集和派发更新操作，说得具体点，它的主要作用是用来存放 Watcher 观察者对象。我们可以把Watcher理解成一个中介的角色，数据发生变化时通知它，然后它再通知其他地方。
Dep的简单实现

class Dep {constructor () {/* 用来存放Watcher对象的数组 */this.subs = [];}/* 在subs中添加一个Watcher对象 */addSub (sub) {this.subs.push(sub);}/* 通知所有Watcher对象更新视图 */notify () {this.subs.forEach((sub) => {sub.update();})}
}

以上代码主要做两件事情：

用 addSub 方法可以在目前的 Dep 对象中增加一个 Watcher 的订阅操作；
用 notify 方法通知目前 Dep 对象的 subs 中的所有 Watcher 对象触发更新操作

观察者 Watcher
Vue 中定义一个 Watcher 类来表示观察订阅依赖。
watcher的简单实现：

class Watcher {constructor(obj, key, cb) {// 将 Dep.target 指向自己// 然后触发属性的 getter 添加监听// 最后将 Dep.target 置空Dep.target = thisthis.cb = cbthis.obj = objthis.key = keythis.value = obj[key]Dep.target = null}update() {// 获得新值this.value = this.obj[this.key]// 我们定义一个 cb 函数，这个函数用来模拟视图更新，调用它即代表更新视图this.cb(this.value)}
}

3.数据变化时，自动“通知”需要更新的视图部分，并进行更新（发布订阅模式）

当数据被修改时，对应的 Watcher 会收到通知，并触发视图更新

相关文章：

二、什么是Vue中的响应式？Vue的响应式原理

什么是Vue中的响应式 Vue中的响应式&#xff0c;简而言之就是当数据发生变化时&#xff0c;页面跟随变化。使用过Vue的v-model都有比较深刻的感受&#xff0c;我们在代码中修改双向绑定的数据后&#xff0c;页面上的数据也会自动更新&#xff0c;页面跟随变化 我们看个例子&am…...

编程日记 2024/8/19 17:56:07

快9月了才开始强化，跟张宇还是武忠祥？

快9月了才开始强化&#xff0c;跟张宇还是武忠祥&#xff01; 说真的&#xff0c;我也替这位同学着急&#xff0c;但是考研数学越是进度慢&#xff0c;就越不能急&#xff01;急着赶进度&#xff0c;容易出事&#xff01;遇到这个问题的朋友肯定不止一位&#xff0c;那我就帮大…...

编程日记 2024/8/19 17:54:05

SSM好易学学习平台---附源码92142

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设好易学学习平台。本文…...

编程日记 2024/8/19 17:53:04

对于mp4 ios和mac safari不能播放问题处理

直接对原mp4文件进行重新转码就可以了 ffmpeg -i origin.mp4 -vcodec h264 -profile:v high -level 4.1 orgin_hl.mp4 原因源文件不符合苹果基本规则 苹果官网文档...

编程日记 2024/8/19 17:52:02

开发同城交友找搭子系统app前景分析

开发同城交友系统APP的背景 社交需求多样化&#xff1a; 随着城市化的加速和人们生活节奏的加快&#xff0c;现代人的社交圈子往往较为狭窄&#xff0c;难以结识新朋友。传统的线下交友方式受限于时间、地点等因素&#xff0c;难以满足现代人对于交友的多样化需求。互联网和智…...

编程日记 2024/8/19 17:51:01

faiss向量数据库测试《三体》全集，这家国产AI加速卡，把性能提了7倍！

在人工智能和机器学习技术的飞速发展中&#xff0c;向量数据库在处理高维数据方面扮演着日益重要的角色。近年来&#xff0c;随着大型模型的流行&#xff0c;向量数据库技术也得到了进一步的发展和完善。 向量数据库为大型模型提供了一个高效的数据管理和检索平台&#xff0c;…...

编程日记 2024/8/19 17:49:59

负载均衡---相关概念介绍（一）

负载均衡&#xff08;Load Balance&#xff09;是集群技术的一种重要应用&#xff0c;旨在将负载&#xff08;工作任务&#xff09;进行平衡、分摊到多个操作单元上进行运行&#xff0c;从而提高系统的并发处理能力、增加吞吐量、加强网络处理能力&#xff0c;并提供故障转移以…...

编程日记 2024/8/19 17:47:57

计算机基础知识复习8.14

子线程抛异常主线程能否catch 在不做任何处理的情况下&#xff0c;主线程不能catch 解决方式&#xff1a; 子线程使用try catch来捕获异常 为线程设置未捕获异常处理器UncaughtExceptionHandler 通过future的get方法捕获异常 JVM相关参数 显示指定堆内存-Xms和-Xmx指定最…...

编程日记 2024/8/19 17:45:54

【io深层理解】

io深层理解 1.内核态2.用户态3. select IO多路复用执行原理4. select io多路复用限制和不足 1.内核态 一个进程会涉及多文件的修改&#xff0c;比如说。那么在内核态就会维护一个表&#xff0c;这个表叫文件描述符bitmap&#xff0c;这个表会传递给内核态&#xff0c;当然肯定传…...

编程日记 2024/8/19 17:43:51

【懒人工具】指定新文件，替换全盘旧文件

没辙&#xff0c;就是懒 最近在调整.clang-format&#xff0c;这个format文件要跟着项目走&#xff0c;只换本地默认的还不够。调整好以后一个项目一个项目的换&#xff0c;有时候会漏掉&#xff0c;索性全盘一次性换完。 基于自己操作的流程&#xff0c;写了个脚本&#xff0…...

编程日记 2024/8/19 17:42:48

React+Vis.js（02）：设置节点样式

文章目录 1、修改vis.js的节点和关系颜色2、修改vis.js节点的字体颜色2.1 统一设置节点字体颜色2.2 自定义某个节点的字体颜色3、设置vis.js节点的边框颜色和宽度3.1 设置单个节点3.2 统一设置1、修改vis.js的节点和关系颜色 在vis.js中，可以通过color属性，来给node节点添加…...

编程日记 2024/8/19 17:41:47

3G网络要彻底没了

2月21日，三大运营商公布了最新的用户数据，移动联通电信三家5G套餐用户数合计超过了7.5亿。信通院早前公布的数据显示，一月份，国内市场5G手机出货量2632.4万部，占同期手机出货量的79.7%。 这两项数据，说明我们已经进入到了5G时代，5G的普及速度远超很多人的想象。就在5G逐…...

编程日记 2024/8/19 17:40:45

如何配置ESXI主机的IP地址管理

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…...

编程日记 2024/8/19 17:38:43

软件测试学习笔记丨测试用例设计方法

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/31921 一&#xff0c;黑盒测试方法论 1&#xff0c;等价类 1.1 定义 等价类划分是一种重要的、常用的黑盒测试方法不需要考虑程序的内部结构&#xff0c;只需要考虑程序的输入规格即可它将…...

编程日记 2024/8/19 17:37:41

MinIO基本用法

在现代云计算和大数据领域&#xff0c;对象存储因其可扩展性、可靠性和低成本成为数据存储的重要选择。MinIO作为一个高性能、分布式的对象存储系统&#xff0c;凭借其开源、简单易用以及与Amazon S3兼容的特性&#xff0c;在业界得到了广泛的应用。本文将带您了解MinIO的基本用…...

编程日记 2024/8/19 17:36:40

MySQL windows版本安装

一、下载MySQL安装包 访问MySQL官网&#xff1a;首先&#xff0c;访问MySQL的官方网站&#xff08;MySQL&#xff09;&#xff0c;或者更具体地&#xff0c;访问MySQL的下载页面&#xff08;MySQL :: Download MySQL Community Server&#xff09;。 选择适合的版本&#xff1…...

编程日记 2024/8/19 17:35:38

Python实现人脸轮廓提取

目录 一、背景知识1.1 人脸检测和轮廓提取的意义1.2 人脸检测方法概述1.3 轮廓提取方法概述二、常用的人脸轮廓提取方法2.1 基于边缘检测的轮廓提取2.2 基于形态学操作的轮廓提取2.3 基于特征点检测的轮廓提取三、Python实现人脸轮廓提取3.1 安装依赖库3.2 使用Dlib进行人脸检测…...

编程日记 2024/8/19 17:31:33

Prettier+Vscode setting提高前端开发效率

文章目录 前言Prettier第一步&#xff1a;下载依赖&#xff08;团队合作&#xff09;或下载插件&#xff08;独立开发&#xff09;第二步&#xff1a;添加.prettierrc.json文件**以下是我使用的****配置规则** 第三步&#xff1a;添加.prettierignore文件**以下是我常用的****配…...

编程日记 2024/8/19 17:28:29

YOLOv10实时端到端目标检测

文章目录 前言一、非极值大抑制(NMS)二、NMS算法的具体原理和步骤三、YOLOV10创新点四、YOLOv10使用教程五、官方github地址 前言 距离上次写YOLOv5已经过去了两年&#xff0c;正好最近用YOLOv10重构了项目&#xff0c;总结下YOLOv10。 YOLOv10真正实时端到端目标检测&#xff…...

编程日记 2024/8/19 17:25:24

Java中的Annotation注解

常用注解 override&#xff1a;重写方法deprecated&#xff1a;弃用SuppressWarnings&#xff1a;抑制编译器警告 元注解&#xff08;注解的注解&#xff09; Target&#xff1a;描述注解所能修饰的类型Retention&#xff1a;描述注解的生命周期&#xff08;SOURCE源代码、C…...

编程日记 2024/8/19 17:21:19

Linux字符设备驱动框架：基于pinctrl/gpio子系统的GPIO控制实践

1. 项目概述&#xff1a;从“点灯”到“驱动框架”的认知跃迁 在嵌入式Linux开发领域&#xff0c;点亮一个LED灯&#xff0c;常常是工程师们的“Hello World”。新手阶段&#xff0c;我们可能直接在驱动代码里写死寄存器地址&#xff0c;用 ioremap 和 writel 函数进行操控…...

编程新知 2026/5/19 12:10:07

手把手拆解FD-SOI工艺流程：从SOI衬底到应变硅外延的保姆级图解

从SOI衬底到应变硅外延&#xff1a;FD-SOI工艺全流程拆解指南 想象一下建造一座微型城市&#xff0c;每一栋建筑只有头发丝直径的万分之一大小。这就是FD-SOI工艺工程师的日常工作——在硅片上用原子级精度"建造"晶体管。与传统的体硅工艺不同&#xff0c;FD-SOI&…...

编程新知 2026/5/19 11:17:59

告别手动计算！用Python+ArcPy脚本批量搞定MODIS ET数据从8天到月均值的完整流程

从8天到月均值&#xff1a;PythonArcPy全自动处理MODIS ET数据的工程实践 当面对跨越多年、覆盖大区域的MOD16A2数据集时&#xff0c;传统的手工操作不仅效率低下&#xff0c;还容易引入人为错误。本文将展示如何用PythonArcPy构建一套完整的自动化流程&#xff0c;实现从原始8…...

编程新知 2026/5/19 9:31:50

SpringBoot3 + ShardingJDBC读写分离进阶：如何用AOP实现强制走主库（@Master注解实战）

SpringBoot3 ShardingJDBC读写分离进阶&#xff1a;如何用AOP实现强制走主库&#xff08;Master注解实战&#xff09; 在分布式数据库架构中&#xff0c;读写分离是提升系统吞吐量的常见方案。但当你的SpringBoot3应用已经配置好ShardingJDBC的基础读写分离功能后&#xff0c;…...

编程新知 2026/5/19 9:19:05

基于MCP协议与多模态大模型的图像结构化信息提取实战指南

1. 项目概述&#xff1a;从图像中“榨取”结构化信息的利器最近在折腾一些自动化流程&#xff0c;经常遇到一个头疼的问题&#xff1a;我需要从一堆截图、产品图或者设计稿里&#xff0c;把里面的文字、表格、甚至是图表数据给“抠”出来&#xff0c;变成机器能直接处理的文本或…...

编程新知 2026/5/19 8:47:10

生成式AI项目实战：从PyTorch到Hugging Face的完整开发指南

1. 项目概述&#xff1a;从GitHub仓库名到生成式AI项目的实战蓝图看到HeyNina101/generative_ai_project这个仓库名&#xff0c;很多开发者会心一笑。这太典型了——一个以个人ID命名的GitHub仓库&#xff0c;里面很可能是一个关于生成式人工智能&#xff08;Generative AI&…...

编程新知 2026/5/19 8:39:03

AI Coding 言出法随，未来什么还会值钱？

本文整理自播客《AI炼金术》任鑫&#xff08;云九资本&#xff09;与徐文浩的深度对话&#xff0c;探讨 AI Coding 如何重塑个人开发方式、组织形态&#xff0c;以及在生产力极大释放的时代&#xff0c;究竟什么能力还会持续增值。—本文资料通过Ai好记智能解析获取。一、AI Co…...

编程新知 2026/5/19 8:28:55

Office Custom UI Editor：终极指南：如何彻底改造你的Office工作界面？

Office Custom UI Editor&#xff1a;终极指南&#xff1a;如何彻底改造你的Office工作界面&#xff1f; 【免费下载链接】office-custom-ui-editor Standalone tool to edit custom UI part of Office open document file format 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/5/19 7:55:12

用于免训练手术视频分割的记忆增强SAM2（MA-SAM2）

学影像 手术视频 基础模型增强 ──────────────────────────────────────── 1. 标题 英文：Memory-Augmented SAM2 for Training-Free Surgical Video Segmentation 中文：用于免训练手术视频分割的记忆增强SAM2（MA-SAM2） 2. 作者…...

编程新知 2026/5/19 7:18:04

吕欣团队《大数据平台架构》第四章读书笔记：HDFS——把一块硬盘“拆”成一整个数据中心

最近在系统地补 Hadoop 的基础设施部分&#xff0c;第四章讲的是 HDFS&#xff08;Hadoop Distributed File System&#xff09;。这一章看下来最大的感受是&#xff1a;HDFS 本质上不是一个“文件系统增强版”&#xff0c;而是一种完全围绕“大规模数据处理”重新设计的存储哲…...

编程新知 2026/5/19 6:55:59