随笔分类 - 前端
摘要：以下是一个基础的 Webpack 5 示例配置，包含常见配置项和详细注释： // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); con
阅读全文
摘要：Webpack 的编译流程可以分解为 7 个核心阶段，结合 Webpack 5 源码（以 webpack/webpack 仓库主分支为准）的结构实现，这里为您进行详细阐述： 一、初始化阶段 入口文件：lib/webpack.js 参数校验与配置合并： const createCompiler = o
阅读全文
摘要：我将从四个部分对比说明 Webpack 与 Vite 的处理方式，并附实际代码示例： 一、代码压缩（Minification） Webpack： 生产模式下自动启用，核心配置示例： // webpack.config.js module.exports = { optimization: { min
阅读全文
摘要：Vue插槽机制深度解析：内容分发的核心技术 一、插槽的核心价值与适用场景 插槽（Slots）是Vue组件体系中实现内容分发的核心机制，其核心价值体现在三个层面： 组件模板弹性扩展 保留子组件结构框架，允许父组件动态注入模板片段（如导航栏布局中保留LOGO位置） 组件逻辑与展示解耦 子组件处理业务逻辑
阅读全文
摘要：1. v-memo（Vue3 新增） 作用：通过记忆模板子树来优化渲染性能，仅当依赖项变化时才重新渲染 适用场景： 大型数据表格中的某一行渲染 复杂组件树的静态部分 高频更新但实际变化较少的数据展示 示例： <!-- 当item.id和item.status不变时不会重新渲染该行 --> <div
阅读全文
摘要：ESM（ECMAScript Modules）和CommonJS在标准上的核心区别体现在规范制定主体和技术设计理念上，以下从社区标准与官方标准的角度对比分析： 一、标准背景差异 CommonJS（社区标准） 起源：由Mozilla工程师Kevin Dangoor于2009年发起，旨在解决服务端JS（
阅读全文
摘要：Vue 3的Diff算法（又称Reactivity Diff）是其性能优化的核心改进之一。相比Vue 2的双端Diff算法，Vue 3通过最长递增子序列优化（Longest Increasing Subsequence, LIS）将时间复杂度从O(n²)降低至接近O(n)，尤其在处理大规模列表时性能
阅读全文
摘要：在 Vue3 的响应式系统中，所有与响应式数据关联的副作用函数确实会被存储在 targetMap 结构中，它们的依赖关系建立遵循统一的机制。以下是具体分类说明： 核心概念关系图 全局 WeakMap ┌───────────┐ │ targetMap │ └─────┬─────┘ │ Key: 响
阅读全文
摘要：在 Vue 3 的响应式系统中，watch 的 getter 函数执行时机与触发机制是高度优化后的设计。以下从源码层级深度解析其运作原理（基于 Vue 3.4.27 版本），通过流程图和关键源码片段说明整个过程。 一、执行时机的两个阶段 1. 初始化阶段 源码入口: packages/runtime
阅读全文
摘要：以下是 Vue 3 watch 第一个参数的一切形式和最终转换形态的完整解析： 核心结论 在 Vue 3 中，watch 第一个参数的所有形式最终都会被统一转换成： 一个 getter 函数（当侦听单个来源时） 由 getter 函数组成的数组（当侦听多个来源时） 这是通过 Vue 源码中的 doW
阅读全文
摘要：HTTP 的 302（临时重定向）和 301（永久重定向）是常见的重定向状态码，其核心区别在于浏览器和搜索引擎对跳转行为的处理策略。以下是具体说明和典型应用场景： HTTP 301 永久重定向 作用： 资源已永久迁移到新 URL，搜索引擎会将原 URL 的权重、排名等 SEO 属性转移到新 URL，
阅读全文
摘要：浏览器事件循环的完整与准确叙述（依据 W3C/WHATWG 规范） 一、核心机制 JavaScript 的 单线程模型 通过 事件循环（Event Loop） 管理异步操作，其设计核心如下： 非阻塞执行：允许主线程在等待 I/O、定时器等操作时继续处理其他任务。 优先级调度：任务（Task） 与 微
阅读全文
摘要：以下是手写数组扁平化和深拷贝的实现方案： 一、手写数组扁平化（支持深度控制） // 方法一：递归实现（默认无限深度） function flattenDeep(arr) { return arr.reduce((acc, item) => { return acc.concat(Array.isAr
阅读全文
摘要：JavaScript 的数组方法非常强大，掌握它们能让你的开发效率事半功倍。以下是常用的数组方法总结，分为 修改原数组/返回新数组、遍历/查找、ES6+新增方法 等分类： 一、会修改原数组的方法 方法 作用 示例 返回值 push 在数组末尾添加元素 arr.push(5) 新数组长度 pop 删除
阅读全文
摘要：WeakMap 和 Map 详解 1. Map 定义： Map 是一种键值对的集合，允许使用任意类型的值（对象、原始类型）作为键，保持插入顺序，支持遍历和大小查询。 核心特性： 键的多样性：键可以是任意数据类型（包括对象、函数等），通过严格相等比较（ ）来匹配。 顺序性：插入顺序被保留，迭代时按插入
阅读全文
摘要：BOM（Browser Object Model）和 DOM（Document Object Model）不是 JavaScript 语言自身的标准，但它们是在浏览器环境中实现的标准，由浏览器厂商提供支持。以下是两者的归属分析： 1. DOM（文档对象模型）：浏览器遵循的 Web 标准 标准化机构：
阅读全文
摘要：在 JavaScript 中，继承的实现方式主要有以下几种，每种方式适用于不同的场景： 一、原型链继承 实现方式： function Parent() { this.name = 'Parent'; } Parent.prototype.say = function() { return this.
阅读全文
摘要：Vue 3 的 Effect（副作用） 是整个响应式系统的核心机制，负责管理依赖追踪和响应式触发。理解其作用和原理对掌握 Vue 的底层机制至关重要。 一、核心作用 1. 依赖追踪（Dependency Tracking） 自动跟踪响应式数据在副作用函数中的使用。 示例代码：import { rea
阅读全文
摘要：1. 类结构定义 class ComputedRefImpl<T> { // 核心状态 private _value!: T // 缓存的计算结果 private _dirty = true // 脏值标志 public readonly effect: ReactiveEffect<T> // 是
阅读全文
摘要：Vue 3 的 ref 主要用于包装基础类型（如 number/string）使其成为响应式对象，同时也能处理对象/数组（此时内部转为 reactive）。以下是其核心实现思路及关键代码逻辑： 核心设计目标 基础类型支持：通过对象包装让原始值具备响应式能力。 统一访问接口：用 .value 属性统一
阅读全文
浙公网安备 33010602011771号