vuerouter源碼

『壹』 Vue Router 源碼學習筆記5 - 視圖更新的實現

History模塊的updateRoute方法主要執行三項關鍵任務。首先，此方法觸發了cb函數，該函數相當於注冊監聽器，這一過程在VueRouter初始化(src/index.js)階段完成。其次，更新了內部的_route屬性。那麼，視圖為何會據此更新呢？答案在於響應式屬性的機制。

VueRouter的install方法(src/install.js)對全局Vue對象進行了擴展，其中將_route屬性定義為響應式屬性。這意味著每當_route屬性變化，視圖就會自動更新。

響應式屬性的實現原理基於Object.defineProperty，這是一種JavaScript對象屬性的動態綁定機制。通過它，可以為對象屬性添加讀取和寫入操作的監聽邏輯，從而實現在屬性值改變時觸發相應的響應行為。

從設計模式的角度來看，這里採用了發布訂閱模式。發布者（即屬性值）在變化時發出事件，訂閱者（視圖）接收到事件後執行相應的更新操作。

進一步探索，可以嘗試實現類似Object.defineProperty的功能，以深入理解其工作原理和在Vue中響應式系統中的應用。

『貳』 實現vue-router historty模式

在實現Vue-router的history模式時，需具備基本Vue知識。完整配置步驟如下：

在項目根目錄下創建vue.config.js文件，加入以下配置並重啟服務：

開始深入了解Vue-router的核心代碼。

VueRouter包含關鍵屬性：options、routeMap、data、install、構造函數和init。

options：接收類構造函數傳入的對象。

routeMap：存儲路由地址與組件的關聯。

data：包含current屬性，用於記錄當前路由地址，使用響應式機制確保組件自動更新，如使用vue.observable()。

install：實現Vue插件功能。

構造函數：初始化所有屬性和方法。

init：執行初始化任務，包括事件注冊、創建routeMap與組件。

initEvent：監聽popstate事件，實時響應瀏覽器歷史變化。

createRouteMap：將路由規則轉化為鍵值對，存放於routeMap。

initComponents：創建router-link、router-view組件。

總結：此過程基於拉鉤課程學習經驗。