25道初級Vue.js面試問題

1. 為什麼Vue被稱為「漸進框架」？

使用漸進式框架的代價很小，從而使現有專案（使用其他技術建構的專案）更容易採用並遷移到新框架。 Vue.js 是一個漸進式框架，因為你可以逐步將其引入現有應用，而不必從頭開始重寫整個程式。

Vue 的最基本和核心的部分涉及「視圖」層，因此可以透過逐步將 Vue 引入程式並取代「視圖」實作來開始你的旅程。

由於其不斷發展的性質，Vue 與其他函式庫配合使用非常好，並且非常容易上手。這與 Angular.js 之類的框架相反，後者要求將現有程式完全重構並在該框架中實作。

2. Vue.js 中的宣告式渲染是什麼？

Vue.js 讓渲染資料變得容易，並隱藏了內部實作。例如下面的程式碼：

HTML

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

JavaScript

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

上面的程式碼片段將在ID 為“app”的p 中顯示短語“Hello there！”。程式碼包含實現結果所需的所有步驟。首先選擇 ID 為 “app” 的 DOM 元素，然後用 innerText 屬性手動設定 p 的內容。

現在，讓我們看看在 Vue 中是怎麼做的。

Template

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

App

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

我們在Vue 程式中建立了一個名為「greeting」 的資料屬性，但是只需要在p 中用mustache 語法輸入「greeting」 即可，而不必關心內部實作。我們聲明了 “greeting” 變量，其餘的由 Vue 完成。這就是聲明式渲染的樣子。 Vue 隱藏並管理內部資訊。

3. 你用哪個指令遍歷物件的屬性？

要遍歷物件或陣列，可以使用 v-for 指令。以下是一個例子：

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 中輸出字串

1ccdf49385041fee34afeec2ee9f42e4 Vue.js473f0a7621bec819994bb5020d29372a。之所以將整個標籤渲染為字串，是因為 mustache 模板標籤 {{title}}

將傳入的資料視為字串，而不將其解析為可執行程式碼。這也有助於緩解把惡意程式碼注入到頁面的 XSS 相關的問題 。這類似於在 JavaScript 中使用

elementSelector.innerText = text

語句。

5. 如何在輸入框和資料屬性之間實現雙向資料綁定？

要實現雙向資料綁定，可以使用 v-model 指令。 v-model 指令主要是語法糖：

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

在上面的語句中，每當觀察到 “keyup” 事件時，就會將名為 “nameInput” 的資料屬性設定為輸入框的值。同時，將輸入框的 value 屬性綁定到 “nameInput” 資料屬性。這樣在表單欄位和資料屬性之間建立了雙向資料關係。

v-model 可以做到這一點，並且比手動設定更有效地。要使用v-model 複製上述效果，請再次在同一輸入框中輸入以下內容：

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

#需要注意的是，當實現雙向資料綁定時，使用的資料屬性被認為是事實上的來源。在 data 屬性上所做的任何變更都將優先於 form 欄位上的使用者輸入事件。

6. 你如何捕捉元素上的點擊事件？

可以使用

v-on:click

指令來擷取 Click 事件。這個指令也可以用縮寫符號 ###@click### 表示。這是一個例子：#########v-on:click 符號######

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

######@click 符號######

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

###7. 什麼是動態prop？ ######當使用 v-bind 指令為 prop 指派值作為綁定到屬性的函數時，稱為動態 prop。例如以下元件的 ###tweet### 屬性綁定到名為tweetText的資料屬性。這與靜態硬編碼值相反。這種綁定始終是單向的，這意味著資料可以從父元件流到子元件，而絕不會反過來。 ###

<TweetBox :tweet=”tweetText”>

###8. Vue.js 中的指令是什麼？ ######指令是一系列特殊屬性，你可以透過將其加入到模板 HTML 標記中來賦予它們特殊的回應功能。指令允許範本中的元素使用資料屬性、方法、計算或監視的屬性和內聯表達式根據定義的邏輯對變更做出反應。例如以下程式碼使用 v-on 指令在元件上實作 click 事件偵聽器。 ###

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

###或###

<SignUpButton @click=”doSignup” />

###在這個範例中，我們使用 v-if 指令基於名為 showButton 的資料屬性顯示或刪除元素與元件。指令以 ###v-### 開頭來指示 Vue 特定的屬性。此規則的例外是 v-on 和 v-bind 的簡寫形式。 ###

<SignUpButton v-if=”showButton” />

###Vue 也允許定義自己的自訂指令。 ###

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

v-show 指令允许有条件地显示元素。在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。

 <TweetBox v-show=”isDisplayed”>

使用 v-show 指令时，可使用 CSS 的 display 属性切换元素的可见性。

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

v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。

另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。

就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。

11. 对于作为元素实现的注释框，我们希望使用户能够按下键盘上的Enter键，来将内容提交给名为 “storeComment” 的方法。在代码中对此进行演示。

可以在任何元素上使用 v-on 指令来实现事件侦听器。此外，v-on 还允许我们将按键修饰符用于 “enter”，“tab”，“esc”，“space” 等常见按键。这是一个例子：

模板

<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. 如何在单页 Vue 应用（SPA）中实现路由？

可以通过官方的 vue-router 库在用 Vue 构建的 SPA 中进行路由。该库提供了全面的功能集，其中包括嵌套路线、路线参数和通配符、过渡、HTML5 历史与哈希模式和自定义滚动行为等功能。 Vue 还支持某些第三方路由器包。

13. 使用 Vue 时调用 event.preventDefault() 的最佳方式是什么？

在事件侦听器上调用 event.preventDefault() 的最佳方式是将 .prevent 修饰符与 v-on 指令一起使用。这是一个例子：

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

14. 什么是过滤器？

过滤器是在 Vue 程序中实现自定义文本格式的一种非常简单的方法。它们就像可以在表达式中通过管道传递（使用管道字符）以取得结果的运算符。下面是一个可以反转文本字符串的过滤器示例：

模板

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

输出

eltit a si sihT

在上面的例子中，我们创建了一个名为 reverseText 的过滤器，该过滤器反转文本字符串并返回。这是一个简单的函数，接受输入并返回处理后的输出。通过在过滤器下声明，它就可以成为可以在模板中使用的过滤器。

在模板中，我们只是将 reverseText 过滤器通过管道传递到了想要在 mustache 标签中显示的数据变量。这样可以将多个过滤器管道连接在一起。因此过滤器提供了一种非常优雅的方式来处理文本。

15. 如何动态地在元素上切换 CSS 类？

Vue 允许我们绑定到 class 属性。在下面的例子中，我们将 class 属性绑定到一个对象，该对象允许使用 data 属性切换类。

模板

a6ac97d030f487925eacc686408f064094b3e26ee717c64999d7867364b1b4a3

App

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

在上面的代码中，只要数据属性 showp 为 true，类名 pStyle 将应用于 p。

16. 绑定 HTML 类时，该如何连接类？假设存在一个元素：Process。我们只希望使用名为 “isActive” 的数据属性动态地切换 btnActive 类。

这可以在绑定类时用 Array 来实现。以下是实现方法：

模板

b5e2e16f2f344d8ec65b0b72c8c5c91aProcess65281c5ac262bf6d81768915a4a77ac0

App

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

在上面的代码段中，将串联各个类的数组，并基于 isActive 数据属性的值对对象中的表达式进行响应式评估。

17. 什么是计算属性？

计算属性是一类特殊函数的结果，当从属属性发生变化时，这些函数会自动进行计算。用它们代替内联表达式可以更好地表达复杂的逻辑，在模板中不能作为内联表达式合并。

每个计算方法都可以在模板部分作为属性使用。当从属属性更改时，计算方法将自动计算并缓存结果，这样比使用普通方法更好。方法在访问时将始终会重新计算，而如果自上一次计算和缓存阶段以来该方法内使用的属性未发生更改，则计算的属性将不会重新计算。

需要注意的是，仅当方法中使用的属性是响应性的（例如数据属性）时，才考虑依赖关系的更改。

这是一个演示计算属性的简单例子：

模板

2fb1ec095997abb5abb99340125c8b3b
  2f0a1a4e6857d0dcd9df41d4d7145106
94b3e26ee717c64999d7867364b1b4a3

App

const emailRegEx = /^(([^a8093152e673feb7aba1828c43532094()\[\]\\.,;:\s@"]+(\.[^a8093152e673feb7aba1828c43532094()\[\]\\.,;:\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);
      }
    }
});

在上面的代码示例中，如果正则表达式测试针对电子邮件输入框失败，则 isValid 计算属性将返回 true。如果电子邮件验证程序认为输入的值无效，就会看到文本框便为红色（你必须创建一个名为 .invalid 的类，并将背景颜色属性设置为红色）。当用户键入内容时，将重新执行计算的方法，并且在验证格式之后，动态删除无效的类。

18. 如何确保在单文件组件中定义的 CSS 样式仅应用于该组件，而不被用于其他组件？

这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：

d477f9ce7bf77f53fbcf36bec1b69b7a
    42967cef1e90281232ee6f23dbc41236This is a title94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
c977fa5678fe78cf54b097005108eb8c
    .title {
        font-family: sans-serif;
        font-size: 20px;
531ac245ce3e4fe3d50054a55f265927

19. 如何将数据从父组件传递到子组件？

可以用作为组件中单向入口的 prop 把数据向下传递到子组件。这是一个例子：

d477f9ce7bf77f53fbcf36bec1b69b7a
    e388a4556c0f65e1904146cc1a846bee
      e293915c6962aa9ecb16020f728dd911
   94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    import ContactListItem from ‘./ContactListItem’;
    export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
2cacc6d41bbb37262a98f745aa00fbf0

contact-list-item 上绑定的 prop “contact” 是一个入口，用于从用作子项的父组件接收数据。在 contact-list-item 组件中：

d477f9ce7bf77f53fbcf36bec1b69b7a
    e388a4556c0f65e1904146cc1a846bee
        45a2772a6b6107b401db3c9b82c049c2{{ contact.name }}54bdf357c58b8a65c66d7c19c8e4d114
        45a2772a6b6107b401db3c9b82c049c2{{ contact.email }}54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
 
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    export default {
     name: ‘contact-list-item’,
props: [‘contact’]
    }
2cacc6d41bbb37262a98f745aa00fbf0

在这里声明了一个名为 “contact” 的 prop 引入数据，然后可以直接在模板部分中显示。

20. 什么是组件？

组件本质上是 Vue 实例，它们封装模板、逻辑和可选的本地响应性数据属性，能够提供可重新使用的自定义构建元素。可重用性是构建组件的核心。

使用单文件组件构建应用程序时，组件在扩展名为 .vue 的文件中定义。单文件组件包含三个部分：模板部分定义了该组件的 HTML 布局；脚本部分定义了数据、属性和逻辑单元（如方法）并将内容导出为 Vue 组件；还有一个样式部分，用于定义组件的样式表。单文件组件使用 Webpack 等模块捆绑器进行编译。

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

Vue 实例（组件）从其初始化到销毁和删除都经历生命周期。在整个过程中，Vue 允许开发人员运行自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表：

• created
• mounted
• updated
• destroyed

22. 什么是插槽（slot）？

插槽允许你定义可以封装和接受子 DOM 元素的元素。组件模板中的 58cb293b8600657fad49ec2c8d37b472 9a95abe766365359239f678e4516b8d7 元素作为通过组件标签捕获的所有DOM元素的出口。这是一个例子：

Post.vue |实现插槽的组件

d477f9ce7bf77f53fbcf36bec1b69b7a
 889c467f53be0c0d4e7d0d985361b565
   c3606beab6681aa5853aec0b47ea0fb5{{title}}39528cedfa926ea0c01e69ef5b2ea9b0
   bf6874f3abc615a5ee665c11de5510df
     58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee
   94b3e26ee717c64999d7867364b1b4a3
 94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

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

d477f9ce7bf77f53fbcf36bec1b69b7a
 2fb1ec095997abb5abb99340125c8b3b
   0190b473a42bafadc34d7127a15c6268
Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。
核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，
Vue也完全能够为复杂的单页应用程序提供支持。
   69fdf200a32aa4c1d14a166c5d848b9d
 94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

在上面的示例中，斜体文本显示在 Post 组件中标有 58cb293b8600657fad49ec2c8d37b472 元素的区域内。

23. 什么是观察者？

观察者允许我们观察更改的特定属性，并执行定义为函数的自定义操作。尽管它们的用例与计算的属性相交叉，但是当某些数据属性发生改变时，有时需要观察者执行自定义操作或运行代价昂贵的操作。

24. 如何从子组件发出自定义事件？

可以用 $emit('event-name', eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。

25. 开发人员经常使用字母 “vm” 作为变量名来声明根 Vue 实例。例如 const vm = new Vue()。在这种情况下，“vm”指的是什么？

虽然这不是约定，但是开发人员经常使用变量名称 'vm' 来命名根 Vue 实例，该变量名称代表 'ViewModel'，因为 Vue 本质上负责视图层，并且部分受到了 MVVM 模式的启发（Model-View-View-Model）。但是，根本没有必要将根实例命名为 “vm”。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

以上是25道初級Vue.js面試問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！