当前位置: 首页 > news >正文

前端面试题(七)答案版

面试形式:线下面试:时长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,可以达到全面的移动端适配。

相关文章:

前端面试题(七)答案版

面试形式:线下面试:时长20分钟 特殊要求:996加班30k上限 面试评价:技术题 面试官:前端技术人员 面试官的提问大纲:本公司招聘要求本人简历 面试流程以及面试题: 第一个环节:自…...

为微信小程序项目添加eslint

背景 在使用vscode开发微信小程序的过程中,修改js的时候发现没有报错提示,让我很不习惯,所以想为微信小程序项目添加eslint配置 编码实战 为微信小程序配置ESLint可以遵循以下步骤: 安装ESLint及其相关插件 首先,…...

Win10用户必看:最好用最稳定的版本在此,值得一试!

在Win10电脑操作中,用户可以根据的需要,下载安装不同的系统版本。现在,许多用户好奇Win10哪个版本最好用最稳定?接下来小编给大家推荐最好用最稳定的Win10版本,这些系统版本经过优化升级,相信会给大家带来最…...

处理文本内容的命令和正则表达式

处理文本内容的命令 正则表达式匹配的是文本内容,linux的文本三剑客 都是针对文本内容 文本三剑客: grep 过滤文本内容 sed 针对文本内容进行增删改查 awk 按行取列 文本三剑客都是按行进行匹配。 grep grep的作用就是使用正则表达式来匹配文本内…...

AI与音乐:当技术与艺术发生冲突

AI在创造还是毁掉音乐? 在科技日新月异的今天,人工智能(AI)已经渗透到了我们生活的方方面面,音乐领域也不例外。然而,尽管AI为音乐创作带来了前所未有的便利,我却深感其正在毁掉音乐的本质。 …...

java泛型学习

没有java泛型会存在的问题 假设我们有一个方法,希望通过传递不同类型的参数,输出不同类型的对象值。正常情况下我们可能会写不同的方法来实现,但是这样会导致类不断增加,并且类方法很相似,不能够复用。进而导致类爆炸…...

vscode c++ 开发环境配置

今天各位同学已经安装了mingw环境,但部分同学vscode开发环境又问题,究其原因,还是vscode 编译环境配置错误,有问题的同学 按如下步骤处理: 1、卸载相关插件。按下列步骤重新安装插件。 2、继续在搜索框中搜索并安装 C…...

PHP安装配置

文章目录 1.下载PHP2.配置环境变量3.Apache安装配置 1.下载PHP PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法…...

std::vector<>的{}用法与stl中的共享指针

讨论 std::vector&#xff1c;&#xff1e;的{}用法比较方便&#xff0c;在stl中的共享指针中是否适用&#xff1f; 代码 #include <iostream> #include <memory> #include <vector> using namespace std;int main() {vector<int> vt1({1,3,5});vec…...

《FFmpeg开发实战:从零基础到短视频上线》资源下载和内容勘误

资源下载 下面是《FFmpeg开发实战&#xff1a;从零基础到短视频上线》一书用到的工具和代码资源&#xff1a; 1、本书使用的FFmpeg版本为FFmpeg 5.1.2&#xff0c;也可在FFmpeg的github主页上下载最新的FFmpeg源码。 2、本书第12章使用的Android Studio版本为Android Studio D…...

OpenCV目标识别

一 图像轮廓 具有相同颜色或强度的连续点的曲线。 图像轮廓的作用 可以用于图像分析 物体的识别与检测 注意 为了检测的准确性&#xff0c;需要先对图像进行二值化或Canny操作。 画轮廓时会修改输入的图像。 轮廓查找的API findContours(img,mode,ApproximationMode,...)…...

密码学及其应用——为什么选择接近的质数因子对RSA加密算法不安全?

RSA加密算法是一种广泛使用的非对称加密算法&#xff0c;它的安全性依赖于大整数分解的难度。具体来说&#xff0c;RSA算法生成的公钥包含一个大整数N&#xff0c;这是两个大质数p和q的乘积。然而&#xff0c;如果这两个质数p和q太接近&#xff0c;则可以相对容易地对N进行因式…...

爱心商城管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;企业管理&#xff0c;用户管理&#xff0c;论坛管理&#xff0c;商品管理&#xff0c;公告管理&#xff0c;用户捐赠 企业账户功能包括&#xff1a;系统首页&#xff0c;个人中…...

【python】linux下安装chromedriver

首先&#xff0c;安装selenium模块 pip3 install selenium查看系统内chrome版本&#xff1a; google-chrome --version 根据谷歌浏览器版本下载对应的浏览器驱动版本&#xff1a; wget https://storage.googleapis.com/chrome-for-testing-public/126.0.6478.114/linux64/ch…...

Day18—使用Scrapy框架快速开发爬虫

Scrapy是一个强大的Python框架,用于快速开发爬虫程序。它提供了一整套工具来处理网页爬取和数据提取,非常适合于数据挖掘和信息抓取。本文将详细介绍如何使用Scrapy框架,包括创建项目、编写爬虫规则、设置中间件和管道等。 1. Scrapy框架概述 Scrapy框架以其高性能、易用性…...

04--MySQL8.0_JDBC

第一章 JDBC概述 之前我们学习了JavaSE,编写了Java程序,数据保存在变量、数组、集合等中,无法持久化,后来学习了IO流可以将数据写入文件,但不方便管理数据以及维护数据的关系; 后来我们学习了数据库管理软件MySQL,可以方便的管理数据1。 那么如何将它俩结合起来呢?即…...

OPENCV中0x00007FFE5F35F39C发生异常

原因&#xff1a;读取图片时已经为灰度图像&#xff0c;又进行了一次灰度处理cvtColor 解决方法&#xff1a;如上图所示&#xff0c;将cv::imread的第二个参数改为cv::IMREAD_COLOR&#xff1b;或者保留cv::IMREAD_GRAYSCALE&#xff0c;删去后面的cv::cvtColor...

Python 设计模式(第2版) -- 第三部分(行为型模式)

Python 设计模式(第2版) 再介绍下行为型设计模式。 行为型模式&#xff0c;顾名思义&#xff0c;它主要关注的是对象的责任。它们用来处理对象之间的交互&#xff0c;以实现更大的功能。行为型模式建议&#xff1a;对象之间应该能够彼此交互&#xff0c;同时还应该是松散耦合…...

EXCEL数据导入HIVE

引言 本文将论述如何将Windows本地的excel表数据&#xff0c;导入到虚拟机Linux系统中的Hadoop生态中的Hive数据仓库中。 实验准备 DBeaver Hive3.1&#xff08;Hadoop3.1&#xff09; excel数据表 实验步骤 一、首先打开虚拟机&#xff0c;启动Hadoop&#xff0c;启动h…...

C语言常用标准头文件

头文件的基础概念 在C的系列语言程序中&#xff0c;头文件&#xff08;通常扩展名为.h&#xff09;被大量使用&#xff0c;它通常包含函数、变量、结构体等的声明和定义&#xff0c;以及一些宏定义和类型定义。头文件的主要作用是为了方便管理和重用代码&#xff0c;它可以被多…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

OCR MLLM Evaluation

为什么需要评测体系&#xff1f;——背景与矛盾 ​​ 能干的事&#xff1a;​​ 看清楚发票、身份证上的字&#xff08;准确率>90%&#xff09;&#xff0c;速度飞快&#xff08;眨眼间完成&#xff09;。​​干不了的事&#xff1a;​​ 碰到复杂表格&#xff08;合并单元…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

claude3.7高阶玩法,生成系统架构图,国内直接使用

文章目录 零、前言一、操作指南操作指导 二、提示词模板三、实战图书管理系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 在线考试系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 四、感受 零、前言 现在很多AI大模型可以…...

TMC2226超静音步进电机驱动控制模块

目前已经使用TMC2226量产超过20K,发现在静音方面做的还是很不错。 一、TMC2226管脚定义说明 二、原理图及下载地址 一、TMC2226管脚定义说明 引脚编号类型功能OB11电机线圈 B 输出 1BRB2线圈 B 的检测电阻连接端。将检测电阻靠近该引脚连接到地。使用内部检测电阻时,将此引…...