- 博客(243)
- 收藏
- 关注
原创 Vue3高阶组件(HOC)开发完全指南
高阶组件(Higher-Order Component)是 React 生态中的核心模式,在 Vue 中同样可以实现类似的逻辑复用能力。
2025-05-08 20:43:06
313
原创 Vue3透传 Attributes($attrs)深度解析
父组件传递给子组件,但未被props或emits声明的属性包括:class和style普通 HTML 属性(如iddata-*原生 DOM 事件监听器(如@click。
2025-05-08 20:35:20
828
原创 Vue3组件通信:Props & Emits 详解
- 父组件 -->-- 子组件 --></script>单向数据流Props 向下,Events 向上不要直接修改 Props明确接口为 Props 和 Emits 定义清晰的类型添加必要的验证逻辑适度抽象当 Props 超过 5 个时考虑重构组件复杂通信使用状态管理(Pinia)性能优化大对象 Props 使用shallowRef频繁变化的 Props 考虑防抖文档化## 组件 API### Props| 名称 | 类型 | 默认值 | 说明 |
2025-05-08 18:02:20
517
原创 React 的 `useState` 详解
命名规范:使用的命名约定最小化状态:避免存储可计算的值不可变更新:总是返回新对象/数组而非修改原值复杂逻辑抽离:当状态逻辑复杂时考虑使用useReduceruseState是 React 函数组件的基石,掌握它的正确用法是构建可靠 React 应用的关键。
2025-05-08 09:10:39
138
原创 React 高效开发全面指南
组件设计原则单一职责高内聚低耦合受控与非受控组件区分状态管理黄金法则本地状态用useState全局状态用 Zustand/Redux服务端状态用 SWR/React Query性能优化要点避免不必要的渲染合理使用 memoization代码分割按需加载TypeScript 集成size?onClick?// 组件实现React 官方博客React RFCsReact 状态管理库基准。
2025-05-08 09:07:54
569
原创 Vue3的 `v-model` 全面指南
- 父组件 --><template>-- 子组件 -->})</script>问题:自定义组件中使用 v-model 时值不更新解决:确保正确触发事件。
2025-05-08 08:47:58
453
原创 Vue3的Provide/Inject 机制详解
Provide/Inject 是 Vue 3 中用于的重要 API,特别适合解决"prop 逐级透传"的问题。
2025-05-08 08:42:45
295
原创 script setup详解
是 Vue 3 组合式 API 的,通过编译时的魔法,让代码变得更简洁直观,同时保留了完整的 Composition API 能力。
2025-05-08 08:22:34
318
原创 Vue 中 `watch` 的使用场景详解
使用watch需要响应数据变化执行异步操作时需要监听复杂数据结构的深层变化时需要协调多个数据源的变化时需要在路由参数变化但组件复用时重新获取数据需要实现副作用逻辑(如DOM操作、本地存储等)对于简单的数据派生,优先考虑使用computed;对于用户交互触发的逻辑,优先考虑使用事件处理程序。
2025-05-06 09:21:54
399
原创 浮动(float)布局详解
浮动(float)是CSS中一种传统的布局方式,虽然现代布局更推荐使用Flexbox或Grid,但理解浮动仍然很重要,特别是在维护旧代码时。
2025-05-06 09:19:58
445
原创 依赖注入(Dependency Injection)详解
依赖注入(DI)是一种重要的设计模式,用于管理代码之间的依赖关系,提高可测试性和可维护性。在前端框架如Vue/Angular中广泛应用。
2025-05-06 09:19:01
255
原创 Vue3 `setup` 函数全面解析
number</script>}>()</script>更好的逻辑组织:按功能而非选项组织代码更好的类型推断:TypeScript 支持更完善更小的生产包:模板编译优化更好的性能:没有this代理开销更好的代码复用:易于提取组合式函数。
2025-05-06 09:18:13
385
原创 Vue 中的 `export default` 详解
/ 方式1: 使用 defineComponent// 组件选项})// 方式2: 直接标注类型msg?: stringprops: {// ...customOption: 'some value', // 自定义选项// ...
2025-05-06 09:15:40
530
原创 Vue模板语法全面指南
Vue 的模板语法是基于 HTML 的扩展,允许你声明式地将组件实例的数据绑定到 DOM。以下是 Vue 3 模板语法的详细解析。原始 HTML2. 属性绑定基本属性绑定布尔属性动态属性名3. 条件渲染v-if / v-else-if / v-elsev-showv-if vs v-show:带索引的 v-for遍历对象5. 事件处理内联事件方法事件处理器事件修饰符6. 表单绑定基本表单绑定多选框单选按钮下拉选择7. 动态组件8.
2025-05-06 09:14:39
232
原创 Vue3响应式数据:`reactive()` 与 `ref()` 深度对比
fill:#333;color:#333;color:#333;fill:none;基本类型引用类型是否需要响应式数据数据类型使用 ref是否需要重新赋值使用 reactive通过 .value 访问直接访问属性掌握reactive()和ref()的区别与适用场景,能够帮助你更高效地组织 Vue 3 应用的响应式数据。组件状态管理优先考虑reactive独立的基本类型值或需要灵活替换的对象使用ref组合式函数返回通常使用ref以便于解构使用。
2025-05-06 09:13:39
1012
原创 Yarn包管理工具使用指南
Yarn 是一个快速、可靠、安全的 JavaScript 包管理工具,是 npm 的替代品。以下是 Yarn 的详细使用说明。
2025-05-06 08:27:38
281
原创 Vue3实战指南
Vue 3 是当前流行的前端框架之一,具有更好的性能、更小的体积和更优秀的组合式API。下面我将介绍Vue 3的核心概念和实战技巧。
2025-05-06 08:25:04
951
原创 Scrapy-下载器中间件(Downloader Middlewares) 深度解析
下载器中间件是Scrapy引擎和下载器之间的处理钩子,用于全局修改请求和响应。
2025-05-05 20:40:01
735
原创 项目管道(Item Pipeline) 深度解析
项目管道(Item Pipeline)是Scrapy框架中处理爬取数据的核心组件,负责对爬虫提取的Item进行后续处理。
2025-05-05 20:36:32
835
原创 深入解析 `pytest --dist=load` 并行测试策略
是 pytest-xdist 的默认分发模式,它以最细粒度分配测试用例,适合大多数测试场景。下面我将全面解析这种模式的特点和使用技巧。是否需要更深入了解特定场景下的配置细节或问题排查方法?例如如何优化数据库测试或在Kubernetes环境中使用?
2025-05-05 20:33:47
302
原创 使用 pytest-dist --dist=loadscope 避免数据污染的完整指南
命名规范:所有资源名称包含worker_id和清理策略:PR构建跳过清理方便调试,主干构建强制清理监控体系:实施污染检测机制文档记录:在项目文档中明确隔离方案渐进实施:先从最敏感的测试开始应用隔离方案。
2025-05-05 18:23:11
494
原创 pytest-dist --dist=loadscope 详解
自定义分组逻辑return "integration" # 所有集成测试在一个工作器。
2025-05-05 15:29:23
645
原创 Scrapy-下载器(Downloader) 深度解析
下载器(Downloader)是Scrapy框架中负责实际获取网页内容的组件,它处理所有HTTP/HTTPS请求并返回响应。作为Scrapy的核心组件之一,下载器的性能和稳定性直接影响爬虫的效率。是否引擎发送请求下载器中间件process_request是否返回Response?直接返回给引擎执行实际下载下载处理器处理下载器中间件process_response返回Response给引擎下载器核心配置在中可配置下载器相关参数:下载器中间件系统下载器中间件是扩展下载器功能的主要方式,典型处理流程:下
2025-05-05 13:59:12
706
原创 Scrapy-引擎(Engine) 深度解析
Scrapy 引擎(Engine)是整个框架的核心组件,负责控制数据流并协调所有其他组件的工作。它是Scrapy爬虫运行的"大脑",确保整个爬取过程高效有序地进行。
2025-05-05 13:55:48
741
原创 如何设计和实现爬虫系统
爬虫系统(Web Crawler)是一种自动下载网页的程序,是搜索引擎的核心组成部分。一个完整的爬虫系统需要考虑多个方面的设计。
2025-04-30 17:41:30
947
原创 基于Python+Pytest + Selenium Grid + GitLab CI** 实现高效 UI 自动化的完整解决方案
以下是基于fill:#333;color:#333;color:#333;fill:none;启动Selenium Grid并行执行Pytest测试生成测试报告结果通知。
2025-04-29 11:48:05
597
网络安全领域的HTTP Header安全配置实践与防护机制解析
2025-03-25
接口自动化测试中的动态参数、加密和签名处理方案详解
2025-03-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人