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

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

news 2025/10/31 16:00:04

什么是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之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/10/30 6:12:30

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/9/23 20:53:38

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/10/30 6:37:10

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/10/19 10:09:01

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/10/21 11:17:25

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/8/24 18:47:31

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/10/14 13:57:17

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/10/30 7:47:14

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05