>[success] # Vue2.x 源码基本分析 1. **完整版**：同时包含**编译器和运行时**的版本。Vue中的**Template**需要**编译器将其转换为render函数**变为**虚拟DOM**才能使用，而运行时（没有编译器）直接编译template会报错并提示使用完整版进行编译 2. **编译器**：用来将**模板字符串**编译成为 **JavaScript 渲染函数的代码，体积大、效率低**。 3. 运行时：用来创建 **Vue 实例**、渲染并处理**虚拟 DOM** 等的代码，体积小、效率高。基本上就是除去编译器的代码。即不包含编译器，**不包含编译器**会少三千多行代码, **体积要小大约 30%** 4. **UMD**：UMD 版本**通用的模块版本**，支持多种模块方式（AMD\直接挂载到浏览器对象中\CommonJS）。 vue.js 默认文件就是**运行时 + 编译器的UMD 版本** 5. **CommonJS(cjs)**：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。 6. **ES Module**：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的版本。ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。 >[danger] ##### 通过构建工具打包 1. 基于 **Vue-CLI** 创建的项目默认为**运行时版本且使用ESM构建文件** 即 **vue.runtime.esm.js** ，可以在命令中端输入**vue inspect > output.js** 可以查看webpack的配置, 并将配置文件内容其输出到output.js文件 2. webpack打包时候使用**vue-loader**，在打包时候会将`.vue`文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，并且将**template转换为render函数**,`*.vue `文件中的模板是在构建时预编译的，最终打包后的结果**不需要编译器(都已经在编译期间转换了)，因此只需要运行环境** * Runtime + Compiler vs. Runtime-only ~~~ // Compiler // 需要编译器（即vue完整版 或使用打包工具），把 template 转换成 render 函数 ， // const vm = new Vue({ // el: '#app', // template: '<h1>{{ msg }}</h1>', // data: { // msg: 'Hello Vue' // } // }) // Runtime // 不需要编译器 ，因为template =》render 函数变为js const vm = new Vue({ el: '#app', render (h) { return h('h1', this.msg) }, data: { msg: 'Hello Vue' } }) ~~~ >[info] ## Vue 常见名词解释 常说`数据响应式`、`双向绑定`、`数据驱动` 这三个名词的解释 1. **数据响应式**,数据模型仅仅是普通的 JS 对象，当修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率 2. **双向绑定**,数据改变，视图改变；视图改变，数据也随之改变,可以使用 v-model 在表单元素上创建双向数据绑定 3. **数据驱动**是 Vue 最独特的特性之一 MVVM框架优势,开发过程中仅需关注数据本身，不需要关心数据如何渲染到视图 >[danger] ##### Vue数据响应的核心原理 1. Vue2.x 系列是如何做到当修改数据时候视图会进行更新？ * 答：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，**Vue 将遍历此对象所有的 property**，并使用Object.defineProperty 把这些 property **全部转为 getter/setter**。Object.defineProperty 是 **ES5 中一个无法shim(无法降级处理) 的特性**，这也就是 **Vue 不支持 IE8** 以及更低版本浏览器的原因。 [官网解释链接](https://cn.vuejs.org/v2/guide/reactivity.html)