smalljs$molRechercher⌘ KDocsPlaygroundComparerÉcosystèmeÀ proposFR
Modèle mentalGetting StartedIntroductionModèle mentalDémarrageDe TypeScript à view.treeStructure d'un projetOutillageEssentialsInstallationVuesÉtat et réactivitéRoutageRenduTestsDéploiementDépannageDataRécupération de donnéesSchémas de donnéesGiper BazaMoreVitrineDe React, Vue et SvelteRecettesAdvancedPluginsMétadonnées de moduleHors-ligneVues fantômesAboutFAQÉquipeVersionsAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Modèle mental

Si vous venez de React ou de Vue, les premiers jours dans $mol se passent à chercher des choses qui n'existent pas : computed, watch, useEffect, onMounted, un fetch dans un hook de cycle de vie. Elles ne sont pas cachées quelque part dans l'API ; le modèle n'a pas de place pour elles. Cette page est la version en cinq minutes de ce modèle. Lisez-la avant Vues, et revenez-y quand un nom familier manque à l'appel.

Tirer plutôt que pousser

Rien n'est calculé tant que personne ne le lit. Une vue se rend en lisant ses propriétés ; chaque propriété lit ce dont elle a besoin ; la chaîne de dépendances s'assemble toute seule à partir de ces lectures. Il n'y a pas d'abonnement à déclarer ni de watch à enregistrer : la lecture est l'abonnement.1$my_profile $mol_view2 sub /3 <= Name $mol_view4 sub / <= name \1namespace $.$$ {2 export class $my_profile extends $.$my_profile {3 @ $mol_mem4 user() {5 return this.$.$mol_fetch.json( 'https://api.example.com/me' ) as { name: string }6 }7 name() {8 return this.user().name9 }10 }11}Rendre Name lit name(), name() lit user(), user() va sur le réseau. Personne n'a parlé de la requête à la vue et personne n'a parlé de la vue à la requête. Quand user() change, tout ce qui l'a lu se recalcule, et rien d'autre.

Pas de cycle de vie

Il n'y a pas de mounted, pas de useEffect, pas de created. On demande des données en lisant une propriété, et une vue lit ses propriétés quand elle se rend. L'exemple ci-dessus charge donc l'utilisateur au moment où $my_profile apparaît à l'écran, et pas avant. Quand la vue quitte l'écran, plus personne ne lit user(), et la cellule est libérée en même temps que la vue.Voilà tout ce qui remplace le motif « fetch on mount » : la vue demande ce dont elle a besoin, et le framework décide quand demander. Le chargement n'est pas accroché à un événement de page, il est accroché au fait d'être visible.

Une propriété est une cellule

Une seule méthode avec un argument optionnel est à la fois getter, setter, valeur calculée et état :1@ $mol_mem2count( next?: number ) {3 return next ?? 04}Appelée sans argument elle lit, appelée avec un argument elle écrit. @ $mol_mem transforme la méthode en une cellule mise en cache qui se recalcule quand une valeur qu'elle a lue a changé. Une valeur calculée n'est qu'une méthode @ $mol_mem qui lit d'autres méthodes. Pas besoin de watcher : un effet de bord appartient à un événement, et un gestionnaire d'événement est une méthode marquée @ $mol_action.1@ $mol_mem2doubled() {3 return this.count() * 24}5 6@ $mol_action7increment() {8 this.count( this.count() + 1 )9}Modifier cette page sur GitHubÉtait-ce utile ?OuiNonPrécédentIntroductionSuivantDémarrageSur cette pageTirer plutôt que pousserPas de cycle de vieUne propriété est une celluleDu code synchrone qui attendTout est une redéfinitionComment lire les sourcesLes nomsSuite
Type to search the documentation.