首页 文章列表 标签墙 返回找工具啦

前端开发 共 159 篇文章

Vue中的Scoped CSS为什么有时候不生效
2026-05-03 09:18:14
Vue中的Scoped CSS为什么有时候不生效 Vue 的 Scoped CSS 通过在 DOM 元素和 CSS 选择器上添加唯一的哈希属性（如 datavf3f3eg9）来实现样式隔离。当样式没有按预期应用时，通常是因为 Vue 无法将生成的属性选择器与目标元素匹配。 以下通过具体场景解析失效原
Vue Scoped样式 深度选择器
25 0
JavaScript structuredClone深拷贝与JSON序列化的区别
2026-05-02 16:13:40
JavaScript structuredClone深拷贝与JSON序列化的区别 在JavaScript开发中，经常需要复制一个对象。如果直接赋值，只是复制了引用，修改新对象会影响原对象。为了得到一个完全独立的副本，我们需要“深拷贝”。目前最常用的两种方案是传统的 JSON.parseJSON.st
深拷贝 JSON序列化 结构化克隆
40 0
Vue3 markRaw标记对象跳过响应式代理提升性能
2026-05-02 07:24:13
Vue3 markRaw标记对象跳过响应式代理提升性能 Vue3 的响应式系统基于 Proxy 构建，能自动追踪依赖并在数据变化时触发视图更新。但在处理一些只读、庞大或第三方库对象时，强制将其转化为响应式对象不仅浪费内存，还会导致不必要的性能开销。markRaw API 专门用于解决这一问题，它可以
Vue3 markRaw 响应式
36 0
TypeScript分布式条件类型在联合类型上的展开行为
2026-05-01 14:17:22
TypeScript分布式条件类型在联合类型上的展开行为 TypeScript 中的条件类型在处理联合类型时，存在一种被称为“分布式条件类型”的特殊机制。理解这一机制对于编写复杂的泛型工具类型至关重要。以下是关于这一展开行为的实操指南。 1. 理解自动分发机制 当一个条件类型作用于一个类型参数 T，
TS 前端开发 类型系统
32 0
Vue3 useTemplateRef获取模板引用的组合式API
2026-05-01 12:18:22
Vue3 useTemplateRef获取模板引用的组合式API Vue 3.5 版本引入了 useTemplateRef API，它提供了一种更符合直觉且类型安全的方式来获取 DOM 元素或组件实例。相比旧版的 refnull 写法，新 API 减少了冗余代码，并自动推导模板引用的类型。以下是基于
Vue3 模板引用 组合式API
42 0
React Context频繁更新导致子组件全部重新渲染的优化
2026-05-01 10:21:48
React Context频繁更新导致子组件全部重新渲染的优化 React Context 是一个强大的状态管理工具，但只要 Context 中的值发生微小变化，所有消费该 Context 的子组件都会无条件重新渲染。在高频更新场景下（如鼠标移动、动画、表单输入），这会导致严重的性能卡顿。以下是几种
ReactContext 性能优化 组件渲染
38 0
React useImperativeHandle自定义暴露给父组件的实例方法
2026-05-01 04:20:30
React useImperativeHandle自定义暴露给父组件的实例方法 在 React 开发中，父组件与子组件的交互通常通过 props 传递数据或回调函数完成。但在某些特定场景下，父组件需要直接触发子组件内的某些行为（如让输入框获得焦点、重置表单或播放视频），且不希望暴露子组件内部的 DO
React 前端开发 组件通信
35 0
TypeScript泛型接口中的类型参数默认推断
2026-04-30 13:22:56
TypeScript泛型接口中的类型参数默认推断 TypeScript 在泛型接口中引入了类型参数默认值，这允许我们在不显式指定类型参数的情况下，让编译器自动推断或回退到预设类型。以下将逐步演示如何定义、使用并理解这一特性。 1. 定义基础泛型接口 首先，创建一个不包含默认值的泛型接口，作为对比基准
TS 泛型 接口
35 0
React forwardRef转发ref到子组件DOM元素的用法
2026-04-30 07:22:46
React forwardRef转发ref到子组件DOM元素的用法 在 React 组件开发中，父组件默认无法直接获取子组件内部的 DOM 元素（如 input、button 或 div）。React 会自动封装子组件，导致 ref 属性失效。为了突破这一限制，必须使用 React.forwardR
React ref转发 React组件
46 0
React Fiber架构为什么能实现可中断渲染
2026-04-29 12:20:19
React Fiber架构为什么能实现可中断渲染 React 16 之前的版本使用“栈协调器”，渲染过程像是一次过山车，一旦开始就必须跑完全程。如果组件树很深，主线程会被长时间占用，导致用户输入无法响应，页面出现卡顿。React Fiber 架构的出现解决了这个问题，它将渲染任务变成了“可暂停、可恢
ReactFiber 可中断渲染 前端开发
49 0
Vue3 defineSlots类型化插槽的TypeScript支持
2026-04-29 09:23:17
Vue3 defineSlots类型化插槽的TypeScript支持 在 Vue 3.3+ 版本中，defineSlots 宏的引入为组件插槽带来了完整的 TypeScript 类型推断能力。这意味着在父组件中使用插槽时，IDE 可以准确地自动补全插槽暴露的 props（参数），并在类型不匹配时直接
Vue3 TypeScript defineSlots
30 0
React ErrorBoundary为什么捕获不了异步错误
2026-04-29 08:13:23
React ErrorBoundary为什么捕获不了异步错误 在使用 React 开发应用时，ErrorBoundary 是处理组件崩溃、防止白屏的最后一道防线。但在实际项目中，你可能会遇到一个令人头疼的问题：明明代码抛出了错误，ErrorBoundary 却毫无反应，页面依然崩溃。 这通常是因为错
React 错误边界 异步错误
48 0
React useDeferredValue延迟低优先级状态更新
2026-04-28 23:26:13
React useDeferredValue延迟低优先级状态更新 当开发大型列表或搜索功能时，快速响应用户的每一次输入往往会导致页面卡顿。React 18 引入的 useDeferredValue 允许将部分状态更新标记为“低优先级”，从而保证界面的核心交互（如打字）如丝般顺滑。 1. 搭建高负载测
React React18 性能优化
45 0
JavaScript AbortController取消fetch请求的正确姿势
2026-04-28 10:23:22
在Web开发中，处理网络请求时经常遇到用户快速切换页面或在搜索框中连续输入的情况。如果不及时取消已发出的旧请求，不仅会浪费服务器资源和带宽，还可能导致“竞态条件”，即旧请求的数据晚于新请求返回，覆盖了正确的界面内容。AbortController 是现代浏览器提供的原生 API，专门用于取消如 fe
前端开发 JavaScript AbortController
65 0
TypeScript类型谓词is与类型断言as的区别与应用场景
2026-04-28 08:23:00
TypeScript类型谓词is与类型断言as的区别与应用场景 在TypeScript开发中，处理联合类型或不确定的数据结构时，缩小类型范围是必不可少的操作。最常用的两种手段是类型断言（as）和类型谓词（is）。理解两者的本质区别，能够有效避免运行时错误并提升代码安全性。 1. 使用类型断言 as
类型断言 类型谓词 类型守卫
52 0
TypeScript类型映射中的-?移除可选修饰符的用法
2026-04-28 06:18:34
TypeScript类型映射中的?移除可选修饰符的用法 在 TypeScript 中处理对象类型时，经常会遇到属性为可选的情况。但在某些业务场景下（如表单提交前的最终校验），我们需要强制要求这些属性必须存在。手动重新定义一个类型不仅繁琐，还容易导致代码冗余。TypeScript 的映射类型提供了 ?
TypeScript 类型映射 可选修饰符
44 0
JavaScript WeakMap和Map的区别：为什么用WeakMap做缓存
2026-04-28 05:16:18
JavaScript WeakMap和Map的区别：为什么用WeakMap做缓存 JavaScript 开发中，Map 和 WeakMap 长得很像，但它们在内存管理上有着天壤之别。如果不小心，用 Map 存储大量数据会导致内存泄漏，而 WeakMap 则能自动帮你清理垃圾。本文将直接通过对比和代码
JavaScript WeakMap 前端开发
53 0
React SSR服务端渲染的hydration过程为什么会报错
2026-04-28 04:17:38
React SSR服务端渲染的hydration过程为什么会报错 React 服务端渲染（SSR）的工作流程分为两个阶段：首先是服务端生成静态 HTML，随后客户端“接管”这些 HTML 并使其具备交互性。这个“接管”的过程被称为 Hydration（注水）。 当 React 在客户端尝试复用服务端
React SSR 服务端渲染
56 0
Vue中的动态组件与异步组件的使用与性能影响
2026-04-28 03:16:33
Vue中的动态组件与异步组件的使用与性能影响 动态组件与异步组件是 Vue 中提升应用灵活性与加载性能的两大核心利器。动态组件解决了在同一个挂载点切换不同视图的需求，而异步组件则通过代码拆分优化了首屏加载速度。 一、 动态组件的使用与缓存策略 动态组件允许开发者根据条件动态切换不同的组件实例，而无需
Vue 动态组件 异步组件
58 0
JavaScript防抖和节流为什么用闭包实现更优雅
2026-04-27 18:30:59
在处理高频事件（如窗口大小调整、滚动、输入框输入）时，浏览器会被大量重复的任务阻塞，导致页面卡顿。防抖和节流是解决这一问题的两种核心策略。大多数初级开发者会使用全局变量来存储计时器状态，但这不仅污染全局命名空间，还导致同一个函数无法在页面上复用。 使用闭包可以将计时器状态“私有化”，让每个函数调用都
JavaScript 防抖 节流
39 0