《vue.js设计与实现》读后总结

《vue.js设计与实现》读后总结

一、权衡的艺术

vue是声明式框架，声明式框架更关注结果。
vue.js帮我们封装了过程，内部是命令式的，暴露给用户的是声明式。
声明式代码的性能不优于命令式代码的性能。声明式代码会比命令式代	码多出找出差异的性能消耗。
vue在保持代码可维护性的同时让性能损失最小化。

为什么vue.js选择声明式？

1. 声明式代码可维护性更强，直接展示我们要的结果，做事的过程不需要关心;
2. 命令式代码需要维护实现目标的整个过程（DOM创建更新删除）；

虚拟DOM因为性能最小化而出现

纯JavaScript层面的操作比DOM操作快得多

虚拟DOM创建页面的过程

1. 创建javaScript对象（真实的DOM描述）；

2. 递归遍历虚拟DOM树并创建真实DOM；

    创建时，虚拟DOM与innerHTML相比没有优势
   

虚拟DOM更新页面的过程

1. 重新创建JavaScript对象（虚拟DOM树）；

2. 比较新旧虚拟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

框架应该输出怎样的构建产物