前端JS常见面试题

news/2024/9/17 20:51:01/ 标签: vue.js, javascript, ecmascript

数据双向绑定 

Bug解决

集成工作涉及

版本node

依赖包报错

版本问题!!!ElementUI、Cesium、ant-design

 配置、代码和其他

混入

在Vue中,混入(Mixins)是一种非常有用的功能,它允许你创建可复用的功能。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混入”该组件本身的选项。

混入的基本使用

  1. 定义混入:首先,你需要定义一个混入对象。这个对象可以包含任何组件选项。
// 定义一个混入对象  
const myMixin = {  created() {  this.hello();  },  methods: {  hello() {  console.log('hello from mixin!');  }  }  
}
  1. 使用混入:然后,你可以在组件中通过mixins选项来使用这个混入。
// 定义一个使用混入的组件  
Vue.component('my-component', {  mixins: [myMixin],  created() {  console.log('component created!');  }  
})

在这个例子中,当my-component组件被创建时,它首先会调用myMixin中的created钩子,然后调用它自己的created钩子。同时,my-component也继承了myMixin中的hello方法,可以在组件的其它部分调用这个方法。

注意事项

  • 选项合并:当组件和混入对象含有同名选项时,这些选项将以一定方式被合并。对于生命周期钩子,混入对象的钩子将在组件自身的钩子之前调用。对于值为对象的选项,如methodscomponentsdirectives,混入对象的选项将被合并到组件的选项中,如果两个对象有相同的键名,则组件的选项会覆盖混入对象的选项。

  • 全局混入:Vue.mixin() 允许你注册一个混入,影响之后创建的每一个Vue实例。请谨慎使用全局混入,因为它会影响每一个之后创建的组件实例(包括第三方组件库)。

  • 合并策略:Vue为不同类型的选项定义了不同的合并策略。例如,data选项在合并时会进行递归合并,而methodscomponentsdirectives等选项则是简单地合并到一个对象中。

  • 使用场景:混入非常适合为Vue组件添加跨组件逻辑。然而,滥用混入可能会导致组件间的依赖关系变得难以追踪,特别是在大型项目中。因此,建议仅在确实需要跨组件共享逻辑时使用混入。

keep-alive与动态组件(缓存组件) 

在Vue.js中,<keep-alive> 是一个内置的抽象组件,用于缓存不活动的组件实例,而不是销毁它们。这样做可以保留组件状态或避免重新渲染,从而提高性能,尤其是在处理动态组件或组件频繁切换的场景下。Vue 2 和 Vue 3 都支持 <keep-alive>,但它们在细节和性能优化上有所不同。

Vue 2 中的 <keep-alive>

在Vue 2中,<keep-alive> 通常包裹在动态组件 <component> 或 <router-view> 周围,以便缓存这些组件。你可以通过 include 和 exclude 属性来指定哪些组件需要被缓存。

<keep-alive :include="['ComponentA', 'ComponentB']">  <component :is="currentView"></component>  
</keep-alive>  <!-- 或者用于路由视图 -->  
<keep-alive>  <router-view></router-view>  
</keep-alive>

Vue 2 的 <keep-alive> 还支持一个 max 属性,用于指定缓存组件的最大数量,一旦这个数量被超过,最老的组件实例将被销毁。

包裹动态组件
<template>  <keep-alive :include="['ComponentA', 'ComponentB']">  <component :is="currentComponent"></component>  </keep-alive>  
</template>  <script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  export default {  components: {  ComponentA,  ComponentB,  // 如果currentComponent不是直接引入的组件,需要注册在components中  },  data() {  return {  currentComponent: 'ComponentA',  };  },  
};  
</script>
包裹路由视图
<template>  <keep-alive>  <router-view></router-view>  </keep-alive>  
</template>  <script>  
// 无需特别脚本,Vue Router会处理路由的切换  
</script>
使用include和exclude属性
<template>  <keep-alive :include="['ComponentA', 'ComponentC']">  <component :is="currentComponent"></component>  </keep-alive>  
</template>  <script>  
// 假设你有ComponentA, ComponentB, ComponentC等组件  
// 这里只缓存ComponentA和ComponentC  
</script>

Vue 3 中的 <keep-alive>

Vue 3 保留了 <keep-alive> 的基本用法和功能,但做了一些改进和性能优化。与Vue 2相比,Vue 3的 <keep-alive> 在处理组件缓存时更加高效,尤其是在组件树重建时。

Vue 3 的 <keep-alive> 同样支持 includeexclude 和 max 属性,用法与Vue 2相同。但是,Vue 3的响应式系统和组合式API(Composition API)为 <keep-alive> 提供了更多的灵活性和控制力。

例如,在Vue 3中,你可以结合使用 <keep-alive> 和 <teleport> 来将缓存的组件移动到DOM的不同位置,或者利用Composition API中的响应式状态来控制缓存的行为。

性能优化

Vue 3 在多个方面对 <keep-alive> 进行了性能优化,包括更快的组件实例化、更好的内存管理和更智能的缓存策略。这些优化使得在Vue 3中使用 <keep-alive> 时,能够更高效地处理大量组件的缓存和复用。

 

 Vuex与Pinia

Vue的状态管理——Vuex3&4&Pinia-CSDN博客

防止恶意登录

SQL注入、XSS攻击

XSS攻击-CSDN博客

 

 WebSocket

聊天室,应用

轮询

Set与Map

Set

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。它有以下特点:

  • 唯一性Set 中的元素是唯一的,不会出现重复的值。
  • 无序性Set 中的元素没有特定的顺序,你无法通过索引来访问 Set 中的元素。
使用场景
  1. 去重:这是 Set 最直接和常用的功能。你可以通过将一个数组转换为 Set 来快速去除其中的重复元素。

const array = [1, 2, 2, 3, 4, 4, 5];  
const uniqueArray = [...new Set(array)];  
console.log(uniqueArray); // [1, 2, 3, 4, 5]
  1. 对象集合:当需要存储不重复的对象时,Set 可以作为一个有效的集合来使用。不过需要注意的是,即使对象的内容相同,但如果它们是不同的对象实例,也会被 Set 视为不同的元素。

  2. 交集、并集、差集操作:利用 Set 提供的 adddeletehas 等方法,可以方便地进行集合操作。

Map

Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值。

  • 键值对Map 中的每个元素都是一个键值对。
  • 有序性Map 记住了元素的插入顺序,因此你可以通过迭代来按顺序访问其中的元素。
  • 键的唯一性Map 中的键是唯一的。
使用场景
  1. 需要记住元素插入顺序的场景:当你想根据元素的插入顺序来访问它们时,Map 是一个很好的选择。

  2. 键是复杂数据类型的场景:与对象不同,Map 的键可以是任何数据类型,包括函数、对象或任何原始值。这意味着,如果键是对象,则只要两个键对象引用的是同一个对象,Map 就会将它们视为相同的键。

  3. 性能敏感的场景:在一些情况下,当你需要频繁地访问数据并且性能是关键考虑因素时,Map 可能比对象更高效,特别是在涉及到复杂键时。

  4. 数据映射:当你想实现数据之间的映射关系时,Map 提供了一个直观且方便的方式来存储和访问这些数据。

 JS多线程

Web Workers 是 JavaScript 的一种机制,它允许你在与主线程(通常是UI线程)分离的后台线程中运行脚本。这样做的好处是,你可以执行耗时的计算或操作而不会阻塞用户界面。这对于需要处理大量数据或复杂计算的Web应用尤其有用。

基本概念

  • 主线程:负责执行脚本、处理事件、渲染UI等。
  • Worker 线程:运行在后台的脚本,不会干扰主线程的UI渲染。
  • 消息传递:主线程和 Worker 线程之间通过传递消息来通信,而不是直接共享内存。

如何使用 Web Workers

1. 创建一个 Worker

首先,你需要创建一个指向 Worker 脚本的 URL。这个脚本会在 Worker 线程中运行。

const myWorker = new Worker('worker.js');

2. 监听 Worker 的消息

你可以在主线程中监听来自 Worker 的消息。

myWorker.onmessage = function(e) {

console.log('Received message from worker:', e.data);

};

3. 向 Worker 发送消息

你可以使用 postMessage() 方法向 Worker 发送消息。

myWorker.postMessage('Hello Worker!');

4. Worker 脚本

在 worker.js 文件中,你可以使用 self(等同于 Worker 线程的全局对象)来接收消息并发送响应。

self.onmessage = function(e) {  console.log('Message received from main script', e.data);  // 处理数据  const result = e.data.toUpperCase();  // 将结果发送回主线程  self.postMessage(result);  
};
5. 错误处理

监听 Worker 线程中的错误。

myWorker.onerror = function(error) {  console.error('Worker error:', error);  
};
6. 终止 Worker

当不再需要 Worker 时,你可以调用 terminate() 方法来停止它。

myWorker.terminate();

进阶使用

  • 多个 Worker:你可以创建多个 Worker 来并行处理任务。
  • 数据共享:虽然 Worker 之间不能直接共享内存,但可以使用 postMessage() 传递数据,或使用 SharedArrayBuffer 和 Atomics(在支持的环境下)来在 Worker 之间共享和同步数据。
  • Worker 之间的通信:Worker 之间不能直接通信,但可以通过主线程作为中介来间接通信。
  • 模块化 Worker:在 Worker 脚本中使用 ES6 模块,可以更好地组织代码和重用功能。

注意事项

  • 同源策略:Worker 脚本必须与创建它的脚本同源(协议、端口和主机名必须相同)。
  • 性能考虑:虽然 Worker 可以提高应用的响应性,但它们也会消耗额外的内存和CPU资源。
  • 浏览器兼容性:虽然大多数现代浏览器都支持 Web Workers,但在使用之前最好检查目标浏览器的兼容性。

通过合理使用 Web Workers,你可以显著提升 Web 应用的性能和用户体验。

webworker需要后端支持

 

浏览器网络与安全

计算机网络面试常见题目(一)-CSDN博客

计算机网络速成(二)-CSDN博客

计算机网络速成(三)-CSDN博客 

计算机网络系统速成-CSDN博客


http://www.ppmy.cn/news/1524655.html

相关文章

DAY13信息打点-Web 应用源码泄漏开源闭源指纹识别GITSVNDS备份

#知识点 0、Web架构资产-平台指纹识别 1、开源-CMS指纹识别源码获取方式 2、闭源-习惯&配置&特性等获取方式 3、闭源-托管资产平台资源搜索监控 演示案例&#xff1a; ➢后端-开源-指纹识别-源码下载 ➢后端-闭源-配置不当-源码泄漏 ➢后端-方向-资源码云-源码泄漏 …

你们准备好了吗?Python 入行 AI 的基础技术栈及学习路线

人工智能&#xff08;AI&#xff09;是当今技术发展的重要领域之一&#xff0c;而 Python 已成为 AI 领域的首选编程语言之一。Python 简单易学&#xff0c;具有丰富的生态系统和社区支持&#xff0c;特别是在 AI 和机器学习&#xff08;ML&#xff09;领域有大量强大的库和框架…

研1日记9

1.理解conv1d和conv2d a. 1和2处理的数据不同&#xff0c;1维数据和图像 b. 例如x输入形状为(32,19,512)时&#xff0c;卷积公式是针对512的&#xff0c;而19应该变换为参数中指定的输出通道。 2.“SE块”&#xff08;Squeeze-and-Excitation Block&#xff09;它可以帮助模…

Vue 中 watch 和 watchEffect 的区别

watch 和 watcheffect 都是 vue 中用于监视响应式数据的 api&#xff0c;它们的区别在于&#xff1a;watch 用于监视特定响应式属性并执行回调函数。watcheffect 用于更通用的响应式数据监视&#xff0c;但回调函数中不能更新响应式数据。Vue 中 watch 和 watchEffect 的区别 …

jdk8,jdk11环境变量

Classpath &#xff1a;.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; path : %JAVA_HOME%\jre\bin %JAVA_HOME%\bin java_home: java根目录 jdk11环境变量配置

【论文阅读】Face2Diffusion for Fast and Editable Face Personalization

code&#xff1a;mapooon/Face2Diffusion: [CVPR 2024] Face2Diffusion for Fast and Editable Face Personalization https://arxiv.org/abs/2403.05094 (github.com) 论文 介绍 面部个性化旨在将从图像中获取的特定面部插入到预先训练的文本到图像扩散模型中。然而&#…

TulingMember进销存系统

TulingMember 介绍 使用.net6,基于 Furion +viewui开发的一套极简的进销存管理系统。 技术栈 sqlserver2019redisvueC#语言功能点 角色权限商品管理销售单采购单库存盘点财务记账打印审计日志预留saas字段,可自行拓展多租户。使用说明 需要了解furion框架,文档地址:http…

【2023年】云计算金砖牛刀小试3

A场次题目:OpenStack平台部署与运维 业务场景: 某企业拟使用OpenStack搭建一个企业云平台,用于部署各类企业应用对外对内服务。云平台可实现IT资源池化,弹性分配,集中管理,性能优化以及统一安全认证等。系统结构如下图: 企业云平台的搭建使用竞赛平台提供的两台云服务…

看这篇告诉你Spring如何完美的解决循环依赖

创作内容丰富的干货文章很费心力&#xff0c;感谢点过此文章的读者&#xff0c;点一个关注鼓励一下作者&#xff0c;激励他分享更多的精彩好文&#xff0c;谢谢大家&#xff01; 循环依赖&#xff0c;其实就是循环引用&#xff0c;就是两个或者两个以上的 bean 互相引用对方&am…

Kafka【十一】数据一致性与高水位(HW :High Watermark)机制

【1】数据一致性 Kafka的设计目标是&#xff1a;高吞吐、高并发、高性能。为了做到以上三点&#xff0c;它必须设计成分布式的&#xff0c;多台机器可以同时提供读写&#xff0c;并且需要为数据的存储做冗余备份。 图中的主题有3个分区&#xff0c;每个分区有3个副本&#xf…

浅谈C#之线程创建和管理

一、基本介绍 线程是一种并发执行的机制&#xff0c;允许程序同时执行多个任务。线程的使用使得我们能够利用计算机的多核处理器&#xff0c;实现程序的并行执行&#xff0c;提高系统的性能和响应能力。本文将详细介绍C#中线程的定义和使用方法&#xff0c;涵盖线程的创建、启动…

微模块冷通道动环监控:智能化数据中心管理利器@卓振思众

在现代数据中心和机房管理中&#xff0c;微模块冷通道动环监控系统的引入&#xff0c;标志着对冷却和环境管理的新纪元。这一系统不仅提升了数据中心的运维效率&#xff0c;还对设备的安全性和稳定性提供了强有力的保障。本文将详细探讨微模块冷通道动环监控的功能和其在数据中…

HPM6E00:PWM V2使用指南

先楫推出的HPM6E00系列芯片&#xff0c;PWM功能升级到了V2版本。和V1版本不同的是&#xff0c;V2版本的每组PWM模块包含4个独立的PWM生成模块&#xff0c;每个PWM生成模块包含一个counter和4个比较器&#xff0c;可以生成4组频率不同的PWM波。每个PWM生成模块&#xff0c;对应生…

wordpress建立数据库连接失败 数据库删除恢复

查遍一整天&#xff0c;终于找到解决办法。 问题 wordpress登录突然显示建立数据库连接失败。 解决办法 办法一 通用的解决办法就是网上一大堆的核对conf文件的配置对不对&#xff0c;数据库连接对不对什么的&#xff0c;网上到处都是。 但是我都试过后&#xff0c;还核对…

mycat双主高可用架构部署-MySQL5.7开启双主双从

MySQL5.7服务器IP是192.168.31.209及192.168.31.210 1、创建复制用户 a、192.168.31.210:3306 create user repl% identified by 123456; grant replication slave on *.* to repl%; b、192.168.31.210:3307 create user repl% identified by 123456; grant replication sla…

[数据集][目标检测]血细胞检测数据集VOC+YOLO格式2757张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2757 标注数量(xml文件个数)&#xff1a;2757 标注数量(txt文件个数)&#xff1a;2757 标注…

Java笔试面试题AI答之JDBC(4)

文章目录 19. 解释JDBC的ResultSet是什么 &#xff1f;20. JDBC编程有哪些不足之处&#xff0c;MyBatis是如何解决这些问题的&#xff1f;JDBC编程的不足之处MyBatis如何解决这些问题 21. 简述JDBC 能否处理 Blob 和 Clob &#xff1f;1. JDBC对Blob和Clob的支持2. 处理Blob和C…

新的Ubuntu服务器如何启用root账号和配置静态ip以及开启ssh服务

1、首先启用root 账号 1、先用默认账户登录进服务器 2、使用命令启用root账号 sudo passwd root3、输入以上命令并回车后会让重新输入root 账号密码 重新设置root账户密码即可。 4、切换到root账号 su root5、输入刚才设置的root账号密码并回车&#xff0c;此时可以看到用户…

微服务之间的安全通信

在微服务架构中&#xff0c;服务之间的通信是系统的核心部分。然而&#xff0c;由于服务的分布式和独立性&#xff0c;确保它们之间的通信安全至关重要。如果没有适当的安全机制&#xff0c;微服务系统可能会暴露在各种网络攻击和安全漏洞中。本文将讨论几种常见的微服务间安全…

电脑安装Winserver2016无法安装网卡驱动(解决办法)

因为工作原因&#xff0c;需要找一台PC机作为服务器去测试软件性能问题&#xff0c;故需要在PC机上安装网卡驱动。 电脑品牌&#xff1a;联想 型号&#xff1a;天逸510Pro-18ICB 操作系统&#xff1a;WindowsServer2016&#xff08;桌面版&#xff09; 问题&#xff1a;系统…