【Snabbdom】虚拟DOM-Snabbdom

1、什么是虚拟DOM？

虚拟DOM是使用普通JavaScript对象描述真实DOM，本质就是Js对象。
Vue.js中的虚拟DOM借鉴了Snabbdom，并添加了Vue.js属性

2、为什么使用虚拟DOM？

1、避免直接操作DOM，提高开发效率
2、虚拟DOM在复杂视图下可以提高渲染性能。住：首次渲染，会增加开销

3、Snabbdom几个重要函数

1、h函数

创建VNode对象
Vue中的h函数

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
1
2
3
4

2、init函数

返回patch函数

const patch = init([])
1

3、patch整体过程分析

patch(oldVnode, newVnode)
把新节点中变化的内容渲染到真是DOM，最后返回新节点作为下一次处理的旧节点
对比新旧VNode是否相同节点（节点的key和sel是否相同）
如果不是相同节点，删除之前的内容，重现渲染
如果是相同节点，再判断新的VNode是否有text，如果有并且和oldVnode的text不同，直接更新文本内容
如果新的VNode有children，判断子节点是否有变化

4、体验Snabbdom

1、创建新项目，npm init -y 创建package.json
2、安装parcel cnpm install parcel-bundler -D
3、安装Snabbdom cnpm install snabbdom@2.1.0
4、修改package.json中的script

 "scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  },
1
2
3
4

5、创建basicusage.js

// basicusage.js
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

// 1、导入模块
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

// 2、注册模块
const patch = init([styleModule, eventListenersModule])

// 3、使用h函数的第二个参数传入模块中使用的数据（对象）
let vnode = h('div', [
  h('h1', { style: { backgroundColor: 'pink' } }, 'Hello world'),
  h('button', { on: { click: eventHandler } }, 'Hello p')
])

function eventHandler() {
  console.log("点击了")
}

let app = document.querySelector("#app")
patch(app, vnode)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6、创建index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snabbdom-demo</title>
</head>
<body>
  <div id="app">

  </div>
  <script src="./src/basicusage.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7、执行npm run dev
在这里插入图片描述
至此完成使用Snabbdom进行虚拟dom转化渲染完成。

相关阅读:
已经2023年了，你还不会手撕轮播图？
清华大学YOLOv10公版目标检测算法在地平线Bayes架构神经网络加速单元BPU上部署参考—— 以RDK Ultra为例
句子嵌入: 交叉编码和重排序
【chrome扩展开发】消息通讯之onMessage消息监听
【JavaSE语法】运算符
创建一个基本的网页爬虫
AtCoder Beginner Contest 275(C，E 补)
Vue3初始化写法
电子与通信专业英语（第2版）Electronic Components课文补充
【git】【IDEA】在idea中使用git

原文地址：https://blog.csdn.net/qiuqiu1628480502/article/details/125604482