- 博客(772)
- 收藏
- 关注
RSS订阅原创 2025：在真实项目中打磨技术的这一年 —— 我的前端技术年度总结
回顾 2025 年，我没有成为“技术大佬”，也没有站在聚光灯下，但我清楚地感受到：我写代码更稳了我看问题更全了我对技术的焦虑更少了未来我依然会持续写博客、做项目、拆问题，用长期主义对抗浮躁，用真实经验积累技术影响力。这，就是我 2025 年的前端技术年度总结。
2025-12-27 19:40:48
713
原创 为什么你应该停止使用“传统“的margin和padding来设置CSS样式
即使您的应用程序或网站目前不支持根据地域以不同的方向/方位显示文本/内容，开发人员最终也应通过采用上述模式，努力使所有用户都能获得无障碍的网络体验。时，你明确地定义了来自各个方向（上、下、左和右）的边距和填充。这可能会在你的区域设置中创建一个看起来不错的布局，但当使用不同区域设置的用户以与你设计的方式不同的 方向/角度 和查看内容时，可能会感到困惑。虽然一个区域可能从左开始到右结束，但其他区域可能不是，所以以这种方式定义它们将确保无论区域设置如何，margin 和 padding 都会按预期显示。
2025-12-27 19:35:10
266
原创 [uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
比如，我有个开关是开启用户信息采集的，点击开关后需要弹框等在用户确认后在更改开关状态，但是默认情况下，你点击后无论如何，开关状态都会改变。uniapp 的switch按钮是默认点击后就切换状态的，但是有时需要根据业务需求提前进行。解决方案：禁用掉switch的点击事件，通过变量。判断后再提示开关启闭状态。
2025-12-27 19:23:53
194
原创 uniapp 返回上一页再进入当前页mounted不执行
但是不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次（基于这一点咱可以把它用于页面预加载数据）；mounted()：页面初始化完成后触发，与created一样只会触发一次（可用于页面初始化数据）；但是，首次进入的时候，函数没有被执行。所以就将我的自定义函数放到了，onLoad里面，解决了首次进入页面不执行的问题。再通过activated()解决再次进入当前页不执行的问题。点击返回到A页面，再次进入到b页面。其实是因为自己基础知识的不扎实，以及vue生命周期的了解不够。
2025-12-27 19:21:07
152
原创 uniapp之实现拖拽排序
最近做uniapp项目的时候需要实现拖拽排序功能，本来准备直接用touchstarttouchmovetouchend三剑客去实现的,但无意中发现uniapp内置了和组件，可快速实现该功能，索性就直接使用该组件，后续对拖拽排序做了一些扩展，希望对你有帮助。拖拽组件源代码放在uniapp插件社区了，有兴趣可以下载下来看看，希望能对你有帮助，如果对该组件有问题，可以评论区留言。
2025-12-22 23:45:07
977
原创 Eruda：移动端网页调试利器
Eruda是一个开源的移动端网页调试工具，它以插件的形式嵌入到网页中，为开发者提供了类似于桌面端浏览器开发者工具的功能。Eruda支持多种常见的调试功能，如控制台日志输出、元素查看、网络请求监控、性能分析等。通过Eruda，开发者可以在移动设备上直接对网页进行调试，无需连接电脑或使用复杂的调试设备。如果想在其它页面尝试，请在浏览器地址栏上输入以下代码} })();
2025-12-15 18:23:32
640
原创 告别手动引入依赖：unplugin-auto-import 插件助你提升编码体验（内附实现原理）
并非所以依赖都适合自动导入，项目内的代码可能就不一定适合自动引入因为自动引入后，就能像全局变量那样直接使用，但从开发的角度就会丢失依赖链路，虽然另外生成了 Typescript 声明文件，IDE 能够正常识别， 但对于新加入项目的同学来说，他们不一定知道是自动引入，因此可能会降低了一些可读性。因此我们要有权衡。那么，什么样的内容适合自动引入？被广泛认知和使用、不用关注实现、不变的内容这些内容不关注实现，不会影响可读性，不会影响开发，不会对开发者心智造成影响。这类内容，就适合自动引入。
2025-12-11 18:14:23
942
原创 约定式路由生成神器：vite-plugin-pages
个人感觉这个插件功能还是挺实用的，可以用在我们的项目上，就不用每次都要手写路由配置了，也更加容易维护。不得不感叹现在前端开发的工具真的是越来越多了，也越来越实用，vite还有很多实用的功能待我们去探索，这里给作者和尤雨溪老板一个赞👍🏻🫰。
2025-12-11 11:15:30
498
原创 vue == 无渲染组件
另一方面，无渲染组件专注于通过让父组件负责根据无渲染组件暴露的数据和行为渲染适当的 UI 来分离组件的逻辑与呈现。然后，父组件负责根据无渲染组件暴露的数据和行为渲染适当的 UI。我们可以为上面的示例创建三个不同的切换组件，但是，我们可以观察到每个切换元素具有相同的逻辑和行为。我们可以立即看到，我们可以通过提取公共逻辑和行为来创建一个更可重用的模式，这样我们就不必在每个单独的切换组件中重复定义状态和切换方法。这就是使其成为 **无渲染组件** 的原因，即一个只关注逻辑和行为，而将渲染留给其父组件的组件。
2025-12-09 22:14:34
801
原创 Vue中key为index和id的区别详解！
误以为 index 快：性能差异基本可以忽略，相比出现的 bug，性能不是主要理由。以为只在“删除”时会错：插入（尤其头部）同样会出问题。以为后端没有 id 就只能用 index：可以在接收数据时在前端生成稳定 id（只要在数据生命周期内不变即可）。
2025-12-09 17:21:23
680
原创 Vue响应式原理学习：基本原理
数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。使用Vue时，我们只需要修改数据(state)，视图就能够获得相应的更新，这就是响应式系统。数据劫持：当数据变化时，我们可以做一些特定的事情依赖收集：我们要知道那些视图层的内容(DOM)依赖了哪些数据(state派发更新：数据变化后，如何通知依赖这些数据的DOM接下来，我们将一步步地实现一个自己的玩具响应式系统// 调用该方法来检测数据walk() {// 数据拦截},})// 依赖。
2025-12-06 11:11:19
883
原创 使用 Rollup 搭建开发环境 + 手写 Vue2 响应式原理
本文详细介绍了使用Rollup搭建Vue2开发环境及实现其响应式原理的全过程。首先通过Rollup配置构建工具环境，包括Babel转译和开发服务器设置。核心部分深入剖析了Vue2响应式系统的实现：从Vue构造函数初始化到数据代理，重点讲解了defineReactive的核心响应式实现、数组方法劫持和递归监听机制。通过Object.defineProperty实现对象属性劫持，并特殊处理数组方法以保持响应性。文章完整呈现了从数据观测到代理访问的完整流程，为理解Vue2响应式原理提供了清晰的技术路径。
2025-11-28 10:55:03
518
原创 axios get请求如何设置Content-Type
从中可以看出当未设置requestData的时候回删掉Content-Type的设置，其这么做的原因在于是Get请求本身是不需要Content-Type的。然而实际使用中发现并没有成功在请求头里设置Content-Type，经过网上的资料查找发现是由于axios的源码出了问题，具体位置在。重新调用接口，ok大功告成。
2025-11-26 18:26:55
159
原创 正则表达式（/g修饰符）踩坑
可以看到，在第一次调用test()后，lastIndex停在了2这个位置，也就是下一次调用test()时，lastIndex将从2开始， 所以第二次调用test()时会得到false，如果想要返回结果都是true，那么可以手动将lastIndex重置为0。如果想不用多次调用时都要重置为0的情况下，可以不使用/g或/y符号，也可以将表达式放在函数内， 使函数每次调用时都是重新定义正则表达式， 也就不存在下标还是上一次调用的情况。由此可见，下标又回到了0，第二次调用test()则匹配成功。
2025-11-15 15:39:46
353
原创 JavaScript 中被遗忘的关键字（with）
如果语句体中使用的不限定名称与作用域链中的某个属性匹配，则该名称会绑定到该属性以及包含该属性的对象。的代码片段中的标识符）时，JavaScript 会检查一系列对象，如果其中一个对象具有与你在代码中编写的标识符同名的属性，则 JavaScript 会使用该属性的值。通过向作用域链中添加内容，几乎每一行代码的运行速度都会变慢，因为需要搜索的对象数量会增加，才能将标识符解析为值。会遮蔽函数的参数，所以我们最终计算的是两个函数的和，这当然是 NaN。是的，朋友们，信不信由你，这就是 JavaScript。
2025-11-12 11:57:43
604
原创 HTML DOM outerHTML 属性
DOM 接口的outerHTML属性获取描述元素（包括其后代）的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用属性。
2025-11-03 18:17:45
289
原创 rollup == JavaScript 打包器
随着你需要打包更复杂的代码，通常需要更灵活的配置，例如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。现在，我们将全局安装它（稍后我们将学习如何将它安装到你的项目中，以便你的构建过程具有可移植性，但暂时不用担心这个）。标签使用，同时避免与其他代码产生不必要的交互。由于设置了一个导出，因此我们需要提供一个全局变量的名称，该变量将由我们的产物创建，以便其他代码可以通过此变量访问我们的导出。你仍然可以像以前一样运行你的代码，并且具有相同的输出，尽管会慢一些，因为加载和解析。
2025-10-30 18:08:50
875
原创 手写 Vuex4 源码（下）
Vuex 在项目中用了很久，只知其然不知其所以然，故研究学习并实现出来。从理解思路到手写出来，然后将实现过程记录下来就有了这篇文章，这个过程断断续续持续了大概一个月，项目和文章基本都是利用下班时间写的，确实挺累的，不过实现出来后往回看，还是学到很多东西，还挺欣慰的；文章有不足的地方还请各位大佬指正；
2025-10-27 18:09:29
711
原创 Element Plus组件v-loading在el-dialog组件上使用无效
最近在开发一个需求，点击操作按钮根据传入的id获取相应数据渲染el-dialog组件内容，我于是按正常方式使用v-loading指令实现加载中loading效果，但事与愿违，v-loading失效了……个人猜测是Element Plus组件库的v-loading指令不支持el-dialog组件上使用。，对于请求服务数据交互提供一个loading加载中效果是一个提高用户体验的好方法。, 之后将会在 2.4.0。
2025-10-23 19:20:26
405
原创 vue 如何实现粘贴复制功能
这是要复制到剪贴板的文本。第二个可选参数是一个 HTML 元素，在使用 clipboard.js 时，它将在内部用作容器。如果你不想修改 HTML，可以使用非常方便的命令式 API。你需要做的就是声明一个函数，执行操作，然后返回一个值。，一旦剪贴板的内容被更新，它就会被解析。在某些情况下，你希望显示一些用户反馈或捕获复制/剪切操作后所选择的内容。事实是，你甚至不需要另一个元素来复制其内容。这种方法兼容性很好，如果项目只使用了一次，不建议使用。）的原因，以便你监听并实现自定义逻辑。适合要复制的内容是变量。
2025-10-23 18:38:30
1296
原创 怎么解决在使用element库时按钮垂直排列出现对不齐
点击右上角的方框套箭头的图标，再将鼠标移到绿色的报名按钮上点击一下，我们发现这个按钮有一个自带的左边距10px。最后发现问题出在element ui库的原始封装上， Element库在封装时候把el-button使用了。这个样式是一个兄弟选择器，选中前一个元素后的所有同级元素的特定元素。打开浏览器的开发者模式，我的是谷歌浏览器（按F12就可以弹出）兄弟选择器，通过点击官网上给的例子也是能看出来的，我们发现添加和移除并不是对齐的，解决操作如下。
2025-10-23 10:04:28
289
原创 搞懂＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法
在项目中，尤其是在使用组件化开发时，我们某些时候需要对组件内部的某些样式优化，但Vue的样式封装特性）会阻止外部样式直接作用于组件内部。为了应对这一挑战，Vue社区引入了深度选择器（也称为穿透选择器或阴影穿透选择器），让我们能够跨越组件的封装边界，对内部元素进行样式定制。深度选择器允许我们从父组件中穿透到子组件内部，直接修改子组件的样式。这在需要定制第三方UI库组件样式时尤为有用。
2025-10-22 17:49:36
838
原创 手写 pinia
state: () => ({ count: 0 }), // 容器中的状态actions: {// action中更改状态},},});总得来说，Pinia 就是 Vuex 的替代版，可以更好的兼容 Vue2，Vue3 以及 TypeScript。在 Vuex 的基础上去掉了 Mutation，只保留了 state, getter 和 action。Pinia 拥有更简洁的语法， 扁平化的代码编排，符合 Vue3 的 Composition api。
2025-10-14 17:30:08
391
原创 Vue 响应式高阶 API - effectScope
这段代码来自 rfc，最开始是有一些疑惑的，watchEffect 和 watch 竟然有返回值，并且是一个函数，执行该函数居然还能清除副作用。这里要注意，如果子作用域是独立的（detached = true），它是不会被父作用域收集的，自然地，在父作用域清除副作用时是不会清除该独立子作用域中的副作用的。很明显，这种维护方式是很繁琐的，特别是在一些巨型的组合函数中，我们收集的副作用很容易遗漏不全，可能导致内存泄漏和其它未知的问题。整个过程都是 Vue 内部处理的，我们不需要关心副作用的收集和清除。
2025-10-08 01:35:52
685
原创 《Vuejs设计与实现》第 18 章（同构渲染）（下）
在本章中，我们首先讨论了 CSR、SSR 和同构渲染的工作机制，以及它们各自的优缺点。当我们为应用程序选择渲染架构时，需要结合软件的需求及场景，选择合适的渲染方案。接着，我们讨论了 Vue.js 是如何把虚拟节点渲染为字符串的。以普通标签节点为例，在将其渲染为字符串时，要考虑以下内容。自闭合标签的处理。对于自闭合标签，无须为其渲染闭合标签部分，也无须处理其子节点。属性名称的合法性，以及属性值的转义。文本子节点的转义。具体的转义规则如下。对于普通内容，应该对文本中的以下字符进行转义。
2025-10-07 18:21:13
946
原创 《Vuejs设计与实现》第 18 章（同构渲染）（上）
Vue.js 可以用于构建客户端应用程序，组件的代码在浏览器中运行，并输出 DOM 元素。同时，Vue.js 还可以在 Node.js 环境中运行，它可以将同样的组件渲染为字符串并发送给浏览器。这实际上描述了 Vue.js 的两种渲染方式，即客户端渲染（client-side rendering，CSR），以及服务端渲染（server-side rendering，SSR）。
2025-10-07 11:26:02
1108
原创 《Vuejs设计与实现》第 5 章（非原始值响应式方案）下 Set 和 Map 的响应式代理
上述代码，我们使用 for...of 循环遍历 p.keys，并调用 p.set 修改 key2 的值，理论上Map 类型数据的所有键没有变化，副作用函数不应该执行，然后却执行了。Set 和 Map 类型的数据具有专属的属性和方法来进行操作数据，这一点与普通对象存在显著差异，所以我们不能简单地像代理普通对象那样来代理 Set 和 Map 类型的数据。在 set 方法中，我们将 value 原样设置到了原始数据 target 上，但是如果 value 是响应式数据，设置上去也是响应式数据，这就是数据污染。
2025-10-07 09:27:02
972
原创 《Vuejs设计与实现》第 5 章（非原始值响应式方案）下 代理数组
在这段代码中，返回 false 令人费解，这是因为 includes 方法内部的 this 指向的是代理对象 arr，并且在获取数组元素时得到的也是代理对象，因此当我们使用原始对象 obj 进行查找时，肯定找不到，从而返回 false。所以，通过代理对象来访问元素值时，如果值还可以被代理，那么返回的是新的代理对象而非原始对象。在上述代码中，includes 方法内的 this 指向的是代理对象，我们首先在代理对象中进行查找，这其实是 arr.include(obj) 的默认行为。
2025-10-06 08:46:11
794
原创 Vue.js props mutating：反模式如何被视为一种良好实践。
这是因为 JavaScript 的对象和数组是按引用传递，而对 Vue 来说，禁止这样的改动，虽然可能生效，但有很大的性能损耗，比较得不偿失。这是因为 JavaScript 的对象和数组是按引用传递，而对 Vue 来说，禁止这样的改动，虽然可能生效，但有很大的性能损耗，比较得不偿失。在大多数场景下，子组件应该。在大多数场景下，子组件应该。注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态！
2025-09-30 15:13:21
1096
原创 Vue3 defineModel === 实现原理
vue3.4增加了宏函数，在子组件内修改了的返回值，父组件上v-model绑定的变量就会被更新。大家都知道v-model是和的语法糖，但是你知道为什么我们在子组件内没有写任何关于props的定义和emit事件触发的代码吗？还有在template渲染中的返回值等于父组件v-model绑定的变量值，那么这个返回值是否就是名为modelValue的props呢？直接修改的返回值就会修改父组件上面绑定的变量，那么这个行为是否相当于子组件直接修改了父组件的变量值，破坏了vue的单向数据流呢？
2025-09-29 17:53:11
866
1
原创 一文搞懂 Vue3 defineModel 双向绑定
type子组件也无需做任何修改，和上面其他的也支持自定义修饰符，比如我们要实现一个将输入框的字母全部变成大写的uppercase自定义修饰符，同时也需要使用内置的trim修饰符。</script><template><template>// get我们这里不需要},});</script>这时我们给传进去的第一个参数就是包含get和set方法的对象，当对modelValue变量进行读操作时会走到get方法里面去，当对modelValue变量进行写操作时会走到set方法里面去。
2025-09-28 15:16:22
918
原创 带你深入学习vue的h函数
h 函数在 Vue 中是一个非常重要的概念，它对于我们理解 Vue 里的渲染机制很关键。当我们在编写 Vue 的template模板时，实际上并不是在写 HTML，而是在以一种更直观的方式编写对h函数的调用。h 函数的作用是创建虚拟节点（VNode——— 类似于 React 中的。在学习 h 函数后，如果你在某些业务场景厌倦使用 Template 的组件编写方式， 完全可以在 Vue 中像 React 那样，以函数式的编程方式来编写组件（不依赖 JSX 插件）。
2025-09-24 21:41:07
1158
原创 vue3.0中重置reactive/ref定义的数据，恢复为初始值
Vue3 中reactive不能直接替换引用来重置数据， 手动赋值清空太过繁琐可以通过和delete的方式恢复初始值自己封装和useRef可以更优雅地管理重置逻辑是为了同时兼容数组解构和对象解构两种用法这样你就能在 Vue3 项目里更优雅地管理和重置数据啦 🚀。
2025-09-23 19:01:57
1195
原创 Vue2响应式原理解析
首先要知道vue2 是2013年 基于 ES5开发出来的，我们常说的重渲染就是重新运行render函数vue2 的响应式原理是利⽤ES5 的⼀个 API ，对数据进⾏劫持结合发布订阅模式的⽅式来实现的。more。
2025-09-23 09:32:29
839
原创 解决vue中，watch监听对象时，新值和旧值一样的问题
Vue 3 中 watch 监听对象时 newVal === oldVal 的问题，本质上是 JavaScript 引用类型特性与 Vue 响应式系统工作原理共同作用的结果。解决这个问题的核心在于： 确保每次对象内容变化时，提供一个新的对象引用。三种解决方案各有优劣：- Object.assign() ：轻量但只适用于简单对象- lodash.clonedeep() ：强大但性能开销大- JSON.stringify() ：折中方案但有类型限制。
2025-09-22 00:07:32
1367
原创 Vue3中你不知道的二次封装组件小技巧 （下）
父组件需要获取子组件的 ref，并调用子组件的方法。比如封装一个二次封装的<el-input>，父组件可能既想调用focus()方法，又想调用封装的自定义方法。在网上有各种方法，但在 Vue 3 的模板中，并没有一个官方完全推荐的“优雅方式”。本文将全面梳理三种常见方案，并分析它们的原理与适用场景。方案优点缺点父组件调用暴露ref函数简单，安全需要.getRef()多一层Proxy 代理平铺自定义方法 + el-input 方法，无需多一层需实现has保障模板访问操作。
2025-09-21 09:03:30
1202
1
微信公众号的网页授权域名已经支持配置多个方案
2025-04-30
前端 自动部署 前端web自动化部署到服务器脚本 解放双手
2025-04-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人