最近公司 iOS 項(xiàng)目不忙，我也就加入了一個前端 Vue 項(xiàng)目幫幫忙，順便學(xué)習(xí) js 和 Vue。
這里不得不說，Element 組件庫相當(dāng)好用，對于我這樣剛接觸前端的上手也很快，輕輕松松搭起一個漂亮界面。本以為是國外團(tuán)隊(duì)開發(fā)，后來到 Github 查源碼，才發(fā)現(xiàn)是餓了么出品，也是蠻佩服。
bug 就出在一個 Pagination 分頁控件，設(shè)置 current-page 后，current-change 事件會偶然實(shí)效，回調(diào)函數(shù)得不到執(zhí)行。經(jīng)多次調(diào)試，確認(rèn)問題一定是出在 Element 的 Pagination 分頁控件內(nèi)部。
于是乎開始調(diào)試源碼，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？后經(jīng)過調(diào)試發(fā)現(xiàn)element相關(guān)代碼都整合進(jìn)了 lib 下的一個 element-ui.common.js 文件。修改這個文件中的 Pagination 部分即可正常調(diào)試了。
調(diào)試過程就不細(xì)展開了，只是確認(rèn)源碼確實(shí)存在 bug 而已，可以自行修復(fù)。這時突然想到，Element 可能不是最新，也許可以升級一下看看？抱著試試看的心情，買了一個療程，哦不對，打開本項(xiàng)目的 package.json，發(fā)現(xiàn) "element-ui": "2.3.3"，為什么是寫死的2.3.3。。。。。。一查，最新的版本都到2.4.1了，而就在我 debug 過程中，2.4.2也出了。。。
element 版本改為"element-ui": "^2.4.2", 再執(zhí)行更新
npm update element-ui
那個 bug 果然已經(jīng)得到修復(fù)。想想要是我早一點(diǎn)升級 element-ui，也許就不會耽誤這幾個小時，但是，也不會學(xué)到后面的調(diào)試方法，不會接觸到 Element 源碼。對比一下，還是利大于弊的。
通過這次調(diào)試 bug，了解了組件源碼是如何執(zhí)行的，了解到了.sync 修飾符和雙向綁定
this.$emit('update:title', newTitle)
最后，總結(jié)這2個多星期的前端學(xué)習(xí)，就3點(diǎn)：
- 做項(xiàng)目，可以接觸很多前端技術(shù)點(diǎn)和框架,加快新技術(shù)上手速度
- 看官方文檔，可以知道語言或框架的規(guī)范用法
- 看源碼，能加深對技術(shù)和原理的理解。
附帶兩個有意思的 npm 命令
列出所有可升級版本的 package
npm outdated
輸出當(dāng)前項(xiàng)目中所有安裝的 package 及其結(jié)構(gòu)
npm ls
