Skip to content

Coder-Playground/mini-vue

 
 

Repository files navigation

mini-vue

实现最简 vue3 模型,用于深入学习 vue3

Usage

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

探讨

可以入群一起探讨 vue3 源码

入群讨论

如果这个项目帮助到你的话,可以增加一下我更新的动力

服务

提供一对一视频教学服务,手把手带你一起看 mini-vue 源码

可加群沟通

Why

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

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

How

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

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

Tasking

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

roadmap

  • 支持英文
  • 规范化 console.log

build

yarn build

example

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

� 推荐使用 Live Server

初始化

流程图

初始化流程图

关键函数调用图

关键函数调用图1

关键函数调用图2

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

update

流程图

update流程图

关键函数调用图

update关键函数调用图

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

About

实现最简 vue3 模型

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 64.6%
  • JavaScript 25.7%
  • HTML 9.7%