Vue.js设计与实现-渲染
理解渲染器所涉及的基本概念,有利于理解后续内容。因此,本节我们会介绍渲染器所涉及的术语及其含义,并通过代码来举例说明。
我们通常使用英文 renderer来表达“渲染器”。千万不要把 renderer和 render弄混了,前者代表渲染器,而后者是动词,表示“渲染”。渲染器的作用是把虚拟 DOM渲染为特定平台上的真实元素。在浏览器平台上,渲染器会把虚拟 DOM渲染为真实 DOM元素。
虚拟 DOM通常用英文 virtual DOM来表达,有时会简写成vdom。虚拟 DOM和真实 DOM的结构一样,都是由一个个节点组成的树型结构。所以,我们经常能听到“虚拟节点”这样的词,即 virtual node,有时会简写成 vnode。虚拟 DOM是树型结构,这棵树中的任何一个 vnode节点都可以是一棵子树,因此 vnode和 vdom有时可以替换使用。为了避免造成困惑,在本书中将统一使用 vnode。
渲染器把虚拟 DOM节点渲染为真实 DOM节点的过程叫作挂载,通常用英文 mount来表达。例如 Vue.js组件中的 mounted钩子就会在挂载完成时触发。这就意味着,在 mounted钩子中可以访问真实DOM元素。理解这些名词有助于我们更好地理解框架的 API设计。
那么,渲染器把真实 DOM挂载到哪里呢?其实渲染器并不知道应该把真实 DOM挂载到哪里。因此,渲染器通常需要接收一个挂载点作为参数,用来指定具体的挂载位置。这里的“挂载点”其实就是一个DOM元素,渲染器会把该 DOM元素作为容器元素,并把内容渲染到其中。我们通常用英文 container来表达容器。
渲染器与渲染是不同的。渲染器是更加宽泛的概念,它包含渲染。渲染器不仅可以用来渲染,还可以用来激活已有的 DOM元素,这个过程通常发生在同构渲染的情况下
有仓库了,去仓库里看吧
在本章中,我们首先介绍了渲染器与响应系统的关系。利用响应系统的能力,我们可以做到,当响应式数据变化时自动完成页面更新(或重新渲染)。同时我们注意到,这与渲染器的具体实现无关。我们实现了一个极简的渲染器,它只能利用 innerHTML属性将给定的HTML字符串内容设置到容器中。
接着,我们讨论了与渲染器相关的基本名词和概念。渲染器的作用是把虚拟 DOM渲染为特定平台上的真实元素,我们用英文 renderer来表达渲染器。虚拟 DOM通常用英文 virtual DOM来表达,有时会简写成 vdom或 vnode。渲染器会执行挂载和打补丁操作,对于新的元素,渲染器会将它挂载到容器内;对于新旧 vnode都存在的情况,渲染器则会执行打补丁操作,即对比新旧 vnode,只更新变化的内容。
最后,我们讨论了自定义渲染器的实现。在浏览器平台上,渲染器可以利用 DOM API完成 DOM元素的创建、修改和删除。为了让渲染器不直接依赖浏览器平台特有的 API,我们将这些用来创建、修改和删除元素的操作抽象成可配置的对象。用户可以在调用createRenderer函数创建渲染器的时候指定自定义的配置对象,从而实现自定义的行为。我们还实现了一个用来打印渲染器操作流程的自定义渲染器,它不仅可以在浏览器中运行,还可以在 Node.js中运行。
