{"id":13561899,"url":"https://github.com/NLRX-WJC/Learn-Vue-Source-Code","last_synced_at":"2025-04-03T17:32:01.482Z","repository":{"id":39178984,"uuid":"499002004","full_name":"NLRX-WJC/Learn-Vue-Source-Code","owner":"NLRX-WJC","description":"在线阅读：https://nlrx-wjc.github.io/Learn-Vue-Source-Code/","archived":false,"fork":false,"pushed_at":"2022-08-25T06:34:33.000Z","size":4829,"stargazers_count":152,"open_issues_count":10,"forks_count":50,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T02:27:25.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NLRX-WJC.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}},"created_at":"2022-06-02T05:23:11.000Z","updated_at":"2025-02-17T05:57:34.000Z","dependencies_parsed_at":"2022-07-12T17:48:24.328Z","dependency_job_id":null,"html_url":"https://github.com/NLRX-WJC/Learn-Vue-Source-Code","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/NLRX-WJC%2FLearn-Vue-Source-Code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NLRX-WJC%2FLearn-Vue-Source-Code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NLRX-WJC%2FLearn-Vue-Source-Code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NLRX-WJC%2FLearn-Vue-Source-Code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NLRX-WJC","download_url":"https://codeload.github.com/NLRX-WJC/Learn-Vue-Source-Code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247047113,"owners_count":20874771,"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-08-01T13:01:02.383Z","updated_at":"2025-04-03T17:31:56.469Z","avatar_url":"https://github.com/NLRX-WJC.png","language":null,"funding_links":[],"categories":["miscellaneous","目录"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://nlrx-wjc.github.io/Learn-Vue-Source-Code/\" target=\"_blank\"\u003e\n      \u003cimg src=\"./logo.jpg\"/\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/NLRX-WJC/Learn-Vue-Source-Code\"\u003e\n  \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/NLRX-WJC/Learn-Vue-Source-Code\"\u003e\n  \u003cimg alt=\"version\" src=https://img.shields.io/badge/version-v1.0.0-orange\"\u003e\n\u003c/p\u003e\n\n# 1. 前言\n\n博主作为一名前端开发，日常开发的技术栈是`Vue`，并且用`Vue`开发也有一年多了，对其用法也较为熟练了，但是对各种用法和各种`api`使用都是只知其然而不知其所以然，因此，有时候在排查`bug`的时候就会有点捉襟见肘。鉴于此，索性就从`github`上`clone`下来一份`Vue`源码来学习学习，本系列博文将用来记录博主对`Vue`源码的整个学习过程，以及自己对源码的一些理解。一方面开阔自己的知识视野，另一方面也希望这些文字能够带给他人些许帮助。\n\n# 2. 整体规划\n\n## 2.1 源码学习目录\n\n本项目所分析的`Vue.js`源码版本是目前最新的版本，版本号为 v2.6.11 ，其代码目录如下：\n\n```bash\n├─dist                   # 项目构建后的文件\n├─scripts                # 与项目构建相关的脚本和配置文件 \n├─flow                   # flow的类型声明文件\n├─src                    # 项目源代码\n│    ├─complier          # 与模板编译相关的代码\n│    ├─core              # 通用的、与运行平台无关的运行时代码\n│    │  ├─observe        # 实现变化侦测的代码\n│    │  ├─vdom           # 实现virtual dom的代码\n│    │  ├─instance       # Vue.js实例的构造函数和原型方法\n│    │  ├─global-api     # 全局api的代码\n│    │  └─components     # 内置组件的代码\n│    ├─server            # 与服务端渲染相关的代码\n│    ├─platforms         # 特定运行平台的代码，如weex \n│    ├─sfc               # 单文件组件的解析代码\n│    └─shared            # 项目公用的工具代码\n└─test                   # 项目测试代码\n```\n\n从上面的目录结构可以看出，`Vue`的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。\n\n由于我们只是学习`Vue.js`的设计思想以及代码实现的相关逻辑，所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现，仅关注它的核心代码，即`src/core`和`src/complier`这两个目录下的代码，并且接下来后续的学习也都是只在这两个目录的范围之内。\n\n## 2.2 学习路线\n\n在学习之前，我们需要先制定一个学习路线，循序渐进的学习，这样不至于一头雾水，无处下手。后面的学习路线如下：\n\n1. 变化侦测篇\n\n   学习`Vue`中如何实现数据的响应式系统，从而达到数据驱动视图。\n\n2. 虚拟DOM篇\n\n   学习什么是虚拟DOM，以及`Vue`中的`DOM-Diff`原理\n\n3. 模板编译篇\n\n   学习`Vue`内部是怎么把`template`模板编译成虚拟`DOM`,从而渲染出真实`DOM`\n\n4. 实例方法篇\n\n   学习`Vue`中所有实例方法(即所有以`$`开头的方法)的实现原理\n\n5. 全局API篇\n\n   学习`Vue`中所有全局`API`的实现原理\n\n6. 生命周期篇\n\n   学习`Vue`中组件的生命周期实现原理\n\n7. 指令篇\n\n   学习`Vue`中所有指令的实现原理\n\n8. 过滤器篇\n\n   学习`Vue`中所有过滤器的实现原理\n\n9. 内置组件篇\n\n   学习`Vue`中所有内置组件的实现原理\n\n## 2.3 学习输出\n\n通过一步步的学习，博主打算在学习过程中输出以下三个东西：\n\n- 以文字形式记录学习过程，在线阅读地址：https://nlrx-wjc.github.io/Learn-Vue-Source-Code/\n- 为`clone`下来的`Vue`源码添加尽可能详细的注释；\n- 做一份思维导图，以宏观角度总览源码；\n\n# 3. 那就开始吧\n\n写作是一件十分枯燥的事情，如果我写的这些文字对你有些许帮助的话，还请赏个star哈~~\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNLRX-WJC%2FLearn-Vue-Source-Code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNLRX-WJC%2FLearn-Vue-Source-Code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNLRX-WJC%2FLearn-Vue-Source-Code/lists"}