元数据

[!abstract] Vue.js 设计与实现

• 
• 书名：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
• 分类：计算机 - 软件学习
• 出版社：人民邮电出版社
• PC 地址：https://weread.qq.com/web/reader/c5c32170813ab7177g0181ae

高亮划线

第 1 章 权衡的艺术

📌 早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。
⏱ 2023-04-28 23:56:53 ^3300028078-6-1051-1119

📌 什么是声明式框架呢？与命令式框架更加关注过程不同，声明式框架更加关注结果
⏱ 2023-04-28 23:57:52 ^3300028078-6-1798-1853

📌 声明式代码的性能不优于命令式代码的性能
⏱ 2023-04-28 23:59:06 ^3300028078-6-2515-2534

📌 在采用命令式代码开发的时候，我们需要维护实现目标的整个过程，包括要手动完成 DOM 元素的创建、更新、删除等工作。而声明式代码展示的就是我们要的结果，看上去更加直观，至于做事儿的过程，并不需要我们关心，Vue.js 都为我们封装好了。
⏱ 2023-04-29 00:00:41 ^3300028078-6-3705-3874

📌 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗
⏱ 2023-04-29 00:01:30 ^3300028078-6-4294-4330

📌 纯 JavaScript 层面的操作要比 DOM 操作快得多，它们不在一个数量级上
⏱ 2023-04-29 00:04:17 ^3300028078-6-6030-6071

📌 虚拟 DOM 创建页面的过程分为两步：第一步是创建 JavaScript 对象，这个对象可以理解为真实 DOM 的描述；第二步是递归地遍历虚拟 DOM 树并创建真实 DOM。
⏱ 2023-04-29 00:05:24 ^3300028078-6-6229-6316

📌 使用 innerHTML 更新页面的过程是重新构建 HTML 字符串，再重新设置 DOM 元素的 innerHTML 属性，这其实是在说，哪怕我们只更改了一个文字，也要重新设置 innerHTML 属性。而重新设置 innerHTML 属性就等价于销毁所有旧的 DOM 元素，再全量创建新的 DOM 元素。再来看虚拟 DOM 是如何更新页面的。它需要重新创建 JavaScript 对象（虚拟 DOM 树），然后比较新旧虚拟 DOM，找到变化的元素并更新它。图 1-3 可作为对照。[插图] 图 1-3　虚拟 DOM 和 innerHTML 在更新页面时的性能
⏱ 2023-04-29 00:06:59 ^3300028078-6-7033-7599

📌 Vue.js 3 仍然保持了运行时 + 编译时的架构，在保持灵活性的基础上能够尽可能地去优化。
⏱ 2023-04-29 06:55:43 ^3300028078-6-13081-13128

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

📌 简单地说，Tree-Shaking 指的就是消除那些永远不会被执行的代码，也就是排除 dead code
⏱ 2023-04-29 07:17:32 ^3300028078-7-5663-5715

📌 Tree-Shaking 中的第二个关键点——副作用。如果一个函数调用会产生副作用，那么就不能将其移除。什么是副作用？简单地说，副作用就是，当调用函数的时候会对外部产生影响，例如修改了全局变量
⏱ 2023-04-29 07:16:50 ^3300028078-7-7100-7196

📌 IIFE 的全称是 Immediately Invoked Function Expression，即 “ 立即调用的函数表达式 “
⏱ 2023-04-29 09:54:04 ^3300028078-7-9094-9157

📌 现在主流浏览器对原生 ESM 的支持都不错，所以用户除了能够使用