本系列文其實是源自於手頭上某個 Side Project 延伸的研究筆記，我的目的是要透過 Vue.js 搭配 Firebase 建立一個網站，而在這個專案中使用的是 Firebase 的 Cloud Firestore 資料庫，而不是已經相對成熟的 Firebase Realtime Database。在寫這個專案的時候，好奇到底從 Cloud Firestore 到透過 Vue.js 渲染資料的整個過程是怎麼跑的，所有就有了這一系列的文章。
首先研究 Vue.js 是如何透過 Object.definProperty() 去實作出資料雙向繫結的功能。用 Vue.js 也有兩年多了，說懂 Vue.js，但卻不懂他的資料繫結與渲染的原理，所以其實也沒那麼懂。趁這這次鐵人競賽，透過編寫研究筆記，總算搞懂這部分了。
再來就是一系列 Cloud Firestore 的文章，在這系列研究各個功能甚至透過看原始碼的方式暸解其背後實作原理或是 JS 的其它用法。以前使用 Firebase 都是使用 Realtime Database，大概也是和 Vue.js 同時學習到的技能，直到最近要寫 Side Project 開始嘗試使用還在測試階段的 Cloud Firestore，也用了一段時間，卻也沒有說很懂。也是趁這編寫這個系列文，詳細地把他的概念和 JS SDK 弄懂，之後在使用時我想就會比較得心應手了。
最後結合 Vue.js 和 Cloud Firestore，寫出一篇整合使用的研究筆記，也算是一個不錯的收尾。兩個都是會用但是沒有那麼懂的 Web 框架、服務，在這次鐵人賽中嘗試深入去學習弄懂它，也算是契合了本系列文的標題了。
我這幾天會再陸續審閱本系列文的內容，可能會修正錯字、補充內容、稍微調整文章架構。再之後互找時間重新整理，把這系列文整理到 Blog 上，讓本次分享更有連貫性的提供給其他需要的人。有興趣的朋友可以訂閱我部落格的 RSS。
也歡迎看看我在這次鐵人賽的另外兩門主題的系列：
對，我今年發瘋似的報名了三個主題，這 30 天真的既痛苦又快樂著。我已把對於這次參賽總感想另外發佈在本系列文裡，若有興趣可直接點擊下面的連結：
最後，感謝這 30 天瀏覽、訂閱、喜歡本系列文的朋友們，你們默默的給了我完成的動力。每一次有人訂閱和按讚，都讓我有如跑鐵人馬拉松時在休息站喝到水、吃到食物一樣，彷彿活力又回來了，謝謝你們的鼓勵，讓我更有動力完成這次的鐵人競賽。
本文有針對整系列文作重新構成的目錄，讓大家好針對自己想知道的部分做選擇性地閱讀，希望大家還喜歡我今年的分享。 = )
這部分等我審校後會再更新上來。
iThome鐵人賽
看影片追技術