猿创征文 | 《深入浅出Vue.js》打卡Day5

目录

第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

想要了解更详细还得要看书，书中自有黄金屋，书中自有颜如玉