2020年Vue面試題

Interview

●●●●

作者：@煩惱會解決煩惱

vue核心知識——理論篇

1、對于Vue是一套漸進式框架的理解

漸進式代表的含義是：主張最少。

Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層數據邏輯的地方用OO和設計模式的那套理念，也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。?
漸進式的含義，我的理解是：沒有多做職責之外的事。

2、vue.js的兩個核心是什么？

數據驅動和組件化。

3.vue生命周期鉤子函數有哪些？

總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后。具體執行流程查看下圖。

4.vue 的雙向綁定的原理是什么？

??? vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式的方式來實現的。具體實現過程：

????我們已經知道實現數據的雙向綁定，首先要對數據進行劫持監聽，所以我們需要設置一個監聽器Observer，用來監聽所有屬性。如果屬性發上變化了，就需要告訴訂閱者Watcher看是否需要更新。因為訂閱者是有很多個，所以我們需要有一個消息訂閱器Dep來專門收集這些訂閱者，然后在監聽器Observer和訂閱者Watcher之間進行統一管理的。接著，我們還需要有一個指令解析器Compile，對每個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者Watcher，并替換模板數據或者綁定相應的函數，此時當訂閱者Watcher接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。因此接下去我們執行以下3個步驟，實現數據的雙向綁定：

1.實現一個監聽器Observer，用來劫持并監聽所有屬性，如果有變動的，就通知訂閱者。

2.實現一個訂閱者Watcher，可以收到屬性的變化通知并執行相應的函數，從而更新視圖。

3.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，并根據初始化模板數據以及初始化相應的訂閱器。

流程圖如下：

vue核心知識——語法篇

1.請問?v-if?和?v-show?有什么區別？

????相同點：?兩者都是在判斷DOM節點是否要顯示。

????不同點：

a.實現方式：v-if是根據后面數據的真假值判斷直接從Dom樹上刪除或重建元素節點。? v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

b.編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件；? v-show只是簡單的基于css切換；

c.編譯條件：v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯；v-show是在任何條件下(首次條件是否為真)都被編譯，然后被緩存，而且DOM元素始終被保留；

d.性能消耗：v-if有更高的切換消耗，不適合做頻繁的切換；? v-show有更高的初始渲染消耗，適合做頻繁的額切換；

2、vue常用的修飾符

a、按鍵修飾符

如：.delete(捕獲“刪除”和”退格“鍵)? ? ??用法上和事件修飾符一樣，掛載在v-on:后面，語法：v-on:keyup.xxx=’yyy’??

class=

b、系統修飾符

可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器

• .ctrl

• .alt

• .shift

• .meta

c、鼠標按鈕修飾符

• .left

• .right

• .middle
  這些修飾符會限制處理函數僅響應特定的鼠標按鈕。如：??鼠標滾輪單擊觸發? ?Click默認是鼠標左鍵單擊

• <button @click.middle ="onClick">A

d、其他修飾符

• .lazy
  在默認情況下，v-model?在每次?input?事件觸發后將輸入框的值與數據進行同步 ，我們可以添加?lazy?修飾符，從而轉變為使用?change事件進行同步：

lazy=

• .number
  如果想自動將用戶的輸入值轉為數值類型，可以給?v-model?添加?.number修飾符：

"age" 

這通常很有用，因為即使在type="number"時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被?parseFloat()解析，則會返回原始的值。

• .trim
  如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

"msg">

??

????同樣前面都有空格加上.trim后 將前后空格都去掉了。

3、v-on可以監聽多個方法嗎？

????可以

4、vue中?key?值的作用

????使用key來給每個節點做一個唯一標識

????key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，

否則vue只會替換其內部屬性而不會觸發過渡效果。

5.Vue 組件中 data 為什么必須是函數？

????在?new Vue()?中，data?是可以作為一個對象進行操作的，然而在?component?中，data?只能以函數的形式存在，不能直接將對象賦值給它。

????當data選項是一個函數的時候，每個實例可以維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的。

6、v-for 與 v-if 的優先級

??? v-for的優先級比v-if高。

7.說出至少 4 種 vue 當中的指令和它的用法

?? ?v-if(判斷是否隱藏)

????v-for(把數據遍歷出來)

????v-bind(綁定屬性)

????v-model(實現雙向綁定)

vue核心知識——組件篇

1.vue中子組件調用父組件的方法

????第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法。

????第二種方法是在子組件里用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。

????第三種是父組件把方法傳入子組件中，在子組件里直接調用這個方法。

2.vue中父組件調用子組件的方法

????父組件利用ref屬性操作子組件方法。

父：

子：
method: {
 ?test() {
 ? ? alert(1)
 ?}
}
在父組件里調用test即 this.$refs.childMethod.test()

3.vue組件之間傳值

? (1)父組件給子組件傳值：

1.父組件調用子組件的時候動態綁定屬性2.子組件定義props接收動態綁定的屬性props: ['dataList'] ? ? ? ?3.子組件使用數據

? (2)子組件主動獲取父子間的屬性和方法：

????在子組件中使用this.$parent.屬性/this.$parent.方法。

(3)子組件給父組件傳值：

一、使用ref屬性

1.父組件調用子組件時綁定屬性ref

??:ref='parent'>

2.在父組件中使用this.$refs.parent.屬性/this.$refs.parent.方法

二、使用$emit方法

1.子組件調用this.$emit('方法名‘,傳值)

2.父組件通過子組件綁定的'方法名'獲取傳值。

(4)vue頁面級組件之間傳值

??? 1.使用vue-router通過跳轉鏈接帶參數傳參。

??? 2.使用本地緩存localStorge。

? ? 3.使用vuex數據管理傳值。

(5)說說vue的動態組件。

????????多個組件通過同一個掛載點進行組件的切換，is的值是哪個組件的名稱，那么頁面就會顯示哪個組件。

????主要考查面試這 component的 is屬性。

(6)keep-alive內置組件的作用

????可以讓當前組件或者路由不經歷創建和銷毀，而是進行緩存，凡是被keep-alive組件包裹的組件，除了第一次以外。不會經歷創建和銷毀階段的。第一次創建后就會緩存到緩存當中

?(7)遞歸組件的用法

????組件是可以在它們自己的模板中調用自身的。不過它們只能通過 name 選項來做這件事。

????首先我們要知道，既然是遞歸組件，那么一定要有一個結束的條件，否則就會使用組件循環引用，最終出現“max stack size exceeded”的錯誤，也就是棧溢出。那么，我們可以使用v-if="false"作為遞歸組件的結束條件。當遇到v-if為false時，組件將不會再進行渲染。

vue核心知識——路由

1.怎么定義vue-router的動態路由？怎么獲取傳過來的值？

動態路由的創建，主要是使用path屬性過程中，使用動態路徑參數，以冒號開頭，如下：

{

? path: '/details/:id'

? name: 'Details'

? components: Details

}

訪問details目錄下的所有文件，如果details/a，details/b等，都會映射到Details組件上。

當匹配到/details下的路由時，參數值會被設置到this.$route.params下，所以通過這個屬性可以獲取動態參數

this.$route.params.id

2.vue-router有哪幾種路由守衛?

路由守衛為：
全局守衛：beforeEach
后置守衛：afterEach
全局解析守衛：beforeResolve
路由獨享守衛：beforeEnter

3.$route和 $router的區別是什么？

? ? $router為VueRouter的實例，是一個全局路由對象，包含了路由跳轉的方法、鉤子函數等。

????$route 是路由信息對象||跳轉的路由對象，每一個路由都會有一個route對象，是一個局部對象，包含path,params,hash,query,fullPath,matched,name等路由信息參數。

4.vue-router響應路由參數的變化

• (1)用watch 檢測

• (2)組件內導航鉤子函數

?

5.?vue-router 傳參

? (1)使用Params:

• 只能使用name，不能使用path

• 參數不會顯示在路徑上

• 瀏覽器強制刷新參數會被清空

? ?

(2)使用Query：

• 參數會顯示在路徑上，刷新不會被清空

• name 可以使用path路徑

????

vue核心知識——vuex

不用Vuex會帶來什么問題？

一、可維護性會下降，你要想修改數據，你得維護三個地方

二、可讀性會下降，因為一個組件里的數據，你根本就看不出來是從哪來的

三、增加耦合，大量的上傳派發，會讓耦合性大大的增加，本來Vue用Component就是為了減少耦合，現在這么用，和組件化的初衷相背。

1.vuex有哪幾種屬性？

????有五種，分別是 State、 Getter、Mutation 、Action、 Module。

2、vuex的State特性是？
答：
一、Vuex就是一個倉庫，倉庫里面放了很多對象。其中state就是數據源存放地，對應于與一般Vue對象里面的data
二、state里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
三、它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
3、vuex的Getter特性是？
答：
一、getters 可以對State進行計算操作，它就是Store的計算屬性
二、 雖然在組件內也可以做計算屬性，但是getters 可以在多組件之間復用
三、 如果一個狀態只在一個組件內使用，是可以不用getters
4、vuex的Mutation特性是？
答：
一、Action 類似于 mutation，不同在于：
二、Action 提交的是 mutation，而不是直接變更狀態。
三、Action 可以包含任意異步操作
5、Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？
答：
一、如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里。
二、如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用，并包裝成promise返回，在調用處用async await處理返回的數據。如果不要復用這個請求，那么直接寫在vue文件里很方便。

vuex運行流程圖

---

長按識別關注公眾號

總結

以上是生活随笔為你收集整理的js去掉前后空格的函数_2020年最火爆的Vue.js面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。