Vue.js相比大家都不陌生，作為近幾年來前端架構中最火的一個，已經有非常多的網頁前端開始采用Vue.js進行開發。
相比之前，Vue.js很容易上手，簡單易學，文法自由，謙虛不需要認識複雜的生命周期函數，父子元件通信更靈活。如今，很多招聘上也都寫着需要掌握Vue開發項目，那麼，面試都會問些什麼呢？下面為大家準備了一些高頻面試題，看完一定收獲滿滿~
對于MVVM的了解
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是将其中的View 的狀态和行為抽象化，讓我們将視圖 UI 和業務邏輯分開。
Model 代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯。
View 代表UI 元件，它負責将資料模型轉化成UI 展現出來。
ViewModel 監聽模型資料的改變和控制視圖行為、處理使用者互動，簡單了解就是一個同步View 和 Model的對象，連接配接Model和View。
即模型-視圖-視圖模型。【模型】指的是後端傳遞的資料。【視圖】指的是所看到的頁面。【視圖模型】mvvm模式的核心，它是連接配接view和model的橋梁。
它有兩個方向：一是将【模型】轉化成【視圖】，即将後端傳遞的資料轉化成所看到的頁面。實作的方式是：資料綁定。二是将【視圖】轉化成【模型】，即将所看到的頁面轉化成後端的資料。實作的方式是：DOM 事件監聽。這兩個方向都實作的，我們稱之為資料的雙向綁定。
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元件間的參數傳遞
1、父元件與子元件傳值
父元件傳給子元件：子元件通過props方法接受資料；
子元件傳給父元件：$emit 方法傳遞參數
2、非父子元件間的資料傳遞，兄弟元件傳值
同級傳參或者隔級傳參可以用eventBus(事件車)，内部也是釋出訂閱模式實作的，适合于非常簡單的小項目，一般不用(互相幫)中間鍵思想 :建立一個vue的執行個體,然後給每個子元件綁定一個方法(觸發時候釋出eventBus),在 每個子元件做一個訂閱的監控,觸發綁在created裡的方法執行,靠傳遞參數的不同實作同步資料 (顔色)
vuex是什麼？怎麼使用？哪種功能場景使用它？
Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。Vuex 也內建到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀态快照導入導出等進階調試功能。
隻用來讀取的狀态集中放在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})
如果你不打算開發大型單頁應用，使用 Vuex 可能是很複雜的。如果你的應用比較簡單，最好不要使用 Vuex。一個簡單的 store 模式就足夠了。但是，如果你需要建構一個中大型單頁應用，你很可能會考慮如何更好地在元件外部管理狀态，Vuex 将會成為自然而然的選擇。
vue的計算屬性
在模闆中放入太多的邏輯會讓模闆過重且難以維護，在需要對資料進行複雜處理，且可能多次使用的情況下，盡量采取計算屬性的方式。
好處：
- 使得資料處理結構清晰；
- 依賴于資料，資料更新，處理結果自動更新；
- 計算屬性内部this指向vm執行個體；
- 在template調用時，直接寫計算屬性名即可；
- 常用的是getter方法，擷取資料，也可以使用set方法改變資料；
- 相較于methods，不管依賴的資料變不變，methods都會重新計算，但是依賴資料不變的時候computed從緩存中擷取，不會重新計算。
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。
差別可能會随着版本更新有所變化
css隻在目前元件起作用？
在style标簽中寫入scoped即可 例如：
v-if 和 v-show 差別？
v-if按照條件是否渲染，v-show是display的block或none；
$route和$router的差別？
$route是“路由資訊對象”，包括path，params，hash，query，fullPath，matched，name等路由資訊參數。
而$router是“路由執行個體”對象包括了路由的跳轉方法，鈎子函數等。
vue.js的兩個核心是什麼？
資料驅動、元件系統
vue幾種常用的指令？
v-for 、 v-if 、v-bind、v-on、v-show、v-else
vue常用的修飾符？
.prevent: 送出事件不再重載頁面；
.stop: 阻止單擊事件冒泡；
.self: 當事件發生在該元素本身而不是子元素的時候會觸發；
.capture: 事件偵聽，事件發生的時候會調用
v-on 可以綁定多個方法嗎？
可以
vue中 key 值的作用？
當 Vue.js 用 v-for 正在更新已渲染過的元素清單時，它預設用“就地複用”政策。
如果資料項的順序被改變，Vue 将不會移動 DOM 元素來比對資料項的順序， 而是簡單複用此處每個元素，并且確定它在特定索引下顯示已被渲染過的每個元素。
key的作用主要是為了高效的更新虛拟DOM。
作者：沉靜地閃光
連結：https://segmentfault.com/a/1190000016344599
關注布卡family，精彩資訊敬請期待！
轉載文章和圖檔均來自公開網絡，版權歸作者本人所有。如有侵權，聯系删除。