随笔分类 - 前端 / vue3
摘要：Vue插槽机制深度解析：内容分发的核心技术 一、插槽的核心价值与适用场景 插槽（Slots）是Vue组件体系中实现内容分发的核心机制，其核心价值体现在三个层面： 组件模板弹性扩展 保留子组件结构框架，允许父组件动态注入模板片段（如导航栏布局中保留LOGO位置） 组件逻辑与展示解耦 子组件处理业务逻辑
阅读全文
摘要：1. v-memo（Vue3 新增） 作用：通过记忆模板子树来优化渲染性能，仅当依赖项变化时才重新渲染 适用场景： 大型数据表格中的某一行渲染 复杂组件树的静态部分 高频更新但实际变化较少的数据展示 示例： <!-- 当item.id和item.status不变时不会重新渲染该行 --> <div
阅读全文
摘要：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
阅读全文
摘要：WeakMap 和 Map 详解 1. Map 定义： Map 是一种键值对的集合，允许使用任意类型的值（对象、原始类型）作为键，保持插入顺序，支持遍历和大小查询。 核心特性： 键的多样性：键可以是任意数据类型（包括对象、函数等），通过严格相等比较（ ）来匹配。 顺序性：插入顺序被保留，迭代时按插入
阅读全文
摘要：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 属性统一
阅读全文
摘要：Vue 3 的 reactive 通过 Proxy API 实现响应式，其核心思路比 Vue2 的 Object.defineProperty 更高效且功能更全面。以下是实现思路的详细拆解： 1. 代理对象（Proxy） 利用 Proxy 代理目标对象，拦截 13 种操作（如 get/set/del
阅读全文
摘要：Vue 的响应式原理是其核心机制之一，主要通过数据劫持结合发布-订阅模式来实现。以下是关键实现步骤和原理的详细说明： 核心实现步骤（Vue2版本） 数据劫持 使用 Object.defineProperty() 递归地监听对象的属性（仅对已有属性生效）。 对数组需单独处理：通过重写数组的 7 个可修
阅读全文
