Vue 的个人理解

Vue 深入理解

一、响应式原理

Vue 3 的响应式系统基于 effect 函数 构建。

1. 核心流程

   • 当访问响应式对象的属性时，会触发 track 方法进行依赖收集。
   • 依赖的存储结构为：WeakMap<Target, Map<Property, Set<Effect>>>。
     • Target：原始对象。
     • Property：对象的属性。
     • Effect：具体的副作用函数（依赖）。
   • 当响应式对象的属性被修改时，会触发 trigger 方法，遍历并执行所有收集到的 effect 函数。

2. effect 函数

   • 执行时，会先清理旧的依赖。
   • 然后将当前 effect 标记为活跃 (active) 状态，并压入执行栈，依次执行。

3. reactive API

   • 基于 Proxy 为整个对象创建代理，拦截所有操作（get、set、deleteProperty 等）。
   • 更新时使用 Reflect 方法，确保执行上下文 (this) 指向正确。
   • 注意：直接操作原始对象不会触发响应式更新。
   • reactive 默认是深层响应式。shallowReactive 可创建仅第一层响应式的代理。

4. ref API

   • 用于代理基本类型值（因为基本类型按值传递，无法被 Proxy 直接代理）。
   • 通过 .value 属性访问其包装的真实值。
   • 在 .value 的 getter 中调用 track，在 setter 中调用 trigger。

5. computed API

   • 本质是特殊的响应式 effect。
   • 懒执行：仅在首次访问 .value 时执行计算。
   • 缓存：内部缓存当前值，仅在依赖的响应式数据变化时才重新计算。

6. watch 与 watchEffect API

   • watch：显式指定侦听的数据源，仅在数据变化时执行回调，可获取新值与旧值。
   • watchEffect：立即执行一次，并自动追踪其内部所有响应式依赖。

7. 其他特性

   • Vue 3 对 Array 的方法、Map、Set 等集合类型进行了响应式代理的重写/包装。
   • stop 函数可用于停止一个响应式 effect。
   • onTrack 和 onTrigger 钩子可用于调试复杂的依赖关系。

---

二、虚拟 DOM 与 Diff 算法

• 虚拟 DOM (VNode)：本质是用 JavaScript 对象来描述真实的 DOM 结构。
• Diff 算法：在组件更新时，通过对比新旧 VNode，计算出需要进行的最小化、批量的 DOM 操作，以实现高效、精准的视图更新。

---

三、模板编译

Vue 的模板 (template) 需要被编译为渲染函数 (render function)，其过程如下：

1. 解析：将模板字符串解析为抽象语法树 (AST)。
2. 转换/优化：对 AST 进行优化。例如：
   • 静态节点提升：将纯静态的节点提取出来，在重渲染时直接复用，避免重复创建。
   • Vue 会根据开发环境与生产环境进行不同级别的优化。
3. 代码生成：将优化后的 AST 生成为可执行的 render 函数字符串。

• 后续组件更新时，直接执行这个 render 函数生成新的 VNode。
• render 函数会被一个 effect 包裹，因此当其内部的响应式依赖变化时，会自动触发重新执行和视图更新。

---

四、组件系统

1. 组件间通信

   • Props / Emits：父传子，子传父的标准方式。
   • Provide / Inject：跨层级祖先组件向后代组件提供数据。
   • 状态管理 (Pinia/Vuex)：全局状态共享与管理。

2. 组件生命周期

   • 在 setup() 函数中，可以通过以下组合式 API 访问生命周期：
     • onMounted
     • onUpdated
     • onUnmounted
     • 等。

3. 渲染函数

   • 开发者可以不写模板，直接使用 h() 函数编写 render 函数来创建 VNode，提供更高的编程灵活性。

4. 自定义指令

   • 允许开发者注册可复用的指令，用于对底层 DOM 元素进行直接操作。