参考文章：58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度（Lucky Girl）
文章链接：https://mp.weixin.qq.com/s/YMSAq14dYPjda0LyUyWjBg
1.Vue的优点
答：
轻量级框架，只关注视图层，大小只有几十kb;
简单易学，中文文档，国人开发；
双向数据绑定，在数据操作上非常简单；
组件化，保留了React的优点，实现了HTML的封装和重用；
虚拟DOM，在Vue中不直接操作DOM，而是先用虚拟DOM最后再直接操作DOM。
运行速度更快，同样是操作虚拟DOM，Vue的性能比React要强大
2.vue-loader
处理.vue文件，将template/js/style转换成js模块。js可以写es6，style样式可以写scss或less，template可以加jade
3.axios
npm install axios --save装好后，用import引入，然后.get或.post。返回成功在.then函数中，失败在.catch函数中。
4.computed和watch
computed,当一个属性受多个属性影响时用computed。
watch，当一个属性影响多个属性时用watch
5.v-on可以监听多个事件
<input type="text" v-on="{input:onInput,focus:onFocus,blur:onBlur, }">
6.$nextTick
当修改了data的值后马上获取这个dom元素的值，是获取不到更新后的值，需要使用$nextTick的回调，才能在dom上获取到更新后的值
7.vue中的data为什么是一个函数
写成函数时，每个组件都会返回一份新的data，如果写成对象形式，会让所有组件示例共用一份data
8.Vue中双向数据绑定是如何实现的
通过数据劫持、发布订阅模式实现的，核心方法是Object.defineProperty()。数据和视图同步，数据变化视图也会变化，视图变化数据也会跟着变化。
9.单页面应用和多页面应用
单页面应用SPA，只有一个主页面，浏览器一开始就加载所有必须的html/js/css，所有的页面内容都包含在这个所谓的主页面中。在写的时候会把页面片段分开写，然后在交互的时候由路由程序动态载入，单页面的页面跳转仅刷新局部资源，多应用于PC端。
多页面MPA，页面跳转时整页刷新，有多个页面。
单页面优点：内容的改变不需要重新加载整个页面，对服务器的压力较小，切换页面内容时可以有比较炫的效果。
单页面缺点：不利于SEO；初次加载耗时多；页面复杂度提高很多；单页面不能用浏览器的前进后退功能，如果需要导航要自行实现前进后退。
10.v-if和v-for的优先级
v-if、 v-for一起使用时，v-for的优先级更高，这意味着v-if将重复运行在每个循环的item。所以不推荐同时使用，最好将v-if放到外层。
11.assets和static的区别
都是存放静态资源文件的，图片、字体、图标、样式文件。
assets中的压缩之后再上传，static的不会压缩而是直接上传。
建议：引入的第三方资源文件放在static中直接上传，自己写的样式文件最好在assets压缩再上传
12.vue的两个核心点
数据驱动：viewModel,保证数据和视图的一致性
组件系统：应用类UI可以看做组件树构成的
13.Vue和jQuery的区别
jQuery是使用选择器$选取DOM对象，对其进行赋值、取值、事件绑定等操作，与原生HTML相比的区别只在于更方便的选取和操作DOM对象。数据和界面是在一起的，比如要获取label标签的值"$("label").val()",还是依赖DOM元素的值。
而Vue是通过Vue对象将数据和View完全分离开来，对数据进行操作不再需要引用相应的DOM对象。
14.SPA首屏加载慢如何解决
安装动态懒加载所需插件；使用CDN资源
15.Vue-router跳转和location.href有什么区别
location.href = /url 刷新了页面。
router.push(/url)是静态跳转，不会刷新页面，使用了diff算法，实现了按需加载，减少了DOM的消耗。vue-router实际上是使用history.pushState来实现的。
16.vue slot
父组件想要在子组件内放一些DOM，这些DOM的显示就是slot负责的内容
17.vue-router 里params和query的区别
query要用path引入，params要用name引入。query会显示在浏览器url中而params不会。页面刷新，query不会丢失，params会丢失。
18.vue初始化页面闪动问题
在Vue初始化之前，div是不归vue管的，所以代码未被解析，可能会出现{{msg}}字样，虽然可能会很短暂，但是还是要解决一下。可以在根元素上加上 style="display: none;" :style="{display: block }"
19.什么是Vue的生命周期？有什么作用？
每个Vue实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时会在这个过程中会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己的代码的机会，例如如果要通过某些插件操作DOM节点，如在页面渲染完后弹出广告窗，那最早只能在mounted中进行。
20.每个周期具体适合哪些场景
beforeCreate:在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。
created：data和methods都已经被初始化好了，可以使用data和methods了。
beforeMount:在内存中已经编译好了模板，但是还没有挂载到页面中，此时页面还是旧的
mounted：Vue实例已经初始化完成了，组件脱离了创建阶段，进入到了运行阶段，可以操作页面上的DOM节点了
beforeUpdate: 此时页面中的显示数据还是旧的，data中的数据时更新后的数据，页面还没有和最新的数据保持同步
updated:页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory:Vue实例从运行阶段进入到了销毁阶段，这时所有的data、methods、指令、过滤器...都是处于可用状态，还没有真正被销毁
destroyed:这时所有的data、methods、指令、过滤器...都不可用了，组件已经被销毁了
21.vue-router实现路由懒加载（动态加载路由）
三种方式：
第一种：vue异步组件技术，vue-router配置路由，可以实现按需加载。这种情况下一个组件生成一个js文件。
第二种：路由懒加载，使用import
第三种：webpack提供的require.ensure(),多个路由指定相同的chunkName会合并打包成一个js文件
22.vuex有哪几种属性？
state:基本数据，数据源存放地
getters:从基本数据派生出来的数据
mutations:提交更改数据的方法，同步
actions：像一个装饰器，包裹mutations,使之可以异步
modules:模块化vuex
23.vue中ajax请求应该写在组件的methods里还是vuex的actions?
如果请求来的数据不需要被公用，就不用放在vuex的state里，放在组件里就可以了。如果其他地方要复用，应该放在action里
24.渐进式框架的理解
每个框架都有自己的主张，渐进式意味着主张最少，可以根据不同的需求选择不同的层级。比如Vue，你可以在原有的大系统上，只用它来实现一两个组件，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配自己设计的整个下层用。它只做自己该做的事，不会强迫你必须怎么用。
网友评论