前端面试题（七）答案版

面试形式：线下面试：时长20分钟

特殊要求：996加班+30k上限

面试评价：技术题

面试官：前端技术人员

面试官的提问大纲：本公司招聘要求+本人简历

面试流程以及面试题：

第一个环节：自我介绍

第二个环节：技术面

1、vue中的路由守卫

   - 路由守卫是Vue Router提供的一种机制,允许开发者在路由跳转的不同阶段执行自定义的逻辑。

   - 主要分为全局守卫、单个路由独享守卫和组件内守卫三种类型。

   - 通过使用beforeEach、beforeResolve和afterEach等钩子函数,可以在路由跳转前、跳转解析后和跳转完成后执行相应的逻辑,如权限验证、数据预取等。

   - 路由守卫对于实现SPA应用的路由逻辑控制非常重要。

 

2. Vuex是什么?有什么属性和方法?怎么应用?

   - Vuex是一个专为Vue.js应用程序开发的状态管理模式。

   - Vuex主要有以下几个属性和方法:

     - state:用于存储应用程序的状态数据。

     - mutations:同步更新状态的方法。

     - actions:异步操作,可以提交mutations来更新状态。

     - getters:从state中派生出的计算属性。

   - 在Vue应用中,我们通常将状态管理相关的逻辑集中在Vuex中,使用commit提交mutations来更新状态,使用dispatch触发actions来执行异步操作。这样可以更好地管理应用程序的状态。

 

3. Vue2和Vue3响应式原理有什么不同?

   - Vue2使用Object.defineProperty实现数据响应式,存在一些限制,如不能检测对象属性的添加或删除。

   - Vue3使用Proxy实现数据响应式,可以检测任何变化,更加强大和灵活。

   - Vue3的响应式系统还引入了一些新的概念,如ref和reactive,用于处理基本类型和引用类型的响应式数据。

   - 总的来说,Vue3的响应式原理更加完备和高效,能够更好地支持现代前端应用的需求。

 

4. CSS移动端适配?

   - 常见的移动端适配方案有:

     - 使用viewport设置

     - 使用媒体查询 @media

     - 使用rem单位

   - 其中rem单位是最常用的方案,可以根据屏幕大小动态调整字体大小,从而实现整体布局的自适应。

   - 配合工具如PostCSS、amfe-flexible等,可以更方便地实现rem适配。

 

5. 蓝湖设计稿移动端适配方法?

   - 蓝湖设计稿通常采用750px宽度的设计尺寸。

   - 可以使用PostCSS的px2rem插件,根据设计稿的宽度自动转换成rem单位。

   - 同时配合amfe-flexible库,可以自动根据设备宽度计算根元素font-size,从而实现整体布局的自适应。

   - 这种结合PostCSS和amfe-flexible的方式是目前移动端适配的主流解决方案。

 

6. PostCSS和amfe-flexible怎么适配?

   - PostCSS是一个CSS转换和构建工具,可以通过插件扩展其功能。

   - px2rem插件可以将CSS中的px单位自动转换为rem单位。

   - amfe-flexible是一个动态计算根元素font-size的库,可以根据设备宽度自动调整,实现自适应布局。

   - 结合这两个工具,可以很方便地实现基于rem的移动端适配方案。通过PostCSS对CSS进行px到rem的转换,再通过amfe-flexible动态计算根元素font-size,可以达到全面的移动端适配。