- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue 的 ref和 reactive 的区别
基本类型 → 必须用ref对象/数组：若需整体替换或频繁传递 → 用ref若仅修改属性，且无需传递 → 用reactive优先考虑代码可读性和团队约定，保持项目内风格统一。实际开发中，ref的使用频率通常更高，因为它更灵活且能避免reactive的一些陷阱（如解构丢失响应性）。在 Vue 中，ref和reactiveref和reactive的性能差异主要体现在初始化复杂度和深层属性访问上，但日常开发中几乎无需关注。性能并非选择ref或reactive。
2025-10-09 22:18:33
739
原创 vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
是否有异步操作？是 → 用否 → 看是否依赖 DOM 更新是否依赖 DOM 更新后的状态？是 → 用否 → 用通过遵循这个逻辑，可以准确匹配 API 特性与实际需求，避免因时机错误导致的 BUG（如获取到旧的 DOM 状态、异步竞态等）。
2025-10-09 20:15:57
996
原创 webpack 中的tapable用法
Tapable 是一个由 Webpack 团队开发的 JavaScript 库，主要用于实现事件钩子（Hooks）机制，是 Webpack 内部插件系统的核心依赖。它允许开发者通过钩子函数来监听和修改程序执行过程中的特定环节，实现插件化架构。在 Webpack 中，Tapable 被广泛用于编译器（Compiler）和编译过程（Compilation）中，让插件可以在不同阶段介入构建流程，比如处理模块、优化代码等。理解 Tapable 有助于深入掌握 Webpack 插件的工作原理。
2025-09-26 18:15:44
481
原创 Wouter 和 React Router的区别
Wouter是「轻量级路由工具」，核心优势是体积小、API 简单，适合简单场景；是「全功能路由解决方案」，核心优势是功能全面、生态完善，适合复杂场景。两者没有绝对的「优劣」，选择的核心是「匹配项目需求的复杂度」—— 小项目用 Wouter 更轻量，大项目用 React Router 更省心。
2025-09-25 22:17:04
1065
原创 前端路由原理及特点
特性哈希路由（Hash Router）历史路由（History Router）URL 格式带（如#/home正常 URL（如/home服务器依赖无需配置需要配置（避免 404）兼容性极好（支持 IE8+）较好（支持 IE10+）SEO 友好性差好功能丰富度简单强大（支持 HTTP 状态等）实际开发中，历史路由因 URL 美观和 SEO 优势更常用，但需要配合服务器配置；哈希路由则适合快速开发或兼容性要求极高的场景。
2025-09-25 19:15:08
461
原创 React 常用 Hooks 的具体代码示例，包含使用场景和实际实现
特点：自定义子组件通过ref暴露给父组件的方法，控制暴露的接口。适用场景：封装组件时限制外部访问范围// 子组件 - 使用forwardRef接收ref// 自定义暴露给父组件的方法// 只暴露需要的方法},// 不暴露内部的textareaRef}));});// 父组件使用return (<div>聚焦编辑器</button>console.log('内容:', editorRef.current.getValue());}}>获取内容</button>
2025-09-25 09:53:45
324
原创 在浏览器中获取宽度的 API及其差异
在响应式设计中，最常用的是 window.innerWidth 和 document.documentElement.clientWidth 来判断不同的屏幕尺寸。
2025-09-24 16:40:19
455
原创 Set、Map、WeakSet 和 WeakMap之间的区别
特性SetMapWeakSetWeakMap存储内容唯一值键值对唯一对象键为对象的键值对键/值类型任意类型键任意类型只能是对象键只能是对象引用类型强引用强引用弱引用弱引用（键）可遍历性可遍历可遍历不可遍历不可遍历size 属性有有无无垃圾回收影响阻止回收阻止回收不阻止回收不阻止键的回收弱引用（Weak）的意义：当对象没有其他强引用时，垃圾回收机制可以自动回收该对象，避免内存泄漏，适合临时存储或关联数据的场景。
2025-09-21 17:30:20
886
原创 W3C标准
W3C标准并非孤立的“技术清单”，而是一个分层、协同的生态体系底层：HTML（结构）、CSS（样式）、DOM/API（交互）构成Web开发的基础；中层：可访问性（WCAG）、安全性（CSP）、国际化确保Web的“可用性”；上层：PWA、WebAssembly、WebXR等推动Web向更复杂场景（如原生级应用、物联网）延伸。正是这些标准的存在，才实现了“一次开发，多端兼容”的Web特性，让全球用户能通过任何浏览器访问一致、安全、可用的Web内容。
2025-09-21 17:24:10
759
原创 ES6 的新特性
ES6（ECMAScript 2015）是 JavaScript 语言的一次重大更新，引入了许多重要特性，极大地提升了语言的表达能力和开发效率。
2025-09-19 16:39:16
265
原创 js 作用域的种类和特点，以及适用场景
JavaScript 默认采用静态作用域（词法作用域），但可以通过特定方式模拟动态作用域的效果。：临时修改作用域链，将指定对象的属性注入到当前作用域链的头部。ES6 模块中定义的变量默认属于模块作用域，不会污染全局。词法作用域通过闭包实现，内部函数可以访问外部函数的变量。全局作用域中定义的变量可以在代码的任何地方访问。函数作用域中定义的变量只能在函数内部访问。强制运行时作用域切换，最终输出。中查找，而非外层作用域。而非静态作用域预期的。
2025-09-16 19:54:50
306
原创 CSS3 新特性
CSS3引入了众多新特性，包括增强选择器、盒模型改进、多背景与圆角边框、渐变与透明度、文字效果、2D/3D转换、动画、多列/弹性/网格布局、媒体查询等。重点特性如box-shadow、border-radius、flexbox、grid、transform、@keyframes动画以及@media响应式设计，显著提升了样式控制能力。需注意浏览器兼容性和性能优化，部分特性需加厂商前缀。这些改进使CSS3成为现代Web开发的核心技术之一。
2025-09-16 19:29:23
619
原创 前端性能优化常见方法
由于DOM树的构建和JS代码的执行都要在主进程（渲染进程）上进行，所以当JS代码执行时间过长时（任务执行时长 > 50ms）即出现长任务时会导致页面卡顿掉帧现象。中等优先级，用于处理用户可见的任务，如页面内容渲染、数据更新等，这些任务不需要立即响应但对用户可见性有影响。最高优先级，用于处理用户当前正在交互的任务，如输入响应、动画更新等，需要立即执行以保证流畅的用户体验。最低优先级，用于处理后台任务，如数据同步、日志记录等，这些任务不紧急且用户通常不会立即感知到。1、根据任务管理策略拆分长任务。
2025-09-15 21:24:26
941
原创 浏览器渲染原理
reflow的本质就是重新计算layout树当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当Js代码全部完成后再进行统一计算。所以，改动属性造成的reflow是异步完成的。因此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。获取几何属性会立即reflow。
2025-03-23 15:27:58
427
原创 事件循环（复习笔记）
计时完成后需要执行的任务 – setTimeout、setInterval网络通信完成后需要执行的任务 – XHR、 fetch用户操作后需要执行的任务 – addEventListener。
2025-03-23 11:31:42
791
原创 iconfont字体图标无法通过color属性控制颜色问题
字体图标（Icon Font）是一种使用字体文件来表示图标的技术，类似于如何使用字体文件来显示字母和符号。每个图标被设计为一个特定的字符，可以像文本字体一样使用，方便在网页、应用等项目中加载和显示。这种方式不仅支持矢量图形，且具有高度的灵活性和可定制性。
2024-10-23 12:01:54
1224
原创 vue项目中运行单个文件或调试单个组件
每个组件包含一个测试文件test.vue 和一个源文件index.vuetest.vue中仅需导入组件正常注册即可。
2024-10-21 17:17:02
830
2
原创 mac安装nvm
1.下载后解压文件2.解压后先到访达中按以下快捷键将以点开头的隐藏文件展示出来3.将上面解压的文件名改成 .nvm4.终端输入5.在打开的.zshrc文件中加入以下配置（包含环境变量以及nvm源）6.保存并退出即可，vim保存操作如下：1.先按下esc键2.再输入英文冒号 【:】3.冒号后输入wq回车即可。
2024-10-21 15:07:23
2420
原创 windows安装nvm
简介简介nvm全称为node verison manager， 顾名思义就是管理node版本的一个工具，通过工具我们可以在一台计算机上安装多个版本的node，并且随时进行切换。安装前一定要先卸载本地的node.js安装前一定要先卸载本地的node.js安装前一定要先卸载本地的node.js如果电脑上安装过其他的包管理工具比如yarn可以先执行下where nvm看下本地是否之前无意中安装过nvm从而导致冲突重要的事情说三遍！！！下载安装nvm。
2024-10-21 13:34:59
1535
原创 Python 中 if __name__ == '__main__':的理解
标题Python 中 if name == ‘main’:的通俗理解__name__为每个Python模快的内置变量（初始名称）；__main__始终为当前被执行的文件名；举例：#test1.pya = "CSDN"def name(): print("test1.py中的网站名为：",a)print("test1.py的文件名称为：",__name__ )if __name__...
2019-11-15 20:57:32
554
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人