一只小风华~-CSDN博客

原创 Vue: 表单输入绑定

Vue的v-model指令实现了表单元素与JavaScript状态的双向绑定，大幅简化了表单处理。它根据不同表单元素（文本输入、复选框、单选按钮、选择器等）自动适配对应的属性和事件。v-model支持值绑定、修饰符（.lazy、.number、.trim）等特性，并能扩展到自定义组件。使用时应避免依赖HTML初始属性，对于复杂场景可结合手动绑定或自定义组件。v-model通过智能适配和简化绑定流程，有效提升了表单开发效率和数据管理质量。

2025-09-10 19:56:29 587

原创 Vue:事件处理机制详解

Vue.js通过v-on指令（简写@）提供灵活的事件处理机制，支持内联和方法两种处理器类型，并包含丰富的事件修饰符（如.stop/.prevent）、按键修饰符（.enter/.tab）和系统修饰符（.ctrl/.shift）。开发者可通过$event访问原生事件，使用修饰符链式组合实现精确控制。Vue的事件系统语法简洁，支持类型标注和性能优化，能高效处理用户交互逻辑，是构建响应式Web应用的核心功能。

2025-09-10 19:45:23 567 1

原创 Vue：列表渲染 (v-for)

Vue.js的v-for指令详解：用于高效渲染列表数据，支持数组、对象和范围值遍历。关键点包括：1)基本语法和带索引遍历；2)对象遍历的三种方式；3)必须使用:key提高性能；4)避免与v-if混用；5)组件使用时需显式传参；6)变更数组的正确方法。最佳实践强调使用计算属性处理复杂逻辑，为每个项提供唯一key，并注意数组方法的副作用。

2025-09-10 19:09:22 429

原创 Vue：条件渲染 (Conditional Rendering)

v-if根据表达式真假值决定是否渲染DOM元素，会触发组件的销毁/重建；v-else和v-else-if用于构建条件分支链。v-show则通过CSS切换显示状态，元素始终保留在DOM中。v-if适用于低频切换场景，v-show适合频繁切换的情况。使用注意：避免v-if和v-for共用，推荐用<template>包裹或计算属性处理；<template>标签可对多元素进行分组渲染而不影响DOM结构。

2025-09-10 18:54:15 1281

原创 Vue： Class 与 Style 绑定

Vue.js提供了强大的Class和Style绑定功能，支持对象和数组语法实现动态样式控制。Class绑定可通过对象语法按条件切换类名，或使用数组语法组合多个类；组件上使用时能自动合并到根元素。Style绑定支持对象和数组形式，能自动添加浏览器前缀并处理多值情况。最佳实践建议：复杂逻辑使用计算属性，组件设计考虑样式继承，避免性能过载。这些功能使样式管理更灵活高效，是Vue开发的重要特性。

2025-09-09 19:21:27 1045

原创 Vue:Computed (计算属性)

Vue3中的computed特性是处理响应式数据计算的重要工具。它通过自动追踪依赖变化实现响应式更新，并利用缓存机制优化性能。computed能将复杂逻辑从模板中分离，提高代码可维护性，支持getter/setter操作，并能与动态class/style绑定结合使用。典型应用场景包括：多变量计算、模板逻辑复用以及动态样式管理。开发者应优先使用computed而非模板内表达式来处理复杂数据逻辑。

2025-09-09 19:01:07 278

原创 Vue：自定义组件和 nextTick

本文介绍了Vue框架中两个核心功能：自定义组件和nextTick。自定义组件通过封装HTML、CSS和JavaScript实现代码复用，支持全局/局部注册，包含Props、Events、Slots等核心概念，适用于构建UI组件和业务模块。nextTick是处理DOM异步更新的关键API，确保在数据变更后安全操作DOM，其原理基于微任务队列机制。文章强调合理使用这些功能可以提升开发效率和代码质量，同时需要注意避免过度使用导致的性能问题，并推荐Vue3的CompositionAPI优化组件逻辑。

2025-09-08 18:54:14 381

原创 Vue: ref、reactive、shallowRef、shallowReactive

Vue响应式API对比：ref和reactive分别用于创建基本类型/对象和深层响应式对象，通过.value或直接访问；shallowRef和shallowReactive提供浅层响应式方案，仅响应顶层变化，适用于性能优化场景。ref适合基本类型和对象引用，reactive适合复杂状态，shallow系列适合大型数据或明确不需要深度监听的情况。选择时需根据数据类型和响应需求权衡性能与功能。

2025-09-08 18:44:46 542

原创 TypeScript 中 keyof、typeof 和 instanceof

TypeScript中的keyof、typeof和instanceof是提升类型安全的核心操作符。keyof用于获取对象类型的键联合类型，确保属性访问安全；typeof用于推导变量类型，提高代码复用性；instanceof是运行时类型守卫，用于检查对象实例。三者的核心区别在于：keyof和typeof是编译时类型操作，而instanceof是运行时操作。最佳实践中，结合使用这些操作符能有效减少前端开发中的类型错误，增强代码可维护性。

2025-09-06 10:55:14 833

原创 TypeScript ：命名空间（Namespace）

TypeScript的命名空间(Namespace)是一种代码组织机制，用于解决全局作用域中的命名冲突问题。它通过namespace关键字定义，支持嵌套命名空间、多文件扩展和别名调用。命名空间与ES6模块的主要区别在于作用域范围、加载方式和适用场景。命名空间适合Web全局环境和旧项目迁移，而模块更适用于现代应用开发。实际应用中，命名空间可用于浏览器环境、第三方库开发和渐进式迁移。现代项目建议优先使用模块，避免深层嵌套命名空间，注意编译后的输出形式为IIFE包裹的JavaScript对象。

2025-09-06 09:18:28 346

原创快速搭建一个Vue+TS+Vite项目

本文介绍了使用Vite创建Vue+TypeScript项目的步骤：1)通过npm create vite@latest命令创建英文名称项目；2)选择Vue框架和TypeScript语言；3)安装依赖(npmi)并启动项目(npm run dev)。项目目录结构包含src/assets(静态资源)、src/components(组件)、App.vue(根组件)、main.ts(入口文件)等核心文件，以及TypeScript配置(tsconfig.json)和Vite配置(vite.config.ts)。

2025-09-03 20:27:16 416

原创为什么要学习Vue?

摘要：Vue.js是由尤雨溪2014年创建的渐进式JavaScript框架，历经三个大版本迭代，通过虚拟DOM和CompositionAPI等技术持续优化性能。相比原生JS和jQuery，Vue采用声明式编程和组件化开发，显著提升代码可维护性和开发效率。学习Vue具有五大优势：易学易用、高性能、组件化、市场需求旺盛和丰富生态，使其成为现代前端开发的必备技能。Vue尤其适合构建复杂单页面应用，能有效解决传统技术面临的性能和维护难题。掌握Vue对开发者职业发展具有重要意义。

2025-09-03 19:40:07 1123

原创 TypeScript：Promise的详细用法讲解

本文介绍了TypeScript中Promise的核心概念与应用。Promise作为异步编程模型，通过pending、fulfilled和rejected三种状态管理异步操作，有效解决回调地狱问题。文章详细阐述了Promise的创建方法、状态处理方法（then/catch/finally）以及链式调用特性，并推荐使用async/await语法糖提升代码可读性。同时提供了错误处理最佳实践和常见应用场景（如API请求），强调结合TypeScript类型系统增强代码可靠性。

2025-09-03 19:15:49 1006

原创 TypeScript：unknown 类型

TypeScript中unknown类型是类型安全的顶级类型，能接收任意值但禁止直接操作，需通过类型收窄显式验证。相比any，unknown强制类型检查，消除运行时风险。前端开发中适用于API响应处理、表单验证和错误处理等场景，通过类型守卫确保操作安全。作为最佳实践，应优先使用unknown替代any，在动态数据/外部输入处强制类型检查，提升代码可靠性。该类型强制开发者显式处理类型不确定性，是现代TS项目防御性编程的重要工具。

2025-09-02 19:57:50 414

原创 TypeScript：内置高级类型

本文介绍了TypeScript中四种常用的高级类型：Partial、Pick、Readonly和Record，并分析了它们在前端开发中的应用价值。Partial可将类型属性设为可选，适用于表单更新等场景；Pick用于选择特定属性，能精确约束组件props；Readonly确保数据不可变性，适合配置对象；Record则用于键值映射结构，如管理错误消息。

2025-09-02 19:40:21 1370

原创 TypeScript：泛型约束

TypeScript泛型约束通过extends关键字限定泛型参数范围，确保类型安全。它要求泛型参数必须满足指定接口、类或基本类型，防止访问不存在属性导致的运行时错误。核心语法为<T extends ConstraintType>，支持多重约束和keyof操作符。在React组件、状态管理等场景中，泛型约束能提升代码可维护性，实现编译时类型检查，避免重复类型验证，增强IDE智能提示。典型应用包括确保API响应数据格式、构建通用表单校验器等，是大型前端项目降低bug率、提高开发效率的重要工具。

2025-09-02 19:10:40 328

原创 TypeScript ：泛型

TypeScript泛型是增强代码复用性和类型安全的核心特性，允许使用类型变量(T)定义灵活的函数、类和接口。在前端开发中，泛型广泛应用于数据请求封装、状态管理和React组件设计，结合extends约束和内置工具(Partial/Pick等)实现精确类型控制。最佳实践包括：避免过度泛化、使用默认类型和结合keyof实现高级推导。泛型仅在编译时起作用，不影响运行时性能，是替代any类型、构建健壮应用的重要工具。

2025-09-01 19:46:33 931

原创 TypeScript交叉类型、重复属性、类型断言和as const详解

本文介绍了TypeScript中的三种类型处理技术：1.交叉类型（&）用于合并多个类型，新类型包含所有属性的交集，处理同名属性时遵循特定规则；2.类型断言（as）用于手动指定值类型，支持双重断言解决类型不兼容问题，常用于DOM操作；3.as const断言将值锁定为不可变的字面量类型，使属性变为只读。三种技术各有特点：交叉类型用于类型组合，类型断言用于临时类型覆盖，as const用于创建不可变常量。使用时需注意它们对类型系统和运行时的不同影响。

2025-09-01 19:35:49 313

原创 TypeScript 类型别名、函数别名与值别名详解

TypeScript别名系统通过类型别名(type)、函数别名和值别名(const/let)实现类型与值的抽象复用。类型别名用于简化复杂类型定义，支持泛型、联合类型等；函数别名规范函数签名，支持重载和高阶函数；值别名配合typeof提取类型，通过as const获得精确字面量类型。三者在类型空间与值空间之间建立桥梁，提升代码类型安全性和可维护性，适用于Redux状态、API契约、配置对象等场景。

2025-08-29 20:07:09 512

原创 TypeScript： Symbol.iterator属性

Symbol.iterator是ES6引入的特殊Symbol，用于定义对象的默认迭代行为。在TypeScript中，它使对象可被for...of、展开运算符等语法使用。核心包括：1)实现迭代协议，要求对象包含返回迭代器的[Symbol.iterator]方法；2)迭代器需有next()方法返回{value,done}。可通过原生对象（如数组）、自定义类（如链表）或生成器函数实现。其优势包括类型安全、惰性求值、支持无限序列等，特别适合处理大型数据集、树结构等场景。

2025-08-29 19:58:59 383

原创 TypeScript：map和set函数

摘要：本文对比了TypeScript中的map()函数和Set数据结构。map()是数组的高阶方法，通过回调函数转换元素生成新数组，保持类型安全和不可变性。Set是存储唯一值的数据结构，提供快速查找和去重功能。两者关键区别在于：map()用于数组转换；Set用于值存储。TypeScript通过泛型和类型注解增强二者的类型安全性，推荐显式定义类型以提高代码健壮性。map()适合数据处理，Set适用于去重和成员检查场景。

2025-08-29 19:45:54 473

原创 TypeScript: Reflect.ownKeys 操作（针对 Symbol）

Reflect.ownKeys是ES6提供的方法，用于获取对象所有自身属性键（包括字符串键和Symbol键，可枚举和不可枚举）。它比Object.keys等方法更全面，结合了字符串键和Symbol键的获取能力。该方法在元编程、调试等场景中非常有用，能完整访问对象属性，但不处理原型链属性。虽然性能略低于专用方法，但其全面性使其成为JavaScript对象内省的重要工具。

2025-08-29 19:22:43 381

原创 TypeScript：symbol类型

Symbol是TS/JS中的基本数据类型，表示唯一且不可变的标识符。关键特性包括唯一性（相同描述符创建的值也不同）、不可变性（适合作为对象键值）和不能使用new创建。在前端开发中，主要应用于防止属性名冲突、实现伪私有属性、定义全局注册表以及元编程（如自定义迭代器）。内置Symbol（如Symbol.iterator）可用于控制对象核心行为。虽然能解决命名冲突问题，但要注意其不支持序列化和调试困难等缺点。建议在框架开发中深度应用，业务逻辑中适度使用。

2025-08-28 19:32:56 622

原创 TypeScript：never类型

TypeScript中的never类型表示永远不会发生的值，主要用于错误处理、死循环函数和类型收窄后的不可能分支。在前端开发中，它的核心价值体现在：1）实现联合类型的穷尽检查（如Redux reducer）；2）构建高级类型工具（如NonNullable）；3）标记不可达代码以增强防御性编程。虽然日常业务代码中直接使用较少，但在状态管理和类型工具开发时，never类型能提供终极的类型安全保障。建议在关键逻辑层合理使用，避免过度复杂化简单代码。

2025-08-28 18:59:23 421

原创 TypeScript：枚举类型

TypeScript枚举（Enum）是一种定义命名常量的数据类型，包含数字、字符串、常量及异构枚举四种类型。它通过语义化名称提升代码可读性，适用于状态管理、API响应码等场景。数字枚举简洁高效，字符串枚举增强可读性，常量枚举优化性能。枚举优点包括类型安全、重构友好，但也存在运行时开销。最佳实践建议：优先使用const或字符串枚举，小型常量集适用，大型动态集改用联合类型。枚举是前端开发中管理固定常量的有效工具，需根据项目需求权衡使用。

2025-08-28 18:47:13 553

原创 TypeScript ：公共类型、私有类型与静态类型

本文介绍了TypeScript中三种类成员的访问修饰符：public、private和static。public成员可被任意访问，用于公开API；private成员仅限类内部访问，用于封装敏感数据；static成员属于类本身，用于工具方法和全局常量。文章通过代码示例展示了每种修饰符的用法，并提供了最佳实践建议：优先使用private，谨慎选择public，避免滥用static。最后还演示了结合private和static实现单例模式的示例。

2025-08-27 19:49:43 267

原创 TypeScript：重载函数

TypeScript函数重载通过多个签名和单一实现定义，为不同参数组合提供精确类型匹配。核心作用是增强API文档化、确保类型安全和返回值精确性，适用于参数多态、参数依赖和可选参数约束等场景。使用时需注意签名顺序（从具体到宽泛）、实现签名兼容性及类型收窄技巧。典型应用包括DOM操作、数学计算和API客户端等，在保持JavaScript灵活性的同时提供强类型约束，是构建类型安全复杂API的关键技术。

2025-08-27 19:37:29 315

原创 TypeScript：完整的函数类型书写方式

TypeScript中的函数类型提供了多种定义方式：1）函数类型表达式采用箭头语法；2）接口定义支持属性扩展；3）类型别名简化复杂类型。特性包括可选参数、默认参数和剩余参数，增强灵活性。函数重载通过多个签名处理不同参数组合，最后用实现签名统一处理。这些机制确保类型安全，可根据场景选择最合适的方式：简单场景用类型表达式，需扩展属性用接口，复杂类型用类型别名。

2025-08-27 19:19:37 323

原创 TypeScript：Interface接口

TypeScript接口使用指南摘要：本文系统介绍了TypeScript接口的核心语法与实用场景。基础语法包括属性定义(name:string)、可选属性(age?:number)、只读属性(readonly)及函数类型。使用场景涵盖对象约束、函数契约、类实现规范和可索引类型等。高级特性部分讲解了声明合并、混合类型和泛型约束。最佳实践建议优先使用interface而非type，合理运用修饰符，并遵循接口继承设计原则。

2025-08-27 16:12:10 214

原创 typescript中的抽象类与抽象方法

TypeScript中的抽象类和抽象方法是面向对象编程的核心特性。抽象类通过abstract声明，不能被直接实例化，只能通过子类继承使用，可以包含具体方法和抽象方法。抽象方法只有签名没有实现，子类必须实现所有抽象方法。它们适用于定义类家族的基础模板，强制子类遵循特定行为，确保代码一致性和扩展性。与接口相比，抽象类更适合需要共享代码实现的场景。通过多态调用，抽象类能实现灵活的行为扩展，但需注意避免过度设计。

2025-08-27 15:57:00 1210

原创 typescript 中的访问修饰符

TypeScript访问修饰符用于控制类成员的可见性，包括public（默认）、private和protected。public成员在任何地方可访问，private仅限类内部使用，protected允许类及其派生类访问。它们强化封装性，public适合公开接口，private保护内部实现，protected便于继承。编译时检查修饰符，但JavaScript运行时需通过闭包模拟私有性。合理使用修饰符能提升代码安全性和可维护性，特别适用于大型项目或类库开发。

2025-08-26 21:46:05 446

原创 JavaScript 中类（class）的super 关键字

摘要：JavaScript中的super关键字用于实现类继承，主要功能包括：在子类构造函数中调用父类构造函数（必须作为第一行代码），以及在子类方法中调用父类方法（实现方法覆盖时保留父类功能）。使用super时需注意：只能在类方法中使用，构造函数中必须优先调用，且具有静态绑定特性。典型应用场景是在子类扩展父类行为时复用父类逻辑，如React组件继承。正确使用super能提升代码复用性和可维护性，但需避免常见错误如未调用super()或在非类环境中使用。

2025-08-25 20:08:47 760

原创 JavaScript 类中静态变量与私有变量的区别及用法

静态变量与私有变量对比摘要：静态变量使用static声明，属于类本身，所有实例共享，通过类名访问（如Config.API_KEY），常用于全局配置。私有变量以#前缀声明（如#password），仅类内部可访问，每个实例独立存储，用于封装敏感数据。关键区别：静态变量类共享（修改影响所有实例），私有变量实例隔离（仅当前实例可访问）。静态变量通过ClassName.prop调用，私有变量必须通过类方法间接访问。

2025-08-25 19:55:09 371

原创 JavaScript Object 操作方法及 API

本文总结了JavaScript中对象的创建方式、核心API及关键特性。创建方式包括字面量、构造函数和Object.create()三种。核心API涵盖属性操作、Object.assign()、遍历方法、fromEntries()及属性描述符操作。关键特性包括仅支持字符串/Symbol键名、无序性、原型链继承。与Map对比，Object适合固定结构数据，而Map更适合复杂键类型、有序存储和高频增删场景。使用时应根据具体需求选择Object或Map。

2025-08-22 19:50:04 318

原创 CSS自定义属性（CSS变量）

CSS自定义属性（变量）是CSS3提供的原生功能，允许定义可复用值并在文档中引用，提升代码维护性。核心特点包括：1）使用--前缀定义变量，通过var()函数调用；2）支持全局和局部作用域；3）可实现动态主题切换、响应式设计等场景；4）可通过JavaScript实时修改变量值。相比预处理器变量，CSS变量无需编译且支持继承，但需注意浏览器兼容性（IE不支持）。最佳实践包括语义化命名、合理控制作用域，并配合@supports规则实现优雅降级。

2025-08-22 19:40:08 738

原创 CSS @media 媒体查询

摘要：@media媒体查询是实现响应式设计的关键技术，通过检测设备特性（如屏幕宽度、方向、像素密度等）应用不同的CSS样式。其核心语法包括媒体类型、逻辑运算符和常用媒体特性，支持通过CSS内嵌或HTML链接引入。典型应用包括移动优先布局、深色模式适配等，建议采用常用断点（768px/992px/1200px）并遵循移动优先原则。调试时可使用Chrome开发者工具模拟设备，注意避免性能敏感属性。Bootstrap等框架的响应式功能正是基于此技术构建。

2025-08-22 19:22:59 494

原创 TypeScript 接口（interface）

TypeScript接口（interface）是定义对象结构规范的核心工具，用于强制对象必须包含指定属性和方法。核心功能包括：对象类型约束、可选/只读属性、函数类型定义、索引类型、类实现、继承和合并等。与类型别名（type）相比，接口更适合定义对象结构且支持声明合并。高级技巧涵盖混合类型和索引签名约束。常见错误涉及属性缺失、类型不匹配和索引冲突。接口的核心价值在于建立类型契约，是构建大型可维护项目的关键。最佳实践中，优先使用接口定义对象，用类型别名处理联合类型等复杂场景。

2025-08-22 19:13:24 308

原创 JavaScript中的深浅拷贝

JavaScript中深浅拷贝是处理对象复制的关键概念。浅拷贝（如Object.assign或展开运算符）仅复制第一层属性，嵌套对象仍共享引用；深拷贝（如JSON方法或递归实现）会递归复制所有层级，实现完全独立。现代API structuredClone支持复杂类型和循环引用，比传统方法更高效。浅拷贝适合简单数据，深拷贝用于需要完全隔离的场景，但需注意性能开销和特殊类型处理。

2025-08-21 20:36:26 639

原创 Webpack的使用

Webpack是前端自动化构建工具，通过模块化处理各类资源（JS/CSS/图片等）并优化打包。其核心包括入口文件、输出配置、加载器处理非JS文件、插件扩展功能、开发/生产模式等。基本操作流程：1)初始化项目；2)安装Webpack及相关工具；3)配置webpack.config.js定义入口/输出等参数；4)在package.json添加构建脚本；5)运行npm命令完成打包。Webpack通过分析模块依赖关系，最终生成优化后的静态资源文件。

2025-08-21 20:17:18 490

原创 typescript常用命令选项

本文介绍了TypeScript CLI常用命令及选项。核心命令是tsc，支持多种编译控制选项，如--watch（监视模式）、--outDir（输出目录）、--target（JS版本）等。选项可在命令行或tsconfig.json中配置。文章详细说明了各选项的功能和示例用法，并介绍了ts-node等其他相关工具。建议通过tsc --help查看完整选项列表，或参考官方文档获取更多信息。

2025-08-21 19:00:02 587

Ajax的组件直接调用使用即可

空空如也