2021-09-14 整理vue面试题（一）看了就会有收获

这篇文章简单对vue的一些面试题进行整理，后续文章会增添其他面试题

---

这部分的面试题主要问以下几个层面
vue组件通信，数据存储
router 路由权限
基础知识
结合项目 优化 实战技巧

1.说说你对SPA单页面的理解，它的优缺点是什么？

首先我们在此之前要知道mpa 可以做更好的比较。

关于转场动画
就是当你使用手机的时候某个应用，里面的内容你可以用手指实现翻转，放大，等效果。
关于搜索引擎：
MPA: 可以不完全基于客户端渲染，可以客户端渲染一部分，浏览器渲染一部分，一部分做SEO一部分不做SEO
SPA: 全部基于js客户端渲染的，除非ssr单独方案来做，但是比较麻烦
关于开发难度：
目前SPA也有了自己完整的体制 比如vue全家桶 开发难度也不是很高了
目前单页面应用已经非常广泛了 尤其是在PC端的管理系统类，一般移动端上SPA单页面应用也较为常见了。pc端的传统电商网站还是以多页面为主

如何回答：单页面应用发展：从原来的iframe（有问题)–>AMD,CMD—>c.js require.js webpack 等合并到一起–>到现在的基于vue router路由机制的单页面应用，然后再说说优缺点。

2. vue-router 有哪几种导航守卫

全局守卫

• router.beforeEach 全局前置守卫 进入路由之前
• router.beforeResolve 全局解析守卫(2.5.0+）在
• beforeRouteEnter调用之后调用-
• router.afterEach全局后置钩子进入路由之后

路由独享守卫:

• beforeEnter

路由组件内守卫:

• beforeRouteEnter进入路由前，在路由独享守卫后调用，不能获取组件实例this，组件实例还没被创建
• beforeRouteUpdate (2.2）路由复用同一个组件时，在当前路由改变，但是该组件被复用时调用
• beforeRouteLeave离开当前路由时，导航离开该组件的对应路由时调用

3. 真实项目中的权限校验

1. 登录态校验

• 路由的 beforeEach（登录态存储在vuex中）如果登陆了，就想去跳转哪页就跳转哪页，没登陆就 next(’/login’) 跳到登录页去登录
• 向服务器发送请求（知道登没登陆，就得发请求）
  登录的时候，登录成功后会在vuex中存储已经登录 存储一个标识 isLogin
  为了防止页面刷新过程中vuex存储信息消失，也就是标识消失。让服务器记录着登录态
  如何记录？
  1. 会话方式：cookie(不太安全)， session(指的是服务器的那个 不是sessionStorage）
  2. token方式：服务器会通过JWT生成token，登录成功之后，服务器将token返回，客户端把token存储起来
  token的存储方式是本地存（localStorage）
  2. 接口权限校验 一般用token方式
  3. 菜单/按钮/功能的权限【显示隐藏】
• 登陆成功从服务器获取用户的权限字段，存储在本地（本地存储[不安全，可以加密存储]/ vuex[推荐，不存在安全问题])
• 自定义指令控制渲染不渲染 （不建议组件内 v-if）
• 有的公司，客户端渲染的菜单，都是服务器返回的HTML(服务器压力较大，但是绝对安全)
  不管是否有权限都能看，只不过点击会提示或者不让跳转路由，再或者跳转到指定的路由
• beforeEach
• 组件内自己判断
  真正的数据接口权限（比如在学校管理系统中老师学生看到的界面访问权限应该是不同的）
• 服务器处理的（保证绝对的安全性）

谈谈你对 keep-alive的了解

keep-alive 是Vue内置的一个组件，当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

其有以下特性:一般结合路由和动态组件一起使用，用于缓存组件;

• 提供include和exclude属性，两者都支持字符串或正则表达式,

• include 表示只有名称匹配的组件会被缓存，

• exclude表示任何名称匹配的组件都不会被缓存，

  其中exclude的优先级比 include高

对应两个钩子函数activated 和deactivated，

• 当组件被激活时，触发钩子函数activated，
• 当组件被移除时，触发钩子函数deactivated.

5. v-show与v-if有什么区别(***)

v-if和v-show都可以动态控制DOM元素的显示隐藏。
v-if是动态地向DOM树中添加或删除DOM元素节点，是完整的销毁和重新创建DOM元素节点
v-show是通过向DOM元素设置样式display属性值控制显示隐藏
v-show是css切换
使用频繁切换时用v-show，运行时较少改变时用v-if

v-if和v-show特性总结

1. 编译方面：v-if是惰性的，若最初指令值为false，它是不会编译的，直至指令值为true才开始局部编译存入缓存；v-show不管最初指令值为真假都会马上编译存入缓存，保留DOM。
2. 消耗方面：v-if切换性能消耗较大；v-show最初渲染消耗较大。
3. 适用场景：v-if适用切换条件、项目需求稳定；v-show适用频繁需要切换。
4. 语法方面：v-if可与v-else、v-else-if配合使用进行判断执行，但一定需要相邻，不可中断；v-show无特殊语法。

先总结到这里吧 其他的慢慢更新！