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: &#39;#app&#39;,
  data: {
    card: {
      name: &#39;John Doe&#39;,
      age: 25,
      city: &#39;New York&#39;,
      country: &#39;US&#39;
    }
  }
});

登入後複製

輸出

#name - John Doe

age - 25

city - New York

country - US##4. 給出模板，描述Vue 程式的輸出。

範本：

{{title}}

登入後複製

App:

new Vue({ 
    el: &#39;#app&#39;, 
    data: { 
        title: &#39;Vue.js&#39; 
    } 
})

登入後複製

上面的程式碼將在p 中輸出字串

Vue.js

。之所以將整個標籤渲染為字串，是因為 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: &#39;#app&#39;,
  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 属性切换类。

模板

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

登入後複製

App

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

登入後複製

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

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

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

模板

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

登入後複製

App

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

登入後複製

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

17. 什么是计算属性？

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

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

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

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

模板

<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: &#39;#app&#39;,
    data: {
      email: &#39;&#39;
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});

登入後複製

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

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

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

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

登入後複製

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

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

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

登入後複製

contact-list-item 上绑定的 prop “contact” 是一个入口，用于从用作子项的父组件接收数据。在 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>

登入後複製

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

20. 什么是组件？

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

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

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

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

created
mounted
updated
destroyed

22. 什么是插槽（slot）？

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

Post.vue |实现插槽的组件

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

登入後複製

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

<template>
 <p id="app">
   <Post title="Hello from Vue!">
Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。
核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，
Vue也完全能够为复杂的单页应用程序提供支持。
   </Post>
 </p>
</template>

登入後複製

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