Comment appeler des fonctions lors de l'initialisation de Vue3

Fonction d'appel d'initialisation de Vue3

createApp({}).mount(‘#app')

Fichier d'entrée runtime-dom/src/index.tx

• createApp -> createRenderer -> createBaseRenderer (la fonction de rendu et une série de fonctions de rendu sont également créées ici) -> createAppAPI (renvoie la vraie méthode createApp), renvoie l'application d'instance,

• puis app.mount("#app") -> createVNode -> render(vnode,rootcontainier,isSVG) -> ; processComponent -> mountComponent (rendu initial) ou updateComponent ->(createComponentInstance, setupComponent, setupRenderEffect)

• Pour setupComponent, qu'il y ait une fonction de configuration ou non, elle sera traitée au cas par cas. . Si tel est le cas, utilisez la fonction de configuration pour le traitement et l'initialisation. Les accessoires et autres paramètres qui doivent être transmis à la fonction de configuration, appelez setup, setupComponent->finishComponentSetup (l'initialisation des options de la version 2.x sera traitée ici),

• Pour setupRenderEffect, exécutez une série de fonctions de hook de vie pour créer un rendu ReactiveEffect et exécutez la méthode **effect.run()**

ReactiveEffect

similaire à Watcher de vue2.x, calculé, watch , composantUpdateFn utilise également ReactiveEffect pendant le processus de rendu,

const effect = new After ReactiveEffect(fn,...), sauf que l'attribut calculé n'appellera effect.run() que lors de son accès -> appelle fn() , accédez aux variables réactives dans fn, collectez les dépendances et le reste setupRenderEffect, watch, watchEffect appellera effect.run() après avoir créé ReactiveEffect pour collecter les dépendances, dans lesquelles

• setupRenderEffect accédera au les variables de réponse dépendantes setupRenderEffect会访问依赖的响应变量

• watch(source,cb,options),会执行访问source的函数,收集依赖

• watchEffect(fn),会自动执行一次fn收集依赖

• effect(fn,options)

watch(source,cb,options ), exécuteront la fonction pour accéder à la source, collecteront les dépendances

watchEffect(fn), exécutera automatiquement fn une fois pour collecter les dépendances

effect(fn, options), où options a une option lazy:true, ce qui signifie ne pas exécuter la fonction fn immédiatement pour collecter les dépendances, renvoie un exécutez la fonction, appelez à nouveau run(), exécutez la fonction fn une fois et collectez les dépendances

// 1.计算属性
// computed.ts
// ComputedRefImpl类构造函数调用了new ReactiveEffect
this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
    
// 2. effect
// effect.ts
// effect函数中,可以接收第二个参数effect(fn,{lazy:true}),表示不立即执行
  const _effect = new ReactiveEffect(fn)
// 3. apiWatch.ts doWatch方法
// watch和watchEffect都是通过doWatch函数来,在这里调用new ReactiveEffect,然后根据不同情况执行effect.run(),对于watchEffect就是//执行器回调,对于watch就是访问监听的数据,然后收集依赖
  const effect = new ReactiveEffect(getter, scheduler)
// 4. render.ts
//在 setupRenderEffect中
const effect = (instance.effect = new ReactiveEffect(
      componentUpdateFn,//更新组件函数
      () => queueJob(update),
      instance.scope // track it in component's effect scope
    ))

Processus d'initialisation du programme Vue3

Initialisation

Vue 3 n'utilise plus la nouvelle méthode Vue() de Vue2 pour l'initialisation du programme, mais utilise la méthode createApp. Que se passe-t-il dans createApp ?

Raison de la réécriture

createApp est une fonction d'usine dans Vue, qui est importée et appelée en tant que fonction. Les avantages du style fonctionnel sont

1. Il élimine les méthodes statiques initialement montées sur Vue et les transforme en méthodes d'instance, ce qui peut réduire l'utilisation de la mémoire, faciliter le tremblement de l'arborescence et réduire le volume d'emballage

Style fonctionnel et décoration de classe ; la prise en charge de TypeScript est très bonne.La méthode d'appel de fonction peut mieux prendre en charge TypeScript, améliorant ainsi la prise en charge des types 3. L'API du composant racine, comme les données, doit conserver le même format que l'API du sous-composant de montage. $ Mount est remplacé par mount, ce qui simplifie l'API et unifie la cohérence de l'API

4. La méthode de montage dans la nouvelle Vue provoquera une pollution globale et ne peut pas être indépendante les unes des autres et montée à la demande.

Implémentation du processus

mount

const Vue = {
	createApp(options) {
		//返回app实例
		return {
			mount(selector){
				// 获取渲染函数，编译结果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述视图
				}
			}
		}
	}
}

Lors de l'appel de createApp, s'il n'y a pas de rendu dans les options, initialisez le composant, appelez compile pour générer un rendu, s'il y a un rendu, montez-le directement

Dans Vue2 ; , ajoutez des éléments en utilisant Contrairement à la méthode de comparaison et de remplacement, la comparaison et le jugement sont effectués lorsque les différences entre les éléments diff sont comparées. Dans Vue3, les éléments seront supprimés et réajoutés directement.

Les variables réactives peuvent être définies dans la configuration ou les données, la configuration a une priorité plus élevée.

createApp

Les deux fonctions d'initialisation exposées par Vue, createApp et createRenderer, la relation d'appel entre elles

/*暴露给Vue的createApp*/
function createApp(options){
    const renderer =  Vue.createRenderer({
        /*定义一些平台特有的api，一些实例*/
        aaa(){},
        bbb(){}
    })
    /*用户调用的createApp，实际上是渲染器的createApp*/
    return renderer.createApp()
}
function createRenderer({aaa,bbb}){
    /*获得渲染器*/
    /*这个createApp是函数内部的*/
    return createApp(options){
        /*挂载逻辑*/
        return {
            /*返回App实例*/
        }
    }
}

Processus de code source

1 L'utilisateur appelle la méthode createApp => Obtenez le rendu via EnsureRenderer

2. . Le moteur de rendu appelle createRender =》※Appelez la fonction d'usine baseGreateRenderer. Cette fonction définit les correctifs, les différences, etc., et renverra éventuellement un rendu utilisé pour restituer la page du spa, un hydrate utilisé pour injecter de l'eau dans la page ssr et un. function.createApp (différent de createApp de Vue)

3. Dans la fonction createApp, les méthodes d'instance du programme seront définies, telles que mount, get, set, use, mixin, etc.

4. vérifiez s'il y a un composant racine suspendu. Quelle méthode doit être utilisée pour monter (spa/ssr)

5. La méthode de rendu appelle la méthode patch pour le patch

6. La méthode patch détermine la méthode de montage en fonction du type de nœud entrant. .S'il est monté pour la première fois, montez le composant, puis montez l'élément (la méthode patch convertira le vnode en nœud de nœud)

7. La méthode patch exécute la méthode processComponent interne et exécute enfin la méthode mountComponent, qui est la dernière. méthode d'exécution de $mount dans Vue2🎜🎜Processus d'initialisation 🎜🎜1. Instanciation du composant racine : appelez createComponentInstance🎜🎜2 Initialisation du composant racine : appelez la méthode setupComponent, qui est la méthode this.$_init dans Vue2, utilisée. pour fusionner les options et configurer les hooks et la réactivité🎜🎜 3. Installez la fonction d'effet secondaire de la fonction de rendu : setupRendererEffect🎜

Dans Vue3, l'observateur a été annulé et remplacé par une fonction d'effet secondaire. La fonction d'effet secondaire sera réexécutée à chaque fois que les données réactives changeront. L'exécution de la fonction de rendu interne déclenchera la collecte de dépendances, de sorte que lorsque les données réactives changeront. modifications, le composant réactif sera mis à jour.

PS : La différence avec useEffect dans React est que useEffect nécessite une collecte manuelle des dépendances, tandis que effect() dans Vue collectera automatiquement les dépendances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!