VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】

 推荐文章：

 

vue3面试题：最新vue3.0前端经典面试试题及答案（持续更新中……）_南北极之间的博客-CSDN博客打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%......使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking......Vue3可以更好的支持TypeScriptComposition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与inject......新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函https://blog.csdn.net/qq_22182989/article/details/125781704

VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】_勤动手多动脑少说多做厚积薄发-CSDN博客官方文档对vuex不太熟悉的小伙伴。可以先去看看vuex官方的文档：提示这是与 Vue 3 匹配的 Vuex 4 的文档。Vuex 是什么？ | Vuexhttps://vuex.vuejs.org/zh/如果您在找与 Vue 2 匹配的 Vuex 3 的文档，请在这里查看。Vuex 是什么？ | Vuexhttps://v3.vuex.vuejs.org/zh/下面是常见面试题：1.vuex是什么？怎么使用？哪种功能场景使用它？Vuex 是一个专为 Vue..https://blog.csdn.net/qq_22182989/article/details/122854506
前端面试题之HTML+CSS（持续更新）_勤动手多动脑少说多做厚积薄发-CSDN博客1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；行元素转换为块级元素方式：display：block；2.将多个元素设置为同一行?清除浮动有几种方式?将多个元素设置为同一行：float，inline-block清除浮动的方式：方法一：添.https://blog.csdn.net/qq_22182989/article/details/106867530?spm=1001.2014.3001.5502

2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)、前端面试题大全、前端进阶必知必会知识点_勤动手多动脑少说多做厚积薄发-CSDN博客前端面试题汇总资料：需要资料的同学可以给我留言https://blog.csdn.net/qq_22182989/article/details/122451418?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164446317716781683915410%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164446317716781683915410&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-9-122451418.nonecase&utm_term=%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4450
2021前端开发最全vuejs面试题（持续更新）_勤动手多动脑少说多做厚积薄发-CSDN博客1、什么是MVVM？答：MVVM是是Model-View-ViewModel的缩写，Model代表数据模型，定义数据操作的业务逻辑，View代表视图层，负责将数据模型渲染到页面上，ViewModel通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id3、vue-router有哪https://blog.csdn.net/qq_22182989/article/details/106795502?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164446317716781683915410%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164446317716781683915410&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-5-106795502.nonecase&utm_term=%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4450

JS必看面试题_勤动手多动脑少说多做厚积薄发-CSDN博客2019JS必看面试题1. javascript的typeof返回哪些数据类型.答案：string,boolean,number,undefined,function,object2. 例举3种强制类型转换和2种隐式类型转换?答案：强制（parseInt,parseFloat,number）隐式（== ===）3. split() join() 的区别答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串4. 数组方法pop() push() unshift() shttps://blog.csdn.net/qq_22182989/article/details/106792847?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164446317716781683915410%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164446317716781683915410&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-4-106792847.nonecase&utm_term=%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4450JavaScript数组的常用方法总结：遍历，复制，反转，排序，添加，删除（前端常见面试题必考必问）实例演示_勤动手多动脑少说多做厚积薄发-CSDN博客https://blog.csdn.net/qq_22182989/article/details/86726944

官方文档

对vuex不太熟悉的小伙伴。可以先去看看vuex官方的文档：

提示

这是与 Vue 3 匹配的 Vuex 4 的文档。

Vuex 是什么？ | Vuexhttps://vuex.vuejs.org/zh/

 如果您在找与 Vue 2 匹配的 Vuex 3 的文档，请在这里查看。

Vuex 是什么？ | Vuexhttps://v3.vuex.vuejs.org/zh/

下面是常见面试题：

 

1.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时，

比如：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

怎么使用？

vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

2.vuex有哪几种属性？vuex的store有几个属性值？分别讲讲它们的作用是什么？

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex的state、getter、mutation、action、module特性分别是什么？

答：state：存放公共数据的地方
　　getter：获取根据业务场景处理返回的数据
　　mutations：唯一修改state的方法，修改过程是同步的
　　action：异步处理，通过分发操作触发mutation
　　module：将store模块分割，减少代码臃肿

页面刷新后vuex的state数据丢失怎么解决？

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate。

vuex-persistedstate的createPersistedState()方法，谁用谁知道

使用vuex的优势是什么？

答：作为全局变量来用；vue是单向数据流，有一个vuex来建一个”全局仓库“，可以减少很多开发时候的”传参地狱“。其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。

你理解的vuex是什么呢？哪些场景会用到？不用会有问题吗？有哪些特性？

Vuex解决了什么问题？

答:多个组件依赖于同一状态时，来自不同组件的行为需要变更同一状态。

vuex 的 store 特性是什么

• vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
• state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
• 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 特性是什么

• getter 可以对 state 进行计算操作，它就是 store 的计算属性
• 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
• 如果一个状态只在一个组件内使用，是可以不用 getters

vuex 的 mutation 特性是什么

• action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
• action 可以包含任意异步操作

vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中？请求数据是写在组件的methods中还是在vuex的action中？

答：如果请求的数据是多个组件共享的，为了方便只写一份，就写vuex里面，如果是组件独用的就写在当前组件里面。

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

怎么监听vuex数据的变化？

答：先用计算属性、然后再监听

vuex使用actions时不支持多参数传递怎么办？

答：放在对象里面

5、你觉得vuex有什么缺点？

答：页面刷新时会使state的数据初始化

6、你觉得要是不用vuex的话会带来哪些问题？

答：组件之间传值麻烦复杂

• 可维护性会下降，你要修改数据，你得维护 3 个地方
• 可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
• 增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？美团

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

state 内部支持模块配置和模块嵌套，如何实现的？美团

在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？美团

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？vuex怎么知道state是通过mutation修改还是外部直接修改的？美团

通过$watch监听mutation的commit函数中_committing是否为true；严格模式下不允许直接修改。

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

调试时的"时空穿梭"功能是如何实现的？美团

devtoolPlugin 中提供了此功能。因为 dev 模式下所有的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。

4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便

vuex怎样赋值？vuex存储数据的方法有哪些？

使用下面这两种方法存储数据：

　　dispatch：异步操作，写法： this.$store.dispatch('actions方法名',值)

　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

6.Vuex中如何异步修改状态

actions与mutations作用类似，都是可以对状态进行修改。不同的是actions是异步操作的。

actions是可以调用Mutations里的方法的。

const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}
}

7.vuex的action和mutation的特性是什么？Vuex中actions和mutations的区别？

答：Action

• 一些对 State 的异步操作可放在 Action 中，并通过在 Action 中 commit Mutation 变更状态
• Action 可通过 store.dispatch() 方法触发，或者通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch() 调用

　  Mutation

• 在 vuex 的严格模式下，Mutaion 是 vuex 中改变 State 的唯一途径
• Mutation 中只能是同步操作
• 通过 store.commit() 调用 Mutation

mutations可以直接修改state，但只能包含同步操作，同时，只能通过提交commit调用(尽量通过Action或mapMutation调用而非直接在组件中通过this.$store.commit()提交)
actions是用来触发mutations的，它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发

Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Action Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。 .

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Vuex中状态储存在哪里，怎么改变它？

答:存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

Vuex中状态是对象时，使用时要注意什么？

答:对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

怎么在组件中批量使用Vuex的state状态？

答:使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

你有使用过vuex的module吗？主要是在什么场景下使用？

答：把状态全部集中在状态树上，非常难以维护。按模块分成多个module，状态树延伸多个分支，模块的状态内聚，主枝干放全局共享状态

 vuex一个例子方法

在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js

在store文件下的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

　　在store文件下的getters.js中引入

const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}

export default getters

在modules文件下的user.js写代码

const user = {
  state:{
      self: null,
      token: '',
  },
  mutations:{
      SET_SELF: (state, self) => {
           state.self = self
       },
       SET_TOKEN: (state, token) => {
           state.token = token
       }
  },
  actions:{
       login ({ commit }, res) {
            commit('SET_SELF', res.self)
            commit('SET_TOKEN', res.token)
      }
   }
}
export default user   

参考资料：

vuex常见面试题_Yriaf@2022的博客-CSDN博客1.vuex是什么？怎么使用？哪种功能场景使用它？答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store.js，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车2.vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate => 基本数据(数据源存放地)getters => 从基本数据派生出来的数据mutations => 提交更改https://blog.csdn.net/weixin_45644355/article/details/107556353vuex常见面试题 - 知乎（答案已更新...）1.vuex是什么？怎么使用？哪种功能场景使用它？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生…https://zhuanlan.zhihu.com/p/163283018

vuex常见面试题 - two-fish - 博客园1.什么是Vuex？ 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件 2.Vuex解决了什么问题？ 答:多个组件依赖于同一状态时 来自不同组件的行为需要变更同一状态。 3.vuexhttps://www.cnblogs.com/smokefish/p/14671180.htmlVUE之VUEX常见面试题_从0到1的成长的博客-CSDN博客_vuex面试题1.vuex是什么？怎么使用？哪种功能场景使用它？答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store.js，….. export 。解决的问题：多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用2.vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate：存放公共数据的地方；getter：获取根据业务场景处理返回的数据；mutationshttps://blog.csdn.net/qq_41161982/article/details/112648598

Vue问得最多的面试题 - 知乎什么是 mvvm？MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，Vie…https://zhuanlan.zhihu.com/p/53703176

VUEX面试题 - 菜鸟小何 - 博客园1、你有写过vuex中store的插件吗？ 答：没有 2、你有使用过vuex的module吗？主要是在什么场景下使用？ 答：把状态全部集中在状态树上，非常难以维护。按模块分成多个module，状态树延https://www.cnblogs.com/qwer123dsada/p/14803352.html