vue面試題

阿新 • • 發佈：2021-01-03

Vue面試中，經常會被問到的面試題/Vue知識點整理

vue.js javascript 釋出於 2018-09-10

看看面試題，只是為了查漏補缺，看看自己那些方面還不懂。切記不要以為背了面試題，就萬事大吉了，最好是理解背後的原理，這樣面試的時候才能侃侃而談。不然，稍微有水平的面試官一看就能看出，是否有真才實學還是剛好背中了這道面試題。
（都是一些基礎的vue面試題，大神不用浪費時間往下看）

一、對於MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯。
View代表UI 元件，它負責將資料模型轉化成UI 展現出來。
ViewModel監聽模型資料的改變和控制檢視行為、處理使用者互動，簡單理解就是一個同步View 和 Model的物件，連線Model和View。
在MVVM架構下，View 和 Model 之間並沒有直接的聯絡，而是通過ViewModel進行互動，Model 和 ViewModel 之間的互動是雙向的，因此View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上。
ViewModel通過雙向資料繫結把 View 層和 Model 層連線了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。

二、Vue的生命週期

beforeCreate（建立前）在資料觀測和初始化事件還未開始
created（建立後）完成資料觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來
beforeMount（載入前）在掛載開始之前被呼叫，相關的render函式首次被呼叫。例項已完成以下的配置：編譯模板，把data裡面的資料和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後）在el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫。例項已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM物件。完成模板中的html渲染到html頁面中。此過程中進行ajax互動。
beforeUpdate（更新前）在資料更新之前呼叫，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在由於資料更改導致的虛擬DOM重新渲染和打補丁之後呼叫。呼叫時，元件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限迴圈。該鉤子在伺服器端渲染期間不被呼叫。
beforeDestroy（銷燬前）在例項銷燬之前呼叫。例項仍然完全可用。
destroyed（銷燬後）在例項銷燬之後呼叫。呼叫後，所有的事件監聽器會被移除，所有的子例項也會被銷燬。該鉤子在伺服器端渲染期間不被呼叫。
1.什麼是vue生命週期？
答： Vue 例項從建立到銷燬的過程，就是生命週期。從開始建立、初始化資料、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之為 Vue 的生命週期。

2.vue生命週期的作用是什麼？
答：它的生命週期中有多個事件鉤子，讓我們在控制整個Vue例項的過程時更容易形成好的邏輯。

3.vue生命週期總共有幾個階段？
答：它可以總共分為8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後。

4.第一次頁面載入會觸發哪幾個鉤子？
答：會觸發下面這幾個beforeCreate, created, beforeMount, mounted 。

5.DOM 渲染在哪個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。

三、 Vue實現資料雙向繫結的原理：Object.defineProperty（）

vue實現資料雙向繫結主要是：採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應監聽回撥。當把一個普通 Javascript 物件傳給 Vue 例項來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。使用者看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的資料雙向繫結將MVVM作為資料繫結的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的資料變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到資料變化 —>檢視更新；檢視互動變化（input）—>資料model變更雙向繫結效果。

js實現簡單的雙向繫結

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

四、Vue元件間的引數傳遞

1.父元件與子元件傳值
父元件傳給子元件：子元件通過props方法接受資料;
子元件傳給父元件：$emit方法傳遞引數
2.非父子元件間的資料傳遞，兄弟元件傳值
eventBus，就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。專案比較小時，用這個比較合適。（雖然也有不少人推薦直接用VUEX，具體來說看需求咯。技術只是手段，目的達到才是王道。）

五、Vue的路由實現：hash模式和 history模式

hash模式：在瀏覽器中符號“#”，#以及#後面的字元稱之為hash，用window.location.hash讀取；
特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。
hash 模式下，僅 hash 符號之前的內容會被包含在請求中，如http://www.xxx.com，因此對於後端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如http://www.xxx.com/items/id。後端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裡如此描述：“不過這種模式要玩好，還需要後臺配置支援……所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”

六、Vue與Angular以及React的區別？

（版本在不斷更新，以下的區別有可能不是很正確。我工作中只用到vue，對angular和react不怎麼熟）
1.與AngularJS的區別
相同點：
都支援指令：內建指令和自定義指令；都支援過濾器：內建過濾器和自定義過濾器；都支援雙向資料繫結；都不支援低端瀏覽器。

不同點：
AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在效能上，AngularJS依賴對資料做髒檢查，所以Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察並且使用非同步佇列更新，所有的資料都是獨立觸發的。

2.與React的區別
相同點：
React採用特殊的JSX語法，Vue.js在元件開發中也推崇編寫.vue特殊檔案格式，對檔案內容都有一些約定，兩者都需要編譯後使用；中心思想相同：一切都是元件，元件例項之間可以巢狀；都提供合理的鉤子函式，可以讓開發者定製化地去處理需求；都不內建列數AJAX，Route等功能到核心包，而是以外掛的方式載入；在元件開發中都支援mixins的特性。
不同點：
React採用的Virtual DOM會對渲染出來的結果做髒檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。

七、vue路由的鉤子函式

首頁可以控制導航跳轉，beforeEach，afterEach等，一般用於頁面title的修改。一些需要登入才能調整頁面的重定向功能。

beforeEach主要有3個引數to，from，next：

to：route即將進入的目標路由物件，

from：route當前導航正要離開的路由

next：function一定要呼叫該方法resolve這個鉤子。執行效果依賴next方法的呼叫引數。可以控制網頁的跳轉。

八、vuex是什麼？怎麼使用？哪種功能場景使用它？

只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；非同步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，元件之間的狀態、音樂播放、登入狀態、加入購物車

state
Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 例項，但單一狀態樹和模組化並不衝突。存放的資料狀態，不可以直接修改裡面的資料。
mutations
mutations定義的方法動態修改Vuex 的 store 中的狀態或資料。
getters
類似vue的計算屬性，主要用來過濾一些資料。
action
actions可以理解為通過將mutations裡面處裡資料的方法變成可非同步的處理資料的方法，簡單的說就是非同步操作資料。view 層通過 store.dispath 來分發 action。

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

modules
專案特別複雜的時候，可以讓每一個模組擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

九、vue-cli如何新增自定義指令？

1.建立區域性指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 建立指令(可以多個)
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個引數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全域性指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

十、vue如何自定義一個過濾器？

html程式碼：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS程式碼：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全域性定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器接收表示式的值 (msg) 作為第一個引數。capitalize 過濾器將會收到 msg的值作為第一個引數。

十一、對keep-alive 的瞭解？

keep-alive是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之後，keep-alive新加入了兩個屬性: include(包含的元件快取) 與 exclude(排除的元件不快取，優先順序大於include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該元件是否快取取決於include和exclude屬性 -->
  </component>
</keep-alive>

引數解釋
include - 字串或正則表示式，只有名稱匹配的元件會被快取
exclude - 字串或正則表示式，任何名稱匹配的元件都不會被快取
include 和 exclude 的屬性允許元件有條件地快取。二者都可以用“，”分隔字串、正則表示式、陣列。當使用正則或者是陣列時，要記得使用v-bind 。

使用示例

<!-- 逗號分隔字串，只有元件a與b被快取。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正則表示式 (需要使用 v-bind，符合匹配規則的都會被快取) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都會被快取) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

十二、一句話就能回答的面試題

1.css只在當前元件起作用
答：在style標籤中寫入scoped即可例如：<style scoped></style>

2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；

3.$route和$router的區別
答：$route是“路由資訊物件”，包括path，params，hash，query，fullPath，matched，name等路由資訊引數。而$router是“路由例項”物件包括了路由的跳轉方法，鉤子函式等。

4.vue.js的兩個核心是什麼？
答：資料驅動、元件系統

5.vue幾種常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修飾符？
答：.prevent: 提交事件不再過載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會呼叫

7.v-on 可以繫結多個方法嗎？
答：可以

8.vue中 key 值的作用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。

9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對資料進行復雜處理，且可能多次使用的情況下，儘量採取計算屬性的方式。好處：①使得資料處理結構清晰；②依賴於資料，資料更新，處理結果自動更新；③計算屬性內部this指向vm例項；④在template呼叫時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取資料，也可以使用set方法改變資料；⑥相較於methods，不管依賴的資料變不變，methods都會重新計算，但是依賴資料不變的時候computed從快取中獲取，不會重新計算。

10.vue等單頁面應用及其優缺點
答：優點：Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件，核心是一個響應的資料繫結系統。MVVM、資料驅動、元件化、輕量、簡潔、高效、快速、模組友好。
缺點：不支援低版本的瀏覽器，最低只支援到IE9；不利於SEO的優化（如果要支援SEO，建議通過服務端來進行渲染元件）；第一次載入首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、後退。

11.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值
答：在 router 目錄下的 index.js 檔案中，對 path 屬性加上 /:id，使用 router 物件的 params.id 獲取。

1.vue優點？
答：輕量級框架：只關注檢視層，是一個構建資料的檢視集合，大小隻有幾十kb；
簡單易學：國人開發，中文文件，不存在語言障礙，易於理解和學習；
雙向資料繫結：保留了angular的特點，在資料操作方面更為簡單；
元件化：保留了react的優點，實現了html的封裝和重用，在構建單頁面應用方面有著獨特的優勢；
檢視，資料，結構分離：使資料的更改更為簡單，不需要進行邏輯程式碼的修改，只需要操作資料就能完成相關操作；
虛擬DOM：dom操作是非常耗費效能的，不再使用原生的dom操作節點，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式；
執行速度更快:相比較與react而言，同樣是操作虛擬dom，就效能而言，vue存在很大的優勢。
2.vue父元件向子元件傳遞資料？
答：通過props
3.子元件像父元件傳遞事件？
答：$emit方法
4.v-show和v-if指令的共同點和不同點？
答: 共同點：都能控制元素的顯示和隱藏；
不同點：實現本質方法不同，v-show本質就是通過控制css中的display設定為none，控制隱藏，只會編譯一次；v-if是動態的向DOM樹內新增或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷燬和建立比較消耗效能。
總結：如果要頻繁切換某節點，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節點使用v-if（初始渲染開銷較小，切換開銷比較大）。
5.如何讓CSS只在當前元件中起作用？
答：在元件中的style前面加上scoped
6.<keep-alive></keep-alive>的作用是什麼?
答:keep-alive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染。
7.如何獲取dom?
答：ref="domName" 用法：this.$refs.domName
8.說出幾種vue當中的指令和它的用法？
答：v-model雙向資料繫結；
v-for迴圈；
v-if v-show 顯示與隱藏；
v-on事件；v-once: 只繫結一次。
9. vue-loader是什麼？使用它的用途有哪些？
答：vue檔案的一個載入器，將template/js/style轉換成js模組。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
10.為什麼使用key?
答：需要使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點。
作用主要是為了高效的更新虛擬DOM。
11.axios及安裝?
答：請求後臺資源的模組。npm install axios --save裝好，
js中使用import進來，然後.get或.post。返回在.then函式中如果成功，失敗則是在.catch函式中。
12.v-modal的使用。
答：v-model用於表單資料的雙向繫結，其實它就是一個語法糖，這個背後就做了兩個操作：
v-bind繫結一個value屬性；
v-on指令給當前元素繫結input事件。
13.請說出vue.cli專案中src目錄每個資料夾和檔案的用法？
答：assets資料夾是放靜態資源；components是放元件；router是定義路由相關的配置; app.vue是一個應用主元件；main.js是入口檔案。
14.分別簡述computed和watch的使用場景
答：computed:
　　　　當一個屬性受多個屬性影響的時候就需要用到computed
　　　　最典型的栗子：購物車商品結算的時候
watch:
　　　　當一條資料影響多條資料的時候就需要用watch
　　　　栗子：搜尋資料
15.v-on可以監聽多個方法嗎？
答：可以，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">。
16.$nextTick的使用
答：當你修改了data的值然後馬上獲取這個dom元素的值，是不能獲取到更新後的值，
你需要使用$nextTick這個回撥，讓修改後的data值渲染更新到dom元素之後在獲取，才能成功。
17.vue元件中data為什麼必須是一個函式？
答：因為JavaScript的特性所導致，在component中，data必須以函式的形式存在，不可以是物件。
　　組建中的data寫成一個函式，資料以函式返回值的形式定義，這樣每次複用元件的時候，都會返回一份新的data，相當於每個元件例項都有自己私有的資料空間，它們只負責各自維護的資料，不會造成混亂。而單純的寫成物件形式，就是所有的元件例項共用了一個data，這樣改一個全都改了。
18.漸進式框架的理解
答：主張最少；可以根據不同的需求選擇不同的層級；
19.Vue中雙向資料繫結是如何實現的？
答：vue 雙向資料繫結是通過資料劫持結合釋出訂閱模式的方式來實現的，也就是說資料和檢視同步，資料發生變化，檢視跟著變化，檢視變化，資料也隨之發生改變；
核心：關於VUE雙向資料繫結，其核心是 Object.defineProperty()方法。
20.單頁面應用和多頁面應用區別及優缺點
答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要載入所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，還是會分開寫（頁面片段），然後在互動的時候由路由程式動態載入，單頁面的頁面跳轉，僅重新整理區域性資源。多應用於pc端。
多頁面（MPA），就是指一個應用中有多個頁面，頁面跳轉時是整頁重新整理
單頁面的優點：
使用者體驗好，快，內容的改變不需要重新載入整個頁面，基於這一點spa對伺服器壓力較小；前後端分離；頁面效果會比較炫酷（比如切換頁面內容時的專場動畫）。
單頁面缺點：
不利於seo；導航不可用，如果一定要導航需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆疊管理）；初次載入時耗時多；頁面複雜度提高很多。
21.v-if和v-for的優先順序
答：當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先順序，這意味著 v-if 將分別重複運行於每個 v-for 迴圈中。所以，不推薦v-if和v-for同時使用。
如果v-if和v-for一起用的話，vue中的的會自動提示v-if應該放到外層去。
22.assets和static的區別
答：相同點：assets和static兩個都是存放靜態資原始檔。專案中所需要的資原始檔圖片，字型圖示，樣式檔案等都可以放在這兩個檔案下，這是相同點
不相同點：assets中存放的靜態資原始檔在專案打包時，也就是執行npm run build時會將assets中放置的靜態資原始檔進行打包上傳，所謂打包簡單點可以理解為壓縮體積，程式碼格式化。而壓縮後的靜態資原始檔最終也都會放置在static檔案中跟著index.html一同上傳至伺服器。static中放置的靜態資原始檔就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至伺服器。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資原始檔由於沒有進行壓縮等操作，所以檔案的體積也就相對於assets中打包後的檔案提交較大點。在伺服器中就會佔據更大的空間。
建議：將專案中template需要的樣式檔案js檔案等都可以放置在assets中，走打包這一流程。減少體積。而專案中引入的第三方的資原始檔如iconfoont.css等檔案可以放置在static中，因為這些引入的第三方檔案已經經過處理，我們不再需要處理，直接上傳。
23.vue常用的修飾符
答：.stop：等同於JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同於JavaScript中的event.preventDefault()，防止執行預設的行為（如果事件可取消，則取消該事件，而不停止事件的進一步傳播）；
.capture：與事件冒泡的方向相反，事件捕獲由外到內；
.self：只會觸發自己範圍內的事件，不包含子元素；
.once：只會觸發一次。
24.vue的兩個核心點
答：資料驅動、元件系統
資料驅動：ViewModel，保證資料和檢視的一致性。
元件系統：應用類UI可以看作全部是由元件樹構成的。
25.vue和jQuery的區別
答：jQuery是使用選擇器（$）選取DOM物件，對其進行賦值、取值、事件繫結等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM物件，而資料和介面是在一起的。比如需要獲取label標籤的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue物件將資料和View完全分離開來了。對資料進行操作不再需要引用相應的DOM物件，可以說資料和View是分離的，他們通過Vue物件這個vm實現相互的繫結。這就是傳說中的MVVM。
26. 引進元件的步驟
答: 在template中引入元件；
在script的第一行用import引入路徑；
用component中寫上元件名稱。
27.delete和Vue.delete刪除陣列的區別
答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了陣列改變了陣列的鍵值。
28.SPA首屏載入慢如何解決
答：安裝動態懶載入所需外掛；使用CDN資源。
29.Vue-router跳轉和location.href有什麼區別
答：使用location.href='/url'來跳轉，簡單方便，但是重新整理了頁面；
使用history.pushState('/url')，無重新整理頁面，靜態跳轉；
引進router，然後使用router.push('/url')來跳轉，使用了diff演算法，實現了按需載入，減少了dom的消耗。
其實使用router跳轉和使用history.pushState()沒什麼差別的，因為vue-router就是用了history.pushState()，尤其是在history模式下。
30. vue slot
答：簡單來說，假如父元件需要在子元件內放一些DOM，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。
31.你們vue專案是打包了一個js檔案，一個css檔案，還是有多個檔案？
答：根據vue-cli腳手架規範，一個js檔案，一個CSS檔案。
32.Vue裡面router-link在電腦上有用，在安卓上沒反應怎麼解決？
答：Vue路由在Android機上有問題，babel問題，安裝babel polypill外掛解決。
33.Vue2中註冊在router-link上事件無效解決方法
答：使用@click.native。原因：router-link會阻止click事件，.native指直接監聽一個原生事件。
34.RouterLink在IE和Firefox中不起作用（路由不跳轉）的問題
答: 方法一：只用a標籤，不適用button標籤；方法二：使用button標籤和Router.navigate方法
35.axios的特點有哪些
答：從瀏覽器中建立XMLHttpRequests；
node.js建立http請求；
支援Promise API；
攔截請求和響應；
轉換請求資料和響應資料；
取消請求；
自動換成json。
axios中的傳送欄位的引數是data跟params兩個，兩者的區別在於params是跟請求地址一起傳送的，data的作為一個請求體進行傳送
params一般適用於get請求，data一般適用於post put 請求。
36.請說下封裝 vue 元件的過程？
答：1. 建立元件的模板，先把架子搭起來，寫寫樣式，考慮好元件的基本邏輯。(os：思考1小時，碼碼10分鐘，程式猿的準則。)
　　2. 準備好元件的資料輸入。即分析好邏輯，定好 props 裡面的資料、型別。
　　3. 準備好元件的資料輸出。即根據元件邏輯，做好要暴露出來的方法。
　　4. 封裝完畢了，直接呼叫即可
37.params和query的區別
答：用法：query要用path來引入，params要用name來引入，接收引數都是類似的，分別是this.$route.query.name和this.$route.params.name。
url地址顯示：query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器位址列中顯示引數，後者則不顯示
注意點：query重新整理不會丟失query裡面的資料
params重新整理會丟失 params裡面的資料。
38.vue初始化頁面閃動問題
答：使用vue開發時，在vue初始化之前，由於div是不歸vue管的，所以我們寫的程式碼在還沒有解析的情況下會容易出現花屏現象，看到類似於{{message}}的字樣，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果沒有徹底解決問題，則在根元素加上style="display: none;" :style="{display: 'block'}"
39.vue更新陣列時觸發檢視更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
40.vue常用的UI元件庫
答：Mint UI，element，VUX
41.vue修改打包後靜態資源路徑的修改
答：cli2版本：將 config/index.js 裡的 assetsPublicPath 的值改為 './' 。
build: {
...
assetsPublicPath: './',
...
}
cli3版本：在根目錄下新建vue.config.js 檔案，然後加上以下內容：（如果已經有此檔案就直接修改）
module.exports = {
publicPath: '', // 相對於 HTML 頁面（目錄相同） }
生命週期函式面試題
1.什麼是 vue 生命週期？有什麼作用？
答：每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。（ps：生命週期鉤子就是生命週期函式）例如，如果要通過某些外掛操作DOM節點，如想在頁面渲染完後彈出廣告窗，那我們最早可在mounted 中進行。
2.第一次頁面載入會觸發哪幾個鉤子？
答：beforeCreate， created， beforeMount， mounted
3.簡述每個週期具體適合哪些場景
答：beforeCreate：在new一個vue例項後，只有一些預設的生命週期鉤子和預設事件，其他的東西都還沒建立。在beforeCreate生命週期執行的時候，data和methods中的資料都還沒有初始化。不能在這個階段使用data中的資料和methods中的方法
create：data 和 methods都已經被初始化好了，如果要呼叫 methods 中的方法，或者操作 data 中的資料，最早可以在這個階段中操作
beforeMount：執行到這個鉤子的時候，在記憶體中已經編譯好了模板了，但是還沒有掛載到頁面中，此時，頁面還是舊的
mounted：執行到這個鉤子的時候，就表示Vue例項已經初始化完成了。此時元件脫離了建立階段，進入到了執行階段。如果我們想要通過外掛操作頁面上的DOM節點，最早可以在和這個階段中進行
beforeUpdate：當執行這個鉤子時，頁面中的顯示的資料還是舊的，data中的資料是更新後的，頁面還沒有和最新的資料保持同步
updated：頁面顯示的資料和data中的資料已經保持同步了，都是最新的
beforeDestory：Vue例項從執行階段進入到了銷燬階段，這個時候上所有的 data 和 methods ，指令，過濾器 ……都是處於可用狀態。還沒有真正被銷燬
destroyed：這個時候上所有的 data 和 methods ，指令，過濾器 ……都是處於不可用狀態。元件已經被銷燬了。
4.created和mounted的區別
答：created:在模板渲染成html前呼叫，即通常初始化某些屬性值，然後再渲染成檢視。
mounted:在模板渲染成html後呼叫，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
5.vue獲取資料在哪個周期函式
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
6.請詳細說下你對vue生命週期的理解？
答：總共分為8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。
建立前/後：在beforeCreated階段，vue例項的掛載元素$el和**資料物件**data都為undefined，還未初始化。在created階段，vue例項的資料物件data有了，$el還沒有。
載入前/後：在beforeMount階段，vue例項的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue例項掛載完成，data.message成功渲染。
更新前/後：當data變化時，會觸發beforeUpdate和updated方法。
銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函式，說明此時vue例項已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在。
vue路由面試題
1.mvvm 框架是什麼？
答：vue是實現了雙向資料繫結的mvvm框架，當檢視改變更新模型層，當模型層改變更新檢視層。在vue中，使用了雙向繫結技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。
2.vue-router 是什麼?它有哪些元件
答：vue用來寫路由一個外掛。router-link、router-view
3.active-class 是哪個元件的屬性？
答：vue-router模組的router-link元件。children陣列來定義子路由
4.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值？
答：在router目錄下的index.js檔案中，對path屬性加上/:id。使用router物件的params.id。
5.vue-router 有哪幾種導航鉤子?
答：三種，
第一種：是全域性導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
第二種：元件內的鉤子
第三種：單獨路由獨享元件
6.$route 和 $router 的區別
答：$router是VueRouter的例項，在script標籤中想要導航到不同的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)
$route為當前router跳轉物件。裡面可以獲取當前路由的name,path,query,parmas等。
7.vue-router的兩種模式
答:hash模式：即位址列 URL 中的 # 符號；
history模式：window.history物件打印出來可以看到裡邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支援）。
8.vue-router實現路由懶載入（動態載入路由）
答:三種方式
第一種：vue非同步元件技術 ==== 非同步載入，vue-router配置路由 , 使用vue的非同步元件技術 , 可以實現按需載入 .但是,這種情況下一個元件生成一個js檔案。
第二種：路由懶載入(使用import)。
第三種：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技術，也可以實現按需載入。這種情況下，多個路由指定相同的chunkName，會合並打包成一個js檔案。
vuex常見面試題
1.vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。
新建了一個目錄store.js，….. export 。
場景有：單頁應用中，元件之間的狀態。音樂播放、登入狀態、加入購物車
2.vuex有哪幾種屬性？
答：有五種，分別是 State、 Getter、Mutation 、Action、 Module
state => 基本資料(資料來源存放地)
getters => 從基本資料派生出來的資料
mutations => 提交更改資料的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以非同步。
modules => 模組化Vuex
3.Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中？
答：如果請求來的資料是不是要被其他元件公用，僅僅在請求的元件內使用，就不需要放入vuex 的state裡。
如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入action裡，方便複用。
以上面試題僅供個人學習，如有錯誤請指正。謝謝。

vue面試題

Vue面試中，經常會被問到的面試題/Vue知識點整理

一、對於MVVM的理解？

二、Vue的生命週期

三、 Vue實現資料雙向繫結的原理：Object.defineProperty（）

四、Vue元件間的引數傳遞

五、Vue的路由實現：hash模式和 history模式

六、Vue與Angular以及React的區別？

七、vue路由的鉤子函式

八、vuex是什麼？怎麼使用？哪種功能場景使用它？

九、vue-cli如何新增自定義指令？

十、vue如何自定義一個過濾器？

十一、對keep-alive 的瞭解？

十二、一句話就能回答的面試題

2019年度web前端面試題總結(主要為Vue面試題)

vue 面試題積累（含答案）

vue面試題（3）

Vue面試題總結

面試題（2020）Vue面試題彙總

VUE面試題系列02，前端面試題

Vue 面試題總結

vue面試題

2020前端VUE面試題二

35道常見的前端vue面試題

Vue面試題01

VUE面試題系列02

VUE面試題系列03（帶數字，帶序號）

Vue面試題總結（一）

前端vue面試題（持續更新中）

Vue.js中的高階面試題及答案

Vue經典面試題

Vue面試中，經常會被問到的面試題/Vue知識點整理

面試必備：2020 Vue經典面試題總結（含答案）

vue自定義元件遞迴實現樹狀_一道價值25k的騰訊遞迴元件面試題（Vue3 + TS 實現）...

vue面試題

一、對於MVVM的理解？

二、Vue的生命週期

三、 Vue實現資料雙向繫結的原理：Object.defineProperty（）

四、Vue元件間的引數傳遞

五、Vue的路由實現：hash模式 和 history模式

六、Vue與Angular以及React的區別？

七、vue路由的鉤子函式

八、vuex是什麼？怎麼使用？哪種功能場景使用它？

九、vue-cli如何新增自定義指令？

十、vue如何自定義一個過濾器？

十一、對keep-alive 的瞭解？

十二、一句話就能回答的面試題

相關推薦

五、Vue的路由實現：hash模式和 history模式