- 博客(42)
- 收藏
- 关注
RSS订阅
原创 谈谈 Vue3 中的 ref 和 reactive
ref和reactive是Vue3中用来实现数据响应式的API一般情况下，定义基本数据类型，定义引用数据类型ref本质上是reactive的再封装reactive定义引用数据类型（以对象和数组举例），它能够将复杂数据类型的内部属性或者数据项声明为响应式数据，所以reactive的响应式是深层次的，其底层是通过ES6的来实现数据响应式，相对于Vue2的，具有能监听增删操作，能监听对象属性的变化等优点使用reactive定义对象数据类型举例
2022-11-06 17:28:28
21503
12
原创 自定义可滑动顶部选项导航栏组件（uniapp示例）
使用uniapp开发项目时，顶部导航栏是经常会有的功能需求，然而uniapp官网的导航栏组件有时并不那么尽人意，于是我自定义了一个组件，将其封装了起来，并将背景颜色，选中文字颜色，底部横条颜色等外抛，以便使用者根据需求来选择，完整代码在文章最后已给出
2020-09-02 16:47:53
9776
3
原创 React 和 Vue 框架设计原理对比分析
场景ReactVue大型复杂应用✅ 灵活性强，生态丰富✅ 适合快速迭代，但需规范代码中小型项目⚠️ 可能过度设计✅ 开发效率高，学习成本低跨平台开发✅ React Native 成熟⚠️ 依赖第三方方案（如 UniApp）团队技术栈✅ 适合有 FP 经验的团队✅ 适合传统前端或新手团队选择 React：追求极致灵活性、函数式编程范式，或需要构建跨平台应用（React Native）。选择 Vue：快速开发、低学习成本，或偏好声明式模板和响应式编程。
2025-03-15 17:43:20
1144
1
原创 React 常用 Hooks 详细解析
是 React 16.8 引入的核心特性，允许在函数组件中使用状态、生命周期等特性，替代类组件的复杂逻辑。：处理组件生命周期中的副作用（如数据请求、DOM 操作、订阅）。：类似 Redux 的状态管理，适合多状态关联或复杂更新逻辑。类似，但会在 DOM 更新后同步执行（在浏览器绘制前）。：状态更新涉及多个子值、依赖前一个状态、需要集中化管理。：在组件树中共享数据，避免逐层传递 props。：在函数组件中定义和更新局部状态。：将组件逻辑封装为可复用的函数。
2025-03-13 16:47:37
732
原创 React Fiber深度解析
是 React 16 引入的全新核心算法架构，它重新设计了 React 的渲染机制，旨在解决复杂应用中的性能问题（如动画卡顿、交互延迟等），并为异步渲染和并发模式提供了底层支持。，虽然开发者通常无需直接操作 Fiber，但理解其原理有助于优化应用性能（如避免不必要的渲染、合理使用并发特性）。例如，在大量数据变更时，Fiber 可以将更新拆解为多个帧完成，保持界面流畅。（递归遍历组件树），一旦开始渲染就无法中断，可能导致动画卡顿或交互延迟。将渲染任务分配到不同的帧中执行，避免阻塞主线程。
2025-03-13 16:46:16
787
原创 React 生命周期方法详解
在不考虑复杂且易出错的和挂载阶段→render→更新阶段→render→卸载阶段推荐迁移到函数组件 + Hooks，代码更简洁且易于维护，无需关注复杂生命周期。// 函数组件等效实现}, []);// render。
2025-03-11 10:35:12
363
原创 React 中 setState 的详细解析
关键原则setState是异步的，避免直接依赖当前状态。使用函数参数确保更新基于最新状态。通过回调函数或useEffect处理更新后逻辑。迁移建议：新项目优先使用函数组件 +useState，代码更简洁且易维护。
2025-03-11 10:34:33
729
原创 React 中函数组件和类组件对比分析
决策因素选择函数组件选择类组件新项目开发✅ 推荐❌ 不推荐状态管理复杂度✅ 简单到复杂（Hooks 足够）⚠️ 复杂状态逻辑（需结合 Context/Redux）生命周期需求✅ 通过useEffect覆盖大多数场景⚠️ 需要精确控制生命周期阶段团队技术栈✅ 熟悉 Hooks⚠️ 熟悉类组件性能敏感场景✅ 轻量级，易优化⚠️ 需手动优化。
2025-03-10 14:17:41
571
原创 React中受控组件与非受控组件对比分析
在复杂表单中，关键字段使用受控组件（如用户名、密码），非关键字段使用非受控组件（如备注信息）。直接访问DOM节点的值（通常在提交时读取）。缓存计算结果，或拆分表单为独立子组件（通过。表单数据由DOM自身管理，React通过。避免父组件渲染导致子组件重绘）。设置初始值（仅在首次渲染生效）。表单数据完全由React的。事件同步更新状态，输入值由。属性绑定到React状态。
2025-03-10 14:15:01
519
原创 JavaScript 执行上下文深度解析
执行上下文是代码执行的基础环境，包含变量环境、词法环境和this绑定。调用栈管理上下文的执行顺序，遵循后进先出原则。作用域链通过词法环境的outer引用实现变量逐级查找。闭包是函数与其定义时词法环境的结合，通过保留作用域链实现跨作用域访问。
2025-03-01 10:31:27
1192
原创 CSS层叠上下文解析与应用
层叠上下文通过层级隔离和顺序规则，管理元素在Z轴上的显示优先级。理解其创建条件和层叠规则，能有效解决元素覆盖问题，优化页面视觉表现。
2025-03-01 10:30:25
1022
原创 JavaScript 作用域与作用域链深度解析
作用域是变量的可访问范围，由代码结构静态决定。作用域链是变量查找的路径，基于函数定义时的词法环境。闭包通过保留作用域链，实现跨作用域访问变量。
2025-02-27 21:30:30
566
原创 JavaScript 深浅拷贝全面解析
在 JavaScript 中，是处理对象复制的重要概念。它们的核心区别在于对的处理方式，理解这一点对避免程序中的意外数据污染至关重要。
2025-02-27 20:53:14
931
原创 网络 TCP/IP 协议分层模型对比分析
TCP/IP 协议是互联网通信的核心协议簇，它采用分层架构，将复杂的网络通信过程分解为多个层次，每一层负责特定的功能。TCP/IP 协议通常分为或，具体分层方式因不同的模型而有所差异。
2025-02-25 16:11:05
541
原创 浏览器重绘和重排的详细分析及优化策略
集中修改样式：合并多次 DOM 操作。优先使用 CSS 动画：利用合成层优化。避免强制同步布局：分离读写操作。减少布局查询：缓存布局信息。使用现代布局方案：Flexbox/Grid 替代浮动布局。
2025-02-24 20:53:00
711
原创 HTTP Keep-Alive：性能优化的关键机制
通过 Keep-Alive，HTTP 显著提升了网络效率，尤其在高延迟场景下效果明显。它是 Web 性能优化的重要基础，结合 HTTP/2 的多路复用技术，能够为用户提供更流畅的浏览体验。
2025-02-22 22:00:58
411
1
原创 HTTP 状态码完整梳理及适用场景
HTTP 状态码是服务器在响应客户端请求时返回的标准化代码，用于表示请求的处理状态。它们分为五类，以三位数字的第一位区分。
2025-02-22 21:59:44
1033
原创 浏览器数据缓存方式详细对比分析
缓存方式存储大小生命周期作用域传输方式适用场景Cookie4KB可设置过期时间可跨域随请求发送会话管理、用户身份标识5MB永久存储同源不发送长期存储用户偏好、静态数据5MB会话有效同源不发送临时存储表单数据、页面间数据传递IndexedDB无限制永久存储同源不发送大量结构化数据、离线应用Cache API无限制手动控制同源不发送静态资源缓存、PWA无限制独立于页面同源不发送离线缓存、后台同步、消息推送。
2025-02-21 16:56:20
606
原创 TypeScript 中 type 和 interface 深度对比分析
TypeScript 中 type 和 interface 深度对比分析
2025-02-21 16:54:21
797
原创 浏览器兼容性问题解决方案对比分析
始终优先考虑用户覆盖率和项目需求，避免过度适配。：手动或自动添加浏览器前缀，覆盖不同内核的兼容性写法。：现代工程化项目（Webpack/Vite）。：统一跨浏览器默认表现，减少后续样式冲突。：平衡功能与兼容性，用户体验分层优化。：通过统一默认样式消除浏览器差异。：代码复杂度增加，需多套样式维护。：通过特殊语法仅对特定浏览器生效。：直接解决特定内核的兼容性问题。：需兼顾新旧浏览器的复杂项目。：必须支持 IE 的遗留项目。：所有项目的基础样式初始化。：通过工具自动处理兼容性。：精准定位特定浏览器版本。
2025-02-20 15:21:54
1108
原创 CSS中块级格式化上下文（BFC）详解
是页面渲染时的一个独立布局区域，内部元素的布局不会影响外部元素。BFC通过隔离布局环境，解决了外边距合并、浮动元素高度塌陷及元素覆盖等问题。形成两栏布局，宽度自适应剩余空间，不与浮动元素重叠。通过包裹一个BFC容器，阻止外边距合并。等属性触发BFC，可有效控制复杂布局。父容器高度塌陷，无法包裹浮动子元素。父容器触发BFC，正确计算高度。内容区域独立布局，占据剩余空间。的外边距会合并为单个较大值。普通流元素会环绕浮动元素。的内容环绕在浮动元素右侧。，边框坍缩成一条线。，包裹住浮动子元素。
2025-02-19 14:41:50
500
原创 CSS 中五种定位方式（position）对比分析
在 CSS 中，定位方式（）决定了元素如何相对于其参照物进行定位，同时影响文档流的布局。以下是五种定位方式的对比、参照物说明及代码示例：
2025-02-19 14:39:42
1297
原创 Vue 中虚拟 DOM 的全面解析
是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象表示。在 Vue 中，组件模板会被编译成，通过 Diff 算法对比新旧虚拟 DOM，计算出最小化的 DOM 操作，最终批量更新真实 DOM。
2025-02-17 21:13:28
728
1
原创 通过 Vue 虚拟 DOM 深入了解 Diff 算法
通过对比新旧虚拟 DOM 树，找出最小化 DOM 操作的更新方式。：同级比较（不跨层级）、双端对比、key 复用节点。
2025-02-15 14:00:02
253
原创 浏览器的垃圾回收机制
浏览器的垃圾回收机制（Garbage Collection，GC）是一种自动管理内存的方式，旨在识别并释放不再使用的内存，从而避免内存泄漏和内存资源的过度占用。其核心目标是回收那些不再被程序引用的内存对象，确保内存的高效利用。浏览器的垃圾回收机制是现代 JavaScript 开发中不可或缺的一部分。了解垃圾回收算法和常见问题可以帮助我们更好地管理内存，避免内存泄漏，优化程序性能。通过合理使用垃圾回收机制，开发者可以编写出更加高效、稳定的 JavaScript 应用程序。
2025-02-13 17:45:13
819
原创 JavaScript 事件循环机制详解
同步代码优先执行：所有同步代码是事件循环的起点。微任务队列必须清空：每次执行完一个宏任务后，会立即清空所有微任务。宏任务按队列顺序执行：每次事件循环只执行一个宏任务，避免长时间阻塞。微任务可“无限嵌套”：如果在微任务中又产生了新的微任务，这些新任务会在当前循环中被执行。
2025-02-13 17:13:31
975
原创 JavaScript 闭包的通俗解释与经典示例
闭包核心：函数 + 其词法作用域。典型特征：内部函数访问外部变量，且外部函数已执行完毕。应用价值：数据封装、状态保持、模块化开发。注意事项：避免滥用导致内存问题。
2025-02-12 18:05:08
236
原创 JavaScript 循环结构深度对比
本文深度对比分析JavaScript循环结构中的for、for...in、for...of 与 forEach
2025-02-12 17:21:00
365
原创 微信小程序开发常见问题与解决方案
小程序开发中，需特别注意原生组件的限制、真机环境的适配以及安全距离的处理。通过合理使用 API 和 CSS 方案，可以有效解决常见问题，提升用户体验。
2025-02-11 18:05:39
326
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人