数据响应式原理

news2024/12/23 1:46:30

面试题:请阐述vue2响应式原理

vue官方阐述:https://cn.vuejs.org/v2/guide/reactivity.html

响应式数据的最终目标,是当对象本身或对象属性发生变化时,将会运行一些函数,最常见的就是render函数。

image-20230919211443155

在具体实现上,vue用到了几个核心部件

  1. Observer
  2. Dep
  3. Watcher
  4. Scheduler

Observer

Observer要实现的目标非常简单,就是把一个普通的对象转换为响应式的对象

为了实现这一点,Observer把对象的每个属性通过Object.defineProperty转换为带有gettersetter的属性,这样一来,当访问或设置属性时,vue就有机会做一些别的事情。

image-20210226153448807

Observer是vue内部的构造器,我们可以通过Vue提供的静态方法Vue.observable( object )间接的使用该功能。

在组件生命周期中,这件事发生在beforeCreate之后,created之前。

具体实现上,它会递归遍历对象的所有属性,以完成深度的属性转换。

由于遍历时只能遍历到对象的当前属性,因此无法监测到将来动态增加或删除的属性,因此vue提供了$set$delete两个实例方法,让开发者通过这两个实例方法对已有响应式对象添加或删除属性。

对于数组,vue会更改它的隐式原型,之所以这样做,是因为vue需要监听那些可能改变数组内容的方法

image-20210226154624015

总之,Observer的目标,就是要让一个对象,它属性的读取、赋值,内部数组的变化都要能够被vue感知到。

image-20230920101552673

Dep

这里有两个问题没解决,就是读取属性时要做什么事,而属性变化时要做什么事,这个问题需要依靠Dep来解决。

Dep的含义是Dependency,表示依赖的意思。

Vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例,每个Dep实例都有能力做以下两件事:

  • 记录依赖:是谁在用我
  • 派发更新:我变了,我要通知那些用到我的人

当读取响应式对象的某个属性时,它会进行依赖收集:有人用到了我

当改变某个属性时,它会派发更新:那些用我的人听好了,我变了

image-20210226155852964

Watcher

这里又出现一个问题,就是Dep如何知道是谁在用我?

要解决这个问题,需要依靠另一个东西,就是Watcher。

当某个函数执行的过程中,用到了响应式数据,响应式数据是无法知道是哪个函数在用自己的

因此,vue通过一种巧妙的办法来解决这个问题

我们不要直接执行函数,而是把函数交给一个叫做watcher的东西去执行,watcher是一个对象,每个这样的函数执行时都应该创建一个watcher,通过watcher去执行

watcher会设置一个全局变量,让全局变量记录当前负责执行的watcher等于自己,然后再去执行函数,在函数的执行过程中,如果发生了依赖记录dep.depend(),那么Dep就会把这个全局变量记录下来,表示:有一个watcher用到了我这个属性

当Dep进行派发更新时,它会通知之前记录的所有watcher:我变了

image-20210226161404327

每一个vue组件实例,都至少对应一个watcher,该watcher中记录了该组件的render函数。

watcher首先会把render函数运行一次以收集依赖,于是那些在render中用到的响应式数据就会记录这个watcher。

当数据变化时,dep就会通知该watcher,而watcher将重新运行render函数,从而让界面重新渲染同时重新记录当前的依赖。

Scheduler

现在还剩下最后一个问题,就是Dep通知watcher之后,如果watcher执行重运行对应的函数,就有可能导致函数频繁运行,从而导致效率低下

试想,如果一个交给watcher的函数,它里面用到了属性a、b、c、d,那么a、b、c、d属性都会记录依赖,于是下面的代码将触发4次更新:

state.a = "new data";
state.b = "new data";
state.c = "new data";
state.d = "new data";

这样显然是不合适的,因此,watcher收到派发更新的通知后,实际上不是立即执行对应函数,而是把自己交给一个叫调度器的东西

调度器维护一个执行队列,该队列同一个watcher仅会存在一次,队列中的watcher不是立即执行,它会通过一个叫做nextTick的工具方法,把这些需要执行的watcher放入到事件循环的微队列中,nextTick的具体做法是通过Promise完成的

nextTick 通过 this.$nextTick 暴露给开发者

nextTick 的具体处理方式见:https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97

也就是说,当响应式数据变化时,render函数的执行是异步的,并且在微队列中

总体流程

image-20210226163936839

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

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

相关文章

基于SpringBoot的飘香水果购物网站

目录 前言 一、技术栈 二、系统功能介绍 水果信息管理 减积分管理 会员购买订单管理 首页 水果 购买水果订单管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网购物的飞速发展,一般企业都去创建属于自己的电商平台以及购物…

crypto:大帝的密码武器

题目 下载zip之后可得到提示文本 结合题目名和文本提示可知&#xff0c;为凯撒密码 利用脚本&#xff0c;爆破位移的位数 str1 FRPHEVGL str2 str1.lower() num 1 for i in range(26):print("{:<2d}".format(num),end )for j in str2:if(ord(j)num > or…

【QT开发(6)】0926-QT 中加入 fastDDS 通信库的程序使用说明

在智能驾驶中&#xff0c;DDS有可能被广泛使用&#xff0c;因此推出这篇说明教程。 1、基于【QT开发&#xff08;5&#xff09;】教程的项目文档进行开发 2、安装DDS 查看《【eProsima Fast DDS&#xff08;1&#xff09;】安装eProsima Fast DDS》 至少安装: foonathan_m…

idea Springboot 高校科研资源共享系统VS开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 高校科研资源共享系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c; 系统具有完整的源代码和数据…

spring源码解析——IOC-开启 bean 的加载

概述 前面我们已经分析了spring对于xml配置文件的解析&#xff0c;将分析的信息组装成 BeanDefinition&#xff0c;并将其保存注册到相应的 BeanDefinitionRegistry 中。至此&#xff0c;Spring IOC 的初始化工作完成。接下来我们将对bean的加载进行探索。 BeanFactory 当我…

WinPcap4.1.3安装失败解决方法,A newer version of winpcap...

WinPcap4.1.3安装失败解决方法&#xff0c;A newer version of winpcap… 如图所示&#xff0c;提示本地安装有更高版本的WinPcap时&#xff0c;按如下操作即可解决。 找到相应文件&#xff0c;扩展名修改成如下&#xff1a; C:\Windows\SysWOW64 的wpcap.dll改成 wpcap.dll.…

微服务治理:构建强大、健壮的分布式系统

文章目录 什么是微服务治理&#xff1f;微服务治理的挑战1. 服务注册和发现2. 负载均衡3. 故障处理4. 安全性5. 监控和日志记录 构建强大的微服务治理1. 服务网格2. 服务注册和发现3. 负载均衡4. 故障处理5. 安全性6. 监控和日志记录 微服务治理的未来 &#x1f389;欢迎来到架…

ACGAN

CGAN通过在生成器和判别器中均使用标签信息进行训练&#xff0c;不仅能产生特定标签的数据&#xff0c;还能够提高生成数据的质量&#xff1b;SGAN&#xff08;Semi-Supervised GAN)通过使判别器/分类器重建标签信息来提高生成数据的质量。既然这两种思路都可以提高生成数据的质…

Oracle - 多区间按权重取值逻辑

啰嗦: 其实很早就遇到过类似问题&#xff0c;也设想过&#xff0c;不过一致没实际业务需求&#xff0c;也就耽搁了&#xff1b;最近有业务提到了&#xff0c;和同事讨论&#xff0c;各有想法&#xff0c;所以先把逻辑整理出来&#xff0c;希望有更好更优的解决方案&#xff1b;…

传统遗产与技术相遇,古彝文的数字化与保护

古彝文是中国彝族的传统文字&#xff0c;具有悠久的历史和文化价值。然而&#xff0c;由于古彝文的形状复杂且没有标准化的字符集&#xff0c;对其进行文字识别一直是一项具有挑战性的任务。本文介绍了古彝文合合信息的文字识别技术&#xff0c;旨在提高古彝文的自动识别准确性…

linux 和 windows的換行符不兼容問題

linux 和 windows的換行符&#xff1a; 1.vim 模式下&#xff0c;執行命令&#xff1a; :set ffunix idea中設置code style

从零手搓一个【消息队列】项目设计、需求分析、模块划分、目录结构

文章目录 一、需求分析1, 项目简介2, BrokerServer 核心概念3, BrokerServer 提供的核心 API4, 交换机类型5, 持久化存储6, 网络通信7, TCP 连接的复用8, 需求分析小结 二、模块划分三、目录结构 提示&#xff1a;是正在努力进步的小菜鸟一只&#xff0c;如有大佬发现文章欠佳之…

Linux账户组管理及权限练习

1.使用id命令查看root账户信息 [rootserver ~]# id root 用户id0(root) 组id0(root) 组0(root) 2.使用id命令查看自己的普通账户信息 [rootserver ~]# id kxy 用户id1000(kxy) 组id1000(kxy) 组1000(kxy),10(wheel) 3.新建账户test1&#xff0c;并查看账户信息&#xff1a; [ro…

安装python扩展库

博主&#xff1a;命运之光 专栏&#xff1a;Python程序设计 Python扩展库安装 Python提供了丰富的标准库&#xff08;不需要安装&#xff09; &#xff0c;还支持大量的第三方扩展库&#xff0c;它们数量众多、功能强大、涉及面广、使用方便&#xff0c;得到各行业领域工程师的…

千问的大模型KnowHow

卷友们好&#xff0c;我是rumor。 通义千问昨天放出了14b参数的模型&#xff0c;还有一份比较详尽的技术报告&#xff0c;包含作者们训练8个模型的宝贵经验。 同时他们开源的13B比起开源的SOTA也有不少提升&#xff1a; 今天我们就来一起白嫖&#xff0c;更多细节请移步原文&am…

Mybatis 日志(Apache Commons Logging)

之前我们介绍了使用JDK Log打印Mybatis运行时的日志&#xff1b;本篇我们介绍使用Apache Commons Logging打印Mybatis运行时的日志。 如何您对Mybatis中使用JDK Log不太了解&#xff0c;可以参考&#xff1a; Mybatis 日志(JDK Log)https://blog.csdn.net/m1729339749/articl…

上海市小机灵数学比赛回顾和五年级1-15届真题和答案学习资料

从2017年到现在&#xff0c;之前卷得非常厉害的上海市一系列与升学挂钩的竞赛如“小机灵杯、走美杯、希望杯、中环杯”等比赛都成为了竞赛历史的一部分。 尽管教育部门明确规定&#xff0c;学校不得将相关比赛的成绩作为学生评价和选拔的要素&#xff0c;但是许多家长仍按对于…

【STM32基础 CubeMX】从0带你点灯

文章目录 前言一、GPIO的概念二、CubeMX配置GPIO2.1 基础配置2.2 GPIO配置 三、点灯代码讲解3.1 cubemx生成的代码3.2 1个库函数 四、LED闪烁总结 前言 一、GPIO的概念 STM32是一系列微控制器芯片的品牌&#xff0c;它们用于控制各种电子设备。其中的GPIO是通用输入/输出端口的…

Spring IOC(控制反转)与DI(依赖注入)

定义 IOC(Inversion of Control)&#xff0c;即控制反转&#xff1a;对象的创建控制权不再由程序来执行&#xff0c;而是交由给Spring容器处理。简单的说程序不需要进行new操作&#xff0c;对象直接由Spring容器自动创建。 DI(Dependency Injection)&#xff0c;即依赖注入&am…

窗口类介绍

目录 Qwidget QDialog QMessageBox QFileDialog QFontDialog QColorDialog QInputDialog QProgressDialog QMainWindow 菜单栏 工具栏 状态栏 停靠窗口 窗口布局 Qwidget 常用的一些函数包括&#xff1a; 设置窗口的大小&#xff0c;尺寸&#xff0c;得到对应的…