vue面试题

1.<keep-alive></keep-alive>的作用是什么?

用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回该列表页面，我们希望，列表页面可以保留用户的筛选(或选中)状态 keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单，它还可以避免组件反复创建和渲染，有效提升系统性能。总的来说，keep-alive用于保存组件的渲染状态。

2.如何获取dom?

ref="domName" 用法：this.$refs.domName

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

vue文件的一个加载器，将template/js/style转换成js模块。

4.为什么for循环使用key?

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。主要是为了高校的更新虚拟dom

5.v-modal的使用

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作： v-bind绑定一个value属性； v-on指令给当前元素绑定input事件

6.请说出vue.cli项目中src目录每个文件夹和文件的用法

assets文件夹是放静态资源，components是放组件，router是定义路由相关的配置，app.vue是一个应用主组件；main.js是入口文件。

7.v-on可以监听多个方法吗？

可以。 <input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur}" />

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

computed: 　　　　当一个属性受多个属性影响的时候就需要用到computed 　　　　最典型的栗子： 购物车商品结算的时候 watch: 　　　　当一条数据影响多条数据的时候就需要用watch 　　　　栗子：搜索数据

9.$nextTick的使用

当你修改了data的值想马上获取到这个dom元素的值，是不能获取到更新后的值， 你需要使用$nextTick这个回调，让修改后的data的值渲染更新到dom元素之后再获取，才能成功。

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

vue双向数据绑定是通过数据劫持，结合，发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，数据也随之发生改变 核心：关于vue双向数据绑定，其核心是Object.definrProperty()方法

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

单页面SPA 就是指一个主页面的应用，浏览器一开始要加载所有必须的html,js,css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后再交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源，多用于PC端。 优点： 用户体验好，快。内容的改变不需要重新加载整个页面，对服务器压力较小，前后端返利，页面效果会比较炫酷（比如切换页面内容时的专场动画） 缺点： 不利于seo,导航不可用，如果一定要导航需要自行实现前进、后退。（由于单页面不能用浏览器的前进后退功能，所以需要建立堆栈管理）；初次加载耗时多；页面复杂度提高很多。 多页面MPA,就是指一个应用中有多个页面，页面跳转时是整页刷新，

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

当v-if和v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v=if将分别重复运行于每个v-for循环中，所以不推荐v-if和v-for同时使用。 如果v-if和v-for一起使用的话，vue中的会自动提示v-if应该放到外层去

13.assets和static的区别

相同点： assets和static两个都是存放静态资源文件，项目中所需要的资源文件图片，字体图标，样式等都可以放在这两个文件下 不同点： assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，也就是会压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态文件就不会走打包压缩格式化的流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，所以在打包时会提高一定的效率。但是static中的资源文件由于没有进行压缩等操作，所以文件体积相对assrts中打包后的文件体积会大点，在服务器中会占据更大的空间。 建议： 将项目中的template需要的样式文件js文件等都可以放置在assets中，走打包这一流程，减少体积。而项目中引入的第三方资源文件如iconfont.css等文件就可以直接放在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

14.vue常用的修饰符

.stop 等同于JS中的event.stopPropagation(),防止事件冒泡； .prevent 等同于js中的event.preventDefault(),防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进一步传播) .capture 与事件冒泡的方向相反，事件捕获由外到内； .self 只会触发自己范围内的事件，不包含子元素 .once 只会触发一次

15.vue的两个核心点

数据驱动： ViewModel，保证数据和视图的一致性 组件系统： 应用类UI可以看作全部是由组建树构成的

16.Vue和jq区别

jq是由选择器$选取dom对象，对其进行赋值、取值、事件绑定等操作，其实和原生的html的区别只在于可以更方便的选取和操作Dom对象，而数据和界面是在一起的，比如需要获取label标签内容，$("lable").val()它还是依赖dom元素的值 Vue则是通过Vue对象将数据跟view对象将数据和view完全分离开了，对拘束进行操作不再需要引用对应的dom对象。数据和view是分离的，他们通过vue对象这个vm实现相互绑定。这就是mvvm

17.vue slot

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

18.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据脚手架规范，只有一个js文件，一个css文件

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

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

20.axios的特点有哪些？

从浏览器中创建XMLHttpRequests; node.js创建http请求； 支持Promise; 拦截请求和响应； 转换请求数据和响应数据； 取消请求； 自动转换成json; axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求题进行发送 params一般适用于get请求，data一般适用于post put请求

21.params和query的区别

query要用path来引入，params要用name来引入，接受参数都是类似的，分别是this.$route.query.name和this.$route.params.name url地址显示：query更加类似于我们ajax中get传参（浏览器地址栏中显示参数），params则类似于post（浏览器地址栏中不显示参数）, 注意点： query刷新不会丢失query里面的数据 params刷新会丢失数据

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

使用vue开发时，在vue初始化之前，div是不归vue管的，所以我们代码还没有解析的情况下容易出现花屏鲜香，看到类似于{{message}}的字样。 解决方法： 在css里面加上[v-lock]{display:none;} 如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"

23.vue更新数组时出发视图更新的方法

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

24.vue修改打包后静态资源路径的修改

cli2版本 将config/index.js里的assetsPublicPath的值改为'./' build:{ assertsPublicPath:'./' } cli3版本 在根目录下新建vue.config.js文件，加上 module.exports={ publicPath:'', }

25.在vue中，什么时候可以操作dom?

必须在mounted时候才能操作

26.什么是mixin?

使用公用的内容，达到指定或者所有的实例都共享这些内容。 1） 混入对象的内容必须是一个对象。 2） 当使用混入时，相同的内容都会合并。 3） 数据对象如果有相同的，则以被混入的对象中data数据为准