什么是虚拟dom

我是一个小稻米

已于 2022-03-04 14:42:16 修改

阅读量304

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

于 2022-03-04 11:20:30 首次发布

本文链接：https://blog.csdn.net/weixin_44669966/article/details/123272669

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

什么是虚拟dom

用js模拟DOM结构

是一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听、子元素们

详细介绍：
相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

数据改变—>虚拟dom（计算属性）—>操作dom—>视图更新

当数据改变时，需要去操作dom，但如果有很多数据发生改变，是不可以每一次都操作dom的，那么就推出了虚拟dom的概念，因为js执行的速度是很快的，所以当数据改变的时候，不直接去操作dom，而是先把要进行的改变做一个计算，计算出所有的变更，然后再去操作真实dom。

具体实现步骤：

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

虚拟dom的结构：

const vNode = {
	// 标签名 or 组件名
	tag: 'div',
	data: {
		// 标签上的属性
		class: 'red',
		on: {
			// 事件
			click:() => {}
		}
	},
	children: [
		// 子元素们
		{tag: 'span', ...},
		{tag: 'span', ...},
	],
	...
}

虚拟dom的使用实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
	</head>
	<body>
		<div id="container"></div>
		<button type="button" id="btn">更新</button>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/h.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-class.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-eventlisteners.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-props.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom-style.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.4/snabbdom.js"></script>
		<script src="./test.js"></script>
	</body>
</html>

// 引入snabbdom库
const snabbdom = window.snabbdom

// 将虚拟节点塞入空的容器中
const patch = snabbdom.init([
	snabbdom_class,
	snabbdom_props,
	snabbdom_style,
	snabbdom_eventlisteners
])

// 创建虚拟节点
const h = snabbdom.h

// 空的容器
const container = document.getElementById('container');

// 创建虚拟节点
// ul的id为list，属性没有，孩子有两个
// li的类名是item，属性没有，内容是：香蕉/苹果
const vnode = h('ul#list',{},[
	h('li.item',{},'香蕉'),
	h('li.item',{},'苹果')
])

// 将虚拟节点塞入空的容器中:第一个参数是容器，第二个参数是虚拟节点
patch(container, vnode);

// 如果想通过点击按钮来操作ul中的元素
const btn = document.getElementById('btn')
// 给按钮添加一个监听器
btn.addEventListener('click', ()=>{
	// 创建一个新的虚拟节点
	const newVNode = h('ul#list', {}, [
		h('li.item',{},'香蕉'),
		h('li.item',{},'可乐'),
		h('li.item',{},'雪碧')
	])
	// 用新的虚拟节点替换旧的虚拟节点
	patch(vnode, newVNode);
	vnode = newVNode;
})

虚拟dom的优点：

减少dom操作的次数——虚拟dom可以将多次操作合并为一次操作，比如添加1000个节点，dom操作1000次，虚拟dom操作一次
减少dom操作的范围——虚拟dom借助DOM diff可以把多余的操作省掉，比如添加1000个节点，只有10个是新增的，虚拟dom如果发现有一些是在页面里的，那么就只更新那10个
跨平台渲染——虚拟dom本质上是一个js对象，虚拟dom不仅可以变成dom，还可以变成小程序、ios应用、安卓应用。

虚拟dom的缺点：

需要创建函数来创建虚拟dom

我是一个小稻米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是虚拟dom

什么是虚拟dom用js模拟DOM结构是一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听、子元素们详细介绍：数据改变—>虚拟dom（计算属性）—>操作dom—>视图更新当数据改变时，需要去操作dom，但如果有很多数据发生改变，是不可以每一次都操作dom的，那么就推出了虚拟dom的概念，因为js执行的速度是很快的，所以当数据改变的时候，不直接去操作dom，而是先把要进行的改变做一个计算，计算出所有的变更，然后再去操作真实dom。虚拟dom的结构：c
复制链接

扫一扫