Vue基礎知識及面試經常使用問題

1 對於MVVM的理解

MVVM 是 Model-View-ViewModel 的縮寫

1 Model 表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。
2 View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。
3 ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View

1 在MVVM架構下，View和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，
而Model 數據的變化也會當即反應到View 上。
2 ViewModel 經過雙向數據綁定把 View 層和 Model層鏈接了起來，而View和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，
不須要手動操做DOM，不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理

2 請詳細說下你對vue生命週期的理解

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

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

什麼是vue生命週期？

1 答： Vue 實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。

vue生命週期的做用是什麼？

1 答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

vue生命週期總共有幾個階段？

1 答：它能夠總共分爲8個階段：建立前/後、載入前/後、更新前/後、銷燬前/銷燬後。

第一次頁面加載會觸發哪幾個鉤子？

1 答：會觸發下面這幾個beforeCreate、created、beforeMount、mounted 。

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

答：DOM 渲染在 mounted 中就已經完成了

3 Vue實現數據雙向綁定的原理：Object.defineProperty()

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，
經過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。
當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，
用 Object.defineProperty() 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue追蹤依賴，
在屬性被訪問和修改時通知變化。 vue的數據雙向綁定 將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者
，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），
最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。 #

4 Vue組件間的參數傳遞

父組件與子組件傳值

父組件傳給子組件：子組件經過props方法接受數據；

子組件傳給父組件： $emit 方法傳遞參數

props相關資料連接:https://www.jb51.net/article/143049.htm

非父子組件間的數據傳遞，兄弟組件傳值

eventBus，就是建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件。項目比較小時，用這個比較合適（雖然也有很多人推薦直接用VUEX，具體來講看需求）

5 Vue的路由實現：hash模式 和 history模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用 window.location.hash 讀取。特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。
history模式：history採用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動 #

6 vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next。
to：route即將進入的目標路由對象。
from：route當前導航正要離開的路由。
next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉
#

7 vuex是什麼？怎麼使用？哪一種功能場景使用它？

只用來讀取的狀態集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 異步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，… export
場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

state：Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。
mutations：mutations定義的方法動態修改Vuex 的 store 中的狀態或數據
getters：相似vue的計算屬性，主要用來過濾一些數據。
action：actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view 層經過 store.dispath 來分發 action

modules：項目特別複雜的時候，可讓每個模塊擁有本身的state、mutation、action、getters，使得結構很是清晰，方便管理

8 v-if 和 v-show 區別

答：v-if按照條件是否渲染，v-show是display的block或none；
#

9 $route和$router的區別

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

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

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

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

<keep-alive></keep-alive> 包裹動態組件時，會緩存不活動的組件實例,主要用於保留組件狀態或避免從新渲染

好比有一個列表和一個詳情，那麼用戶就會常常執行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，
那麼就能夠對列表組件使用<keep-alive></keep-alive>進行緩存，這樣用戶每次返回列表的時候，都能從緩存中快速渲染，而不是從新渲染

12 在Vue中使用插件的步驟

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

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

created: 實例已經建立完成以後調用,在這一步,實例已經完成數據觀測, 屬性和方法的運算, watch/event事件回調. 然而, 掛載階段尚未開始, $el屬性目前還不可見
mounted: el被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted被調用時 vm.$el 也在文檔內。
activated: keep-alive組件激活時調用