Skip to content

实现Vue3三大核心模块:reactivity、runtime 以及 compiler 

Notifications You must be signed in to change notification settings

Julian0197/mini-vue

Repository files navigation

mini-vue3实现

mini-vue3按照以下四个分支的顺序,借助jest进行单元测试,通过测试驱动开发小步走实现。

1.reactivity

实现Vue3响应式原理,并在此基础上实现相关API

  • effect & reactive依赖收集和触发依赖
  • 实现effect返回runner
  • 实现effectstoponStop
  • 实现readonlyshallowReadonly
  • 实现isReactiveisReadonlyisProxy
  • 实现ref
  • 实现isRefunRefproxyRefs功能
  • 实现computed计算属性

2.runtime-core(1)

浏览器首次渲染功能,主要实现了一个基本的Vue3的虚拟DOM的节点渲染。

本分支只包含了vnode的首次渲染过程,组件及节点的更新,更新优化,diff算法的实现将会放在下一分支。

runtime-core(1)

  • 初始化component主流程
  • 初始化element主流程
  • rollup打包库
  • 实现组件代理对象
  • 实现shapeFlags
  • 实现事件注册
  • 实现组件的propsemitslots功能
  • 实现FragmentText类型
  • 实现getCurrentInstance
  • 实现provide/inject功能

3.runtime-core(2)

实现Vue3的虚拟DOM更新,包含组件、节点的更新、更新优化、diff算法。

  • 实现自定义渲染器
  • 更新element类型节点
  • 更新component类型节点
  • diff算法
  • 实现nextTick

4.compiler-core

实现一个简单的模板编译解析器,可以从<template>编译成render函数以实现最终渲染。

  • 解析插值
  • 解析element标签
  • 解析text文本
  • 实现transform功能
  • 实现ast转化为render函数

上述内容是本项目实现流程。

具体实现细节详见每个分支的README.md

About

实现Vue3三大核心模块:reactivity、runtime 以及 compiler 

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published