- 博客(58)
- 收藏
- 关注
RSS订阅原创 VSCode内网安装插件
介绍内网或离线环境下安装VSCode插件的两个方式：1. 通过互联网VSCode下载插件VSIX文件（推荐）；2. 通过Visual Studio Marketplace GitHub
2025-06-08 19:16:39
569
原创 JS的传统写法 vs 简写形式
总结了 JavaScript 中条件判断与数组操作的多种简写技巧。包括三元运算符、短路求值、空值合并运算符（??）、可选链操作符（?.）以及逻辑赋值运算符（||=、&&=）、数组去重（Set）、展开运算符（...）、reduce/find/map/filter等方法
2025-06-08 18:16:52
1121
原创 Vue2部分知识点和注意项
本文总结了Vue开发中的核心知识点：1）data函数作用域与this指向；2）事件修饰符功能对比；3）watch监听属性的四种写法；4）class/style动态绑定的两种语法；5）v-if与v-show的底层差异；6）key在虚拟DOM中的作用及使用规范；7）数组/对象响应式修改的限制与解决方案；8）v-model常用修饰符；9）v-html的XSS风险与防护；10）v-cloak解决渲染闪烁问题；11）组件命名规范；12）props配置的三种写法；13）全局方法扩展方式。涵盖Vue数据管理、模板语法、性
2025-05-29 18:40:25
1145
原创 vue3+Pinia+element-plus 后台管理系统项目实战记录
本文记录了基于Vue3+Pinia+Element Plus的后台管理系统开发实战要点： Vue3特性：采用provide/inject实现全局API注入，使用defineProps/defineEmits进行父子组件通信 Pinia状态管理：配置数据持久化插件pinia-plugin-persistedstate 实用技巧： 表格删除时页码处理逻辑 富文本编辑器集成(wangEditor) Excel导出(xlsx+file-saver实现) PDF预览打印方案(vue3-pdf-app) 常见问题： r
2025-05-28 20:57:09
1068
原创 Vite Vue3 配置 Composition API 自动导入与项目插件拆分
利用 unplugin-auto-import 插件实现 Vue Composition API 的自动导入，减少重复引入 ref、reactive 等操作。详细说明了插件的安装配置方法，并展示了如何优化拆分 vite.config.js 文件结构，将其模块化为 plugins.js、auto-import.js 和 compression.js 等独立文件，提升项目可维护性。
2025-05-28 20:14:33
495
原创 vue-cli 构建打包优化（JeecgBoot-Vue2 配置优化篇）
摘要： 针对jeecgboot-Vue2项目的Webpack打包优化，通过多项措施将首次打包时间缩短至2分30秒，二次构建仅需25秒。关键优化包括： CDN引入外部依赖，减少构建体积； 持久化缓存（filesystem类型）提升二次构建效率； 多线程构建（thread-loader）利用多核CPU加速； 资源压缩（Terser、CSS Minimizer、图片压缩）； 移除prefetch及Moment.js冗余语言包。配置中新增缓存策略、CDN自动注入、压缩插件集成，并在生产环境移除console，显著提
2025-05-21 18:42:42
429
原创 前端开发笔记与实践
前端技术要点概览 核心内容 Vue开发规范与响应式机制 组件命名推荐大驼峰式 Vue3采用Proxy实现全面响应式，相比Vue2的defineProperty性能更优 响应式流程包含Observer、Watcher、Dep和Scheduler CSS/SCSS进阶技巧 新型视口单位(vmin/vmax/dvh)解决适配问题 SCSS循环实现动态样式生成 JavaScript高级特性 数组判断和操作的安全方法 垃圾回收机制及内存管理 TypeScript类型技巧 通过keyof和typeof实现类型约束 提取
2025-05-16 18:12:55
821
原创 浏览器渲染原理
浏览器在接收到HTML文档后，会通过一系列步骤将其转换为用户可见的网页。这个过程包括：解析、样式计算、布局（reflow）、分层、绘制（Repaint）、分块和光栅化、合成和显示。每个阶段都紧密相连，上一阶段的输出成为下一阶段的输入。
2025-05-14 20:36:22
473
原创 尚硅谷-硅谷甄选项目记录
本文总结了Vue3项目开发中的常用配置和组件交互技巧。主要内容包括：1）基础配置部分，详细介绍了路径别名、SCSS全局变量、SVG图标使用的配置方法；2）路由相关操作，如编程式导航、路由过渡动画和鉴权方案；3）父子组件交互方式，重点讲解了defineEmits的使用。同时还提供了Element Plus组件库中Menu菜单折叠图标和默认激活菜单问题的解决方案。这些配置和技巧涵盖了Vue3项目开发中的常见需求，可帮助开发者快速搭建和优化项目结构。
2025-05-07 18:29:06
962
原创 JavaScript ES6+ 最佳实践
本文总结了现代JavaScript（ES6+）对传统JavaScript代码的优化改进，涵盖9个关键方面：1）变量声明从var到let/const，解决作用域问题；2）函数定义引入箭头函数，简化语法并解决this绑定问题；3）异步编程从回调地狱演进为Promise和async/await；4）参数处理用剩余参数替代arguments对象；5）面向对象编程采用类语法替代构造函数；6）字符串处理使用模板字符串代替拼接；7）对象和数组操作采用展开运算符；8）数组迭代用高阶函数替代for循环；9）模块系统从...
2025-05-07 17:11:13
878
原创 Vue常用优化
本文总结了Vue项目的性能优化策略：1）合理使用key属性，避免索引作为key；2）冻结不需要响应化的大对象；3）函数式组件减少开销；4）计算属性缓存频繁使用的数据；5）表单输入使用lazy模式减少更新；6）保持对象引用稳定；7）v-show替代频繁切换的v-if；8）延迟加载分批渲染；9）keep-alive缓存组件状态；10）长列表采用虚拟滚动；11）图片懒加载；12）SSR优化首屏；13）自定义指令优化DOM操作；14）打包时进行代码分割、按需引入和压缩。这些方法可显著提升Vue应用的运行效率和加载速
2025-05-04 10:20:09
1022
原创 开发环境解决Secure Cookie导致302重定向
本文分析了前端开发中调用接口返回302重定向的问题。主要原因是后端设置了Secure Cookie但通过HTTP传输，导致浏览器拦截Cookie存储，引发重定向循环。
2025-03-30 13:38:40
1072
原创 JavaScript对象属性描述符
JavaScript属性描述符提供了对对象属性的精细控制，通过定义value、writable、enumerable和configurable等特性，可以精确管理属性的读写、枚举和配置行为。它支持创建计算属性（get/set），保护属性不被修改（writable:false），隐藏属性（enumerable:false），还能用于框架实现数据绑定和响应式系统。在类定义中，属性描述符可用来实现只读属性、密封对象等特性，为现代JavaScript开发提供了强大的元编程能力，是高级功能实现的基础工具之一。
2025-02-24 22:44:46
390
原创 vue2和vue3响应式的区别
Vue 2使用Object.defineProperty实现响应式，存在无法监听属性增删、需重写数组方法、性能较差等局限性。Vue 3改用Proxy实现响应式，可直接监听属性增删和数组变化，具有惰性监听特性，性能更优。
2025-02-24 20:43:01
913
原创 vue3响应式数据原理
Vue 3 响应式系统改用 Proxy 替代 Vue 2 的 Object.defineProperty，性能更优且功能更强。核心原理是通过 Proxy 拦截对象操作，结合 Reflect 执行默认行为，并利用 effect 函数追踪依赖、Dep 类管理依赖。当属性被访问时自动收集依赖，修改时自动触发更新。相比 Vue 2，Proxy 能监听整个对象而无需递归遍历属性，支持更多操作类型，代码也更简洁高效。
2025-02-24 20:37:24
543
原创 vue2响应式数据原理
Vue 2 响应式系统基于 Object.defineProperty 实现数据监听，通过依赖收集和派发更新机制，在数据变化时自动更新相关视图。核心原理包括：1) 通过 getter 收集依赖函数；2) 在 setter 中触发更新；3) 对数组采用原型方法重写实现响应式。
2025-02-24 20:35:28
585
原创 输入汉字（合成文字）input 触发优化
优化输入法（如中文输入法）输入合成文字（拼音等）时的体验，避免在输入法组合输入过程中误触发搜索，确保搜索只在输入法组合输入结束后触发。
2025-02-16 11:34:56
111
原创 多行文本溢出裁剪（兼容版）
（1）webkit内核方案，使用-webkit-box属性设置行数限制；（2）兼容性方案，利用浮动元素和负边距控制显示区域。
2025-02-15 20:10:18
415
原创 通用节流函数
特性防抖（Debounce）节流（Throttle）定义在指定时间内，只有最后一次触发才会执行函数。在指定时间内，函数最多执行一次。适用场景输入框搜索、窗口调整大小等需要等待的操作。滚动事件、鼠标移动等需要控制频率的操作。执行次数在触发事件停止后执行一次。在触发事件期间，按固定间隔执行多次。节流函数通过限制函数的调用频率，能够有效减少不必要的计算和资源消耗，特别适用于需要频繁触发但不需要每次响应的场景，比如滚动事件、窗口调整大小等。
2025-02-15 12:08:22
371
原创 防抖函数（this透传、参数传递）
防抖函数通过限制函数的执行频率，能够有效减少不必要的计算和资源消耗，从而提升性能和用户体验。防抖函数通过限制函数的执行频率，能够有效减少不必要的计算和资源消耗，从而提升性能和用户体验。
2025-02-15 12:04:52
1073
原创 SCSS 模块化
SCSS模块化存在三种方式：（1）SCCC运行时模块化（@inport）；（2）传统SCSS编译时模块化（@import）（3）新版SCSS模块化方案（@use）
2025-02-09 15:33:33
397
原创 js常用操作符
JavaScript中的各类运算符及其用法。包括条件运算符、空值合并运算符和可选链运算符等；算术运算符如加减乘除；赋值运算符如+=、-=等；比较运算符如严格相等和松散相等；逻辑运算符包括与或非；位运算符用于二进制操作；类型运算符如typeof和instanceof；以及其他运算符如扩展运算符和delete等。
2025-01-18 11:53:09
1082
原创 vite静态资源动态访问
解决工程化项目中，动态路径的静态资源（如图片）无法正常显示。解决方法包括：1. 使用静态import引入资源，但需单独导入；2. 动态import会导致每个资源生成单独JS文件；3. 将资源移至public目录，但会失去文件指纹；4. 使用new URL对象生成动态路径。
2025-01-05 15:07:36
293
原创 vue3-watchEffect异步依赖收集
Vue3中使用watchEffect时，若在异步操作后再访问响应式变量，会导致依赖收集失效。解决方法有：1) 先更新再执行异步操作；2) 提前显式引用触发依赖收集。
2025-01-05 12:45:28
528
原创 vue3 ui组件子组件封装v-model绑定props modelValue
Vue3中子组件直接绑定modelValue时会破坏单向数据流，导致更新失效。解决方案包括： 拆分v-model为显式传值与事件； 使用computed属性结合getter/setter； 通过computed+代理+封装实现复杂对象响应； 推荐使用vueuse的useVModel工具； Vue3.4新特性defineModel简化声明（最优方案）
2025-01-04 11:09:09
1169
原创 webpack 打包配置
处理html、css、js、vue、jsx、图片等文件、压缩处理好的文件、分割压缩好的文件、路由懒加载、开启缓存和热更新、开启多线程打包
2024-06-27 10:11:01
1383
原创 vue-cli 项目打包优化-基础篇
根目录下新建【.env.development】【.env.production】【.env.test】，生产、开发、测试环境。参考文档：https://cli.vuejs.org/zh/guide/mode-and-env.html。参考视频地址：https://www.bilibili.com/video/BV1wt421p7yM。参考配置：https://cli.vuejs.org/zh/config。，根据与 后端 或 运维 沟通修改。根据不同环境做相应的配置。
2024-06-27 09:52:10
610
原创 前端奇淫巧技
参考视频地址：https://www.bilibili.com/video/BV1ey421q7Py。 JS诞生的时代，进行简单的表单验证，设计之初，JS做相对简单的任务； 主要原因：多线程环境下DOM元素进行操作可能导致复杂的线程调度问题。 HTML5的时候，开启了多线程的大门，注意事项：创建全局变量可能导致命名冲突。浏览器自动匹配、提升安全性、代码简洁。上的一个属性，在PC端和H5端存在。不会引入多余的dom结构。省去声明第三个变量的方法。未测试，可通过后端解决。
2024-06-27 09:09:02
506
原创 VScode代码片段自动转图标
在VScode编辑器中，编辑html、vue等文件时，特定代码片段（'token/xxx'等）自动转图标显示，按住“ctrl+鼠标左键”还可跳转“https://icones.js.org/collections”，个人感觉干扰代码编写，强迫症受不了
2024-05-16 09:52:04
885
原创 vue2 和 vue3 区别
参考链接：https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html。参考链接：https://v3.cn.vuejs.org/api/computed-watch-api.html#watcheffect。API参考链接：https://staging-cn.vuejs.org/api/#onmounted。参考网址： https://github.com/vuejs/rfcs/pull/271。
2024-04-12 17:31:35
728
1
原创 TypeScript
基本定义num = 18# 简写形式，声明和赋值同时进行可以简写，默认第一次的类型#声明类型，但是不会赋值# js项目动态类型易出bug的地方，参数没有类型限制# 参数类型限制，返回值类型限制# 限制变量在两个值之间选择，以此类推# 限制变量的类型，只能在两个类型之间选择，以此类推# any 表示任意类型，声明不指定默认为any，可以赋值给其他已定义类型的变量let sty# unknown 表示未知的类型，不可以赋值给其他已定义类型的变量，推荐使用unknown代替any。
2024-04-12 17:04:39
1390
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人