虚拟DOM

| 2024-08-17

虚拟 DOM 笔记

1. 概念

JS 对象表示真实 DOM 的结构
减少直接操作 DOM 提升性能

2. 原理

创建虚拟节点树（VNode）
数据更新 -> 生成新 VNode 树
对比旧树 -> 生成最小差异 patch
patch 应用到真实 DOM

3. 示例

const vnode = {
    tag: 'div',
    props: { id: 'app' },
    children: [
        { tag: 'span', children: ['Hello'] }
    ]
}