Vue面试题供参考.docx
《Vue面试题供参考.docx》由会员分享，可在线阅读，更多相关《Vue面试题供参考.docx（11页珍藏版）》请在冰豆网上搜索。
Vue面试题供参考
1、active-class是哪个组件的属性？
嵌套路由怎么定义？
答：
vue-router模块的router-link组件。
2、怎么定义vue-router的动态路由？
怎么获取传过来的动态参数？
答：
在router目录下的index.js文件中，对path属性加上/:
id。
使用router对象的params.id
3、vue-router有哪几种导航钩子？
答：
三种，一种是全局导航钩子：
router.beforeEach（to,from,next），作用：
跳转前进行判断拦截。
第二种：
组件内的钩子；第三种：
单独路由独享组件
4、scss是什么？
安装使用的步骤是？
有哪几大特性？
答：
预处理css，把css当前函数编写，定义变量,嵌套。
先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:
extenstion，再加多一个模块：
module里面test、loader
4.1、scss是什么？
在vue.cli中的安装使用步骤是？
有哪几大特性？
答：
css的预编译。
使用步骤：
第一步：
用npm下三个loader（sass-loader、css-loader、node-sass）
第二步：
在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：
还是在同一个文件，配置一个module属性
第四步：
然后在组件的style标签加上lang属性，例如：
lang=”scss”
有哪几大特性:
1、可以用变量，例如（$变量名称=值）；
2、可以用混合器，例如（）
3、可以嵌套
5、mint-ui是什么？
怎么使用？
说出至少三个组件使用方法？
答：
基于vue的前端组件库。
npm安装，然后import样式和js，vue.use（mintUi）全局引入。
在单个组件局部引入：
import{Toast}from‘mint-ui’。
组件一：
Toast（‘登录成功’）；组件二：
mint-header；组件三：
mint-swiper
6、v-model是什么？
怎么使用？
vue中标签怎么绑定事件？
答：
可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。
vue的model层的data属性。
绑定事件：
7、axios是什么？
怎么使用？
描述使用它实现登录功能的流程？
答：
请求后台资源的模块。
npminstallaxios-S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。
后台如果是Tp5则定义一个资源路由。
js中使用import进来，然后.get或.post。
返回在.then函数中如果成功，失败则是在.catch函数中
8、axios+tp5进阶中，调用axios.post（‘api/user’）是进行的什么操作？
axios.put（‘api/user/8′）呢？
答：
跨域，添加用户操作，更新操作。
9、什么是RESTfulAPI？
怎么使用?
答：
是一个api的标准，无状态请求。
请求的路由地址是固定的，如果是tp5则先路由配置中把资源路由配置好。
标准有：
.post.put.delete
10、vuex是什么？
怎么使用？
哪种功能场景使用它？
答：
vue框架中状态管理。
在main.js引入store，注入。
新建了一个目录store，…..export。
场景有：
单页应用中，组件之间的状态。
音乐播放、登录状态、加入购物车
11、mvvm框架是什么？
它和其它框架（jquery）的区别是什么？
哪些场景适合？
答：
一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：
vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：
数据操作比较多的场景，更加便捷
12、自定义指令（v-check、v-focus）的方法有哪些？
它有哪些钩子函数？
还有哪些钩子函数参数？
答：
全局定义指令：
在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。
组件内定义指令：
directives
钩子函数：
bind（绑定事件触发）、inserted（节点插入的时候触发）、update（组件内相关更新）
钩子函数参数：
el、binding
13、说出至少4种vue当中的指令和它的用法？
答：
v-if：
判断是否隐藏；v-for：
数据循环出来；v-bind:
class：
绑定一个属性；v-model：
实现双向绑定
14、vue-router是什么？
它有哪些组件？
答：
vue用来写路由一个插件。
router-link、router-view
15、导航钩子有哪些？
它们有哪些参数？
答：
导航钩子有：
a/全局钩子和组件内独享的钩子。
b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
参数：
有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种
16、Vue的双向数据绑定原理是什么？
答：
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：
需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：
compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：
Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器（dep）里面添加自己
2、自身必须有一个update（）方法
3、待属性变动dep.notice（）通知时，能调用自身的update（）方法，并触发Compile中绑定的回调，则功成身退。
第四步：
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化->视图更新；视图交互变化（input）->数据model变更的双向绑定效果。
ps：
16题答案同样适合”vuedata是怎么实现的？
”此面试题。
17、请详细说下你对vue生命周期的理解？
答：
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后：
在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：
在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：
当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：
在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
18、请说下封装 vue 组件的过程？
答：
首先，组件可以提升整个项目的开发效率。
能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：
效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vponent方法注册组件。
子组件需要数据，可以在props中接受定义。
而子组件修改好数据后，想把数据传递给父组件。
可以采用emit方法。
19、你是怎么认识vuex的？
答：
vuex可以理解为一种开发模式或框架。
比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。
应用级的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。
20、vue-loader是什么？
使用它的用途有哪些？
答：
解析.vue文件的一个加载器，跟template/js/style转换成js模块。
用途：
js可以写es6、style样式可以scss或less、template可以加jade等
21、请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
22、vue.cli中怎样使用自定义的组件？
有遇到过哪些问题吗？
答：
第一步：
在components目录新建你的组件文件（smithButton.vue），script一定要exportdefault{
第二步：
在需要用的页面（组件）中导入：
importsmithButtonfrom‘../components/smithButton.vue’
第三步：
注入到vue的子组件的components属性上面,components:
{smithButton}
第四步：
在template视图view中使用，
问题有：
smithButton命名，使用的时候则smith-button。
23、聊聊你对Vue.js的template编译的理解？
答：
简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
首先，通过compile编译器把template编译成AST语法树（abstractsyntaxtree即源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。
另外compile还负责合并option。
然后，AST会经过generate（将AST语法树转化成renderfuntion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
挑战一下：
1、vue响应式原理？
2、vue-router实现原理？
3、为什么要选vue？
与其它框架对比的优势和劣势？
4、vue如何实现父子组件通信，以及非父子组件通信？
5、vuejs与angularjs以及react的区别？
6、vuex是用来做什么的？
7、vue源码结构
1.vue中的MVVM模式
即Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。
ViewModel是Vue的核心，它是Vue的一个实例。
Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。
DOMListeners和DataBindings是实现双向绑定的关键。
DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
2.v-show指令，v-if的区别
条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。
v-show指令只是设置了元素CSS的style值
3.如何让css只在当前组件中起作用
在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped，即：
4.指令keep-alive
在vue-router写着keep-alive，keep-alive的含义：
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
为此可以添加一个keep-alive指令
is='curremtView'keep-alive>
5.Vuejs组件
vuejs构建组件使用
Vponent（'componentName',{/*component*/}）；这里注意一点，组件要先注册再使用
Vponent（'mine',{
template:
'#mineTpl',
props:
['name','title','city','content']
}）;
varv=newVue（{
el:
'#vueInstance',
data:
{
name:
'zhang',
title:
'thisistitle',
city:
'Beijing',
content:
'thesearesomedescaboutBlog'
}
}）;
6.路由嵌套
路由嵌套会将其他组件渲染到该组件内，而不是进行整个页面跳转router-view本身就是将组件渲染到该位置，想要进行页面跳转，就要将页面渲染到根组件，在起始配置路由时候写到：
varApp=Vue.extend（{root}）;
router.start（App,'#app'）;
这里首先将根组件注册进来，用于将路由中配置好的各个页面渲染出来，然后将根组件挂载到与#app匹配的元素上。
7.指令v-el的使用
有时候我们想就像使用jquery那样去访问一个元素，此时就可以使用v-el指令，去给这个元素注册一个索引，方便通过所属实例的$el访问这个元素。
注意
HTML不区分大小写，所以v-el:
someEl将转换为全小写。
可以用v-el:
some-el然后设置this.$el.someEl。
示例
msg>hello
other-msg>world
this.$els.msg.textContent//->"hello"
this.$els.otherMsg.textContent//->"world"
this.$els.msg//->hello
8.vuejs中使用事件名
在vuejs中，我们经常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。
绑定事件在HTML中用v-on:
click-"event",这时evet的名字不要出现大写，因为在1.x中不区分大小写，所以如果我们在HTML写v-on:
click="myEvent"而在js中写myEvent就出错误，所以在vuejs的1.x绑定事件时候，要尽量避免使用大写字母。
在2.0中没有该限制！
9.Vue.js是什么
Vue.js（是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。
Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
10.VueJS特性：
I:
MVVM模式（数据变量（model）发生改变视图（view）也改变，视图（view）改变，数据变量（model）也发生改变）
使用MVVM模式有几大好处：
1.低耦合。
View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2.可重用性。
可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
3.独立开发。
开发人员可以专注与业务逻辑和数据的开发（ViewModel）。
设计人员可以专注于界面（View）的设计。
4.可测试性。
可以针对ViewModel来对界面（View）进行测试
II:
组件化
III指令系统
IIII:
vue2.0开始支持虚拟dom
vue1.0是操作的是真的dom元素而不是虚拟的
虚拟dom:
可以提升页面的刷新速度
虚拟DOM有利也有弊。
A：
大小-其中之一就是更多的功能意味着代码包中更多行的代码。
幸运的是，Vue.js2.0依旧比较小（当前版本21.4kb），并
且也正在删除很多东西。
B:
内存-同样，虚拟DOM需要将现有的DOM拷贝后保存在内存中，这是一个在DOM更新速度和内存使用中的权衡。
C:
并不适用所有情况-如果虚拟DOM可以一次性进行批量的修改是非常好的。
但是如果是单独的、稀少的更新呢？
这样的任何
DOM更新都将会使虚拟DOM带来无意义的预计算
11.Vue.js特点
简洁：
页面由HTML模板+Json数据+Vue实例组成
数据驱动：
自动计算属性和追踪依赖的模板表达式
组件化：
用可复用、解耦的组件来构造页面
轻量：
代码量小，不依赖其他库
快速：
精确有效批量DOM更新
模板友好：
可通过npm，bower等多种方式安装，很容易融入
12.Vue.js和AngularJS之间的区别是什么?
下面是一些选择Vue而不是Angular的可能原因；
Vue.js是一个更加灵活开放的解决方案。
它允许你以希望的方式组织你的应用程序，而不是任何时候都必须遵循Angular制定的规则。
它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。
在结合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。
例如，Vue.js核心默认不包含路由和ajax功能，并且通常假定你在用应用中使用了一个外部的模块构建系统。
这可能是最重要的区别
在API和内部设计方面，Vue.js比Angular简单得多,因此你可以快速地掌握它的全部特性并投入开发。
Vue.js拥有更好的性能，因为它不使用脏检查。
当watcher越来越多时,Angular会变得越来越慢，因为作用域内的每一次数据变更，所有的watcher都需要被重新求值。
Vue则根本没有这个问题，因为它采用的是基于依赖追踪的观察系统，所以所有的数据变更触发都是独立的，除非它们之间有明确的依赖关系。
Vue.js中指令和组件的概念区分得更为清晰。
指令只负责封装DOM操作，而组件代表一个自给自足的独立单元——它拥有自己的视图和数据逻辑。
在Angular中它们两者间有不少概念上的混淆。
13.Vue.js和React.js有什么区别?
React.js和Vue.js确实有一些相似——它们都提供数据驱动、可组合搭建的视图组件。
然而，它们的内部实现是完全不同的。
React是基于VirtualDOM——一种在内存中描述DOM树状态的数据结构。
React中的数据通常被看作是不可变的，而DOM操作则是通过VirtualDOM的diff来计算的。
与之相比，Vue.js中的数据默认是可变的，而数据的变更会直接出发对应的DOM更新。
相比于VirtualDOM，Vue.js使用实际的DOM作为模板，并且保持对真实节点的引用来进行数据绑定。
VirtualDOM提供了一个函数式的描述视图的方法，这很cool。
因为它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图通与数据的同步。
它也开辟了JavaScript同构应用的可能性。
实话实说，我自己对React的设计理念也是十分欣赏的。
但React有一个问题就是组件的逻辑和视图结合得非常紧密。
对于部分开发者来说，他们可能觉得这是个优点，但对那些像我一样兼顾设计和开发的人来说，还是更偏好模板，因为模板能让我们更好地在视觉上思考设计和CSS。
JSX和JavaScript逻辑的混合干扰了我将代码映射到设计的思维过程。
相反，Vue.js通过在模板中加入一个轻量级的DSL（指令系统），换来一个依旧直观的模板，且能够将逻辑封装进指令和过滤器中。
React的另一个问题是：
由于DOM更新完全交由VirtualDOM管理，当你真的想要自己控制DOM是就有点棘手了（虽然理论上你可以，但这样做时你本质上在对抗React的设计思想）。
对于需要复杂时间控制的动画来说这就变成了一项很讨人厌的限制。
在这方面，Vue.js允许更多的灵活性，并且有不少用Vue.js构建的富交互实例
、
升级会员 