虚拟dom
1.什么是虚拟dom？
虚拟dom就是真实的dom的抽象，用对象作为一个基础的树， 用对象的属性来描述树的节点，经过一系列渲染到真是环境上。
虚拟dom就是一个obj对象，她至少包括标签名，属性，和子元素对象。
在 Vue.js 中， VNode是构建虚拟 DOM 树的基本单位，它包含了描述 DOM 结构的各种信息，例如节点的标签名、节点的属性、子节点等。
创建虚拟dom就是更好的将虚拟节点渲染到视图上。因为：
2.为什么要使用虚拟dom？
因为浏览器操作dom节点开销很大，频繁操作会造成页面的卡顿，
比如说：
使用jquery和原生的api操作dom，那么浏览器会从构建dom树就开始从到到尾一一执行，
当你操作一次，有10节点需要更新，浏览器更新第1个的时候，不知道后面有9个节点还要更新，就会执行10次流程。
但是通过vnode，虚拟dom不会立即更新dom，而是会20次更新后把他的diff保存到js对象中，然后把把10次更新attach到dom树上，避免大量无谓的计算。
3.怎么实现虚拟dom
createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个VNode，这样就形成了一个虚拟树结构，用于描述真实的DOM树结构
4.diff算法
5.vNode
在 Vue.js 中， VNode是构建虚拟 DOM 树的基本单位，它包含了描述 DOM 结构的各种信息，例如节点的标签名、节点的属性、子节点等。
使用 VNode：
在 Vue.js 中，VNode 主要由 Vue.js 内部的虚拟 DOM 算法创建和管理，一般情况下，我们不需要直接操作 VNode，而是通过 Vue.js 的模板语法编写视图，Vue.js 会自动生成相应的 VNode。
然而，有时我们可能需要手动创建 VNode 对象，例如在自定义指令、自定义渲染函数或者编写插件时可能会用到。此时，可以使用 Vue 的 createElement 函数手动创建 VNode 对象。
总之，VNode 是 Vue.js 中用于描述虚拟 DOM 树的一个重要概念，它为 Vue.js 实现了高效的 DOM 更新算法提供了基础。
在 Vue.js 中，一系列操作指的是将虚拟 DOM 树映射到真实 DOM 的过程，这个过程通常包括以下几个主要步骤：
1.创建 VNode 树：
首先，Vue.js 根据组件的模板或者 render 函数生成虚拟 DOM 树，每个节点都是一个 VNode 对象，描述了真实 DOM 的结构。
3.更新 VNode 树：
当 Vue 组件的状态发生变化时，或者父组件重新渲染时，Vue 会重新生成一颗新的 VNode 树。这个新的 VNode 树会与之前的 VNode 树进行比较，找出两棵树之间的差异。
5.比较差异：
Vue.js 的虚拟 DOM 算法会比较新旧两棵 VNode 树之间的差异，找出哪些地方需要更新、删除或者新增 DOM 节点。
7.生成更新补丁：
将差异比较的结果抽象成一系列的更新操作，称为补丁（patch），这些补丁描述了如何将旧的 VNode 树更新到新的 VNode 树。
9.应用更新补丁：
Vue.js 将这些补丁应用到真实的 DOM 上，通过一系列的 DOM 操作（添加、修改、删除节点）来实现新旧 VNode 树的同步。
11.渲染真实 DOM：
最终，通过以上操作，Vue.js 将虚拟 DOM 树中的更新映射到真实的 DOM 上，从而实现页面的更新和重绘。
这一系列操作在 Vue.js 内部自动完成，开发者无需手动操作。Vue.js 的虚拟 DOM 算法会尽可能地优化这些操作，以提高页面渲染的性能和效率。通过虚拟 DOM 的这种方式，Vue.js 实现了高效的页面更新，提高了开发效率，同时也保证了页面的性能。