- 博客(108)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue3 中的 watch 与 watchEffect 的区别
Vue3中watch与watchEffect的核心差异在于：watch显式指定监听源，提供精确控制(newVal/oldVal对比、深度监听等)，适合需要明确追踪特定数据变化的场景；watchEffect自动收集依赖，简化代码但缺乏精细控制，适用于多依赖联动的简单场景。关键区别包括：依赖追踪方式、停止监听机制、初始执行时机和配置灵活性。开发时应根据是否需要历史值对比、精准控制监听范围等需求选择合适方案，注意watchEffect可能带来性能损耗和调试难度。
2025-11-18 14:16:55
460
原创 Vue3 计算属性 computed
Vue3计算属性(computed)不仅限于模板使用，其本质是返回响应式ref对象，可通过.value访问值。计算属性适用于：1)脚本逻辑处理；2)属性间互相依赖；3)通过getter/setter实现可写状态。开发者可以灵活地在组件逻辑、外部函数等多种场景下访问计算属性，突破模板限制。计算属性的设计旨在封装响应式依赖，同时保持高度灵活性。
2025-11-18 11:21:30
291
原创 Vue 集成环信 SDK
本文介绍了环信Web SDK的集成与初始化流程：1. 准备工作包括注册环信账号、创建应用获取AppKey，以及通过npm安装SDK。2. 配置环节详细说明了如何引入SDK、创建配置文件WebIMConfig.js和初始化文件WebIM.js，包含各类参数设置如自动登录、消息缓存等。3. 事件处理部分讲解了连接状态和消息接收的监听方法，包括文本消息、自定义消息等回调处理。4. 最后介绍用户相关操作，如登录、加入/退出聊天室，以及获取历史消息的API使用方式。整个流程涵盖了环信Web SDK从集成到基础功能实现
2025-11-04 14:55:53
636
1
原创 Vue 项目集成声网SDK
本文介绍了声网RTC SDK的集成流程，主要包括：1.注册声网账号并创建项目获取AppID；2.配置频道和Token；3.安装引入SDK；4.初始化客户端并加入频道，包括设置用户角色、权限参数等；5.处理用户加入/离开频道的回调事件；6.订阅和播放音视频轨道的方法；7.最后说明了如何离开频道。该流程适用于需要实现实时音视频通信的Vue项目开发。
2025-10-27 17:58:56
694
原创 AntdesignVue 的月份区间组件用法
本文介绍了一个只选择年月的日期区间组件的实现方法。通过使用a-range-picker组件，设置format和valueFormat为"YYYY-MM"，并指定mode为['month','month']。核心解决方法是利用moment库和panelChange事件，将选中的值转换为YYYY-MM格式来实现回显功能。该方法解决了常规日期组件无法直接选择年月的问题，同时确保了日期格式的一致性。
2025-09-04 09:52:31
290
1
原创 element plus 的树形控件，如何根据后台返回的节点key数组，获取节点key对应的node节点
摘要：在使用ElementPlus的el-tree组件时，后端返回的key数组包含父节点key会导致所有子节点被默认选中。解决方案是手动设置节点选中状态，避免依赖default-checked-keys属性。关键步骤包括：获取tree实例引用、遍历key数组逐个设置选中状态、确保数据加载完成后执行设置。通过node.setChecked(true,false)方法可单独选中节点而不影响子节点，并需要先清空原有选中状态。该方案适用于需要精确控制默认选中项的场景，需注意node-key的唯一性和异步数据加载时机
2025-06-18 15:31:53
927
原创 js 实现防微信聊天输入框功能
本文介绍了一个实现微信式富文本输入框的解决方案。通过使用div的contenteditable属性，实现了既能输入文字又能插入图片的复合输入框功能。核心代码展示了如何：创建一个可编辑div作为输入容器添加表情选择器（包括悬浮显示和无限滚动加载）实现图片插入功能（使用execCommand方法）处理光标定位（兼容多浏览器）表单提交时进行内容转换（将HTML转换为特定格式的文本）文章还提及了当前实现存在的一些缺陷，并邀请读者提供改进建议。该方案适用于需要类似微信输入框的富文本交互场景。
2025-06-14 14:23:17
385
原创 程序员效率倍增秘籍：解锁现代开发工具的“超能力”
再强大的工具，也需要开发者的巧思与实践。真正的效率提升，不是盲目追逐潮流工具，而是找到适合自己的“工具链”，并将其融入日常习惯。毕竟，“外挂”只是加速器，而驾驭它的双手，才是通往高效的核心引擎。
2025-06-14 10:45:34
473
原创 js 仿 Ai 实时输出内容
本文介绍了如何使用Node.js的Express框架和HTML5的EventSource实现实时数据推送。前端通过按钮控制EventSource的连接与断开，接收服务器定时推送的时间数据并展示；后端Express服务器设置SSE(Server-Sent Events)响应头，通过setInterval每秒推送当前时间。关键点包括：前端EventSource对象的事件监听、后端SSE响应头的配置以及跨域处理。该方案适用于需要服务器主动推送数据的实时应用场景。
2025-05-26 11:13:52
283
原创 vue3 如何清空 let arr = reactive([])
在 Vue 3 中，如果你有一个使用reactive创建的响应式数组，并且你想清空这个数组，有几种方法可以实现。
2025-03-24 09:40:24
964
原创 vue3 中如何监听 props 中的值的变化
函数允许你观察一个或多个响应式数据源，并在这些数据源发生变化时执行回调函数。函数的回调会被调用，并且我们可以在新值和旧值之间进行操作。以下是一个示例，展示了如何在 Vue 3 中使用。的值，并将其存储在一个响应式的引用。中的值发生变化时执行特定的逻辑了。在 Vue 3 中，你可以使用。在这个示例中，我们首先从。
2025-01-23 17:48:57
2311
原创 Ant Design Vue 的 a-input-number 组件限制最小值和最大值
data(){return{width:null//初始化值},methods:{returnmin;if(!returnmax;returnmin;},
2025-01-20 11:14:53
1109
原创 element plus 使用 upload 组件达到上传数量限制时隐藏上传按钮
解决办法：当上传个数达到限定个数时，通过样式控制上传按钮的隐藏。
2025-01-11 17:00:40
1263
原创 element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id
【代码】element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id。
2025-01-11 16:23:56
1952
原创 Vue3 给 reactive 响应式对象赋值
在 Vue 3 中，你可以使用reactive函数创建响应式对象。如果你想给这个响应式对象赋值，可以直接修改其属性。
2025-01-09 10:30:31
4460
3
原创 uniapp H5页面实现懒加载
在这个示例中，我们创建了一个 scroll-view 组件，并在其内部放置了一个 list 组件来显示数据。通过监听 scroll-view 的。方法来加载更多数据。每次加载数据后，我们将新数据添加到 listData 数组中，并更新页面的显示。事件，我们可以在用户滚动到底部时调用。
2025-01-03 15:04:17
1022
原创 Element plus 的 upload 组件实现自定义上传
Element Plus 是一个基于 Vue 3 的 UI 组件库，提供了许多常用的 UI 组件。通过这种方式，你可以完全控制文件上传的过程，并根据需要实现自定义的逻辑。以下是一个简单的示例，展示如何使用 Element Plus 的。组件用于文件上传功能。如果你想实现自定义上传逻辑，可以通过。
2024-12-31 10:24:33
1231
原创 vue3 ref reactive响应式数据，赋值的问题、解构失去响应式问题
创建响应式数据时，赋值操作和解构赋值存在一些需要注意的事项。时，应注意正确的赋值方式和解构赋值导致的响应性丢失问题。函数，可以有效避免这些问题，确保数据的响应性。总结来说，在 Vue3 中使用。在 Vue3 中，使用。
2024-12-26 15:41:53
3762
2
原创 ref 和 reactive 的用法和区别
ref：适用于基本数据类型，通过.value访问和修改值，性能较好。reactive：适用于对象或数组，直接访问和修改对象的属性，性能稍逊于ref。ref 更适合简单的数据类型和场景，而 reactive 则适用于复杂的对象和需要深度响应式的场景。根据实际需求选择合适的工具，可以更高效地构建响应式应用。
2024-12-26 15:34:27
1044
原创 Element plus 禁止 el-input-number 输入 e
【代码】Element plus 禁止 el-input-number 输入 e。
2024-12-23 13:40:55
865
原创 element plus的table组件，点击table的数据是，会出现一个黑色边框
在使用 Element Plus 的 Table 组件时，如果你点击表格数据后出现了一个黑色边框，这通常是因为浏览器默认的焦点样式（outline）被触发了。
2024-12-17 14:20:54
710
原创 Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label
这样写，选中一个选项 “是” 后，下拉框中显示的是 label---是，而不是 value---1，如图。
2024-12-17 13:55:35
914
原创 Vue 3 的 defineExpose 用法详解
是一个非常有用的工具，它允许你在 Vue 3 中使用语法糖时，有选择地暴露组件的内部属性和方法给父组件。这有助于提高组件的封装性和可维护性。
2024-12-16 10:59:25
764
原创 vue3 父组件调用子组件 el-drawer 抽屉
你可以控制哪些属性和方法可以被外部访问，从而增强组件的封装性和安全性。语法糖中暴露组件内部的属性或方法给父组件的函数。这里主要用来 ref 和 defineExpose，其中。获取了子组件的实例，而。
2024-12-16 10:47:39
776
原创 Vue3 获取当前组件实例
是 Vue 3 中一个非常有用的工具，它允许开发者在 setup 函数或生命周期钩子中获取当前组件实例的上下文信息。然而，需要注意的是，该函数主要用于调试目的，并不推荐在生产环境中过度使用。在实际项目中，应根据具体需求选择合适的方式来获取和使用组件实例。是一个用于获取当前组件实例的重要函数。在 Vue 3 中，
2024-12-13 14:11:02
1870
1
原创 技术文档：知识传承的载体，团队协作的桥梁
在技术的浩瀚海洋中，一份优秀的技术文档宛如精准的航海图。它不仅承载着知识的传递，更是团队协作的桥梁和产品成功的幕后英雄。然而，打造这样一份出色的技术文档并非易事。本文将分享一些宝贵的经验和方法，帮助技术大神和初涉此领域的新手们更好地编写技术文档。
2024-12-10 09:56:21
542
原创 AI技术赋能电商行业：从购物推荐到供应链管理的创新应用
随着技术的飞速发展，越来越多的电商平台开始尝试运用AI技术来提高销售效率。从用户体验到供应链管理，AI正在深刻影响着电商行业的未来发展趋势。本文将探讨如何在AI加持下实现购物推荐、会员分类、商品定价等方面的创新应用，并分享如何运用AI技术提高电商平台的销售效率和用户体验，为电商行业的数字化转型提供新的思路和方法。
2024-11-14 09:16:26
498
原创 js 将文件 url 地址转成 Blob 文件流并下载
在你的 Vue 组件中，可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流，你可以使用。这样，当用户点击按钮时，浏览器会开始下载指定的文件。来发送请求并处理响应。
2024-11-06 18:12:47
1658
原创 AI大模型如何重塑软件开发流程：优势、挑战与应对策略
AI大模型是指通过大规模数据训练得到的深度学习模型，具有强大的数据处理能力和学习能力。在软件开发领域，AI大模型被广泛应用于代码生成、错误检测、性能优化等环节。例如，GitHub Copilot就是一个典型的AI编程助手，它可以根据开发者输入的注释和上下文自动生成代码片段，大大提高了编码效率。此外，AI还可以用于自动化测试，通过模拟用户行为来检测软件中的缺陷和漏洞。
2024-11-05 09:11:50
563
原创 鸿蒙生态崛起：开发者如何抓住机遇，应对挑战，创造卓越应用体验
随着科技的飞速发展，操作系统在智能设备中的地位日益凸显。华为鸿蒙系统（HarmonyOS）作为新兴力量，正逐步展现出与安卓、iOS三足鼎立的态势，其在智能手机、智能穿戴、车载、家居等多个领域的广泛应用，为开发者带来了前所未有的机遇与挑战。本文将围绕“鸿蒙生态崛起：开发者如何抓住机遇，应对挑战，创造卓越应用体验”这一主题展开探讨。
2024-10-30 09:22:17
412
原创 我的创作纪念日
那是一个偶然的机会，我在浏览技术博客时，不经意间点进了CSDN的页面，从此便与这个平台结下了不解之缘。CSDN不仅为我提供了丰富的技术资源，更成为了我分享创作、交流思想的舞台。在这里，我找到了志同道合的朋友，也发现了自己对技术写作的热情。CSDN的平台让我能够将这些知识传播给更多需要的人，这种分享的快乐成为了我不断前行的动力。在CSDN上，我不仅收获了知识和技能的提升，更重要的是，我收获了一批忠实的读者和朋友。在CSDN这个大家庭里，我找到了属于自己的位置，也见证了无数像我一样热爱技术的创作者的成长。
2024-10-28 10:05:22
345
原创 CSSS 实现图片自适应容器展示
可以通过设置图片的 CSS 样式来实现让不同尺寸的图片在固定高度的容器中完整展示，不拉伸、不压缩、不裁剪。通过这种方式，无论图片的原始尺寸如何，它们都会在固定高度的容器中完整展示，并且不会被拉伸或压缩。属性来控制图片的显示方式。
2024-10-23 11:33:23
718
原创 js 计算两个日期之间的天数
在 JavaScript 中，你可以通过计算两个日期之间的毫秒数差值，然后将其转换为天数来计算两个日期之间的天数。然后，它计算两个日期之间的毫秒数差值，并将其转换为天数。最后，返回计算出的天数。如果输入的日期格式不正确，可能会导致意外的结果或错误。请注意，这个函数假设输入的日期格式是有效的并且可以被。函数接受两个日期字符串作为参数，并将它们解析为。
2024-10-22 13:19:03
760
原创 庆祝1024程序员节：回顾与展望编程世界的无限可能
1024程序员节不仅是对程序员辛勤工作的庆祝，更是对编程世界不断创新和进步的认可。在过去的一年里，我们见证了许多激动人心的技术突破和发展，这些成就不仅改变了我们的生活，也为未来的发展铺平了道路。在未来的日子里，让我们继续携手并进，探索编程世界的无限可能，共同迎接更加美好的明天。愿每一位程序员都能在这条充满挑战与机遇的道路上，找到属于自己的光芒。祝大家1024程序员节快乐！
2024-10-21 09:10:25
555
Vue3-devtools 可视化工具
2024-12-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人