vue面試

v-for中key的做用

這個是vue的一個優化，爲了精準高效的更新dom。

至關於使用key給數組某個元素綁定在一塊兒，若是那個key對應的數據發生變化，直接更新對應的dom就行，不用所有更新一遍。

這也是vue不推薦使用數組下標做爲key的緣由。例如數組刪除了一個元素，那麼這個元素後方元素的下標全都前移了一位，以前key對應的數據和dom就會亂了，除非從新匹配key，那就容易產生錯誤。若是從新匹配key，等於所有從新渲染一遍，違背了使用key來優化更新dom的初衷。

簡述vue的響應式原理

當一個Vue實例建立時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉爲 getter/setter而且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。 每一個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

vue的特色

簡潔：頁面由HTML模板+Json數據+Vue實例組成
數據驅動：自動計算屬性和追蹤依賴的模板表達式
組件化：用可複用、解耦的組件來構造頁面
輕量：代碼量小，不依賴其餘庫
快速：精確有效批量DOM更新
模板友好：可經過npm，bower等多種方式安裝，很容易融入

vue生命週期的理解？

總共分爲 8 個階段建立前/後，載入前/後，更新前/後，銷燬前/後。
建立前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 尚未。 載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但仍是掛載以前爲虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。 銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，可是 dom 結構依然存在。

爲何vue中data必須是一個函數？

對象爲引用類型，當重用組件時，因爲數據對象都指向同一個data對象，當在一個組件中修改data時，其餘重用的組件中的data會同時被修改；而使用返回對象的函數，因爲每次返回的都是一個新對象（Object的實例），引用地址不一樣，則不會出現這個問題。

vue-router有哪幾種導航鉤子函數？

三種。
第一種：全局導航鉤子router.beforeEach(to,from,next)，做用：跳轉前進行判斷攔截。
第二種：組件內的鉤子；
第三種：單獨路由獨享組件

vue路由傳參數

1.使用query方法傳入的參數使用this.$route.query接受
2.使用params方式傳入的參數使用this.$route.params接受

<keep-alive></keep-alive>的做用是什麼？

<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染。 大白話: 好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那麼就能夠對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染

vue 組件通訊

父傳遞子
父：自定義屬性名 + 數據（要傳遞）=> :value="數據"
子：props ["父組件上的自定義屬性名「] =>進行數據接收)

子傳遞父
在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。
子：this.$emit('自定義事件名稱', 數據) 子組件標籤上綁定@自定義事件名稱='回調函數'
父：methods: {自定義事件() {//邏輯處理} }

兄弟組件
經過中央通訊 let bus = new Vue()
A：methods :{ 函數{bus.$emit('自定義事件名'，數據)} 發送
B：created （）{bus.$on('A發送過來的自定義事件名'，函數)} 進行數據接收

axios的特色有哪些？

一、axios是一個基於promise的HTTP庫，支持promise的全部API；
二、它能夠攔截請求和響應；
三、它能夠轉換請求數據和響應數據，並對響應回來的內容自動轉換爲json類型的數據；
四、它安全性更高，客戶端支持防護XSRF；

vue中的 ref 是什麼？

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。

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 依賴的頁面。」

$route和$router的區別？

$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。
$router是'路由實例'對象包括了路由的跳轉方法，鉤子函數等。

vue.js的兩個核心是什麼？

數據驅動、組件系統

vue如何兼容ie的問題？

babel-polyfill插件

vue改變數組出發視圖更新

如下方法調用會改變原始數組：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

調用方法：Vue.set( target, key, value )
target：要更改的數據源(能夠是對象或者數組)
key：要更改的具體數據
value ：從新賦的值

DOM渲染在哪一個週期就已經完成？

mounted
注意 mounted 不會承諾全部的子組件也都一塊兒被掛載。若是你但願等到整個視圖都渲染完畢，能夠用 vm.$nextTick 替換掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

簡述每一個週期具體適合哪些場景

beforecreate : 能夠在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用
mounted : 掛載元素，獲取到DOM節點 updated : 若是對數據統一處理，在這裏寫上相應函數
beforeDestroy : 能夠作一個確認中止事件的確認框

第一次加載會出發哪幾個鉤子？

會觸發beforeCreate , created ,beforeMount ,mounted

頁面刷新vuex被清空解決辦法？

1.localStorage 存儲到本地再回去
2.從新獲取接口獲取數據

如何優化SPA應用的首屏加載速度慢的問題？

1.將公用的JS庫經過script標籤外部引入，減少 app.bundel 的大小，讓瀏覽器並行下載資源文件，提升下載速度；
2.在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用某個組件時再加載對應的js文件；
3.加一個首屏loading圖，提高用戶體驗；

計算屬性和watch的區別？

在咱們運用vue的時候必定少不了用計算屬性computed和watch
computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板裏把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值致使該計算屬性改變時更新 DOM。這個功能很是強大，它可讓你的代碼更加聲明式、數據驅動而且易於維護。
watch監聽的是你定義的變量,當你定義的變量的值發生變化時，調用對應的方法。就好在div寫一個表達式name，data裏寫入num和lastname,firstname,在watch裏當num的值發生變化時，就會調用num的方法，方法裏面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經定義過的變量。

for...in 和 for...of的區別

1. for...of 是ES6新引入的特性，修復了ES5引入的for...in的不足
2. for...in 循環出的是key，for...of循環出的是value
3. for...of不能循環普通的對象，須要經過和Object.keys()搭配使用
4. 推薦在循環對象屬性的時候，使用for...in,在遍歷數組的時候的時候使用for...of

談談你對MVVM開發模式的理解

MVVM分爲Model、View、ViewModel三者。
Model 表明數據模型，數據和業務邏輯都在Model層中定義；
View 表明UI視圖，負責數據的展現；
ViewModel 負責監聽 Model 中數據的改變而且控制視圖的更新，處理用戶交互操做；
Model 和 View 並沒有直接關聯，而是經過 ViewModel 來進行聯繫的，Model 和 ViewModel 之間有着雙向數據綁定的聯繫。所以當 Model 中的數據改變時會觸發 View 層的刷新，View 中因爲用戶交互操做而改變的數據也會在 Model 中同步。
這種模式實現了 Model 和 View 的數據自動同步，所以開發者只須要專一對數據的維護操做便可，而不須要本身操做 dom。

v-if 和 v-show 有什麼區別？

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節點的存在與否。當咱們須要常常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；當只須要一次顯示或隱藏時，使用v-if更加合理。

delete和Vue.delete刪除數組的區別

delete只是被刪除的元素變成了 empty/undefined 其餘的元素的鍵值仍是不變。
Vue.delete直接刪除了數組 改變了數組的鍵值。

如何優化SPA應用的首屏加載速度慢的問題

• 將公用的JS庫經過script標籤外部引入，減少app.bundel的大小，讓瀏覽器並行下載資源文件，提升下載速度；
• 在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用某個組件時再加載對應的js文件；
• 加一個首屏 loading 圖，提高用戶體驗；