- 博客(417)
- 资源 (13)
- 收藏
- 关注
RSS订阅原创 JavaScript中，为什么需要手动清理事件
JavaScript中手动清理事件监听器是重要的内存管理实践，主要原因是防止内存泄漏（特别是闭包引用导致）、避免重复绑定、提升性能、防止意外行为。现代开发中可使用AbortController、框架生命周期钩子（如React的useEffect清理函数、Vue的onUnmounted）自动清理。最佳实践包括成对使用add/removeEventListener、使用命名函数、在SPA路由切换和动态元素移除时特别注意清理。通过事件委托和WeakMap等现代工具可以更高效地管理事件监听器。
2026-01-22 17:53:35
37
原创 Vue 3 中移除了 $on、$off 和 $once 方法（附：Composables 组合式函数 使用详解）
Vue3移除了$on、$off和$once事件API，推荐使用更现代的替代方案。主要替代方式包括：1)使用mitt等第三方事件库；2)基于provide/inject和响应式状态模拟事件总线；3)采用组合式函数(Composables)共享状态；4)使用Pinia/Vuex状态管理工具；5)父子组件通过props/emits通信。Vue3鼓励使用明确的组件通信模式，如状态管理和组合式API，替代传统事件总线，提升代码可维护性。组合式函数是Vue3的核心特性，支持逻辑复用、类型安全和清晰的作用域。
2026-01-22 00:13:55
420
原创 Window 环境 谷歌浏览器 使用快捷键 打开 开发者工具 没反应
Chrome开发者工具快捷键失效的解决方案：1.检查快捷键冲突（关闭后台软件/扩展）；2.重置Chrome键盘设置；3.尝试替代快捷键组合；4.通过菜单手动打开；5.检查Fn键功能；6.重置Chrome或使用无痕模式；7.更新/重装Chrome；8.排查系统键盘问题；9.新建系统账户测试。建议按顺序排查，优先检查软件冲突和快捷键设置。
2026-01-22 00:04:22
555
原创 Pinia 使用详解（附：如何查看或区分项目使用的是 Pinia 还是 Vuex 4）
Pinia是Vue3官方推荐的状态管理库，具有轻量(约1kb)、完整的TypeScript支持等特点。安装后需创建Pinia实例并在main.ts中注册，通过defineStore定义store，包含state、getters和actions三部分。在组件中使用storeToRefs保持响应式，支持直接修改状态或通过actions操作。与Vuex4相比，Pinia更轻量、模块化设计更简洁。两者可通过检查package.json、目录结构和使用方式区分，虽可共存但不推荐长期使用。
2026-01-21 23:54:32
481
原创 CSS 新特性总结（附：var() 函数详解）
本文全面总结了CSS最新特性，涵盖选择器、布局、变量、动画等多个方面。重点包括：1）CSS Selectors Level 4新增的关系选择器(:has)、逻辑组合选择器(:is/:where)等；2）布局增强如Flexbox的gap属性、Grid子网格和Masonry布局；3）CSS变量(var())及其作用域、继承特性；4）容器查询、层叠层、嵌套等模块化特性；5）视图过渡、滚动驱动动画等交互效果。文章详细解析了每个特性的语法、应用场景和兼容性情况，并提供了最佳实践建议。
2026-01-21 23:28:19
416
原创 Vue 3 中使用 Mitt 事件总线
Vue3中使用Mitt事件总线实现组件通信。Mitt是一个轻量级的事件库，可作为全局事件总线替代方案。文章介绍了基本使用方法：创建事件总线实例、定义事件类型、在组件中发射和监听事件，并强调组件卸载时需取消监听以避免内存泄漏。还展示了高级用法：工厂模式创建多总线、封装Vue插件、CompositionAPI封装Hook。最后对比了Mitt与Vue原生通信方式的差异，建议谨慎使用事件总线，优先考虑props/emit或provide/inject等更明确的通信方式。
2026-01-21 23:05:49
389
原创 Preprocessor dependency “sass-embedded“ not found.
项目使用SCSS时出现"sass-embedded未找到"错误，原因是缺少依赖包。
2026-01-14 14:03:23
94
原创 Tailwind CSS vs Bootstrap vs ElementUI（ElementPlus） 全面对比表
本文对TailwindCSS、Bootstrap和ElementUI三大前端框架进行全面对比。
2026-01-14 10:33:14
511
原创 Tailwind CSS 常用特性总结表
本文总结了TailwindCSS的核心特性，包括六大类常用功能：布局（容器、Flex/Grid系统）、尺寸（宽高设置）、排版（字体、颜色）、样式（边框、圆角）、特效（阴影、透明度）和响应式设计（断点前缀）。特别提供了实用组合示例（如卡片、按钮组件）和状态伪类应用技巧。文章强调TailwindCSS"实用优先"的设计理念，建议采用原子化组合方式开发，并推荐从常用组件入手，结合开发者工具调试，逐步掌握响应式布局等进阶功能。最后指出可通过配置文件扩展主题，生产环境配合PurgeCSS优化性能。
2026-01-14 10:25:21
473
原创 在 Vue 3 项目中使用 Tailwind CSS
本文详细介绍了在Vue3项目中集成TailwindCSS的完整流程：1）通过Vite创建Vue3项目；2）安装TailwindCSS及相关依赖；3）配置tailwind.config.js和样式文件；4）在组件中使用实用类实现响应式布局、暗色模式等功能；5）推荐安装常用插件优化表单、排版等组件；6）提供性能优化建议和TypeScript支持方案。文章包含具体配置示例和常见问题解决方案，突出TailwindCSS在Vue3项目中的优势：快速开发、响应式设计简便、减少自定义CSS等，为开发者提供完整的集成指南。
2026-01-14 10:22:07
335
原创 Vue3 中 PropType 的使用指南
Vue3中的PropType是TypeScript类型工具，用于精确定义组件props的类型，特别适用于复杂类型。文章介绍了基本用法（简单类型、对象、数组、函数定义）、高级用法（联合类型、嵌套对象、函数类型）以及最佳实践（分离类型定义、泛型组件、组合式API配合）。重点注意事项包括：PropType仅提供TS类型检查、默认值需用工厂函数、required属性的类型匹配以及自定义验证器的使用。通过PropType可显著提升Vue3组件的类型安全性，是TS项目的必备工具。
2026-01-14 10:07:32
364
原创 VS Code 中代码模板修改 和 Vue 3 代码模板配置指南
本文介绍了Vue3代码模板的配置方法，主要包括：1. 创建用户代码片段的方法，通过vue.json配置文件定义常用模板；2. 提供了完整的Vue3组合式API模板、选项式API模板以及Pinia、Vue Router等配套模板；3. 详细说明了快捷片段配置、文件模板设置和项目特定配置；4. 推荐了Volar等Vue3开发必备扩展；5. 展示了企业级组件、UI框架集成和业务组件等高级模板的配置示例。这些模板可显著提升Vue3开发效率，适用于不同规模的项目需求。
2026-01-13 17:05:05
473
原创 Vue3单文件组件中，＜script setup＞、＜template＞和＜style＞三部分的顺序可以任意排列，但推荐将＜script setup＞放在最前面。
Vue3单文件组件中，<script setup>、<template>和<style>三部分的顺序可以任意排列，但推荐将<script setup>放在最前面。这种"逻辑优先"的组织方式符合"声明在前，使用在后"的阅读习惯，能获得更好的IDE支持和类型检查体验，也与Vue官方文档和社区约定保持一致。虽然顺序不影响编译结果，但建议在项目中保持一致的代码风格，优先考虑团队的可读性和协作效率。
2026-01-13 16:50:05
55
原创 Vue3 ＜script setup＞ 中，async 通常不能省略
在Vue3的<script setup>中，async关键字的使用取决于场景。
2026-01-13 10:19:14
347
原创 Vue3 ＜script setup＞ 中不需要使用 defineComponent
Vue3的<script setup>语法相比传统Options API写法更加简洁高效。
2026-01-13 09:28:47
542
原创 Vue3中的编译时宏详解（defineProps、defineEmits、defineSlots等）
编译时宏是Vue3在<script setup>中引入的特殊语法结构，在编译阶段被处理替换而非运行时执行。
2026-01-12 15:52:17
244
原创 Vue3 TypeScript 项目中，Emits 验证的使用场景
Emits验证的最佳实践摘要： 在Vue组件开发中，emits验证可分为带验证和不带验证两种场景。带验证适用于复杂业务逻辑，通过TypeScript提供类型安全、文档化和IDE支持，如严格参数结构验证、运行时验证和多参数类型处理。不带验证则适合简单通知事件、快速原型开发或第三方组件封装。
2026-01-12 15:32:51
319
原创 使用 TypeScript 编写一个 Vue 3 模态框（Modal）组件
摘要：本文展示了一个基于Vue3的模态框组件实现，采用TypeScript编写。组件通过Teleport实现DOM内容定位，使用props控制显示状态(isOpen)，通过插槽(slot)支持内容自定义，并利用emit触发关闭事件。特别介绍了<script setup>语法糖的改进实现，包括更简洁的props/emits定义(TypeScript类型安全)、自动暴露方法和scoped样式隔离。组件具备条件渲染(v-if)、父子通信(props/emit)等特性，适合作为通用模态框解决方案。
2026-01-12 15:08:06
1038
原创 Vue 官方推荐：kebab-case（短横线命名法）
kebab-case（短横线命名法）是一种使用连字符连接小写单词的命名方式，Vue官方推荐在模板中使用。与camelCase（驼峰式）和snake_case（蛇形命名）不同，kebab-case在HTML中更具可读性和一致性。Vue会自动转换模板中的kebab-case与JS中的camelCase/PascalCase，建议组件名、事件名和属性使用kebab-case，而方法和变量使用camelCase。这种约定提高了代码可维护性，并与HTML原生属性风格保持一致。
2026-01-12 13:30:00
320
原创 Vue2 与 Vue3 自定义事件实现对比
Vue2与Vue3自定义事件实现对比摘要：Vue2通过$emit触发事件，父组件使用@监听；Vue3引入defineEmits()和emits选项显式声明事件，支持TypeScript类型检查。主要差异：Vue3支持多v-model、移除.sync修饰符、提供事件验证，组合式API更灵活。迁移时需注意移除$listeners、native修饰符，改用v-model:propName替代.sync。Vue3事件系统更明确、类型安全，推荐使用defineEmits()声明事件。
2026-01-12 13:23:56
348
原创 前端CSS类名命名方法论：BEM命名方法详解
BEM命名方法是一种前端CSS类名规范，由Yandex团队提出，通过Block（块）、Element（元素）、Modifier（修饰符）三部分构建清晰的组件结构。使用双下划线"__"连接块与元素，双连字符"--"表示修饰符，如.menu__item--active。该方法使CSS代码具有高可维护性，避免样式冲突，支持组件复用，特别适合中大型项目。虽然类名较长，但结合Sass等工具可简化书写，是现代前端开发中广泛采用的CSS模块化方案。
2026-01-12 13:16:24
539
原创 CSS选择器分类总结（AI版）
本文系统总结了CSS选择器的分类和使用方法。表格形式呈现了基础选择器（元素、类、ID、通用）、组合选择器（后代、子、兄弟等）、伪类选择器（状态/位置）、伪元素选择器以及属性选择器的具体用法和优先级。重点说明了CSS选择器的优先级计算规则（从!important到通用选择器），并提供了计算示例。最后给出实用建议：避免过度使用ID选择器、合理使用类选择器、慎用!important、利用CSS层叠特性等，帮助开发者有效选择合适的选择器并提高代码可维护性。
2026-01-12 13:10:53
911
原创 在Vue项目中使用Sass的完整指南
本文详细介绍了在Vue项目中集成Sass的完整方案。主要内容包括：1) 安装sass和sass-loader依赖的步骤；2) 在.vue文件中使用Sass语法的基本方法；3) 针对Vue CLI和Vite项目的不同配置方式；4) 全局变量和混入的配置技巧；5) 项目结构建议和常见问题解决方案。特别强调了Vue3+Vite项目中使用Sass的便捷性，以及如何通过构建工具配置实现全局样式共享。文章还提供了深度选择器、响应式设计等实用示例，为开发者提供了在Vue生态中高效使用Sass的完整指南。
2026-01-12 12:59:19
940
原创 Sass常用语法总结
Sass语法总结：提供变量($var)、嵌套选择器、混合宏(@mixin)、函数(@function)等特性，支持运算、控制指令和模块化开发。通过@use导入模块，建议合理使用变量存储设计系统值，适度嵌套，采用抽象层(_variables.scss)和组件化结构。这些特性可提升CSS开发效率，适用于现代前端框架项目，实现响应式设计和主题定制等功能。典型项目结构包含抽象层、组件、布局等模块。
2026-01-12 12:52:39
228
原创 JavaScript 正则表达式 API 总结
本文总结了JavaScript正则表达式的主要API，分为正则对象创建、实例属性、实例方法和字符串方法四类。
2026-01-12 10:29:56
982
原创 CSS 定位属性（relative、absolute、fixed、sticky）与实用技巧总结
CSS定位属性与实用技巧总结 本文系统整理了CSS定位的核心属性和应用技巧。主要包含： 5种定位类型：static(默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)及其应用场景 常用定位技巧：包括居中定位、固定页眉页脚、悬浮按钮、粘性侧边栏等常见布局实现方案 实用解决方案：层叠管理、响应式定位、移动端适配问题处理及高级定位技巧 性能优化建议：推荐优先使用Flexbox/Grid布局，避免过度使用absolute/fixed定位，注意重绘回流
2026-01-09 16:11:52
842
原创 Vue 3中：setup 函数接收两个重要参数：props 和 context（附：setup 中无法访问 this 详解）
Vue3 setup 函数参数使用指南：props和context详解
2026-01-09 14:59:00
301
原创 Vue 3 中，defineComponent 提供了更好的 TypeScript 类型推断
Vue3的defineComponent是定义组件的核心方法，支持选项式API和组合式API两种写法，提供完善的TypeScript类型推断。
2026-01-09 14:32:33
450
原创 前端开发中常见副作用操作/场景总结
前端开发中常见副作用操作总结：包括DOM操作、全局样式修改、状态管理不当、异步操作处理、浏览器API使用等场景。这些操作可能导致UI状态异常、内存泄漏、性能下降等问题。建议采用声明式框架、CSS模块化、状态管理库、Promise/Async处理异步、及时清理资源等方法规避风险。关键原则包括可预测性、隔离性和可测试性，最佳实践是优先使用纯函数并集中管理副作用。通过合理使用现代开发模式（如Hooks/Composables）和错误处理机制，可有效控制副作用影响范围。
2026-01-09 13:06:43
610
原创 Vue2 与 Vue3 响应式实现对比（附：Proxy 详解）
Vue2与Vue3响应式系统对比：Vue2采用Object.defineProperty()实现数据劫持，需要递归初始化所有属性，且对数组和对象新增属性需特殊处理；Vue3改用Proxy+Reflect，支持惰性监听、原生数组响应和动态属性变更。Vue3在性能上优化明显，通过按需响应减少内存占用，同时引入CompositionAPI提升代码组织灵活性，原生支持TypeScript。但Vue3的Proxy特性不兼容IE浏览器，而Vue2支持更广泛的浏览器环境。整体而言，Vue3在响应式系统的性能、功能和开发体
2026-01-08 15:59:49
759
原创 Vue 3 响应式系统类型关系总结（附：computed、props）
Vue3响应式系统类型关系总结：Vue3提供了多种创建响应式数据的方式，主要包括reactive()（返回代理对象，适用于复杂数据结构）、ref()（返回Ref对象，包装原始值）、computed()（返回计算属性Ref）等。不同类型具有不同的响应式特点。
2026-01-08 15:21:19
873
原创 Flexbox属性分类总结
本文系统整理了Flexbox布局的核心属性，分为容器属性和项目属性两大类。容器属性包括display、flex-direction、flex-wrap等，用于控制整体布局行为；项目属性如order、flex-grow等则控制单个项目的表现。
2026-01-08 14:43:51
547
Beetl2.8中文文档
2018-06-01
质量管理学习资料分享.zip
2020-06-03
权限树tree-multiselect.js-demo
2018-01-19
2018-1-23_tree-multiselect-mydemo真实模拟项目中的添加和编辑功能
2018-01-23
js权威指南知识梳理.zip
2020-04-29
《GS14-2013 工商行政管理基础代码集》
2018-01-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人