作為全堆疊開發的我，不只是會Java哦，react和vue等熱門前端框架我在專案中也是經常用到哦，今天來一些高頻vue面試題，都是精華中的精華哦，如果你要面試前端，一定要背背哦，說不定你的面試老師也是用的這一套題哦，vue的知識體系還是很龐大的，以下是vue的知識體系，不妨驗證一下你都學了哪些了？

為大家精心準備了vue課程，微信搜索關注公眾號：【zhulin1028】，或者掃描以下二維碼，回復【vue課程】即可免費獲取，

目錄

1、 Vue的雙向資料系結原理是什么？

2、請詳細說下你對vue生命周期的理解？

3、請說出vue.cli專案中src目錄每個檔案夾和檔案的用法？

4、怎么定義vue-router的動態路由？怎么獲取傳過來的動態引數？

5、vue-router有哪幾種導航鉤子？

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

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

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

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

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

11、說下你對mvvm的理解？雙向系結的理解？

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

13、你是怎么認識vuex的？

14、vuex有哪幾種屬性？

15、vuex的State特性是？

16、vuex的Getter特性是？

17、vuex的Mutation特性是？

18、的作用是什么？

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

20、vue中組件直接的通信是如何實作的？

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

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

23. Vue 打包命令是什么？Vue 打包后會生成哪些檔案？

24. Vue 如何優化首屏加載速度？

1、 Vue的雙向資料系結原理是什么？

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

2、請詳細說下你對vue生命周期的理解？

總共分為 8 個階段創建前/后，載入前/后，更新前/后，銷毀前/后，創建前/后： 1、在 beforeCreated 階段，vue 實體的掛載元素$el 和資料物件 data 都為 unde?ned，還未初始化，2、在 created 階段，vue 實體的資料物件 data 有了，$el 還沒有，
3、載入前/后：在 beforeMount 階段，vue 實體的$el 和 data 都初始化了，但還是掛載之前為虛擬的
dom 節 點，data.message 還未替換，
4、在 mounted 階段，vue 實體掛載完成，data.message 成功渲染，
5、更新前/后：當 data 變化時，會觸發 beforeUpdate 和 updated 方法，
6、銷毀前/后：在執行 destroy 方法后，對 data 的改變不會再觸發周期函式，說明此時 vue 實體已經解除了 事件監聽以及和 dom 的系結，但是 dom 結構依然存在

3、請說出vue.cli專案中src目錄每個檔案夾和檔案的用法？

assets 檔案夾是放靜態資源；
components 是放組件；
router 是定義路由相關的配置;
view 視圖；
app.vue 是一個應用主組件；
main.js 是入口檔案

4、怎么定義vue-router的動態路由？怎么獲取傳過來的動態引數？

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

5、vue-router有哪幾種導航鉤子？

1、全域導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截，
2、組件內的鉤子；
3、單獨路由獨享組件

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

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

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

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

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

首先，組件可以提升整個專案的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項 目開 發：效率低、難維護、復用性等問題， 然后，使用 Vue.extend 方法創建一個組件，然后使用
Vue.component 方法注冊組件，子組件需要資料，可以 在 props 中接受定義，而子組件修改好資料后，想把資料傳遞給父組件，可以采用 emit 方法

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

決議.vue 檔案的一個加載器，跟 template/js/style 轉換成 js 模塊， 用途：js 可以寫 es6、style 樣式可以 scss 或 less、template 可以加 jade 等

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

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

11、說下你對mvvm的理解？雙向系結的理解？

mvvm 就是 vm 框架視圖、m 模型就是用來定義驅動的資料、v 經過資料改變后的 html、vm 就是用來實作雙 向系結
雙向系結:一個變了另外一個跟著變了，例如：視圖一個系結了模型的節點有變化，模型對應的值會跟著 變

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

1、使用 vue 不必擔心布局更改和類名重復導致的 js 重寫，因為它是靠資料驅動雙向系結，底層是通過
Object.de?neProperty() 定義的資料 set、get 函式原理實作，
2、組件化開發，讓專案的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起自己 的工 具包就可以開工，專案經理坐等收樓就好，
3、單頁應用的體驗零距離接觸安卓原生應用，區域組件更新界面，讓用戶體驗更快速省時，
4、js 的代碼無形的規范，團隊合作開發代碼可閱讀性更高，

13、你是怎么認識vuex的？

1、vuex 可以理解為一種開發模式或框架，比如 PHP 有 thinkphp，java 有 spring 等，
2、通過狀態（資料源）集中管理驅動組件的變化（好比 spring 的 IOC 容器對 bean 進行集中管理），
3、應用級的狀態集中放在 store 中； 改變狀態的方式是提交 mutations，這是個同步的事物； 異步邏輯 應該封裝在 action 中，

14、vuex有哪幾種屬性？

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

15、vuex的State特性是？

1、Vuex 就是一個倉庫，倉庫里面放了很多物件，其中 state 就是資料源存放地，對應于與一般 Vue 物件 里面的 data，
2、state 里面存放的資料是回應式的，Vue 組件從 store 中讀取資料，若是 store 中的資料發生改變， 依賴 這個資料的組件也會發生更新，
3、它通過 mapState 把全域的 state 和 getters 映射到當前組件的 computed 計算屬性中，

16、vuex的Getter特性是？

1、getters 可以對 State 進行計算操作，它就是 Store 的計算屬性 2、 雖然在組件內也可以做計算屬性，但是 getters 可以在多組件之間復用
3、 如果一個狀態只在一個組件內使用，是可以不用 getters

17、vuex的Mutation特性是？

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

18、的作用是什么？

包裹動態組件時，會快取不活動的組件實體，主要用于保留組件狀態或避免重新渲染，

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

ref 被用來給 DOM 元素或子組件注冊參考資訊，參考資訊會根據父組件的 $refs 物件進行注冊，如果在普 通的 DOM 元素上使用，參考資訊就是元素; 如果用在子組件上，參考資訊就是組件實體 注意：只要想要在 Vue 中直接操作 DOM 元素，就必須用 ref 屬性進行注冊

20、vue中組件直接的通信是如何實作的？

組件關系可分為父子組件通信、兄弟組件通信，
1、父組件向子組件： 通過 props 屬性來實作
2、子組件向父組件： 子組件用 （ ） 來 觸 發 事 件 ， 父 組 件 用on（）來監昕子組件的事件， 父組件可以直接在子組件的自定義標簽上使用 v-on 來監昕子組件觸發的自定義事件，
3、兄弟之間的通信： 通過實體一個 vue 實體 Bus 作為媒介，要相互通信的兄弟組件之中都引入 Bus， 之后通過分別呼叫 Bus 事件觸發和監聽來實作組件之間的通信和引數傳遞，

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

npm install：下載 node_modules 資源包的命令
npm run dev：啟動 vue-cli 開發環境的 npm 命令
npm run build：vue-cli 生成生產環境部署資源的 npm 命令

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

hash 模式：
后面的 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會重繪瀏覽器，每次 hash 值的變化會觸發 hashchange 事件，
history 模式：
利用了 HTML5 中新增的 pushState() 和 replaceState() 方法，這兩個方法應用于瀏覽器的歷史記錄堆疊，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能，只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求，

23. Vue 打包命令是什么？Vue 打包后會生成哪些檔案？

npm run build ：Vue 打包命令
Vue 打包后會在當前作業目錄下生成一個 dist 檔案夾，檔案夾中會有 static 靜態檔案以及
index.html 初始頁面，

24. Vue 如何優化首屏加載速度？

異步路由加載不打包庫檔案
關閉 sourcemap
開啟 gzip 壓縮