引言
现在是2022年5月4日的最后几分钟,开始这个系列算是一种缘分,很早之前就准备开始写一个关于Vue的系列,但是因为种种原因,一再拖延。
本文作为Vue系列的第一篇,先不深入分析Vue的源码,讲一下做本系列的初心。到搜索引擎上,在百度上搜索Vue源码,不断攫取一定能找到优秀的分析Vue的源码,有分析Vue版本2的,也有分析Vue版本3的,紧跟潮流,分析Vue3的源码里有用到ts来编程的。相信大家只要耐下心来认真阅读都会有不少的收获。
之前自己阅读了部分Vue2的源码,也阅读了其他作者关于Vue源码的解析,后来霍春阳出了一本书《Vue.js设计与实现》目前也在读。初开始读Vue源码的时候抱着每段代码慢慢啃,遇到困难就跟着别的作者的思想慢慢理解Vue的实现过程,然后看了《Vue.js的设计与实现》。这个过程由浅入深。但是直到今天仍然有很多困惑着我的问题。一方面借助这个系列整理自己在阅读Vue源码中的一些见解,另一方面把这些问题抛出来,供大家一起讨论,一起成长。
本人对自己在该系列文章中的每句话负责,但是不一定是对的。工作过程中,在应用JS的时候,随着理解的加深,本人处于不断推翻和建立知识体系的过程。所以有错误的话大家多多提出,多多思考,一起头脑风暴。
我们就着“前人”的足迹,站在他们的肩膀上,学习过程会有比较轻松的体验,在此,感谢网络上那些默默分享自己知识的作者,感谢付出汗水撰写书籍的作者。期间我还会分享一些自己“执拗”的观点,之所以是执拗的,是因为之前在读Js相关书籍以及读Vue相关书籍的时候作者总有一些我不赞同的观点。在后面的文章中将会一一抛出,供大家讨论,一起成长。
本系列提供给有一定JS基础的小伙伴,希望大家在阅读本系列文章之前能够熟练掌握ES5以及ES6的作用域规则,JS的函数运行的出入栈规则。
期望
在使用JS的过程中经常遇到一些问题并沉浸其中,例如函数声明和函数表达式有什么区别?Vue为什么将这段代码和这段代码分开来写,好处是什么?为什么后来ES要引入const和let关键字?JS是基于对象,Java是面向对象,读Vue源码和Spring源码有什么方式上的差异呢?等等等等
平常自嘲这些问题是傻问题,工作中我们需要快速实现一个UI组件,关注界面的人对你使用let或者var或者const是无感的。但是在不断地探索这些傻问题的过程中,总会给自己的意外地惊喜,不断有拨开云雾见青天的感觉。在本系列中期望自己能够提出非常多的傻问题。
Vue是什么,大家众说纷纭,比较官方的说法是Vue是一套用于构建用户界面的渐进式框架。但是我更愿意称之为,一个数据结构。运行过程中会生成一个Vue对象数据结构,这个数据结构作为开发者和浏览器之间的中间层,为开发者提供操作浏览器的便利。
其实细细想来每一个框架都是一套封装了不同数据的数据结构。
Vue作为浏览器和开发者中间的中介,有什么好处呢?松绑浏览器的DOM/BOM API,站在开发者的角度,开发者与DOM/BOM API之间的耦合降低了,站在浏览器的角度,Vue和DOM/BOM API之间的关联是紧密的。
期望自己能够在系列末尾帮助大家一起实现一个类似Vue的数据结构。
问题
- 我在使用的是Vue2/Vue3,你讲的版本和我用的版本不一样。
一点代沟都没有。why?
第一本系列主要聚焦在如何手把手带你实现一个Vue,简单来讲,我们要做的是模仿Vue使用JS实现响应式系统,渲染器,编译器等,主要聚焦在应用JS上。所谓版本不同API不同,只不过是JS应用外观模式的时候对外的接口不同而已,只要实现了上面的功能,应用外观模式读者也可以自行封装API。
第二Vue2/Vue3都是使用JS写的,React也是使用JS写的,本系列文章使用方法论OOA+OOD+OOP结合Vue源码进行分析。会按着模型-->数据结构-->编程的路线来分析源码。读者可以试着用该方法去分析别的源码。不在乎分析目标是Vue还是React。
第三点比较深,可以忽略不看。 第三为什么说JS是基于对象的语言,为什么说Java是面向对象的语言(本人目前研究的语言只有这两个),从这个角度出发,以Object为起点,不深入物理层(也就是指V8源码和JVM源码),对比Java和JS运行时逻辑结构,发现先二者有异曲同工之妙。Java使用Object(Object对象)&Class(反射类类别的对象)的结合为Java提供服务,JS使用Object(Object对象)&Function(Function对象)为JS提供服务。