> ## Content Index
> Fetch the complete content index at: https://blog.hinablue.me/llms.txt
> Use this file to discover other available public pages before exploring further.

# [IT 鐵人賽] Vue 從前端到後端 Day 0
- URL: https://blog.hinablue.me/2019-ithome-ironman-day-0/
- Published: 2019-09-01T07:02:00.000Z
- Updated: 2026-07-06T18:46:37.000Z
- Author: Hina Chen
- Tags: VueJS, VueJS 2.0, ITHome, 鐵人賽, JavaScript, 2019

上次參加好像是 2014 年，然後我寫到第二篇就超過時間，索性直接放棄（欸）。不過，由於 Famo.us 也莫名的退流行（等等，好像根本沒流行過）。所以就算是一個，只有我一個人自己玩得很高興的東西，說著說著著實感傷了起來。

這次想說，趁著稍微有一點時間，可以寫一下這些日子接觸 VueJS，到現在的一些心路歷程。像是那個說好的 ReactJS 好像就一直被我遺忘了（啊哈哈哈哈哈）。然後 Ng2，欸，現在好像是 Ng8 了吧？就當作我從來沒寫過 Angular 好了（苦笑）。

## 目錄

雖然說 30 天好像很長，不過要寫的東西其實也算是蠻多的，不如就改天（欸不對）。還是要大概訂定一下會說些什麼東西，不然寫起來應該會挺痛苦的。主要文章的主軸，會圍繞在 Vue 在於前後端的應用，但我應該不會提 SSR（Server-Side-Render）的部分，為何？因為我沒在用（笑）。

1. [VueJS 快速入門](https://blog.hinablue.me/2019-ithome-ironman-day-1/)
2. [Component 基本入門](https://blog.hinablue.me/2019-ithome-ironman-day-2/)
3. [Component 進階應用](https://blog.hinablue.me/2019-ithome-ironman-day-3/)
4. [Component 魔術方法 import 與 require](https://blog.hinablue.me/2019-ithome-ironman-day-4/)
5. [Component 魔術方法 :is](https://blog.hinablue.me/2019-ithome-ironman-day-5/)
6. [Component 魔術方法 Vue.options](https://blog.hinablue.me/2019-ithome-ironman-day-6/)
7. [new Vue v.s new Vue](https://blog.hinablue.me/2019-ithome-ironman-day-7/)
8. [Vuex 基本入門](https://blog.hinablue.me/2019-ithome-ironman-day-8/)
9. [Router 基本入門](https://blog.hinablue.me/2019-ithome-ironman-day-9/)
10. [Router 進階應用](https://blog.hinablue.me/2019-ithome-ironman-day-10/)
11. [Router 與生命週期](https://blog.hinablue.me/2019-ithome-ironman-day-11/)
12. [薛丁格的生命週期](https://blog.hinablue.me/2019-ithome-ironman-day-12/)
13. [Component 的溝通方式 Vuex](https://blog.hinablue.me/2019-ithome-ironman-day-13/)
14. [Component 的溝通方式 :props](https://blog.hinablue.me/2019-ithome-ironman-day-14/)
15. [Vue App 的溝通方式](https://blog.hinablue.me/2019-ithome-ironman-day-15/)
16. [題外話：原始碼之藏在 $watch 當中的神奇設定](https://blog.hinablue.me/2019-ithome-ironman-day-16/)
17. [SEO 的問題](https://blog.hinablue.me/2019-ithome-ironman-day-17/)
18. [為何我不用 SSR？](https://blog.hinablue.me/2019-ithome-ironman-day-18/)
19. [後端的 Template Layout](https://blog.hinablue.me/2019-ithome-ironman-day-19/)
20. [簡易的後端輸出與 Hybrid 模式](https://blog.hinablue.me/2019-ithome-ironman-day-20/)
21. [動態載入 Components](https://blog.hinablue.me/2019-ithome-ironman-day-21/)
22. [動態載入 Vue App](https://blog.hinablue.me/2019-ithome-ironman-day-22/)
23. [動態載入 CSS Style](https://blog.hinablue.me/2019-ithome-ironman-day-23/)
24. [動態載入 webpack 簡易設定](https://blog.hinablue.me/2019-ithome-ironman-day-24/)
25. [大型資料載入實例與狀況 Event Binding](https://blog.hinablue.me/2019-ithome-ironman-day-25/)
26. [大型資料載入實例與狀況 Large of DOMs](https://blog.hinablue.me/2019-ithome-ironman-day-26/)
27. [大型資料載入實例與狀況 Deep watch](https://blog.hinablue.me/2019-ithome-ironman-day-27/)
28. [Vanilla JS 與 Vue 的生命週期](https://blog.hinablue.me/2019-ithome-ironman-day-28/)
29. [下一個 VueJS 3.0](https://blog.hinablue.me/2019-ithome-ironman-day-29/)
30. [在 Vue 之後的事情，還會有什麼？](https://blog.hinablue.me/2019-ithome-ironman-day-30/)

## 在開始之前的幹古

VueJS 算是這幾年比較異軍突起的一個。想當年 Angular 剛推出的時候，大家都覺得 Google 親生兒子喔喔喔喔超厲害，然後文件也是 ~~喔喔喔喔超難讀~~（政治正確）。其實細數這些 JavaScript 的林林總總，會發現 Web 在所謂的前端這個面向的發展上，挺有趣的。

我深深覺得，這種老掉牙好像一點都不有趣（對啦純粹騙字數而已）。

1. 1996 年有了 [CSS](https://en.wikipedia.org/wiki/Cascading%5FStyle%5FSheets?ref=blog.hinablue.me#CSS%5F1)，中文叫做串接樣式表 ~~沒有人在意這件事吧~~。
2. [JavaScript](https://en.wikipedia.org/wiki/JavaScript?ref=blog.hinablue.me) 1995 年第一次問世，[ECMAScript](https://en.wikipedia.org/wiki/ECMAScript?ref=blog.hinablue.me) 則是 1997 年，DHTML 在 1997, 1998 年挺紅的，搭配 CSS 的推出。
3. 哦，對了，當時 IE 3.0 開始推出一個 JScript，一直活到 IE 9.0，目前狀況不明。
4. 誰還記得 `document.write`？一開始都用 Prototype-based，然後就沒有然後了。
5. 然後有 [QuirksMode](https://www.quirksmode.org/?ref=blog.hinablue.me)。
6. 後來我當兵的時候，出現了 [MooTools](https://mootools.net/?ref=blog.hinablue.me) (2005)，緊接著 [jQuery](https://jquery.com/?ref=blog.hinablue.me) (2006)。
7. ECMAScript 進入 5 之後就開啟了大航海時代，今年好像是 ES2019 了（10th）。

我確實是老頭，會寫一點動態網頁（*畫面上有東西會飛這樣*），然後就一直寫動態網頁到現在了。具體來說，整個 Web 的發展，無論是現在所謂的前端，還是後端，還是全端，好像都有一些奇妙的模式，

- 以前由伺服器渲染，頁面上有 CSS/JS/HTML，各自分家好不快活。
- 後來伺服器端語言多樣化，MVC 的導入，各自的 CSS/JS/HTML 趨於複雜。
- 然後開始出現整合型的 JS/CSS 解決方案，但基本上還是分家的狀態。
- NodeJS 橫空出世！
- Angular 推出，套一句朋友說的，後端也要 MVC，前端也要 MVC（海角七號梗）。
- 然後 ReactJS 說可以把樣式設定 `inline` 喔。
- VueJS 說我叫做 `.vue` 檔，上面兩家的我都可以做喔（~~致敬雖然可恥但是好用~~）。
- 大家一股腦的做 SPA，然後衍生出 SEO 的問題，最終有了 SSR 解決方案。
- 所以為了 SEO，還是需要伺服器渲染出一個框，然後再交給前面的 JS 做其他事情。

有沒有覺得上面這些事情好像就是一種迴圈，正所謂天下大勢，分久必合，合久必分，我想大概就是這種樣子吧。雖然好像是可以看成三強鼎立，不過其實是面上這種 MVC, MVVM 的東西還是挺多的，只是因為目前來說，這三個（ng, react, vue）比較紅而已。

歐，對了，Google 還有 AMP 這個東西，就不在此列了。

## 小結

![pure_js](https://blog.hinablue.me/content/images/2019/07/pure_js.png)

其實只要是寫 JavaScript 大概都是原生的啦（[Coffee](https://coffeescript.org/?ref=blog.hinablue.me)/[TS](https://www.typescriptlang.org/?ref=blog.hinablue.me) 不算）。只是說，目前工具這麼方便，要動用到所謂 *原生* 的操作，我覺得也是必要之惡，至於說用得好或是不好，就見仁見智了。

JavaScript 雖然寫了好些年，但其實我還是不太懂他啊。

> ITHome 鐵人賽同步刊登 [Vue 從前端到後端 Day 0](https://ithelp.ithome.com.tw/articles/10213177?ref=blog.hinablue.me)