前端面试题(小整理)

vue中的生命周期钩子有哪些

beforeCreate:
在实例初始化之后,数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
在此阶段,实例的属性和方法还未初始化。
created:
在实例创建完成后被立即调用。
可以访问实例的属性和方法,但无法访问到 DOM 元素。
beforeMount:
在挂载开始之前被调用。
在此阶段,模板编译完成,但尚未将编译结果挂载到 DOM 中。
mounted:
在挂载完成后被调用。
可以访问到挂载的 DOM 元素,可以进行 DOM 操作。
beforeUpdate:
在数据更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。
在此阶段,可以对更新前的状态进行修改。
updated:
在数据更新之后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。
可以进行 DOM 操作,但要避免无限循环的更新。
beforeDestroy:
在实例销毁之前调用。
在此阶段,实例仍然完全可用。
destroyed:
在实例销毁之后调用。
所有的事件监听器会被移除,所有的子实例也会被销毁。

面试题:react、vue中的key有什么作用?(key的内部原理)

1.虚拟DOM中key的作用:
​ key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:

​ 2.对比规则:

​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!

​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 创建新的真实DOM,随后渲染到到页面。

​ 3. 用index作为key可能会引发的问题:

​ 1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:

​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

​ 2. 如果结构中还包含输入类的DOM:

​ 会产生错误DOM更新 ==> 界面有问题。

​ 4. 开发中如何选择key?:

​ 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

​ 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,

​ 使用index作为key是没有问题的。

模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。

IIFE:使用自执行函数来编写模块化,特点:在一个单独的函数作用域中执行代码,避免变量冲突。

AMD:使用 requireJS 来编写模块化,特点:依赖必须提前声明好。

CMD:使用 seaJS 来编写模块化,特点:支持动态引入依赖文件。

CommonJS:nodejs 中自带的模块化。

UMD:兼容 AMD,CommonJS 模块化语法。

webpack(require.ensure):webpack 2.x 版本中的代码分割。

ES Modules:ES6 引入的模块化,支持 import 来引入另一个 js 。

Cookie、sessionStorage、localStorage 的区别

共同点:都是保存在浏览器端,并且是同源的

Cookie:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。(key:可以在浏览器和服务器端来回传递,存储容量小,只有大约4K左右)

sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持,localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。(key:本身就是一个回话过程,关闭浏览器后消失,session为一个回话,当页面不同即使是同一页面打开两次,也被视为同一次回话)

localStorage:localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。(key:同源窗口都会共享,并且不会失效,不管窗口或者浏览器关闭与否都会始终生效)

link 与 @import 的区别

link是 HTML 方式, @import是 CSS 方式

link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC

link可以通过rel="alternate stylesheet"指定候选样式

浏览器对link支持早于@import,可以使用@import对老浏览器隐藏样式

@import必须在样式规则之前,可以在 css 文件中引用其他文件

总体来说:link 优于@import

router和route有什么区别

Router(路由器):路由器是一种网络设备,用于在计算机网络中转发数据包。它连接多个网络,并根据目标地址来确定数据包的最佳路径,以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。

Route(路由):路由是指在网络中定义的路径,用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的,它指定了数据包在网络中的传输路径。路由可以基于不同的因素进行选择,例如最短路径、最快路径或特定的网络策略。

Vue 的双向数据绑定的原理

Vue 的双向数据绑定是通过使用 Object.defineProperty() 方法来实现的。

当 Vue 实例化时,Vue 会遍历 data 对象中的属性,并使用 Object.defineProperty() 将每个属性转换为 getter 和 setter。这样,当数据属性被读取或修改时,Vue 就能够捕获到,并触发相应的更新。

具体的实现步骤如下:

Vue 遍历 data 对象中的属性。
对于每个属性,Vue 使用 Object.defineProperty() 将其转换为 getter 和 setter。
在 getter 中,Vue 将属性的值返回给调用者,并进行依赖收集。这意味着 Vue 会追踪每个属性的依赖关系,以便在属性发生变化时,能够通知相关的组件进行更新。
在 setter 中,Vue 接收到属性的新值,并将其存储起来。然后,Vue 会触发相应的更新,通知相关的组件进行重新渲染。
通过这种方式,Vue 实现了双向数据绑定。当数据发生变化时,视图会自动更新;当用户与视图进行交互时,数据也会自动更新。

css定位有哪几种

静态定位(Static Positioning):
默认的定位方式。
元素按照文档流正常排列,不受其他定位方式的影响。
使用 position: static; 来指定静态定位。
相对定位(Relative Positioning):
相对于元素自身在文档流中的位置进行定位。
元素仍然占据原来的空间,不会影响其他元素的位置。
使用 position: relative; 来指定相对定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
绝对定位(Absolute Positioning):
相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始包含块(通常是 元素)进行定位。
元素脱离文档流,不占据空间,可以覆盖其他元素。
使用 position: absolute; 来指定绝对定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
固定定位(Fixed Positioning):
相对于浏览器窗口进行定位,固定在屏幕上的位置不变。
元素脱离文档流,不占据空间,始终可见。
使用 position: fixed; 来指定固定定位,并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。

js 中 BOM和DOM的区别

BOM是浏览器对象模型,它提供了一组对象和方法,用于操作浏览器窗口和浏览器本身的属性。BOM包括了window对象,它代表浏览器窗口,提供了许多方法和属性,如alert()、setTimeout()、location等。

DOM是文档对象模型,它提供了一组对象和方法,用于操作HTML或XML文档的内容和结构。DOM可以将HTML或XML文档表示为一个树状结构,每个节点都是一个对象,可以通过DOM API来访问和修改这些节点。DOM提供了一系列的方法和属性,如getElementById()、appendChild()、innerHTML等。

BOM是用来操作浏览器窗口和浏览器本身的属性,而DOM是用来操作文档结构和内容的。
BOM提供了一些与浏览器交互的方法和属性,如弹窗、重定向等,而DOM提供了一些用于操作HTML或XML文档的方法和属性,如获取元素、修改内容等。
BOM是浏览器厂商根据W3C标准之外的补充,不同浏览器实现可能有差异,而DOM是W3C标准定义的,不同浏览器实现应该保持一致性。
总的来说,BOM是操作浏览器窗口和浏览器本身的属性,而DOM是操作HTML或XML文档的内容和结构。

什么是防抖 什么是节流

防抖:
防抖是指在事件触发后,等待一段时间后再执行回调函数。如果在等待时间内又发生了相同的事件,那么就会重新计时。防抖的主要目的是减少函数的执行次数,尤其是在频繁触发事件的情况下,可以避免函数多次执行。常见的应用场景包括输入框的搜索建议、窗口大小改变的回调等。

例如,当用户在输入框中输入关键字时,可以使用防抖来减少发送请求的次数,只有在用户停止输入一段时间后才发送请求。

节流:
节流是指在一段时间内只执行一次回调函数。即使在这段时间内发生了多次事件,也只会执行一次回调函数。节流的主要目的是控制函数的执行频率,尤其是在高频率触发事件的情况下,可以限制函数的执行次数。常见的应用场景包括滚动事件、鼠标移动事件等。

例如,当用户滚动页面时,可以使用节流来限制触发回调函数的次数,避免频繁执行导致性能问题

vue中事件的修饰符有哪些

.stop:阻止事件冒泡。
.prevent:阻止事件的默认行为。
.capture:使用事件捕获模式,即在父组件上监听事件,而不是在子组件上。
.self:只有当事件是由当前元素本身触发时才触发事件处理函数,不包括子元素。
.once:事件只触发一次,之后自动移除事件监听器。
.passive:指示浏览器在滚动事件上不需要执行preventDefault(),可以提升滚动性能。
.native:监听组件根元素的原生事件,而不是组件自身触发的事件。
.keyCode:只当事件是从特定键触发时才触发事件处理函数。
.exact:要求精确匹配修饰符。
.left:只当点击鼠标左键时才触发事件处理函数。
.right:只当点击鼠标右键时才触发事件处理函数。
.middle:只当点击鼠标中键时才触发事件处理函数。

GET POST请求方式什么区别?

数据传输位置:GET请求将数据附加在URL的查询参数中,而POST请求将数据包含在请求体中。
数据传输安全性:GET请求的数据暴露在URL中,因此不适合传输敏感信息。POST请求的数据在请求体中,相对更安全。
数据传输长度限制:GET请求的URL长度有限制,不同浏览器限制不同,通常为2048个字符。POST请求的数据没有长度限制。
数据传输语义:GET请求用于获取资源,不应该有副作用,即对服务器数据没有修改的操作。POST请求用于提交数据,可能对服务器数据进行修改。
请求可缓存性:GET请求默认可以被缓存,而POST请求默认不会被缓存。
请求使用场景:GET请求适合获取数据,如获取网页内容、查询数据等。POST请求适合提交数据,如提交表单、上传文件等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817438.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文心一言VSchatGPT4

文心一言和GPT-4各有优势,具体表现在不同的测试场景下。 在某些测试场景中心一言的表现优于GPT-4,例如在故事的完整度和情节吸引力方面,文心一言表现得更加符合指令,情节更吸引人。这可能得益于其模型在训练时对中文语境的深入理…

选择电源自动化测试系统,要考虑哪些因素?

随着科技的发展以及市场需求的变化,手动测试以及传统自动化测试不足日益明显,已无法满足当前的电源测试需求,因此,选择全新的自动化测试系统成为必然趋势。那么,要如何选择可靠、高效的电源自动化测试系统呢&#xff1…

计算机网络——网络地址转换(NAT)技术

目录 前言 前篇 引言 SNAT(Source Network Address Translation)源网络地址转换 SNAT流程 确定性标记 DNAT(Destination Network Address Translation,目标网络地址转换) NAT技术重要性 前言 本博客是博主用于…

15 Python进阶: random和pyecharts

Python random 模块主要用于生成随机数。 random 模块实现了各种分布的伪随机数生成器。 要使用 random 函数必须先导入: import randompython random 模块的一般用法 Python中的random模块提供了生成伪随机数的功能,可以用于模拟、游戏开发、密码学…

【Spring Boot 源码学习】SpringApplication 的 run 方法核心流程介绍

《Spring Boot 源码学习系列》 SpringApplication 的 run 方法核心流程介绍 一、引言二、往期内容三、主要内容3.1 run 方法源码初识3.2 引导上下文 BootstrapContext3.3 系统属性【java.awt.headless】3.4 早期启动阶段3.5 准备和配置应用环境3.6 打印 Banner 信息3.7 新建应用…

TCP 粘包

从应用层到 TCP 传输层的多个数 据包是一连串的字节流是没有边界的,而且 TCP 首部并没有记录数据包的长度,所以 TCP 传输数据的时候可能会发送粘包和拆包的问题;而 UDP 是基于数据报传输数据的,UDP 首部也记录了数据报的长度&…

Blender表面细分的操作

在使用Blender的过程中,刚开始创建的模型,都会比较少面,这样操作起来比较流畅,减少电脑的计算量,当设计快要完成时,就会增加表面细分,这样更加圆滑,看起来更加顺眼。 比如创建一个猴头,它会默认显示如下: 从上图可以看到,有一些表面会比较大,棱角很多。 这时候你…

java声明一个日期类MyDate

声明一个日期类MyDate,包含如下方法: * - boolean isLeapYear():判断是否是闰年 * - String monthName():根据月份值,返回对应的英语单词 * - int totalDaysOfMonth():返回这个月的总天数 * - int totalDay…

win11如何重新安装应用商店,怎么重装应用商店

win11系统内置了应用商店,相当于手机的应用商城,用户们想要下载软件时,就会前往应用商店搜索下载。如果我们因为误操作,删除了win11应用商店,或者是应用商店出现闪退、卡顿等问题,这个时候,最好…

插值算法-代码实现

1、 import java.util.HashMap; import java.util.Map;public class Interpolation {public static void main(String[] args) {// 定义给定的 XML 字段值Map<String, double[]> xmlValues new HashMap<>();xmlValues.put("faceSize", new double[]{10…

MyBatis-Spring整合

引入Spring之前需要了解mybatis-spring包中的一些重要类&#xff1b; http://www.mybatis.org/spring/zh/index.html 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。 知识基础 在开始使用 MyBatis-Spring 之前&#x…

Python学习笔记23 - 目录操作

os模块操作目录相关函数 os.path模块操作目录相关函数 案例1 —— 列出指定目录下的所有.py文件 案例2 —— walk()

掌握ChatGPT:高效撰写科研论文的必备利器

ChatGPT无限次数:点击直达 掌握ChatGPT&#xff1a;高效撰写科研论文的必备利器 在当今科研领域&#xff0c;撰写高质量的论文是每位研究者不可或缺的任务。然而&#xff0c;研究者常常在文稿撰写过程中遇到写作思路不清晰、表达不够准确甚至同义词重复等问题。针对这些挑战&a…

MySQL 8.0 字符集问题导致报错

报错&#xff1a; ### Error querying database. Cause: java.sql.SQLException: Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,COERCIBLE) MySQL 8.0引入了一些新的字符集和排序规则&#xff0c;并对现有的进行了改进。在MySQL 8.0中&#…

vue大屏

使用viewport方案和postcss-px-to-viewport插件来实现屏幕适配&#xff0c;主要是为了让你的Vue大屏应用在不同尺寸和分辨率的屏幕上都能良好地显示。以下是一个简单的实现步骤&#xff1a; 1.安装 npm install postcss-px-to-viewport --save-dev # 或者 yarn add postcs…

内网渗透-红队内网渗透工具(Viper)

红队内网渗透工具(Viper) 最近发现一款很强大的内网渗透工具Viper 接下来我给大家介绍一下具体的安装过程&#xff0c;这里我在kali上进行安装 &#xff08;1&#xff09;首先打开kali终端&#xff0c;切换到root用户,确认以下操作都在root用户下操作&#xff0c;sudo -s 安装…

Leetcode 3112. Minimum Time to Visit Disappearing Nodes

Leetcode 3112. Minimum Time to Visit Disappearing Nodes 1. 解题思路2. 代码实现 题目链接&#xff1a;3112. Minimum Time to Visit Disappearing Nodes 1. 解题思路 这一题的话思路上来说就是一个最优路径的问题&#xff0c;我们通过一个遍历&#xff0c;即可获得从0节…

【MATLAB源码-第16期】基于matlab的MSK定是同步仿真,采用gardner算法和锁相环

1、算法描述 **锁相环&#xff08;PLL&#xff09;** 是一种控制系统&#xff0c;用于将一个参考信号的相位与一个输入信号的相位同步。它在许多领域中都有应用&#xff0c;如通信、无线电、音频、视频和计算机系统。锁相环通常由以下几个关键组件组成&#xff1a; 1. **相位…

基于springboot实现医疗病历互换系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现医疗病历交互系统演示 摘要 进入21世纪&#xff0c;计算机技术迅速向着网络化的、集成化方向发展。传统的单机版应用软件正在逐渐退出舞台&#xff0c;取而代之的是支持网络、支持多种数据信息的新一代网络版应用软件&#xff0c;形成了信息化的社会。信息…

2024最新 PyCharm 2024.1 更新亮点看这篇就够了

2024最新 PyCharm 2024.1 更新亮点看这篇就够了 文章目录 2024最新 PyCharm 2024.1 更新亮点看这篇就够了&#x1f680; PyCharm 2024.1 发布&#xff1a;全面升级&#xff0c;助力高效编程&#xff01;摘要引言 &#x1f680; 快速掌握 Hugging Face&#xff1a;模型与数据集文…