Hello--_--World-CSDN博客

原创 TS：Interface 和 type 有什么区别？映射类型知识点、 any ，unknown，never。void之前有什么区别？declare 关键字的核心作用？么是函数重载？

TypeScript中interface和type的主要区别在于：interface专用于描述对象结构，支持声明合并和继承，适合定义API契约；而type能定义任意类型（联合、元组等），支持映射类型等高级操作。映射类型是基于现有类型动态生成新类型的工具，常用于批量修改属性特征。declare关键字则用于声明已存在的全局变量或模块，避免TypeScript报错。最佳实践是优先使用interface，仅在需要高级类型操作时使用type。

2026-05-09 11:13:45 304

原创 Webpack：Webpack 核心配置、什么是 Loader？什么是plugin？webpack 构建流程

Webpack核心配置围绕文件处理流程展开，主要包括基础环境、模块转换、插件增强和开发辅助四大模块。核心配置项包括：入口(entry)定义打包起点，输出(output)指定结果存放位置，模块(module)通过Loader转换非JS文件，插件(plugins)扩展构建功能，开发服务器(devServer)提供本地调试环境。Loader作为模块转换器，能将各种文件转为Webpack可处理的模块，常见类型包括样式处理、脚本转译、资源文件和框架专用Loader。配置时需注意Loader执行顺序是从右往左链式调用。

2026-05-09 07:24:18 401

原创 React：useTransition 超详细教程、为什么有了 Fiber，React 默认更新依然会卡顿？useDeferredValue超详细教程

Fiber 提供了“可中断”的机制，而则是“触发中断”的开关。如果不手动使用并发特性（Transitions），React 为了向后兼容和数据一致性，依然会像过去一样，以同步、不可中断的方式运行任务。这就是为什么即使有了 Fiber 架构，你依然会感受到界面阻塞的原因。

2026-05-09 00:52:53 363

原创 React：useRef 超详细教程、forwardRef 详解、useImperativeHandle详解

React useRef 教程：深度解析与应用场景本文全面介绍了React中useRef的核心用法和注意事项。useRef主要用于两种场景：1)直接操作DOM节点，如表单自动聚焦；2)存储不需要触发UI更新的变量，如计时器ID。与useState相比，useRef的修改不会触发组件重新渲染，且能在多次渲染间保持值不变。文章详细对比了useRef与useState的特性差异，并提供了常见错误示例和正确写法。特别强调了不要在渲染期间直接修改ref.current，以及如何通过forwardRef实现组件间的

2026-05-08 23:56:17 371

原创 React：useEffect 深度解析、useLayoutEffect 深度解析、useEffect 正确处理异步请求，和避免竞态条件？

React Hooks 深度解析：useEffect与useLayoutEffect的核心差异与应用场景摘要：本文深入解析React中useEffect和useLayoutEffect的核心区别与应用场景。useEffect主要用于异步副作用处理，如API请求、事件绑定等，其执行不会阻塞页面渲染；而useLayoutEffect则适用于需要同步执行的DOM操作，如测量元素尺寸、防止UI闪烁等场景。文章详细探讨了useEffect的正确使用方式，包括依赖项管理、清理函数实现以及避免异步请求竞态条件的解决方

2026-05-08 23:05:06 400

原创 React：useState 函数式更新、useContext 全解析、useReducer 深度解析

React 进阶技巧：useState 函数式更新与 useContext 全解析摘要：本文深入探讨 React 的两个核心 Hook 的高级用法。第一部分详解 useState 的函数式更新（Functional Updates），通过传递回调函数而非直接值，解决闭包陷阱、减少依赖项、确保异步安全性和逻辑解耦四大问题。第二部分全面解析 useContext，从基础使用到进阶技巧，包括动态更新 Context、封装自定义 Provider、性能优化方案（拆分 Context、Memo 缓存），并与 Re

2026-05-08 22:12:25 397

原创 React：解释什么是虚拟Dom？它的工作原理及其性能优化机制，深入理解 JSX、如何理解 UI = f(state)？

React面试题深度解析：虚拟DOM是React性能优化的核心，通过轻量级JS对象抽象真实DOM，利用Diff算法和批量更新减少DOM操作。JSX是React.createElement的语法糖，需经Babel转译为标准JS代码。React遵循UI=f(state)的声明式编程哲学，将UI视为状态的映射，通过管理状态间接控制UI渲染，提升可维护性和性能。虚拟DOM和JSX共同支撑了React的高效开发体验和跨平台能力。

2026-05-08 17:58:03 361

原创为什么 React 强调 Props 的不可变性？Vue vs React 渲染更新机制深度解析、什么时候用 useMemo与 useCallback？滥用会有什么后果？

React Props 不可变性的核心原因与优势性能优化 React通过浅比较props引用地址判断是否需要重新渲染，避免了递归深比较的性能损耗不可变props使React.memo/PureComponent能高效工作单向数据流确保数据只能从父组件流向子组件防止子组件修改props导致父组件状态污染和数据流向混乱可预测性组件成为纯函数，UI=f(props)关系明确调试时能准确追踪props来源，避免副作用干扰开发规范 React在开发模式下会冻结props对象强制开发者遵循函数式编程

2026-05-07 21:51:08 307

原创 React 面试题：函数式组件 vs 类组件，捕获渲染时状态、类组件生命周期 vs. 函数组件 Hooks

类组件通过this维护实例，而函数组件通过闭包捕获渲染快照。官方更推荐函数组件，主要是因为Hooks的出现彻底解决了逻辑复用的难题，避免了高阶组件带来的嵌套问题。同时，函数组件的代码更简洁、心智负担更轻，也更符合 React 声明式、数据流驱动的设计初衷。此外，从长远来看，函数式组件在性能优化和打包体积上具有更大的优势。“函数组件通过 Hooks 实现了关注点分离。它允许我们将同一业务逻辑的‘开始执行’与‘销毁清理’完整地写在同一个函数块中，而不是散落在不同的生命周期钩子函数里。

2026-05-07 19:54:46 300

原创小程序面试题

小程序是一种无需下载安装即可使用的轻量级应用，运行于微信、支付宝等宿主App内，具有即开即用、节省空间的优势。它采用双线程模型（渲染层+逻辑层）和JSBridge技术，体验接近原生App但开发成本更低。相比H5网页，小程序拥有更丰富的API权限；相比原生App，它传播能力更强但性能有限。小程序的生命周期包含应用、页面和组件三个层级，开发者需合理利用钩子函数优化性能。微信小程序登录流程通过临时code换取用户标识，实现安全授权。总体而言，小程序适用于低频工具类场景，是平衡用户体验与开发效率的优选方案。

2026-05-07 15:41:17 366

原创 Vue2：为什么组件的 data 必须是函数？过滤器的应用场景有哪些？mixin（混入）深度解析、Vue.observable、new Vue() 过程中发生了什么？

Vue核心机制解析组件data必须是函数：确保组件复用时的数据隔离，通过闭包原理实现独立副本，避免实例间数据污染。 Vue2过滤器：用于文本格式化（如货币/时间转换），支持级联调用和参数传递，但因功能重叠和TS支持差在Vue3中被废弃。 mixin混入：解决逻辑复用问题，通过选项合并策略实现功能共享，但存在命名冲突和隐式依赖问题，Vue3推荐使用Composition API替代。 Vue.observable：轻量级状态管理方案，将普通对象转为响应式数据，是Vue3响应式系统的基础，适用于简单状态共享场

2026-05-07 14:36:00 384

原创 Vue2 vs Vue3：选项式与组合式API相关面试题、生命周期对比及父子组件执行顺序、Computed & Watch

Vue 2与Vue 3的核心差异在于API设计和响应式原理。Vue 2采用Options API，结构简单但逻辑分散；Vue 3引入Composition API，通过函数组合实现逻辑聚合和更好的TS支持。响应式系统方面，Vue 2基于Object.defineProperty和Watcher机制，而Vue 3改用Proxy实现更高效的响应式更新。生命周期钩子也有所调整，Vue 3更强调setup函数的使用。Composition API解决了Vue 2中Mixins的复用问题，提升了代码组织和维护性，特别

2026-05-07 14:02:23 497

原创 Vue指令：v-if vs v-show、v-if 与 v-for 的优先级冲突、自定义指令

Vue中v-if与v-show的选择取决于DOM操作与CSS切换的权衡：v-if会动态挂载/卸载DOM，适合低频切换场景；v-show通过display属性控制显隐，适合高频切换。两者在Vue2/Vue3中优先级不同，混用可能导致性能问题。此外，自定义指令（如v-debounce）可封装DOM操作逻辑，但需注意清理工作和避免业务耦合。核心原则是：首屏性能选v-if，交互流畅选v-show，DOM操作逻辑优先使用指令封装。

2026-05-06 22:32:55 319

原创 Vue3：ref 与 reactive 的深度区别、watch vs watchEffect

摘要： Vue 3 的 ref 和 reactive 是响应式核心，ref 通过 RefImpl 类包装任意类型（含基本类型），需用 .value 访问；reactive 基于 Proxy 代理对象，直接操作属性。watch 需显式指定侦听源，支持旧值对比；watchEffect 自动追踪依赖并立即执行，适合多变量联动场景。关键区别在于：ref 解决基本类型响应问题，reactive 专注对象代理；watch 精确控制，watchEffect 自动响应。

2026-05-06 22:06:02 423

原创谈谈你对vue的理解：渐进式 JavaScript 框架、声明式框架、MVVM模式、组件化、响应式系统、虚拟 DOM (Virtual DOM) 与 Diff 算法

Vue是一款渐进式JavaScript框架，核心特性包括声明式渲染、组件化开发和响应式系统。它采用MVVM模式实现数据驱动视图，通过ViewModel层连接Model和View。Vue2基于Object.defineProperty实现响应式，Vue3则改用Proxy性能更优。虚拟DOM和Diff算法是其高效渲染的关键，通过比较新旧VNode树实现精准更新。Vue3还引入组合式API和更好的TS支持。SPA作为Vue主要应用场景，通过前端路由实现无刷新跳转，具有体验流畅但首屏加载慢、SEO不友好等特点。与M

2026-05-06 21:29:15 626

原创 Vue：虚拟Dom

本文深入解析了Vue虚拟DOM(VDOM)的核心机制。虚拟DOM本质上是描述真实DOM结构的JavaScript对象，Vue通过它实现高性能渲染和跨平台能力。文章详细阐述了VDOM的生成过程，包括模板编译、渲染函数执行和VNode创建。重点分析了Vue的Diff算法策略：采用深度优先搜索和同层比较，通过key值精准识别节点变化，实现高效的DOM更新。同时对比了Vue2的双端Diff算法和Vue3的快速Diff算法，强调了key在节点复用中的关键作用。VDOM机制使Vue能够在保证性能的同时，为开发者提供声明

2026-05-06 18:06:29 700

原创 Vue2/3：响应式陷阱、依赖追踪机制

这篇文章深入解析了Vue响应式原理及其常见陷阱，主要内容包括： Vue 2和Vue 3响应式实现对比： Vue 2使用Object.defineProperty实现数据劫持，需要预先定义属性 Vue 3改用Proxy，可以拦截整个对象的操作 Vue 2常见响应式陷阱：对象新增属性需要通过$set方法数组索引修改需要使用splice等变异方法直接修改length属性无效 Vue 3新出现的响应式问题：解构响应式对象会导致响应性丢失直接替换整个响应式对象会断开连接操作原始引用对象不会触发更新 Vue

2026-05-06 17:27:52 498

原创 React 的核心设计理念是什么？并列举三大核心特性、深度理解 React 的并发性

React核心设计理念与架构演进解析摘要：React的核心设计理念是实现快速响应的用户界面，通过三大核心特性解决性能瓶颈问题：(1) 完全拥抱函数式编程，使用Hooks实现UI与状态解耦；(2) Fiber架构重构，将不可中断的递归更新改为可调度的循环更新；(3) Lanes模型实现精细化任务优先级管理。React从类组件转向函数式组件，解决了逻辑复用困难、this指向混乱等问题，并通过Fiber架构支持并发渲染，确保用户交互优先响应。Fiber架构采用链表数据结构实现任务中断与恢复，通过双缓存技术保证渲

2026-04-26 22:53:39 397

原创 React：状态管理官网笔记

React状态管理核心原则与实践指南本文系统介绍了React状态管理的核心原则与最佳实践。首先对比了命令式与声明式编程的区别，提出了5个步骤的声明式UI设计方法：识别视图状态、确定状态触发器、用useState表示状态、精简冗余状态、连接事件处理函数。其次详细阐述了状态结构设计原则，包括合并关联状态、使用状态枚举避免矛盾、删除冗余可推导状态、存储ID而非完整对象、扁平化嵌套结构等优化方案。进一步讲解了组件间状态共享方法，重点介绍了状态提升技术及其实现步骤，比较了受控与非受控组件的特性。最后揭示了React

2026-04-26 11:19:19 436

原创 React：描述UI 官网笔记

React组件是构建UI的最小单元，将HTML、CSS和JS封装成可复用的模块。定义组件需遵循三个步骤：导出函数、大写命名、返回JSX。组件应独立定义，避免嵌套声明。通过Props实现父子组件通信，Props具有只读特性，可使用默认值和children属性。JSX语法要求单根元素、闭合标签、驼峰命名，并支持{}嵌入表达式。组件通过导出/导入实现模块化，默认导出和具名导出各有适用场景。核心思想是将UI拆分为组件树，通过声明式编程构建应用。

2026-04-26 06:38:01 424

原创 ES16：Set 集合方法增强、Promise.try、迭代器助手、JSON 模块导入相关知识

ES16新特性摘要：2025年发布的ECMAScript 2025带来四大核心更新：1）Set集合新增7个数学运算方法（并集/交集/差集等），支持关系判断；2）Promise.try统一同步/异步错误处理；3）迭代器助手支持链式惰性操作（map/filter/take）；4）JSON模块导入支持静态/动态导入并强制类型校验。这些升级优化了集合处理、异步安全和数据类型操作体验。

2026-04-18 20:24:30 177

原创 ES15：Object.groupBy() 和 Map.groupBy()、Promise.withResolvers() 相关知识点

ECMAScript 2024（简称 ES15）于 2024 年 6 月正式获批。这次更新为 JavaScript 带来了一系列非常实用的标准功能，涵盖了数据分组、异步操作、正则增强以及内存管理等多个方面。

2026-04-18 20:17:26 196

原创 ES14：数组的新“拷贝并修改”方法、findLast() 和 findLastIndex()、 Symbol 作为 WeakMap 的键相关知识点

ES14（ECMAScript 2023）引入了多项实用功能，主要增强数组操作的不可变性支持。新增了四个不修改原数组的方法：toSorted()替代sort()返回排序副本；toReversed()替代reverse()返回翻转副本；toSpliced()替代splice()实现非破坏性增删改；with()实现非破坏性元素替换。此外还添加了findLast()和findLastIndex()便于倒序查找，并允许Symbol作为WeakMap键值，提升元数据管理能力。这些更新使JavaScript更适应现代不

2026-04-18 20:09:43 313

原创 ES13：类私有属性和方法、顶层 await、at() 方法、Object.hasOwnProperty()、类静态块相关知识点

ES13（ECMAScript 2022）带来了多项实用新特性：1）类私有属性和方法通过#前缀实现真正私有化；2）顶层await允许在模块顶层直接使用await；3）at()方法支持负索引访问数组/字符串末尾元素；4）Object.hasOwnProperty()提供更安全的属性检查方式；5）类静态块支持复杂的静态初始化逻辑。这些改进解决了开发中的常见痛点，使代码更简洁安全。

2026-04-18 20:05:00 170

原创 ES12：逻辑赋值运算符、数字分隔符、replaceAll、Promise新方法、WeakRef、Setter/Getter 相关知识点

ECMAScript 2021（ES12）主要引入了以下新特性：逻辑赋值运算符：新增??=、||=和&&=运算符，分别用于nullish值、falsy值和truthy值时的条件赋值。数字分隔符：允许在数字中使用下划线（_）提高可读性，如1_000_000。 replaceAll()方法：字符串新增方法，可全局替换所有匹配项。 Promise.any()：接收Promise数组，返回最先成功的Promise结果。 WeakRef：创建对象的弱引用，不阻止垃圾回收。私有方法和访问器：类中支

2026-04-18 19:59:48 373

原创 Js面试题目录表

本文整理了JavaScript核心知识点的系列文章，内容涵盖运行机制、内存管理、语法特性等关键领域。主要包括：1）JavaScript运行机制与V8原理，包括事件循环、宏微任务；2）内存泄漏与垃圾回收机制；3）ES6特性如let/const、解构赋值等；4）重要概念如原型链、闭包、this指向；5）实用技术包括深浅拷贝、节流防抖、Promise等；6）浏览器相关如同源策略、跨域处理。这些内容系统梳理了JavaScript的核心知识体系，适合开发者全面巩固基础或准备面试。

2026-04-17 17:38:22 180

原创 JS：this指向、bind、call、apply、知识点与相关面试题

JavaScript中的this指向规则总结 JavaScript中的this指向取决于函数调用方式，主要遵循四大规则： new绑定：构造函数调用时，this指向新创建的实例对象显式绑定：通过call/apply/bind调用时，this指向指定的第一个参数隐式绑定：作为对象方法调用时，this指向该对象默认绑定：独立函数调用时，非严格模式指向全局对象，严格模式为undefined 特殊情况下：箭头函数没有自己的this，继承定义时的外层this 回调函数容易出现this丢失问题 bind创建的新函

2026-04-17 17:34:13 923

原创节流 VS 防抖相关知识点与面试题

防抖和节流是前端优化高频操作（如输入、滚动等）的两种核心方法。防抖是在事件停止触发后延迟执行，适用于搜索框输入、窗口调整等场景；节流是固定时间间隔执行一次，适用于滚动监听、游戏技能释放等场景。两者都能减少性能消耗和资源浪费，提升用户体验。文中还提供了基础的防抖和节流实现代码。

2026-04-17 17:33:03 373

原创 JS：闭包、函数柯里化、工厂函数、偏函数、立即执行函数相关知识点与面试题

闭包是JavaScript中函数与其词法作用域绑定的机制，允许内层函数访问外层作用域的变量。它解决了变量私有化、状态持久化等问题，常见于模块模式、函数柯里化等场景。高阶函数是接受或返回函数的函数，柯里化则将多参数函数转换为单参数链式调用，便于参数复用和延迟执行。两者结合可实现灵活的函数组合与抽象，但需注意闭包可能导致的内存泄漏问题。典型面试题包括循环闭包陷阱和this绑定问题。

2026-04-17 14:56:49 370

原创 Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表

JavaScript隐式转换详解：文章解析了JS中隐式转换的底层机制，包括ToPrimitive、ToNumber、ToString等核心规则，重点分析了加号运算符的双重逻辑（字符串拼接/数学加法）及减号运算符的强制数字转换特性。通过典型示例（如[]==![]为true）揭示了对象转换时valueOf与toString的优先级，并对比了==和===的本质差异。最后提供了规避隐式转换风险的实践建议，强调除判断null/undefined外应优先使用严格相等===。全文结合ECMAScript规范与常见面试题，

2026-04-16 20:52:10 338

原创 DOM事件流与事件委托、判断数据类型、深浅拷贝、对象遍历方式

摘要：本文深入解析了DOM事件流与JavaScript数据类型判断两大核心主题。DOM事件流分为捕获、目标和冒泡三个阶段，通过addEventListener的第三个参数控制触发阶段，其设计源于浏览器兼容性考虑，也为事件委托（利用冒泡机制减少监听器数量）提供了基础。JavaScript数据类型检测部分详细对比了typeof（基础类型）、instanceof（原型链）、constructor（构造函数）和Object.prototype.toString.call()（终极方法）四种检测方式的特性与局限，特别

2026-04-16 19:27:08 298

原创浏览器同源策略与跨域问题

摘要：浏览器同源策略（SOP）是核心安全机制，限制不同源的资源交互。跨域问题常见于前端开发，主要解决方案包括： CORS：通过服务器设置响应头（如Access-Control-Allow-Origin）实现标准跨域，支持复杂请求需预检（OPTIONS） JSONP：利用<script>标签跨域特性，仅限GET请求，通过回调函数获取数据代理服务器：前端请求同源代理服务器，由服务器转发请求（如Webpack的devServer或Nginx反向代理），绕过浏览器限制关键区别： CORS是官方标准

2026-04-16 15:28:50 394

原创 JavaScript 定时器相关面试题

本文深入解析JavaScript定时器机制，对比了setTimeout（单次延迟执行）和setInterval（循环执行）的特性差异，包括执行方式、时间准确性和内存风险。通过事件循环原理揭示定时器的底层运行机制：由宿主环境计时，JS引擎执行回调，涉及宏任务与微任务的执行顺序。特别分析了4ms延迟限制的设计原因，指出这是浏览器在性能和资源消耗间的平衡选择。文章还提供了避免setInterval缺陷的嵌套setTimeout方案，以及实现高精度定时器的补偿算法，最后通过典型面试题巩固对定时器执行顺序的理解。

2026-04-16 14:22:40 395

原创 js内存泄露与垃圾回收机制

JavaScript 内存管理与垃圾回收机制内存泄漏问题内存泄漏指程序中动态分配的内存未被释放，导致系统内存浪费。常见场景包括：意外的全局变量（未声明变量自动变为全局）未清除的定时器/回调函数闭包不当使用保留大对象引用 DOM节点删除后JS仍保留引用垃圾回收机制 JavaScript通过垃圾回收器(GC)自动管理内存，核心标准是可达性：从根对象(window/global)出发能访问到的对象视为"可达" 不可达对象会被回收 V8引擎采用分代回收策略：新生代：存放短生命周期

2026-04-16 13:45:28 361

原创 Vuex 与 pinia 相关面试题

Vuex是Vue.js的状态管理库，采用集中式存储管理应用的所有组件状态。其核心概念包括State（基础数据）、Getters（计算属性）、Mutations（同步修改）、Actions（异步操作）和Modules（模块化）。通过命名空间(namespaced)可防止命名冲突，辅助函数(mapState等)可简化组件中对store的访问。典型使用方式是在组件中通过useStore()获取store实例，然后通过commit提交Mutation或dispatch分发Action来修改状态。模块化设计支持将st

2026-04-13 14:52:40 678

原创 VUE：逻辑复用

Vue 组合式函数与自定义指令实践指南摘要：本文详细介绍了 Vue 组合式函数和自定义指令的核心概念与最佳实践。组合式函数通过 use 前缀命名规范，解决了 Mixins 的痛点问题，支持响应式状态管理和逻辑复用，推荐使用 toValue() 处理多种参数类型并返回 ref 对象以保证响应性。自定义指令专注于 DOM 操作场景，需注意局部/全局注册方式和生命周期钩子使用。文章通过鼠标跟踪器和 useFetch 等示例，展示了如何构建灵活可复用的逻辑，并强调了组合式函数需在 setup 中同步调用、自定义

2026-04-10 23:44:33 484

空空如也

空空如也