【有空再整】Vue.js设计与实现

虚拟DOM渲染成真实DOM，需要用到渲染器

编译器将模板进行编译为虚拟 DOM，最后放到 script 块对象中的 render 选项位置。之后渲染器将虚拟 DOM 转为真实 DOM 挂载到页面上，之后的更新及其系列操作也将由渲染器完成。

第一篇框架设计概览

第 3 章 Vue.js 3 的设计思路

3.1 声明式地描述 UI

编写前端页面都涉及的内容如下。DOM 元素：例如是 div 标签还是 a 标签。属性：如 a 标签的 href 属性，再如 id、class 等通用属性。事件：如 click、keydown 等。元素的层级结构：DOM 树的层级结构，既有子节点，又有父节点。

Vue.js 3 是一个声明式的 UI 框架。Vue.js 提供了模版和JavaScript对象（其实就是所谓的虚拟 DOM）来声明式地描述UI。

模版：使用与 HTML 标签一致的方式来描述 DOM 元素，例如描述一个 div 标签时可以使用 <div></div>；使用与 HTML 标签一致的方式来描述属性，例如 <div></div>；使用 : 或 v-bind 来描述动态绑定的属性，例如 <div :id="dynamicId"></div>；使用 @ 或 v-on 来描述事件，例如点击事件 <div @click="handler"></div>；使用与 HTML 标签一致的方式来描述层级结构，例如一个具有 span 子节点的 div 标签 <div><span></span></div>。

JavaScript 对象：

3.2 初识渲染器

渲染器的作用就是把虚拟 DOM 渲染为真实 DOM。
【有空再整】Vue.js设计与实现

3.3 组件的本质

组件就是一组 DOM 元素的封装，这组 DOM 元素就是组件要渲染的内容，因此我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲染的内容。


const MyComponent = function () {
  return {
    tag: 'div',
    props: {
      onClick: () => alert('hello')
    },
    children: 'click me'
  }
}

typescript
运行123456789

我们也完全可以使用一个 JavaScript 对象来表达组件。

虚拟 DOM 除了能够描述真实 DOM 之外，还能够描述组件。

3.4 模版的工作原理

编译器和渲染器一样，只是一段程序而已，不过它们的工作内容不同。编译器的作用其实就是将模板编译为渲染函数。

无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM，这就是模板的工作原理，也是 Vue.js 渲染页面的流程。

第 7 章渲染器的设计

渲染器的作用是把虚拟 DOM 渲染为特定平台上的真实元素，我们用英文 renderer 来表达渲染器。虚拟 DOM 通常用英文 virtual DOM 来表达，有时会简写成 vdom 或 vnode。渲染器会执行挂载和打补丁操作，对于新的元素，渲染器会将它挂载到容器内；对于新旧 vnode 都存在的情况，渲染器则会执行打补丁操作，即对比新旧 vnode，只更新变化的内容。

在浏览器平台上，渲染器可以利用 DOM API 完成 DOM 元素的创建、修改和删除。为了让渲染器不直接依赖浏览器平台特有的 API，我们将这些用来创建、修改和删除元素的操作抽象成可配置的对象。用户可以在调用 createRenderer 函数创建渲染器的时候指定自定义的配置对象，从而实现自定义的行为。

第 8 章挂载与更新

第四篇组件化

第 12 章组件的实现原理

渲染器主要负责将虚拟 DOM 渲染为真实 DOM。

12.1 渲染组件

如果从渲染器的内部实现来看，一个组件则是一个特殊类型的虚拟 DOM 节点。为了使用虚拟节点来描述组件，我们可以用虚拟节点的 vnode.type 属性来存储组件的选项对象。一个组件必须包含一个渲染函数，即 render 函数，并且渲染函数的返回值应该是虚拟 DOM。换句话说，组件的渲染函数就是用来描述组件所渲染内容的接口。

【有空再整】Vue.js设计与实现