vue 和其他JavaScript的流行库一样,都带有元编程的特征,是元编程的产物.
什么是元编程?
元编程简单来说,是指框架的作者使用一种编程语言固有的语言特性,创造出相对新的语言特性,使得最终使用者能够以新的语法和语义来构建他们的应用程序,从而在某些领域开发中获得更好的开发体验.
理解了 元编程,我们再来看vue 框架,可以发现它其实做的事情很简单.
从html的编写角度来看,就是在html 原先的语义,语法基础上,新增了 v-系列的语法,使我们可以 更方便的控制html 元素的展现.
在js 编写的角度来看,它帮我们完成了数据和视图层的绑定,做到了视图跟随数据的变化而变化,这使得我们在开发过程中可以不必关注这部分的实现,更好的去实现应用程序本身的业务逻辑.
从dom 操作方面来看,首先dom 操作是很耗性能的,我们原生开发的时候,有些时候对dom的操作是很不合理的,比如经常不会考虑把一些能够整合的dom 操作放在一起操作等等情况,vue 框架通过虚拟dom对照真实dom,通过算法比较那些是真正需要更新的dom元素,并且在更新时机上做了对应的处理,避免了一系列的无效dom消耗.
从跨平台方面来看,vue框架 通过用虚拟dom的vnode节点的概念来描述dom 元素,对渲染器的操作方法的自定义,使得框架具有了跨平台的特性.
从这些方面来看,vue框架 好像没什么可牛气的,就做了这些事情嘛,但其实不然,从框架角度看,vue就是一个框架,和其他的框架没啥区别,我们了解了解框架的使用方法,能写项目就得了,有必要去深入探讨框架的深入细节吗?
我个人觉得vue框架没什么了不起的,它做的事,react和其他框架也能做,且各有各的优缺点, 但是vue框架内部实现中的各种编程思想是熠熠生辉的,框架开发者在编写过程中做的各种取舍也是很值得我们这些普通开发者借鉴的.如果能够彻底理解透一套框架的实现细节,那么最次的,我们在使用其他框架的时候,可以更容易理解和上手.拔高一些,我们是不是可以在自己的项目中运用这些思想,让我们的项目结构更易拓展,更优秀.再过分一点,我们能不能用这些思想,自己也写一些类似的框架,不说尽善尽美,你下次去面试的时候,是不是更有吹牛逼的资格了呢,自己的能力是不是也提升了呢.
vue 框架在运行时和编译时的取舍
我们知道任何一门语言无非是编译时,运行时,运行时编译这几种形态,那么vue框架是采用的什么形态呢?
vue 框架采用的是运行+编译时.
在运行时和编译时的选择中,vue框架的编写者其实是进行了很多的思考和实验的,最终采用的是运行时编译的实现方式.但vue的运行时编译是做了优化了的,我们在template中编写的模版,实际上是在运行前,vue框架就会编译成render 函数的,这部分可以理解为编译时,只有我们在组件构造函数中template 属性中编写的模版,才会有运行时编译的过程.
vue 为什么选择运行时+编译时,我觉得是因为vue 框架本身是一套渐进式的框架,如果是纯编译时的,那么他的编译模块是没有办法单独抽离出来的,这就背离了它要做渐进式框架的初衷,因为这么做必然要把编译模版也加入他的核心库中,开发者才能正常的使用vue 框架.这里又引入了一个概念,渐进式框架,下面解释一下什么是渐进式框架.
渐进式框架
我理解的渐进式框架 是这样的,在框架的实现阶段,框架开发者就已经对框架内部的使用进行了模块化,分层化处理. 框架内部本身又提供了很多模块,模块类型分为核心模块和其他模块,其他模块和核心模块间是低耦合甚至是没有关联的. 我们在使用渐进式框架时,仅仅需要他的核心模块,那么就只引入他的核心模块就可以,其他模块的功能,我们可以用其他方式实现.也就是说,我们可以渐进式的引入这个框架,在使用框架方面有了很大的灵活性.因为实际的项目中,在固有项目中已经有了很多其他实现,vue框架的灵活性,就为我们接入vue框架提供了更好的方式.
下面是网络上广为流传的vue框架 渐进式的图片,辅助理解.
vue 框架的架构模式:MVVM
MVVM是Model-View-ViewModel的简称，是目前非常流行的架构模式;
通常情况下，我们也经常称Vue是一个MVVM的框架。
Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。
MVVM的理解其实网上有很多文章,可以自行查看.这里简单说一下,就是针对MVC 模式来说,MVVM,将MVC中的controller中视图和数据之间的交互做了深层次的绑定,让视图能够跟随model 的变化而变化,抽离controler 中这部分逻辑的处理化为VM,这样模式就变成了view,model,ViewModel 的组合.
vue 框架中通过对view层编译生成的虚拟dom ,渲染器,以及响应式系统的绑定,完成了类似这种模式的实现,具体细节会在后面介绍.
vue 框架的设计思路
vue 框架各个模块功能
vue 框架内部实际上分为了 响应式系统,渲染器,编译器,以及虚拟dom 这几个模块.
通过响应式系统来完成对数据依赖的劫持和触发逻辑.
通过渲染器 完成将虚拟dom 渲染为真实dom的逻辑.
通过编译器完成对vue 自定义语法的编译工作,编译器负责将template中的代码 编译成为render 函数.
通过响应式系统,编译器,渲染器的结合完成MVVM架构的实现.
通过虚拟dom 和 渲染器渲染方法自定义 完成对跨平台的实现.
通过对组件颗粒度的监听完成真实dom 的刷新.
响应式系统详解
--待完善
编译器详解
--待完善
渲染器详解
--待完善
vue diff算法详解
--待完善
vue 对页面刷新的颗粒度取舍
--待完善
vue 的组件化
--待完善
vue 如何将一个组件渲染到浏览器上
--待完善
vue 组件更新的过程
--待完善
vue 源码探究-从createApp 开始
--待完善
