Vue响应式原理一:认识响应式逻辑

  1. 核心思想:当数据发生变化时,依赖该数据的代码能够自动重新执行
  2. Vue中的应用:在data或ref/reactive中定义的数据,当数据变化时template会自动更新
  3. template的本质: 是render()函数, 用变化之后的数据重新执行render()函数, 形成新的VNode, 然后对比新旧的VNode,这就是diff算法的一个事情, 然后决定那个VNode需要做实际的dom更新操作

1. 响应式意味着什么?

  1. 基本示例:
    // 响应式原理:初始化一个num值,当num值发生变化时,依赖num的代码会自动重新执行,称之为响应式的
    let num = 100;console.log(num *  2);
    console.log(num * num);num = 200
    
  2. 本质特征:数据变化 → 依赖代码自动执行

2. 对象响应式

  1. 实际开发中更多处理对象响应式
    // 对象的响应式 
    const obj = { name: 'bar', age: 18
    }// 当obj.name变化时,只重新执行依赖name的代码console.log(obj.name);// 当obj.age变化时,只重新执行依赖age的代码console.log(obj.age);
    
  2. 精准响应:
    • 当obj.name变化时,只重新执行依赖name的代码
    • 当obj.age变化时,只重新执行依赖age的代码
  3. 依赖收集:需要自动识别哪些代码依赖了对象的哪些属性

3. 响应式函数设计

  1. 函数封装:
    • 将依赖代码封装成函数: function foo(){console.log(obj.name)}
    • 当数据变化时执行对应函数
  2. 是否需要响应式:
    • 需要响应式的函数:内部使用了响应式数据
    • 不需要响应式的函数:完全独立于响应式数据
    • Vue类比:类似于template最终转为render函数,数据变化时重新执行render
    •    	// 对象的响应式 const obj = { name: 'bar', age: 18}//当obj.name和obj.age发生改变的时候,重新执行foo()和bar()// 把所有依赖对象obj的代码封装起来,function  foo () { // 响应式函数console.log(obj.name);console.log(obj.age);} function bar () {  // 响应式函数console.log(obj.age + 100);}// 修改obj对象obj.name = 'kobe'   ```
      
    1. 核心机制:
      • 建立数据与函数的依赖关系
      • 数据变化时触发对应函数执行
    2. 实现要点:
      • 自动收集依赖关系
      • 精准触发更新(只触发真正依赖变化的函数)
    3. Vue原理:
      • 通过Proxy/Object.defineProperty监听数据变化
      • 建立"数据属性-依赖函数"的映射关系
      • 变化时通过映射关系找到并执行对应函数

4. 完整代码如下:

	let num = 100;console.log(num *  2);console.log(num * num);num = 200// 响应式原理:初始化一个num值,当num值发生变化时,依赖num的代码会自动重新执行,称之为响应式的// Vue响应式原理的本质:// 通过data()或者ref、reactive定义的数据,也是通过监听数据的变化,当数据发生变化,让template重新执行渲染,就是响应式// template的本质是render()函数, 用变化之后的数据重新执行render()函数, 形成新的VNode, 然后对比新旧的VNode,//  这就是diff算法的一个事情, 然后决定那个VNode需要做实际的dom更新操作// 对象的响应式 const obj = { name: 'bar', age: 18}//当obj.name和obj.age发生改变的时候,重新执行foo()和bar()function  foo () {console.log(obj.name);console.log(obj.age);} function bar () {console.log(obj.age + 100);}// 修改obj对象obj.name = 'kobe'

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

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

相关文章

Redis:分组与设备在 Redis 中缓存存储设计

一、缓存存储结构设计 分组与设备的映射关系(使用 Set 结构): 键格式:采用 group:{groupId}:devices 的格式作为 Redis 中 Set 的键,例如 group:1:devices 就代表了分组 ID 为 1 的分组所关联的设备集合。值内容&#…

Leetcode 3605. Minimum Stability Factor of Array

Leetcode 3605. Minimum Stability Factor of Array 1. 解题思路2. 代码实现 题目链接:3605. Minimum Stability Factor of Array 1. 解题思路 这一题的核心思路是二分法,本质上就是我们给定一个常数kkk,然后考察是否存在一个构造使得能够…

编译安装的Mysql5.7报“Couldn‘t find MySQL server (mysqld_safe)“的原因 笔记250709

编译安装的Mysql5.7报"Couldn’t find MySQL server (mysqld_safe)"的原因 笔记250709 MySQL 的安装路径与配置文件(如 my.cnf 或 mysql.server)中指定的 basedir 不一致。 mysqld_safe 文件实际位置与系统查找路径不匹配(常见于自…

在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)

🧩 在 Ubuntu 下配置 oh-my-posh —— 普通用户 root 各自使用独立主题(共享可执行)✅ 目标说明普通用户 使用 tokyonight_storm 主题 root 用户 使用 1_shell 主题 共用全局路径下的 oh-my-posh 可执行文件 正确加载 Homebrew 到环境变量中…

Spring Boot 项目中的多数据源配置

关键词:Spring Boot、多数据源配置、MySQL、SQL Server、Oracle、动态切换 ✅ 摘要 在实际企业级开发中,一个 Spring Boot 项目可能需要连接多个数据库,比如 MySQL、SQL Server 和 Oracle。不同的业务模块可能依赖不同的数据源,这…

MATLAB/Simulink电机控制仿真代做 同步异步永磁直驱磁阻双馈无刷

以下是针对 MATLAB/Simulink 电机控制仿真 的系统性解决方案,涵盖 同步电机、异步电机、永磁电机、直驱电机、磁阻电机、双馈电机、无刷直流电机(BLDC) 的建模与控制策略实现,支持代做服务的技术细节和代码示例。一、电机建模与仿…

限流算法深度探索:从理论到实践的生产级避坑指南

凌晨3点,监控警报刺耳地尖叫着。我盯着屏幕上垂直下跌的服务可用性曲线,意识到那个被忽视的限流配置项终于引爆了——每秒1000次的支付请求正像洪水般冲垮我们的系统。这次事故让我深刻理解:限流不是可选项,而是分布式系统的生存法…

企业级后台管理系统的困境与飞算 JavaAI 的破局之道

企业级后台管理系统如 CRM(客户关系管理系统)、ERP(企业资源计划系统)已成为支撑企业高效运转的核心骨架。它们如同企业的 “神经中枢”,串联起客户数据、财务信息、供应链流程等关键环节,为决策制定、业务…

快速上手百宝箱搭建知识闯关游戏助手

引言:让学习更有趣,AI 赋能知识闯关新体验 1.在信息爆炸的时代,传统的填鸭式教学方式已难以满足现代用户对高效、个性化和趣味化学习的需求。越来越多的学习者倾向于通过互动性强、参与感十足的方式获取知识。在此背景下,游戏化学…

【YOLOv11-目标检测】目标检测数据格式(官方说明)

原文链接: https://docs.ultralytics.com/datasets/detect/ 写在前面 训练一个鲁棒且准确的目标检测模型需要一个全面的数据集。本文介绍:与Ultralytics YOLO模型兼容的各种数据集格式,并深入解析了它们的结构、使用方法以及如何在不同的格…

yolo8实现目标检测

✅步骤一:安装 PyTorch(M1 专用)# 推荐使用官方 MPS 后端(Apple Metal 加速) pip install torch torchvision torchaudio确认是否使用了 Apple MPS:import torch print(torch.backends.mps.is_available()…

安全管理协议(SMP):配对流程、密钥生成与防中间人攻击——蓝牙面试核心考点精解

一、SMP 核心知识点高频考点解析1.1 SMP 在蓝牙安全体系中的定位考点:SMP 的功能与协议栈位置解析: SMP(Security Manager Protocol,安全管理协议)是蓝牙核心规范中负责设备配对、密钥生成与安全连接的关键协议&#x…

U盘实现——U 盘类特殊命令

文章目录 U 盘类特殊命令U 盘的命令封包命令阶段数据阶段状态阶段get max luninquiry(0x12)read format capacities(0x23)read capacity(0x25)mode sense(0x1a)test unit ready(0x00)read(10) 0x28write(10) 0x2aU 盘类特殊命令 U 盘的命令封包 命令阶段 命令阶段主要由主机通…

深度帖:浏览器的事件循环与JS异步

一、浏览器进程 早期的浏览器是单进程的,所有功能杂糅在一个进程中;现在的浏览器是多进程的,包含浏览器进程、网络进程、渲染进程等等,每个进程负责的工作不同。浏览器进程:负责界面显示(地址栏、书签、历史…

Linux网络:UDP socket创建流程与简单通信

本文介绍 UDP 服务端与客户端 的创建流程&#xff0c;和相关的函数接口 核心流程 创建 socket → socket()填写服务器地址信息 → sockaddr_in 结构体绑定地址和端口 → bind()接收并响应客户端数据 → recvfrom() / sendto()socket() #include<sys/so…

windows内核研究(系统调用 1)

WindowsAPI函数的调用过程什么是WindowsApi&#xff1f;Windows API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是微软为Windows操作系统提供的一套系统级编程接口&#xff0c;允许开发者与操作系统内核、硬件、系统服务等进行交互…

【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)

一、背景场景 在某类生成任务中&#xff0c;例如用户点击“执行任务”按钮后触发一个较耗时的后端操作&#xff08;如生成报告、渲染图像、转码视频等&#xff09;&#xff0c;由于其调用了模型、渲染服务或需要较长处理时间&#xff0c;为了防止接口被频繁恶意调用&#xff0c…

Vim 编辑器常用操作详解(新手快速上手指南)

&#x1f4bb; Vim 编辑器常用操作详解&#xff08;新手快速上手指南&#xff09;作者&#xff1a;Lixin 日期&#xff1a;2025-07-09 学习内容&#xff1a;Vim 编辑器基础 常用快捷键 Xshell/Xftp连接 Linux基本操作 学习目标&#xff1a;掌握 Vim 的三种常用模式切换与基本…

OpenGL 生成深度图与点云

文章目录 一、简介二、实现代码三、实现效果一、简介 这里基于OpenGL实现对一个Mesh对象深度图的获取,思路其实很简单,直接通过glReadPixels函数获取整个OpenGL中的深度缓冲数据即可;那么反过来我们如果有了这个深度图之后,也可以基于每个像素点的深度值,反算出图像中的深…

25春云曦期末考复现

Web 疯狂星期四 <?php$tg1u$_GET[tg1u];if(!preg_match("/0|1|[3-9]|\~|\|\|\#|\\$|\%|\^|\&|\*|\&#xff08;|\&#xff09;|\-|\|\|\{|\[|\]|\}|\:|\|\"|\,|\<|\.|\>|\/|\?|\\\\|localeconv|pos|current|print|var|dump|getallheaders|get|define…