前端入职必备！十大经典Vue面试题及答案

1、什么是Vue.js？

Vue js是用于创建动态用户界面的渐进式javascript脚本，Vue js很容易学习。为了与Vue js的工作，你只需要添加一些动态功能的网站。你不需要安装任何东西来使用Vue js，只需要在你的项目中添加Vue js库。

2、列出一些Vue.js的特征

Vue.js具有以下特征：

• 模板
• 反应性reactivity
• 组件
• 转换transition
• 路由

3、解释Vue实例的生命周期

每个Vue实例的生命周期在创建时经历一系列初始化步骤。

-例如，它需要设置数据观察、编译模板和创建必要的数据绑定。

在这个过程中，它还将调用一些生命周期钩子，这给了我们执行定制逻辑的机会。

例如，创建的钩子在实例创建后被调用：

new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` points to the vm instance
      console.log('a is: ' + this.a)
    }
  })
  // => "a is: 1"

还有其他钩子将在实例生命周期的不同阶段调用，例如已编译、已准备和已销毁。

所有的生命周期钩子都被调用，它们的上下文指向调用它的Vue实例。

一些用户可能想知道在Vue.js的世界里“控制器”的概念在哪里，答案是:Vue.js中没有控制器。

组件的自定义逻辑将在这些生命周期钩子中拆分。

生命周期图

下图显示了Vue实例的完整生命周期

4、如何创建一个Vue.js实例？

你可以用Vue函数创建Vue实例：

var vm = new Vue({
    // options
  })

5、解释单向数据流和双向数据绑定之间的区别？

在单向数据流中，当数据模型改变时，应用程序的视图(UI)部分不会自动更新。

在Vue js中，v-bind用于单向数据流或绑定。

在双向数据绑定中，应用程序的视图(UI)部分在数据模型改变时自动更新。

在Vue.js中，v-model指令用于双向数据绑定。

6、如何在Vue.js中创建双向绑定？

v-model指令用于在Vue js中创建双向绑定。

在双向绑定中，数据或模型被绑定到DOM，而DOM又被绑定回模型。

在下面的示例中，你可以看到如何实现双向绑定。

<div id="app">
  {{message}}
  <input v-model="message">
</div>
<script type="text/javascript">
  var message = 'Vue.js is rad';
  new Vue({ el: '#app', data: { message } });
</script>

7、VUE.js中的过滤器是什么？

在Vue js中，过滤器用于转换要在浏览器上呈现的输出。

js过滤器本质上是一个函数，它接受一个值，处理它，然后返回处理后的值。

在标记中，它由单个管道(|)表示，并可以后跟一个或多个参数:

<element directive=”expression | filterId [args…]

在Vue 2.0中，没有可用的内置过滤器，但是你可以自由创建自己的过滤器。

8、如何在Vue.js中创建自定义过滤器？

filter()方法用于在Vue js中创建和注册一个自定义过滤器。

filter()方法接受两个参数一个是usnique名称的filterId来过滤要创建的内容，另一个是接受一个值作为参数并返回转换后的值的过滤函数。

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
  })

9、Vue.js中的组件是什么？

如何在其他组件中注册一个组件

Vue组件是Vue js最强大的特性之一。

在Vue中，组件是帮助你扩展基本HTML元素以封装可重用代码的自定义元素。

下面是在其他组件中注册Vue组件的方法

export default {
    el: '#your-element'
    components: {
        'your-component'
    }
  }

10、什么是VUE中的指令？

列举一些你用过的？

Vue js中的指令概念比Angular中的要简单得多。

js指令提供了一种用新的属性和标签扩展HTML的方法。

Vue.js有一组内置的指令，为你的应用程序提供扩展功能。

你还可以用Vue.js编写定制指令。

下面是Vue.js中常用的指令列表：

• v-show
• v-if
• v-model
• v-else
• v-on

11、列出Vue.js中的指令类型

在Vue js中，可以使用以下类型的指令

通用指令

文字指令

空指令

自定义指令

12、什么是Vue资源，如何安装Vue资源？

VUE-resource是vue.js的一个插件，它提供了发出web请求和使用XMLHttpRequest或JSONP处理响应的服务

你可以通过yarn或NPM安装它。

$ yarn add vue-resource
$ npm install vue-resource

13、如何在Vue js中创建常量？

为了创建常量const关键字被使用。

在Vue.js中，我们建议创建一个单独的文件来定义consants。

例子:

在Vue js中创建一个常量

export const SITE_URL = 'https://www.onlineinterviewquestions.com';

在Vue js中导入一个常量

import {SITE_URL} from './path/to/constants.js';