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

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 低。