No122.精选前端面试题，享受每天的挑战和学习

news2024/10/7 18:27:46

在这里插入图片描述

文章目录

    • 1、vue中key的作用
    • 2、如何让vue页面重新渲染
    • 3、组件之间通信方式
    • 4、vue为什么要mutation、 action操作
    • 5、插槽、具名插槽、作用域插槽
    • 6、用set求两个数组的交集
    • 7、树用js如何实现？

1、vue中key的作用

在Vue中，key的作用是帮助Vue识别每个VNode，并在其复用时提供更准确的更新策略。

当Vue用v-for更新已渲染的元素列表时，它会尝试复用已存在的DOM元素来最小化操作。

通过给每个VNode节点添加一个唯一的key属性，Vue就能更准确地追踪每个节点的身份，从而在列表更新时，提供更高效的DOM操作。

具体来说，key的作用体现在以下两个方面：

在这里插入图片描述

1. 识别VNode：
通过key属性，Vue能够区分不同VNode节点的身份，从而避免不必要的DOM操作。如果没有key属性，Vue会使用一种近似算法来尽量复用相似的元素。但这种近似算法有时会出错，导致DOM状态与预期不符。而使用key属性，每个节点都有一个唯一的标识，Vue可以准确地识别出新增、更新或删除的节点。

2. 提供更准确的更新策略：
在列表更新时，Vue会进行更新策略的判断，通过比较新旧节点，确定是否需要进行DOM操作。当没有key属性时，Vue只会比较节点的顺序和类型，从而可能导致错误的复用。而有了key属性后，Vue可以在更新时识别出新增、更新或删除的节点，从而精确地执行相应的更新策略，避免不必要的DOM操作。

总而言之，通过给每个VNode节点添加一个唯一的key属性，可以帮助Vue更准确地识别节点的身份，提供更高效的DOM操作，从而优化Vue的更新性能。

2、如何让vue页面重新渲染

在Vue中，页面重新渲染可以通过以下几种方式实现：

在这里插入图片描述

1. 数据的变化：
通过修改Vue实例中的数据，Vue会自动触发页面的重新渲染。当数据发生变化时，Vue会比较新旧数据，并更新相关的DOM元素。可以使用Vue的响应式数据劫持机制，或使用Vue提供的数据修改方法如$set、$delete来修改数据，从而触发页面的重新渲染。

2. 强制手动更新：
在某些情况下，可能需要手动触发页面的重新渲染。Vue提供了$forceUpdate方法来强制组件进行重新渲染。这个方法会直接调用组件的render函数，从而重新渲染组件的VNode树。

3. 使用v-if或v-show指令：
在模板中使用v-if或v-show指令控制元素的显示与隐藏，当指令表达式的值发生变化时，元素会被重新渲染。使用v-if可以彻底销毁和重建元素，而使用v-show只是通过CSS来控制元素的显示与隐藏。

4. 使用$nextTick：
当需要在更新后立即对页面进行操作时，可以使用$nextTick方法。$nextTick会将回调函数推入到下一次DOM更新循环结束之后执行，从而保证在DOM更新之后进行操作。

需要注意的是，Vue的响应式机制会自动追踪数据的变化并重新渲染相关的部分，所以在大多数情况下，只需要修改数据即可触发页面的重新渲染。不建议频繁使用$forceUpdate或手动操作DOM来实现重新渲染，因为Vue的响应式机制可以更高效地处理页面的更新。

3、组件之间通信方式

在 Vue 中，组件之间有几种常见的通信方式：

  1. 父子组件通信：父组件通过 props 属性向子组件传递数据，子组件通过事件机制（$emit）向父组件发送消息。

  2. 子父组件通信：子组件通过 this.$emit 发送一个事件，父组件通过监听该事件（@事件名）接收子组件发送的消息。

  3. 兄弟组件通信：可以使用一个共享的父组件，通过父组件作为中间人，将数据传递给其他兄弟组件。

  4. 跨级组件通信：如果组件之间没有直接的父子关系，可以使用 provide/inject 机制来实现跨级组件通信。

  5. 使用事件总线：可以通过在 Vue 实例上创建一个事件总线来实现任意组件之间的通信。

  6. 使用 vuex：Vuex 是 Vue 的状态管理模式，它可以在不同的组件之间共享数据，并实现组件间的通信。

选择适合你的具体应用场景的通信方式，可以更好地组织和管理你的组件之间的交互。

4、vue为什么要mutation、 action操作

Vue 中引入了 Vuex 来进行状态管理，其中包括了 mutation 和 action 的操作，主要有以下几个原因：

在这里插入图片描述

  1. 可追踪状态的变化：Vuex 采用单一状态树的方式来管理应用的状态，所有的状态变化都通过提交 mutation 来进行，这样就可以很方便地追踪状态的变化记录。而直接在组件中修改状态，可能会导致状态变得不可预测和不可追踪。

  2. 提供了一种严格的状态变更方式：mutation 是同步操作，它们是唯一能够修改 Vuex 存储状态的方式，这个限制确保了状态变更的可追踪性和可预测性。而如果直接在组件中对状态进行修改，可能会导致一些难以排查的 bug。

  3. 支持异步操作：有些状态的变化可能需要进行异步的操作，例如发送网络请求或者执行定时器等。在这种情况下，就可以使用 action 来进行异步操作，并在操作完成后提交 mutation 来修改状态。这样可以提高应用的性能和用户体验。

  4. 分离业务逻辑与状态变更：将业务逻辑和状态变更操作分离开来，有助于解耦和组织代码逻辑。mutation 主要负责修改状态，而 action 则用于处理复杂的业务逻辑，它可以包含多个 mutation 的操作，从而将业务逻辑封装成可重用的函数。

总的来说，mutation 和 action 的操作可以帮助我们清晰地描述应用中的状态变化和业务逻辑，并提供了一种可追踪和可预测的状态管理方式。这有助于提高代码的可维护性、可测试性和可扩展性。

5、插槽、具名插槽、作用域插槽

插槽描述
普通插槽为组件预留一个可以插入内容的位置，在组件中使用 <slot></slot> 标签定义插槽。
具名插槽为组件预留多个可以插入内容的位置，并给每个插槽起一个名称，在组件中使用 <slot name="name"></slot> 定义具名插槽。
作用域插槽在插槽中可以访问父组件传递的数据并进行渲染，允许子组件将数据传递给父组件，在父组件中定义插槽时使用 <template v-slot:name="props"></template> 或者缩写语法 #name="props"。

具名插槽和作用域插槽是普通插槽的扩展，它们提供了更灵活的插槽使用方式。

  • 使用插槽，我们可以在组件内定义一些预留的位置，然后在组件外部传入内容进行渲染，这样可以增加组件的可复用性和灵活性。

  • 使用具名插槽，我们可以为组件预留多个插槽位置，并且可以根据具体需求插入到对应的位置上。

  • 使用作用域插槽，我们可以在插槽内部访问父组件传递的数据，并进行渲染，这对于一些需要动态传递数据的情况非常有用。

总的来说，插槽、具名插槽和作用域插槽都是 Vue 提供的一种灵活的组件间通信方式，它们可以帮助我们更好地组织和管理组件的结构和逻辑，提高组件的可复用性和灵活性。

6、用set求两个数组的交集

使用 ES6 的 Set 数据结构可以很方便地求两个数组的交集。
以下是使用 ES6 的 Set 求两个数组的交集的示例代码：

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const set1 = new Set(array1);
const set2 = new Set(array2);

const intersection = new Set([...set1].filter(item => set2.has(item)));

const result = Array.from(intersection);

console.log(result); // [3, 4, 5]

以上代码中，我们首先创建了两个数组 array1 和 array2，然后分别将它们转换为 Set 对象 set1 和 set2。接下来，我们使用 filter 方法和 has 方法对 set1 中的元素进行筛选，只保留那些同时存在于 set2 中的元素，从而得到交集。最后，我们将交集转换为数组形式，通过 Array.from 方法进行操作。

最终，result 数组中将包含两个数组的交集 [3, 4, 5]。

7、树用js如何实现？

在JavaScript中，可以使用对象和类来实现树的数据结构。

定义一个树节点的类，其中包含一个值和一个数组，用于保存子节点：

class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
}

然后定义一个树的类，其中包含一个根节点：

class Tree {
  constructor() {
    this.root = null;
  }
}

添加一些方法来操作树的节点，比如添加子节点和遍历树：

class TreeNode {
  // ...

  addChild(value) {
    const newNode = new TreeNode(value);
    this.children.push(newNode);
  }
}

class Tree {
  // ...

  traverse(callback) {
    function traverseNode(node) {
      callback(node);
      node.children.forEach(traverseNode);
    }

    if (this.root) {
      traverseNode(this.root);
    }
  }
}

创建一个树的实例，并添加一些节点：

const tree = new Tree();
tree.root = new TreeNode("A");
tree.root.addChild("B");
tree.root.addChild("C");

最后，可以使用traverse方法遍历树：

tree.traverse(node => console.log(node.value));

这将输出树的节点值：

A
B
C

这是一个简单的树的实现，你可以根据需要扩展它，添加其他方法和属性。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

性能评估之旅：软件测试的神秘工具与方法论

性能评估之旅：软件测试的神秘工具与方法论

引言&#xff1a;性能评估的重要性 在当今的软件开发领域&#xff0c;性能评估已经成为了一个不可或缺的环节。随着用户对于软件响应速度和稳定性的要求越来越高&#xff0c;如何确保软件在各种环境下都能稳定运行&#xff0c;成为了每一个开发者和测试者必须面对的问题。性能…
阅读更多...
【App端】uni-app使用echarts和百度地图api

【App端】uni-app使用echarts和百度地图api

目录 前言方案一&#xff1a;echarts百度地图获取百度地图AK安装echarts和引入百度地图api完整使用代码 方案二&#xff1a;echarts地图和柱状图变形动画完整使用代码 前言 近期的app项目中想加一个功能&#xff0c;展示全国各地的某一数据统计情况&#xff0c;想来想去&#…
阅读更多...
搭建Android自动化python+appium环境

搭建Android自动化python+appium环境

一. 需要软件 1. JDK:JAVA安装后配置JDK环境 2. SDK:SDK下载后配置adb环境 3. Python:pyhton语言 4. Pycharm:python脚本编译工具 5. Appium-python-client:pyhton中的库 6. Appium客户端 二. 搭建步骤 1. 配置JDK环境 ①. 下载安装java: https://www.oracle.com/jav…
阅读更多...
windows下Mysql安装配置教程

windows下Mysql安装配置教程

Mysql下载 在官网下载mysql community Server https://dev.mysql.com/downloads/mysql/ 可以选择下载压缩包或者MSI安装程序 使用压缩包安装 MySQL 压缩包安装通常需要以下步骤&#xff1a; 1. 下载 MySQL 安装包 你可以从 MySQL 官网上下载适合你系统的 MySQL 安装包&am…
阅读更多...
Android软键盘弹出，底部的控件随之弹出，但整体布局不会向上弹

Android软键盘弹出，底部的控件随之弹出，但整体布局不会向上弹

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.co…
阅读更多...
浅析Linux 物理内存外碎片化

浅析Linux 物理内存外碎片化

本文出现的内核代码来自Linux4.19&#xff0c;如果有兴趣&#xff0c;读者可以配合代码阅读本文。 一、Linux物理内存外碎片化概述 什么是Linux物理内存碎片化&#xff1f;Linux物理内存碎片化包括两种&#xff1a; 1.物理内存内碎片&#xff1a;指分配给用户的内存空间中未…
阅读更多...
基于 xhr 实现 axios

基于 xhr 实现 axios

基于 xhr 实现 axios 上面我们讲到二次封装 axios &#xff0c;但是现在我们尝试完全脱离 axios&#xff0c;自己实现一个 axios&#xff0c;由于 axios 底层是基于 xhr 做了二次封装&#xff0c;所以我们也可以尝试一下。 xhr 二次封装 src/plugins/xhr.js /*** 请求拦截器…
阅读更多...
为什么说ASEMI-GBU812是新能源专用整流桥

为什么说ASEMI-GBU812是新能源专用整流桥

编辑-Z GBU812是一种新能源专用整流桥&#xff0c;它在新能源领域扮演着重要的角色。下面是关于为什么说GBU812是新能源专用整流桥的几个原因&#xff1a; 首先&#xff0c;GBU812采用了新能源技术&#xff0c;具有高效能、低功耗和环保等特点。在新能源领域&#xff0c;特别是…
阅读更多...
Git中smart Checkout与force checkout

Git中smart Checkout与force checkout

Git中smart Checkout与force checkout 使用git进行代码版本管理,当我们切换分支有时会遇到这样的问题&#xff1a; 这是因为在当前分支修改了代码&#xff0c;但是没有commit,所以在切换到其他分支的时候会弹出这个窗口&#xff0c; 提示你选force checkout或者smart checko…
阅读更多...
以udp协议创建通信服务器

以udp协议创建通信服务器

概念图 创建服务器让A,B主机完成通信。 认识接口 socket 返回值&#xff1a;套接字&#xff0c;你可以认为类似fd 参数&#xff1a; domain->:哪种套接字&#xff0c;常用AF_INET(网络套接字)、AF_LOCAL(本地套接字)type->&#xff1a;发送数据类型&#xff0c;常用 …
阅读更多...
sql 索引

sql 索引

如果表已经存在大量数据&#xff0c;突然需要插入大量数据&#xff0c;因为原来有索引结构&#xff0c;所以大批量数据写入&#xff0c;会导致维护索引&#xff0c;浪费资源。 可以先把表的索引删除&#xff0c;待数据插入完成&#xff0c;再创建索引。 这样可以节约资源和时间…
阅读更多...
SAP物料分类账的简单理解

SAP物料分类账的简单理解

SAP物料分类账的简单理解 转自 SAP物料分类账的简单理解 - 知乎 一、SAP物料分类账理解 物料分类账&#xff0c;简称ML&#xff08;material ledger&#xff09;&#xff0c;其基本用途是可以用八个字概括“还原成本”、“还原库存”。即通过月底运行物料分类账&#xff0c;…
阅读更多...
Docker修改容器ulimit的全部方案及各方案的详细步骤

Docker修改容器ulimit的全部方案及各方案的详细步骤

要修改Docker容器的ulimit&#xff08;用户资源限制&#xff09;&#xff0c;有以下三种方案&#xff0c;每个方案的详细步骤如下&#xff1a; 方案一&#xff1a;在Dockerfile中设置ulimit 打开您的Dockerfile。在文件中添加以下命令来修改ulimit&#xff1a;RUN ulimit -n …
阅读更多...
时空数据挖掘精选23篇论文解析【AAAI 2023】

时空数据挖掘精选23篇论文解析【AAAI 2023】

今天和大家分享时空数据挖掘方向的资料。 时空数据挖掘是人工智能技术的重要分支&#xff0c;是一种采用人工智能和大数据技术对城市时空数据进行分析与挖掘的方法&#xff0c;旨在挖掘时空数据&#xff0c;理解城市本质&#xff0c;解决城市问题。 目前&#xff0c;时空数据…
阅读更多...
世纪互联收入增长放缓,低于华尔街预期,全年业绩指引令投资者失望

世纪互联收入增长放缓,低于华尔街预期,全年业绩指引令投资者失望

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 全年业绩指引令投资者失望 世纪互联&#xff08;VNET&#xff09;在发布了第二季度喜忧参半的财务业绩后&#xff0c;依然坚持了此前发布的2023财年业绩指引。 财报显示&#xff0c;虽然世纪互联第二季度的收入同比增长了6…
阅读更多...
谈判胜利！韩美合资厂平均薪资将提高25% | 百能云芯

谈判胜利！韩美合资厂平均薪资将提高25% | 百能云芯

据韩国时报报道&#xff0c;LG新能源与通用汽车在俄亥俄州成立的电动车电池公司Ultium Cells日前宣布&#xff0c;已与美国联合汽车工会&#xff08;UAW&#xff09;达成临时劳资协议&#xff0c;旨在将员工平均薪资提高25%。这一合作成为美国首个设有工会代表的电动车电池厂&a…
阅读更多...
C# 使用SnsSharp实现文件拖拽功能

C# 使用SnsSharp实现文件拖拽功能

CSDN下载地址&#xff1a;https://download.csdn.net/download/sns1991sns/88041637 gitee下载地址&#xff1a;https://gitee.com/linsns/snssharp 技术优势&#xff1a; 不仅使用简单&#xff0c;还可解决由于系统管理权限问题导致的文件拖拽无响应问题。 使用举例&#x…
阅读更多...
一篇文章全面解析Modbus协议

一篇文章全面解析Modbus协议

Modbus 协议是应用于电子控制器上的一种通用语言。通过此协议&#xff0c;控制器相互之间、控制器经由网络&#xff08;例如以太网&#xff09;和其它设备之间可以通信。它已经成为一通用工业标准。有了它&#xff0c;不同厂商生产的控制设备可以连成工业网络&#xff0c;进行集…
阅读更多...
Postman接口自动化测试之——批量参数化（参数文件）

Postman接口自动化测试之——批量参数化（参数文件）

Postman接口请求中的参数引用格式&#xff1a;{{参数名}}参数文件只适用于集合中。 创建参数文件 以记事本举例&#xff0c;也可以使用其他编辑器&#xff1b;第一行参数名&#xff0c;用半角逗号&#xff08;英文逗号&#xff09;隔开&#xff0c;第二行为参数值&#xff0c…
阅读更多...
nvm安装electron开发与编译环境

nvm安装electron开发与编译环境

electron总是安装失败&#xff0c;下面说一下配置办法 下载软件 nvm npmmirror 镜像站 安装nvm 首先最好卸载node&#xff0c;不卸载的话&#xff0c;安装nvm会提示是否由其接管&#xff0c;保险起见还是卸载 下载win中的安装包 配置加速节点nvm node_mirror https://npmmi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023