?推薦文章：

?

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.currentCommunityIdreturn 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

總結

以上是生活随笔為你收集整理的VUE之VUEX常见面试题大全汇总--史上最全【vuex面试题】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。