Vue渲染器（一）：渲染器的设计

渲染器（一）：渲染器的设计

1.前言：

接下来就开始详细讨论渲染器的实现细节了，这也是Vue.js中非常重要的一部分，很多功能依赖渲染器来实现，例如 Transition组件、Teleport组件、Suspense组件，以及template ref和自定义指令等。

并且它也是框架性能的核心，Vue3的渲染器不仅仅包括传统的diff算法，它还独创了快捷路径的更新方式，能够充分利用编译器提供的信息，大大提升了更新性能。

2.渲染器与响应系统的结合：

渲染器：用来执行渲染任务的。

在浏览器平台上，用它来渲染其中的真实DOM元素。渲染器不仅能够渲染真实的DOM元素，它还是框架跨平台能力的关键。所以在设计渲染器的时候一定要考虑好自定义的能力。

这节我们先将渲染器限定在dom平台。并且关于响应式的实现，在前面已经做过介绍，直接引入使用前面的即可。

来看利用响应系统，让整个渲染过程自动化：

import { ref } from '../reactivity/ref'
import { effect } from '../reactivity/effect';
export function renderer(domString, container) {
    // app.innerHtml = <h1>Hello</h1>
    container.innerHtml = domString;
}
const count = ref(1);
effect(() => {
    renderer(`<h1>${count.value}</h1>`,
        // 如果页面中存在id为app的DOM元素,就将上面的代码插入其中
        document.getElementById('app'));
})
count.value++;

在上面这段代码中，先定义一个ref响应式数据count，然后在副作用函数内调用renderer函数执行渲染。副作用函数执行完后，会与count建立响应联系。当执行 count.value++，副作用函数重新执行，完整渲染。所以代码运行完，渲染到页面的内容是 <h1>2</h1>。

这便是响应系统和渲染器之间的关系。利用响应系统的能力，自动调用渲染器完成页面的渲染和更新。这个过程与渲染器的具体实现无关。

3.渲染器的基本概念：

接下来先介绍渲染器所涉及的基本概念、术语和含义，有利于理解后续内容。

• renderer：渲染器，把虚拟DOM渲染为特定平台上的真实元素。

  • 在浏览器平台上，渲染器把 虚拟DOM 渲染为 真实DOM。

• render：渲染，动词。

• 虚拟DOM：virtual DOM，简写为vdom。

  • 虚拟DOM 和 真实DOM的结构一样，都是由一个个节点组成的树形结构。
  • 虚拟DOM是树形结构，这棵树中的任何一个vnode节点都可以是一棵子树，因此vnode和vdom有时可以替换使用。（为了避免造成困惑&#