个性化阅读
专注于IT技术分析

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

十大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实例的完整生命周期

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';
赞(0) 打赏
未经允许不得转载:srcmini » 前端入职必备!十大经典Vue面试题及答案
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏