Vuejs部分
1.vue优点？
答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。
2.组件之间，父子组件之间的通信方案？
答：父组件向子组件传值通过props，子组件向父组件传递事件用$emit方法触发，兄弟组件之间通过事件总线（bus）$emit/$on，另外父子组件直降传值还可以使用，$children , $parent , $refs
3.计算属性和watch的区别？
答：都是存储数据的，计算属性有缓存，频繁刷新的场景下使用计算属性比较好，例如购物车结算中，watch监听一个数据的变换对其他数据的影响， 例如项目中监听路由的变化，跳转页面的实现。
4. v-for key值
不写key值会报warning, 和react的array渲染类似. 根据diff算法, 修改数组后, 写key值会复用, 不写会重新生成, 造成性能浪费或某些不必要的错误。
5.vue3.0的更新和defineProperty优化
。放弃 Object.defineProperty ，使用更快的原生 Proxy (访问对象拦截器, 也称代理器)
。提速, 降低内存使用, Tree-shaking更友好
。支持IE11等
。使用Typescript
6.v-show和v-if指令的共同点和不同点？
答: 共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。
7.如何让CSS只在当前组件中起作用？
答：在组件中的style前面加上scoped
8. vue-loader是什么？使用它的用途有哪些？
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
9. vue常用修饰符及作用
。事件修饰符
{.stop 阻止事件冒泡
.prevent 阻止事件默认行为
.self 事件绑定的元素本身触发时才触发回调
.once 事件只能触发一次，第二次就不会触发了
.native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件 具体使用如下：
。表单修饰符
{.lazy 在输入框输入完内容，光标离开时才更新视图
.trim 过滤首尾空格
.number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number
用法如下：
10.vue常见指令
v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-model v-on指令 v-text指令
11.axios及安装?
答：请求后台资源的模块。npm install axios --save装好，
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中。
12.v-modal的使用。
答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
v-bind绑定一个value属性；
v-on指令给当前元素绑定input事件。
13.请说出vue.cli项目中src目录每个文件夹和文件的用法？
答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置; app.vue是一个应用主组件；main.js是入口文件。
14.v-on可以监听多个方法吗？
答：可以，栗子：。
15.$nextTick的使用
答：当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
16.vue组件中data为什么必须是一个函数？
答：因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。
17.单页面应用和多页面应用区别及优缺点
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
18.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应该放到外层去。
19.assets和static的区别
答：相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。
20.vue和jQuery的区别
答：jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
21. 引进组件的步骤
答: 在template中引入组件；
在script的第一行用import引入路径；
用component中写上组件名称。
22.delete和Vue.delete删除数组的区别
答：delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
23.SPA首屏加载慢如何解决
答：安装动态懒加载所需插件；使用CDN资源
24. vue slot
答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。
25.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？
答：根据vue-cli脚手架规范，一个js文件，一个CSS文件。
26.axios的特点有哪些
答：从浏览器中创建XMLHttpRequests；
node.js创建http请求；
支持Promise API；
拦截请求和响应；
转换请求数据和响应数据；
取消请求；
自动换成json。
axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求，data一般适用于post put 请求。
27.请说下封装 vue 组件的过程？
答：1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。(os：思考1小时，码码10分钟，程序猿的准则。)
2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。
3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。
4. 封装完毕了，直接调用即可
28.params和query的区别
答：用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意点：query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。
29.vue初始化页面闪动问题
答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
30.vue更新数组时触发视图更新的方法
答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()
31.vue常用的UI组件库
答：Mint UI，element，VUX
32.vue修改打包后静态资源路径的修改
答：cli2版本：将 config/index.js 里的 assetsPublicPath 的值改为 './' 。
build: {
...
assetsPublicPath: './',
...
}
cli3版本：在根目录下新建vue.config.js 文件，然后加上以下内容：（如果已经有此文件就直接修改）
module.exports = {
publicPath: '', // 相对于 HTML 页面（目录相同） }
vue生命周期面试题
1、vue生命周期钩子及理解
beforeCreate：在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法。
create：data和methods初始化完毕，此时可以使用methods中的方法和data中的数据
beforeMount：template模板已经编译好，但还未挂载到页面，此时页面还是上一个状态。
mounted：此时Vue实例初始化完成了，DOM元素都上树了，可以直接操作dom或者使用第三方dom库。
beforeUpdate：此时data已更新，但是页面视图未同步
updated：data数据和页面视图同步更新完毕
beforeDestroy：Vue实例进入销毁阶段，但所有的data和methods，指令，过滤器等都处于可用状态。
destroyed：此时组件已经被销毁，data,methods等都不可用，此时vue实例已经解除了事件监听已经dom的绑定。但是dom结构依然存在。
2、created和mounted区别：
created实例创建完毕，date和methods都可以用，但是视图尚未渲染。此时可以发送ajax请求获取数据了
mounted：页面初始化完毕，所有dom节点均已上树，此时可以操作dom了。例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
相同点：vue获取数据在created和mounted阶段都可以
3、第一次页面加载会触发哪几个钩子？
答：beforeCreate， created， beforeMount， mounted
4.keep-alive是什么？有哪些钩子？
keep-alive是vue的组件，用来动态缓存组件的。有actived和deactived两个钩子函数。被keep-alive包裹的组件将不会被重新渲染，即第二次进入时不会触发beforCreate和created即beforeMount和mounted钩子。被缓存的组件不被销毁而是缓存了。keep-alive有两个属性include和exclude。
Vue-router面试题
1. vue-router是什么？有哪些组件？
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
router-link、router-view
3. active-class 是哪个组件的属性？
active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式
4. 怎么定义vue-router的动态路由？怎么获取传过来的值？
动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：
{
path: '/details/:id'
name: 'Details'
components: Details
}
当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数
console.log(this.$route.params.id)
5. vue-router有哪几种导航钩子？
全局前置守卫
constrouter =newVueRouter({})router.beforeEach((to,from, next) = {// to do somethings})
to:Route,代表要进入的目标，它是一个路由对象。
from:Route,代表当前正要离开的路由，也是一个路由对象
next:Function,必须需要调用的方法，具体的执行效果则依赖next方法调用的参数
next():进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是comfirmed（确认的）
next(false):终端当前的导航。如浏览器URL改变，那么URL会充值到from路由对应的地址。
next('/')||next({path:'/'}):跳转到一个不同的地址。当前导航终端，执行新的导航。
next 方法必须调用，否则钩子函数无法resolved
全局后置钩子
router.afterEach((to,from) = {// to do somethings})
后置钩子并没有next函数，也不会改变导航本身。
路由独享钩子
beforEnterconstrouter =newVueRouter({routes: [ {path:'/home',component: Home，beforeEnter: (to,from, next) = {// to do somethings// 参数与全局守卫参数一样} } ]})
组件内导航钩子
constHome = {template:`
`,beforeRouteEnter(to,from, next){// 在渲染该组件的对应路由被 confirm 前调用// 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建},beforeRouteUpdate(to,from, next){// 在当前路由改变，但是该组件被复用时调用// 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候// 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。// 可以访问组件实例 'this'},beforeRouteLeave(to,from, next){// 导航离开该组件的对应路由时调用// 可以访问组件实例 'this'}}beforeRouterEnter不能访问this，因为守卫在导航确认前被调用，因此新组建还没有被创建,可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并把实例作为回调的方法参数。
constHome = {template:`
`,beforeRouteEnter(to,from, next){ next( vm = {// 通过 'vm' 访问组件实例}) }}6. $route和 $router的区别是什么？
router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。
7. vue-router响应路由参数的变化
用watch 检测
// 监听当前路由发生变化的时候执行watch: { $route(to,from){console.log(to.path)// 对路由变化做出响应}}
组件内导航钩子函数
beforeRouteUpdate(to,from, next){// to do somethings}8. vue-router 传参
Params
只能使用name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空，
// 传递参数this.$router.push({name: Home，params: {number:1,code:'999'} })// 接收参数constp =this.$route.params
Query:
参数会显示在路径上，刷新不会被清空
name 可以使用path路径
// 传递参数this.$router.push({name: Home，query: {number:1,code:'999'}})// 接收参数constq =this.$route.query
8.vue-router的两种模式
hash模式
原理是onhashchage事件，可以在window对象上监听这个事件
window.onhashchange =function(event){console.log(event.oldURL, event.newURL)lethash = location.hash.slice(1)}
history模式
利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，
9. vue-router实现路由懒加载（动态加载路由）
答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
constrouter =newVueRouter({routes: [ {path:'/home',name:'Home'，component:() =import('../views/home')} ]})
vuex常见面试题
1.vuex是什么？怎么使用？哪种功能场景使用它？
答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，….. export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车
2.vuex有哪几种属性？
答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？
答：如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。
以上面试题仅供个人学习，如有错误请指正。谢谢。