励志小妹的小窝

原创 【前端】手把手解读React官方文档_理论+实战+补充

React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。用户断网后网页不会消失。项目目录文件├── src/│ ├── api/│ └── ...└── ...关于项目的基本信息,还有相关指令 npm，如npm run start….gitignore不想传到git的文件可以定义在里面#注释要忽略的用相对路径。

原创 【前端】快速过一遍React全家桶2025

提炼逻辑，提高复用性hooks定义及作用在 Hooks 出现之前，你想在组件中使用“状态”或“生命周期方法”（如 componentDidMount）只能用 class 组件 写法。class 太重、不易复用、逻辑混乱，所以 React 团队就发明了 Hooks。函数组件 + Hooks 的写法，简单清爽。React Hooks 让你能在不写 class 的情况下使用状态、生命周期、DOM 引用、性能优化等功能。//无hooksconsole.log('组件挂载了');render() {

原创 【前端】ES6一本通_划重点_补充面试题

ES6（ECMAScript 2015）是现代 JavaScript 的基础，在前端面试中非常常见。

原创 【前端】快速过一遍Vue3全家桶2025

components/ 目录中，组件名使用 PascalCase（首字母大写，驼峰式命名），文件名应与组件名一致。defineProps<{}>() 中的尖括号 <> 里必须是一个对象类型，不能直接写 string、number、boolean 等原始类型。通过 emit('addOne') 触发一个名为 'addOne' 的事件，并且这个事件 没有参数（返回值是 void）。存放页面级组件，通常与路由绑定。props 是父传子【数据】，slot 是父传子【结构内容，即HTML/组件】。

原创 【前端】2025前端面试高频重点

Webpack / Vite 基本原理，常用配置，优化（比如打包、Tree Shaking、Code Splitting），对比。ESLint / Prettier 工具链概念（代码质量与格式化）Next.js（React）与 Nuxt.js（Vue）Service Worker（PWA技术、离线缓存）单页应用（SPA） vs 多页应用（MPA）服务端渲染（SSR）与静态站点生成（SSG）CI/CD流程（自动化构建与发布流程）缓存策略（强缓存 vs 协商缓存）Cypress（端到端测试）

原创 【前端】1h 搞定 TypeScript 教程_只说重点

TypeScript（简称 TS）是一种由微软开发的开源编程语言，是 JavaScript 的超集。在 JavaScript 的基础上增加了静态类型检查等其他功能，使得开发者可以在编写代码时更早地发现潜在的错误，从而提高代码的质量和可维护性。“超集”是指一种包含原始语言或集合的语言或集合。比如：如果 A 是 B 的超集，那意味着 A 包含了 B 的所有元素或特性，同时可能还额外包含一些元素或特性。

原创 【前端】手把手解读Vue3文档_理论+实战+补充

在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。生成的项目中的示例组件使用的是组合式 API 和 < script setup>，而非选项式 API。IDE配置： Visual Studio Code + Vue - Official 扩展。

原创 【前端】一文讲清楚Vue 2→Vue 3 必须更新的知识点

watch 是“选项式 API”里一个配置项在 Vue 2 中，写在组件的配置对象里（比如 data, methods, computed 等并列），是一个 对象（Object），也就是我们说的“选项式 API”。是 Vue 实例的方法，用来 触发（发出）一个自定义事件，来自于 Vue.prototype，只要你是一个组件（export default {} 里的东西），就可以用。从 Vue 2 升级到 Vue 3，确实有很多需要更新的地方，特别是那些已废弃、不推荐再使用的特性，一不注意就会踩坑。

原创 【前端】webpack一本通

官网webpack作用（自动整合压缩并剔除无用代码）减少文件数量、缩小代码体积、提高浏览器打开速度webpack定义一个第三方模块包, 用于分析, 并打包代码支持所有类型文件的打包支持less/sass => css支持ES6/7/8 => ES5压缩代码, 提高加载速度webpack基于node, 所以导出遵守CommonJS规范安装初始化文件夹包环境, 得到package.json文件下载webpack等模块包。

原创 【前后端】Node.js一本通

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。nodejs官网运行环境浏览器是 JavaScript 的前端运行环境。Node.js 是 JavaScript 的后端运行环境。Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。功能Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。在此基础上，运用很多强大的工具和框架。

原创 【SQL】王二的100道SQL刷题进阶之路

SQL进阶看这一篇就够了！

原创 JS深入学习

转自https://www.liaoxuefeng.com/wiki/仅供个人学习引入1、放入&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;2、从js文件引入 (更方便维护）

原创 【前端】Twemoji（Twitter Emoji）

标签的 src 属性指向 Twemoji 的 SVG 图片。ref.current 这个变量本身（它存储的内存地址）没有改变，它依然指向同一个 div 元素。但这个 div 元素内部的子节点和内容被 twemoji.parse 方法修改了。twemoji.parse() 的作用是：它会扫描传入的 DOM 元素（在这里是 ref.current 所引用的元素）内部的文本内容，找到其中的 Unicode Emoji 字符，然后将这些字符替换成。// svg 或 72x72（PNG 图片）// 或 '.png'

原创 【前端】Hexo一键生成目录插件推荐_放入Hexo博客

【代码】【前端】Hexo一键生成目录插件推荐_放入Hexo博客。

原创 【Homebrew / brew】总结（安装、卸载、debug等）2025

【代码】Homebrew / brew完全卸载方法2025。

原创 【前端】PWA

PWA 是一种提升 Web 应用体验的技术，使其具备与原生应用相似的功能和性能。PWA不仅能够在网页上运行，还能在手机或桌面上像传统的移动应用一样进行交互，同时保留了Web应用的灵活性。它通过借助一些先进的功能，如Service Workers、Web App Manifest 和 Push Notifications 等，来提升用户体验、优化性能，并能在离线或低网速环境下依然保持可用性。PWA 强调的是“渐进式”，即可以根据设备的能力逐步增强其功能。

原创 【前端】Notification问题：请关闭来自其他应用的所有气泡或叠加层 然后重试

原创 【前端】JS引擎 v.s. 正则表达式引擎

【代码】【前端】JS引擎 v.s. 正则表达式引擎。

原创 【前端】使用HTTPS

在前端本地开发环境中使用 HTTPS 主要取决于你用的是哪个构建工具（如 Vite、Webpack、Vue CLI 等）。

原创 【前端】Proxy对象在控制台中惰性求值_vue常见开发问题

【代码】【前端】Proxy对象在控制台中惰性求值_vue常见开发问题。

原创 【基本理论】4字节int和4字节float表示的数据个数哪个多

结论：4 字节的 int 表示的数据个数比 float 多。范围怎么计算的？8 位指数可表示 0 到 255，其中：0 和 255 是保留值：e = 0：表示次正规数（denormalized number）e = 255：fraction = 0 → ±∞（正负无穷大）fraction ≠ 0 → NaN（非数值）所以：有效的指数范围是 1 ~ 254。

原创 【GitHub Pages】部署指南

公有仓库才能免费使用github pages。

原创 【Debug】将tailwindcss引入vue失效怎么处理2025最新

最新的vue项目配置tailwindcss。(带vite的vue项目)

原创 【前端】骨架屏

骨架屏（Skeleton Screen）是一种在页面加载过程中用于改善用户体验的设计模式。它通过在页面内容完全加载前，显示一个占位的界面来让用户感知页面正在加载，从而减少等待的焦虑感。

原创 【许可证】Open Source Licenses

长期更新开源许可证（Open Source Licenses）有很多种，每种都有不同的授权和限制，适用于不同目的。

原创 ES6入门---第三单元 模块七： Proxy的使用+Reflect的使用

proxy:  代理    扩展(增强)对象、方法(函数)一些功能    比如:         Vue        Vue.config.keyCodes.enter=65    Proxy作用: 比如vue中拦截        预警、上报、扩展功能、统计、增强对象等等    proxy是设计模式一种，  代理模式 语法:    new Proxy(target...

原创 ES6入门---第三单元 模块五：Map和WeakMap

map:users.map((user)  遍历类似 json, 但是json的键(key)只能是字符串 map的key可以是任意类型使用:    let map = new Map();    map.set(key,value);    设置一个值    map.get(key)    获取一个值    map.delete(key)    删除一项    ...

原创 ES6入门---第三单元 模块四：Set和WeakSet

set数据结构:    类似数组，但是里面不能有重复值，如果有，只显示一个set用法:    let setArr = new Set(['a','b']);    setArr.add('a');   往setArr里面添加一项let setArr = new Set().add('a').add('b').add('c');    setArr.delete('b')...

原创 ES6入门---第三单元 模块三：async、await

async function fn(){  //表示异步：这个函数里面有异步任务    let result = await  xxx    //表示后面结果需要等待    }读取文件里数据实例：const fs = require('fs');//简单封装 fs封装成一个promiseconst readFile = function (fileName){ re...

原创 ES6入门---第三单元 模块一：类、继承

补充：prototype 属性使您有能力向对象添加属性和方法。object.prototype.name=value  &lt;script&gt; function Person(name, age){ this.name = name; this.age = age; } /...

原创 ES6入门---第二单元 模块五：模块化

js不支持模块化注意： 需要放到服务器环境1、如何定义模块？export  东西例：1.js文件中console.log('1模块加载了');//显示是否加载了export const a =12;export const b = 5;export let c = 101;const a=12;const b=5;const c=101;export {/...

原创 ES6入门---第二单元 模块四：promise

1、作用:  解决异步回调问题补充：异步调用就是你 喊 你朋友吃饭 ，你朋友说知道了 ，待会忙完去找你 ，你就去做别的了。同步调用就是你 喊 你朋友吃饭 ，你朋友在忙 ，你就一直在那等，等你朋友忙完了 ，你们一起去。传统方式，大部分用回调函数，事件语法： &lt;script&gt; new Promise(function(resolve, reje...

原创 ES6入门---第二单元 模块三：对象新增、

一：对象简洁语法：1、变量简洁&lt;script&gt; let name = 'Strive'; let age = 18; let json ={ name, //name:name, age //age:age }; console.lo...

原创 ES6入门---第二单元 模块二：关于数组新增

一、扩展运算符。。。1、可以把ul li转变为数组 &lt;script&gt; window.onload=function (){ let aLi = document.querySelectorAll('ul li'); let arrLi = [...aLi]; arrLi.pop()...

原创 【前端】新趋势2025

不定期更新及补充实战。

原创 【前端】如何检查内存泄漏

当每次点击打印按钮时，JavaScript Heap都会出现蓝色的峰值，并逐渐增加，这是因为JavaScript正在创建DOM节点并字符串添加到全局数组。除此之外，可以看到节点的数量（绿色的线）一直在增加，因为我们并没有删除这些节点。让我们使用下面的代码片段检查分离的 DOM 节点。点击“打印”按钮，通过创建 paragraph 节点并将大字符串设置到全局，将1到10000的数字追加到DOM中。在实际的场景中，如果观察到内存持续出现峰值，并且内存消耗一直没有减少，那可能存在内存泄漏。

原创 【前端】手写代码输出题易错点汇总

返回任意一个非 promise 的值都会被包裹成 promise 对象，因此这里的return new Error(‘error!所以这个参数也被忽略。promise.then 是微任务，它会在所有的宏任务执行完之后才会执行，同时需要promise内部的状态发生变化，因为这里内部没有发生变化，一直处于pending状态，所以不输出3。第一个then和第二个then中传入的都不是函数，一个是数字，一个是对象，因此发生了透传，将resolve(1) 的值直接传到最后一个then里，直接打印出1。

原创 【前端】框架全家桶对比

React18 + Router v6 + Redux Toolkit + Zustand + Tailwind / TS / Axios / Vite 最佳实践Vue3 + Router 4 + Pinia + Tailwind / TS / Axios / Vite 最佳实践。

原创 【前端】Vue实战实例解读&SVG

从实战中复习知识点。这两天将更新完。

原创 【前端】浏览器的垃圾回收机制专题

JavaScript 是一种 自动内存管理语言，你不需要像 C/C++ 那样手动申请和释放内存。垃圾回收器（GC）会监测哪些对象不再被使用，然后自动释放它们占用的内存。浏览器的垃圾回收机制（Garbage Collection，简称 GC）主要用于自动管理内存，确保不再使用的对象被及时释放，以避免内存泄漏。