《Vue.js设计与实现》笔记 Vol. 5

Vue.js 3 的设计思路

在《Vue.js 设计与实现知识点 Vol. 1 ｜青训营笔记》中，我通过讲述性能与可维护性之间的取舍、运行时与编译时之间的取舍等，阐述了框架设计是权衡的艺术。

在《Vue.js 设计与实现知识点 Vol. 2 ｜青训营笔记》中，我分别从框架设计者的角度和提升开发体验的角度，讨论了框架设计的一些核心要素。

在接下来的笔记中，我将从全局视角剖析 Vue.js 3 的设计思路、工作机制及其重要的组成部分。

声明式框架的好处在于，它能够直接描述结果，用户不需要关注过程。

Vue.js 采用模板的方式来描述 UI，也同样支持使用虚拟 DOM 来描述 UI。

模板：更加直观

虚拟 DOM：更加灵活

虚拟 DOM：用 JavaScript 对象来描述真实的 DOM 结构。

渲染器的作用是：把虚拟 DOM 对象渲染为真实 DOM 元素。

渲染器的原理是：递归地遍历虚拟 DOM 对象，并调用原生 DOM API 来完成真实 DOM 的创建。

渲染器的精髓是：后续的更新过程中，它会通过 Diff 算法找出变更点，并且只会更新需要更新的内容。

组件是一组虚拟 DOM 元素的封装，它可以是一个返回虚拟 DOM 的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。

渲染器在渲染组件时，会先获取组件要渲染的内容，即执行组件的渲染函数并得到其返回值（subtree），最后再递归地调用渲染器将 subtree 渲染出来即可。

Vue.js 模板会被编译器程序编译为渲染函数。

编译器、渲染器共同构成一个有机的整体，不同模块之间互相配合，经一步提升框架性能。

本次的内容非常底层，我理解了框架如何能够替代复杂的 DOM 操作。

霍春阳. Vue.js设计与实现[M]. 1. 北京:人民邮电出版社, 2022.