Vue3初始化如何調(diào)用函數(shù)
Vue3初始化調(diào)用函數(shù)
createApp({}).mount(‘#app')入口文件 runtime-dom/src/index.tx
- createApp -> createRenderer -> createBaseRenderer(這里還創(chuàng)建了render函數(shù)以及一系列渲染時的函數(shù)) -> createAppAPI(返回了真正的createApp方法),返回了 實(shí)例 app,
- 然后 app.mount(“#app”) -> createVNode -> render(vnode,rootcontainier,isSVG) -> patch -> processComponent -> mountComponent(初次渲染)或者是updateComponent ->(createComponentInstance , setupComponent,setupRenderEffect)
- 對于setupComponent,有setup函數(shù)和沒有setup函數(shù)分情況處理,如果有就走setup函數(shù)處理,初始化props等需要傳遞給setup函數(shù)的參數(shù),調(diào)用setup,setupComponent->finishComponentSetup(在這里會處理 2.x版本的options選項(xiàng)初始化),
- 對于setupRenderEffect,執(zhí)行一系列生命鉤子函數(shù),創(chuàng)建渲染ReactiveEffect,并執(zhí)行了**effect.run()**方法
ReactiveEffect
類似于 vue2.x 的Watcher, computed,watch,渲染過程中componentUpdateFn也使用了 ReactiveEffect,
const effect = new ReactiveEffect(fn,…)后,除了計(jì)算屬性會在被訪問時才去調(diào)用effect.run()->調(diào)用fn(),在fn里訪問響應(yīng)式變量,收集依賴,其余的setupRenderEffect,watch,watchEffect,均會在創(chuàng)建ReactiveEffect后調(diào)用effect.run()收集依賴,其中
setupRenderEffect會訪問依賴的響應(yīng)變量watch(source,cb,options),會執(zhí)行訪問source的函數(shù),收集依賴watchEffect(fn),會自動執(zhí)行一次fn收集依賴effect(fn,options),其中options有個lazy:true選項(xiàng),表示不立即執(zhí)行fn函數(shù)收集依賴,返回一個run函數(shù),再次調(diào)用run(),執(zhí)行一次fn函數(shù),收集依賴
// 1.計(jì)算屬性
// computed.ts
// ComputedRefImpl類構(gòu)造函數(shù)調(diào)用了new ReactiveEffect
this.effect = new ReactiveEffect(getter, () => {
if (!this._dirty) {
this._dirty = true
triggerRefValue(this)
}
})
// 2. effect
// effect.ts
// effect函數(shù)中,可以接收第二個參數(shù)effect(fn,{lazy:true}),表示不立即執(zhí)行
const _effect = new ReactiveEffect(fn)
// 3. apiWatch.ts doWatch方法
// watch和watchEffect都是通過doWatch函數(shù)來,在這里調(diào)用new ReactiveEffect,然后根據(jù)不同情況執(zhí)行effect.run(),對于watchEffect就是//執(zhí)行器回調(diào),對于watch就是訪問監(jiān)聽的數(shù)據(jù),然后收集依賴
const effect = new ReactiveEffect(getter, scheduler)
// 4. render.ts
//在 setupRenderEffect中
const effect = (instance.effect = new ReactiveEffect(
componentUpdateFn,//更新組件函數(shù)
() => queueJob(update),
instance.scope // track it in component's effect scope
))
Vue3程序初始化流程
初始化
在vue3中,程序的初始化不再沿用vue2的new Vue()方法,而是使用了createApp。在createApp中發(fā)生了什么呢?
改寫的原因
createApp是一個Vue中的工廠函數(shù),以函數(shù)的方式進(jìn)行導(dǎo)入和調(diào)用。而函數(shù)式的好處是
1、消滅了原來掛載在Vue上的靜態(tài)方法,變成實(shí)例方法,可以減少內(nèi)存占用,便于tree-shaking,減小了打包體積;
2、因?yàn)楹瘮?shù)式和class裝飾器對ts的支持好,使用函數(shù)的方式調(diào)用,可以更好的支持ts,提高類型支持
3、根組件的api,如data要和子組件的api保持相同的格式,掛載從$mount改為mount,簡化了api并統(tǒng)一了api的一致性
4、new Vue中掛載的方法會造成全局污染,不能獨(dú)立出來,createApp可以相互獨(dú)立,并按需掛載。
流程實(shí)現(xiàn)
mount
const Vue = {
createApp(options) {
//返回app實(shí)例
return {
mount(selector){
// 獲取渲染函數(shù),編譯結(jié)果
// 渲染dom,追加到宿主元素
}
compile(template){
//返回render
return function render(){
//描述視圖
}
}
}
}
}
在調(diào)用createApp時,如果options中無render,則初始化組件,調(diào)用compile產(chǎn)生一個render,若有render則直接掛載;
Vue2中追加元素使用比較替換的方式,diff元素間區(qū)別進(jìn)行對比判斷,Vue3中則是直接進(jìn)行刪除重加。
可以在setup或者是data中定義響應(yīng)式變量, setup的優(yōu)先級更高。
createApp
Vue暴露的兩個初始化的函數(shù),createApp和createRenderer,他們之間的調(diào)用關(guān)系
/*暴露給Vue的createApp*/
function createApp(options){
?? ?const renderer = ?Vue.createRenderer({
?? ??? ?/*定義一些平臺特有的api,一些實(shí)例*/
?? ??? ?aaa(){},
?? ??? ?bbb(){}
?? ?})
?? ?/*用戶調(diào)用的createApp,實(shí)際上是渲染器的createApp*/
?? ?return renderer.createApp()
}
function createRenderer({aaa,bbb}){
?? ?/*獲得渲染器*/
?? ?/*這個createApp是函數(shù)內(nèi)部的*/
?? ?return createApp(options){
?? ??? ?/*掛載邏輯*/
?? ??? ?return {
?? ??? ??? ?/*返回App實(shí)例*/
?? ??? ?}
?? ?}
}源碼流程
1、用戶調(diào)用createApp方法 =》 通過ensureRenderer得到渲染器
2、渲染器調(diào)用createRender =》※調(diào)用工廠函數(shù)baseGreateRenderer,這個函數(shù)中定義了patch和diff等,最終會return一個render用來給spa頁面進(jìn)行渲染,一個hydrate用來給ssr頁面進(jìn)行注水,還有一個函數(shù)的createApp(不同于Vue的createApp)
3、在函數(shù)的createApp中會定義程序的實(shí)例方法,如mount,get,set,use,mixin等
4、mount實(shí)例方法會去查看是否有根組件掛載,使用什么方法進(jìn)行掛載(spa/ssr)
5、render方法調(diào)用patch方法進(jìn)行打補(bǔ)丁
6、patch方法根據(jù)傳入的節(jié)點(diǎn)類型進(jìn)行掛載方法的判斷,如果首次掛載則為掛載component,之后是掛載element(patch方法會將vnode轉(zhuǎn)化為node節(jié)點(diǎn))
7、patch方法執(zhí)行內(nèi)部processComponent方法,最終執(zhí)行mountComponent方法,也就是Vue2中$mount最終執(zhí)行的方法
初始化流程
1、根組件的實(shí)例化:調(diào)用createComponentInstance
2、初始化根組件:調(diào)用setupComponent方法,也就是Vue2中的this.$_init方法,用來將選項(xiàng)進(jìn)行合并,并設(shè)置鉤子和響應(yīng)式
3、安裝render函數(shù)的副作用函數(shù):setupRendererEffect
在Vue3中取消了watcher改為了副作用函數(shù),副作用函數(shù)會在每次響應(yīng)式數(shù)據(jù)發(fā)生變化的時候重新執(zhí)行,內(nèi)部的render函數(shù)的執(zhí)行會觸發(fā)依賴收集,這樣當(dāng)響應(yīng)式數(shù)據(jù)變化時,響應(yīng)式組件就會更新。
PS:與react中的useEffect不同的方面是,useEffect需要手動的收集依賴,而Vue中的effect()會自動的收集依賴。
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-router3.x和vue-router4.x相互影響的問題分析
這篇文章主要介紹了vue-router3.x和vue-router4.x相互影響的問題分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法,使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字,并且有不要小數(shù)點(diǎn),有需要小數(shù)點(diǎn)的,就有一定的參考價值,有興趣的可以了解一下2018-10-10
Vue重要修飾符.sync對比v-model的區(qū)別及使用詳解
這篇文章主要為大家介紹了Vue中重要修飾符.sync與v-model的區(qū)別對比及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07

