部落格同步刊登 [IT 鐵人賽] Vue 從前端到後端 Day 0

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

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

目錄

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

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

在開始之前的幹古

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

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

1. 1996 年有了 CSS，中文叫做串接樣式表 沒有人在意這件事吧。
2. JavaScript 1995 年第一次問世，ECMAScript 則是 1997 年，DHTML 在 1997, 1998 年挺紅的，搭配 CSS 的推出。
3. 哦，對了，當時 IE 3.0 開始推出一個 JScript，一直活到 IE 9.0，目前狀況不明。
4. 誰還記得 document.write？一開始都用 Prototype-based，然後就沒有然後了。
5. 然後有 QuirksMode。
6. 後來我當兵的時候，出現了 MooTools (2005)，緊接著 jQuery (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 這個東西，就不在此列了。

小結

其實只要是寫 JavaScript 大概都是原生的啦（Coffee/TS 不算）。只是說，目前工具這麼方便，要動用到所謂 原生 的操作，我覺得也是必要之惡，至於說用得好或是不好，就見仁見智了。

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