Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化

Vuex有五個(gè)核心概念：

state、getters、mutations、actions、modules。

1、state：vuex的基本數(shù)據(jù)，用來(lái)存儲(chǔ)變量

2、geeter：從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計(jì)算屬性

3、mutation：提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個(gè)mutation都有一個(gè)字符串的事件類型(type)和一個(gè)回調(diào)函數(shù)(handler)。

回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受state作為第一個(gè)參數(shù)，提交載荷作為第二個(gè)參數(shù)。

4、action：和mutation的功能大致相同，不同之處在于==》1.Action提交的是mutation，而不是直接變更狀態(tài)。2.Action可以包含任意異步操作。

5、modules：模塊化vuex，可以讓每一個(gè)模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。

vuex數(shù)據(jù)持久化vuex結(jié)合localStorage實(shí)現(xiàn)狀態(tài)持久化

vuex-persistedstate 使用瀏覽器的本地存儲(chǔ)（ local storage ）對(duì)狀態(tài)（ state ）進(jìn)行持久化。這意味著刷新頁(yè)面或關(guān)閉標(biāo)簽頁(yè)都不會(huì)刪除你的數(shù)據(jù)。

如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。如果您需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇

vue-router

“vue-router通過(guò)hash與History interface兩種方式實(shí)現(xiàn)前端路由，更新視圖但不重新請(qǐng)求頁(yè)面，是前端路由原理的核心之一，是目前在瀏覽器環(huán)境中這一功能的實(shí)現(xiàn)主要的兩種方式。”

每個(gè)鉤子方法接收三個(gè)參數(shù)：

• to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
• from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
• next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

導(dǎo)航守衛(wèi)

全局守衛(wèi)

router.beforeEach((to,from,next)=>{})

回調(diào)函數(shù)中的參數(shù)，to：進(jìn)入到哪個(gè)路由去，from：從哪個(gè)路由離開(kāi)，next：函數(shù)，決定是否展示你要看到的路由頁(yè)面。

全局后置鉤子router.afterEach((to,from)=>{})

• 只有兩個(gè)參數(shù)，to：進(jìn)入到哪個(gè)路由去，from：從哪個(gè)路由離開(kāi)。

組件內(nèi)的守衛(wèi)

到達(dá)這個(gè)組件時(shí)，beforeRouteEnter:(to,from,next)=>{}

2.離開(kāi)這個(gè)組件時(shí)，beforeRouteLeave:(to,from,next)=>{}

路由獨(dú)享的守衛(wèi)

beforeEnter:(to,from,next)=>{}，用法與全局守衛(wèi)一致。只是，將其寫(xiě)進(jìn)其中一個(gè)路由對(duì)象中，只在這個(gè)路由下起作用。

**一共*8*個(gè)階段

Vue生命周期函數(shù) 也叫Vue生命周期鉤子，就是Vue實(shí)例在某一時(shí)間點(diǎn)自動(dòng)執(zhí)行的函數(shù)。

1、beforeCreate（創(chuàng)建前）

2、created（創(chuàng)建后）

3、beforeMount（載入前）

4、mounted（載入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（銷(xiāo)毀前）

8、destroyed（銷(xiāo)毀后）

activated ：組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

deactivated ： 組件停用時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

errorCaptured : 當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播。

我平時(shí)用的比較多的鉤了是created和mounted，created用于獲取后臺(tái)數(shù)據(jù)，mounted用于dom掛載完后做一些dom操作,以及初始化插件等.beforeDestroy用戶清除定時(shí)器以及解綁事件等,

vue第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子函數(shù)？

beforeCreate、created、beforeMount、mounted

DOM 渲染在哪個(gè)周期中就已經(jīng)完成？

mounted

Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上構(gòu)建工具vue-cli，sass樣式,就是一個(gè)完整的vue項(xiàng)目的核心構(gòu)成。

概括起來(lái)就是：

1、項(xiàng)目構(gòu)建工具

2、路由

3、狀態(tài)管理

4、http請(qǐng)求工具。

Vue兩大核心思想：組件化和數(shù)據(jù)驅(qū)動(dòng)。組件化：把整體拆分為各個(gè)可以復(fù)用的個(gè)體，數(shù)據(jù)驅(qū)動(dòng)：通過(guò)數(shù)據(jù)變化直接影響bom展示，避免dom操作。

axios

Axios，基于 Promise 的 HTTP 客戶端，可以工作于瀏覽器中，也可以在 node.js 中使用。

axios是xhr的封裝，支持promise操作的請(qǐng)求庫(kù)，并且提供了一系列方便的api接口。

功能：

• 從瀏覽器中創(chuàng)建 XMLHttpRequest
• 從 node.js 中創(chuàng)建 http 請(qǐng)求
• 支持 Promise API
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
• 客戶端支持防止 XSRF 攻擊

async用于聲明一個(gè)函數(shù)是異步的，await用于聲明在一個(gè)異步函數(shù)中等待語(yǔ)句執(zhí)行完畢。也就是說(shuō)await只能在async函數(shù)中使用

axios請(qǐng)求及響應(yīng)攔截

request攔截器（請(qǐng)求發(fā)送后端之前）

response攔截器（數(shù)據(jù)返回后，具體頁(yè)面加載之前）

node.js

“Nodejs是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境，一個(gè)讓JavaScript運(yùn)行在服務(wù)端的開(kāi)發(fā)平臺(tái)；它用于方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。”

“nodejs的用處：1、它使JavaScript可以運(yùn)行在服務(wù)端。2、Node對(duì)一些特殊用例進(jìn)行優(yōu)化，提供替代的API。3、可以使用它來(lái)開(kāi)發(fā)一些快速移動(dòng)Web框架。”

ES6 數(shù)據(jù)結(jié)構(gòu)

set

Set ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。 用法：new Set([iterable]) {代碼…} Set結(jié)構(gòu)有以下屬性： Set.prototype.constructor: 構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。 set.prototype.size : 返回Set的成員總數(shù)。

Set結(jié)構(gòu)有以下屬性：

Set.prototype.constructor: 構(gòu)造函數(shù)，默認(rèn)就是Set函數(shù)。

set.prototype.size : 返回Set的成員總數(shù)。

Set結(jié)構(gòu)有以下方法：

add(value)：添加某個(gè)值，返回 Set 結(jié)構(gòu)本身。

delete(value)：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除是否成功。

has(value)：返回一個(gè)布爾值，表示該值是否為Set的成員。

clear()：清除所有成員，沒(méi)有返回值。

Map

JavaScript 的對(duì)象（Object），本質(zhì)上是鍵值對(duì)的集合（Hash 結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。ES6中的Map結(jié)構(gòu)也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。

用法：new Map([iterable])

屬性和方法

size：返回成員總數(shù)。

set(key, value)：添加鍵值對(duì)到映射中

get(key)：獲取映射中某一個(gè)鍵的對(duì)應(yīng)值

delete(key)：將某一鍵值對(duì)移除出映射中

clear()：清空映射中所有的鍵值對(duì)

entries()：返回一個(gè)以二元數(shù)組（鍵值對(duì)）作為元素的數(shù)組

has(key)：檢查映射中是否包含某一鍵值對(duì)

keys()：返回一個(gè)一當(dāng)前映射中所有鍵作為元素的可迭代對(duì)象

values()：返回一個(gè)一當(dāng)前映射中所有值作為元素的可迭代對(duì)象

深入解析ES6中的三種異步解決方式

方式一： Generator + Promise + 執(zhí)行器

方式二：Generator + Thunk函數(shù) + 執(zhí)行器

方式三：基于 async 函數(shù) 和 await 的異步處理方式

Symbol的誕生，也就是Symbol存在的意義

1、唯一性:它是Javascript的第七種數(shù)據(jù)類型,表示它是唯一的。

2、數(shù)據(jù)類型的修飾

3、與其他數(shù)據(jù)類型之間的轉(zhuǎn)換

Symbol不能用四則運(yùn)算進(jìn)行操作，否則報(bào)錯(cuò)。它只能用顯示的方式轉(zhuǎn)為字符串和布爾值

4、作為對(duì)象的屬性

5、Symbol.for()，Symbol.keyFor()

總結(jié)

以上是生活随笔為你收集整理的vue常用面试题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。