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

《Vue进阶教程》第十一课：响应式系统介绍

news 2026/2/11 4:42:52

1 什么是响应式

当数据改变时, 引用数据的函数会自动重新执行

2 手动完成响应过程

首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应

比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者

同样, 所谓数据响应式的两个参与者

  • 触发者: 数据
  • 响应者: 引用数据的函数

当数据改变时, 引用数据的函数响应数据的改变, 重新执行

我们先手动完成响应过程

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><script>// 定义一个全局对象: `触发者`const obj = { name: 'hello' }// effect函数引用了obj.name, 这个函数就是 `响应者`function effect() {// 这里可以通过app拿到DOM对象app.innerHTML = obj.name}effect()// 当obj.name改变时, 手动执行effect函数, 完成响应过程setTimeout(() => {obj.name = 'brojie'effect()}, 1000)</script></body>
</html>

为了方便, 我们把引用了数据的函数 叫做 副作用函数

3 副作用函数

如果一个函数引用了外部的资源, 这个函数会受到外部资源改变的影响

我们就说这个函数存在副作用. 因此, 也把该函数叫做副作用函数

这里, 大家不要被这个陌生的名字吓唬住 所谓副作用函数就是引用了数据的函数或者说数据关联的函数

4 自定义设置过程

如果我们能感知数据改变, 拦截到赋值操作. 自定义设置过程 在赋值的同时调用一下数据关联的副作用函数, 就可以实现自动重新执行 理论上可行, 开始动手实践

1) Proxy代理对象

这里我们需要先补充一下Proxy相关的知识. 如果已经知道的小伙伴可以略过 new Proxy: 传入一个源对象, 返回一个新对象(代理对象) 当访问代理对象的属性时, 可以自定义访问过程 当设置代理对象的属性时, 可以自定义设置过程

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>// 定义一个源对象(目标对象)const obj = { name: 'xiaopang' }// 创建一个代理对象const proxy = new Proxy(obj, {get(target, key) {// 当访问proxy代理对象的属性时, 会执行get函数// 将get函数的返回值作为表达式的值console.log(target, key)return target[key] // obj.name obj[name]},set(target, key, value) {// 当设置proxy代理对象的属性时, 会执行set函数console.log('自定义set操作', value)target[key] = valuereturn true},})// console.log(proxy.name)// console.log(proxy.age)proxy.name = 'xxp'console.log(obj)</script></body>
</html>

 这样就确定了思路

  1. 先创建代理对象
  2. 再操作代理对象(给代理对象赋值)

2) 最基本的reactive函数

定义一个函数reactive, 传入一个普通对象, 返回代理对象

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>function isObject(value) {return typeof value === 'object' && value !== null}/*** 创建响应式数据*  @param [object]: 普通对象*  @return [Proxy]: 代理对象*/function reactive(data) {if (!isObject(data)) returnreturn new Proxy(data, {get(target, key) {return target[key]},set(target, key, value) {target[key] = valuereturn true},})}const state = { name: 'xiaopang' }const p = reactive(state)p.name = 'xxp'console.log(p.name)</script></body>
</html>

5 最基本的响应式

既然可以自定义set操作, 只需要在自定义set操作时, 重新执行属性关联的副作用函数

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app">hello</div><script>/*** 定义响应式*  @param [object] : 普通对象*  @return [Proxy] : 代理对象*/function reactive(data) {// 如果传入的data不是一个普通对象, 不处理if (typeof data !== 'object' || data == null) returnreturn new Proxy(data, {get(target, key) {console.log(`自定义访问${key}`)return target[key]},set(target, key, value) {console.log(`自定义设置${key}=${value}`)target[key] = value // 先更新值effect() // 再调用effect, 调用effect时会重新获取新的数据return true},})}const pState = reactive({ name: 'hello' })function effect() {app.innerHTML = pState.name}setTimeout(() => {pState.name = 'brojie'}, 1000)</script></body>
</html>

看到这里, 恭喜你, 已经掌握了最核心的原理🤝

💡 小结

  1. 响应式是一个过程, 存在触发者和响应者
  2. 数据的改变, 触发关联的副作用函数响应(重新执行)
  3. 通过Proxy代理源数据
  4. 在Proxy的自定义set操作中, 重新执行副作用函数

相关文章：

《Vue进阶教程》第十一课：响应式系统介绍

1 什么是响应式 当数据改变时, 引用数据的函数会自动重新执行 2 手动完成响应过程 首先, 明确一个概念: 响应式是一个过程, 这个过程存在两个参与者: 一方触发, 另一方响应 比如说, 我们家小胖有时候不乖, 我会打他, 他会哭. 这里我就是触发者, 小胖就是响应者 同样, 所谓…...

编程日记 2024/12/17 6:13:35

rpc设计的再次思考20251215(以xdb为核心构建游戏框架)

1.服务提供者注册的方式 // 表明这是一个服务提供者&#xff0c;ServerType 和 ServerId从application.properties中读取 // 而且只有当当前服务是Game时&#xff0c;才生效。 或者 条件注解??? RpcProvider(typeServerType.Game) public class GameProvider{MsgReceiver…...

编程日记 2024/12/17 6:12:33

pydub AudioSegment增加音频文件音量并保存- python 实现

DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” -------------------------------------------------------------…...

编程日记 2024/12/17 6:11:33

IT 新突破！远程控制电脑技术造就工作与学习新方向！

远程控制电脑技术的历史可追溯到计算机网络的早期时代。最初&#xff0c;通过电话线和调制解调器的组合&#xff0c;实现了远程访问&#xff0c;这是远程控制电脑技术的雏形。随着互联网技术的飞速发展&#xff0c;远程控制电脑技术也日趋完善&#xff0c;并在多个领域得到了广…...

编程日记 2024/12/17 6:10:32

LabVIEW起落架震台检测

在现代飞机制造与维护过程中&#xff0c;起落架的性能测试是保障飞机安全的重要环节。通过LabVIEW开发的起落架小落震台检测系统&#xff0c;通过模拟飞机着陆过程&#xff0c;准确捕捉起落架在着陆时承受的各种动力学特性和应力响应&#xff0c;有效提升起落架设计的精度与可靠…...

编程日记 2024/12/17 6:08:29

Day24 C++ 接口（抽象类）

C 接口&#xff08;抽象类&#xff09; 接口描述了类的行为和功能&#xff0c;而不需要完成类的特定实现。 C 接口是使用抽象类来实现的&#xff0c;抽象类与数据抽象互不混淆&#xff0c;数据抽象是一个把实现细节与相关的数据分离开的概念。 如果类中至少有一个函数被声明…...

编程日记 2024/12/17 6:07:28

UE5 关于画质、机能与开发成本的思考

1、并不省时间 UE5等工具优点是可以通过一些工具与资源快速获得较好的画面&#xff0c;节约一些时间&#xff0c; 但缺点也很多&#xff0c; 一个是各种精度的素材之间的协调问题&#xff0c;参差不齐&#xff0c;统一升级到高精度会产生较大的成本&#xff0c; 一个是资源…...

编程日记 2024/12/17 6:06:27

IOS学习路线图

‌iOS是由苹果公司开发的移动操作系统。 苹果公司最早于2007年1月9日的Macworld大会上公布这个系统&#xff0c;最初是设计给iPhone使用的&#xff0c;后来陆续套用到iPod touch、iPad上。iOS与苹果的macOS操作系统一样&#xff0c;属于类Unix的商业操作系统。原本这个系统名为…...

编程日记 2024/12/17 6:05:26

HICE-day6

二层交换 交换基础 所谓的二层交换机指的是针对数据的二层头部&#xff08;以太网帧头&#xff09;中的MAC地址进行寻址并转发数据的交换设备。二层交换机不具备路由功能&#xff0c;它工作在OSI七层模型的第二层&#xff0c;因此被称为二层交换机。 上图中&#xff0c;PC1、…...

编程日记 2024/12/17 6:03:22

第100+33步 ChatGPT学习：时间序列EMD-ARIMA-LSTM模型

基于Python 3.9版本演示 一、写在前面 上一节&#xff0c;我们学了经验模态分解&#xff08;Empirical Mode Decomposition&#xff0c;EMD&#xff09;。 如同结尾所说&#xff0c;“那么&#xff0c;做这些分解有什么作用呢&#xff1f;有大佬基于这些分解出来的序列分别作…...

编程日记 2024/12/17 6:02:16

（C语言）双向链表

目录 链表的分类 双向链表的实现 1&#xff09;定义链表 2&#xff09;初始化双向链表 3&#xff09;申请节点 4&#xff09;尾插 5&#xff09;头插 6&#xff09;打印链表 7&#xff09;尾删 8&#xff09;头插 9&#xff09;查找 10&#xff09;指定位置删除 11…...

编程日记 2024/12/17 6:01:14

青少年编程与数学 02-004 Go语言Web编程 04课题、接收和处理请求

青少年编程与数学 02-004 Go语言Web编程 04课题、接收和处理请求 课题摘要:一、构建WEB服务器1. 安装Go语言2. 创建项目结构3. 编写代码4. 运行WEB服务器5. 访问WEB服务器 二、接收请求1. 定义处理函数&#xff08;Handler&#xff09;2. 将处理函数与路由关联3. 启动服务器4. …...

编程日记 2024/12/17 5:58:10

Unity全局光照详解

之前就学过但是太久没用又忘了&#xff0c;因此用最简洁易懂的语言做个记录。 全局光照分为两个系统&#xff0c;分别是实时光照和混合光照。&#xff08;点击window/Rendering/Lighing打开此面板&#xff09; 其中全局光照对于我来说都是新技术了&#xff0c;上一次学…...

编程日记 2024/12/17 5:57:09

计算机网络知识点全梳理（三.TCP知识点总结）

目录 TCP基本概念 为什么需要TCP 什么是TCP 什么是TCP链接 如何唯一确定一个 TCP 连接 TCP三次握手 握手流程 为什么是三次握手&#xff0c;而不是两次、四次 为什么客户端和服务端的初始序列号 ISN 不同 既然 IP 层会分片&#xff0c;为什么 TCP 层还需要 MSS TCP四…...

编程日记 2024/12/17 5:55:07

ELK Stack 安装、配置以及集成到 Java 微服务中的使用

ELK Stack 是由 Elasticsearch、Logstash 和 Kibana 组成的日志管理解决方案。以下是详细的安装、配置步骤以及如何将其集成到 Java 微服务中。 1. 安装 ELK Stack 1.1 安装 Elasticsearch 在 Ubuntu 上安装 Elasticsearch&#xff1a; bash wget -qO - https://artifacts…...

编程日记 2024/12/17 5:54:06

list_

1.对象创建 // // Created by 徐昌真 on 2024/12/12. // #include <iostream> #include <list>using namespace std;void Print(list<int> &my_list) {for ( list<int>::iterator iter my_list.begin(); iter ! my_list.end(); iter ){cout <…...

编程日记 2024/12/17 5:52:05

电机驱动，为什么不需要变速器？

在现代汽车和工业应用中&#xff0c;电机驱动的技术愈发成熟&#xff0c;其核心优势之一是能够省去传统机械变速器的需求。 一、电机驱动的基本原理 电机驱动又被称为电动机驱动&#xff0c;其基本原理是将电能转化为机械能。通过控制电机的输入电压和电流&#xff0c;电机能…...

编程日记 2024/12/17 5:51:04

how to write 述职pptx as a tech manager

As a technical manager, crafting an effective 述职 (performance review) PPT requires you to highlight your leadership, team accomplishments, technical contributions, challenges faced, and future plans. Heres a structured approach to design your PPT: 1. Cov…...

编程日记 2024/12/17 5:49:02

关于QMessageBox的一些使用总结和避坑指南

参考学习 Qt中QMessageBox的用法—看这一篇就够了 Qt&#xff1a;使用QMessageBox弹出标准对话框 QMessageBox模态与非模态及QT中的exec() 如何调整QMessageBox的大小 QSS 自定义QMessageBox python QMessageBox设置标签和按钮居中、中文按钮 使用建议 经过查看多方的资料&…...

编程日记 2024/12/17 5:48:01

C语言预处理详解

1.预定义符号 C语言设置了一些预定义符号&#xff0c;可以直接使用&#xff0c;预定义符号也是在预处理期间处理的 __FILE__ //进⾏编译的源⽂件 __LINE__ //⽂件当前的⾏号 __DATE__ //⽂件被编译的⽇期 __TIME__ //⽂件被编译的时间 __STDC__ //如果编译器遵循ANSI C&#…...

编程日记 2024/12/17 5:47:00

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2026/2/8 20:41:48

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16