Virtual DOM（虚拟DOM）的实现原理

最新推荐文章于 2024-06-11 01:15:02 发布

December_shi

最新推荐文章于 2024-06-11 01:15:02 发布

阅读量1.1k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/December_shi/article/details/117652407

版权

虚拟DOM

1、什么是Virtual DOM
2、为什么使用Virtual DOM
3、虚拟DOM的作用
4、Snabbdom基本使用
5、`Snabbdom`源码解读

1、什么是Virtual DOM

Virtual DOM（也就是虚拟DOM）

用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

2、为什么使用Virtual DOM

创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。
Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。

3、虚拟DOM的作用

维护视图和状态的关系（虚拟DOM会记录状态的变化，只需要更新状态变化的内容就可以了）

复杂视图情况下提升渲染性能。

随着时代的发展，页面上的功能越来越多，我们需要实现的需求也越来越复杂，DOM的操作也越来越频繁。通过js操作DOM的代价很高，因为会引起页面的重排重绘，增加浏览器的性能开销，降低页面渲染速度，既然操作dom的代价很高那么有没有那种方式可以减少对dom的操作？这时虚拟dom就能解决这个痛点。

4、Snabbdom基本使用

4.1 创建项目

创建项目，并安装parcel

// 创建项目目录
md snabbdom-demo
// 进入项目目录
cd snabbdom-demo
// 创建package.json
npm init -y
//本地安装parcel
npm install parcel-bundler

配置 package.json 的 scripts

"scripts": {
     
  "dev": "parcel index.html --open", //open打开浏览器
  "build": "parcel build index.html"
}

创建目录结构

├── index.html
├── package.json
└── src
    └── 01-basicusage.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>snabbdom-demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="./src/01-basicusage.js"></script>
</body>
</html>

4.2 导入Snabbdom

Snabbdom 文档

安装 snabbdom

yarn add sanbbdom //即可安装sanbbdom，也可以安装指定版本0.7.4

// 说新版本有问题，可以先安装0.7.4
npm install snabbdom@0.7.4

导入snabbdom

采用es module 方式导入snabbdom

文档给出的示例是 var snabbdom = require(‘snabbdom’)采用的是commonJS的模块化方式引入的;我们此处需要使用es module来进行导入，所以我们去node_modules中找到snabbdom中的snabbdom.js，发现它只导出了h、thunk、init三个函数，并且都没有采用export default导出，我们学习es6知道，如果没有采用 export default，我们用es module导入的时候就要用对象的形式 {} 去接收
所以我们这样导入：import {h,thunk,init} from 'snabbdom’即可完成导入
```
import {
     h,thunk,init} from 'snabbdom'
```
- h函数的作用是生成一个虚拟dom,我们在vue中也在使用
- init() 是一个高阶函数，返回一个patch()
- thunk()是一种优化策略，主要优化复杂视图

4.3 Snabbdom使用示例

创建一个hello world

01-basicuse.js代码如下：

import {
    h, init } from 'snabbdom'
// 此例主要实现一个hello world 实例
// init接收一个数组作为参数，该参数主要指定使用的模块列表，也可以为空
// 返回一个使用指定模块集的patch函数，此函数的作用主要是对比两个vnode的差异更新到真实DOM
let patch = init([])
// h函数
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串的话就是标签中的内容
// 返回值：vnode虚拟dom
let vnode = h('div#container.cls','hello world')
let appDom = document.querySelector('#app')
// 然后利用patch函数进行内容比较与替换
// patch()函数
// 第一个参数：可以是dom元素，如果是dom则会自动将dom转换成vnode
// 第二个参数：vnode
// 返回值：vnode
let oldVnode = patch(appDom,vnode)

index.html内容

<html>
	<head>
		<meta charset="utf-8">
		<title>snabbdom demo</title>
	</head>
	<body>
		<div id="app"></div>
    </body>
    <script src="./src/01-basicuse.js"></script>
</html>

项目启动

npm run dev

效果图如下：

在这里插入图片描述

创建一个带新节点并进行替换

假如在某个时刻需要重新获取服务端的数据，并且将获取到的数据重新渲染到该div中(id='container'的div)。

我们这里，就需要重新创建一个VNode, 然后传递给patch,让patch比较一下新的VNode与原有的VNode之间的差异。

补充后的代码如下：

import {
    h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);
vnode = h("div", "Hello Vue");
patch(oldNode, vnode);

效果如下：

在这里插入图片描述

在上面的代码中，我们又创建了一个虚拟DOM ,vnode。然后把这个vnode与oldNode进行对比，最后渲染到页面中。

清空节点内容

patch(oldVnode,null) //官网给出的错误清空方法

patch(oldVnode,h('!')) //正确清空节点的方法
//h('!') 创建一个注释节点替换之前节点内容

上面那个创建一个带新节点并进行替换想要清空节点，应该为如下代码：

import {
    h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);
vnode