小刘加油！-优快云博客

原创 Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听

watch监听在vue2和vue3中的用法详解（全）Vue2中的watch用法Vue3中的watch用法首先写一个vue页面<template> <h1>监听一个属性</h1> <p>求和：{{ sum }}</p> <button @click="sum++">点我加1</button><br /> <h2>监听多个属性</h2> <p>{{ tips

2021-10-26 16:19:41 3605 1

原创 uniapp使用悬浮窗组件添加点击事件的处理方法以及拖拽出界的问题

使用该组件时调用< dragball : x = 300 : y = 300 image = "图片路径" @handleBall = "事件名" > < / dragball >在下面的methods中定义该方法。由于代码是在公司的云桌面里开发的，不能粘贴赋值到自己的电脑上，所以接下来的代码我用截图的形式来展示，自己手敲太浪费时间点击事件的原理主要就是组件之间的传值，如果这点不懂的童鞋可以去看下Vue官方文档，介绍还是挺详细的。

2020-08-22 16:21:01 8923 5

原创【随笔四】JavaScript 中的 rest

某次开发中，看到项目代码中用到了rest这个参数，但又没看到在哪里定义或者传入，当时没太理解它的意思，查了下资料才恍然大悟。含义也很简单，写个随笔记录下。

2023-04-21 12:14:10 1268 1

原创后端接口返回近万条数据，前端渲染缓慢，content Download 时间长的优化方案

按照上面的方法，页面初始化的时候确实比之前快了很多，大概有一倍左右。不过直接跳转到最后一页，接口还是会有些缓慢。不过，对于上万条数据，也很少有人会直接跳转到最后一页进行搜索，毕竟上面也是有筛选条件可以进行筛选的。总而言之，也算是完成了性能优化。前端性能方案有很多种，比如 SSR，只是目前暂时还未了解，以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种，正常来说，我内心还是比较偏向于 gzip 压缩处理的。

2023-03-23 00:17:12 10267 9

原创【随笔三】一篇文章理清节流、防抖以及应用场景

防抖和节流很多人特别容易把概念混倄，今天，一篇文章教你彻底理清其中的概念及应用场景。先说共同点防抖和节流函数都是为了限制函数的执行频次，从而优化函数触发频率过高导致的响应速度跟不上触发频率，导致出现延迟、卡顿的现象以及其他错误。是常见的前端性能优化技巧。但应用场景不同防抖防抖通常用来处理一些高频触发的事件，比如用户连续点击按钮、输入框频繁输入。当用户点击按钮过快，导致重复点击，多次调用接口；或者输入框的文字一变化就调用接口，导致多次调用接口。

2023-03-21 00:39:32 832

原创 chatGPT 加入候补名单时，提示：Oops! We ran into an issue while authenticating you.

加入。

2023-03-17 12:22:19 36097 119

原创 avue-crud组件的行内编辑实现失焦保存，在没有右侧操作栏的情况下

cell、blulr，我在官网配置文档上并没有看到。可能是官网文档进行了升级，记得去年的时候官网配置项文档并不是如今这个样子，里面的配置项很多。不要以为官网上没有该属性的介绍就真的没有，要勇于质疑，自己可以先写着试下，总归会发现新大陆的。其次，avue 框架确实可以极大的提高开发者的效率，减少页面开发工作，但前提是你要熟悉 avue框架的各个配置项。因为它的配置项实在是太多了，如果不是太熟悉，真的不如使用 element 进行开发来的方便。

2023-03-16 11:08:54 1778 2

原创【随笔二】useReducer详解及其应用场景

useReducer实际上是 useState 的升级版，都是用来存储和更新 state，只是应用的场景不一样。一般情况下，我们使用useState就足够项目需要了，不多当遇到以下场景时，使用useReducer 会更好些。

2023-03-09 18:13:08 2317

原创 useEffect 通过 form.getFieldValue(‘xxx‘) 监听 Form表单变化

Form 内置方法，不是响应式的（即不是一个state），由其设置或者获取的值，不会触发UI更新，只能对变更的field进行刷新。想要对其进行监听也很简单，将其变成一个state即可。

2023-03-08 16:20:39 5376 1

原创【随笔一】forwardRef 包裹的子组件尽量不要与 FC泛型搭配使用

的一个泛型，表示函数式组件，是 function component 的缩写。于是换了种写法，子组件使用普通的函数式写法，此时搭配。包裹，方便获取子组件的特定方法和状态。可以让函数组件定义更加清晰和类型安全。此时，父组件上绑定 ref 不会报错。开发中，遇到了这样一个问题：使用。绑定在DOM上面不应该会报错才对。定义一个函数式组件，然后使用。首先，我们先了解下什么是。

2023-03-07 23:56:18 781

原创 redux 详解（带你学习store、action、redux）

react 用了一年多，但一直对 redux 了解不多，一直想找个机会彻底掌握它，所以有了今天这篇文章，如果你也对 redux 不够了解，那么可以仔细阅读下，相信会有所收获。

2023-02-24 23:13:32 2609 2

原创 echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线

配置项，可以看出，series 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 label 标签，一个在内部展示，一个在外部展示，就可以完美解决这种情况。其中，formatter 是标签内容的格式器，用于转换格式。series 中（即其中的一个对象中），只能设置一个label。属性是用来配置外部指示线（第一段、第二段）的长度及样式的。不过也好解决，通过查看 echarts 官网。查了下 Echarts 官网文档，需要配置。

2023-02-22 11:36:46 17389 4

原创 cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总

不过最后我的电脑还是正常了，操作也很简单：在windows 系统更新里面，恰好有一个新更新的win11 版本，我进行更新重启之后，这些问题就莫名其妙的解决了。看来果然如微软工程师所说：是系统漏洞，不过估计他也没有想到的是：这么快就将这个漏洞给修复了，哈哈哈哈。如果大家电脑出现了问题，建议大家可以联系对应电脑的服务热线，转人工客服或者联系微软人工客服。一般情况下，都会进行免费且正规的指导和远程调试。

2023-02-17 23:11:42 6468 6

原创 vite 项目切换不同依赖项的分支，运行加载缓慢问题的解决方案（Pre-bundling dependencies）

当我们在首次使用yarn dev命令启动vite时，或者切换分支，依赖项发生变化时会发现项目启动时相当的慢，大概要十几分钟，而且控制台终端打印了如下信息：遇到这种情况时，真的是相当恶心，有时候项目启动完成要花费半小时的时间，着实是浪费时间。知道了问题出在哪里，就能对症下药，问题也会很快妥善解决。

2023-02-13 23:32:38 3450

原创【前端笔试题二】从一个指定数组中，每次随机取一个数，且不能与上次取数相同，即避免相邻取数重复

本篇文章记录下我在笔试过程中遇到的真实题目，供大家参考。

2023-02-12 18:24:31 1343

原创【前端笔试题一】：解析url路径中的query参数

本文记录下在笔试过程中的前端笔试编程题目，会持续更新。

2023-02-09 18:05:29 3762

原创 js中浅拷贝与深拷贝的区别及方式

JavaScript 中存在两大数据类型基本数据类型保存在栈内存中，按值存放的，可以直接按值访问，即引用数据类型保存在堆内存中，引用数据类型的变量，是一个浅拷贝和深拷贝是指在复制一个对象时，拷贝的深度不同。

2023-02-07 11:47:36 2167

原创前端js实现根据文件url批量压缩下载成zip包

项目开发中，产品经理提了这样一个需求：将系统中的附件实现批量打包下载功能。本来系统中是有单个下载及批量下载功能，现在应业务方的需求，需要多加个批量打包下载。初步设想是：由后端编写接口实现。但后来经过思考：现在系统中已经有文件的url地址了，何必让后端写接口重复，前端处理就行。

2023-02-04 11:22:22 6871 4

原创前端js 实现文件（附件）下载、批量下载方法汇总

文件下载在前端系统里面算是个比较常见的功能，尤其是在管理系统里面。本篇文章我记录下前端通过后端返回的文件url 实现文件下载的几种方法，包含批量下载。

2023-02-03 11:51:54 5638 2

原创 useContext 详细解析及与 createContext 搭配使用解决祖孙多层组件之间传参问题

创建一个Context对象，当React渲染一个订阅了这个Context对象的组件，这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时，其才会生效。

2023-01-31 10:49:01 1420

原创 react hooks 中使用 Echarts图表中遇到的问题及相关配置

项目开发中，需要做一个报表功能，看了下UI图，初步定下使用echarts，不过之前使用echarts都是在Vue2和Vue3框架下开发，第一次使用开发 echarts，将流程及一些相关配置写个随笔记录下。

2023-01-30 19:02:25 1837

原创 react 实现表格列表拖拽排序

在项目开发中，遇到这样一个需求：需要对表格里面的数据进行拖拽排序。

2023-01-30 17:53:34 4563

原创 Jenkins 构建前端代码失败，报错：The package “esbuild-linux-64“ could not be found, and is needed byesbuild

前段时间，使用公司的 Jenkins 构建测试环境时，突然构建失败，查看了构建日志，显示没有找到这个包。但奇怪的是，代码在本地运行没问题，甚至使用yarn build命令进行本地打包也正常，只是构建环境失败。如下如所示：这个报错出现的就很莫名其妙，上午的时候，代码还在正常构建，下午就突然不行了，而且这个包貌似这段时间也没下载过，也没有关注过。但没办法，测试环境还是要构建的，项目需要上线，必须经过构建，毕竟是打工人嘛，只能想办法解决。于是在网上冲浪寻找答案。网上的两种方法，无非是删除目录，重新。

2023-01-30 15:35:55 4317 2

原创 react-router-dom 降低版本的两种方法

react-router-dom 如今已经升级到了V6版本，相比较V5版本，变化还是挺大的。如今使用命令来下载，会自动下载V6版本，V6版本会在接下来的一段时间内成为主流。不过对于用习惯了V5版本的开发者而言，自然是有些不习惯。本篇文章就记录下如何降低为v5版本的两种方法。

2022-12-23 21:03:56 1470 1

原创 vite + react +typescript 环境搭建，小白入门级教程

使用vite创建项目，node 版本需要大于12.0.0，可以使用node -v查看自己当前的node版本。

2022-12-23 20:44:44 3164 1

原创 select组件切换tags时，联动的select组件内容清空

记录在项目开发中遇到问题的解决方案，方便以后遇到快速解决！在该react hooks 页面中，图纸计划附件表格是一个子组件。其中【单体】和【专业】两个下拉select选择框，数据来源依赖于【厂区】。后端给的接口，必须要先选择【厂区】，才能获取到【单体】数据；选择【单体】后，才能获取【专业】数据。提测后，测试提了一个bug：**数据进行修改，页面渲染数据完成后，切换不同单体，专业数据应清空

2022-12-09 10:57:10 822

原创【爬坑之路一】windows系统下更新升级node版本【亲测有效】

项目开发中，需要升级node版本。本着不想卸载 node 再重新安装的原则，因为node 的环境配置以及各种相关配置有些繁琐，所以就想着使用命令的方式进行升级。在网上找了一些升级 node 的命令，最常见的是安装 node 的 n 模块，是用来管理 node 版本的。在 cmd 窗口输入安装命令后，窗口报错：使用这个命令，意思很简单：强制安装，也很有效，确实安装上了，但新的问题又来了：真是要吐了，竟然还失败，原因也莫名其妙，明明都已经安装成功了。现在想想，刚开始使用命令安装失败也不是没有原因。

2022-12-02 19:17:36 24425 9

原创 vue-cli、create-react-app等常用工具安装、更新、查看版本等操作命令汇总

vue-cli、create-react-app等常用工具安装、更新、查看版本等操作命令汇总

2022-11-30 23:23:24 1502

原创 React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解

在一个父组件中，我们想要获取到其中的节点元素或者子组件实例，从而直接调用其上面的方法。Class 类组件和函数组件是两种不同的写法。父组件使用useRef创建一个 ref 对象，将这个 ref 对象赋给子组件的 ref 属性。子组件使用forwardRef包裹自己，允许作为函数组件的自己使用 ref。然后使用钩子函数，在该钩子函数的第二个函数参数中返回一些状态或方法，这个被返回的状态或方法就可以被父组件访问到。父组件使用创建的 ref 对象的current属性获取子组件暴露出的状态或方法。

2022-11-30 14:56:16 6976

原创操作树形数据方法封装：获取树形数据的某个值、给树形数据每层添加属性

对于常规数组来说，我们想要获取某一个值，或者给每层添加属性，只需要使用fileter、map等等的方法，相对来说比较简单。树形数据不同于常规的数组数据，不能确定其内部包含多少个子节点，即children。所以我们在操作树形数据的时候，不同于常规数据。其实操作树形数据也很简单，其核心就是递归。

2022-11-20 22:59:45 1635 2

原创 treeSelect树组件设置父节点禁用

项目开发中需求方提了这样一个需求：下拉框数据是树形结构，但父节点禁止点选，只能点击子节点。毫无疑问，选用的是组件库的treeSelect组件。但该组件默认每一级节点都可以进行选择，不符合需求。于是开始看API，发现treeDatadisabled，可以控制节点是否禁用。属性即可。

2022-11-20 22:43:24 13065 10

原创 React hooks中 useState踩坑-=--异步问题

useState作为最常见的一个hook，在使用中总是会出现各种坑，最明显的就是useState更新异步的问题。比如我们把接口返回的数据，使用useState储存起来，但是当后面去改变这个数据的时候，每次拿到的都是上次的数据，无法实时更新。或者我们在函数内部使用 setState ，然后立即打印 state，打印的结果还是第一次的state 的值。比如下面的代码实例。

2022-11-20 22:20:39 7151

原创【异步系列五】关于async/await与promise执行顺序详细解析及原理详解

前段时间总结了几篇关于异步原理、Promise原理、Promise面试题、async/await 原理的文章，链接如下，感兴趣的可以去看下，相信会有所收获。本篇文章准备一个代码实例来阐述async/await、promise、setTimeout（宏任务、微任务）之间的执行顺序，做一个最终总结。理论终究是理论，枯燥难懂，对于程序猿来说，最好的还是代码实例。所以就找了一个非常有代表性的面试题。目标：不是写出正确的执行顺序，而是说清楚每一个步骤，为什么这么执行。

2022-11-08 18:22:26 4045 4

原创【异步系列四】async await 原理解析之爱上 async/await

异步编程一直是 JavaScript 中比较麻烦但相当重要的一件事情，一直也有人在提出各种方案，试图解决这个问题。从回调函数到 Promise 对象，再到 Generator 函数，每次都有所改进，但都不彻底，直到出现了 async 函数，很多人认为它是异步操作的终极解决方案。但很多人对于async 和 await 的原理却一知半解，只知道可以解决异步问题，知其然，不知其所以然。所以，本篇文章对于async、await 的原理进行详细解释，希望可以帮到大家。有疑问，欢迎留言评论。

2022-10-21 16:49:18 5438

原创【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序

上一篇文章详细说明了关于 Promise 的概念以及执行顺序，Promise 作为 JavaScript 中的关键特性，无论是在日常工作中还是面试中，我们都必须掌握它。前段时间在网上看到了一些关于 Promise 的面试题，质量很好，在这里整理到下面，并加上我一些自己的见解，欢迎斧正！

2022-09-23 16:42:36 7657 8

原创【异步系列二】Promise原理及执行顺序详解

Promise 是 javascript 中非常重要的一环，熟悉它是必须的，而且在面试中也常常会问到相关面试题。在了解PromiseJavaScript 中异步编程原理解析Promise 是 JavaScript 的一个内置对象，在语法上是一个构造函数，该构造函数只有一个参数，是一个函数。初始化时，这个函数在构造之后会直接被异步运行，所以称之为起始函数。起始函数包含两个参数： resolve 和 reject.

2022-09-22 12:27:51 10912 3

原创【异步系列一】一篇文章理清JavaScript中的异步操作原理

javaScript 语言的执行环境是单线程。也就是指一次只能完成一个任务，如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务。这种模式虽然实现起来比较简单，执行环境相对单纯，但是只要一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往是因为某一段 JavaScript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法运行。为了解决这个问题，JavaScript 语言将任务的执行模式分为两种：同步和异步。本篇文章主要说一下异步。

2022-09-21 12:14:17 1024

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

前端React中函数式hooks组件中关于ref使用介绍，以及forwardRef 与 useImperativeHand详解

infitiy浏览器插件

Postman-win64-5.5.2-Setup.exe

前端开发工程师取色小工具

空空如也