最近入職新的公司，整體來說還是不錯的。前一陣子看了很多關於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處理返回的數據。
————————————————
版權聲明：本文為CSDN博主「慢性告別」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本聲明。