vue—面試題1

1.vue的生命週期

vue的生命週期主要分爲幾個簡單部分：數據初始化，dom掛載，數據更新，組件寫卸載。在一個，就是開啓組件緩存的時候，會有組件啓用和組件停用階段。

數據初始化階段

beforeCreate：再實例初始化以後，數據觀測（data observer）和event/watcher事件配置以前調用

created：實力已經建立完成以後調用，在這一步，實例已完成如下配置：數據觀測，屬性和方法的運算，event/watcher時間回調。然而，掛載還沒開始，$el屬性目前不可見。

dom掛載階段

beforeMount：在掛載開始以前調用：相關的render函數首次被調用

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

mounted不會承諾全部子組件也都一塊兒被掛載。若是但願等到整個視圖都渲染完畢，能夠用vm.$nextTick替換掉mounted

數據更新階段

beforeUpdate：數據更新時調用，發生虛擬dom重渲染和打補丁以前。

updated：因爲數據更新致使虛擬dom重渲染和打補丁，在這以後調用該鉤子。

當這個鉤子被調用時，組件dom已經更新，因此如今能夠執行依賴於dom的操做，然而在大多數狀況下，應該在此期間更新狀態。若是要相應狀態改變，一般最好使用計算屬性或watcher取而代之。

updated不會承諾全部子組件也都一塊兒被重繪，若是但願等到整個視圖重回完畢，能夠用vm.$nextTick替換update；

緩存啓用時會用兩個鉤子函數：

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

deactivated：keep-alive組件停用時調用

組件卸載階段

beforeDestroy:實例銷燬以前調用。在這一步，實例徹底可用。

destroyed：vue實例銷燬時調用。調用後，vue實例指示的全部東西都會解除綁定，全部事件監聽器會被移出，全部的子實例也會被銷燬。

2.vue實現數據雙向綁定的原理

vue實現數據雙向綁定主要是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。

具體就是經過Object.defineProperty()，中的setter，getter來監聽屬性變更實現Observer進行數據的監聽而後就是通知訂閱者，訂閱者其實就是一個簡單的數組，這個數組中的內容就是咱們使用的一個數據集合，使用了的數據能夠經過getter獲得，其實就是在調用的時候給數組添加一個訂閱者，這樣就實現了一個watcher（須要監聽數據的集合），而後實現一個compile，其做用就是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應節點綁定更新數據，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新數據，其實vue的數據雙向綁定就是MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令，最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。

3.vue路由實現原理

路由的實現有兩種：hash和history interface來實現前端路由，

hash在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；特色：

（1）hash雖然在URL中，但不被包括在HTTP請求中

（2）用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面

history採用h5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動，不過history有個問題是：若是用戶直接在地址欄中輸入並回車，瀏覽器重啓或從新加載時，history模式會將url修改的和正常請求後端同樣，此狀況下，從新向後端發送請求，後端若是沒有配置對應路由處理，則返回404，解決方法是後端配置一下。

4.vue路由傳參

<router-link :to="{path:'/index',params：{id:num}}">
<router-link :to="{ path:'/index' , query:{id:num}}"

而後經過$route.params來讀取數據，但路由傳遞參數值是對象的話就不行了會報錯，傳遞前用base64轉譯一下就能夠。

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

在style標籤中寫入scoped便可

如：<style scoped></style>

6.watch，computed，methods的區別

watch是作單一的數據監聽，方法名要與監聽數據名相同，不須要返回值，能夠獲得修改前與修改後的值

computed與methods基本相同，都是方法，都是在數據改變的時候，若是方法內部有該數據依賴，都是自動執行。

computed 是計算屬性，methods是放操做方法

computed調用不須要加（），methods要加（）

computed會將計算值進行緩存，若是內部依賴值沒有發生變化，無論調用多少次，都只執行一次，methods則是調用多少次，則執行多少次。

7.組件劃分

按照頁面的框架來劃分，將頁面中的每一塊均可以劃分爲一個組件，而後從中提取公共組件，通常狀況下，都是分爲頁面組件和公共組件。

8.vue路由的鉤子函數

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

beforeEach主要有3個參數to，from，next：

to：route即將進入的目標路由對象，

from：route當前導航正要離開的路由

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

9.$route和$router的區別

$route是「路由信息對象」，包含了path，params，query，hash，fullPath，matched，name這些路由信息參數

而$router是「路由實例」對象包含了路由的一些跳轉方法，鉤子函數等

10.key的使用

通常狀況下，vue在渲染完成後，若是數據發生變化，只會從新渲染數據，不會從新渲染整個元素，可是有時候咱們須要元素被從新渲染，此時就須要使用key關鍵字，使用v-bind綁定key關鍵字，能夠實如今數據發生變化時候從新渲染整個元素。注：同一父級元素下全部子元素若是都要在數據變化後從新渲染元素，則須要被綁定的key