這篇文章主要介紹了Vue.js面試問(wèn)題及解決方案，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)梅河口免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1. 為什么Vue被稱(chēng)為“漸進(jìn)框架”？

使用漸進(jìn)式框架的代價(jià)很小，從而使現(xiàn)有項(xiàng)目（使用其他技術(shù)構(gòu)建的項(xiàng)目）更容易采用并遷移到新框架。 Vue.js 是一個(gè)漸進(jìn)式框架，因?yàn)槟憧梢灾鸩綄⑵湟氍F(xiàn)有應(yīng)用，而不必從頭開(kāi)始重寫(xiě)整個(gè)程序。

Vue 的最基本和核心的部分涉及“視圖”層，因此可以通過(guò)逐步將 Vue 引入程序并替換“視圖”實(shí)現(xiàn)來(lái)開(kāi)始你的旅程。

由于其不斷發(fā)展的性質(zhì)，Vue 與其他庫(kù)配合使用非常好，并且非常容易上手。這與 Angular.js 之類(lèi)的框架相反，后者要求將現(xiàn)有程序完全重構(gòu)并在該框架中實(shí)現(xiàn)。

2. Vue.js 中的聲明式渲染是什么？

Vue.js 使渲染數(shù)據(jù)變得容易，并隱藏了內(nèi)部實(shí)現(xiàn)。例如下面的代碼：

HTML

<p id=”app”></p>

JavaScript

const greeting = “Hello there!”;
const appp = document.getElementById(“app”);
appp.innerText = greeting;

上面的代碼段將在 ID 為 “app” 的 p 中顯示短語(yǔ) “Hello there！”。代碼包含實(shí)現(xiàn)結(jié)果所需的所有步驟。首先選擇 ID 為 “app” 的 DOM 元素，然后用 innerText 屬性手動(dòng)設(shè)置 p 的內(nèi)容。

現(xiàn)在，讓我們看看在 Vue 中是怎么做的。

Template

<p id=”app”>{{ greeting }}</p>

App

new Vue({
    data: {
       greeting: ‘Hello There!’
    },
   el: ‘#app’
});

我們?cè)?Vue 程序中創(chuàng)建了一個(gè)名為 “greeting” 的數(shù)據(jù)屬性，但是只需要在 p 中用 mustache 語(yǔ)法輸入 “greeting” 即可，而不必關(guān)心內(nèi)部實(shí)現(xiàn)。我們聲明了 “greeting” 變量，其余的由 Vue 完成。這就是聲明式渲染的樣子。 Vue 隱藏并管理內(nèi)部信息。

3. 你用哪個(gè)指令遍歷對(duì)象的屬性？

要遍歷對(duì)象或數(shù)組，可以使用 v-for 指令。下面是一個(gè)例子：

Template

<p id="app">
    <ul>
      <li v-for="(value, key) in card">{{ key }} - {{ value }}</li>    </ul>
 </p>

App

new Vue({
  el: '#app',
  data: {
    card: {
      name: 'John Doe',
      age: 25,
      city: 'New York',
      country: 'US'
    }
  }
});

輸出

• name - John Doe
• age - 25
• city - New York
• country - US

4. 給出模板，描述 Vue 程序的輸出。

模板：

{{title}}

App:

new Vue({ 
    el: '#app', 
    data: { 
        title: 'Vue.js' 
    } 
})

上面的代碼將在 p 中輸出字符串 <h2 style="color: green;">Vue.js</h2>。之所以將整個(gè)標(biāo)簽渲染為字符串，是因?yàn)?mustache 模板標(biāo)簽 {{title}}將傳入的數(shù)據(jù)視為字符串，而不將其解析為可執(zhí)行代碼。這也有助于緩解把惡意代碼注入到頁(yè)面的 XSS 相關(guān)的問(wèn)題 。這類(lèi)似于在 JavaScript 中使用 elementSelector.innerText = text 語(yǔ)句。

5. 如何在輸入框和數(shù)據(jù)屬性之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定？

要實(shí)現(xiàn)雙向數(shù)據(jù)綁定，可以使用 v-model 指令。 v-model 指令主要是語(yǔ)法糖：

<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">

在上面的語(yǔ)句中，每當(dāng)觀察到 “keyup” 事件時(shí)，就會(huì)將名為 “nameInput” 的數(shù)據(jù)屬性設(shè)置為輸入框的值。同時(shí)，將輸入框的 value 屬性綁定到 “nameInput” 數(shù)據(jù)屬性。這樣在表單字段和數(shù)據(jù)屬性之間建立了雙向數(shù)據(jù)關(guān)系。

v-model 可以做到這一點(diǎn)，并且比手動(dòng)設(shè)置更有效地。要使用 v-model 復(fù)制上述效果，請(qǐng)?jiān)俅卧谕惠斎肟蛑休斎胍韵聝?nèi)容：

<input type="text" v-model="nameInput">

需要注意的是，當(dāng)實(shí)現(xiàn)雙向數(shù)據(jù)綁定時(shí)，使用的數(shù)據(jù)屬性被認(rèn)為是事實(shí)上的來(lái)源。在 data 屬性上所做的任何更改都將優(yōu)先于 form 字段上的用戶(hù)輸入事件。

6. 你如何捕獲元素上的點(diǎn)擊事件？

可以使用 v-on:click 指令捕獲 Click 事件。該指令也可以用縮寫(xiě)符號(hào) @click 表示。這是一個(gè)例子：

v-on:click 符號(hào)

<a v-on:click=”clickHandler”>Launch!</a>

@click 符號(hào)

<a @click=”clickHandler”>Launch!</a>

7. 什么是動(dòng)態(tài) prop？

當(dāng)使用 v-bind 指令為 prop 分配值作為綁定到屬性的函數(shù)時(shí)，被稱(chēng)為動(dòng)態(tài) prop。例如以下組件的 tweet 屬性綁定到名為tweetText的數(shù)據(jù)屬性。這與靜態(tài)硬編碼值相反。這種綁定始終是單向的，這意味著數(shù)據(jù)可以從父組件流到子組件，而絕不會(huì)反過(guò)來(lái)。

<TweetBox :tweet=”tweetText”>

8. Vue.js 中的指令是什么？

指令是一系列特殊屬性，你可以通過(guò)將其添加到模板 HTML 標(biāo)記中來(lái)賦予它們特殊的響應(yīng)功能。指令允許模板中的元素使用數(shù)據(jù)屬性、方法、計(jì)算或監(jiān)視的屬性和內(nèi)聯(lián)表達(dá)式根據(jù)定義的邏輯對(duì)更改做出反應(yīng)。例如以下代碼使用 v-on 指令在組件上實(shí)現(xiàn) click 事件偵聽(tīng)器。

<SignUpButton v-on:click=”doSignup” />

或者

<SignUpButton @click=”doSignup” />

在這個(gè)例子中，我們使用 v-if 指令基于名為 showButton 的數(shù)據(jù)屬性顯示或刪除元素與組件。指令以 v- 開(kāi)頭來(lái)指示 Vue 特定的屬性。此規(guī)則的例外是 v-on 和 v-bind 的簡(jiǎn)寫(xiě)形式。

<SignUpButton v-if=”showButton” />

Vue 還允許定義自己的自定義指令。

9.  v-show 指令的用途是什么？

v-show 指令允許有條件地顯示元素。在下面的代碼中，僅當(dāng) isDisplayed 數(shù)據(jù)屬性為 true 時(shí)，才會(huì)顯示該元素。

 <TweetBox v-show=”isDisplayed”>

使用 v-show 指令時(shí)，可使用 CSS 的 display 屬性切換元素的可見(jiàn)性。

10. v-show 與 v-if 指令有何不同？

v-show 和 v-if 都用于有條件地顯示元素，而后者提供了條件渲染的真正實(shí)現(xiàn)。 v-show 只需切換 CSS 的 display 屬性即可顯示或隱藏元素，而 v-if 指令可創(chuàng)建或銷(xiāo)毀組件。每次顯示狀態(tài)更改時(shí)，代價(jià)通常會(huì)更大。

另一方面，v-show 成本較低，因?yàn)樗鼉H切換元素的CSS顯示屬性。所以如果必須經(jīng)常切換元素，則 v-show 會(huì)提供比 v-if 更好，更優(yōu)化的結(jié)果。

就加載元素的初始渲染成本而言，v-if 不會(huì)渲染最初隱藏的元素的節(jié)點(diǎn)，而 v-show 會(huì)渲染其 CSS display 屬性被設(shè)置為 none 的元素。

11. 對(duì)于作為元素實(shí)現(xiàn)的注釋框，我們希望使用戶(hù)能夠按下鍵盤(pán)上的Enter鍵，來(lái)將內(nèi)容提交給名為 “storeComment” 的方法。在代碼中對(duì)此進(jìn)行演示。

可以在任何元素上使用 v-on 指令來(lái)實(shí)現(xiàn)事件偵聽(tīng)器。此外，v-on 還允許我們將按鍵修飾符用于 “enter”，“tab”，“esc”，“space” 等常見(jiàn)按鍵。這是一個(gè)例子：

模板

<textarea @keyup.enter="storeComment"></textarea>

App

new Vue({
  el: '#app',
  methods: {
    storeComment(event) {
     //access the value of the textarea box using event.target.value or 
     //              use v-model to bind to a data property
    }
  }
});

12. 如何在單頁(yè) Vue 應(yīng)用（SPA）中實(shí)現(xiàn)路由？

可以通過(guò)官方的 vue-router 庫(kù)在用 Vue 構(gòu)建的 SPA 中進(jìn)行路由。該庫(kù)提供了全面的功能集，其中包括嵌套路線、路線參數(shù)和通配符、過(guò)渡、HTML5 歷史與哈希模式和自定義滾動(dòng)行為等功能。 Vue 還支持某些第三方路由器包。

13. 使用 Vue 時(shí)調(diào)用 event.preventDefault() 的最佳方式是什么？

在事件偵聽(tīng)器上調(diào)用 event.preventDefault() 的最佳方式是將 .prevent 修飾符與 v-on 指令一起使用。這是一個(gè)例子：

<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>

14. 什么是過(guò)濾器？

過(guò)濾器是在 Vue 程序中實(shí)現(xiàn)自定義文本格式的一種非常簡(jiǎn)單的方法。它們就像可以在表達(dá)式中通過(guò)管道傳遞（使用管道字符）以取得結(jié)果的運(yùn)算符。下面是一個(gè)可以反轉(zhuǎn)文本字符串的過(guò)濾器示例：

模板

<p id="app">{{ title | reverseText }}</p>
App
new Vue({
    el: '#app',
    data: {
      title: 'This is a title'
    },
    filters: {
      reverseText(text) {
        return text.split('').reverse().join('');
      }
    }
});

輸出

eltit a si sihT

在上面的例子中，我們創(chuàng)建了一個(gè)名為 reverseText 的過(guò)濾器，該過(guò)濾器反轉(zhuǎn)文本字符串并返回。這是一個(gè)簡(jiǎn)單的函數(shù)，接受輸入并返回處理后的輸出。通過(guò)在過(guò)濾器下聲明，它就可以成為可以在模板中使用的過(guò)濾器。

在模板中，我們只是將 reverseText 過(guò)濾器通過(guò)管道傳遞到了想要在 mustache 標(biāo)簽中顯示的數(shù)據(jù)變量。這樣可以將多個(gè)過(guò)濾器管道連接在一起。因此過(guò)濾器提供了一種非常優(yōu)雅的方式來(lái)處理文本。

15. 如何動(dòng)態(tài)地在元素上切換 CSS 類(lèi)？

Vue 允許我們綁定到 class 屬性。在下面的例子中，我們將 class 屬性綁定到一個(gè)對(duì)象，該對(duì)象允許使用 data 屬性切換類(lèi)。

模板

<p :class=”{ pStyle : showp }”></p>

App

new Vue({
    el: '#app',
    data: {
 showp: true
    }
});

在上面的代碼中，只要數(shù)據(jù)屬性 showp 為 true，類(lèi)名 pStyle 將應(yīng)用于 p。

16. 綁定 HTML 類(lèi)時(shí)，該如何連接類(lèi)？假設(shè)存在一個(gè)元素：Process。我們只希望使用名為 “isActive” 的數(shù)據(jù)屬性動(dòng)態(tài)地切換 btnActive 類(lèi)。

這可以在綁定類(lèi)時(shí)用 Array 來(lái)實(shí)現(xiàn)。以下是實(shí)現(xiàn)方法：

模板

<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>

App

new Vue({
    el: '#app',
    data: {
      isActive: true
    }
});

在上面的代碼段中，將串聯(lián)各個(gè)類(lèi)的數(shù)組，并基于 isActive 數(shù)據(jù)屬性的值對(duì)對(duì)象中的表達(dá)式進(jìn)行響應(yīng)式評(píng)估。

17. 什么是計(jì)算屬性？

計(jì)算屬性是一類(lèi)特殊函數(shù)的結(jié)果，當(dāng)從屬屬性發(fā)生變化時(shí)，這些函數(shù)會(huì)自動(dòng)進(jìn)行計(jì)算。用它們代替內(nèi)聯(lián)表達(dá)式可以更好地表達(dá)復(fù)雜的邏輯，在模板中不能作為內(nèi)聯(lián)表達(dá)式合并。

每個(gè)計(jì)算方法都可以在模板部分作為屬性使用。當(dāng)從屬屬性更改時(shí)，計(jì)算方法將自動(dòng)計(jì)算并緩存結(jié)果，這樣比使用普通方法更好。方法在訪問(wèn)時(shí)將始終會(huì)重新計(jì)算，而如果自上一次計(jì)算和緩存階段以來(lái)該方法內(nèi)使用的屬性未發(fā)生更改，則計(jì)算的屬性將不會(huì)重新計(jì)算。

需要注意的是，僅當(dāng)方法中使用的屬性是響應(yīng)性的（例如數(shù)據(jù)屬性）時(shí)，才考慮依賴(lài)關(guān)系的更改。

這是一個(gè)演示計(jì)算屬性的簡(jiǎn)單例子：

模板

<p id="app">
  <input type="text" v-model="email" :class="{ invalid : isInvalid }">
</p>

App

const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

new Vue({
    el: '#app',
    data: {
      email: ''
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});

在上面的代碼示例中，如果正則表達(dá)式測(cè)試針對(duì)電子郵件輸入框失敗，則 isValid 計(jì)算屬性將返回 true。如果電子郵件驗(yàn)證程序認(rèn)為輸入的值無(wú)效，就會(huì)看到文本框便為紅色（你必須創(chuàng)建一個(gè)名為 .invalid 的類(lèi)，并將背景顏色屬性設(shè)置為紅色）。當(dāng)用戶(hù)鍵入內(nèi)容時(shí)，將重新執(zhí)行計(jì)算的方法，并且在驗(yàn)證格式之后，動(dòng)態(tài)刪除無(wú)效的類(lèi)。

18. 如何確保在單文件組件中定義的 CSS 樣式僅應(yīng)用于該組件，而不被用于其他組件？

這可以通過(guò)樣式標(biāo)簽上的 scoped 屬性來(lái)實(shí)現(xiàn)。在內(nèi)部 Vue 使用 PostCSS 插件為所有樣式元素分配唯一的數(shù)據(jù)屬性，然后使樣式針對(duì)這些唯一的元素。舉個(gè)例子：

<template>
    <p class=”title”>This is a title</p>
</template>
<style scoped>
    .title {
        font-family: sans-serif;
        font-size: 20px;
</style>

19. 如何將數(shù)據(jù)從父組件傳遞到子組件？

可以用作為組件中單向入口的 prop 把數(shù)據(jù)向下傳遞到子組件。這是一個(gè)例子：

<template>
    <p>
      <contact-list-item v-for=”contact in contacts” :contact=”contact” />
   </p>
</template>
<script>
    import ContactListItem from ‘./ContactListItem’;
    export default {
name: ‘a(chǎn)ddress-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>

contact-list-item 上綁定的 prop “contact” 是一個(gè)入口，用于從用作子項(xiàng)的父組件接收數(shù)據(jù)。在 contact-list-item 組件中：

<template>
    <p>
        <span>{{ contact.name }}</span>
        <span>{{ contact.email }}</span>
   </p>
</template>
 
<script>
    export default {
     name: ‘contact-list-item’,
props: [‘contact’]
    }
</script>

在這里聲明了一個(gè)名為 “contact” 的 prop 引入數(shù)據(jù)，然后可以直接在模板部分中顯示。

20. 什么是組件？

組件本質(zhì)上是 Vue 實(shí)例，它們封裝模板、邏輯和可選的本地響應(yīng)性數(shù)據(jù)屬性，能夠提供可重新使用的自定義構(gòu)建元素?？芍赜眯允菢?gòu)建組件的核心。

使用單文件組件構(gòu)建應(yīng)用程序時(shí)，組件在擴(kuò)展名為 .vue 的文件中定義。單文件組件包含三個(gè)部分：模板部分定義了該組件的 HTML 布局；腳本部分定義了數(shù)據(jù)、屬性和邏輯單元（如方法）并將內(nèi)容導(dǎo)出為 Vue 組件；還有一個(gè)樣式部分，用于定義組件的樣式表。單文件組件使用 Webpack 等模塊捆綁器進(jìn)行編譯。

21. 什么是生命周期hook？列出一些生命周期hook。

Vue 實(shí)例（組件）從其初始化到銷(xiāo)毀和刪除都經(jīng)歷生命周期。在整個(gè)過(guò)程中，Vue 允許開(kāi)發(fā)人員運(yùn)行自定義函數(shù)的幾個(gè)階段。這些函數(shù)稱(chēng)為生命周期 hook。以下是一些生命周期 hook 的列表：

• created
• mounted
• updated
• destroyed

22. 什么是插槽（slot）？

插槽允許你定義可以封裝和接受子 DOM 元素的元素。組件模板中的 <slot> </ slot> 元素作為通過(guò)組件標(biāo)簽捕獲的所有DOM元素的出口。這是一個(gè)例子：

Post.vue |實(shí)現(xiàn)插槽的組件

<template>
 <p class="hello">
   <h4 class="title">{{title}}</h4>
   <p class="content">
     <slot></slot>
   </p>
 </p>
</template>

App.vue | 使用Post組件的App組件

<template>
 <p id="app">
   <Post title="Hello from Vue!">
Vue 是用于構(gòu)建用戶(hù)界面的漸進(jìn)框架。與其他框架不同，Vue從頭開(kāi)始設(shè)計(jì)以逐漸采用。
核心庫(kù)僅集中在視圖層，并且很容易與其他庫(kù)或現(xiàn)有項(xiàng)目集成。另一方面，當(dāng)與現(xiàn)代工具和支持庫(kù)結(jié)合使用時(shí)，
Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供支持。
   </Post>
 </p>
</template>

在上面的示例中，斜體文本顯示在 Post 組件中標(biāo)有 <slot> 元素的區(qū)域內(nèi)。

23. 什么是觀察者？

觀察者允許我們觀察更改的特定屬性，并執(zhí)行定義為函數(shù)的自定義操作。盡管它們的用例與計(jì)算的屬性相交叉，但是當(dāng)某些數(shù)據(jù)屬性發(fā)生改變時(shí)，有時(shí)需要觀察者執(zhí)行自定義操作或運(yùn)行代價(jià)昂貴的操作。

24. 如何從子組件發(fā)出自定義事件？

可以用 $emit('event-name', eventPayload)發(fā)出自定義事件。然后可以像其他事件一樣，用 v-on 指令在父組件上攔截。

25. 開(kāi)發(fā)人員經(jīng)常使用字母 “vm” 作為變量名來(lái)聲明根 Vue 實(shí)例。例如 const vm = new Vue()。在這種情況下，“vm”指的是什么？

雖然這不是約定，但是開(kāi)發(fā)人員經(jīng)常使用變量名稱(chēng) 'vm' 來(lái)命名根 Vue 實(shí)例，該變量名稱(chēng)代表 'ViewModel'，因?yàn)?Vue 本質(zhì)上負(fù)責(zé)視圖層，并且部分受到了 MVVM 模式的啟發(fā)（Model-View-View-Model）。但是，根本沒(méi)有必要將根實(shí)例命名為 “vm”。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Vue.js面試問(wèn)題及解決方案內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：Vue.js面試問(wèn)題及解決方案-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://aaarwkj.com/article6/dihgig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、外貿(mào)建站、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)