作為全棧開發(fā)的我，不只是會Java哦，react和vue等熱門前端框架我在項(xiàng)目中也是經(jīng)常用到哦，今天來一些高頻vue面試題，都是精華中的精華哦，如果你要面試前端，一定要背背哦。說不定你的面試?yán)蠋熞彩怯玫倪@一套題哦。vue的知識體系還是很龐大的，以下是vue的知識體系，不妨驗(yàn)證一下你都學(xué)了哪些了？

為大家精心準(zhǔn)備了vue課程，微信搜索關(guān)注公眾號：【zhulin1028】，或者掃描以下二維碼，回復(fù)【vue課程】即可免費(fèi)獲取。

目錄

1、 Vue的雙向數(shù)據(jù)綁定原理是什么？

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過 Object.de?neProperty()來劫持各個(gè)屬性的 setter，getter，在數(shù)據(jù)變動時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。 具體步驟： 第一步：需要
observe 的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上 setter 和 getter，這樣的 話，給這個(gè)對象的某個(gè)值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。 第二步：compile 解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對 應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)， 添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖。 第三步：Watcher 訂閱者是
Observer 和 Compile 之間通信的橋梁，主要做的事情是:1、在自身實(shí)例化時(shí)往屬 性訂閱器(dep)里面添加自己 2、自身必須有一個(gè) update()方法 3、待屬性變動 dep.notice()通知時(shí)，能調(diào)用自身的update()方法，并觸發(fā) Compile 中綁定的回調(diào)，則功成身退。 第四步：MVVM 作為數(shù)據(jù)綁定的入口， 整合 Observer、Compile 和 Watcher 三者，通過 Observer 來監(jiān)聽自己 的 model 數(shù)據(jù)變化，通過Compile 來解析編譯模板指令，最終利用 Watcher 搭起 Observer 和 Compile 之間的通信 橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input)-> 數(shù)據(jù) model 變更的雙向綁定效果。

2、請?jiān)敿?xì)說下你對vue生命周期的理解？

總共分為 ? ? ? ? ? ?8 ? ? ? ? ? ?個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。創(chuàng)建前/后： 1、在 beforeCreated 階段，vue 實(shí)例的掛載元素$el 和數(shù)據(jù)對象 data 都為 unde?ned，還未初始化。2、在 created 階段，vue 實(shí)例的數(shù)據(jù)對象 data 有了，$el 還沒有。
3、載入前/后：在 beforeMount 階段，vue 實(shí)例的$el 和 data 都初始化了，但還是掛載之前為虛擬的
dom 節(jié) 點(diǎn)，data.message 還未替換。
4、在 mounted 階段，vue 實(shí)例掛載完成，data.message 成功渲染。
5、更新前/后：當(dāng) data 變化時(shí)，會觸發(fā) beforeUpdate 和 updated 方法。
6、銷毀前/后：在執(zhí)行 destroy 方法后，對 data 的改變不會再觸發(fā)周期函數(shù)，說明此時(shí) vue 實(shí)例已經(jīng)解除了 事件監(jiān)聽以及和 dom 的綁定，但是 dom 結(jié)構(gòu)依然存在

3、請說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？

assets 文件夾是放靜態(tài)資源；
components 是放組件；
router 是定義路由相關(guān)的配置;
view 視圖；
app.vue 是一個(gè)應(yīng)用主組件；
main.js 是入口文件

4、怎么定義vue-router的動態(tài)路由？怎么獲取傳過來的動態(tài)參數(shù)？

在 router 目錄下的 index.js 文件中，對 path 屬性加上/:id。 使用 router 對象的 params.id

5、vue-router有哪幾種導(dǎo)航鉤子？

1、全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。
2、組件內(nèi)的鉤子；
3、單獨(dú)路由獨(dú)享組件

6、scss是什么？在vue.cli中的安裝使用步驟是？有哪幾大特性？

css 的預(yù)編譯。 使用步驟：
第一步：用 npm 下三個(gè) loader（sass-loader、css-loader、node-sass）
第二步：在 build 目錄找到 webpack.base.con?g.js，在那個(gè) extends 屬性中加一個(gè)拓展.scss 第三步：還是在同一個(gè)文件，配置一個(gè) module 屬性
第四步：然后在組件的 style 標(biāo)簽加上 lang 屬性 ，例如：lang=”scss” 有哪幾大特性:1、可以用變量， 例如（$變量名稱=值）；2、可以用混合器；3、可以嵌套

7、mint-ui是什么？怎么使用？說出至少三個(gè)組件使用方法？

基于 vue 的前端組件庫。npm 安裝，然后 import 樣式和 js， vue.use（mintUi）全局引入。 在單個(gè)組件局部引入：import{Toast}from'mint-ui’。 ?組件一：Toast('登錄成功’)； ?組件二：mint-header； ? 組件三：mint-swiper

8、請說下封裝 vue 組件的過程？

首先，組件可以提升整個(gè)項(xiàng)目的開發(fā)效率。能夠把頁面抽象成多個(gè)相對獨(dú)立的模塊，解決了我們傳統(tǒng)項(xiàng) ?目開 發(fā)：效率低、難維護(hù)、復(fù)用性等問題。 然后，使用 Vue.extend 方法創(chuàng)建一個(gè)組件，然后使用
Vue.component 方法注冊組件。子組件需要數(shù)據(jù)，可以 在 props 中接受定義。而子組件修改好數(shù)據(jù)后，想把數(shù)據(jù)傳遞給父組件?？梢圆捎?emit 方法

9、vue-loader是什么？使用它的用途有哪些？

解析.vue 文件的一個(gè)加載器，跟 template/js/style 轉(zhuǎn)換成 js 模塊。 用途：js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等

10、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？

第一步：在 components 目錄新建你的組件文件（smithButton.vue），script 一定要 exportdefault
第二步：在需要用的頁面（組件）中導(dǎo)入：
importsmithButtonfrom'../components/smithButton.vue’
第三步：注入到 vue 的子組件的 components 屬性上面,components:{smithButton} 第四步：在 template 視圖 view 中使用，
問題有：smithButton 命名，使用的時(shí)候則 smith-button。

11、說下你對mvvm的理解？雙向綁定的理解？

mvvm 就是 vm 框架視圖、m 模型就是用來定義驅(qū)動的數(shù)據(jù)、v 經(jīng)過數(shù)據(jù)改變后的 html、vm 就是用來實(shí)現(xiàn)雙 向綁定
雙向綁定:一個(gè)變了另外一個(gè)跟著變了，例如：視圖一個(gè)綁定了模型的節(jié)點(diǎn)有變化，模型對應(yīng)的值會跟著 ?變

12、請說下具體使用vue的理解？

1、使用 vue 不必?fù)?dān)心布局更改和類名重復(fù)導(dǎo)致的 js 重寫，因?yàn)樗强繑?shù)據(jù)驅(qū)動雙向綁定，底層是通過
Object.de?neProperty() 定義的數(shù)據(jù) set、get 函數(shù)原理實(shí)現(xiàn)。
2、組件化開發(fā)，讓項(xiàng)目的可拓展性、移植性更好，代碼重用性更高，就好像農(nóng)民工建房子，拿起自己 ?的工 具包就可以開工。項(xiàng)目經(jīng)理坐等收樓就好。
3、單頁應(yīng)用的體驗(yàn)零距離接觸安卓原生應(yīng)用，局部組件更新界面，讓用戶體驗(yàn)更快速省時(shí)。
4、js 的代碼無形的規(guī)范，團(tuán)隊(duì)合作開發(fā)代碼可閱讀性更高。

13、你是怎么認(rèn)識vuex的？

1、vuex 可以理解為一種開發(fā)模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。
2、通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動組件的變化（好比 spring 的 IOC 容器對 bean 進(jìn)行集中管理）。
3、應(yīng)用級的狀態(tài)集中放在 store 中； 改變狀態(tài)的方式是提交 mutations，這是個(gè)同步的事物； 異步邏輯 應(yīng)該封裝在 action 中。

14、vuex有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

15、vuex的State特性是？

1、Vuex 就是一個(gè)倉庫，倉庫里面放了很多對象。其中 state 就是數(shù)據(jù)源存放地，對應(yīng)于與一般 Vue 對象 里面的 data。
2、state 里面存放的數(shù)據(jù)是響應(yīng)式的，Vue 組件從 store 中讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變， 依賴 這個(gè)數(shù)據(jù)的組件也會發(fā)生更新。
3、它通過 mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性中。

16、vuex的Getter特性是？

1、getters 可以對 State 進(jìn)行計(jì)算操作，它就是 Store 的計(jì)算屬性 2、 雖然在組件內(nèi)也可以做計(jì)算屬性，但是 getters 可以在多組件之間復(fù)用
3、 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用 getters

17、vuex的Mutation特性是？

1、Action 類似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接變更狀態(tài)。
3、Action 可以包含任意異步操作

18、的作用是什么？

包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，主要用于保留組件狀態(tài)或避免重新渲染。

19、vue中ref的作用是什么？

ref 被用來給 DOM 元素或子組件注冊引用信息。引用信息會根據(jù)父組件的 $refs 對象進(jìn)行注冊。如果在普 通的 DOM 元素上使用，引用信息就是元素; 如果用在子組件上，引用信息就是組件實(shí)例 注意：只要想要在 Vue 中直接操作 DOM 元素，就必須用 ref 屬性進(jìn)行注冊

20、vue中組件直接的通信是如何實(shí)現(xiàn)的？

組件關(guān)系可分為父子組件通信、兄弟組件通信。
1、父組件向子組件： 通過 props 屬性來實(shí)現(xiàn)
2、子組件向父組件： 子組件用?? ?（ ） 來 觸 發(fā) 事 件 ， 父 組 件 用on（）來監(jiān)昕子組件的事件。 父組件可以直接在子組件的自定義標(biāo)簽上使用 v-on 來監(jiān)昕子組件觸發(fā)的自定義事件。
3、兄弟之間的通信： 通過實(shí)例一個(gè) vue 實(shí)例 Bus 作為媒介，要相互通信的兄弟組件之中都引入 Bus， 之后通過分別調(diào)用 Bus 事件觸發(fā)和監(jiān)聽來實(shí)現(xiàn)組件之間的通信和參數(shù)傳遞。

21.?? ?vue-cli 工程中常用的 npm 命令有哪些？

npm install：下載 node_modules 資源包的命令
npm run dev：啟動 vue-cli 開發(fā)環(huán)境的 npm 命令
npm run build：vue-cli 生成生產(chǎn)環(huán)境部署資源的 npm 命令

22.?? ?vue-router 路由的兩種模式。

hash 模式：
后面的 hash 值的變化，并不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，瀏覽器不發(fā)出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發(fā) hashchange 事件。
history 模式：
利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 ?back、forward、go ?的基礎(chǔ)之上，它們提供了對歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會立即向后端發(fā)送請求。

23.?? ?Vue 打包命令是什么？Vue 打包后會生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后會在當(dāng)前工作目錄下生成一個(gè) dist 文件夾，文件夾中會有 static 靜態(tài)文件以及
index.html 初始頁面。

24.?? ?Vue 如何優(yōu)化首屏加載速度？

異步路由加載不打包庫文件
關(guān)閉 sourcemap
開啟 gzip 壓縮
?