Toubat / mini-vue

A mini version of Vue 3 with reactivity, runtime, and compiler modules

mini-vue

Reactivity

• reactive
• readonly
• shallow readonly
• ref
• proxy ref
• computed
• reactive effect
  • custom scheduler
  • on stop

Runtime Core

• virtual node and h API
• Component initalization
  • handle mount stateful component, element, and text node
  • handle mount children
  • handle mount fragment node
  • render named slots
  • get current instance API
  • provider & dependency injection
  • handle emit custom event
  • support custom renderer
• Component update
  • handle props update
    1. props is modified, added
    2. props is deleted
    3. props is set to undefined or null
  • handle children update
    • Diff:
      • new elements appended to the end
      • new elements appended to the start
      • compare middle portion:
        1. add new elements
        2. remove old elements
        3. patch existing elements
  • handle component update
    • optimize component update using microtasks
  • next tick

Compiler Module

• Todo