《Vue.js技术内幕》读书有感-值得推荐的源码书籍

收到《Vue.js技术内幕》这本书已经有2周了，大致过了一遍书的整体内容。不得不说，书是真的很厚，干货也是满满的一本。这本书给我带来很大的惊喜，它不只是对源码的剖析，还有框架建设过程中很多值得学习的设计动机和思考路线。

学习一门技术，最直接有效的途径就是阅读官方文档，在Vue官网中，已经有非常全面的介绍。但是如果想了解框架背后的原理，且不想陷入无尽的源码当中，阅读这本书倒是最直接有效的方式。通过书籍梳理的路线学习，再透过官方源码对照分析，往往会获得更宏观的视角。下面是针对书籍整体内容的读后总结。

整体设计的优化：从设计的宏观角度看，Vue3主要在源码优化和源码结构方面进行了优化。优化方面，Vue3采用monorepo的管理方式，拆分更细粒度的模块，引入TypeScript，解决了之前版本很多令人困扰的类型推导问题；源码和编译方面，通过静态编译分析减少打包体积，重写编译过程，比如render的生成可以放在编译期完成；更合理的API设计，比如Composition API，它支持将逻辑关注点放到一个函数里，不再需要在不同文件中跳转。源码整体结构方面，我们怎么得到不同场景的构建产物，在脚手架设计层面，具有借鉴意义。

组件：前端框架，经历了从dom到模板引擎，再到虚拟dom的过程，组件就是Vue的绝对核心。首先，template怎么生成虚拟dom，虚拟dom又怎么和真实dom挂钩，渲染的整体流程，通过深度优先算法，在底层操作dom api，框架并不是不使用dom的黑科技，只是通过封装底层的dom操作，来降低开发者的心智负担。其次，组件更新的核心，便是diff算法，同步头尾部、建立索引图、最长递增子序列算法等，配合完成了dom的更新，绝对值得我们反复研读。框架的设计魅力，就在于它能从不同的视角，比如React采用fiber降低同步渲染的阻塞，Vue重写diff过程、优化编译逻辑，都是为了更好的性能，对比不同技术栈的实现，会给我们带来更多思考和借鉴案例。

响应式原理：Vue一直保留了双向绑定的设计，得益于此，Vue大大便捷了开发者的数据处理。历史版本通过defineProperty实现，然而最大的弊端在于嵌套过深，会严重影响性能，Vue3通过proxy进行重写，极大的优化了双向绑定效率。此外，还介绍了计算属性和侦听器的实现原理。

编译和优化：我们编写的template，会通过解析编译为AST，即抽象语法树，再通过遍历AST节点，生成代码，如果你对babel等有一定的了解，会比较清楚其中的转换过程。本书对编译过程有详细的描述，对代码的生成过程和运行时优化进行解读。

使用特性：依赖注入解决跨层级传输数据，插槽、自定义指令、频繁使用的v-model指令，在使用方面，都极大的方便了开发者，书中通过案例，剖析源码，还分析了应用场景。

内置组件：书中主要对Teleport、KeepAlive、Transition、TransitionGroup组件的实现原理和设计思路进行介绍，比如KeepAlive组件，使用很广泛，Vue框架的工作就是将虚拟dom映射成dom，那么我们可以考虑将dom缓存起来，下次需要使用时直接获取，这涉及到缓存的设计，我们能学习有无缓存的patch过程的区别，以及它为什么这样实现。

官方生态：Vue Router：前端单页面的发展，得益于路由的设计，通过监听路由hash或者history的变化，对组件进行卸载和安装，以实现页面的渲染。Vuex：数据的共享在深层次父子组件、兄弟组件是件麻烦的事情，虽然有原生的依赖注入解决一定的场景，但任然存在局限，Vuex的统一状态管理方案，解决了这个问题，还建立了统一维护数据源。

整体来说，书中覆盖了Vue3的大部分场景细节，且深入浅出，值得推荐。我们在使用过程中，了解背后的原理，将会有很大的帮助。比如，在使用for生成的组件时，我们知道diff的原理，会主动的增加key标识；在不同页面频繁切换的时候，考虑使用KeepAlive提升性能。

另外，Vue3脚手架自带vite工具，会极大提升大应用的开发体验，或许由于不是与Vue平台绑定的技术，没有做介绍，感兴趣的可以自行查看使用文档和源码。