虚拟DOM

逐渐头冷

已于 2022-04-13 22:57:41 修改

阅读量87

点赞数

文章标签：前端 javascript 开发语言

于 2021-10-26 09:56:51 首次发布

本文链接：https://blog.csdn.net/java_vava2/article/details/119988039

版权

虚拟DOM是一种通过JS对象描述DOM的技术，用于优化重绘和重排，提升前端性能。本文详细介绍了虚拟DOM的使用，包括Snabbdom的安装、初始化、h函数、VNode、patch函数等关键概念，并阐述了其在处理复杂视图和状态管理中的作用。

摘要由CSDN通过智能技术生成

虚拟DOM

通过普通的JS对象来描述DOM对象，解决重绘和重排性能开销问题。
作用：维护视图和状态的关系；复杂视图情况下提升渲染性能；首次渲染会增加开销

使用虚拟DOM

安装Parcel npm i parcel-bundler -D
安装引入snabbdom npm i snabbdom
引入snabbdom中的init 和 h 模块

//通过h函数创建 VNode。h函数第一个参数：标签+选择器；第二个参数：如果是字符串就是标签中的内容
let vNode = h('div#box.container','默认内容')
// 获取挂载元素
const dom = document.querySelector('#app')
// 通过init 函数得到patch函数，patch函数第一个参数：旧的VNode，可以是DOM元素，第二个参数是新的VNode，返回新的Vnode
const patch = init([])
// 通过patch,将vNode渲染到Dom
let oldvNode = patch(dom, vNode)
// 创建新的vNode，更新给oldVnode
vNode = h('div#vNode','这是p标签的内容')// 包含单个节点的vNode
v