《Vue.js设计与实现》图解

set

JavaScript

—— 作者：霍春阳

响应式系统

把templtae变成render函数用来创建虚拟Dom

编译器

5.非原始值的响应式方案

    第一章三篇主要介绍框架的设计理念，首先介绍前端框架中关于命令式，声明式，虚拟dom，运行时和编译时的权衡理念，然后介绍了前端框架设计需要考虑的因素，比如体积，开发体验，特性开关，错误处理等，最后介绍Vue.js在这些理念中做了哪些设计和权衡    看完第一章，和面试官谈笑风生问题不大，但是如果被问到了细节，就需要后面的章节强化，下图是Vue最核心模块的依赖关系。

组件化

框架设计概览

依赖地图targetMap

    第五章三篇编译器，包括编译器和解释器的入门，包括状态机，AST等概念的科普，详细的剖析了vue中template是如何变成render function的过程，也是对计算机专业课编译原理的回顾，最后讲解了Vue中到底做了哪些编译时期的优化，如何通过位运算对虚拟dom进行静态标记，从而尽可能提高Vue运行时的性能，还有block tree，缓存函数等优化方式，对我们平时做项目优化也提供了很好的思路。

依赖

effect3

服务端渲染

7.渲染器的设计

属性num1

6.原始值的响应式方案

4.响应式系统的实现

渲染器

组件

属性4…

       本书基于Vue.js 3，从规范出发，以源码为基础，并结合大量直观的配图，循序渐进地讲解Vue.js中各个功能模块的实现，细致剖析框架设计原理。全书共18章，分为六篇，主要内容包括：框架设计概览、响应系统、渲染器、组件化、编译器和服务端渲染等。通过阅读本书，对Vue.js 2/3具有上手经验的开发人员能够进一步理解Vue.js框架的实现细节，没有Vue.js使用经验但对框架设计感兴趣的前端开发人员，能够快速掌握Vue.js的设计原理。

8.挂载与更新

HTML

普通对象2

@update-rate接收数据

10.双端diff算法

CSS

effect1

普通对象

scheduler

3.Vue3的设计思路

1.权衡的艺术

Vue3

props传递value

属性num2

响应式数据

12.组件的实现原理

defineProps

track

9.简单的diff算法

get函数，执行track函数，把effect注册到依赖地图中

父组件

defineEmits

普通对象3

lazy

11.快速diff算法

《Vue.js设计与实现》

普通对象1

compiler-core

浏览器运行时

响应式

effect2

    第三章五篇渲染器讲的就是vue如何基于响应式系统，把节点渲染到浏览器之上，包括节点的挂载和更新，节点事件，class等属性的更新，虚拟Dom的更新逻辑，详细的介绍了双端的diff算法，其中大家最感兴趣的最长递增子序列也有详细的图解分析，其中简单diff是React fiber之前的算法，双端diff是vue2使用的算法，快速diff是现在Vue3使用的算法，这样我们也完全了解了虚拟Dom这个技术在Vue和React的发展。

depsMap

trigger

三四两章结合在一起，就是Vue3的在浏览器里运行的全部逻辑了

set函数执行trigger，把所有effect挨个执行

14.内建组件和模块

get

Proxy代理

    第二章三篇响应式系统，Vue中最大的特色之一就是响应式系统，简直就是各大面试官的万年面试题，社区里关于响应式原理的解读文章也是一抓一大片，霍春阳作为Vue3贡献度第二的维护者，给出了更加详细的解读，首先响应式系统里除了Proxy代理数据的主流程外，如何做代理的清理，effect函数的嵌套，computed和watch的实现，以及过期副作用的竞态问题，并且还分析了Javascript规范文件中关于Proxy的细节分析，通过规范的定义来介绍如何代理obj，set，map等数据结构，这个细致程度绝对值得你收藏，最后介绍了下原始值的代理函数ref的实现细节，虽然我看过好几遍Vue的源码了，这篇响应式的剖析还是让我有所收获。

2.框架设计的核心要素

    第六章一篇服务端渲染 最后一章主要介绍Vue在服务器端渲染的一些api和工作方式，如果你正在研究Vue的服务端渲染，这一节会对你有帮助，主要就是如何在node环境下把组件生成为字符串去渲染首屏，并且在客户端能够激活，可以作为对ssr感兴趣的同学专门阅读。

13.异步组件与函数式组件