# vue源码分析

**Repository Path**: Someone_Like_You/vue

## Basic Information

- **Project Name**: vue源码分析
- **Description**: vue2.6源码分析
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-07-19
- **Last Updated**: 2021-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center"><a href="https://vuejs.org" target="_blank" rel="noopener noreferrer"><img width="100" src="https://vuejs.org/images/logo.png" alt="Vue logo"></a></p>

- src
    - compiler 编译相关(模板转换为render函数)
    - core vue核心库，和平台无关
    - platforms 平台相关代码
    - server SSR，服务端渲染
    - sfc .vue文件编译为js对象
    - shared 公共的代码

- example 可以体验vue的使用方式



## vue源码中使用flow进行类型检查

## vue源码使用Rollup进行打包，比webpack更轻量，不会生成冗余代码(webpack把所有文件当做模块，但是Rollup只处理js文件，更适合在vuejs这样的库中使用)

## 在package.json中的scripts中，为dev添加--sourcemap方便调试


### vue打包构建的不同版本
- `UMD`: vue.js    vue.runtime.js   vue.min.js   vue.runtime.min.js
- `CommonJS`：vue.common.js   vue.runtime.coommon.js
- `ES Module`：vue.esm.js   vue.runtime.esm.js

- 术语：
    - `完整版：同时包含`编译器`和`运行时`的版本
    - `编译器`：用来将模板字符串编译为js渲染函数的代码，体积大，效率低
    - `运行时`：用来创建Vue实例、渲染并处理虚拟DOM等的代码，体积小、效率高，基本上就是除去编译器的代码(使用的是render来渲染，不使用template)
    - `UMD`: UMD版本通用的模块版本，支持多种模块方式，vue.js默认文件就是运行时+编译器的UMD版本
    - `CommonJS(cjs)`：CommonJS版本用来配合老的打包工具，如Browserify、webpack1
    - `ES Module`：从2.6开始Vue会提供两个ES Module构建文件，为现代打包工具提供的版本
      - ESM格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行tree-shaking，并将用不到的代码排除最终的包
      - [ES6模块与CommonJS模块的差异](https://es6.ruanyifeng.com/#docs/module-loader#ES6-%25E6%25A8%25A1%25E5%259D%2597%25E4%25B8%258E-CommonJS-%25E6%25A8%25A1%25E5%259D%2597%25E7%259A%2584%25E5%25B7%25AE%25E5%25BC%2582)


## vue-cli使用就是运行时版本 + ESM，里面的单文件组件也是会转为render函数