最近入職新的公司，整體來說還是不錯的。前一陣子看了很多關於vue的知識點，自己理解著整理一下，再加深一下印象。也希望可以幫助到有需要的同學。理解錯誤的地方，歡迎指正。
1、對於Vue是一套漸進式框架的理解
答：Vue是漸進的，沒有強主張，是個輕量檢視。它只做了自己應該做的事，沒有做多餘的事。
2、vue.js的兩個核心是什麼？
答：資料驅動和元件化。
3、vue中的模板編譯原理
答：模板指的就是template。如果我們傳了一個template，我們會把template轉換成一個render函數，然後通過render函數返回虛擬DOM，再把虛擬的DOM變成真正的DOM。
4、 響應式資料的原理
答：響應式就是當資料變化的時候，可以讓檢視也同步更新。核心是Object.defineProperty，vue初始化的時候，Object.defineProperty依次會給data的屬性上增加get和set方法，並對依賴進行收集，如果資料發生變化，就會去通知相關的依賴做出對應的更新。
5、vue生命週期勾點函數有哪些？
(vue2.0)
答：① 建立期間的生命週期函數：
beforeCreate()：此時，範例在記憶體中剛剛建立出來，data和methods沒 有被初始化。
created()：此時，範例已經在記憶體中建立完成，data和methods已經被初始化完成。模板還沒有編譯。
beforeMount（）：此時，模板已經編譯成功，還沒有掛載到頁面上。
mounted()：此時，編譯好的模板已經掛載到了指定的位置上去。
② 執行期間的生命週期函數：
beforeUpdate()：此時，data資料發生改變後，還沒有重新渲染DOM樹，data的資料是最新的，但是頁面上展示的還是舊資料。
updated()：此時，data中的資料和頁面中的渲染是一致的。
③ 銷燬期間的生命週期函數：
beforeDestroy()：此時，範例的方法、指令都還可以使用，範例銷燬之前呼叫。
destroyed()：此時，vue範例上的所有指令、繫結、監聽都會被銷燬，子範例也全部被銷燬。
6、 vue的生命週期勾點是如何實現的？
答：vue的生命週期勾點實際上就是一個回撥函數。當我們傳入一個勾點函數時，vue內部會幫我們呼叫，並將生命週期勾點轉換成陣列，呼叫的時候，就又會把陣列遍歷一遍，類似一個釋出訂閱的模式。
7、vue 的雙向繫結的原理是什麼？
答：vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現的。
實現步驟：
①.實現一個監聽器Observer，用來劫持並監聽所有屬性，如果有變動的，就通知訂閱者。
②.實現一個訂閱者Watcher，可以收到屬性的變化通知並執行相應的函數，從而更新檢視。
③.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，並根據初始化模板資料以及初始化相應的訂閱器。
8、 vue為什麼要操作虛擬DOM?
答：虛擬DOM就是用一個物件，來描述真實DOM。一個真實的DOM上面有非常多的屬性，操作起來非常不便，為了減少DOM操作，我們在更新的時候就把需要更新的DOM先記錄下來，然後更新這些需要更新的DOM，最後再根據diff演演算法比對，更新DOM。（vue裡的diff演演算法是平級比較，不考慮跨級比較）虛擬DOM不依賴真實的平臺環境，可以實現跨平臺。
9、v-if 和 v-show 有什麼區別？
答：這兩個指令都是在判斷DOM節點是否要顯示。區別是：
①.實現方式： v-if是根據後面資料的真假值判斷直接從Dom樹上刪除或重建元素節點。 v-show只是在修改元素的display的屬性值，元素始終在Dom樹上。
②.編譯過程：v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件； v-show只是簡單的基於css切換；
③.編譯條件：v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始區域性編譯； v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且DOM元素始終被保留；
④.效能消耗：v-if有更高的切換消耗，不適合做頻繁的切換； v-show有更高的初始渲染消耗，適合做頻繁的切換；
10、vue常用的修飾符
答：vue修飾符主要有：
①事件修飾符
.stop：和原生JavaScript中的event.stopPropagation()一致，阻止事件冒泡
.prevent：和原生JavaScript中的event.preventDefault()一致，阻止預設事件
.capture：與事件冒泡的方向相反，事件捕獲由外到內
.self：只會觸發自己範圍內的事件，不包含子元素
.once：只會觸發一次。
②按鍵修飾符
.delete（捕獲「刪除」和」退格「鍵） 用法上和事件修飾符一樣，掛載在v-on:後面：
v-on:keyup.xxx=’yyy’ <input @keyup.delete="onKey"/>
③系統修飾符
.ctrl .alt .shift .meta這些修飾符可以實現按下相應按鍵觸發滑鼠或鍵盤事件的監聽器。
11、v-on可以監聽多個方法嗎？
答：可以
<button v-on="{mouseenter: onEnter,mouseleave: onLeave}">點我</button>
12、 vue.mixin的使用場景和原理是什麼？
答：vue.mixin可以增加公共方法，當元件初始化呼叫的時候，mergeOptions方法會進行合併，並針對不同的屬性進行合併。vue.mixin也有很多缺點，比如依賴問題、命名問題、資料不能共用、資料來源等問題。
13、vue中 key 值的作用
答： key的作用主要是為了高效的更新虛擬DOM。在vue中，當使用相同標籤名元素的過渡切換時，也會使用到key屬性，這樣是為了讓vue區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。
14、Vue 元件中 data 為什麼必須是函數？
答：在 new Vue() 中，data 是可以作為一個物件進行操作的，然而在 component 中，data 只能以函數的形式存在，不能直接將物件賦值給它。 當data選項是一個函數的時候，每個範例可以維護一份被返回物件的獨立的拷貝，這樣各個範例中的data不會相互影響，是獨立的。
15、v-for 與 v-if 的優先順序
答：v-for優先順序高於v-if。
16、 nextTick的實現原理是什麼？
答：nextTick中的回撥函數是在下一次DOM更新結束之後執行的，延遲了回撥，從而防止多次更新。nextTick裡面就是一個非同步方法（promise）。
17、說出至少 4 種 vue 當中的指令和它的用法
答：
① v-if(判斷是否隱藏)
② v-for(遍歷)
③ v-bind(屬性繫結)
⑤ v-model(雙向資料繫結)
18、vue中子元件呼叫父元件的方法
答：
① 直接在子元件中通過this.$parent.event來呼叫父元件的方法。
② 在子元件裡用$emit向父元件觸發一個事件，父元件監聽這個事件就行了。
③ 父元件把方法傳入子元件中，在子元件裡直接呼叫這個方法。
19、vue中父元件呼叫子元件的方法
答：
父元件利用ref屬性操作子元件方法。
父：
<child ref="childMethod"></child>
子：
test() {
console.log('你好')
}
}
在父元件裡呼叫test使用this.$refs.childMethod.test()
20、vue元件之間傳值
答：
(1)父子元件傳值：
① 父元件呼叫子元件的時候動態繫結屬性
<parent :dataList='dataList'></parent>
② 子元件定義props接收動態繫結的屬性props: [‘dataList’]
③ 子元件獲取父子間的屬性和方法：
在子元件中使用this.$parent.屬性名 /this.$parent.方法名。
④ 子元件給父元件傳值：
a. 使用ref屬性
父元件呼叫子元件時繫結屬性ref
<parent :ref='parent'></parent>
在父元件中使用this.$refs.parent.屬性/this.$refs.parent.方法
b. 使用$emit方法
子元件呼叫this.$emit('方法名‘,傳值)
父元件通過子元件繫結的’方法名’獲取傳值
（2）vue頁面級元件之間傳值
① 使用vue-router通過跳轉連結帶引數傳參。
② 使用本地快取localStorge。
③ 使用vuex資料管理傳值。
21、說說vue的動態元件。
答：多個元件通過同一個掛載點進行元件的切換，is的值是哪個元件的名稱，那麼頁面就會顯示哪個元件。
22、keep-alive內建元件的作用
答：keep-alive是vue內建的一個元件，而這個元件的作用就是能夠快取不活動的元件，元件進行切換的時候，預設會進行銷燬，如果有需求，某個元件切換後不進行銷燬，而是儲存之前的狀態，那麼就可以利用keep-alive來實現。
23、vue中是如何檢測陣列變化的
答：vue將陣列原型上的方法進行了重新編寫，更改了一些陣列的方法，比如push、shift、pop、splice、unshift、sort、reverse，這些方法都有一個特點，就是可以改變陣列原來的值。當我們用了這些方法來運算元組時，就會把原來的方法進行劫持，可以在函數內部新增自己的功能。如果想跟新陣列的索引，需要使用vue.$set方法來實現。
24、 vue.set方法
答：vue不允許在已經建立的範例上動態新增新的根級響應式屬性，$set可以觸發更新，當物件新增不存在的屬性時，會觸發物件依賴的watcher去更新，當更改陣列索引時，我們呼叫陣列的splice方法去更新陣列。
運算元組示列：
this.$set(arr, index, val)
操作物件範例：
this.$set( obj, key, val)
25、nextTick的實現原理是什麼
答：nextTick中的回撥函數是在下一次DOM更新結束之後執行的，延遲了回撥，從而防止多次更新。nextTick裡面就是一個非同步方法（promise）。
26、遞迴元件的用法
答：在export default中，有一個屬性是name。這屬性對遞迴元件來說非常重要。遞迴元件只能通過 name 選項來做事。遞迴元件一定要有一個結束的條件，否則就會使元件迴圈參照，最終出現「max stack size exceeded」的錯誤，也就是棧溢位。那麼，我們可以使用v-if="false"作為遞迴元件的結束條件。當遇到v-if為false時，元件將不會再進行渲染。
27、怎麼定義vue-router的動態路由？怎麼獲取傳過來的值？
答：動態路由的建立,使用path屬性，使用動態路徑引數，以冒號開頭:
{
path: '/test/:id'
name: 'Test'
components: Test
}
存取test目錄下的所有檔案，test上的所有屬性都會對映到Test元件上。
當讀取/test下的路由時，引數會被放到this.$route.params裡面。可以通過
this.$route.params.id動態獲取引數。
28、vue-router有哪幾種路由守衛?
答：路由守衛為
全域性守衛：beforeEach
後置守衛：afterEach
全域性解析守衛：beforeResolve
路由獨享守衛：beforeEnter
29、beforeEach的原理
答：router.beforeEach（）用來做一些進入頁面的限制。比如登入，若沒有登入就不能進入頁面，只有登入了之後才有許可權檢視某些頁面。也就是路由攔截。
原理：
當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步執行，此時導航在所有守衛 resolve 完之前都一直處 等待狀態中。
每個守衛方法接收三個引數：
to: Route: 即將要進入的目標 路由物件
from: Route: 當前導航正要離開的路由
next: Function: 一定要呼叫該方法來 resolve 這個勾點。執行依賴 next 方法的呼叫引數。
next(): 進行佇列中的下一個勾點。如果全部勾點執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。
next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 範例，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。
30、$route和 $router的區別是什麼？
答：$router為VueRouter的範例，是一個全域性路由物件，包含了路由跳轉的方法、勾點函數等。
$route是路由資訊物件跳轉的路由物件，每一個路由都會有一個route物件，是一個區域性物件，裡面包含：path、params、hash、query、fullPath、matched、name等路由資訊引數。
31、vue-router響應路由引數的變化
答：
① 用watch 監聽
② 使用元件內beforeRouteUpdate(to,from,next)導航勾點函數，to表示將要跳轉的路由物件，from表示從哪個路由跳轉過來，next是進行下一個勾點函數
32、 vue-router 傳參
答：① 使用Params:只能使用name屬性，不能使用path，引數不會顯示在路徑上，瀏覽器強制重新整理引數會被清空
② 使用Query：引數會顯示在路徑上，重新整理不會被清空，name 可以使用path路徑
33、不用Vuex會帶來什麼問題？
答：
① 可維護性下降，修改資料，需要維護好個地方
② 可讀性下降，元件內的資料來源不明確
③增加耦合，Vue用Component的初衷在於降低耦合性，如果大量的上傳分發，反而會增加耦合度。
34、vuex有哪幾種屬性？
答：State、 Getter、Mutation 、Action、 Module。
35、vuex的State特性是？
答：Vuex就好比是一個倉庫，倉庫裡面放了很多物件。其中state就是存放資料來源的地方，對應Vue物件裡面的data。state裡面存放的資料是響應式的，Vue元件從store中讀取資料，若是store中的資料發生改變，依賴這個資料的元件也會發生更新。它通過mapState把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中
36、vuex的Getter特性是？
答：getters 可以對State進行計算操作，它就是Store的計算屬性。是getters 可以在多元件之間複用。如果一個狀態只在一個元件內使用，可以不用getters
37、vuex的Mutation特性是？
答：Action 類似於 mutation，不同在於：Action 提交的是 mutation，而不是直接變更狀態。Action 可以包含任意非同步操作
38、Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中？
答：
① 如果請求來的資料不需要被其他元件複用，只在請求的元件內使用，就不需要放入vuex 的state裡。
② 如果被其他地方複用，就可以把請求放入action裡，包裝成promise返回，在呼叫的地方用async await處理返回的資料。