Vue 面試題彙總（持續更新中...）

1. vue中的MVVM模式

即Model-View-ViewModel。

Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦建立綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。

ViewModel是Vue的核心，它是Vue的一個實例。Vue實例時做用域某個HTML元素上的，這個HTML元素能夠是body，也能夠是某個id所指代的元素。

DOM Listeners和Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面全部View層DOM元素的變化，當發生變化，Model層的數據隨之變化；Data Bindings監聽Model層的數據，當數據發生變化，View層的DOM元素隨之變化。

2. v-show指令，v-if的區別

條件渲染指令，與v-if不一樣的是，不管v-show的值爲true或false，元素都會存在於HTML代碼中；而只有當v-if的值爲true，元素纔會存在於HTML代碼中。v-show指令只是設置了元素CSS的style值

3. 如何讓css只在當前組件中起做用

在每個vue組件中均可以定義各自的css，js，若是但願組件內寫的css只對當前組件起做用，只須要在style中寫入scoped，即：

<style scoped></style>複製代碼

4. 指令keep-alive

在vue-router寫着keep-alive，keep-alive的含義：

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個keep-alive指令

<component :is='curremtView' keep-alive></component>

5. Vuejs組件

vuejs構建組件使用

Vue.component('componentName',{
    /*component*/ 
})；   
// 這裏注意一點，組件要先註冊再使用
Vue.component('mine',{           
    template:'#mineTpl',          
    props:['name','title','city','content']        
}); 
var v=new Vue({      
    el:'#vueInstance',      
    data:{          
        name:'zhang',          
        title:'this is title',         
        city:'Beijing',         
        content:'these are some desc about Blog'     
    }
});複製代碼

6. 路由嵌套

路由嵌套會將其餘組件渲染到該組件內，而不是進行整個頁面跳轉router-view自己就是將組件渲染到該位置，想要進行頁面跳轉，就要將頁面渲染到根組件，在起始配置路由時候寫到：

var App = Vue.extend({ root });
router.start(App,'#app');複製代碼

這裏首先將根組件註冊進來，用於將路由中配置好的各個頁面渲染出來，而後將根組件掛載到與#app匹配的元素上。

7. 指令v-el的使用

有時候咱們想就像使用jquery那樣去訪問一個元素，此時就可使用v-el指令，去給這個元素註冊一個索引，方便經過所屬實例的$el訪問這個元素。

注意

HTML不區分大小寫，因此v-el:someEl將轉換爲全小寫。能夠用v-el:some-el而後設置this.$el.someEl。

示例

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>複製代碼

8. vue.js中使用事件名

在vuejs中，咱們常常要綁定一些事件，有時候給DOM元素綁定，有時候給組件綁定。綁定事件在HTML中用v-on:click-"event",這時evet的名字不要出現大寫，由於在1.x中不區分大小寫，因此若是咱們在HTML寫v-on:click="myEvent"而在js中寫myEvent就出錯誤，因此在vuejs的1.x綁定事件時候，要儘可能避免使用大寫字母。在2.0中沒有該限制！

9. Vue.js是什麼

Vue.js（是一套構建用戶界面的 漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件

10. VueJS 特性：

I: MVVM模式（數據變量（model）發生改變 視圖（view）也改變， 視圖（view）改變，數據變量（model）也發生改變）

使用MVVM模式有幾大好處：

　　1. 低耦合。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的View上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

　　2. 可重用性。能夠把一些視圖的邏輯放在ViewModel裏面，讓不少View重用這段視圖邏輯。

　　3. 獨立開發。開發人員能夠專一與業務邏輯和數據的開發(ViewModel)。設計人員能夠專一於界面(View)的設計。

　　4. 可測試性。能夠針對ViewModel來對界面(View)進行測試

II: 組件化

III 指令系統

IIII: vue2.0開始支持虛擬dom

vue1.0是操做的是真的dom元素而不是虛擬的

虛擬dom:能夠提高頁面的刷新速度

虛擬DOM有利也有弊。

A：大小 - 其中之一就是更多的功能意味着代碼包中更多行的代碼。幸運的是，Vue.js 2.0 依舊比 較小（當前版本 21.4kb），並

且也正在刪除不少東西。

B: 內存 -一樣，虛擬DOM須要將現有的DOM拷貝後保存在內存中，這是一個在DOM更新速度和內存使用中的權衡。

C: 並不適用全部狀況 -若是虛擬DOM能夠一次性進行批量的修改是很是好的。可是若是是單獨的、稀少的更新呢？這樣的任何

DOM更新都將會使虛擬DOM帶來無心義的預計算

11. Vue.js特色

簡潔：頁面由HTML模板+Json數據+Vue實例組成

數據驅動：自動計算屬性和追蹤依賴的模板表達式

組件化：用可複用、解耦的組件來構造頁面

輕量：代碼量小，不依賴其餘庫

快速：精確有效批量DOM更新

模板友好：可經過npm，bower等多種方式安裝，很容易融入

12. Vue.js 和 AngularJS 之間的區別是什麼?

下面是一些選擇 Vue 而不是 Angular 的可能緣由；

Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織你的應用程序，而不是任什麼時候候都必須遵循 Angular 制定的規則。它僅僅是一個視圖層，因此你能夠將它嵌入一個現有頁面而不必定要作成一個龐大的單頁應用。在結合其餘庫方面它給了你更大的的空間，但相應，你也須要作更多的架構決策。例如，Vue.js 核心默認不包含路由和 ajax 功能，而且一般假定你在用應用中使用了一個外部的模塊構建系統。這多是最重要的區別

在 API 和內部設計方面，Vue.js 比 Angular 簡單得多, 所以你能夠快速地掌握它的所有特性並投入開發。

Vue.js 擁有更好的性能，由於它不使用髒檢查。當 watcher 愈來愈多時, Angular 會變得愈來愈慢，由於做用域內的每一次數據變動，全部的 watcher 都須要被從新求值。Vue 則根本沒有這個問題，由於它採用的是基於依賴追蹤的觀察系統，因此全部的數據變動觸發都是獨立的，除非它們之間有明確的依賴關係。

Vue.js 中指令和組件的概念區分得更爲清晰。指令只負責封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 它擁有本身的視圖和數據邏輯。在 Angular 中它們二者間有很多概念上的混淆。

13. Vue.js 和 React.js 有什麼區別?

React.js 和 Vue.js 確實有一些類似——它們都提供數據驅動、可組合搭建的視圖組件。然而，它們的內部實現是徹底不一樣的。React 是基於 Virtual DOM——一種在內存中描述 DOM 樹狀態的數據結構。React 中的數據一般被看做是不可變的，而 DOM 操做則是經過 Virtual DOM 的 diff 來計算的。與之相比，Vue.js 中的數據默認是可變的，而數據的變動會直接出發對應的 DOM 更新。相比於 Virtual DOM，Vue.js 使用實際的 DOM 做爲模板，而且保持對真實節點的引用來進行數據綁定。

Virtual DOM 提供了一個函數式的描述視圖的方法，這很 cool。由於它不使用數據觀察機制，每次更新都會從新渲染整個應用，所以從定義上保證了視圖通與數據的同步。它也開闢了 JavaScript 同構應用的可能性。

實話實說，我本身對 React 的設計理念也是十分欣賞的。但 React 有一個問題就是組件的邏輯和視圖結合得很是緊密。對於部分開發者來講，他們可能以爲這是個優勢，但對那些像我同樣兼顧設計和開發的人來講，仍是更偏好模板，由於模板能讓咱們更好地在視覺上思考設計和 CSS。JSX 和 JavaScript 邏輯的混合干擾了我將代碼映射到設計的思惟過程。相反，Vue.js 經過在模板中加入一個輕量級的 DSL (指令系統)，換來一個依舊直觀的模板，且可以將邏輯封裝進指令和過濾器中。

React 的另外一個問題是：因爲 DOM 更新徹底交由 Virtual DOM 管理，當你真的想要本身控制 DOM 是就有點棘手了（雖然理論上你能夠，但這樣作時你本質上在對抗 React 的設計思想）。對於須要複雜時間控制的動畫來講這就變成了一項很討人厭的限制。在這方面，Vue.js 容許更多的靈活性，而且有很多用 Vue.js 構建的富交互實例

14. 請詳細說下你對 Vue 生命週期的理解？

總共分爲 8 個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後： 在 beforeCreate 階段，vue 實例的掛載元素 el 尚未。

載入前/後：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但仍是掛載以前爲虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。

更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。

銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，可是 dom 結構依然存在

15. 組件之間如何傳值？

父組件與子組件傳值：Props

子組件向父組件傳遞數據: 子組件經過$emit方法傳遞參數,觸發父組件event

16. vue-router 有哪幾種導航鉤子?

全局導航鉤子

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from ,next)

組件內鉤子

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

單獨路由獨享組件

beforeEnter

17. vue 的雙向綁定的原理是什麼

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過 Object.defineProperty()來劫持各個屬性的 setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

18. vuex 的mutation和action的特性是什麼？有什麼區別？

mutation用於修改state的數據，是同步的。

action 相似於 muation, 不一樣在於：action 提交的是 mutation,而不是直接變動狀態

action 能夠包含任意異步操做

19. 寫 React / Vue 項目時爲何要在組件中寫 key，其做用是什麼?

在開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。在 Diff 算法中 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染。

20. computed 和 watched 的區別：

computed 是計算屬性，依賴其餘屬性計算值，而且 computed 的值有緩存，只有當計算值變化纔會返回內容。

watch 監聽到值的變化就會執行回調，在回調中能夠進行一些邏輯操做。

因此通常來講須要依賴別的屬性來動態得到值的時候可使用 computed，對於監聽到值的變化須要作一些複雜業務邏輯的狀況可使用 watch。