{"id":19750506,"url":"https://github.com/57code/mini-vue","last_synced_at":"2025-11-23T09:03:14.920Z","repository":{"id":97536888,"uuid":"366890924","full_name":"57code/mini-vue","owner":"57code","description":null,"archived":false,"fork":false,"pushed_at":"2022-03-23T01:35:32.000Z","size":132,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-10T21:27:34.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/57code.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-05-13T00:40:49.000Z","updated_at":"2023-11-13T01:29:13.000Z","dependencies_parsed_at":"2023-03-06T15:15:46.930Z","dependency_job_id":null,"html_url":"https://github.com/57code/mini-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/57code%2Fmini-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/57code%2Fmini-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/57code%2Fmini-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/57code%2Fmini-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/57code","download_url":"https://codeload.github.com/57code/mini-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241080435,"owners_count":19906294,"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":[],"created_at":"2024-11-12T02:35:39.989Z","updated_at":"2025-11-23T09:03:14.840Z","avatar_url":"https://github.com/57code.png","language":"HTML","readme":"# mini-vue\n小羊们好，这是村长的私教课程`Vue全家桶原理及手写`产出的代码，想要深入学习Vue全家桶原理的小伙伴可以加我vx：`kkb_cunzhang`。\n\n![](./src/assets/profile.png)\n## Vue设计思路\n前面我们通读了Vue3源码，但是仅仅读一遍是远远不够的。本模块我们想要手写自己的Vue，要知道看明白和做出来完全是两回事。只有理解并复写出来才能做到融会贯通！我们开写之前首先要琢磨一下Vue3设计理念，这样写的时候才能更有思路：\n- 声明式 declarative\n- 数据驱动data-driven\n- 渐进式progressive\n\n\n\n## Vue要解决哪些问题\n\n那么我们首先想一下Vue到底想要解决什么问题？\n\n- 易用、灵活和高效\n- 提高复用性、可维护性\n- 可扩展、跨平台\n\n\n\n## 易用、灵活和高效\n\n在Vue/React之前处于统治性地位的前端库是jQuery，它帮助我们解决了兼容性问题，可以非常方便的写出兼容性很好的代码，但是我们大量工作都花在dom操作上，据说至少达到工作量70%以上。有过体验的小伙伴就会明白，Vue在这方面可以拯救我们于水火之中，我们很少会编写dom操作代码，甚至新一代前端程序员很多都不会写原生dom代码。\n\nVue是怎么做到这一点的哪？首先是**`声明式地描述UI`**：\n\n```Vue\n\u003cdiv id=\"d1\" :title=\"title\" @click=\"handler\"\u003e{{text}}\u003c/div\u003e\n```\n\n上面这段代码起到了如下作用：\n\n- 设置div#d1的title属性\n- 添加了一个点击事件\n- 设置了#d1的textContent\n\n如果使用jQuery，我们在得到数据之后，就需要做dom操作完成这三件事。同时我们需要关心数据可能发生变化，变了之后还要再次执行刚才的三个操作。而在Vue中，这些发生在后台，数据变化有`响应式`，视图更新会自动进行。我们只需要描述一次视图，管理好我们的数据即可，这就是`数据驱动`。\n\n所以，如果我们要实现自己的`mini-vue`，就要实现以下几点：\n\n- 声明式描述UI\n- 数据响应式\n- 自动更新视图\n\n在Vue中编译器模块（compiler-xxx）、响应式模块（reactivity）、运行时模块（runtime-xxx）实现了上面的功能需求。编译器模块比较复杂，且不是mvp版本中必备的模块，所以我们会暂时略过。\n\n\n\n## 提高复用性、可维护性\n\n我以前编写的jQuery代码通常面相过程，拆分复用逻辑变得困难。在Vue中，有个先天优势就是“组件”，通过组件可以隔离出独立的视图和业务逻辑，这就提高了代码复用性、可维护性。\n\n另外，Vue还提供了`mixin`、`Composition API`这样的逻辑复用机制，使我们从一开始就能很容易的编写出高复用性代码。\n\n所以，如果我们想要提升我们的`mini-vue`，就要实现以下几点：\n\n- 实现组件机制\n- 实现mixin机制或者Composition API\n\n当然，既然是改善，这部分我们就作为2.0目标😸\n\n\n\n## 可扩展、跨平台\n\nVue3中提出一个新概念叫做“`渲染器`”，对应的API叫做“`custom renderer`”。它的主要作用就是给第三方开发者提供不同平台上扩展Vue的能力。Vue作为Web框架自带了Dom平台实现，也就是大家在源码中看到的`runtime-dom`模块。\n\n如果简单理解“渲染器”就是“一台能够将组件转换为真实DOM的机器”，它内部经历了如下过程：\n\n`组件` =\u003e `虚拟DOM` =\u003e `渲染器renderer` =\u003e `真实DOM`\n\n所以，如果我们想要使我们`mini-vue`跨平台，就需要实现一个`renderer`。\n\n\n\n## 思路\n\nmini-vue v0.1应该是最小MVP，能按照Vue3相似API显示传入根组件数据并显示内容即可，所以一开始，不考虑虚拟dom，不考虑模板，不考虑更新：\n\n- createApp()创建App实例，提供mount()做初始化\n- 提供render函数描述视图，直接做dom操作\n\n\n\nmini-vue v0.2引入渲染器，能够将dom操作从核心代码中抽离\n\n- createRenderer创建Renderer实例\n- 提供createApp方法\n- 提供render方法\n\n\n\nmini-vue v0.3引入更新机制，能够实现数据响应式，能够将组件更新函数和数据建立关联\n\n- 提供reactive()实现数据的响应式\n- 提供ReactiveEffect类建立依赖关系\n\n\n\nmini-vue v0.4引入虚拟dom，能够创建vnode，转换vnode为dom\n\n- 提供createVnode方法\n- 提供patch方法\n\n\n\n## 模块结构\n\n- 主模块-minivue，对外暴露公共API\n- 浏览器运行时模块-runtime-dom，实现各种dom操作\n- 通用运行时模块-runtime-core，实现渲染器\n- 响应式模块-reactivity，实现响应式\n\n\n\n## 后续\n\n- 引入异步更新机制\n- 引入组件机制\n- 等等","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F57code%2Fmini-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F57code%2Fmini-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F57code%2Fmini-vue/lists"}