欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中的執(zhí)行流程思路分析-流程圖

 更新時間:2022年12月03日 10:42:53   作者:石頭山_S  
這篇文章主要介紹了Vue3中的執(zhí)行流程思路分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

一. 前言

本文只在為大家梳理完整的vue3代碼執(zhí)行流程,從創(chuàng)建createApp到渲染為真實dom節(jié)點。

在讀后續(xù)文章時,請大家參考以下流程圖食用,好了廢話不多說,開整?。?!

(本文主要為梳理思路,不展示太多源碼。)

二. Vue3 思路分析

提示:一定要按照流程圖哦?。?!

1. createRender(options)

我們創(chuàng)建vue3時,最常見的一個api就是createApp,但是在執(zhí)行createRender時,createApp還沒有被創(chuàng)建,那該方法是干什么的呢,傳入的參數(shù)有是什么呢?我們接著往下看。

options:源碼中也叫做 nodeOps,其實就是vue3自己重新封裝的一些dom操作,例如insert、remove、createElement等,在pc端,其實就是利用domcument下的一些原生方法實現(xiàn)

優(yōu)點:那就有人要問了,為什么要重新封裝

首先有這么幾點好處:

  • 1.封裝后使用更清楚簡短,方便調(diào)用
  • 2.最重要的一點,那就是將vue的渲染工作與dom操作完全解耦,這樣更適合多端操作,只需要重入對應的nodeOps即可,自己重新封裝對應的dom操作方法,比如移動端等

從流程圖來看,調(diào)用該方法之后,返回三個Api,其中我們只關(guān)心兩個重要的也是常用的createApp、render
我們繼續(xù)往下看。

2. createApp

這個方法大家應該都不陌生,該方法傳入一個根組件rootComponent,但是并沒有做任何處理,在該方法中主要任務創(chuàng)建了一個全局對象app。

我們來看下app中常見的幾個api

App

  • use: 用來注冊插件,為vue實現(xiàn)擴展,如vueRouter、vuex、pinia等
  • component: 用來注冊全局組件,可以在任意組件中使用
  • 注意:以上方法都應該在mount掛載之前執(zhí)行
  • mount: 這一步也就是最關(guān)鍵的一部,開始執(zhí)行將組件渲染的第一步,我們繼續(xù)往下看

3. app.mount(‘#app’)

從流程圖中我們可以看到,掛載中主要執(zhí)行了兩個操作

  • 1.createVNode
  • 首先將我們傳入的根組件傳入到createVNode方法中,將組件包裝成vnode對象并且返回
  • 2.render(vnode, rootContainer)
  • 此處的render就是在前邊執(zhí)行createRender時返回的方法,我們在此處繼續(xù)執(zhí)行它,并且傳入兩個參數(shù),第一個是我們包裝后的rootComponent,第二個是掛載傳入真實domrootContainer

好了,mount執(zhí)行完畢,我們進入到render中繼續(xù)向下執(zhí)行

4. render(vnode, container)

在此方法中,做了一個最重要的工作就是將已經(jīng)渲染的vnode,也可以稱之為舊的vnode保存到container._vnode上,然后調(diào)用

patch(container._vnode|| null, vnode)

這樣,就形成了新舊vnode,也就有了diff的說法,讓我們進入到patch方法中。

5. patch(n1, n2, container)

patch中文意思打補丁,也就描述了他的用法,對比新舊vnode,也就是我們常說的diff算法,將新的vnode渲染到真實dom中。

該方法中主要分為了兩大分支,當然還有其它,我們就先忽略,跟著主線走下去

  • 1.processComponent
  • 當傳入的n2為組件時進入這個分支
  • 2.processElement
  • 當傳入的n2為元素類型時走該分支

我們先進入processComponent來對傳入的rootComponent進行處理

6. processComponent

該方法中又出現(xiàn)了兩個分支

  • mountComponent: 在第一次掛載時執(zhí)行update
  • Component: 組件跟新時執(zhí)行

我們接著往下看

7. mountComponent

該組件中執(zhí)行了三個主要的方法,我們一個個來看

  • createInstance:首先是創(chuàng)建實例,我們自定義的每個組件第一次渲染時都會走該分支,為每個組件定義了一個組件實例instance,因此vue3中就有了一個方法getCurrentInstance來訪問每個組件的實例。
  • setupComponent:這一步非常重要,該方法接受一個參數(shù),也就是剛剛創(chuàng)建的組件實例,在這一步中,調(diào)用了我們傳入的setup,所以,我們調(diào)用的所有方法,也就是在這被執(zhí)行,比如reactive,ref,生命hook,watch,computed等,之后將setup調(diào)用的結(jié)果保存到instance中的setupState屬性中。
  • setupRenderEffect:在一切準備工作都做完之后,接下來就該進行渲染,我們繼續(xù)進入到該方法中。

8. setupRenderEffect

該方法中創(chuàng)建了一個componentUpdateFn組件更新函數(shù),也就是在這,實現(xiàn)了真正的響應式處理,在setupComponent中,執(zhí)行了setup,在這我們對數(shù)據(jù)進行了響應式處理,利用reactive/refs對數(shù)據(jù)實現(xiàn)了處理,在get中收集依賴,set中更新依賴。

在創(chuàng)建好componentUpdateFn方法之后,我們創(chuàng)建了一個新的對象

new ReactiveEffect(componentUpdateFn),之后我們執(zhí)行返回對象的run方法,其中執(zhí)行了傳入的componentUpdateFn函數(shù),在componentUpdateFn中,我們首先對組件的render或者template進行處理,也就對我們用到了響應式數(shù)據(jù)進行了get,由此,將ReactiveEffect收集到對應數(shù)據(jù)的依賴中,在每次數(shù)據(jù)修改時,執(zhí)行componentUpdateFn,之后,在掛載函數(shù)中繼續(xù)執(zhí)行patch,傳入處理后的render或者temeplate,至此回到patch中,進行遞歸。

9. patch

此時,傳入的是根標簽包裝后的vnode,所以,此次走的分支為processElement,讓我們跟著流程圖繼續(xù)往下看。

10. processElement mountElement

在該方法中,我們利用我們傳入的nodeOpts,也就是dom操作方法,將vnode渲染為真實的dom,此時,終于將組件渲染到頁面上,同時將轉(zhuǎn)換的真實dom存放在vnode.el上。

patchElement
該方法也就是diff算法的核心,當組件更新之后,通過diff算法,將新的vnode渲染到頁面上。

三. 結(jié)尾

至此,vue3從創(chuàng)建到渲染的所有流程執(zhí)行結(jié)束,在數(shù)據(jù)更新之后,我們通過執(zhí)行依賴,也就是componentUpdateFn函數(shù),重復之前的步驟,重新執(zhí)行組件的render函數(shù)獲取根標簽,傳遞給patch,然后更新頁面,一直重復該過程。也就實現(xiàn)了頁面的改變。直到網(wǎng)頁關(guān)閉。

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)二級導航欄效果

    vue實現(xiàn)二級導航欄效果

    這篇文章主要為大家詳細介紹了vue實現(xiàn)二級導航欄效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-10-10
  • vue引用CSS樣式實現(xiàn)手機充電效果

    vue引用CSS樣式實現(xiàn)手機充電效果

    這篇文章主要介紹了vue引用CSS樣式實現(xiàn)手機充電效果,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2024-01-01
  • vue2基本響應式實現(xiàn)方式之讓數(shù)組也變成響應式

    vue2基本響應式實現(xiàn)方式之讓數(shù)組也變成響應式

    這篇文章主要介紹了vue2基本響應式實現(xiàn)方式之讓數(shù)組也變成響應式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue.js?element-plus使用圖標不顯示問題的解決方式

    Vue.js?element-plus使用圖標不顯示問題的解決方式

    近期在學習Vue時用elementUI時發(fā)現(xiàn)圖標在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標不顯示問題的解決方式,需要的朋友可以參考下
    2022-09-09
  • 使用vue開發(fā)移動端管理后臺的注意事項

    使用vue開發(fā)移動端管理后臺的注意事項

    這篇文章主要介紹了使用vue開發(fā)移動端管理后臺的注意事項,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • vue3限制table表格選項個數(shù)的解決方法

    vue3限制table表格選項個數(shù)的解決方法

    這篇文章主要為大家詳細介紹了vue3限制table表格選項個數(shù)的解決方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue+Element實現(xiàn)頁面生成快照截圖

    Vue+Element實現(xiàn)頁面生成快照截圖

    這篇文章主要為大家詳細介紹了Vue如何結(jié)合Element實現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-03-03
  • Vue?webpack的基本使用示例教程

    Vue?webpack的基本使用示例教程

    這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • 解決vue admin element noCache設(shè)置無效的問題

    解決vue admin element noCache設(shè)置無效的問題

    今天小編就為大家分享一篇解決vue admin element noCache設(shè)置無效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫

    使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫

    這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)點擊按鈕小球加入購物車動畫,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下
    2024-03-03

最新評論