制、命名視圖與 keep-alive 深度解析)
Vue Router 2 的router-view組件渲染機(jī)制、命名視圖與 keep-alive 深度解析【免費(fèi)下載鏈接】vue-router The official router for Vue 2項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-routerrouter-view是 Vue Router 2 中負(fù)責(zé)把當(dāng)前匹配到的路由組件渲染到頁面的核心出口組件。本文以 docs-gitbook/fr/api/router-view.md 文檔為主線結(jié)合本倉庫src/components/view.js的實(shí)現(xiàn)源碼、命名視圖示例與官方 API 文檔docs/api/README.md系統(tǒng)講解它的功能定位、name屬性、與transition/keep-alive的配合方式以及它在嵌套路由和命名視圖場(chǎng)景下的底層渲染原理。讀完本文你將能準(zhǔn)確理解并熟練運(yùn)用router-view完成單出口、多命名視圖、嵌套布局與緩存動(dòng)畫等實(shí)戰(zhàn)需求。一、router-view是什么功能定位與渲染職責(zé)按照官方文檔的定義router-view是一個(gè)函數(shù)式組件functional component它負(fù)責(zé)渲染與當(dāng)前路徑path相匹配的那個(gè)組件。這句話可以拆解為兩層含義它本身不產(chǎn)生任何真實(shí) DOM只是一個(gè)渲染出口把匹配到的組件實(shí)例掛載到自己的位置它渲染的目標(biāo)組件由**當(dāng)前激活的路由記錄matched route record**決定而不是由使用者顯式指定。更重要的是文檔強(qiáng)調(diào)了一個(gè)關(guān)鍵特性在router-view中渲染出來的組件其內(nèi)部還可以再包含自己的router-view用來渲染嵌套路徑nested paths對(duì)應(yīng)的子組件。這正是嵌套路由能夠逐層展開的根本原因父級(jí)路由組件里的router-view會(huì)繼續(xù)渲染匹配到的子路由組件層層遞進(jìn)最終構(gòu)成完整的頁面嵌套結(jié)構(gòu)。也就是說一個(gè)頁面上可以同時(shí)存在多個(gè)處于不同層級(jí)的router-view它們分別對(duì)應(yīng)路由樹中的不同深度。在源碼層面這一行為由 src/components/view.js 實(shí)現(xiàn)。該文件導(dǎo)出的組件定義如下export default { name: RouterView, functional: true, props: { name: { type: String, default: default } }, // ... }可以看到它在注冊(cè)時(shí)就明確聲明了functional: true與文檔中函數(shù)式組件的描述完全一致。二、name屬性默認(rèn)視圖與命名視圖router-view只接收一個(gè)屬性name類型string默認(rèn)值default當(dāng)一個(gè)router-view設(shè)置了name它就會(huì)渲染當(dāng)前匹配到的路由記錄route record中components選項(xiàng)注意帶復(fù)數(shù) s里對(duì)應(yīng)名稱的那個(gè)組件。而一個(gè)不帶 name 的router-view默認(rèn)名字就是default它渲染components.default或單數(shù)component選項(xiàng)中定義的組件。命名視圖的典型應(yīng)用是同一路徑下同時(shí)渲染多個(gè)平級(jí)視圖。官方示例docs-gitbook/fr/essentials/named-views.md給出了模板寫法router-view classview one/router-view router-view classview two namea/router-view router-view classview three nameb/router-view對(duì)應(yīng)的路由配置使用復(fù)數(shù)形式的components選項(xiàng)為每個(gè)名字分別指定組件const router new VueRouter({ routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } } ] })本倉庫的 examples/named-views/app.js 完整演示了這一用法并且進(jìn)一步展示了同一路由可以定義多組命名組件不同路徑復(fù)用不同組合const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } }, { path: /other, components: { default: Baz, a: Bar, b: Foo } } ] })在源碼 src/components/view.js 的第 58-59 行命名視圖的匹配邏輯非常直觀const matched route.matched[depth] const component matched matched.components[name]即先從當(dāng)前$route的matched數(shù)組里按深度取出對(duì)應(yīng)的路由記錄再從該記錄的components對(duì)象中按name取值。如果該深度沒有匹配記錄或沒有對(duì)應(yīng)名稱的組件則渲染空節(jié)點(diǎn)if (!matched || !component) { cache[name] null return h() }三、深度depth計(jì)算嵌套路由如何逐層渲染router-view之所以能正確處理嵌套路由關(guān)鍵在于它會(huì)在渲染前從父組件鏈向上遍歷計(jì)算自己處于第幾層嵌套。源碼中的核心邏輯src/components/view.js 第 27-39 行l(wèi)et depth 0 let inactive false while (parent parent._routerRoot ! parent) { const vnodeData parent.$vnode ? parent.$vnode.data : {} if (vnodeData.routerView) { depth } if (vnodeData.keepAlive parent._directInactive parent._inactive) { inactive true } parent parent.$parent } data.routerViewDepth depth這段代碼的含義是從當(dāng)前組件的父級(jí)開始向上回溯凡是遇到vnodeData.routerView為真的祖先即上層還有一個(gè)router-view深度就加一第 16 行渲染時(shí)會(huì)給當(dāng)前 vnode 打上data.routerView true標(biāo)記這正是上層遍歷時(shí)用來識(shí)別這里曾經(jīng)有一個(gè) router-view的依據(jù)遍歷過程中同時(shí)檢測(cè)keepAlive與_inactive狀態(tài)判斷整棵組件樹是否處于被 keep-alive 緩存且已失活的狀態(tài)。最終得到的depth會(huì)被用作route.matched[depth]的下標(biāo)。而matched數(shù)組正是由 src/util/route.js 的formatMatch函數(shù)生成的它從葉子路由記錄一路向父級(jí)unshift得到從根到葉的有序記錄列表function formatMatch (record: ?RouteRecord): ArrayRouteRecord { const res [] while (record) { res.unshift(record) record record.parent } return res }因此第一層router-view取matched[0]根路由第二層取matched[1]子路由以此類推——這正是嵌套路由外層父組件 內(nèi)層子組件逐層渲染的底層機(jī)制。四、屬性傳遞非 name 屬性與路由數(shù)據(jù)官方文檔指出除name以外的其他屬性都會(huì)被原樣傳遞給被渲染的組件不過在大多數(shù)情況下按路由變化的數(shù)據(jù)都包含在路由的params參數(shù)中。也就是說router-view上的其余 attribute 會(huì)被透?jìng)飨氯?。例如router-view classview one/router-view其中的classview one最終會(huì)落到被渲染組件的最外層元素上在示例中它被用來定位視圖的布局位置。而真正的業(yè)務(wù)數(shù)據(jù)Vue Router 更推薦通過路由參數(shù)來承載動(dòng)態(tài)路徑的params如/user/:id中的id、query、hash等都會(huì)體現(xiàn)在$route對(duì)象上被渲染的組件可以通過this.$route讀取。路由對(duì)象由 src/util/route.js 的createRoute統(tǒng)一構(gòu)造包含name、meta、path、hash、query、params、fullPath、matched等字段并整體Object.freeze凍結(jié)以保證不可變。此外如果路由記錄配置了props選項(xiàng)object、function 或 boolean 形式router-view還會(huì)把解析出的 props 一并傳給被渲染組件詳見 src/components/view.js 第 105-133 行的fillPropsinData其中會(huì)把組件已聲明為props的字段放入data.props其余字段則降級(jí)為attrs確保屬性不會(huì)丟失也不會(huì)污染組件的 props 聲明。五、與transition、keep-alive配合正確的嵌套順序因?yàn)閞outer-view本質(zhì)上只是一個(gè)普通組件它天然可以與 Vue 的transition過渡動(dòng)畫和keep-alive組件緩存協(xié)同工作。文檔特別強(qiáng)調(diào)了一個(gè)重要的嵌套順序當(dāng)兩者同時(shí)使用時(shí)必須把keep-alive放在transition里面transition keep-alive router-view/router-view /keep-alive /transition這樣組合的原因在于transition負(fù)責(zé)在視圖切換時(shí)播放進(jìn)出場(chǎng)動(dòng)畫而keep-alive負(fù)責(zé)在切換過程中緩存被替換掉的組件實(shí)例避免重新渲染和狀態(tài)丟失。二者職責(zé)不同順序不能顛倒。本倉庫在 examples/transitions/app.js 和 examples/keepalive-view/app.js 中分別提供了過渡動(dòng)畫與 keep-alive 緩存的實(shí)際用法。從源碼角度看keep-alive 緩存還與router-view內(nèi)部的狀態(tài)管理深度耦合。在 src/components/view.js 中可以看到每個(gè)視圖有一個(gè)parent._routerViewCache緩存對(duì)象按name保存渲染過的組件當(dāng)組件樹因 keep-alive 而處于失活inactive狀態(tài)時(shí)第 42-56 行router-view會(huì)直接從緩存中取出上一次渲染的組件繼續(xù)渲染而不是渲染新的路由組件緩存同時(shí)保存了當(dāng)時(shí)的route與configProps以便恢復(fù)渲染時(shí)仍能正確傳參對(duì)應(yīng)注釋中提到的 issue #2301 的 props 傳遞修復(fù)。此外router-view還在 vnode 上掛載了registerRouteInstance、prepatch、init等鉤子第 72-103 行用于維護(hù)matched.instances中各組件的實(shí)例注冊(cè)。這在 keep-alive 組件被重新激活activated或同一組件實(shí)例被跨路由復(fù)用時(shí)能保證$route相關(guān)邏輯與handleRouteEntered見 src/util/route.js的進(jìn)入回調(diào)仍然正確觸發(fā)。六、小結(jié)router-view是 Vue Router 2 體系中連接路由狀態(tài)與組件渲染的樞紐要點(diǎn)說明組件類型函數(shù)式組件functional本身不產(chǎn)生 DOM核心職責(zé)渲染與當(dāng)前路徑匹配的路由組件name屬性string類型默認(rèn)default對(duì)應(yīng)components選項(xiàng)中的同名鍵嵌套渲染通過向上遍歷父鏈計(jì)算深度按route.matched[depth]逐層取記錄屬性傳遞非 name 屬性透?jìng)鳂I(yè)務(wù)數(shù)據(jù)通常走$route的params/query配合使用可與transition、keep-alive組合且keep-alive必須放在transition內(nèi)部理解這些機(jī)制后你便可以在單出口頁面、多命名視圖布局、嵌套路由頁面以及需要緩存與動(dòng)畫的復(fù)雜場(chǎng)景中準(zhǔn)確、高效地組織你的視圖出口。進(jìn)一步深入可閱讀官方英文 API 文檔docs/api/README.mdrouter-view一節(jié)組件實(shí)現(xiàn)源碼src/components/view.js命名視圖指南docs-gitbook/fr/essentials/named-views.md命名視圖示例examples/named-views/app.js路由記錄構(gòu)造邏輯src/util/route.js【免費(fèi)下載鏈接】vue-router The official router for Vue 2項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-router創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Vue Router 2 的 `＜router-view＞` 組件：渲染機(jī)制、命名視圖與 keep-alive 深度解析
Vue Router 2 的router-view組件渲染機(jī)制、命名視圖與 keep-alive 深度解析【免費(fèi)下載鏈接】vue-router The official router for Vue 2項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-routerrouter-view是 Vue Router 2 中負(fù)責(zé)把當(dāng)前匹配到的路由組件渲染到頁面的核心出口組件。本文以 docs-gitbook/fr/api/router-view.md 文檔為主線結(jié)合本倉庫src/components/view.js的實(shí)現(xiàn)源碼、命名視圖示例與官方 API 文檔docs/api/README.md系統(tǒng)講解它的功能定位、name屬性、與transition/keep-alive的配合方式以及它在嵌套路由和命名視圖場(chǎng)景下的底層渲染原理。讀完本文你將能準(zhǔn)確理解并熟練運(yùn)用router-view完成單出口、多命名視圖、嵌套布局與緩存動(dòng)畫等實(shí)戰(zhàn)需求。一、router-view是什么功能定位與渲染職責(zé)按照官方文檔的定義router-view是一個(gè)函數(shù)式組件functional component它負(fù)責(zé)渲染與當(dāng)前路徑path相匹配的那個(gè)組件。這句話可以拆解為兩層含義它本身不產(chǎn)生任何真實(shí) DOM只是一個(gè)渲染出口把匹配到的組件實(shí)例掛載到自己的位置它渲染的目標(biāo)組件由**當(dāng)前激活的路由記錄matched route record**決定而不是由使用者顯式指定。更重要的是文檔強(qiáng)調(diào)了一個(gè)關(guān)鍵特性在router-view中渲染出來的組件其內(nèi)部還可以再包含自己的router-view用來渲染嵌套路徑nested paths對(duì)應(yīng)的子組件。這正是嵌套路由能夠逐層展開的根本原因父級(jí)路由組件里的router-view會(huì)繼續(xù)渲染匹配到的子路由組件層層遞進(jìn)最終構(gòu)成完整的頁面嵌套結(jié)構(gòu)。也就是說一個(gè)頁面上可以同時(shí)存在多個(gè)處于不同層級(jí)的router-view它們分別對(duì)應(yīng)路由樹中的不同深度。在源碼層面這一行為由 src/components/view.js 實(shí)現(xiàn)。該文件導(dǎo)出的組件定義如下export default { name: RouterView, functional: true, props: { name: { type: String, default: default } }, // ... }可以看到它在注冊(cè)時(shí)就明確聲明了functional: true與文檔中函數(shù)式組件的描述完全一致。二、name屬性默認(rèn)視圖與命名視圖router-view只接收一個(gè)屬性name類型string默認(rèn)值default當(dāng)一個(gè)router-view設(shè)置了name它就會(huì)渲染當(dāng)前匹配到的路由記錄route record中components選項(xiàng)注意帶復(fù)數(shù) s里對(duì)應(yīng)名稱的那個(gè)組件。而一個(gè)不帶 name 的router-view默認(rèn)名字就是default它渲染components.default或單數(shù)component選項(xiàng)中定義的組件。命名視圖的典型應(yīng)用是同一路徑下同時(shí)渲染多個(gè)平級(jí)視圖。官方示例docs-gitbook/fr/essentials/named-views.md給出了模板寫法router-view classview one/router-view router-view classview two namea/router-view router-view classview three nameb/router-view對(duì)應(yīng)的路由配置使用復(fù)數(shù)形式的components選項(xiàng)為每個(gè)名字分別指定組件const router new VueRouter({ routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } } ] })本倉庫的 examples/named-views/app.js 完整演示了這一用法并且進(jìn)一步展示了同一路由可以定義多組命名組件不同路徑復(fù)用不同組合const router new VueRouter({ mode: history, base: __dirname, routes: [ { path: /, components: { default: Foo, a: Bar, b: Baz } }, { path: /other, components: { default: Baz, a: Bar, b: Foo } } ] })在源碼 src/components/view.js 的第 58-59 行命名視圖的匹配邏輯非常直觀const matched route.matched[depth] const component matched matched.components[name]即先從當(dāng)前$route的matched數(shù)組里按深度取出對(duì)應(yīng)的路由記錄再從該記錄的components對(duì)象中按name取值。如果該深度沒有匹配記錄或沒有對(duì)應(yīng)名稱的組件則渲染空節(jié)點(diǎn)if (!matched || !component) { cache[name] null return h() }三、深度depth計(jì)算嵌套路由如何逐層渲染router-view之所以能正確處理嵌套路由關(guān)鍵在于它會(huì)在渲染前從父組件鏈向上遍歷計(jì)算自己處于第幾層嵌套。源碼中的核心邏輯src/components/view.js 第 27-39 行l(wèi)et depth 0 let inactive false while (parent parent._routerRoot ! parent) { const vnodeData parent.$vnode ? parent.$vnode.data : {} if (vnodeData.routerView) { depth } if (vnodeData.keepAlive parent._directInactive parent._inactive) { inactive true } parent parent.$parent } data.routerViewDepth depth這段代碼的含義是從當(dāng)前組件的父級(jí)開始向上回溯凡是遇到vnodeData.routerView為真的祖先即上層還有一個(gè)router-view深度就加一第 16 行渲染時(shí)會(huì)給當(dāng)前 vnode 打上data.routerView true標(biāo)記這正是上層遍歷時(shí)用來識(shí)別這里曾經(jīng)有一個(gè) router-view的依據(jù)遍歷過程中同時(shí)檢測(cè)keepAlive與_inactive狀態(tài)判斷整棵組件樹是否處于被 keep-alive 緩存且已失活的狀態(tài)。最終得到的depth會(huì)被用作route.matched[depth]的下標(biāo)。而matched數(shù)組正是由 src/util/route.js 的formatMatch函數(shù)生成的它從葉子路由記錄一路向父級(jí)unshift得到從根到葉的有序記錄列表function formatMatch (record: ?RouteRecord): ArrayRouteRecord { const res [] while (record) { res.unshift(record) record record.parent } return res }因此第一層router-view取matched[0]根路由第二層取matched[1]子路由以此類推——這正是嵌套路由外層父組件 內(nèi)層子組件逐層渲染的底層機(jī)制。四、屬性傳遞非 name 屬性與路由數(shù)據(jù)官方文檔指出除name以外的其他屬性都會(huì)被原樣傳遞給被渲染的組件不過在大多數(shù)情況下按路由變化的數(shù)據(jù)都包含在路由的params參數(shù)中。也就是說router-view上的其余 attribute 會(huì)被透?jìng)飨氯?。例如router-view classview one/router-view其中的classview one最終會(huì)落到被渲染組件的最外層元素上在示例中它被用來定位視圖的布局位置。而真正的業(yè)務(wù)數(shù)據(jù)Vue Router 更推薦通過路由參數(shù)來承載動(dòng)態(tài)路徑的params如/user/:id中的id、query、hash等都會(huì)體現(xiàn)在$route對(duì)象上被渲染的組件可以通過this.$route讀取。路由對(duì)象由 src/util/route.js 的createRoute統(tǒng)一構(gòu)造包含name、meta、path、hash、query、params、fullPath、matched等字段并整體Object.freeze凍結(jié)以保證不可變。此外如果路由記錄配置了props選項(xiàng)object、function 或 boolean 形式router-view還會(huì)把解析出的 props 一并傳給被渲染組件詳見 src/components/view.js 第 105-133 行的fillPropsinData其中會(huì)把組件已聲明為props的字段放入data.props其余字段則降級(jí)為attrs確保屬性不會(huì)丟失也不會(huì)污染組件的 props 聲明。五、與transition、keep-alive配合正確的嵌套順序因?yàn)閞outer-view本質(zhì)上只是一個(gè)普通組件它天然可以與 Vue 的transition過渡動(dòng)畫和keep-alive組件緩存協(xié)同工作。文檔特別強(qiáng)調(diào)了一個(gè)重要的嵌套順序當(dāng)兩者同時(shí)使用時(shí)必須把keep-alive放在transition里面transition keep-alive router-view/router-view /keep-alive /transition這樣組合的原因在于transition負(fù)責(zé)在視圖切換時(shí)播放進(jìn)出場(chǎng)動(dòng)畫而keep-alive負(fù)責(zé)在切換過程中緩存被替換掉的組件實(shí)例避免重新渲染和狀態(tài)丟失。二者職責(zé)不同順序不能顛倒。本倉庫在 examples/transitions/app.js 和 examples/keepalive-view/app.js 中分別提供了過渡動(dòng)畫與 keep-alive 緩存的實(shí)際用法。從源碼角度看keep-alive 緩存還與router-view內(nèi)部的狀態(tài)管理深度耦合。在 src/components/view.js 中可以看到每個(gè)視圖有一個(gè)parent._routerViewCache緩存對(duì)象按name保存渲染過的組件當(dāng)組件樹因 keep-alive 而處于失活inactive狀態(tài)時(shí)第 42-56 行router-view會(huì)直接從緩存中取出上一次渲染的組件繼續(xù)渲染而不是渲染新的路由組件緩存同時(shí)保存了當(dāng)時(shí)的route與configProps以便恢復(fù)渲染時(shí)仍能正確傳參對(duì)應(yīng)注釋中提到的 issue #2301 的 props 傳遞修復(fù)。此外router-view還在 vnode 上掛載了registerRouteInstance、prepatch、init等鉤子第 72-103 行用于維護(hù)matched.instances中各組件的實(shí)例注冊(cè)。這在 keep-alive 組件被重新激活activated或同一組件實(shí)例被跨路由復(fù)用時(shí)能保證$route相關(guān)邏輯與handleRouteEntered見 src/util/route.js的進(jìn)入回調(diào)仍然正確觸發(fā)。六、小結(jié)router-view是 Vue Router 2 體系中連接路由狀態(tài)與組件渲染的樞紐要點(diǎn)說明組件類型函數(shù)式組件functional本身不產(chǎn)生 DOM核心職責(zé)渲染與當(dāng)前路徑匹配的路由組件name屬性string類型默認(rèn)default對(duì)應(yīng)components選項(xiàng)中的同名鍵嵌套渲染通過向上遍歷父鏈計(jì)算深度按route.matched[depth]逐層取記錄屬性傳遞非 name 屬性透?jìng)鳂I(yè)務(wù)數(shù)據(jù)通常走$route的params/query配合使用可與transition、keep-alive組合且keep-alive必須放在transition內(nèi)部理解這些機(jī)制后你便可以在單出口頁面、多命名視圖布局、嵌套路由頁面以及需要緩存與動(dòng)畫的復(fù)雜場(chǎng)景中準(zhǔn)確、高效地組織你的視圖出口。進(jìn)一步深入可閱讀官方英文 API 文檔docs/api/README.mdrouter-view一節(jié)組件實(shí)現(xiàn)源碼src/components/view.js命名視圖指南docs-gitbook/fr/essentials/named-views.md命名視圖示例examples/named-views/app.js路由記錄構(gòu)造邏輯src/util/route.js【免費(fèi)下載鏈接】vue-router The official router for Vue 2項(xiàng)目地址: https://gitcode.com/gh_mirrors/vu/vue-router創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考