Virtual DOM（虚拟DOM）的实现原理
虚拟DOM
- 1、什么是Virtual DOM
- 2、为什么使用Virtual DOM
- 3、虚拟DOM的作用
- 4、Snabbdom基本使用
-
- 4.1 创建项目
- 4.2 导入Snabbdom
- 4.3 Snabbdom使用示例
-
- 创建一个hello world
- 创建一个带新节点并进行替换
- 清空节点内容
- 4.4 模块
-
- 常用模块
- 模块使用
-
- 模块使用步骤
- 代码演示
- 5、`Snabbdom`源码解读
-
- 5.1 `h`函数
- 5.2 `VNode`函数
- 5.3 复习`h`函数与`Vnode`函数应用
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.jsDOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>snabbdom-demotitle> 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 [email protected] -
导入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 demotitle>
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，最终要渲染到&