记一次 Vue 调试 Element 组件 bug 经历

最近公司 iOS 项目不忙，我也就加入了一个前端 Vue 项目帮帮忙，顺便学习 js 和 Vue。

这里不得不说，Element 组件库相当好用，对于我这样刚接触前端的上手也很快，轻轻松松搭起一个漂亮界面。本以为是国外团队开发，后来到 Github 查源码，才发现是饿了么出品，也是蛮佩服。

Pagination 控件

bug 就出在一个 Pagination 分页控件，设置 current-page 后，current-change 事件会偶然实效，回调函数得不到执行。经多次调试，确认问题一定是出在 Element 的 Pagination 分页控件内部。

于是乎开始调试源码，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", 再执行更新

npm update element-ui

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

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

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

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

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

附带两个有意思的 npm 命令

列出所有可升级版本的 package

npm outdated

输出当前项目中所有安装的 package 及其结构

npm ls