1. 介绍

在JS里写好DOM的数据结构，然后通过document.createElement放进页面里，在下次数据更新的时候和之前的数据对比，就可以只更新数据变化的部分，不用整个DOM都更新，提升了性能

2. JS实现DOM

虚拟DOM1.jpeg

虚拟DOM2.jpeg

3. 更新DOM

更新之后的DOM.jpeg

只增加了最后一条，所以只需要更新最后一个span就行

补丁函数（增删改查）.jpeg

这个补丁函数不完美，若只是所有数据换个位置，则它也会替换整个DOM

const root = document.getElementById('root')
let vNode1 = v('div', [v('#text', 'hello')])
patchElement(root, vNode1)

let vNode2 = v('div', [v('#text', 'world')])
patchElement(root, vNode2, vNode1) // 更新

学习笔记（十六）Vue.js源码剖析 - 虚拟DOM
Vue.js源码剖析 - 虚拟DOM 虚拟DOM概念回顾什么是虚拟DOM？虚拟DOM(Virtual DOM)...
理解虚拟 DOM ，React 选择它是为了性能吗？
虚拟 DOM 是什么虚拟 DOM 是 JS 对象虚拟 DOM 是对真是 DOM 的描述虚拟 DOM 的本质是...
Vue.js 源码剖析-虚拟 DOM
什么是虚拟DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象来描述 DOM，虚拟 ...
虚拟dom与直接操作dom
虚拟dom document.createDocumentFragment()创建虚拟dom，然后再将虚拟dom替...
Vue虚拟Dom与diff算法原理
什么是虚拟DOM？真实的元素节点：为什么使用虚拟DOM？虚拟DOM的作用是什么？虚拟DOM和真实DOM的区...
2020-06-09虚拟（Dom）+Diff算发
虚拟Dom 创建虚拟DOM（创建文件element.js>如何创建Dom以及虚拟Dom渲染真实的Dom）主文件（...
虚拟 DOM 和 diff 算法
虚拟 DOM（Virtual DOM）通过 JS 对象表示 DOM 结构，虚拟DOM 是对 DOM 的抽象通常...
React基础篇之虚拟DOM
Hello World JS创建虚拟DOM JSX创建虚拟DOM 虚拟DOM与真实DOM 下一篇：React基础篇...
虚拟dom和diff算法
虚拟DOM和diff算法 diff：精细化比对最小量更新真实DOM和虚拟DOM 虚拟DOM：用JavaScrip...
简述虚拟DOM和diff算法
虚拟DOM 1.虚拟DOM的介绍：虚拟DOM就是一个真实DOM转换的JS对象。2.虚拟DOM的机制：在浏览器端用J...