- 博客(46)
- 收藏
- 关注
RSS订阅原创 Git Stash 用法详解
Git Stash是Git中用于临时保存未提交更改的功能，适用于需要切换分支处理其他任务的情况。基本命令包括git stash保存更改、git stash list查看存储列表、git stash apply/pop恢复更改（保留/删除存储）。高级用法支持保存特定状态（如仅暂存文件、未跟踪文件）、从存储创建分支等。最佳实践建议添加有意义的注释、定期清理存储，并避免长期依赖该功能。
2025-10-24 11:19:54
1046
1
原创 nvm安装node后出现报错: “npm 不是内部或外部命令，也不是可运行的程序 或批处理文件”
使用nvm安装node后出现npm命令无法识别的问题，可通过以下步骤解决：1) 从node官网下载对应版本的zip包；2) 解压到nvm目录并重命名为v版本号格式；3) 使用nvm切换版本后验证node和npm命令是否正常。该方法成功解决了"npm不是可识别命令"的错误提示。
2025-09-15 16:17:30
940
原创 uni-app 生命周期详解
uni-app 的生命周期分为三个层面：应用级（App.vue）、页面级和 Vue 组件级。应用级包括 onLaunch（初始化）、onShow（进入前台）等；页面级包含 onLoad（加载）、onShow（显示）等特有函数；组件级则遵循 Vue 的原生生命周期（created、mounted 等）。它们的执行顺序为：应用启动时先触发应用级生命周期，再依次执行页面和组件的创建、挂载等流程。页面跳转时会先触发原页面的 onHide，再执行新页面的生命周期。开发者需掌握这些生命周期的触发时机和顺序，以正确处理数
2025-08-11 17:25:06
1822
原创 devDependencies 和 dependencies 的区别详解
package.json中的dependencies和devDependencies是Node.js项目的关键依赖分类。dependencies为生产环境必需依赖（如React、Express），会在所有安装命令中被包含；devDependencies为开发工具依赖（如Webpack、Jest），仅开发时安装，生产环境会被排除。两者的主要区别体现在安装命令（--save-dev）、环境适用性及典型用途上。合理区分两者能优化包体积、提高部署效率并改善开发体验。典型示例包括运行时库归入dependencies，
2025-08-11 09:13:33
783
原创 Express Generator：快速构建Express应用的实用指南
本文介绍了Express官方脚手架工具express-generator的详细使用指南。首先讲解了全局安装express-generator的方法，接着演示了如何创建项目、安装依赖并运行。文章详细展示了生成的项目目录结构，并介绍了常用配置选项，包括指定模板引擎（Pug、EJS等）、CSS预处理器（Sass、Less等）和其他实用参数。此外，还提供了项目优化建议，如使用nodemon实现热更新、配置环境变量以及优化错误处理机制。通过express-generator，开发者可以快速搭建Express应用基础框
2025-07-10 16:23:43
509
原创 Express 入门指南（超详细教程）
本文介绍了Express框架的基础使用指南，主要包括五个部分：安装配置、路由管理、静态文件处理、中间件使用和请求体解析。在安装部分详细说明了从Node.js环境搭建到Express项目初始化的完整流程。路由部分涵盖了基本路由、HTTP方法路由、动态参数路由和响应方法。静态文件处理演示了express.static中间件的用法。讲解了应用中间件、路由中间件、错误处理中间件及常用第三方中间件。最后解析req.body的使用方法，需要配置express.json()或urlencoded()才能获取请求体数据。
2025-07-10 13:18:18
1233
原创 vue3中高德地图地理编码与逆地理编码详解（附源码）
本文介绍了高德地图API中地理编码与逆地理编码功能的实现方法。地理编码将地址转换为经纬度坐标（如用户输入地址搜索），逆地理编码则将坐标转换为结构化地址（如点击地图获取位置信息）。文章详细解析了AMap.Geocoder的参数配置与方法使用，包括城市范围、查询半径等设置项，并提供了正向地理编码（地址转坐标）和逆向地理编码（坐标转地址）的代码示例。通过Vue3组件示例展示了具体应用场景，包含交互界面设计、坐标点标记等完整实现方案，帮助开发者快速集成地图地址转换功能。
2025-07-08 10:28:26
1294
原创 Vue3 中 watch 和 watchEffect 的区别详解
Vue中的watch和watchEffect都是用于响应式数据监听的API，但各有特点。watch需要明确指定监听的数据源，可以获取新旧值，适合精确监听和异步操作；watchEffect自动追踪依赖并立即执行，更简洁但无法获取旧值。二者都支持深度监听和清理副作用，watch默认不立即执行，而watchEffect总是立即执行。选择时，如需比较前后值或特定监听用watch，简单自动监听用watchEffect，需注意避免无限循环和内存泄漏。
2025-07-05 10:00:00
1731
原创 Vue中计算属性(computed)和侦听器(watch)的区别详解
Vue.js中computed与watch的核心区别与适用场景 摘要： computed是声明式的计算属性，具有缓存特性，适合数据转换和派生（如格式化、过滤等），必须返回结果且不支持异步操作。watch是命令式的侦听器，无缓存，适合响应数据变化执行副作用（如API调用、日志记录等），支持异步且无需返回值。主要区别体现在：设计目的（数据转换 vs 响应变化）、执行机制（惰性计算 vs 即时执行）、缓存性（有 vs 无）和异步支持（不支持 vs 支持）。
2025-07-04 16:05:28
572
原创 vue3中实现高德地图路线规划（附源码）
本文介绍了在Vue3中使用高德地图API实现驾车路线规划功能的方法。重点讲解了AMap.Driving插件的参数配置和使用方式，包括通过关键字或经纬度坐标两种途径进行路线查询，并支持添加途经点。文章提供了完整的代码示例，展示了如何配置地图实例、设置路线策略参数，以及处理规划结果。该功能可实现起点到终点的驾车路线规划，并支持自定义途经点、路线策略等参数，适用于各类导航应用场景的开发。
2025-07-04 11:05:59
1393
原创 CSS盒模型详解：标准盒模型 vs 怪异盒模型
CSS盒模型是网页布局的基础，分为标准盒模型(content-box)和怪异盒模型(border-box)。标准模型中width/height仅包含内容区域，而怪异模型则包含内容、内边距和边框。两者的核心区别在于元素尺寸的计算方式：标准模型计算较复杂，调整padding/border会改变元素总大小；怪异模型更直观，元素总大小固定。现代开发推荐使用box-sizing: border-box，因其更易于布局控制。通过box-sizing属性可自由切换两种模型，适应不同的设计需求。
2025-07-01 16:26:47
1007
原创 vue3中实现高德地图POI搜索（附源码）
上一篇文章详细讲解了vue3中实现高德地图地址搜索自动提示(附源码),本文将重点介绍POI搜索功能的实现。POI(Point of Interest) 搜索用于查找特定位置或区域内的兴趣点，如餐馆、商场、景点等。
2025-07-01 10:18:16
993
原创 vue3中实现高德地图地址搜索自动提示（附源码）
本文详细介绍了在Vue3项目中实现高德地图搜索自动提示功能的两种方法。第一种通过调用autoComplete.search()方法灵活定制下拉样式，第二种通过绑定输入框ID实现默认UI提示。文章包含完整的代码示例，从地图初始化、插件加载到事件监听，并强调了安全密钥和API key的配置要点。通过示例代码可以快速实现地址搜索时的智能提示功能，并获取选中位置的名称和经纬度信息。文末还提供了效果展示图，帮助开发者直观了解实现效果。
2025-06-28 17:59:59
1565
原创 Vue3项目引入高德地图【超详细教程】
本文介绍了在Vue 3项目中集成高德地图的完整流程。首先通过Vite初始化Vue 3项目并安装高德地图JS API加载器，然后在高德开放平台申请开发者Key和安全密钥。接着详细讲解了如何创建地图容器、加载地图实例，以及添加各类地图控件（比例尺、工具条、方向盘等）。文章还展示了3D地图的实现方式，并提供了完整的代码示例。通过本文指导，开发者可以快速在Vue 3项目中实现高德地图的基础功能。
2025-06-27 14:23:14
4215
2
原创 全面掌握Vue 3响应式：ref自动解包、reactive对象替换及响应式丢失问题
Vue 3响应式系统核心API解析：ref与reactive对比指南 本文详细分析了Vue 3中ref和reactive两个响应式API的使用方法、区别和注意事项。ref适用于所有数据类型，需通过.value访问；reactive仅用于对象类型，可直接访问属性。文章通过代码示例展示了它们的应用场景，重点比较了访问方式、适用类型和实现原理的差异，并总结了常见问题解决方案，如响应性丢失和对象替换等。最后提出了类型选择建议和性能优化方案，建议基本类型优先使用ref，复杂对象使用reactive，并注意避免解构陷阱
2025-06-27 09:43:30
684
原创 重排(回流)和重绘原理详解
浏览器渲染页面会经历构建DOM树、CSSOM树和渲染树的过程，其中重排（影响布局的修改）和重绘（影响外观的修改）是影响性能的关键因素。重排代价更高，常见触发条件包括尺寸/位置改变、DOM操作等，而重绘则由颜色/字体等属性变化引起。优化策略包括：批量修改样式、使用文档片段、缓存布局信息、CSS3硬件加速（如transform代替定位），以及防抖节流技术控制触发频率。合理减少重排重绘次数可显著提升页面性能。
2025-06-25 17:18:00
324
原创 JavaScript 事件循环(Event Loop)机制详解
JavaScript通过事件循环机制实现单线程下的异步执行。核心执行顺序为：同步代码 > 微任务(Promise等) > 宏任务(setTimeout等)。每个宏任务执行后都会检查并清空微任务队列。async/await本质是Promise语法糖，await后的代码会作为微任务。Node.js的事件循环更复杂，包含6个阶段。
2025-06-25 10:28:19
1653
原创 JavaScript 中 async/await 的工作原理
async/await是JavaScript处理异步操作的语法糖，基于Promise实现，使异步代码更同步化。async函数自动返回Promise，await能暂停执行直至Promise解决。其实现原理与Generator函数相关，通过内部转换为Promise链工作。文章通过示例展示了基本用法、并行执行、错误处理机制，并指出循环中使用await和错误传播的常见陷阱及最佳实践。这种语法让异步代码更易读写和维护。
2025-06-23 17:30:19
629
原创 JavaScript 事件机制详解：冒泡、捕获与委托
JavaScript事件流包含捕获、目标和冒泡三个阶段。addEventListener的第三个参数控制事件触发阶段（false为冒泡，true为捕获）。事件冒泡从最具体元素向上传播，事件捕获则相反。事件委托利用冒泡机制，将监听器绑定到父元素而非每个子元素，提高性能并支持动态元素。可通过stopPropagation等方法阻止事件传播。理解这些机制有助于优化事件处理，编写高效代码。
2025-06-23 11:34:00
1505
原创 keep-alive实现原理及Vue2/Vue3对比分析
Vue的keep-alive组件用于缓存组件实例避免重复渲染，其核心实现原理包括：使用LRU算法管理缓存(Vue2通过对象/数组，Vue3改用Map/Set)，提供include/exclude过滤和max限制功能。Vue2采用选项式API，Vue3改用组合式API实现，主要差异体现在数据结构、生命周期处理和渲染逻辑上，但都通过标记组件状态和复用实例来优化性能。该组件在切换时不会触发常规的销毁/创建过程，而是调用activated/deactivated生命周期钩子。
2025-06-21 17:24:42
1471
原创 CSS3 2D 转换详解（覆盖translate()、rotate()、scale()、skew()等）
摘要：CSS3的2D转换功能通过transform属性实现元素移动、旋转、缩放和倾斜等效果。核心方法包括translate()移动、rotate()旋转、scale()缩放、skew()倾斜和matrix()矩阵变换，支持单独或组合使用。transform-origin属性可调整变换原点位置，配合transition可制作悬停动画等交互效果。实战应用包括卡片悬停、按钮点击反馈和图标旋转动画等。需注意2D转换不影响文档流，但可能改变层叠上下文，建议搭配过渡效果优化用户体验。
2025-06-20 18:05:04
338
原创 Vue 样式穿透语法大全（涵盖 Vue2、Vue3、Less、Scss 等）
Vue样式穿透技术解析样式穿透是Vue组件开发中突破scoped样式限制的技术手段，用于修改子组件或第三方组件的内部样式。在Vue2时代有>>>、/deep/和::v-deep三种语法，而Vue3统一为:deep()语法。该技术特别适用于：1）定制第三方组件样式；2）调整子组件内部元素；3）覆盖默认主题。实际开发中可结合SCSS/LESS预处理器的嵌套语法使用，并支持多层级选择。Vue3还提供了:slotted处理插槽内容、:global添加全局样式等配套方案。
2025-06-20 09:08:52
1885
原创 css3 文本效果(text-shadow、text-overflow、word-wrap、word-break)文本阴影、文本换行、文本溢出并隐藏显示省略号
本文介绍了CSS中三种常用文本处理属性：1）text-shadow设置文字阴影，包括基本语法及发光、多重阴影、立体文字等效果；2）text-overflow处理文本溢出，展示单行/多行文本省略方案；3）word-wrap与word-break控制换行方式，说明不同参数对中英文换行的影响。每种属性均配有代码示例、参数说明及效果图，帮助开发者实现多样化的文本样式效果。
2025-06-19 16:21:12
528
原创 Vue Scoped原理详解
本文介绍了Vue中的Scoped CSS特性，它通过在<style>标签添加scoped属性实现样式局部作用域。主要原理是为组件元素添加唯一属性（如data-v-xxx）并通过PostCSS处理样式选择器。文章还详细讲解了深度选择器的使用场景和方法，分析了Scoped CSS的优点（样式隔离、性能优化）和注意事项（影响子组件根元素、不适用于v-html内容）。针对常见问题提供了解决方案，如使用:deep()修改第三方组件样式、:global()处理动态内容样式。最后强调理解Scoped CSS原理.
2025-06-19 11:19:33
1001
原创 CSS3 渐变效果
CSS3 渐变为网页设计提供了丰富的视觉效果，主要包含线性渐变和径向渐变两种类型。线性渐变通过角度或关键词控制方向，可实现多色过渡；径向渐变则支持圆形/椭圆形形状、多种尺寸及自定义中心位置。此外还介绍了重复渐变、多重叠加、渐变文字等高级技巧，并提供了浏览器兼容性解决方案。这些渐变效果无需图片即可创建平滑过渡色彩，显著提升网页视觉吸引力。
2025-06-17 16:53:05
631
原创 Vue3 defineModel 原理解析
在上一篇文章中探讨了`v-model`的实现原理。文将聚焦于Vue3.4版本新增的`defineModel`语法糖，它显著简化了组件中`v-model`的实现方式。我们将详细解析`defineModel`的工作原理，并与3.4版本之前实现组件`v-model`的方法进行对比。
2025-06-17 09:34:55
1322
1
原创 JS字符串常用方法(超级详细,含分类)charAt、indexOf、slice、concat、replace、replaceAll、split、includes、repeat、padStart
本文总结了JavaScript中常用的字符串操作方法，分为六类：1)字符位置查找（charAt、charCodeAt、indexOf等）；2)截取与拼接（slice、substring、concat）；3)修改与转换（大小写转换、替换）；4)分割与合并（split、trim系列）；5)判断与验证（startsWith、includes等）；6)复制与补位（repeat、padStart等）。每个方法都提供了参数说明、返回值解释和代码示例，涵盖了字符串处理的主要场景，是JavaScript字符串操作的实用指南
2025-06-13 11:26:57
1148
原创 Vue中v-model 原理解析
v-model是Vue实现双向数据绑定的指令，本质上是:value和@input的语法糖。它通过绑定value属性和监听input事件，实现数据与视图的双向同步。v-model适用于表单元素和自定义组件，并支持.lazy、.number、.trim等修饰符来扩展功能。自定义组件使用v-model时需定义value属性和input事件。理解v-model的工作原理有助于更灵活地使用Vue进行开发。
2025-06-13 11:25:48
616
原创 CSS opacity: 0、display:none、visibility:hidden、transform: scale(0)之间的区别
CSS隐藏元素的4种主要方法对比：1) display:none完全移除元素，不占空间且不可交互；2) visibility:hidden保留空间但不可见；3) opacity:0保持透明但可交互；4) transform:scale(0)通过缩放隐藏。
2025-05-30 16:45:53
291
原创 CSS关键字：initial、inherit、unset、revert区别
在 CSS 中，我们经常需要控制元素的样式属性，并且有时候我们希望某些属性能够重置、继承或恢复为默认值。为了解决这些需求，CSS 提供了四个非常实用的关键字：initial、inherit、unset 和 revert。
2025-04-19 15:31:24
1036
原创 JavaScript 自动装箱与拆箱机制
在 JavaScript 中，原始类型（如字符串、数字、布尔值等）是不可变的，并且没有方法或属性。为了方便操作这些原始类型，JavaScript 提供了对应的包装对象（wrapper objects），例如 String、Number 和 Boolean。当你尝试调用一个原始类型的属性或方法时，JavaScript 会自动将该原始值“装箱”为相应的包装对象，以便你可以访问这些属性和方法。
2025-04-19 15:30:20
330
原创 Promise.any 与 Promise.race区别
Promise.any是 JavaScript 中用于处理多个 Promise 的方法，它会返回 第一个成功解析（fulfilled）的 Promise 的结果，只有当所有 Promise 都失败时才会抛出错误。 Promise.race 是 JavaScript 中用于处理多个 Promise 的竞速方法，它会返回 第一个完成（无论成功或失败）的 Promise 的结果。
2025-04-11 09:22:34
636
原创 Vue2与Vue3原型方法挂载对比
Vue3 引入了 createApp工厂函数，不再直接暴露全局 Vue对象。取而代之的是通过 应用实例的 config.globalProperties 挂载全局属性。
2025-04-11 09:18:37
415
原创 Promise.all() 与 Promise.allSettled()
适合所有 Promise 必须成功的场景，失败时会立即抛出错误。：适合需要知道所有 Promise 最终状态的场景，无论成功或失败。两者的返回值都会严格按照传入的 Promise 顺序返回结果。
2025-04-03 13:11:20
584
原创 JS数组常用方法(超级详细,含分类)push、pop、unshift、shift、splice、slice、concat、join、revres、indexOf、sort、filter、map
reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。5.当有两个参数时，第一个参数为起始位置，第二个参数是要删除元素的个数，如果第二个参数为负数则默认为0。3.如果第一个参数是一个负数 从数组末端开始删除元素删除的个数为参数值。1.如果第一个参数为正数 从索引 1 开始删除后面的所有元素包括自身。4.如果第一个参数为负数并且该负数的绝对值要小于或等于数组长度。2.如果第一个参数大于最大索引值 则返回空数组。
2025-04-03 11:57:55
2153
4
原创 一文搞懂 JavaScript 模块化规范：CommonJS、AMD、CMD、ES6 Module
CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，也可简称为CJS。● Node是CommonJS在服务器端一个具有代表性的实现；● Browserify是CommonJS在浏览器中的一种实现；● Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发，Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。
2025-03-24 22:00:08
1474
原创 TypeScript知识点
● 同样的功能，TypeScript的代码量要大于JavaScript, 但由于TypeScript的代码结构更加清晰,在后期代码的维护中TypeScript却。浏览器不能直接运行TypeScript代码，需要编译为JavaScript再交由浏览器解析器执行。● 在代码运行前进行检查,发现代码的错误或不合理之处，减小运行时异常的出现的几率,此种检查叫[」，TypeScript 和核心就是「静态类型检查]，简言就是。第一步：创建TypeScript编译控制文件。第三步：使用命令编译.ts文件。
2025-03-24 21:58:25
775
原创 vite 环境变量和模式
Vite 在特殊的 import.meta.env 对象下暴露了一些常量。这些常量在开发阶段被定义为全局变量，并在构建阶段被静态替换，以使树摇（tree-shaking）更有效。
2025-03-03 22:50:44
411
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人