vue3源码分析 -- runtime

runtime运行时，主要在packages/runtime-core目录下，核心提供了h、render等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念

HTML DOM 树

通过节点构成的一个树形结构，我们称为HTML DOM节点树。DOM 文档里面做了详细解释，这里就不再展开讲解，通过以下例子来简单理解：

<div> 
    <h1>hello h1</h1> 
    <!-- 这里是注释 --> 
    hello div 
</div>

浏览器运行上述代码时，它会生成一个对应的DOM 树来展示：

虚拟DOM

虚拟 DOM 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步，详细解释可见 Vue文档

通过以下这个例子来说明：

可以看出虚拟 DOM 类似把真实 DOM 转换成一个 VNode 对象，该对象存在节点的类型type、子节点信息children等属性，而子节点有可能是字符串，也可能是包含其他子节点的数组

// 真实 DOM 
<div>text</div>

// 虚拟 DOM 表示
const vnode = {
    type: 'div', // 父节点类型 div
    children: 'text' // 子节点内容 text
}

// 真实 DOM
<div>
    <h1>hello h1</h1>
    <!-- TODO: comment -->
    hello div
</div>

// 虚拟 DOM 表示 
const vnode = {
    type: 'div', // 父节点类型 div
    children: [ // 多个子节点
        {
            type: 'h1', // 子节点类型 h1
            children: 'hello h1' // 子节点内容 hello h1       
        },
        {
            type: Comment, // 子节点类型 Comment
            children: 'TODO: comment' // 子节点内容 TODO: comment       
        },
        'hello div'   // 子节点内容 hello div
    ]
}

而在runtime运行时，渲染器render会遍历整个虚拟 DOM 树，并据此构建真实的 DOM 树，这个过程把它叫做挂载mount

当这个VNode对象发生变化时，那么我们会对比旧的 VNode和新的 VNode之间的区别，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上，这个过程被称为更新patch

h

Vue中转换为VNode对象就是通过h函数来完成的，通过调试来看下h函数的返回值：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h } = Vue

      debugger
      const vnode = h(
        'div',
        {
          class: 'test'
        },
        'hello render'
      )
      console.log(vnode)
    </script>
  </body>
</html>

h函数定义在packages/runtime-core/src/h.ts文件中，它接收三个参数：

• type: string | Component：既可以是一个字符串（用于原生元素），也可以是一个 Vue 组件定义
• props?: object | null：要传递的 prop
• children?: Children | Slot | Slots：子节点

该 vnode 如下：

最终VNode对象通过render函数渲染为真实 DOM，该render函数定义在packages/runtime-core/src/renderer.ts文件中，实际执行的是createRenderer方法，它接收两个参数：

• vnode虚拟节点树，或者叫做虚拟 DOM 树
• container承载的容器，真实节点渲染的位置