{"id":19892325,"url":"https://github.com/jp-liu/jp-mini-vue","last_synced_at":"2025-05-02T18:31:42.812Z","repository":{"id":113540162,"uuid":"434882980","full_name":"jp-liu/jp-mini-vue","owner":"jp-liu","description":"手写实现 mini 版的 Vue3，如果觉得不错还请star支持一下","archived":false,"fork":false,"pushed_at":"2022-05-29T14:39:07.000Z","size":517,"stargazers_count":78,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-07T04:52:06.303Z","etag":null,"topics":["typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jp-liu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-04T11:29:38.000Z","updated_at":"2025-01-09T21:43:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"9dc17092-d4e4-4f50-bfc0-3cfa7d3f8a24","html_url":"https://github.com/jp-liu/jp-mini-vue","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Fjp-mini-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Fjp-mini-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Fjp-mini-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Fjp-mini-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jp-liu","download_url":"https://codeload.github.com/jp-liu/jp-mini-vue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252088560,"owners_count":21692817,"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":["typescript","vue","vue3"],"created_at":"2024-11-12T18:23:10.467Z","updated_at":"2025-05-02T18:31:42.806Z","avatar_url":"https://github.com/jp-liu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jp-mini-vue\n\n\u003e 实现一个 `mini-vue` 帮助自己理解 `vue3`,纯粹自己学习,希望大家也可以学到一些东西, 欢迎指正哦~\n\n看看 `vue` 的架构实现 Package Dependencies\n\n```template\n                                    +---------------------+\n                                    |                     |\n                                    |  @vue/compiler-sfc  |\n                                    |                     |\n                                    +-----+--------+------+\n                                          |        |\n                                          v        v\n                      +---------------------+    +----------------------+\n                      |                     |    |                      |\n        +------------\u003e|  @vue/compiler-dom  +---\u003e|  @vue/compiler-core  |\n        |             |                     |    |                      |\n   +----+----+        +---------------------+    +----------------------+\n   |         |\n   |   vue   |\n   |         |\n   +----+----+        +---------------------+    +----------------------+    +-------------------+\n        |             |                     |    |                      |    |                   |\n        +------------\u003e|  @vue/runtime-dom   +---\u003e|  @vue/runtime-core   +---\u003e|  @vue/reactivity  |\n                      |                     |    |                      |    |                   |\n                      +---------------------+    +----------------------+    +-------------------+\n```\n\n目前简版实现\n\n```\n                      +---------------------+\n                      |                     |\n        +------------\u003e|  ./src/compiler     +  自己目前仅实现解析简单部分\n        |             |                     |\n   +----+----+        +---------------------+\n   |   入口   |\n  ./src/index.ts\n   |         |\n   +----+----+        +---------------------+    +----------------------+    +-------------------+\n        |             |                     |    |                      |    |                   |\n        +------------\u003e| ./src/runtime-dom   +---\u003e| ./src/runtime-core   +---\u003e| ./src/reactivity  |\n                      |                     |    |                      |    |                   |\n                      +---------------------+    +----------------------+    +-------------------+\n```\n\n目前基本实现的模块有\n\n1. 响应式系统: **[reactivity](./src/reactivey/reactive.ts)**\n\n   对应笔记: [响应式系统](https://github.com/jp-liu/study-every-day/blob/main/src/vue/mini-vue/reactivity/index.md)\n\n2. 核心运行时: **[runtime-core](./src/runtime-core/index.ts)**\n   对应笔记: [核心运行时](https://github.com/jp-liu/study-every-day/blob/main/src/vue/mini-vue/runtime-core/index.md)\n\n3. 浏览器 Dom 运行时: **[runtime-dom](./src/runtime-dom/index.ts)**\n\n   这个是提供了浏览器的原生`API`\n\n   ```ts\n   import { createRenderer } from '../runtime-core'\n   import { isOn } from '../shared'\n\n   function createElement(type: string) {\n     return document.createElement(type)\n   }\n\n   function createTextNode(text: string) {\n     return document.createTextNode(text)\n   }\n\n   function setElementText(el: HTMLElement, text) {\n     el.textContent = text\n   }\n\n   function patchProp(el: HTMLElement, key: string, prevProp, nextProp) {\n     // 2.1 事件\n     if (isOn(key)) {\n       const event = key.slice(2).toLowerCase()\n       el.addEventListener(event, nextProp)\n     }\n     // 2.2 属性\n     else {\n       if (!nextProp)\n         el.removeAttribute(key)\n   \n       else\n         el.setAttribute(key, nextProp)\n   \n     }\n   }\n\n   function insert(\n     child: HTMLElement,\n     parent: HTMLElement,\n     anchor: Node | null = null\n   ) {\n     parent.insertBefore(child, anchor)\n   }\n\n   function remove(el: HTMLElement) {\n     const parent = el.parentNode\n     if (parent)\n       parent.removeChild(el)\n   \n   }\n\n   const renderer: any = createRenderer({\n     createElement,\n     setElementText,\n     createTextNode,\n     patchProp,\n     insert,\n     remove\n   })\n\n   export * from '../runtime-core'\n   // 暴露 `DOM` 的操作 `API` 的渲染器\n   export function createApp(...args) {\n     return renderer.createApp(...args)\n   }\n   ```\n\n本版本的实现,目前就包括以上三个部分,项目打包入口\n\n**[入口文件](./src/index.ts)**\n\n后续方向,添加 `TS` 类型系统\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjp-liu%2Fjp-mini-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjp-liu%2Fjp-mini-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjp-liu%2Fjp-mini-vue/lists"}