@purevue/vue

• English | 简体中文

🔎 项目介绍

• PureVue (@purevue) 是一个 从零实现 Vue3 源码架构 的学习型项目。
  • 实现思路与 Vue 官方源码几乎一致，但进行了简化，更适合学习
  • 目标是帮助开发者理解 Vue3 的核心机制（响应式、虚拟 DOM、模板编译等）
  • 注意：仅供源码学习与研究，不适合生产环境使用

📦 包介绍

• @purevue/vue 是整个项目的 聚合入口包：

  • 类似官方的 vue 包

  • 汇总了 reactivity、runtime-core、runtime-dom、compiler 等子包

  • 使用方式与 Vue3 保持一致，方便对照源码学习

  ⚠️ 注意：@purevue/router、@purevue/vite-plugin 并未包含在此聚合包中，需要 单独安装。

🏗 子包关系

PureVue 拆分成多个子包，@purevue/vue 依赖并聚合了它们：

• @purevue/reactivity – 响应式系统（ref、reactive、依赖收集等）
• @purevue/runtime-core – 运行时核心（组件系统、虚拟 DOM）
• @purevue/runtime-dom – DOM 渲染平台适配
• @purevue/compiler-core – 模板编译核心逻辑
• @purevue/compiler-dom – 针对浏览器的模板编译实现
• @purevue/shared – 工具函数与公共逻辑

不被 @purevue/vue 聚合（需要单独安装）：

• @purevue/compiler-sfc — SFC（.vue）解析与构建时处理；构建时工具，不属于运行时聚合。
• @purevue/vite-plugin — Vite 插件，用于在开发/构建期间把 .vue 文件转为模块；依赖 @purevue/compiler-sfc，并应作为 devDependency 单独安装。
• @purevue/router — 路由包，需单独安装，不在聚合包里。

🎮 Demo

👉 示例仓库：purevue-demo

git clone https://github.com/himipeng/purevue-demo.git
cd purevue-demo
pnpm install
pnpm dev

🚀 使用说明

1. API **与 Vue3 对齐。
2. 具体用法可参照 demo 项目。

import { createApp, ref } from '@purevue/vue'
// or use alias mapping to import from 'vue'

📝 TODOLIST

模板编译 (Compiler)

| 功能 | DONE/TODO | | --------------------------- | ------------- | | parse → transform → codegen | ✅ | | 运行时编译 | ✅ | | AST 生成 | ✅ | | VNode 生成 | ✅ | | 指令 v-on / @click 支持 | ✅ | | 指令 v-if / v-for 支持 | × | | 指令 v-model 等支持 | × | | slot 支持 | × | | 构建时编译 SFC（.vue） | ✅ | | 支持 | ✅ | | 支持 | × |

渲染器 (Renderer)

| 功能 | DONE/TODO | | ----------------------- | ------------- | | createApp / mount | ✅ | | patch / h / createVNode | ✅ | | Diff 算法优化 | × |

响应式系统 (Reactivity)

| 功能 | DONE/TODO | | ----------------------------------------------- | ------------- | | ref / reactive / computed / watch / watchEffect | ✅ | | inject / provide | ✅ | | scheduler / dep / ReactiveEffect | ✅ | | nextTick | × |

路由系统 (Router)

| 功能 | DONE/TODO | | ------------------ | ------------- | | HTML5 History 路由 | ✅ | | Hash 路由 | × | | 嵌套路由 | ✅ | | 路由守卫 | × | | 动态路由 | × |

💡 特性

• ⚡ 几乎完全复刻 Vue3 架构：和官方源码保持一致的设计思路
• 📖 源码简化：保留核心功能，降低阅读和调试门槛
• 🛠 模块化设计：子包拆分同官方 Vue3
• 🎯 学习优先：更适合源码学习，而非生产使用