前言：
记录调试vue源码的方法，理解vue的核心：系统性的理解一个好的框架的产生。我自己的学习方法是，最先概括性的全局了解一下，然后针对各个知识点搜集知识逐个攻破，得到正反馈。
看完这篇笔记可以让你清楚的知道怎么调试vue 然后收藏它 当你有时间 打开vue源码开始调试它。
准备：
1.vue源码：2.6.14 github拉取源码
2.使用Rollup 打包工具 比webpack更轻便 rollup只处理js文件 在这些库中更方便 vue就是用的rollup
3.给package.json 的dev命令设置 sourcemap 方便调试源码 查看报错信息
目标：
了解怎么看源码；学会查找入口文件；熟悉vue的入口文件；vue的实例成员；vue的静态成员；
这篇文章会涉及到许多知识：我自己的建议是结合着实例去掌握自己不会不懂的知识。再针对不懂的知识进行逐个击破：
阅读源码的时候，或者是做项目的时候，会遇到很多自己不懂的知识点 或者不熟悉的知识点，或者出现问题。不过不要怕，很多问题都是已经遇到过得，有了答案，很多知识点都是前人已经总结好的，我们只需要迈出去那一小步，去看去学习去总结。一个一个的攻克会给你带来成就感的。
1阅读源码前准备
这个小标题下涉及到的知识 以及可以延伸的知识点，感兴趣的可以在主任务外自由开发分支：
1.打包工具的区别：Rollup、Webpack、Gulp、Grunt
2.打包后不同文件夹后缀的含义：xxx.js xxx.min.js xxx.runtime.js xxx.js.map
3.sourcemap的含义；runtime的含义 对应第二个知识点
4.npm script 脚本传参的含义：–sourcemap
下载好源码后：
1.安装依赖
npm i
2.设置 sourcemap
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
3.启动项目：
npm run dev
可以看到这个打包的js platforms\web\entry-runtime-with-compiler.js
平台相关目录下的web平台下的entry-runtime-with-compiler版本打包的jis runtime 是运行时版本（稍后解释）
4.调试案例：
随便找个案例：
examples/grid/index.html 将第八行的vue.min.js 改为vue.js 方便开发环境查看控制台的警告
5.1运行 npm run build
把vue的不同版本js 都打包出来
这里的vue.js.map 就是之前我们 npm dev 的时候 在 npm script里 添加了–sourcemap参数 是源文件的信息文件记录
dist文件里的readme.md 对vue的不同版本解释
Explanation of Build Files 编译文件说明
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
Terms
- Full: builds that contain both the compiler and the runtime. （包含编译器和运行时的构建。）
- 完整版 同时包含编译器和运行时的版本
- Compiler: code that is responsible for compiling template strings into JavaScript render functions.（负责将模板字符串编译成JavaScript渲染函数的代码。）
- 编译器 用来将模板字符串编译成JavaScript渲染函数的代码 体积大 体积大 效率低（就是我们new Vue时 传递的template 把这个转换成render函数 我们可以传递template参数 和 render函数 ）
- Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.（负责创建Vue实例、渲染和修补虚拟DOM等的代码。基本上除了编译器。）
- 运行时 体积小 效率高 去除了编译器的代码
- UMD: UMD builds can be used directly in the browser via a
<script>tag. The default file from Unpkg CDN at https://unpkg.com/vue is the Runtime + Compiler UMD build (vue.js).（UMD构建可以通过
暂无评论内容