- 博客(46)
- 收藏
- 关注
RSS订阅原创 Keep-Alive 续集：Vue.extend 的遗产解析与优雅告别
是 Vue2 提供的用于创建组件构造器的工厂方法，它接受一个组件配置对象，返回一个“继承自 Vue”的组件类构造函数它不是定义组件，而是创造组件构造器，为组件的动态实例化提供支持。对比维度Vue2Vue.extendVue3 推荐方式定义方式核心理念类式继承函数组合 + 声明式渲染动态能力✅ 强，需手动挂载/销毁✅ 强，通过实现生命周期掌控✅ 手动$mount$destroy✅ 灵活控制，通过容器 DOM未来兼容性❌ Vue3 中已废弃✅ 兼容性强Vue.extend。
2025-06-12 17:25:58
852
原创 一次 “简单需求“ 引发的 Vue 缓存血案：从 keep-alive 踩坑到 Vue3 优化全记录
事情是这样的——因为团队人手紧张，我临时接手了一个三年前的老项目，技术栈是 Vue2。需求提了个看似简单的需求：“我们这个部分页面能不能加个缓存？别每次切换回来都重新加载了。我心想：“这年头了，Vue 的缓存不是一句keep-alive就搞定？于是信手一加，页面状态完美保留，效果看起来相当不错。我刚准备喝口茶，结果测试同学一句话把我拉了回来：“咦？你这个 tab 不是关掉了吗？怎么再点回来状态还在？这缓存清不了啊！我：“啊这……”
2025-06-12 17:15:03
681
原创 从 Vue3 回望 Vue2：开发体验重构——从 Vue CLI 到 Vite
从 Vue CLI 到 Vite 的迁移，不是简单地换一个工具，而是一次从“等待编译”到“即刻响应”的范式飞跃。Vite 代表了前端构建的现代化趋势——更快的反馈、更简的配置、更灵活的插件机制。在 Vue3 的生态中，Vite 已不再是可选项，而是默认选项。真正优雅的开发体验，不止于代码之上，更在于构建之下。Vite，不只是快，更是顺畅。
2025-05-17 09:00:00
921
原创 从 Vue3 回望 Vue2：性能优化内建化——从黑盒优化到可控编译
Block（块） = 一次更新中可能会变化的子树。每发现一个有动态内容的区域，就调用；所有动态子节点挂到这个 block 里；静态内容提升出去，不参与这个 block；最终只对 block 内部做 diff，跳过整块静态区域。Block Tree 是 Vue3 编译阶段为模板结构生成的“更新分区”；每个openBlock标记了一个更新边界；静态内容被提前 hoist 出 block，避免反复 diff；最终实现“只更新必要部分”，大幅提升性能；
2025-05-16 14:31:04
1096
原创 从 Vue3 回望 Vue2：生命周期的清晰化——从混乱钩子到明确时机
✅ Vue3 将钩子函数模块化为可导入函数（如），逻辑组织更集中、更易复用；✅setup()成为唯一入口，集中统一初始化逻辑，替代了 Vue2 中多个钩子的职能；✅ 生命周期钩子可以被组合式封装到中，增强逻辑复用能力；❌ Vue2 的钩子分散、命名模糊（如createdmounted常被混用）；❌ Vue2 无法按需加载钩子逻辑，不利于逻辑拆分与测试；
2025-05-16 10:25:36
699
原创 从 Vue3 回望 Vue2：组件设计升级——Options API vs Composition API
Vue3 的 Composition API 不仅是新的写法，更是组件组织理念的升级。它鼓励我们以“功能为单位”进行思考与设计，打造可复用、可组合、可维护的现代组件。从 Options 到 Composition，不只是范式的切换，更是开发者走向专业化的里程碑。
2025-05-15 13:47:13
927
原创 从 Vue3 回望 Vue2：逻辑复用新思维——从 Mixins 到 Composables
Mixin 是 Vue2 提供的一种“选项合并”机制，可以将一组通用的组件选项（如 data、methods、created 等）抽离成复用模块，在多个组件中引入。示例：表单校验逻辑复用data() {return {},methods: {// 校验逻辑// 假设校验通过},},对比维度Vue2 Mixin可读性隐式注入、来源不清晰显式引入、逻辑边界清晰可维护性易引发冲突、修改牵一发而动全身单一职责、粒度清晰，易于重构灵活性复用粒度粗、组合性差。
2025-05-14 10:39:23
1356
原创 从 Vue3 回望 Vue2：状态管理现代化：从 Vuex 到 Pinia
当项目规模较小时，只定义一个 store 就够了，但随着复杂度增加，我们需要模块化管理多个 store，并在组件中调用。维度VuexPinia模块化方式需集中注册 modules，并手动设命名空间每个文件即为模块，天然独立多模块调用使用路径访问：state.module.prop使用多个 store 实例，独立调用状态定义state + mutation + action 三段式结构直接写 action，省略 mutation，简洁清晰组件调用语法。
2025-05-14 09:54:36
637
原创 从 Vue3 回望 Vue2：响应式的内核革命
Proxy是 ES6 引入的新特性，允许我们创建一个对象的代理，拦截并定义对该对象的所有基本操作，如读取、赋值、删除、遍历等。// 依赖收集},// 派发更新相比 Vue2 的属性级别劫持，Vue3 是对象级别代理，更加灵活与全面。
2025-05-13 18:01:14
719
原创 从 Vue3 回望 Vue2：事件总线的前世今生
Vue3 的出现代表着 Vue 框架架构思想的一次深刻转变：从基于选项的声明式组件模型，转向组合式、函数化、更可维护的逻辑表达方式。但 Vue3 的前身 ——Vue2，至今依然活跃于大量老项目中。正在接手一个 Vue2 项目在做 Vue2 向 Vue3 的迁移想深入理解 Vue3 各种通信方式的“由来”事件总线（Event Bus）。事件总线是 Vue2 中一种基于 Vue 实例事件机制的跨组件通信方式，本质上是一个全局的事件调度中心。一个组件触发事件另一个组件监听事件对比维度。
2025-05-13 16:45:53
1194
原创 大模型时代的语言格局演变：为什么是 JavaScript？
大模型时代，技术壁垒正在转移。基础设施被平台化托管，技术细节逐步隐去，真正决定成败的是用户体验与创意速度。在这场关于创新的竞赛中，JavaScript 以其无与伦比的开发效率、全栈能力和强大生态，成为开发者最重要的武器之一。未来属于那些既懂 AI，又能快速触达用户的开发者。而 JavaScript，正是通往这个未来的必由之路。
2025-04-26 20:29:43
772
原创 《Pinia 从入门到精通》Vue 3 官方状态管理 -- 插件扩展篇
而且它们是按顺序依次作用在每个 Store 上的。这种机制非常适合组合功能，比如。—— 这是大型项目中常见的“精细化状态管理优化”策略。，构建出一个高度自动化、具备横切能力的状态管理体系。适用于多个插件对多个 store 进行组合控制。，而不是全局一次性设置。Pinia 插件机制本质上是作用于。
2025-04-24 19:48:38
787
原创 《Pinia 从入门到精通》Vue 3 官方状态管理 -- 进阶使用篇
name: '',email: ''}),actions: {})}),getters: {},actions: {})虽然大多数场景下可自动推导，但我们仍推荐使用接口显式定义stategettersactions类型以获得更强可维护性。count: 0,}),getters: {},actions: {})插件是一个函数，在每个 Store 实例创建时执行。添加全局状态劫持/监听 Store 生命周期。
2025-04-24 17:43:30
969
原创 《Pinia 从入门到精通》Vue 3 官方状态管理 -- 基础入门篇
Vuex 是 Vue 2 时代的官方状态管理库，但到了 Vue 3，Pinia 成为了 Vue 官方推荐的新一代状态管理解决方案。Pinia 的设计理念更贴近 Vue 3 的 Composition API，同时解决了 Vuex 中的一些设计痛点。在中通过返回一个对象，即为该 Store 的状态树。count: 0,})类似 Vue 的 computed 属性，依赖 State 自动更新，具备缓存能力。getters: {${${类似 Vue 的 methods，用于封装业务逻辑。
2025-04-24 16:17:29
843
原创 基于 Vue 的Deepseek流式加载对话Demo
用户界面组件：负责与用户进行交互，包括文本输入框、语音输入按钮、消息显示区域等。消息处理组件：将用户输入的消息进行处理，并显示在界面上。流式请求处理：与后端进行流式通信，实时获取响应内容。语音处理模块：支持语音输入功能，将语音转换为文本。通过以上步骤，我们实现了一个基于 Vue 的智能对话系统，支持文本输入、语音输入和流式响应。在开发过程中，我们使用了 Vue 的响应式原理和组件化开发思想，结合 Markdown 解析器、语音处理 API 和流式请求技术，为用户提供了一个流畅、智能的对话体验。
2025-03-11 14:01:17
938
2
原创 FloatingBall悬浮球
至此，我们通过一步步的精雕细琢，成功创建出了一个功能完备、可拖动的悬浮球组件。用户得以凭借简单的点击和拖动操作，轻松与它展开交互，获取所需信息或触发特定功能。这一小小的组件，不仅极大地提升了用户体验，让网页操作更加便捷高效，而且还具备广阔的拓展潜力。未来，我们能够依据不同项目的独特需求，为其添加更多新奇有趣的交互选项，或是进一步丰富信息展示的形式与内容。
2025-01-08 10:33:59
1188
原创 【Cursor】Cursor无限免费全方位指南！
Cursor是一款集成了先进大型语言模型（LLM）如GPT-4、Claude 3.5的代码编辑器，它基于 Visual Studio Code（VSCode）开发，因此继承了VSCode的许多特性和操作习惯。界面与操作：Cursor的布局和操作与VSCode基本一致，包括扩展下载、Python编译器配置、远程服务器连接和设置等。核心功能：Cursor提供了多语言支持、智能代码补全、内置终端以及插件扩展等功能。它特别适合大规模项目管理和团队协作，可以大幅简化开发流程。下载与安装。
2024-12-13 13:28:04
46539
24
原创 Vue 中的用户空闲状态检测与处理
我们使用 Vue 结合 JavaScript 的事件监听机制来实现用户空闲状态检测。通过监控用户的鼠标移动、键盘输入等行为，判断用户是否处于活跃状态，并在超时后触发锁屏。我们创建了一个类，继承自，用于管理自定义事件的发射和监听。: any) {这段代码通过多种方式检测用户的行为，包括鼠标移动、键盘按下和页面可见性变化等，实现了对用户空闲状态的准确判断。在用户空闲时，能够及时采取相应的措施，如弹出密码输入框进行解锁或提供切换用户的选项，提高了系统的安全性和用户体验。
2024-12-11 15:44:17
1020
原创 【手把手搓组件库】从零开始实现Element Plus--组件开发
tag?type?size?nativeType?disabled?: boolean;loading?: boolean;icon?: string;circle?: boolean;plain?: boolean;round?: boolean;
2024-05-26 16:00:31
1492
原创 【手把手带你搓组件库】从零开始实现Element Plus
在本文中，将手把手带你从零开始实现一个类似于Element Plus 的组件库。Element Plus 是一个非常流行的Vue UI 组件库，我们将尝试实现一些常见的组件，如基础组件、反馈组件、表单组件等。让我们开始吧！到此我们就已经全流程跑通了 接下来就是完善组件内容了。
2024-05-26 10:00:00
2071
3
原创 从零开始搭建一个SpringBoot项目
在springboot2.0之后 , 采用的默认连接池就是Hikari, 号称"史上最快的连接池", 所以我们没有添加依赖也能直接用, springboot的自动配置中含有DataSourceAutoConfiguration配置类, 会先检查容器中是否已经有连接池对象, 没有则会使用默认的连接池, 并根据特定的属性来自动配置连接池对象, 用到的属性值来源于DataSourceProperties对象。例如常用的getter、setter、toString、构造器和equals等方法。
2024-05-20 09:53:41
1802
1
原创 Win10安装多版本JDK并随时切换
Spring Boot 3.0 开始，最低的 Java 版本要求为 17，Java 8 就不再适用了。PS：之前才装了Java 8 ,那咱不是成了四九年入国军，八嘎雅鹿，亚麻跌，咱直接抱着篮球自己游回大陆。再到系统安装JDK 21 来回切换一下
2024-05-18 11:14:08
1286
原创 浏览器调试步骤
在进行浏览器调试时，我们需要按照以下步骤进行操作。这些步骤包括确认调试环境、使用开发者工具进行调试、检查网络请求和响应、查看控制台输出、调试JavaScript代码、检查页面布局和样式等。通过这些步骤，我们可以快速定位和解决前端页面的问题，提升页面的质量和性能。
2024-05-15 16:39:55
1375
原创 Win10如何安装JDK1.8，图文详解
JDK全称为Java Development Kit，顾名思义是java开发工具包，是程序员使用java语言编写java程序所需的开发工具包。JRE全称为Java Runtime Environment，顾名思义是java运行时的环境，包含了java虚拟机，java基础类库，是使用java语言编写的程序运行所需要的软件环境。给新电脑安装过java环境，记录一下完整过程，以后直接看流程就好了。按步骤来一定可以，如果没有成功，说明环境没有配置正确，检查环境变量配置。
2024-05-15 15:05:41
1467
原创 JS获取IP地址
WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。项目中同一个帐号可以多个人同时登录，导致有些操作无法直接追溯到对应的责任人，因此需要获取到当前登录用户的IP地址（员工内部人员的内网地址）并收集上报。由于该项目基本都是部署在内网，所以本篇文章暂时只考虑获取内网IP，内网IP的获取相对比较复杂，主要是需要依赖 API：webRTC。
2024-05-06 11:43:09
1942
1
原创 【el-table 实现C# GridView控件 根据GroupIndex 进行分组功能 支持多级 不同参数】
el-table 实现 C# GridView控件 根据GroupIndex 进行分组功能 支持多级 不同参数
2024-04-17 21:05:33
496
原创 从零搭建一个组件库 -- 使用 vitepress 为组件编写文档
【代码】从零搭建一个组件库 -- 使用 vitepress 为组件编写文档。
2024-04-13 16:37:52
685
1
原创 基于uniapp开发的SUPOIN(销邦) PDA使用广播扫码监听功能
手持 PDA 是 Android 平台，其扫码的解决方案也有摄像头和激光扫描等多种解决方案，这里结合 uni-app 的开发特性，记录一下具体的实现方案。
2022-12-16 15:34:35
3005
3
原创 Vue3 + Ant Design Vue 可搜索 自定义字段 a-tree
实现自定义字段需要使用Tree props的 replaceFields 属性。
2022-11-15 20:33:31
2295
原创 SignalR在启动连接时显示“WebSocket is not in the OPEN state“
按照教程写的SignalR长连接,但是有错 WebSocket is not in the OPEN state。想到以前安装过其他版本的SignalR 所以去吧其他依赖全部删除了，但是还是不行，未修改之前代码如下。重新创建了一个vue项目发现居然没有问题，
2022-11-11 20:09:43
856
1
原创 Ant Design Vue 2.2.8 表格表单验证
刚刚接触 Ant Design Vue 2.2.8 有一个简单的需求需要实现表格的表单验证功能。但在官网demo和API中找了很久都没有发现实现功能的方法，网上能找到的实现案例大部分是基于 Ant Design Vue 1.1.5 的版本 使用 FormModel 表单。但 2.2.8 FormModal 移除了。以上就是记录碰见的问题内容，本文仅仅简单实现表格验证问题， 如果有不足希望能够评论指导一下。
2022-11-08 15:43:24
3588
3
原创 [@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.
编译运行出现"[@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead."黄色警告提示，不影响项目的运行，但是看着很难看，就想着把它解决调。出现这个提示是因为 >>> 和 /deep/ 组合器已被弃用，需要使用 :deep() 或者 ::v-deep() 代替。
2022-11-07 14:12:18
5811
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人