2020年Vue面試題

Interview

●●●●

作者：@煩惱會(huì)解決煩惱

vue核心知識(shí)——理論篇

1、對(duì)于Vue是一套漸進(jìn)式框架的理解

漸進(jìn)式代表的含義是：主張最少。

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

2、vue.js的兩個(gè)核心是什么？

數(shù)據(jù)驅(qū)動(dòng)和組件化。

3.vue生命周期鉤子函數(shù)有哪些？

總共分為8個(gè)階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。具體執(zhí)行流程查看下圖。

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

??? vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的。具體實(shí)現(xiàn)過程：

????我們已經(jīng)知道實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，首先要對(duì)數(shù)據(jù)進(jìn)行劫持監(jiān)聽，所以我們需要設(shè)置一個(gè)監(jiān)聽器Observer，用來監(jiān)聽所有屬性。如果屬性發(fā)上變化了，就需要告訴訂閱者Watcher看是否需要更新。因?yàn)橛嗛喺呤怯泻芏鄠€(gè)，所以我們需要有一個(gè)消息訂閱器Dep來專門收集這些訂閱者，然后在監(jiān)聽器Observer和訂閱者Watcher之間進(jìn)行統(tǒng)一管理的。接著，我們還需要有一個(gè)指令解析器Compile，對(duì)每個(gè)節(jié)點(diǎn)元素進(jìn)行掃描和解析，將相關(guān)指令對(duì)應(yīng)初始化成一個(gè)訂閱者Watcher，并替換模板數(shù)據(jù)或者綁定相應(yīng)的函數(shù)，此時(shí)當(dāng)訂閱者Watcher接收到相應(yīng)屬性的變化，就會(huì)執(zhí)行對(duì)應(yīng)的更新函數(shù)，從而更新視圖。因此接下去我們執(zhí)行以下3個(gè)步驟，實(shí)現(xiàn)數(shù)據(jù)的雙向綁定：

1.實(shí)現(xiàn)一個(gè)監(jiān)聽器Observer，用來劫持并監(jiān)聽所有屬性，如果有變動(dòng)的，就通知訂閱者。

2.實(shí)現(xiàn)一個(gè)訂閱者Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。

3.實(shí)現(xiàn)一個(gè)解析器Compile，可以掃描和解析每個(gè)節(jié)點(diǎn)的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器。

流程圖如下：

vue核心知識(shí)——語法篇

1.請(qǐng)問?v-if?和?v-show?有什么區(qū)別？

????相同點(diǎn)：?兩者都是在判斷DOM節(jié)點(diǎn)是否要顯示。

????不同點(diǎn)：

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

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

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

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

2、vue常用的修飾符

a、按鍵修飾符

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

class=

b、系統(tǒng)修飾符

可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器

• .ctrl

• .alt

• .shift

• .meta

c、鼠標(biāo)按鈕修飾符

• .left

• .right

• .middle
  這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。如：??鼠標(biāo)滾輪單擊觸發(fā)? ?Click默認(rèn)是鼠標(biāo)左鍵單擊

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

d、其他修飾符

• .lazy
  在默認(rèn)情況下，v-model?在每次?input?事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 ，我們可以添加?lazy?修飾符，從而轉(zhuǎn)變?yōu)槭褂?change事件進(jìn)行同步：

lazy=

• .number
  如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給?v-model?添加?.number修飾符：

"age" 

這通常很有用，因?yàn)榧词乖?code>type="number"時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。如果這個(gè)值無法被?parseFloat()解析，則會(huì)返回原始的值。

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

"msg">

??

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

3、v-on可以監(jiān)聽多個(gè)方法嗎？

????可以

4、vue中?key?值的作用

????使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)

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

否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過渡效果。

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

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

????當(dāng)data選項(xiàng)是一個(gè)函數(shù)的時(shí)候，每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，這樣各個(gè)實(shí)例中的data不會(huì)相互影響，是獨(dú)立的。

6、v-for 與 v-if 的優(yōu)先級(jí)

??? v-for的優(yōu)先級(jí)比v-if高。

7.說出至少 4 種 vue 當(dāng)中的指令和它的用法

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

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

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

????v-model(實(shí)現(xiàn)雙向綁定)

vue核心知識(shí)——組件篇

1.vue中子組件調(diào)用父組件的方法

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

????第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽這個(gè)事件就行了。

????第三種是父組件把方法傳入子組件中，在子組件里直接調(diào)用這個(gè)方法。

2.vue中父組件調(diào)用子組件的方法

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

父：

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

3.vue組件之間傳值

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

1.父組件調(diào)用子組件的時(shí)候動(dòng)態(tài)綁定屬性2.子組件定義props接收動(dòng)態(tài)綁定的屬性props: ['dataList'] ? ? ? ?3.子組件使用數(shù)據(jù)

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

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

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

一、使用ref屬性

1.父組件調(diào)用子組件時(shí)綁定屬性ref

??:ref='parent'>

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

二、使用$emit方法

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

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

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

??? 1.使用vue-router通過跳轉(zhuǎn)鏈接帶參數(shù)傳參。

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

? ? 3.使用vuex數(shù)據(jù)管理傳值。

(5)說說vue的動(dòng)態(tài)組件。

????????多個(gè)組件通過同一個(gè)掛載點(diǎn)進(jìn)行組件的切換，is的值是哪個(gè)組件的名稱，那么頁面就會(huì)顯示哪個(gè)組件。

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

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

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

?(7)遞歸組件的用法

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

????首先我們要知道，既然是遞歸組件，那么一定要有一個(gè)結(jié)束的條件，否則就會(huì)使用組件循環(huán)引用，最終出現(xiàn)“max stack size exceeded”的錯(cuò)誤，也就是棧溢出。那么，我們可以使用v-if="false"作為遞歸組件的結(jié)束條件。當(dāng)遇到v-if為false時(shí)，組件將不會(huì)再進(jìn)行渲染。

vue核心知識(shí)——路由

1.怎么定義vue-router的動(dòng)態(tài)路由？怎么獲取傳過來的值？

動(dòng)態(tài)路由的創(chuàng)建，主要是使用path屬性過程中，使用動(dòng)態(tài)路徑參數(shù)，以冒號(hào)開頭，如下：

{

? path: '/details/:id'

? name: 'Details'

? components: Details

}

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

當(dāng)匹配到/details下的路由時(shí)，參數(shù)值會(huì)被設(shè)置到this.$route.params下，所以通過這個(gè)屬性可以獲取動(dòng)態(tài)參數(shù)

this.$route.params.id

2.vue-router有哪幾種路由守衛(wèi)?

路由守衛(wèi)為：
全局守衛(wèi)：beforeEach
后置守衛(wèi)：afterEach
全局解析守衛(wèi)：beforeResolve
路由獨(dú)享守衛(wèi)：beforeEnter

3.$route和 $router的區(qū)別是什么？

? ? $router為VueRouter的實(shí)例，是一個(gè)全局路由對(duì)象，包含了路由跳轉(zhuǎn)的方法、鉤子函數(shù)等。

????$route 是路由信息對(duì)象||跳轉(zhuǎn)的路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部對(duì)象，包含path,params,hash,query,fullPath,matched,name等路由信息參數(shù)。

4.vue-router響應(yīng)路由參數(shù)的變化

• (1)用watch 檢測(cè)

• (2)組件內(nèi)導(dǎo)航鉤子函數(shù)

?

5.?vue-router 傳參

? (1)使用Params:

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

• 參數(shù)不會(huì)顯示在路徑上

• 瀏覽器強(qiáng)制刷新參數(shù)會(huì)被清空

? ?

(2)使用Query：

• 參數(shù)會(huì)顯示在路徑上，刷新不會(huì)被清空

• name 可以使用path路徑

????

vue核心知識(shí)——vuex

不用Vuex會(huì)帶來什么問題？

一、可維護(hù)性會(huì)下降，你要想修改數(shù)據(jù)，你得維護(hù)三個(gè)地方

二、可讀性會(huì)下降，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)，你根本就看不出來是從哪來的

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

1.vuex有哪幾種屬性？

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

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

vuex運(yùn)行流程圖

---

長(zhǎng)按識(shí)別關(guān)注公眾號(hào)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。