一.Vue
一.有使用过vue吗？说说你对vue的理解
1、数据驱动
2、模块化
3、轻量级
4、SPA
二.说说vue的优缺点
优点：
1、数据驱动视图，对真实dom进行抽象出virtual dom（本质就是一个js对象），并配合diff算法、响应式和观察者、异步队列等手段以最小代价更新dom，渲染页面
2、组件化，组件用单文件的形式进行代码的组织编写，使得我们可以在一个文件里编写html\css（scoped属性配置css隔离）\js 并且配合vue-loader之后，支持更强大的预处理器等功能
3、强大且丰富的API提供一系列的api能满足业务开发中各类需求
4、由于采用虚拟dom，让vue ssr先天就足
5、生命周期钩子函数，选项式的代码组织方式，写熟了还是蛮顺畅的，但仍然有优化空间（vue3 composition-api）
6、生态好，社区活跃
缺点：
1、由于底层基于Object.defineProperty实现响应式，而这个api本身不支持IE8及以下浏览器
2、csr的先天不足，首屏性能问题（白屏）
3、由于百度等搜索引擎爬虫无法爬取js中的内容，故spa先天就对seo优化心有余力不足（谷歌的puppeteer就挺牛逼的，实现预渲染底层也是用到了这个工具）
三.vue和react有什么不同？使用场景分别是什么？
首先你得说说相同点，两个都是MVVM框架，数据驱动视图，无争议。如果说不同，那可能分为以下这么几点：
1、vue是完整一套由官方维护的框架，核心库主要有由尤雨溪大神独自维护，而react是不要脸的书维护（很多库由社区维护），曾经一段时间很多人质疑vue的后续维护性，似乎这并不是问题。
2、vue上手简单，进阶式框架，白话说你可以学一点，就可以在你项目中去用一点，你不一定需要一次性学习整个vue才能去使用它，而react，恐怕如果你这样会面对项目束手无策。
3、语法上vue并不限制你必须es6+完全js形式编写页面，可以视图和js逻辑尽可能分离，减少很多人看不惯react-jsx的恶心嵌套，毕竟都是作为前端开发者，还是更习惯于html干净。
4、很多人说react适合大型项目，适合什么什么，vue轻量级，适合移动端中小型项目，其实我想说，说这话的人是心里根本没点逼数，vue完全可以应对复杂的大型应用，甚至于说如果你react学的不是很好，写出来的东西或根本不如vue写的，毕竟vue跟着官方文档撸就行，自有人帮你规范，而react比较懒散自由，可以自由发挥
5、vue在国内人气明显胜过react，这很大程度上得益于它的很多语法包括编程思维更符合国人思想
四.什么是双向绑定？原理是什么？
双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值，获取触发get方法取值，并通过数据劫持发布信息.
五.什么是虚拟DOM？
虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。
这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。
六.vue组件之间的通信都有哪些？
1.父传子 props
2.子传父 $emit
3.Vuex 状态管理器
4.bus
七.请描述下vue的生命周期是什么？
生命周期就是vue从开始创建到销毁的过程，分为四大步（创建，挂载，更新，销毁），每一步又分为两小步，如beforeCreate，created。beforeCreate前，也就是new Vue的时候会初始化事件和生命周期；beforeCreate和created之间会挂载Data，绑定事件；接下来会根据el挂载页面元素，如果没有设置el则生命周期结束，直到手动挂载；el挂载结束后，根据templete/outerHTML(el)渲染页面；在beforeMount前虚拟DOM已经创建完成；之后在mounted前，将vm.$el替换掉页面元素el;mounted将虚拟dom挂载到真实页面（此时页面已经全部渲染完成）；之后发生数据变化时触发beforeUpdate和updated进行一些操作；最后主动调用销毁函数或者组件自动销毁时beforeDestroy，手动撤销监听事件，计时器等；destroyed时仅存在Dom节点，其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期；
八.说下你对指令的理解？
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
九.v-show和v-if有什么区别？使用场景分别是什么？
区别：v-if 不渲染 DOM，v-show 会渲染 DOM
v-show 使用场景：
预渲染需求
需要频繁切换显示状态
十.怎么使css样式只在当前组件中生效？
十一.说说你对keep-alive的理解是什么？
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素
十二.怎么在vue中使用插件？
npm 安装 然后再main.js 引入 最后 vue.use(插件名)
十三.v-for循环中key有什么作用？
四个字: 性能优化,
简述: 让vue在更新数据的时候可以更有针对性的
diff时更快更准确找到变化的位置。
十四.watch和计算属性有什么区别？
watch: 看你怎么做, 然后做出某些相应的调整
computed: 根据内部调用变更返回结果, 总的来说, 是根据一些变更最后调整自身
十五.为什么data属性必须声明为返回一个初始数据对应的函数呢？
对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。
十六.$nextTick有什么作用？
在队列中插入一个回调, 当前面的dom操作, 其它回调执行完成之后, 执行当前callback
这样做的好处是, 我前面用到的一些dom更新等已经处理完毕, 而不是获取到更新前的数据
十七.v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？
v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素
十八.说说你对选项el,template,render的理解
el: 把当前实例挂载在元素上
template: 实例模版, 可以是.vue中的template, 也可以是template选项, 最终会编译成render函数
render: 不需要通过编译的可执行函数
template和render, 开发时各有优缺点, 不过在线上尽量不要有template
十九.动态给vue的data添加一个新的属性时会发生什么？怎样解决？
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上。
二十.删除数组用delete和Vue.delete有什么区别？
delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变
Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制）
二.Vue-router
一.vue-router是用来做什么的？它有哪些组件？
vue-router路由，通俗来讲主要是来实现页面的跳转，通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。
主要组件：router-view、router-link
二.vue-router钩子函数有哪些？都有哪些参数？
全局的：beforeEach、beforeResolve、afterEach
路由的：beforeEnter
组件的：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
参数：to、from、next；正对不同的钩子函数参数有所差异。
三.route和router有什么区别？
route：代表当前路由信息对象，可以获取到当前路由的信息参数
router：代表路由实例的对象，包含了路由的跳转方法，钩子函数等
四.说说vue-router完整的导航解析流程是什么？
1.导航被触发；2.在失活的组件里调用beforeRouteLeave守卫；3.调用全局beforeEach守卫；4.在复用组件里调用beforeRouteUpdate守卫；5.调用路由配置里的beforeEnter守卫；6.解析异步路由组件；7.在被激活的组件里调用beforeRouteEnter守卫；8.调用全局beforeResolve守卫；9.导航被确认；10…调用全局的afterEach钩子；11.DOM更新；12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。
五.怎么实现路由懒加载呢？
const component = () =>import(’./…’)
六.怎样动态加载路由？
router.addRoutes
七.如何获取路由传过来的参数？
如果使用query方式传入的参数使用this.
router.params接收
八.在什么场景下会用到嵌套路由？
管理系统，当头部和左侧作为全局使用的时候，他的每个选项都是仅仅作为路由的跳转，然后在routes[{path:’/’},children[{paht:‘chilld’}]]来配置子路由
九.vue-router如何响应路由参数的变化？
问题：为什么要响应参数变化？
切换路由，路由参数发生了变化，但是页面数据并未及时更新，需要强制刷新后才会变化。
不同路由渲染相同的组件时（组件复用比销毁重新创建效率要高），在切换路由后，当前组件下的生命周期函数不会再被调用。
解决方案：
使用 watch 监听
watch: {
$route(to, from){
if(to != from) {
console.log("监听到路由变化，做出相应的处理");
}
}
}
向 router-view 组件中添加 key
<router-view :key="$route.fullPath"></router-view>
$route.fullPath 是完成后解析的URL，包含其查询参数信息和hash完整路径
十.vue-router有哪几种导航钩子（ 导航守卫 ）？
三种导航钩子：
1.全局导航钩子：router.beforeEach(to,from,next) 作用：跳转前进行判断拦截
2.组件内的钩子
3.单独路由独享组件
三.Vue-cli
一.vue-cli3你有使用过吗？它和2.x版本有什么区别
vue-cli3.0 将webpack的配置集成了进来，使用vue-cli3.0创建的项目在配置webpack的时候可以直接在vue.config.js里面配置。既可以用chainwebpack的链式语法也可以直接在configureWebpack字段内直接写webpack原生的配置。
二.说下你了解的vue-cli原理？你可以自己实现个类vue-cli吗？
原理就是通过node环境发起git请求，把预先设置好的模板下载下来。
三.你知道什么是脚手架吗
vue项目一般是使用webpack进行打包构建的，然而如果每一个项目都需要我们去配置loader和plugin的话，是很重复的劳动，并且vue项目需要使用到的最基本的webpack loader和webpack plugin是相同的。因此官方推出了vue-cli这个脚手架，使用它就可以快速的生成一份通用的webpack配置，并且帮我们安装好很多必定会用到的npm包。
四.vue-cli怎么解决跨域的问题？
vue-cli 主要在本地通过本地服务器拦截转发请求的模式解决跨域问题。
步骤：
1.config中设置proxy，这步决定哪种命名规则（比如’/abc/'开头的请求）的请求将被拦截（个人以为是通过改造XMLHttpRequest对象）到本地跨域服务器
2.本地服务器转发请求到目标服务器
3.本地服务器设置允许跨域的headers，然后返回结果，从而解决跨域
跨域问题，除了单机修改浏览器配置外，都是服务器端配合进行解决。
五.在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
自动刷新页面并不是vue-cli的功能，而是webpack的hot-module-replacement-plugin插件在做这件事，这个插件是webpack自带的插件，用来做hmr的。如果需要配置hmr只需要在webpack.config.js的devServer字段写 下面的配置即可。
{
contentBase: 服务器可以访问的根目录,
hot:true, //开启热模块替换也就是hmr
hotOnly:true //不刷新页面，只做hmr
}
而由于vue-cli3集成了webpack的配置，所以vue.config.js里面也有这个属性，配置写法是一样的。
四.Vuex
一.有用过vuex吗？它主要解决的是什么问题？推荐在哪些场景用？
解决的问题：
多个视图依赖同一个状态
来自不同视图的行为需要变更同一状态
适用于中大型的单页面应用
二.使用vuex的优势是什么？
便于进行全局或者局部的状态管理. 便于组件/插件/混合之间的联系
三.vuex的store有几个属性值？分别讲讲它们的作用是什么？
state:存贮公共数据的地方
Getters：获取公共数据的地方
mutations：放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行
action：放的是异步的操作 通过dispatch的方法让action里面的方法执行
context是store的一个副本
Vuex就是提供一个仓库，store仓库里面放了很多对象其中state即使数据源存放地
四.vuex的state、getter、mutation、action、module特性分别是什么？
state, 状态初始化, 并实施观察
getter, 获取数据用于view或data中使用
mutation: 内部处理state变化
action: 处理外部交互
module: 模块化以上四个
五.页面刷新后vuex的state数据丢失怎么解决？
首先要搞清楚为什么state数据会丢失。
通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。
对症下药，就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。