Skip to content

Latest commit

 

History

History
54 lines (29 loc) · 2.27 KB

README.md

File metadata and controls

54 lines (29 loc) · 2.27 KB

你了解vue中的diff算法吗？

题目分析：vue基于虚拟DOM做更新，diff又是其核心部分，因此常被问道，此题考查面试者深度。

分析

必问题目，涉及vue更新原理，比较考查理解深度。

思路

  1. diff算法是干什么的
  2. 它的必要性
  3. 它何时执行
  4. 具体执行方式
  5. 拔高：说一下vue3中的优化

回答范例

1.Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换。

2.最初Vue1.x视图中每个依赖均有更新函数对应，可以做到精准更新，因此并不需要虚拟DOM和patching算法支持，但是这样粒度过细导致Vue1.x无法承载较大应用；Vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，此时就需要引入patching算法才能精确找到发生变化的地方并高效更新。

3.vue中diff执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行render函数获得最新的虚拟DOM，然后执行patch函数，并传入新旧两次虚拟DOM，通过比对两者找到变化的地方，最后将其转化为对应的DOM操作。

4.patch过程是一个递归过程，遵循深度优先、同层比较的策略；以vue3的patch为例：

  • 首先判断两个节点是否为相同同类节点，不同则删除重新创建
  • 如果双方都是文本则更新文本内容
  • 如果双方都是元素节点则递归更新子元素，同时更新元素属性
  • 更新子节点时又分了几种情况：
    • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
    • 新的子节点是文本，老的子节点是文本则直接更新文本；
    • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
    • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla
  1. vue3中引入的更新策略：编译期优化patchFlags、block等

知其所以然

patch关键代码

https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/renderer.ts#L354-L355

调试