2024/10/04
posted in
读书笔记
2024/10/04
posted in
读书笔记
Vue.js设计与实现|200 - 书名: Vue.js设计与实现
- 作者: 霍春阳 著
- 简介: 本书基于Vue.js 3,从规范出发,以源码为基础,并结合大量直观的配图,循序渐进地讲解Vue.js中各个功能模块的实现,细致剖析框架设计原理。全书共18章,分为六篇,主要内容包括:框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等。通过阅读本书,对Vue.js 2/3具有上手经验的开发人员能够进一步理解Vue.js框架的实现细节,没有Vue.js使用经验但对框架设计感兴趣的前端开发人员,能够快速掌握Vue.js的设计原理。
- 出版时间 2022-01-01 00:00:00
- ISBN: 9787115583864
- 分类: 计算机-软件学习
- 出版社: 人民邮电出版社
📌 声明式代码的性能不优于命令式代码的性能。 ^3300028078-6-3568-3595
📌 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗 ^3300028078-6-4294-4337
📌 命令式更加关注过程,而声明式更加关注结果。 ^3300028078-6-13314-13335
📌 命令式在理论上可以做到极致优化,但是用户要承受巨大的心智负担;而声明式能够有效减轻用户的心智负担,但是性能上有一定的牺牲, ^3300028078-6-13335-13396
📌 JavaScript 对象来描述真实的 DOM 结构 ^3300028078-8-3992-4018
📌 渲染器的作用就是把虚拟 DOM 渲染为真实 DOM ^3300028078-8-4102-4127
📌 虚拟 DOM ^3300028078-8-7864-7870
📌 其实就是用来描述真实 DOM 的普通 JavaScript 对象,渲染器会把这个对象渲染为真实 DOM 元素 ^3300028078-8-7871-7925
📌 组件就是一组 DOM 元素的封装 ^3300028078-8-8165-8188
📌 组件的实现依赖于渲染器,模板的编译依赖于编译器 ^3300028078-8-13650-13725
📌 WeakMap 经常用于存储那些只有当 key 所引用的对象存在时(没有被回收)才有价值的信息 ^3300028078-10-11840-11887
📌 至此,我们的响应系统已经可以避免副作用函数产生遗留了。但如果你尝试运行代码,会发现目前的实现会导致无限循环执行,问题出在 trigger 函数中:01 function trigger(target, key) { 02 const depsMap = bucket.get(target) 03 if (!depsMap) return 04 const effects = depsMap.get(key) 05 effects && effects.forEach(fn => fn()) // 问题出在这句代码 06 }在 trigger 函数内部,我们遍历 effects 集合,它是一个 Set 集合,里面存储着副作用函数。当副作用函数执行时,会调用 cleanup 进行清除,实际上就是从 effects 集合中将当前执行的副作用函数剔除,但是副作用函数的执行会导致其重新被收集到集合中,而此时对于 effects 集合的遍历仍在进行。这个行为可以用如下简短的代码来表达:01 const set = new Set([1]) 02 03 set.forEach(item => { 04 set.delete(1) 05 set.add(1) 06 console.log('遍历中') 07 })在上面这段代码中,我们创建了一个集合 set,它里面有一个元素数字 1,接着我们调用 forEach 遍历该集合。 ^3300028078-10-18769
📌 在调用 forEach 遍历 Set 集合时,如果一个值已经被访问过了,但该值被删除并重新添加到集合,如果此时 forEach 遍历没有结束,那么该值会重新被访问。因此,上面的代码会无限执行。解决办法很简单,我们可以构造另外一个 Set 集合并遍历它 ^3300028078-10-19644-19769
📌 可调度性是响应系统非常重要的特性 ^3300028078-10-27303-27319
📌 所谓可调度,指的是当 trigger 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机、次数以及方式。 ^3300028078-10-27336-27393
^30631064-7LN9vCCJN
⏱ 2023-10-07 22:22:29