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

1、什么是MVVM框架？它適用于哪些場(chǎng)景？

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

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

2、active- class是哪個(gè)組件的屬性？

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

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

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

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

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

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

有3種。

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

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

第三種是單獨(dú)路由獨(dú)享組件。

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

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

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

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

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

綁定事件有兩種方式。

第一種，通過v-on指令， < input v-on:click= doLog()/>。

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

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

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

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

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

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

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

全局自定義指令：vue.js對(duì)象提供了 directive方法，可以用來自定義指令。directive方法接受兩個(gè)參數(shù)，一個(gè)是指令名稱，另一個(gè)是函數(shù)。

局部自定義指令：通過組件的 directives屬性定義。

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

bind： 在指令第一次綁定到元素時(shí)調(diào)用。

inserted： 在被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（Vue2.0新增的）。

update： 在所在組件的 VNode更新時(shí)調(diào)用。

componentUpdated： 在指令所在組件的 VNode及其子 VNode全部更新后調(diào)用（Vue2.0新增的）。

unbind： 只調(diào)用一次，在指令與元素解除綁定時(shí)調(diào)用。

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

el： 指令所綁定的元素。

binding： 指令對(duì)象。

vnode： 虛擬節(jié)點(diǎn)。

oldVnode： 上一個(gè)虛擬節(jié)點(diǎn)。

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

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

v-if： 判斷對(duì)象是否隱藏。

v-for： 循環(huán)渲染。

v-bind： 綁定一個(gè)屬性。

v- model： 實(shí)現(xiàn)數(shù)據(jù)雙向綁定。

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

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

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

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

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

單個(gè)路由獨(dú)享鉤子有 beforeEnter。

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

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

to： 即將要進(jìn)入的目標(biāo)路由對(duì)象。

from： 當(dāng)前導(dǎo)航正要離開的路由。

next： 一定要用這個(gè)函數(shù)才能到達(dá)下一個(gè)路由，如果不用就會(huì)遭到攔截。

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

Vue. js采用ES5提供的屬性特性功能，結(jié)合發(fā)布者-訂閱者模式，通過 Object.defineProperty()為各個(gè)屬性定義get、set特性方法，在數(shù)據(jù)發(fā)生改變時(shí)給訂閱者發(fā)布消息，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

具體步驟如下。

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

（2）用 compile解析模板指令，將模板中的變量替換成數(shù)據(jù)。然后初始化渲染頁(yè)面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者。一旦數(shù)據(jù)有變動(dòng)，就會(huì)收到通知，并更新視圖

（3） Watcher訂閱者是 Observer和 Compile之間通信的橋梁，主要功能如下。

在自身實(shí)例化時(shí)向?qū)傩杂嗛喥?#xff08;dep）里面添加自己。

自身必須有一個(gè) update( )方法。

在 dep.notice()發(fā)布通知時(shí)，能調(diào)用自身的 update()方法，并觸發(fā) Compile中綁定的回調(diào)函數(shù)。

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

15、請(qǐng)?jiān)敿?xì)說明你對(duì)Vue.js生命周期的理解。

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

beforeCreate： 在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)者（ data observer）和 event/ watcher事件配置之前調(diào)用。

created： 在實(shí)例創(chuàng)建完成后立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)者，屬性和方法的運(yùn)算，event/ watcher事件回調(diào)。然而，掛載階段還沒開始，$el屬性目前不可見。

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

mounted: el被新創(chuàng)建的vm.$el替換，并且在掛載到實(shí)例上之后再調(diào)用該鉤子如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)調(diào)用 mounted時(shí)vm.sel也在文檔內(nèi)。

beforeUpdate： 在數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前。

updated： 由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤。

beforeDestroy： 在實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

destroyed： 在 Vue. js實(shí)例銷毀后調(diào)用。調(diào)用后，Vue. js實(shí)例指示的所有東西都會(huì)解除綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。

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

activated 在keep- alive組件激活時(shí)調(diào)用；

deactivated 在keep-live組件停用時(shí)調(diào)用。

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

16、請(qǐng)描述封裝Vue組件的作用過程。

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

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

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

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

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

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

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

19、請(qǐng)說出vue.cli項(xiàng)目的src目錄中每個(gè)文件夾和文件的用法。

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

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

具體步驟如下。

（1）在 components目錄中新建組件文件，腳本一定要導(dǎo)出暴露的接口。
（2）導(dǎo)入需要用到的頁(yè)面（組件）。
（3）將導(dǎo)入的組件注入vue.js的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。

21、談?wù)勀銓?duì)vue.js的 template編譯的理解。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<！--應(yīng)用程序--> <div id="app"> <ickt></ickt> </div> <！--模板--> <template id="demo"> <！--模板元素要有同一個(gè)根元素--> <div> <h1>{{msg}}</h1> </div> </template> <script type="text/javascript"> //定義組件類 var Ickt = Vue.extend ({ template：'#demo', data:function(){ return { msg：'有課前端網(wǎng)' } } }) //注冊(cè)組件 Vue .component（'ickt, Ickt） //定義Vue實(shí)例化對(duì)象 var app= new Vue ({ el：'#app', data:{} }) </script>

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

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

new Vue({ el：'#icketang',router:router,template：'<router-view></router-view>' })

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

27、ref屬性有什么作用？

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

<div id="icke"> < span ref="msg">有課前端網(wǎng)</span> < span ref=" otherMsg">專業(yè)前端技術(shù)學(xué)習(xí)網(wǎng)校</span> </div> app. $refs. msg. text Content //有課前端網(wǎng) app. $refs.otherMsg. textContent //專業(yè)前端技術(shù)學(xué)習(xí)網(wǎng)校

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

28、Vue. js是什么？

Vue. js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue.js采用自下而上增量開發(fā)的設(shè)計(jì)。Vue.js的核心庫(kù)只關(guān)注視圖層，并且容易學(xué)習(xí)，易于與其他庫(kù)或已有項(xiàng)目整合。另外， Vue. js完全有能力驅(qū)動(dòng)采用單文件組件以及Vue.js生態(tài)系統(tǒng)支持的庫(kù)開發(fā)的復(fù)雜單頁(yè)應(yīng)用。

Vue. js的目標(biāo)是通過盡可能簡(jiǎn)單的API實(shí)現(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模式有幾大好處。

低耦合度，視圖可以獨(dú)立于模型變化和修改，一個(gè)View Model可以綁定到不同的視圖上，當(dāng)視圖變化時(shí)模型可以不變，當(dāng)模型變化時(shí)視圖也可以不變.

可重用性，可以把一些視圖的邏輯放在 ViewModel里面，讓很多視圖復(fù)用這段視圖邏輯。

獨(dú)立開發(fā)，開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)。設(shè)計(jì)人員可以專注于視圖的設(shè)計(jì)。

可測(cè)試性，可以針對(duì) View Model來對(duì)視圖進(jìn)行測(cè)試。

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

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

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

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

30、描述vue.js的特點(diǎn)。

Vue. js有以下特點(diǎn)。

簡(jiǎn)潔：頁(yè)面由HTML模板+JSON數(shù)據(jù)+ Vue. js實(shí)例化對(duì)象組成。

數(shù)據(jù)驅(qū)動(dòng)：自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式。

組件化：用可復(fù)用、解耦的組件來構(gòu)造頁(yè)面。

輕量：代碼量小，不依賴其他庫(kù)。

快速：精確而有效地批量實(shí)現(xiàn)DOM更新。

易獲取：可通過npm、 bower等多種方式安裝，很容易融入。

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

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

32、請(qǐng)說明組件的作用。

當(dāng)< keep- alive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。

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

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

<keep-alive> <component :is="view"></component> </keep-alive >

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

axios是在vue2.0中用來替換 vue-resource.js插件的一個(gè)模塊，是一個(gè)請(qǐng)求后臺(tái)的模。

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

import Vue from ' vue' import axios from 'axios'； Vue.prototype.$http=axios；new Vue ({ el：' ickt', data：{ msg：' ' }， template：'<h1> { { msg } }</h1>'， created:function() { this.$http.get( 'data.json' ) .then（res => { this. msg= res .data. data }) } })

34、在 axios中，當(dāng)調(diào)用 axios.post(‘a(chǎn)pi/user’）時(shí)進(jìn)行的是什么操作？

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

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

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

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

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

//模塊 module：{ //加載程序 loaders:[ //加載scss { test:/ \ .scss$ /, loader : 'vue-style-loader！css-loader！sass-loader '}] }

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

<style type="text/css" lang="scss"> $color:red；h1 { color: $color; } </style>

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

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

代碼如下：

<ul class="list"> <li v-for="item in list"> <img ：src=" 'img/' + item.url" alt="> </1i> </u1>

注意：vue1.0中支持屬性插值，在2.0版本中，只允許通過v-bind指令或者冒號(hào)語(yǔ)法糖“ : ”實(shí)現(xiàn)屬性動(dòng)態(tài)綁定。

37、如何為選框元素自定義綁定的數(shù)據(jù)值？

對(duì)于單選框， value通常是靜態(tài)字符串，如果v- model綁定的數(shù)據(jù)與某個(gè) value值相等，則那個(gè)單選框被選中。

<1abe1>選擇你喜歡的運(yùn)動(dòng)</1abe1> <！--數(shù)據(jù)雙向綁定--> <label>籃球<input type="radio" v-model="sports" value="basketball"></label> <label>足球<input type="radio" v-model="sports" value="football"></label> <label>網(wǎng)球<input type="radio" v-model="sports" value="netball"></label>

對(duì)于多選框，v- model綁定變量的值，通常是布爾值，true表示選中， false表示未選中。如果要自定義綁定數(shù)據(jù)的值，需要用v-bind指令設(shè)置true- value（選中時(shí)的值）以及 false- value（未選中時(shí)的值）。

<1abe1>選擇你的興趣愛好</labe1> <label>足球<input type="checkbox" v-model="intrest. football"></label> <label>籃球<input type="checkbox" v-model="intrest. basketball" v-bind:true-value= " trueValue" v-bind:false-value="falsevalue"></label>

38、什么情況下會(huì)產(chǎn)生片段實(shí)例？

在以下情況下會(huì)產(chǎn)生片段實(shí)例模板包含多個(gè)頂級(jí)元素；模板只包含普通文本；模板只包含其他組件（其他組件可能是一個(gè)片段實(shí)例）；模板只包含一個(gè)元素指令，如vue- router的< router-view>；模板根節(jié)點(diǎn)有一個(gè)流程控制指令，如v-if或v-for。

這些情況讓實(shí)例有未知數(shù)量的頂級(jí)元素，模板將把它的DOM內(nèi)容當(dāng)作片段。片段實(shí)例仍然會(huì)正確地渲染內(nèi)容。不過，模板沒有一個(gè)根節(jié)點(diǎn)，它的$el指向一個(gè)錨節(jié)點(diǎn)，即一個(gè)空的文本節(jié)點(diǎn)（在開發(fā)模式下是一個(gè)注釋節(jié)點(diǎn)）。

注意：在Vue2.0中，組件的模板只允許有且只有一個(gè)根節(jié)點(diǎn)。

39、實(shí)現(xiàn)多個(gè)根據(jù)不同條件顯示不同文字的方法。

通過“v-if,v-else”指令可以實(shí)現(xiàn)條件選擇。但是，如果是多個(gè)連續(xù)的條件選擇，則需要用到計(jì)算屬性computed。例如在輸入框中未輸入內(nèi)容時(shí)，顯示字符串‘請(qǐng)輸入內(nèi)容’，否則顯示輸入框中的內(nèi)容，代碼如下。

<div id="app"> <input type="text v-model="inputvalue"> <hl> { { showValue } }</h1> </div> var app = new Vue ( {e1："#app'， data：{ inputvalue：' ' computed: {showValue:function ( ) { return this. inputvalue | | '請(qǐng)輸入內(nèi)容'} } })

40、什么是數(shù)據(jù)的丟失？

如果在初始化時(shí)沒有定義數(shù)據(jù)，之后更新的數(shù)據(jù)是無法觸發(fā)頁(yè)面渲染更新的，這部分?jǐn)?shù)據(jù)是丟失的數(shù)據(jù)（因?yàn)闆]有設(shè)置特性），這種現(xiàn)象稱為數(shù)據(jù)的丟失。

41、如何檢測(cè)數(shù)據(jù)變化？

由于 JavaScript特性的限制， Vue. js不能檢測(cè)到下面數(shù)組的變化，即以下數(shù)組中改變的數(shù)據(jù)“丟失”了。

通過直接索引設(shè)置元素，如app.arr[0]=…

修改數(shù)據(jù)的長(zhǎng)度，如 app. arr.length。

為了解決該問題，Vue.js擴(kuò)展了觀察數(shù)組，為它添加了一個(gè)$set( )方法，用該方法修改的數(shù)組，能觸發(fā)視圖更新，檢測(cè)數(shù)據(jù)變化。

app.$set(app. arr, 5， 500);

42、如何檢測(cè)對(duì)象變化？

由于 JavaScript特性的限制，Vue.js不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)閂ue.js在初始化時(shí)將屬性轉(zhuǎn)化為 getter/setter，所以屬性必須在data對(duì)象中定義，才能在初始化時(shí)讓Vue.js轉(zhuǎn)換它并讓它響應(yīng)，例如以下代碼

var data ={obj:{a:1 } } var app= new Vue ({ el：'#app ', data:data }) app.obj.a=10 // 'app.obj.a'和'data.obj.a'現(xiàn)在是響應(yīng)的 app. obj. b=2 //'app.obj.b'不是響應(yīng)的 data.obj.b=2 //data.obj.b'不是響應(yīng)的

如果需要在實(shí)例創(chuàng)建之后添加屬性并且讓它能夠響應(yīng)，可以使用$set實(shí)例方法。

app.$set（app.obj，'b'，500） // 'app.obj.b'和'data.obj.b'現(xiàn)在是響應(yīng)的

對(duì)于普通數(shù)據(jù)對(duì)象，可以使用全局方法Vue.set（ object,key, value）。

Vue.set（data.obj，"b'，500） //'app.obj.b'和'cata,obj.b'現(xiàn)在是響應(yīng)的

43、說一下Vue.js頁(yè)面閃爍{{message}}。

Vue. js提供了一個(gè)v- cloak指令，該指令一直保持在元素上，直到關(guān)聯(lián)實(shí)例結(jié)束編譯。當(dāng)和CSS一起使用時(shí)，這個(gè)指令可以隱藏未編譯的標(biāo)簽，直到實(shí)例編譯結(jié)束。用法如下。

[v-cloak ]{display:none; } <div v-cloak> { { title } }</div>

這樣< div>不會(huì)顯示，直到編譯結(jié)束。

44、如何在v-for 循環(huán)中實(shí)現(xiàn)v-model 數(shù)據(jù)的雙向綁定？

有時(shí)候需要循環(huán)創(chuàng)建input，并用v- model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。此時(shí)可以為v- model綁定數(shù)組的一個(gè)成員 selected [$ index]，這樣就可以給不同的 input綁定不同的v- model，從而分別操作它們。

<div v-for= " ( item, index ) in arr"> <input type= "text " v-model="arr [index ] "> <h1> { { arr [index ] } } </h1> </div>

45、如何解決數(shù)據(jù)層級(jí)結(jié)構(gòu)太深的問題？

在開發(fā)業(yè)務(wù)時(shí)，經(jīng)常會(huì)岀現(xiàn)異步獲取數(shù)據(jù)的情況，有時(shí)數(shù)據(jù)層次比較深，如以下代碼。

<span 'v-text="a.b.c.d"></span>

可以使用vm.$set手動(dòng)定義一層數(shù)據(jù)。

vm.$set ("demo"，a .b.c.d)

46、Vue.js文件中的樣式覆蓋不生效的問題如何解決？

按照 Vue. js官方給出的說法， style加上 scoped可以讓樣式“私有化”（即只針對(duì)當(dāng)前Vue.js文件（組件）中的代碼有效，不會(huì)對(duì)別的文件（組件）中的代碼造成影響）

很多時(shí)候，我們引入了第三方UI，在 Vue. js文件中進(jìn)行樣式覆蓋不生效，多半問題是 style上的 scoped導(dǎo)致的。

解決方案是將需要覆蓋樣弌的這部分代碼放到單獨(dú)的CSS文件中，最后在 main.js文件中導(dǎo)入即可。

47、在 Vue. js開發(fā)環(huán)境下調(diào)用接口，如何避免跨域？

在工程目錄 config/ index.js內(nèi)對(duì) proxyTable項(xiàng)進(jìn)行如下配置。

proxyTable:{ '/api '：{ target:http://xxxxxx.com changeOrigin:true, pathRewrite:{ '^/api'：' ' } } }

總結(jié)

以上是生活随笔為你收集整理的基础的VueJS面试题(附答案)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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