前端高频面试题：Vue 开发场景与性能优化

1、一般 Vue 开发用什么库来辅助

• VantUI
• ElementUI
• js-cookie
• socket.io
• axios
• ECharts

2、页面刚开始出现一片空白的原因

1. 网络设置的问题，有可能是 IP、端口等出现问题了。
2. 网速比较慢导致（加载速度慢）。
3. 浏览器本身出现问题了。
4. 网络防火墙的问题，设置安全级别过高。
5. 病毒导致。
6. 打包路径不对。

3、Vue 的项目如何做首屏的优化

• v-if 和 v-show 区分使用场景。
• computed 和 watch 区分使用场景。
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if。
• 长列表性能优化。
• 事件的销毁（removeEventListener）。
• 图片资源懒加载。
• 精灵图。
• 路由懒加载。
• 第三方插件的按需引入。
• 优化无限列表性能。
• 服务端渲染 SSR。
• 代码压缩。

4、在浏览商品时，点击商品详情，然后返回，要求进度条还在之前的位置，怎么做

1. App.vue 页面中使用 keep-alive 缓存组件。
2. 在离开商品详情页记录进度条的高度，返回商品详情的重新给进度条进行赋值。

5、localStorage 能实现 token 的存储需求，为啥还要存储在 Vuex 中呢

1. localStorage 里面存储的类型只能是字符串，如果存储的内容不是字符串，还需要转换，有额外的性能消耗。
2. localStorage 里面的数据变化不能进行监控，如果有需求是根据 token 的变化进行操作的，那 localStorage 就实现不了。
3. localStorage 是磁盘操作，Vuex 是内存操作，其实性能比 Vuex 去数据慢的多。

6、项目中后台接口没有写好你怎么做，有几种方式

可以模拟假数据。方式：组件内写死、mock.js、json-serve。

7、cookie 为什么不能存储 token 或存储在 cookie 有什么问题

1. cookie 每次请求都会携带，比较消耗性能。
2. 防止 CSRF 攻击，CSRF 主要就是攻击浏览器的 cookie，这样如果存储 token 就容易被劫持到。

8、如果任务分配不合理你会怎么办

看能不能在规定的时间内完成，如果能完成，完成后找老大说明这个问题。如果完成不了，及时找老大协商，不能耽误项目的开发进程。

9、axios 挂到原型上有什么作用

各个组件内，可以直接拿到用 axios，就不需要各个组件进行引入了。

10、怎么知道自己项目所处的环境是什么

1. 看 ip 和端口地址。
2. 启动项目方式。

11、cli 用的是那个版本和 src 里面都有哪些文件

• 版本：Vue 2.6.10, Vuex 3.1.0, Vue-cli 4.4.4, webpack 4.4.0
• src:
  • api: 接口请求
  • assets: 静态图片
  • components: 公共组件
  • icons: 字体图标
  • router: 路由配置
  • store: Vuex
  • utils: axios 封装
  • views: 页面级路由

12、你封装过组件吗，有什么，说一下怎么封装的

我用 Vue 开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个 views 目录和一个 components 目录，views 目录中放页面级的组件，components 中放公共组件（如 head（公共头组件），foot（公共底部组件）等）。 例如：

1. 评论组件里面有很多小的功能点，为了后期维护，就把他提取成了一个单独的组件，然后再文章组件中引入注册，使用就行了。
2. 头部组件抽离：
   1. 抽离一个 HeaderTop。
   2. 组件内容接受标题或标签。

   <template>
     <slot name="left"></slot>
     <div>{{title}}</div>
     <slot name="right"></slot>
   </template>
   <script>
   export default {
     props: ['title']
   }
   </script>
   

   3. 其他组件引入：components: { HeaderTop }
   4. 组件内使用：

   <HeaderTop title="标题">
     <div slot='left'>左边内容</div>
     <div slot='right'>右边内容</div>
   </HeaderTop>
   

13、怎么做项目的权限控制

项目背景：现有一个后台管理系统，共存在两种类型的人员：1. 超级管理员（称作 admin）；2. 普通用户（称作 editor）。每种类型的人看到的操作栏并不一样，可以进行的操作也不尽相同，于是就需要程序处理一下各个权限问题。 具体实现思路：

1. 在路由 router.js 里面声明权限为 admin 的路由，通过 meta 标签来标示该页面能访问的权限有哪些。如 meta: { role: ['admin', 'super_editor'] } 表示该页面只有 admin 和超级编辑才能有资格进入。
2. 当用户登录后，获取 user roles，将 roles 和路由表每个页面的需要的权限作比较，调用 router.addRoutes(store.getters.addRouters) 添加用户可访问的路由，生成最终用户可访问的路由表。路由表存在 Vuex 里面。
3. 使用 Vuex 管理路由表，根据 Vuex 中可访问的路由渲染侧边栏组件（菜单）。

14、axios 是怎么封装的

1. 在 Utils 中的 request.js 里面，引入 axios，配置基础路径、请求拦截器和响应拦截器，并返回 axios。
2. 在 api 文件里面，引入 request.js，根据各组件需要，配置各个组件的接口请求文件。

15、PC 端的兼容问题你遇到那些

1. img 下的留白：解决方案：给 img 设定 display:block。
2. 如果图片加 a 标签在 IE9-中会有边框：解决方案：给 img 设定 border:none。
3. rgba 不支持 IE8：解决方案：可以用 opacity。
4. 标签最低高度设置 min-height 不兼容 ie6/7：解决方案：如果我们要设置一个标签的最小高度 200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}。
5. 图片加 a 标签在 IE9 中出现边框：解决方案：img{border: none;}。

16、移动端的兼容问题你遇到那些

1. 在 iOS 和 Android 中，audio 元素和 video 元素在无法自动播放：应对方案：触屏即播。

   $('html').one('touchstart', function(){ audio.play() })
   

2. iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格：可以通过正则去掉：this.value = this.value.replace(/\u2006/g, '');
3. IOS 移动端 click 事件 300ms 的延迟响应：引入第三方插件 fastclick 可以解决在手机上点击事件的 300ms 延迟。
4. h5 底部输入框被键盘遮挡问题：h5 页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。可采用如下方式解决：
   1. 定义一个 class: .focusState {position: absolute;}
   2. 利用监听键盘的收起展开事件来添加移除定义的 focusState 样式。

   created(){
     var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
     window.onresize = function() {
       var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
       if (clientHeight - nowClientHeight > 60 ) {
         // 因为 ios 有自带的底部高度
         // 键盘弹出的事件处理
         document.getElementById("apply").classList.add("focusState");
       } else {
         // 键盘收起的事件处理
         document.getElementById("apply").classList.remove("focusState");
       }
     };
   },
   

17、移动端如何做真机测试

1. 公司有测试服务器，代码放到测试服务器上，进行手机访问测试。
2. 自己电脑上搭服务器，保证自己手机和电脑处于同一个局域网，然后用手机进行访问测试。

18、H5 和 app 的区别

1. H5 是通过链接进行访问，而 APP 是通过应用程序进行访问。
2. H5 在应用商店里面没有，而 APP 是有的。
3. H5 不需要审核就可以上线，而 APP 是需要审核的。
4. H5 的响应速度没有 APP 快。
5. H5 的开发成本比 APP 低。