【校招VIP】前端校招考点之vue重排与重绘-diff

考点介绍：

Vue.js是通过数据劫持以及结合发布者-订阅者来实现双向绑定的，数据劫持是利用ES5的Object.defineProperty(obj, key, val)来劫持各个属性的的setter以及getter，在数据变动时发布消息给订阅者，从而触发相应的回调来更新视图。

本期分享的内容分为试题、文章及视频三部分，答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

1、 diff 算法是什么？ 

解答： Vue 和 React 都是基于 vdom 的前端框架，组件渲染会返回 vdom，渲染器再把 vdom 通过增删改的 api 同步到 dom ......

2、 Vue Diff算法的原因以及目的 

解答：Vue diff算法是vue2中引入虚拟DOM的产物，它的出现是为了通过对比新旧节点计算出需要改动的最小变化.....

3、 什么是虚拟DOM和diff算法 

解答：虚拟DOM就是用来表示真实dom的对象，vue通过模版编译生成虚拟DOM树，然后在通过渲染器渲染成真实DOM,当数据更新时，产生新的虚拟dom树，如果直接用新的虚拟DOM树生成真实DOM并不是最优的方法。为了进一步降低找出差异的性能的性能消耗，就要使用diff算法 .....

4、 vue2 和 vue3 diff 算法的区别 

解答：vue2是全量进行diff,而vue3使用了静态标记,只对打标记的节点进行diff。vue2中的虚拟dom是进行全量的对比，在运行时会对所有节点生成一个虚拟节点树，当页面数据发生变更好.....

二、考点文章

1、 【校招VIP】Vue2 VS Vue3 Diff算法的比较 

传统的计算两颗树的差异时间复杂度为O(n^3),显然成本比较高（老树的每一个节点都去遍历新树的节点，直到找到新树对应的节点。那么这个流程就是 O(n^2)，再紧接着找到不同之后，再计算最短修改距离然后修改节点，这里是 O(n^3)。）……

2、 【校招VIP】vue核心面试题：diff算法 

两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问题(只比较同级不考虑跨级问题)，因为在前端操作dom的时候了，不会把当前元素作为上一级元素或下一级元素，很少会跨越层级地移动Dom元素，常见的都是同级的比较。 所 以 Virtual Dom只会对同一个层级的元素进行对比……

3、 【校招VIP】一文教会你何为重绘、回流？ 

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。也就是我们各种各样的Dom标签……

三、考点视频

1、前端考点JavaScript事件循环机制要点概括

js事件循环机制是前端面试几乎必被问到的一个考点，涉及到的知识点比较多，需要对比理解和掌握。主要包括三部分：JavaScript本身是单线程，非阻塞的；浏览器的事件循环；node环境下的事件循环…...

相关题目及解析内容可点击下方链接查看：
移动端链接：https://m.xiaozhao.vip/dTopic/detail/1365
PC端链接：https://xiaozhao.vip/dTopic/detail/1365