vue虚拟dom实现

vue和react使用虚拟dom原因，以及实现原理

virtual dom 是通过js实现的，将原本复杂的DOM操作全部放到virtual dom 中，执行速度会比真实的DOM操作要快，直接提高了效率和性能。

Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中，Virtual DOM 是用 VNode 这么一个 Class 去描述

其实 VNode 是对真实 DOM 的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的。

Virtual DOM 除了它的数据结构的定义，映射到真实的 DOM 实际上要经历 VNode 的 create、diff、patch等过程。那么在 Vue.js 中，VNode 的 create 是通过之前提到的 createElement 方法创建的

vue官网说虚拟dom是通过对真实的DOM发生的变化保持追踪

return createElement()并非真正的返回一个真实的DOM元素，而是告诉Vue页面上需要渲染一个什么节点和子节点，我们把这样的节点成为虚拟节点，虚拟DOM是我们对由Vue组件树建立起的整个vnode树的称呼。

virtual dom 设计思想：

• 提供一种方便的工具，使得开发效率得到保证

• 保证最小化的DOM操作，使得执行效率得到保证

实现步骤：

1. 用js表示DOM结构
2. 比较两个虚拟DOM树的差异
3. 对真实DOM进行最小量的修改

vue技术揭秘 参考链接1

参考链接2