/mini-vue

实现最简 vue3 模型( Help you learn more efficiently vue3 source code )

Primary LanguageTypeScriptMIT LicenseMIT

CN / EN

mini-vue github

实现最简 vue3 模型,用于深入学习 vue3, 让你更轻松的理解 vue3 的核心逻辑

Usage

B 站 提供了视频讲解使用方式

历经半年我把这个项目做成了一套系列视频课

【课程介绍】

课程的目标是通过构建自己的 mini-vue3 (同这个库一个复杂级别)来深入学习理解 vue3 源码

只有手写一遍,才能真正的掌握源码

进阶高级前端的编程**有哪些

如何掌握 Vue3 源码原理实现

面试如何脱颖而出

帮你解决以上痛点问题 [胜利]

vx:cuixr1314

备注一下: github mini-vue

Why

当我们需要深入学习 vue3 时,我们就需要看源码来学习,但是像这种工业级别的库,源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑,是不利于我们学习的。

我们应该关注于核心逻辑,而这个库的目的就是把 vue3 源码中最核心的逻辑剥离出来,只留下核心逻辑,以供大家学习。

How

基于 vue3 的功能点,一点一点的拆分出来。

代码命名会保持和源码中的一致,方便大家通过命名去源码中查找逻辑。

Tasking

runtime-core

  • 支持组件类型
  • 支持 element 类型
  • 初始化 props
  • setup 可获取 props 和 context
  • 支持 component emit
  • 支持 proxy
  • 可以在 render 函数中获取 setup 返回的对象
  • nextTick 的实现
  • 支持 getCurrentInstance
  • 支持 provide/inject
  • 支持最基础的 slots
  • 支持 Text 类型节点
  • 支持 $el api

reactivity

目标是用自己的 reactivity 支持现有的 demo 运行

  • reactive 的实现
  • ref 的实现
  • readonly 的实现
  • computed 的实现
  • track 依赖收集
  • trigger 触发依赖
  • 支持 isReactive
  • 支持嵌套 reactive
  • 支持 toRaw
  • 支持 effect.scheduler
  • 支持 effect.stop
  • 支持 isReadonly
  • 支持 isProxy
  • 支持 shallowReadonly
  • 支持 proxyRefs

compiler-core

  • 解析插值
  • 解析 element
  • 解析 text

runtime-dom

  • 支持 custom renderer

build

pnpm build

example

通过 server 的方式打开 example/* 下的 index.html 即可

� 推荐使用 Live Server

初始化

流程图

初始化流程图

可加 vx:cuixr1314 获取所有脑图(备注:github mini-vue 领取脑图)

关键函数调用图

关键函数调用图2

可以基于函数名快速搜索到源码内容

update

流程图

image

关键函数调用图

image

可以基于函数名快速搜索到源码内容