1、什麼是MVVM？
答：MVVM是Model-View-ViewModel的縮寫。MVVM是一種設計思想。Model 層代表數據模型，可以在Model中定義數據修改和操作的業務邏輯；View 代表UI 組件，它負責將數據模型渲染到頁面上，轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象，ViewModel通過雙向綁定把View和Model進行同步交互，不需要手動操作DOM
在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人爲干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，複雜的數據狀態維護完全由 MVVM 來統一管理。
2、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態參數？
答：在router目錄下的index.js文件中，對path屬性加上/:id。 使用router對象的params.id
3、vue-router有哪幾種導航鉤子？
答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件
4、vuex是什麼？怎麼使用？哪種功能場景使用它？
答：vue框架中狀態管理。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
5、MVVM和MVC區別？和其他框架(jquery)區別？那些場景適用？
答：MVVM和MVC都是一種設計思想，主要就是MVC中的Controller演變成ViewModel,，MVVM主要通過數據來顯示視圖層而不是操作節點，解決了MVC中大量的DOM操作使頁面渲染性能降低，加載速度慢，影響用戶體驗問題。主要用於數據操作比較多的場景。
場景：數據操作比較多的場景，更加便捷
6、Vue的雙向數據綁定原理是什麼？
答：vue.js是採用數據劫持結合發佈者 - 訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
7、請說下封裝vue組件的過程？
答：首先，組件可以提升整個項目的開發效率能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低，難維護，複用性等問題。
然後，使用Vue.extend方法創建一個組件，然後使用Vue.component方法註冊組件。子組件需要數據，可以在道具中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用發射方法
8、聊聊你對Vue.js的模板編譯的理解？
答：簡而言之，就是先轉化成AST樹，再得到的渲染函數返回VNODE（Vue公司的虛擬DOM節點）
詳情步驟：首先，通過編譯編譯器把模板編譯成AST語法樹（抽象語法樹即源代碼的抽象語法結構的樹狀表現形式），編譯是createCompiler的返回值，createCompiler是用以創建編譯器的。負責合併選項。然後，AST會經過生成（將AST語法樹轉化成渲染功能字符串的過程）得到渲染函數，渲染的返回值是VNode，VNode是Vue的虛擬DOM節點，裏面有（標籤名，子節點，文本等等）
9、<keep-alive></keep-alive>的作用是什麼，如何使用？
答：包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染；
使用：簡單頁面時
緩存： <keep-alive include=”組件名”></keep-alive>
不緩存：<keep-alive exclude=”組件名”></keep-alive>
10、vue和react區別
答：相同點：都鼓勵組件化，都有’props’的概念，都有自己的構建工具，Reat與Vue只有框架的骨架，其他的功能如路由、狀態管理等是框架分離的組件。
不同點：React：數據流單向，語法—JSX，在React中你需要使用setState()方法去更新狀態。Vue：數據雙向綁定，語法--HTML，state對象並不是必須的，數據由data屬性在Vue對象中進行管理。適用於小型應用，但對於對於大型應用而言不太適合。
11、v-show和v-if指令的共同點和不同點?
v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏。
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果。
12、$route和$router的區別
答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等
13、vue中 key 值的作用
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地複用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是爲了高效的更新虛擬DOM
14、mvvm和mvc區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
mvc和mvvm其實區別並不大。都是一種設計思想。主要就是mvc中Controller演變成mvvm中的viewModel。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
區別：vue數據驅動，通過數據來顯示視圖層而不是節點操作。
場景：數據操作比較多的場景，更加便捷
15、vue的優點是什麼？
- 低耦合。視圖（View）可以獨立於Model變化和修改
- 可重用性。你可以把一些視圖邏輯放在一個ViewModel裏面，讓很多view重用這段視圖邏輯。
- 獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計。
- 可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。
16、 組件之間的傳值？
最常見方法
- 父組件通過props傳遞數據給子組件
- 子組件通過$emit方法傳遞參數給父組件
17、路由之間跳轉
聲明式（標籤跳轉） 編程式（ js跳轉）
18、vue.cli中怎樣使用自定義的組件？
- 在components目錄新建你的組件文件（indexPage.vue），script一定要export default {}
- 在需要用的頁面（組件）中導入：import indexPage from '@/components/indexPage.vue'
- 注入到vue的子組件的components屬性上面,components:{indexPage}
- 在template視圖view中使用，
例如有indexPage命名，使用的時候則index-page
19、vue如何實現按需加載配合webpack設置
webpack中提供了require.ensure()來實現按需加載。以前引入路由是通過import 這樣的方式引入，改爲const定義的方式進行引入。
不進行頁面按需加載引入方式：import home from '../../common/home.vue'
進行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
20、vuex面試相關
（1）vuex是什麼？怎麼使用？哪種功能場景使用它？
vue框架中狀態管理。在main.js引入store，注入。新建一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車
（2）vuex有哪幾種屬性？
有五種，分別是 State、 Getter、Mutation 、Action、 Module
- vuex的State特性 Vuex就是一個倉庫，倉庫裏面放了很多對象。其中state就是數據源存放地，對應於一般Vue對象裏面的data
- state裏面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
- 它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
vuex的Getter特性
- getters 可以對State進行計算操作，它就是Store的計算屬性
- 雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間複用
- 如果一個狀態只在一個組件內使用，是可以不用getters
vuex的Mutation特性
- Mutation直接修改數據
- Action 提交的是 mutation，而不是直接變更狀態
- Action 可以包含任意異步操作。
21、 v-show和v-if指令的共同點和不同點
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷燬和重建DOM達到讓元素顯示和隱藏的效果
22、 如何讓CSS只在當前組件中起作用
將當前組件的 <style> 修改爲 <style scoped>
23、<keep-alive></keep-alive>的作用是什麼?
<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染。
24、Vue中引入組件的步驟?
1）採用ES6的import ... from ...語法或CommonJS的require()方法引入組件
2）對組件進行註冊,代碼如下
|
1 2 3 4 |
|
// 註冊 Vue.component('my-component', { template: '<div>A custom component!</div>' })
3）使用組件 <my-component></my-component>
25、指令v-el的作用是什麼?
提供一個在頁面上已存在的 DOM 元素作爲 Vue 實例的掛載目標.可以是 CSS 選擇器，也可以是一個 HTMLElement 實例
26、在Vue中使用插件的步驟
採用ES6的import ... from ...語法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個選項對象Vue.use(MyPlugin, { someOption: true })
27、請列舉出3個Vue中常用的生命週期鉤子函數
- created: 實例已經創建完成之後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段還沒有開始, $el屬性目前還不可見
- mounted: el被新創建的 vm.el 也在文檔內。
- activated: keep-alive組件激活時調用
28、active-class是哪個組件的屬性？
vue-router模塊的router-link組件。
29、怎麼定義vue-router的動態路由以及如何獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。
使用router對象的params.id。
30、vue-router有哪幾種導航鉤子？
- 全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
- 組件內的鉤子；
- 單獨路由獨享組件
31、生命週期相關面試題
總共分爲8個階段創建前/後，載入前/後，更新前/後，銷燬前/後。
- 創建前/後： 在beforeCreate階段，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結構依然存在
（1）、什麼是vue生命週期
答： Vue 實例從創建到銷燬的過程，就是生命週期。也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命週期。
（2）、vue生命週期的作用是什麼
答：它的生命週期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
（3）、vue生命週期總共有幾個階段
答：可以總共分爲8個階段：創建前/後, 載入前/後,更新前/後,銷燬前/銷燬後
（4）、第一次頁面加載會觸發哪幾個鉤子
答：第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子
（5）、DOM 渲染在 哪個週期中就已經完成
答：DOM 渲染在 mounted 中就已經完成了。
（6）、簡單描述每個週期具體適合哪些場景
答：生命週期鉤子的一些使用方法：
- 創建前/後： 在beforeCreate階段，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結構依然存在
32、說出至少4種vue當中的指令和它的用法？
v-if：判斷是否隱藏；v-for：數據循環；v-bind:class：綁定一個屬性；v-model：實現雙向綁定
33、vue-loader是什麼？使用它的用途有哪些？
解析.vue文件的一個加載器。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
34、scss是什麼？在vue.cli中的安裝使用步驟是？有哪幾大特性？
答：css的預編譯。
使用步驟：
- 先裝css-loader、node-loader、sass-loader等加載器模塊
- 在build目錄找到webpack.base.config.js，在那個extends屬性中加一個拓展.scss
- 在同一個文件，配置一個module屬性
- 然後在組件的style標籤加上lang屬性 ，例如：lang=”scss”
特性:
可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套
35、爲什麼使用key？
當有相同標籤名的元素切換時，需要通過 key 特性設置唯一的值來標記以讓 Vue 區分它們，否則 Vue 爲了效率只會替換相同標籤內部的內容。
36、爲什麼避免 v-if 和 v-for 用在一起
當 Vue 處理指令時，v-for 比 v-if 具有更高的優先級，通過v-if 移動到容器元素，不會再重複遍歷列表中的每個值。取而代之的是，我們只檢查它一次，且不會在 v-if 爲否的時候運算 v-for。
37、VNode是什麼？虛擬 DOM是什麼？
Vue在 頁面上渲染的節點，及其子節點稱爲“虛擬節點 (Virtual Node)”，簡寫爲“VNode”。“虛擬 DOM”是由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。
38、$nextTick是什麼？
vue實現響應式並不是數據發生變化後dom立即變化，而是按照一定的策略來進行dom更新。
$nextTick是在下次 DOM 更新循環結束之後執行延遲迴調，在修改數據之後使用 $nextTick，則可以在回調中獲取更新後的 DOM
39、vue中的 ref 是什麼？
ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。
40、vue如何兼容ie
使用 babel-polyfill 插件
41、Vue與Angular以及React的區別？ 與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。
不同點：
AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據做髒檢查，所以Watcher越多越慢；Vue.js使用基於依賴追蹤的觀察並且使用異步隊列更新，所有的數據都是獨立觸發的。 與React的區別
相同點：
React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯後使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數，可以讓開發者定製化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。
不同點：
React採用的Virtual DOM會對渲染出來的結果做髒檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。
42、爲什麼要進行前後端分離？前後端分離的優勢在哪裏？劣勢在哪裏？
優點：前端專門負責前端頁面和特效的編寫，後端專門負責後端業務邏輯的處理，前端追求的是頁面美觀、頁面流暢、頁面兼容等。後端追求的是三高（高併發、高可用、高性能）讓他們各自負責各自的領域，讓專業的人負責處理專業的事情，提高開發效率
缺點：
- 當接口發生改變的時候，前後端都需要改變
- 當發生異常的時候，前後端需要聯調--聯調是非常浪費時間的