[{"data":1,"prerenderedAt":1084},["ShallowReactive",2],{"page-\u002Fvue\u002Freactivite":3,"pieces-vue":1041,"autour-\u002Fvue\u002Freactivite":1066,"prerequis-\u002Fvue\u002Freactivite":1071,"plan-vue":1073},{"id":4,"title":5,"body":6,"description":1006,"extension":1007,"ligne":57,"meta":1008,"motsCles":1009,"navigation":103,"niveau":1014,"path":1015,"prerequis":1016,"ressources":1018,"seo":1030,"sources":1031,"stem":1039,"__hash__":1040},"docs\u002Fvue\u002F03.reactivite.md","La réactivité",{"type":7,"value":8,"toc":997},"minimark",[9,14,42,46,52,221,240,246,250,257,404,410,437,446,460,464,474,610,632,636,639,683,686,696,700,705,935,942,956,960,993],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,30,36],"ul",{},[18,19,20,21,25,26,29],"li",{},"Déclarer un état réactif avec ",[22,23,24],"code",{},"ref()"," et ",[22,27,28],{},"reactive()",".",[18,31,32,33,29],{},"Calculer une valeur à partir d'autres avec ",[22,34,35],{},"computed()",[18,37,38,39,29],{},"Lier un champ de formulaire à une variable avec ",[22,40,41],{},"v-model",[10,43,45],{"id":44},"létat-réactif-avec-ref","L'état réactif avec ref",[47,48,49,50,29],"p",{},"Une variable JavaScript normale ne prévient pas Vue quand elle change. Pour que l'affichage suive, tu la déclares avec ",[22,51,24],{},[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst portions = ref(4)\n\nfunction ajouter() {\n  portions.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"ajouter\">{{ portions }} portions\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue","",[22,60,61,81,98,105,130,135,147,156,162,172,177,187,212],{"__ignoreMap":58},[62,63,66,70,74,78],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"scfrF","\u003C",[62,71,73],{"class":72},"s5JFL","script",[62,75,77],{"class":76},"s5iOY"," setup",[62,79,80],{"class":68},">\n",[62,82,84,88,91,94],{"class":64,"line":83},2,[62,85,87],{"class":86},"sOnC1","import",[62,89,90],{"class":68}," { ref } ",[62,92,93],{"class":86},"from",[62,95,97],{"class":96},"shWOn"," 'vue'\n",[62,99,101],{"class":64,"line":100},3,[62,102,104],{"emptyLinePlaceholder":103},true,"\n",[62,106,108,111,114,117,121,124,127],{"class":64,"line":107},4,[62,109,110],{"class":86},"const",[62,112,113],{"class":76}," portions",[62,115,116],{"class":86}," =",[62,118,120],{"class":119},"syCW7"," ref",[62,122,123],{"class":68},"(",[62,125,126],{"class":76},"4",[62,128,129],{"class":68},")\n",[62,131,133],{"class":64,"line":132},5,[62,134,104],{"emptyLinePlaceholder":103},[62,136,138,141,144],{"class":64,"line":137},6,[62,139,140],{"class":86},"function",[62,142,143],{"class":119}," ajouter",[62,145,146],{"class":68},"() {\n",[62,148,150,153],{"class":64,"line":149},7,[62,151,152],{"class":68},"  portions.value",[62,154,155],{"class":86},"++\n",[62,157,159],{"class":64,"line":158},8,[62,160,161],{"class":68},"}\n",[62,163,165,168,170],{"class":64,"line":164},9,[62,166,167],{"class":68},"\u003C\u002F",[62,169,73],{"class":72},[62,171,80],{"class":68},[62,173,175],{"class":64,"line":174},10,[62,176,104],{"emptyLinePlaceholder":103},[62,178,180,182,185],{"class":64,"line":179},11,[62,181,69],{"class":68},[62,183,184],{"class":72},"template",[62,186,80],{"class":68},[62,188,190,193,196,199,202,205,208,210],{"class":64,"line":189},12,[62,191,192],{"class":68},"  \u003C",[62,194,195],{"class":72},"button",[62,197,198],{"class":76}," @click",[62,200,201],{"class":68},"=",[62,203,204],{"class":96},"\"ajouter\"",[62,206,207],{"class":68},">{{ portions }} portions\u003C\u002F",[62,209,195],{"class":72},[62,211,80],{"class":68},[62,213,215,217,219],{"class":64,"line":214},13,[62,216,167],{"class":68},[62,218,184],{"class":72},[62,220,80],{"class":68},[47,222,223,225,226,229,230,233,234,237,238,29],{},[22,224,24],{}," enveloppe la valeur dans un objet qui a une propriété ",[22,227,228],{},".value",". Dans le script, tu lis et modifies ",[22,231,232],{},"portions.value",". Dans le template, Vue déballe automatiquement le ref : tu écris ",[22,235,236],{},"{{ portions }}",", sans ",[22,239,228],{},[47,241,242,243,245],{},"La documentation présente ",[22,244,24],{}," comme l'API principale pour déclarer un état.",[10,247,249],{"id":248},"létat-dun-objet-avec-reactive","L'état d'un objet avec reactive",[47,251,252,254,255,29],{},[22,253,28],{}," rend réactif un objet entier, sans passer par ",[22,256,228],{},[53,258,260],{"className":55,"code":259,"language":57,"meta":58,"style":58},"\u003Cscript setup>\nimport { reactive } from 'vue'\n\nconst recette = reactive({ nom: 'Crêpes', minutes: 20 })\n\nfunction allonger() {\n  recette.minutes += 5\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ recette.nom }} : {{ recette.minutes }} min\u003C\u002Fp>\n  \u003Cbutton @click=\"allonger\">+ 5 min\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[22,261,262,272,283,287,314,318,327,338,342,350,354,362,375,395],{"__ignoreMap":58},[62,263,264,266,268,270],{"class":64,"line":65},[62,265,69],{"class":68},[62,267,73],{"class":72},[62,269,77],{"class":76},[62,271,80],{"class":68},[62,273,274,276,279,281],{"class":64,"line":83},[62,275,87],{"class":86},[62,277,278],{"class":68}," { reactive } ",[62,280,93],{"class":86},[62,282,97],{"class":96},[62,284,285],{"class":64,"line":100},[62,286,104],{"emptyLinePlaceholder":103},[62,288,289,291,294,296,299,302,305,308,311],{"class":64,"line":107},[62,290,110],{"class":86},[62,292,293],{"class":76}," recette",[62,295,116],{"class":86},[62,297,298],{"class":119}," reactive",[62,300,301],{"class":68},"({ nom: ",[62,303,304],{"class":96},"'Crêpes'",[62,306,307],{"class":68},", minutes: ",[62,309,310],{"class":76},"20",[62,312,313],{"class":68}," })\n",[62,315,316],{"class":64,"line":132},[62,317,104],{"emptyLinePlaceholder":103},[62,319,320,322,325],{"class":64,"line":137},[62,321,140],{"class":86},[62,323,324],{"class":119}," allonger",[62,326,146],{"class":68},[62,328,329,332,335],{"class":64,"line":149},[62,330,331],{"class":68},"  recette.minutes ",[62,333,334],{"class":86},"+=",[62,336,337],{"class":76}," 5\n",[62,339,340],{"class":64,"line":158},[62,341,161],{"class":68},[62,343,344,346,348],{"class":64,"line":164},[62,345,167],{"class":68},[62,347,73],{"class":72},[62,349,80],{"class":68},[62,351,352],{"class":64,"line":174},[62,353,104],{"emptyLinePlaceholder":103},[62,355,356,358,360],{"class":64,"line":179},[62,357,69],{"class":68},[62,359,184],{"class":72},[62,361,80],{"class":68},[62,363,364,366,368,371,373],{"class":64,"line":189},[62,365,192],{"class":68},[62,367,47],{"class":72},[62,369,370],{"class":68},">{{ recette.nom }} : {{ recette.minutes }} min\u003C\u002F",[62,372,47],{"class":72},[62,374,80],{"class":68},[62,376,377,379,381,383,385,388,391,393],{"class":64,"line":214},[62,378,192],{"class":68},[62,380,195],{"class":72},[62,382,198],{"class":76},[62,384,201],{"class":68},[62,386,387],{"class":96},"\"allonger\"",[62,389,390],{"class":68},">+ 5 min\u003C\u002F",[62,392,195],{"class":72},[62,394,80],{"class":68},[62,396,398,400,402],{"class":64,"line":397},14,[62,399,167],{"class":68},[62,401,184],{"class":72},[62,403,80],{"class":68},[47,405,406,407,409],{},"Mais ",[22,408,28],{}," a des limites :",[411,412,413,423,430],"ol",{},[18,414,415,416,25,419,422],{},"Il ne fonctionne que sur les objets, tableaux, ",[22,417,418],{},"Map",[22,420,421],{},"Set",", pas sur un nombre ou un texte.",[18,424,425,426,429],{},"Tu ne peux pas remplacer l'objet entier (",[22,427,428],{},"recette = {...}",") : la réactivité serait perdue.",[18,431,432,433,436],{},"Si tu extrais une propriété dans une variable (",[22,434,435],{},"const { minutes } = recette","), elle n'est plus réactive.",[47,438,439,440,442,443,29],{},"C'est pourquoi ",[22,441,24],{}," est le choix par défaut, même pour un objet : ",[22,444,445],{},"const recette = ref({ ... })",[447,448,449],"tip",{},[47,450,451,452,454,455,457,458,29],{},"Dans le doute, utilise ",[22,453,24],{},". Tu écris ",[22,456,228],{}," dans le script, mais tu évites les pièges de ",[22,459,28],{},[10,461,463],{"id":462},"les-valeurs-calculées-computed","Les valeurs calculées : computed",[47,465,466,467,471,472,29],{},"Une ",[468,469,470],"strong",{},"propriété calculée"," est une valeur qui se déduit d'autres valeurs réactives. Tu la déclares avec ",[22,473,35],{},[53,475,477],{"className":55,"code":476,"language":57,"meta":58,"style":58},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst prixParPortion = ref(2.5)\nconst portions = ref(4)\n\nconst total = computed(() => prixParPortion.value * portions.value)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Coût total : {{ total }} €\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[22,478,479,489,500,504,522,538,542,569,577,581,589,602],{"__ignoreMap":58},[62,480,481,483,485,487],{"class":64,"line":65},[62,482,69],{"class":68},[62,484,73],{"class":72},[62,486,77],{"class":76},[62,488,80],{"class":68},[62,490,491,493,496,498],{"class":64,"line":83},[62,492,87],{"class":86},[62,494,495],{"class":68}," { ref, computed } ",[62,497,93],{"class":86},[62,499,97],{"class":96},[62,501,502],{"class":64,"line":100},[62,503,104],{"emptyLinePlaceholder":103},[62,505,506,508,511,513,515,517,520],{"class":64,"line":107},[62,507,110],{"class":86},[62,509,510],{"class":76}," prixParPortion",[62,512,116],{"class":86},[62,514,120],{"class":119},[62,516,123],{"class":68},[62,518,519],{"class":76},"2.5",[62,521,129],{"class":68},[62,523,524,526,528,530,532,534,536],{"class":64,"line":132},[62,525,110],{"class":86},[62,527,113],{"class":76},[62,529,116],{"class":86},[62,531,120],{"class":119},[62,533,123],{"class":68},[62,535,126],{"class":76},[62,537,129],{"class":68},[62,539,540],{"class":64,"line":137},[62,541,104],{"emptyLinePlaceholder":103},[62,543,544,546,549,551,554,557,560,563,566],{"class":64,"line":149},[62,545,110],{"class":86},[62,547,548],{"class":76}," total",[62,550,116],{"class":86},[62,552,553],{"class":119}," computed",[62,555,556],{"class":68},"(() ",[62,558,559],{"class":86},"=>",[62,561,562],{"class":68}," prixParPortion.value ",[62,564,565],{"class":86},"*",[62,567,568],{"class":68}," portions.value)\n",[62,570,571,573,575],{"class":64,"line":158},[62,572,167],{"class":68},[62,574,73],{"class":72},[62,576,80],{"class":68},[62,578,579],{"class":64,"line":164},[62,580,104],{"emptyLinePlaceholder":103},[62,582,583,585,587],{"class":64,"line":174},[62,584,69],{"class":68},[62,586,184],{"class":72},[62,588,80],{"class":68},[62,590,591,593,595,598,600],{"class":64,"line":179},[62,592,192],{"class":68},[62,594,47],{"class":72},[62,596,597],{"class":68},">Coût total : {{ total }} €\u003C\u002F",[62,599,47],{"class":72},[62,601,80],{"class":68},[62,603,604,606,608],{"class":64,"line":189},[62,605,167],{"class":68},[62,607,184],{"class":72},[62,609,80],{"class":68},[47,611,612,613,616,617,620,621,624,625,627,628,631],{},"Dès que ",[22,614,615],{},"prixParPortion"," ou ",[22,618,619],{},"portions"," change, ",[22,622,623],{},"total"," est recalculé. Dans le script, on lit un computed avec ",[22,626,228],{}," aussi (",[22,629,630],{},"total.value",").",[10,633,635],{"id":634},"computed-ou-fonction","Computed ou fonction ?",[47,637,638],{},"Une fonction appelée dans le template donnerait le même résultat. La différence tient au cache.",[640,641,642,657],"table",{},[643,644,645],"thead",{},[646,647,648,651,654],"tr",{},[649,650],"th",{},[649,652,653],{},"Propriété calculée",[649,655,656],{},"Fonction",[658,659,660,672],"tbody",{},[646,661,662,666,669],{},[663,664,665],"td",{},"Recalcul",[663,667,668],{},"Seulement quand une dépendance change.",[663,670,671],{},"À chaque nouvel affichage du composant.",[646,673,674,677,680],{},[663,675,676],{},"Écriture",[663,678,679],{},"En lecture seule.",[663,681,682],{},"Libre.",[47,684,685],{},"Une propriété calculée est en lecture seule : lui assigner une valeur déclenche un avertissement en console. Elle sert à calculer, jamais à modifier un état.",[687,688,689],"warning",{},[47,690,691,692,695],{},"Une valeur non réactive, comme ",[22,693,694],{},"Date.now()",", n'est pas suivie : un computed qui en dépend ne se mettra jamais à jour.",[10,697,699],{"id":698},"lier-un-champ-v-model","Lier un champ : v-model",[47,701,702,704],{},[22,703,41],{}," relie un champ de formulaire à une variable, dans les deux sens. Ce que tape l'utilisateur met à jour la variable, et inversement.",[53,706,709],{"className":55,"code":707,"filename":708,"language":57,"meta":58,"style":58},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst recherche = ref('')\nconst toutes = ['Tarte aux pommes', 'Crêpes', 'Soupe à l\\'oignon']\n\nconst resultats = computed(() =>\n  toutes.filter((nom) => nom.toLowerCase().includes(recherche.value.toLowerCase()))\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model.trim=\"recherche\" placeholder=\"Chercher une recette\" \u002F>\n  \u003Cp v-for=\"nom in resultats\" :key=\"nom\">{{ nom }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FRecherche.vue",[22,710,711,721,731,735,753,787,791,807,847,851,859,863,871,897,926],{"__ignoreMap":58},[62,712,713,715,717,719],{"class":64,"line":65},[62,714,69],{"class":68},[62,716,73],{"class":72},[62,718,77],{"class":76},[62,720,80],{"class":68},[62,722,723,725,727,729],{"class":64,"line":83},[62,724,87],{"class":86},[62,726,495],{"class":68},[62,728,93],{"class":86},[62,730,97],{"class":96},[62,732,733],{"class":64,"line":100},[62,734,104],{"emptyLinePlaceholder":103},[62,736,737,739,742,744,746,748,751],{"class":64,"line":107},[62,738,110],{"class":86},[62,740,741],{"class":76}," recherche",[62,743,116],{"class":86},[62,745,120],{"class":119},[62,747,123],{"class":68},[62,749,750],{"class":96},"''",[62,752,129],{"class":68},[62,754,755,757,760,762,765,768,771,773,775,778,781,784],{"class":64,"line":132},[62,756,110],{"class":86},[62,758,759],{"class":76}," toutes",[62,761,116],{"class":86},[62,763,764],{"class":68}," [",[62,766,767],{"class":96},"'Tarte aux pommes'",[62,769,770],{"class":68},", ",[62,772,304],{"class":96},[62,774,770],{"class":68},[62,776,777],{"class":96},"'Soupe à l",[62,779,780],{"class":86},"\\'",[62,782,783],{"class":96},"oignon'",[62,785,786],{"class":68},"]\n",[62,788,789],{"class":64,"line":137},[62,790,104],{"emptyLinePlaceholder":103},[62,792,793,795,798,800,802,804],{"class":64,"line":149},[62,794,110],{"class":86},[62,796,797],{"class":76}," resultats",[62,799,116],{"class":86},[62,801,553],{"class":119},[62,803,556],{"class":68},[62,805,806],{"class":86},"=>\n",[62,808,809,812,815,818,822,825,827,830,833,836,839,842,844],{"class":64,"line":158},[62,810,811],{"class":68},"  toutes.",[62,813,814],{"class":119},"filter",[62,816,817],{"class":68},"((",[62,819,821],{"class":820},"sIXEE","nom",[62,823,824],{"class":68},") ",[62,826,559],{"class":86},[62,828,829],{"class":68}," nom.",[62,831,832],{"class":119},"toLowerCase",[62,834,835],{"class":68},"().",[62,837,838],{"class":119},"includes",[62,840,841],{"class":68},"(recherche.value.",[62,843,832],{"class":119},[62,845,846],{"class":68},"()))\n",[62,848,849],{"class":64,"line":164},[62,850,129],{"class":68},[62,852,853,855,857],{"class":64,"line":174},[62,854,167],{"class":68},[62,856,73],{"class":72},[62,858,80],{"class":68},[62,860,861],{"class":64,"line":179},[62,862,104],{"emptyLinePlaceholder":103},[62,864,865,867,869],{"class":64,"line":189},[62,866,69],{"class":68},[62,868,184],{"class":72},[62,870,80],{"class":68},[62,872,873,875,878,881,883,886,889,891,894],{"class":64,"line":214},[62,874,192],{"class":68},[62,876,877],{"class":72},"input",[62,879,880],{"class":76}," v-model.trim",[62,882,201],{"class":68},[62,884,885],{"class":96},"\"recherche\"",[62,887,888],{"class":76}," placeholder",[62,890,201],{"class":68},[62,892,893],{"class":96},"\"Chercher une recette\"",[62,895,896],{"class":68}," \u002F>\n",[62,898,899,901,903,906,908,911,914,916,919,922,924],{"class":64,"line":397},[62,900,192],{"class":68},[62,902,47],{"class":72},[62,904,905],{"class":76}," v-for",[62,907,201],{"class":68},[62,909,910],{"class":96},"\"nom in resultats\"",[62,912,913],{"class":76}," :key",[62,915,201],{"class":68},[62,917,918],{"class":96},"\"nom\"",[62,920,921],{"class":68},">{{ nom }}\u003C\u002F",[62,923,47],{"class":72},[62,925,80],{"class":68},[62,927,929,931,933],{"class":64,"line":928},15,[62,930,167],{"class":68},[62,932,184],{"class":72},[62,934,80],{"class":68},[47,936,937,938,941],{},"Le modificateur ",[22,939,940],{},".trim"," retire les espaces au début et à la fin de ce que tape l'utilisateur.",[47,943,944,945,947,948,951,952,955],{},"Remarque l'enchaînement : ",[22,946,41],{}," alimente un ",[22,949,950],{},"ref",", et un ",[22,953,954],{},"computed"," en tire la liste filtrée. C'est le schéma le plus courant dans une application Vue.",[10,957,959],{"id":958},"à-retenir","À retenir",[15,961,962,970,975,980,988],{},[18,963,964,966,967,969],{},[22,965,24],{}," déclare un état réactif : ",[22,968,228],{}," dans le script, rien dans le template.",[18,971,972,974],{},[22,973,28],{}," convient aux objets, mais perd la réactivité si tu le remplaces ou l'extrais.",[18,976,977,979],{},[22,978,35],{}," calcule une valeur dérivée, mise en cache et en lecture seule.",[18,981,982,984,985,987],{},[22,983,41],{}," relie un champ à une variable dans les deux sens ; ",[22,986,940],{}," nettoie les espaces.",[18,989,990,991,29],{},"Un état se déclare une fois, et tout ce qui s'en déduit passe par ",[22,992,35],{},[994,995,996],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":58,"searchDepth":83,"depth":100,"links":998},[999,1000,1001,1002,1003,1004,1005],{"id":12,"depth":83,"text":13},{"id":44,"depth":83,"text":45},{"id":248,"depth":83,"text":249},{"id":462,"depth":83,"text":463},{"id":634,"depth":83,"text":635},{"id":698,"depth":83,"text":699},{"id":958,"depth":83,"text":959},"Déclarer un état avec ref et reactive, calculer des valeurs dérivées avec computed et lier un champ de formulaire avec v-model.","md",{},[1010,950,1011,954,228,41,1012,1013],"réactivité","reactive","état","valeur dérivée","debutant","\u002Fvue\u002Freactivite",[1017],"\u002Fvue\u002Ftemplate-et-directives",[1019,1023,1026],{"nom":1020,"url":1021,"type":1022},"Vue.js, bases de la réactivité (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Freactivity-fundamentals.html","doc",{"nom":1024,"url":1025,"type":1022},"Vue.js, propriétés calculées (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Fcomputed.html",{"nom":1027,"url":1028,"type":1029},"Vue.js, tutoriel interactif (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Ftutorial\u002F","exercice",{"title":5,"description":1006},[1032,1034,1036],{"nom":1033,"url":1021},"Bases de la réactivité (documentation officielle en français)",{"nom":1035,"url":1025},"Propriétés calculées (documentation officielle en français)",{"nom":1037,"url":1038},"Liaisons avec les champs de formulaire (documentation officielle en français)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Fforms.html","vue\u002F03.reactivite","Gpwr1Dlv15ssPr7ViBOQ7Awdx17KT8OC4cQEzPFAFiM",[1042,1046,1049,1050,1054,1058,1062],{"path":1043,"title":1044,"stem":1045},"\u002Fvue\u002Fpremier-composant","Ton premier composant Vue","vue\u002F01.premier-composant",{"path":1017,"title":1047,"stem":1048},"Le template et les directives","vue\u002F02.template-et-directives",{"path":1015,"title":5,"stem":1039},{"path":1051,"title":1052,"stem":1053},"\u002Fvue\u002Fprops-et-evenements","Props, événements et v-model sur un composant","vue\u002F04.props-et-evenements",{"path":1055,"title":1056,"stem":1057},"\u002Fvue\u002Fslots-watch-et-cycle-de-vie","Slots, watch et cycle de vie","vue\u002F05.slots-watch-et-cycle-de-vie",{"path":1059,"title":1060,"stem":1061},"\u002Fvue\u002Fcomposables","Les composables","vue\u002F06.composables",{"path":1063,"title":1064,"stem":1065},"\u002Fvue","Vue","vue\u002Findex",[1067,1069],{"title":1047,"path":1017,"stem":1048,"description":1068,"children":-1},"Afficher des données avec l'interpolation, lier des attributs avec v-bind, réagir aux clics avec v-on, puis afficher selon une condition ou une liste.",{"title":1052,"path":1051,"stem":1053,"description":1070,"children":-1},"Faire communiquer un composant parent et son enfant avec defineProps, defineEmits et defineModel.",[1072],{"path":1017,"title":1047,"ligne":57},[1074,1075,1076,1077,1079,1080,1082],{"path":1043,"title":1044,"niveau":1014,"stem":1045},{"path":1017,"title":1047,"niveau":1014,"stem":1048},{"path":1015,"title":5,"niveau":1014,"stem":1039},{"path":1051,"title":1052,"niveau":1078,"stem":1053},"intermediaire",{"path":1055,"title":1056,"niveau":1078,"stem":1057},{"path":1059,"title":1060,"niveau":1081,"stem":1061},"avance",{"path":1063,"title":1064,"niveau":1083,"stem":1065},"memo",1794583438498]