你真的懂vue的响应式，虚拟DOM ，diff算法吗

不会打代码的飞仔

已于 2022-07-15 17:12:49 修改

阅读量97

点赞数 1

分类专栏：知识分享文章标签：前端框架 vue.js

于 2022-07-15 17:10:06 首次发布

原文链接：https://juejin.cn/post/7097067108663558151

版权

知识分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于这几道道面试必问题，我也是经常搞不明白，直道看了这篇博客之后，恍然大悟啊！！！！

一。说一说你对vue响应式理解？

答题思路：

啥是响应式？
为什么vue需要响应式？
它能给我们带来什么好处？
vue的响应式是怎么实现的？有哪些优缺点？
vue3中的响应式的新变化
所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。
以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度。
vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采用Object.defineProperty()的方式定义数据拦截，当数据被访问或发生变化时，我们感知并作出响应；如果是数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而作出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化时的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map、Set这些数据结构不支持等问题。
为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是一致的，不需要使用特殊api，初始化性能和内存消耗都得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了。

二。说说你对虚拟 DOM 的理解？

分析

现有框架几乎都引入了虚拟 DOM 来对真实 DOM 进行抽象，也就是现在大家所熟知的 VNode 和 VDOM，那么为什么需要引入虚拟 DOM 呢？围绕这个疑问来解答即可！

思路

vdom是什么引入vdom的好处 vdom如何生成，又如何成为dom 在后续的diff中的作用

回答范例

虚拟dom顾名思义就是虚拟的dom对象，它本身就是一个 JavaScript 对象，只不过它是通过不同的属性去描述一个视图结构。
vdom如何生成？在vue中我们常常会为组件编写模板 - template，这个模板会被编译器 - compiler编译为渲染函数，在接下来的挂载（mount）过程中会调用render函数，返回的对象就是虚拟dom。但它们还不是真正的dom，所以会在后续的patch过程中进一步转化为dom。
挂载过程结束后，vue程序进入更新流程。如果某些响应式数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而转换为最小量的dom操作，高效更新视图。
通过引入vdom我们可以获得如下好处：

将真实元素节点抽象成 VNode，有效减少直接操作 dom 次数，从而提高程序性能
- 直接操作 dom 是有限制的，比如：diff、clone 等操作，一个真实元素上有许多的内容，如果直接对其进行 diff 操作，会去额外 diff 一些没有必要的内容；同样的，如果需要进行 clone 那么需要将其全部内容进行复制，这也是没必要的。但是，如果将这些操作转移到 JavaScript 对象上，那么就会变得简单了。
- 操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象 VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。
方便实现跨平台
- 同一 VNode 节点可以渲染成不同平台上的对应的内容，比如：渲染在浏览器是 dom 元素节点，渲染在 Native( iOS、Android) 变为对应的控件、可以实现 SSR 、渲染到 WebGL 中等等
- Vue3 中允许开发者基于 VNode 实现自定义渲染器（renderer），以便于针对不同平台进行渲染。
  
  三。你了解diff算法吗？
  
  分析
  
  必问题目，涉及vue更新原理，比较考查理解深度。
  
  思路
- diff算法是干什么的
- 它的必要性
- 它何时执行
- 具体执行方式
- 拔高：说一下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
- vue3中引入的更新策略：编译期优化patchFlags、block等
  
  作者连接：历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！ - 掘金
  作者：杨村长（良心博主，推荐+++++1）