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

vue.js设计与实现(分支切换与cleanup)

如存在三元运算符时,怎么处理

// 原始数据
const data = { text: 'hello world',ok:true}// 副作用函数存在三元运算符
effect(function effectFn(){document.body.innerText = obj.ok ? obj.text : 'not'
})// 理解如此,obj.ok和obj.text都会绑定effectFn函数,所以不管obj.ok 是true还是false ,obj.text值改变都会执行effectFn副作用函数,然而当obj.ok为false时,obj.text值无论怎么改变,都不应该执行effectFn副作用函数。
解决方案:每次执行副作用 函数,可以先把它从所有与之关联的依赖集合中删除。当副作用函数执行完后,会重新建立关系。
// 用一个全局变量储存被注册的副作用函数
let activeEffect// effect 函数用于注册副作用函数
function effect(fn){// 当 effectFn 执行时,将其设置为当前激活的副作用函数const effectFn = ()=>{// 调用cleanup完成清除工作cleanup(effectFn)// 当调用effect注册副作用函数时,将副作用函数fn赋值给activeEffectactiveEffect = effectFn// 执行副作用函数fn()}// activeEffect.deps 用来存储所有与被副作用函数相关的依赖集合effectFn.deps = []// 执行副作用函数effectFn()
}// 清除工作
function cleanup(effectFn){// 遍历`effectFn.deps 数组for(let i=0; i< effectFn.deps.length; i++){// deps 是依赖集合const deps = effectFn.deps[i]// 将 effectFn 从依赖集合中移除deps.delete(effectFn)}// 最后需要重置 effectFn.deeps 数组effectFn.deps.length = 0
}// 储存副作用函数的桶
const bucket = new WeakMap()// 原始数据
const data = { text: 'hello world',ok:true}// 对原始数据的代理
const obj = new Proxy(data,{// 拦截读取操作get(target,key){track(target,key)// 返回属性值return target[key]},// 拦截设置操作set(target,key,newValue){console.log('bucket:',bucket)// 设置属性值target[key] = newValuetrigger(target,key)return true}
})// 在 get 拦截函数内调用 track 函数追踪变化
function track(target,key){// 没有 activeEffect 直接 returnif(!activeEffect) return target[key]// 根据 target 从 “桶” 中 取得 depsMap,它也是一个map 类型 key --》effectslet depsMap = bucket.get(target)// 如果不存在 depsMap 那么新建一个Map 并与 target 关联if(!depsMap){bucket.set(target,(depsMap = new Map()))}// 再根据 key 从 depsMap 中取得 deps,它是一个 set 类型// 里面储存着所有与当前key 相关联的副作用函数,effectslet deps = depsMap.get(key)// 如果 deps 不存在 同样新建一个set 并与 key 关联if(!deps){depsMap.set(key,(deps = new Set()))}// 最后将当前激活的副作用函数添加到“桶”deps.add(activeEffect)// deps 就是一个与当前副作用函数存在关联的依赖集合// 将其添加到activeEffect.deps 数组中activeEffect.deps.push(deps)  // 新增
}
// 在 set 拦截函数内调用 trigger 函数 触发变化
function trigger(target,key){// 根据 target 从桶中取得 depsMap,它是key --》effectsconst depsMap = bucket.get(target)if(!depsMap) return true// 根据 key 取得所有副作用函数 effectsconst effects = depsMap.get(key)// new Set 是为了防止 effectFn 执行时,进行无限的循环const effectsToRun = new Set(effects)effectsToRun.forEach(effectFn => effectFn())// 执行副作用函数// effects && effects.forEach(fn => fn())
}// 执行副作用函数,触发读取
effect(function effectFn(){document.body.innerText = obj.ok ? obj.text : 'not'
})// 1 秒后修改响应式数据
setTimeout(()=>{obj.text = 'hello vue3'
},1000)setTimeout(()=>{obj.ok = false
},3000)

相关文章:

vue.js设计与实现(分支切换与cleanup)

如存在三元运算符时&#xff0c;怎么处理 // 原始数据 const data { text: hello world,ok:true}// 副作用函数存在三元运算符 effect(function effectFn(){document.body.innerText obj.ok ? obj.text : not })// 理解如此&#xff0c;obj.ok和obj.text都会绑定effectFn函…...

206基于matlab的无人机航迹规划(UAV track plannin)

基于matlab的无人机航迹规划(UAV track plannin&#xff09;。输入输出参数包括 横滚、俯仰、航向角&#xff08;单位&#xff1a;度&#xff09;&#xff1b;横滚速率、俯仰速率、航向角速率&#xff08;单位&#xff1a;度/秒&#xff09;&#xff1b;飞机运动速度——X右翼、…...

【Linux 】查看veth-pair对的映射关系

1. 查看当前存在的ns ip netns add netns199 //新建一个命名空间 # ip netns show netns199 (id: 3)可以看到一个名称叫做netns199 的命名空间&#xff0c;其 id为3 2. 创建一个对&#xff0c;并加入其中一个到其他命名空间中 $ sudo ip link add veth100 type veth peer n…...

Cisco Firepower FMCv修改管理Ip方法

FMCv 是部署在VMWARE虚拟平台上的FMC 部署完成后&#xff0c;如何修改管理IP 1 查看当前版本 show version 可以看到是for VMware 2 修改管理IP步骤 2.1 进入expert模式 expert2.2 进入超级用户 sudo su并输入密码 2.3 查看当前网卡Ip 2.4 修改Ip 命令&#xff1a; /…...

PHP开发全新29网课交单平台源码修复全开源版本,支持聚合登陆易支付

这是一套最新版本的PHP开发的网课交单平台源代码&#xff0c;已进行全开源修复&#xff0c;支持聚合登录和易支付功能。 项目 地 址 &#xff1a; runruncode.com/php/19721.html 以下是对该套代码的主要更新和修复&#xff1a; 1. 移除了论文编辑功能。 2. 移除了强国接码…...

【Web前端】CSS基本语法规范和引入方式常见选择器用法常见元素属性

一、基本语法规范 选择器 {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改什么.。(干什么) 声明的属性是键值对.。使用 &#xff1a; 区分键值对&#xff0c; 使用 &#xff1a; 区分键和值。 <!DOCTYPE html> <html lang"en"> <head>&…...

SnapGene 5 for Mac 分子生物学软件

SnapGene 5 for Mac是一款专为Mac操作系统设计的分子生物学软件&#xff0c;以其强大的功能和用户友好的界面&#xff0c;为科研人员提供了高效、便捷的基因克隆和分子实验设计体验。 软件下载&#xff1a;SnapGene 5 for Mac v5.3.1中文激活版 这款软件支持DNA构建和克隆设计&…...

本地部署大模型的几种工具(上-相关使用)

目录 前言 为什么本地部署 目前的工具 vllm 介绍 下载模型 安装vllm 运行 存在问题 chatglm.cpp 介绍 下载 安装 运行 命令行运行 webdemo运行 GPU推理 ollama 介绍 下载 运行 运行不同参数量的模型 存在问题 lmstudio 介绍 下载 使用 下载模型文件…...

Spring Boot集成itext实现html生成PDF功能

1.itext介绍 iText是著名的开放源码的站点sourceforge一个项目,是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档,而且可以将XML、Html文件转化为PDF文件 iText 的特点 以下是 iText 库的显着特点 − Interactive − iText 为你提供类(API)来生成…...

Java 多态、包、final、权限修饰符、静态代码块

多态 Java多态是指一个对象可以具有多种形态。它是面向对象编程的一个重要特性&#xff0c;允许子类对象可以被当作父类对象使用。多态的实现主要依赖于继承、接口和方法重写。 在Java中&#xff0c;多态的实现主要通过以下两种方式&#xff1a; 继承&#xff1a;子类继承父类…...

基于Spring boot + Vue协同过滤算法的电影推荐系统

末尾获取源码作者介绍&#xff1a;大家好&#xff0c;我是墨韵&#xff0c;本人4年开发经验&#xff0c;专注定制项目开发 更多项目&#xff1a;CSDN主页YAML墨韵 学如逆水行舟&#xff0c;不进则退。学习如赶路&#xff0c;不能慢一步。 目录 一、项目简介 二、开发技术与环…...

Chrome之解决:浏览器插件不能使用问题(十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

【正版特惠】IDM 永久授权 优惠低至109元!

尽管小编有修改版IDM&#xff0c;但是由于软件太好用了&#xff0c;很多同学干脆就直接购买了正版&#xff0c;现在正版也不贵&#xff0c;并且授权码绑定自己的邮箱&#xff0c;直接官方下载激活&#xff0c;无需其他的绿化修改之类的操作&#xff0c;不喜欢那么麻烦的&#x…...

SpringBoot与Prometheus监控整合

参考&#xff1a; springboot实战之prometheus监控整合-腾讯云开发者社区-腾讯云 https://www.cnblogs.com/skevin/p/15874139.html https://www.jianshu.com/p/e5dc2b45c7a4...

Linux 系统 docker搭建LNMP环境

1、安装nginx docker pull nginx (默认安装的是最新版本) 2、运行nginx docker run --name nginx -p 80:80 -d nginx:latest 备注&#xff1a;--name nginx 表示容器名为 nginx -d 表示后台运行 -p 80:80 表示把本地80端口绑定到Nginx服务端的 80端口 nginx:lates…...

拉普拉斯变换

定义&#xff1a; 拉普拉斯变换是一种在信号处理、控制理论和其他领域中广泛使用的数学工具&#xff0c;用于将一个函数从时域转换到复频域。拉普拉斯变换将一个函数 f(t) 变换为一个复变量函数 F(s)&#xff0c;其中 s 是复数变量。下面是拉普拉斯变换的推导过程&#xff1a;…...

Mashup-Math_Topic_One

Tutorial and Introspection A Rudolf and 121 注意到第 1 1 1 位只能被第 2 2 2 位影响&#xff0c;以此类推位置&#xff0c;对于 a i a_i ai​ , 如果 < 0 < 0 <0 &#xff0c;不合法 ; 否则&#xff0c; a i − a i , a i 1 − 2 ∗ a i , a i 2 − a …...

基于JavaWEB SSM SpringBoot婚纱影楼摄影预约网站设计和实现

基于JavaWEB SSM SpringBoot婚纱影楼摄影预约网站设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言…...

逐步学习Go-Select多路复用

概述 这里又有多路复用&#xff0c;但是Go中的这个多路复用不同于网络中的多路复用。在Go里&#xff0c;select用于同时等待多个通信操作&#xff08;即多个channel的发送或接收操作&#xff09;。Go中的channel可以参考我的文章&#xff1a;逐步学习Go-并发通道chan(channel)…...

王道:OJ15

课时15作业 Description 读取10个元素 87 7 60 80 59 34 86 99 21 3&#xff0c;然后建立二叉查找树&#xff0c;排序后输出3 7 21 34 59 60 80 86 87 99&#xff0c;针对有序后的元素&#xff0c;存入一个长度为10的数组中&#xff0c;通过折半查找找到21的下标&#xff08…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于 过滤器链&#xff08;Filter Chain&#xff09;&#xff0c;核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤&#xff1a; 用户提交登录请求拦…...

raid存储技术

1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划&#xff0c;涵盖存储系统的布局、数据存储策略等&#xff0c;它明确数据如何存储、管理与访问&#xff0c;为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...