vue基本知識點總結---面試必備

最近入職新的公司，整體來說還是不錯的，前一陣子看了很多關于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處理回傳的資料，