vue2.x源码解析二——目录

Vue
因为版本的不同,目录可能会有所区别

1.目录

    |— dist     #打包之后文件所在位置

    |— examples     #demo示例

    |— flow     #因为Vue使用了Flow来进行静态类型检查,这里定义了声明了一些静态类型

    |— packages    #vue还可以分别生成其它的npm包

    |— scripts    #打包相关的配置文件,里面有build.js,其中最重要的是config.js。主要是根据不同的入口,打包为不同的文件。

    |— src #主要源码所在位置

        |— compiler #模板解析的相关文件(编译相关)

            |—codegen #根据ast生成render函数

            |—directives #通用生成render函数之前需要处理的指令

            |—parser #模板解析

        |— core #核心代码

            |— components #全局的组件,这里只有keep-alive

            |— global-api #全局方法,也就是添加在Vue对象上的方法,比如Vue.use,Vue.extend,,Vue.mixin等

            |— instance #实例相关内容,包括实例方法,生命周期,事件等

            |— observer #双向数据绑定相关文件

            |— util #工具方法

            |— vdom #虚拟dom相关

        |— platforms #平台相关的内容(不同平台的支持)

            |— web #web端独有文件

                |— compiler #编译阶段需要处理的指令和模块

                |— runtime #运行阶段需要处理的组件、指令和模块

                |— server #服务端渲染相关

                |— util #工具库

            |— weex #weex端独有文件

        |— server #服务端渲染相关(服务端渲染)

        |— sfc  #.vue 文件解析

        |— shared #共享的工具方法

    |— test #测试用例

2.主要目录–src

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

2.1 compiler- - -编译相关

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。
编译的工作可以在构建时做(借助 webpack、vue-loader 等辅助插件);也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者——离线编译。

2.2 core- - -核心代码

core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。

2.3 platforms- - -不同平台的支持

Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 natvie 客户端上。platform 是 Vue.js 的入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上的 Vue.js。

2.4 server- - -服务端渲染

Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是跑在服务端的 Node.js,不要和跑在浏览器端的 Vue.js 混为一谈。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记”混合”为客户端上完全交互的应用程序。

2.5 sfc- - -.vue 文件解析

通常我们开发 Vue.js 都会借助 webpack 构建, 然后通过 .vue 单文件来编写组件。

这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

2.6 shared- - -共享代码

Vue.js 会定义一些工具方法,这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

推荐:
https://ustbhuangyi.github.io/vue-analysis/prepare/directory.html
https://github.com/liutao/vue2.0-source

猜你喜欢

转载自blog.csdn.net/haochangdi123/article/details/80864790