📘 Vue响应式原理深入·手动实现

🎯 30章 · 从零到源码

课程导学学习路径

为什么学习响应式原理？课程目标与学习路径。

前置知识Object.defineProperty

Object.defineProperty 深度解析与 Proxy 初探。

前置知识发布-订阅 vs 观察者

发布-订阅模式与观察者模式的区别与实现。

前置知识Set/Map/WeakMap

ES6 的 Set、Map、WeakMap、WeakSet 在响应式中的应用。

核心概念Vue2 架构

Vue2 响应式系统整体架构与数据驱动视图流程。

核心概念Vue3 架构

Vue3 响应式系统整体架构与 ref/reactive 的诞生背景。

手动实现Dep 依赖收集器

从零实现一个极简的 Dep 依赖收集器。

手动实现Watcher 观察者

实现 Watcher 观察者，建立依赖关系。

手动实现defineReactive

实现 defineReactive，让对象属性变得可响应。

手动实现Observer 类

实现 Observer 类，递归处理深层对象。

手动实现数组方法重写

处理数组的特殊性——重写数组方法。

手动实现$set / $delete

实现 $set 和 $delete 解决 Vue2 的响应式缺陷。

手动实现Compile 模板编译

实现一个简易的 Compile 模板编译器（文本节点）。

手动实现v-model 双向绑定

实现 v-model 双向绑定指令。

手动实现v-bind & 事件绑定

实现 v-bind 指令与事件绑定。

手动实现Mini-Vue 整合

整合 Observer、Dep、Watcher、Compile 完成 Mini-Vue。

深入剖析异步更新 & nextTick

Vue2 异步更新队列与 nextTick 原理。

深入剖析computed 缓存机制

Vue2 计算属性 computed 的惰性求值与缓存机制。

深入剖析watch deep/immediate

Vue2 侦听器 watch 的 deep 与 immediate 实现。

深入剖析虚拟DOM & diff

Vue2 虚拟 DOM 与 diff 算法在响应式中的角色。

Vue3 新特性Proxy & Reflect

Proxy 与 Reflect 实现响应式。

手动实现reactive 函数

Vue3 的 reactive 函数实现。

手动实现ref 与 .value

Vue3 的 ref 函数与 .value 的魔法。

手动实现computed & watchEffect

Vue3 的 computed 与 watchEffect。

手动实现shallowReactive

Vue3 的 shallowReactive 与 shallowRef。

手动实现toRef / toRefs

Vue3 的 toRef 与 toRefs 解构不丢失响应性。

性能优化合理拆分数据

响应式数据的合理拆分与避免过度监听。

性能优化性能瓶颈排查

大型项目中响应式数据的性能瓶颈与排查方法。

源码解读Vue2 Observer/Dep

Vue2 源码中 Observer 与 Dep 的核心代码逐行分析。

源码解读Vue3 reactive/effect

Vue3 源码中 reactive 与 effect 的核心代码逐行分析。