【前端面试题】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.comchangeOrigin:true,pathRewrite:{'^/api'：' '}}}
本文完〜
相关推荐
【前端面试题】03—200+道常见JavaScript基础面试题上（附答案）
