虚拟DOM与diff算法----vue面试题虚拟DOM的本质就是json对象 vue更新视图的具体过程: 旧的真实DOM

虚拟DOM的本质就是json对象

vue更新视图的具体过程: 旧的真实DOM-->旧的虚拟DOM-->diff算法-->新的虚拟DOM-->新的真实DOM

新旧虚拟节点之间有哪些不同，需要辨识,可以通过不同的标签元素;在标签不能改变的情况下,也可以通过在标签中添加key值辨别,然后根据对比结果找出需要更新的的节点进行更新

就好比v-for的时候,大体结构都是相似的,需要用key值来进行辨识

通过认识virtual DOM 简单了解虚拟DOM

1.概念

Vue.js通过编译将template 模板转换成渲染函数(render) ，执行渲染函数就可以得到一个虚拟节点树
VNode 虚拟节点：它可以代表一个真实的 dom 节点。通过 createElement 方法能将 VNode 渲染成 dom 节点。简单地说，vnode可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。
patch(也叫做patching算法)：虚拟DOM最核心的部分，它可以将vnode渲染成真实的DOM，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的的节点进行局部更新。这点我们从单词含义就可以看出， patch本身就有补丁、修补的意思，其实际作用是在现有DOM上进行修改来实现更新视图的目的。

就是用一个简单的对象去代替复杂的dom对象。

如果你去打印一下一个真实的DOM节点，就会发现DOM节点上有很多属性，如果Vue每次都生成一个新的真实DOM节点，对性能是巨大的浪费。

Virtual DOM 实际上就是以JavaScript对象（VNode ）为基础形成一棵树，对真实DOM的一层抽象。Vue最终的工作就是通过这棵树批量生成真实的DOM节，可以说两者存在一层映射关系。

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

虚拟DOM在Vue.js主要做了两件事：