本篇文章給大家談?wù)刅ue基礎(chǔ)面試題，以及vue面試題目及答案對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、VUE基礎(chǔ)面試題（3）
• 2、47道基礎(chǔ)的VueJS面試題(附答案)
• 3、vue常見面試題
• 4、vue面試題大全

VUE基礎(chǔ)面試題（3）

在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。在當(dāng)前階段 data、methods、computed 以及 watch 上的數(shù)據(jù)和方法都不能被訪問

實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算， watch/event 事件回調(diào)。這里沒有 nextTick 來訪問 Dom

在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

在掛載完成后發(fā)生，在當(dāng)前階段，真實的 Dom 掛載完畢，數(shù)據(jù)完成雙向綁定，可以訪問到 Dom 節(jié)點

數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補丁（patch）之前?？梢栽谶@個鉤子中進(jìn)一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程

發(fā)生在更新完成之后，當(dāng)前階段組件 Dom 已完成更新。要注意的是避免在此期間更改數(shù)據(jù)，因為這可能會導(dǎo)致無限循環(huán)的更新，該鉤子在服務(wù)器端渲染期間不被調(diào)用。

實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。我們可以在這時進(jìn)行善后收尾工作，比如清除計時器。

Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。 該鉤子在服務(wù)器端渲染期間不被調(diào)用。

可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行異步請求，因為在這三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建，可以將服務(wù)端端返回的數(shù)據(jù)進(jìn)行賦值。

能更快獲取到服務(wù)端數(shù)據(jù)，減少頁面 loading 時間；

ssr 不支持 beforeMount 、mounted 鉤子函數(shù)，所以放在 created 中有助于一致性；

Vue2--------------vue3

beforeCreate = setup()

created = setup()

beforeMount = onBeforeMount

mounted = onMounted

beforeUpdate = onBeforeUpdate

updated = onUpdated

beforeDestroy = onBeforeUnmount

destroyed = onUnmounted

activated = onActivated

deactivated = onDeactivated

errorCaptured = onErrorCaptured

47道基礎(chǔ)的VueJS面試題(附答案)

1、什么是MVVM框架？它適用于哪些場景？

MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。

在數(shù)據(jù)操作比較多的場景中，MVVM框架更合適，有助于通過操作數(shù)據(jù)渲染頁面。

2、active- class是哪個組件的屬性？

它是 vue-router模塊的 router-link組件的屬性。

3、如何定義Vue- router的動態(tài)路由？

在靜態(tài)路由名稱前面添加冒號，例如，設(shè)置id動態(tài)路由參數(shù)，為路由對象的path屬性設(shè)置/:id。

4、如何獲取傳過來的動態(tài)參數(shù)？

在組件中，使用$router對象的 params.id，即 $route.params.id 。

5、vue- router有哪幾種導(dǎo)航鉤子？

有3種。

第一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)。作用是跳轉(zhuǎn)前進(jìn)行判斷攔截。

第二種是組件內(nèi)的鉤子。

第三種是單獨路由獨享組件。

6、mint-ui是什么？如何使用？

它是基于 Vue.js的前端組件庫。用npm安裝，然后通過 import導(dǎo)入樣式和JavaScript代碼。vue.use(mintUi)用于實現(xiàn)全局引入， import {Toast} from ' mint-ui'用于在單個組件局部引入。

7、V-model是什么？有什么作用？

v- model是 Vue. js中的一條指令，可以實現(xiàn)數(shù)據(jù)的雙向綁定。

8、Vue.js中標(biāo)簽如何綁定事件？

綁定事件有兩種方式。

第一種，通過v-on指令， 。

第二種，通過@語法糖， input@ click= doLog()/。

9、vuex是什么？如何使用？在哪種功能場景中使用它？

vuex是針對 Vue. js框架實現(xiàn)的狀態(tài)管理系統(tǒng)。

為了使用vuex，要引入 store，并注入Vue.js組件中，在組件內(nèi)部即可通過$ ostore訪問 store對象。

使用場景包括：在單頁應(yīng)用中，用于組件之間的通信，例如音樂播放、登錄狀態(tài)管理、加入購物車等。

10、如何實現(xiàn)自定義指令？它有哪些鉤子函數(shù)？還有哪些鉤子函數(shù)參數(shù)？

自定義指令包括以下兩種。

它有如下鉤子函數(shù)。

鉤子函數(shù)的參數(shù)如下。

11、至少說出vue.js中的4種指令和它們的用法。

相關(guān)指令及其用法如下。

12、Vue-router是什么？它有哪些組件？

它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。

13、導(dǎo)航鉤子有哪些？它們有哪些參數(shù)？

導(dǎo)航鉤子又稱導(dǎo)航守衛(wèi)，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。

全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。

單個路由獨享鉤子有 beforeEnter。

組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它們有以下參數(shù)。

14、Vue.js的雙向數(shù)據(jù)綁定原理是什么？

具體步驟如下。

（1）對需要觀察的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，設(shè)置set和get特性方法。當(dāng)給這個對象的某個值賦值時，會觸發(fā)綁定的set特性方法，于是就能監(jiān)聽到數(shù)據(jù)變化。

（4）MVVM是數(shù)據(jù)綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監(jiān)聽自己的 model數(shù)據(jù)變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化通知視圖更新的效果。利用視圖交互，變化更新數(shù)據(jù) model變更的雙向綁定效果。

15、請詳細(xì)說明你對Vue.js生命周期的理解。

總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

當(dāng)使用組件的kep- alive功能時，增加以下兩個周期。

Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當(dāng)捕獲一個來自子孫組件的錯誤時調(diào)用。

16、請描述封裝Vue組件的作用過程。

組件可以提升整個項目的開發(fā)效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統(tǒng)項目開發(fā)中效率低、難維護(hù)、復(fù)用性等問題。

使用Vue.extend方法創(chuàng)建一個組件，使用Vue.component方法注冊組件。子組件需要數(shù)據(jù)，可以在 props中接收數(shù)據(jù)。而子組件修改妤數(shù)據(jù)后，若想把數(shù)據(jù)傳遞給父組件，可以采用emit方法。

17、你是怎樣認(rèn)識vuex的？

vuex可以理解為一種開發(fā)模式或框架。它是對 Vue. js框架數(shù)據(jù)層面的擴展。通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動組件的變化。應(yīng)用的狀態(tài)集中放在 store中。改變狀態(tài)的方式是提交 mutations，這是個同步的事務(wù)。異步邏輯應(yīng)該封裝在 action中。

18、Vue- loader是什么？它的用途有哪些？

它是解析.vue文件的一個加載器，可以將 template/js/style轉(zhuǎn)換成 JavaScript模塊。

用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應(yīng)用scss或less, template可以添加jade語法等。

19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。

assets文件夾存放靜態(tài)資源；components存放組件；router定義路由相關(guān)的配置；view是視圖；app. vue是一個應(yīng)用主組件；main.js是入口文件。

20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導(dǎo)出暴露的接口。

（2）導(dǎo)入需要用到的頁面（組件）。

（3）將導(dǎo)入的組件注入uejs的子組件的 components屬性中。

（4）在 template的視圖中使用自定義組件。

21、談?wù)勀銓ue.js的 template編譯的理解。

簡而言之，就是首先轉(zhuǎn)化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結(jié)構(gòu)抽象成樹狀表現(xiàn)形式，然后通過 render函數(shù)進(jìn)行渲染，并返回VNode（ Vue. js的虛擬DOM節(jié)點）。

詳細(xì)步驟如下。

（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創(chuàng)建編譯器。另外， compile還負(fù)責(zé)合并 option。

（2）AST會經(jīng)過 generate（將AST轉(zhuǎn)化成 render funtion字符串的過程）得到 render函數(shù)， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節(jié)點，里面有標(biāo)簽名子節(jié)點、文本等。

22、說一下Vue.js中的MVVM模式。

MVVM模式即 Model- View- ViewModel模式。

Vue.js是通過數(shù)據(jù)驅(qū)動的， Vue. js實例化對象將DOM和數(shù)據(jù)進(jìn)行綁定，一旦綁定，和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化，DOM也會隨著變化。

ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進(jìn)行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。

DOM Listeners和 Data Bindings是實現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層中的DOM元素，當(dāng)發(fā)生變化時，Model層的數(shù)據(jù)隨之變化。Data Bindings會監(jiān)聽 Model層的數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時，View層的DOM元素也隨之變化。

23、v-show指令和v-if指令的區(qū)別是什么？

v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在于HTML頁面中；而只有當(dāng)v-if的值為true時，元素才會存在于HTML頁面中。v-show指令是通過修改元素的 style屬性值實現(xiàn)的。

24、如何讓CSS只在當(dāng)前組件中起作用？

在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內(nèi)寫的CSS只對當(dāng)前組件起作用，只需要在Style標(biāo)簽添加Scoped屬性，即 。

25、如何創(chuàng)建vue.js組件？

在vue.js中，組件要先注冊，然后才能使用。具體代碼如下

26、如何實現(xiàn)路由嵌套？如何進(jìn)行頁面跳轉(zhuǎn)？

路由嵌套會將其他組件渲染到該組件內(nèi)，而不是使整個頁面跳轉(zhuǎn)到 router-view定義組件渲染的位置。要進(jìn)行頁面跳轉(zhuǎn)，就要將頁面渲染到根組件內(nèi)，可做如下配置。

首先，實例化根組件，在根組件中定義組件渲染容器。然后，掛載路由，當(dāng)切換路由時，將會切換整個頁面。

27、ref屬性有什么作用？

有時候，為了在組件內(nèi)部可以直接訪問組件內(nèi)部的一些元素，可以定義該屬性此時可以在組件內(nèi)部通過this. $refs屬性，更快捷地訪問設(shè)置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。

注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。

28、Vue. js是什么？

Vue. js的目標(biāo)是通過盡可能簡單的API實現(xiàn)響應(yīng)式的數(shù)據(jù)綁定的組件開發(fā)。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

數(shù)據(jù)模型（ Model）發(fā)生改變，視圖（View）監(jiān)聽到變化，也同步改變；視圖（View）發(fā)生改變，數(shù)據(jù)模型（ Model）監(jiān)聽到改變，也同步改變。

使用MVVM模式有幾大好處。

（2）組件化開發(fā)

（3）指令系統(tǒng)

（4）Vue2.0開始支持虛擬DOM。

但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。

30、描述vue.js的特點。

Vue. js有以下特點。

31、在vue.js中如何綁定事件？

通過在v-on后跟事件名稱=“事件回調(diào)函數(shù)( )”的語法綁定事件。事件回調(diào)函數(shù)的參數(shù)集合( )可有可無。如果存在參數(shù)集合( )，事件回調(diào)函數(shù)的參數(shù)需要主動傳遞，使用事件對象要傳遞 $event。當(dāng)然，此時也可以傳遞一些其他自定義數(shù)據(jù)。如果沒有參數(shù)集合，此時事件回調(diào)函數(shù)有一個默認(rèn)參數(shù)，就是事件對象。事件回調(diào)函數(shù)要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數(shù)據(jù)以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=“事件回調(diào)函數(shù)( )”。

32、請說明 組件的作用。

當(dāng) 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。

keep-alive是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。

當(dāng)在 內(nèi)切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數(shù)將會執(zhí)行。

33、axios是什么？如何使用它？

axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求后臺的模。

用 npm install axios安裝 axios?；?EMAScript 6 的 EMAScript Module規(guī)范，通過 import關(guān)鍵字將 axios導(dǎo)入，并添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發(fā)送get或者post請求。在then方法中注冊成功后的回調(diào)函數(shù)，通過箭頭函數(shù)的作用域特征，可以直接訪問組件實例化對象，存儲返回的數(shù)據(jù)。

34、在 axios中，當(dāng)調(diào)用 axios.post('api/user'）時進(jìn)行的是什么操作？

當(dāng)調(diào)用post方法表示在發(fā)送post異步請求。

35、sass是什么？如何在ue中安裝和使用？

sass是一種CSS預(yù)編譯語言安裝和使用步驟如下。

（1）用npm安裝加載程序（ sass-loader、 css-loader等加載程序)。

（2）在 webpack. config. js中配置sass加載程序。

（3）在組件的 style標(biāo)簽中加上lang屬性，例如lang="scss"。

36、如何在 Vue. js中循環(huán)插入圖片？

對“src”屬性插值將導(dǎo)致404請求錯誤。應(yīng)使用 v-bind:src格式代替。

代碼如下：

vue常見面試題

1.什么是vue的生命周期？

Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列過程，我們稱這是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多個事件鉤子，讓我們在控制整個vue實例的過程時更容易形成好的邏輯。

3.Vue生命周期總共有幾個階段？

它可以總共分為8個階段：創(chuàng)建前/后,載入前/后，更新前/后，銷毀前/銷毀后

4.第一次頁面加載會觸發(fā)那幾個鉤子？

第一次頁面加載時會觸發(fā)beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪個周期中就已經(jīng)完成？

DOM渲染在mounted中就已經(jīng)完成了

6.生命周期鉤子的一些使用方法：

1.beforecreate:可以在加個loading事件，在加載實例是觸發(fā)

2.created:初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用

3.mounted:掛載元素，獲取到dom節(jié)點

4.updated:如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)

5.beforeDestroy:可以一個確認(rèn)停止事件的確認(rèn)框

6.nextTick:更新數(shù)據(jù)后立即操作dom

7.v-show與v-if的區(qū)別

v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建

使用頻繁切換時用v-show,運行時較少改變時用v-if

V-if=’false’v-if是條件渲染，當(dāng)false的時候不會渲染

使用v-if的時候，如果值為false，那么頁面將不會有這個html標(biāo)簽生成

v-show則是不管值是為true還是false，html元素都會存在，只是css中的display顯示或隱藏

v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；而v-if會控制這個 DOM 節(jié)點的存在與否。當(dāng)我們需要經(jīng)常切換某個元素的顯示/隱藏時，使用v-show會更加節(jié)省性能上的開銷；當(dāng)只需要一次顯示或隱藏時，使用v-if更加合理。

8.開發(fā)中常用的指令有哪些?

v-model:一般用在表達(dá)輸入，很輕松的實現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

v-html：更新元素的innerHTML

v-show與v-if：條件渲染，注意二者區(qū)別

v-on:click:可以簡寫為@click,@綁定一個事件。如果事件觸發(fā)了，就可以指定事件的處理函數(shù)

v-for：基于源數(shù)據(jù)多次渲染元素或模板

v-bind:當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM語法

v-bind:title=”msg”簡寫：title="msg"

9.綁定class的數(shù)組用法

1.對象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.數(shù)組方法v-bind:class="[class1,class2]"

3.行內(nèi)v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳轉(zhuǎn)方式

1.router-link標(biāo)簽會渲染為標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；

2.另一種是編輯是導(dǎo)航，也就是通過js跳轉(zhuǎn)比如router.push('/home')

12. computed和watch有什么區(qū)別

computed

computed是計算屬性，也就是計算值，它更多用于計算值的場景

computed具有緩存性，computed的值在getter執(zhí)行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時重新調(diào)用對應(yīng)的getter來計算

computed適用于計算比較消耗性能的計算場景

watch

watch更多的是[觀察]的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)，用于觀察props $emit或者本組件的值，當(dāng)數(shù)據(jù)變化時來執(zhí)行回調(diào)進(jìn)行后續(xù)操作

無緩存性，頁面重新渲染時值不變化也會執(zhí)行

小結(jié)

當(dāng)我們要進(jìn)行數(shù)值計算，而且依賴于其他數(shù)據(jù)，那么把這個數(shù)據(jù)設(shè)計為computed

如果你需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)變化。

13. vue組件的scoped屬性的作用

在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的模塊，很好的實現(xiàn)了樣式私有化的目的；

但是也得慎用：樣式不易（可）修改，而很多時候，我們是需要對公共組件的樣式做微調(diào)的；

解決辦法：

①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */

②：深度作用選擇器（）如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 操作符： .a .b { /* ... */ }

14. vue是漸進(jìn)式的框架的理解：( 主張最少,沒有多做職責(zé)之外的事 )

Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成為一個框架。如下圖所示，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個完整的框架。更重要的是，這些功能相互獨立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件，不一定要全部整合在一起?？梢钥吹剑f的“漸進(jìn)式”，其實就是Vue的使用方式，同時也體現(xiàn)了Vue的設(shè)計的理念

在我看來，漸進(jìn)式代表的含義是：主張最少。視圖模板引擎

每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業(yè)務(wù)開發(fā)中的使用方式。

比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：

必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）

所以Angular是帶有比較強的排它性的，如果你的應(yīng)用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。

Vue可能有些方面是不如React，不如Angular，但它是漸進(jìn)的，沒有強主張，你可以在原有大系統(tǒng)的上面，把一兩個組件改用它實現(xiàn)，當(dāng)jQuery用；也可以整個用它全家桶開發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計的整個下層用。也可以函數(shù)式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

漸進(jìn)式的含義，我的理解是：沒有多做職責(zé)之外的事。

15.vue.js的兩個核心是什么(數(shù)據(jù)驅(qū)動、組件系統(tǒng)。)

數(shù)據(jù)驅(qū)動:Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機制,核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。

16.vue常用修飾符

修飾符分為：一般修飾符，事件修身符，按鍵、系統(tǒng)

①一般修飾符：

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

inputv-model.lazy="msg"

.number

inputv-model.number="age"type="number"

.trim

1.如果要自動過濾用戶輸入的首尾空白字符inputv-model.trim='trim'

② 事件修飾符

av-on:click.stop="doThis"/a!-- 阻止單擊事件繼續(xù)傳播 --

formv-on:submit.prevent="onSubmit"/form !-- 提交事件不再重載頁面 --

av-on:click.stop.prevent="doThat"/a !-- 修飾符可以串聯(lián) --

formv-on:submit.prevent/form !-- 只有修飾符 --

divv-on:click.capture="doThis".../div !-- 添加事件監(jiān)聽器時使用事件捕獲模式 --? !-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 --

divv-on:click.self="doThat".../div !-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -- !-- 即事件不是從內(nèi)部元素觸發(fā)的 --

av-on:click.once="doThis"/a !-- 點擊事件將只會觸發(fā)一次 --

③按鍵修飾符

全部的按鍵別名:

.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta

inputv-on:keyup.enter="submit"或者input@keyup.enter="submit"

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

.ctrl.alt.shift.meta

input@keyup.alt.67="clear"或者div@click.ctrl="doSomething"Dosomething/div!-- Ctrl + Click --

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

vue組件中data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用。

如果data值為對象，將導(dǎo)致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。

vue面試題大全

1. vue生命周期都有哪些？

2. 進(jìn)入頁面會執(zhí)行哪些生命周期函數(shù)

beforeCreate、created、beforeMounted、mounted

3. 在哪里可以訪問 data

beforeCreate中不可以訪問

created中有 el

beforeMounte中有 el

mouted中都有，包括之后的生命周期鉤子函數(shù)都有

4、 如果加入了keep-alive會增加兩個生命周期函數(shù)

activated和deactivated

進(jìn)入頁面的時候觸發(fā)activated，離開頁面觸發(fā) deactivated

5. 如果加入keep-alive組件，第一次進(jìn)入頁面會觸發(fā)哪些生命周期

beforeCreate、created、beforeMounted、mounted、activated

6、 如果加入了keep-alive組件后，第二次或第n次進(jìn)入頁面會觸發(fā)哪些生命周期？

只觸發(fā)一個生命周期：activated(因為該頁面已經(jīng)被緩存起來了)

1.是什么

vue自帶的一個組件，用來緩存組件，提升性能，keep-alive可以在組件切換時，保存其包裹組件的狀態(tài)，使其不被銷毀。

2、參數(shù)

include：表示只有匹配的組件才會被緩存；

exclude：表示匹配到的組件不會被緩存；

3、生命周期

有兩個生命周期函數(shù)，同上

4.使用場景

-列表頁面跳轉(zhuǎn)詳情頁的時候，用戶通過點擊跳轉(zhuǎn)，那么詳情頁每次都要去請求數(shù)據(jù)，如果用戶每次點擊的都是同一個，那么詳情頁就沒必要去重新請求，直接緩存起來就行了，如果點擊的不是同一個再重新發(fā)起請求；

-在router-view上使用可以緩存路由組件；

1.相同點

都可以控制元素的顯示隱藏

2.區(qū)別

v-if通過創(chuàng)建/銷毀dom元素來控制元素的顯示隱藏，v-show通過css屬性的display:none來控制元素的顯示隱藏

3.場景

頻繁切換使用v-show，會節(jié)省性能，反之使用v-if

1、當(dāng)項目使用keep-alive時，可搭配組件name進(jìn)行緩存過濾

當(dāng)我們使用keep-alive緩存組件時，被緩存組件中的mounted函數(shù)只會執(zhí)行一次，第二次進(jìn)入頁面不會重新觸發(fā)，有兩種解決方法，一種是使用activated()，在里面進(jìn)行mounted中的操作；另一種就是在keep-alive中增加一個過濾，如下所示：

exclude屬性就是要忽略匹配到的組件。

2、DOM做遞歸組件時；

當(dāng)組件需要自己調(diào)用自己的時候

3、使用vue-tools時；

vue-devtools調(diào)試工具里顯示的組件名稱是由vue中組件name決定的

v-for的優(yōu)先級比v-if的優(yōu)先級高，這是在源碼中規(guī)定好的，并且v-for和v-if不可以同時使用，同時使用會很浪費性能，比如明知判斷條件是false的情況下，還需要去遍歷一下數(shù)據(jù)，所以通常我們會把v-if放在v-for的外面。

是用來獲取更新后的dom內(nèi)容，并且該方法是異步的

作用是將回調(diào)函數(shù)延遲到下次dom更新循環(huán)之后執(zhí)行因為vue更新數(shù)據(jù)是異步的，修改data中的數(shù)據(jù)，視圖不會立刻更新，vue會將你對data的修改放到一個watch隊列中，當(dāng)同一事件循環(huán)中的所有數(shù)據(jù)更新完以后，再進(jìn)行試圖更新，所以會產(chǎn)生延遲。

最常見的使用場景就是，在created中獲取dom元素的時候需要使用$nextTick獲取

組件中的 data 寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件，就會返回一份新的 data ，相當(dāng)于給每個組件實例創(chuàng)建一個私有的數(shù)據(jù)空間，讓各個組件實例維護(hù)各自的數(shù)據(jù)。而單純的寫成對象形式，就使得所有組件實例共用了一份 data ，就會造成一個變了全都會變的結(jié)果。

當(dāng)父組件給子組件傳遞數(shù)據(jù)的時候，子組件只允許對數(shù)據(jù)進(jìn)行讀取，不允許修改數(shù)據(jù)，因為當(dāng)子組件修改了父組件傳過來的數(shù)據(jù)時，其他引用父組件數(shù)據(jù)的組件也會被修改，從而導(dǎo)致報錯，然而也不知道是當(dāng)前組件報錯還是父組件報錯還是修改父組件信息的子組件的錯誤；

如果要修改可以通過this.$emit方法派發(fā)自定義事件，在父組件中修改；

hash模式和history模式，默認(rèn)是hash模式

區(qū)別如下：

1、表現(xiàn)形式不同，hash使用#表示，history用/表示；

2、hash值不會發(fā)送到服務(wù)端，history會發(fā)送到服務(wù)端 ，如果沒有匹配到對應(yīng)的路由，需要配置對應(yīng)的頁面；

3、獲取方式不同，hash值可以通過location.path獲取，history通過location.pathname獲??；

4、hash可以通過window.onhashchange監(jiān)聽hash值的改變 ，history

可以通過onpopstate監(jiān)聽變化；

組建中的template標(biāo)簽會編譯為render函數(shù)，通過render函數(shù)創(chuàng)建出dom元素，然后轉(zhuǎn)化為虛擬dom最終轉(zhuǎn)化為真實dom

1、虛擬dom是一個js對象，用對象屬性來描述節(jié)點，是一層對真實dom的抽象

2、因為dom的執(zhí)行速度遠(yuǎn)不如js執(zhí)行速度快，因此將真實的dom抽象成js對象，然后通過算法計算出真正需要更新的節(jié)點，從而減少了大量的dom操作。

3、將直接操作dom轉(zhuǎn)換成了兩個js對象中去比較，找出差異項，做局部更新，提高了執(zhí)行效率。

未完待續(xù)...

Vue基礎(chǔ)面試題的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于vue面試題目及答案、Vue基礎(chǔ)面試題的信息別忘了在本站進(jìn)行查找喔。