深度解析Vue渲染器模块

本文将以一个轻量级渲染器为例，介绍vue渲染器模块原理。

在这篇文章，首先将介绍 VDOM 与其结构，然后解释如何将 VDOM 转换为 真实 DOM，接下来展示vue如何根据新旧 VDOM 来修补 DOM，最后本文例举了使用 VDOM的优点。

源代码与在线演示: CodePen - Renderer Module of Vue.js

什么是 VDOM?

VDOM是指Virtual DOM (虚拟DOM)

这是个真正的DOM

<div class="red">
<h1 id="title">Hello, world!</h1>
<p>How are you</p>
</div>

这是一个与该DOM对应的虚拟DOM

{
    tag: 'div',
    props: {
        class: 'red',
    },
    children: [
        {
            tag: 'h1',
            props: {
                id: 'title',
            },
            children: 'Hello, world!'
        }, {
            tag: 'p',
            children: ['How are you']
        }
    ]
}

复制代码

那么vue如何将这个 VDOM 转化为一个真正的 DOM？

VDOM 的结构

VDOM 可以简单为一个字符串。

'div'
复制代码

VDOM 也可以是一个有三个键的对象：

• tag: String(required)
• props: Object | null
• children: List<Object|String>

Tag

Tag是必须的，Tag的类型应该是一个字符串。

tag: 'div'

Props

Props 有两种情况

• 类型是 Object

props: {
    class: 'red',
}
复制代码

• 不存在（为null）

props: null

Children

Ch