面试 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 中，有四种主要属性：
- State（状态）： 代表应用的状态，存储在一个对象中，这个对象的属性可以被组件访问，以获取应用的状态信息。
- Getter（获取器）： 用于派生计算状态，可以在组件中获取
state的某个值，并进行一些计算或转换后返回一个新的值。 - Mutation（突变）： 用于同步地修改
state的状态，每个 mutation 都有一个事件类型和一个回调函数，负责实际修改状态的操作。 - 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！
⭐点赞⭐收藏⭐不迷路！⭐