- 博客(655)
- 收藏
- 关注
RSS订阅原创 Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass，如果您的代码使用了 dart-sass 不支持的旧语法，可能存在部分不兼容的问题
SCSS 预处理器切换到dart-sass后，需要重点检查以下“旧语法”直接使用$a + $b等数学运算时，必须改为#{}插值或使用模块。大量依赖过时的@import语法可暂时保留，但建议逐步迁移到@use@forward模块化写法。若项目中频繁使用.sass缩进语法，需要确保缩进、空格、分号完全正确，以免 Dart Sass 报错。检查自定义函数、第三方库是否在 Dart Sass 中存在内置函数冲突或 API 差异，如有必要手动升级或改写。
2025-05-29 18:35:09
969
原创 小程序使用web-view 修改顶部标题 && 安全认证文件部署在nginx
在小程序开发工具中直接测试是不行的，只有第一次是生效的，后续再改变title的时候，貌似是检测不到的，所以需要使用真机调试来查看，小程序中使用web-view后，会强制显示一个顶部区域，无法隐藏，且这个头部的标题会根据h5的title来显示。中的真机调试就可以看到效果了，当h5切换路由后，小程序的头部标题也会跟随改变。（如：/home/view/nginx/wx-sercret）;可以在浏览器中切换路由来验证h5的页面的title是否会变化。1、nginx目录下新建wx-sercret。
2025-05-25 12:27:39
852
原创 如何在uniapp H5中实现路由守卫
1、在H5中这两个对象是都存在的。「router：route」但是功能并不全面，具体可参考下图。2、刚刚测试了一下，在微信小程序中还是不论是“$router”或是“$route”都是“undefined”的。所以还是无法做到监听。
2025-05-25 11:13:57
899
原创 UniApp === H5实现主题切换
在 UniApp 中，主题是指应用程序的视觉样式，包括了字体、颜色、边界、背景等。主题可以用于定义全局的样式，同时也可以定义某个组件的样式。在某些情况下，主题可以让开发者更加方便地实现一些设计需求。
2025-05-24 23:15:42
878
原创 unipp === 状态管理 Pinia 使用
uni-app 内置了Pinia。Vue 2 项目暂不支持注意事项使用HBuilder XHBuilder X 已内置了 Pinia，无需手动安装，按照下方示例使用即可。App 升级时，如果之前使用HBuilder X 版本 < 4.14打包，现在使用HBuilder X 版本 >= 4.14，更新时需要整包更新不可使用wgt更新（在4.14时升级了vue版本，低版本的基座和高版本 wgt 资源包会导致使用 Pinia 时报错）使用CLI4.14 之前：执行或安装，要固定版本4.14 之后：执行。
2025-05-20 11:49:33
1078
原创 理解 Viewport：让网页在手机端正确显示的秘诀
当我们在手机上打开网页时，你有没有发现有些网站会自动调整成适合屏幕的大小，而有些却显示得像缩小版的电脑网页？这个神奇现象的背后，都与一个叫「viewport（视口）」的概念息息相关。简单来说，viewport 就是设备上用来显示网页的「可视区域」。桌面浏览器：viewport 等于浏览器窗口大小（约 1200px 宽度）手机浏览器：默认采用「虚拟视口」（约 980px 宽度）是基于根元素（<html>）字体大小的相对单位/* EM：相对于父元素字体大小 */} /* 实际 16px */
2025-05-15 16:33:39
777
原创 uniapp -- 验证码倒计时按钮组件
jia-countdown-verify 是一个用于发送短信验证码的倒计时按钮组件，支持自定义样式、倒计时时间和文本内容。该组件适用于各种需要验证码功能的表单场景，提供了丰富的配置选项和事件回调。用户可以通过插件市场下载并集成到项目中。组件支持手动触发和自动开始倒计时，并提供重置功能。此外，组件还兼容微信小程序和 Vue3，确保在不同环境下的稳定运行。通过简单的配置，开发者可以轻松实现验证码发送功能，并自定义按钮的外观和行为。
2025-05-14 21:02:45
1118
原创 使用 hover-class 实现触摸态效果 - uni-app 教程
是uni-app中组件的一个属性，用于指定当用户按下并保持触摸某个组件时，组件应该添加的 CSS 类名。通过这个类名，我们可以设置触摸时的样式，比如背景色变化、边框加粗等。
2025-05-14 20:51:04
561
原创 UniApp 微信小程序绑定动态样式 :style 避坑指南
平台H5✅ 正常✅ 正常App✅ 正常✅ 正常微信小程序❌ 无法解析✅ 正常所以建议在任何平台统一使用的形式，既能保证跨端兼容，又能避免微信小程序中的 bug。
2025-05-14 18:31:08
830
原创 uniapp === upx vs rpx
upx在2018年就推出了，其初衷是为了让微信的rpx机制可以跨全端使用。在普通css写法里，upx会被编译器编译。但动态绑定时，upx无法被准确编译，此时官方提出了使用uni.upx2px()方法，用来动态计算。后来其他几家小程序平台陆续都兼容了rpx机制，rpx不再是微信的专用单位，而成为了这个行业的通用单位。最近官方收到很多开发小程序的用户投诉upx不能像rpx那样直接支持动态绑定，还得再使用uni.upx2px方法。
2025-05-14 18:03:16
899
原创 UniApp Vue3事件适配与兼容方案
未声明的事件可能导致重复触发或意外行为，务必显式声明！此选项可用于定义组件可以向其父对象发出的事件，现在在未使用声明的事件的所有侦听器都将包含在组件的中。，默认情况下，该侦听器将绑定到组件的根节点。会作为原生事件绑定到组件的根元素（通过。是一个对象，包含了父组件传递给子组件的。会被当作原生事件绑定到子组件的根元素。的任意区域（包括空白处）都会触发事件。会被当作原生事件处理，绑定到根元素。若需监听子组件根元素的原生事件（替代。绑定到子组件的根元素（即外层的。被当作原生事件绑定到根元素。
2025-05-14 12:05:53
1482
原创 《Vuejs设计与实现》第 5 章（非原始值响应式方案） 中
但 parent 本身也是响应式数据，因此在副作用函数中访问 parent.bar 的值时，会建立响应联系。由于通过 Reflect.get 得到的 obj.foo 结果是一个普通对象，即 { bar: 1 }，它不是响应式对象，因此在副作用函数中访问 obj.foo.bar 时，无法建立响应联系。同时，我们还修改了 set 拦截函数和 deleteProperty 拦截函数的实现，因为对于一个对象来说，只读意味着既不可以设置对象的属性值，也不可以删除对象的属性。然而，并非所有情况下我们都希望深响应。
2025-05-12 18:31:09
1058
原创 手写 vue 源码 === computed 实现
Vue 的计算属性实现是一个精巧的设计，它通过类实现了依赖追踪和更新触发。计算属性本身是一个 effect，它会收集自身依赖的响应式数据；同时，计算属性也可以被其他 effect 收集为依赖。这种双向的依赖关系使得计算属性能够在依赖变化时自动更新，并且只在必要时重新计算，从而提高了性能。理解计算属性的实现原理，有助于我们更好地使用 Vue，并在遇到复杂场景时能够更好地排查问题。
2025-05-12 15:51:26
527
原创 手写 vue 源码 === watch 实现
Vue 的watch实现是响应式系统的精彩应用，它巧妙地利用了类的依赖收集和触发更新机制，实现了对数据变化的监听和响应。通过深入理解watch的实现原理，我们不仅能更好地使用这个 API，还能学习到 Vue 响应式系统的设计思想和实现技巧。这些知识对于理解 Vue 的整体架构和开发高质量的 Vue 应用都有很大帮助。watch的实现展示了 Vue 响应式系统的强大和灵活，通过统一的底层机制（）支持了多种上层 API（computed等），这种分层设计使得 Vue 的响应式系统既强大又易用。
2025-05-12 14:24:28
1048
原创 《Vuejs 设计与实现》第 4 章（响应式系统）( 下 )
本章我们深入探讨了副作用函数与响应式数据的关系。我们明确了响应式数据的基本实现依赖于“读取”和“设置”操作的拦截，连接副作用函数与响应式数据。当读取数据，我们将副作用函数存储，而在设置数据时，我们将存储的副作用函数取出并执行，这是响应系统的核心实现原理。我们构建了一个完整的响应系统，用 WeakMap 和 Map 创建新的存储结构，确保响应式数据与副作用函数之间的精确关联。此外，我们分析了 WeakMap 和 Map 的差异，其中 WeakMap 的弱引用特性不会妨碍垃圾回收。
2025-05-11 15:26:19
1146
原创 你不知道的 vue3 watch 新特性 == 优雅解决接口竞速问题
在使用 Vue 的watch并设置了后，如果多次快速修改被监听的值，就会产生“竞速”问题：第一次异步操作未完成时，第二次修改会覆盖第一次的结果，导致页面展示的不是预期的最新数据。本文将通过逐步剖析，先说明竞速带来的问题；再介绍用“队列”思路如何缓解；最后引入 Vue 3 提供的onCleanup钩子，借助闭包特性优雅地解决竞速，同时讲解闭包中flag标志位的运行逻辑，帮助你加深对异步清理和状态管理的理解。使用“队列”来维护每一次更新的“执行权”，确保只有队列头部的请求能够最终更新视图。
2025-05-10 19:06:49
966
原创 手写 vue 源码 === ref 实现
Vue3 的响应式系统通过 Proxy 和属性访问器实现了对非原始值的响应式处理。解构会导致响应式丢失是因为解构创建了新的变量，失去了与原始响应式对象的连接。通过reftoRefs和proxyRefs等 API，Vue3 提供了优雅的解决方案，使我们能够在保持响应式的同时，享受更简洁的代码风格。
2025-05-09 21:25:43
482
原创 《Vuejs设计与实现》第 5 章（非原始值响应式方案） 上
因此，当我们使用 p.bar 访问 bar 属性时，getter 函数内的 this 指向的其实是原始对象 obj，这意味着我们实际上是在访问 obj.foo。如上所示，当 trigger 函数执行时，除了把那些直接与具体操作的 key 相关联的副作用函数取出来执行外，还要把那些与 ITERATE_KEY 相关联的副作用函数取出来执行。如果我们没有指定 get() 拦截函数，通过代理对象访问属性值时，代理对象的内部方法 [[Get]] 会调用原始对象的内部方法 [[Get]] 来获取属性值。
2025-05-09 15:32:57
836
原创 《Vuejs与实现》第 6 章（原始值响应式方案）
在这一章节，我们探讨了 ref 的概念。ref 在本质上是一个“封装对象”，它的存在是因为 JavaScript 的 Proxy 无法直接代理原始值，所以我们采用封装对象的方式，间接实现原始值的响应式处理。为了区分 ref 和普通的响应式对象，我们给“封装对象”定义了一个标志属性 __v_isRef，当其值为 true 时，我们便知道这是一个 ref。此外，ref 不仅用于原始值的响应式处理，还能解决响应丢失的问题。
2025-05-09 11:47:34
1219
原创 手写 vue 源码 ===：自定义调度器、递归调用规避与深度代理
调度器是 Vue 响应式系统中的一个重要概念，它允许我们控制 effect 的执行时机和方式。当响应式数据发生变化时，默认情况下会立即触发相关的 effect 执行。而通过自定义调度器，我们可以改变这一默认行为。//调度器}, {console.log('scheduler执行了,不自动更新');//AOP 面向切面编程runner() //重新渲染})在这个例子中，我们创建了一个 effect 并传入了一个自定义调度器。
2025-05-08 22:26:19
755
原创 手写 Vue 源码 === 依赖清理机制详解
Vue 响应式系统中的依赖清理机制是一个精巧的设计，它通过和三个关键函数，实现了精确的依赖追踪和清理。只有真正被使用的属性才会触发 effect 的重新执行当依赖关系发生变化时，能够精确地更新依赖列表避免了不必要的计算和内存泄漏通过实际案例的分析，我们可以看到依赖清理机制在条件渲染等场景中的重要作用。理解这一机制，对于深入理解 Vue 的响应式系统以及编写高效的 Vue 应用都有很大帮助。
2025-05-08 17:37:36
704
原创 《Vuejs 设计与实现》第 4 章（响应式系统）( 上 )
cleanup 函数接受副作用函数作为参数，遍历其 effectFn.deps 数组，该数组中每个元素都是一个依赖集合，然后从这些集合中移除该副作用函数，并最后清空 effectFn.deps 数组。至此，我们已经可以避免副作用函数产生遗留。当 obj.ok 的值修改为 false，触发副作用函数重新执行后，此时不会读取 obj.text，只会触发 obj.ok 的读取操作。不同的是，当前执行的副作用函数会被压入栈顶，这样当副作用函数发生嵌套时，栈底存储的是外层副作用函数，而栈顶存储的则是内层副作用函数，
2025-05-08 11:54:53
851
原创 手写 Vue 源码 === 完善依赖追踪与触发更新
响应式对象：使用 Proxy 拦截属性访问和修改依赖收集：通过全局 activeEffect 和多层映射表建立对象、属性与 effect 的关系双向依赖：不仅记录属性依赖了哪些 effect，还记录 effect 依赖了哪些属性精确更新：只有当依赖的属性发生变化时，才会触发相关的 effect 重新执行调度机制：通过调度器控制 effect 的执行时机和方式。
2025-05-07 17:37:03
761
原创 手写 Vue 源码 === Effect 机制解析
通过 effect 函数创建响应式效果使用类管理回调函数和执行逻辑通过 activeEffect 全局变量跟踪当前正在执行的 effect在属性访问时进行依赖收集在属性设置时触发相关 effect 重新执行Vue3 响应式系统通过全局变量巧妙地解决了"谁在使用这个属性"的问题，实现了自动依赖收集。当访问响应式对象的属性时，系统知道是哪个 effect 正在运行，从而建立属性与 effect 之间的映射关系，为后续的响应式更新奠定基础。
2025-05-06 22:45:27
674
原创 WeakMap 和 Map 的区别，WeakMap 原理
WeakMap 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。最早最简单的垃圾回收机制，就是给一个占用物理空间的对象附加一个引用计数器，当有其它对象引用这个对象时，这个对象的引用计数加一，反之解除时就减一，当该对象引用计数为 0 时就会被回收。JS 中的垃圾数据都是由垃圾回收（Garbage Collection，缩写为 GC）器自动回收的，不需要手动释放，它是如何做的喃？
2025-05-06 18:12:12
914
原创 手写 Vue 源码 === reactive 方法
reactive: 创建响应式对象effect: 副作用函数，当依赖的响应式数据变化时自动执行: 定义Proxy的处理器这些组件协同工作，构成了一个高效的响应式系统。Vue3的响应式系统是一个精心设计的系统，它利用现代JavaScript特性（如Proxy和Reflect）实现了高效的数据响应。通过巧妙的设计，它解决了Vue2中的一些限制，并提供了更好的性能和开发体验。理解响应式系统的工作原理对于高效使用Vue3和调试复杂应用程序非常重要。
2025-05-05 14:38:01
1555
原创 JavaScript 中的 Proxy 与 Reflect 教程
维度使用语法（间接）Reflect（直接）语义高层、面向对象底层、面向机制控制力相对较少更强、更精细触发器（如 Proxy）更可能被拦截更透明，适用于 Proxy常用场景一般业务逻辑框架/库/元编程。
2025-05-04 09:59:34
1092
原创 手写 Vue 源码 === 搭建 Monorepo 环境
Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)。Vue3 源码采用 monorepo 方式进行管理，将模块拆分到 package 目录中。作为一个个包来管理，这样职责划分更加明确。Vue3 中使用pnpmworkspace来实现monorepo是快速、节省磁盘空间的包管理器。主要采用符号链接的方式管理模块)
2025-05-03 09:16:39
1091
原创 手写 Vue 源码 === Vue3 设计思想
传统更新页面，拼接一个完整的字符串 innerHTML 全部重新渲染，添加虚拟 DOM 后，可以比较新旧虚拟节点，找到变化在进行更新。浏览器中实际执行渲染函数、处理响应式数据更新、操作真实DOM的阶段，由Vue核心库完成。声明式代码更加简单，不需要关注实现，按照要求填代码就可以 （给上原材料就出结果）完整版Vue包含编译时+运行时，生产环境推荐用纯运行时版（体积更小）文件 → 编译时在打包阶段完成 → 浏览器只需运行时代码，性能更优！编译时是代码构建阶段（开发时），运行时是代码执行阶段（浏览器中）
2025-05-02 11:36:49
944
原创 微信小程序 骨架屏
子项内容</view></view>-- 方式二：列表容器中插入了其它元素 --><view class="other-block">其它
2025-04-30 17:46:14
1124
原创 Chrome的插件扩展程序安装目录是什么？在哪个文件夹？
最近换了mac pro用起来虽然方便，但是对常用的一些使用方法还是不熟悉。这不为了找到mac上chrome插件的安装路径在哪里，花费了不少时间。我想应用有不少像小编一样刚刚使用mac的小白吧。所以将我的经验整理出来分享给大家。其实想要找到mac上chrome插件的安装位置，大抵可以分为两种方法。
2025-04-29 10:07:48
1463
原创 详解 LeetCode 第 242 题 - 有效的字母组
该题目是实际中常见的字符组合问题，本解法利用 Map 展现了非常高效的计数思路。最终 map = {a:0, n:0, g:0, r:0, m:0} → 全部值为 0，说明是字母组。我们需要确认两个字符串是否含有相同的字符，并且各字母出现的次数也相同。：判断 Map 所有 value 是否都等于 0，如果是，则返回。如果是字母组，那么最后 Map 里所有值必然是 0。的字符并重新排列所得到的，那么它们是字母组。类型来统计字母的出现次数是非常有效的方法。，请判断是否为字母组（Anagram）。
2025-04-25 18:11:06
494
原创 回溯算法理论基础
回溯法也可以叫做回溯搜索法，它是一种搜索的方式。回溯是递归的副产品，只要有递归就会有回溯。所以以下讲解中，回溯函数也就是递归函数，指的都是一个函数。本篇我们讲解了，什么是回溯算法，知道了回溯和递归是相辅相成的。接着提到了回溯法的效率，回溯法其实就是暴力查找，并不是什么高效的算法。然后列出了回溯法可以解决几类问题，可以看出每一类问题都不简单。最后我们讲到回溯法解决的问题都可以抽象为树形结构（N叉树），并给出了回溯法的模板。
2025-04-25 11:48:20
861
原创 微信小程序 == 倒计时验证码组件 (countdown-verify)
这是一个用于获取验证码的倒计时按钮组件，支持自定义倒计时时间、按钮样式和文字格式。
2025-04-21 11:54:42
455
原创 Mac OS下Charles抓包小程序
对于压力测试工作而言，小程序接口测试工作和其他接口测试工作相似，都需要为测试工作的开展去准备相应接口的信息，其中包含请求接口，入参及请求头信息。本文将演示如何使用Charles工具进行小程序抓包，为后续使用Jmeter工具进行接口压测以及使用Grafana工具可视化接口压测结果做准备。
2025-04-18 10:34:58
605
原创 力扣349 == 两个数组交集的两种解法
特性解法一（Set + 删除）解法二（双重遍历 + Set）时间复杂度O(m + n)O(m × n)空间复杂度O(m)O(k)处理重复元素立即删除，避免重复匹配依赖 Set 去重适用场景大数据量小数据量或简单场景推荐解法优先选择解法一，因为它利用Set的高效查找和删除操作，时间复杂度更低，尤其适合处理大规模数据。解法二虽然代码更直观，但性能较差，仅在数据量较小时适用。去重机制：使用Set结构天然去重。性能优化：通过删除已匹配元素减少重复检查。方法选择：根据数据规模选择时间复杂度更优的解法。
2025-04-17 22:38:40
366
原创 力扣 283 移动零的两种高效解法详解
两种方法均满足题目要求，选择依据具体场景。两种方法均保证了非零元素的顺序，且原地操作，符合题目要求。在解决数组中的零移动到末尾的问题时，我们需要保持非零元素的顺序，并原地修改数组。记录非零元素应插入的位置。遍历数组时，遇到非零元素就将其放到。此方法通过交换操作，逐步将非零元素移到前面，零被交换到后面。：将所有非零元素移动到数组前端。空间复杂度：O(1)，仅使用常量空间。时间复杂度：O(n)，两次独立遍历。时间复杂度：O(n)，仅一次遍历。空间复杂度：O(1)，原地交换。第一次遍历后，非零元素。
2025-04-15 23:19:18
319
原创 力扣 66 == 加一算法详解与代码实现
该方法避免了将数组转换为数字可能导致的溢出问题，直接逐位处理进位，高效且可靠。通过分情况讨论，确保所有可能的输入都能正确处理。
2025-04-14 18:27:03
167
原创 股票买卖的最佳时机 II：贪心策略详解
本题通过贪心算法将复杂问题简化为局部最优的累加，巧妙地将多次交易转化为相邻日期的利润累计。该策略高效且易于实现，是处理此类允许无限次交易问题的经典方法。
2025-04-13 21:06:48
565
微信公众号的网页授权域名已经支持配置多个方案
2025-04-30
前端 自动部署 前端web自动化部署到服务器脚本 解放双手
2025-04-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人