• 

• 书名： 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
• 分类： 计算机-软件学习
• 出版社： 人民邮电出版社

高亮划线

第1章 权衡的艺术

• 📌 声明式代码的性能不优于命令式代码的性能。 ^3300028078-6-3568-3595

  • ⏱ 2023-09-19 08:17:49

• 📌 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗 ^3300028078-6-4294-4337

  • ⏱ 2023-10-07 10:16:55

• 📌 命令式更加关注过程，而声明式更加关注结果。 ^3300028078-6-13314-13335

  • ⏱ 2023-10-07 10:19:54

• 📌 命令式在理论上可以做到极致优化，但是用户要承受巨大的心智负担；而声明式能够有效减轻用户的心智负担，但是性能上有一定的牺牲， ^3300028078-6-13335-13396

  • ⏱ 2023-10-07 10:20:22

第2章 框架设计的核心要素

• 📌 想要实现 Tree-Shaking，必须满足一个条件，即模块必须是 ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构 ^3300028078-7-5789-5866
  • ⏱ 2023-10-07 10:25:10

第3章 Vue.js 3 的设计思路

• 📌 JavaScript 对象来描述真实的 DOM 结构 ^3300028078-8-3992-4018

  • ⏱ 2023-11-04 22:35:22

• 📌 渲染器的作用就是把虚拟 DOM 渲染为真实 DOM ^3300028078-8-4102-4127

  • ⏱ 2023-10-07 11:56:51

• 📌 虚拟 DOM ^3300028078-8-7864-7870

  • ⏱ 2023-11-04 22:41:07

• 📌 其实就是用来描述真实 DOM 的普通 JavaScript 对象，渲染器会把这个对象渲染为真实 DOM 元素 ^3300028078-8-7871-7925

  • ⏱ 2023-11-04 22:41:21

• 📌 组件就是一组 DOM 元素的封装 ^3300028078-8-8165-8188

  • ⏱ 2023-11-04 22:42:16

• 📌 组件的实现依赖于渲染器，模板的编译依赖于编译器 ^3300028078-8-13650-13725

  • ⏱ 2023-11-04 22:46:34

第4章 响应系统的作用与实现

• 📌 WeakMap 经常用于存储那些只有当 key 所引用的对象存在时（没有被回收）才有价值的信息 ^3300028078-10-11840-11887

  • ⏱ 2023-11-04 23:08:49

• 📌 至此，我们的响应系统已经可以避免副作用函数产生遗留了。但如果你尝试运行代码，会发现目前的实现会导致无限循环执行，问题出在 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

  • ⏱ 2023-10-07 22:22:59

• 📌 在调用 forEach 遍历 Set 集合时，如果一个值已经被访问过了，但该值被删除并重新添加到集合，如果此时 forEach 遍历没有结束，那么该值会重新被访问。因此，上面的代码会无限执行。解决办法很简单，我们可以构造另外一个 Set 集合并遍历它 ^3300028078-10-19644-19769

  • ⏱ 2023-10-07 22:25:05

• 📌 可调度性是响应系统非常重要的特性 ^3300028078-10-27303-27319

  • ⏱ 2023-11-05 17:53:46

• 📌 所谓可调度，指的是当 trigger 动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式。 ^3300028078-10-27336-27393

  • ⏱ 2023-11-05 17:53:46

读书笔记

本书评论

书评 No.1

^30631064-7LN9vCCJN
⏱ 2023-10-07 22:22:29