Vue响应式数据的实现原理（手写副作用函数的存储和执行过程）
1.命令式和声明式框架
命令式框架关注过程
声明式框架关注结果（底层对命令式的DOM获取和修改进行了封装）
2.vue2 Object.defineProperty()双向绑定的实现
<body><div id="app"><input type="text" /><h1></h1><button>按钮</button> </div>
</body>
<script>// vue2实现双绑const input = document.getElementsByTagName('input')[0]const h1 = document.getElementsByTagName('h1')[0]const btn = document.getElementsByTagName('button')[0]let data = { text: '' }// input框输入数据，h1数据和text一致；实现点击按钮时，h1 标签数据和input框数据同时更改Object.defineProperty(data, 'text', {get() {return data['text'];},set(value) {// 获取到值后将h1后的内容设置为texth1.innerText = value;input.value = value;return true;}});input.oninput = function (e) {data.text = e.target.value;}btn.onclick = function () {data.text = "你好"}
</script>3.同样页面Vu3实现 new Proxy()
// vue3实现双绑const input = document.getElementsByTagName('input')[0]const h1 = document.getElementsByTagName('h1')[0]const btn = document.getElementsByTagName('button')[0]let data = { text: '' }let obj = new Proxy(data, {get(target, property) {return target[property]},set(target, property, value) {h1.innerText = value;input.value = value;return true;}})input.oninput = function (e) {obj.text = e.target.value;}btn.onclick = function () {obj.text = "你好"}4.响应式数据的基本实现
响应式数据的关键是拦截对象属性的设置和读取操作
const data = { text: '' }
function effect () {document.body.innerText = data.text
}5. vue2与vue3响应式数据实现区别
- vue2的实现：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty() 把这些 property 全部转为 getter/setter。
- vue3的实现：当我们从一个组件的 data 函数中返回一个普通的 JavaScript 对象时，Vue 会将该对象包裹在一个带有 get 和 set 处理程序的Proxy 中
6.vue3 proxy的简单实现响应式数据拦截
// 初始数据
const data = { text: '' }
// 存储副作用函数的桶
const bucket = new Set()
// 对数据进行代理
const obj = new Proxy(data, {get(target, key) {bucket.add(effect)return target[key]},set(target, key, newVal) {target[key] = newValbucket.forEach(fn => fn())return true}
})function effect () {document.body.innerText = obj.text
}effect()setTimeout(() => {obj.text = '你好'
}, 1000)7.简单实现中出现的问题
思考一下 这一段代码的问题。
- 1. 副作用函数的名称被写死
- 2. 没有建立副作用函数和目标字段之前明确的关系
副作用函数的名称被写死——解决：
名称写死问题：真实情况下副作用函数不可能只有一个，那如果有多个函数时，每个函数执行都会调用一个副作用函数。比如，设置obj.a = 2,同样会调用set方法中的bucket.forEach(fn => fn())方法。
通用一个副作用作用函数，将执行DOM修改的函数以闭包形式（回调函数）传入副作用函数，这样每次返回的都不是同一个函数
let activeEffectfunction effect(fn) {activeEffect = fnfn()
}effect(() => {document.body.innerText = obj.text
})const obj = new Proxy(data, {get(target, key) {if (activeEffect) {bucket.add(activeEffect)}return target[key]},set(target, key, newVal) {target[key] = newValbucket.forEach(fn => fn())return true}
})没有建立副作用函数和目标字段之前明确的关系——解决：
以上代码对每个属性都绑定了同一个副作用函数，实际上真实需要的时，修改text时，调用他自己的函数，修改a时又调用a对应的函数
解决：
- 使用Map键值数据结构（分两层）进行存储副作用函数，将每个数据对象对应一个map的键；
- 一个数据对象下不同属性又存储到一个Map数据下，这个map的值则存储的副作用函数（Set形式存）
- 使用时通过获取对象的map（数据对象）下的对应属性key（每个对象的key）的值的set数据（针对每个属性操作的副作用函数）并进行遍历执行即可
const obj = new Proxy(data, {get(target, key) {console.log(activeEffect, 'activeEffect')// 没有副作用函数，容错处理 直接returnif (!activeEffect) return target[key]// 判断桶中是否已经存在key与target的关联关系let depsMap = bucket.get(target)// 创建一个新的Map结构与 target 关联if (!depsMap) {bucket.set(target, (depsMap = new Map()))}// 判断当前Map数据中是否存在key与effect的关联关系let deps = depsMap.get(key)// 不存在的话 则新建一个Set 与 key关联if (!deps) {depsMap.set(key, (deps = new Set()))}// 最后将当前激活的副作用函数添加到bucket中deps.add(activeEffect)return target[key]},set (target, key, newVal) {target[key] = newVal// 获取bucket下对应的数据const depsMap = bucket.get(target)if (!depsMap) return// 根据key 获取副作用的执行函数const effects = depsMap.get(key)// 执行副作用函数effects && effects.forEach(fn => fn())}
})effect(() => {document.body.innerText = obj.text
})
effect(() => {document.title = obj.a
})8.完全实现——我的测试
const data = { text: '这是obj.title', a:'vue响应式数据的实现原理' }// 存储副作用函数的桶const bucket = new Map()// 存储副作用函数的变量let activeEffect;// 对数据进行代理const obj = new Proxy(data, {get(target, key) {// 设置副作用函数到map数据的桶中// 判断不存在activeEffect直接返回if (!activeEffect) return target[key];// 存在activeEffect时将副作用函数设置到桶中let targetMap = bucket.get(target); //target对象存在才能判断key是否存在(targetMap既是bucket的值targetMap = new Map()又是keyMap的键的定义)if (!targetMap) {bucket.set(target, (targetMap = new Map()));}let keyMap = targetMap.get(key); // keyMap既是targetMap的值又是if (!keyMap) {targetMap.set(key, (keyMap = new Set()))}keyMap.add(activeEffect); //副作用函数最终是存在Set结构里面的return target[key]},set(target, key, newVal) {target[key] = newVal;//获取桶里面的对象Map的key的map集合的值，即所有的副作用函数进行循环执行let targetMap = bucket.get(target);if (!targetMap) return;let effects = targetMap.get(key);effects.forEach(fn => fn())return true}})function effect(fn) {// 将函数赋值给activeEffect，数据劫持到activeEffect有值时，会将其设置到bucket存储副作用的桶中，当拦截到数据更改时再获取对应函数并执行activeEffect = fn;fn();}// 副作用函数执行一次effect(() => {document.body.innerText = obj.text})effect(() => {document.title = obj.a})相关文章：
Vue响应式数据的实现原理（手写副作用函数的存储和执行过程）
1.命令式和声明式框架 命令式框架关注过程 声明式框架关注结果（底层对命令式的DOM获取和修改进行了封装） 2.vue2 Object.defineProperty()双向绑定的实现 <body><div id"app"><input type"text" /><h1>…...
内核进程的调度与进程切换
进程被创建到了链表中，如何再进行进一步的调用和调用？ 进程调度 void schedule(void)； 进程调度 switch_to(next); 进程切换函数 void schedule(void) {int i,next,c;struct task_struct ** p;/* check alarm, wake up any i…...
docker-rabbitmq 安装依赖
出现的问题如下: channel error; protocol method: #method(reply-code404, reply-textNOT_FOUND - no channel error； protocol method: #method＜channel.close＞(reply-code404, reply-textNOT_FOUND - no 查看rabbitmq 客户端是否存在如…...
（1）(1.9) HC-SR04声纳
文章目录 前言 1 连接到自动驾驶仪 2 参数说明 前言 HC-SR04 声纳是一种价格低廉但量程很短（最远只有 2m）的测距仪，主要设计用于室内，但也成功地在室外的 Copter 上使用过。极短的测距范围使其用途有限。 ！Warning…...
06 MIT线性代数-列空间和零空间 Column space Nullspace
1. Vector space Vector space requirements vw and c v are in the space, all combs c v d w are in the space 但是“子空间”和“子集”的概念有区别，所有元素都在原空间之内就可称之为子集，但是要满足对线性运算封闭的子集才能成为子空间 中 2 …...
【每日一题Day360】LC1465切割后面积最大的蛋糕 | 贪心
切割后面积最大的蛋糕【LC1465】 矩形蛋糕的高度为 h 且宽度为 w，给你两个整数数组 horizontalCuts 和 verticalCuts，其中： horizontalCuts[i] 是从矩形蛋糕顶部到第 i 个水平切口的距离verticalCuts[j] 是从矩形蛋糕的左侧到第 j 个竖直切口…...
中国地名信息库
地名是社会基本公共信息，是历史文化的重要载体。 2014年至2018年，国家启动实施并完成了第二次全国地名普查工作，全国共计采集地名1320多万条，修测标绘地名图2.4万多幅，新设更新地名标志68万多块，普遍建立了…...
网络时代下的声音之路：如何在中央新闻媒体发布网评稿
在当今数字时代，信息传播已经变得更加便捷和广泛。各大中央新闻媒体平台为民众提供了一个发布观点、表达意见的平台。在这个背景下，撰写并发布网评稿成为了一种重要的社会参与方式。根据媒介易软文发稿平台的总结，下面是探讨如何在各大中央新…...
Selenium中WebDriver最新Chrome驱动安装教程
😏作者简介：博主是一位测试管理者，同时也是一名对外企业兼职讲师。 📡主页地址：【Austin_zhai】 🙆目的与景愿：旨在于能帮助更多的测试行业人员提升软硬技能，分享行业相关最新信息。…...
云原生Docker数据管理
目录 Docker的数据管理 数据卷 数据卷容器 容器互联 容器中管理数据主要有两种方式： 数据卷（Data Volumes）数据卷容器（Data Volume Dontainers） Docker的数据管理 数据卷 数据卷是一个供容器使用的特殊目录&a…...
endnote设置
问题1：参考文献的tab太长 首先要在endnote里面这样设置，file->output->edit "XXX" 保存之后，在word更新目录。 在word里面设置悬挂缩进 结果： Endnote参考编号与参考文献距离太远怎么调整 endnote 文献对齐方式…...
计算机网络整理-简称缩写【期末复习|考研复习】
文章目录 前言一、物理层1.1 FDM频分复用 Frequency-division multiplexing1.2 TDM时分复用 Time-division multiplexing1.3 WDM波分复用 Wavelength Division Multiplexing1.4 Hub 集线器1.5 FSK频移键控 Frequency-shift keying 二、数据链路层2.1 GBN回退N步协议 Go Back N …...
Flink Hive Catalog操作案例
在此对Flink读写Hive表操作进行逐步记录，需要指出的是，其中操作Hive分区表和非分区表的DDL有所不同，以下分别记录。 基础环境 Hive-3.1.3 Flink-1.17.1 基本操作与准备 1、上传依赖jar包到flink/lib目录下 cp flink-sql-connector-hive-…...
NSSCTF做题第9页（3）
[GKCTF 2020]CheckIN 代码审计 这段代码定义了一个名为ClassName的类，并在脚本的最后创建了一个ClassName类的实例。 在ClassName类的构造函数中，首先通过调用$this->x()方法获取了请求参数$_REQUEST中的值，并将其赋值给$this->code属性…...
从瀑布模式到水母模式：ChatGPT如何赋能软件研发全流程【文末送书五本】
从瀑布模式到水母模式：ChatGPT如何赋能软件研发全流程 前言内容简介购买链接作者简介专家推荐读者对象参与方式往期赠书回 🏘️🏘️个人简介：以山河作礼。 🎖️🎖️:Python领域新星创作者，CSDN实…...
设置使用LibreOffice作为默认程序打开word、excel等文档
以win7为例。打开控制面板，点击程序： 点击“设置默认程序”： 左侧选中LibreOffice，然后在右下方点击“选择此程序的默认值”： 然后根据自己的需要勾选就行了：...
创新领航 | 竹云参编《基于区块链的数据资产评估实施指南》正式发布！
10月25日，由深圳数宝数据服务股份有限公司和深圳职业技术大学提出，中国科学院深圳先进技术研究院、中国电子技术标准化研究院、中国（天津）自由贸易试验区政策与产业创新发展局、网络空间治理与数字经济法治（长三角&…...
【Docker】Linux网桥连接多个命名空间
veth实现了点对点的虚拟连接，可以通过veth连接两个namespace，如果我们需要将3个或者多个namespace接入同一个二层网络时，就不能只使用veth了。 在物理网络中，如果需要连接多个主机，我们会使用bridge（网桥&…...
ES6新特性：let关键字详解
文章目录 1 声明提升2 作用域3 重复声明 在JavaScript中，let 和 var 都是声明变量的关键字，但在用法和作用域方面有一些区别。 let 是ES6引入的新的声明变量的关键字，它与 var 相比，更加严格，语法更加规范，…...
鸿运主动安全监控云平台任意文件下载漏洞复现 [附POC]
文章目录 鸿运主动安全监控云平台任意文件下载漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 鸿运主动安全监控云平台任意文件下载漏洞复现 [附POC] 0x01 前言 免责声明：请勿利用文章内的相关技术…...
使用pycharm远程连接到Linux服务器进行开发
预计达到的效果 本地的 PyCharm 能达到和远程服务器之间的文件同步；本地的 PyCharm 能够使用远程服务器的开发环境； 环境配置 PyCharm：PyCharm 2021.3 (Professional Edition)Linux服务器：Ubuntu20.04 步骤 1.进入配置项 配…...
JavaScript 中 BOM 基础知识有哪些？
浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。 window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来…...
【PointNet—论文笔记分享】
第一个直接基于原始点云数据进行分割、分类的模型，之前都是基于多视图或者体素的方式。 论文: PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation代码: TensorFlow版 Pytorch版 基本模型架构： 分别对每个点进行特征提取…...
Mysql8.1.0 windows 绿色版安装
Mysql8.1.0 windows 绿色版安装 目录 Mysql8.1.0 windows 绿色版安装1、下载mysql8.1.0_windows（mysql-8.1.0-winx64.zip）2、解压到安装目录3、添加环境变量4、新建mysql配置文件5、安装mysql服务6、初始化数据文件7、启动mysql服务8、进入mysql管理模式…...
何为自制力？如何提高自制力？
什么是自制力？ 自制力也即是自我控制能力，是一个人如何去抵御外部诱惑力，从而坚持自己的原本计划，坚定去完成目标。除了外部诱惑力，也可以指的是面对困境，不良情绪等外部因素。 自制力是自我管理能力的体…...
第1篇 目标检测概述 —（3）目标检测评价指标
前言：Hello大家好，我是小哥谈。目标检测评价指标是用来衡量目标检测算法性能的指标，主要包括几个指标：精确率（Precision）、召回率（Recall）、交并比（IoU）、平均…...
剑指JUC原理-3.线程常用方法及状态
常用方法 start和run 调用run public static void main(String[] args) {Thread t1 new Thread("t1") {Overridepublic void run() {log.debug(Thread.currentThread().getName());FileReader.read(Constants.MP4_FULL_PATH);}};t1.run();log.debug("do othe…...
MYSQL8-sql语句使用集合。MYCAT-sql语法使用集合
MYSQL 1.MYSQL事务与锁问题处理 SELECT * FROM information_schema.INNODB_LOCKs; -- 查询锁select * from information_schema.INNODB_LOCK_WAITS; -- 查询等待锁SELECT * FROM information_schema.INNODB_TRX; -- 查询事务select * from information_schema.processlist wh…...
UNIX 域协议(本地通信协议)
概述 Unix 域协议并不是一个实际的协议族，而是在单个主机上执行客户/服务通信的一种方式。是进程间通信（IPC）的一种方式。 它提供了两类套接字：字节流套接字 SOCK_STREAM（有点像 TCP）和数据报套接字 SOCK_…...
分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测（SE注意力机制）
分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测（SE注意力机制） 目录 分类预测 | MATLAB实现SSA-CNN-BiGRU-Attention数据分类预测（SE注意力机制）分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLA…...