- 博客(126)
- 收藏
- 关注
原创 Vue 3.2+ 引入的指令 v-memo 性能优化
v-memo是Vue 3.2+引入的性能优化指令,通过依赖项控制组件渲染时机。它适用于复杂计算、高频更新等场景,仅在指定依赖变化时重新渲染,避免不必要的虚拟DOM计算。与v-once不同,v-memo支持动态更新。使用时需注意依赖项必须为响应式数据,避免过度使用。该指令通过条件渲染优化性能,特别适合部分内容静态、部分动态的组件。
2025-08-08 10:03:24
322
原创 Vue的常用修饰符
Vue修饰符是简化指令操作的特殊后缀,通过点(.)前缀实现特定功能。常用修饰符包括:.lazy(延迟更新)、.trim(去空格)、.number(转数字)、.stop(阻止冒泡)、.prevent(阻止默认事件)等。按键修饰符如.enter,鼠标修饰符如.left/.right,以及.sync用于父子组件通信。示例展示了修饰符的应用:v-model.trim自动去除输入空格,@click.stop阻止事件冒泡,@keyup.enter监听回车键,:title.sync实现双向绑定。这些修饰符能有效减少冗余代
2025-07-31 22:29:25
425
原创 vue 中 props 直接解构的话会数据丢失响应式
摘要:Vue 3中直接解构响应式对象会丢失响应性。通过toRefs或toRef可保持解构属性的响应式特性。toRefs将整个响应式对象转换为ref对象集合,toRef则为单个属性创建ref引用。代码示例显示直接解构props时修改无效,而使用toRefs后解构的属性仍能响应变化。关键注意点包括:保持响应同步、性能无影响,以及避免直接解构响应式对象。这些方法特别适用于处理组件props或reactive对象的属性解构场景。
2025-07-31 19:20:39
399
原创 Vue 将推出「无虚拟DOM」版本,又是新的前端框架趋势?
随着 React 和 Vue 这些前端框架的爆火,他们的渲染方式,虚拟DOM,也跟着火了起来,大家都认为这是一种高性能批量更新DOM的方式但是近一两年有不同的声音,觉得虚拟DOM反而是渲染性能的累赘,所以也出了一些无虚拟DOM的框架,比如。老生常谈的话题,Vue 的基本渲染流程,如果是使用虚拟DOM的话,这里只是说一下大概流程,如果想要仔细了解的话,可以去看我以前的 Vue 文章。由于 Vue Vapor 现阶段是实验阶段,还不太好在项目中去使用,但是官方提供了一个在线的演练网站,可以在上面去体验。
2024-11-30 22:59:32
1235
原创 前端代码注释
代码注释是代码中很重要的一部分,或者说是一个前端项目中很重要的一部分,因为它能起到解释代码的作用,所以注释越多的项目,说明这个项目的可维护性更高,更加地健壮。
2024-10-30 22:27:57
1263
原创 浏览器的渲染过程
简单的说就是浏览器将 HTML 代码解析出来,把解析出来后的结果画到页面上,相当于就是,告诉浏览器,第一个像素点上应该呈现什么颜色,依次类推,占满整个页面静态,为什么说是静态的呢,因为当用户发生交互,页面变化(滚动、刷新、跳转等),使页面改变后,浏览器得重新计算整个页面的像素,可想而知,是一个庞大的工作量。
2024-10-24 18:45:40
921
原创 极速 JavaScript 打包器:esbuild
esbuild是一个快速、可扩展的JavaScript打包器和压缩器,它的目标是成为最快的打包器。它使用Go编写,可以在几乎瞬间内完成大多数项目的构建。在本文中,我们将深入了解esbuild,并探讨其如何实现如此出色的性能。esbuild 是一款基于 Go 语言开发的 javascript 构建打包工具,相比传统的构建工具,主打性能优势。同样规模的项目,使用 Esbuild 可以将打包速度提升 10 - 100 倍,这对广大一直饱受 Webpack 缓慢打包速度折磨的开发人员来说,简直就是福音。
2024-09-30 21:41:05
1268
原创 分享 12 个超级实用的前端工具,可能就是你一直在寻找的!
我们在开发公司项目或者个人项目的时候,想要用到一些很酷炫的效果,但是靠我们自己又想不出来,那就需要一个动画案例库来辅助我们了~用的最多的是 uiverse.io,地址是:https://uiverse.io/啥动画都有,只有你想不到的,没有做不到的~包含且不仅限于:按钮、表单、输入框、弹框等等。开发前端,遇到了基础问题,第一时间就得查文档,哪个文档最靠谱呢?可以在这个平台上去随意画你的思路、记录、心得,没有那么多条条框框,主打的就是一个自由地址:https://excalidraw.com/
2024-09-30 21:10:49
1283
原创 总结 Vue3 组件管理 12 种高级写法,灵活使用才能提高效率
总结一下vue 组件的高级写法~Vue 的组件有很多写法,合适的场景选择合适的写法,才能更好地提高开发效率~而不是死定硬背。
2024-08-31 23:55:42
1741
原创 12 个强大而实用的 JavaScript 动画库
无论你是经验丰富还是刚刚入门的前端开发人员,强大又包罗万象的 JavaScript 动画库都能帮助你将创意愿景变为现实。
2024-08-31 23:42:40
4870
1
原创 JavaScript的「手写」知识点,扫盲啦!
7、setTimeout 实现 setInterval。8、setInterval 实现 setTimeout。JavaScript的「手写」知识点。1、实现原生 AJAX 封装。10、curring 函数。9、compose 函数。2、实现 new 过程。13、DOM 转 对象。14、对象 转 DOM。15、判断对象环引用。
2024-07-31 23:06:04
313
原创 vxeTable反转表格
如果遇到列为动态值,行相对固定的情况,这种时候就需要用到行列反转,这里我以vxeTable表格为例。直接上代码 {... row };});});
2024-06-29 15:01:06
826
原创 深入浅出:npm常用命令详解和实践
npm 是 Node.js 的包管理器,用于管理 Node.js 应用的依赖关系和版本。以上就是一些常用的 npm 命令。
2024-06-29 14:42:45
1064
原创 vxeTable怎么导出excel文件
在 vxe-table 中,columnFilterMethod 方法用于在导出数据时过滤列。方法接收一个参数,这个参数是一个对象,包含了列的信息。如果这个方法返回 true,那么这一列会被导出;如果返回 false,那么这一列会被过滤掉,不会被导出。如果你想过滤掉操作列,你可以在 columnFilterMethod 方法中检查列的 field 或 title 属性,然后根据这个属性的值来决定是否过滤这一列。例如,如果你的操作列的 field 属性是 ‘operation’。
2024-06-12 16:10:09
2866
1
原创 值得一试的 CSS 技巧
有时,我们可能会将子元素上的z-index属性设置得太小,从而导致元素最终隐藏在其父元素的背景后面。例如,要创建指向上方的箭头,则底部边框是彩色的,而左边框和右边框是透明的。例如:由于更高质量的图像与尺寸成正比,因此拥有高分辨率设备但网络较差的用户将提示浏览器决定是否提供分辨率较低的图像。如果支持-webkit-image-set,则背景图像将是优化的图像,即支持的MIME类型的图像,更适合用户设备的分辨率。下面是运行中的dark/light模式,模拟了用户在dark模式和light模式之间切换的效果。
2024-05-22 11:33:24
1024
原创 ES7、ES8、ES9、ES10、ES11、ES12都增加了哪些新特性?
includes()方法用来判断一个数组或字符串中是否包含一个指定的值返回值: 如果包含返回true,否则返回false。Async functions 是async声明的函数,async 函数是 AsyncFunction 构造函数的实例,其中允许使用await关键字。如果你想要添加新的属性,并且在上一行已经使用了尾后逗号,你可以仅仅添加新的一行,而不需要修改上一行padStart()用另一个字符串填充当前字符串。padEnd()方法会用一个字符串填充当前字符串(如果需要的话则重复填充)。
2024-05-20 11:24:34
925
原创 vxeTable在vxe-modal提示工具栏无法关联表格
在vxe-modal组件中,因为页面加载完,vxe-modal并没有渲染出来,一般需要特定的条件才能显示,一般就是点击才能出现模态框,所以初始化时,一般vxe-modal都是隐藏状态,更深一点就是DOM结构并没有渲染出来,所以created钩子调佣以上方法关联不到。正确的做法就是在打开模态框时,再调用以上的方法,这样等vxe-modal显示出来后,就可以找到dom节点进行绑定关联。
2024-04-30 23:12:40
1178
1
原创 JavaScript 中实现请求并发控制
在以上代码中,充分利用了 Promise.all 和 Promise.race 函数特点,再结合 ES7 中提供的 async await 特性,最终实现了并发控制的功能。这行语句,会等待 正在执行任务列表 中较快的任务执行完成之后,才会继续执行下一次循环。假设有 30 个待办任务要执行,而我们希望限制同时执行的任务个数,即最多只有 3 个任务能同时执行。当正在执行任务列表 中的任何 1 个任务完成后,程序会自动从 待办任务列表 中获取新的待办任务并把该任务添加到正在执行任务列表 中。
2024-03-17 22:33:25
586
原创 npm报错,显示certificate has expired
从报错信息就可以知道是因为之前设置的淘宝镜像已过期,解决方法就是要把之前设置的淘宝镜像改成新的。
2024-03-14 20:23:29
5138
2
原创 Vue3使用JSX/TSX
JSX & TSXJSX是Facebook专门为react发明的一种新的类似于XML格式的语言,它 是JavaScipt的语法拓展。它使用XML标记的方式去直接声明界面,然后再利用编译器转换成JS语言。但是Vue 早就能使用 JSX 去编写页面了~并且现在大部分都是使用 Typescript 来写项目,所以 TSX 会用的更多JSX构建更快,但是性能较差template构建更慢,但是性能较好。
2024-02-29 18:21:47
1355
原创 vue-cli3/webpack打包时去掉console.log调试信息
开发环境下,console.log调试信息,有助于我们找到错误,但在生产环境,不需要console.log打印调试信息,所以打包时需要将console.log调试信息过滤清除。
2023-12-29 15:46:28
3606
原创 <router-view> can no longer be used directly inside <transition> or <keep-alive>
【代码】<router-view> can no longer be used directly inside <transition> or <keep-alive>
2023-12-29 11:21:36
1817
原创 iview表格固定列横向滚动条无法拖动问题
在使用iview的表格组件时,遇到了设置固定列表格后滚动条无法拖动的问题,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。在组件内直接加下面样式,即可解决问题,记得加。
2023-12-25 17:56:18
1514
原创 iconfont拓展iview图标库
阿里图标Iconfont图标-功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。是阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
2023-12-22 10:30:28
1061
原创 vue3项目,按需引入Element-plus ElMessage 样式丢失
将ElMessage等都加入到.eslintrc globals字段里面。将上述代码导入import部分的代码去掉,直接调用。此时会出现样式丢失问题。
2023-12-18 13:40:19
894
原创 pinia安装,持久化,统一导出
Pinia 和 Vuex 一样是专门为 Vue 设计的状态管理库,允许跨组件或页面共享状态,Api 设计比 Vuex 更简单易学,且同时支持 Vue2.0 和 Vue3.0。
2023-12-18 11:41:15
657
原创 TypeScript中的基本类型
TypeScript(计算机编程语言)简称:TS,是JavaScript 的超集。简单来说就是:JS 有的 TS 都有。JS写的代码在TS的环境下都能跑;对了,TS是微软设计并发布的。
2023-12-12 17:27:00
196
1
原创 ES6 Promise的用法,async/await异步处理同步化
promise是解决异步的方法,本质上是一个构造函数,可以用它实例化一个对象。对象身上有resolve、reject、all,原型上有then、catch方法。promise对象有三种状态:pending(初识状态/进行中)、resolved或fulfilled(成功)、rejected(失败)pending。它的意思是 “待定的,将发生的”,相当于是一个初始状态。创建Promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态。
2023-12-03 21:59:55
1584
1
原创 后端Long型数据传到前端js后精度丢失的问题
这是因为JS是弱语言,前端接收数字类型参数为number,最大接收长度为16位,超出长度则会丢失精度,而JAVA的Long类型长度为19位,所以传输到前端的后三位精度丢失,所以我们解决该问题的思路就是:把java里的Long类型转换为String返回给前端。生成long类型主键ID,存入数据库,前端获取到数据后,要执行一个更新操作(updateById),但这时会出现无法成功更新的情况!造成原因:看网上资料说:js的number类型有个最大安全值,即。位出现精度丢失,16位以后的数字都会转换成0。
2023-11-29 17:54:13
720
原创 alova—轻量级请求策略库
Alova官网Alova—github官网传统promise式的请求库很好地解决了请求发送的问题,只是…它们只是单纯的请求发送工具alova像它们的武器装备,通过alova可以获得更强大的能力,不管您喜欢使用axios、superagent,还是浏览器的fetch-api,alova都可以完美兼容。
2023-11-22 15:38:02
2037
原创 微信小程序:This Mini Program cannot be opened as your Weixin version is out-of-date.
升级基础库3.2.0,然后PC端整个小程序都打不开了,点击小程序提示,并且点击按钮没有反应。
2023-11-22 14:58:14
2399
原创 微信小程序Error: ENOENT: no such file
当编译的时候 会提示找不到这个文件(index),但是确信项目目录里已经删除了该页面路径,并且app.json的pages列表中也导致这个问题应该是:新添加了文件,后面删除了或者修改了文件名,导致微信开发工具找不到该文件报错:微信小程序ENOENT: no such file or directory, open 'D:/project/huanjing-mp/miniprogram/
2023-11-17 17:46:32
3102
原创 图片转换成base64格式的优缺点
Base64,顾名思义,就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+“、”/“一共64个字符的字符集,(另加一个“=”,实际是65个字符,至于为什么还会有一个“=”,这个后面再说)。任何符号都可以转换成这个字符集中的字符,这个转换过程就叫做base64编码。图片转换成base64格式的优缺点。
2023-11-16 17:48:16
1467
完全免费AI作文生成器-输入标题就能一键生成
2023-11-10
免费短视频去水印,图片去水印
2023-09-14
APP软件应用下载导航网站源码/分享下载页引流导航网站源码带后台版
2023-05-09
数码商城&后台管理系统
2023-05-06
美团项目+配套后台管理系统
2023-05-06
Vue3疫情后台管理平台
2023-05-06
仿网易严选,一共四个页面(首页,详情页,404页,登录页),使用HTML+CSS+JS编写
2023-03-27
外卖CPS小程序源码,有后台,前端三套模板,功能丰富,带安装教程
2023-03-28
爱心表白源码,浪漫炫酷的前端表白代码,浏览器可直接打开-附教程
2022-12-17
Vue.js devtools
2022-11-16
web网页期末大作业-html,css,js-共有4页面
2022-10-28
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅