[Vue][面试]你怎么理解vue中的diff算法？

2024-05-11 15:40:47

你怎么理解vue中的diff算法？

#####源码分析1：必要性，lifecycle.js–mountComponent()
vue中一个组件一个watcher实例，而组件中可能存在很多个data中的key的使用，为了精确地知道更新过程中到底哪里发生了变化，必须使用diff算法
#####源码分析2：执行方式，patch.js–patchVnode()
patchVnode是diff发生的地方，整体方案：深度优先，同层比较
#####源码分析3：高效性，patch.js–updateChildren()
算法优化点，先首位判断，再顺序判断更新

结论（WWWH）

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；
另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。(what)

2.vue2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。(why)

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称为patch。(where)

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；(How)
比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；
借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

[Vue][面试]你怎么理解vue中的diff算法？相关推荐

JS每日一题:Vue中的diff算法？
20190125 Vue中的diff算法? 概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有di ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
React中的Diff算法——Christopher Chedeau（原文翻译）
React's diff algorithm是了解React中的Diff算法必读的文章之一,以下内容是我在阅读过程中边看边翻译的,非科班渣翻请谅解.强烈建议阅读英文原文. 原文地址: React's ...
vue中的diff算法
一.是什么diff算法先来一句概念: diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom. 换句人话 diff的过程就 ...
Vue源码终笔-VNode更新与diff算法初探
写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...
【面试】以面试者的角度回答Vue中的diff算法（附图示diff运算过程）
文章目录面试者角度回答图示diff运算过程掘金同人账号:
for vue 一行2列_前端开发面试问什么？vue面试中经常问到的问题？用vue想拿20k，面试题要这样答！...
找工作,是一件愁人又具有期待的事情,前端开发的小伙伴们,最近有人参加面试了吗?面试前端开发时,一般会被问什么?你还记得吗?你的回答让你找到满意的工作了吗?生活是美好的,未来是可期的,工作是可以找到的, ...
vue面试题目（更新版）
vue面试题目 vue数据 1. 说一下Vue的双向绑定数据的原理 2. 解释单向数据流和双向数据绑定 3. Vue 如何去除url中的 4. 对 MVC.MVVM的理解 5. 介绍虚拟DOM 6. ...
【Vue面试专题】50+道经典Vue面试题详解！
目录前言相关学习资源 01-Vue组件之间通信方式有哪些 02-v-if和v-for哪个优先级更高? 03-能说一说双向绑定使用和原理吗? 04-Vue中如何扩展一个组件 05-子组件可以直接改变 ...

最新文章

热门文章