在书店买书前，如何快速了解一本书的内容和基础判断书本的好坏，自然是阅读书本的前言和书本的目录结构。

可以帮助我们快速的了解全书的框架脉络和每个章节主要展示的内容信息。以此来判断是否是你需要的书。对于书本内容质量的评价：主要看1、推荐序的人；2、书本封面和背面，一定会有相关推荐。

1、Vue3.0的优点

在2020年9月18日，正式迎来Vue3.0版本。

与Vue.js 2.0相比，Vuejs.3.0 的优点：

• Vue.js3.0 做到使用更少的代码来实现更多的功能

• 在模块的拆分和设计上做的非常合理

  • 模块之间的耦合度非常低，很多模块可以独立安装使用
  • 不需要依赖完整的Vue.js运行时
  • 例如：@vue/reactivity

• 在设计内建组件和模块时也花费了很多精力：

  • 配合构建工具以及Tree-Shaking机制
  • 实现内建能力的按需引入
  • 从而实现了用户的bundle的体积最小化

• 扩展能力非常强

  • 可以编写自定义的渲染器
  • 便携编译器插件来自定义模版语法

• 在用户体验上也下足了功夫

Vue.js 3.0优点如此之多， 那么框架设计者是如何设计并实现这一切的呢？

• 理解Vue.js 3.0的核心设计思想非常重要
• 不仅能让我们更加从容的面对复杂问题
• 还能够指导我们在其他领域进行架构设计

Vue.js 3.0 中很多功能的设计需要谨遵规范，例如：

• 想要使用Proxy实现完善的响应系统，就必须从ECMAScript规范入手
• Vue.js的模版解析器则遵从WAHTWG的相关规范

理解Vue.js 3.0 核心设计思想的同时，还能够间接掌握阅读和理解规范，并据此编写代码的方法。

2、书本内容

本书是作者「霍春阳」老师对Vue.js框架设计的理解之上，以由简入繁的方式介绍「如何实现Vue.js中的各个功能模块」。

从规范出发，实现功能完善且严谨的Vue.js功能模块。例如：

• 通过规范ECMAScript规范，基于Proxy实现一个完善的响应式系统
• 通过阅读WHATWG规范，实现一个类HTML预发的模版解析器
  • 实现一个支持插件架构的模版编译器

本书还会讨论的内容：

• 框架设计的核心要素以及框架设计过程中要做出的权衡
• 三种常见的虚拟DOM（Virtual DOM）的Diff算法
• 组件化的实现与Vue.js内建组件的原理
• 服务端渲染、客户端渲染、同构渲染之间的差异，以及同构渲染的原理

3、书本结构

目录结构

第一篇（框架设计概览）

• 第1章：

  • 主要讨论「命令式」和「声明式」两种范式的差异 ，以及二者对框架设计的影响。
  • 讨论虚拟DOM的性能状况
  • 介绍了「运行时」和「编译时」的相关知识，介绍了Vue.js3.0是一个运行时+编译时的框架。

• 第2章：

  • 从用户的开发体验、控制框架代码的体积、Tree-Shaking的工作机制、框架产物、特性开关、错误处理、TypeScript支持等几个方面出发，讨论了框架设计者在设计框架时应该考虑的内容。

• 第3章：

  • 从全局视角介绍Vue.js3.0的设计思路，以及各个模块之间是如何写作的。

第二篇（响应系统）

• 第4章：

  • 从宏观视角讲述Vue.js3.0中响应系统的实现
  • 从副作用函数开始，逐步实现一个完善的响应系统
  • 计算属性和watch的实现原理
  • 实现响应系统的过程中所遇到的问题&解决方案

• 第5章：

• • 从EMCAScript规范入手
  • 从最基本的Proxy、Reflecty以及JavaScript对象的工作原理开始
  • 逐步讨论使用Proxy代理JavaScript对象的方式

• 第6章：

• • 讨论ref的概念
  • 基于ref实现原始值的响应方案
  • 如何用ref解决响应式丢失问题

第三篇（渲染器）

• 第7章

• • 讨论渲染器与响应系统的关系，讲述两者如何配合工作完成页面更新
  • 讨论渲染器中的一些基本名词和概念
  • 讨论自定义渲染器的实现与应用

• 第8章

  • 讨论渲染器挂载与更新的实现原理，包含：
  • • 子节点的处理
    • 属性的处理
    • 事件的处理
  • 当挂载或更新组件类型的虚拟节点时，需要考虑组件生命周期函数的处理

• 第9章

  • “简单Diff算法”的工作原理

• 第10章

  • “双端Diff算法”的工作原理

• 第11章

  • “快速Diff算法”的工作原理

第四篇（组件化）

• 第12章：

  • 组件的实现原理

  • 组件自身状态的初始化

    • 由自身状态变化引起的组件自更新
    • 组件的外部状态（props）
    • 由外部状态变化引起的被动更新

  • 组件事件和插槽的实现原理

• 第13章：

  • 介绍「异步组件」和「函数式组件」的工作机制和实现原理
  • 异步组件
  • 超时与错误处理
    • 延迟展示Loading组件
    • 加载重试

• 第14章：

  • 介绍Vue.js内建的三个组件的实现原理

    • KeepAlive组件
    • Teleport组件
    • Transition组件

第五篇（编译器）

• 第15章：

  • 讨论vue.js模版编译器的工作流程
  • 讨论parser的实现原理与状态机
    • AST的转换与插件化架构
  • 讨论生成渲染函数代码的具体实现

• 第16章：

  • 如何实现一个符合WHATWG组织的HTML解析规范的解析器

  • 解析器的文本模式

    • 文本模式对解析器对影响

  • 如何使用递归下降算法构造模版AST

  • 在解析文本内容时，如何根据规范解码字符引用。

• 第17章：

  • Vue.js3.0中模版编译优化的相关内容

  • • Block树的更新机制
    • 动态节点的收集
    • 静态提升
    • 预字符串化
    • 缓存内联事件处理函数
    • v-once等优化机制

第六篇（服务端渲染）

• 第18章：

  • 讨论Vue.js同构渲染的原理
  • 讨论CSR、SSR以及同构渲染等方案各自的优缺点
  • 探讨Vue.js进行「服务端渲染」和「客户端激活」的原理
  • 总结编写同构代码时的注意事项

4、总结

这本书刚上市的时候， 就看到朋友圈各路大神都在推荐这本书， 在热度如此之高的情况下， 我也买了一本回来， 放着有一个月了， 直到今天才翻开本书开始阅读。

既然都推荐本书好， 本书好在哪里，写了什么内容呢？通过阅读作者本书的「前言」，对《Vue.js设计与实现》有了全面的认识， 理清了本书的讲述的内容， 使用的读者，以及全篇内容的脉络框架，以及每章节讲的主题内容等。

适合有着Vue.js2/3开发经验，且希望进一步理解Vue.js框架设计原理的开发人员阅读，即使没有使用过Vue.js,但是对Vue.js框架设计感兴趣的前端开发也是可以阅读本书的。

《Vue.js设计与实现》是在霍春阳老师对Vue.js框架设计的理解之上，从简到繁的方式介绍如何实现Vue.js的各功能模块。对于理解「Vue的高层设计思想」和「框架的设计权衡」有很大帮助。用尤大大的话来说，这本书可以作为现代前端框架设计的一个非常有价值的参考。