前端笔记虚拟 DOM 库的基本使用 - Snabbdom

Posted 2021-03-21 醒途

Vue 2.x 内部的虚拟 DOM 是改造了一个开源库：Snabbdom，所以我们先从 Snabbdom 的基本使用开始了解，然后再逐步分析 Snabbdom 的源码，以达到理解虚拟 DOM 的工作过程和原理的目的。

1. Snabbdom 前情提要

2. Snabbdom 示例代码

3. Snabbdom 方法简介

4. Snabbdom 基本使用

5. Snabbdom 示例代码简介和下载

Snabbdom 前情提要

Snabbdom 代码仅有 200 行，源码使用了 TypeScript 进行开发，是最快的 Virtual DOM 之一。

Snabbdom 还支持自定义扩展，类似插件的机制。

Snabbdom 示例代码与效果

文末有关于示例代码的简介和下载

import { h } from "snabbdom/build/package/h";import { init } from "snabbdom/build/package/init";/** * @description init 初始化，返回核心函数 patch */const patch = init([]);/** * @description 首次比对渲染 */// 1.获取初始真实 DOM：#appconst appElement = document.getElementById("app");// 2.创建虚拟 DOM firstVnodeconst firstVnode = h("div#home.home-page-container", [h("h1", "Hello World")]);// 3.比较双方差异，然后内部操作真实 DOM 进行变化并渲染const patchVnode_1 = patch(appElement, firstVnode);/** * @description 三秒后，再来一次 */setTimeout(() => { // 1.创建虚拟 DOM SecondVnode const SecondVnode = h("div#home.home-page-container", [ h("h1", "Hello Snabbdom"), ]); // 2.比较双方差异，然后内部操作真实 DOM 进行变化并渲染 const patchVnode_2 = patch(patchVnode_1, SecondVnode); console.log(patchVnode_2); // => vnode：虚拟节点}, 3000);// 核心方法 h 就是用来创建虚拟 DOM 的，通过第二参数的传入类型为数组实现多层元素嵌套// 核心方法 patch 内部能够把传入参数是真实 DOM 的话也会转为虚拟 DOM，而后对两个虚拟 DOM 进行差异比较// vnode 是 patch 函数的输出，是虚拟 DOM 节点，后续在源码解析中再详细介绍

Snabbdom 方法简介

方法流程图

方法基本信息

总结

Snabbdom 能够通过 init、patch、h 来创建虚拟 DOM 并与真实 DOM 进行差异比对后，通过一次性操作真实 DOM 来变更差异 DOM 进行页面渲染。

Snabbdom 示例代码简介和下载

示例代码简介

代码入口是 index.html，在 index.html 中引入了案例代码 basicUsage.js。

代码使用了轻量级打包工具 parcel，依赖安装如下：

// parcel - 打包工具npm install parcel-bundler -D
// snabbdomnpm install snabbdom@2.1.0 -S

配置 package.json 的 scripts

给 parcel 配置启动和打包命令

"scripts": { "serve":"parcel index.html --open", "build":"parcel build index.html"}

完整代码下载

前端源码原理系列：第 2 篇

往期回顾：

下期预告：

Snabbdom 的基本使用我们已经通过示例代码介绍完了，使用到的核心方法相信你们通过上篇介绍已经有所了解，我们本节进入正题：Snabbdom 源码解析。

本期名词：

TypeScript、Parcel