Skip to content

🚀🚀🚀 Realize the core functions of vue3 (实现 vue3 的核心功能)

Notifications You must be signed in to change notification settings

HydenLiu/mini-vue

Repository files navigation

实现 mini-vue 核心功能

实现 reactivity 功能

  • reactive
    • reactive 的实现
    • readonly 的实现
    • shallowReactive 的实现
    • shallowReadonly 的实现
    • 工具函数
      • isProxy 的实现
      • isReactive 的实现
      • isReadonly 的实现
    • effect
      • track 依赖收集
      • trigger 触发依赖
      • effect.run 的实现
      • effect.stop 的实现
      • effect.scheduler 的实现
    • ref
      • ref 的实现
      • 工具函数
        • isRef 的实现
        • toRef 的实现
        • unRef 的实现
        • proxyRefs 的实现
    • computed

实现 runtime-core 功能

  • createApp 的实现
    • mount 方法的实现
  • component 类型的实现
    • 初始化
      • componentInstance
    • 更新
      • diff 算法
        • 对比 props
        • 对比 children
        • 双端 Diff 和使用最长递增子序列的优化
  • Text 类型的实现
  • vnode 的实现
    • ShapeFlags 多类型
  • props 功能的实现
  • slots 功能的实现
  • 组件 setup 函数的实现
    • 返回一个对象
    • 返回一个函数作为 render
    • context 的实现
  • 组件 render 函数的实现
  • 组件代理对象的实现
  • getCurrentInstance 的实现
  • 依赖注入的实现
    • provide
    • inject
  • scheduler 的实现
    • nextTick 的实现
  • emit 的实现

实现 runtime-dom 功能

  • custom-renderer 的实现
    • 渲染 api 的实现
      • createElement
      • setElementText
      • patchProp
      • insert
      • remove

实现 compiler-core 功能

各个包的依赖关系

  flowchart LR
    compiler-sfc["@vue/compiler-sfc"]
    compiler-dom["@vue/compiler-dom"]
    compiler-core["@vue/compiler-core"]
    vue["vue"]
    runtime-dom["@vue/runtime-dom"]
    runtime-core["@vue/runtime-core"]
    reactivity["@vue/reactivity"]
    subgraph "Runtime Packages"
      runtime-dom --> runtime-core
      runtime-core --> reactivity
    end
    subgraph "Compiler Packages"
      compiler-sfc --> compiler-core
      compiler-sfc --> compiler-dom
      compiler-dom --> compiler-core
    end
    vue ---> compiler-dom
    vue --> runtime-dom
Loading

https://github.com/vuejs/core/blob/main/.github/contributing.md#package-dependencies

注意:编译时的包不应该直接导入运行时导入项目,反之亦然。如果有些东西需要在编译时和运行时之间使用,则应该将其提取到@vue/shared。

About

🚀🚀🚀 Realize the core functions of vue3 (实现 vue3 的核心功能)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published