createApp({}).mount(‘#app')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()**
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épendanceswatchEffect(fn), exécutera automatiquement fn une fois pour collecter les dépendanceseffect(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
))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 processusmount
const Vue = {
createApp(options) {
//返回app实例
return {
mount(selector){
// 获取渲染函数，编译结果
// 渲染dom，追加到宿主元素
}
compile(template){
//返回render
return function render(){
//描述视图
}
}
}
}
}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实例*/
}
}
}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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
