标签：区别 virt item 1 键值对 dom 相关 blank 不同 ops
一、DOM对象和JS对象的区别
DOM对象是浏览器提供的前端api，相对于DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来：
var element = { tagName: ‘ul‘, // 节点标签名 props: { // DOM的属性，用一个对象存储键值对 id: ‘list‘ }, children: [ // 该节点的子节点 {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 1"]}, {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 2"]}, {tagName: ‘li‘, props: {class: ‘item‘}, children: ["Item 3"]}, ] }
上面js对应的html写法是：
<ul id=‘list‘> <li class=‘item‘>Item 1</li> <li class=‘item‘>Item 2</li> <li class=‘item‘>Item 3</li> </ul>
因此，原生的DOM树可以用js对象来表示，反过来，js对象也可以构建出虚拟的DOM树。
“这就是所谓的 Virtual DOM 算法。包括几个步骤：
Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。”
这是相关的算法实现。
二、最终虚拟dom的实现过程：
// 1. 构建虚拟DOM var tree = el(‘div‘, {‘id‘: ‘container‘}, [ el(‘h1‘, {style: ‘color: blue‘}, [‘simple virtal dom‘]), el(‘p‘, [‘Hello, virtual-dom‘]), el(‘ul‘, [el(‘li‘)]) ]) // 2. 通过虚拟DOM构建真正的DOM var root = tree.render() document.body.appendChild(root) // 3. 生成新的虚拟DOM var newTree = el(‘div‘, {‘id‘: ‘container‘}, [ el(‘h1‘, {style: ‘color: red‘}, [‘simple virtal dom‘]), el(‘p‘, [‘Hello, virtual-dom‘]), el(‘ul‘, [el(‘li‘), el(‘li‘)]) ]) // 4. 比较两棵虚拟DOM树的不同 var patches = diff(tree, newTree) // 5. 在真正的DOM元素上应用变更 patch(root, patches)
参考文献：https://www.zhihu.com/question/29504639/answer/73607810
标签：区别 virt item 1 键值对 dom 相关 blank 不同 ops
原文地址：https://www.cnblogs.com/bbcfive/p/12209836.html
