SuYxh / mini-vue3

mini-vue3

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

mini vue

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

How

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

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

Tasking

reactivity

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

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

runtime-core

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

compiler-core

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

runtime-dom

  • 支持 custom renderer

runtime-test

  • 支持测试 runtime-core 的逻辑

infrastructure

  • support monorepo with pnpm

build

pnpm build

docs

pnpm docs:dev

example

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

� 推荐使用 Live Server

流程图

响应式数据结构

image-20240118223902472

响应式系统 MVP 模型

image-20240118223949999

依赖清理

image-20240118224016622

嵌套 effect

image-20240118224141690

scheduler

image-20240118224210357

computed

image-20240118224353017

watch

image-20240118224413560

About

mini-vue3


Languages

Language:TypeScript 56.6%Language:SCSS 17.6%Language:JavaScript 16.1%Language:Vue 5.3%Language:HTML 4.4%