千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

p16

一、什么是Vue.$nextTick()

官方给的解释为：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

使用场景使用场景

1. 在created()中进行dom操作。
2. 等待新的dom元素渲染完毕后执行的操作。

我的理解为：nextTick()是将回调函数延迟在dom更新数据后调用，就是当数据更新后且dom渲染后，再自动执行该函数

二、$nextTick知道吗？实现的原理是什么？是红任务还是微任务？

·微任务

·原理:

·nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列。

·作用: nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick,则可以在回调中获取更新后的DOM。

2）虚拟dom为什么会提高性能?

虚拟DOM其实就是一个JavaScript对象。通过这个avaScript对象来描述真实DOM，真实DOM的操作，一般都会对某块元素的整体重新渲染，采用虚拟DOM的话，当数据变化的时候，只需要局部刷新变化的位置就好了，虚拟DOM相当于在js和真实DOM，DOM加了一个缓存，利用DOM diff算法避免了没有必要的DOM操作，从而提高性能

具体实现步骤如下

(1)用Javascript对象结构表示DOM树的结构;然后用这个树构建一个真正的DOM树，插到文档当中

(2)当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

(3)把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新。

三、虚拟DOM为什么会提高性能

1、

• 真实dom节点比较臃肿。对它的访问和修改都像要访问和修改一个大型object一样。object存储在堆。占用空间越大访问性能越低。
• dom和js不是一个模块。跨模块访问性能低。
• 不高级的dom操作会引起频繁的回流。回流可能牵连甚广。性能低。
• 虚拟dom并不是摒弃真实dom操作（曾经有只使用canvas的思想完全不用dom）。而是尽量减少操作。在没有虚拟dom思想之前。也会有很多规范来进行优化减少dom操作。比如统一处理一次回流、比如fragment。后来就有类似vue react框架用虚拟dom的思想来减少真实dom的操作。

2、为什么一定要用虚拟dom？

    你用传统的原生api或jquery去操作dom时，浏览器会从构建dom树开始，从头到尾执行一遍流程。

真实dom的执行流程：用js对象表示真实的dom结构，当状态发生变化的时候，会重新创建一个虚拟dom树的结构，然后用新的树和旧的树进行比较，记录两颗树的差异，把所记录的差异应用到所构建的真实的dom树上，视图就更新了。

概括来说：模板——>渲染函数——>虚拟dom树——>真实dom。

3、vue的虚拟dom是怎样的执行流程？

    vue.js是通过编译将模板渲染成函数，执行函数可以得到一个虚拟节点。在对dom进行操作的时候，会触发对应的dep中的watcher对象。wacther对象会调用对应的update来修改视图。

4、虚拟dom实现的原理三部分？

    用javascript对象模拟真实的dom树，对dom进行抽象。

    diff算法——比较两个虚拟dom树的差异

    pach算法——将两个虚拟dom对象的差异更新到真实的dom树。（pathc也叫patching，算法，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果，找出需要更新的节点进行更新。）

5、虚拟dom的好处？

    降低浏览器的性能的消耗：javascript的运行速度远大于dom操作的执行速度，因此，运行patching算法来计算出真正的需要更新的节点，最大限度地减少了dom操作。

四、Vue模板（remplate）的编译过程

定义： 在Vue.js中，编译过程将Vue模板转换为渲染函数，该渲染函数用于生成虚拟DOM并最终呈现在浏览器中。

下面是Vue模板编译的简要过程：

解析：编译器首先会对Vue模板进行解析，将模板字符串解析为抽象语法树（AST）。AST是一种以对象的形式表示模板结构的数据结构。

静态分析： 在此阶段，编译器会对AST进行静态分析，收集模板中的所有静态节点（不依赖组件实例数据的节点）。这样的静态节点可以在每次重新渲染时重复使用，从而提高性能。

优化：

1. 编译器会对AST进行一些优化处理，例如标记静态根节点、检测静态子树等。这些优化手段可以进一步提高渲染性能。
2. 代码生成： 在这个阶段，编译器会根据AST生成渲染函数。渲染函数是一个函数，它接收一个参数（称为渲染上下文）并返回一个虚拟DOM树。渲染函数可以根据渲染上下文的数据动态地生成虚拟DOM。
3. 生成虚拟DOM： 当组件需要重新渲染时，Vue会调用渲染函数生成新的虚拟DOM树。渲染函数会根据当前的渲染上下文数据生成虚拟DOM节点，并对比前后两次渲染的虚拟DOM树，找出差异。
4. 打补丁： 在找出差异后，Vue会根据差异生成最小的DOM操作序列，并将这些操作应用到实际的DOM上，从而更新视图。这个过程称为打补丁（patch）。

总结： Vue的模板编译过程包括解析模板生成抽象语法树（AST），静态分析优化AST，生成渲染函数，然后通过渲染函数生成虚拟DOM树，并通过打补丁的方式将变更应用到实际的DOM上。这个过程使得Vue能够高效地进行响应式的数据更新和视图渲染。

五、认识vue3

Vue 3 是 Vue.js 的最新版本，它是一个用于构建用户界面的渐进式 JavaScript 框架。从专业工程师的角度来看，Vue 3 带来了许多重要的改进和新特性，这些特性使得开发更加高效和灵活。以下是 Vue 3 的一些主要特点：

1. 性能改进：Vue 3 在性能方面进行了大量优化，包括更小的框架大小、更快的虚拟 DOM 和更高效的组件更新。这意味着 Vue 3 应用程序将加载得更快，运行得更快，从而为用户提供更好的体验。

2. Composition API：Vue 3 引入了一种新的 API，称为 Composition API，它提供了一种更灵活、更可组合的方式来组织和重用代码。与 Vue 2 的 Options API 相比，Composition API 使得在大型项目中管理和共享状态更加容易。

3. 更好的 TypeScript 支持：Vue 3 的源代码完全用 TypeScript 重写，这意味着 Vue 3 与 TypeScript 的集成更加紧密，为开发者提供更好的类型检查和编辑器支持。

4. 多平台支持：Vue 3 的架构更加模块化，使得它可以更容易地适应不同的平台，如 Web、移动设备和桌面应用程序。这使得 Vue 3 成为跨平台应用程序开发的理想选择。

5. 新的指令 API：Vue 3 引入了一种新的指令 API，使得创建自定义指令更加简单和一致。新的指令 API 还提供了更好的性能，因为它们可以在编译时进行优化。

6. 更多的内置组件：Vue 3 提供了一些新的内置组件，如 <teleport> 和 <suspense>，这些组件可以帮助开发者更容易地实现一些常见的 UI 模式和功能。

总之，Vue 3 是一个功能强大、灵活且高性能的前端框架，它为开发者提供了许多新的工具和特性，以帮助他们更高效地构建和维护复杂的应用程序。从专业工程师的角度来看，Vue 3 是一个值得关注和学习的重要技术