创建你自己的Vue 3

Vue 3 内部原理讲解，深入理解 Vue 3，创建你自己的 Vue 3。 Deep Dive into Vue 3. Build Your Own Vue 3 From Scratch.

目录

• 第1章 Vue 3总览
  • 核心模块
    • 响应式模块
    • 编译器模块
    • 渲染器模块
  • 运行过程
• 第2章 渲染机制
  • Virtual DOM
    • Virtual DOM 是什么
    • 为什么要用 Virtual DOM
  • render 函数
    • render 函数是什么
    • 为什么要提供 render 函数
    • render 函数使用方法
    • render 函数使用场景
  • 结束语
• 第3章 渲染器原理及实现
  • 1. 编译器和渲染器 API 初探
    • Complier 和 Renderer
    • 编译器（Complier）真实场景
  • 2. 设计 VNode
    • 用 VNode 描述 HTML
    • 用 VNode 描述抽象内容
    • 区分 VNode 类型
    • 区分 children 的类型
    • 定义 VNode
  • 3. 生成 VNode 的 h 函数
    • 基本的 h 函数
    • 完整的 h 函数
  • 4. 渲染 VNode 的 mount 函数
    • mount 函数基本原理
    • 解决 VNode 的类型问题
      • 渲染文本节点
      • 渲染标签节点
      • 渲染普通有状态组件
      • 渲染函数式组件
    • 设置 DOM 属性
    • 渲染子节点
    • 关联 VNode 及其 DOM
    • 完整实现
    • 完整示例
  • 5. 实现 patch 函数
    • patch 的作用
    • patch 函数实现
      • 比较 props
      • 比较 children
    • 完整实现
    • 完整示例
  • 6. patch 函数优化
    • 准备工作
    • 简单的 diff 算法
    • 优化版本的 diff 算法
      • 新增节点
      • 删除节点
    • 关于核心 diff 算法
      • Vue 2 diff 算法
      • Vue 3 diff 算法
• 第4章 响应式原理及实现
  • 1. 实现响应式
    • 响应基本类型变量
    • 响应对象的不同属性
    • 响应多个对象
  • 2. Proxy 和 Reflect
    • Proxy
    • Reflect
    • 实现reactive函数
  • 3. activeEffect 和 ref
    • 只响应需要依赖更新的代码（effect）
      • 现阶段完整代码
    • 实现ref
      • 现阶段完整代码
  • 4. Computed
    • 实现computed
      • 现阶段完整代码
    • 尚存问题
• 第5章 创建一个迷你 Vue
• 第6章 Composition API
  • 介绍
  • 举个例子
    • 需求
    • 实现
    • 存在的问题
  • 代码组织及复用
    • 需求变更
    • 需求变更实现
    • 存在的问题
    • 解决问题
  • 使用 Composition API
• 其它

第1章 Vue 3总览

你能学到什么

• 了解 Vue 3 核心模块的功能
• 了解 Vue 3 整体的运行过程

点此学习 Vue 3 总览

第2章 渲染机制

你能学到什么

• 了解 Virtual DOM 存在的意义
• 了解 render 函数存在的必要性
• 了解 tempalte 和 render 的使用场景

点此学习 Vue 3 渲染机制

第3章 渲染器原理及实现

你能学到什么

• 了解 Vue 3 中的 VNode
• 了解 render 的具体渲染原理
• 了解 diff 算法的作用
• 实现 Vue 3 中渲染器功能

点此学习渲染器原理及实现

第4章 响应式原理及实现

你能学到什么

• 了解 reactive 设计理念
• 开发独立的响应式库

点此学习响应式原理及实现

总结

• 依赖收集三个核心概念 effect、track 和 trigger
  • WeakMap
  • Map
  • Set
• Vue 3 使用了 Proxy 来实现响应式，使用 Reflect 是为了解决上下文 this 错误的问题
  • Proxy
  • Reflect
• track 只会收集响应式对象的依赖
• 基本类型变量用 ref 来实现响应式，对象用 reactive 实现响应式
• ...

第5章 创建一个迷你 Vue 3

你能学到什么

• 整合代码，创建迷你 vue

点此学习创建一个迷你 Vue 3

第6章 Composition API

你能学到什么

• 了解 Vue 3 Composition API
• 代码组织

点此学习Composition API介绍

其它

参考

本教程制作过程参考了下列内容：

• Vue 3 Deep Dive with Evan You
• Vue 3 Reactivity
• Vue 3渲染器的设计与实现
• MDN - JavaScript
• 为什么要使用 Reflect

工具

• Vue 3在线模板编译系统