- 博客(123)
- 收藏
- 关注
RSS订阅原创 深度解析 React Hooks：从 useEffect 到自定义 Hook 的性能陷阱与解决方案
在自定义 Hook 中，同样可能会遇到闭包问题和不必要的重新渲染。// 这里的 value 可能不是最新值}, 1000);}, []);return (<div></div>在这个自定义 Hook 中，定时器的回调函数捕获了value的初始值，即使value状态更新，定时器内打印的仍然是旧值。在使用 React Hooks 时，闭包问题和依赖项变化时的渲染优化是需要重点关注的性能问题。与类组件相比，Hooks 中的闭包问题有不同的表现形式，但通过正确设置依赖项、使用。
2025-04-03 17:20:13
1373
原创 React 18+TypeScript 项目实战：打造高性能组件的 10 个关键技巧
在 TypeScript 中，使用严格的类型定义可以避免许多潜在的错误。对于组件的 props、state 和函数参数等，都应该明确指定类型。通过以上 10 个关键技巧，我们可以结合 React 18 的最新特性和 TypeScript 的类型安全优势，打造高性能的 React 组件。合理使用useMemo、懒加载等优化策略，以及严格的类型定义和泛型处理，可以提高代码的性能、可维护性和复用性。在实际项目中，我们应该根据具体需求选择合适的技巧，不断优化组件的性能。到这里，这篇文章就和大家说再见啦！
2025-04-02 11:01:14
1227
原创 Vue 项目中使用 Mock 数据进行开发
在 Vue 项目中使用 Mock 数据可以让前端开发人员更加高效地进行页面开发和测试，减少对后端的依赖。本文介绍了两种常见的 Mock 数据的使用方式：Mock.js 和 JSON Server，并分享了 Mock 数据的管理和维护的一些经验。希望本文能够帮助你在 Vue 项目中更好地使用 Mock 数据。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-04-01 15:16:52
1043
原创 React 性能优化全攻略：从渲染阻塞到 Web Workers
Web Workers 允许在浏览器中创建后台线程，执行复杂的计算任务而不阻塞主线程。通过上述多种性能优化技巧，我们可以从多个方面提升 React 应用的性能。在实际开发中，需要根据应用的具体情况选择合适的优化方法，不断进行性能测试和优化，以打造出高性能、响应迅速的 React 应用。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-04-01 14:14:21
1228
原创 Vue.js 源码解析：深入 Vue 3 中 ref 和 reactive
通过对ref和reactive源码的深入分析，我们了解到它们的实现原理。ref借助RefImpl类和进行依赖收集和触发更新，reactive则利用Proxy对对象的属性访问和修改进行拦截。理解这些源码有助于我们更好地运用ref和reactive，避免常见的错误，从而构建出高效、稳定的 Vue 3 应用。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-31 15:45:22
754
原创 深入剖析 Vue.js 中 computed 和 methods 的性能差异
computed和methods在 Vue.js 中都有各自的用途，但在性能上存在明显差异。computed凭借其缓存机制、依赖追踪和响应式更新的特性，在处理复杂计算和依赖数据更新时具有更好的性能表现；而methods更适合用于事件处理和无缓存需求的场景。开发者在实际开发中，应根据具体的业务需求和性能要求，合理选择使用computed和methods，以优化应用的性能和用户体验。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。
2025-03-31 08:14:10
864
原创 Vue.js 源码解析：computed 计算属性
通过以上源码解析，我们可以总结出 Vue.js 中computed在 Vue 实例初始化时，会调用函数来初始化computed选项。函数会遍历computed对象的每个属性，为每个属性创建一个惰性求值的Watcher实例。使用函数将计算属性定义到vm实例上，并根据是否需要缓存创建相应的getter函数。当访问计算属性时，会调用函数返回的函数，根据Watcher的dirty属性决定是否重新计算值，并处理依赖收集。当依赖的数据发生变化时，会将计算属性的Watcher的dirty属性设置为true。
2025-03-28 15:00:00
834
原创 Vue.js 源码解析：watch 监听的实现原理
通过以上源码解析，我们可以总结出 Vue.js 中watch在 Vue 实例初始化时，会调用initWatch函数来初始化watch选项。initWatch函数会遍历watch对象的每个属性，为每个属性创建一个Watcher实例。Watcher实例在创建时会调用get方法获取当前的值，并将自己添加到被监听数据的依赖列表中。当被监听的数据发生变化时，会触发update方法，在update方法中会重新获取新的值，并调用回调函数。理解watch。
2025-03-28 08:57:47
1008
原创 Vue.js 对接天气 API 实战：打造实时天气查询功能
Vue.js 与第三方 API 的对接方法异步请求处理与状态管理数据格式化与 UI 渲染技巧生产环境优化策略添加单元测试确保 API 调用稳定使用 Vuex 管理全局状态添加加载动画提升用户体验实现自动刷新功能（如每 15 分钟更新一次）空气质量数据生活指数（如紫外线指数、穿衣建议）天气图表展示语音播报功能通过合理设计和性能优化，您可以打造出专业级的天气查询应用。到这里，这篇文章就和大家说再见啦！
2025-03-27 11:18:30
1017
原创 Uniapp 与 Webview 双向通信实战：打造丝滑的混合应用体验
Uniapp 与 Webview 双向通信的核心实现跨平台适配的关键技巧复杂场景下的通信优化方案建立统一的消息协议实现消息队列机制添加心跳检测机制使用加密算法保护敏感数据通过合理设计通信机制，您可以打造出功能强大且稳定的混合应用，充分发挥 Uniapp 和 Webview 的协同优势。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-27 11:00:33
631
原创 Vue.js 源码解析：响应式系统的依赖收集与触发机制
Vue.js 的响应式系统是其核心竞争力之一，通过数据劫持和依赖跟踪实现自动更新。核心模块包括：Observer：将普通对象转换为响应式对象Watcher：依赖收集器，负责订阅数据变化Dep：依赖管理器，存储所有相关 WatcherScheduler：异步更新队列，批量执行更新
2025-03-27 09:12:30
1180
原创 微信小程序分包加载实战：5 招让启动速度提升 200%
分包加载是小程序性能优化的核心手段，通过合理划分、预加载策略和独立分包配置，可实现启动速度的显著提升。结合代码压缩、异步化等优化技巧，能进一步打造流畅的用户体验。建议开发者在项目初期规划分包结构，避免后期重构成本。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-26 10:29:56
1239
原创 微信小程序登录流程避坑：UnionID 获取的 3 大隐藏雷区
分场景兜底优先通过获取 UnionID，失败后降级至授权流程。全链路编码规范加密数据传输需进行URLEncode 预处理，避免符号转义问题。会话状态协同管理前端定期检查，后端解密前二次校验有效性。拓展建议：对于需要多端用户体系打通的场景，务必提前在微信开放平台完成主体认证和应用绑定，确保 UnionID 稳定获取。互动讨论：你在获取 UnionID 时还踩过哪些坑？欢迎评论区分享实战经验！🔥到这里，这篇文章就和大家说再见啦！
2025-03-25 08:56:41
900
原创 Taro vs Uniapp 微信小程序跨平台框架选型指南
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-25 08:48:17
910
原创 Vue3 中的 Watch 竟能 “暂停”！这招让复杂场景开发效率翻倍
掌握 Watch 的暂停技巧，相当于为你的响应式系统装上了 “智能开关”。这种细粒度控制能力，在复杂交互场景、性能优化等方面具有重要价值。建议在项目中针对数据加载、表单验证等高频场景进行实践，体验开发效率的质的飞跃！拓展思考：你在哪些场景中遇到过需要暂停监听的需求？欢迎评论区分享实战经验！到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-21 10:19:16
770
原创 15 条 JavaScript 代码规范，让团队开发效率飙升！
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-19 13:42:46
465
原创 Vue 3 使用 Hook：提升代码复用与可维护性
在 Vue 3 中，组合式 API（Hook）是一项强大的特性，它允许开发者以函数的形式组织逻辑，从而提高代码的复用性和可维护性。本文将深入介绍 Vue 3 中 Hook 的使用方法、常见场景以及如何创建自定义 Hook。Hook 是 Vue 3 组合式 API 中的核心概念，它是一个函数，用于封装和复用有状态的逻辑。通过使用 Hook，我们可以将相关的逻辑提取到一个函数中，然后在多个组件中复用。以下是一个简单的 Hook 示例，用于实现计数器功能：在这个示例中， 是一个自定义 Hook，它封装了计数
2025-03-19 11:24:43
868
原创 vue3使用大屏dataV问题解决
Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=61137ffc' does not provide an export named 'default' (at main.vue:2:8)
2025-03-17 10:21:38
859
1
原创 Vue 项目中使用 路由守卫 实现路由权限控制
文件的主要功能是在路由跳转前进行权限验证，它会检查用户是否登录、是否有权限访问目标页面等。以下是== -1) {next();} else {// 判断当前用户是否已拉取完user_info信息store// 根据roles权限生成可访问的路由表// 动态添加可访问路由表// hack方法 确保addRoutes已完成});})});});} else {// 没有token== -1) {
2025-03-13 09:44:17
665
2
原创 Vue + Electron 实操：轻松抹除头部菜单，打造极简桌面应用
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-13 09:19:03
708
2
原创 轻松打包 Vue 项目为 .exe：基于 Electron 教程
通过以上步骤，我们成功地将 Vue 项目打包成了一个 Windows 桌面应用（.exe）。使用 Electron 和 Vue 的组合，我们可以充分利用前端技术的优势，快速开发出功能强大、界面美观的桌面应用。希望本文对你有所帮助，让你在前端开发的道路上更进一步。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-12 16:58:25
1057
3
原创 彻底掌握 Vue 组件通信：事件总线封装与最佳实践
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-12 14:07:07
767
原创 Vue 使用异步编程：Promise / Async/Await
假设我们要在 Vue 组件里发送一个异步的 HTTP 请求来获取数据。为了模拟这个请求，我们可以使用setTimeout函数来模拟延迟响应。是基于Promise的语法糖，它能让异步代码看起来更像同步代码，提高代码的可读性。我们继续使用上面的异步请求场景。Promise：是 JavaScript 中处理异步操作的基础，通过thencatch和finally方法可以方便地处理异步操作的结果。：是基于Promise的语法糖，能让异步代码更像同步代码，提高代码的可读性和可维护性。在 Vue 组件中，
2025-03-12 13:55:46
853
原创 Node.js 快速入门教程：前端开发者的后端之旅
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-12 13:52:44
811
4
原创 防止用户误关网页！1 行 JavaScript 代码实现浏览器关闭拦截
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
2025-03-12 11:08:24
321
原创 探究 Vue2 中 Mixin 的应用场景与原理以及对比 Vue3 Hook
Vue3 引入了组合式 API（Hook），它允许开发者以函数的形式组织逻辑。<template><div></div>// 定义一个 Hookreturn {count,increment</script>Vue2 Mixin 是 Vue2 中实现代码复用和逻辑分离的重要手段，通过合并选项的方式为组件添加功能。然而，它存在命名冲突、数据来源不明确等问题。
2025-03-12 10:57:54
680
原创 深入探究 Vue $set 的应用场景与原理
set是 Vue 响应式系统的重要补充，主要用于解决动态属性和数组索引的更新问题。在 Vue 3 中，其适用场景有所减少，但仍需掌握其原理以应对复杂数据结构。合理使用$set可确保视图及时更新，提升用户体验。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-12 10:37:13
694
原创 深入解析 UniApp 的 pages.json 配置文件
pages.json配置文件是 UniApp 开发中不可或缺的一部分，通过合理配置各个选项，能够实现应用的页面管理、分包优化、预加载策略、TabBar导航和全局样式设置等功能。开发者需要深入理解每个配置项的含义和用法，根据项目需求进行灵活配置，以提高应用的性能和用户体验。希望本文能够帮助你更好地掌握pages.json的配置方法，在 UniApp 开发中更加得心应手。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-12 10:10:50
1056
原创 在 Vue 中使用 Three.js 引入模型格式（.fbx、.glb ）小白必看
通过以上步骤，我们成功在 Vue 项目中使用 Three.js 引入了不同格式的 3D 模型。在实际开发中，你可以根据需要调整模型的位置、大小和姿态，还可以添加更多的交互效果和动画，以实现更加丰富的 3D 场景展示。希望本文能对你在 Vue 项目中使用 Three.js 加载 3D 模型有所帮助。
2025-03-12 09:55:08
1095
原创 在 Vue 中使用 Three.js 实现相机基础功能
通过本文的介绍，我们学习了如何在 Vue 项目中使用 Three.js 实现相机的基础功能。包括正投影相机的使用、相机动画的实现、旋转缩放限制以及相机控件的使用。通过将 Three.js 与 Vue.js 结合使用，我们可以更加方便地管理 3D 场景和相机的状态。希望本文对你有所帮助，让你在 Web 3D 开发的道路上更进一步。
2025-03-12 09:48:59
1094
原创 在 Vue 项目中使用 Three.js 创建精灵标注：实现模型交互与可视化
通过本文的介绍，我们学习了如何在 Vue 项目中使用 Three.js 创建精灵，实现模型的加载、交互以及精灵标注的功能。通过合理的代码结构和优化，我们可以提高代码的可维护性和性能。希望本文对你有所帮助，让你在 Web 3D 开发的道路上更进一步。你可以根据实际需求对代码进行扩展和优化，例如添加更多的交互效果、实现视频流的播放等。如果你在开发过程中遇到任何问题，欢迎在评论区留言交流。参考资料Three.js 官方文档Vue.js 官方文档Tween.js 官方文档到这里，这篇文章就和大家说再见啦！
2025-03-12 09:24:01
1137
原创 VueUse 实战案例解析：告别重复代码的 5 大开发场景
按需引入：通过选择性加载功能自定义扩展：基于现有组合函数封装业务逻辑性能监控：结合优化关键路径生态整合：配合实现复杂动效数据统计：某电商项目引入 VueUse 后，页面加载速度提升 30%，代码重复率下降 45%，开发效率提高 2 倍。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-11 14:17:39
838
原创 VueUse：让前端开发回归本质的终极工具库
/ 创建自定义Hook减少重复代码：200 + 函数覆盖 90% 常见场景提升开发效率：从编写逻辑到测试的全流程优化增强代码质量：社区维护的稳定实现拥抱 Vue3 生态：与 Composition API 深度集成实践建议：从useMouse等常用函数入手，逐步替代手动实现的逻辑。结合自定义 Hook，构建团队级的工具库，提升整体开发效率。到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-11 13:51:59
980
原创 React 路由跳转失效？这 5 个细节你可能忽略了
检查路由配置：确保路由路径与 Link/history.push 一致验证 Router 包裹：确认最外层有 BrowserRouter/HashRouter检查导航方法：类组件使用 withRouter，函数组件使用 useHistory排查路由守卫：确保守卫逻辑正确返回组件或跳转路径大小写统一：开发和生产环境保持路径一致性进阶技巧使用钩子打印当前路由信息配置路由日志：<RouteonEnter={() => console.log('进入 About 页面')}/>常见问题速查表。
2025-03-07 16:54:54
571
原创 React 开发中常见的 10 大陷阱及解决方案
遵循 React 核心原则：状态不可变、单向数据流善用调试工具：React DevTools Profiler 定位性能问题建立代码规范：使用 ESLint 规则（如单元测试覆盖：编写快照测试和渲染测试到这里，这篇文章就和大家说再见啦！我的过往文章里还藏着许多干货，感兴趣的话也可以点击我的主页看看，下面的文章也很精彩，可别错过。💕。
2025-03-07 16:45:48
1036
原创 React Native 性能调优实战指南：让你的程序丝滑如德芙
建立性能监控体系（Flipper + Chrome DevTools）遵循「按需优化」原则，优先处理关键路径关注 React 18 并发模式等前沿技术彩蛋。
2025-03-07 16:40:46
1085
原创 React 18 新特性深度解析：从自动批处理到并发模式
在 React 中，批处理是指将多个状态更新合并为一次重新渲染的过程。在 React 18 之前，React 只在 React 事件处理函数中进行批处理。例如，在一个按钮的点击事件处理函数中多次更新状态，React 会将这些更新合并，只进行一次重新渲染。setFlag(!flag);// 在 React 18 之前，这里只会进行一次重新渲染return (<div></div>
2025-03-07 16:32:07
892
原创 深入探究 Vue3 的生命周期钩子函数
Vue3 组件的生命周期，指的是从组件被创建、挂载到 DOM，再到数据更新、最终被销毁的整个过程。在这个过程中，Vue3 提供了一系列的生命周期钩子函数，让开发者能够在特定阶段执行自定义代码。这些钩子函数就像是在组件生命周期旅程中的一个个站点，开发者可以在这些站点上添加自己的 “任务”。Vue3 的生命周期钩子函数为开发者提供了在组件不同生命周期阶段执行自定义逻辑的能力。通过合理运用这些钩子函数，我们能够更好地控制组件的行为，实现复杂的业务逻辑，优化组件性能。
2025-03-06 14:32:21
1429
原创 探索 Vue3 新特性：Composition API 如何提升开发效率
Vue3 的 Composition API 通过解决 Vue2 中开发面临的逻辑复用困难和代码组织混乱等问题，为开发者提供了更高效的开发方式。其逻辑复用的便利性、代码组织的优化以及更好的类型支持，都使得我们能够更快速、更可靠地构建复杂的 Vue 应用。随着 Vue3 的广泛应用，掌握 Composition API 将成为前端开发者提升竞争力的必备技能。在实际项目中，不妨尝试使用 Composition API，体验它为开发效率带来的显著提升。到这里，这篇文章就和大家说再见啦！
2025-03-05 13:50:17
1040
TypeScript高级特性及实战应用指南：深入探讨映射类型、装饰器与泛型
2025-02-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人