《Vue.js设计与实现》 读书笔记

第一章 权衡的艺术，第二章 框架设计的核心要素

命令式(Jquery)和声明式

性能与可维护性权衡

结论：声明式代码的性能不优于命令式代码的性能

如：

命令式代码更新的性能消耗为 A(10ms)

命令式代码更新的性能消耗为 A(10ms) + B(5ms) 多出来需要找前后差异的时间

所以框架设计者需要考虑的是 在保持可维护性的同时让性能损失最小化

interHTML (模板)	原生JS	虚拟Dom
心智负担中等	心智负担大	心智负担小
性能差	性能好	可维护性强
		性能不错

运行时和编辑时

如 render函数就是纯运行时

在 render函数前加一个 compiler(编译时)则成了 编译时+ 运行时框架

声明的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗

框架设计的核心要素

1. 提升用户开发体验（友好的 warn警告）
2. 打印ref值，控制台 → Console → Enable custom formatters

控制框架代码体积

合理的利用 tree-shaking，打包时移除 dead code代码

1. if(__DEV__) 打包时会转换成 if(false)
2. 显示的告诉打包工具，某些函数没有副作用 /*#__PURE__*/,打包时如果发现该函数没有被使用过，则会进行移除

应该输出怎样的产物

1. IIFE格式(立即执行函数) 直接通过 <script>标签引入
2. -browser.js 通过 <script type='module'>标签引入，给浏览器进行使用
3. rollup或webpack打包工具使用
   vue.esm-bundler.js会根据开发环境来判断是否报开发时的warn
4. node.js中的使用
   cjs格式，服务端渲染时需要

特性开关

依旧是利用tree-shaking，打包时移除未使用的代码，减少体积

1. __VUE_OPTIONS_API，vue3如果不使用options api可以将其设置为false，减少代码体积
2. 统一错误处理 (后端中很常见)
3. 良好的TS支持