在本章中,我们首先介绍了声明式地描述 UI 的概念。我们知道,Vue.js 是一个声明式的框架。 声明式的好处在于,它直接描述结果,用户不需要关注过程。Vue.js 采用模板的方式来描述 UI,但它同样支持使用虚拟 DOM 来描述 UI。 虚拟 DOM 要比模板更加灵活,但模板要比虚拟 DOM 更加直观。
然后我们讲解了最基本的渲染器的实现。渲染器的作用是:把虚拟 DOM 对象渲染为真实 DOM 元素。 它的工作原理是,递归地遍历虚拟 DOM 对象,并调用原生 DOM API 来完成真实 DOM 的创建。 渲染器的精髓在于后续的更新,它会通过 Diff 算法找出变更点,并且只会更新需要更新的内容。后面我们会专门讲解渲染器的相关知识。
接着,我们讨论了组件的本质。组件其实就是一组虚拟 DOM 元素的封装,它可以是一个返回虚拟 DOM 的函数,也可以是一个对象, 但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。渲染器在渲染组件时,会先获取组件要渲染的内容,即执行组件的渲染函数并得到其返回值, 我们称之为 subtree,最后再递归地调用渲染器将 subtree 渲染出来即可。
Vue.js 的模板会被一个叫作编译器的程序编译为渲染函数,后面我们会着重讲解编译器相关知识。 最后,编译器、渲染器都是 Vue.js 的核心组成部分,它们共同构成一个有机的整体,不同模块之间互相配合,进一步提升框架性能。
