Virtual Dom的实现原理

猫哥不给力

于 2022-03-02 09:23:11 发布

阅读量121

点赞数

文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/weixin_38255079/article/details/123222035

版权

Virtual DOM介绍

什么是Virtual DOM

Virtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM
真实的DOM成员非常非常多，所以创建一个DOM对象的成本非常高
可以通过Virtual DOM来描述真实DDOM，示例：
```
{
  sel: 'div',
  data: {},
  text: 'Hello Virtual DOM',
  elm: undefined,
  key: undefined
}
```
Virtual DOM对象是非常小的，我们创建一个Virtual DOM的成本比创建一个真实DOM的成本小很多。

为什么使用Virtual DOM

手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，虽然有jQuery等库简化DOM操作，但是随着项目的复杂 DOM操作复杂提升
为了简化DOM的复杂操作于是出现了各种MVVM框架，MVVM 框架解决了视图和状态的同步问题
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是Virtual DOM出现了 Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM, Virtual DOM内部将弄清楚如何有效(diff)的更新DOM
参考github上virtual-dom的描述
- 虚拟DOM可以维护程序的状态，跟踪上一次的状态
- 通过比较前后两次状态的差异更新真实DOM

虚拟DOM的作用

维护视图和状态的关系
复杂视图情况下提升渲染性能
除了渲染DOM以外，还可以实现SSR（Nuxt.js/Next.js）、原生应用（Weex/React Native ）、小程序（mpvue/uni-app）等

Virtual DOM库

Snabbdom
- Vue2.x内部使用的Virtual DOM 就是改造的Snabbdom
- 大约200SLOC（Single Line Of Code）
- 通过模块可扩展
- 源码使用TypeScript开发
- 最快的Virtual DOM之一
Virtual DOM

Snabbdom基本使用

创建项目

打包工具为了方便使用Parcel

创建项目，并安装Parcel

# 创建项目目录
mkdir snabbdom-demo
# 进入项目目录
cd snabbdom-demo
# 创建package.json
yarn init -y
# 本地安装Parcel
yarn add parcel-bundler
# 安装snabbdom@0.7.4
yarn add snabbdom@0.7.4

配置package.json的script

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

创建目录结构

|-index.html
|-package.json
|-src
	|-01.basicusage.js

导入Snabbdom

Snabbdom的官网demo中导入使用的是CommonJS模块化语法，我们使用的是更流行的ES6模块化的语法import
关于模块化的语法可以参考阮一峰老师的《Module的语法》

ES6模块化与CommonJS模块的差异

import { h, init, thunk } from 'snabbdom'

Snabbdom的核心仅提供最基本的功能，只导出了三个函数init()、h()、thunk()
- init()是一个高阶函数，返回patch()
- h()返回虚拟节点VNode，这个函数我们在使用Vue.js的时候用过
```
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```
- thunk()是一种优化策略，可以在处理不可变数据时使用
注意：导入时候不能使用import snabbdom from 'snabbdom'
- 原因：node_modules/src/snabbdom.ts末尾导出使用的语法是export导出API，没有使用export default导出默认导出

Snabbdom的基本用法

init函数、h函数、patch函数的使用

01-basicusage.js

import { h, init } from 'snabbdom'

// 1. hello world
// init方法，参数：数组，模块
// 返回值：patch函数,作用是对比两个vnode的差异更新到真实DOM
let patch = init([])

// h函数： 
// 第一个参数：标签+选择器，
// 第二个参数：如果是字符串的话，就是标签中的内容
// 返回值：vnode
let vnode = h('div#container.cls', 'Hello world')

// 要占位的DOM元素
let app = document.querySelector('#app')

// patch函数
// 第一个参数：可以是DOM元素，内部会把DOM元素转化成VNode
// 第二个参数：VNode
// 返回值：VNode
let oldVNode = patch(app, vnode)

// 假设的时刻
vnode = h('div', 'Hello Snabbdom')
patch(oldVNode, vnode)

02-basicusage.js

// 2. div中放置子元素 h1, p 

import { h, init } from 'snabbdom'

let patch = init([])

let vnode = h('div#container', [h('h1', 'hello snabbdom'), h('p', '这是一个p标签')])

let app = document.querySelector('#app')

let oldVnode = patch(app, vnode)

setInterval(() => {
  vnode = h('div#container', [h('h1', 'hello world'), h('p', 'hello p')])
  patch(oldVnode, vnode)

  // 清空页面内容--官网上的写法是错误的
  // patch(oldVnode, null)
  // 这是正确的写法，第二个参数是一个注释节点
  patch(oldVnode, h('!'))
}, 2000);

Snabbdom中的模块

Snabbdom的核心库并不能处理元素的属性/样式/事件等，如果需要处理的话，可以使用模块

常用模块

官方提供了6个模块
- attributes
  - 设置了DOM元素的属性，使用setAttribute()
  - 处理布尔类型的属性
- props
  - 和attributes模块相似，设置DOM元素的属性element[attr] = value
  - 不处理布尔类型的属性
- class
  - 切换类样式
  - 注意：给元素设置类样式是通过set选择器
- dataset
  - 设置data-*的自定义属性
- eventlisteners
  - 注册和移除事件
- style
  - 设置行内样式，支持动画
  - delayed/remove/destroy

模块使用

模块会用步骤：

导入需要的模块
init()中注册模块
使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移

import { init, h } from 'snabbdom'
// 1. 导入需要的模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
// 2. init()中注册模块
let patch = init([
  style, eventlisteners
])
// 3. 使用h()函数创建VNode的时候，可以把第二个参数设置为对象，其他参数往后移
let vnode = h('div', {
  style: {
    backgroundColor: 'red'
  },
  on: {
    click: eventHandler
  }
}, [h('h1', 'Hello Snabbdom'), h('p', 'this is a p')])

let app = document.querySelector('#app')

patch(app, vnode)

function eventHandler () {
  console.log('click~~')
}

Snabbdom源码解析

如何学习源码
- 先宏观了解
- 待着目标看源码
- 看源码的过程要不求甚解
- 调试
- 参考资料
Snabbdom的核心
- 使用h()函数创建JavaScript对象(VNode)描述真实DOM
- init设置模块，创建patch()
- patch()比较新旧两个VNode
- 把变化的内容更新到真实DOM树上
Snabbdom源码
- 源码地址：
  - Https://github.com/snabbdom/snabbdom

h函数

h函数介绍
- 在使用Vue的时候见过h函数
```
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
```
- h函数最早见于hyperscript，使用JavaScript创建超文本
- Snabbdom中的h函数不是用来创建超文本，而是创建VNode
函数重载
- 概念
  - 参数个数或者类型不同的函数
  - JavaScript中没有重载的概念
  - TypeScript中有重载，不过重载的实现还是通过代码调整参数
- 重载的示意
```
function add (a, b) {
  console.log(a + b)
}

function add (a, b, c) {
  console.log(a + b + c)
}

add(1, 2)
add(1, 2, 3)
```
源码位置：src/h.ts