/build-your-own-vue-next

vue-next内部原理讲解，深入理解Vue3

Primary LanguageTypeScriptMIT LicenseMIT

创建你自己的Vue 3

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

目录

第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介绍

其它

参考

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

工具