《vue.js设计与实现》读后总结
一、权衡的艺术
vue是声明式框架,声明式框架更关注结果。
vue.js帮我们封装了过程,内部是命令式的,暴露给用户的是声明式。
声明式代码的性能不优于命令式代码的性能。声明式代码会比命令式代 码多出找出差异的性能消耗。
vue在保持代码可维护性的同时让性能损失最小化。
为什么vue.js选择声明式?
- 声明式代码可维护性更强,直接展示我们要的结果,做事的过程不需要关心;
- 命令式代码需要维护实现目标的整个过程(DOM创建更新删除);
虚拟DOM因为性能最小化而出现
纯JavaScript层面的操作比DOM操作快得多
虚拟DOM创建页面的过程
-
创建javaScript对象(真实的DOM描述);
-
递归遍历虚拟DOM树并创建真实DOM;
创建时,虚拟DOM与innerHTML相比没有优势
虚拟DOM更新页面的过程
-
重新创建JavaScript对象(虚拟DOM树);
-
比较新旧虚拟DOM,找到变化元素并更新他;
虚拟DOM更新页面时只会更新必要的元素,但innerHTML需要全量更新。 虚拟DOM心智负担小,可维护性强,性能虽然比不上极致优化的原生JavaScript,但是在保证心智负担和可维护性的前提下相当不错。
vue.js3.0保持了运行时+编译时的架构
保持灵活性的基础上,还能通过编译手段分析用户提供的内容,从而进一步提升性能;
二、框架设计的核心要素
提升用户的开发体验
以chrome为例,在DevTools设置中,勾选Console => Enable custom formatters ,会是ref值的打印非常直观,因为vue.js3.0内部自定义了formatter => initCustomFormatter,浏览器允许自定义formatter。
控制框架代码的体积
通过常量条件判断代码是否要执行,不执行的代码被称为dead code, 它不会出现在最终的产物中,在构建资源的时候就会被移除。
框架要做到良好的Tree-Shaking
消除那些永远不会被执行的代码
/*#_PURE_*/ 告诉框架可以放心对后面代码进行Tree-Shaking