正文
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;的操作。所以再不重新渲染数据的情况下，改变数据的 值可以使数据展示或隐藏。
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).
快速: 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
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擅长处理的场景：一个数据受多个数据影响
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效果好
缺点:页面切换慢,每次切换页面需要选择性的重新加载公共资源
有点: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会删除数组在内存中的占位
而vue.delete会删除数组在内存中的占位
20、Vue-router 跳转和location.href有什么区别？
答：
1、使用location.href='/url'来跳转，简单方便，但是刷新了页面。
2、使用history.pushState('/url')，无刷新页面，静态跳转。
3、引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
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数据
2.让HTTP从node.js的请求
3.支持promise api
4.拦截请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换成json数据
26、params和query的区别？
答：
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页 面会没有内容。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页 面会没有内容。
27、Vue更新数组时触发视图更新的方法
答：
可以设置对象或数组的值，通过key或数组索引，可以触发视图更新
删除对象或数组中元素，通过key或数组索引，可以触发视图更新
Vue提供了如下的数组的变异方法，可以触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
pop()
shift()
unshift()
splice()
sort()
reverse()
