之前工作中做项目用到了VUE,实现了几个项目的完整开发。基本是后台管理系统,有一些涉及到人员管理树tree、table、search等组件的构建和表单页面的校验,审批流程页面组件的建立等,项目的webpack的打包发布等。后来发现一些原理性东西并没有十分的清晰,把一些东西杂糅在了一起。看到霍春阳的这本书评分很好,特意借来拜读和实践,梳理一遍自己对于vue的认知。
首先把所有内容做了一个脑图,是按照书中的提示做的。
文字版本
vue.js设计与实现
第一篇框架设计概览
第1章讨论命令式和声明式,虚拟DOM的性能状况。vvue.js 3.0是一个运行时+编译时的框架。
第2章主要从用户的开发体验、控制框架代码的体积、Tree- Shaking的工作机制、框架产物、特性开关、错误处理、typescript支持等方面出发,讨论了框架设计者再设计框架应该考虑的内容。
第3章从全局介绍vue.js 3.0的设计思路,以及各个模块之间如何协作。
第二篇响应系统
第4章从宏观介绍vue.js3.0的响应系统的实现机制。从副作用函数开始,逐步实现一个完善的响应系统,还讲述了计算属性和watch的实现原理,同时讨论了在实现相应系统的过程中所遇到的问题,以及相应的解决方案。
第5章从ECMAScript规范入手,从最基本的proxy、reflect以及js对象的工作原理开始,逐步讨论了使用proxy代理js对象的方式。
第6章主要讨论了ref的概念,并基于ref实现原始值的响应式方案,还讨论了如何使用ref解决响应丢失的问题。
第三篇渲染器
第7章主要讨论了渲染器与响应系统的关系,讲述了两者如何配合完成页面更新。渲染器的一些基本名词和概念,以及自定义渲染器的实现与应用。
第8章渲染器的挂载与更新的实现原理,其中包括子节点的处理、属性的处理和事件的处理。当挂载或更新组件类型的虚拟节点时,还要考虑组件生命周期函数的处理等。
第9章主要讨论了简单Diff算法的工作原理。
第10章主要讨论了双端Diff算法的工作原理。
第11章主要讨论了快速Diff的工作原理。
第四篇组件化
第12章主要讨论了组件的实现原理,介绍了组件自身状态的初始化,以及由自身状态变化引起的组件自更新,还介绍了组件的外部状态props、由外部状态变化引起的被动更新,以及组件事件和插槽的实现原理。
第13章异步组件和函数式组件的工作机制和实现原理。对于异步组件,我们还讨论了超时与错误处理、延迟展示loading组件、加载重试等内容。
第14章vuejs内建的三个组件的实现原理,即keepalive teleport和transition的组件。
第五篇编译器
第15章讨论vuejs模板编译器的工作流程,接着讨论了parser的实现原理与状态机,以及AST的转换与插件化架构,最后讨论了生成渲染函数代码的具体实现。
第16章主要讨论了如何实现一个符合whatwg组织的HTML解析规范的解析器,内容涵盖解析器的文本模式、文本模式对解析器的影响,以及如何使用递归下降算法构造模板AST。在解析文本内容时,我们还讨论了如何根据规范解码字符引用。
第17章模板编译优化的相关内容。具体包括block树的更新机制、动态节点的收集、静态提升、预字符串、缓存内联事件处理函数、v-once等优化机制。
第六篇服务器端
主要讨论了同构渲染的原理,探讨了CSR、SSR以及同构渲染等方案的各自优缺点,然后探讨了vuejs进行服务端和客户端即获得原理,最后总结了编写同构代码时的注意事项。
图片版本
