vue初始化——源码简读

源码目录结构

• 这里主要分析src目录下文件的主要功能
  • compiler：与编译相关
  • core：Vue核心代码
    • components：keep-alive相关代码
    • global-api：Vue静态成员相关初始化
    • instance：Vue实例相关初始化
    • observer：响应式相关代码
    • vdom：虚拟dom相关代码
  • platform：平台相关代码
  • server：VueSSR服务端渲染相关代码

Vue的构建版本

• 在执行npm run build时，会生成vue的不同版本，下面我们具体看一下各版本区别

版本	UMD	CommonJS	ES Module
完整版	vue.js	vue.common.js	vue.esm.js
只包含运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
完整版 (生产环境)	Vue.min.js
只包含运行时版 (生产环境)	Vue.runtime.min.js

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大，效率低。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。体积小，效率高，基本上就是除去编译器的其它一切。
• UMD: 通用的模块版本，支持多种模块方式。UMD 版本可以通过 <script> 标签直接用在浏览器中
• CommonJS(cjs): CommonJS配合老的打包工具，比如Browserify或Webpack1
• ES Modules：从2.6开始Vue会提供两个ES Modules（ESM）构建文件，为现代打包工具提供的版本。
• ESM格式被设计为可以被静态分析，所以打包工具利用这一点可以进行TreeShaking，并将用不到的代码排除最终的包

完整版与运行时版本的区别

• 完整版：即需要将template转为render函数，创建Vue实例，渲染并处理DOM等代码

<script src="../../dist/vue.min.js">