Vue面試題合集

一. 請談談Vue中的MVVM模式

MVVM全稱是Model-View-ViewModel
Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。 ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時做用域某個HTML元素上的這個HTML元素能夠是body，也能夠是某個id所指代的元素。
DOMListeners和DataBindings是實現雙向綁定的關鍵。DOMListeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；DataBindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

二. v-show和v-if指令的共同點和不一樣點?

v-show指令是經過修改元素的display CSS屬性讓其顯示或者隱藏

v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果

三. 如何讓CSS只在當前組件中起做用?

將當前組件的<style>修改成<style scoped>

四. <keep-alive></keep-alive>的做用是什麼?

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

五. Vue中引入組件的步驟?

1.採用ES6的import ... from ...語法或CommonJS的require()方法引入組件
2.對組件進行註冊,代碼以下

// 註冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

3.使用組件<my-component></my-component>

六. 指令v-el的做用是什麼?

提供一個在頁面上已存在的 DOM 元素做爲 Vue 實例的掛載目標.能夠是 CSS 選擇器，也能夠是一個 HTMLElement 實例,

七. 在Vue中使用插件的步驟

採用ES6的import ... from ...語法或CommonJSd的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,能夠傳入一個選項對象Vue.use(MyPlugin, { someOption: true })

八. 請列舉出3個Vue中經常使用的生命週期鉤子函數?

created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見

mounted: el被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

activated::keep-alive組件激活時調用

九. 請簡述下Vuex的原理和使用方法

一個應用能夠看做是由上面三部分組成: View, Actions,State,數據的流動也是從View => Actions => State =>View 以此達到數據的單向流動.可是項目較大的, 組件嵌套過多的時候, 多組件共享同一個State會在數據傳遞時出現不少問題.Vuex就是爲了解決這些問題而產生的.
Vuex能夠被看做項目中全部組件的數據中心,咱們將全部組件中共享的State抽離出來,任何組件均可以訪問和操做咱們的數據中心.

上圖能夠很好的說明Vuex的組成,一個實例化的Vuex.Store由state, mutations和actions三個屬性組成:

• state中保存着共有數據
• 改變state中的數據有且只有經過mutations中的方法,且mutations中的方法必須是同步的
• 若是要寫異步的方法,須要些在actions中, 並經過commit到mutations中進行state中數據的更改.

更多Vuex信息,請參考Vuex官網 : vuex.vuejs.org

十. 請談談Vue框架和Angular.js和React的不一樣

參見:Vue對比其餘框架