「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

Snabbdom 源码解析

接着我们开始学习 Snabbdom的源码

为什么要学习 Snabbdom的源码

• A： 因为Vue中的虚拟DOM是改造Snabbdom实现的，我们学习完毕之后，也可以摸清楚Vue中的实现原理。

本章目标

了解VNode到底是什么，h、patch到底是怎么工作的

Snabbdom的核心

• init 函数 设置模块，创建 patch 函数

• 使用 h 函数创建 JavaScript对象(VNode)描述真实DOM

• patch函数比较新旧两个 VNode

• 把变化的内容更新到真实DOM树中

Snabbdom 源码

• 源码地址：
  • github.com/snabbdom/sn…
  • v2.1.0: github.com/snabbdom/sn…

h 函数

接下来我们来分析 h 函数的实现

• 作用： 创建VNode对象

• Vue中的h函数

• h函数最早见于 hyperscript, 使用JavaScript创建超文本

h函数，就不得不提到函数重载了

这里我们为什么需要提到函数重载？ 主要是我们的 h 函数有使用到这个概念

函数重载

• 参数个数或参数类型不同的函数

• JavaScript中没有重载的概念

• TypeScript中有重载的概念，不给重载的实现还是通过代码调整参数

这里我们举个例子更好的介绍 函数重载 这个概念

• 1.参数个数不同的重载

  function add(a: number, b: number) {
      console.log(a + b)
  }
  function add(a: number, b: number, c:number) {
      console.log(a + b + c)
  }
  add(1, 2)
  add(1, 2, 3)
  

  这里我们定义两个同名函数add，区别是参数的多寡而已，在支持函数重载的语言中，例如TypeScript，它可以定义两个同名函数，通过参数个数不同进行区分两个函数
• 2.参数类型不同的重载

  function add(a: number, b: number) {
      console.log(a + b)
  }
  function add(a: number, b: string) {
      console.log(a + b + c)
  }
  add(1, 2)
  add(1, '2')
  

  这里我们定义两个同名函数add，区别是第二个参数的类型不同，这里我们调用函数的时候参数不一样，就会调用不同的方法