Vue3源碼系列（七）：揭開(kāi)createApp的神秘面紗——一切的起點(diǎn)
一、引言
當(dāng)我們使用Vue3構(gòu)建前端項(xiàng)目時(shí)，都會(huì)通過(guò)createApp這個(gè)API來(lái)創(chuàng)建應(yīng)用程序?qū)嵗＝裉?，我們將一起深入探討createApp背后的故事，揭開(kāi)它的神秘面紗。
二、關(guān)鍵類(lèi)型的了解
1. App：createApp返回的實(shí)例。它包含了項(xiàng)目常用方法，支持鏈?zhǔn)秸{(diào)用，兼容Vue2的filter，并提供了內(nèi)部屬性。
2. AppConfig：應(yīng)用配置。它包含了Vue2中常見(jiàn)的選項(xiàng)，如組件合并策略、全局屬性和編譯器設(shè)置等。
3. AppContext：上下文對(duì)象。它記錄了組件、指令等信息，支持熱更新和Vue2 filter的兼容。
4. Plugin：與Vue2類(lèi)似，Plugin和install方法定義清晰，可以是函數(shù)或?qū)ο蟆?/p>
5. CreateAppFunction：這是createApp函數(shù)的類(lèi)型，它接受根組件和可選的根組件屬性。
三、createApp的起源
實(shí)際上，Vue3的起點(diǎn)就在于createApp API。這個(gè)API定義在packages/runtime-dom/src/index.ts文件中。我們的探索之旅就從這里開(kāi)始。
四、createApp的內(nèi)部流程
1. createApp：乍看之下，createApp似乎在renderer上，實(shí)際上它是由createRenderer創(chuàng)建的。createRenderer在packages/runtime-core/src/renderer.ts中定義，它調(diào)用了baseCreateRenderer。這個(gè)函數(shù)包含了diff操作方法，但核心的createApp源自createAppAPI。
2. createAppAPI：在baseCreateRenderer的返回值中，createAppAPI接收了render和hydrate方法，將它們組合成我們熟知的createApp。這個(gè)函數(shù)大約有200行，邏輯清晰地構(gòu)造了應(yīng)用實(shí)例。
五、展望未來(lái)
盡管我們已經(jīng)對(duì)createApp的基本創(chuàng)建過(guò)程有所了解，但render函數(shù)的詳細(xì)過(guò)程尚未揭示。接下來(lái)，我們將進(jìn)一步剖析render的執(zhí)行機(jī)制，探尋其在Vue3中的工作原理和重要性。
createApp作為Vue3的起點(diǎn)，是我們接觸和使用Vue3的橋梁。了解其背后的原理和流程，有助于我們更深入地理解Vue3的架構(gòu)和設(shè)計(jì)思想。Vue項(xiàng)目創(chuàng)建全流程解析：從零搭建至完整應(yīng)用
====================
一、項(xiàng)目初始化
在不依賴(lài)vue-cli腳手架的情況下，我們?nèi)绾伍_(kāi)始一個(gè)全新的Vue項(xiàng)目呢？新建項(xiàng)目文件夾，這里我們稱(chēng)其為“my-vue-project”。接著，使用VSCode打開(kāi)此項(xiàng)目文件夾。
二、基礎(chǔ)配置
在項(xiàng)目根目錄下，進(jìn)行初始化操作，生成基本的文件結(jié)構(gòu)。這包括安裝必要的npm包，如webpack、ant-design-vue、vue-router和vuex等。這些包將為我們提供構(gòu)建應(yīng)用所需的核心功能。
三、Webpack配置
Webpack是前端開(kāi)發(fā)的強(qiáng)大工具，用于模塊捆綁和代碼優(yōu)化。我們需要配置webpack.config.js文件，來(lái)定制我們的構(gòu)建過(guò)程。在這之前，先安裝一些必要的依賴(lài)，如模板解析依賴(lài)、樣式依賴(lài)（css-loader）以及解析ES6語(yǔ)法的依賴(lài)。還有一個(gè)重要的插件，HtmlWebpackPlugin，它可以簡(jiǎn)化HTML文件的創(chuàng)建，為我們的webpack捆綁軟件提供服務(wù)。
四、依賴(lài)解析與配置
完成Webpack的基礎(chǔ)配置后，我們需要安裝解析依賴(lài)，并修改package.json文件，確保所有依賴(lài)都已正確安裝。為了支持多種JavaScript版本，我們還需要配置Babel，并創(chuàng)建.babelrc文件。如果在編譯過(guò)程中遇到錯(cuò)誤，很可能是因?yàn)槟承┮蕾?lài)未被正確安裝，此時(shí)需要檢查并重新安裝相關(guān)依賴(lài)。
五、主要文件介紹
在一個(gè)完整的Vue項(xiàng)目中，有幾個(gè)核心文件是必不可少的。app.vue是我們的主組件，它包含了應(yīng)用的主要結(jié)構(gòu)和邏輯。index.js是應(yīng)用的入口文件，這里我們進(jìn)行Vue實(shí)例的創(chuàng)建和配置。還有html文件，它是我們的應(yīng)用界面。至于項(xiàng)目文件夾結(jié)構(gòu)，大致會(huì)包含混入(mixins)相關(guān)文件，這是一種在Vue中分發(fā)可復(fù)用功能的高度靈活的方式。
創(chuàng)建一個(gè)Vue項(xiàng)目并不簡(jiǎn)單，但只要我們按照上述步驟來(lái)操作，就可以順利完成項(xiàng)目的搭建。過(guò)程中可能會(huì)遇到各種問(wèn)題和挑戰(zhàn)，但只要我們不斷學(xué)習(xí)和探索，就一定能夠克服。希望這篇文章能幫助到你，讓你更深入地理解Vue項(xiàng)目的創(chuàng)建和配置過(guò)程。
項(xiàng)目結(jié)構(gòu)與模塊功能解析
一、mixins文件夾下的ajax請(qǐng)求方法
在mixins文件夾下，我們可以編寫(xiě)各種用于調(diào)用ajax請(qǐng)求的方法。這些方法用于向服務(wù)器發(fā)送請(qǐng)求并獲取數(shù)據(jù)。在需要調(diào)用這些方法請(qǐng)求數(shù)據(jù)的文件中，可以直接通過(guò)類(lèi)似this.getAllDemoClass();的語(yǔ)句來(lái)調(diào)用相應(yīng)的方法。例如，getCourseList文件中就包含了請(qǐng)求所需的參數(shù)以及請(qǐng)求完成后獲取的數(shù)據(jù)處理邏輯。二、components通用組件存放文件夾
components文件夾用于存放項(xiàng)目通用的組件。在這里，我們可以封裝項(xiàng)目所需的各類(lèi)組件，并在components下的index.js文件中將這些組件對(duì)外暴露。在使用組件的文件中，只需引用components即可輕松調(diào)用所需組件，極大提高了代碼的可維護(hù)性和復(fù)用性。三、引入第三方庫(kù)
為了增強(qiáng)項(xiàng)目的功能和用戶(hù)體驗(yàn)，我們引入了多個(gè)優(yōu)秀的第三方庫(kù)。 我們引入了ant-design-vue，這是一個(gè)基于Vue的UI框架，提供了豐富的高質(zhì)量組件，可幫助我們快速構(gòu)建界面。具體引入操作可參考官方文檔。 我們引入了VueRouter，用于實(shí)現(xiàn)頁(yè)面的路由功能。路由配置文件位于router/index.js中，通過(guò)配置該文件，我們可以輕松實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)。 為了進(jìn)行狀態(tài)管理，我們引入了vuex。在store/index.js中，我們定義了項(xiàng)目的全局狀態(tài)，并在news/index.vue中使用這些狀態(tài)。通過(guò)vuex，我們可以方便地管理項(xiàng)目的狀態(tài)數(shù)據(jù)，實(shí)現(xiàn)組件之間的數(shù)據(jù)共享。四、頁(yè)面頂部進(jìn)度條插件Nprogress的使用
五、Vue源碼初始化過(guò)程解析
在Vue的源碼初始化過(guò)程中，_init是一個(gè)非常重要的階段。在這個(gè)階段中，inject的初始化過(guò)程是比provide更早，比initState（包括initProps、initMethods、initComputed、initWatch）都要早。這是因?yàn)閂ue的組件是層級(jí)創(chuàng)建的，先創(chuàng)建父組件再去創(chuàng)建子組件。如果上級(jí)組件定義了provide，那么下級(jí)組件都可以通過(guò)inject獲取到這些值。而methods、computed、watch在初始化時(shí)也有可能會(huì)用到inject的值，所以需要將inject的初始化放在最先。一、initInjections原理
在Vue 3中，initInjections是一個(gè)初始化過(guò)程，用于注入props、attrs等。在組件內(nèi)部，可以通過(guò)特定的方式獲取和使用這些注入的數(shù)據(jù)。initInjections的工作原理是通過(guò)查找并解析組件內(nèi)部的inject選項(xiàng)，將對(duì)應(yīng)的值注入到組件實(shí)例中。
二、beforeCreate生命周期為什么不能訪問(wèn)數(shù)據(jù)，能訪問(wèn)到什么
在Vue 3的beforeCreate生命周期階段，組件實(shí)例還未完全創(chuàng)建，因此無(wú)法訪問(wèn)到組件的數(shù)據(jù)。在這個(gè)階段，只能訪問(wèn)到組件的實(shí)例本身以及一些基本的上下文信息，如props、events等。在這個(gè)階段，可以進(jìn)行一些初始化的操作，但無(wú)法操作組件的數(shù)據(jù)和DOM。
三、initEvents是掛在父組件執(zhí)行還是當(dāng)前組件this.$emit的組件
initEvents是在父組件中執(zhí)行的。在Vue 3中，父組件可以通過(guò)props向子組件傳遞，子組件通過(guò)$emit觸發(fā)，將傳遞給父組件。initEvents的作用是在父組件中注冊(cè)子組件觸發(fā)的，以便父組件能夠處理這些。initEvents是掛在父組件上執(zhí)行的。
四、有el選項(xiàng)為什么可以不需要$mount
在Vue 3中，el選項(xiàng)可以用于指定根DOM元素，而$mount方法則是用于手動(dòng)掛載組件到DOM上。如果設(shè)置了el選項(xiàng)，Vue會(huì)自動(dòng)在初始化時(shí)調(diào)用$mount方法將組件掛載到指定的DOM元素上，因此不需要手動(dòng)調(diào)用$mount方法。這樣可以簡(jiǎn)化代碼，提高開(kāi)發(fā)效率。
五、處理實(shí)現(xiàn)及測(cè)試用例
在Vue 3中，處理是通過(guò)onEvent函數(shù)來(lái)實(shí)現(xiàn)的。在組件的setup函數(shù)中，可以通過(guò)onEvent函數(shù)注冊(cè)處理程序。當(dāng)觸發(fā)時(shí)，對(duì)應(yīng)的處理程序會(huì)被調(diào)用。在實(shí)現(xiàn)過(guò)程中，需要對(duì)prop中的進(jìn)行特殊處理，判斷是否符合/^on[A-Z]/i的格式，如果是，則進(jìn)行注冊(cè)。Vue 3會(huì)進(jìn)行緩存，以提高性能。
在測(cè)試用例中，需要模擬組件的渲染過(guò)程，包括initInjections、beforeCreate、initEvents等階段的操作。同時(shí)需要驗(yàn)證的注冊(cè)和觸發(fā)過(guò)程是否正常工作。針對(duì)上述實(shí)現(xiàn)原理，可以編寫(xiě)相應(yīng)的測(cè)試用例來(lái)驗(yàn)證功能的正確性。
本文詳細(xì)分析了Vue 3源碼中props、emit、處理等功能的實(shí)現(xiàn)原理，包括initInjections、beforeCreate、initEvents等階段的操作以及的注冊(cè)和觸發(fā)過(guò)程。同時(shí)介紹了有el選項(xiàng)為什么可以不需要$mount的問(wèn)題。在測(cè)試用例中，需要模擬組件的渲染過(guò)程并驗(yàn)證功能的正確性。希望本文能夠幫助讀者深入理解Vue 3源碼中的相關(guān)功能實(shí)現(xiàn)。 Vue源碼及組件開(kāi)發(fā)分析
一、緩存實(shí)現(xiàn)與組件屬性處理
緩存實(shí)現(xiàn)機(jī)制
在Vue中，緩存機(jī)制是性能優(yōu)化的關(guān)鍵一環(huán)。對(duì)于組件的緩存處理，我們可以通過(guò)在當(dāng)前的el元素上增加一個(gè)屬性如`el._vei`來(lái)實(shí)現(xiàn)緩存的存儲(chǔ)和使用。當(dāng)這個(gè)屬性存在時(shí)，我們直接使用它；如果不存在，則創(chuàng)建并存儲(chǔ)進(jìn)去。這樣的設(shè)計(jì)確保了組件狀態(tài)的持久性和復(fù)用性，提高了渲染效率。
處理與父子組件通信
在Vue框架中，處理和父子組件間的通信是非常常見(jiàn)的功能。通過(guò)props和emit，我們可以輕松實(shí)現(xiàn)這兩大功能。
二、父子組件通信中的props與emit實(shí)現(xiàn)
問(wèn)題分析與解決
在父子組件通信過(guò)程中，我們主要依賴(lài)props和emit。針對(duì)一些常見(jiàn)的問(wèn)題，我們有以下解決方案：
1. 想要在子組件的setup函數(shù)中第一個(gè)參數(shù)使用props：在調(diào)用setup函數(shù)時(shí)，直接傳入當(dāng)前組件的props即可。
2. 關(guān)于render中this的問(wèn)題：在代理中加入判斷，檢查某個(gè)key是否存在于當(dāng)前instance的props中。
3. 關(guān)于props的只讀性問(wèn)題：可以使用之前實(shí)現(xiàn)的apishallowReadonly來(lái)確保props的只讀性。
在完成上述操作后，我們的測(cè)試用例應(yīng)該能夠無(wú)問(wèn)題地運(yùn)行。
三、vm._render()如何生成虛擬DOM
在Vue源碼中，`vm._render`是生成虛擬DOM的關(guān)鍵函數(shù)。其工作流程涉及到`createElement`函數(shù)，這個(gè)函數(shù)位于`../vdom/create-element`文件中。通過(guò)`newVnode`創(chuàng)建虛擬DOM，這是一個(gè)映射真實(shí)DOM的對(duì)象，它包含了多個(gè)屬性，用以指導(dǎo)真實(shí)DOM的渲染。Vue采用虛擬DOM而非直接渲染真實(shí)DOM的原因是為了實(shí)現(xiàn)更高效的狀態(tài)變更檢測(cè)，以及后續(xù)的diff和patch過(guò)程。
四、Vue2.0源碼解析
對(duì)于Vue2.0的源碼，其基本目錄結(jié)構(gòu)清晰明了。通過(guò)找到`initState()`函數(shù)，我們可以了解響應(yīng)式初始化的入口。為了更好地理解Vue源碼中的其他部分，深入研究其他關(guān)鍵函數(shù)和模塊也是非常有必要的。
五、動(dòng)態(tài)路由與動(dòng)態(tài)菜單的安全性問(wèn)題及解決方案
在傳統(tǒng)的Vue項(xiàng)目開(kāi)發(fā)中，我們往往將路由和菜單寫(xiě)在固定的文件中，如`route/index.js`。然而這種做法存在一些問(wèn)題：一是安全性不足，二是靜態(tài)路由內(nèi)容過(guò)多導(dǎo)致管理困難。針對(duì)這些問(wèn)題，我們可以考慮實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)菜單。后端可以更加嚴(yán)格地控制前端的路由權(quán)限，實(shí)現(xiàn)更為細(xì)粒度的權(quán)限管理。通過(guò)插件式開(kāi)發(fā)框架，我們可以實(shí)現(xiàn)免費(fèi)源碼的靈活使用和定制，進(jìn)一步提高開(kāi)發(fā)效率和安全性。
Vue源碼及其組件開(kāi)發(fā)涉及多個(gè)方面，包括緩存處理、處理、父子組件通信、虛擬DOM生成以及動(dòng)態(tài)路由和菜單的安全性問(wèn)題等。深入理解這些方面并靈活應(yīng)用，將有助于我們更好地開(kāi)發(fā)高效的Vue應(yīng)用。動(dòng)態(tài)路由控制與菜單生成：Vue項(xiàng)目中的靈活配置
一、動(dòng)態(tài)路由控制的必要性
在現(xiàn)代化的前端項(xiàng)目中，隨著業(yè)務(wù)邏輯的日益復(fù)雜，固定路由的配置方式已不能滿(mǎn)足需求。通過(guò)后端獲取數(shù)據(jù)菜單和路由信息json，動(dòng)態(tài)添加路由并生成菜單，成為了必然趨勢(shì)。這種方式不僅使菜單與動(dòng)態(tài)路由內(nèi)容相匹配，而且使后端能夠控制前端的菜單和路由。
二、項(xiàng)目結(jié)構(gòu)與公共頁(yè)面
我們的項(xiàng)目通常只需內(nèi)置幾個(gè)無(wú)需權(quán)限的公共頁(yè)面，如登錄、注冊(cè)、忘記密碼和404錯(cuò)誤頁(yè)面。這些頁(yè)面組件寫(xiě)好之后，放置在view視圖下，通過(guò)動(dòng)態(tài)路由和菜單匹配，實(shí)現(xiàn)對(duì)插件的訪問(wèn)控制。這樣，我們減少了route/index.js的內(nèi)容寫(xiě)入，同時(shí)也有利于減少內(nèi)存占用。
三、動(dòng)態(tài)路由與菜單權(quán)限的完善
通過(guò)動(dòng)態(tài)路由的形式，我們生成的菜單權(quán)限更加完善。我們不僅依靠菜單與路由守衛(wèi)攔截實(shí)現(xiàn)鑒權(quán)，還可以通過(guò)動(dòng)態(tài)路由實(shí)現(xiàn)動(dòng)態(tài)加載vue文件，控制更加精細(xì)。動(dòng)態(tài)路由還有利于項(xiàng)目的分工合作，不同的開(kāi)發(fā)人員可以分別負(fù)責(zé)不同的組件開(kāi)發(fā)，然后在具備基本的javascript庫(kù)的情況下，進(jìn)行動(dòng)態(tài)路由的掛載和菜單生成，完成項(xiàng)目的合作。
四、遠(yuǎn)程vue文件加載的優(yōu)勢(shì)
在非node環(huán)境的開(kāi)發(fā)條件下，遠(yuǎn)程的vue文件加載為我們提供了極大的便利。我們可以及時(shí)修改文件，以滿(mǎn)足項(xiàng)目需求，同時(shí)也有利于保障安全。當(dāng)使用Vue 2.6.11和Vue-route 3.2.0時(shí)，遠(yuǎn)程文件加載功能能夠大大提升開(kāi)發(fā)效率和項(xiàng)目安全性。
五、動(dòng)態(tài)路由與菜單的管理
我們通過(guò)后端返回的路由json數(shù)據(jù)，生成符合靜態(tài)內(nèi)容數(shù)組的路由。在登錄時(shí)獲取后端返回的菜單信息，進(jìn)行菜單的生成。接著是如何管理這些動(dòng)態(tài)路由和菜單項(xiàng)目。我們可以通過(guò)搭建一個(gè)組件，添加路由信息和管理菜單來(lái)實(shí)現(xiàn)二者的動(dòng)態(tài)匹配。只需對(duì)路由信息進(jìn)行添加和修改，并與菜單進(jìn)行匹配，即可實(shí)現(xiàn)簡(jiǎn)單的路由掛載。數(shù)據(jù)提交至后端保存后，組件只需放置在views文件夾下，添加路由進(jìn)行文件加載即可實(shí)現(xiàn)路由管理。
六、登錄頁(yè)面配置與模擬數(shù)據(jù)
在靜態(tài)文件夾下創(chuàng)建menu.json和route.json兩個(gè)模擬服務(wù)器登錄時(shí)返回的數(shù)據(jù)的json文件。在登錄頁(yè)面模擬獲取這些數(shù)據(jù)后，通過(guò)相應(yīng)的方法生成菜單和路由數(shù)組并進(jìn)行循環(huán)添加，然后執(zhí)行路由跳轉(zhuǎn)。而對(duì)于一些無(wú)需權(quán)限即可訪問(wèn)的頁(yè)面如登錄、注冊(cè)等，仍應(yīng)以靜態(tài)的方式寫(xiě)在route/index.js文件中。這樣既能保證項(xiàng)目的完整性又能減少不必要的錯(cuò)誤發(fā)生。
通過(guò)上述方式實(shí)現(xiàn)動(dòng)態(tài)路由控制和菜單生成后，我們可以更加靈活地管理前端項(xiàng)目，提高開(kāi)發(fā)效率并滿(mǎn)足各種復(fù)雜的業(yè)務(wù)需求。Vue路由配置與防止刷新后丟失問(wèn)題
一、初始數(shù)據(jù)配置
在Vue項(xiàng)目中，我們首先進(jìn)行必要的初始數(shù)據(jù)配置。從vue和vue-router庫(kù)中導(dǎo)入必要的模塊，并使用VueRouter。這里我們配置了四個(gè)路由：登錄、注冊(cè)、找回密碼和404頁(yè)面。每個(gè)路由都有對(duì)應(yīng)的路徑、名稱(chēng)和需要加載的模板文件。每個(gè)路由還包含元數(shù)據(jù)，如是否全屏顯示和網(wǎng)站標(biāo)題。
二、VueRouter實(shí)例化
基于上述配置，我們實(shí)例化VueRouter，將配置的路由傳入。這樣，我們的應(yīng)用就可以根據(jù)訪問(wèn)的URL來(lái)加載對(duì)應(yīng)的組件了。
三, 路由守衛(wèi)與頁(yè)面標(biāo)題設(shè)置
為了處理刷新后頁(yè)面標(biāo)題丟失的問(wèn)題，我們使用VueRouter的beforeEach路由守衛(wèi)。每當(dāng)路由發(fā)生切換時(shí)，該守衛(wèi)都會(huì)被觸發(fā)。在這里，我們將頁(yè)面的標(biāo)題設(shè)置為當(dāng)前路由的meta中的web_title，確保頁(yè)面標(biāo)題與當(dāng)前路由對(duì)應(yīng)。通過(guò)console.log輸出當(dāng)前路由信息，便于開(kāi)發(fā)者了解和調(diào)試。
四、解決刷新后丟失問(wèn)題
刷新后丟失問(wèn)題通常是由于單頁(yè)應(yīng)用(SPA)的特性導(dǎo)致的。在SPA中，頁(yè)面跳轉(zhuǎn)是通過(guò)改變URL來(lái)實(shí)現(xiàn)的，而不是傳統(tǒng)的頁(yè)面刷新。當(dāng)頁(yè)面刷新時(shí)，瀏覽器會(huì)重新加載當(dāng)前URL對(duì)應(yīng)的組件，而不是保持當(dāng)前狀態(tài)。為了解決這個(gè)問(wèn)題，我們可以使用Vuex來(lái)管理全局狀態(tài)，或者使用瀏覽器的localStorage或sessionStorage來(lái)保存和恢復(fù)狀態(tài)。還可以使用第三方插件如vue-session等來(lái)幫助管理狀態(tài)。通過(guò)這些方法，我們可以確保即使在刷新后，用戶(hù)的狀態(tài)和頁(yè)面內(nèi)容也不會(huì)丟失。
五、優(yōu)化與拓展
在實(shí)際應(yīng)用中，我們可能還需要對(duì)路由配置進(jìn)行更多的優(yōu)化和拓展。例如，為路由添加重定向、嵌套路由等。還可以結(jié)合Vue的動(dòng)態(tài)組件和懶加載技術(shù)，實(shí)現(xiàn)更加靈活和高效的頁(yè)面加載。通過(guò)這些技術(shù)，我們可以構(gòu)建出更加健壯和用戶(hù)體驗(yàn)更好的Vue應(yīng)用。
本文從Vue路由的初始配置、VueRouter實(shí)例化、路由守衛(wèi)與頁(yè)面標(biāo)題設(shè)置以及解決刷新后丟失問(wèn)題等方面進(jìn)行了詳細(xì)的闡述。希望這些內(nèi)容能夠幫助你更好地理解和使用Vue路由，提升你的開(kāi)發(fā)效率和用戶(hù)體驗(yàn)。在app.vue文件中定義路由生成方法的詳細(xì)指南
=========================
一、初始化路由生成方法
在app.vue文件的methods方法中，我們需要定義一個(gè)路由生成方法，用以在必要時(shí)動(dòng)態(tài)添加路由。這個(gè)方法的主要作用是在刷新頁(yè)面時(shí)防止路由丟失，并在后端返回路由數(shù)據(jù)后進(jìn)行路由的初始化。
示例代碼如下：
```javascript
init_route() {
// 初始化路由，防止刷新丟失
if (sessionStorage.getItem("route_data") != null) {
// 只有后端已經(jīng)返回?cái)?shù)據(jù)的情況下才允許生成路由
const route_data = JSON.parse(sessionStorage.getItem("route_data")); // 獲取路由信息
let data = []; // 默認(rèn)路由數(shù)組
// 生成路由信息
for (let index = 0; index < route_data.length; index++) {
data[index] = {
path: route_data[index].path, // 訪問(wèn)url
name: route_data[index].name, // 路由名稱(chēng)
component: resolve => require([`@/views/${route_data[index].component}`], resolve), // 加載模板文件
meta: {
show_site: route_data[index].meta.show_site, // 是否全屏顯示
web_title: route_data[index].meta.web_title // 網(wǎng)站標(biāo)題
}
};
}
// 循環(huán)添加路由
for (let index = 0; index < data.length; index++) {
this.$router.addRoute(data[index]);
}
}
}
```
二、在mounted中調(diào)用方法
為了防止刷新時(shí)路由丟失導(dǎo)致錯(cuò)誤，我們需要在組件的mounted生命周期鉤子中調(diào)用這個(gè)路由生成方法。這樣，即使在頁(yè)面刷新后，我們也能確保路由的正確性。
三、解決刷新后的默認(rèn)路由問(wèn)題
在刷新之后，有時(shí)默認(rèn)會(huì)跳轉(zhuǎn)到path:''的一個(gè)路由界面。解決這個(gè)問(wèn)題的方法是刪除這個(gè)path:''的路由。
四、動(dòng)態(tài)路由跳轉(zhuǎn)時(shí)的錯(cuò)誤處理
在動(dòng)態(tài)路由跳轉(zhuǎn)時(shí)，有時(shí)會(huì)遇到Cannot find module x的錯(cuò)誤。這是因?yàn)閞oute3.0版本后，import方式不支持傳入變量。解決這個(gè)問(wèn)題的方法是改用require方式來(lái)加載組件。
五、項(xiàng)目源碼參考
本次動(dòng)態(tài)vue項(xiàng)目的開(kāi)發(fā)已經(jīng)基本完成。該項(xiàng)目基于element-ui進(jìn)行開(kāi)發(fā)。如有需要，可私信回復(fù)“unit”獲取源碼參考。在實(shí)際開(kāi)發(fā)過(guò)程中，建議根據(jù)具體項(xiàng)目需求和團(tuán)隊(duì)約定，對(duì)代碼進(jìn)行適當(dāng)調(diào)整和優(yōu)化，以確保項(xiàng)目的順利進(jìn)行。
本文詳細(xì)闡述了如何在app.vue文件的methods方法中定義路由生成方法，包括初始化路由、在mounted中調(diào)用方法、解決刷新后的默認(rèn)路由問(wèn)題、動(dòng)態(tài)路由跳轉(zhuǎn)時(shí)的錯(cuò)誤處理以及項(xiàng)目源碼參考。希望本文能幫助讀者更好地理解和應(yīng)用動(dòng)態(tài)路由在vue項(xiàng)目開(kāi)發(fā)中的實(shí)際應(yīng)用。Vue 3.2源碼淺析：createApp與mount的協(xié)同工作
一、引言
在Vue 3.2版本中，createApp()和mount()函數(shù)扮演著極其重要的角色，它們共同負(fù)責(zé)初始化并掛載Vue應(yīng)用。這兩個(gè)函數(shù)是整個(gè)框架的精髓，深入理解它們有助于我們更好地掌握Vue 3.2的內(nèi)部運(yùn)作機(jī)制。
二、createApp()函數(shù)解析
createApp()函數(shù)是Vue應(yīng)用的入口點(diǎn)，它負(fù)責(zé)處理應(yīng)用的初始化流程。在createApp()的核心代碼中，主要完成了以下三個(gè)步驟：
1. 創(chuàng)建了一個(gè)Vue應(yīng)用實(shí)例。
2. 處理應(yīng)用的全局配置和插件。
3. 返回了一個(gè)包含mount方法的組件實(shí)例。
通過(guò)這個(gè)函數(shù)，我們可以將Vue應(yīng)用與特定的組件關(guān)聯(lián)起來(lái)，為后續(xù)的掛載和渲染做好準(zhǔn)備。
三、mount()函數(shù)概覽
相對(duì)于createApp()的簡(jiǎn)潔，mount()函數(shù)的代碼更為復(fù)雜。它的主要職責(zé)是將應(yīng)用實(shí)例與DOM進(jìn)行掛載，以下是關(guān)鍵部分的概覽：
1. 通過(guò)normalizeContainer()獲取掛載點(diǎn)。
2. 調(diào)用自身的mount()方法，負(fù)責(zé)組件的掛載過(guò)程。
3. 在mount過(guò)程中，會(huì)調(diào)用render()函數(shù)創(chuàng)建VDOM的根節(jié)點(diǎn)。
4. render()函數(shù)與我們?cè)谌粘ｉ_(kāi)發(fā)中使用的Vue.render()不同，它在初始化時(shí)負(fù)責(zé)構(gòu)建視圖。
5. patch()函數(shù)作為diff算法的一部分，負(fù)責(zé)在初始化階段通過(guò)先序遍歷創(chuàng)建Vue實(shí)例和VNode，并將它們與DOM節(jié)點(diǎn)關(guān)聯(lián)起來(lái)。
6. mountComponent()部分主要關(guān)注實(shí)例的創(chuàng)建、初始化以及數(shù)據(jù)和VNode的雙向綁定。初始化流程涉及vue實(shí)例的構(gòu)建，以及setupRenderEffect()的執(zhí)行路徑。
四、createApp與mount的協(xié)同工作
createApp()和mount()函數(shù)共同完成了Vue應(yīng)用的構(gòu)建和掛載過(guò)程。通過(guò)createApp()函數(shù)創(chuàng)建Vue應(yīng)用實(shí)例并處理全局配置。然后，調(diào)用app.mount()方法開(kāi)始掛載過(guò)程，這個(gè)過(guò)程包括獲取掛載點(diǎn)、創(chuàng)建VDOM根節(jié)點(diǎn)、將Vue實(shí)例與VNode關(guān)聯(lián)起來(lái)等步驟。通過(guò)patch()函數(shù)將Vue實(shí)例和VNode與DOM節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)，完成組件的渲染和交互。
五、結(jié)語(yǔ)
通過(guò)對(duì)Vue 3.2源碼中的createApp()和mount()函數(shù)的解析，我們可以更深入地了解Vue應(yīng)用的初始化過(guò)程和掛載機(jī)制。這兩個(gè)函數(shù)是Vue框架的核心，掌握它們有助于我們更好地運(yùn)用Vue框架進(jìn)行開(kāi)發(fā)。
