Vue 面试题

1、Vue父组件向子组件传递数据？

　　答：props传参

　　父组件

　　<child :list="list"></child> //在这里绑定list对象

　　子组件

　　child.vue <template> <ul> <li v-for="(item ,index)in list">{{item}}</li> </ul> </template> export default{ props:{
　　　　list:{
　　　　　　type:Array,//type为Array,default为函数
　　　　　　default(){
　　　　　　　　return [
　　　　　　　　　　"hahaxixihehe"//默认初始值
　　　　　　　　]}}
　　　　},//用props属性进行传数据，此时子组件已经获取到list的数据了
data(){
return {}
}
}

2、子组件向父组件传递事件？

　　答：

　　this.$emit('clickHeadAction',this.titleRight);

　　this.$parent.fatherMethod();

3、v-show和v-if指令的共同点和不同点？

　　答：

　　共同点：

　　v-if和v-show都是通过判断绑定数据的true\false来展示的

　　不同点：
　　v-if只有在判断为true的时候才会对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法　　比较倾向于对数据一次操作。
　　v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的　　值可以使数据展示或隐藏。

4、如何获取dom？

　　答：

　　vue中操作dom需要谨慎，尤其是添加或删除dom的时候，特别是mounted()和created()的时候，此时dom对象还没有生成，要放在this.nextTick()的回　　调函数中。

5、说出几种vue当中的指令和他的用法？

 　　答：

　　1.v-model双向数据绑定

　　2.v-for循环

 　  3.v-show 显示与隐藏

　　4.v-on事件

6、vue-loader是什么？使用它的用途有哪些？

 　　答：

　　简单的说，他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 　　　　　template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。

　　用途：js可以写es6、style样式可以scss或less、template可以加jade等

7、为什么使用key？

 　　答：

　　准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
　　快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

8、axios及安装？

　　简介：

　　用于浏览器和node.js的基于promise的HTTP客户端
　　1.从浏览器制作XMLHttpRequests
　　2.让HTTP从node.js的请求
　　3.支持promise api
　　4.拦截请求和响应
　　5.转换请求和响应数据
　　6.取消请求
　　7.自动转换成json数据
　　8.客户端支持防止xsrf

　　安装：

　　cmd命令行进入到vue项目下，执行npm install axios 然后执行提示npm install --save axios vue-axios

9、v-model 的使用？

　　答：　　

　　<input type="text" v-model="mes">  此时mes值就与input的值进行双向绑定

10、分别computed he watch的使用场景？

　　答：

　　1.watch擅长处理的场景：一个数据影响多个数据
　　2.computed擅长处理的场景：一个数据受多个数据影响

11、v-on可以监听多个方法吗？

　　答：

　　可以；v-on:="a(),b(),c()"

12、Vue$nexttick的使用？

　　答：

　　在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

　　this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) }

13、Vue中的双向数据绑定是如何实现的？

　　答：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台　　　　输出一个定义在vue初始化数据上的对象是个什么东西。

14、单页面应用和多页面的应用区别及优缺点？

　　答：

　　单页面简称(SPA)：

　　原理:利用js感知到url的变化,可以通过js动态的将当前的页面内容清除掉,接着将下一个页面的内容挂载到当前的页面上,页面每次切换跳转时,并不需　　要做html请求,这样就节省了很多http发送延迟,切换速度更快.
　　优点:加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小，前后端分离,视觉效果好
　　缺点:页面初次加载比较慢,页面复杂提高很多

　　多页面:

　　一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面
　　有点:SEO效果好
　　缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源

15、v-if和v-for的优先级？

　　答：

　　v-for 比 v-if 具有更高的优先级！

16、assets和static的区别?

　　答：

　　assests放置的是组件的资源,static放置的是非组件的资源。

17、Vue常用的修饰符？

　　1.v-model双向数据绑定修饰符

　　2.v-for循环修饰符

 　  3.v-show 显示与隐藏

　　4.v-on事件修饰符

18、Vue和Jquery的区别

 　　答：

　　vue和jquey对比 jQuery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的　　选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其　　实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还　　是依赖DOM元素的值。 Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是　　分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

19、delete和Vue.delete的区别

　　答：

　　delete会删除数组的值，但是它依然会在内存中占位置

　　而vue.delete会删除数组在内存中的占位

20、Vue-router 跳转和location.href有什么区别？

　　答：

　　1、使用location.href='/url'来跳转，简单方便，但是刷新了页面。
　　2、使用history.pushState('/url')，无刷新页面，静态跳转。
　　3、引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

21、Vue slot？

　　答：

　　假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

22、Vue2中注册在router-link上事件无效的解决方案

　　答：

　　在router-link上使用@click无效是因为router-link的作用是单纯的路由跳转会影响阻止点击事件，使用@click.native就可以了

23、Router-link 在IE 和firefox不起作用？

　　答：

　　使用<button>标签和Router.navigate方法

24、axios的特点有哪些？　　

　　1.从浏览器制作XMLHttpRequests
　　2.让HTTP从node.js的请求
　　3.支持promise api
　　4.拦截请求和响应
　　5.转换请求和响应数据
　　6.取消请求
　　7.自动转换成json数据

26、params和query的区别？

　　答：

　　params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
　　params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页　　　面会没有内容。

27、Vue更新数组时触发视图更新的方法

　　答：

　　可以设置对象或数组的值，通过key或数组索引，可以触发视图更新

　　删除对象或数组中元素，通过key或数组索引，可以触发视图更新

　　Vue提供了如下的数组的变异方法，可以触发视图更新

　　push()
　　pop()
　　shift()
　　unshift()
　　splice()  
　　sort()
　　reverse()