- 博客(63)
- 收藏
- 关注
RSS订阅原创 关于 vibe coding 的思考，我们似乎变得更像产品经理
这段时间听播客，听到了 vibe coding 一词，挺感兴趣，就搜了下。这句话是Karpathy（OpenAI 联合创始人，前特斯拉 AI 负责人）在一个推文中说的，大致意思就是现在有了 cursor 这些 AI 工具后，写代码似乎只需要发发 prompt，然后点击接受就行。cursor 爆火已经很久了，它给前端开发带来的提效是巨大的，我一直都在深度使用。最开始用的时候，每天都在感慨它的强大，总是会想：越来越多的代码都被 AI 生成后，我们这些干程序员的，以后到底该往哪条路走。
2025-05-12 18:02:48
274
原创 vue 组件函数式调用实战：以身份验证弹窗为例
通常我们在 Vue 中使用组件，是像这样在模板中写标签；而函数式调用，则是让我们像调用一个普通 JavaScript 函数一样来使用这个组件。接下来我们就用一个实际的例子来看看这种函数式调用的写法是怎么写的。我们来实现一个非常通用的功能，在系统中，如果某些操作需要进行身份验证才能进行下一步，我们就需要实现一个身份验证的弹框，只有验证了用户的账号密码的情况下，才能执行接下来的逻辑。
2025-05-10 20:02:21
901
原创 前端实战中的单例模式：以医疗药敏管理为例
在大型项目中，尤其是业务数据复杂、组件之间需要共享状态的场景里，我们会遇到这样的问题：某个模块的数据需要在多个地方访问和更新，但我们不希望它被重复实例化，避免状态混乱，如何实现？这个时候`单例模式`就要出场了。在本文中，我会结合一个医疗行业中抗生素药敏信息管理的实际案例，剖析单例模式的核心价值、使用场景、代码实践。
2025-05-08 20:51:30
968
原创 从 Vue 到 React：React 合成事件
合成事件（Synthetic Event）是 React 自己实现的一套事件系统，模拟了浏览器原生 DOM 事件的所有能力，同时统一了不同浏览器的兼容性差异。所以，React 不是直接在真实 DOM 上绑定原生事件，而是拦截浏览器事件，自己封装了一套虚拟事件对象，统一管理和派发。这就是所谓的Synthetic（合成）。
2025-04-26 20:40:55
954
1
原创 AI 开发入门之 RAG 技术
RAG = 查文档 + 用大模型答题，RAG 本质上把大模型变成了一个：“懂得查你自己资料、又能自然回答”的超级智能体。它让 LLM 具备了实时访问企业知识库的能力，既规避了幻觉，又能针对性回答个性化问题。
2025-04-24 20:17:39
1061
原创 AI 开发入门之 LangChain.js 与 LCEL
链式思维人类的复杂思考过程，其实可以被拆解为多个小步骤，每一步都可以由一个模型（或工具）来完成。比如你要问一个问题：“特斯拉的创始人是谁，他最近有什么新闻？理解问题提取实体：特斯拉查询知识：创始人是谁？查新闻：和这个人相关的最近动态整理信息，形成自然语言回答});这就是所谓的“链式编排”——你把多个组件像串糖葫芦一样串起来，形成一个 pipeline。每个环节都要 new 一个对象、设置 input/output key想调试中间结果？麻烦想组合多个逻辑流？臃肿。
2025-04-23 20:48:33
773
原创 从 Vue 到 React：React.memo + useCallback 组合技
本文围绕 `React.memo` + `useCallback` / `useMemo` 的组合使用，来聊聊在 React 中如何**构建高性能组件**。这是 Vue 3 开发者接触 React 时非常容易踩坑的一块，因为它涉及组件更新机制的底层行为，和 Vue 响应式机制差别很大。
2025-04-23 17:11:18
1067
原创 从 Vue 到 React：useEffect 的执行时机详解，窥探 React 背后的设计理念
作为 Vue 开发者， `onMounted`、`onUpdated` 这些生命周期钩子是再熟悉不过了，它们在**DOM 更新后同步执行**，你可以马上去获取真实的 DOM。但是在 React 中，`useEffect` 看似功能类似，它的**执行时机却与 Vue 有本质不同**。接下来我们从 React 的更新流程开始，一步步理解 `useEffect` 的真正执行时机，并引出`useLayoutEffect`，最后借此聊聊 Vue 和 React 背后的思维区别。
2025-04-17 21:12:32
904
原创 vxe-table 动态列筛选，以及筛选项动态变化的解决方案记录
需求场景：1. table 的列是由接口动态返回的；2. 列的筛选项就是数据的值，比如【姓名】这个字段总共有三个值，那么姓名这一列的筛选项就是这三个值本身；3. 当有一列筛选后，其他列的筛选项也要动态变化。
2025-04-15 11:22:01
286
原创 从 Vue 到 React：深入理解 useState 的异步更新
本文会从vue的视角切入，带你理解useState的异步更新，并且会介绍其背后的fiber和中断式渲染的概念
2025-04-13 17:51:34
1095
原创 React Hooks 精讲：写给 Vue 开发者的 React hooks 使用指南
本篇文章将以 Vue 视角切入，带你从入门到核心源码，掌握 Hooks 的使用和原理。
2025-04-11 14:10:45
987
原创 cursor，你身边的 AI 技术专家
cursor 这个代码编辑器，在去年的时候我就有看到过，当时 AI 应用如雨后春笋般涌现，试用过后并没有感觉有太多惊喜，没想到经过一年的发展，现在已经进化成 AI 代码编辑器的顶流了。可以从cursor官网看到，它是一个 AI 代码编辑器，是fork 了 vscode 开发的，所以如果你之前使用的是 vscode，基本可以无缝切换到 cursor，长得一毛一样。而且如果你电脑上有使用过 vscode，那么 cursor 安装的时候会自动导入 vscode 的插件，非常方便。
2024-11-22 17:47:10
972
原创 ant-design-vue 时间选择器 a-date-picker 单组件设置国际化失效问题解决
项目中使用的是 element-plus 组件库，但是由于 el-date-picker 的日期选择器下方没有“今天”的选项，所以临时选择使用 a-date-picker 替代。如何给单组件设置国际化呢？
2024-10-16 11:49:09
619
1
原创 echart 踩坑之：图表设置了宽高，却仍然报错Can‘t get DOM width or height.
我是在 el-tab 页签下使用的 echarts ，有多个 tab-pane，每个 tab-pane 下都有图表，都是最基础的柱状图，每个 echarts 容器都设置了宽高。但是疑问又来了(没办法，人菜问题多)，el-tab 的标签页下我都是写的独立的组件，标签页切换的时候，原来页签的元素不应该都隐藏了吗？上，发现原来是不同标签页下的容器 id 我都写成了一样的，随后我把 id 改成不一样的后，问题就解决了。获取元素的时候出了问题，毕竟如果元素获取出问题的话，那自然元素的宽高也就获取不到了。
2024-08-07 23:54:34
523
原创 elementplus如何实现dialog遮罩层外的元素可以被操作点击
element plus 组件库中的 dialog 组件可以说是使用频率最高的组件之一，它的效果是弹出一个对话框，外面默认会有一个蒙层。现在我碰到的需求是，弹窗要正常显示，但是蒙层下面的元素内容又是可以点击的，如何实现呢？以下是我的解决代码（vue）首先是 HTML 部分然后是 css 代码来解释一下：要实现蒙层外面的内容可以点击被操作，核心是用到了 这个属性用于控制元素是否能成为鼠标事件的目标。常见的两个值auto：这是默认值。元素可以响应鼠标事件。none：元素不会成为鼠标事件的目标。即鼠标事
2024-06-21 17:52:02
2418
2
原创 解决：.prettierrc 配置完后，自动保存并没有格式化代码
这个时候再 ctrl s 保存后，代码就已经按照配置的要求进行格式化了：双引号变成了单引号，分号去掉了。然后选择 configure default formatter…那么可以试下我的解决方法，很简单：鼠标右键，选择。然后选择 prettier 即可。问题解决，特此记录，希望能帮到你。
2023-07-16 18:03:39
1980
原创 AI时代已来，我们该如何培养创造力
历史的进程浩浩荡荡，变革总在不知不觉中悄然萌芽。AI 时代我们该如何培养创造力？这篇斯坦福教授的观点，分享给大家
2023-03-29 19:10:38
3986
1
原创 实现一个通用的函数柯里化的函数
这篇文章会一步一步带你实现一个通用的函数柯里化的函数，即使你完全不懂柯里化这个概念也没关系，我会先介绍柯里化函数的概念，然后以**实现一个完整的判断变量类型的函数**的例子来让你直观体验函数柯里化，然后再实现一个通用的函数柯里化函数。
2022-11-23 21:06:14
844
原创 el-checkbox-group 点击box 没反应，无法取消勾选（记一次debug的思路）
今天工作时，碰到了项目代码中一个bug，表现出来的效果是：el-checkbox-group 点击 box 没反应，无法取消勾选。也就是 box 默认是被勾选上的，但是点击取消勾选却没反应。问题看起来还是比较奇怪，当然，最后bug还是被找出来了，这篇文章就来记录和分享一下我找问题的思路...
2022-06-06 17:32:22
6156
原创 水平垂直居中的常见实现方式
本文记录四种在CSS中常见的，实现水平垂直居中的方式，这些知识属于偏记忆性的东西，经常写就不会忘，隔一段时间没看的话有时候就想不起细节了。所以，本文的主要目的还是做记录，方便忘记时回顾复习。首先，我们应该考虑的是要实现垂直居中的元素，它是行内元素，还是块级元素。对于行内元素来说，实现方式就比较简单了：水平居中用`text-align: center`；垂直居中把`line-height`的值设置为 `height` 的值行了。下面主要来写一下对于块级元素的垂直居中实现方式
2022-04-26 11:49:49
597
原创 详解 JS 中 a.x = a = {} 到底发生了啥？（图文并茂，包你看懂）
直奔主题，先贴上代码： let a = {n:1} a.x = a = {n:2} console.log(a.x)console.log(a.x) 输出什么呢？作为一个初学者，我的第一反应还是挺懵的，尤其是对于a.x = a = {n:2}这一句，非常地不理解。于是，我去查了一些资料，并且不断尝试修改代码，经过一系列折腾之后，我终于搞懂了，觉得这题可真有意思。按捺不住内心的开心与激动，想借此机会把我对于这段代码的理解，赶紧记录下来。一来是方便以后自己查看，同时也希望能帮到同样搞不明白的你们。
2022-04-22 23:14:49
970
原创 前端下载 “不支持打开该类型文件或文件已损坏“问题
前端下载，文件无法打开，你有没有用到 new Blob([res]) ？一起来看看问题是不是出在这里！
2022-04-08 10:41:52
8607
3
原创 关于对 Array.from() 浅复制的理解
今天翻红宝书，看到 P139 页的时候，发现有一个地方不是很理解：如下图：浅复制？浅复制我知道，代表二者还是指向同一块内存地址呀~所以 a1 和 a2 指向的应该是同一个数组，那么 a1 === a2 为什么为 false 呢？带着疑问我去控制台试验了一下：我更加疑惑了，这不是浅复制啊？经过思考和请教之后，我发现书中的“浅复制” 应该指的是对数组元素的浅复制，而不是对数组的浅复制。继续看图：这下算是明白了，特此来记录一下。有理解不对的地方，欢迎指正。...
2022-03-25 09:35:09
609
2
原创 ant design vue 的 description组件中 label 默认样式的更改
两种方法，修改 ant design vue 中 description 组件的 label 样式
2021-12-02 17:38:30
8523
原创 antdv 踩坑之 transfer 的表格穿梭框 报错 custom validator check failed for prop “dataSource“
这两天项目中碰到了从一张表格中选择数据然后显示到另一张表格中的需求。然后在 antd 中找到了 transfer 组件，其中的表格穿梭框可以满足需求，如图：然后我就copy了它的代码示例，并且在它的基础上改动了一部分字段名后发现，竟然报错了，如图dataSource ？可是我代码中根本都没用到 dataSource 啊，真的是对着文档看了好久，同时也问了身边的同事，最后找到了问题所在：原因出在，左边的table源数据里，每一行的数据中，必须要有一个字段的名称是 title ，也就是 titl.
2021-11-18 15:29:12
3871
3
原创 avue-crud 通过行状态来自定义显示编辑按钮
从 avue-crud 的官方文档中我们可以知道，操作栏的按钮是否显示是通过 option 中相应的 Boolean 值控制的，比如：delBtn 对应删除按钮editBtn 对应编辑按钮但是，这种控制是会对整个表格生效的，那如果我想根据行状态来自定义控制每一行的按钮是否显示呢？该怎么做？我的做法是根据官网的例子，用自定义插槽实现 <template slot="menu" slot-scope="{ row, index }"> <el-button.
2021-11-10 15:30:36
5302
7
原创 别再只会用for循环了！试试for in和for of 啊！
作为一个菜鸟程序员，在写 JS 代码的过程中会经常碰到需要循环遍历数组的情况：其中数组的元素是对象，对象中又有许多的属性，就像下面这个小例子： books: [ { id: 1, name: '《算法导论》', date: '2006-9', price: 85.00, count: 1 }, { id: 2,
2021-08-02 10:11:42
235
原创 一张图搞懂 line-height 行间距 行内文本框之间的关系
如果对于 line-height，font-size，行间距，行内文本框之间的关系不是很清楚，不妨仔细看看下面这张图。总结一下：line-height：代表的是文本基线之间的距离，对应上图中红色框的高度行间距：可由公式行间距 = line-height - font-size 计算行内框：文本行中的每一个元素都会生成行内框，就是图中的棕色框框，除去文字内容外，棕色框框的顶部和底部也许会有高度，是否会有高度，取决于是否有行间距，行间距的一半就是棕色框框顶部或底部的高度。看到这里，对于四者之间的
2021-07-28 16:46:37
577
原创 JS函数调用中this的指向问题详解
JS函数调用中this的指向问题详解函数调用中的this在讨论函数调用中的this指向问题之前，我们首先需要知道为什么会有这样的问题，换个说法，也就是说在函数调用的过程当中，this是从哪儿冒出来的。实际情况是这样的：当函数被调用时，除了声明时规定需要接收的形式参数外，函数还会接收两个参数，分别是this和arguments，因此函数调用方式的不同就会导致this的指向不同。在js中函数的调用模式有4种:方法调用模式，函数调用模式，构造器调用模式，apply调用模式。下面依次进行讲解。方法调
2021-07-20 11:52:32
1097
7
原创 JS基础学习笔记
JavaScript基础学习笔记本文根据B站pink老师的视频整理由于有其他语言（C、JAVA）的基础，有些相同的内容就没有做笔记如果你之前学过JAVA、C，那么这篇文章会比较适合你过一遍JS的基础本文内容： 1. JS是什么 2. JS的作用 3. 浏览器如何执行JS 4. JS的三部分组成 4.1 ECMAScript 4.2 DOM文档对象类型 4.3 BO...
2019-11-17 23:19:44
949
原创 CSS学习笔记 | 定位
定位本文内容：定位： 1. 为什么需要定位？ 2. 定位组成 2.1 定位模式 2.2 边偏移 3. 静态定位（了解） 4. 相对定位 4.1 语法 4.2 相对定位的特点 5. 绝对定位 5.1 语法 5.2 绝对定位的特点 6. 相对定位和绝对定位如何应用 “子绝父相” 7. 固定定位 7.1 语法 7.2 固定定位的特点 7.3 小技巧...
2019-11-05 17:16:45
695
原创 CSS学习笔记 | 浮动
浮动本文内容：浮动： 1. 传统网页布局的三种方式 2. 为什么需要浮动 3. 什么是浮动 4. 浮动特性（重点） 5. 浮动布局注意点 6. 清除浮动 6.1 为什么要清除浮动 6.2 语法 6.3 清除浮动方法 6.3.1 额外标签法 6.3.2 给父级添加 overflow 6.3.3 :after 伪元素法 6.3.4 双伪元素清除浮...
2019-11-04 10:11:44
649
原创 CSS学习笔记 | 盒子模型
CSS盒子模型本文内容CSS盒子模型： 1. 看透网页布局的本质 2. 盒子模型的组成 3. 边框border 3.1 边框属性 3.2 边框的复合写法 3.3 边框分开写法 3.4 小作业 3.5 表格的细线边框 3.6 边框会影响盒子实际大小 4. 内边距padding 4.1 内边距属性 4.2 内边距复合写法 4.3 内边距会影响盒子的实际...
2019-10-31 10:40:24
1582
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人