面试 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 分割成模块,每个模块拥有自己的 stategettersmutationsactions,使得大型应用的状态管理更加有序。

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 修改状态的方式,同时引入了 getteraction 的概念。

区别:

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

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 时传入一个选项来实现:

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'])
}

在上面的示例中,getter1getter2getter3 分别是你在 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!

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

相关推荐
你挚爱的强哥36 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20154 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript