前端笔面试查漏补缺

面试笔试的知识总结,查漏补缺

一、CSS样式隔离

CSS样式隔离用于确保组件或元素的样式不会与其他组件或元素的样式发生冲突。

1.scoped css  --  <style scoped>

构建工具(vue-loader)会在编译阶段对css特殊处理,给当前组件的所有dom节点添加一个唯一的属性(通常是data-v-xxxxx,其中xxxxx是一个哈希值),并在css选择器末尾添加这个属性选择器,实现css样式隔离。

1)优点:

样式隔离,避免全局样式的冲突

允许创建可重用的组件,无需担心样式冲突

CSS代码更易于维护和理解,因为每个组件的样式都是独立的

2)限制

性能影响,可能会略微降低页面的加载速度

样式作用范围,scoped样式只能作用于组件及其后代元素,无法作用于组件外部的元素

有时第三方库的样式可能无法被scoped正确隔离,需要额外处理

二、修饰符对应js原生方法

1.事件冒泡

当一个元素上触发某个事件时,这个事件会按照从内到外的顺序逐级传递给父元素,直到传递到文档的根元素(通常是window对象)

1)vue对应修饰符:.stop

2)原生js:event.stopPropagation()

方法会在调用时修改事件对象(event)内部状态,状态通常是一个标志位,标记事件是否应该继续传播

2.默认行为

.prevent用于阻止元素的默认事件行为。例如,当点击一个提交按钮时,浏览器默认会提交表单,但使用了.prevent会阻止默认行为,允许开发者自定义逻辑(如在提交前验证表单数据)。

1)vue对应修饰符:.stop

2)原生js:event.preventDefault()

与event.stopPropagation()类似,浏览器会检查发生的事件类型(例如,点击、提交、键盘事件等)。不同的事件类型有不同的默认行为。浏览器会在内部标记该事件为“已取消默认行为”,通常通过一个内部标志来实现。

但是,event.preventDefault()只会取消事件的默认行为,它不会阻止事件在DOM树中的传播。

3.扩展补充

1).capture:阻止事件捕获关键字。

(事件捕获:)

原生js:addEventListener,第三个参数设为true,在捕获阶段监听。

element.addEventListener('click', function(event) {  // 捕获阶段处理代码  
}, true); // 第三个参数为true,表示在捕获阶段监听

2).self:只在点击到元素自身的时候才执行对应函数。

原生js:添加监听器,然后检查event.target是否等于监听器附加的元素。

element.addEventListener('click', function(event) {  if (event.target === this) {  // 仅当事件目标为当前元素时执行代码  }  
});

3).once:事件只执行一次,再次点击不会再执行

原生js:手动移除监听器,removeEventListener

function handleClick(event) {  // 事件处理代码  // 移除监听器,防止再次触发  element.removeEventListener('click', handleClick);  
}  element.addEventListener('click', handleClick);

三、display

1.block

元素显示为块级元素。

块级元素会独占一行,宽度默认为其父容器的100%。

常见的块级元素有 <div>,<p>,<h1>  等。

2.inline

元素显示为内联元素。

内联元素不会独占一行,只占据其内容所需的宽度。

常见的内联元素有 <span>,<a>,<img> 等。

3.inline-block

结合了块级元素和内联元素的特点。

元素像内联元素一样不会独占一行,但可以设置宽度和高度。

4.none

元素不会被显示。

元素从文档布局中完全移除,就像它从未存在一样。

使用 display:none 可以隐藏元素,同时不影响页面的其他部分。

5.flex

元素成为一个弹性容器(flex container)。

其子元素成为弹性项(flex items),可以在容器内以灵活的方式布局。

弹性布局(flexbox)是一种用于在页面上排列元素的一维布局方法。

6.grid

元素成为一个网格容器(grid container)。

其子元素成为网格项(grid items),可以在容器内以二维网格的方式布局。

网格布局(grid layout)是一种强大的二维布局系统,用于在页面上创建复杂的布局。

7.table

元素显示为块级表格,类似于 <table> 标签。

其子元素可以使用 display:table-row,  display:table-cell 等值来模拟表格的行和单元格。

8.table-row

元素显示为表格行,类似于 <tr> 标签。

该元素必须是 display:table 或 display:inline-table 元素的直接子元素。

9.table-cell

元素显示为表格单元格,类似于 <td> 或 <th> 标签。

该元素必须是 display:table-row, display:table-row-group, display:table-header-group 元素的直接子元素。

10.list-item

元素显示为列表项,类似于 <li> 标签。

该元素会产生一个额外的块级框(称为外部标记),通常包含项目符号或编号。

11.run-in

这是一个不太常用的值,它根据上下文将元素显示为块级或内联元素。

如果元素后面跟着一个块级元素,则它表现为内联元素;否则,表现为块级元素。

12.flow-root

元素会创建一个新的块格式化上下文(BFC),并且其内部的浮动元素会被包含。

这通常用于清除浮动或防止外边距合并等布局问题。

13.inline-flex 和 inline-grid

这两个值分别结合了 flex和 grid 布局与内联元素的特性。

元素像内联元素一样不独占一行,但内部使用弹性布局或网格布局。

14.contents

这是一个实验性值,它使元素本身不产生任何盒模型(即不显示也不占据空间)。

但是,其子元素仍然会被渲染和布局。

四、BFC

1.BFC

Web页面的一种布局方式,是一个独立的渲染区域,只有属于这个渲染区域的元素才会受到BFC的影响。
BFC规定内部的块级元素如何布局,并且与这个区域外部的元素互不干扰。

2.触发条件

1.根元素*html

2.浮动元素(float不是none)

3.绝对定位或固定定位元素(position为absolute或fixed)

4.display为inline-block,flex,inline-flex,grid,inline-grid,flow-root

5.overflow不为visible

6.包含position:absolute或position:fixed的块级容器,且该元素不是inline或inline-block

7.display:table-cell,display:table-caption或display:inline-block但block:size设置为0的元素

8.contain设为layout,contain,paint的元素

9.height为0,且min-height或max-height不为auto,或者元素的width为0,且min-width或max-width属性不为auto的元素


五、兄弟组件传递数据          

1.通过父组件作为中介
2.使用状态管理
3.使用事件总线

(事件总线在vue.js用于组件间通信,可被视为一个中央调度器或事件中心,允许不同的组件发送和接收事件,实现数据的传递和组件间的交互)
(事件总线是一个独立的Vue实例,不具备DOM,只包含Vue实例方法,允许组件通过emit发送时间,通过on监听时间,通过$off移除事件监听)

4.使用本地存储

(localStorage或sessionStorage)


5.provide/inject    

vue的provide和inject允许一个祖先组件向其子孙后代注入一个依赖,主要用于祖先和后代组件的通信,某些情况也可以用于兄弟组件之间的通信(非首选,会模糊组件间的界限)

但是provide和inject传递数据是非响应式的(父组件数据变化,子组件不会自动感知到并更新),在深层次嵌套的组件中非常有用,谨慎使用
                   
provide,父组件定义的对象或函数,向子组件提供数据(数据可以被该组件的所有后代组件访问)
inject,子组件定义的对象,接收来自祖先组件提供的数据

父组件:

export default {  provide() {  return {  message: 'Hello from Parent Component',  // 可以提供函数、对象等其他类型的数据  };  },  // 其他组件选项...  
};


子组件:

export default {  inject: ['message'],  // 其他组件选项...  
};

六、watchEffect

1.watchEffect

  1. 自动追踪依赖:watchEffect会自动追踪回调函数中使用的所有响应式数据,无需手动指定要监听的具体属性。
  2. 立即执行:与watch不同,watchEffect在初始化时会立即执行一次回调函数。
  3. 性能优化:Vue 3会对watchEffect的执行进行优化,避免不必要的重复运算。但是,如果回调函数依赖的响应式数据很多,或者回调函数的执行开销很大,仍然可能会对性能产生影响。

2.与watch的区别

  1. 监听方式:watchEffect是自动追踪所有使用的响应式数据,而watch需要手动指定要监听的特定属性。
  2. 监听粒度:watchEffect监听的是响应式数据的整个变化,而watch可以监听指定的属性或表达式的变化。
  3. 使用场景:watchEffect适用于无需指定具体依赖的情况,只要回调函数内部使用的任何响应式数据发生变化,都会触发回调函数。而watch则适用于需要对数据进行深入定制的情况,可以监视多个数据源,并且可以通过options对象来自定义行为,如深度监听、立即执行等。
import { reactive, watchEffect } from 'vue';  const state = reactive({  count: 0,  name: 'John',  age: 25  
});  watchEffect(() => {  console.log(`Count: ${state.count}, Name: ${state.name}, Age: ${state.age}`);  
});  // 当 state 中的任何属性发生变化时,上面的回调函数都会再次执行  
state.count++; // 输出: Count: 1, Name: John, Age: 25  
state.name = 'Alice'; // 输出: Count: 1, Name: Alice, Age: 25

七、Vue3生命周期

1.setup

新增钩子函数,其他选项式API钩子之前调用,用于初始化响应式数据,props解析和事件监听器等,setup函数没有this上下文,不是组件实例的一部分

2.beforeCreate

示例初始化后,数据观测之前,data和methods未初始化,无法访问到props和data属性

3.created

实例创建完成后,data和methods已经初始化,模板渲染未开始,一步请求、事件监听器注册

4.beforeMount

挂载之前,模板编译已完成,DOM未生成

5.mounted

挂载完成,可以访问到组件的DOM元素

6.beforeUpdate

组件更新前调用,数据已被更改,页面未重新渲染

7.updated

组件更新完成后调用,DOM已经重新渲染完毕

8.beforeUnmount

卸载前使用,组件仍完全可用,进行清理操作,取消事件监听器和定时器

9.unmounted

卸载完成后,组件已经完全销毁,释放资源和清理操作

其余钩子函数:

8.onActivated

被<keep-alive>缓存的组件激活时调用

9.onDeactivated

被<keep-alive>缓存的组件停用时调用

10.onErrorCaptured

用于捕获并处理来自子孙组件的错误

{{ 仅支持表达式 }},每个绑定仅支持单一表达式(判断方法:该表达式是否可以合法地写在return后面,可以就是单一表达式)

八、arguments

1.定义

类数组对象,包含传递给函数的所有参数,对象不是Array的实例,但有类似数组的属性,如length,且可以用索引来访问各个参数(arguments[0])。

2.使用

arguments对象可以在函数体内部使用,允许访问传递给函数的参数。(不能用pop,push,slice等数组方法,但可以使用Array.prototype.slice.call(arguments)将arguments转换为真正的数组)

如果函数声明中定义了参数,这些参数在函数体内部也会作为局部变量存在。这些参数与arguments对象中的值是同步的,即修改其中一个也会影响到另一个。

3.箭头函数

箭头函数不绑定自己的arguments对象。箭头函数内部访问arguments时,实际引用的是包含箭头函数的那个函数的arguments对象,如果箭头函数是在非函数块中创建的(如直接在全局作用域),那它可能无法访问到有效的arguments对象。

4.rest参数

ES6及更高版本中,引入rest参数语法(...args),提供了更简洁的方式来处理不确定数量的参数,并将它们作为数组处理。rest参数是真正的数组实例,可以直接使用数组的所有方法。

九、数组方法

1.shift()

从数组的开头(索引0)移除第一个元素,并返回该元素的值(改变原数组)。

let arr = [1, 2, 3];  
let firstElement = arr.shift(); // firstElement 的值为 1  
console.log(arr); // 输出: [2, 3]

2.unshift()

在数组的开头(索引0)添加一个或多个元素,并返回新的数组长度(改变原数组)。

let arr = [1, 2, 3];  
let newLength = arr.unshift(0); // newLength 的值为 4  
console.log(arr); // 输出: [0, 1, 2, 3]

3.splice()

用于添加/删除/替换数组中的元素,(start,deleteCount,item1,item2,...)指定从start索引位置修改,deleteCount移除数组元素的个数,设为0不移除;
item1,item2,...,要添加进数组的元素,从start位置开始。

删除元素:

let arr = [1, 2, 3, 4, 5];  
let removed = arr.splice(1, 2); // 从索引1开始删除2个元素  
console.log(arr); // 输出: [1, 4, 5]  
console.log(removed); // 输出: [2, 3]

添加元素:

let arr = [1, 2, 3, 4, 5];  
arr.splice(2, 0, 'a', 'b'); // 从索引2开始插入'a'和'b'  
console.log(arr); // 输出: [1, 2, 'a', 'b', 3, 4, 5]

替换元素:

let arr = [1, 2, 3, 4, 5];  
arr.splice(1, 1, 'x', 'y'); // 从索引1开始替换1个元素为'x'和'y'  
console.log(arr); // 输出: [1, 'x', 'y', 3, 4, 5]

4.slice()

从一个数组中提取一部分浅拷贝到新的数组对象中,(不改变原数组)

          (begin,end),提取片段的开始位置和结束位置

let arr = [1, 2, 3, 4, 5];  
let newArr = arr.slice(1, 3); // 提取索引1到2的元素(不包括索引3)  
console.log(newArr); // 输出: [2, 3]  
console.log(arr); // 输出: [1, 2, 3, 4, 5](原数组未改变)

复制整个数组:

let arr = [1, 2, 3, 4, 5];  
let copiedArr = arr.slice(); // 不提供参数,复制整个数组  
console.log(copiedArr); // 输出: [1, 2, 3, 4, 5]


 

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

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

相关文章

-XSS-

链接 https://github.com/do0dl3/xss-labs 搭建过程非常容易的 搭建好之后&#xff0c;就可以点击图片开始闯关了 第一关--JS弹窗函数alert() 显示payload的长度是4 level1.php?nametest level1.php?nametest1 发现只要改变name的值就显示什么在页面上 没有什么过滤的 …

【数据结构与算法】《Java 算法宝典:探秘从排序到回溯的奇妙世界》

目录 标题&#xff1a;《Java 算法宝典&#xff1a;探秘从排序到回溯的奇妙世界》一、排序算法1、冒泡排序2、选择排序3、插入排序4、快速排序5、归并排序 二、查找算法1、线性查找2、二分查找 三、递归算法四、动态规划五、图算法1. 深度优先搜索&#xff08;DFS&#xff09;2…

sqlserver、达梦、mysql的差异

差异项sqlserver达梦mysql单行注释---- 1、-- &#xff0c;--后面带个空格 2、# 包裹对象名称&#xff0c;如表、表字段等 [tableName] "tableName"tableName表字段自增IDENTITY(1, 1)IDENTITY(1, 1)AUTO_INCREMENT二进制数据类型IMAGEIMAGE、BLOBBLOB 存储一个汉字需…

transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

把scene.add(transformControls);改为scene.add(transformControls.getHelper());

python删除文件夹下面的所有文件示例

要删除指定路径下的文件夹和文件&#xff0c;可以使用 Python 的 shutil 模块。这将允许你递归地删除文件夹及其内容。以下是一个示例&#xff1a; import shutil from pathlib import Path# 指定要删除的目录路径 directory Path(path/to/your/directory)# 检查目录是否存在…

计算机视觉专栏(1)【LeNet】论文详解

Lenet 系列 论文精讲部分0.摘要1.引言2.CNN3.结果分析4.总结 论文精讲部分 本专栏旨在深入解析计算机视觉模型的论文及其发展背景&#xff0c;并通过代码部分的实际实验来加深理解。读者可以根据自己的需要参考其中的内容。其主体为原文&#xff0c;笔者理解内容会采用引用格式…

[ 问题解决篇 ] 解决windows虚拟机安装vmtools报错-winserver2012安装vmtools及安装KB2919355补丁 (附离线工具)

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

Window on ARM解锁所有的TTS语音包供python调用

Window on ARM解锁所有的TTS语音包供python调用 可用的语音包查看查看TTS可用的语音包解锁语音包设置升级系统打开注册表导出注册表修改注册表导入新的注册表可用的语音包查看 微软的Windows 10操作系统为设备上安装的每种语言提供了一套语音。但只有部分已安装的语音能在整个…

EPLAN创建宏并自定义部件库详细案例操作(三)

#通过导入EDZ格式部件库的样式,模仿制作一个自定义的部件库# 续 EPLAN创建宏并自定义部件库详细案例操作(二) 需要部件库文件(EDZ)格式,可以在此下载: https://download.csdn.net/download/weixin_44166380/89935582 五、创建部件库 本章节的部分操作忽略,具体可参见…

掌握 CTE 技巧,实现连续日期和月份的 SQL 报表统计

在 SQL 查询中&#xff0c;报表统计往往涉及到特定时间段内的数据汇总&#xff0c;如每日、每月的销售数据等。然而&#xff0c;面对缺少数据的日期或月份&#xff0c;传统 SQL 查询可能会直接跳过这些日期&#xff0c;使得输出的报表在视觉上并不连续。本文将展示如何利用 CTE…

APScheduler:强大的Python定时任务调度器

安装 使用pip安装APScheduler&#xff1a; pip install apscheduler基本概念 APScheduler有四种组件&#xff1a; Triggers&#xff1a;包含调度逻辑&#xff0c;每个作业有其专属触发器&#xff0c;决定下次运行时间。触发器无状态&#xff0c;仅依据初始配置工作。Job St…

电子电气架构 --- 车载芯片现状

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所有人的看法和评价都是暂时的&#xff0c;只有自己的经历是伴随一生的&#xff0c;几乎所有的担忧和畏惧…

我docker拉取mysql镜像时用的是latest,我该怎么看我的镜像版本是多少?可以通过一下三种方法查看

我docker拉取mysql镜像时用的是latest&#xff0c;我该怎么看我的镜像版本是多少&#xff1f; 方法一&#xff1a;查看 Docker 镜像标签 你可以查看 Docker 镜像的标签信息&#xff0c;了解当前使用的 MySQL 镜像版本。 具体步骤如下&#xff1a; 1. 列出本地 Docker 镜像&am…

识别风险的提示清单

在PMBOK&#xff08;《项目管理体系指南》&#xff09;中&#xff0c;介绍了这样一个概念&#xff0c;在识别风险时&#xff0c;可以提供一个参考清单&#xff0c;让大家基于一个清单来思考&#xff0c;这个项目可能有哪些具体的风险。 PMBOK中的风险提示清单&#xff0c;包括…

【网络安全】从NA到P1,我是如何扩大思路的?

未经许可,不得转载。 文章目录 正文正文 在这篇文章中,我将向大家展示一个我发现的漏洞,该漏洞利用了一个硬编码的 Basic 认证头,获取了管理员权限。 首先,假设公司域名为“target.com”。 第一步是使用多种工具(如 Amass、subfinder、findomain 等)收集与该组织相关…

Unreal Engine 5 C++(C#)开发:使用蓝图库实现插件(二)编辑BPLibrary.h中的枚举及结构体

目录 引言 一、头文件编写 1.1Kismet/BlueprintFunctionLibrary.h 1.2BPLibrary.generated.h的作用 1.3IImageWrapper.h 1.4 IImageWrapperModule.h 1.5 Engine/Texture2D.h 1.6CoreMinimal.h 二、定义图片/路径类型的枚举 2.1图片枚举类EImageType 2.2路径枚举类EPath…

Vuestic 整理使用

简单示例 1. 条件渲染 2. 列表渲染 3. 组件插槽 4. 插值语法 5. 前后端路由的区别(还是转一下,可以减少代码量)SFC 构建 … … Okay&#xff0c;可以干活了&#xff0c;通顺 数据表的操作更加简化了 数据类别通过后端路由区别,但是还得由前端路由转一下 简单了许多呀,上脚手…

ssm017网上花店设计+vue(论文+源码)_kaic

设计题目&#xff1a;网上花店的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信…

网页上视频没有提供下载权限怎么办?

以腾讯会议录屏没有提供下载权限为例&#xff0c;该怎么办呢&#xff1f; 最好的办法就是找到管理员&#xff0c;开启下载权限。如果找不到呢&#xff0c;那就用这个办法下载。 1.打开Microsoft Edge浏览器的扩展 2.搜索“视频下载”&#xff0c;选择“视频下载Pro” 3.点击“…

「Mac畅玩鸿蒙与硬件5」鸿蒙开发环境配置篇5 - 熟悉 DevEco Studio 界面

本篇将详细介绍 DevEco Studio 的界面布局和主要功能模块&#xff0c;帮助开发者熟悉开发环境&#xff0c;提高开发效率。通过了解各个界面区域&#xff0c;开发者可以顺利找到所需工具&#xff0c;流畅开展鸿蒙应用开发。 关键词 DevEco Studio界面布局功能模块开发环境 一、…