- 博客(11)
- 收藏
- 关注
RSS订阅原创 过期的副作用
竞态问题比较常见于多线程或者多进程编程中，所以前端领域很少讨论这个问题。这段代码中，我们用watch观测obj的变化，每次变化都会发一次请求，然后把finalData的值重置为请求的结果。这一个逻辑乍一看似乎是一个正常的watch逻辑。但是仔细想一想，fetch伴随的网络请求可能会伴随着网络阻塞等种种因素，那么进而可能产生竞态问题。假设我前后做了A，B两次修改，按照watch的回调函数那么会发送A，B两次请求。倘若没有额外处理，那么从代码看就会是谁的请求晚回来，finalData就会是哪个。
2023-12-19 20:38:16
438
1
原创 实现watch
所谓watch，本质上就是观察一个响应式数据，当响应式数据发生变化是执行指定的回调函数，其实就是。在上边的代码中，我们希望，当执行完foo的自增的时候，控制台也会打印“数据变了！”，这就是我们希望watch的执行效果。
2023-12-09 08:50:13
850
原创 计算属性的实现
通常情况下，effect会立即执行我们传入的副作用函数。然而，有些场景下，我们希望他不会立即执行，而是在需要的时候才执行，例如计算属性。effect(// 指定了 lazy 选项，这个函数不会立即执行() => {},// optionslazy: truelazy选项和scheduler一样，在options对象的参数中的一个属性。fn()// 只有非 lazy 的时候，才执行if (!options.lazy) { // 新增// 执行副作用函数effectFn()
2023-12-09 04:33:52
1005
原创 使副作用函数可调度执行
可调度性是响应式系统的重要特性。所谓可调度性，指的是trigger动作触发副作用函数重新执行的时候，有能力决定副作用函数执行的时机、次数以及方式。以下面代码为例：输出结果如下：现在假设需求有变，输出顺序需要调整为:实现思路在不修改编码顺序的情况下实现需求，这时候就需要可调度执行。那么我们可以设计一个选项参数options，允许用户指定调度器：effect函数中，可以传递第二个参数options，他是一个对象，其中允许指定一个 scheduler 调度函数，同时在effect函数内部我们把opti
2023-12-06 04:00:02
374
1
原创 分支切换与cleanup
其中effectFn中的三元表达式，会根据obj.ok的值的变化而切换到不同的代码分支。即当obj.ok的值发生变化时，会执行不同代码分支，这就是所谓的分支切换。
2023-12-05 01:57:25
861
原创 设计一个完善的响应式系统
我们知道，在匿名副作用函数内并没有读取obj.notExist 属性的值，所以理论上，字段 obj.notExist 并没有与副作用建立响应联系，因此，定时器内语句的执行不应该触发匿名副作用函数重新执行。每个红色正方形内，都可以以key-value的形式建立联系，那么在第一层，使用weakMap作为键值对，第二层使用Map建立属性值和依赖函数之间的关系，那么Map的value就是存储这个依赖函数的桶。上次的副作用函数采用的是硬编码，我们希望哪怕副作用函数哪怕是个匿名函数也可以被正确收集到桶里。
2023-12-03 17:43:46
779
1
原创 vue.js设计与实现2 建立简单的响应式系统
在vue.js中，假设我有一个文字节点，以来于一个字符串的变量，每当我修改这一个变量本身，那么这个文字节点在稍后也会改变。其实这一个机制就是依赖于vue的响应式系统，这个被依赖的变量称为响应式数据。而更新文字节点的函数其实就是其副作用函数。那么对于响应式数据的话，我们希望每一次obj的text属性修改时，effect函数就会触发。
2023-11-28 20:52:06
427
原创 vue.js设计与实现笔记1 框架设计基础
这里需要纠正一个常见的误区：虚拟Dom的性能比原生Dom更好。但其实本质上虚拟Dom只是实际Dom的一个映射形式，虚拟Dom的性能就不可能比原生操作Dom更高了。其实通常说的虚拟Dom性能更好。对于声明式代码，更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗，那么虚拟Dom的存在，是服务于降低性能差异而存在的。
2023-11-26 19:30:23
970
1
原创 vue+mermaid.js 做一个动态mermaid编辑器
目录前言一、所使用的第三方组件及快速上手二、mermaid引入和初始化三、组件编写编写代码使用的输入框编写mermaid渲染函数最后的最后前言之前由于跟的项目的需要得做一个动态的mermaid的编辑器，但是当时翻遍了百度谷歌都没有解决我问题的答案，而且mermaid.js的官方API也比较含糊且在实际开发中存在一些错误。一、所使用的第三方组件及快速上手需要使用element-ui和mermaid.jselement-ui基本大家都很熟悉了，参.
2022-04-15 11:44:23
4449
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人