Vue.js设计与实现

2024/10/04 posted in  读书笔记
Tags: 

  •  Vue.js设计与实现|200
    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
  • 分类: 计算机-软件学习
  • 出版社: 人民邮电出版社

高亮划线

第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

« 《JavaScript框架设计(第2版)》_司徒正美 前端架构:从入门到微前端 »