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

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

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

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

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

1）如何在组件中重复使用Vuex的mutation

在Vue组件中，你可以通过mapMutations辅助函数来实现重复使用Vuex的mutation。首先，确保在组件中引入mapMutations：

import { mapMutations } from 'vuex';

然后在methods中使用mapMutations：

methods: {
  ...mapMutations(['mutationName']),
  // 其他方法
}

这样就可以在组件中调用this.mutationName，触发对应的Vuex mutation。

2）Vue3.0有什么更新

Vue 3.0 的主要更新包括：

• 性能提升： 更好的虚拟DOM算法，优化了渲染性能。
• Composition API： 引入了Composition API，使得组件逻辑更灵活、可复用。
• 更好的TypeScript支持： 提供了更好的TypeScript支持和类型推断。
• 更细粒度的响应式： 使用Proxy实现更细粒度的响应式系统，替代了Object.defineProperty。
• Teleport组件： 提供了Teleport组件，用于在组件树外部渲染内容。
• Suspense组件： 引入了Suspense组件，用于处理异步组件的加载状态。

3）defineProperty和proxy的区别

• Object.defineProperty：
  • 只能劫持对象的属性，因此需要遍历对象的每个属性进行劫持。
  • 无法直接监听数组的变化，需要通过重写数组方法来实现。
  • 不支持监听属性的添加和删除。
• Proxy：
  • 可以劫持整个对象，而不是对象的某个属性，不需要遍历对象的属性。
  • 可以直接监听数组的变化。
  • 支持监听属性的添加和删除。

Proxy相对于Object.defineProperty更灵活且功能更强大，是Vue 3.0中响应式系统的基础。

4）Vue3.0 为什么要用 proxy？

Vue 3.0 使用Proxy替代了Vue 2.x中的Object.defineProperty，主要有以下原因：

• 更灵活的响应式： Proxy可以直接监听整个对象，而不仅仅是对象的某个属性，使得响应式系统更灵活。
• 更好的性能： Proxy的性能通常比Object.defineProperty更好，特别是在处理大型对象时。
• 支持监听数组变化： Proxy可以直接监听数组的变化，不需要通过重写数组方法来实现。
• 更好的类型推断： Proxy提供了更好的类型推断支持，有助于提高代码质量。

总体而言，使用Proxy可以让Vue 3.0的响应式系统更加强大和高效。

5）Vue 3.0 中的 Vue Composition API？

Vue 3.0引入了Composition API，它是一组基于函数的API，用于组织组件的逻辑。相比于Vue 2.x中的Options API，Composition API更灵活、可复用，使得组件的代码更易于维护。

主要特点包括：

• 组件逻辑的组织： 将组件的逻辑划分为可复用的功能单元。
• 更好的类型推断： 使用TypeScript时，由于Composition API是基于函数的，可以更好地推断类型。
• 更容易进行逻辑复用： 可以使用setup函数内的逻辑进行逻辑的复用，通过返回值暴露需要在模板中使用的数据和方法。
• 更灵活的组件结构： 不再依赖于固定的生命周期方法，而是通过函数来组织组件逻辑。

Composition API使得代码更加清晰、可维护性更高，并且更好地支持了一些复杂场景下的组件开发。

6）Composition API与React Hook很像，区别是什么

• 相似性：
  • 基于函数： 两者都是基于函数的API，用于组织组件的逻辑。
  • 逻辑复用： 都提供了一种方式来更好地组织和复用组件逻辑。
• 区别：
  • Vue 3 Composition API：
    • 是Vue 3.0的一部分，主要用于组织Vue组件的逻辑。
    • 使用setup函数来组织逻辑，并返回数据和方法供模板使用。
    • 提供了ref和reactive等响应式API。
    • 与Options API可以混用，但更适合在大型组件中使用。
  • React Hook：
    • 是React的一项特性，用于在函数组件中引入状态和生命周期等特性。
    • 使用useState、useEffect等函数来引入状态和处理副作用。
    • 是React函数组件的主要组织逻辑方式，Hooks不能在类组件中使用。

总体而言，Composition API和React Hook都是为了解决函数组件中逻辑复用和状态管理的问题，但它们是相对独立的概念，各自在Vue和React中有不同的应用方式和API。

7）对虚拟DOM的理解？

虚拟DOM（Virtual DOM）是一种用于优化页面渲染性能的技术。它是一个轻量级的JavaScript对象树，对应于真实的DOM树，但不直接操作真实DOM。通过对比虚拟DOM与实际DOM的差异，系统能够最小化更新操作，从而提高性能。

主要思想包括：

• 抽象表示： 使用JavaScript对象来表示页面结构，构建一个虚拟DOM树。
• 批量更新： 通过比较虚拟DOM树和实际DOM树的差异，计算最小化的更新，然后进行批量更新。
• 减少重绘和回流： 最小化对实际DOM的操作，减少页面重绘和回流，提高性能。

8）虚拟DOM的解析过程

虚拟DOM的解析过程包括以下步骤：

1. 初始化： 构建初始的虚拟DOM树，对应于页面的初始结构。
2. 更新： 当页面状态发生变化时，生成新的虚拟DOM树，与之前的虚拟DOM树进行比较。
3. 差异计算： 比较新旧虚拟DOM树的差异，找出需要更新的部分。
4. 生成补丁（Patch）： 根据差异生成一系列更新操作，表示如何将实际DOM从旧状态变为新状态。
5. 应用更新： 将补丁应用到实际DOM上，完成页面的更新。

这个过程保证了最小化的DOM操作，提高了页面的性能。

9）为什么要用虚拟DOM

• 性能优化： 通过比较虚拟DOM与实际DOM的差异，减少了不必要的DOM操作，提高了页面渲染性能。
• 批量更新： 可以将多个更新操作合并成一个批量更新，减少浏览器的重绘和回流。
• 跨平台兼容性： 虚拟DOM是平台无关的，使得框架可以轻松实现跨平台的渲染，例如在服务器端渲染（SSR）中。

虚拟DOM的引入使得页面的更新更加高效、可控，同时提高了跨平台的灵活性。

10）虚拟DOM真的比真实DOM性能好吗

1. 虚拟DOM相对于直接操作真实DOM，通常能够提供更好的性能。但需要注意以下几点：

• 批量更新： 虚拟DOM可以将多次更新操作合并成一次，减少浏览器的重绘和回流。
• 最小化DOM操作： 通过差异计算，虚拟DOM可以找出最小化的DOM操作，避免不必要的操作。
• 渲染引擎优化： 虚拟DOM的使用可以使得渲染引擎更好地优化DOM更新的过程。

尽管虚拟DOM带来了性能的提升，但在某些情况下，直接操作真实DOM可能更简单、更直观。性能优化的具体效果也依赖于应用的特性和使用场景。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

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