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

本文链接：https://blog.csdn.net/qq_48701993/article/details/126779197

第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构造函数一起导出去。