- 博客(124)
- 收藏
- 关注
RSS订阅原创 vue3入门- script setup详解上
<script setup>是Vue 3单文件组件中使用组合式API的语法糖，相比普通<script>具有代码更简洁、类型推导更好、性能更优等特点。它直接将顶层绑定的变量、函数和导入内容暴露给模板使用，无需注册组件即可直接使用导入的组件。支持动态组件、递归组件和命名空间组件等特性，其中递归组件适合渲染树形结构，而命名空间组件则便于组织多个相关组件。每次组件实例创建时都会执行<script setup>中的代码。
2025-09-04 18:39:29
90
原创 vue3入门- script setup详解下
本文介绍了Vue 3中<script setup>语法下的几个编译器宏：defineProps用于声明组件props，defineEmits用于声明自定义事件，defineModel用于实现双向绑定。重点说明了如何在类型声明和运行时声明之间选择使用，并详细解释了Vue 3.3+版本中对类型导入的支持改进。文章还介绍了响应式props解构特性（Vue 3.5+）和使用withDefaults为类型声明设置默认值的方法，特别强调了引用类型默认值需要使用函数返回以避免共享引用问题。
2025-09-04 18:38:58
53
原创 Typescript入门-declare讲解
declare 关键字用于类型声明，允许在当前文件中使用外部定义的类型而不需要具体实现。它可以描述变量、函数、类、模块等各种类型，但不会出现在编译后的代码中。主要用法包括： 声明变量类型：declare let x: number 声明函数类型：declare function sayHello(name: string): void 声明类：declare class Animal {...} 与模块/命名空间配合：declare namespace/module Foo {...} 全局声明：decla
2025-09-01 21:06:47
920
原创 Typescript入门-泛型讲解
TypeScript泛型允许函数、接口、类和类型别名使用类型参数，实现输入与输出类型的关联。泛型通过尖括号<T>定义类型参数，调用时可显式指定或由编译器推断。泛型提供了四种主要写法：函数泛型将参数置于函数名后；接口泛型可定义在方法或整个接口上；类泛型写在类名后，但静态成员不能引用类型参数；类型别名泛型支持递归定义。类型参数可设置默认值，未指定时使用默认类型。泛型增强了代码的类型安全性和灵活性。
2025-09-01 19:15:16
820
原创 Typescript入门-interface讲解
TypeScript中的interface是定义对象模板的类型约定，支持多种成员形式：属性、属性索引、方法、函数和构造函数。它可以通过extends继承其他interface、type或class，实现类型复用。接口还支持重载、可选属性、只读属性和多重继承，但同名属性必须类型兼容。interface主要用于描述对象结构，确保实现该接口的对象符合指定类型要求。
2025-08-26 20:57:15
375
原创 vue3入门-watch讲解
本文介绍了Vue组合式API中的响应式侦听功能。主要内容包括： 使用watch函数监听响应式状态变化并执行回调 可侦听的数据源类型：ref、响应式对象、getter函数或数组 深层侦听器的使用及性能注意事项 immediate选项实现即时回调 watchEffect自动追踪依赖的简化用法 副作用清理方法(onWatcherCleanup) watch与watchEffect的核心区别：依赖追踪方式不同 文章通过示例代码展示了各种侦听方式的具体应用场景。
2025-08-25 20:54:41
1082
原创 vue3入门-props讲解
文章摘要：Vue组件通过defineProps()或props选项声明props，支持数组和对象形式。在3.5+版本中，解构的props仍保持响应性。props命名推荐camelCase，但传递时使用kebab-case。可以传递各种类型的值，包括数字、布尔值、数组和对象。使用v-bind可以动态绑定props或批量绑定对象属性。props遵循单向数据流原则，父组件更新会流向子组件，但子组件不能直接修改父组件状态。
2025-08-25 20:52:30
681
原创 Typescript入门-函数讲解
TypeScript函数类型声明主要包括参数类型和返回值类型的标注。参数类型在参数名后声明，返回值类型在参数列表后声明。返回值类型通常可省略，由TypeScript自行推断。函数类型可用箭头函数形式表示，如(param:type)=>returnType。可选参数通过在参数名后加?表示，实际类型为T|undefined。对于复杂函数类型，可使用type或interface定义类型别名。此外，TypeScript提供了Function类型表示任意函数，但不推荐使用。箭头函数的类型声明与普通函数类似，但需
2025-08-21 20:33:21
892
原创 Typescript入门-数组元组讲解
TypeScript中的数组分为数组(array)和元组(tuple)两种类型。数组要求所有成员类型相同，而元组允许成员类型不同。数组类型有两种写法：成员类型后加方括号或使用Array泛型。TypeScript会对空数组进行类型推断，并随成员变化自动更新类型。readonly关键字可声明只读数组，防止修改。元组必须明确声明每个成员类型，问号表示可选成员，且必须位于末尾。扩展运算符(...)可声明不限成员数量的元组。
2025-08-20 19:47:13
585
原创 Typescript入门-对象讲解
TypeScript 对象类型通过大括号声明属性类型，属性可设为可选（加问号）或只读（加readonly）。对象必须严格匹配类型声明，不能缺少或多出属性。解构赋值时冒号用于重命名变量而非指定类型。接口（interface）和类型别名（type）均可定义对象类型。可选属性需检查undefined，只读属性初始化后不可修改（但对象属性可修改）。对象方法需定义参数和返回值类型。
2025-08-19 21:06:05
599
原创 vue3入门-v-model、ref和reactive讲解
Vue 3 组件双向绑定与响应式数据摘要 Vue 3 对 v-model 进行了标准化改进，支持更灵活的双向绑定方式。在组件上使用时，默认展开为 modelValue prop 和 update:modelValue 事件，并支持自定义参数实现多绑定（如 v-model:title）。相比 Vue 2.x 需要 model 选项或 .sync 修饰符，3.x 版本语法更统一。组件内部可通过 defineProps 接收值，用 defineEmits 触发更新，或使用计算属性封装。响应式数据方面，ref 处理
2025-08-18 19:02:35
985
原创 Typescript入门-类型讲解
本文介绍了TypeScript(TS)的基本概念和核心功能。TS作为JavaScript的超集，通过静态类型系统增强了代码质量，适合企业级项目开发。文章对比了静态类型的优缺点，解释了值与类型的区别，并介绍了TS Playground在线工具。详细说明了TS的编译过程，包括tsc编译器的安装和使用。重点讲解了类型声明、类型推断和any类型的用法，强调类型系统能提供更好的IDE支持和错误检查，同时指出any类型应谨慎使用。最后建议初学者通过TS Playground实践示例代码，逐步掌握TS的核心特性。
2025-08-06 19:28:09
834
原创 vue3入门-概览讲解
本文介绍了Vue3项目创建和基本结构，重点对比了Vue2选项式API和Vue3组合式API的差异。Vue3使用Vite作为构建工具，相比Webpack具有更快的启动和热更新速度。文章通过一个显示div和切换背景色的示例，展示了组合式API将相关逻辑集中管理的优势，并介绍了如何通过模块化拆分setup函数来提高可维护性。最后指出选项式API适合简单场景，而组合式API更适合复杂逻辑复用和TypeScript项目。
2025-08-04 20:59:31
683
原创 微信小程序原生支持TS、LESS、SASS能力探究
在之前开发小程序中，无法使用 less/sass 等 css 预编译语言，也无法使用 TS 进行开发，但在最新的编辑器版本中，对这些进行了支持。
2024-09-09 20:14:03
3875
原创 项目主题定制方式探究
前端换肤通常是对项目主题色进行更换，一般来说换肤需求通常有以下几种情况：提供几种可供选择的颜色主题，用户可对主题进行切换，一般这种主题不会很多。进一步的，提供输入框由用户自定义色值，或者通过取色板取色，可供选择的颜色范围就很大了。但更多的，是标准项目针对不同客户进行定制开发，交付定制的颜色和控件样式主题。
2024-08-08 18:17:22
1247
原创 修改组件库源码来获得符合需求的组件
项目需求多种多样，会出现开源组件库中的组件无法满足需求或者有 bug 的情况，可以区分以下情况，进行相应的处理。
2024-05-22 20:32:16
1161
原创 webpack热更新原理详解
Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新代码变动的模块，是 Webpack 内置的最有用的功能之一。
2024-04-19 08:54:56
3713
原创 从输入url到页面显示中间发生了什么
浏览器输入 URL 到页面渲染的整个过程是由浏览器各个进程之间的配合完成。在开始正式流程之前，我们快速说明下几个主要进程的职责。浏览器主进程: 主要负责用户交互（包括地址栏，书签栏，前进后退按钮等部分）、子进程管理和文件储存等功能。网络进程：处理网络请求，从网上获取数据。渲染进程：主要职责是负责一个 tab 内关于网页呈现的所有事情：把从网络下载的 HTML、CSS、JavaScript、图片等资源解析为可以显示和交互的页面。他会为每一个tab页面创建一个渲染进程。
2024-02-21 19:03:37
1052
原创 WebSocket基础详解
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。
2024-02-06 19:50:58
2189
原创 ES6 Proxy详解
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
2024-02-01 19:28:17
1895
原创 Object.defineProperty详解
Object.defineProperty() 允许精确地添加或修改对象上的属性。通过赋值添加的普通属性会在枚举属性时（例如 for...in、Object.keys() 等）出现，它们的值可以被更改，属性可以被删除。当对象中不存在指定的属性时，Object.defineProperty() 将根据描述符创建一个新的属性。描述符中的字段可以省略，省略的字段将使用默认值。当修改已存在的属性时，操作的结果取决于当前属性的配置，可能会成功、不执行任何操作，或抛出一个 TypeError 异常。
2024-01-17 15:29:23
9780
原创 CSS transition详解
CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的，而不是立即生效的过程。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。
2024-01-04 20:01:36
2340
原创 跨域解决方案详解
我们通常所说的跨域是由浏览器同源策略限制的一类请求场景。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。同源是指 “协议+域名(子域名+主域名)+端口” 三者相同，即便两个不同的域名指向同一个ip地址，也非同源。不同域之间相互请求资源，都算作跨域。
2023-12-13 20:28:22
1150
原创 Nginx常用概念讲解
Nginx 是一款轻量级的 Web 服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。实际上，他并不是一台真正意义上的物理机服务器，并不是主观上真实存在的实体，它是运行在某一台服务器（电脑）上的软件。
2023-11-27 22:21:21
1687
原创 浏览器缓存控制讲解
在你访问互联网中的任何资源其所产生的任何链路中的每一个节点几乎都会进行缓存，整个缓存体系和细节十分复杂。比如浏览器缓存，服务器缓存，代理服务器缓存，CDN缓存等。但是缓存又十分重要，不可缺少，为什么这么说呢？
2023-11-24 22:21:40
1708
原创 http实现文件分片下载
HTTP分片异步下载是一种下载文件的技术，它允许将一个大文件分成多个小块（分片），然后分别下载这些分片，从而实现更快速、稳定的下载过程。的话，客户端就会记录了之前已经看过的视频文件范围，网络恢复之后，则向服务器发送读取剩余Range的请求，服务端只需要发送客户端请求的那部分内容，而不用整个视频文件发送回客户端，以此节省网络带宽，带来更流畅的用户体验。比如当你正在看大片时，网络断了，你需要继续看的时候，文件服务器不支持断点的话，则你需要重新等待下载这个大片，才能继续观看。），那么表示该服务器支持分片请求。
2023-09-06 23:54:12
4716
原创 touch手势事件及功能封装
在现代Web开发中，移动设备的普及使得触摸屏交互成为了一个重要的方面。JavaScript中的Touch事件为开发者提供了处理触摸屏输入的能力，从而实现更丰富的用户体验。本文将深入探讨JavaScript中的Touch事件，涵盖基本概念、事件类型、事件属性以及实际应用。
2023-08-17 22:35:28
701
原创 js操作剪贴板讲解
在操作系统级别，剪贴板允许应用程序之间传输数据。在现代web应用中，提供复制、剪切、粘贴等与剪贴板交互的功能已成为标配，极大的提高了用户的便利性。但由于涉及到跨域和隐私问题，浏览器对这种交互进行了严格的限制。例如，当前浏览的网站不应能够无授权地访问从另一来源的网站复制的内容。这样可以防止恶意网站读取或修改剪贴板内容，确保用户数据的安全。
2023-08-15 22:07:33
3748
原创 详解如何计算字符中的字节数
关于字符编码，有三个核心概念：字符集(Character Set)，可以说是一个抽象概念，字符的合集。码位(Code Point),也叫码点，将抽象的字符集中的每一个字符映射到一个整数。Unicode(即UCS-2或UCS-4)就是属于这一层的概念。它完全是数学的抽象，和计算机没有任何关系。字符编码(Encoding)，按照某种编码规则用二进制来表示一个字符。UTF-8，UTF-16等都是属于这一层的概念。
2023-08-10 20:20:30
3037
原创 前端安全XSS和CSRF讲解
XSS全称Cross Site Scripting，名为跨站脚本攻击。为啥不是单词第一个字母组合CSS，大概率与样式名称css进行区分。
2023-08-07 20:17:08
1932
原创 渲染中回流与重绘讲解
浏览器渲染过程如下：解析HTML，生成DOM树(DOM Tree)，解析CSS，生成CSS树(Style Rules)。将DOM树和CSS树结合，生成渲染树(Render Tree)根据生成的渲染树，进行回流(Layout或称呼为Reflow)，得到节点的几何信息（位置，大小）。根据渲染树以及回流得到的几何信息，得到节点的绝对像素，进行重绘(Painting或称呼为Repaint )。将像素发送给GPU，在页面上进行展示(Display)。
2023-08-02 17:52:34
339
原创 package.json版本与lock机制讲解
我们在搭建项目的时候，通过 npm 安装的依赖模块时，package.json文件中依赖的版本号前面会带符号 ^，有时候我们看别人的项目时也可能会看版本前带符号 ~ ，或者什么也不带，其中会有什么区别呢？
2023-08-02 14:35:27
976
原创 Git rebase和merge区别详解
在 Git 中整合来自不同分支的修改主要有两种方法：merge 以及 rebase(变基)，本文主要讲解rebase用法。
2023-08-01 22:20:47
1405
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人