Vue3 源码学习（二）：渲染系统

渲染系统

该模块主要包含三个功能：

• 功能一：h 函数，用于返回一个 VNode 对象；

• 功能二：mount 函数，用于将 VNode 挂载到 DOM 上；

• 功能三：patch 函数，用于对两个 VNode 进行对比，决定如何处理新的 VNode；

一、h 函数的实现：直接返回一个 VNode 对象即可

const h = (tag, props, children) => {
    return {
        tag,
        props,
        children
    }
}

二、mount 函数 – 用来将 一个 vnode 挂载到某个元素中

• 第一步：根据 tag，创建 HTML 元素，并且存储到 vnode 的 el 中；

• 第二步：处理 props 属性

• • 如果以 on 开头，那么监听事件；
• • 普通属性直接通过 setAttribute 添加即可

• 第三步：处理子节点

• • 如果是字符串节点，那么直接设置 textContent；
• • 如果是数组节点，那么遍历调用 mount 函数；

const mount = (vnode, container) => {
    // 1. 根据 vnode 创建出真实的 element，并且在 vnode 上保留该 element
    const el = vnode.el = document.createElement(vnode.tag)

    // 2. 处理 props
    if (vnode.props) {
        for (const key in vnode.props) {
            const value = vnode.props[key]
            if (key.startsWith('on')) {
                el.addEventListener(key.slice(2).toLowerCase, value)
            }
            else {
                el.setAttribute(key, value)
            }
        }
    }

    // 3. 处理 children
    if (vnode.children) {
        if (typeof vnode.children === 'string') {
            // 文本内容
            el.textContent = vnode.children
        } else {
            // 子元素
            vnode.children.forEach(item => {
                mount(item, el)
            });
        }
    }

    // 将 el 挂载到 container 上
    container.appendChild(el)
}

三、Patch 函数 – 用来对比两个 VNode