1.直接操作DOM是很消耗性能的，会频繁触发重绘回流，且在浏览器上有一次DOM改变就操作一次，很有可能前面和后面所作的改变是冲突的，那前面做的那次改变就是无意义的。虚拟DOM是批处理的，完成后才会只触发一次重绘回流。
 2.比较差异，以最小的代价去操作DOM，提高无用的消耗
 总结一下就是高性能，低代价

复杂场景下，可以提高性能
虚拟dom中的patch函数可以传递不同平台的api，即虚拟dom优点之一是可以跨平台。

虚拟DOM优点
 
减少DOM操作
 
虚拟 DOM 可以将多次操作合并为一次操作，比如你添加 1000 个节点，却是一个接一个操作的（减少频率）
虚拟 DOM 借助 DOM diff 可以把多余的操作省掉，比如你添加 1000 个节点，其实只有 10 个是新增的（减少范围）
 
跨平台
 
虚拟 DOM 不仅可以变成 DOM，还可以变成小程序、iOS 应用、安卓应用，因为虚拟 DOM 本质上是一个 JS 对象
 
React虚拟DOM
 
// React
const vNode = {
  key: null,
  props: {
    children: [  // 子元素们
       { type: 'span', ... }, 
       { type: 'span', ... }
    ],
    className: "red" // 标签上的属性
    onClick: () => {} // 事件
  },
  ref: null,
  type: "div", // 标签名 or 组件名
  ...
}
 
Vue虚拟DOM
 
// Vue
const vNode = {
  tag: "div", // 标签名 or 组件名
  data: {
    class: "red", // 标签上的属性
    on: {
      click: () => {} // 事件
    }
  },
  children: [ // 子元素们
    { tag: "span", ... },
    { tag: "span", ... }
  ],
  ...
}
 
如何创建虚拟DOM
 
// React.createElement
createElement('div',{className:'red',onClick:()=> {}},[
    createElement('span', {}, 'span1'),
    createElement('span', {}, 'span2')
  ]
)
// Vue（只能在 render 函数里得到 h）
h('div', {
  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])
 
使用JSX简化
 
// React JSX
<div className="red" onClick="{()=> {}}">
    <span>span1</span>
    <span>span2</span>
</div>
// Vue Template
h('div', {
  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])
 
// React
<div className="red" onClick={fn}>
    <span>span1</span>
    <span>span2</span>
</div>
// 通过 babel 转为 createElement 形式
// Vue Template
<div class="red" @click="fn">
  <span>span1</span>
  <span>span2</span>
</div>
// 通过 vue-loader 转为 h 形式
 
// 现在创建虚拟 DOM 的方法
// React
<div className="red" onClick={fn}>
    <span>span1</span>
    <span>span2</span>
</div>
// 通过 babel 转为 createElement 形式
// Vue Template
<div class="red" @click="fn">
  <span>span1</span>
  <span>span2</span>
</div>
// 通过 vue-loader 转为 h 形式
 
总结
 
虚拟 DOM 是什么
 
虚拟dom的本质一个能代表dom树的JS对象，包含tag、props、children三个属性
通常含有标签名、标签上的属性、事件监听和子元素们，以及其他属性
 
虚拟 DOM 有什么缺点
 
需要额外的创建函数，如 createElement 或 h，但可以通过 JSX 来简化成 XML 写法,会依赖打包工具。
 
DOM diff
 
/* 
 什么是 DOM diff
 就是一个函数，我们称之为 patch
 patches = patch(oldVNode, newVNode)
 patches 就是要运行的 DOM 操作，可能长这样：
*/
[
  {type: 'INSERT', vNode: ... },
  {type: 'TEXT',  vNode: ... },
  {type: 'PROPS', propsPatch: [...]}
]
 
Tree diff
 
将新旧两棵树逐层对比，找出哪些节点需要更新
如果节点是组件就看 Component diff
如果节点是标签就看 Element diff
 
Component diff
 
如果节点是组件，就先看组件类型
类型不同直接替换（删除旧的）
类型相同则只更新属性
然后深入组件做 Tree diff（递归）
 
Element diff
 
如果节点是原生标签，则看标签名
标签名不同直接替换，相同则只更新属性
然后进入标签后代做 Tree diff（递归）
 
存在一些小小的问题
 
 
 
DOM diff在同层级对比中有bug。造成页面渲染错误。
 同一层级的一组节点可以通过唯一的id进行区分, 所以可以给节点设定唯一的key。
 从而消除bug。key只能是number和string类型，一定不要用index作为key值。
 

 
虚拟DOM相关整理
 
1.什么是虚拟DOM操作，优缺点什么
1.1虚拟DOM优点：
1.1.1 减少DOM操作
1.1.2 跨平台
    
1.2虚拟DOM缺点：
   
2.什么是DOM diff
 


 本章内容，是看过B站视频
面试大厂必问：虚拟DOM与DOM Diff 的原理之后自己整理的，只用于自己知识的补充。

 通常说的，DOM操作慢，是对比于JS原生API，如数组操作。
 
1.什么是虚拟DOM操作，优缺点什么
 
虚拟DOM是一个能代表DOM树的对象，通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性。
 
1.1虚拟DOM优点：
 
虚拟DOM优点：减少DOM操作，跨平台
 
1.1.1 减少DOM操作
 
1）虚拟DOM可以将多次操作合并为一次操作，比如：你添加1000个节点，js原生是一个一个添加的，而虚拟DOM是一次性添加到页面上，本质减少DOM操作的次数；
 2)虚拟DOM借助DOM diff可以把多余的操作省掉，比如你添加1000个节点，其中只有10个是新增的，通过diff算法发现其中990个是之前页面就有的，只有10个是新增的，那么就只会新增10个，本质减少了dom操作的范围。
 
1.1.2 跨平台
 
虚拟DOM 不仅可以应用于浏览器，小程序，安卓应用，IOS应用都可以使用，虚拟DOM本质上是一个JS对象。
 
1.2虚拟DOM缺点：
 
需要额外的创建函数，react(creatElement) vue(h),但可以通过JSX/vue-loader 进行转义成XML写法。(缺点:过分依赖打包工具)
 
2.什么是DOM diff
 
就是一个函数，称之为patch
 
const patches = patch(oldVnode,newVnode) 
 
patches 就是要运行的DOM操作，插入，修改内容，更新属性等。
 
DOM diff主要逻辑：
 Tree diff
 将新旧两棵树进行逐层对比，找出哪些节点需要更新；
 如果节点是组件就看 Component diff;
 如果节点是标签就看Element diff;
 Component diff
 如果节点是组件，就先看组件类型；
 如果类型不同直接替换,类型相同则只更新属性；
 然后深入组件做Tree diff ;
 Element diff
 如果节点是原生标签，则看标签名；
 标签名不同则直接替换，相同则只更新属性；
 然后进入标签做Tree diff.