在了解 Callback Functions Hell ，必須先知道甚麼是 Callback Functions ，而 Callback Functions 怎麼造成 Callback Functions Hell

如何獲取數據

Firestore 文件提及：

有兩種方法可以檢索存儲在 Cloud Firestore 中的數據。這些方法中的任何一種都可以用於文檔、文檔集合或取得查詢結果：

• 調用一個方法來獲取數據 (get())。
• 設置偵聽器以接收數據更改事件 (onSnapshot())。
  設置偵聽器時，Cloud Firestore 會向您的偵聽器發送數據的初始快照，然後在每次文檔更改時發送另一個快照。

必須注意到使用 get() 單純只是取得資料庫資料，並不具有獲取實時更新的效果，所以在添加資料或更新資料過後要再調用 get() 才可取得最新資料，而偵聽器 (onSnapshot()) 只需設置 1 次即可獲取實時更新。

本篇文章主要是來紀錄如何使用、更新及添加文檔，會做一個 TodoList 來說明。

使用 Firestore 的前提

上一篇文章有提到如何在 Firebase 創建 Firestore 資料庫，但仔細觀察一下 Firestore 文件說明中，針對初始化 Firestore 的寫法：

什麼是 Cloud Firestore ？

官網上的介紹：

Cloud Firestore 是一個靈活、可擴展的數據庫，用於 Firebase 和 Google Cloud 的移動、網絡和服務器開發。可通過實時偵聽器使您的數據在客戶端應用程序之間保持同步，並為移動設備和網絡提供離線支持，因此您可以構建響應式應用程序，無論網絡延遲或互聯網連接如何。

這一篇筆記結束後，有關 Vue Router 基礎就先告一段落了，之後應該會來寫 Vue 的圖書館 Vuex 的筆記。

接續上一篇 Vue Router 的筆記，這篇主要是來講解巢狀路由。
何謂巢狀路由？

隔了超久，還是要來補完這一系列的筆記， Router (以下簡稱路由)這一部分感覺就重點很多，大概會分 2 - 3 篇來記錄吧！

在網路上搜尋有關 Vue 響應式源碼文章時，真的是看不懂，所以研究了好幾天，希望自己理解的過程是對的。

在談到如何使用 $set 前，就必須先了解一下 Vue 是如何實現數據響應的，所以另外寫了一篇有關於 Vue 響應式原理 - Vue.js 源碼分析 - Vue 物件(Object)響應式原理的文章，簡單記錄一下自己的理解過程。

使用 Vue 之後，我們就很少去操作 DOM 了，但如果真的需要去操作 DOM 時怎麼辦？還是跟之前寫 JavaScript 一樣嗎？一定寫一長串的 document.querySelector('.className') 嗎？不！ Vue 提供了一個可以快速取得 DOM 元素的屬性 — $refs 。接下來就來了解一下$refs 屬性。