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 前言 免责声明：请勿利用文章内的相关技术…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
C#学习第29天：表达式树（Expression Trees）
目录 什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
uniapp 开发ios， xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...