Catunderumbrella-CSDN博客

原创 Map vs 普通对象 {}

JavaScript 中的 Map 与普通对象 {} 在键值对存储上有显著差异。Map 支持任意键类型（包括对象）、保留插入顺序、提供高效增删查操作，且自带迭代方法（如 set/get），适合缓存、依赖映射等场景；普通对象仅支持字符串/Symbol键，可能无序，需手动处理原型链。Vue 3响应式系统依赖 Map 构建多层嵌套结构（对象→属性→副作用函数），而普通对象因键强制转字符串无法实现此类逻辑。选择建议：明确映射关系用 Map，简单数据用对象。

2025-06-08 21:08:00 545

原创 Vue 的依赖收集结构设计成 WeakMap → Map → Set 原理解析

Vue 依赖收集采用 WeakMap → Map → Set 的三层结构设计，主要考虑性能优化和内存管理。WeakMap 以响应式对象为键，不影响垃圾回收；Map 存储对象属性的依赖关系；Set 保存具体的副作用函数，防止重复。这种层级结构高效且内存友好：WeakMap 自动释放无用对象，Map 快速定位属性依赖，Set 高效管理并执行副作用。整体设计确保响应式系统既精确追踪依赖，又避免内存泄漏。

2025-06-06 22:13:32 418

原创 ES6+ 实用方法指南

ES6+ 实用方法指南摘要本文整理了25个ES6+常用特性，涵盖数组、对象、字符串、异步编程等场景。主要内容包括：1）数组去重、合并、查找等操作；2）对象合并、解构、属性简写；3）箭头函数、默认参数；4）Promise、async/await异步处理；5）Set/Map数据结构应用；6）可选链?.、空值合并??等安全操作；7）字符串模板、填充等技巧。每个方法均配有简洁示例，便于开发者快速查阅和应用。文末推荐了Object.hasOwn()等ES2022+新增特性，为现代JavaScript开发提供实用参考

2025-06-05 17:28:27 368

原创 Git 常用命令与项目操作详解（建议收藏）

Git 是现代开发中必不可少的工具，从初始化仓库、提交代码，到多人协作、分支管理、撤销操作，掌握这些命令能有效提升开发效率。本文将全面整理 Git 常用命令与典型项目操作场景，帮助你系统掌握并灵活运用 Git。

2025-06-05 16:46:34 266

原创 JavaScript 注释实用指南：高效开发的注释技巧与规范

JavaScript注释使用指南：本文系统讲解了JavaScript注释的类型（单行、多行、JSDoc）、适用场景及规范建议，包含VS Code和WebStorm的快捷键速查表。文章强调注释应说明"为什么"而非"做了什么"，推荐使用TODO/FIXME标记，并提供团队协作规范建议。附JSDoc常用标签解释和注释模板，帮助开发者编写更专业、可维护的代码注释，提升团队协作效率。

2025-06-03 17:45:17 842

原创结合 Vue3 源码，深入解析：为什么 Proxy 中要用 Reflect？

Vue3 响应式系统中大量使用 Proxy 和 Reflect，很多人会问：Proxy 拦截后直接操作 target 不也可以？为什么 Vue3 源码中所有 get、set、deleteProperty 等操作都使用了 Reflect？这不是“装逼写法”，而是有真实的语义和功能意义。

2025-06-03 14:27:21 762

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（七）响应式和组件渲染

🌟 一文带你彻底搞懂响应式和组件渲染的关系：1、渲染函数与响应式数据的关系2、为什么 Vue 能实现精准更新3、为什么 Vue 能实现数据共享4、那 Pinia 的意义是什么？

2025-06-02 14:59:13 2099

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（六）响应式的本质

🌟 一文带你彻底搞懂响应式的本质：1、 Vue 响应式的核心机制2、如何建立依赖3、是否收集依赖示例4、是否派发更新示例

2025-06-01 22:14:59 2049

原创 Vue 响应式为什么异步读取不建立依赖？

Vue的依赖收集机制仅在被监控函数的同步执行期间生效，无法追踪异步代码中的响应式数据访问。这是因为Vue通过全局变量标记当前执行的effect函数，同步执行结束后就会清空标记，导致异步操作无法建立正确依赖关系。这种设计确保了响应式行为的确定性和可控性，避免了异步逻辑可能带来的依赖混乱和性能问题。对于异步场景，开发者应在同步阶段获取所需数据或使用watch精准监听。这种"同步收集依赖"的策略已成为现代响应式框架的主流实现方式，在性能、可控性和实现简洁性之间取得了最佳平衡。

2025-06-01 18:34:58 456

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（五）响应式数据的本质

🌟 一文带你彻底搞懂响应式数据的本质：1、响应式数据2、 Vue3 中如何创建响应式数据3.、源码解析：ref 和 reactive 的实现4.、判断：某个操作是否触发拦截？

2025-05-31 22:04:47 499

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（四）数据拦截的本质

🌟 一文带你彻底搞懂数据拦截的本质：1、数据拦截是什么2、JS 中的两种数据拦截方式3、二者的共同点4、二者的差异点

2025-05-30 16:08:21 685

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（三）组件树和虚拟DOM树

🌟 一文带你彻底搞懂组件树和虚拟 DOM 树的区别：1. 组件树2. 虚拟 DOM 树3. Vue 1.x 与 2.x 的响应式机制演变4. Vue 3 的响应式机制与虚拟 DOM

2025-05-29 11:51:18 689

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（二）模板的本质

🌟 一文带你彻底搞懂模板的本质：1、渲染函数2、模板编译原理3、编译的时机

2025-05-29 08:55:55 705

原创【重学 Vue：深入本质，脱离八股文，彻底搞定面试】：（一）虚拟DOM的本质

🌟 一文带你彻底搞懂虚拟 DOM 的本质：1、DOM 工作原理2、什么是虚拟 DOM3、为什么需要虚拟 DOM

2025-05-28 12:50:54 1648

原创 vue页面数据变化不渲染的问题

1.数组元素改变赋值不生效，需删除原元素，插入新元素this.carriageForm.costList.splice(index, 1, areaCodeList)2.对象属性改变赋值不生效，需重新设置this.$set(this.carriageForm.costList[index], areaCodeList)

2020-08-27 18:18:15 1045