vue-router 源碼概覽
源碼這個東西對於實際的工做其實沒有立竿見影的效果，不會像那些針對性極強的文章同樣看了以後就立馬能夠運用到實際項目中，產生什麼樣的效果，源碼的做用是一個潛移默化的過程，它的理念、設計模式、代碼結構等看了以後可能不會當即知識變現(或者說變現不多)，而是在往後的工做過程當中悄無聲息地發揮出來，你甚至都感受不到這個過程html
另外，優秀的源碼案例，例如 vue、react這種，內容量比較龐大，根本不是三篇五篇十篇八篇文章就能說完的，並且寫起來也很難寫得清楚，也挺浪費時間的，而若是隻是分析其中一個點，例如 vue的響應式，相似的文章也已經夠多了，不必再 repeatvue
因此我以前沒專門寫過源碼分析的文章，只是本身看看，不過最近閒來無事看了 vue-router的源碼，發現這種插件級別的東西，相比 vue這種框架級別的東西，邏輯簡單清晰，沒有那麼多道道，代碼量也很少，可是其中包含的理念等東西卻很精煉，值得一寫，固然，文如其名，只是概覽，不會一行行代碼分析過去，細節的東西仍是要本身看看的html5
vue.use
vue插件必須經過 vue.use進行註冊，vue.use的代碼位於 vue源碼的 src/core/global-api/use.js文件中，此方法的主要做用有兩個：node
- 對註冊的組件進行緩存，避免屢次註冊同一個插件
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
複製代碼
- 調用插件的
install方法或者直接運行插件，以實現插件的install
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args)
} else if (typeof plugin === 'function') {
plugin.apply(null, args)
}
複製代碼
路由安裝
vue-router的 install方法位於 vue-router源碼的src/install.js中 主要是經過 vue.minxin混入 beforeCreate 和 destroyed鉤子函數，並全局註冊 router-view 和 router-link組件react
// src/install.js
Vue.mixin({
beforeCreate () {
if (isDef(this.$options.router)) {
this._routerRoot = this
this._router = this.$options.router
this._router.init(this)
Vue.util.defineReactive(this, '_route', this._router.history.current)
} else {
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
destroyed () {
registerInstance(this)
}
})
...
// 全局註冊 `router-view` 和 `router-link`組件
Vue.component('RouterView', View)
Vue.component('RouterLink', Link)
複製代碼
路由模式
vue-router支持三種路由模式(mode)：hash、history、abstract，其中 abstract是在非瀏覽器環境下使用的路由模式，例如weexgit
路由內部會對外部指定傳入的路由模式進行判斷，例如當前環境是非瀏覽器環境，則不管傳入何種mode，最後都會被強制指定爲 abstract，若是判斷當前環境不支持 HTML5 History，則最終會被降級爲 hash模式github
// src/index.js
let mode = options.mode || 'hash'
this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract'
}
複製代碼
最後會對符合要求的 mode進行對應的初始化操做vue-router
// src/index.js
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
複製代碼
路由解析
經過遞歸的方式來解析嵌套路由設計模式
// src/create-route-map.js
function addRouteRecord ( pathList: Array<string>, pathMap: Dictionary<RouteRecord>, nameMap: Dictionary<RouteRecord>, route: RouteConfig, parent?: RouteRecord, matchAs?: string ) {
...
route.children.forEach(child => {
const childMatchAs = matchAs
? cleanPath(`${matchAs}/${child.path}`)
: undefined
addRouteRecord(pathList, pathMap, nameMap, child, record, childMatchAs)
})
...
}
複製代碼
解析完畢以後，會經過 key-value對的形式對解析好的路由進行記錄，因此若是聲明多個相同路徑(path)的路由映射，只有第一個會起做用，後面的會被忽略api
// src/create-route-map.js
if (!pathMap[record.path]) {
pathList.push(record.path)
pathMap[record.path] = record
}
複製代碼
例如以下路由配置，路由 /bar 只會匹配 Bar1，Bar2這一條配置會被忽略
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar1 },
{ path: '/bar', component: Bar2 },
];
複製代碼
路由切換
當訪問一個 url的時候，vue-router會根據路徑進行匹配，建立出一個 route對象，可經過 this.$route進行訪問
// src/util/route.js
const route: Route = {
name: location.name || (record && record.name),
meta: (record && record.meta) || {},
path: location.path || '/',
hash: location.hash || '',
query,
params: location.params || {},
fullPath: getFullPath(location, stringifyQuery),
matched: record ? formatMatch(record) : []
}
複製代碼
src/history/base.js源碼文件中的 transitionTo()是路由切換的核心方法
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const route = this.router.match(location, this.current)
this.confirmTransition(route, () => {
...
}
複製代碼
路由實例的push 和 replace等路由切換方法，都是基於此方法實現路由切換的，例如 hash模式的 push方法：
// src/history/hash.js
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
// 利用了 transitionTo 方法
this.transitionTo(location, route => {
pushHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
複製代碼
transitionTo方法內部經過一種異步函數隊列化執⾏的模式來更新切換路由，經過 next函數執行異步回調，並在異步回調方法中執行相應的鉤子函數(即 導航守衛) beforeEach、beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave
經過 queue這個數組保存相應的路由參數：
// src/history/base.js
const queue: Array<?NavigationGuard> = [].concat(
// in-component leave guards
extractLeaveGuards(deactivated),
// global before hooks
this.router.beforeHooks,
// in-component update hooks
extractUpdateHooks(updated),
// in-config enter guards
activated.map(m => m.beforeEnter),
// async components
resolveAsyncComponents(activated)
)
複製代碼
經過 runQueue以一種遞歸回調的方式來啓動異步函數隊列化的執⾏：
// src/history/base.js
// 異步回調函數
runQueue(queue, iterator, () => {
const postEnterCbs = []
const isValid = () => this.current === route
// wait until async components are resolved before
// extracting in-component enter guards
const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
const queue = enterGuards.concat(this.router.resolveHooks)
// 遞歸執行
runQueue(queue, iterator, () => {
if (this.pending !== route) {
return abort()
}
this.pending = null
onComplete(route)
if (this.router.app) {
this.router.app.$nextTick(() => {
postEnterCbs.forEach(cb => { cb() })
})
}
})
})
複製代碼
經過 next進行導航守衛的回調迭代，因此若是在代碼中顯式聲明瞭導航鉤子函數，那麼就必須在最後調用 next()，不然回調不執行，導航將沒法繼續
// src/history/base.js
const iterator = (hook: NavigationGuard, next) => {
...
hook(route, current, (to: any) => {
...
} else {
// confirm transition and pass on the value
next(to)
}
})
...
}
複製代碼
路由同步
在路由切換的時候，vue-router會調用 push、go等方法實現視圖與地址url的同步
地址欄 url與視圖的同步
當進行點擊頁面上按鈕等操做進行路由切換時，vue-router會經過改變 window.location.href來保持視圖與 url的同步，例如 hash模式的路由切換：
// src/history/hash.js
function pushHash (path) {
if (supportsPushState) {
pushState(getUrl(path))
} else {
window.location.hash = path
}
}
複製代碼
上述代碼，先檢測當前瀏覽器是否支持 html5的 History API，若是支持則調用此 API進行 href的修改，不然直接對window.location.hash進行賦值 history的原理與此相同，也是利用了 History API
視圖與地址欄 url的同步
當點擊瀏覽器的前進後退按鈕時，一樣能夠實現視圖的同步，這是由於在路由初始化的時候，設置了對瀏覽器前進後退的事件監聽器
下述是 hash模式的事件監聽：
// src/history/hash.js
setupListeners () {
...
window.addEventListener(supportsPushState ? 'popstate' : 'hashchange', () => {
const current = this.current
if (!ensureSlash()) {
return
}
this.transitionTo(getHash(), route => {
if (supportsScroll) {
handleScroll(this.router, route, current, true)
}
if (!supportsPushState) {
replaceHash(route.fullPath)
}
})
})
}
複製代碼
history模式與此相似：
// src/history/html5.js
window.addEventListener('popstate', e => {
const current = this.current
// Avoiding first `popstate` event dispatched in some browsers but first
// history route not updated since async guard at the same time.
const location = getLocation(this.base)
if (this.current === START && location === initLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
})
複製代碼
不管是 hash仍是 history，都是經過監聽事件最後來調用 transitionTo這個方法，從而實現路由與視圖的統一
另外，當第一次訪問頁面，路由進行初始化的時候，若是是 hash模式，則會對url進行檢查，若是發現訪問的 url沒有帶 #字符，則會自動追加，例如初次訪問 http://localhost:8080這個 url，vue-router會自動置換爲 http://localhost:8080/#/，方便以後的路由管理：
// src/history/hash.js
function ensureSlash (): boolean {
const path = getHash()
if (path.charAt(0) === '/') {
return true
}
replaceHash('/' + path)
return false
}
複製代碼
scrollBehavior
當從一個路由 /a跳轉到另外的路由 /b後，若是在路由 /a的頁面中進行了滾動條的滾動行爲，那麼頁面跳轉到/b時，會發現瀏覽器的滾動條位置和 /a的同樣（若是 /b也能滾動的話），或者刷新當前頁面，瀏覽器的滾動條位置依舊不變，不會直接返回到頂部的 而若是是經過點擊瀏覽器的前進、後退按鈕來控制路由切換時，則部分瀏覽器(例如微信)滾動條在路由切換時都會自動返回到頂部，即scrollTop=0的位置 這些都是瀏覽器默認的行爲，若是想要定製頁面切換時的滾動條位置，則能夠藉助 scrollBehavior這個 vue-router的 options
當路由初始化時，vue-router會對路由的切換事件進行監聽，監聽邏輯的一部分就是用於控制瀏覽器滾動條的位置：
// src/history/hash.js
setupListeners () {
...
if (supportsScroll) {
// 進行瀏覽器滾動條的事件控制
setupScroll()
}
...
}
複製代碼
這個 set方法定義在 src/util/scroll.js，這個文件就是專門用於控制滾動條位置的，經過監聽路由切換事件從而進行滾動條位置控制：
// src/util/scroll.js
window.addEventListener('popstate', e => {
saveScrollPosition()
if (e.state && e.state.key) {
setStateKey(e.state.key)
}
})
複製代碼
經過 scrollBehavior能夠定製路由切換的滾動條位置，vue-router的 github上的源碼中，有相關的 example，源碼位置在 vue-router/examples/scroll-behavior/app.js
router-view & router-link
router-view 和 router-link這兩個 vue-router的內置組件，源碼位於 src/components下
router-view
router-view是無狀態(沒有響應式數據)、無實例(沒有 this上下文)的函數式組件，其經過路由匹配獲取到對應的組件實例，經過 h函數動態生成組件，若是當前路由沒有匹配到任何組件，則渲染一個註釋節點
// vue-router/src/components/view.js
...
const matched = route.matched[depth]
// render empty node if no matched route
if (!matched) {
cache[name] = null
return h()
}
const component = cache[name] = matched.components[name]
...
return h(component, data, children)
複製代碼
每次路由切換都會觸發 router-view從新 render從而渲染出新的視圖，這個觸發的動做是在 vue-router初始化 init的時候就聲明瞭的：
// src/install.js
Vue.mixin({
beforeCreate () {
if (isDef(this.$options.router)) {
this._routerRoot = this
this._router = this.$options.router
this._router.init(this)
// 觸發 router-view重渲染
Vue.util.defineReactive(this, '_route', this._router.history.current)
...
})
複製代碼
將 this._route經過 defineReactive變成一個響應式的數據，這個defineReactive就是 vue中定義的，用於將數據變成響應式的一個方法，源碼在 vue/src/core/observer/index.js中，其核心就是經過 Object.defineProperty方法修改數據的 getter 和 setter：
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// 進行依賴收集
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
...
// 通知訂閱當前數據 watcher的觀察者進行響應
dep.notify()
}
複製代碼
當路由發生變化時，將會調用 router-view的 render函數，此函數中訪問了 this._route這個數據，也就至關因而調用了 this._route的 getter方法，觸發依賴收集，創建一個 Watcher，執行 _update方法，從而讓頁面從新渲染
// vue-router/src/components/view.js
render (_, { props, children, parent, data }) {
// used by devtools to display a router-view badge
data.routerView = true
// directly use parent context's createElement() function
// so that components rendered by router-view can resolve named slots
const h = parent.$createElement
const name = props.name
// 觸發依賴收集，創建 render watcher
const route = parent.$route
...
}
複製代碼
這個 render watcher的派發更新，也就是 setter的調用，位於 src/index.js：
history.listen(route => {
this.apps.forEach((app) => {
// 觸發 setter
app._route = route
})
})
複製代碼
router-link
router-link在執行 render函數的時候，會根據當前的路由狀態，給渲染出來的active元素添加 class，因此你能夠藉助此給active路由元素設置樣式等：
// src/components/link.js
render (h: Function) {
...
const globalActiveClass = router.options.linkActiveClass
const globalExactActiveClass = router.options.linkExactActiveClass
// Support global empty active class
const activeClassFallback = globalActiveClass == null
? 'router-link-active'
: globalActiveClass
const exactActiveClassFallback = globalExactActiveClass == null
? 'router-link-exact-active'
: globalExactActiveClass
...
}
複製代碼
router-link默認渲染出來的元素是 <a>標籤，其會給這個 <a>添加 href屬性值，以及一些用於監聽可以觸發路由切換的事件，默認是 click事件：
// src/components/link.js
data.on = on
data.attrs = { href }
複製代碼
另外，你能夠能夠經過傳入 tag這個 props來定製 router-link渲染出來的元素標籤：
<router-link to="/foo" tag="div">Go to foo</router-link>
複製代碼
若是 tag值不爲 a，則會遞歸遍歷 router-link的子元素，直到找到一個 a標籤，則將事件和路由賦值到這個 <a>上，若是沒找到a標籤，則將事件和路由放到 router-link渲染出的自己元素上：
if (this.tag === 'a') {
data.on = on
data.attrs = { href }
} else {
// find the first <a> child and apply listener and href
// findAnchor即爲遞歸遍歷子元素的方法
const a = findAnchor(this.$slots.default)
...
}
}
複製代碼
當觸發這些路由切換事件時，會調用相應的方法來切換路由刷新視圖：
// src/components/link.js
const handler = e => {
if (guardEvent(e)) {
if (this.replace) {
// replace路由
router.replace(location)
} else {
// push 路由
router.push(location)
}
}
}
複製代碼
總結
能夠看到，vue-router的源碼是很簡單的，比較適合新手進行閱讀分析
源碼這種東西，個人理解是不必非要專門騰出時間來看，只要你熟讀文檔，能正確而熟練地運用 API實現各類需求那就好了，輪子的出現本就是爲實際開發所服務而不是用來折騰開發者的，注意，我不是說不要去看，有時間仍是要看看的，就算弄不明白其中的道道，但看了一遍總會有收穫的，好比我在看 vue源碼的時候，常常看到相似於這種的賦值寫法：
// vue/src/core/vdom/create-functional-component.js
(clone.data || (clone.data = {})).slot = data.slot
複製代碼
若是是以前，對於這段邏輯我一般會這麼寫：
if (clone.data) {
clone.data.slot = data.slot
} else {
clone.data = {
slot: data.slot
}
}
複製代碼
也不是說第一種寫法有什麼難度或者看不明白，只是習慣了第二種寫法，平時寫代碼的過程當中天然而然不假思索地就寫出來了，習慣成天然了，可是當看到第一種寫法的時候纔會一拍腦殼想着原來這麼寫也能夠，之前白敲了那麼屢次鍵盤，因此沒事要多看看別人優秀的源碼，避免沉迷於本身的世界閉門造車，這樣才能查漏補缺，這一樣也是我認爲代碼 review比較重要的緣由，本身很難發現的問題，別人可能一眼就看出來了，此之謂當局者迷旁觀者清也
- 1. VueRouter源碼分析
- 2. Vuex 源碼概覽
- 3. VueRouter 源碼深度解析
- 4. Mybatis源碼概覽(一)
- 5. dubbo源碼003：概覽002
- 6. Spring 源碼分析 | 概覽
- 7. groupcache源碼解析-概覽
- 8. NGINX源碼分析——概覽
- 9. Spring源碼知識概覽
- 10. VueRouter
- 更多相關文章...
- • Docker 資源彙總 - Docker教程
- • Java操作Neo4j數據庫（附帶源碼） - NoSQL教程
- • Java Agent入門實戰（二）-Instrumentation源碼概述
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. VueRouter源碼分析
- 2. Vuex 源碼概覽
- 3. VueRouter 源碼深度解析
- 4. Mybatis源碼概覽(一)
- 5. dubbo源碼003：概覽002
- 6. Spring 源碼分析 | 概覽
- 7. groupcache源碼解析-概覽
- 8. NGINX源碼分析——概覽
- 9. Spring源碼知識概覽
- 10. VueRouter