基础的VueJS⾯试题（附答案）
基础的VueJS⾯试题(附答案)
1、什么是MVVM框架？它适⽤于哪些场景？
MVVM框架是⼀个 Model-View-View Model框架，其中 ViewModel连接模型Model）和视图（View）。
在数据操作⽐较多的场景中，MVVM框架更合适，有助于通过操作数据渲染页⾯。
2、active- class是哪个组件的属性？
它是 vue-router模块的 router-link组件的属性。
3、如何定义Vue- router的动态路由？
在静态路由名称前⾯添加冒号，例如，设置id动态路由参数，为路由对象的path属性设置/:id。
4、如何获取传过来的动态参数？
javascript的特性在组件中，使⽤$router对象的 params.id，即 $route.params.id 。
5、vue- router有哪⼏种导航钩⼦？
有3种。
第⼀种是全局导航钩⼦：router.beforeEach(to,from,next)。作⽤是跳转前进⾏判断拦截。
第⼆种是组件内的钩⼦。
第三种是单独路由独享组件。
6、mint-ui是什么？如何使⽤？
它是基于 Vue.js的前端组件库。⽤npm安装，然后通过 import导⼊样式和JavaScript代码。vue.use(mintUi)⽤于实现全局引⼊，import {Toast} from ’ mint-ui’⽤于在单个组件局部引⼊。
7、V-model是什么？有什么作⽤？
v- model是 Vue. js中的⼀条指令，可以实现数据的双向绑定。
8、Vue.js中标签如何绑定事件？
绑定事件有两种⽅式。
第⼀种，通过v-on指令， < input v-on:click= doLog()/>。
第⼆种，通过@语法糖，< input @click= doLog()/>。
9、vuex是什么？如何使⽤？在哪种功能场景中使⽤它？
vuex是针对 Vue. js框架实现的状态管理系统。
为了使⽤vuex，要引⼊ store，并注⼊Vue.js组件中，在组件内部即可通过$store访问 store对象。
使⽤场景包括：在单页应⽤中，⽤于组件之间的通信，例如⾳乐播放、登录状态管理、加⼊购物车等。
10、如何实现⾃定义指令？它有哪些钩⼦函数？还有哪些钩⼦函数参数？
⾃定义指令包括以下两种。
全局⾃定义指令：vue.js对象提供了 directive⽅法，可以⽤来⾃定义指令。directive⽅法接受两个参数，⼀个是指令名称，另⼀个是函数。
局部⾃定义指令：通过组件的 directives属性定义。
它有如下钩⼦函数。
bind： 在指令第⼀次绑定到元素时调⽤。
inserted： 在被绑定元素插⼊⽗节点时调⽤（Vue2.0新增的）。
update： 在所在组件的 VNode更新时调⽤。
componentUpdated： 在指令所在组件的 VNode及其⼦ VNode全部更新后调⽤（Vue2.0新增的）。
unbind： 只调⽤⼀次，在指令与元素解除绑定时调⽤。
钩⼦函数的参数如下。
el： 指令所绑定的元素。
binding： 指令对象。
vnode： 虚拟节点。
oldVnode： 上⼀个虚拟节点。
11、⾄少说出vue.js中的4种指令和它们的⽤法。
相关指令及其⽤法如下。
v-if： 判断对象是否隐藏。
v-for： 循环渲染。
v-bind： 绑定⼀个属性。
v- model： 实现数据双向绑定。
12、Vue-router是什么？它有哪些组件？
它是 Vue. js的路由插件。组件包括 router-link和 router-vIew。
13、导航钩⼦有哪些？它们有哪些参数？
导航钩⼦⼜称导航守卫，⼜分为全局钩⼦、单个路由独享钩⼦和组件级钩⼦。
全局钩⼦有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
单个路由独享钩⼦有 beforeEnter。
组件级钩⼦有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它们有以下参数。
to： 即将要进⼊的⽬标路由对象。
from： 当前导航正要离开的路由。
next： ⼀定要⽤这个函数才能到达下⼀个路由，如果不⽤就会遭到拦截。
14、Vue.js的双向数据绑定原理是什么？
Vue. js采⽤ES5提供的属性特性功能，结合发布者-订阅者模式，通过 Object.defineProperty()为各个属性定义get、set特性⽅法，在数据发⽣改变时给订阅者发布消息，触发相应的监听回调。
具体步骤如下。
（1）对需要观察的数据对象进⾏递归遍历，包括⼦属性对象的属性，设置set和get特性⽅法。当给这个对象的某个值赋值时，会触发绑定的set特性⽅法，于是就能监听到数据变化。
（2）⽤ compile解析模板指令，将模板中的变量替换成数据。然后初始化渲染页⾯视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者。⼀旦数据有变动，就会收到通知，并更新视图
（3） Watcher订阅者是 Observer和 Compile之间通信的桥梁，主要功能如下。
1. 在⾃⾝实例化时向属性订阅器（dep）⾥⾯添加⾃⼰。
2. ⾃⾝必须有⼀个 update( )⽅法。
3. 在 ice()发布通知时，能调⽤⾃⾝的 update()⽅法，并触发 Compile中绑定的回调函数。
（4）MVVM是数据绑定的⼊⼝，整合了 Observer、 Compile和 Watcher三者，通过Observer来监听⾃⼰的 model数据变化，通过Compile来解析编译模板指令，最终利⽤Watcher搭起 Observer和 Compile之间的通信桥梁，达到数据变化通知视图更新的效果。利⽤视图交互，变化更新数据 model变更的双向绑定效果。
15、请详细说明你对Vue.js⽣命周期的理解。
总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、destroyed。
beforeCreate： 在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调⽤。
created： 在实例创建完成后⽴即调⽤。在这⼀步，实例已完成以下的配置：数据观测者，属性和⽅法的运算，event/ watcher事件回调。然⽽，挂载阶段还没开始，$el属性⽬前不可见。
beforeMount： 在挂载开始之前调⽤，相关的 render函数⾸次调⽤。
mounted: el被新创建的vm.$el替换，并且在挂载到实例上之后再调⽤该钩⼦如果root实例挂载了⼀个⽂档内元素，当调⽤ mounted时vm.sel也在⽂档内。
beforeUpdate： 在数据更新时调⽤，发⽣在虛拟DOM重新渲染和打补丁之前。
updated： 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调⽤该钩。
beforeDestroy： 在实例销毁之前调⽤。在这⼀步，实例仍然完全可⽤。
destroyed： 在 Vue. js实例销毀后调⽤。调⽤后，Vue. js实例指⽰的所有东西都会解除绑定，所有的事件会被移除，所有的⼦实例也会被销毁。
当使⽤组件的keep- alive功能时，增加以下两个周期。
activated 在keep- alive组件激活时调⽤；
deactivated 在keep-live组件停⽤时调⽤。
Vue2.5.0版本新增了⼀个周期钩⼦：ErrorCaptured，当捕获⼀个来⾃⼦孙组件的错误时调⽤。
16、请描述封装Vue组件的作⽤过程。
组件可以提升整个项⽬的开发效率，能够把页⾯抽象成多个相对独⽴的模块，解决了传统项⽬开发中效率低、难维护、复⽤性等问题。
使⽤d⽅法创建⼀个组件，使⽤Vueponent⽅法注册组件。⼦组件需要数据，可以在 props中接收数据。⽽⼦组件修改妤数据后，若想把数据传递给⽗组件，可以采⽤emit⽅法。
17、你是怎样认识vuex的？
vuex可以理解为⼀种开发模式或框架。它是对 Vue. js框架数据层⾯的扩展。通过状态（数据源）集中管理驱动组件的变化。应⽤的状态集中放在 store中。改变状态的⽅式是提交 mutations，这是个同步的事务。异步逻辑应该封装在 action中。
18、Vue- loader是什么？它的⽤途有哪些？
它是解析.vue⽂件的⼀个加载器，可以将 template/js/style转换成 JavaScript模块。
⽤途是通过 vue-loader, JavaScript可以写 EMAScript 6语法， style样式可以应⽤scss或less, template可以添加jade语法等。
19、请说出vue.cli项⽬的src⽬录中每个⽂件夹和⽂件的⽤法。
assets⽂件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app. vue是⼀个应⽤主组件；main.js是⼊⼝⽂件。
20、在Vue.cli中怎样使⽤⾃定义组件？在使⽤过程中你遇到过哪些问题？
具体步骤如下。
（1）在 components⽬录中新建组件⽂件，脚本⼀定要导出暴露的接⼝。
（2）导⼊需要⽤到的页⾯（组件）。
（3）将导⼊的组件注⼊vue.js的⼦组件的 components属性中。
（4）在 template的视图中使⽤⾃定义组件。
21、谈谈你对vue.js的 template编译的理解。
简⽽⾔之，就是⾸先转化成AST（ Abstract Syntax Tree，抽象语法树），即将源代码语法结构抽象成树状表现形式，然后通过 render 函数进⾏渲染，并返回VNode（ Vue. js的虚拟DOM节点）。
详细步骤如下。
（1）通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值， createCompiler⽤来创建编译器。另外，compile还负责合并 option。
（2）AST会经过 generate（将AST转化成 render funtion字符串的过程）得到 render函数， render的返回值是 VNode, VNode是Vue.Js的虚拟DOM节点，⾥⾯有标签名⼦节点、⽂本等。
22、说⼀下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel 模式。
Vue.js是通过数据驱动的， Vue. js实例化对象将DOM和数据进⾏绑定，⼀旦绑定，和数据将保持同步，每当数据发⽣变化，DOM也会随着变化。
ViewModel是Vue.js的核⼼，它是 Vue.js的⼀个实例。Vue.js会针对某个HTML元素进⾏实例化，这个HTML元素可以是body，也可以是某个CSS选择器所指代的元素。
DOM Listeners和 Data Bindings是实现双向绑定的关键。DOM Listeners监听页⾯所有View层中的DOM元素，当发⽣变化时，Model 层的数据随之变化。Data Bindings会监听 Model层的数据，当数据发⽣变化时，View层的DOM元素也随之变化。
23、v-show指令和v-if指令的区别是什么？
v-show与v-if都是条件渲染指令。不同的是，⽆论v-show的值为true或 false，元素都会存在于HTML页⾯中；⽽只有当v-if的值为true 时，元素才会存在于HTML页⾯中。v-show指令是通过修改元素的 style属性值实现的。
24、如何让CSS只在当前组件中起作⽤？
在每⼀个Vue.js组件中都可以定义各⾃的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作⽤，只需要在Style标签添加Scoped属性，即< style scoped>< /style>。
25、如何创建vue.js组件？
在vue.js中，组件要先注册，然后才能使⽤。具体代码如下
<！--应⽤程序-->
<div id="app">
<ickt></ickt>
</div>
<！--模板-->
<template id="demo">
<！--模板元素要有同⼀个根元素-->
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
//定义组件类
var Ickt = d({
template：'#demo',
data:function(){
return{
msg：'有课前端⽹'
}
}
})
//注册组件
Vue ponent（'ickt, Ickt）
//定义Vue实例化对象
var app=new Vue ({
el：'#app',
data:{}
})
</script>
26、如何实现路由嵌套？如何进⾏页⾯跳转？
路由嵌套会将其他组件渲染到该组件内，⽽不是使整个页⾯跳转到 router-view定义组件渲染的位置。要进⾏页⾯跳转，就要将页⾯渲染到根组件内，可做如下配置。
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. $herMsg. textContent
//专业前端技术学习⽹校
注意：在Ve2.0中，ref属性替代了1.0版本中v-el指令的功能。
28、Vue. js是什么？
Vue. js是⼀套构建⽤户界⾯的渐进式框架。与其他重量级框架不同的是，Vue.js采⽤⾃下⽽上增量开发的设计。Vue.js的核⼼库只关注视图层，并且容易学习，易于与其他库或已有项⽬整合。另外， Vue. js完全有能⼒驱动采⽤单⽂件组件以及Vue.js⽣态系统⽀持的库开发的复杂单页应⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。