第12章 架构设计与项目结构
这篇文章带你从宏观的角度了解它内部的运行原理,以下是Vue
源码的目录结构,下图目录可能跟源码目录有点差距,但也是八九不离十。
12.1 目录结构
src/core
目录是Vue.js
的核心代码,这部分代码逻辑是与平台无关的,也就是说,它们可以在任何JavaScript环境下运行,比如浏览器、Node.js或者嵌入在原生应用中。
完整版:构建后的文件同时包含编译器和运行时;
编译器:负责将模板字符串编译成JavaScript渲染函数;
开发环境下使用未压缩的代码,生存环境下使用压缩后的代码。
12.2 架构设计
Vue.js
的整体结构,分为三个部分:核心代码(全局API、prototype、构造函数),跨平台相关(更多的是渲染相关的功能)和公用工具函数(这部分是一些辅助函数,不再单独介绍)
- 其中架构是分层的,最底层是一个普通的构造函数,最上层是一个入口,也就是将一个完整的构造函数导出给用户使用;
- 最顶层是入口,也可以叫做出口。对于构建工具和
Vue.js
的使用者来说,这是入口;对于Vue.js
自身来说,这是出口。
我们把上图”程序结构“ 用另外一种表现形式来展示,更清楚的了解它的架构设计,如下图所示:
不同平台有不同的人口,有一些特定于平台的代码会加载到这部分,而底层的核心代码是通用的,可以在任何平台下运行。这里以构建Web平台下运行的文件为例,如果我们构建的是完整版本,那么会选择 Web平台的人口文件开始构建,这个入口文件最终会导出一个vue构造函数。在导出之前,会向 Vue构造函数中添加一些方法,其流程是:先向vue
构造函数的prototype
属性上添加一些方法,然后向vue
构造函数自身添加一些全局API,接着将平台特有的代码导入进来,最后将编译器导入进来。最终将所有代码同vue
构造函数一起导出去。
第13章 实例方法与全局API的实现原理
上一章知道了Vue.js
内部的整体结构,知道了在导出vue
构造函数之前会添加一些属性和方法,这篇就来介绍vue
构造函数添加的实例方法和全局API。
13.1 实例方法
其中定义了vue
构造函数,然后分别调用了initMixin、stateMixin、 eventsMixin、lifecycleMixin和renderMixin
这5个函数,并将vue
构造函数当作参数传给了这5个函数。
13.2 全局API
想要了解更详细还得要看书,书中自有黄金屋,书中自有颜如玉