使用 Vue 完成 AJAX 的更新

這次個人網站的功能很簡單，就是在最下面加上網頁最近的更新時間。最近的更新時間自然是從 Github API 叫出 Last Commit。

...這是表面上來看啦，但其實很複雜：解決各種問題起來花上了大概四到五個小時吧。

如何從 Github API 叫出 Last Commit？

首先自然要從叫出 Last Commit 開始。從這個連結的問答可以看出，你可以用以下的 Github API 叫出 Last Commit： https://api.github.com/repos/作者/專案/git/refs/heads/分支

接著發現回傳的是 Commit 的 API，讓呼叫變得如同玩俄羅斯娃娃一般。

接下來的開發的難度也因此倍增...

參考：

接著，開發功能到一半的時候，我發現網頁的功能竟然失效了，因此困頓了一段時間。

查了 Console 發現 jscompress 出了問題。追蹤以後，才發現是因為我用的 let 是 ES6 的標準，而 gulp-uglify 並不支援 ES6。

我一開始把 AJAX 的行為放在 method 裡面，再從 mounted 叫出來。但我因此踢到了大鐵板：如果 AJAX 在 method 裡面的話，它會在網頁渲染完畢之後才開始執行。就算函式放在 mounted 呼叫也是一樣。

問題的解法是把整個 AJAX 呼叫放入 mounted 裡面，讓 AJAX 載入的同時，一起完成呼叫。

這讓我學到了 Vue 各 instnce 是在哪些時候執行，以及 AJAX 執行的時機。該死的非同步。

P.S. Vue 裡面的第一層的每一塊，稱作 instnce。

開發到一半發現不知為何，有些變數竟然是 undefined。到底發生了什麼事？

我追蹤了某些變數，發現 AJAX 回傳的 JSON 如果被註冊到 Vue 的 data 裡面，Firefox 會出現一個意義不明的鎖頭。而在 Chromium 裡面則看來沒什麼。

我不清楚會變成這樣子的原因，是因為它變成了Private 屬性嗎？但好像也不對。最後，我決定直接操作回傳 JSON 的結果，把它們註冊到各個需要的變數。

我發現自己很不滿意開發環境：被壓縮的 JS 檔案把 debugger 除掉了，也使得除錯難度大大增加。我需要一個易於除錯，但不會被上傳的開發環境。