vue前端面试题（借鉴）

1.vue优点？

双向数据绑定
虚拟DOM
数据视图结构分离
运行速度快
简单易学
轻量框架

2.v-show和v-if指令的共同点和不同点？

共同点是 它们都能控制元素的显示隐藏。
不同点是 实现本质不同，v-show相当于css中的display:none来进行显示隐藏，只编译一次；
总结：v-if是动态的向DOM树中添加/删除元素，若初始值为false，就不会编译了，而且v-if特别消耗性能。
如果频繁切换建议使用v-show，如果切换较少可以使用v-if。

3.如何获取dom?

ref = 'domName' 
this.$refs.domName

4.说出几种vue当中的指令和它的用法？

v-model 双向数据绑定
v-for 循环 	
v-if显示隐藏 	
v-on 事件 	
v-once 只绑定一次

5.v-model的使用

v-model用于表单中数据绑定，做了两个操作：
v-bind先绑定一个value属性
v-on在给这个value值绑定一个input事件

6.vue的两个核心点 数据驱动和组件系统。

数据驱动：viewModel是 保证数据和视图一致;
组件系统：应用类ui可以看做全部由组件树构成的

7.vue和jQuery的区别

jq是使用选择器去选取dom元素，来进行取值、赋值、事件绑定等操作，jq和原生html的区别就是更方便的选取DOM元素，进行操作，而数据和界面是在一起的。
vue是数据和view完全分离开，对数据操作不用引用dom对象， 是通过vue对象中这个vm实现相互绑定的，这就是mvvm。

8.SPA首屏加载慢如何解决

安装动态懒加载所需插件、使用CDN资源

9.分别简述computed和watch的使用场景

computed是一个属性受到多个属性的影响会用到，比如购物车结算商品； 	
watch是一条数据影响多条数据会用到，比如搜索数据。

10.为什么使用key?

给每个节点一个唯一标识，diff算法可以准确地识别到每个节点 	
作用：为了更高效的更新虚拟DOM

11.vue-loader是什么？使用它的用途有哪些？

是一个vue文件的加载器。 	
将template/style/js 转换为一个js模块 	
用途：js可以写es6；style可以写scss、less；template可以加jade等。

12.的作用是什么?

是vue的一个内置组件，使被包含的组件保留状态，或避免重复渲染。

13.如何让CSS只在当前组件中起作用？

在style中加scoped组件

14.vue父子组件传递数据？

父向子传：porps 	
子向父传：子组件可以使用 $emit,让父组件监听到自定义事件 。

15.vue组件中data为什么必须是一个函数？

因为js的特性，导致data必须以函数的形式存在，不可以是对象。

16.渐进式框架的理解

主张最少，根据不同的需求选择不同层级。

17.Vue中双向数据绑定是如何实现的？

是通过数据劫持、结合、发布订阅模式来实现的。数据和视图同步，数据改变视图改变，视图改变数据改变。
核心是：object.defineProperty()

18.单页面应用和多页面应用区别及优缺点

单页面（SPA）是指应用中只要一个页面应用，浏览器一开始加载就需要加载全部的js、css、html，并且应用中所有内容都包含在这个所谓的主页面应用中，但是写还是会分开写，然后交互时通过路由程序动态载入，单页面的跳转仅局部刷新，多用于pc端。
多页面（MPA）是指应用中有多个页面。 	单页面的优点：用户体验好、运行速度快、前后端分离、对服务器压力小、内容改变时不需要整页刷新。
单页面的缺点：不利于seo、页面复杂度提高、导航不可用，需自行实现前进后退功能、初始化加载耗时多。

19.v-if和v-for的优先级

v-if和v-for一起使用时，v-for的优先级会更高，这就说明每次for循环都会加载一遍v-if所以会消耗性能，建议v-if和v-for不要同时使用，如果一起使用建议将v-if放在最外层。

20.assets和static的区别

都是存放静态文件的。 	
assets是打包压缩时会上传到服务器，而压缩后的静态文件也会放置到static文件同index.html一同上上到服务器。
static不会走打包压缩的这个流程。

21.vue常用的修饰符

.stop 等用于js中的event.stopPropagation() 阻止事件冒泡； 	
.prevent 等同于 js中的 event.preventDefault(),防止执行预设行为； 	
.self 是只触发自己范围的事件，不包含子元素
.captrue 是与事件冒泡相反，事件捕获是从外到内 	
.once 只触发一次

22.请说下封装 vue 组件的过程？

建好组件模板，搭好架子，写样式，想好组件的基本逻辑；
准备好组件载入，处理好props的数据和类型；
准备好组件载出，拿到数据可以写方法了；
组件封装应用。

23.params和query的区别

 params是只能用name引入；
 query是name和path都可以引入； 	
 写法都是：分别是 this.$route.query.name和this.$route.query.name; 
 url地址显示：
	params在路径中不显示参数，只显示参数值（类似ajax的post传参）；query是参数和参数值都显示（类似ajax的get传参）
   	如果刷新页面 params的数据会丢失，query不会 	跳转都是`this.$router.push()`

24.vue初始化页面闪动问题

[v-cloak]{display:none} 	如果这还解决不了，再给根元素行内加上 style=“display:none” :style="{display:'block'}"

25.vue更新数组时触发视图更新的方法

pop() 删除数组的最后一项 	
shift() 删除数组的第一项 	
unshift() 添加给数字的第一项 	
splice() 用法:splice（2,0,"aaa"）从第二开始，0是没有删除的项，第二个后面加“aaa”。
举例：

26.vue常用的UI组件库

element-ui、mint-ui、vux 生命周期 	

27.什么是 vue 生命周期？

生命周期就是vue实例从创建到销毁的过程。 	

28.第一次页面加载会触发哪几个钩子？

beforeCreate、created、beforeMount、mounted 	

29.created和mounted的区别

created：html还没渲染完， 		
mounted：html已经渲染完。 	

30.vue获取数据在哪个周期函数？

created、beforeMount、mounted 	

31.vue的八个钩子函数

beforeCreate（创建前）：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，
其他的都还没创建。在beforeCreate生命周期执行的时候，data和method中的数据还没有初始化。
created（创建后）：data和methods都已经被初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早可以在这个阶段中操作
beforeMount（挂载前）：在内存中已经编译好模板，但是还没有挂载到页面中，此时，页面是旧的
mounted（挂载后）：vue实例已创建完成，此时组件脱离了创建阶段，进入到了运行阶段
beforeUadate（更新前）：这时页面数据是旧的，data中的数据是更新后的，页面还没有和最新的数据同步。
updated（更新后）：页面显示的数据已经是最新的，已经同步了。
beforeDetory（销毁前）：vue实例从运行阶段到销毁阶段，这时所有的data和methods、指令、过滤器等都是处于可用状态，还没真正被销毁。
detoryed（销毁后）：这时所有的data和methods、指令、过滤器等都是处于不可用状态，组件已经被销毁了。 	

32.mvvm 框架是什么？

vue是实现了数据双向绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。
在vue中，使用了双向绑定技术，就是view的变化能实时让model发生变化，而model的变化也能实时更新到view。

33.Vue-router跳转和location.href有什么区别?

location.href 跳转 简单方便，但是刷新了页面
history.pushState() 无刷新页面，静态跳转
router .push() 使用了diff算法 按需加载 减少了dom的消耗。

34.Vue2中注册在router-link上事件无效解决方法

使用@click.native 因为router-link阻止click事件，.native是直接监听一个原生事件

35.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

在router目录下的index.js文件中，对path属性加上/:id. 使用router的params.id

36.vue-router 有哪几种导航钩子?

三种
第一种：全局导航钩子函数 router.beforeEach(to,from,next),作用：在跳转前进行拦截。
第二种：组件内的钩子
第三种：单独路由独享组件