diff算法_前端学习，五分钟带你看懂Virtual DOM及diff算法在vue中的应用

用过vue、React的同学一定都听过Virtual DOM（虚拟dom）及diff算法，它们给人的感觉就是深奥难懂。但大厂面试vdom(以下Virtual DOM都简称为vdom)、diff算法是绕不过去的一道坎。今天为大家揭开vdom、diff算法的神秘面纱。。

最近自己也去面试了几家公司，写了两篇前端面经，希望对大家找工作有帮助

灰蓝宇墨：金9银10前端一面面经(含前端面试题答案）​zhuanlan.zhihu.com

什么是vdom

vdom是一种使用js对象来描述真实DOM的技术，通过这种技术,们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。

snabbdom.js

vdom是通过snabbdom.js库实现的,大概过程有以下三步：

1. compile（把真实DOM编译成Vnode）
2. diff（利用diff算法，比较oldVnode和newVnode之间有什么变化）
3. patch（把这些变化用打补丁的方式更新到真实dom上去）

接下来为大家详细介绍snabbdom的两个核心函数h()、patch()

snabbdom - h 函数

h( ) 函数主要根据传进来的参数，返回一个 vnode（虚拟节点） 对象

h(‘<标签名>’, {…属性…}, ‘值’)，如果值为子元素，则可以在h()函数中嵌套h(‘<标签名>’, {…属性…}, […子元素…])。

snabbdom - patch 函数

patch()函数的两种使用

• patch(container, vnode) //将虚拟dom渲染成真实的dom

简易的实现原理

• patch(vnode, newVnode) //利用diff算法比较新旧vnode之间的差异

简易的实现原理

diff算法

什么是diff算法？

diff算法很早就存在了，一开始diff算法是用来计算出两个文本的差异。所以大家一定要明确，diff算法并不是react或者vue原创的，它们只是用diff算法来比较两个vnode的差异，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

vdom中是在patch(vnode, newVnode)比较新旧函数时会用到diff

以下是patch（）函数的核心代码分析

function 

这个函数做了以下事情：

1. 找到对应的真实dom，称为el
2. 判断Vnode和oldVnode是否完全相同，如果是，那么直接return
3. 如果他们都有文本节点并且不相等，则更新el的文本节点
4. 如果oldVnode有子节点而Vnode没有，则删除el的子节点
5. 如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el
6. 如果两者都有子节点，则执行updateChildren函数比较子节点

updateChildren 函数比较复杂，感兴趣的同学可以去了解下源码。需要vue源码解析的电子书及视频的可以留言，我发给大家

vue的整体流程

1. 第一步：解析模板成 render 函数
2. 第二步：响应式开始监听
3. 第三步：首次渲染，显示页面，且绑定依赖
4. 第四步：data 属性变化，触发 rerender

最近在整理vue源码学习的资料，以后会出一篇详细的vue整体流程分析文章（包含一切vue原理的面试知识点），希望能早日与各位见面

最近上新了一篇，前端开发学习过程中自己的独家好书推荐，按入门到进阶的顺序排列，无论你是出于哪个开发阶段，总有一本适合你的。

灰蓝宇墨：前端开发学习过程中自己的独家好书推荐​zhuanlan.zhihu.com

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更好的文章

关注公众号前端码头，获取独家学习路线+精品课程，更多前端小干货等着你喔