Vue_虚拟dom

虚拟DOM的概念

在Vue的底层实现上, Vue将模板编译成虚拟dom渲染函数, 结合Vue自带响应系统, 在状态发生改变时, Vue能够智能的计算重新渲染组件的最小代价并应用到dom操作上, 这也是Vue的核心原理

为什么会使用到虚拟dom

DOM是文档对象模型, 在浏览器中我们通过js操作dom, 所耗费的时间相比较长, 这样性能就很差, 于是Virtual Dom应运而生, Virtual Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路, 也就是Vue使用虚拟dom的概念

在Vue中虚拟dom的实现

1.根据虚拟dom树最初渲染成真实dom
2.当数据变化, 或者说是页面需要重新渲染的时候, 会重新生成一个新的完整的虚拟dom
3.拿新的虚拟dom来和旧的虚拟dom做对比 (使用diff算法) , 得到需要更新的地方之后, 更新内容, 这样的话, 就能大量减少真实dom的操作, 提高性能

Diff算法的步骤

1. 用 javascript 对象结构表示dom树的结构, 然后用这棵树构建一个真正的dom树, 插入到文档当中
2. 当状态发生改变时, 重新构建一颗新的对象树, 然后用新的树跟旧的树进行对比, 纪录两颗树的差异
3. 把两棵树所记录的差异应用到刚开始构建对象树的结构上

Diff算法的应用

比较两颗DOM数的差异是Virtual DOM算法中最为核心的部分，这也就是所谓的Virtual DOM的diff算法。 两个树的完全的diff算法是一个时间复杂度为 O(n3) 的问题。 但是在前端中，你会很少跨层地移动DOM元素，所以真实的DOM算法会对同一个层级的元素进行对比

上图中，div只会和同一层级的div对比，第二层级的只会和第二层级对比。 这样算法复杂度就可以达到O(n)

上面的这个遍历过程就是深度优先，即深度完全完成之后，再转移位置。 在深度优先遍历的时候，每遍历到一个节点就把该节点和新的树进行对比，如果有差异的话就记录到一个对象里面

diff简单代码实现:
在同层进行比较时候会出现四种情况：

1、此节点是否被移除 -> 添加新的节点
2、属性是否被改变 -> 旧属性改为新属性
3、文本内容被改变-> 旧内容改为新内容
4、节点要被整个替换 -> 结构完全不相同 移除整个替换

Editted by: kiat
——还在摸爬滚打中的前端小萌新