- 博客(150)
- 收藏
- 关注
RSS订阅
原创 SVG 与 Canvas
SVG更适合创建可交互、可缩放的矢量图形，与DOM完美集成Canvas更适合高性能、动态的像素级操作，特别适合游戏和数据可视化。
2025-06-07 10:33:23
636
原创 虚拟 DOM 与 Diff 算法
虚拟DOM与Diff算法是现代前端框架如Vue和React的核心技术，用于优化DOM操作和提升应用性能。虚拟DOM是真实DOM的轻量级JavaScript对象表示，通过Diff算法比较新旧虚拟DOM树的差异，实现最小化更新真实DOM。Vue3采用双端比较和最长递增子序列（LIS）算法，优化列表处理；React19则依赖单向递归和Key机制，强调开发者控制。Vue适合动态列表和模板驱动开发，React则适用于需要高度定制化和跨平台渲染的大型应用。
2025-05-09 20:16:11
859
原创 React Router
何时选择？大型应用：需要集中管理路由和数据流。复杂数据依赖：多路由共享数据、预加载需求。优化需求：流式渲染、代码分割、滚动恢复。未来扩展：计划迁移到服务端渲染（SSR）。最佳实践路由分层管理：拆分为多个路由配置文件。严格类型定义：结合 TypeScript 提升安全性。合理拆分组件：保持路由配置简洁清晰。性能监控：结合Suspense和懒加载优化首屏速度。
2025-05-01 07:44:49
1289
原创 React Redux 与 Zustand
Redux 核心StoreActionReducerMiddleware。React-Redux 集成Provider。异步处理：通过或管理 API 调用。最佳实践：使用 Redux Toolkit 简化代码，合理设计状态结构。核心优势：简洁、高性能、脱离组件树、中间件支持。适用场景：中小型 React 应用、需快速开发、状态共享与优化。最佳实践按功能拆分 Store。使用 TypeScript 确保类型安全。合理使用选择器和中间件优化性能。
2025-05-01 07:44:41
1058
原创 React 事件、组件通信
React 封装了原生事件，提供跨浏览器一致的事件接口。：任意组件间通信（慎用，可能破坏 React 数据流）。委托，原生事件可能先于 React 事件触发。：兄弟组件共享同一状态，将状态提升到共同父组件。：跨多层组件传递数据，避免逐层传递 Props。：父组件直接调用子组件方法或操作 DOM。：优先使用 React 事件系统。：子组件通知父组件事件或传递数据。：复杂应用中多个组件共享全局状态。：触发事件的 DOM 元素。：绑定事件的 DOM 元素。：父组件向子组件传递数据。：React 事件通过。
2025-04-30 01:03:23
1024
原创 React JSX与函数组件Hooks
useEffect隔离副作用：保证渲染函数的纯粹性。生命周期管理：替代类组件的。依赖驱动执行：通过依赖项数组精确控制副作用触发时机。React 中的核心规则：渲染阶段必须保持纯净React 要求组件在渲染时：不直接修改 DOM（渲染函数应该是纯的）不执行网络请求不访问全局变量副作用必须隔离useEffect钩子中事件处理函数中（如onClick封装可复用逻辑规则：函数名以use开头，内部可调用其他 Hooks。将重复的组件逻辑（如表单处理、数据请求）封装成可复用的函数。
2025-04-30 01:03:18
1002
原创 Vue3 组件通信与插槽
- 父组件 Parent.vue --><template><Child/></script>-- 子组件 Child.vue --></script>// 组件A// 组件B。
2025-04-26 10:57:54
1149
原创 Vue3 Pinia
Pinia 适用场景需要 TypeScript 深度支持的项目希望简化状态管理流程的新项目需要模块化状态管理的复杂应用需要与服务端渲染（SSR）集成的项目。
2025-04-26 10:57:48
382
原创 Vue3 路由
路由是单页面应用（SPA）的核心机制，通过管理 URL 与组件的映射关系，实现不刷新页面切换视图的效果。Vue Router 是 Vue 官方路由解决方案，主要功能包括：嵌套路由映射动态路由匹配模块化的路由配置导航控制（编程式导航、导航守卫）自动的 CSS 类链接激活滚动行为控制。
2025-04-25 12:19:11
441
原创 Vue3 生命周期与Hooks
1. 鼠标位置跟踪 Hook})})// 组件中使用</script><template>鼠标位置：{{ x }}, {{ y }}2. 异步数据请求 Hooktry {})})return {data,error,loading,fetchData// 组件中使用})</script>
2025-04-25 12:18:54
1044
原创 Vue3 ref与props
对比维度ref(标签属性)props数据方向父 → 子（操作子组件/DOM）父 → 子（数据传递）可修改性可直接修改子组件暴露的内容只读（需通过事件通知父组件修改）响应式机制直接引用对象需要toRef保持响应性典型应用DOM操作/调用子组件方法组件参数配置组合式 API通过ref()创建引用通过声明ref属性：用于直接访问 DOM/子组件实例，需要配合使用props：用于父组件向子组件传递数据，需保持只读特性协作模式父组件通过props传递数据子组件通过事件通知父组件必要时通过ref。
2025-04-24 23:57:01
1042
原创 Vue3 setup、计算属性、侦听器、响应式API
通过合理组合使用这些 API，可以实现高效、可维护的响应式逻辑。：组合式 API 的入口，用于定义响应式数据、方法和生命周期钩子。计算属性需要保持响应性，通过函数形式确保正确访问最新值。需要保持引用的数据结构（如数组、Map、Set）需要重新赋值的对象（替换整个对象时保持响应性）独立的基本类型值（字符串、数字、布尔值）：创建依赖其他响应式数据的缓存计算结果。：立即执行函数，自动追踪依赖并响应变化。转换整个响应式对象的所有属性为 ref。逻辑相关的多个属性组合（如表单字段）：观察特定数据源变化，执行副作用。
2025-04-24 23:56:53
1098
原创 Vue3 模板语法
特性v-ifv-showv-for（需key渲染方式条件为假时销毁元素始终渲染，切换 CSS动态生成列表项性能初始渲染开销低切换开销低列表变化时依赖key优化适用场景不频繁切换的条件频繁显示/隐藏动态列表数据。
2025-04-23 23:38:38
967
原创 Vue3速通笔记
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。<template><h2>姓名：{{name}}</h2>
2025-04-23 23:38:18
437
原创 Typescript速通教程笔记
TypeScript 由微软开发,是基于 JavaScript 的⼀个扩展语⾔。TypeScript 包含了 JavaScript 的所有内容,即: TypeScript 是 JavaScript 的超集。TypeScript 增加了:静态类型检查、接⼝、 泛型等很多现代开发特性,更适合⼤型项⽬的开发。TypeScript 需要编译为 JavaScript ,然后交给浏览器或其他 JavaScript 运⾏环境执⾏。装饰器本质是一种特殊的函数。
2025-04-21 23:36:00
286
原创 git详解
是 Git 的核心功能，允许开发者在不同的代码线上独立工作。暂存区覆盖工作区的命令：git restore 目标文件（注意：完全确认覆盖时使用）当两个分支修改了同一文件的同一部分时，Git 无法自动合并，需手动解决冲突。从暂存区移除文件的命令：git rm --cached 目标文件。注意：提交记录的顺序按照产生的先后顺序排列，而非合并的先后顺序。注意：如果文件已经被暂存区跟踪过，可以从暂存区移除即可。暂存区：暂时存储，可以临时恢复代码内容，与版本库解耦。：文件已被 Git 跟踪，但修改未添加到暂存区。
2025-04-21 23:35:36
2309
1
原创 Webpack基础
babel-loader：将ES6+代码转换为ES5语法，以便在旧版本的浏览器中运行。style-loader 和 css-loader：用于处理CSS文件。css-loader主要负责处理样式文件中的import和url语句，而style-loader将转换后的CSS模块直接注入到HTML页面中。file-loader 和 url-loader：用于处理图片和其他资源文件。
2025-04-18 11:37:51
1083
原创 Node.js模块化与npm
在 Node.js 中每个文件都被当做是一个独立的模块，模块内定义的变量和函数都是独立作用域的，因为 Node.js 在执行模块代码时，将使用如下所示的函数封装器对其进行封装：而且项目是由多个模块组成的，每个模块之间相互独立，按需加载，独立作用域。但是因为模块内的属性和函数都是私有的，如果对外使用，需要使用标准语法导出和导入才可以，而这个标准叫 CommonJS 标准。CommonJS 标准语法（默认）ECMAScript 标准语法二、CommonJS 规范1. 基本语法。
2025-04-17 00:39:55
1584
原创 Node.js概念与模块
是一个基于的 JavaScript 运行时环境，专为服务器端和命令行工具设计。它采用和，能够高效处理高并发请求，尤其适合 I/O 密集型应用。：构建高性能的 HTTP 服务器（如 Express、Fastify）。：开发 RESTful API 或 GraphQL 服务。：聊天室、在线游戏（结合 WebSocket）。：构建 CLI 工具（如 Webpack、Babel）、自动化脚本。：轻量级服务间的通信（如消息队列、RPC）。：部署到 AWS Lambda、Vercel 等无服务器平台。
2025-04-17 00:39:42
1253
原创 JavaScript事件循环
执行顺序铁律同步代码 → 微任务 → 宏任务 → 渲染（浏览器）微任务优先每个宏任务执行完毕后，必须清空所有微任务队列任务嵌套规则微任务中产生的微任务会继续在当前批次执行宏任务中产生的任务会进入下一轮循环性能优化建议避免在微任务中进行耗时操作合理分配任务类型（密集计算使用宏任务分片）什么是事件循环？答案：执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制。为什么有事件循环？答案：JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型。
2025-04-16 21:19:38
1142
原创 Promise基础
是 JavaScript 中处理异步操作的标准化方案，用于替代传统的回调函数模式。它解决了“回调地狱”问题，使异步代码更易读、可维护。
2025-04-15 20:47:52
1071
原创 AJAX原理与XMLHttpRequest
AJAX（Asynchronous JavaScript and XML）核心原理：通过浏览器提供的 XMLHttpRequest（XHR）对象，实现异步通信，无需刷新页面即可与服务器交换数据。
2025-04-14 21:04:14
1351
原创 AJAX与Axios基础
Axios是一个基于 Promise 的现代化 HTTP 客户端库，用于浏览器和 Node.js 环境。它简化了 AJAX 请求的发送与响应处理，支持拦截器、取消请求、自动转换 JSON 数据等高级功能，是前端开发中最流行的 HTTP 请求工具之一。配置项适用方法数据位置常见数据格式paramsGET、DELETE 等URL 查询字符串键值对（对象或 URLSearchParams）dataPOST、PUT、PATCH 等请求体（Body）JSON、FormData、URL 编码字符串。
2025-04-14 21:04:08
1114
1
原创 URL结构、HTTP协议报文
请求报文：定义客户端的行为（获取或提交数据）。响应报文：反馈服务器处理结果及返回数据。理解报文结构是调试 API、优化性能（如缓存控制）和解决跨域问题的关键基础。
2025-04-13 13:07:05
715
原创 javascript原型继承与原型链
当访问一个对象的属性或方法时，首先查找这个对象自身有没有该属性如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）如果还没有就查找原型对象的原型（Object的原型对象）以此类推一直找到 Object 为止（null）__proto__ 对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上三、实现继承的方式。
2025-04-10 00:06:19
887
原创 JavaScript Array与Object常用方法
定义或修改对象的属性（可控制可枚举性、可写性等）。：密封对象，允许修改现有属性值，但禁止增删属性。：返回对象的原始值（默认返回对象本身）。：冻结对象，禁止修改属性值、增删属性。：删除或替换数组元素（修改原数组）。：过滤数组，返回符合条件的新数组。：遍历数组并处理元素，返回新数组。：查找第一个符合条件的元素的索引。：第一个符合条件的元素值，否则。：对数组元素排序（修改原数组）。：将类数组或可迭代对象转为数组。：新数组（元素为回调返回值）。：反转数组顺序（修改原数组）。：查找第一个符合条件的元素。
2025-04-09 01:17:32
787
原创 JavaScript 自动装箱、String与Number常用方法
在 JavaScript 中，是一种隐式机制，使得原始值（如字符串、数字、布尔值）能够临时转换为对应的（如StringNumberBoolean），从而允许开发者直接调用对象方法。这一过程由 JavaScript 引擎自动完成，无需开发者显式操作。
2025-04-08 00:36:45
776
原创 JavaScript创建对象与构造函数
基于原型的面向对象语法糖，更接近传统面向对象语言。：属于构造函数本身的属性和方法，无需实例化即可访问。：若构造函数返回一个对象，则返回该对象；：创建对象、绑定原型、执行构造函数、返回对象。：属于实例对象的属性和方法，每个实例独立拥有。：静态方法无实例上下文，无法直接访问实例属性。：基于现有对象原型创建新对象，适合原型继承。：通过函数封装对象创建逻辑，避免重复代码。返回新对象（若构造函数无显式返回对象）。：实例可访问构造函数原型上的属性和方法。：最简洁的方式，适合创建简单对象。
2025-04-07 00:09:46
1002
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人