{"id":13560502,"url":"https://github.com/yaolonga/mini-vue3","last_synced_at":"2025-04-03T16:30:46.532Z","repository":{"id":107792270,"uuid":"459867224","full_name":"yaolonga/mini-vue3","owner":"yaolonga","description":"最完整的！！手写实现Vue3源码结构相同的mini-vue3 (带详细注释---便于完整学习vue源码)喜欢给个start吧！！","archived":false,"fork":false,"pushed_at":"2022-10-13T09:51:22.000Z","size":329,"stargazers_count":58,"open_issues_count":1,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T23:02:22.550Z","etag":null,"topics":["mini-vue","mini-vue3","monorepo","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yaolonga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-02-16T05:39:33.000Z","updated_at":"2025-03-17T07:37:33.000Z","dependencies_parsed_at":"2024-01-14T02:45:50.136Z","dependency_job_id":"6520f576-1bdb-4784-820b-bdbd5de801fd","html_url":"https://github.com/yaolonga/mini-vue3","commit_stats":null,"previous_names":["yaolonga/mini-vue3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaolonga%2Fmini-vue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaolonga%2Fmini-vue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaolonga%2Fmini-vue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaolonga%2Fmini-vue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yaolonga","download_url":"https://codeload.github.com/yaolonga/mini-vue3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247006596,"owners_count":20868033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mini-vue","mini-vue3","monorepo","typescript","vue","vue3"],"created_at":"2024-08-01T13:00:45.315Z","updated_at":"2025-04-03T16:30:46.008Z","avatar_url":"https://github.com/yaolonga.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# mini-vue3\n\n#### 声明\n\n源码中的注释都是凭自己对 vue 的理解所写的，如有注释错误或者语义不清晰，希望大家提交中文注释的pr。\n\n#### 介绍\n\n迷你版 vue3 (带详细注释),采用和vue3源码相同的monorepo前端项目管理，源码结构、函数名和vue3基本一致\n\n#### 核心功能\n- reactivity\n    - [x] reactive 只支持普通对象和Map、Set对象的响应式代理\n    - [x] shallowReactive\n    - [x] readonly\n    - [x] shallowReadonly\n    - [x] ref\n    - [x] shallowRef\n    - [x] unref\n    - [x] proxyRefs\n    - [x] toRef\n    - [x] toRefs\n    - [x] effect\n    - [x] ReactiveEffect\n    - [x] computed\n- runtime-core\n    - [x] KeepAlive组件\n    - [x] Teleport组件\n    - [x] defineAsyncComponent\n    - [x] defineComponent\n    - [x] createAppAPI\n    - [x] onBeforeMount\n    - [x] onMounted\n    - [x] onBeforeUpdate\n    - [x] onUpdated\n    - [x] onBeforeUnmount\n    - [x] onUnmounted\n    - [x] watch\n    - [x] patch\n    - [x] emit\n    - [x] slots\n    - [x] h\n    - [x] scheduler调度器\n    - [x] createVNode\n    - [x] createRenderer\n- runtime-dom\n    - [x] createApp\n    - [x] createSSRApp\n    - [x] Transition 组件\n    - [x] ensureRenderer\n    - [x] ensureHydrationRenderer\n    - [x] render\n    - [x] hydrate\n - compiler-core\n    - [x] baseParse\n    - [x] baseCompile\n    - [x] codegen\n    - [x] transform\n    - [x] transformElement\n    - [x] transformText\n    - [x] transformExpression\n    - [x] transformBind\n    - [x] transformOn\n    - [ ] transformIf\n    - [ ] transformFor\n- compiler-dom\n    - [x] parse\n    - [x] compile\n- template-explorer\n    - [x] 支持编译生成render函数代码预览\n- shared\n    - [x] 基本的通用工具函数和枚举\n- vue \n    - [x] compile 返回一个render函数\n    - [x] 全局统一导出miniVue3供外部使用，目前只支持global引入和esModule方式引入\n- server-renderer\n    - [x] renderToString\n    - [x] renderVNode\n- compiler-sfc\n    - [ ] 未完成\n#### 使用说明\n\n1. 安装依赖\n\n```\n  yarn install\n```\n\n2. 打包\n\n- 打包全部模块\n  ```\n    yarn build\n  ```\n- 打包单个模块\n  ```\n    yarn dev  模块名 -f 打包方式\n    # 打包方式有三种cjs、esm、global\n  ```\n\n3. 使用\n   将打包好的模块中的 dist 目录下的`xxxx.global.js` 引用到 html 中\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003e编译测试 全局引入Global\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cstyle\u003e\n  .test {\n    color: red;\n    font-size: large;\n  }\n\u003c/style\u003e\n\n\u003cbody\u003e\n  \u003cdiv id=\"app1\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"app2\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"app3\"\u003e\u003c/div\u003e\n  \u003cscript src=\"../dist/vue.global.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/x-template\" id=\"name1\"\u003e\n    \u003cdiv @Click=\"change\" class=\"test\"\u003e{{counter}}方式1\u003c/div\u003e\n  \u003c/script\u003e\n\n\n\n  \u003cscript type=\"text/x-template\" id=\"name2\"\u003e\n    \u003cdiv @Click=\"change\" class=\"test\"\u003e{{counter}} 方式2\u003c/div\u003e\n  \u003c/script\u003e\n\n\n  \u003cscript\u003e\n    const { compile, createApp, ref } = MiniVue3\n  \u003c/script\u003e\n\n  \u003c!-- 方式1 --\u003e\n  \u003cscript\u003e\n    const render = compile('#name1') //外部直接创建 需要将全局模式\n    const App = {\n      setup() {\n        const counter = ref(1)\n        return {\n          counter,\n          change: () =\u003e {\n            counter.value++\n          }\n        }\n      },\n      render() {\n        return render(this) //这里绑定\n      }\n    }\n    createApp(App).mount('#app1')\n\n  \u003c/script\u003e\n\n\n  \u003c!-- 方式2 --\u003e\n  \u003cscript\u003e\n    const App2 = {\n      template: '#name2',\n      setup() {\n        const counter = ref(1)\n        return {\n          counter,\n          change: () =\u003e {\n            counter.value++\n          }\n        }\n      }\n    }\n    createApp(App2).mount('#app2')\n\n  \u003c/script\u003e\n\n\n  \u003c!-- 方式3 --\u003e\n  \u003cscript\u003e\n    const App3 = {\n      template: '\u003cdiv @click=\"change\"\u003e {{counter}}方式三 \u003c/div\u003e',\n      setup() {\n        const counter = ref(1)\n        return {\n          counter,\n          change: () =\u003e {\n            counter.value++\n          }\n        }\n      }\n    }\n    createApp(App3).mount('#app3')\n\n  \u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n\n#### Git 贡献提交规范\n- 参考 vue 规范 \n  - feat 增加新功能\n  - fix 修复问题/BUG\n  - style 代码风格相关无影响运行结果的\n  - perf 优化/性能提升\n  - refactor 重构\n  - revert 撤销修改\n  - test 测试相关\n  - docs 文档/注释\n  - chore 依赖更新/脚手架配置修改等\n  - workflow 工作流改进\n  - ci 持续集成\n  - types 类型定义文件更改\n  - wip 开发中\n#### 参与贡献\n\n1.  Fork 本仓库\n2.  新建 Feat_xxx 分支\n3.  提交代码\n4.  新建 Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaolonga%2Fmini-vue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaolonga%2Fmini-vue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaolonga%2Fmini-vue3/lists"}