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

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

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

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

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

1）Vuex 的原理

Vuex 是 Vue.js 官方提供的状态管理库，用于管理 Vue.js 应用中的状态。其原理基于以下核心概念：

• State（状态）: 在 Vuex 中，状态存储在一个单一的对象中，称为 state。这个状态对象是响应式的，当状态发生变化时，相关组件会自动更新。
• Getter（获取器）: getters 允许组件直接从 store 中获取状态，而不需要将所有的状态都显式地传递给组件。这对于一些需要计算的属性或者筛选操作非常方便。
• Mutation（突变）: mutations 是改变 state 的唯一途径。每个 mutation 都有一个字符串的事件类型和一个回调函数，该回调函数就是实际进行状态更改的地方。
• Action（动作）: actions 类似于 mutations，但是它们是异步的，并且可以包含任意异步操作。actions 提交 mutations 来改变状态。它们可以通过 context 对象访问 commit 方法以触发 mutations。
• Module（模块）: modules 允许将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions，使得大型应用的状态管理更加有序。

2）Vuex中action和mutation的区别

• Mutation： 是唯一能改变 state 的地方。它是同步的操作，用于同步地修改 state 的状态。mutation 中应该包含简单的逻辑，不应该处理异步操作。
• Action： 用于提交 mutation，可以包含异步操作。action 提交 mutation 来改变状态，但 action 可以包含异步操作，例如发起一个请求。action 中通过 context.commit 来触发 mutation。

3）Vuex 和 localStorage 的区别

• Vuex： 是用于在 Vue.js 应用中进行状态管理的库，用于集中管理应用的状态，并提供一种可预测的状态修改方式。
• localStorage： 是浏览器提供的本地存储方案，用于在浏览器端存储数据，但不提供状态管理的能力。

区别：

• Vuex 用于管理 Vue.js 应用的状态，使得状态的变化变得可追踪和可管理，而 localStorage 仅是一种存储数据的手段，没有提供状态管理的机制。
• Vuex 的状态是响应式的，当状态变化时相关组件会自动更新，而 localStorage 中的数据变化不会自动触发视图更新，需要手动监听变化并进行处理。

4）Redux 和 Vuex 有什么区别，它们的共同思想

• Redux： 是用于 JavaScript 应用的状态管理库，与 React 框架结合紧密，但也可以用于其他框架或纯 JavaScript 应用。Redux 强调单一状态树和不可变性，通过 store 存储整个应用的状态，通过 action 触发状态变更，通过 reducer 处理状态变更。
• Vuex： 是专为 Vue.js 设计的状态管理库，与 Vue.js 深度整合。它也采用了单一状态树和通过 mutation 修改状态的方式，同时引入了 getter 和 action 的概念。

区别：

• 语法差异：Redux 的语法较为独立，需要借助中间件来处理异步逻辑；Vuex 的语法与 Vue.js 更为贴近，对于 Vue.js 用户更加友好。
• 生态系统：Redux 是更通用的状态管理库，可以在不同框架中使用，而Vuex 是专门为 Vue.js 设计的，深度整合 Vue.js 生态系统。
• 概念的称谓：两者的核心思想都是单一状态树，但称谓不同，例如 Redux 中的 action、reducer 等，在 Vuex 中分别对应 mutation、mutation。

5）为什么要用 Vuex 或者 Redux

使用状态管理库（如 Vuex 或 Redux）的主要原因包括：

• 集中管理状态： 在大型应用中，有多个组件需要共享状态，使用状态管理库可以将应用的状态集中管理，避免状态分散在各个组件中导致难以维护的问题。
• 可预测的状态变更： 状态管理库采用单一状态树的概念，状态变更通过一定的流程和规则进行，使得状态变更变得可预测，易于调试和追踪。
• 异步操作管理： 在应对异步操作时，状态管理库提供了一种结构化的方式，例如在 Redux 中可以使用中间件处理异步操作，而在 Vuex 中可以通过 actions 处理异步逻辑。
• 开发工具支持： Vuex 和 Redux 都提供了开发工具，可以方便地查看状态的变化、调试应用，提高开发效率。
• 可插拔性： 这些状态管理库是可插拔的，可以方便地与其他库或框架结合使用，使得它们适用于不同的项目和技术栈。

6）Vuex有哪几种属性？

在 Vuex 中，有四种主要属性：

1. State（状态）： 代表应用的状态，存储在一个对象中，这个对象的属性可以被组件访问，以获取应用的状态信息。
2. Getter（获取器）： 用于派生计算状态，可以在组件中获取 state 的某个值，并进行一些计算或转换后返回一个新的值。
3. Mutation（突变）： 用于同步地修改 state 的状态，每个 mutation 都有一个事件类型和一个回调函数，负责实际修改状态的操作。
4. Action（动作）： 用于提交 mutation，可以包含异步操作，通过调用 context.commit 触发 mutation 来改变状态。

7）Vuex和单纯的全局对象有什么区别？

在一个 Vue.js 应用中，你可以创建一个全局对象来存储应用的状态，但这与使用 Vuex 有以下区别：

• 可预测性： Vuex 强调使用一定的规则和流程来修改状态，通过 mutation 和 action 来实现状态的修改，使状态变更更加可预测和追踪。而在全局对象中，状态的修改可能分散在各个组件中，难以管理和调试。
• 单一状态树： Vuex 使用单一状态树来管理状态，而全局对象可能会分散成多个全局变量，难以维护和管理。
• 中心化管理： Vuex 提供了一个中心化的状态管理机制，组件可以通过 getter 和 action 访问和修改状态，而不需要直接操作全局对象，这有助于维护和测试。
• 开发工具支持： Vuex 提供了开发工具，可以方便地查看状态变化和调试应用，而全局对象通常不具备这些工具支持。

8）为什么 Vuex 的 mutation 中不能做异步操作？

Vuex 的 mutation 中不能做异步操作是为了保持状态变更的可追踪性和可预测性。Mutation 是同步的操作，它们的目的是修改状态，并且每个 mutation 都有一个明确的事件类型和一个回调函数，用于实际修改状态。

如果允许在 mutation 中进行异步操作，那么状态变更的顺序就不再可控，多个异步操作可能会相互交织，导致难以预测的状态变更顺序和结果。这会使得应用的状态管理变得复杂，不易调试和维护。

为了处理异步操作，Vuex 提供了 actions，它们可以包含异步逻辑，然后再通过提交 mutation 来修改状态。这样可以保持状态变更的有序性，使状态管理更加可控。

9）Vuex的严格模式是什么,有什么作用，如何开启？

Vuex 的严格模式是一种开发模式，用于检测状态的修改是否来源于 mutation。它的作用是帮助开发者捕捉不合规的状态修改，以便更早地发现问题和调试。

开启 Vuex 的严格模式可以通过在创建 store 时传入一个选项来实现：

const store = new Vuex.Store({
  strict: true,
  // 其他配置
})

一旦开启严格模式，当一个 mutation 修改状态时，如果不是通过 mutation 函数来修改，而是直接修改 state 的方式，Vuex 将会抛出一个错误，指示状态变更不符合规范。

严格模式有助于检测不当的状态修改，帮助开发者避免潜在的错误。但在生产环境中，建议关闭严格模式以避免性能开销。

10）如何在组件中批量使用Vuex的getter属性

在组件中批量使用 Vuex 的 getter 属性可以通过 mapGetters 辅助函数来实现，它可以将多个 getter 映射到组件的计算属性中。以下是如何使用 mapGetters：

首先，确保在组件中导入 mapGetters 函数和需要映射的 getter：

import { mapGetters } from 'vuex'

然后，在组件的计算属性中使用 mapGetters：

computed: {
  ...mapGetters(['getter1', 'getter2', 'getter3'])
}

在上面的示例中，getter1、getter2 和 getter3 分别是你在 Vuex store 中定义的 getter 名称。一旦映射完成，你就可以像访问普通计算属性一样在组件中使用这些 getter：

this.getter1 // 获取 getter1 的值
this.getter2 // 获取 getter2 的值
this.getter3 // 获取 getter3 的值

这样，你就可以在组件中方便地批量使用 Vuex 的 getter 属性。

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

已 300 + Star！

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