mini-vue 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
mini-vue 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
mini-vue 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发Web框架
开源组织
地区 国产
投 递 者 罗奇奇
适用人群 未知
收录时间 2022-04-15

软件简介

mini-vue 实现了一个最简化的 vue3 模型,可用于深入学习 vue3, 更轻松地理解 vue3 的核心逻辑。

vue3 这种工业级别的库,源码中很多逻辑是用于处理边缘情况或者是兼容处理逻辑,不利于初学者学习源码。而 mini-vue 库把 vue3 源码中最核心的逻辑剥离出来,只留下核心逻辑,可帮助开发者更好地理解 Vue3 的核心逻辑。

实现过程

mini-vue 基于 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

初始化

流程图

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(1)
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
1 评论
35 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部