Vue.js 设计与实现读书简记（一）
前言
最近偶尔刷到Vue.js 设计与实现这本书的推荐， 发现是尤雨溪推荐的， Vue.js 官方团队成员霍春阳写的一本书.
看了书本简介（以下），刚好可以深入研究一下 Vue.js 3, 就入手了。
本书基于 Vue.js 3，从规范出发，以源码为基础，并结合大量直观的配图，循序渐进地讲解 Vue.js 中各个功能模块的实现，细致剖析框架设计原理。全书共18章，分为六篇，主要内容包括：框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等。通过阅读本书，对 Vue.js 2/3具有上手经验的开发人员能够进一步理解 Vue.js 框架的实现细节，没有Vue.js使用经验但对框架设计感兴趣的前端开发人员，能够快速掌握 Vue.js 的设计原理。
这读书简记只是自我的读书笔记总结与汇总，方便自己日后回忆翻看，所以内容可能比较随意简洁，毕竟详细内容可以看原书。
第一篇 框架设计概览
这一篇有3章的内容， 相对来说会简单一点， 第二篇开始内容会慢慢深入。
1.权衡的艺术
框架设计的权衡
1.1 命令式和声明式、 1.2 性能与可维护性的权衡
对比了命令式和声明式区别 命令式
- 关注过程
- 直接修改结果
- 可维护性低
声明式
- 更关注结果
- 找到前后的差异化并只更新变化的地方
- 可维护性高
- 声明式代码性能不优于命令式
- 在框架设计上, 设计者要做的就是: 在保持可维护性的同时让性能损失最小化
- 声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗
- 结合 Vue，Vue.js 的内部实现一定是命令式，而暴露给用户的是声明式。
1.3 虚拟 DOM 的性能到底如何
所谓的虚拟 DOM, 就是为了最小化找出差异这一步的性能消耗而出现的.
-
innetHTML 创建页面的性能 = HTML 字符串拼接的计算量 + innetHTML 的 DOM 计算量
-
虚拟 DOM 创建页面的性能 = 创建 JavaStcipt 对象的计算量 + 创建真实 DOM 的计算量
-
采用虚拟 DOM 的更新技术的性能理论上不可能比原生 JavaScipt 操作 DOM 更高
innetHTML 与 虚拟 DOM 在创建页面时的性能(), 性能没有差别多大
| 虚拟 DOM | innetHTML | |
|---|---|---|
| 纯 JavaScript 运算 | 创建 JavaScript 对象 ( VNode ) | 渲染 HTML 字符串 |
| DOM 运算 | 新建所有 DOM 元素 | 新建所有 DOM 元素 |
更新页面时虚拟 DOM 比 innetHTML 性能快很多
| 虚拟 DOM | innetHTML | |
|---|---|---|
| 纯 JavaScript 运算 | 创建新的 JavaScript 对象 +Diff | 渲染 HTML 字符串 |
| DOM 运算 | 必要的 DOM 更新 | 销毁所有旧 DOM, 新建所有新 DOM |
| 性能因素 | 与数据变化量相关 | 与模板大小相关 |
粗略总结
性能差-----------------------------------------------------------> 性能高
| innetHTML(模板) | 虚拟 DOM | 原生 JavaScript |
|---|---|---|
| 心智负担中等 | 心智负担小 | 心智负担大 |
| 性能差 | 可维护性强 | 可维护性差 |
| 性能不错 | 性能高 |
1.4 运行时和编译时
- Vue.js 3 是运行时+编译时的架构, 保留运行时的情况下,其性能甚至不输纯编译时的框架
未完待续...
