23 个 Vue.js 初级面试题

时间  2019-12-27
标签 vue.js vue 初级 面试 栏目 JavaScript 繁體版
原文   原文链接
翻译：疯狂的技术宅

原文：https://www.zeolearn.com/inte...javascript

未经容许严禁转载html

1. 为何Vue被称为“渐进框架”？

使用渐进式框架的代价很小，从而使现有项目（使用其余技术构建的项目）更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架，由于你能够逐步将其引入现有应用，而没必要从头开始重写整个程序。前端

Vue 的最基本和核心的部分涉及“视图”层，所以能够经过逐步将 Vue 引入程序并替换“视图”实现来开始你的旅程。vue

因为其不断发展的性质，Vue 与其余库配合使用很是好，而且很是容易上手。这与 Angular.js 之类的框架相反，后者要求将现有程序彻底重构并在该框架中实现。java

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

Vue.js 使渲染数据变得容易，并隐藏了内部实现。例以下面的代码：程序员

HTML面试

<div id=”app”></div>

JavaScript正则表达式

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

上面的代码段将在 ID 为 “app” 的 div 中显示短语 “Hello there！”。代码包含实现结果所需的全部步骤。首先选择 ID 为 “app” 的 DOM 元素，而后用 innerText 属性手动设置 div 的内容。vue-router

如今，让咱们看看在 Vue 中是怎么作的。segmentfault

Template

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

App

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

咱们在 Vue 程序中建立了一个名为 “greeting” 的数据属性，可是只须要在 div 中用 mustache 语法输入 “greeting” 便可，而没必要关心内部实现。咱们声明了 “greeting” 变量，其他的由 Vue 完成。这就是声明式渲染的样子。 Vue 隐藏并管理内部信息。

3. 你用哪一个指令遍历对象的属性？

要遍历对象或数组，可使用 v-for 指令。下面是一个例子：

Template

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

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' 
    } 
})

上面的代码将在 div 中输出字符串 <h1 style="color: green;">Vue.js</h1>。之因此将整个标签渲染为字符串，是由于 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 程序中实现自定义文本格式的一种很是简单的方法。它们就像能够在表达式中经过管道传递（使用管道字符）以取得结果的运算符。下面是一个能够反转文本字符串的过滤器示例：

模板

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

输出

eltit a si sihT

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

在模板中，咱们只是将 reverseText 过滤器经过管道传递到了想要在 mustache 标签中显示的数据变量。这样能够将多个过滤器管道链接在一块儿。所以过滤器提供了一种很是优雅的方式来处理文本。

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

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

模板

<div :class=”{ divStyle : showDiv }”></div>

App

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

在上面的代码中，只要数据属性 showDiv 为 true，类名 divStyle 将应用于 div。

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

这能够在绑定类时用 Array 来实现。如下是实现方法：

模板

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

App

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

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

17. 什么是计算属性？

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

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

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

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

模板

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

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);
      }
    }
});

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

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

这能够经过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为全部样式元素分配惟一的数据属性，而后使样式针对这些惟一的元素。举个例子：

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

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

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

<template>
    <div>
      <contact-list-item v-for=”contact in contacts” :contact=”contact” />
   </div>
</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>
    <div>
        <span>{{ contact.name }}</span>
        <span>{{ contact.email }}</span>
   </div>
</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>
 <div class="hello">
   <h3 class="title">{{title}}</h3>
   <div class="content">
     <slot></slot>
   </div>
 </div>
</template>

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

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

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

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”。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程