Vue如何调试Element组件源码 ​

Element 的源码在 node_modules 中 element-ui 文件夹中。起初修改 node_modules/element-ui/packages/pagination/src/pagination.js，无效。搜索一番得知，webpack 引入的是 lib 目录下的编译打包后的 js。遂修改 node_modules/element-ui/lib/pagination.js，还是无效，Excuse me？后经过调试发现element相关代码都整合进了 lib 下的一个 element-ui.common.js 文件。修改这个文件中的 Pagination 部分即可正常调试了。

调试过程就不细展开了，只是确认源码确实存在 bug 而已，可以自行修复。这时突然想到，Element 可能不是最新，也许可以升级一下看看？抱着试试看的心情，买了一个疗程，哦不对，打开本项目的 package.json，发现 "element-ui": "2.3.3"，为什么是写死的2.3.3。。。。。。一查，最新的版本都到2.4.1了，而就在我 debug 过程中，2.4.2也出了。。。

element 版本改为"element-ui": "^2.4.2", 再执行更新

那个 bug 果然已经得到修复。想想要是我早一点升级 element-ui，也许就不会耽误这几个小时，但是，也不会学到后面的调试方法，不会接触到 Element 源码。对比一下，还是利大于弊的。

通过这次调试 bug，了解了组件源码是如何执行的，了解到了.sync 修饰符和双向绑定

this.$emit('update:title', newTitle)

最后，总结这2个多星期的前端学习，就3点：

1. 做项目，可以接触很多前端技术点和框架,加快新技术上手速度
2. 看官方文档，可以知道语言或框架的规范用法
3. 看源码，能加深对技术和原理的理解。