面试 Vue 框架八股文十问十答第三期

面试 Vue 框架八股文十问十答第三期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）Vue 中的 key 的作用

在 Vue 中，key 是用于给 Vue 识别节点的特殊属性。当 Vue 将数据渲染为虚拟 DOM 时，key 的作用是帮助 Vue 识别节点的标识，以便在数据更新时，高效地重新渲染节点而不是销毁和重新创建。它有助于 Vue 识别每个节点的唯一性，避免重新渲染整个列表。

2）为什么不建议用 index 作为 key?

在 Vue 中，不建议使用索引作为 key 是因为索引可能不稳定。如果列表数据发生变化，可能会导致节点重新排序，但使用索引作为 key 会使得 Vue 错误地识别节点，导致不必要的更新，甚至渲染错误。最好使用具有唯一标识符的属性作为 key。

3）为什么 v-for 和 v-if 不能一起使用

在同一个元素上同时使用 v-for 和 v-if 可能会导致预期之外的结果。v-for 指令优先级高于 v-if，这意味着 v-if 将被执行多次，可能造成性能问题。通常情况下，应该尽量避免在同一元素上同时使用 v-for 和 v-if。如果必须这样做，可以考虑在父级元素上使用 v-if 来过滤整个列表。

4）双向数据绑定的原理

Vue.js 使用了响应式数据的概念来实现双向数据绑定。它通过 Object.defineProperty 或 Proxy 来监听数据的变化，当数据发生变化时，视图会自动更新；反之，当用户与视图交互时，数据也会更新。

5）使用 Object.defineProperty() 来进行数据劫持有什么缺点？

Object.defineProperty() 是 Vue 早期版本用于实现数据响应式的方式。它有一些限制和缺点，比如不能监听数组的变化（需要额外的处理）；还有就是需要递归地遍历对象的每个属性进行劫持，性能开销较大；此外，在旧版浏览器中兼容性也可能存在问题。Vue 3 使用了 Proxy API 作为默认的数据响应式实现，解决了 Object.defineProperty() 的一些限制和问题。

6）和 Vue3 相比有什么区别？

Vue 3 相对于 Vue 2 做了一些重要的改进和优化，其中一些主要区别包括：

• Composition API（组合式 API）：Vue 3 引入了 Composition API，这是一种基于函数的 API，允许开发者按照逻辑功能组织代码，而不是根据选项（如 data、methods 等）。这使得组件更易于理解、维护和重用。
• Teleport（传送门）：Vue 3 引入了 Teleport，这是一种可以将组件的内容渲染到 DOM 中的不同位置的机制，有助于更灵活地组织组件结构。
• 性能优化：Vue 3 在底层做了很多性能优化，包括更快的渲染、更小的包体积、更好的 Tree-Shaking 支持等。
• Proxy 替代 Object.defineProperty：Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty，这使得数据响应式系统更加灵活且能够监听更多类型的变化，同时在性能上有所提升。
• 更好的 TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善，使用 TypeScript 开发 Vue 应用更加方便。

7）Vue 是如何收集依赖的？

Vue 使用响应式系统来实现数据的双向绑定。在 Vue 2 中，它通过 Object.defineProperty 来实现数据的 getter 和 setter，从而收集和触发依赖。

当一个组件在模板中使用了一个响应式数据时，Vue 会在这个数据的 getter 中收集当前组件的 Watcher（观察者）。这个 Watcher 负责将组件的更新函数添加到依赖列表中。当这个数据发生变化时，setter 会通知所有收集了依赖的 Watcher，然后 Watcher 再触发组件的更新函数，从而更新视图。

在 Vue 3 中，通过使用 Proxy 来替代 Object.defineProperty，收集依赖的机制有所不同，但基本原理仍然是在 getter 中收集依赖，在 setter 中触发更新。

8）slot是什么？有什么作用？原理是什么？

slot（插槽） 是 Vue 中用于分发内容的一种机制。它允许父组件向子组件传递内容，实现更灵活的组件结构。

• 作用：插槽允许在父组件中定义模板的一部分，然后将这一部分内容传递给子组件，子组件可以在指定位置插入这些内容。这使得组件更加灵活，可以适应各种用例。
• 原理：插槽的原理是在父组件中使用 <slot> 标签定义插槽，然后在子组件中使用 <slot> 标签的 name 属性匹配父组件中相应的插槽。父组件的内容将被插入到匹配的插槽中，如果没有匹配的插槽，则会被放到默认插槽中。

<!-- 父组件 -->
<template>
  <div>
    <slot name="header">默认头部</slot>
    <div>父组件的其他内容</div>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <div>子组件的内容</div>
  </div>
</template>

9）对keep-alive的理解，它是如何实现的，具体缓存的是什么？

keep-alive 是 Vue 中的一个内置组件，用于缓存动态组件或者组件的状态，以避免在组件切换时重复渲染和销毁。

• 实现原理：keep-alive 使用了一个缓存对象来存储被包裹的组件实例。当组件被包裹在 keep-alive 中时，它的状态会被缓存，而不是被销毁。当再次切换到相同的组件时，Vue 会从缓存中取出之前的实例，而不是重新创建一个新的实例。
• 具体缓存的是什么：keep-alive 缓存的是组件的实例，包括组件的状态、DOM 结构等。这样在再次激活时，可以直接使用之前缓存的实例，避免重新渲染和初始化。

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

10）$nextTick 原理及作用

$nextTick 是 Vue 提供的一个异步执行的方法，它的作用是在下次 DOM 更新循环结束之后执行指定的回调函数。在一些场景中，当你修改了数据后，想要在 DOM 更新后执行一些操作，就可以使用 $nextTick。

原理：Vue 中使用了事件循环机制，$nextTick 利用了 JavaScript 的事件循环机制，在 DOM 更新后触发回调。它会把传入的回调函数推入一个回调队列，在下一次事件循环中执行，确保在 DOM 更新完成之后执行。

作用：

• 在数据变化后立即操作 DOM。
• 等待 Vue 更新完毕再执行一些操作。
• 在组件生命周期钩子中使用，确保在组件更新后执行