qq_22841387的博客

JavaScript 的事件循环遵循一个简单但高效的流程：1. **执行同步代码**：事件循环首先会执行执行栈中的同步任务。同步任务依次入栈、执行、出栈，直到栈为空。 2. **处理微任务**：执行栈清空后，事件循环会优先处理微任务队列中的任务。==如果微任务在执行过程中产生了新的微任务，这些任务也会立即被执行，直到微任务队列为空。== 3. **处理宏任务**：当微任务队列清空后，事件循环会从消息队列中取出 ==一个宏任务== ，将其放入执行栈中执行。宏任务执行完毕后，事件循环再次

在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。

从用户输入URL到页面最终渲染，整个过程涉及网络通信（DNS查询、TCP连接）、资源加载（HTML、CSS、JavaScript）、解析与执行（构建DOM、CSSOM、执行JavaScript）、渲染优化（布局、绘制、合成）。这一系列步骤的高效执行依赖于现代浏览器的渲染引擎和多种性能优化技术，以提供流畅的用户体验。优化网页性能的核心在于减少不必要的重排和重绘操作，尤其是在复杂的应用场景中，频繁的布局计算和绘制会显著影响用户体验。

防抖是一种避免函数在高频事件中多次执行的技术，通过将函数执行延迟到事件停止触发后的指定时间点。其核心思路是在事件触发后开始计时，如果在计时期间再次触发事件，则重新开始计时，直到事件不再频繁触发时，才执行目标函数。防抖通常适用于那些频繁触发但只需要处理最终结果的场景。举例说明：在用户输入搜索词的过程中，每一次输入都会触发input事件，但显然没必要每次都发送请求，只有当用户停止输入后，系统才发送一次最终的请求。这就是防抖技术的应用场景。节流是一种通过限制函数执行频率来优化性能的技术。

拖拽的实现依赖于鼠标或触摸事件的监听，关键事件包括mousedownmousemove和mouseup。判断拖拽的是子元素还是父元素可以通过和 DOM 层级关系实现，使用contains()方法可以判断元素的父子关系。事件冒泡是事件从目标元素逐级向父元素传播的机制，可以通过阻止冒泡。事件委托可以通过将事件绑定在父元素上，利用冒泡机制处理子元素事件，有助于简化监听器管理，特别适合动态生成的子元素。

在使用modal框和其他很多情况需要对boolean类型的值进行修改时，代码都比较简单，冗余，所以我希望能封装成一个hook函数。这样的代码就十分精简了，需要打开modal框时调用。

蓝桥云课庆冬奥需要举行一次抽奖活动，我们一起做一个页面提供给云课冬奥抽奖活动使用。

当然，如果你只需要一个简单的版本也可以直接用下面这个代码。当然，我们不单单只对文件进行处理，通常在这里还可以进行。通常，我们在下载文件时只需要告诉后端我需要文件即可。为方面后续所有文件的下载，所以采用了直接拦截。到后端则需要使用post版本的下载文件。若需要JS版本，只需要将对应的。若需要在下载文件时，

如果需要通过v-model绑定，则需要设置对应的值。例如如果需要在input中显示的话，则需要设置对应的值。当前我有一个date-picker的组件，会自动计算相差时间后，显示对应的差值时间。通常情况下，我都需要手动去复制下面的差值，但是现在我希望能结合。已经实现时间差的自动计算，可以直接添加一个按钮。，因为这里我是直接通过。

当前我需要针对项目的打包进行分析，删除一些无用的包，提高系统打包速度和相关资源加载速度。windows环境下，不支持NODE_EV = production。，我希望能知道打包过程中哪些文件占用较大。当前生成dist包大小为。

当我们系统趋于完善时，任何修改都不能直接部署到线上，而是需要先部署在测试服务器后，测试完成后，部署至线上服务器，也就是说，当前项目涉及到三个环境。因为我们项目中已经对axios进行二次封装了，因此直接使用了。这里请求的接口名字可以自行定义，这里我直接使用了。在翻看官方文档时，我们发现了我们需要用到的命令。的文件形式对不同的mode进行区分。默认情况下，三个文件必须有以下内容。在项目的根目录处，创建三个文件。后续使用时，使用你定义的即可。以下方法基于vue-cli。

在开发过程中，我们经常需要遍历一个对象，执行一些操作。通常，我们会用 JavaScript 的原生方法，如 `Object.entries`、`Object.keys` 或 `Object.values` 来遍历对象。然而，在 TypeScript 中，这些方法可能不能完全利用对象的类型信息，因为它们返回的是 `string` 类型的键或值，而不是对象的实际键类型或值类型。

当项目越来越大，依赖的包越来越多，如果此时我们需要删除依赖后重新安装的话，会花费很多时间。现在就能实现秒删依赖的效果了。首先npm全局安装一个。

通过使用 Vue.js 的插槽和作用域插槽，我们可以在组件之间实现灵活的数据传递和内容插入。具名插槽和作用域插槽提供了丰富的功能，使得组件的使用更加灵活和强大。在实际开发中，合理使用插槽可以大大提高组件的复用性和代码的可维护性。

现在我需要对modal模态框进行封装抽取，对于每一个模态框都当做一个组件需要时，调用即可。\父组件呈现结果通过interface和Emit限制对应父组件传值的类型与事件对应传参与返回值父组件中使用聚合数据和方法为避免多个modal框一致命名，可作为各自模块导入使用直接使用去访问对应的属性和方法即可...

当前设计出来的页面为需要同时使用背景图片和颜色去混合解决方法通过伪类元素插入图片，颜色透明平移位置向x轴的负方向左移60px字体缩进两个字符通过vw控制字体个数，但是需要注意的是，放大之后字体个数就不再是两个了实现字体下划线效果——仿掘金添加下方border即可通过css画出菱形一行排列两个通过grid布局，设置grid为两列放大后，响应式放大放大到一定程度后，分为一列布局...

现在我需要实现左右布局，于是很自然的直接使用float进行流动到左侧和右侧，但是却出现了下面的问题我在开始实现页面前，首先进行布局，本来团队理念和成员风采本来属于两个模块，但是现在出现成员风采下方的所有模块都上移了，占了位置其实我之前就是想通过float布局，但是出现了上述的问题，所以我现在切换解决左右布局的思路，通过布局最后呈现的效果

问题描述现在我正在实现一个页面，字体是比较特殊的TecentSans W7.ttf，无法直接使用css样式中对应的font-family去使用解决方法1.下载字体文件首先需要下载你所需要的显示的特殊字体文件，注意后缀名为.ttf2将ttf文件放入项目中这里我是在assets文件夹下新建了一个font文件夹3.定义font-family再在font文件夹中新建index.css文件，定义font-family@font-face { font-family: 'TencentSa

问题描述当前项目中出现背景颜色出现没有补满整个页面的状况，仅仅只是由于页面去扩大范围解决方案：使用flex-grow进行自动分配剩余空间的相对比例flex-grow - CSS（层叠样式表） | MDN (mozilla.org)在全局对应的布局中，添加样式flex-grow:1最终呈现的效果...

问题描述当前我们需要使用xe-table进行表格的编辑，但是官网的实例都是直接通过一个值一个值的渲染上去，代码不优雅，我想通过v-for实现表格的编辑vxe-table v4 编辑表格解决方法为方便使用，直接给出代码<vxe-table border show-overflow :column-config="{ resizable: true }" ref="xTable" :data="tableData2" :edit-config="{ trigger: 'dblclick',

问题描述当前项目需要进行打包，但是由于eslint代码规范的影响，当我们打包的时候，会进行代码规范检测，不允许代码中出现console.log解决方法1.打开搜索点击VScode左侧的搜索2.开启正侧模式点击搜索框最右侧，打开正侧模式3.输入正侧表达式console\.log\(.*替换成空格点击替换所有确认替换...

问题描述当前我需要对一个Object数组进行批量处理日期，前人留下的解决方案是data.data.map((val) => { val.topicSetReleaseTime = moment( val.topicSetReleaseTime ).format('YYYY-MM-DD HH:mm:ss') })但是会出现与eslint中no-param-reassign冲突解决方法unitRequest.showUnitEmpowe

导入Naive UI的常用组件，并进行必要的设置。扩展window对象的类型定义，添加对加载条的支持。在路由守卫中实现加载条的显示和隐藏。配置路由守卫并集成到整个项目中。通过本文的步骤，我们学会了如何在Vue3项目中结合Naive UI和Vue Router，实现路由变化时的加载条效果。这个功能能够显著提升用户体验，减少用户在路由跳转过程中的等待焦虑。希望本文能对您有所帮助，您也可以根据实际项目的需求对加载条功能进行进一步优化和定制。

JavaScript 的禁用可以绕过很多前端的防护机制，但通过在 HTML 中使用标签，以及结合一些服务端和 CSS 的技巧，我们可以有效地减轻这种风险。当然，没有一种方法可以完全杜绝这种行为，但可以通过多种方法的组合，提高页面内容的安全性。希望本文提供的思路和解决方法，能帮助你更好地保护网页内容。

通过本文的讲解，我们了解了如何在 Vue.js 中监听不同的键盘事件，并针对每种常见按键给出了详细的代码示例和注意事项。希望这些内容能帮助你更深入地理解 Vue.js 中的键盘事件处理，从而为你的应用提供更好的用户体验。在实际项目中，合理使用键盘事件监听可以使用户操作更自然、更流畅。记得结合业务逻辑和用户体验需求来定制你的事件处理方案！

provide和inject的使用让我们可以避免层层嵌套的$parent和$root调用，让代码更具灵活性和可维护性。但是，作为开发者，我们应根据具体情况选择适当的方案，避免滥用。简单父子组件通信： 还是建议使用props和emit。跨多层级的组件通信： 可以考虑使用provide和inject。状态管理： 当状态复杂时，考虑引入 Vuex 或其他状态管理工具。通过provide和inject，我们可以更灵活地进行组件通信，增强代码的可读性和可维护性。

问题描述最近被问到一个问题，为什么输入框通过document获取不到值，明明我输入了值？大致情况就是他想通过onkeydown调用函数，函数内获取当前输入框的值，当输入的值等于回车时调用其他方法，但是他发现拿不到值，于是来问我一开始，我没有一下子想到结论，然后通过debug找到了问题，并且进行对原理的深挖大概还原一下问题的过程代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UT

问题描述现在我在编写代码的过程中，发现我有两个地方都使用到了相同的业务逻辑，所以很自然的想到封装成一个函数但是出现问题的是，我在异步函数中调用函数进行判断时，出现了时序问题也就是，直接跳过我的那个判断函数，直接执行下面的方法解决方法期初我可能以为是判断的值出现了问题，于是进行了各种修改之后发现，原来是异步的问题async Submit() { if(this.canSubmitAnwser() == 0) { return } await t

## 问题描述现在我遇到一个问题，就是我们的页面需要实现一个表格数据可以跨页选中后，传值调用接口但是现在每次都会清空状态## 解决过程期初想到很多`vuex`，`多选状态保存`，结果……仔细看了table的官方的文档一个属性直接解决问题### 方法一：官方文档![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

问题描述现在我需要实现监听用户在input上的输入，并实时的查询我尝试使用@change，但是发现element的input太慢了解决方法watch:{ queryTitle: { handler(val) { this.queryGroupName(val) } } },queryTitle：v-model绑定的属性名handler：不能修改！val：监听到修改的数据...

在这篇博客中，我们探讨了如何在前端处理后端传来的二进制音频数据，并将其转换为可播放的 MP3 文件。在解决过程中，我们尝试了多种方法，最终通过axios请求 URL 的方式成功实现了音频播放。这种方法简单直接，适用于多种场景，希望对大家有所帮助。

问题描述在我们开发的过程中通常遇到这种情况，从一个大的对象中抽取出两个或者多个小的属性进行融合以前我会直接使用循环去解决这个问题，直到今天我遇见了map解决方法使用map替代循环const filmItem = $('.box') filmItem.map( (item) => { const name: string = $(item).find('.hd').text() const comment =

问题描述在通过superagent获取到html内容之后，我想当然的获取节点进行操作，结果报错了，于是我就想把获取到的html内容打印出来，太长了……superagent为获取Html源码的node库于是有了这篇文章解决方法总的来说，就是调用node内置依赖（fs和path）storeFile(data: string){ const filePath = path.resolve(__dirname , '../data/get.html') fs.writeFileSyn

本文介绍了几种在 Vue 项目中自动打开浏览器的方法，包括通过修改、配置文件、使用 Webpack 插件，以及通过环境变量动态配置。不同的方法适用于不同的场景，开发者可以根据自己的项目结构和需求选择合适的方案。通过合理使用这些配置，可以大大提高开发效率，减少重复的手动操作，让你更专注于业务逻辑的开发。提示：在生产环境中，建议关闭自动打开浏览器的功能，以避免不必要的浏览器窗口弹出影响服务器性能。

1.进入路径随便打开一个文件目录，在此处输入路径C:\Users\Leo\AppData\Roaming\npm\node_modules2.查看所有当前电脑安装@vuecnpmnpmpnpm

let obj = { name : "张三", age : 19, sex : "男"}1.for-infor(let key in obj){ console.log(key , obj[key]);}以下三种方法都是获取key数组，然后通过key去遍历2.Object.keysObject.keys(obj).forEach((key)=>{ console.log(key , obj[key])})3.Object.getOwnPropertyNam

对数字排序const arr = [3, 5, 4, 2, 1]arr.sort((a,b) => a-b)console.log(arr)执行结果程序原理首先定义一个常量的数字的数组调用数组中的原型方法Array.prototype.sort() - JavaScript | MDN (mozilla.org)也就是说如果a-b<0，a在前面，所以排序方式为升序若想更改为降序，可改为b-a执行箭头函数()为传入的参数，即function()

## 问题描述`v-if`和`v-for`是互斥的，不能且不建议联用的，但是我又希望通过循环内部的元素，进行动态的渲染## 方法一：computed例如，现在我需要过滤一个列表中的项目，通过`isActive`进行渲染```vuev-for="user in users"v-if="user.isAcive"```这里就将users替换成一个计算属性比如(`activeUsers`）```jscomputed(){ activeUsers:function(){ ret

问题描述现在我是通过Vuex实现状态跳转的，但是现在就存在问题。如果我进行刷新，vuex也会重新加载。想了解如何使用vuex绑定导航栏状态可以看 我的这篇文章页面跳转，更改menu激活状态（vuex）解决方法因为每次vuex在刷新后都会丢失，所以想到存在sessionStorage中为什么要存sessionStorage？因为在关闭页面后sessionStorage会清空，用户需要再次进入就需要登录，这个时候vuex就起作用了，所以我们不需要存在localStorage具体代码

Object.keys(this.groupForm).forEach((key) => (this.groupForm[key] = ''))代码解释使用Object.keys获取当前所有的key【数组】参考地址：Object.keys() --MDN之后进行forEach循环，获取到每一个key后，置空即可使用实例现在我要对弹窗内容进行每次都进行置空操作，在关闭弹窗时调用即可closeDialog() { Object.keys(this.groupFor