VUE虚拟DOM底层原理

虚拟DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

操作 DOM 慢，js运行效率高。将DOM对比操作放在JS层，提高效率。因为DOM操作的执行速度远不如Javascript的运算速度快，把大量的DOM操作搬运到Javascript中，运用算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。

虚拟dom:

简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。来描述页面dom树。不同的框架对这三个属性的命名会有点差别。

Vue就是借鉴snabbdom.js进行开发

snabbdom.js:Snabbdom 是一个虚拟 DOM 库，专注提供简单、模块性的体验，以及强大的功能和性能。

安装snabbdom.js

npm install snabbdom

复制使用引用代码

import { init } from 'snabbdom/build/init'
import { classModule } from 'snabbdom/build/modules/class'
import { propsModule } from 'snabbdom/build/modules/props'
import { styleModule } from 'snabbdom/build/modules/style'
import { eventListenersModule } from 'snabbdom/build/modules/eventlisteners'
import { h } from 'snabbdom/build/h' // helper function for creating vnodes

let patch = init([ // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
])

方法 ：

h ( "标签" , { props : { 属性名 : 属性值 } } , [子节点] ) ：创建虚拟dom；

patch ( 旧的dom，新的虚拟dom ) ：虚拟dom替换旧的dom；

//空容器
let container = document.getElementById('wrap');
//创建vnode
const vnode_ul = h('ul',{},[
  h('li',{},'张三'),
  h('li',{},'李四'),
]);

//vnode ==> 容器
patch(container, vnode_ul);

btn.addEventListener('click',()=>{
  const new_vnode_ul = h('ul', {}, [
    h('li', {}, '张三'),
    h('li', {}, '李四'),
    h('li', {}, '王五'),
    h('li', {}, '赵四'),
  ]);
  patch(vnode_ul,new_vnode_ul);
});