Vue 源码阅读引言

引言

现在是2022年5月4日的最后几分钟，开始这个系列算是一种缘分，很早之前就准备开始写一个关于Vue的系列，但是因为种种原因，一再拖延。

本文作为Vue系列的第一篇，记录一下开启这个系列的种种心路。

在百度上搜索Vue源码，不断攫取，一定能找到优秀的源码分析文章。无论是Vue2/Vue3，相信大家只要耐心阅读都会有很大的收获。

每个人认知不同，对知识的接受能力不同，最后也会导致收获的不同。总之自己悟到的才是自己的。

本人阅读了部分Vue2的源码，后来读完了霍春阳的《Vue.js设计与实现》。在不断学习的过程中对Vue的理解由浅入深。不过直到今天仍然有很多困惑我的问题。

写这个系列的文章一方面整理自己分析源码过程中的收获，另一方面抛出问题，供大家一起讨论，一起成长。

在应用JS的过程中，随着对JS理解的加深，本人不断推翻旧知识体系并建立新的知识体系。闻道有先后，术业有专攻。希望我们每个人都能成功地站在巨人的肩膀上体验风景。

感谢网络上那些默默分享自己知识的作者，感谢付出汗水撰写书籍的作者，感谢一路走来为我提供帮助的朋友、老师。

本系列提供给有一定JS基础的小伙伴，希望大家在阅读本系列文章之前能够熟练掌握ES5以及ES6的作用域规则，JS的函数运行的出入栈规则。

期望

在使用JS的过程中经常遇到一些问题，例如函数声明和函数表达式有什么区别？Vue为什么将这段代码和这段代码分开来写，好处是什么？为什么后来ES要引入const和let关键字？JS是基于对象，Java是面向对象，读Vue源码和Spring源码有什么方式上的差异呢？等等等等

平常自嘲说这些问题是傻问题。工作中我们需要快速实现一个UI组件，关注界面的人对工程师使用let或者var或者const是无感的。但是在不断地探索这些傻问题的过程中，总会给自己的意外地惊喜，不断有拨开云雾见青天的感觉。

撇开大众对Vue的定义–一套用于构建用户界面的渐进式框架。但是我更愿意称之为–一套数据结构。

事实上每一个框架都是一套封装了不同数据的数据结构。

对了，接下来在讨论问题的过程中，我会经常说站在的角度*，因为很多属于都有其广义和狭义的概念。

比如：Vue作为浏览器和开发者中间的中介，有什么好处呢？

这样回答也许是不错的：解耦浏览器的DOM/BOM API。

但是站在浏览器的角度，Vue和DOM/BOM API之间的关联是紧密的。不过站在开发者的角度，开发者与DOM/BOM API之间的耦合降低了。

最后期望自己能够在系列末尾帮助大家一起实现一个类似Vue的数据结构。

读者可能存在问题

• 我在使用Vue2，但是文章中将的是Vue3会有影响吗？

  答案是没有。

  本系列主要聚焦在如何手把手带你实现一个Vue，简单来讲，我们要做的是使用JS实现响应式系统，渲染器，编译器等，主要聚焦在应用JS上。Vue2和Vue3提供不同的API，只不过是JS应用外观模式的时候对外的接口不同而已。

• 我在使用react，本系列讲的是Vue，对我有帮助吗？

  答案是有帮助。

  Vue2/Vue3都是使用JS写的，React也是使用JS写的，本系列文章使用方法论OOA+OOD+OOP分析JS框架。计划按着模型–>数据结构–>编程的路线来剖析。这套思想路线可以用以分析所有的JS框架。

傻问题记录

• JS为什么是基于对象的语言？Java为什么是面向对象的语言？

  这个问题的本质是：各自解释Java和JS的封装、继承、多态。

  如果真实掌握了封装、继承、多态的概念，会发现JS不可能有严格意义的多态。

  鉴于篇幅原因，先到这里吧。