扶苏1002-CSDN博客

原创记一次 uni-app开发微信小程序 textarea 的“伪遮挡”踩坑实录

在小程序开发中，textarea组件默认层级过高会导致与固定定位按钮重叠的问题。解决方法是通过调整z-index层级：为按钮设置position:fixed和较高的z-index值(如999)，同时为textarea添加position:relative和较低的z-index值(如0)。这种层级调整可确保按钮始终显示在输入框上方，避免元素覆盖问题。文中还提供了具体的CSS代码示例和最终效果截图。

2026-03-27 09:15:29 175

原创 Pinia的基本使用和踩坑指南

Pinia的组合式Store写法采用Vue3的setup语法风格，通过defineStore定义包含响应式状态(state)、计算属性(getters)和方法(actions)的Store。使用ref定义响应式状态，computed定义计算属性，普通函数定义方法，最后返回需要在组件中使用的属性和方法。在组件中使用时，通过storeToRefs保持解构后的响应性，而actions可直接解构。这种写法优势在于逻辑复用、代码组织和灵活使用组合式API，但需注意必须显式返回、正确解构和避免循环依赖。ref用于Sto

2026-02-14 10:26:25 741

原创详解Vue2和Vue3的变化

Vue 3 对 Vue 2 进行了全面重构，带来多项核心改进：响应式系统改用 Proxy 替代 Object.defineProperty，解决了动态属性监听问题；引入 Composition API 优化代码组织；原生支持 TypeScript；性能提升包括虚拟 DOM 重写和 Tree Shaking；新增 Fragment、Teleport 等特性；全局 API 改为模块化设计；推荐使用 Vite 构建工具和 Pinia 状态管理。Vue 3 在性能、开发体验和类型安全方面均有显著提升，成为现代前端开

2026-02-12 11:17:07 327

原创详解Vue3的自定义 Hooks

Vue 3 自定义 Hooks（组合式函数）是基于 Composition API 的核心实践，用于封装响应式逻辑并实现跨组件复用。它通过函数形式将状态、计算属性和方法封装起来，解决了 Vue 2 Mixin 的命名冲突和来源不清问题。典型应用包括状态管理（如计数器）和副作用处理（如鼠标位置追踪）。相比 Mixin，自定义 Hooks 具有更清晰的逻辑组织、更好的类型支持和无命名冲突等优势。最佳实践包括参数传递、返回对象、副作用清理和结合 TypeScript。自定义 Hooks 体现了代码分离思想，适合在

2026-02-12 11:12:49 468

原创 Vue 3 新增内置组件详解与实战

Vue 3 新增了三个核心内置组件：Fragment 允许多根节点模板，减少冗余DOM层级；Teleport 实现组件内容跨DOM定位，解决模态框层级问题；Suspense 提供异步组件加载状态管理，优化用户体验。这些组件增强了开发灵活性，解决了Vue 2中的常见痛点，使应用结构更清晰、交互更流畅。掌握这些组件能显著提升Vue 3开发效率和应用质量。

2026-02-12 11:09:55 230

原创 Vue 3 的组合式 API（Composition API）优势

Vue 3的组合式API相比选项式API具有显著优势：1) 逻辑聚合功能，解决代码碎片化问题，使业务逻辑更易维护；2) 提供Composables机制，通过函数封装实现逻辑复用，避免了Mixin的命名冲突问题；3) 天然支持TypeScript，无需处理this上下文，类型推断更准确；4) 工程化优势明显，支持Tree-shaking和更好的代码压缩。组合式API特别适合大型复杂项目和TypeScript开发，而简单组件仍可使用选项式API。

2026-02-12 11:08:42 448

原创详解Vue3的provide和inject

Vue 3 中的 provide 和 inject API 提供了一种高效的跨层级组件通信方案，通过依赖注入模式解决了属性透传问题。provide 由祖先组件定义数据或方法，inject 允许子孙组件直接获取这些内容，无论层级多深。使用时需注意响应式原理：提供 ref 或 reactive 对象可保持响应性，而普通值会失去响应能力。最佳实践包括使用 Symbol 避免命名冲突、避免直接修改数据以维护单向数据流。该方案特别适用于深层组件通信、高阶组件开发和局部状态共享场景，是构建复杂应用的利器。

2026-02-12 11:06:07 582

原创详解Vue3的toRaw和markRaw

toRaw和markRaw是Vue3 Composition API中两个控制响应式系统的底层工具。toRaw用于获取响应式对象的原始数据，修改原始数据不会触发视图更新，常用于与第三方库集成；markRaw则预先标记对象使其永远不会被转为响应式，适用于常量或复杂实例等不需要响应式的场景。两者主要区别在于作用时机：toRaw作用于已响应式对象，markRaw作用于即将响应式化的对象。虽然能优化性能，但应谨慎使用以避免破坏Vue的响应式特性。

2026-02-12 11:01:59 517

原创 “解构”与“响应”的博弈——深入剖析 Vue 3 的 toRef 与 toRefs

Vue 3 的 toRef 和 toRefs 解决了 reactive 对象解构时丢失响应性的问题。toRef 转换单个属性为 ref 对象，保持与原属性的双向同步；toRefs 批量转换所有属性，适合组合式函数返回和模板解构使用。两者都能保留响应式连接，区别在于处理范围：toRef 针对特定属性，toRefs 处理整个对象。它们是安全解构 reactive 对象的必备工具。

2026-02-12 10:57:53 528

原创深入理解 Vue 3 的 watchEffect

Vue 3 的 watchEffect 是一个自动追踪依赖的响应式 API，能立即执行副作用函数并在依赖变化时重新执行。它通过自动收集响应式数据依赖简化了代码，特别适合处理异步请求、防抖等场景。关键特性包括自动依赖追踪、立即执行机制以及通过 onCleanup 进行副作用清理。相比 watch，watchEffect 更适用于"数据变化就重新执行"的简单场景，而 watch 更适合需要明确数据源和旧/新值对比的复杂逻辑。开发者可根据具体需求选择使用。

2026-02-12 10:53:42 503

原创深入理解 Vue 3 的 watch

深入理解 Vue 3 的 watch

2026-02-12 10:53:26 923

原创深入 Vue 3 computed：原理、实战与避坑指南

摘要： Vue 3的computed属性是响应式系统的核心功能，通过缓存机制和依赖追踪实现高效数据派生。与methods相比，computed仅在依赖变化时重新计算，适合模板逻辑和复杂数据处理。支持读写控制（get/set），可简化表单绑定和嵌套对象操作。常见误区包括异步操作、直接修改返回值或依赖非响应式数据，正确方案是结合watch或确保数据响应式。与watch和methods相比，computed更适用于声明式数据派生，而非副作用处理或事件响应。合理使用能显著提升性能与代码可维护性。

2026-02-12 10:46:49 570

原创 Vue 3 生命周期深度解析：从 Options API 到 Composition API 的完整指南

Vue 3生命周期在Composition API中发生了显著变化：setup()取代了Vue 2的beforeCreate和created钩子，成为初始化入口；生命周期函数改为onXxx形式（如onMounted）；销毁相关钩子更名为unmount。关键区别在于：1）setup在实例创建前执行，this不可用；2）onMounted最常用，用于DOM操作和数据请求；3）资源清理应在onBeforeUnmount中进行。代码示例展示了如何在<script setup>中使用响应式数据和生命周期钩

2026-02-11 18:30:25 511

原创 Vue 3 响应式原理深度解析

Vue 3响应式系统通过Proxy和Reflect实现数据驱动视图的自动更新。相比Vue 2的Object.defineProperty，Proxy可以完整拦截对象所有操作，支持动态增删属性和数组变化监听，性能更优且支持Map/Set等数据结构。其核心流程包括创建代理、依赖收集、触发更新和重新执行。对于基本数据类型，使用ref包装成对象再通过reactive处理。Vue 3的响应式机制解决了Vue 2的诸多限制，使代码更简洁、性能更强，为现代前端开发提供了坚实基础。

2026-02-11 18:04:13 618

原创 Vue3 响应式核心：ref与reactive全方位对比及实战指南

本文深入解析Vue 3 Composition API中ref与reactive的核心区别：ref适用于所有数据类型，需通过.value访问，而reactive仅适用于引用类型，可直接访问属性。重点对比了两者在解构响应性、整体替换等场景的差异，指出reactive解构会丢失响应性且无法整体替换对象，而ref则更灵活。最后给出最佳实践建议：基本类型用ref，不需替换的对象用reactive，需要解构时使用toRefs。掌握这些差异能显著提升Vue开发效率。

2026-02-11 14:35:52 1164

原创 Vue 3 的setup函数与＜script setup＞语法糖

Vue 3 的setup函数与 <script setup>语法糖：剥开表象，直击底层原理

2026-02-11 11:33:15 882

原创 var声明的问题总结

本文分析了JavaScript中var声明的作用域问题及其引发的常见错误。首先指出var是函数作用域，导致变量可在函数内任意位置访问，容易造成变量覆盖等问题。其次重点讲解了setTimeout在循环中使用var声明时，由于异步执行特性会输出相同值的现象，并提供了两种解决方案：1)使用let声明变量，利用块级作用域特性；2)使用IIFE创建闭包捕获每次循环的值。这些解决方案能有效避免var作用域带来的问题，确保代码按预期执行。

2026-02-11 11:09:15 57

原创推送代码到gitee，弹出身份验证窗口，但是输入gitee账号密码，提示认证失败

Gitee身份认证失败问题解决方案：自2021年起Gitee不再支持账号密码直接认证，必须使用个人访问令牌(Personal Access Token)进行验证。解决方法为：登录Gitee账户，在「设置」→「安全设置」→「个人访问令牌」中生成具有仓库权限的Token，在认证窗口输入此Token而非登录密码。注意将Token设置为永久有效并妥善保存，以备后续验证使用。Git配置的用户名和邮箱仅用于标识提交者身份，与远程仓库认证无关。

2026-02-10 15:17:11 453

原创 vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器

摘要：该代码实现了一个拖放功能，A容器中的字段列表项可被拖拽到B容器中。A容器使用v-for渲染字段列表，每个字段项可拖拽并传递字段数据。B容器作为放置区域，接收拖拽的字段数据并检查是否已存在，不存在则添加到条件列表中。通过dataTransfer对象在拖放过程中传递数据类型和字段信息。

2026-02-05 17:27:32 93

原创 Git删除远程分支+本地分支

Git分支删除操作指南删除远程分支：git push origin --delete <分支名> 删除本地分支：安全删除(已合并)：git branch -d <分支名> 强制删除(未合并)：git branch -D <分支名> 注意：强制删除不可恢复，需谨慎操作。

2026-01-21 13:43:42 227

原创从零开始创建一个Vue2项目

Vue CLI是一个快速创建vue工程化目录的工具，底层使用的是webpack，webpack是一个打包工具，它的职能就是把vue的语法，最终打包成js css 和html，后面还会学到vite打包工具，更先进，vue3项目一般就不会使用 Vue CLI构建了，因为只要使用Vue CLI，底层就还是webpack打包工具，一般vue3我们还是更倾向于vite打包工具，这是后话。下载包默认是从外网下载的，速度很慢，所以要设置国内镜像源，下载速度就很快了。选择如下，按空格键选择，按上下键调序，按回车。

2026-01-15 12:16:03 866

原创前端js高频面试点汇总

本文汇总了JavaScript核心知识，涵盖语言基础、运行机制和性能优化等方面。主要内容包括：JavaScript与Node.js的关系及运行环境；语言组成（ECMAScript、DOM、BOM）；变量声明(var/let/const区别)、数据类型及判断方法；函数、原型链和this指向等面向对象特性；程序执行机制（事件循环、任务队列）；性能优化技巧（防抖节流、减少重排重绘）；以及内存管理（垃圾回收）和对象操作（深浅拷贝、属性定义）。全面解析了JavaScript从基础语法到高级特性的关键概念，适合系统学习

2026-01-14 13:59:23 253

原创 uniapp开发微信小程序发布提示包超过大小解决办法

小程序开发中遇到超包问题，可在模拟器中勾选"运行时压缩"选项解决大部分体积超限情况。该功能能有效减小包体积，但若原始包体过大仍需采用分包方案。操作步骤简单，如图所示在开发工具设置中启用该选项即可。此方法适用于轻度超包情况，为开发者提供了便捷的解决方案。

2025-12-30 17:27:50 248

原创解决el-table设置fixed固定列后下方文字没有盖住的情况

摘要：解决el-table设置fixed固定列后文字显示异常的问题。当使用scoped样式时，需配合/deep/或::v-deep选择器。解决方法是为固定列元素添加z-index:10和背景色，确保覆盖下方内容。代码示例展示了如何通过CSS调整el-table固定列的层级和背景样式。

2025-11-20 17:03:22 455 2

原创 uinapp开发小程序实现按钮拖拽和吸顶效果

该代码实现了一个可拖拽悬浮按钮组件(GSwitchButton)，具有以下功能：按钮可自由拖动并自动吸附到屏幕左右两侧拖动过程中限制更新频率保证60fps流畅度按钮位置会持久化存储到Vuex状态管理中根据当前状态显示"切换养老服务"或"切换救助服务"文字实现了完整的触摸事件处理(touchstart/move/end) 考虑了不同屏幕尺寸适配和rpx单位转换包含边界检测确保按钮不会移出屏幕外组件使用了cover-view和cover-image来保证在原

2025-11-20 15:07:47 378

原创微信小程序在web-view页面添加按钮

摘要本文介绍了在小程序中使用web-view组件时添加悬浮按钮的实现方法。通过嵌套cover-view标签可以在web-view页面上创建悬浮工具栏，需要注意：1）需要绝对定位和高z-index值；2）开发者工具中不显示效果，需真机测试；3）使用setTimeout延迟显示兼容低端手机；4）url必须配置域名白名单才能上线展示。示例代码展示了如何解码URL参数并实现延迟1秒显示悬浮工具栏的效果。

2025-11-20 11:48:48 388 3

原创 git如何根据某一个开发节点拉取一个新分支

本文介绍了基于特定提交节点创建并推送新分支的完整流程。首先提供了两种获取开发节点ID的方法：通过编辑器源码管理界面查看（推荐）或使用git log命令。其次详细说明了通过节点ID创建新分支的git命令操作。最后给出了两种推送新分支到远程仓库的方式，既支持编辑器图形化操作，也提供了对应的git push命令行方法。整个过程覆盖了从节点查找、分支创建到远程推送的全链路操作指南。

2025-11-19 11:07:24 334

原创 Win11开启电源高性能模式和卓越性能模式

本文介绍了在Windows系统中调整电源性能模式的步骤：1）通过快捷键Win+x打开管理员终端；2）使用powercfg命令激活高性能模式（代码8c5e7fda）或卓越性能模式（代码e9a42b02）；3）在控制面板的电源选项中选择相应模式。文章特别提示卓越性能模式可能不兼容家庭版系统，并配有详细的操作截图指引。该教程适合需要提升电脑性能的专业用户参考。

2025-11-12 14:38:50 4390

原创 VSCode 关闭abc提示或者调整顺序

摘要：文章介绍了如何调整VS Code中代码片段提示的优先级。首先通过修改editor.snippetSuggestions设置为top，将自定义片段提示置顶。然后详细说明了各选项含义：top(插件置顶)、bottom(abc置顶)、inline(随机排序)、none(仅显示abc)。最后给出了彻底关闭abc提示的方法：在设置中搜索并关闭Show Word选项。这些调整可以优化代码片段的使用体验。

2025-11-06 14:13:48 412

原创 Uniapp微信小程序分享功能全解析，分享给朋友 or 群聊 or 朋友圈

摘要：本文介绍了在uni-app中实现微信小程序分享功能的方法。包括两种分享方式：1）分享给朋友或群聊，需配置enableShareAppMessage并自定义onShareAppMessage生命周期；2）分享到朋友圈，需配置onShareTimeline生命周期。文章详细说明了如何通过右上角菜单和自定义按钮触发分享，并展示了如何根据不同来源设置不同的分享标题和封面图片。还提供了分享成功/失败的回调处理示例。配置参数包括标题、路径、查询参数和图片地址等关键信息。

2025-11-04 16:16:51 908

原创 uniapp开发微信小程序【Vue3+setup地图map动态获取缩放比scale】

本文介绍了在uni-app中使用uni.createMapContext创建地图上下文对象时需要注意的关键点：必须传入componentInstance参数，否则回调函数不会执行。文章提供了一个完整的地图组件示例代码，包含地图初始化、标记点计算和区域变化处理等功能。组件通过getCurrentInstance()获取当前组件实例并传递给地图API，确保回调函数正常工作。示例还展示了如何动态计算标记点数据、处理地图缩放事件以及获取当前缩放比例等实用功能。

2025-10-17 09:57:28 509

原创 Vue Router深入掌握 push, replace, go, back, forward,beforeEach 方法

本文详细介绍了Vue Router中的五种编程式导航方法： router.push()：最常用的导航方法，会向历史记录添加新条目，可传递路径、命名路由或参数，支持Promise处理。 router.replace()：与push类似但会替换当前历史记录，适用于表单提交等不需要返回的场景。 router.go(n)：在历史记录中前进/后退指定步数，正数前进，负数后退。 router.back()：router.go(-1)的语法糖，实现后退功能。 router.forward()：router.go(1)的语

2025-09-08 11:09:28 1275

空空如也

空空如也