Skip to content
/ mini-vue Public
forked from cuixiaorui/mini-vue

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

License

Notifications You must be signed in to change notification settings

ewxm/mini-vue

This branch is 33 commits behind cuixiaorui/mini-vue:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

12b5066 · Jun 26, 2022
Nov 12, 2021
Jun 25, 2022
Jun 20, 2020
Jun 20, 2020
Jun 25, 2022
Mar 19, 2022
Jun 25, 2022
Jun 25, 2022
Jun 25, 2022
Jun 25, 2022
Jun 25, 2022
Jun 26, 2022

Repository files navigation

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

infrastructure

  • support monorepo with pnpm

todo

  • 实现 runtime-test 可以测试 runtime-core 的逻辑

build

pnpm build

example

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

� 推荐使用 Live Server

初始化

流程图

初始化流程图

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

关键函数调用图

关键函数调用图2

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

update

流程图

image

关键函数调用图

image

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 79.0%
  • JavaScript 15.8%
  • HTML 5.2%