【前端面试题】07—47道基础的VueJS面试题(附答案)

VueJS作为一个轻量级框架， Vue. js提供了如此强大的功能，引起了大量开发者的关注。

如今，更多的企业开始基于 Vue.js框架开发项目， Vue.js利用 EMAScript5提供的特性实现数据绑定，提供了组件开发，有助于加快项目的开发。

同 Angular与 React一样， Vue.js中的数据丢失、数据双向绑定、虚拟DOM的实现、组件开发、生命周期、组件通信等，这些基础技术是开发者应该掌握的内容。

• 全局自定义指令：vue.js对象提供了 directive方法，可以用来自定义指令。directive方法接受两个参数，一个是指令名称，另一个是函数。

• 局部自定义指令：通过组件的 directives属性定义。

• bind：在指令第一次绑定到元素时调用。

• inserted：在被绑定元素插入父节点时调用（Vue2.0新增的）。

• update：在所在组件的 VNode更新时调用。

• componentUpdated：在指令所在组件的 VNode及其子 VNode全部更新后调用（Vue2.0新增的）。

• unbind：只调用一次，在指令与元素解除绑定时调用。

• el：指令所绑定的元素。

• binding：指令对象。

• vnode：虚拟节点。

• oldVnode：上一个虚拟节点。

• v-if：判断对象是否隐藏。

• v-for：循环渲染。

• v-bind：绑定一个属性。

• v- model：实现数据双向绑定。

• to：即将要进入的目标路由对象。

• from：当前导航正要离开的路由。

• next：一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

• 在自身实例化时向属性订阅器（dep）里面添加自己。

• 自身必须有一个 update( )方法。

• 在 dep.notice()发布通知时，能调用自身的 updat()方法，并触发 Compile中绑定的回调函数。

• beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。

• created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

• beforeMount：在挂载开始之前调用，相关的 render函数首次调用。

• mounted:    el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。

• beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。

• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。

• beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。

• destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

• activated在keep- alive组件激活时调用；

• deactivated在keep-live组件停用时调用。

<！--应用程序--><div id="app"><ickt></ickt></div><！--模板--><template id="demo"><！--模板元素要有同一个根元素--><div><h1>{{msg}}</h1></div></template><script type="text/javascript">//定义组件类var Ickt = Vue.extend ({template：'#demo',data:function(){return {msg：'有课前端网'}}})//注册组件Vue .component（'ickt, Ickt）//定义Vue实例化对象var app= new Vue ({el：'#app',data:{}})</script>

new Vue({el：'#icketang', router:router, template：'<router-view></router-view>'})

首先，实例化根组件，在根组件中定义组件渲染容器。然后，挂载路由，当切换路由时，将会切换整个页面。

27、ref属性有什么作用？

有时候，为了在组件内部可以直接访问组件内部的一些元素，可以定义该属性此时可以在组件内部通过this. $refs属性，更快捷地访问设置ref属性的元素。这是一个原生的DOM元素，要使用原生 DOM API操作它们，例如以下代码。

<div id="icke">< span ref="msg">有课前端网</span>< span ref=" otherMsg">专业前端技术学习网校</span></div>app. $refs. msg. text Content//有课前端网app. $refs.otherMsg. textContent//专业前端技术学习网校

注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。

28、Vue. js是什么？

Vue. js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue.js采用自下而上增量开发的设计。Vue.js的核心库只关注视图层，并且容易学习，易于与其他库或已有项目整合。另外， Vue. js完全有能力驱动采用单文件组件以及Vue.js生态系统支持的库开发的复杂单页应用。

Vue. js的目标是通过尽可能简单的API实现响应式的数据绑定的组件开发。

29、描述vue.js的一些特性。

Vue.js有以下持性。

（1）MVVM模式。

数据模型（ Model）发生改变，视图（View）监听到变化，也同步改变；视图（View）发生改变，数据模型（ Model）监听到改变，也同步改变。

使用MVVM模式有几大好处。

• 低耦合度，视图可以独立于模型变化和修改，一个View Model可以绑定到不同的视图上，当视图变化时模型可以不变，当模型变化时视图也可以不变.

• 可重用性，可以把一些视图的逻辑放在 ViewModel里面，让很多视图复用这段视图逻辑。

• 独立开发，开发人员可以专注于业务逻辑和数据的开发。设计人员可以专注于视图的设计。

• 可测试性，可以针对 View Model来对视图进行测试。

（2）组件化开发

（3）指令系统

（4）Vue2.0开始支持虚拟DOM。

但在Vue1.0中，操作的是真实DOM元素而不是虚拟DOM，虚拟DOM可以提升页面的渲染性能。

30、描述vue.js的特点。

Vue. js有以下特点。

• 简洁：页面由HTML模板+JSON数据+ Vue. js实例化对象组成。

• 数据驱动：自动计算属性和追踪依赖的模板表达式。

• 组件化：用可复用、解耦的组件来构造页面。

• 轻量：代码量小，不依赖其他库。

• 快速：精确而有效地批量实现DOM更新。

• 易获取：可通过npm、 bower等多种方式安装，很容易融入。

31、在vue.js中如何绑定事件？

通过在v-on后跟事件名称=“事件回调函数( )”的语法绑定事件。事件回调函数的参数集合( )可有可无。如果存在参数集合( )，事件回调函数的参数需要主动传递，使用事件对象要传递 $event。当然，此时也可以传递一些其他自定义数据。如果没有参数集合，此时事件回调函数有一个默认参数，就是事件对象。事件回调函数要定义在组件的 methods属性中，作用域是 Vue. js实例化对象，因此在方法中，可以通过this使用 Vue. js中的数据以及方法，也可以通过@语法糖快速绑定事件，如@事件名称=“事件回调函数( )”。

32、请说明<keep-alive>组件的作用。

当<keep- alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

< keep-alive>是一个抽象组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。

当在<keep- alive>内切换组件时，它的 activated和 deactivated这两个生命周期钧子函数将会执行。

<keep-alive><component :is="view"></component></keep-alive >

33、axios是什么？如何使用它？

axios是在vue2.0中用来替换 vue-resource.js插件的一个模块，是一个请求后台的模。

用 npm install axios安装 axios。基于 EMAScript 6 的 EMAScript Module规范，通过 import关键字将 axios导入，并添加到 Vue. js类的原型中。这样每个组件（包括vue.js实例化对象）都将继承该方法对象。它定义了get、post等方法，可以发送get或者post请求。在then方法中注册成功后的回调函数，通过箭头函数的作用域特征，可以直接访问组件实例化对象，存储返回的数据。

import Vue from ' vue' import axios from 'axios'；Vue.prototype.$http=axios； new Vue ({el：' ickt',data：{msg：' '}，template：'<h1> { { msg } }</h1>'，created:function() {this.$http.get( 'data.json' ).then（res => {this. msg= res .data. data})}})

34、在 axios中，当调用 axios.post('api/user'）时进行的是什么操作？

当调用post方法表示在发送post异步请求。

35、sass是什么？如何在ue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

（1）用npm安装加载程序（ sass-loader、 css-loader等加载程序)。

（2）在 webpack. config. js中配置sass加载程序。

模块module：{//加载程序loaders:[//加载scss {test:/ \ .scss$ /, loader : 'vue-style-loader！css-loader！sass-loader '        }      ]}

（3）在组件的 style标签中加上lang属性，例如lang="scss"。

<style type="text/css" lang="scss">$color:red； h1 {color: $color;}</style>

36、如何在 Vue. js中循环插入图片？

对“src”属性插值将导致404请求错误。应使用 v-bind:src格式代替。

代码如下：

<ul class="list"><li v-for="item in list"><img ：src=" 'img/' + item.url" alt="></1i></u1>

注意：vue1.0中支持属性插值，在2.0版本中，只允许通过v-bind指令或者冒号语法糖“ : ”实现属性动态绑定。

37、如何为选框元素自定义绑定的数据值？

对于单选框， value通常是静态字符串，如果v- model绑定的数据与某个 value值相等，则那个单选框被选中。

<1abe1>选择你喜欢的运动</1abe1><！--数据双向绑定--><label>篮球<input  type="radio"  v-model="sports"  value="basketball"></label><label>足球<input  type="radio"  v-model="sports"  value="football"></label><label>网球<input  type="radio"  v-model="sports"  value="netball"></label>

对于多选框，v- model绑定变量的值，通常是布尔值，true表示选中， false表示未选中。如果要自定义绑定数据的值，需要用v-bind指令设置true- value（选中时的值）以及 false- value（未选中时的值）。

<1abe1>选择你的兴趣爱好</labe1><label>足球<input type="checkbox"  v-model="intrest. football"></label><label>篮球<input type="checkbox"  v-model="intrest. basketball"  v-bind:true-value=" trueValue" v-bind:false-value="falsevalue"></label>

38、什么情况下会产生片段实例？

在以下情况下会产生片段实例模板包含多个顶级元素；模板只包含普通文本；模板只包含其他组件（其他组件可能是一个片段实例）；模板只包含一个元素指令，如vue- router的< router-view>；模板根节点有一个流程控制指令，如v-if或v-for。

这些情况让实例有未知数量的顶级元素，模板将把它的DOM内容当作片段。片段实例仍然会正确地渲染内容。不过，模板没有一个根节点，它的$el指向一个锚节点，即一个空的文本节点（在开发模式下是一个注释节点）。

注意：在Vue2.0中，组件的模板只允许有且只有一个根节点。

39、实现多个根据不同条件显示不同文字的方法。

通过“v-if,v-else”指令可以实现条件选择。但是，如果是多个连续的条件选择，则需要用到计算属性computed。例如在输入框中未输入内容时，显示字符串‘请输入内容’，否则显示输入框中的内容，代码如下。

<div id="app"><input type="text  v-model="inputvalue"><hl>  {  { showValue } }</h1></div>var app = new Vue ( { e1："#app'， data：{inputvalue：'  'computed: { showValue:function ( ) {return this. inputvalue | | '请输入内容'       }}})

40、什么是数据的丢失？

如果在初始化时没有定义数据，之后更新的数据是无法触发页面渲染更新的，这部分数据是丢失的数据（因为没有设置特性），这种现象称为数据的丢失。

41、如何检测数据变化？

由于 JavaScript特性的限制， Vue. js不能检测到下面数组的变化，即以下数组中改变的数据“丢失”了。

通过直接索引设置元素，如app.arr[0]=...

修改数据的长度，如 app. arr.length。

为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set( )方法，用该方法修改的数组，能触发视图更新，检测数据变化。

app.$set(app. arr, 5， 500);

42、如何检测对象变化？

由于 JavaScript特性的限制，Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化时将属性转化为 getter/setter，所以属性必须在data对象中定义，才能在初始化时让Vue.js转换它并让它响应，例如以下代码

var data ={ obj:{ a:1}}var app= new Vue ({el：'#app ',data:data })app.obj.a=10// 'app.obj.a'和'data.obj.a'现在是响应的app. obj. b=2//'app.obj.b'不是响应的data.obj.b=2//data.obj.b'不是响应的

如果需要在实例创建之后添加属性并且让它能够响应，可以使用$set实例方法。

app.$set（app.obj，'b'，500）// 'app.obj.b'和'data.obj.b'现在是响应的

对于普通数据对象，可以使用全局方法Vue.set（ object,key, value）。

Vue.set（data.obj，"b'，500）//'app.obj.b'和'cata,obj.b'现在是响应的

43、说一下Vue.js页面闪烁{{message}}。

Vue. js提供了一个v- cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。

[v-cloak ]{ display:none;}<div v-cloak> { { title } }</div>

这样<div>不会显示，直到编译结束。

44、如何在v-for 循环中实现v-model 数据的双向绑定？

有时候需要循环创建input，并用v- model实现数据的双向绑定。此时可以为v- model绑定数组的一个成员 selected [$ index]，这样就可以给不同的 input绑定不同的v- model，从而分别操作它们。

<div v-for= " ( item, index ) in arr"><input type= "text "  v-model="arr [index ] "><h1> { { arr [index ] } } </h1></div>

45、如何解决数据层级结构太深的问题？

在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码。

<span 'v-text="a.b.c.d"></span>

可以使用vm.$set手动定义一层数据。

vm.$set ("demo"，a .b.c.d)

46、Vue.js文件中的样式覆盖不生效的问题如何解决？

47、在 Vue. js开发环境下调用接口，如何避免跨域？

在工程目录 config/ index.js内对 proxyTable项进行如下配置。

proxyTable:{'/api '：{target:http://xxxxxx.com changeOrigin:true,pathRewrite:{'^/api'：' '}}}

本文完〜