面试 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 时传入一个选项来实现:
js
const store = new Vuex.Store({
strict: true,
// 其他配置
})
一旦开启严格模式,当一个 mutation 修改状态时,如果不是通过 mutation 函数来修改,而是直接修改 state 的方式,Vuex 将会抛出一个错误,指示状态变更不符合规范。
严格模式有助于检测不当的状态修改,帮助开发者避免潜在的错误。但在生产环境中,建议关闭严格模式以避免性能开销。
10)如何在组件中批量使用Vuex的getter属性
在组件中批量使用 Vuex 的 getter 属性可以通过 mapGetters
辅助函数来实现,它可以将多个 getter 映射到组件的计算属性中。以下是如何使用 mapGetters
:
首先,确保在组件中导入 mapGetters
函数和需要映射的 getter:
js
import { mapGetters } from 'vuex'
然后,在组件的计算属性中使用 mapGetters
:
js
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!
⭐点赞⭐收藏⭐不迷路!⭐