[{"data":1,"prerenderedAt":163171},["ShallowReactive",2],{"app-menu-posts":3,"series-page-all-posts":57623},[4,981,1650,3279,5427,6207,7733,9174,11143,13461,15023,16593,17851,19000,21614,23672,26475,27762,30424,31698,33937,36752,39770,42749,46096,47963,51353,52139,54083,54754,55620,56600,56793,57445],{"id":5,"title":6,"body":7,"cover":936,"coverAlt":937,"date":938,"description":939,"draft":940,"extension":941,"lab":942,"locale":943,"meta":944,"navigation":208,"path":955,"schemaOrg":956,"seo":962,"series":963,"seriesDescription":964,"seriesOrder":243,"seriesTitle":965,"slug":942,"stem":966,"tags":967,"__hash__":980},"blog\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es.md","Pinia en Vue 3: cuándo usar estado global y cuándo no",{"type":8,"value":9,"toc":927},"minimark",[10,14,18,21,26,29,32,48,51,55,140,143,147,150,153,348,519,522,526,533,540,789,798,801,805,811,896,903,907,910,913,917,920,923],[11,12,6],"h1",{"id":13},"pinia-en-vue-3-cuándo-usar-estado-global-y-cuándo-no",[15,16,17],"p",{},"Pinia no vuelve escalable una aplicación por sí sola. Una store mal elegida puede ocultar quién posee un dato y convertir una relación sencilla entre componentes en una dependencia global.",[15,19,20],{},"La decisión empieza antes de escoger una herramienta: identifica quién consume el estado, quién lo modifica y cuánto tiempo debe vivir. Con esos criterios, Pinia se convierte en una frontera útil cuando el alcance realmente es global.",[22,23,25],"h2",{"id":24},"antes-de-elegir-pinia-define-el-alcance-del-estado","Antes de elegir Pinia: define el alcance del estado",[15,27,28],{},"Cada instancia de componente ya tiene estado reactivo propio. El estado compartido importa cuando varios componentes o vistas dependen del mismo dato, o cuando distintas acciones deben coordinar sus cambios.",[15,30,31],{},"Antes de crear una store, pregunta:",[33,34,35,39,42,45],"ul",{},[36,37,38],"li",{},"¿Un único componente posee este dato?",[36,40,41],{},"¿Solo lo coordinan componentes de una pantalla o subárbol?",[36,43,44],{},"¿Debe sobrevivir a una navegación?",[36,46,47],{},"¿Su cambio representa una operación de negocio reconocible?",[15,49,50],{},"Pinia es consecuencia de esas respuestas, no el punto de partida.",[22,52,54],{"id":53},"mapa-de-decisión-local-subárbol-o-global","Mapa de decisión: local, subárbol o global",[56,57,58,74],"table",{},[59,60,61],"thead",{},[62,63,64,68,71],"tr",{},[65,66,67],"th",{},"Situación",[65,69,70],{},"Alcance recomendado",[65,72,73],{},"Ejemplo",[75,76,77,97,108,119,130],"tbody",{},[62,78,79,83,94],{},[80,81,82],"td",{},"Un control visual de un componente",[80,84,85,86,90,91],{},"Estado local con ",[87,88,89],"code",{},"ref()"," o ",[87,92,93],{},"reactive()",[80,95,96],{},"Abrir un modal de una página",[62,98,99,102,105],{},[80,100,101],{},"Varios descendientes de una pantalla",[80,103,104],{},"Ancestro común con props y eventos",[80,106,107],{},"Filtros de catálogo",[62,109,110,113,116],{},[80,111,112],{},"Comportamiento reutilizable por instancia",[80,114,115],{},"Composable con estado local por uso",[80,117,118],{},"Lógica de búsqueda",[62,120,121,124,127],{},[80,122,123],{},"Datos y lógica entre componentes o páginas",[80,125,126],{},"Store de Pinia",[80,128,129],{},"Sesión en la navegación",[62,131,132,135,137],{},[80,133,134],{},"Proceso que continúa entre rutas",[80,136,126],{},[80,138,139],{},"Checkout multipágina",[15,141,142],{},"Un composable concentra comportamiento reutilizable, pero no vuelve global su estado automáticamente. Decide por separado si cada uso necesita una instancia propia o si la aplicación requiere una fuente compartida.",[22,144,146],{"id":145},"cuándo-props-y-eventos-son-más-claros-que-una-store","Cuándo props y eventos son más claros que una store",[15,148,149],{},"En una relación padre-hijo, los props y eventos mantienen el flujo explícito: el padre entrega datos y el hijo comunica una intención. El hijo no debe mutar un prop.",[15,151,152],{},"Aquí los filtros pertenecen a la pantalla de catálogo. El ancestro conserva el estado y el control descendiente solicita el cambio; ninguna otra ruta necesita conocerlo.",[154,155,164],"pre",{"className":156,"code":157,"filename":158,"highlights":159,"language":162,"meta":163,"style":163},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst selectedCategory = ref('all')\n\nfunction selectCategory(category) {\n  selectedCategory.value = category\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCategoryFilters\n    :selected-category=\"selectedCategory\"\n    @select-category=\"selectCategory\"\n  \u002F>\n\u003C\u002Ftemplate>\n","CatalogPage.vue",[160,161],4,14,"vue","",[87,165,166,186,203,210,236,241,259,271,277,287,292,302,311,322,333,339],{"__ignoreMap":163},[167,168,171,175,179,183],"span",{"class":169,"line":170},"line",1,[167,172,174],{"class":173},"sVt8B","\u003C",[167,176,178],{"class":177},"s9eBZ","script",[167,180,182],{"class":181},"sScJk"," setup",[167,184,185],{"class":173},">\n",[167,187,189,193,196,199],{"class":169,"line":188},2,[167,190,192],{"class":191},"szBVR","import",[167,194,195],{"class":173}," { ref } ",[167,197,198],{"class":191},"from",[167,200,202],{"class":201},"sZZnC"," 'vue'\n",[167,204,206],{"class":169,"line":205},3,[167,207,209],{"emptyLinePlaceholder":208},true,"\n",[167,211,214,217,221,224,227,230,233],{"class":212,"line":160},[169,213],"highlight",[167,215,216],{"class":191},"const",[167,218,220],{"class":219},"sj4cs"," selectedCategory",[167,222,223],{"class":191}," =",[167,225,226],{"class":181}," ref",[167,228,229],{"class":173},"(",[167,231,232],{"class":201},"'all'",[167,234,235],{"class":173},")\n",[167,237,239],{"class":169,"line":238},5,[167,240,209],{"emptyLinePlaceholder":208},[167,242,244,247,250,252,256],{"class":169,"line":243},6,[167,245,246],{"class":191},"function",[167,248,249],{"class":181}," selectCategory",[167,251,229],{"class":173},[167,253,255],{"class":254},"s4XuR","category",[167,257,258],{"class":173},") {\n",[167,260,262,265,268],{"class":169,"line":261},7,[167,263,264],{"class":173},"  selectedCategory.value ",[167,266,267],{"class":191},"=",[167,269,270],{"class":173}," category\n",[167,272,274],{"class":169,"line":273},8,[167,275,276],{"class":173},"}\n",[167,278,280,283,285],{"class":169,"line":279},9,[167,281,282],{"class":173},"\u003C\u002F",[167,284,178],{"class":177},[167,286,185],{"class":173},[167,288,290],{"class":169,"line":289},10,[167,291,209],{"emptyLinePlaceholder":208},[167,293,295,297,300],{"class":169,"line":294},11,[167,296,174],{"class":173},[167,298,299],{"class":177},"template",[167,301,185],{"class":173},[167,303,305,308],{"class":169,"line":304},12,[167,306,307],{"class":173},"  \u003C",[167,309,310],{"class":177},"CategoryFilters\n",[167,312,314,317,319],{"class":169,"line":313},13,[167,315,316],{"class":181},"    :selected-category",[167,318,267],{"class":173},[167,320,321],{"class":201},"\"selectedCategory\"\n",[167,323,325,328,330],{"class":324,"line":161},[169,213],[167,326,327],{"class":181},"    @select-category",[167,329,267],{"class":173},[167,331,332],{"class":201},"\"selectCategory\"\n",[167,334,336],{"class":169,"line":335},15,[167,337,338],{"class":173},"  \u002F>\n",[167,340,342,344,346],{"class":169,"line":341},16,[167,343,282],{"class":173},[167,345,299],{"class":177},[167,347,185],{"class":173},[154,349,353],{"className":156,"code":350,"filename":351,"highlights":352,"language":162,"meta":163,"style":163},"\u003Cscript setup>\ndefineProps({\n  selectedCategory: {\n    type: String,\n    required: true,\n  },\n})\n\nconst emit = defineEmits(['select-category'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    type=\"button\"\n    :aria-pressed=\"selectedCategory === 'books'\"\n    @click=\"emit('select-category', 'books')\"\n  >\n    Books\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","CategoryFilters.vue",[279],[87,354,355,365,373,378,383,394,399,404,408,430,438,442,450,457,467,477,487,493,499,510],{"__ignoreMap":163},[167,356,357,359,361,363],{"class":169,"line":170},[167,358,174],{"class":173},[167,360,178],{"class":177},[167,362,182],{"class":181},[167,364,185],{"class":173},[167,366,367,370],{"class":169,"line":188},[167,368,369],{"class":181},"defineProps",[167,371,372],{"class":173},"({\n",[167,374,375],{"class":169,"line":205},[167,376,377],{"class":173},"  selectedCategory: {\n",[167,379,380],{"class":169,"line":160},[167,381,382],{"class":173},"    type: String,\n",[167,384,385,388,391],{"class":169,"line":238},[167,386,387],{"class":173},"    required: ",[167,389,390],{"class":219},"true",[167,392,393],{"class":173},",\n",[167,395,396],{"class":169,"line":243},[167,397,398],{"class":173},"  },\n",[167,400,401],{"class":169,"line":261},[167,402,403],{"class":173},"})\n",[167,405,406],{"class":169,"line":273},[167,407,209],{"emptyLinePlaceholder":208},[167,409,411,413,416,418,421,424,427],{"class":410,"line":279},[169,213],[167,412,216],{"class":191},[167,414,415],{"class":219}," emit",[167,417,223],{"class":191},[167,419,420],{"class":181}," defineEmits",[167,422,423],{"class":173},"([",[167,425,426],{"class":201},"'select-category'",[167,428,429],{"class":173},"])\n",[167,431,432,434,436],{"class":169,"line":289},[167,433,282],{"class":173},[167,435,178],{"class":177},[167,437,185],{"class":173},[167,439,440],{"class":169,"line":294},[167,441,209],{"emptyLinePlaceholder":208},[167,443,444,446,448],{"class":169,"line":304},[167,445,174],{"class":173},[167,447,299],{"class":177},[167,449,185],{"class":173},[167,451,452,454],{"class":169,"line":313},[167,453,307],{"class":173},[167,455,456],{"class":177},"button\n",[167,458,459,462,464],{"class":169,"line":161},[167,460,461],{"class":181},"    type",[167,463,267],{"class":173},[167,465,466],{"class":201},"\"button\"\n",[167,468,469,472,474],{"class":169,"line":335},[167,470,471],{"class":181},"    :aria-pressed",[167,473,267],{"class":173},[167,475,476],{"class":201},"\"selectedCategory === 'books'\"\n",[167,478,479,482,484],{"class":169,"line":341},[167,480,481],{"class":181},"    @click",[167,483,267],{"class":173},[167,485,486],{"class":201},"\"emit('select-category', 'books')\"\n",[167,488,490],{"class":169,"line":489},17,[167,491,492],{"class":173},"  >\n",[167,494,496],{"class":169,"line":495},18,[167,497,498],{"class":173},"    Books\n",[167,500,502,505,508],{"class":169,"line":501},19,[167,503,504],{"class":173},"  \u003C\u002F",[167,506,507],{"class":177},"button",[167,509,185],{"class":173},[167,511,513,515,517],{"class":169,"line":512},20,[167,514,282],{"class":173},[167,516,299],{"class":177},[167,518,185],{"class":173},[15,520,521],{},"El padre declara el propietario real del estado y el hijo emite una intención sin modificar el prop. Si demasiados niveles intermedios vuelven incómodo el árbol, revisa el diseño y el alcance: el prop drilling es una señal para evaluar alternativas, no una orden automática de globalizar.",[22,523,525],{"id":524},"cuándo-pinia-sí-gana-su-lugar","Cuándo Pinia sí gana su lugar",[15,527,528,529,532],{},"Una store de Pinia organiza estado y lógica de negocio fuera del árbol de componentes mediante ",[87,530,531],{},"state",", getters y actions. Encaja cuando varias partes de la aplicación necesitan la misma fuente de verdad, como una sesión visible en navegación y páginas protegidas, o un formulario complejo que continúa entre páginas.",[15,534,535,536,539],{},"Una store pequeña debe tener una responsabilidad concreta. En una Option Store, declara todas las propiedades desde ",[87,537,538],{},"state()","; no las agregues después.",[154,541,547],{"className":542,"code":543,"filename":544,"highlights":545,"language":546,"meta":163,"style":163},"language-ts shiki shiki-themes github-light github-dark","import { defineStore } from 'pinia'\n\ntype SessionUser = { id: string; name: string }\n\nexport const useSessionStore = defineStore('session', {\n  state: () => ({\n    user: undefined as SessionUser | undefined,\n  }),\n\n  getters: {\n    isAuthenticated: (state) => state.user !== undefined,\n  },\n\n  actions: {\n    setUser(user: SessionUser) {\n      this.user = user\n    },\n    clearSession() {\n      this.user = undefined\n    },\n  },\n})\n","stores\u002Fsession.ts",[243,261,273,294,335,341,489],"ts",[87,548,549,561,565,600,604,628,643,665,671,675,680,706,710,714,719,736,750,756,764,775,779,784],{"__ignoreMap":163},[167,550,551,553,556,558],{"class":169,"line":170},[167,552,192],{"class":191},[167,554,555],{"class":173}," { defineStore } ",[167,557,198],{"class":191},[167,559,560],{"class":201}," 'pinia'\n",[167,562,563],{"class":169,"line":188},[167,564,209],{"emptyLinePlaceholder":208},[167,566,567,570,573,575,578,581,584,587,590,593,595,597],{"class":169,"line":205},[167,568,569],{"class":191},"type",[167,571,572],{"class":181}," SessionUser",[167,574,223],{"class":191},[167,576,577],{"class":173}," { ",[167,579,580],{"class":254},"id",[167,582,583],{"class":191},":",[167,585,586],{"class":219}," string",[167,588,589],{"class":173},"; ",[167,591,592],{"class":254},"name",[167,594,583],{"class":191},[167,596,586],{"class":219},[167,598,599],{"class":173}," }\n",[167,601,602],{"class":169,"line":160},[167,603,209],{"emptyLinePlaceholder":208},[167,605,606,609,612,615,617,620,622,625],{"class":169,"line":238},[167,607,608],{"class":191},"export",[167,610,611],{"class":191}," const",[167,613,614],{"class":219}," useSessionStore",[167,616,223],{"class":191},[167,618,619],{"class":181}," defineStore",[167,621,229],{"class":173},[167,623,624],{"class":201},"'session'",[167,626,627],{"class":173},", {\n",[167,629,631,634,637,640],{"class":630,"line":243},[169,213],[167,632,633],{"class":181},"  state",[167,635,636],{"class":173},": () ",[167,638,639],{"class":191},"=>",[167,641,642],{"class":173}," ({\n",[167,644,646,649,652,655,657,660,663],{"class":645,"line":261},[169,213],[167,647,648],{"class":173},"    user: ",[167,650,651],{"class":219},"undefined",[167,653,654],{"class":191}," as",[167,656,572],{"class":181},[167,658,659],{"class":191}," |",[167,661,662],{"class":219}," undefined",[167,664,393],{"class":173},[167,666,668],{"class":667,"line":273},[169,213],[167,669,670],{"class":173},"  }),\n",[167,672,673],{"class":169,"line":279},[167,674,209],{"emptyLinePlaceholder":208},[167,676,677],{"class":169,"line":289},[167,678,679],{"class":173},"  getters: {\n",[167,681,683,686,689,691,694,696,699,702,704],{"class":682,"line":294},[169,213],[167,684,685],{"class":181},"    isAuthenticated",[167,687,688],{"class":173},": (",[167,690,531],{"class":254},[167,692,693],{"class":173},") ",[167,695,639],{"class":191},[167,697,698],{"class":173}," state.user ",[167,700,701],{"class":191},"!==",[167,703,662],{"class":219},[167,705,393],{"class":173},[167,707,708],{"class":169,"line":304},[167,709,398],{"class":173},[167,711,712],{"class":169,"line":313},[167,713,209],{"emptyLinePlaceholder":208},[167,715,716],{"class":169,"line":161},[167,717,718],{"class":173},"  actions: {\n",[167,720,722,725,727,730,732,734],{"class":721,"line":335},[169,213],[167,723,724],{"class":181},"    setUser",[167,726,229],{"class":173},[167,728,729],{"class":254},"user",[167,731,583],{"class":191},[167,733,572],{"class":181},[167,735,258],{"class":173},[167,737,739,742,745,747],{"class":738,"line":341},[169,213],[167,740,741],{"class":219},"      this",[167,743,744],{"class":173},".user ",[167,746,267],{"class":191},[167,748,749],{"class":173}," user\n",[167,751,753],{"class":752,"line":489},[169,213],[167,754,755],{"class":173},"    },\n",[167,757,758,761],{"class":169,"line":495},[167,759,760],{"class":181},"    clearSession",[167,762,763],{"class":173},"() {\n",[167,765,766,768,770,772],{"class":169,"line":501},[167,767,741],{"class":219},[167,769,744],{"class":173},[167,771,267],{"class":191},[167,773,774],{"class":219}," undefined\n",[167,776,777],{"class":169,"line":512},[167,778,755],{"class":173},[167,780,782],{"class":169,"line":781},21,[167,783,398],{"class":173},[167,785,787],{"class":169,"line":786},22,[167,788,403],{"class":173},[15,790,791,793,794,797],{},[87,792,729],{}," es estado almacenado e ",[87,795,796],{},"isAuthenticated"," es estado derivado, por lo que no se duplica como dato mutable. Las actions nombran operaciones de sesión y hacen más fácil localizar por qué cambia el estado compartido. Esto no implica que una action prohíba por sí misma toda mutación directa: la claridad proviene de aplicar y respetar esa frontera.",[15,799,800],{},"No uses esta store para la visibilidad de un tooltip o de un modal que solo existe en una página. Ese detalle pertenece al componente o, como máximo, a su pantalla.",[22,802,804],{"id":803},"estado-compartido-simple-y-composables-alternativas-con-límites","Estado compartido simple y composables: alternativas con límites",[15,806,807,808,810],{},"Para un caso sencillo de una SPA, Vue permite compartir un objeto ",[87,809,93],{}," importado por varios componentes. El límite importante es el de modificación: si cualquier consumidor escribe cualquier propiedad, el diseño pierde trazabilidad.",[154,812,816],{"className":542,"code":813,"filename":814,"highlights":815,"language":546,"meta":163,"style":163},"import { reactive } from 'vue'\n\nexport const catalogFilters = reactive({\n  category: 'all',\n  setCategory(category: string) {\n    this.category = category\n  },\n})\n","catalogFilters.ts",[238,243,261],[87,817,818,829,833,849,858,874,887,892],{"__ignoreMap":163},[167,819,820,822,825,827],{"class":169,"line":170},[167,821,192],{"class":191},[167,823,824],{"class":173}," { reactive } ",[167,826,198],{"class":191},[167,828,202],{"class":201},[167,830,831],{"class":169,"line":188},[167,832,209],{"emptyLinePlaceholder":208},[167,834,835,837,839,842,844,847],{"class":169,"line":205},[167,836,608],{"class":191},[167,838,611],{"class":191},[167,840,841],{"class":219}," catalogFilters",[167,843,223],{"class":191},[167,845,846],{"class":181}," reactive",[167,848,372],{"class":173},[167,850,851,854,856],{"class":169,"line":160},[167,852,853],{"class":173},"  category: ",[167,855,232],{"class":201},[167,857,393],{"class":173},[167,859,861,864,866,868,870,872],{"class":860,"line":238},[169,213],[167,862,863],{"class":181},"  setCategory",[167,865,229],{"class":173},[167,867,255],{"class":254},[167,869,583],{"class":191},[167,871,586],{"class":219},[167,873,258],{"class":173},[167,875,877,880,883,885],{"class":876,"line":243},[169,213],[167,878,879],{"class":219},"    this",[167,881,882],{"class":173},".category ",[167,884,267],{"class":191},[167,886,270],{"class":173},[167,888,890],{"class":889,"line":261},[169,213],[167,891,398],{"class":173},[167,893,894],{"class":169,"line":273},[167,895,403],{"class":173},[15,897,898,899,902],{},"Centralizar el cambio en ",[87,900,901],{},"setCategory()"," comunica qué operación ocurre. Evalúa Pinia cuando el estado crece o cuando necesitas convenciones de colaboración, integración con DevTools, HMR o una frontera SSR más robusta.",[22,904,906],{"id":905},"ssr-no-compartas-estado-entre-solicitudes","SSR: no compartas estado entre solicitudes",[15,908,909],{},"En renderizado del lado del servidor, un singleton reactivo creado en ámbito de módulo puede compartir estado entre solicitudes. El aislamiento debe respetar la instancia de cada aplicación.",[15,911,912],{},"Pinia trabaja con la instancia de Pinia correspondiente. Si utilizas una store fuera de un componente, hazlo cuando esa instancia esté disponible y usa la asociada a la aplicación actual. Es una regla de aislamiento, no una receta de un framework concreto.",[22,914,916],{"id":915},"errores-comunes-y-una-regla-práctica","Errores comunes y una regla práctica",[15,918,919],{},"Evita globalizar cada variable reactiva, sustituir props y eventos en una relación padre-hijo sencilla, guardar detalles visuales efímeros de una página en una store, permitir mutaciones compartidas sin una operación con intención clara y crear un singleton manual para SSR.",[15,921,922],{},"La regla práctica es empezar con el alcance más pequeño que represente honestamente la propiedad del dato. Amplíalo cuando los consumidores, la duración entre páginas o la lógica de coordinación lo exijan. Pinia aporta valor cuando hace explícita una frontera global real.",[924,925,926],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":163,"searchDepth":188,"depth":188,"links":928},[929,930,931,932,933,934,935],{"id":24,"depth":188,"text":25},{"id":53,"depth":188,"text":54},{"id":145,"depth":188,"text":146},{"id":524,"depth":188,"text":525},{"id":803,"depth":188,"text":804},{"id":905,"depth":188,"text":906},{"id":915,"depth":188,"text":916},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1784941922\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to_aztyma.png","Diagrama de decisión para elegir entre estado local, props y eventos, composables o Pinia en Vue 3.","2026-07-25","Aprende a decidir si un dato debe vivir en un componente, un subárbol o una store de Pinia según sus consumidores, duración y lógica compartida.",false,"md",null,"es",{"updatedAt":945,"author":946,"coverCaption":947,"keywords":948},"2026-07-26T00:00:00-05:00","TODOvue","Referencia visual para decidir el alcance del estado en Vue 3.",[949,950,951,952,953,954],"State","Pinia","Vue 3","Gestión de Estado","Arquitectura","Composables","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[957],{"headline":6,"author":958,"datePublished":960,"@type":961},{"name":946,"@type":959},"Person","2026-07-24T23:20:00-05:00","BlogPosting",{"title":6,"description":939},"vue-3-architecture","Serie práctica para diseñar aplicaciones Vue 3 mantenibles mediante comunicación clara entre componentes, lógica reutilizable, dependencias acotadas y una gestión intencional del estado.","Arquitectura de aplicaciones en Vue 3","blog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[968,970,972,975,977],{"tag":952,"color":969},"#FF9800",{"tag":953,"color":971},"#4CAF50",{"tag":973,"color":974},"Buenas Prácticas","#2196F3",{"tag":954,"color":976},"#14B8A6",{"tag":978,"color":979},"SSR","#0E9AA7","HOD-MgWjq0ELvp4Sgos3olc_qJbRXYe26_GuDpSXnio",{"id":982,"title":983,"body":984,"cover":1618,"coverAlt":1619,"date":1620,"description":1621,"draft":940,"extension":941,"lab":942,"locale":943,"meta":1622,"navigation":208,"path":1630,"schemaOrg":1631,"seo":1635,"series":963,"seriesDescription":964,"seriesOrder":170,"seriesTitle":965,"slug":942,"stem":1636,"tags":1637,"__hash__":1649},"blog\u002Fblog\u002Fvue-3-component-architecture.es.md","Arquitectura de componentes en Vue 3: comunicación, reutilización y dependencias",{"type":8,"value":985,"toc":1610},[986,989,992,999,1003,1010,1013,1017,1020,1033,1211,1214,1218,1221,1380,1383,1397,1401,1404,1547,1550,1553,1557,1562,1565,1569,1601,1607],[11,987,983],{"id":988},"arquitectura-de-componentes-en-vue-3-comunicación-reutilización-y-dependencias",[15,990,991],{},"Cuando un componente crece, el problema no suele ser la sintaxis: es decidir dónde viven los datos, cómo se comunican las piezas y qué lógica merece reutilizarse. Una arquitectura útil separa estructura visual, entradas, eventos, contenido y dependencias sin crear abstracciones innecesarias.",[15,993,994,995,998],{},"En Vue 3, puedes pensar en una jerarquía de componentes conectados mediante contratos explícitos. Las props llevan datos hacia abajo, los eventos comunican intenciones hacia arriba, los slots permiten composición visual, los composables extraen lógica y ",[87,996,997],{},"provide\u002Finject"," resuelve dependencias profundas.",[22,1000,1002],{"id":1001},"un-modelo-mental-componentes-como-árbol-de-responsabilidades","Un modelo mental: componentes como árbol de responsabilidades",[15,1004,1005,1006,1009],{},"Los componentes encapsulan piezas independientes y reutilizables organizadas como un árbol. Cada uso de un componente crea una instancia independiente con su propio estado. En un Single-File Component con ",[87,1007,1008],{},"\u003Cscript setup>",", los componentes importados quedan disponibles automáticamente en la plantilla.",[15,1011,1012],{},"Empieza por una responsabilidad concreta. Un componente puede coordinar otros componentes, pero no debería acumular sin criterio la presentación, la obtención de datos, la validación y la configuración transversal.",[22,1014,1016],{"id":1015},"comunicación-explícita-props-y-eventos","Comunicación explícita: props y eventos",[15,1018,1019],{},"Las props representan entradas. Decláralas explícitamente para que el contrato sea visible y Vue pueda validar tipos y advertir durante el desarrollo cuando un valor no cumple las reglas declaradas. Trátalas como datos de entrada: el hijo no debe mutarlas directamente.",[15,1021,1022,1023,1025,1026,1028,1029,1032],{},"Los eventos personalizados permiten que el hijo comunique una intención al padre. En ",[87,1024,1008],{},", ",[87,1027,369],{}," y ",[87,1030,1031],{},"defineEmits"," hacen visible ese contrato:",[154,1034,1038],{"className":156,"code":1035,"filename":1036,"highlights":1037,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ userName: string }>()\nconst emit = defineEmits\u003C{ select: [userName: string] }>()\n\nfunction selectUser() {\n  emit('select', props.userName)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" @click=\"selectUser\">\n    {{ props.userName }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","UserCard.vue",[188,243],[87,1039,1040,1058,1084,1115,1119,1128,1142,1146,1154,1158,1166,1190,1195,1203],{"__ignoreMap":163},[167,1041,1042,1044,1046,1048,1051,1053,1056],{"class":169,"line":170},[167,1043,174],{"class":173},[167,1045,178],{"class":177},[167,1047,182],{"class":181},[167,1049,1050],{"class":181}," lang",[167,1052,267],{"class":173},[167,1054,1055],{"class":201},"\"ts\"",[167,1057,185],{"class":173},[167,1059,1061,1063,1066,1068,1071,1074,1077,1079,1081],{"class":1060,"line":188},[169,213],[167,1062,216],{"class":191},[167,1064,1065],{"class":219}," props",[167,1067,223],{"class":191},[167,1069,1070],{"class":181}," defineProps",[167,1072,1073],{"class":173},"\u003C{ ",[167,1075,1076],{"class":254},"userName",[167,1078,583],{"class":191},[167,1080,586],{"class":219},[167,1082,1083],{"class":173}," }>()\n",[167,1085,1086,1088,1090,1092,1094,1096,1099,1101,1104,1106,1109,1112],{"class":169,"line":205},[167,1087,216],{"class":191},[167,1089,415],{"class":219},[167,1091,223],{"class":191},[167,1093,420],{"class":181},[167,1095,1073],{"class":173},[167,1097,1098],{"class":254},"select",[167,1100,583],{"class":191},[167,1102,1103],{"class":173}," [",[167,1105,1076],{"class":181},[167,1107,1108],{"class":173},": ",[167,1110,1111],{"class":219},"string",[167,1113,1114],{"class":173},"] }>()\n",[167,1116,1117],{"class":169,"line":160},[167,1118,209],{"emptyLinePlaceholder":208},[167,1120,1121,1123,1126],{"class":169,"line":238},[167,1122,246],{"class":191},[167,1124,1125],{"class":181}," selectUser",[167,1127,763],{"class":173},[167,1129,1131,1134,1136,1139],{"class":1130,"line":243},[169,213],[167,1132,1133],{"class":181},"  emit",[167,1135,229],{"class":173},[167,1137,1138],{"class":201},"'select'",[167,1140,1141],{"class":173},", props.userName)\n",[167,1143,1144],{"class":169,"line":261},[167,1145,276],{"class":173},[167,1147,1148,1150,1152],{"class":169,"line":273},[167,1149,282],{"class":173},[167,1151,178],{"class":177},[167,1153,185],{"class":173},[167,1155,1156],{"class":169,"line":279},[167,1157,209],{"emptyLinePlaceholder":208},[167,1159,1160,1162,1164],{"class":169,"line":289},[167,1161,174],{"class":173},[167,1163,299],{"class":177},[167,1165,185],{"class":173},[167,1167,1168,1170,1172,1175,1177,1180,1183,1185,1188],{"class":169,"line":294},[167,1169,307],{"class":173},[167,1171,507],{"class":177},[167,1173,1174],{"class":181}," type",[167,1176,267],{"class":173},[167,1178,1179],{"class":201},"\"button\"",[167,1181,1182],{"class":181}," @click",[167,1184,267],{"class":173},[167,1186,1187],{"class":201},"\"selectUser\"",[167,1189,185],{"class":173},[167,1191,1192],{"class":169,"line":304},[167,1193,1194],{"class":173},"    {{ props.userName }}\n",[167,1196,1197,1199,1201],{"class":169,"line":313},[167,1198,504],{"class":173},[167,1200,507],{"class":177},[167,1202,185],{"class":173},[167,1204,1205,1207,1209],{"class":169,"line":161},[167,1206,282],{"class":173},[167,1208,299],{"class":177},[167,1210,185],{"class":173},[15,1212,1213],{},"Las líneas resaltadas declaran la entrada y comunican el cambio. Si el padre necesita actualizar un valor, el hijo emite el evento y el padre decide cómo modificar su estado.",[22,1215,1217],{"id":1216},"composición-visual-con-slots-y-atributos-heredados","Composición visual con slots y atributos heredados",[15,1219,1220],{},"Usa slots cuando la variación principal sea el contenido o la estructura visual. El padre proporciona fragmentos de plantilla y el hijo define los puntos donde se renderizan:",[154,1222,1226],{"className":156,"code":1223,"filename":1224,"highlights":1225,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cdiv class=\"layout\">\n    \u003Cheader>\n      \u003Cslot name=\"header\">\u003C\u002Fslot>\n    \u003C\u002Fheader>\n    \u003Cmain>\n      \u003Cslot>\u003C\u002Fslot>\n    \u003C\u002Fmain>\n    \u003Cfooter>\n      \u003Cslot name=\"footer\">\u003C\u002Fslot>\n    \u003C\u002Ffooter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","BaseLayout.vue",[160,238,243,261],[87,1227,1228,1236,1253,1263,1287,1297,1307,1320,1328,1337,1356,1364,1372],{"__ignoreMap":163},[167,1229,1230,1232,1234],{"class":169,"line":170},[167,1231,174],{"class":173},[167,1233,299],{"class":177},[167,1235,185],{"class":173},[167,1237,1238,1240,1243,1246,1248,1251],{"class":169,"line":188},[167,1239,307],{"class":173},[167,1241,1242],{"class":177},"div",[167,1244,1245],{"class":181}," class",[167,1247,267],{"class":173},[167,1249,1250],{"class":201},"\"layout\"",[167,1252,185],{"class":173},[167,1254,1255,1258,1261],{"class":169,"line":205},[167,1256,1257],{"class":173},"    \u003C",[167,1259,1260],{"class":177},"header",[167,1262,185],{"class":173},[167,1264,1266,1269,1272,1275,1277,1280,1283,1285],{"class":1265,"line":160},[169,213],[167,1267,1268],{"class":173},"      \u003C",[167,1270,1271],{"class":177},"slot",[167,1273,1274],{"class":181}," name",[167,1276,267],{"class":173},[167,1278,1279],{"class":201},"\"header\"",[167,1281,1282],{"class":173},">\u003C\u002F",[167,1284,1271],{"class":177},[167,1286,185],{"class":173},[167,1288,1290,1293,1295],{"class":1289,"line":238},[169,213],[167,1291,1292],{"class":173},"    \u003C\u002F",[167,1294,1260],{"class":177},[167,1296,185],{"class":173},[167,1298,1300,1302,1305],{"class":1299,"line":243},[169,213],[167,1301,1257],{"class":173},[167,1303,1304],{"class":177},"main",[167,1306,185],{"class":173},[167,1308,1310,1312,1314,1316,1318],{"class":1309,"line":261},[169,213],[167,1311,1268],{"class":173},[167,1313,1271],{"class":177},[167,1315,1282],{"class":173},[167,1317,1271],{"class":177},[167,1319,185],{"class":173},[167,1321,1322,1324,1326],{"class":169,"line":273},[167,1323,1292],{"class":173},[167,1325,1304],{"class":177},[167,1327,185],{"class":173},[167,1329,1330,1332,1335],{"class":169,"line":279},[167,1331,1257],{"class":173},[167,1333,1334],{"class":177},"footer",[167,1336,185],{"class":173},[167,1338,1339,1341,1343,1345,1347,1350,1352,1354],{"class":169,"line":289},[167,1340,1268],{"class":173},[167,1342,1271],{"class":177},[167,1344,1274],{"class":181},[167,1346,267],{"class":173},[167,1348,1349],{"class":201},"\"footer\"",[167,1351,1282],{"class":173},[167,1353,1271],{"class":177},[167,1355,185],{"class":173},[167,1357,1358,1360,1362],{"class":169,"line":294},[167,1359,1292],{"class":173},[167,1361,1334],{"class":177},[167,1363,185],{"class":173},[167,1365,1366,1368,1370],{"class":169,"line":304},[167,1367,504],{"class":173},[167,1369,1242],{"class":177},[167,1371,185],{"class":173},[167,1373,1374,1376,1378],{"class":169,"line":313},[167,1375,282],{"class":173},[167,1377,299],{"class":177},[167,1379,185],{"class":173},[15,1381,1382],{},"Los slots con nombre distribuyen contenido en varias regiones. Un scoped slot permite que el hijo exponga datos al contenido proporcionado por el padre. Ese contenido conserva el alcance del padre; no obtiene acceso automático al estado privado del hijo.",[15,1384,1385,1386,1389,1390,1393,1394,1396],{},"Los atributos y listeners que no se declaran como props o emits pueden heredarse en el elemento raíz. Si el componente tiene múltiples nodos raíz, esa herencia automática no existe: enlaza explícitamente ",[87,1387,1388],{},"$attrs"," en el elemento adecuado cuando corresponda. Si desactivas ",[87,1391,1392],{},"inheritAttrs",", recuerda reenlazar ",[87,1395,1388],{}," de forma intencional.",[22,1398,1400],{"id":1399},"separar-lógica-y-presentación-con-composables","Separar lógica y presentación con composables",[15,1402,1403],{},"Un composable es una función basada en Composition API que encapsula y reutiliza lógica con estado. Es una buena opción cuando varios componentes necesitan la misma lógica, pero no comparten una estructura visual.",[154,1405,1409],{"className":542,"code":1406,"filename":1407,"highlights":1408,"language":546,"meta":163,"style":163},"import { onMounted, onUnmounted, ref } from 'vue'\n\nexport function useOnlineStatus() {\n  const isOnline = ref(true)\n  const updateStatus = () => { isOnline.value = navigator.onLine }\n\n  onMounted(() => window.addEventListener('online', updateStatus))\n  onUnmounted(() => window.removeEventListener('online', updateStatus))\n\n  return { isOnline }\n}\n","useOnlineStatus.ts",[160,238,243,261,273],[87,1410,1411,1422,1426,1438,1457,1480,1485,1510,1531,1535,1543],{"__ignoreMap":163},[167,1412,1413,1415,1418,1420],{"class":169,"line":170},[167,1414,192],{"class":191},[167,1416,1417],{"class":173}," { onMounted, onUnmounted, ref } ",[167,1419,198],{"class":191},[167,1421,202],{"class":201},[167,1423,1424],{"class":169,"line":188},[167,1425,209],{"emptyLinePlaceholder":208},[167,1427,1428,1430,1433,1436],{"class":169,"line":205},[167,1429,608],{"class":191},[167,1431,1432],{"class":191}," function",[167,1434,1435],{"class":181}," useOnlineStatus",[167,1437,763],{"class":173},[167,1439,1441,1444,1447,1449,1451,1453,1455],{"class":1440,"line":160},[169,213],[167,1442,1443],{"class":191},"  const",[167,1445,1446],{"class":219}," isOnline",[167,1448,223],{"class":191},[167,1450,226],{"class":181},[167,1452,229],{"class":173},[167,1454,390],{"class":219},[167,1456,235],{"class":173},[167,1458,1460,1462,1465,1467,1470,1472,1475,1477],{"class":1459,"line":238},[169,213],[167,1461,1443],{"class":191},[167,1463,1464],{"class":181}," updateStatus",[167,1466,223],{"class":191},[167,1468,1469],{"class":173}," () ",[167,1471,639],{"class":191},[167,1473,1474],{"class":173}," { isOnline.value ",[167,1476,267],{"class":191},[167,1478,1479],{"class":173}," navigator.onLine }\n",[167,1481,1483],{"class":1482,"line":243},[169,213],[167,1484,209],{"emptyLinePlaceholder":208},[167,1486,1488,1491,1494,1496,1499,1502,1504,1507],{"class":1487,"line":261},[169,213],[167,1489,1490],{"class":181},"  onMounted",[167,1492,1493],{"class":173},"(() ",[167,1495,639],{"class":191},[167,1497,1498],{"class":173}," window.",[167,1500,1501],{"class":181},"addEventListener",[167,1503,229],{"class":173},[167,1505,1506],{"class":201},"'online'",[167,1508,1509],{"class":173},", updateStatus))\n",[167,1511,1513,1516,1518,1520,1522,1525,1527,1529],{"class":1512,"line":273},[169,213],[167,1514,1515],{"class":181},"  onUnmounted",[167,1517,1493],{"class":173},[167,1519,639],{"class":191},[167,1521,1498],{"class":173},[167,1523,1524],{"class":181},"removeEventListener",[167,1526,229],{"class":173},[167,1528,1506],{"class":201},[167,1530,1509],{"class":173},[167,1532,1533],{"class":169,"line":279},[167,1534,209],{"emptyLinePlaceholder":208},[167,1536,1537,1540],{"class":169,"line":289},[167,1538,1539],{"class":191},"  return",[167,1541,1542],{"class":173}," { isOnline }\n",[167,1544,1545],{"class":169,"line":294},[167,1546,276],{"class":173},[15,1548,1549],{},"La limpieza del listener forma parte del contrato del composable. Vue recomienda composables frente a mixins porque el origen de las propiedades es más claro, hay menos riesgo de colisiones de nombres y se reduce la comunicación implícita.",[15,1551,1552],{},"Usa un componente cuando lógica y presentación formen una unidad reutilizable. Usa un composable cuando quieras reutilizar lógica sin imponer una interfaz visual.",[22,1554,1556],{"id":1555},"provideinject-para-dependencias-profundas","Provide\u002Finject para dependencias profundas",[15,1558,1559,1561],{},[87,1560,997],{}," evita pasar props por cada nivel intermedio cuando una dependencia pertenece a un contexto profundo, como un tema o la configuración de un formulario. La dependencia proporcionada más cercana puede ocultar otra definida más arriba.",[15,1563,1564],{},"Este mecanismo no debe convertirse automáticamente en un sustituto del estado compartido de aplicación. Documenta la clave, el contrato y el ciclo de vida de la dependencia para que la relación siga siendo comprensible.",[22,1566,1568],{"id":1567},"criterios-de-decisión-y-errores-frecuentes","Criterios de decisión y errores frecuentes",[33,1570,1571,1574,1577,1580,1586,1589,1592,1595,1598],{},[36,1572,1573],{},"Usa props y eventos para contratos directos entre padre e hijo.",[36,1575,1576],{},"Usa slots cuando la variación sea contenido o estructura visual.",[36,1578,1579],{},"Usa composables para lógica reutilizable sin estructura visual compartida.",[36,1581,1582,1583,1585],{},"Usa ",[87,1584,997],{}," para dependencias profundas o configuración contextual.",[36,1587,1588],{},"No transportes contenido visual complejo mediante eventos si un slot expresa mejor la composición.",[36,1590,1591],{},"No mutes las props directamente en el hijo.",[36,1593,1594],{},"No dependas de la herencia automática de atributos en componentes con múltiples raíces.",[36,1596,1597],{},"No elijas un componente renderless cuando un composable resuelve de forma más directa la lógica pura.",[36,1599,1600],{},"No presentes mixins ni un event bus global heredado de Vue 2 como estrategia principal para código nuevo.",[15,1602,1603,1604,1606],{},"La decisión central es escoger el mecanismo más pequeño que represente la relación: datos con props, intención con eventos, composición visual con slots, lógica con composables y dependencias profundas con ",[87,1605,997],{},". Esa separación mantiene los contratos visibles y facilita evolucionar cada componente sin arrastrar responsabilidades ajenas.",[924,1608,1609],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":163,"searchDepth":188,"depth":188,"links":1611},[1612,1613,1614,1615,1616,1617],{"id":1001,"depth":188,"text":1002},{"id":1015,"depth":188,"text":1016},{"id":1216,"depth":188,"text":1217},{"id":1399,"depth":188,"text":1400},{"id":1555,"depth":188,"text":1556},{"id":1567,"depth":188,"text":1568},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1783729357\u002Fvue-3-component-architecture_ecetna.png","Guía de Vue.js sobre arquitectura y componentes reutilizables","2026-07-10","Aprende a elegir entre props, eventos, slots, atributos heredados, composables y provide\u002Finject para diseñar componentes Vue 3 claros y mantenibles.",{"updatedAt":945,"author":946,"coverCaption":1623,"keywords":1624},"Referencia oficial de Vue.js sobre componentes",[1625,1626,1627,1628,1629,997],"Componentes","arquitectura de componentes en Vue 3","props y eventos","slots en Vue 3","composables","\u002Fblog\u002Fvue-3-component-architecture.es",[1632],{"headline":983,"author":1633,"datePublished":1634,"@type":961},{"name":946,"@type":959},"2026-07-10T17:19:30-05:00",{"title":983,"description":1621},"blog\u002Fvue-3-component-architecture.es",[1638,1640,1641,1642,1643,1646],{"tag":1625,"color":1639},"#41B883",{"tag":953,"color":971},{"tag":973,"color":974},{"tag":954,"color":976},{"tag":1644,"color":1645},"Eventos","#2D98DA",{"tag":1647,"color":1648},"Slots","#8E44AD","BaFZob8eRi9VR8OCyHwWlNIYLAdT7a-5PZC1sFT00E8",{"id":1651,"title":1652,"body":1653,"cover":3240,"coverAlt":3241,"date":3242,"description":3243,"draft":940,"extension":941,"lab":3244,"locale":943,"meta":3254,"navigation":208,"path":3261,"schemaOrg":3262,"seo":3265,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":3266,"tags":3267,"__hash__":3278},"blog\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es.md","Vue computed vs watch vs watchEffect: cuándo usar cada uno",{"type":8,"value":1654,"toc":3218},[1655,1670,1680,1683,1686,1689,1693,1698,1703,1708,1770,1777,1780,1783,2051,2060,2066,2080,2092,2099,2102,2251,2258,2262,2371,2376,2382,2385,2388,2408,2411,2699,2708,2711,2717,2722,2725,2849,2859,2862,2869,2874,2877,2922,2929,2969,2975,3024,3027,3031,3034,3040,3044,3049,3053,3058,3062,3067,3072,3077,3082,3086,3093,3096,3140,3146,3150,3153,3170,3177,3184,3189,3194,3198,3203,3208,3213,3216],[11,1656,1658,1659,1662,1663,1662,1666,1669],{"id":1657},"vue-computed-vs-watch-vs-watcheffect-cuándo-usar-cada-uno","Vue ",[87,1660,1661],{},"computed"," vs ",[87,1664,1665],{},"watch",[87,1667,1668],{},"watchEffect",": cuándo usar cada uno",[15,1671,1672,1673,1025,1675,1028,1677,1679],{},"Vue te da tres herramientas que suelen aparecer en la misma conversación: ",[87,1674,1661],{},[87,1676,1665],{},[87,1678,1668],{},".",[15,1681,1682],{},"Las tres reaccionan al estado, pero no resuelven el mismo problema.",[15,1684,1685],{},"Si las mezclas sin criterio, los componentes empiezan a sentirse impredecibles. Los valores se actualizan desde demasiados lugares, las llamadas a APIs se disparan más de lo esperado y una lógica que debería ser simple se vuelve difícil de depurar. Si eliges bien la herramienta, el código casi se explica solo.",[15,1687,1688],{},"Esta guía es un mapa práctico de decisión.",[22,1690,1692],{"id":1691},"la-versión-corta","La versión corta",[15,1694,1582,1695,1697],{},[87,1696,1661],{}," cuando necesitas un valor.",[15,1699,1582,1700,1702],{},[87,1701,1665],{}," cuando necesitas hacer algo porque un valor específico cambió.",[15,1704,1582,1705,1707],{},[87,1706,1668],{}," cuando el efecto debe rastrear automáticamente todo lo que lee.",[56,1709,1710,1726],{},[59,1711,1712],{},[62,1713,1714,1717,1720,1723],{},[65,1715,1716],{},"Herramienta",[65,1718,1719],{},"Ideal para",[65,1721,1722],{},"¿Debe devolver un valor?",[65,1724,1725],{},"¿Debe causar efectos secundarios?",[75,1727,1728,1743,1756],{},[62,1729,1730,1734,1737,1740],{},[80,1731,1732],{},[87,1733,1661],{},[80,1735,1736],{},"Estado derivado",[80,1738,1739],{},"Sí",[80,1741,1742],{},"No",[62,1744,1745,1749,1752,1754],{},[80,1746,1747],{},[87,1748,1665],{},[80,1750,1751],{},"Reacciones explícitas",[80,1753,1742],{},[80,1755,1739],{},[62,1757,1758,1762,1765,1767],{},[80,1759,1760],{},[87,1761,1668],{},[80,1763,1764],{},"Efectos con rastreo automático",[80,1766,1742],{},[80,1768,1769],{},"Sí, con cuidado",[22,1771,1773,1774,1776],{"id":1772},"empieza-con-computed-cuando-necesitas-estado-derivado","Empieza con ",[87,1775,1661],{}," cuando necesitas estado derivado",[15,1778,1779],{},"Un computed responde esta pregunta: \"¿Qué valor puedo derivar del estado que ya existe?\"",[15,1781,1782],{},"Por ejemplo, imagina el resumen de un carrito:",[154,1784,1787],{"className":156,"code":1785,"filename":1786,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst items = ref([\n  { id: 1, name: 'Stickers de Vue', price: 6, quantity: 2 },\n  { id: 2, name: 'Cuaderno de Nuxt', price: 14, quantity: 1 }\n])\n\nconst subtotal = computed(() => {\n  return items.value.reduce((total, item) => {\n    return total + item.price * item.quantity\n  }, 0)\n})\n\nconst hasFreeShipping = computed(() => subtotal.value >= 30)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Subtotal: {{ subtotal }}\u003C\u002Fp>\n  \u003Cp>{{ hasFreeShipping ? 'Envío gratis desbloqueado' : 'El envío se calcula al pagar' }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","CartSummary.vue",[87,1788,1789,1799,1810,1814,1828,1857,1879,1883,1887,1906,1933,1953,1963,1967,1971,1997,2005,2009,2017,2030,2043],{"__ignoreMap":163},[167,1790,1791,1793,1795,1797],{"class":169,"line":170},[167,1792,174],{"class":173},[167,1794,178],{"class":177},[167,1796,182],{"class":181},[167,1798,185],{"class":173},[167,1800,1801,1803,1806,1808],{"class":169,"line":188},[167,1802,192],{"class":191},[167,1804,1805],{"class":173}," { computed, ref } ",[167,1807,198],{"class":191},[167,1809,202],{"class":201},[167,1811,1812],{"class":169,"line":205},[167,1813,209],{"emptyLinePlaceholder":208},[167,1815,1816,1818,1821,1823,1825],{"class":169,"line":160},[167,1817,216],{"class":191},[167,1819,1820],{"class":219}," items",[167,1822,223],{"class":191},[167,1824,226],{"class":181},[167,1826,1827],{"class":173},"([\n",[167,1829,1830,1833,1836,1839,1842,1845,1848,1851,1854],{"class":169,"line":238},[167,1831,1832],{"class":173},"  { id: ",[167,1834,1835],{"class":219},"1",[167,1837,1838],{"class":173},", name: ",[167,1840,1841],{"class":201},"'Stickers de Vue'",[167,1843,1844],{"class":173},", price: ",[167,1846,1847],{"class":219},"6",[167,1849,1850],{"class":173},", quantity: ",[167,1852,1853],{"class":219},"2",[167,1855,1856],{"class":173}," },\n",[167,1858,1859,1861,1863,1865,1868,1870,1873,1875,1877],{"class":169,"line":243},[167,1860,1832],{"class":173},[167,1862,1853],{"class":219},[167,1864,1838],{"class":173},[167,1866,1867],{"class":201},"'Cuaderno de Nuxt'",[167,1869,1844],{"class":173},[167,1871,1872],{"class":219},"14",[167,1874,1850],{"class":173},[167,1876,1835],{"class":219},[167,1878,599],{"class":173},[167,1880,1881],{"class":169,"line":261},[167,1882,429],{"class":173},[167,1884,1885],{"class":169,"line":273},[167,1886,209],{"emptyLinePlaceholder":208},[167,1888,1889,1891,1894,1896,1899,1901,1903],{"class":169,"line":279},[167,1890,216],{"class":191},[167,1892,1893],{"class":219}," subtotal",[167,1895,223],{"class":191},[167,1897,1898],{"class":181}," computed",[167,1900,1493],{"class":173},[167,1902,639],{"class":191},[167,1904,1905],{"class":173}," {\n",[167,1907,1908,1910,1913,1916,1919,1922,1924,1927,1929,1931],{"class":169,"line":289},[167,1909,1539],{"class":191},[167,1911,1912],{"class":173}," items.value.",[167,1914,1915],{"class":181},"reduce",[167,1917,1918],{"class":173},"((",[167,1920,1921],{"class":254},"total",[167,1923,1025],{"class":173},[167,1925,1926],{"class":254},"item",[167,1928,693],{"class":173},[167,1930,639],{"class":191},[167,1932,1905],{"class":173},[167,1934,1935,1938,1941,1944,1947,1950],{"class":169,"line":294},[167,1936,1937],{"class":191},"    return",[167,1939,1940],{"class":173}," total ",[167,1942,1943],{"class":191},"+",[167,1945,1946],{"class":173}," item.price ",[167,1948,1949],{"class":191},"*",[167,1951,1952],{"class":173}," item.quantity\n",[167,1954,1955,1958,1961],{"class":169,"line":304},[167,1956,1957],{"class":173},"  }, ",[167,1959,1960],{"class":219},"0",[167,1962,235],{"class":173},[167,1964,1965],{"class":169,"line":313},[167,1966,403],{"class":173},[167,1968,1969],{"class":169,"line":161},[167,1970,209],{"emptyLinePlaceholder":208},[167,1972,1973,1975,1978,1980,1982,1984,1986,1989,1992,1995],{"class":169,"line":335},[167,1974,216],{"class":191},[167,1976,1977],{"class":219}," hasFreeShipping",[167,1979,223],{"class":191},[167,1981,1898],{"class":181},[167,1983,1493],{"class":173},[167,1985,639],{"class":191},[167,1987,1988],{"class":173}," subtotal.value ",[167,1990,1991],{"class":191},">=",[167,1993,1994],{"class":219}," 30",[167,1996,235],{"class":173},[167,1998,1999,2001,2003],{"class":169,"line":341},[167,2000,282],{"class":173},[167,2002,178],{"class":177},[167,2004,185],{"class":173},[167,2006,2007],{"class":169,"line":489},[167,2008,209],{"emptyLinePlaceholder":208},[167,2010,2011,2013,2015],{"class":169,"line":495},[167,2012,174],{"class":173},[167,2014,299],{"class":177},[167,2016,185],{"class":173},[167,2018,2019,2021,2023,2026,2028],{"class":169,"line":501},[167,2020,307],{"class":173},[167,2022,15],{"class":177},[167,2024,2025],{"class":173},">Subtotal: {{ subtotal }}\u003C\u002F",[167,2027,15],{"class":177},[167,2029,185],{"class":173},[167,2031,2032,2034,2036,2039,2041],{"class":169,"line":512},[167,2033,307],{"class":173},[167,2035,15],{"class":177},[167,2037,2038],{"class":173},">{{ hasFreeShipping ? 'Envío gratis desbloqueado' : 'El envío se calcula al pagar' }}\u003C\u002F",[167,2040,15],{"class":177},[167,2042,185],{"class":173},[167,2044,2045,2047,2049],{"class":169,"line":781},[167,2046,282],{"class":173},[167,2048,299],{"class":177},[167,2050,185],{"class":173},[15,2052,2053,2056,2057,1679],{},[87,2054,2055],{},"subtotal"," no es una segunda fuente de verdad. Es un valor derivado de ",[87,2058,2059],{},"items",[15,2061,2062,2063,2065],{},"Ahí es exactamente donde ",[87,2064,1661],{}," brilla:",[33,2067,2068,2071,2074,2077],{},[36,2069,2070],{},"Se cachea.",[36,2072,2073],{},"Se actualiza cuando cambian sus dependencias.",[36,2075,2076],{},"Mantiene el template legible.",[36,2078,2079],{},"Evita duplicar estado.",[15,2081,2082,2083,2086,2087,2089,2090,1679],{},"Si tienes la tentación de crear un ",[87,2084,2085],{},"ref"," y mantenerlo sincronizado manualmente con otro ",[87,2088,2085],{},", pausa. La mayoría de las veces, ese valor sincronizado debería ser un ",[87,2091,1661],{},[22,2093,2095,2096,2098],{"id":2094},"no-uses-watch-para-crear-un-valor-derivado","No uses ",[87,2097,1665],{}," para crear un valor derivado",[15,2100,2101],{},"Este es un error común:",[154,2103,2106],{"className":156,"code":2104,"filename":2105,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, watch } from 'vue'\n\nconst firstName = ref('Ada')\nconst lastName = ref('Lovelace')\nconst fullName = ref('')\n\nwatch([firstName, lastName], () => {\n  fullName.value = `${firstName.value} ${lastName.value}`\n}, { immediate: true })\n\u003C\u002Fscript>\n","AvoidThis.vue",[87,2107,2108,2118,2129,2133,2151,2169,2187,2191,2202,2233,2243],{"__ignoreMap":163},[167,2109,2110,2112,2114,2116],{"class":169,"line":170},[167,2111,174],{"class":173},[167,2113,178],{"class":177},[167,2115,182],{"class":181},[167,2117,185],{"class":173},[167,2119,2120,2122,2125,2127],{"class":169,"line":188},[167,2121,192],{"class":191},[167,2123,2124],{"class":173}," { ref, watch } ",[167,2126,198],{"class":191},[167,2128,202],{"class":201},[167,2130,2131],{"class":169,"line":205},[167,2132,209],{"emptyLinePlaceholder":208},[167,2134,2135,2137,2140,2142,2144,2146,2149],{"class":169,"line":160},[167,2136,216],{"class":191},[167,2138,2139],{"class":219}," firstName",[167,2141,223],{"class":191},[167,2143,226],{"class":181},[167,2145,229],{"class":173},[167,2147,2148],{"class":201},"'Ada'",[167,2150,235],{"class":173},[167,2152,2153,2155,2158,2160,2162,2164,2167],{"class":169,"line":238},[167,2154,216],{"class":191},[167,2156,2157],{"class":219}," lastName",[167,2159,223],{"class":191},[167,2161,226],{"class":181},[167,2163,229],{"class":173},[167,2165,2166],{"class":201},"'Lovelace'",[167,2168,235],{"class":173},[167,2170,2171,2173,2176,2178,2180,2182,2185],{"class":169,"line":243},[167,2172,216],{"class":191},[167,2174,2175],{"class":219}," fullName",[167,2177,223],{"class":191},[167,2179,226],{"class":181},[167,2181,229],{"class":173},[167,2183,2184],{"class":201},"''",[167,2186,235],{"class":173},[167,2188,2189],{"class":169,"line":261},[167,2190,209],{"emptyLinePlaceholder":208},[167,2192,2193,2195,2198,2200],{"class":169,"line":273},[167,2194,1665],{"class":181},[167,2196,2197],{"class":173},"([firstName, lastName], () ",[167,2199,639],{"class":191},[167,2201,1905],{"class":173},[167,2203,2204,2207,2209,2212,2215,2217,2220,2223,2226,2228,2230],{"class":169,"line":279},[167,2205,2206],{"class":173},"  fullName.value ",[167,2208,267],{"class":191},[167,2210,2211],{"class":201}," `${",[167,2213,2214],{"class":173},"firstName",[167,2216,1679],{"class":201},[167,2218,2219],{"class":173},"value",[167,2221,2222],{"class":201},"} ${",[167,2224,2225],{"class":173},"lastName",[167,2227,1679],{"class":201},[167,2229,2219],{"class":173},[167,2231,2232],{"class":201},"}`\n",[167,2234,2235,2238,2240],{"class":169,"line":289},[167,2236,2237],{"class":173},"}, { immediate: ",[167,2239,390],{"class":219},[167,2241,2242],{"class":173}," })\n",[167,2244,2245,2247,2249],{"class":169,"line":294},[167,2246,282],{"class":173},[167,2248,178],{"class":177},[167,2250,185],{"class":173},[15,2252,2253,2254,2257],{},"Funciona, pero hace que el componente sea más difícil de lo necesario. Ahora ",[87,2255,2256],{},"fullName"," es un estado escribible que debe mantenerse sincronizado para siempre.",[15,2259,1582,2260,583],{},[87,2261,1661],{},[154,2263,2266],{"className":156,"code":2264,"filename":2265,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst firstName = ref('Ada')\nconst lastName = ref('Lovelace')\n\nconst fullName = computed(() => `${firstName.value} ${lastName.value}`)\n\u003C\u002Fscript>\n","UseComputed.vue",[87,2267,2268,2278,2288,2292,2308,2324,2328,2363],{"__ignoreMap":163},[167,2269,2270,2272,2274,2276],{"class":169,"line":170},[167,2271,174],{"class":173},[167,2273,178],{"class":177},[167,2275,182],{"class":181},[167,2277,185],{"class":173},[167,2279,2280,2282,2284,2286],{"class":169,"line":188},[167,2281,192],{"class":191},[167,2283,1805],{"class":173},[167,2285,198],{"class":191},[167,2287,202],{"class":201},[167,2289,2290],{"class":169,"line":205},[167,2291,209],{"emptyLinePlaceholder":208},[167,2293,2294,2296,2298,2300,2302,2304,2306],{"class":169,"line":160},[167,2295,216],{"class":191},[167,2297,2139],{"class":219},[167,2299,223],{"class":191},[167,2301,226],{"class":181},[167,2303,229],{"class":173},[167,2305,2148],{"class":201},[167,2307,235],{"class":173},[167,2309,2310,2312,2314,2316,2318,2320,2322],{"class":169,"line":238},[167,2311,216],{"class":191},[167,2313,2157],{"class":219},[167,2315,223],{"class":191},[167,2317,226],{"class":181},[167,2319,229],{"class":173},[167,2321,2166],{"class":201},[167,2323,235],{"class":173},[167,2325,2326],{"class":169,"line":243},[167,2327,209],{"emptyLinePlaceholder":208},[167,2329,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358,2361],{"class":169,"line":261},[167,2331,216],{"class":191},[167,2333,2175],{"class":219},[167,2335,223],{"class":191},[167,2337,1898],{"class":181},[167,2339,1493],{"class":173},[167,2341,639],{"class":191},[167,2343,2211],{"class":201},[167,2345,2214],{"class":173},[167,2347,1679],{"class":201},[167,2349,2219],{"class":173},[167,2351,2222],{"class":201},[167,2353,2225],{"class":173},[167,2355,1679],{"class":201},[167,2357,2219],{"class":173},[167,2359,2360],{"class":201},"}`",[167,2362,235],{"class":173},[167,2364,2365,2367,2369],{"class":169,"line":273},[167,2366,282],{"class":173},[167,2368,178],{"class":177},[167,2370,185],{"class":173},[15,2372,2373,2374,1679],{},"La regla es simple: si el resultado puede calcularse desde estado reactivo, prefiere ",[87,2375,1661],{},[22,2377,1582,2379,2381],{"id":2378},"usa-watch-para-efectos-secundarios-explícitos",[87,2380,1665],{}," para efectos secundarios explícitos",[15,2383,2384],{},"Un watcher responde otra pregunta: \"Cuando esta cosa específica cambie, ¿qué debe pasar?\"",[15,2386,2387],{},"Ese \"pasar\" normalmente es un efecto secundario:",[33,2389,2390,2393,2399,2402,2405],{},[36,2391,2392],{},"Pedir datos.",[36,2394,2395,2396,1679],{},"Escribir en ",[87,2397,2398],{},"localStorage",[36,2400,2401],{},"Reiniciar paginación.",[36,2403,2404],{},"Sincronizar la URL.",[36,2406,2407],{},"Llamar una API del navegador.",[15,2409,2410],{},"Aquí tienes un ejemplo de búsqueda:",[154,2412,2415],{"className":156,"code":2413,"filename":2414,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, async (value, previousValue) => {\n  if (value === previousValue) return\n\n  page.value = 1\n  await fetchResults(value)\n})\n\nasync function fetchResults(value) {\n  console.log('Buscando resultados para:', value)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" type=\"search\" placeholder=\"Buscar\">\n  \u003Cp>Página: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","SearchResults.vue",[87,2416,2417,2427,2438,2442,2459,2476,2480,2510,2514,2540,2557,2561,2571,2582,2586,2590,2604,2620,2624,2632,2636,2644,2676,2690],{"__ignoreMap":163},[167,2418,2419,2421,2423,2425],{"class":169,"line":170},[167,2420,174],{"class":173},[167,2422,178],{"class":177},[167,2424,182],{"class":181},[167,2426,185],{"class":173},[167,2428,2429,2431,2434,2436],{"class":169,"line":188},[167,2430,192],{"class":191},[167,2432,2433],{"class":173}," { computed, ref, watch } ",[167,2435,198],{"class":191},[167,2437,202],{"class":201},[167,2439,2440],{"class":169,"line":205},[167,2441,209],{"emptyLinePlaceholder":208},[167,2443,2444,2446,2449,2451,2453,2455,2457],{"class":169,"line":160},[167,2445,216],{"class":191},[167,2447,2448],{"class":219}," query",[167,2450,223],{"class":191},[167,2452,226],{"class":181},[167,2454,229],{"class":173},[167,2456,2184],{"class":201},[167,2458,235],{"class":173},[167,2460,2461,2463,2466,2468,2470,2472,2474],{"class":169,"line":238},[167,2462,216],{"class":191},[167,2464,2465],{"class":219}," page",[167,2467,223],{"class":191},[167,2469,226],{"class":181},[167,2471,229],{"class":173},[167,2473,1835],{"class":219},[167,2475,235],{"class":173},[167,2477,2478],{"class":169,"line":243},[167,2479,209],{"emptyLinePlaceholder":208},[167,2481,2482,2484,2487,2489,2491,2493,2495,2498,2501,2504,2507],{"class":169,"line":261},[167,2483,216],{"class":191},[167,2485,2486],{"class":219}," normalizedQuery",[167,2488,223],{"class":191},[167,2490,1898],{"class":181},[167,2492,1493],{"class":173},[167,2494,639],{"class":191},[167,2496,2497],{"class":173}," query.value.",[167,2499,2500],{"class":181},"trim",[167,2502,2503],{"class":173},"().",[167,2505,2506],{"class":181},"toLowerCase",[167,2508,2509],{"class":173},"())\n",[167,2511,2512],{"class":169,"line":273},[167,2513,209],{"emptyLinePlaceholder":208},[167,2515,2516,2518,2521,2524,2527,2529,2531,2534,2536,2538],{"class":169,"line":279},[167,2517,1665],{"class":181},[167,2519,2520],{"class":173},"(normalizedQuery, ",[167,2522,2523],{"class":191},"async",[167,2525,2526],{"class":173}," (",[167,2528,2219],{"class":254},[167,2530,1025],{"class":173},[167,2532,2533],{"class":254},"previousValue",[167,2535,693],{"class":173},[167,2537,639],{"class":191},[167,2539,1905],{"class":173},[167,2541,2542,2545,2548,2551,2554],{"class":169,"line":289},[167,2543,2544],{"class":191},"  if",[167,2546,2547],{"class":173}," (value ",[167,2549,2550],{"class":191},"===",[167,2552,2553],{"class":173}," previousValue) ",[167,2555,2556],{"class":191},"return\n",[167,2558,2559],{"class":169,"line":294},[167,2560,209],{"emptyLinePlaceholder":208},[167,2562,2563,2566,2568],{"class":169,"line":304},[167,2564,2565],{"class":173},"  page.value ",[167,2567,267],{"class":191},[167,2569,2570],{"class":219}," 1\n",[167,2572,2573,2576,2579],{"class":169,"line":313},[167,2574,2575],{"class":191},"  await",[167,2577,2578],{"class":181}," fetchResults",[167,2580,2581],{"class":173},"(value)\n",[167,2583,2584],{"class":169,"line":161},[167,2585,403],{"class":173},[167,2587,2588],{"class":169,"line":335},[167,2589,209],{"emptyLinePlaceholder":208},[167,2591,2592,2594,2596,2598,2600,2602],{"class":169,"line":341},[167,2593,2523],{"class":191},[167,2595,1432],{"class":191},[167,2597,2578],{"class":181},[167,2599,229],{"class":173},[167,2601,2219],{"class":254},[167,2603,258],{"class":173},[167,2605,2606,2609,2612,2614,2617],{"class":169,"line":489},[167,2607,2608],{"class":173},"  console.",[167,2610,2611],{"class":181},"log",[167,2613,229],{"class":173},[167,2615,2616],{"class":201},"'Buscando resultados para:'",[167,2618,2619],{"class":173},", value)\n",[167,2621,2622],{"class":169,"line":495},[167,2623,276],{"class":173},[167,2625,2626,2628,2630],{"class":169,"line":501},[167,2627,282],{"class":173},[167,2629,178],{"class":177},[167,2631,185],{"class":173},[167,2633,2634],{"class":169,"line":512},[167,2635,209],{"emptyLinePlaceholder":208},[167,2637,2638,2640,2642],{"class":169,"line":781},[167,2639,174],{"class":173},[167,2641,299],{"class":177},[167,2643,185],{"class":173},[167,2645,2646,2648,2651,2654,2656,2659,2661,2663,2666,2669,2671,2674],{"class":169,"line":786},[167,2647,307],{"class":173},[167,2649,2650],{"class":177},"input",[167,2652,2653],{"class":181}," v-model",[167,2655,267],{"class":173},[167,2657,2658],{"class":201},"\"query\"",[167,2660,1174],{"class":181},[167,2662,267],{"class":173},[167,2664,2665],{"class":201},"\"search\"",[167,2667,2668],{"class":181}," placeholder",[167,2670,267],{"class":173},[167,2672,2673],{"class":201},"\"Buscar\"",[167,2675,185],{"class":173},[167,2677,2679,2681,2683,2686,2688],{"class":169,"line":2678},23,[167,2680,307],{"class":173},[167,2682,15],{"class":177},[167,2684,2685],{"class":173},">Página: {{ page }}\u003C\u002F",[167,2687,15],{"class":177},[167,2689,185],{"class":173},[167,2691,2693,2695,2697],{"class":169,"line":2692},24,[167,2694,282],{"class":173},[167,2696,299],{"class":177},[167,2698,185],{"class":173},[15,2700,2701,2702,2704,2705,1679],{},"Este es un buen uso de ",[87,2703,1665],{}," porque la fuente es explícita: ",[87,2706,2707],{},"normalizedQuery",[15,2709,2710],{},"Puedes leer el código y saber exactamente por qué ocurre la búsqueda.",[22,2712,1582,2714,2716],{"id":2713},"usa-watcheffect-para-rastreo-automático",[87,2715,1668],{}," para rastreo automático",[15,2718,2719,2721],{},[87,2720,1668],{}," se ejecuta inmediatamente y rastrea cada valor reactivo leído durante su ejecución.",[15,2723,2724],{},"Eso lo hace cómodo cuando la lista de dependencias es evidente desde el cuerpo:",[154,2726,2729],{"className":156,"code":2727,"filename":2728,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, watchEffect } from 'vue'\n\nconst userId = ref(1)\nconst locale = ref('es')\n\nwatchEffect(() => {\n  console.log(`Cargar usuario ${userId.value} usando locale ${locale.value}`)\n})\n\u003C\u002Fscript>\n","AutoTrackedEffect.vue",[87,2730,2731,2741,2752,2756,2773,2791,2795,2805,2837,2841],{"__ignoreMap":163},[167,2732,2733,2735,2737,2739],{"class":169,"line":170},[167,2734,174],{"class":173},[167,2736,178],{"class":177},[167,2738,182],{"class":181},[167,2740,185],{"class":173},[167,2742,2743,2745,2748,2750],{"class":169,"line":188},[167,2744,192],{"class":191},[167,2746,2747],{"class":173}," { ref, watchEffect } ",[167,2749,198],{"class":191},[167,2751,202],{"class":201},[167,2753,2754],{"class":169,"line":205},[167,2755,209],{"emptyLinePlaceholder":208},[167,2757,2758,2760,2763,2765,2767,2769,2771],{"class":169,"line":160},[167,2759,216],{"class":191},[167,2761,2762],{"class":219}," userId",[167,2764,223],{"class":191},[167,2766,226],{"class":181},[167,2768,229],{"class":173},[167,2770,1835],{"class":219},[167,2772,235],{"class":173},[167,2774,2775,2777,2780,2782,2784,2786,2789],{"class":169,"line":238},[167,2776,216],{"class":191},[167,2778,2779],{"class":219}," locale",[167,2781,223],{"class":191},[167,2783,226],{"class":181},[167,2785,229],{"class":173},[167,2787,2788],{"class":201},"'es'",[167,2790,235],{"class":173},[167,2792,2793],{"class":169,"line":243},[167,2794,209],{"emptyLinePlaceholder":208},[167,2796,2797,2799,2801,2803],{"class":169,"line":261},[167,2798,1668],{"class":181},[167,2800,1493],{"class":173},[167,2802,639],{"class":191},[167,2804,1905],{"class":173},[167,2806,2807,2809,2811,2813,2816,2819,2821,2823,2826,2829,2831,2833,2835],{"class":169,"line":273},[167,2808,2608],{"class":173},[167,2810,2611],{"class":181},[167,2812,229],{"class":173},[167,2814,2815],{"class":201},"`Cargar usuario ${",[167,2817,2818],{"class":173},"userId",[167,2820,1679],{"class":201},[167,2822,2219],{"class":173},[167,2824,2825],{"class":201},"} usando locale ${",[167,2827,2828],{"class":173},"locale",[167,2830,1679],{"class":201},[167,2832,2219],{"class":173},[167,2834,2360],{"class":201},[167,2836,235],{"class":173},[167,2838,2839],{"class":169,"line":279},[167,2840,403],{"class":173},[167,2842,2843,2845,2847],{"class":169,"line":289},[167,2844,282],{"class":173},[167,2846,178],{"class":177},[167,2848,185],{"class":173},[15,2850,2851,2852,1028,2855,2858],{},"El efecto lee ",[87,2853,2854],{},"userId.value",[87,2856,2857],{},"locale.value",", así que Vue rastrea ambos. Cuando cualquiera cambia, el efecto se ejecuta otra vez.",[15,2860,2861],{},"Esto es expresivo, pero también exige disciplina. Si más adelante lees otros valores reactivos, también agregas más dependencias. A veces eso es justo lo que quieres. Otras veces se convierte en una sorpresa.",[22,2863,2865,2866,2868],{"id":2864},"cuidado-con-watcheffect-asíncrono","Cuidado con ",[87,2867,1668],{}," asíncrono",[15,2870,2871,2873],{},[87,2872,1668],{}," solo rastrea las lecturas reactivas que ocurren durante su ejecución síncrona.",[15,2875,2876],{},"Esto sí se rastrea:",[154,2878,2883],{"className":2879,"code":2880,"filename":2881,"language":2882,"meta":163,"style":163},"language-js shiki shiki-themes github-light github-dark","watchEffect(async () => {\n  console.log(userId.value)\n  await loadSomething()\n})\n","tracked-before-await.js","js",[87,2884,2885,2899,2908,2918],{"__ignoreMap":163},[167,2886,2887,2889,2891,2893,2895,2897],{"class":169,"line":170},[167,2888,1668],{"class":181},[167,2890,229],{"class":173},[167,2892,2523],{"class":191},[167,2894,1469],{"class":173},[167,2896,639],{"class":191},[167,2898,1905],{"class":173},[167,2900,2901,2903,2905],{"class":169,"line":188},[167,2902,2608],{"class":173},[167,2904,2611],{"class":181},[167,2906,2907],{"class":173},"(userId.value)\n",[167,2909,2910,2912,2915],{"class":169,"line":205},[167,2911,2575],{"class":191},[167,2913,2914],{"class":181}," loadSomething",[167,2916,2917],{"class":173},"()\n",[167,2919,2920],{"class":169,"line":160},[167,2921,403],{"class":173},[15,2923,2924,2925,2928],{},"Pero las lecturas reactivas después de ",[87,2926,2927],{},"await"," son más fáciles de malinterpretar:",[154,2930,2933],{"className":2879,"code":2931,"filename":2932,"language":2882,"meta":163,"style":163},"watchEffect(async () => {\n  await loadSomething()\n  console.log(userId.value)\n})\n","after-await.js",[87,2934,2935,2949,2957,2965],{"__ignoreMap":163},[167,2936,2937,2939,2941,2943,2945,2947],{"class":169,"line":170},[167,2938,1668],{"class":181},[167,2940,229],{"class":173},[167,2942,2523],{"class":191},[167,2944,1469],{"class":173},[167,2946,639],{"class":191},[167,2948,1905],{"class":173},[167,2950,2951,2953,2955],{"class":169,"line":188},[167,2952,2575],{"class":191},[167,2954,2914],{"class":181},[167,2956,2917],{"class":173},[167,2958,2959,2961,2963],{"class":169,"line":205},[167,2960,2608],{"class":173},[167,2962,2611],{"class":181},[167,2964,2907],{"class":173},[167,2966,2967],{"class":169,"line":160},[167,2968,403],{"class":173},[15,2970,2971,2972,2974],{},"Si un efecto asíncrono depende de una fuente específica, ",[87,2973,1665],{}," suele ser más claro:",[154,2976,2979],{"className":2879,"code":2977,"filename":2978,"language":2882,"meta":163,"style":163},"watch(userId, async (id) => {\n  profile.value = await fetchUserProfile(id)\n}, { immediate: true })\n","async-watch.js",[87,2980,2981,3000,3016],{"__ignoreMap":163},[167,2982,2983,2985,2988,2990,2992,2994,2996,2998],{"class":169,"line":170},[167,2984,1665],{"class":181},[167,2986,2987],{"class":173},"(userId, ",[167,2989,2523],{"class":191},[167,2991,2526],{"class":173},[167,2993,580],{"class":254},[167,2995,693],{"class":173},[167,2997,639],{"class":191},[167,2999,1905],{"class":173},[167,3001,3002,3005,3007,3010,3013],{"class":169,"line":188},[167,3003,3004],{"class":173},"  profile.value ",[167,3006,267],{"class":191},[167,3008,3009],{"class":191}," await",[167,3011,3012],{"class":181}," fetchUserProfile",[167,3014,3015],{"class":173},"(id)\n",[167,3017,3018,3020,3022],{"class":169,"line":205},[167,3019,2237],{"class":173},[167,3021,390],{"class":219},[167,3023,2242],{"class":173},[15,3025,3026],{},"La dependencia queda explícita. Quien lea el código después no necesita inspeccionar todo el cuerpo para saber qué dispara la petición.",[22,3028,3030],{"id":3029},"un-árbol-de-decisión-práctico","Un árbol de decisión práctico",[15,3032,3033],{},"Haz estas preguntas en orden:",[3035,3036,3037],"ol",{},[36,3038,3039],{},"¿Necesito un valor para el template o para otro cálculo?",[15,3041,1582,3042,1679],{},[87,3043,1661],{},[3035,3045,3046],{"start":188},[36,3047,3048],{},"¿Necesito ejecutar código porque cambió una fuente específica?",[15,3050,1582,3051,1679],{},[87,3052,1665],{},[3035,3054,3055],{"start":205},[36,3056,3057],{},"¿Necesito un efecto que dependa naturalmente de todo lo que lee?",[15,3059,1582,3060,1679],{},[87,3061,1668],{},[3035,3063,3064],{"start":160},[36,3065,3066],{},"¿Estoy escribiendo en otro ref solo para mantenerlo sincronizado?",[15,3068,3069,3070,1679],{},"Probablemente necesitas ",[87,3071,1661],{},[3035,3073,3074],{"start":238},[36,3075,3076],{},"¿El efecto hace una petición, toca storage o coordina algo fuera de Vue?",[15,3078,3069,3079,3081],{},[87,3080,1665],{},", a menos que el rastreo automático sea realmente la intención.",[22,3083,3085],{"id":3084},"errores-comunes","Errores comunes",[3087,3088,3090,3091],"h3",{"id":3089},"mutar-estado-dentro-de-computed","Mutar estado dentro de ",[87,3092,1661],{},[15,3094,3095],{},"Un getter de computed no debería cambiar estado.",[154,3097,3100],{"className":2879,"code":3098,"filename":3099,"language":2882,"meta":163,"style":163},"const total = computed(() => {\n  analyticsCount.value++\n  return items.value.length\n})\n","bad-computed-side-effect.js",[87,3101,3102,3119,3127,3136],{"__ignoreMap":163},[167,3103,3104,3106,3109,3111,3113,3115,3117],{"class":169,"line":170},[167,3105,216],{"class":191},[167,3107,3108],{"class":219}," total",[167,3110,223],{"class":191},[167,3112,1898],{"class":181},[167,3114,1493],{"class":173},[167,3116,639],{"class":191},[167,3118,1905],{"class":173},[167,3120,3121,3124],{"class":169,"line":188},[167,3122,3123],{"class":173},"  analyticsCount.value",[167,3125,3126],{"class":191},"++\n",[167,3128,3129,3131,3133],{"class":169,"line":205},[167,3130,1539],{"class":191},[167,3132,1912],{"class":173},[167,3134,3135],{"class":219},"length\n",[167,3137,3138],{"class":169,"line":160},[167,3139,403],{"class":173},[15,3141,3142,3143,3145],{},"Eso hace que un cálculo se comporte como un efecto. Mantén ",[87,3144,1661],{}," puro.",[3087,3147,3149],{"id":3148},"observar-demasiado","Observar demasiado",[15,3151,3152],{},"Los watchers profundos pueden ser útiles, pero es fácil abusar de ellos.",[154,3154,3157],{"className":2879,"code":3155,"filename":3156,"language":2882,"meta":163,"style":163},"watch(settings, saveSettings, { deep: true })\n","deep-watch.js",[87,3158,3159],{"__ignoreMap":163},[167,3160,3161,3163,3166,3168],{"class":169,"line":170},[167,3162,1665],{"class":181},[167,3164,3165],{"class":173},"(settings, saveSettings, { deep: ",[167,3167,390],{"class":219},[167,3169,2242],{"class":173},[15,3171,3172,3173,3176],{},"Si ",[87,3174,3175],{},"settings"," es grande, esto puede volverse costoso o demasiado amplio. Cuando puedas, observa el campo específico que importa.",[3087,3178,3180,3181,3183],{"id":3179},"usar-watcheffect-cuando-necesitas-control","Usar ",[87,3182,1668],{}," cuando necesitas control",[15,3185,3186,3188],{},[87,3187,1668],{}," es maravilloso para efectos compactos, pero no tanto cuando el disparador importa.",[15,3190,3191,3192,1679],{},"Si necesitas decir \"ejecuta esto solo cuando cambie el id seleccionado\", dilo con ",[87,3193,1665],{},[22,3195,3197],{"id":3196},"regla-final","Regla final",[15,3199,3200,3201,1679],{},"Si describe datos, usa ",[87,3202,1661],{},[15,3204,3205,3206,1679],{},"Si responde a un cambio, usa ",[87,3207,1665],{},[15,3209,3210,3211,1679],{},"Si debe rastrear lo que lee, usa ",[87,3212,1668],{},[15,3214,3215],{},"Esa pequeña diferencia evita una cantidad sorprendente de caos reactivo.",[924,3217,926],{},{"title":163,"searchDepth":188,"depth":188,"links":3219},[3220,3221,3223,3225,3227,3229,3231,3232,3239],{"id":1691,"depth":188,"text":1692},{"id":1772,"depth":188,"text":3222},"Empieza con computed cuando necesitas estado derivado",{"id":2094,"depth":188,"text":3224},"No uses watch para crear un valor derivado",{"id":2378,"depth":188,"text":3226},"Usa watch para efectos secundarios explícitos",{"id":2713,"depth":188,"text":3228},"Usa watchEffect para rastreo automático",{"id":2864,"depth":188,"text":3230},"Cuidado con watchEffect asíncrono",{"id":3029,"depth":188,"text":3030},{"id":3084,"depth":188,"text":3085,"children":3233},[3234,3236,3237],{"id":3089,"depth":205,"text":3235},"Mutar estado dentro de computed",{"id":3148,"depth":205,"text":3149},{"id":3179,"depth":205,"text":3238},"Usar watchEffect cuando necesitas control",{"id":3196,"depth":188,"text":3197},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1783385054\u002Fvue-computed-watch-watcheffect-guide_vepplp.png","Conceptos de reactividad en Vue representados como flujos de datos conectados","2026-07-07","Aprende la diferencia práctica entre computed, watch y watchEffect en Vue 3, con ejemplos, errores comunes y una guía de decisión para componentes reales.",{"title":3245,"goal":3246,"tasks":3247,"starterCode":3252,"solutionHint":3253},"Elige la herramienta reactiva correcta","Practica el uso de computed para estado derivado, watch para efectos secundarios explícitos y watchEffect para rastreo automático de dependencias.",[3248,3249,3250,3251],"Crea un input de búsqueda guardado en un ref.","Usa computed para normalizar la búsqueda.","Usa watch para disparar una función tipo fetch solo cuando cambie la búsqueda normalizada.","Usa watchEffect para registrar cada valor reactivo leído dentro del efecto y explica por qué se ejecuta.","\u003Cscript setup>\nimport { computed, ref, watch, watchEffect } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, (value) => {\n  page.value = 1\n  console.log('Buscar resultados para:', value)\n})\n\nwatchEffect(() => {\n  console.log('Estado actual de búsqueda:', normalizedQuery.value, page.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" placeholder=\"Buscar artículos\">\n  \u003Cp>Búsqueda normalizada: {{ normalizedQuery }}\u003C\u002Fp>\n  \u003Cp>Página: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El computed deriva datos sin causar efectos secundarios. El watch reacciona a una fuente explícita. El watchEffect se vuelve a ejecutar cuando cambia cualquier valor que lee.",{"updatedAt":3255,"coverCaption":3256,"author":946,"keywords":3257},"2026-07-06T20:00:00-05:00","Computed, watchers y efectos en Vue 3 por TODOvue",[3258,951,1661,1665,1668,3259,3260],"Vue.js","reactividad","Composition API","\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es",[3263],{"headline":1652,"author":3264,"datePublished":3255,"@type":961},{"name":946,"@type":959},{"title":1652,"description":3243},"blog\u002Fvue-computed-watch-watcheffect-guide.es",[3268,3271,3272,3275],{"tag":3269,"color":3270},"Reactividad","#1D5BA1",{"tag":973,"color":974},{"tag":3273,"color":3274},"Rendimiento","#D4A017",{"tag":3276,"color":3277},"Guías","#42B983","dnpNCDLnmGJT3EOACnEoOccVdMrkVAJUki4IRRGk64k",{"id":3280,"title":3281,"body":3282,"cover":5395,"coverAlt":3281,"date":5396,"description":5397,"draft":940,"extension":941,"lab":5398,"locale":943,"meta":5408,"navigation":208,"path":5412,"schemaOrg":5413,"seo":5417,"series":963,"seriesDescription":964,"seriesOrder":188,"seriesTitle":965,"slug":942,"stem":5418,"tags":5419,"__hash__":5426},"blog\u002Fblog\u002Fvue-3-props-emits-component-communication.es.md","Props y Emits en Vue 3: comunicación entre componentes",{"type":8,"value":3283,"toc":5383},[3284,3287,3290,3293,3309,3312,3316,3319,3582,3585,3588,3799,3802,3808,3817,3970,4129,4132,4135,4141,4144,4372,4598,4601,4605,4608,4611,4704,4707,4710,4825,5053,5056,5109,5113,5116,5119,5146,5156,5160,5163,5166,5292,5298,5326,5329,5333,5336,5350,5356,5359,5363,5366,5372,5375,5378,5381],[11,3285,3281],{"id":3286},"props-y-emits-en-vue-3-comunicación-entre-componentes",[15,3288,3289],{},"Cuando una aplicación empieza a dividirse en componentes, aparece una pregunta muy simple: ¿cómo se pasan información entre ellos?",[15,3291,3292],{},"En Vue, la respuesta básica suele ser esta:",[33,3294,3295,3302],{},[36,3296,3297,3298,3301],{},"Las ",[87,3299,3300],{},"props"," pasan datos desde el componente padre hacia el componente hijo.",[36,3303,3304,3305,3308],{},"Los ",[87,3306,3307],{},"emits"," permiten que el componente hijo avise algo al componente padre.",[15,3310,3311],{},"Ese flujo puede parecer pequeño, pero es una de las ideas que más orden le da a una interfaz. El padre conserva el estado importante. El hijo recibe lo que necesita para mostrarse y emite eventos cuando pasa algo que el padre debería conocer.",[22,3313,3315],{"id":3314},"el-flujo-normal-datos-bajan-eventos-suben","El flujo normal: datos bajan, eventos suben",[15,3317,3318],{},"Imagina una lista de tareas. El componente padre tiene el arreglo completo:",[154,3320,3324],{"className":156,"code":3321,"filename":3322,"highlights":3323,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport TaskCard from '.\u002FTaskCard.vue'\n\nconst tasks = ref([\n  { id: 1, title: 'Leer la guía de props', completed: false },\n  { id: 2, title: 'Crear un componente pequeño', completed: false }\n])\n\nconst completeTask = (taskId) => {\n  const task = tasks.value.find((item) => item.id === taskId)\n  if (task) {\n    task.completed = true\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskCard\n    v-for=\"task in tasks\"\n    :key=\"task.id\"\n    :task=\"task\"\n    @complete=\"completeTask\"\n  \u002F>\n\u003C\u002Ftemplate>\n","TaskList.vue",[501,512,781,786,2678],[87,3325,3326,3336,3346,3358,3362,3375,3395,3412,3416,3420,3440,3471,3478,3488,3493,3497,3505,3509,3517,3525,3536,3547,3558,3569,3573],{"__ignoreMap":163},[167,3327,3328,3330,3332,3334],{"class":169,"line":170},[167,3329,174],{"class":173},[167,3331,178],{"class":177},[167,3333,182],{"class":181},[167,3335,185],{"class":173},[167,3337,3338,3340,3342,3344],{"class":169,"line":188},[167,3339,192],{"class":191},[167,3341,195],{"class":173},[167,3343,198],{"class":191},[167,3345,202],{"class":201},[167,3347,3348,3350,3353,3355],{"class":169,"line":205},[167,3349,192],{"class":191},[167,3351,3352],{"class":173}," TaskCard ",[167,3354,198],{"class":191},[167,3356,3357],{"class":201}," '.\u002FTaskCard.vue'\n",[167,3359,3360],{"class":169,"line":160},[167,3361,209],{"emptyLinePlaceholder":208},[167,3363,3364,3366,3369,3371,3373],{"class":169,"line":238},[167,3365,216],{"class":191},[167,3367,3368],{"class":219}," tasks",[167,3370,223],{"class":191},[167,3372,226],{"class":181},[167,3374,1827],{"class":173},[167,3376,3377,3379,3381,3384,3387,3390,3393],{"class":169,"line":243},[167,3378,1832],{"class":173},[167,3380,1835],{"class":219},[167,3382,3383],{"class":173},", title: ",[167,3385,3386],{"class":201},"'Leer la guía de props'",[167,3388,3389],{"class":173},", completed: ",[167,3391,3392],{"class":219},"false",[167,3394,1856],{"class":173},[167,3396,3397,3399,3401,3403,3406,3408,3410],{"class":169,"line":261},[167,3398,1832],{"class":173},[167,3400,1853],{"class":219},[167,3402,3383],{"class":173},[167,3404,3405],{"class":201},"'Crear un componente pequeño'",[167,3407,3389],{"class":173},[167,3409,3392],{"class":219},[167,3411,599],{"class":173},[167,3413,3414],{"class":169,"line":273},[167,3415,429],{"class":173},[167,3417,3418],{"class":169,"line":279},[167,3419,209],{"emptyLinePlaceholder":208},[167,3421,3422,3424,3427,3429,3431,3434,3436,3438],{"class":169,"line":289},[167,3423,216],{"class":191},[167,3425,3426],{"class":181}," completeTask",[167,3428,223],{"class":191},[167,3430,2526],{"class":173},[167,3432,3433],{"class":254},"taskId",[167,3435,693],{"class":173},[167,3437,639],{"class":191},[167,3439,1905],{"class":173},[167,3441,3442,3444,3447,3449,3452,3455,3457,3459,3461,3463,3466,3468],{"class":169,"line":294},[167,3443,1443],{"class":191},[167,3445,3446],{"class":219}," task",[167,3448,223],{"class":191},[167,3450,3451],{"class":173}," tasks.value.",[167,3453,3454],{"class":181},"find",[167,3456,1918],{"class":173},[167,3458,1926],{"class":254},[167,3460,693],{"class":173},[167,3462,639],{"class":191},[167,3464,3465],{"class":173}," item.id ",[167,3467,2550],{"class":191},[167,3469,3470],{"class":173}," taskId)\n",[167,3472,3473,3475],{"class":169,"line":304},[167,3474,2544],{"class":191},[167,3476,3477],{"class":173}," (task) {\n",[167,3479,3480,3483,3485],{"class":169,"line":313},[167,3481,3482],{"class":173},"    task.completed ",[167,3484,267],{"class":191},[167,3486,3487],{"class":219}," true\n",[167,3489,3490],{"class":169,"line":161},[167,3491,3492],{"class":173},"  }\n",[167,3494,3495],{"class":169,"line":335},[167,3496,276],{"class":173},[167,3498,3499,3501,3503],{"class":169,"line":341},[167,3500,282],{"class":173},[167,3502,178],{"class":177},[167,3504,185],{"class":173},[167,3506,3507],{"class":169,"line":489},[167,3508,209],{"emptyLinePlaceholder":208},[167,3510,3511,3513,3515],{"class":169,"line":495},[167,3512,174],{"class":173},[167,3514,299],{"class":177},[167,3516,185],{"class":173},[167,3518,3520,3522],{"class":3519,"line":501},[169,213],[167,3521,307],{"class":173},[167,3523,3524],{"class":177},"TaskCard\n",[167,3526,3528,3531,3533],{"class":3527,"line":512},[169,213],[167,3529,3530],{"class":181},"    v-for",[167,3532,267],{"class":173},[167,3534,3535],{"class":201},"\"task in tasks\"\n",[167,3537,3539,3542,3544],{"class":3538,"line":781},[169,213],[167,3540,3541],{"class":181},"    :key",[167,3543,267],{"class":173},[167,3545,3546],{"class":201},"\"task.id\"\n",[167,3548,3550,3553,3555],{"class":3549,"line":786},[169,213],[167,3551,3552],{"class":181},"    :task",[167,3554,267],{"class":173},[167,3556,3557],{"class":201},"\"task\"\n",[167,3559,3561,3564,3566],{"class":3560,"line":2678},[169,213],[167,3562,3563],{"class":181},"    @complete",[167,3565,267],{"class":173},[167,3567,3568],{"class":201},"\"completeTask\"\n",[167,3570,3571],{"class":169,"line":2692},[167,3572,338],{"class":173},[167,3574,3576,3578,3580],{"class":169,"line":3575},25,[167,3577,282],{"class":173},[167,3579,299],{"class":177},[167,3581,185],{"class":173},[15,3583,3584],{},"El padre conoce la lista, sabe cómo actualizarla y decide qué hacer cuando una tarea cambia.",[15,3586,3587],{},"El componente hijo, en cambio, solo necesita mostrar una tarea y avisar cuando el usuario hace clic:",[154,3589,3593],{"className":156,"code":3590,"filename":3591,"highlights":3592,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002Fp>\n\n    \u003Cbutton\n      type=\"button\"\n      :disabled=\"props.task.completed\"\n      @click=\"emit('complete', props.task.id)\"\n    >\n      Marcar como completada\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","TaskCard.vue",[188,205,160,238,243,261,279,512],[87,3594,3595,3605,3618,3624,3630,3638,3643,3648,3652,3670,3678,3682,3690,3699,3712,3725,3729,3735,3744,3754,3765,3770,3775,3783,3791],{"__ignoreMap":163},[167,3596,3597,3599,3601,3603],{"class":169,"line":170},[167,3598,174],{"class":173},[167,3600,178],{"class":177},[167,3602,182],{"class":181},[167,3604,185],{"class":173},[167,3606,3608,3610,3612,3614,3616],{"class":3607,"line":188},[169,213],[167,3609,216],{"class":191},[167,3611,1065],{"class":219},[167,3613,223],{"class":191},[167,3615,1070],{"class":181},[167,3617,372],{"class":173},[167,3619,3621],{"class":3620,"line":205},[169,213],[167,3622,3623],{"class":173},"  task: {\n",[167,3625,3627],{"class":3626,"line":160},[169,213],[167,3628,3629],{"class":173},"    type: Object,\n",[167,3631,3633,3635],{"class":3632,"line":238},[169,213],[167,3634,387],{"class":173},[167,3636,3637],{"class":219},"true\n",[167,3639,3641],{"class":3640,"line":243},[169,213],[167,3642,3492],{"class":173},[167,3644,3646],{"class":3645,"line":261},[169,213],[167,3647,403],{"class":173},[167,3649,3650],{"class":169,"line":273},[167,3651,209],{"emptyLinePlaceholder":208},[167,3653,3655,3657,3659,3661,3663,3665,3668],{"class":3654,"line":279},[169,213],[167,3656,216],{"class":191},[167,3658,415],{"class":219},[167,3660,223],{"class":191},[167,3662,420],{"class":181},[167,3664,423],{"class":173},[167,3666,3667],{"class":201},"'complete'",[167,3669,429],{"class":173},[167,3671,3672,3674,3676],{"class":169,"line":289},[167,3673,282],{"class":173},[167,3675,178],{"class":177},[167,3677,185],{"class":173},[167,3679,3680],{"class":169,"line":294},[167,3681,209],{"emptyLinePlaceholder":208},[167,3683,3684,3686,3688],{"class":169,"line":304},[167,3685,174],{"class":173},[167,3687,299],{"class":177},[167,3689,185],{"class":173},[167,3691,3692,3694,3697],{"class":169,"line":313},[167,3693,307],{"class":173},[167,3695,3696],{"class":177},"article",[167,3698,185],{"class":173},[167,3700,3701,3703,3705,3708,3710],{"class":169,"line":161},[167,3702,1257],{"class":173},[167,3704,22],{"class":177},[167,3706,3707],{"class":173},">{{ props.task.title }}\u003C\u002F",[167,3709,22],{"class":177},[167,3711,185],{"class":173},[167,3713,3714,3716,3718,3721,3723],{"class":169,"line":335},[167,3715,1257],{"class":173},[167,3717,15],{"class":177},[167,3719,3720],{"class":173},">{{ props.task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002F",[167,3722,15],{"class":177},[167,3724,185],{"class":173},[167,3726,3727],{"class":169,"line":341},[167,3728,209],{"emptyLinePlaceholder":208},[167,3730,3731,3733],{"class":169,"line":489},[167,3732,1257],{"class":173},[167,3734,456],{"class":177},[167,3736,3737,3740,3742],{"class":169,"line":495},[167,3738,3739],{"class":181},"      type",[167,3741,267],{"class":173},[167,3743,466],{"class":201},[167,3745,3746,3749,3751],{"class":169,"line":501},[167,3747,3748],{"class":181},"      :disabled",[167,3750,267],{"class":173},[167,3752,3753],{"class":201},"\"props.task.completed\"\n",[167,3755,3757,3760,3762],{"class":3756,"line":512},[169,213],[167,3758,3759],{"class":181},"      @click",[167,3761,267],{"class":173},[167,3763,3764],{"class":201},"\"emit('complete', props.task.id)\"\n",[167,3766,3767],{"class":169,"line":781},[167,3768,3769],{"class":173},"    >\n",[167,3771,3772],{"class":169,"line":786},[167,3773,3774],{"class":173},"      Marcar como completada\n",[167,3776,3777,3779,3781],{"class":169,"line":2678},[167,3778,1292],{"class":173},[167,3780,507],{"class":177},[167,3782,185],{"class":173},[167,3784,3785,3787,3789],{"class":169,"line":2692},[167,3786,504],{"class":173},[167,3788,3696],{"class":177},[167,3790,185],{"class":173},[167,3792,3793,3795,3797],{"class":169,"line":3575},[167,3794,282],{"class":173},[167,3796,299],{"class":177},[167,3798,185],{"class":173},[15,3800,3801],{},"Este patrón mantiene una separación sana: el hijo no necesita saber cómo está guardada la lista completa. Solo dice: \"esta tarea debería completarse\".",[22,3803,3805,3807],{"id":3804},"defineprops-qué-necesita-recibir-el-componente",[87,3806,369],{},": qué necesita recibir el componente",[15,3809,3810,3811,3813,3814,1679],{},"Con ",[87,3812,1008],{},", las props se declaran con ",[87,3815,3816],{},"defineProps()",[154,3818,3821],{"className":156,"code":3819,"filename":3260,"highlights":3820,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true\n  },\n  role: {\n    type: String,\n    default: 'Miembro'\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cstrong>{{ props.name }}\u003C\u002Fstrong>\n    \u003Cspan>{{ props.role }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[188,205,160,238,243,261,273,279,289,294],[87,3822,3823,3833,3846,3852,3857,3864,3869,3875,3880,3889,3894,3899,3907,3911,3919,3927,3941,3954,3962],{"__ignoreMap":163},[167,3824,3825,3827,3829,3831],{"class":169,"line":170},[167,3826,174],{"class":173},[167,3828,178],{"class":177},[167,3830,182],{"class":181},[167,3832,185],{"class":173},[167,3834,3836,3838,3840,3842,3844],{"class":3835,"line":188},[169,213],[167,3837,216],{"class":191},[167,3839,1065],{"class":219},[167,3841,223],{"class":191},[167,3843,1070],{"class":181},[167,3845,372],{"class":173},[167,3847,3849],{"class":3848,"line":205},[169,213],[167,3850,3851],{"class":173},"  name: {\n",[167,3853,3855],{"class":3854,"line":160},[169,213],[167,3856,382],{"class":173},[167,3858,3860,3862],{"class":3859,"line":238},[169,213],[167,3861,387],{"class":173},[167,3863,3637],{"class":219},[167,3865,3867],{"class":3866,"line":243},[169,213],[167,3868,398],{"class":173},[167,3870,3872],{"class":3871,"line":261},[169,213],[167,3873,3874],{"class":173},"  role: {\n",[167,3876,3878],{"class":3877,"line":273},[169,213],[167,3879,382],{"class":173},[167,3881,3883,3886],{"class":3882,"line":279},[169,213],[167,3884,3885],{"class":173},"    default: ",[167,3887,3888],{"class":201},"'Miembro'\n",[167,3890,3892],{"class":3891,"line":289},[169,213],[167,3893,3492],{"class":173},[167,3895,3897],{"class":3896,"line":294},[169,213],[167,3898,403],{"class":173},[167,3900,3901,3903,3905],{"class":169,"line":304},[167,3902,282],{"class":173},[167,3904,178],{"class":177},[167,3906,185],{"class":173},[167,3908,3909],{"class":169,"line":313},[167,3910,209],{"emptyLinePlaceholder":208},[167,3912,3913,3915,3917],{"class":169,"line":161},[167,3914,174],{"class":173},[167,3916,299],{"class":177},[167,3918,185],{"class":173},[167,3920,3921,3923,3925],{"class":169,"line":335},[167,3922,307],{"class":173},[167,3924,1242],{"class":177},[167,3926,185],{"class":173},[167,3928,3929,3931,3934,3937,3939],{"class":169,"line":341},[167,3930,1257],{"class":173},[167,3932,3933],{"class":177},"strong",[167,3935,3936],{"class":173},">{{ props.name }}\u003C\u002F",[167,3938,3933],{"class":177},[167,3940,185],{"class":173},[167,3942,3943,3945,3947,3950,3952],{"class":169,"line":489},[167,3944,1257],{"class":173},[167,3946,167],{"class":177},[167,3948,3949],{"class":173},">{{ props.role }}\u003C\u002F",[167,3951,167],{"class":177},[167,3953,185],{"class":173},[167,3955,3956,3958,3960],{"class":169,"line":495},[167,3957,504],{"class":173},[167,3959,1242],{"class":177},[167,3961,185],{"class":173},[167,3963,3964,3966,3968],{"class":169,"line":501},[167,3965,282],{"class":173},[167,3967,299],{"class":177},[167,3969,185],{"class":173},[154,3971,3975],{"className":156,"code":3972,"filename":3973,"highlights":3974,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  props: {\n    name: {\n      type: String,\n      required: true\n    },\n    role: {\n      type: String,\n      default: 'Miembro'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cstrong>{{ name }}\u003C\u002Fstrong>\n    \u003Cspan>{{ role }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Options API",[205,160,238,243,261,273,279,289,294,304],[87,3976,3977,3985,3994,4000,4006,4012,4020,4025,4031,4036,4044,4050,4055,4059,4067,4071,4079,4087,4100,4113,4121],{"__ignoreMap":163},[167,3978,3979,3981,3983],{"class":169,"line":170},[167,3980,174],{"class":173},[167,3982,178],{"class":177},[167,3984,185],{"class":173},[167,3986,3987,3989,3992],{"class":169,"line":188},[167,3988,608],{"class":191},[167,3990,3991],{"class":191}," default",[167,3993,1905],{"class":173},[167,3995,3997],{"class":3996,"line":205},[169,213],[167,3998,3999],{"class":173},"  props: {\n",[167,4001,4003],{"class":4002,"line":160},[169,213],[167,4004,4005],{"class":173},"    name: {\n",[167,4007,4009],{"class":4008,"line":238},[169,213],[167,4010,4011],{"class":173},"      type: String,\n",[167,4013,4015,4018],{"class":4014,"line":243},[169,213],[167,4016,4017],{"class":173},"      required: ",[167,4019,3637],{"class":219},[167,4021,4023],{"class":4022,"line":261},[169,213],[167,4024,755],{"class":173},[167,4026,4028],{"class":4027,"line":273},[169,213],[167,4029,4030],{"class":173},"    role: {\n",[167,4032,4034],{"class":4033,"line":279},[169,213],[167,4035,4011],{"class":173},[167,4037,4039,4042],{"class":4038,"line":289},[169,213],[167,4040,4041],{"class":173},"      default: ",[167,4043,3888],{"class":201},[167,4045,4047],{"class":4046,"line":294},[169,213],[167,4048,4049],{"class":173},"    }\n",[167,4051,4053],{"class":4052,"line":304},[169,213],[167,4054,3492],{"class":173},[167,4056,4057],{"class":169,"line":313},[167,4058,276],{"class":173},[167,4060,4061,4063,4065],{"class":169,"line":161},[167,4062,282],{"class":173},[167,4064,178],{"class":177},[167,4066,185],{"class":173},[167,4068,4069],{"class":169,"line":335},[167,4070,209],{"emptyLinePlaceholder":208},[167,4072,4073,4075,4077],{"class":169,"line":341},[167,4074,174],{"class":173},[167,4076,299],{"class":177},[167,4078,185],{"class":173},[167,4080,4081,4083,4085],{"class":169,"line":489},[167,4082,307],{"class":173},[167,4084,1242],{"class":177},[167,4086,185],{"class":173},[167,4088,4089,4091,4093,4096,4098],{"class":169,"line":495},[167,4090,1257],{"class":173},[167,4092,3933],{"class":177},[167,4094,4095],{"class":173},">{{ name }}\u003C\u002F",[167,4097,3933],{"class":177},[167,4099,185],{"class":173},[167,4101,4102,4104,4106,4109,4111],{"class":169,"line":501},[167,4103,1257],{"class":173},[167,4105,167],{"class":177},[167,4107,4108],{"class":173},">{{ role }}\u003C\u002F",[167,4110,167],{"class":177},[167,4112,185],{"class":173},[167,4114,4115,4117,4119],{"class":169,"line":512},[167,4116,504],{"class":173},[167,4118,1242],{"class":177},[167,4120,185],{"class":173},[167,4122,4123,4125,4127],{"class":169,"line":781},[167,4124,282],{"class":173},[167,4126,299],{"class":177},[167,4128,185],{"class":173},[15,4130,4131],{},"Una prop debería responder una pregunta concreta: ¿qué dato necesita este componente para poder renderizarse?",[15,4133,4134],{},"Si el componente necesita un nombre, una URL, un estado activo o una lista pequeña, eso probablemente es una prop. Si necesita modificar estado compartido, guardar datos o coordinar muchas piezas, quizá ya no estamos hablando de una simple prop.",[22,4136,4138,4140],{"id":4137},"defineemits-qué-puede-comunicar-el-componente",[87,4139,1031],{},": qué puede comunicar el componente",[15,4142,4143],{},"Los emits describen eventos que el componente hijo puede disparar.",[154,4145,4148],{"className":156,"code":4146,"filename":3260,"highlights":4147,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst emit = defineEmits(['search'])\n\nconst handleSubmit = (event) => {\n  const form = event.currentTarget\n  const query = new FormData(form).get('query')\n\n  emit('search', String(query || '').trim())\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"handleSubmit\">\n    \u003Cinput name=\"query\" type=\"search\">\n    \u003Cbutton type=\"submit\">Buscar\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[188,273],[87,4149,4150,4160,4178,4182,4202,4214,4241,4245,4275,4279,4287,4291,4299,4316,4336,4356,4364],{"__ignoreMap":163},[167,4151,4152,4154,4156,4158],{"class":169,"line":170},[167,4153,174],{"class":173},[167,4155,178],{"class":177},[167,4157,182],{"class":181},[167,4159,185],{"class":173},[167,4161,4163,4165,4167,4169,4171,4173,4176],{"class":4162,"line":188},[169,213],[167,4164,216],{"class":191},[167,4166,415],{"class":219},[167,4168,223],{"class":191},[167,4170,420],{"class":181},[167,4172,423],{"class":173},[167,4174,4175],{"class":201},"'search'",[167,4177,429],{"class":173},[167,4179,4180],{"class":169,"line":205},[167,4181,209],{"emptyLinePlaceholder":208},[167,4183,4184,4186,4189,4191,4193,4196,4198,4200],{"class":169,"line":160},[167,4185,216],{"class":191},[167,4187,4188],{"class":181}," handleSubmit",[167,4190,223],{"class":191},[167,4192,2526],{"class":173},[167,4194,4195],{"class":254},"event",[167,4197,693],{"class":173},[167,4199,639],{"class":191},[167,4201,1905],{"class":173},[167,4203,4204,4206,4209,4211],{"class":169,"line":238},[167,4205,1443],{"class":191},[167,4207,4208],{"class":219}," form",[167,4210,223],{"class":191},[167,4212,4213],{"class":173}," event.currentTarget\n",[167,4215,4216,4218,4220,4222,4225,4228,4231,4234,4236,4239],{"class":169,"line":243},[167,4217,1443],{"class":191},[167,4219,2448],{"class":219},[167,4221,223],{"class":191},[167,4223,4224],{"class":191}," new",[167,4226,4227],{"class":181}," FormData",[167,4229,4230],{"class":173},"(form).",[167,4232,4233],{"class":181},"get",[167,4235,229],{"class":173},[167,4237,4238],{"class":201},"'query'",[167,4240,235],{"class":173},[167,4242,4243],{"class":169,"line":261},[167,4244,209],{"emptyLinePlaceholder":208},[167,4246,4248,4250,4252,4254,4256,4259,4262,4265,4268,4271,4273],{"class":4247,"line":273},[169,213],[167,4249,1133],{"class":181},[167,4251,229],{"class":173},[167,4253,4175],{"class":201},[167,4255,1025],{"class":173},[167,4257,4258],{"class":181},"String",[167,4260,4261],{"class":173},"(query ",[167,4263,4264],{"class":191},"||",[167,4266,4267],{"class":201}," ''",[167,4269,4270],{"class":173},").",[167,4272,2500],{"class":181},[167,4274,2509],{"class":173},[167,4276,4277],{"class":169,"line":279},[167,4278,276],{"class":173},[167,4280,4281,4283,4285],{"class":169,"line":289},[167,4282,282],{"class":173},[167,4284,178],{"class":177},[167,4286,185],{"class":173},[167,4288,4289],{"class":169,"line":294},[167,4290,209],{"emptyLinePlaceholder":208},[167,4292,4293,4295,4297],{"class":169,"line":304},[167,4294,174],{"class":173},[167,4296,299],{"class":177},[167,4298,185],{"class":173},[167,4300,4301,4303,4306,4309,4311,4314],{"class":169,"line":313},[167,4302,307],{"class":173},[167,4304,4305],{"class":177},"form",[167,4307,4308],{"class":181}," @submit.prevent",[167,4310,267],{"class":173},[167,4312,4313],{"class":201},"\"handleSubmit\"",[167,4315,185],{"class":173},[167,4317,4318,4320,4322,4324,4326,4328,4330,4332,4334],{"class":169,"line":161},[167,4319,1257],{"class":173},[167,4321,2650],{"class":177},[167,4323,1274],{"class":181},[167,4325,267],{"class":173},[167,4327,2658],{"class":201},[167,4329,1174],{"class":181},[167,4331,267],{"class":173},[167,4333,2665],{"class":201},[167,4335,185],{"class":173},[167,4337,4338,4340,4342,4344,4346,4349,4352,4354],{"class":169,"line":335},[167,4339,1257],{"class":173},[167,4341,507],{"class":177},[167,4343,1174],{"class":181},[167,4345,267],{"class":173},[167,4347,4348],{"class":201},"\"submit\"",[167,4350,4351],{"class":173},">Buscar\u003C\u002F",[167,4353,507],{"class":177},[167,4355,185],{"class":173},[167,4357,4358,4360,4362],{"class":169,"line":341},[167,4359,504],{"class":173},[167,4361,4305],{"class":177},[167,4363,185],{"class":173},[167,4365,4366,4368,4370],{"class":169,"line":489},[167,4367,282],{"class":173},[167,4369,299],{"class":177},[167,4371,185],{"class":173},[154,4373,4376],{"className":156,"code":4374,"filename":3973,"highlights":4375,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: 'SearchBox',\n  emits: ['search'],\n  methods: {\n    handleSubmit(event) {\n      const form = event.currentTarget\n      const query = new FormData(form).get('query')\n\n      this.$emit('search', String(query || '').trim())\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"handleSubmit\">\n    \u003Cinput name=\"query\" type=\"search\">\n    \u003Cbutton type=\"submit\">Buscar\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[160,289],[87,4377,4378,4386,4394,4404,4415,4420,4431,4442,4464,4468,4498,4502,4506,4510,4518,4522,4530,4544,4564,4582,4590],{"__ignoreMap":163},[167,4379,4380,4382,4384],{"class":169,"line":170},[167,4381,174],{"class":173},[167,4383,178],{"class":177},[167,4385,185],{"class":173},[167,4387,4388,4390,4392],{"class":169,"line":188},[167,4389,608],{"class":191},[167,4391,3991],{"class":191},[167,4393,1905],{"class":173},[167,4395,4396,4399,4402],{"class":169,"line":205},[167,4397,4398],{"class":173},"  name: ",[167,4400,4401],{"class":201},"'SearchBox'",[167,4403,393],{"class":173},[167,4405,4407,4410,4412],{"class":4406,"line":160},[169,213],[167,4408,4409],{"class":173},"  emits: [",[167,4411,4175],{"class":201},[167,4413,4414],{"class":173},"],\n",[167,4416,4417],{"class":169,"line":238},[167,4418,4419],{"class":173},"  methods: {\n",[167,4421,4422,4425,4427,4429],{"class":169,"line":243},[167,4423,4424],{"class":181},"    handleSubmit",[167,4426,229],{"class":173},[167,4428,4195],{"class":254},[167,4430,258],{"class":173},[167,4432,4433,4436,4438,4440],{"class":169,"line":261},[167,4434,4435],{"class":191},"      const",[167,4437,4208],{"class":219},[167,4439,223],{"class":191},[167,4441,4213],{"class":173},[167,4443,4444,4446,4448,4450,4452,4454,4456,4458,4460,4462],{"class":169,"line":273},[167,4445,4435],{"class":191},[167,4447,2448],{"class":219},[167,4449,223],{"class":191},[167,4451,4224],{"class":191},[167,4453,4227],{"class":181},[167,4455,4230],{"class":173},[167,4457,4233],{"class":181},[167,4459,229],{"class":173},[167,4461,4238],{"class":201},[167,4463,235],{"class":173},[167,4465,4466],{"class":169,"line":279},[167,4467,209],{"emptyLinePlaceholder":208},[167,4469,4471,4473,4475,4478,4480,4482,4484,4486,4488,4490,4492,4494,4496],{"class":4470,"line":289},[169,213],[167,4472,741],{"class":219},[167,4474,1679],{"class":173},[167,4476,4477],{"class":181},"$emit",[167,4479,229],{"class":173},[167,4481,4175],{"class":201},[167,4483,1025],{"class":173},[167,4485,4258],{"class":181},[167,4487,4261],{"class":173},[167,4489,4264],{"class":191},[167,4491,4267],{"class":201},[167,4493,4270],{"class":173},[167,4495,2500],{"class":181},[167,4497,2509],{"class":173},[167,4499,4500],{"class":169,"line":294},[167,4501,4049],{"class":173},[167,4503,4504],{"class":169,"line":304},[167,4505,3492],{"class":173},[167,4507,4508],{"class":169,"line":313},[167,4509,276],{"class":173},[167,4511,4512,4514,4516],{"class":169,"line":161},[167,4513,282],{"class":173},[167,4515,178],{"class":177},[167,4517,185],{"class":173},[167,4519,4520],{"class":169,"line":335},[167,4521,209],{"emptyLinePlaceholder":208},[167,4523,4524,4526,4528],{"class":169,"line":341},[167,4525,174],{"class":173},[167,4527,299],{"class":177},[167,4529,185],{"class":173},[167,4531,4532,4534,4536,4538,4540,4542],{"class":169,"line":489},[167,4533,307],{"class":173},[167,4535,4305],{"class":177},[167,4537,4308],{"class":181},[167,4539,267],{"class":173},[167,4541,4313],{"class":201},[167,4543,185],{"class":173},[167,4545,4546,4548,4550,4552,4554,4556,4558,4560,4562],{"class":169,"line":495},[167,4547,1257],{"class":173},[167,4549,2650],{"class":177},[167,4551,1274],{"class":181},[167,4553,267],{"class":173},[167,4555,2658],{"class":201},[167,4557,1174],{"class":181},[167,4559,267],{"class":173},[167,4561,2665],{"class":201},[167,4563,185],{"class":173},[167,4565,4566,4568,4570,4572,4574,4576,4578,4580],{"class":169,"line":501},[167,4567,1257],{"class":173},[167,4569,507],{"class":177},[167,4571,1174],{"class":181},[167,4573,267],{"class":173},[167,4575,4348],{"class":201},[167,4577,4351],{"class":173},[167,4579,507],{"class":177},[167,4581,185],{"class":173},[167,4583,4584,4586,4588],{"class":169,"line":512},[167,4585,504],{"class":173},[167,4587,4305],{"class":177},[167,4589,185],{"class":173},[167,4591,4592,4594,4596],{"class":169,"line":781},[167,4593,282],{"class":173},[167,4595,299],{"class":177},[167,4597,185],{"class":173},[15,4599,4600],{},"El componente no decide qué hacer con la búsqueda. Puede que el padre llame una API, actualice la URL o filtre una lista local. El hijo solo comunica el evento con los datos necesarios.",[22,4602,4604],{"id":4603},"no-modifiques-props-directamente","No modifiques props directamente",[15,4606,4607],{},"Una regla importante: un componente hijo no debería modificar una prop recibida.",[15,4609,4610],{},"Esto es tentador:",[154,4612,4615],{"className":156,"code":4613,"filename":3260,"highlights":4614,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst complete = () => {\n  props.task.completed = true\n}\n\u003C\u002Fscript>\n",[279,289,294],[87,4616,4617,4627,4639,4643,4647,4653,4657,4661,4665,4681,4691,4696],{"__ignoreMap":163},[167,4618,4619,4621,4623,4625],{"class":169,"line":170},[167,4620,174],{"class":173},[167,4622,178],{"class":177},[167,4624,182],{"class":181},[167,4626,185],{"class":173},[167,4628,4629,4631,4633,4635,4637],{"class":169,"line":188},[167,4630,216],{"class":191},[167,4632,1065],{"class":219},[167,4634,223],{"class":191},[167,4636,1070],{"class":181},[167,4638,372],{"class":173},[167,4640,4641],{"class":169,"line":205},[167,4642,3623],{"class":173},[167,4644,4645],{"class":169,"line":160},[167,4646,3629],{"class":173},[167,4648,4649,4651],{"class":169,"line":238},[167,4650,387],{"class":173},[167,4652,3637],{"class":219},[167,4654,4655],{"class":169,"line":243},[167,4656,3492],{"class":173},[167,4658,4659],{"class":169,"line":261},[167,4660,403],{"class":173},[167,4662,4663],{"class":169,"line":273},[167,4664,209],{"emptyLinePlaceholder":208},[167,4666,4668,4670,4673,4675,4677,4679],{"class":4667,"line":279},[169,213],[167,4669,216],{"class":191},[167,4671,4672],{"class":181}," complete",[167,4674,223],{"class":191},[167,4676,1469],{"class":173},[167,4678,639],{"class":191},[167,4680,1905],{"class":173},[167,4682,4684,4687,4689],{"class":4683,"line":289},[169,213],[167,4685,4686],{"class":173},"  props.task.completed ",[167,4688,267],{"class":191},[167,4690,3487],{"class":219},[167,4692,4694],{"class":4693,"line":294},[169,213],[167,4695,276],{"class":173},[167,4697,4698,4700,4702],{"class":169,"line":304},[167,4699,282],{"class":173},[167,4701,178],{"class":177},[167,4703,185],{"class":173},[15,4705,4706],{},"Aunque con objetos puede parecer que funciona, el diseño se vuelve confuso. El padre deja de ser el lugar claro donde cambia el estado y el hijo empieza a tener demasiado control sobre algo que no le pertenece.",[15,4708,4709],{},"Una versión más limpia es emitir la intención:",[154,4711,4714],{"className":156,"code":4712,"filename":3260,"highlights":4713,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\nconst complete = () => {\n  emit('complete', props.task.id)\n}\n\u003C\u002Fscript>\n",[279,294,304,313],[87,4715,4716,4726,4738,4742,4746,4752,4756,4760,4764,4781,4785,4800,4812,4817],{"__ignoreMap":163},[167,4717,4718,4720,4722,4724],{"class":169,"line":170},[167,4719,174],{"class":173},[167,4721,178],{"class":177},[167,4723,182],{"class":181},[167,4725,185],{"class":173},[167,4727,4728,4730,4732,4734,4736],{"class":169,"line":188},[167,4729,216],{"class":191},[167,4731,1065],{"class":219},[167,4733,223],{"class":191},[167,4735,1070],{"class":181},[167,4737,372],{"class":173},[167,4739,4740],{"class":169,"line":205},[167,4741,3623],{"class":173},[167,4743,4744],{"class":169,"line":160},[167,4745,3629],{"class":173},[167,4747,4748,4750],{"class":169,"line":238},[167,4749,387],{"class":173},[167,4751,3637],{"class":219},[167,4753,4754],{"class":169,"line":243},[167,4755,3492],{"class":173},[167,4757,4758],{"class":169,"line":261},[167,4759,403],{"class":173},[167,4761,4762],{"class":169,"line":273},[167,4763,209],{"emptyLinePlaceholder":208},[167,4765,4767,4769,4771,4773,4775,4777,4779],{"class":4766,"line":279},[169,213],[167,4768,216],{"class":191},[167,4770,415],{"class":219},[167,4772,223],{"class":191},[167,4774,420],{"class":181},[167,4776,423],{"class":173},[167,4778,3667],{"class":201},[167,4780,429],{"class":173},[167,4782,4783],{"class":169,"line":289},[167,4784,209],{"emptyLinePlaceholder":208},[167,4786,4788,4790,4792,4794,4796,4798],{"class":4787,"line":294},[169,213],[167,4789,216],{"class":191},[167,4791,4672],{"class":181},[167,4793,223],{"class":191},[167,4795,1469],{"class":173},[167,4797,639],{"class":191},[167,4799,1905],{"class":173},[167,4801,4803,4805,4807,4809],{"class":4802,"line":304},[169,213],[167,4804,1133],{"class":181},[167,4806,229],{"class":173},[167,4808,3667],{"class":201},[167,4810,4811],{"class":173},", props.task.id)\n",[167,4813,4815],{"class":4814,"line":313},[169,213],[167,4816,276],{"class":173},[167,4818,4819,4821,4823],{"class":169,"line":161},[167,4820,282],{"class":173},[167,4822,178],{"class":177},[167,4824,185],{"class":173},[154,4826,4829],{"className":156,"code":4827,"filename":3973,"highlights":4828,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: 'TaskCard',\n  props: {\n    task: {\n      type: Object,\n      required: true\n    }\n  },\n  emits: ['complete'],\n  methods: {\n    complete() {\n      this.$emit('complete', this.task.id)\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002Fp>\n\n    \u003Cbutton type=\"button\" @click=\"complete\">\n      Marcar como completada\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,279,289,313],[87,4830,4831,4839,4847,4856,4861,4867,4873,4880,4885,4890,4899,4903,4910,4931,4935,4939,4943,4951,4955,4963,4971,4984,4997,5001,5022,5026,5035,5044],{"__ignoreMap":163},[167,4832,4833,4835,4837],{"class":169,"line":170},[167,4834,174],{"class":173},[167,4836,178],{"class":177},[167,4838,185],{"class":173},[167,4840,4841,4843,4845],{"class":169,"line":188},[167,4842,608],{"class":191},[167,4844,3991],{"class":191},[167,4846,1905],{"class":173},[167,4848,4849,4851,4854],{"class":169,"line":205},[167,4850,4398],{"class":173},[167,4852,4853],{"class":201},"'TaskCard'",[167,4855,393],{"class":173},[167,4857,4859],{"class":4858,"line":160},[169,213],[167,4860,3999],{"class":173},[167,4862,4864],{"class":4863,"line":238},[169,213],[167,4865,4866],{"class":173},"    task: {\n",[167,4868,4870],{"class":4869,"line":243},[169,213],[167,4871,4872],{"class":173},"      type: Object,\n",[167,4874,4876,4878],{"class":4875,"line":261},[169,213],[167,4877,4017],{"class":173},[167,4879,3637],{"class":219},[167,4881,4883],{"class":4882,"line":273},[169,213],[167,4884,4049],{"class":173},[167,4886,4888],{"class":4887,"line":279},[169,213],[167,4889,398],{"class":173},[167,4891,4893,4895,4897],{"class":4892,"line":289},[169,213],[167,4894,4409],{"class":173},[167,4896,3667],{"class":201},[167,4898,4414],{"class":173},[167,4900,4901],{"class":169,"line":294},[167,4902,4419],{"class":173},[167,4904,4905,4908],{"class":169,"line":304},[167,4906,4907],{"class":181},"    complete",[167,4909,763],{"class":173},[167,4911,4913,4915,4917,4919,4921,4923,4925,4928],{"class":4912,"line":313},[169,213],[167,4914,741],{"class":219},[167,4916,1679],{"class":173},[167,4918,4477],{"class":181},[167,4920,229],{"class":173},[167,4922,3667],{"class":201},[167,4924,1025],{"class":173},[167,4926,4927],{"class":219},"this",[167,4929,4930],{"class":173},".task.id)\n",[167,4932,4933],{"class":169,"line":161},[167,4934,4049],{"class":173},[167,4936,4937],{"class":169,"line":335},[167,4938,3492],{"class":173},[167,4940,4941],{"class":169,"line":341},[167,4942,276],{"class":173},[167,4944,4945,4947,4949],{"class":169,"line":489},[167,4946,282],{"class":173},[167,4948,178],{"class":177},[167,4950,185],{"class":173},[167,4952,4953],{"class":169,"line":495},[167,4954,209],{"emptyLinePlaceholder":208},[167,4956,4957,4959,4961],{"class":169,"line":501},[167,4958,174],{"class":173},[167,4960,299],{"class":177},[167,4962,185],{"class":173},[167,4964,4965,4967,4969],{"class":169,"line":512},[167,4966,307],{"class":173},[167,4968,3696],{"class":177},[167,4970,185],{"class":173},[167,4972,4973,4975,4977,4980,4982],{"class":169,"line":781},[167,4974,1257],{"class":173},[167,4976,22],{"class":177},[167,4978,4979],{"class":173},">{{ task.title }}\u003C\u002F",[167,4981,22],{"class":177},[167,4983,185],{"class":173},[167,4985,4986,4988,4990,4993,4995],{"class":169,"line":786},[167,4987,1257],{"class":173},[167,4989,15],{"class":177},[167,4991,4992],{"class":173},">{{ task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002F",[167,4994,15],{"class":177},[167,4996,185],{"class":173},[167,4998,4999],{"class":169,"line":2678},[167,5000,209],{"emptyLinePlaceholder":208},[167,5002,5003,5005,5007,5009,5011,5013,5015,5017,5020],{"class":169,"line":2692},[167,5004,1257],{"class":173},[167,5006,507],{"class":177},[167,5008,1174],{"class":181},[167,5010,267],{"class":173},[167,5012,1179],{"class":201},[167,5014,1182],{"class":181},[167,5016,267],{"class":173},[167,5018,5019],{"class":201},"\"complete\"",[167,5021,185],{"class":173},[167,5023,5024],{"class":169,"line":3575},[167,5025,3774],{"class":173},[167,5027,5029,5031,5033],{"class":169,"line":5028},26,[167,5030,1292],{"class":173},[167,5032,507],{"class":177},[167,5034,185],{"class":173},[167,5036,5038,5040,5042],{"class":169,"line":5037},27,[167,5039,504],{"class":173},[167,5041,3696],{"class":177},[167,5043,185],{"class":173},[167,5045,5047,5049,5051],{"class":169,"line":5046},28,[167,5048,282],{"class":173},[167,5050,299],{"class":177},[167,5052,185],{"class":173},[15,5054,5055],{},"El padre recibe el evento y hace el cambio:",[154,5057,5060],{"className":156,"code":5058,"filename":3322,"highlights":5059,"language":162,"meta":163,"style":163},"\u003CTaskCard\n  :task=\"task\"\n  @complete=\"completeTask\"\n\u002F>\n",[205],[87,5061,5062,5068,5086,5104],{"__ignoreMap":163},[167,5063,5064,5066],{"class":169,"line":170},[167,5065,174],{"class":173},[167,5067,3524],{"class":177},[167,5069,5070,5073,5076,5078,5081,5083],{"class":169,"line":188},[167,5071,5072],{"class":173},"  :",[167,5074,5075],{"class":181},"task",[167,5077,267],{"class":173},[167,5079,5080],{"class":201},"\"",[167,5082,5075],{"class":173},[167,5084,5085],{"class":201},"\"\n",[167,5087,5089,5092,5095,5097,5099,5102],{"class":5088,"line":205},[169,213],[167,5090,5091],{"class":173},"  @",[167,5093,5094],{"class":181},"complete",[167,5096,267],{"class":173},[167,5098,5080],{"class":201},[167,5100,5101],{"class":173},"completeTask",[167,5103,5085],{"class":201},[167,5105,5106],{"class":169,"line":160},[167,5107,5108],{"class":173},"\u002F>\n",[22,5110,5112],{"id":5111},"nombrar-eventos-con-intención","Nombrar eventos con intención",[15,5114,5115],{},"Un buen nombre de evento dice qué ocurrió, no cómo debería reaccionar el padre.",[15,5117,5118],{},"Por ejemplo:",[33,5120,5121,5126,5131,5136,5141],{},[36,5122,5123],{},[87,5124,5125],{},"@submit",[36,5127,5128],{},[87,5129,5130],{},"@select",[36,5132,5133],{},[87,5134,5135],{},"@remove",[36,5137,5138],{},[87,5139,5140],{},"@complete",[36,5142,5143],{},[87,5144,5145],{},"@update:status",[15,5147,5148,5149,90,5152,5155],{},"Evita nombres demasiado acoplados como ",[87,5150,5151],{},"@callApiNow",[87,5153,5154],{},"@changeParentList",". El hijo no debería saber tanto sobre lo que hará el padre.",[22,5157,5159],{"id":5158},"props-pequeñas-eventos-claros","Props pequeñas, eventos claros",[15,5161,5162],{},"El problema no suele ser usar props. El problema aparece cuando un componente recibe demasiadas props sueltas y emite eventos difíciles de seguir.",[15,5164,5165],{},"Si ves algo así:",[154,5167,5169],{"className":156,"code":5168,"language":162,"meta":163,"style":163},"\u003CUserCard\n  :id=\"user.id\"\n  :name=\"user.name\"\n  :email=\"user.email\"\n  :avatar=\"user.avatar\"\n  :role=\"user.role\"\n  :is-active=\"user.isActive\"\n  :last-login=\"user.lastLogin\"\n\u002F>\n",[87,5170,5171,5178,5193,5208,5224,5240,5256,5272,5288],{"__ignoreMap":163},[167,5172,5173,5175],{"class":169,"line":170},[167,5174,174],{"class":173},[167,5176,5177],{"class":177},"UserCard\n",[167,5179,5180,5182,5184,5186,5188,5191],{"class":169,"line":188},[167,5181,5072],{"class":173},[167,5183,580],{"class":181},[167,5185,267],{"class":173},[167,5187,5080],{"class":201},[167,5189,5190],{"class":173},"user.id",[167,5192,5085],{"class":201},[167,5194,5195,5197,5199,5201,5203,5206],{"class":169,"line":205},[167,5196,5072],{"class":173},[167,5198,592],{"class":181},[167,5200,267],{"class":173},[167,5202,5080],{"class":201},[167,5204,5205],{"class":173},"user.name",[167,5207,5085],{"class":201},[167,5209,5210,5212,5215,5217,5219,5222],{"class":169,"line":160},[167,5211,5072],{"class":173},[167,5213,5214],{"class":181},"email",[167,5216,267],{"class":173},[167,5218,5080],{"class":201},[167,5220,5221],{"class":173},"user.email",[167,5223,5085],{"class":201},[167,5225,5226,5228,5231,5233,5235,5238],{"class":169,"line":238},[167,5227,5072],{"class":173},[167,5229,5230],{"class":181},"avatar",[167,5232,267],{"class":173},[167,5234,5080],{"class":201},[167,5236,5237],{"class":173},"user.avatar",[167,5239,5085],{"class":201},[167,5241,5242,5244,5247,5249,5251,5254],{"class":169,"line":243},[167,5243,5072],{"class":173},[167,5245,5246],{"class":181},"role",[167,5248,267],{"class":173},[167,5250,5080],{"class":201},[167,5252,5253],{"class":173},"user.role",[167,5255,5085],{"class":201},[167,5257,5258,5260,5263,5265,5267,5270],{"class":169,"line":261},[167,5259,5072],{"class":173},[167,5261,5262],{"class":181},"is-active",[167,5264,267],{"class":173},[167,5266,5080],{"class":201},[167,5268,5269],{"class":173},"user.isActive",[167,5271,5085],{"class":201},[167,5273,5274,5276,5279,5281,5283,5286],{"class":169,"line":273},[167,5275,5072],{"class":173},[167,5277,5278],{"class":181},"last-login",[167,5280,267],{"class":173},[167,5282,5080],{"class":201},[167,5284,5285],{"class":173},"user.lastLogin",[167,5287,5085],{"class":201},[167,5289,5290],{"class":169,"line":279},[167,5291,5108],{"class":173},[15,5293,5294,5295,5297],{},"tal vez el componente debería recibir un objeto ",[87,5296,729],{}," completo:",[154,5299,5301],{"className":156,"code":5300,"language":162,"meta":163,"style":163},"\u003CUserCard :user=\"user\" \u002F>\n",[87,5302,5303],{"__ignoreMap":163},[167,5304,5305,5307,5310,5313,5315,5317,5319,5321,5323],{"class":169,"line":170},[167,5306,174],{"class":173},[167,5308,5309],{"class":177},"UserCard",[167,5311,5312],{"class":173}," :",[167,5314,729],{"class":181},[167,5316,267],{"class":173},[167,5318,5080],{"class":201},[167,5320,729],{"class":173},[167,5322,5080],{"class":201},[167,5324,5325],{"class":173}," \u002F>\n",[15,5327,5328],{},"No siempre. Si el componente solo necesita dos campos, pasar props específicas puede ser más explícito. Pero cuando todas las props representan la misma entidad, agruparlas puede hacer el template más claro.",[22,5330,5332],{"id":5331},"cuándo-usar-props-y-emits","Cuándo usar props y emits",[15,5334,5335],{},"Props y emits son ideales cuando:",[33,5337,5338,5341,5344,5347],{},[36,5339,5340],{},"Hay una relación directa entre padre e hijo.",[36,5342,5343],{},"El estado vive naturalmente en el padre.",[36,5345,5346],{},"El hijo solo necesita mostrar datos y avisar interacciones.",[36,5348,5349],{},"Quieres que el flujo sea fácil de leer desde el template.",[15,5351,5352,5353,5355],{},"Si empiezas a pasar la misma prop por cinco niveles, probablemente necesitas otra herramienta. Ahí puede tener sentido mirar ",[87,5354,997],{},", un composable compartido o una solución de estado como Pinia.",[15,5357,5358],{},"Pero no saltes a esas opciones demasiado pronto. Para muchísimos componentes, props y emits son suficientes.",[22,5360,5362],{"id":5361},"una-forma-simple-de-pensarlo","Una forma simple de pensarlo",[15,5364,5365],{},"Antes de conectar dos componentes, pregúntate:",[5367,5368,5369],"blockquote",{},[15,5370,5371],{},"¿Este componente necesita recibir un dato o necesita avisar que algo ocurrió?",[15,5373,5374],{},"Si necesita recibir un dato, usa una prop.",[15,5376,5377],{},"Si necesita avisar algo, usa un emit.",[15,5379,5380],{},"Esa distinción mantiene el código predecible. Los datos bajan, los eventos suben, y cada componente conserva una responsabilidad clara.",[924,5382,926],{},{"title":163,"searchDepth":188,"depth":188,"links":5384},[5385,5386,5388,5390,5391,5392,5393,5394],{"id":3314,"depth":188,"text":3315},{"id":3804,"depth":188,"text":5387},"defineProps: qué necesita recibir el componente",{"id":4137,"depth":188,"text":5389},"defineEmits: qué puede comunicar el componente",{"id":4603,"depth":188,"text":4604},{"id":5111,"depth":188,"text":5112},{"id":5158,"depth":188,"text":5159},{"id":5331,"depth":188,"text":5332},{"id":5361,"depth":188,"text":5362},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1782863303\u002Fvue-3-props-emits-component-communication_chbuab.png","2026-07-01","Aprende cómo usar props y emits en Vue 3 para pasar datos hacia componentes hijos y comunicar eventos hacia componentes padres de forma clara.",{"title":5399,"goal":5400,"tasks":5401,"starterCode":5406,"solutionHint":5407},"Crea una tarjeta de tarea con props y emits","Construye un componente pequeño que recibe una tarea por props y avisa al padre cuando el usuario quiere marcarla como completada.",[5402,5403,5404,5405],"Crea un componente TaskCard.vue.","Recibe una prop task con title y completed.","Muestra el estado de la tarea en el template.","Emite un evento complete cuando el usuario haga clic en el botón.","\u003C!-- TaskCard.vue -->\n\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002Fp>\n\n    \u003Cbutton @click=\"emit('complete', props.task.id)\">\n      Marcar como completada\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","El componente hijo no necesita cambiar la lista directamente. Solo comunica la intención; el padre decide cómo actualizar el estado.",{"updatedAt":945,"coverCaption":5409,"author":946,"keywords":5410},"Comunicación entre componentes en Vue 3 por TODOvue",[3258,951,3300,3307,5411,369,1031],"componentes","\u002Fblog\u002Fvue-3-props-emits-component-communication.es",[5414],{"headline":3281,"author":5415,"datePublished":5416,"@type":961},{"name":946,"@type":959},"2026-06-30T20:00:00-05:00",{"title":3281,"description":5397},"blog\u002Fvue-3-props-emits-component-communication.es",[5420,5421,5422,5423],{"tag":1625,"color":1639},{"tag":1644,"color":1645},{"tag":3276,"color":3277},{"tag":5424,"color":5425},"Básico","#B173BF","dLcA6qwTAutjayKo9BSZ8VD27UMroxba5SkIczwtVII",{"id":5428,"title":5429,"body":5430,"cover":6176,"coverAlt":6177,"date":6178,"description":6179,"draft":940,"extension":941,"lab":6180,"locale":943,"meta":6190,"navigation":208,"path":6194,"schemaOrg":6195,"seo":6199,"series":963,"seriesDescription":964,"seriesOrder":205,"seriesTitle":965,"slug":942,"stem":6200,"tags":6201,"__hash__":6206},"blog\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es.md","Composables en Vue 3: cómo extraer lógica reutilizable sin complicarte",{"type":8,"value":5431,"toc":6166},[5432,5435,5438,5448,5451,5455,5458,5461,5477,5480,5484,5487,5723,5726,5729,5736,5739,5926,5929,6060,6063,6067,6070,6073,6098,6101,6105,6108,6111,6114,6116,6129,6136,6142,6145,6149,6152,6157,6160,6163],[11,5433,5429],{"id":5434},"composables-en-vue-3-cómo-extraer-lógica-reutilizable-sin-complicarte",[15,5436,5437],{},"Hay una señal bastante clara de que tu componente está pidiendo ayuda: empiezas a copiar la misma lógica en dos, tres o cuatro lugares.",[15,5439,5440,5441,5443,5444,5447],{},"Primero fue un menú que se abre y se cierra. Luego un modal. Después un panel lateral. Cada uno tiene su propio ",[87,5442,2085],{},", su función para abrir, su función para cerrar y un ",[87,5445,5446],{},"toggle"," casi idéntico. No pasa nada grave al principio, pero el código empieza a sentirse repetido, como si cada componente estuviera resolviendo el mismo problema por su cuenta.",[15,5449,5450],{},"Ahí entran los composables.",[22,5452,5454],{"id":5453},"qué-es-un-composable-sin-hacerlo-raro","Qué es un composable, sin hacerlo raro",[15,5456,5457],{},"Un composable es una función que encapsula lógica reutilizable usando la Composition API de Vue.",[15,5459,5460],{},"Nada más. No necesita sonar más grande que eso.",[15,5462,5463,5464,90,5466,5468,5469,5472,5473,5476],{},"Puede guardar estado con ",[87,5465,89],{},[87,5467,93],{},", crear valores derivados con ",[87,5470,5471],{},"computed()",", escuchar cambios con ",[87,5474,5475],{},"watch()"," o conectar con APIs del navegador. La idea es que esa lógica viva en un lugar claro y pueda usarse desde varios componentes sin copiar y pegar.",[15,5478,5479],{},"Si un componente debería encargarse de mostrar la interfaz, un composable puede encargarse de una parte de la lógica que la alimenta.",[22,5481,5483],{"id":5482},"el-problema-lógica-repetida-dentro-del-componente","El problema: lógica repetida dentro del componente",[15,5485,5486],{},"Imagina un menú pequeño:",[154,5488,5491],{"className":156,"code":5489,"filename":5490,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n\nconst open = () => {\n  isOpen.value = true\n}\n\nconst close = () => {\n  isOpen.value = false\n}\n\nconst toggle = () => {\n  isOpen.value = !isOpen.value\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"toggle\">\n    {{ isOpen ? 'Cerrar menu' : 'Abrir menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"isOpen\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","MenuButton.vue",[87,5492,5493,5503,5513,5517,5534,5538,5553,5562,5566,5570,5585,5594,5598,5602,5617,5629,5633,5641,5645,5653,5668,5673,5681,5685,5702,5707,5715],{"__ignoreMap":163},[167,5494,5495,5497,5499,5501],{"class":169,"line":170},[167,5496,174],{"class":173},[167,5498,178],{"class":177},[167,5500,182],{"class":181},[167,5502,185],{"class":173},[167,5504,5505,5507,5509,5511],{"class":169,"line":188},[167,5506,192],{"class":191},[167,5508,195],{"class":173},[167,5510,198],{"class":191},[167,5512,202],{"class":201},[167,5514,5515],{"class":169,"line":205},[167,5516,209],{"emptyLinePlaceholder":208},[167,5518,5519,5521,5524,5526,5528,5530,5532],{"class":169,"line":160},[167,5520,216],{"class":191},[167,5522,5523],{"class":219}," isOpen",[167,5525,223],{"class":191},[167,5527,226],{"class":181},[167,5529,229],{"class":173},[167,5531,3392],{"class":219},[167,5533,235],{"class":173},[167,5535,5536],{"class":169,"line":238},[167,5537,209],{"emptyLinePlaceholder":208},[167,5539,5540,5542,5545,5547,5549,5551],{"class":169,"line":243},[167,5541,216],{"class":191},[167,5543,5544],{"class":181}," open",[167,5546,223],{"class":191},[167,5548,1469],{"class":173},[167,5550,639],{"class":191},[167,5552,1905],{"class":173},[167,5554,5555,5558,5560],{"class":169,"line":261},[167,5556,5557],{"class":173},"  isOpen.value ",[167,5559,267],{"class":191},[167,5561,3487],{"class":219},[167,5563,5564],{"class":169,"line":273},[167,5565,276],{"class":173},[167,5567,5568],{"class":169,"line":279},[167,5569,209],{"emptyLinePlaceholder":208},[167,5571,5572,5574,5577,5579,5581,5583],{"class":169,"line":289},[167,5573,216],{"class":191},[167,5575,5576],{"class":181}," close",[167,5578,223],{"class":191},[167,5580,1469],{"class":173},[167,5582,639],{"class":191},[167,5584,1905],{"class":173},[167,5586,5587,5589,5591],{"class":169,"line":294},[167,5588,5557],{"class":173},[167,5590,267],{"class":191},[167,5592,5593],{"class":219}," false\n",[167,5595,5596],{"class":169,"line":304},[167,5597,276],{"class":173},[167,5599,5600],{"class":169,"line":313},[167,5601,209],{"emptyLinePlaceholder":208},[167,5603,5604,5606,5609,5611,5613,5615],{"class":169,"line":161},[167,5605,216],{"class":191},[167,5607,5608],{"class":181}," toggle",[167,5610,223],{"class":191},[167,5612,1469],{"class":173},[167,5614,639],{"class":191},[167,5616,1905],{"class":173},[167,5618,5619,5621,5623,5626],{"class":169,"line":335},[167,5620,5557],{"class":173},[167,5622,267],{"class":191},[167,5624,5625],{"class":191}," !",[167,5627,5628],{"class":173},"isOpen.value\n",[167,5630,5631],{"class":169,"line":341},[167,5632,276],{"class":173},[167,5634,5635,5637,5639],{"class":169,"line":489},[167,5636,282],{"class":173},[167,5638,178],{"class":177},[167,5640,185],{"class":173},[167,5642,5643],{"class":169,"line":495},[167,5644,209],{"emptyLinePlaceholder":208},[167,5646,5647,5649,5651],{"class":169,"line":501},[167,5648,174],{"class":173},[167,5650,299],{"class":177},[167,5652,185],{"class":173},[167,5654,5655,5657,5659,5661,5663,5666],{"class":169,"line":512},[167,5656,307],{"class":173},[167,5658,507],{"class":177},[167,5660,1182],{"class":181},[167,5662,267],{"class":173},[167,5664,5665],{"class":201},"\"toggle\"",[167,5667,185],{"class":173},[167,5669,5670],{"class":169,"line":781},[167,5671,5672],{"class":173},"    {{ isOpen ? 'Cerrar menu' : 'Abrir menu' }}\n",[167,5674,5675,5677,5679],{"class":169,"line":786},[167,5676,504],{"class":173},[167,5678,507],{"class":177},[167,5680,185],{"class":173},[167,5682,5683],{"class":169,"line":2678},[167,5684,209],{"emptyLinePlaceholder":208},[167,5686,5687,5689,5692,5695,5697,5700],{"class":169,"line":2692},[167,5688,307],{"class":173},[167,5690,5691],{"class":177},"nav",[167,5693,5694],{"class":181}," v-if",[167,5696,267],{"class":173},[167,5698,5699],{"class":201},"\"isOpen\"",[167,5701,185],{"class":173},[167,5703,5704],{"class":169,"line":3575},[167,5705,5706],{"class":173},"    Menu visible\n",[167,5708,5709,5711,5713],{"class":169,"line":5028},[167,5710,504],{"class":173},[167,5712,5691],{"class":177},[167,5714,185],{"class":173},[167,5716,5717,5719,5721],{"class":169,"line":5037},[167,5718,282],{"class":173},[167,5720,299],{"class":177},[167,5722,185],{"class":173},[15,5724,5725],{},"Este código está bien. No hay que extraer todo apenas aparece una función. El problema llega cuando la misma idea aparece en un modal, un acordeón, una tarjeta expandible y un panel de filtros.",[15,5727,5728],{},"En ese punto ya no estás escribiendo lógica del menú. Estás escribiendo una pequeña regla reutilizable: algo puede estar activo o inactivo, y necesitas abrirlo, cerrarlo o alternarlo.",[22,5730,5732,5733],{"id":5731},"el-después-extraer-un-usetoggle","El después: extraer un ",[87,5734,5735],{},"useToggle",[15,5737,5738],{},"Podemos llevar esa lógica a un composable:",[154,5740,5743],{"className":2879,"code":5741,"filename":5742,"language":2882,"meta":163,"style":163},"import { ref } from 'vue'\n\nexport function useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n","composables\u002FuseToggle.js",[87,5744,5745,5755,5759,5780,5794,5798,5812,5821,5825,5829,5843,5851,5855,5859,5873,5884,5888,5892,5898,5903,5908,5913,5918,5922],{"__ignoreMap":163},[167,5746,5747,5749,5751,5753],{"class":169,"line":170},[167,5748,192],{"class":191},[167,5750,195],{"class":173},[167,5752,198],{"class":191},[167,5754,202],{"class":201},[167,5756,5757],{"class":169,"line":188},[167,5758,209],{"emptyLinePlaceholder":208},[167,5760,5761,5763,5765,5768,5770,5773,5775,5778],{"class":169,"line":205},[167,5762,608],{"class":191},[167,5764,1432],{"class":191},[167,5766,5767],{"class":181}," useToggle",[167,5769,229],{"class":173},[167,5771,5772],{"class":254},"initialValue",[167,5774,223],{"class":191},[167,5776,5777],{"class":219}," false",[167,5779,258],{"class":173},[167,5781,5782,5784,5787,5789,5791],{"class":169,"line":160},[167,5783,1443],{"class":191},[167,5785,5786],{"class":219}," isActive",[167,5788,223],{"class":191},[167,5790,226],{"class":181},[167,5792,5793],{"class":173},"(initialValue)\n",[167,5795,5796],{"class":169,"line":238},[167,5797,209],{"emptyLinePlaceholder":208},[167,5799,5800,5802,5804,5806,5808,5810],{"class":169,"line":243},[167,5801,1443],{"class":191},[167,5803,5544],{"class":181},[167,5805,223],{"class":191},[167,5807,1469],{"class":173},[167,5809,639],{"class":191},[167,5811,1905],{"class":173},[167,5813,5814,5817,5819],{"class":169,"line":261},[167,5815,5816],{"class":173},"    isActive.value ",[167,5818,267],{"class":191},[167,5820,3487],{"class":219},[167,5822,5823],{"class":169,"line":273},[167,5824,3492],{"class":173},[167,5826,5827],{"class":169,"line":279},[167,5828,209],{"emptyLinePlaceholder":208},[167,5830,5831,5833,5835,5837,5839,5841],{"class":169,"line":289},[167,5832,1443],{"class":191},[167,5834,5576],{"class":181},[167,5836,223],{"class":191},[167,5838,1469],{"class":173},[167,5840,639],{"class":191},[167,5842,1905],{"class":173},[167,5844,5845,5847,5849],{"class":169,"line":294},[167,5846,5816],{"class":173},[167,5848,267],{"class":191},[167,5850,5593],{"class":219},[167,5852,5853],{"class":169,"line":304},[167,5854,3492],{"class":173},[167,5856,5857],{"class":169,"line":313},[167,5858,209],{"emptyLinePlaceholder":208},[167,5860,5861,5863,5865,5867,5869,5871],{"class":169,"line":161},[167,5862,1443],{"class":191},[167,5864,5608],{"class":181},[167,5866,223],{"class":191},[167,5868,1469],{"class":173},[167,5870,639],{"class":191},[167,5872,1905],{"class":173},[167,5874,5875,5877,5879,5881],{"class":169,"line":335},[167,5876,5816],{"class":173},[167,5878,267],{"class":191},[167,5880,5625],{"class":191},[167,5882,5883],{"class":173},"isActive.value\n",[167,5885,5886],{"class":169,"line":341},[167,5887,3492],{"class":173},[167,5889,5890],{"class":169,"line":489},[167,5891,209],{"emptyLinePlaceholder":208},[167,5893,5894,5896],{"class":169,"line":495},[167,5895,1539],{"class":191},[167,5897,1905],{"class":173},[167,5899,5900],{"class":169,"line":501},[167,5901,5902],{"class":173},"    isActive,\n",[167,5904,5905],{"class":169,"line":512},[167,5906,5907],{"class":173},"    open,\n",[167,5909,5910],{"class":169,"line":781},[167,5911,5912],{"class":173},"    close,\n",[167,5914,5915],{"class":169,"line":786},[167,5916,5917],{"class":173},"    toggle\n",[167,5919,5920],{"class":169,"line":2678},[167,5921,3492],{"class":173},[167,5923,5924],{"class":169,"line":2692},[167,5925,276],{"class":173},[15,5927,5928],{},"Y ahora el componente queda más enfocado:",[154,5930,5932],{"className":156,"code":5931,"filename":5490,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { useToggle } from '@\u002Fcomposables\u002FuseToggle'\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Cerrar menu' : 'Abrir menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[87,5933,5934,5944,5956,5960,5973,5981,5985,5993,6008,6013,6021,6025,6040,6044,6052],{"__ignoreMap":163},[167,5935,5936,5938,5940,5942],{"class":169,"line":170},[167,5937,174],{"class":173},[167,5939,178],{"class":177},[167,5941,182],{"class":181},[167,5943,185],{"class":173},[167,5945,5946,5948,5951,5953],{"class":169,"line":188},[167,5947,192],{"class":191},[167,5949,5950],{"class":173}," { useToggle } ",[167,5952,198],{"class":191},[167,5954,5955],{"class":201}," '@\u002Fcomposables\u002FuseToggle'\n",[167,5957,5958],{"class":169,"line":205},[167,5959,209],{"emptyLinePlaceholder":208},[167,5961,5962,5964,5967,5969,5971],{"class":169,"line":160},[167,5963,216],{"class":191},[167,5965,5966],{"class":219}," menu",[167,5968,223],{"class":191},[167,5970,5767],{"class":181},[167,5972,2917],{"class":173},[167,5974,5975,5977,5979],{"class":169,"line":238},[167,5976,282],{"class":173},[167,5978,178],{"class":177},[167,5980,185],{"class":173},[167,5982,5983],{"class":169,"line":243},[167,5984,209],{"emptyLinePlaceholder":208},[167,5986,5987,5989,5991],{"class":169,"line":261},[167,5988,174],{"class":173},[167,5990,299],{"class":177},[167,5992,185],{"class":173},[167,5994,5995,5997,5999,6001,6003,6006],{"class":169,"line":273},[167,5996,307],{"class":173},[167,5998,507],{"class":177},[167,6000,1182],{"class":181},[167,6002,267],{"class":173},[167,6004,6005],{"class":201},"\"menu.toggle()\"",[167,6007,185],{"class":173},[167,6009,6010],{"class":169,"line":279},[167,6011,6012],{"class":173},"    {{ menu.isActive ? 'Cerrar menu' : 'Abrir menu' }}\n",[167,6014,6015,6017,6019],{"class":169,"line":289},[167,6016,504],{"class":173},[167,6018,507],{"class":177},[167,6020,185],{"class":173},[167,6022,6023],{"class":169,"line":294},[167,6024,209],{"emptyLinePlaceholder":208},[167,6026,6027,6029,6031,6033,6035,6038],{"class":169,"line":304},[167,6028,307],{"class":173},[167,6030,5691],{"class":177},[167,6032,5694],{"class":181},[167,6034,267],{"class":173},[167,6036,6037],{"class":201},"\"menu.isActive\"",[167,6039,185],{"class":173},[167,6041,6042],{"class":169,"line":313},[167,6043,5706],{"class":173},[167,6045,6046,6048,6050],{"class":169,"line":161},[167,6047,504],{"class":173},[167,6049,5691],{"class":177},[167,6051,185],{"class":173},[167,6053,6054,6056,6058],{"class":169,"line":335},[167,6055,282],{"class":173},[167,6057,299],{"class":177},[167,6059,185],{"class":173},[15,6061,6062],{},"El componente todavía se entiende. De hecho, se entiende mejor: hay un menú y ese menú se puede alternar. La mecánica interna ya no estorba.",[22,6064,6066],{"id":6065},"cuándo-sí-vale-la-pena-crear-un-composable","Cuándo sí vale la pena crear un composable",[15,6068,6069],{},"Un composable tiene sentido cuando extrae una intención real, no solo unas líneas de código.",[15,6071,6072],{},"Suele valer la pena cuando:",[33,6074,6075,6078,6081,6084],{},[36,6076,6077],{},"La misma lógica aparece en más de un componente.",[36,6079,6080],{},"El componente está mezclando demasiadas responsabilidades.",[36,6082,6083],{},"Quieres probar o razonar una parte del comportamiento por separado.",[36,6085,6086,6087,1025,6089,1025,6092,1025,6095,1679],{},"La lógica tiene un nombre claro: ",[87,6088,5735],{},[87,6090,6091],{},"useMousePosition",[87,6093,6094],{},"useLocalStorage",[87,6096,6097],{},"usePagination",[15,6099,6100],{},"La clave está en el nombre. Si puedes nombrarlo de forma natural, probablemente hay una idea reutilizable ahí.",[22,6102,6104],{"id":6103},"cuándo-no-hace-falta","Cuándo no hace falta",[15,6106,6107],{},"No todo necesita convertirse en composable.",[15,6109,6110],{},"Si una lógica solo vive en un componente y se entiende bien ahí, déjala ahí. Extraer demasiado pronto también complica. Terminas saltando entre archivos para entender algo que antes se leía en veinte segundos.",[15,6112,6113],{},"Un buen composable reduce ruido. Uno innecesario lo mueve de lugar.",[22,6115,3085],{"id":3084},[15,6117,6118,6119,1025,6122,90,6125,6128],{},"El primero es crear nombres demasiado vagos. ",[87,6120,6121],{},"useHelpers",[87,6123,6124],{},"useUtils",[87,6126,6127],{},"useCommon"," no dicen nada. Si el nombre no explica la intención, el archivo se convierte en un cajón de cosas sueltas.",[15,6130,6131,6132,6135],{},"El segundo es meter demasiada lógica en el mismo composable. ",[87,6133,6134],{},"useUserDashboardEverything"," puede empezar cómodo, pero pronto será más difícil de mantener que el componente original.",[15,6137,6138,6139,6141],{},"El tercero es esconder efectos secundarios. Si un composable hace una petición, escribe en ",[87,6140,2398],{}," o registra eventos globales, debería ser evidente por su nombre o por cómo se usa.",[15,6143,6144],{},"El cuarto es devolver demasiadas cosas. Si un composable devuelve quince propiedades, quizá todavía no encontraste el límite correcto.",[22,6146,6148],{"id":6147},"una-regla-práctica","Una regla práctica",[15,6150,6151],{},"Antes de crear un composable, pregúntate esto:",[5367,6153,6154],{},[15,6155,6156],{},"¿Estoy extrayendo una idea o solo estoy moviendo código?",[15,6158,6159],{},"Si estás extrayendo una idea, adelante. Si solo estás moviendo código para que el componente se vea más corto, espera un poco.",[15,6161,6162],{},"Los composables no están para lucirse. Están para que el código respire mejor, para que los componentes hablen de interfaz y para que la lógica repetida tenga una casa propia.",[924,6164,6165],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":6167},[6168,6169,6170,6172,6173,6174,6175],{"id":5453,"depth":188,"text":5454},{"id":5482,"depth":188,"text":5483},{"id":5731,"depth":188,"text":6171},"El después: extraer un useToggle",{"id":6065,"depth":188,"text":6066},{"id":6103,"depth":188,"text":6104},{"id":3084,"depth":188,"text":3085},{"id":6147,"depth":188,"text":6148},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1782172219\u002Fvue-3-composables-extract-reusable-logic.es.md_myyutl.png","Pantalla con código en un entorno de desarrollo","2026-06-23","Aprende qué son los composables en Vue 3, cuándo conviene usarlos y cómo extraer lógica reutilizable con un ejemplo claro usando useToggle.",{"title":6181,"goal":6182,"tasks":6183,"starterCode":6188,"solutionHint":6189},"Crea tu primer composable: useToggle","Extrae una lógica pequeña y repetible para abrir, cerrar y alternar un estado booleano desde cualquier componente.",[6184,6185,6186,6187],"Crea un archivo useToggle.js o useToggle.ts.","Usa ref() para guardar el estado activo o inactivo.","Expón las funciones open(), close() y toggle().","Usa el composable desde un componente con un botón.","\u003Cscript setup>\nimport { ref } from 'vue'\n\nfunction useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Cerrar menu' : 'Abrir menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","Si el componente ya no necesita saber cómo cambia el estado, solo cuándo usarlo, el composable está haciendo bien su trabajo.",{"updatedAt":945,"coverCaption":6191,"author":946,"keywords":6192},"Código reutilizable en Vue 3 por TODOvue",[3258,951,954,3260,5735,6193],"lógica reutilizable","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es",[6196],{"headline":5429,"author":6197,"datePublished":6198,"@type":961},{"name":946,"@type":959},"2026-06-22T20:00:00-05:00",{"title":5429,"description":6179},"blog\u002Fvue-3-composables-extract-reusable-logic.es",[6202,6203,6204,6205],{"tag":954,"color":976},{"tag":1625,"color":1639},{"tag":973,"color":974},{"tag":5424,"color":5425},"fUGaAtyXtTvA6HVDF8xZfMxwmMsfGc4zmxB1UCsyhQs",{"id":6208,"title":6209,"body":6210,"cover":7704,"coverAlt":7705,"date":7706,"description":7707,"draft":940,"extension":941,"lab":942,"locale":943,"meta":7708,"navigation":208,"path":7713,"schemaOrg":7714,"seo":7717,"series":7718,"seriesDescription":7719,"seriesOrder":279,"seriesTitle":7720,"slug":942,"stem":7721,"tags":7722,"__hash__":7732},"blog\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es.md","Ciclos de vida en Vue: renderizado del lado del servidor (serverPrefetch)",{"type":8,"value":6211,"toc":7690},[6212,6220,6223,6228,6232,6235,6249,6254,6258,6271,6274,6288,6291,6316,6319,6323,6328,6339,6346,6350,6353,6356,6374,6380,6382,6386,6395,6405,6409,6425,6429,6432,6437,6441,6447,6450,6454,7064,7663,7669,7675,7679,7684,7687],[11,6213,6215,6216,6219],{"id":6214},"ciclos-de-vida-en-vue-renderizado-del-lado-del-servidor-serverprefetch","Ciclos de vida en Vue: renderizado del lado del servidor (",[87,6217,6218],{},"serverPrefetch",")",[15,6221,6222],{},"Cuando una aplicación usa SSR (Server-Side Rendering), el primer render ya no ocurre únicamente en el navegador. El servidor genera el HTML antes de enviarlo y, si los datos importantes llegan tarde, el usuario recibe una página incompleta o poco útil hasta que el cliente vuelve a solicitarlos.",[15,6224,6225,6227],{},[87,6226,6218],{}," existe precisamente para resolver ese momento. Permite esperar datos asíncronos antes de renderizar el componente en el servidor, de modo que el HTML inicial ya incluya contenido real y no dependa de esqueletos o placeholders que cambian durante la hidratación.",[22,6229,6231],{"id":6230},"por-qué-esto-importa","Por qué esto importa",[15,6233,6234],{},"En SSR, la primera impresión depende del HTML generado en el servidor. Si un producto, un artículo o un resumen de dashboard se cargan solo después de montar el componente en el cliente, se pierden varias ventajas:",[33,6236,6237,6240,6243,6246],{},[36,6238,6239],{},"El usuario ve menos contenido útil en el primer paint.",[36,6241,6242],{},"El SEO recibe un documento más pobre.",[36,6244,6245],{},"La hidratación puede sentirse inconsistente.",[36,6247,6248],{},"Se duplica trabajo entre servidor y cliente.",[15,6250,6251,6253],{},[87,6252,6218],{}," ayuda a que los datos críticos estén disponibles a tiempo para el render inicial. No sustituye toda la estrategia de obtención de datos, pero cubre muy bien la fase previa al render del servidor.",[22,6255,6257],{"id":6256},"concepto-clave","Concepto clave",[15,6259,6260,6262,6263,6266,6267,6270],{},[87,6261,6218],{}," (Options API) y ",[87,6264,6265],{},"onServerPrefetch()"," (Composition API) permiten registrar una función asíncrona que Vue resuelve ",[3933,6268,6269],{},"antes"," de renderizar el componente en el servidor.",[15,6272,6273],{},"Flujo simplificado:",[33,6275,6276,6279,6282,6285],{},[36,6277,6278],{},"El componente entra en el árbol SSR.",[36,6280,6281],{},"Vue ejecuta el hook.",[36,6283,6284],{},"Si el hook devuelve una promesa, el renderer espera.",[36,6286,6287],{},"Cuando la promesa se resuelve, Vue genera el HTML con los datos disponibles.",[15,6289,6290],{},"Matices importantes:",[33,6292,6293,6299,6302],{},[36,6294,6295,6296,1679],{},"Solo se ejecuta durante ",[3933,6297,6298],{},"server-side rendering",[36,6300,6301],{},"No reemplaza la carga en cliente cuando el componente aparece fuera del render inicial.",[36,6303,6304,6305,6308,6309,90,6312,6315],{},"En ",[3933,6306,6307],{},"Nuxt",", suele ser preferible usar ",[87,6310,6311],{},"useAsyncData()",[87,6313,6314],{},"useFetch()",", ya que integran serialización, caché e hidratación automáticamente.",[15,6317,6318],{},"Puedes pensar en este hook como una herramienta de bajo nivel para SSR: útil cuando necesitas control fino dentro de un componente renderizado en servidor.",[22,6320,6322],{"id":6321},"cuándo-usarlo","Cuándo usarlo",[15,6324,6325,6327],{},[87,6326,6218],{}," es adecuado cuando el contenido del HTML inicial es crítico:",[33,6329,6330,6333,6336],{},[36,6331,6332],{},"Páginas de producto con nombre, precio y disponibilidad.",[36,6334,6335],{},"Artículos o contenido público que debe ser indexable y visible desde el inicio.",[36,6337,6338],{},"Componentes que dependen del request actual antes de renderizar.",[15,6340,6341,6342,6345],{},"Regla práctica: si el dato debe existir ",[3933,6343,6344],{},"antes del render del servidor",", este hook es una buena opción.",[22,6347,6349],{"id":6348},"cuándo-evitarlo","Cuándo evitarlo",[15,6351,6352],{},"No es recomendable usarlo como solución genérica para cualquier fetch.",[15,6354,6355],{},"Evítalo cuando:",[33,6357,6358,6361,6364,6371],{},[36,6359,6360],{},"El componente solo se renderiza en cliente.",[36,6362,6363],{},"La información no es crítica para el HTML inicial.",[36,6365,6366,6367,90,6369,1679],{},"Ya usas Nuxt y el caso encaja mejor en ",[87,6368,6311],{},[87,6370,6314],{},[36,6372,6373],{},"El fetch depende de API exclusivas del navegador.",[15,6375,6376,6377,6379],{},"Además, evita operaciones costosas o innecesarias: todo lo que ejecutes en ",[87,6378,6218],{}," impacta directamente en el tiempo de respuesta del servidor.",[22,6381,3085],{"id":3084},[3087,6383,6385],{"id":6384},"_1-asumir-que-también-se-ejecuta-en-navegación-cliente","1. Asumir que también se ejecuta en navegación cliente",[15,6387,6388,6390,6391,6394],{},[87,6389,6218],{}," no sustituye ",[87,6392,6393],{},"mounted"," ni una estrategia completa de carga de datos. Si el componente se renderiza solo en cliente, este hook no se ejecuta.",[15,6396,6397,6398,90,6401,6404],{},"Solución: añadir un fallback en ",[87,6399,6400],{},"onMounted()",[87,6402,6403],{},"mounted()"," cuando los datos no estén disponibles.",[3087,6406,6408],{"id":6407},"_2-usar-api-del-navegador","2. Usar API del navegador",[15,6410,6411,6412,1025,6415,6418,6419,6421,6422,6424],{},"Durante SSR no existen ",[87,6413,6414],{},"window",[87,6416,6417],{},"document"," ni ",[87,6420,2398],{},". El código dentro de ",[87,6423,6218],{}," debe ser seguro para ejecutarse en servidor.",[3087,6426,6428],{"id":6427},"_3-duplicar-el-fetch-innecesariamente","3. Duplicar el fetch innecesariamente",[15,6430,6431],{},"Si el servidor ya obtuvo los datos, no tiene sentido repetir la petición en cliente.",[15,6433,6434,6435,1679],{},"Solución: comprobar si el estado ya existe antes de hacer el fetch en ",[87,6436,6393],{},[3087,6438,6440],{"id":6439},"_4-sobrecargar-componentes-profundos","4. Sobrecargar componentes profundos",[15,6442,6443,6444,6446],{},"Multiplicar ",[87,6445,6218],{}," en muchos componentes puede aumentar el tiempo de respuesta y dificultar el flujo de datos.",[15,6448,6449],{},"Distribuye responsabilidades: página, layout y componentes deben tener roles claros.",[22,6451,6453],{"id":6452},"ejemplo-práctico","Ejemplo práctico",[154,6455,6457],{"className":156,"code":6456,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, onServerPrefetch, ref } from 'vue'\n\ntype Product = {\n  id: number\n  name: string\n  price: number\n  stock: number\n}\n\nconst product = ref\u003CProduct | null>(null)\nconst errorMessage = ref('')\n\nasync function fetchProduct() {\n  const response = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts\u002F42')\n\n  if (!response.ok) {\n    throw new Error('No fue posible cargar el producto.')\n  }\n\n  product.value = (await response.json()) as Product\n}\n\nonServerPrefetch(async () => {\n  try {\n    await fetchProduct()\n  } catch (error) {\n    errorMessage.value =\n      error instanceof Error ? error.message : 'Error inesperado en SSR.'\n  }\n})\n\nonMounted(async () => {\n  if (product.value || errorMessage.value) return\n\n  try {\n    await fetchProduct()\n  } catch (error) {\n    errorMessage.value =\n      error instanceof Error ? error.message : 'Error inesperado en cliente.'\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle class=\"product-card\">\n    \u003Cp v-if=\"errorMessage\">{{ errorMessage }}\u003C\u002Fp>\n\n    \u003Ctemplate v-else-if=\"product\">\n      \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n      \u003Cp>Precio: {{ product.price }} USD\u003C\u002Fp>\n      \u003Cp>Stock: {{ product.stock }}\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n\n    \u003Cp v-else>Cargando producto...\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[87,6458,6459,6475,6486,6490,6501,6511,6521,6530,6539,6543,6547,6576,6593,6597,6608,6629,6633,6645,6662,6666,6670,6696,6700,6704,6719,6726,6735,6746,6754,6776,6781,6786,6791,6807,6822,6827,6834,6843,6852,6859,6877,6882,6887,6896,6901,6910,6926,6947,6952,6973,6987,7001,7015,7024,7029,7046,7055],{"__ignoreMap":163},[167,6460,6461,6463,6465,6467,6469,6471,6473],{"class":169,"line":170},[167,6462,174],{"class":173},[167,6464,178],{"class":177},[167,6466,182],{"class":181},[167,6468,1050],{"class":181},[167,6470,267],{"class":173},[167,6472,1055],{"class":201},[167,6474,185],{"class":173},[167,6476,6477,6479,6482,6484],{"class":169,"line":188},[167,6478,192],{"class":191},[167,6480,6481],{"class":173}," { onMounted, onServerPrefetch, ref } ",[167,6483,198],{"class":191},[167,6485,202],{"class":201},[167,6487,6488],{"class":169,"line":205},[167,6489,209],{"emptyLinePlaceholder":208},[167,6491,6492,6494,6497,6499],{"class":169,"line":160},[167,6493,569],{"class":191},[167,6495,6496],{"class":181}," Product",[167,6498,223],{"class":191},[167,6500,1905],{"class":173},[167,6502,6503,6506,6508],{"class":169,"line":238},[167,6504,6505],{"class":254},"  id",[167,6507,583],{"class":191},[167,6509,6510],{"class":219}," number\n",[167,6512,6513,6516,6518],{"class":169,"line":243},[167,6514,6515],{"class":254},"  name",[167,6517,583],{"class":191},[167,6519,6520],{"class":219}," string\n",[167,6522,6523,6526,6528],{"class":169,"line":261},[167,6524,6525],{"class":254},"  price",[167,6527,583],{"class":191},[167,6529,6510],{"class":219},[167,6531,6532,6535,6537],{"class":169,"line":273},[167,6533,6534],{"class":254},"  stock",[167,6536,583],{"class":191},[167,6538,6510],{"class":219},[167,6540,6541],{"class":169,"line":279},[167,6542,276],{"class":173},[167,6544,6545],{"class":169,"line":289},[167,6546,209],{"emptyLinePlaceholder":208},[167,6548,6549,6551,6554,6556,6558,6560,6563,6565,6568,6571,6574],{"class":169,"line":294},[167,6550,216],{"class":191},[167,6552,6553],{"class":219}," product",[167,6555,223],{"class":191},[167,6557,226],{"class":181},[167,6559,174],{"class":173},[167,6561,6562],{"class":181},"Product",[167,6564,659],{"class":191},[167,6566,6567],{"class":219}," null",[167,6569,6570],{"class":173},">(",[167,6572,6573],{"class":219},"null",[167,6575,235],{"class":173},[167,6577,6578,6580,6583,6585,6587,6589,6591],{"class":169,"line":304},[167,6579,216],{"class":191},[167,6581,6582],{"class":219}," errorMessage",[167,6584,223],{"class":191},[167,6586,226],{"class":181},[167,6588,229],{"class":173},[167,6590,2184],{"class":201},[167,6592,235],{"class":173},[167,6594,6595],{"class":169,"line":313},[167,6596,209],{"emptyLinePlaceholder":208},[167,6598,6599,6601,6603,6606],{"class":169,"line":161},[167,6600,2523],{"class":191},[167,6602,1432],{"class":191},[167,6604,6605],{"class":181}," fetchProduct",[167,6607,763],{"class":173},[167,6609,6610,6612,6615,6617,6619,6622,6624,6627],{"class":169,"line":335},[167,6611,1443],{"class":191},[167,6613,6614],{"class":219}," response",[167,6616,223],{"class":191},[167,6618,3009],{"class":191},[167,6620,6621],{"class":181}," fetch",[167,6623,229],{"class":173},[167,6625,6626],{"class":201},"'https:\u002F\u002Fapi.example.com\u002Fproducts\u002F42'",[167,6628,235],{"class":173},[167,6630,6631],{"class":169,"line":341},[167,6632,209],{"emptyLinePlaceholder":208},[167,6634,6635,6637,6639,6642],{"class":169,"line":489},[167,6636,2544],{"class":191},[167,6638,2526],{"class":173},[167,6640,6641],{"class":191},"!",[167,6643,6644],{"class":173},"response.ok) {\n",[167,6646,6647,6650,6652,6655,6657,6660],{"class":169,"line":495},[167,6648,6649],{"class":191},"    throw",[167,6651,4224],{"class":191},[167,6653,6654],{"class":181}," Error",[167,6656,229],{"class":173},[167,6658,6659],{"class":201},"'No fue posible cargar el producto.'",[167,6661,235],{"class":173},[167,6663,6664],{"class":169,"line":501},[167,6665,3492],{"class":173},[167,6667,6668],{"class":169,"line":512},[167,6669,209],{"emptyLinePlaceholder":208},[167,6671,6672,6675,6677,6679,6681,6684,6687,6690,6693],{"class":169,"line":781},[167,6673,6674],{"class":173},"  product.value ",[167,6676,267],{"class":191},[167,6678,2526],{"class":173},[167,6680,2927],{"class":191},[167,6682,6683],{"class":173}," response.",[167,6685,6686],{"class":181},"json",[167,6688,6689],{"class":173},"()) ",[167,6691,6692],{"class":191},"as",[167,6694,6695],{"class":181}," Product\n",[167,6697,6698],{"class":169,"line":786},[167,6699,276],{"class":173},[167,6701,6702],{"class":169,"line":2678},[167,6703,209],{"emptyLinePlaceholder":208},[167,6705,6706,6709,6711,6713,6715,6717],{"class":169,"line":2692},[167,6707,6708],{"class":181},"onServerPrefetch",[167,6710,229],{"class":173},[167,6712,2523],{"class":191},[167,6714,1469],{"class":173},[167,6716,639],{"class":191},[167,6718,1905],{"class":173},[167,6720,6721,6724],{"class":169,"line":3575},[167,6722,6723],{"class":191},"  try",[167,6725,1905],{"class":173},[167,6727,6728,6731,6733],{"class":169,"line":5028},[167,6729,6730],{"class":191},"    await",[167,6732,6605],{"class":181},[167,6734,2917],{"class":173},[167,6736,6737,6740,6743],{"class":169,"line":5037},[167,6738,6739],{"class":173},"  } ",[167,6741,6742],{"class":191},"catch",[167,6744,6745],{"class":173}," (error) {\n",[167,6747,6748,6751],{"class":169,"line":5046},[167,6749,6750],{"class":173},"    errorMessage.value ",[167,6752,6753],{"class":191},"=\n",[167,6755,6757,6760,6763,6765,6768,6771,6773],{"class":169,"line":6756},29,[167,6758,6759],{"class":173},"      error ",[167,6761,6762],{"class":191},"instanceof",[167,6764,6654],{"class":181},[167,6766,6767],{"class":191}," ?",[167,6769,6770],{"class":173}," error.message ",[167,6772,583],{"class":191},[167,6774,6775],{"class":201}," 'Error inesperado en SSR.'\n",[167,6777,6779],{"class":169,"line":6778},30,[167,6780,3492],{"class":173},[167,6782,6784],{"class":169,"line":6783},31,[167,6785,403],{"class":173},[167,6787,6789],{"class":169,"line":6788},32,[167,6790,209],{"emptyLinePlaceholder":208},[167,6792,6794,6797,6799,6801,6803,6805],{"class":169,"line":6793},33,[167,6795,6796],{"class":181},"onMounted",[167,6798,229],{"class":173},[167,6800,2523],{"class":191},[167,6802,1469],{"class":173},[167,6804,639],{"class":191},[167,6806,1905],{"class":173},[167,6808,6810,6812,6815,6817,6820],{"class":169,"line":6809},34,[167,6811,2544],{"class":191},[167,6813,6814],{"class":173}," (product.value ",[167,6816,4264],{"class":191},[167,6818,6819],{"class":173}," errorMessage.value) ",[167,6821,2556],{"class":191},[167,6823,6825],{"class":169,"line":6824},35,[167,6826,209],{"emptyLinePlaceholder":208},[167,6828,6830,6832],{"class":169,"line":6829},36,[167,6831,6723],{"class":191},[167,6833,1905],{"class":173},[167,6835,6837,6839,6841],{"class":169,"line":6836},37,[167,6838,6730],{"class":191},[167,6840,6605],{"class":181},[167,6842,2917],{"class":173},[167,6844,6846,6848,6850],{"class":169,"line":6845},38,[167,6847,6739],{"class":173},[167,6849,6742],{"class":191},[167,6851,6745],{"class":173},[167,6853,6855,6857],{"class":169,"line":6854},39,[167,6856,6750],{"class":173},[167,6858,6753],{"class":191},[167,6860,6862,6864,6866,6868,6870,6872,6874],{"class":169,"line":6861},40,[167,6863,6759],{"class":173},[167,6865,6762],{"class":191},[167,6867,6654],{"class":181},[167,6869,6767],{"class":191},[167,6871,6770],{"class":173},[167,6873,583],{"class":191},[167,6875,6876],{"class":201}," 'Error inesperado en cliente.'\n",[167,6878,6880],{"class":169,"line":6879},41,[167,6881,3492],{"class":173},[167,6883,6885],{"class":169,"line":6884},42,[167,6886,403],{"class":173},[167,6888,6890,6892,6894],{"class":169,"line":6889},43,[167,6891,282],{"class":173},[167,6893,178],{"class":177},[167,6895,185],{"class":173},[167,6897,6899],{"class":169,"line":6898},44,[167,6900,209],{"emptyLinePlaceholder":208},[167,6902,6904,6906,6908],{"class":169,"line":6903},45,[167,6905,174],{"class":173},[167,6907,299],{"class":177},[167,6909,185],{"class":173},[167,6911,6913,6915,6917,6919,6921,6924],{"class":169,"line":6912},46,[167,6914,307],{"class":173},[167,6916,3696],{"class":177},[167,6918,1245],{"class":181},[167,6920,267],{"class":173},[167,6922,6923],{"class":201},"\"product-card\"",[167,6925,185],{"class":173},[167,6927,6929,6931,6933,6935,6937,6940,6943,6945],{"class":169,"line":6928},47,[167,6930,1257],{"class":173},[167,6932,15],{"class":177},[167,6934,5694],{"class":181},[167,6936,267],{"class":173},[167,6938,6939],{"class":201},"\"errorMessage\"",[167,6941,6942],{"class":173},">{{ errorMessage }}\u003C\u002F",[167,6944,15],{"class":177},[167,6946,185],{"class":173},[167,6948,6950],{"class":169,"line":6949},48,[167,6951,209],{"emptyLinePlaceholder":208},[167,6953,6955,6957,6959,6962,6964,6966,6969,6971],{"class":169,"line":6954},49,[167,6956,1257],{"class":173},[167,6958,299],{"class":177},[167,6960,6961],{"class":191}," v-else-if",[167,6963,267],{"class":173},[167,6965,5080],{"class":201},[167,6967,6968],{"class":173},"product",[167,6970,5080],{"class":201},[167,6972,185],{"class":173},[167,6974,6976,6978,6980,6983,6985],{"class":169,"line":6975},50,[167,6977,1268],{"class":173},[167,6979,11],{"class":177},[167,6981,6982],{"class":173},">{{ product.name }}\u003C\u002F",[167,6984,11],{"class":177},[167,6986,185],{"class":173},[167,6988,6990,6992,6994,6997,6999],{"class":169,"line":6989},51,[167,6991,1268],{"class":173},[167,6993,15],{"class":177},[167,6995,6996],{"class":173},">Precio: {{ product.price }} USD\u003C\u002F",[167,6998,15],{"class":177},[167,7000,185],{"class":173},[167,7002,7004,7006,7008,7011,7013],{"class":169,"line":7003},52,[167,7005,1268],{"class":173},[167,7007,15],{"class":177},[167,7009,7010],{"class":173},">Stock: {{ product.stock }}\u003C\u002F",[167,7012,15],{"class":177},[167,7014,185],{"class":173},[167,7016,7018,7020,7022],{"class":169,"line":7017},53,[167,7019,1292],{"class":173},[167,7021,299],{"class":177},[167,7023,185],{"class":173},[167,7025,7027],{"class":169,"line":7026},54,[167,7028,209],{"emptyLinePlaceholder":208},[167,7030,7032,7034,7036,7039,7042,7044],{"class":169,"line":7031},55,[167,7033,1257],{"class":173},[167,7035,15],{"class":177},[167,7037,7038],{"class":181}," v-else",[167,7040,7041],{"class":173},">Cargando producto...\u003C\u002F",[167,7043,15],{"class":177},[167,7045,185],{"class":173},[167,7047,7049,7051,7053],{"class":169,"line":7048},56,[167,7050,504],{"class":173},[167,7052,3696],{"class":177},[167,7054,185],{"class":173},[167,7056,7058,7060,7062],{"class":169,"line":7057},57,[167,7059,282],{"class":173},[167,7061,299],{"class":177},[167,7063,185],{"class":173},[154,7065,7067],{"className":156,"code":7066,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport { defineComponent } from 'vue'\n\ntype Product = {\n  id: number\n  name: string\n  price: number\n  stock: number\n}\n\nexport default defineComponent({\n  name: 'ProductCardSsr',\n\n  data() {\n    return {\n      product: null as Product | null,\n      errorMessage: ''\n    }\n  },\n\n  methods: {\n    async fetchProduct() {\n      const response = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts\u002F42')\n\n      if (!response.ok) {\n        throw new Error('No fue posible cargar el producto.')\n      }\n\n      this.product = (await response.json()) as Product\n    }\n  },\n\n  async serverPrefetch() {\n    try {\n      await this.fetchProduct()\n    } catch (error) {\n      this.errorMessage =\n        error instanceof Error ? error.message : 'Error inesperado en SSR.'\n    }\n  },\n\n  async mounted() {\n    if (this.product || this.errorMessage) return\n\n    try {\n      await this.fetchProduct()\n    } catch (error) {\n      this.errorMessage =\n        error instanceof Error ? error.message : 'Error inesperado en cliente.'\n    }\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle class=\"product-card\">\n    \u003Cp v-if=\"errorMessage\">{{ errorMessage }}\u003C\u002Fp>\n\n    \u003Ctemplate v-else-if=\"product\">\n      \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n      \u003Cp>Precio: {{ product.price }} USD\u003C\u002Fp>\n      \u003Cp>Stock: {{ product.stock }}\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n\n    \u003Cp v-else>Cargando producto...\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[87,7068,7069,7083,7094,7098,7108,7116,7124,7132,7140,7144,7148,7159,7168,7172,7179,7185,7202,7210,7214,7218,7222,7226,7235,7253,7257,7268,7283,7288,7292,7315,7319,7323,7327,7337,7344,7359,7368,7377,7394,7398,7402,7406,7415,7435,7439,7445,7457,7465,7473,7489,7493,7497,7501,7509,7513,7521,7535,7553,7558,7577,7590,7603,7616,7625,7630,7645,7654],{"__ignoreMap":163},[167,7070,7071,7073,7075,7077,7079,7081],{"class":169,"line":170},[167,7072,174],{"class":173},[167,7074,178],{"class":177},[167,7076,1050],{"class":181},[167,7078,267],{"class":173},[167,7080,1055],{"class":201},[167,7082,185],{"class":173},[167,7084,7085,7087,7090,7092],{"class":169,"line":188},[167,7086,192],{"class":191},[167,7088,7089],{"class":173}," { defineComponent } ",[167,7091,198],{"class":191},[167,7093,202],{"class":201},[167,7095,7096],{"class":169,"line":205},[167,7097,209],{"emptyLinePlaceholder":208},[167,7099,7100,7102,7104,7106],{"class":169,"line":160},[167,7101,569],{"class":191},[167,7103,6496],{"class":181},[167,7105,223],{"class":191},[167,7107,1905],{"class":173},[167,7109,7110,7112,7114],{"class":169,"line":238},[167,7111,6505],{"class":254},[167,7113,583],{"class":191},[167,7115,6510],{"class":219},[167,7117,7118,7120,7122],{"class":169,"line":243},[167,7119,6515],{"class":254},[167,7121,583],{"class":191},[167,7123,6520],{"class":219},[167,7125,7126,7128,7130],{"class":169,"line":261},[167,7127,6525],{"class":254},[167,7129,583],{"class":191},[167,7131,6510],{"class":219},[167,7133,7134,7136,7138],{"class":169,"line":273},[167,7135,6534],{"class":254},[167,7137,583],{"class":191},[167,7139,6510],{"class":219},[167,7141,7142],{"class":169,"line":279},[167,7143,276],{"class":173},[167,7145,7146],{"class":169,"line":289},[167,7147,209],{"emptyLinePlaceholder":208},[167,7149,7150,7152,7154,7157],{"class":169,"line":294},[167,7151,608],{"class":191},[167,7153,3991],{"class":191},[167,7155,7156],{"class":181}," defineComponent",[167,7158,372],{"class":173},[167,7160,7161,7163,7166],{"class":169,"line":304},[167,7162,4398],{"class":173},[167,7164,7165],{"class":201},"'ProductCardSsr'",[167,7167,393],{"class":173},[167,7169,7170],{"class":169,"line":313},[167,7171,209],{"emptyLinePlaceholder":208},[167,7173,7174,7177],{"class":169,"line":161},[167,7175,7176],{"class":181},"  data",[167,7178,763],{"class":173},[167,7180,7181,7183],{"class":169,"line":335},[167,7182,1937],{"class":191},[167,7184,1905],{"class":173},[167,7186,7187,7190,7192,7194,7196,7198,7200],{"class":169,"line":341},[167,7188,7189],{"class":173},"      product: ",[167,7191,6573],{"class":219},[167,7193,654],{"class":191},[167,7195,6496],{"class":181},[167,7197,659],{"class":191},[167,7199,6567],{"class":219},[167,7201,393],{"class":173},[167,7203,7204,7207],{"class":169,"line":489},[167,7205,7206],{"class":173},"      errorMessage: ",[167,7208,7209],{"class":201},"''\n",[167,7211,7212],{"class":169,"line":495},[167,7213,4049],{"class":173},[167,7215,7216],{"class":169,"line":501},[167,7217,398],{"class":173},[167,7219,7220],{"class":169,"line":512},[167,7221,209],{"emptyLinePlaceholder":208},[167,7223,7224],{"class":169,"line":781},[167,7225,4419],{"class":173},[167,7227,7228,7231,7233],{"class":169,"line":786},[167,7229,7230],{"class":191},"    async",[167,7232,6605],{"class":181},[167,7234,763],{"class":173},[167,7236,7237,7239,7241,7243,7245,7247,7249,7251],{"class":169,"line":2678},[167,7238,4435],{"class":191},[167,7240,6614],{"class":219},[167,7242,223],{"class":191},[167,7244,3009],{"class":191},[167,7246,6621],{"class":181},[167,7248,229],{"class":173},[167,7250,6626],{"class":201},[167,7252,235],{"class":173},[167,7254,7255],{"class":169,"line":2692},[167,7256,209],{"emptyLinePlaceholder":208},[167,7258,7259,7262,7264,7266],{"class":169,"line":3575},[167,7260,7261],{"class":191},"      if",[167,7263,2526],{"class":173},[167,7265,6641],{"class":191},[167,7267,6644],{"class":173},[167,7269,7270,7273,7275,7277,7279,7281],{"class":169,"line":5028},[167,7271,7272],{"class":191},"        throw",[167,7274,4224],{"class":191},[167,7276,6654],{"class":181},[167,7278,229],{"class":173},[167,7280,6659],{"class":201},[167,7282,235],{"class":173},[167,7284,7285],{"class":169,"line":5037},[167,7286,7287],{"class":173},"      }\n",[167,7289,7290],{"class":169,"line":5046},[167,7291,209],{"emptyLinePlaceholder":208},[167,7293,7294,7296,7299,7301,7303,7305,7307,7309,7311,7313],{"class":169,"line":6756},[167,7295,741],{"class":219},[167,7297,7298],{"class":173},".product ",[167,7300,267],{"class":191},[167,7302,2526],{"class":173},[167,7304,2927],{"class":191},[167,7306,6683],{"class":173},[167,7308,6686],{"class":181},[167,7310,6689],{"class":173},[167,7312,6692],{"class":191},[167,7314,6695],{"class":181},[167,7316,7317],{"class":169,"line":6778},[167,7318,4049],{"class":173},[167,7320,7321],{"class":169,"line":6783},[167,7322,398],{"class":173},[167,7324,7325],{"class":169,"line":6788},[167,7326,209],{"emptyLinePlaceholder":208},[167,7328,7329,7332,7335],{"class":169,"line":6793},[167,7330,7331],{"class":191},"  async",[167,7333,7334],{"class":181}," serverPrefetch",[167,7336,763],{"class":173},[167,7338,7339,7342],{"class":169,"line":6809},[167,7340,7341],{"class":191},"    try",[167,7343,1905],{"class":173},[167,7345,7346,7349,7352,7354,7357],{"class":169,"line":6824},[167,7347,7348],{"class":191},"      await",[167,7350,7351],{"class":219}," this",[167,7353,1679],{"class":173},[167,7355,7356],{"class":181},"fetchProduct",[167,7358,2917],{"class":173},[167,7360,7361,7364,7366],{"class":169,"line":6829},[167,7362,7363],{"class":173},"    } ",[167,7365,6742],{"class":191},[167,7367,6745],{"class":173},[167,7369,7370,7372,7375],{"class":169,"line":6836},[167,7371,741],{"class":219},[167,7373,7374],{"class":173},".errorMessage ",[167,7376,6753],{"class":191},[167,7378,7379,7382,7384,7386,7388,7390,7392],{"class":169,"line":6845},[167,7380,7381],{"class":173},"        error ",[167,7383,6762],{"class":191},[167,7385,6654],{"class":181},[167,7387,6767],{"class":191},[167,7389,6770],{"class":173},[167,7391,583],{"class":191},[167,7393,6775],{"class":201},[167,7395,7396],{"class":169,"line":6854},[167,7397,4049],{"class":173},[167,7399,7400],{"class":169,"line":6861},[167,7401,398],{"class":173},[167,7403,7404],{"class":169,"line":6879},[167,7405,209],{"emptyLinePlaceholder":208},[167,7407,7408,7410,7413],{"class":169,"line":6884},[167,7409,7331],{"class":191},[167,7411,7412],{"class":181}," mounted",[167,7414,763],{"class":173},[167,7416,7417,7420,7422,7424,7426,7428,7430,7433],{"class":169,"line":6889},[167,7418,7419],{"class":191},"    if",[167,7421,2526],{"class":173},[167,7423,4927],{"class":219},[167,7425,7298],{"class":173},[167,7427,4264],{"class":191},[167,7429,7351],{"class":219},[167,7431,7432],{"class":173},".errorMessage) ",[167,7434,2556],{"class":191},[167,7436,7437],{"class":169,"line":6898},[167,7438,209],{"emptyLinePlaceholder":208},[167,7440,7441,7443],{"class":169,"line":6903},[167,7442,7341],{"class":191},[167,7444,1905],{"class":173},[167,7446,7447,7449,7451,7453,7455],{"class":169,"line":6912},[167,7448,7348],{"class":191},[167,7450,7351],{"class":219},[167,7452,1679],{"class":173},[167,7454,7356],{"class":181},[167,7456,2917],{"class":173},[167,7458,7459,7461,7463],{"class":169,"line":6928},[167,7460,7363],{"class":173},[167,7462,6742],{"class":191},[167,7464,6745],{"class":173},[167,7466,7467,7469,7471],{"class":169,"line":6949},[167,7468,741],{"class":219},[167,7470,7374],{"class":173},[167,7472,6753],{"class":191},[167,7474,7475,7477,7479,7481,7483,7485,7487],{"class":169,"line":6954},[167,7476,7381],{"class":173},[167,7478,6762],{"class":191},[167,7480,6654],{"class":181},[167,7482,6767],{"class":191},[167,7484,6770],{"class":173},[167,7486,583],{"class":191},[167,7488,6876],{"class":201},[167,7490,7491],{"class":169,"line":6975},[167,7492,4049],{"class":173},[167,7494,7495],{"class":169,"line":6989},[167,7496,3492],{"class":173},[167,7498,7499],{"class":169,"line":7003},[167,7500,403],{"class":173},[167,7502,7503,7505,7507],{"class":169,"line":7017},[167,7504,282],{"class":173},[167,7506,178],{"class":177},[167,7508,185],{"class":173},[167,7510,7511],{"class":169,"line":7026},[167,7512,209],{"emptyLinePlaceholder":208},[167,7514,7515,7517,7519],{"class":169,"line":7031},[167,7516,174],{"class":173},[167,7518,299],{"class":177},[167,7520,185],{"class":173},[167,7522,7523,7525,7527,7529,7531,7533],{"class":169,"line":7048},[167,7524,307],{"class":173},[167,7526,3696],{"class":177},[167,7528,1245],{"class":181},[167,7530,267],{"class":173},[167,7532,6923],{"class":201},[167,7534,185],{"class":173},[167,7536,7537,7539,7541,7543,7545,7547,7549,7551],{"class":169,"line":7057},[167,7538,1257],{"class":173},[167,7540,15],{"class":177},[167,7542,5694],{"class":181},[167,7544,267],{"class":173},[167,7546,6939],{"class":201},[167,7548,6942],{"class":173},[167,7550,15],{"class":177},[167,7552,185],{"class":173},[167,7554,7556],{"class":169,"line":7555},58,[167,7557,209],{"emptyLinePlaceholder":208},[167,7559,7561,7563,7565,7567,7569,7571,7573,7575],{"class":169,"line":7560},59,[167,7562,1257],{"class":173},[167,7564,299],{"class":177},[167,7566,6961],{"class":191},[167,7568,267],{"class":173},[167,7570,5080],{"class":201},[167,7572,6968],{"class":173},[167,7574,5080],{"class":201},[167,7576,185],{"class":173},[167,7578,7580,7582,7584,7586,7588],{"class":169,"line":7579},60,[167,7581,1268],{"class":173},[167,7583,11],{"class":177},[167,7585,6982],{"class":173},[167,7587,11],{"class":177},[167,7589,185],{"class":173},[167,7591,7593,7595,7597,7599,7601],{"class":169,"line":7592},61,[167,7594,1268],{"class":173},[167,7596,15],{"class":177},[167,7598,6996],{"class":173},[167,7600,15],{"class":177},[167,7602,185],{"class":173},[167,7604,7606,7608,7610,7612,7614],{"class":169,"line":7605},62,[167,7607,1268],{"class":173},[167,7609,15],{"class":177},[167,7611,7010],{"class":173},[167,7613,15],{"class":177},[167,7615,185],{"class":173},[167,7617,7619,7621,7623],{"class":169,"line":7618},63,[167,7620,1292],{"class":173},[167,7622,299],{"class":177},[167,7624,185],{"class":173},[167,7626,7628],{"class":169,"line":7627},64,[167,7629,209],{"emptyLinePlaceholder":208},[167,7631,7633,7635,7637,7639,7641,7643],{"class":169,"line":7632},65,[167,7634,1257],{"class":173},[167,7636,15],{"class":177},[167,7638,7038],{"class":181},[167,7640,7041],{"class":173},[167,7642,15],{"class":177},[167,7644,185],{"class":173},[167,7646,7648,7650,7652],{"class":169,"line":7647},66,[167,7649,504],{"class":173},[167,7651,3696],{"class":177},[167,7653,185],{"class":173},[167,7655,7657,7659,7661],{"class":169,"line":7656},67,[167,7658,282],{"class":173},[167,7660,299],{"class":177},[167,7662,185],{"class":173},[15,7664,7665,7666,7668],{},"Este patrón permite que el servidor entregue el contenido resuelto en la primera carga. Si el componente se renderiza posteriormente en una navegación cliente, ",[87,7667,6400],{}," actúa como fallback sin duplicar la petición.",[15,7670,7671,7672,7674],{},"Esta versión mantiene la misma intención: resolver los datos antes del render SSR y usar ",[87,7673,6393],{}," como respaldo en escenarios donde no hay estado previo.",[22,7676,7678],{"id":7677},"resumen","Resumen",[15,7680,7681,7683],{},[87,7682,6218],{}," permite adelantar datos críticos al render del servidor y generar HTML útil desde la primera respuesta. Su valor está en mejorar el primer render, no en reemplazar toda la estrategia de fetching.",[15,7685,7686],{},"En Vue SSR “manual”, es una herramienta precisa y potente. En Nuxt, suele ser preferible usar utilidades de más alto nivel. En ambos casos, la idea clave es la misma: el contenido importante debe estar listo antes de renderizar la página inicial.",[924,7688,7689],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":163,"searchDepth":188,"depth":188,"links":7691},[7692,7693,7694,7695,7696,7702,7703],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":7697},[7698,7699,7700,7701],{"id":6384,"depth":205,"text":6385},{"id":6407,"depth":205,"text":6408},{"id":6427,"depth":205,"text":6428},{"id":6439,"depth":205,"text":6440},{"id":6452,"depth":188,"text":6453},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1774051488\u002Fvue-lifecycle-ssr-serverprefetch_averlr.png","Ilustración de un servidor entregando HTML con datos ya resueltos, mientras un cliente hidrata sin necesidad de fetch adicional.","2026-03-21","Cómo usar serverPrefetch y onServerPrefetch para cargar datos antes del render SSR, evitar HTML incompleto y coordinar el primer render del servidor con la hidratación del cliente.",{"updatedAt":7709,"readingTime":273,"coverCaption":7710,"author":946,"keywords":7711},"2026-03-20T20:00:00-05:00","Con `serverPrefetch`, el servidor puede entregar HTML ya completo, mejorando la experiencia y el SEO desde el primer render.",[3258,6218,6708,978,7712],"hidratación","\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es",[7715],{"headline":6209,"author":7716,"datePublished":7709,"@type":961},{"name":946,"@type":959},{"title":6209,"description":7707},"vue-lifecycle-hooks","Serie práctica para dominar cada hook del ciclo de vida de Vue, desde los básicos hasta los avanzados.","Ciclos de vida en Vue","blog\u002Fvue-lifecycle-ssr-serverprefetch.es",[7723,7726,7727,7728,7729],{"tag":7724,"color":7725},"Ciclo de Vida","#FF6B6B",{"tag":978,"color":979},{"tag":953,"color":971},{"tag":1625,"color":1639},{"tag":7730,"color":7731},"Avanzado","#F54927","gpVQi88PJ9GPzNJNjmGEweIYhWKcd-KIwq-VxiZMkTQ",{"id":7734,"title":7735,"body":7736,"cover":9149,"coverAlt":9150,"date":9151,"description":9152,"draft":940,"extension":941,"lab":942,"locale":943,"meta":9153,"navigation":208,"path":9157,"schemaOrg":9158,"seo":9161,"series":7718,"seriesDescription":7719,"seriesOrder":273,"seriesTitle":7720,"slug":942,"stem":9162,"tags":9163,"__hash__":9173},"blog\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es.md","Ciclos de vida en Vue: depuración del render (renderTracked, renderTriggered)",{"type":8,"value":7737,"toc":9130},[7738,7748,7751,7759,7762,7770,7772,7775,7793,7801,7803,7809,7812,7830,7833,7873,7876,7891,7894,7896,7899,7902,7919,7922,7924,7927,7930,7954,7957,7959,7963,7970,7974,7980,7984,7987,7991,7994,7998,8002,8008,8012,8017,8021,8024,8028,8565,9084,9087,9098,9100,9107,9110,9123,9128],[11,7739,7741,7742,1025,7745,6219],{"id":7740},"ciclos-de-vida-en-vue-depuración-del-render-rendertracked-rendertriggered","Ciclos de vida en Vue: depuración del render (",[87,7743,7744],{},"renderTracked",[87,7746,7747],{},"renderTriggered",[15,7749,7750],{},"Hay bugs que no están en la lógica de negocio ni en una API externa. Están en otro nivel: un componente que se vuelve a renderizar demasiadas veces, una lista que recalcula de más o una vista que depende de un estado reactivo que ni siquiera sabías que estaba leyendo.",[15,7752,7753,7754,1028,7756,7758],{},"Este tipo de problema suele ser difícil de detectar porque Vue abstrae muy bien el sistema reactivo. Actualiza cuando corresponde y, desde fuera, parece magia. Precisamente por eso existen ",[87,7755,7744],{},[87,7757,7747],{},": para abrir esa “caja negra” y entender qué está ocurriendo dentro del ciclo de render.",[15,7760,7761],{},"No son hooks para lógica de aplicación. Son herramientas de diagnóstico. Cuando un componente se actualiza “sin razón aparente”, ayudan a responder dos preguntas clave:",[33,7763,7764,7767],{},[36,7765,7766],{},"¿Qué dependencias reactivas se registraron durante el render?",[36,7768,7769],{},"¿Qué cambio concreto disparó el siguiente render?",[22,7771,6231],{"id":6230},[15,7773,7774],{},"A medida que una interfaz crece, el coste de renderizar “un poco de más” deja de ser invisible. Empiezan a aparecer síntomas claros:",[33,7776,7777,7780,7783,7786],{},[36,7778,7779],{},"Inputs que se sienten lentos.",[36,7781,7782],{},"Tablas que se recalculan o reordenan innecesariamente.",[36,7784,7785],{},"Componentes hijos que se actualizan por cambios irrelevantes.",[36,7787,7788,1028,7790,7792],{},[87,7789,1661],{},[87,7791,1665],{}," que parecen correctos, pero participan en renders excesivos.",[15,7794,7795,7796,1028,7798,7800],{},"En estos casos, leer únicamente el template no es suficiente. Necesitas entender la relación entre el render y el sistema reactivo. Aquí es donde ",[87,7797,7744],{},[87,7799,7747],{}," aportan valor: muestran qué dependencias se registraron y qué mutaciones provocaron nuevas actualizaciones.",[22,7802,6257],{"id":6256},[15,7804,7805,7806,7808],{},"Vue registra dependencias reactivas mientras renderiza un componente. Si durante ese proceso el template, un ",[87,7807,1661],{}," o cualquier expresión reactiva accede a una propiedad, Vue la asocia al efecto de render.",[15,7810,7811],{},"Los hooks de depuración permiten observar este proceso:",[33,7813,7814,7822],{},[36,7815,7816,6262,7818,7821],{},[87,7817,7744],{},[87,7819,7820],{},"onRenderTracked()"," (Composition API) se ejecutan cuando una dependencia se registra durante el render.",[36,7823,7824,6262,7826,7829],{},[87,7825,7747],{},[87,7827,7828],{},"onRenderTriggered()"," (Composition API) se ejecutan cuando una de esas dependencias cambia y provoca un nuevo render.",[15,7831,7832],{},"Ambos reciben un objeto de depuración con información como:",[33,7834,7835,7841,7847,7864],{},[36,7836,7837,7840],{},[87,7838,7839],{},"target",": el objeto reactivo implicado.",[36,7842,7843,7846],{},[87,7844,7845],{},"key",": la propiedad accedida o modificada.",[36,7848,7849,7851,7852,1025,7854,1025,7857,1025,7860,7863],{},[87,7850,569],{},": el tipo de operación (",[87,7853,4233],{},[87,7855,7856],{},"set",[87,7858,7859],{},"add",[87,7861,7862],{},"delete",", etc.).",[36,7865,7866,1028,7869,7872],{},[87,7867,7868],{},"newValue",[87,7870,7871],{},"oldValue",", cuando aplica.",[15,7874,7875],{},"Dos matices importantes:",[33,7877,7878,7881],{},[36,7879,7880],{},"Son hooks pensados para desarrollo. No deben formar parte de la lógica de negocio.",[36,7882,7883,7884,90,7887,7890],{},"Su uso típico es con ",[87,7885,7886],{},"console.log()",[87,7888,7889],{},"debugger",", no mutando estado reactivo.",[15,7892,7893],{},"Intentar integrarlos en la lógica de la aplicación suele generar más problemas de los que resuelve.",[22,7895,6322],{"id":6321},[15,7897,7898],{},"Estos hooks tienen sentido cuando necesitas entender por qué un componente renderiza (o re-renderiza).",[15,7900,7901],{},"Casos comunes:",[33,7903,7904,7907,7910,7913],{},[36,7905,7906],{},"Un componente cambia de forma inesperada al modificar un estado aparentemente no relacionado.",[36,7908,7909],{},"Una vista compleja se actualiza demasiadas veces.",[36,7911,7912],{},"Estás optimizando rendimiento y sospechas dependencias innecesarias.",[36,7914,7915,7916,7918],{},"Un ",[87,7917,1661],{}," aparentemente simple provoca renders amplios.",[15,7920,7921],{},"Regla práctica: si la pregunta es “¿por qué este componente se está renderizando?”, estos hooks encajan perfectamente.",[22,7923,6349],{"id":6348},[15,7925,7926],{},"No son una herramienta permanente ni sustituyen una arquitectura clara.",[15,7928,7929],{},"Evítalos cuando:",[33,7931,7932,7943,7948,7951],{},[36,7933,7934,7935,1025,7937,1025,7939,90,7941,1679],{},"El problema se entiende mejor revisando ",[87,7936,3300],{},[87,7938,3307],{},[87,7940,1661],{},[87,7942,1665],{},[36,7944,7945,7946,4270],{},"Solo necesitas reaccionar a cambios específicos (usa ",[87,7947,1665],{},[36,7949,7950],{},"Pretendes almacenar trazas en estado reactivo del mismo componente.",[36,7952,7953],{},"Quieres usarlos como telemetría en producción.",[15,7955,7956],{},"También evita dejarlos en el código una vez terminado el debugging: generan ruido innecesario.",[22,7958,3085],{"id":3084},[3087,7960,7962],{"id":7961},"_1-usarlos-para-lógica-de-negocio","1. Usarlos para lógica de negocio",[15,7964,7965,7966,90,7968,1679],{},"No están diseñados para disparar efectos funcionales. Si necesitas reaccionar a datos, usa ",[87,7967,1665],{},[87,7969,1661],{},[3087,7971,7973],{"id":7972},"_2-mutar-estado-dentro-del-hook","2. Mutar estado dentro del hook",[15,7975,7976,7977,7979],{},"Guardar eventos en un ",[87,7978,2085],{}," puede introducir renders adicionales y contaminar la depuración.",[3087,7981,7983],{"id":7982},"_3-culpar-a-vue-en-lugar-del-alcance-reactivo","3. Culpar a Vue en lugar del alcance reactivo",[15,7985,7986],{},"Si el template accede a un objeto grande, Vue hará lo correcto: suscribirse a todo lo que se use.",[3087,7988,7990],{"id":7989},"_4-asumir-comportamiento-estable-en-producción","4. Asumir comportamiento estable en producción",[15,7992,7993],{},"Son herramientas de debugging, no API para comportamiento funcional.",[22,7995,7997],{"id":7996},"ejemplos-prácticos","Ejemplos prácticos",[3087,7999,8001],{"id":8000},"detectar-dependencias-accidentales","Detectar dependencias accidentales",[15,8003,8004,8005,8007],{},"Una tabla puede estar leyendo más estado del necesario (filtros, flags, metadatos). ",[87,8006,7744],{}," permite verlo claramente.",[3087,8009,8011],{"id":8010},"identificar-qué-dispara-un-render","Identificar qué dispara un render",[15,8013,8014,8016],{},[87,8015,7747],{}," muestra la clave exacta que provocó la actualización, eliminando suposiciones.",[3087,8018,8020],{"id":8019},"optimizar-componentes-conectados-a-stores","Optimizar componentes conectados a stores",[15,8022,8023],{},"Permite validar si el componente depende solo de lo necesario o si está sobre-suscrito a estado global.",[22,8025,8027],{"id":8026},"ejemplo-completo","Ejemplo completo",[154,8029,8031],{"className":156,"code":8030,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, onRenderTracked, onRenderTriggered, reactive, ref } from 'vue'\n\nconst filters = reactive({\n  search: '',\n  showOnlyOpen: false\n})\n\nconst ui = reactive({\n  selectedId: 1,\n  panelOpen: true\n})\n\nconst tasks = ref([\n  { id: 1, title: 'Revisar PR', done: false, owner: 'Ana' },\n  { id: 2, title: 'Actualizar dependencias', done: true, owner: 'Luis' },\n  { id: 3, title: 'Documentar composable', done: false, owner: 'Ana' }\n])\n\nconst visibleTasks = computed(() => {\n  return tasks.value.filter(task => {\n    const matchesSearch = task.title\n      .toLowerCase()\n      .includes(filters.search.toLowerCase())\n\n    const matchesStatus = filters.showOnlyOpen ? !task.done : true\n\n    return matchesSearch && matchesStatus\n  })\n})\n\nonRenderTracked((event) => {\n  console.log('[renderTracked]', {\n    type: event.type,\n    key: String(event.key),\n    target: event.target\n  })\n})\n\nonRenderTriggered((event) => {\n  console.log('[renderTriggered]', {\n    type: event.type,\n    key: String(event.key),\n    oldValue: event.oldValue,\n    newValue: event.newValue\n  })\n})\n\nfunction toggleTask(taskId: number) {\n  const task = tasks.value.find(item => item.id === taskId)\n\n  if (!task) return\n\n  task.done = !task.done\n}\n\u003C\u002Fscript>\n",[87,8032,8033,8049,8060,8064,8077,8086,8094,8098,8102,8115,8124,8131,8135,8139,8151,8175,8197,8219,8223,8227,8244,8262,8275,8284,8298,8302,8326,8330,8343,8348,8352,8356,8371,8384,8389,8399,8404,8408,8412,8416,8431,8444,8448,8456,8461,8466,8470,8474,8478,8496,8520,8524,8537,8541,8553,8557],{"__ignoreMap":163},[167,8034,8035,8037,8039,8041,8043,8045,8047],{"class":169,"line":170},[167,8036,174],{"class":173},[167,8038,178],{"class":177},[167,8040,182],{"class":181},[167,8042,1050],{"class":181},[167,8044,267],{"class":173},[167,8046,1055],{"class":201},[167,8048,185],{"class":173},[167,8050,8051,8053,8056,8058],{"class":169,"line":188},[167,8052,192],{"class":191},[167,8054,8055],{"class":173}," { computed, onRenderTracked, onRenderTriggered, reactive, ref } ",[167,8057,198],{"class":191},[167,8059,202],{"class":201},[167,8061,8062],{"class":169,"line":205},[167,8063,209],{"emptyLinePlaceholder":208},[167,8065,8066,8068,8071,8073,8075],{"class":169,"line":160},[167,8067,216],{"class":191},[167,8069,8070],{"class":219}," filters",[167,8072,223],{"class":191},[167,8074,846],{"class":181},[167,8076,372],{"class":173},[167,8078,8079,8082,8084],{"class":169,"line":238},[167,8080,8081],{"class":173},"  search: ",[167,8083,2184],{"class":201},[167,8085,393],{"class":173},[167,8087,8088,8091],{"class":169,"line":243},[167,8089,8090],{"class":173},"  showOnlyOpen: ",[167,8092,8093],{"class":219},"false\n",[167,8095,8096],{"class":169,"line":261},[167,8097,403],{"class":173},[167,8099,8100],{"class":169,"line":273},[167,8101,209],{"emptyLinePlaceholder":208},[167,8103,8104,8106,8109,8111,8113],{"class":169,"line":279},[167,8105,216],{"class":191},[167,8107,8108],{"class":219}," ui",[167,8110,223],{"class":191},[167,8112,846],{"class":181},[167,8114,372],{"class":173},[167,8116,8117,8120,8122],{"class":169,"line":289},[167,8118,8119],{"class":173},"  selectedId: ",[167,8121,1835],{"class":219},[167,8123,393],{"class":173},[167,8125,8126,8129],{"class":169,"line":294},[167,8127,8128],{"class":173},"  panelOpen: ",[167,8130,3637],{"class":219},[167,8132,8133],{"class":169,"line":304},[167,8134,403],{"class":173},[167,8136,8137],{"class":169,"line":313},[167,8138,209],{"emptyLinePlaceholder":208},[167,8140,8141,8143,8145,8147,8149],{"class":169,"line":161},[167,8142,216],{"class":191},[167,8144,3368],{"class":219},[167,8146,223],{"class":191},[167,8148,226],{"class":181},[167,8150,1827],{"class":173},[167,8152,8153,8155,8157,8159,8162,8165,8167,8170,8173],{"class":169,"line":335},[167,8154,1832],{"class":173},[167,8156,1835],{"class":219},[167,8158,3383],{"class":173},[167,8160,8161],{"class":201},"'Revisar PR'",[167,8163,8164],{"class":173},", done: ",[167,8166,3392],{"class":219},[167,8168,8169],{"class":173},", owner: ",[167,8171,8172],{"class":201},"'Ana'",[167,8174,1856],{"class":173},[167,8176,8177,8179,8181,8183,8186,8188,8190,8192,8195],{"class":169,"line":341},[167,8178,1832],{"class":173},[167,8180,1853],{"class":219},[167,8182,3383],{"class":173},[167,8184,8185],{"class":201},"'Actualizar dependencias'",[167,8187,8164],{"class":173},[167,8189,390],{"class":219},[167,8191,8169],{"class":173},[167,8193,8194],{"class":201},"'Luis'",[167,8196,1856],{"class":173},[167,8198,8199,8201,8204,8206,8209,8211,8213,8215,8217],{"class":169,"line":489},[167,8200,1832],{"class":173},[167,8202,8203],{"class":219},"3",[167,8205,3383],{"class":173},[167,8207,8208],{"class":201},"'Documentar composable'",[167,8210,8164],{"class":173},[167,8212,3392],{"class":219},[167,8214,8169],{"class":173},[167,8216,8172],{"class":201},[167,8218,599],{"class":173},[167,8220,8221],{"class":169,"line":495},[167,8222,429],{"class":173},[167,8224,8225],{"class":169,"line":501},[167,8226,209],{"emptyLinePlaceholder":208},[167,8228,8229,8231,8234,8236,8238,8240,8242],{"class":169,"line":512},[167,8230,216],{"class":191},[167,8232,8233],{"class":219}," visibleTasks",[167,8235,223],{"class":191},[167,8237,1898],{"class":181},[167,8239,1493],{"class":173},[167,8241,639],{"class":191},[167,8243,1905],{"class":173},[167,8245,8246,8248,8250,8253,8255,8257,8260],{"class":169,"line":781},[167,8247,1539],{"class":191},[167,8249,3451],{"class":173},[167,8251,8252],{"class":181},"filter",[167,8254,229],{"class":173},[167,8256,5075],{"class":254},[167,8258,8259],{"class":191}," =>",[167,8261,1905],{"class":173},[167,8263,8264,8267,8270,8272],{"class":169,"line":786},[167,8265,8266],{"class":191},"    const",[167,8268,8269],{"class":219}," matchesSearch",[167,8271,223],{"class":191},[167,8273,8274],{"class":173}," task.title\n",[167,8276,8277,8280,8282],{"class":169,"line":2678},[167,8278,8279],{"class":173},"      .",[167,8281,2506],{"class":181},[167,8283,2917],{"class":173},[167,8285,8286,8288,8291,8294,8296],{"class":169,"line":2692},[167,8287,8279],{"class":173},[167,8289,8290],{"class":181},"includes",[167,8292,8293],{"class":173},"(filters.search.",[167,8295,2506],{"class":181},[167,8297,2509],{"class":173},[167,8299,8300],{"class":169,"line":3575},[167,8301,209],{"emptyLinePlaceholder":208},[167,8303,8304,8306,8309,8311,8314,8317,8319,8322,8324],{"class":169,"line":5028},[167,8305,8266],{"class":191},[167,8307,8308],{"class":219}," matchesStatus",[167,8310,223],{"class":191},[167,8312,8313],{"class":173}," filters.showOnlyOpen ",[167,8315,8316],{"class":191},"?",[167,8318,5625],{"class":191},[167,8320,8321],{"class":173},"task.done ",[167,8323,583],{"class":191},[167,8325,3487],{"class":219},[167,8327,8328],{"class":169,"line":5037},[167,8329,209],{"emptyLinePlaceholder":208},[167,8331,8332,8334,8337,8340],{"class":169,"line":5046},[167,8333,1937],{"class":191},[167,8335,8336],{"class":173}," matchesSearch ",[167,8338,8339],{"class":191},"&&",[167,8341,8342],{"class":173}," matchesStatus\n",[167,8344,8345],{"class":169,"line":6756},[167,8346,8347],{"class":173},"  })\n",[167,8349,8350],{"class":169,"line":6778},[167,8351,403],{"class":173},[167,8353,8354],{"class":169,"line":6783},[167,8355,209],{"emptyLinePlaceholder":208},[167,8357,8358,8361,8363,8365,8367,8369],{"class":169,"line":6788},[167,8359,8360],{"class":181},"onRenderTracked",[167,8362,1918],{"class":173},[167,8364,4195],{"class":254},[167,8366,693],{"class":173},[167,8368,639],{"class":191},[167,8370,1905],{"class":173},[167,8372,8373,8375,8377,8379,8382],{"class":169,"line":6793},[167,8374,2608],{"class":173},[167,8376,2611],{"class":181},[167,8378,229],{"class":173},[167,8380,8381],{"class":201},"'[renderTracked]'",[167,8383,627],{"class":173},[167,8385,8386],{"class":169,"line":6809},[167,8387,8388],{"class":173},"    type: event.type,\n",[167,8390,8391,8394,8396],{"class":169,"line":6824},[167,8392,8393],{"class":173},"    key: ",[167,8395,4258],{"class":181},[167,8397,8398],{"class":173},"(event.key),\n",[167,8400,8401],{"class":169,"line":6829},[167,8402,8403],{"class":173},"    target: event.target\n",[167,8405,8406],{"class":169,"line":6836},[167,8407,8347],{"class":173},[167,8409,8410],{"class":169,"line":6845},[167,8411,403],{"class":173},[167,8413,8414],{"class":169,"line":6854},[167,8415,209],{"emptyLinePlaceholder":208},[167,8417,8418,8421,8423,8425,8427,8429],{"class":169,"line":6861},[167,8419,8420],{"class":181},"onRenderTriggered",[167,8422,1918],{"class":173},[167,8424,4195],{"class":254},[167,8426,693],{"class":173},[167,8428,639],{"class":191},[167,8430,1905],{"class":173},[167,8432,8433,8435,8437,8439,8442],{"class":169,"line":6879},[167,8434,2608],{"class":173},[167,8436,2611],{"class":181},[167,8438,229],{"class":173},[167,8440,8441],{"class":201},"'[renderTriggered]'",[167,8443,627],{"class":173},[167,8445,8446],{"class":169,"line":6884},[167,8447,8388],{"class":173},[167,8449,8450,8452,8454],{"class":169,"line":6889},[167,8451,8393],{"class":173},[167,8453,4258],{"class":181},[167,8455,8398],{"class":173},[167,8457,8458],{"class":169,"line":6898},[167,8459,8460],{"class":173},"    oldValue: event.oldValue,\n",[167,8462,8463],{"class":169,"line":6903},[167,8464,8465],{"class":173},"    newValue: event.newValue\n",[167,8467,8468],{"class":169,"line":6912},[167,8469,8347],{"class":173},[167,8471,8472],{"class":169,"line":6928},[167,8473,403],{"class":173},[167,8475,8476],{"class":169,"line":6949},[167,8477,209],{"emptyLinePlaceholder":208},[167,8479,8480,8482,8485,8487,8489,8491,8494],{"class":169,"line":6954},[167,8481,246],{"class":191},[167,8483,8484],{"class":181}," toggleTask",[167,8486,229],{"class":173},[167,8488,3433],{"class":254},[167,8490,583],{"class":191},[167,8492,8493],{"class":219}," number",[167,8495,258],{"class":173},[167,8497,8498,8500,8502,8504,8506,8508,8510,8512,8514,8516,8518],{"class":169,"line":6975},[167,8499,1443],{"class":191},[167,8501,3446],{"class":219},[167,8503,223],{"class":191},[167,8505,3451],{"class":173},[167,8507,3454],{"class":181},[167,8509,229],{"class":173},[167,8511,1926],{"class":254},[167,8513,8259],{"class":191},[167,8515,3465],{"class":173},[167,8517,2550],{"class":191},[167,8519,3470],{"class":173},[167,8521,8522],{"class":169,"line":6989},[167,8523,209],{"emptyLinePlaceholder":208},[167,8525,8526,8528,8530,8532,8535],{"class":169,"line":7003},[167,8527,2544],{"class":191},[167,8529,2526],{"class":173},[167,8531,6641],{"class":191},[167,8533,8534],{"class":173},"task) ",[167,8536,2556],{"class":191},[167,8538,8539],{"class":169,"line":7017},[167,8540,209],{"emptyLinePlaceholder":208},[167,8542,8543,8546,8548,8550],{"class":169,"line":7026},[167,8544,8545],{"class":173},"  task.done ",[167,8547,267],{"class":191},[167,8549,5625],{"class":191},[167,8551,8552],{"class":173},"task.done\n",[167,8554,8555],{"class":169,"line":7031},[167,8556,276],{"class":173},[167,8558,8559,8561,8563],{"class":169,"line":7048},[167,8560,282],{"class":173},[167,8562,178],{"class":177},[167,8564,185],{"class":173},[154,8566,8568],{"className":156,"code":8567,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: 'TaskRenderDebugger',\n\n  data() {\n    return {\n      filters: {\n        search: '',\n        showOnlyOpen: false\n      },\n      ui: {\n        selectedId: 1,\n        panelOpen: true\n      },\n      tasks: [\n        { id: 1, title: 'Revisar PR', done: false, owner: 'Ana' },\n        { id: 2, title: 'Actualizar dependencias', done: true, owner: 'Luis' },\n        { id: 3, title: 'Documentar composable', done: false, owner: 'Ana' }\n      ]\n    }\n  },\n\n  computed: {\n    visibleTasks() {\n      return this.tasks.filter(task => {\n        const matchesSearch = task.title\n          .toLowerCase()\n          .includes(this.filters.search.toLowerCase())\n\n        const matchesStatus = this.filters.showOnlyOpen ? !task.done : true\n\n        return matchesSearch && matchesStatus\n      })\n    }\n  },\n\n  renderTracked(event) {\n    console.log('[renderTracked]', {\n      type: event.type,\n      key: String(event.key),\n      target: event.target\n    })\n  },\n\n  renderTriggered(event) {\n    console.log('[renderTriggered]', {\n      type: event.type,\n      key: String(event.key),\n      oldValue: event.oldValue,\n      newValue: event.newValue\n    })\n  },\n\n  methods: {\n    toggleTask(taskId) {\n      const task = this.tasks.find(item => item.id === taskId)\n\n      if (!task) return\n\n      task.done = !task.done\n    }\n  }\n}\n\u003C\u002Fscript>\n",[87,8569,8570,8584,8592,8601,8605,8611,8617,8622,8631,8638,8643,8648,8657,8664,8668,8673,8694,8714,8734,8739,8743,8747,8751,8756,8763,8783,8794,8803,8820,8824,8847,8851,8862,8867,8871,8875,8879,8890,8903,8908,8917,8922,8927,8931,8935,8946,8958,8962,8970,8975,8980,8984,8988,8992,8996,9007,9033,9037,9049,9053,9064,9068,9072,9076],{"__ignoreMap":163},[167,8571,8572,8574,8576,8578,8580,8582],{"class":169,"line":170},[167,8573,174],{"class":173},[167,8575,178],{"class":177},[167,8577,1050],{"class":181},[167,8579,267],{"class":173},[167,8581,1055],{"class":201},[167,8583,185],{"class":173},[167,8585,8586,8588,8590],{"class":169,"line":188},[167,8587,608],{"class":191},[167,8589,3991],{"class":191},[167,8591,1905],{"class":173},[167,8593,8594,8596,8599],{"class":169,"line":205},[167,8595,4398],{"class":173},[167,8597,8598],{"class":201},"'TaskRenderDebugger'",[167,8600,393],{"class":173},[167,8602,8603],{"class":169,"line":160},[167,8604,209],{"emptyLinePlaceholder":208},[167,8606,8607,8609],{"class":169,"line":238},[167,8608,7176],{"class":181},[167,8610,763],{"class":173},[167,8612,8613,8615],{"class":169,"line":243},[167,8614,1937],{"class":191},[167,8616,1905],{"class":173},[167,8618,8619],{"class":169,"line":261},[167,8620,8621],{"class":173},"      filters: {\n",[167,8623,8624,8627,8629],{"class":169,"line":273},[167,8625,8626],{"class":173},"        search: ",[167,8628,2184],{"class":201},[167,8630,393],{"class":173},[167,8632,8633,8636],{"class":169,"line":279},[167,8634,8635],{"class":173},"        showOnlyOpen: ",[167,8637,8093],{"class":219},[167,8639,8640],{"class":169,"line":289},[167,8641,8642],{"class":173},"      },\n",[167,8644,8645],{"class":169,"line":294},[167,8646,8647],{"class":173},"      ui: {\n",[167,8649,8650,8653,8655],{"class":169,"line":304},[167,8651,8652],{"class":173},"        selectedId: ",[167,8654,1835],{"class":219},[167,8656,393],{"class":173},[167,8658,8659,8662],{"class":169,"line":313},[167,8660,8661],{"class":173},"        panelOpen: ",[167,8663,3637],{"class":219},[167,8665,8666],{"class":169,"line":161},[167,8667,8642],{"class":173},[167,8669,8670],{"class":169,"line":335},[167,8671,8672],{"class":173},"      tasks: [\n",[167,8674,8675,8678,8680,8682,8684,8686,8688,8690,8692],{"class":169,"line":341},[167,8676,8677],{"class":173},"        { id: ",[167,8679,1835],{"class":219},[167,8681,3383],{"class":173},[167,8683,8161],{"class":201},[167,8685,8164],{"class":173},[167,8687,3392],{"class":219},[167,8689,8169],{"class":173},[167,8691,8172],{"class":201},[167,8693,1856],{"class":173},[167,8695,8696,8698,8700,8702,8704,8706,8708,8710,8712],{"class":169,"line":489},[167,8697,8677],{"class":173},[167,8699,1853],{"class":219},[167,8701,3383],{"class":173},[167,8703,8185],{"class":201},[167,8705,8164],{"class":173},[167,8707,390],{"class":219},[167,8709,8169],{"class":173},[167,8711,8194],{"class":201},[167,8713,1856],{"class":173},[167,8715,8716,8718,8720,8722,8724,8726,8728,8730,8732],{"class":169,"line":495},[167,8717,8677],{"class":173},[167,8719,8203],{"class":219},[167,8721,3383],{"class":173},[167,8723,8208],{"class":201},[167,8725,8164],{"class":173},[167,8727,3392],{"class":219},[167,8729,8169],{"class":173},[167,8731,8172],{"class":201},[167,8733,599],{"class":173},[167,8735,8736],{"class":169,"line":501},[167,8737,8738],{"class":173},"      ]\n",[167,8740,8741],{"class":169,"line":512},[167,8742,4049],{"class":173},[167,8744,8745],{"class":169,"line":781},[167,8746,398],{"class":173},[167,8748,8749],{"class":169,"line":786},[167,8750,209],{"emptyLinePlaceholder":208},[167,8752,8753],{"class":169,"line":2678},[167,8754,8755],{"class":173},"  computed: {\n",[167,8757,8758,8761],{"class":169,"line":2692},[167,8759,8760],{"class":181},"    visibleTasks",[167,8762,763],{"class":173},[167,8764,8765,8768,8770,8773,8775,8777,8779,8781],{"class":169,"line":3575},[167,8766,8767],{"class":191},"      return",[167,8769,7351],{"class":219},[167,8771,8772],{"class":173},".tasks.",[167,8774,8252],{"class":181},[167,8776,229],{"class":173},[167,8778,5075],{"class":254},[167,8780,8259],{"class":191},[167,8782,1905],{"class":173},[167,8784,8785,8788,8790,8792],{"class":169,"line":5028},[167,8786,8787],{"class":191},"        const",[167,8789,8269],{"class":219},[167,8791,223],{"class":191},[167,8793,8274],{"class":173},[167,8795,8796,8799,8801],{"class":169,"line":5037},[167,8797,8798],{"class":173},"          .",[167,8800,2506],{"class":181},[167,8802,2917],{"class":173},[167,8804,8805,8807,8809,8811,8813,8816,8818],{"class":169,"line":5046},[167,8806,8798],{"class":173},[167,8808,8290],{"class":181},[167,8810,229],{"class":173},[167,8812,4927],{"class":219},[167,8814,8815],{"class":173},".filters.search.",[167,8817,2506],{"class":181},[167,8819,2509],{"class":173},[167,8821,8822],{"class":169,"line":6756},[167,8823,209],{"emptyLinePlaceholder":208},[167,8825,8826,8828,8830,8832,8834,8837,8839,8841,8843,8845],{"class":169,"line":6778},[167,8827,8787],{"class":191},[167,8829,8308],{"class":219},[167,8831,223],{"class":191},[167,8833,7351],{"class":219},[167,8835,8836],{"class":173},".filters.showOnlyOpen ",[167,8838,8316],{"class":191},[167,8840,5625],{"class":191},[167,8842,8321],{"class":173},[167,8844,583],{"class":191},[167,8846,3487],{"class":219},[167,8848,8849],{"class":169,"line":6783},[167,8850,209],{"emptyLinePlaceholder":208},[167,8852,8853,8856,8858,8860],{"class":169,"line":6788},[167,8854,8855],{"class":191},"        return",[167,8857,8336],{"class":173},[167,8859,8339],{"class":191},[167,8861,8342],{"class":173},[167,8863,8864],{"class":169,"line":6793},[167,8865,8866],{"class":173},"      })\n",[167,8868,8869],{"class":169,"line":6809},[167,8870,4049],{"class":173},[167,8872,8873],{"class":169,"line":6824},[167,8874,398],{"class":173},[167,8876,8877],{"class":169,"line":6829},[167,8878,209],{"emptyLinePlaceholder":208},[167,8880,8881,8884,8886,8888],{"class":169,"line":6836},[167,8882,8883],{"class":181},"  renderTracked",[167,8885,229],{"class":173},[167,8887,4195],{"class":254},[167,8889,258],{"class":173},[167,8891,8892,8895,8897,8899,8901],{"class":169,"line":6845},[167,8893,8894],{"class":173},"    console.",[167,8896,2611],{"class":181},[167,8898,229],{"class":173},[167,8900,8381],{"class":201},[167,8902,627],{"class":173},[167,8904,8905],{"class":169,"line":6854},[167,8906,8907],{"class":173},"      type: event.type,\n",[167,8909,8910,8913,8915],{"class":169,"line":6861},[167,8911,8912],{"class":173},"      key: ",[167,8914,4258],{"class":181},[167,8916,8398],{"class":173},[167,8918,8919],{"class":169,"line":6879},[167,8920,8921],{"class":173},"      target: event.target\n",[167,8923,8924],{"class":169,"line":6884},[167,8925,8926],{"class":173},"    })\n",[167,8928,8929],{"class":169,"line":6889},[167,8930,398],{"class":173},[167,8932,8933],{"class":169,"line":6898},[167,8934,209],{"emptyLinePlaceholder":208},[167,8936,8937,8940,8942,8944],{"class":169,"line":6903},[167,8938,8939],{"class":181},"  renderTriggered",[167,8941,229],{"class":173},[167,8943,4195],{"class":254},[167,8945,258],{"class":173},[167,8947,8948,8950,8952,8954,8956],{"class":169,"line":6912},[167,8949,8894],{"class":173},[167,8951,2611],{"class":181},[167,8953,229],{"class":173},[167,8955,8441],{"class":201},[167,8957,627],{"class":173},[167,8959,8960],{"class":169,"line":6928},[167,8961,8907],{"class":173},[167,8963,8964,8966,8968],{"class":169,"line":6949},[167,8965,8912],{"class":173},[167,8967,4258],{"class":181},[167,8969,8398],{"class":173},[167,8971,8972],{"class":169,"line":6954},[167,8973,8974],{"class":173},"      oldValue: event.oldValue,\n",[167,8976,8977],{"class":169,"line":6975},[167,8978,8979],{"class":173},"      newValue: event.newValue\n",[167,8981,8982],{"class":169,"line":6989},[167,8983,8926],{"class":173},[167,8985,8986],{"class":169,"line":7003},[167,8987,398],{"class":173},[167,8989,8990],{"class":169,"line":7017},[167,8991,209],{"emptyLinePlaceholder":208},[167,8993,8994],{"class":169,"line":7026},[167,8995,4419],{"class":173},[167,8997,8998,9001,9003,9005],{"class":169,"line":7031},[167,8999,9000],{"class":181},"    toggleTask",[167,9002,229],{"class":173},[167,9004,3433],{"class":254},[167,9006,258],{"class":173},[167,9008,9009,9011,9013,9015,9017,9019,9021,9023,9025,9027,9029,9031],{"class":169,"line":7048},[167,9010,4435],{"class":191},[167,9012,3446],{"class":219},[167,9014,223],{"class":191},[167,9016,7351],{"class":219},[167,9018,8772],{"class":173},[167,9020,3454],{"class":181},[167,9022,229],{"class":173},[167,9024,1926],{"class":254},[167,9026,8259],{"class":191},[167,9028,3465],{"class":173},[167,9030,2550],{"class":191},[167,9032,3470],{"class":173},[167,9034,9035],{"class":169,"line":7057},[167,9036,209],{"emptyLinePlaceholder":208},[167,9038,9039,9041,9043,9045,9047],{"class":169,"line":7555},[167,9040,7261],{"class":191},[167,9042,2526],{"class":173},[167,9044,6641],{"class":191},[167,9046,8534],{"class":173},[167,9048,2556],{"class":191},[167,9050,9051],{"class":169,"line":7560},[167,9052,209],{"emptyLinePlaceholder":208},[167,9054,9055,9058,9060,9062],{"class":169,"line":7579},[167,9056,9057],{"class":173},"      task.done ",[167,9059,267],{"class":191},[167,9061,5625],{"class":191},[167,9063,8552],{"class":173},[167,9065,9066],{"class":169,"line":7592},[167,9067,4049],{"class":173},[167,9069,9070],{"class":169,"line":7605},[167,9071,3492],{"class":173},[167,9073,9074],{"class":169,"line":7618},[167,9075,276],{"class":173},[167,9077,9078,9080,9082],{"class":169,"line":7627},[167,9079,282],{"class":173},[167,9081,178],{"class":177},[167,9083,185],{"class":173},[15,9085,9086],{},"Este ejemplo permite observar claramente:",[33,9088,9089,9092,9095],{},[36,9090,9091],{},"Qué dependencias se registran al renderizar.",[36,9093,9094],{},"Qué cambios provocan nuevas actualizaciones.",[36,9096,9097],{},"Cómo el alcance del componente afecta su reactividad.",[22,9099,7678],{"id":7677},[15,9101,9102,1028,9104,9106],{},[87,9103,7744],{},[87,9105,7747],{}," no son herramientas decorativas ni de observabilidad general. Son instrumentos de diagnóstico para entender el render desde dentro.",[15,9108,9109],{},"Bien utilizados, permiten:",[33,9111,9112,9115,9118],{},[36,9113,9114],{},"Detectar dependencias accidentales.",[36,9116,9117],{},"Reducir renders innecesarios.",[36,9119,9120,9121,1679],{},"Comprender mejor la relación entre template, estado reactivo y ",[87,9122,1661],{},[5367,9124,9125],{},[15,9126,9127],{},"Antes de optimizar a ciegas, observa qué dependencias se registran y qué cambios están disparando el render.",[924,9129,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":9131},[9132,9133,9134,9135,9136,9142,9147,9148],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":9137},[9138,9139,9140,9141],{"id":7961,"depth":205,"text":7962},{"id":7972,"depth":205,"text":7973},{"id":7982,"depth":205,"text":7983},{"id":7989,"depth":205,"text":7990},{"id":7996,"depth":188,"text":7997,"children":9143},[9144,9145,9146],{"id":8000,"depth":205,"text":8001},{"id":8010,"depth":205,"text":8011},{"id":8019,"depth":205,"text":8020},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773802976\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered_ekkgg1.png","Ilustración de depuración del render en Vue con renderTracked y renderTriggered","2026-03-18","Cómo usar renderTracked, renderTriggered, onRenderTracked y onRenderTriggered para entender qué dependencias entran en un render y qué cambios están forzando nuevas actualizaciones.",{"updatedAt":9154,"coverCaption":9155,"author":946,"keywords":9156},"2026-03-17T22:00:00-05:00","renderTracked y renderTriggered ayudan a ver qué dependencia entra al render y cuál lo vuelve a disparar.",[3258,7744,7747,8360,8420],"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[9159],{"headline":7735,"author":9160,"datePublished":9154,"@type":961},{"name":946,"@type":959},{"title":7735,"description":9152},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[9164,9165,9168,9171,9172],{"tag":7724,"color":7725},{"tag":9166,"color":9167},"Depuración","#C44569",{"tag":9169,"color":9170},"Renderizado","#E17055",{"tag":3269,"color":3270},{"tag":7730,"color":7731},"5mr-vMalD_jw1VlwSiz5cmZRVM9obP8ZlRFNu2rgR88",{"id":9175,"title":9176,"body":9177,"cover":11119,"coverAlt":11120,"date":11121,"description":11122,"draft":940,"extension":941,"lab":942,"locale":943,"meta":11123,"navigation":208,"path":11129,"schemaOrg":11130,"seo":11133,"series":7718,"seriesDescription":7719,"seriesOrder":261,"seriesTitle":7720,"slug":942,"stem":11134,"tags":11135,"__hash__":11142},"blog\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es.md","Ciclos de vida en Vue: manejo de errores con errorCaptured",{"type":8,"value":9178,"toc":11099},[9179,9186,9189,9195,9197,9200,9206,9208,9221,9224,9248,9251,9271,9274,9291,9299,9301,9306,9309,9323,9329,9331,9337,9339,9366,9371,9373,9377,9380,9383,9390,9396,9399,9403,9406,9409,9413,9419,9421,9425,9428,9432,9435,9439,9442,9444,10333,11079,11082,11087,11089,11094,11097],[11,9180,9182,9183],{"id":9181},"ciclos-de-vida-en-vue-manejo-de-errores-con-errorcaptured","Ciclos de vida en Vue: manejo de errores con ",[87,9184,9185],{},"errorCaptured",[15,9187,9188],{},"Los errores en la interfaz rara vez avisan. Un widget deja de renderizar, una dependencia de terceros lanza una excepción o una vista hija falla durante una actualización, y de pronto el usuario se queda con un bloque en blanco o una pantalla incompleta.",[15,9190,9191,9192,9194],{},"Ahí es donde ",[87,9193,9185],{}," cobra valor. No evita que ocurran errores, pero te permite contenerlos en el lugar adecuado, registrar contexto útil y ofrecer una salida digna sin comprometer toda la UI.",[22,9196,6231],{"id":6230},[15,9198,9199],{},"A medida que una aplicación crece, no todos los componentes tienen el mismo nivel de confianza. Hay piezas muy estables y otras más frágiles: integraciones con librerías externas, widgets complejos, paneles que dependen de datos cambiantes o componentes en evolución constante.",[15,9201,9202,9203,9205],{},"Si los fallos se propagan sin control, el impacto suele ser desproporcionado. Un error en una tarjeta secundaria puede terminar afectando toda una pantalla. ",[87,9204,9185],{}," permite establecer límites: este bloque puede fallar, pero el resto de la página debe seguir funcionando.",[22,9207,6257],{"id":6256},[15,9209,9210,9212,9213,9216,9217,9220],{},[87,9211,9185],{}," es un hook de la Options API, y ",[87,9214,9215],{},"onErrorCaptured()"," es su equivalente en Composition API. Ambos permiten interceptar errores que ocurren en ",[3933,9218,9219],{},"componentes descendientes"," del componente actual.",[15,9222,9223],{},"Esto incluye errores originados en partes habituales del flujo de Vue, como:",[33,9225,9226,9228,9231,9234,9239,9242,9245],{},[36,9227,9169],{},[36,9229,9230],{},"Event handlers",[36,9232,9233],{},"Hooks del ciclo de vida",[36,9235,9236],{},[87,9237,9238],{},"setup()",[36,9240,9241],{},"Watchers",[36,9243,9244],{},"Directivas personalizadas",[36,9246,9247],{},"Hooks de transición",[15,9249,9250],{},"El hook recibe tres argumentos:",[33,9252,9253,9259,9265],{},[36,9254,9255,9258],{},[87,9256,9257],{},"err",": el error capturado",[36,9260,9261,9264],{},[87,9262,9263],{},"instance",": la instancia del componente que lanzó el error",[36,9266,9267,9270],{},[87,9268,9269],{},"info",": una pista sobre el origen (por ejemplo, si ocurrió en render o en un evento)",[15,9272,9273],{},"Hay dos aspectos clave a tener en cuenta:",[33,9275,9276,9279],{},[36,9277,9278],{},"Solo captura errores de componentes hijos (y descendientes). No intercepta errores del mismo componente donde se declara.",[36,9280,9281,9282,9284,9285,9287,9288,1679],{},"Si devuelve ",[87,9283,3392],{},", detiene la propagación del error hacia otros hooks ",[87,9286,9185],{}," superiores y hacia ",[87,9289,9290],{},"app.config.errorHandler",[15,9292,9293,9294,9298],{},"En la práctica, funciona como un ",[9295,9296,9297],"em",{},"error boundary"," local. Lo habitual es usarlo para tres objetivos simultáneos: registrar el error, mostrar un fallback y evitar que una parte aislada de la interfaz derribe el resto.",[22,9300,6322],{"id":6321},[15,9302,9303,9305],{},[87,9304,9185],{}," encaja bien cuando necesitas aislar fallos en una zona concreta de la UI.",[15,9307,9308],{},"Casos típicos:",[33,9310,9311,9314,9317,9320],{},[36,9312,9313],{},"Un dashboard con widgets independientes donde una tarjeta puede fallar sin romper toda la vista.",[36,9315,9316],{},"Un editor, gráfico o componente de terceros que conviene encapsular detrás de un fallback.",[36,9318,9319],{},"Un área de administración donde ciertos módulos se cargan de forma condicional y no deberían comprometer la navegación principal.",[36,9321,9322],{},"Un layout con bloques reutilizables donde quieres centralizar logging y mostrar mensajes útiles al usuario.",[15,9324,9325,9326,9328],{},"Regla práctica: si un componente hijo puede fallar y quieres contener el impacto, ",[87,9327,9185],{}," es una buena solución.",[22,9330,6349],{"id":6348},[15,9332,9333,9334,9336],{},"No conviene usar ",[87,9335,9185],{}," como solución universal.",[15,9338,6355],{},[33,9340,9341,9353,9360,9363],{},[36,9342,9343,9344,1025,9347,1025,9350,4270],{},"El problema es un error esperado de negocio; en ese caso es mejor modelarlo como estado (",[87,9345,9346],{},"loading",[87,9348,9349],{},"empty",[87,9351,9352],{},"error",[36,9354,9355,9356,9359],{},"Solo necesitas manejar errores de una operación concreta; un ",[87,9357,9358],{},"try\u002Fcatch"," suele ser más claro.",[36,9361,9362],{},"Se utiliza para ocultar errores sin registrarlos ni corregir su causa.",[36,9364,9365],{},"La recuperación depende de reiniciar toda la vista; probablemente el boundary está mal ubicado.",[15,9367,9368,9370],{},[87,9369,9185],{}," no reemplaza una estrategia de manejo de errores: la complementa.",[22,9372,3085],{"id":3084},[3087,9374,9376],{"id":9375},"_1-esperar-que-capture-errores-del-mismo-componente","1. Esperar que capture errores del mismo componente",[15,9378,9379],{},"Este hook está diseñado para descendientes. Si el error ocurre en el mismo componente donde se declara, no será interceptado.",[15,9381,9382],{},"La solución es mover el boundary un nivel superior o encapsular la parte frágil en un componente hijo.",[3087,9384,9386,9387,9389],{"id":9385},"_2-devolver-false-siempre","2. Devolver ",[87,9388,3392],{}," siempre",[15,9391,9392,9393,9395],{},"Devolver ",[87,9394,3392],{}," detiene la propagación. Puede ser útil si el error ya fue manejado, pero hacerlo sin criterio puede impedir el monitoreo global.",[15,9397,9398],{},"Devuélvelo solo cuando realmente hayas absorbido el error y registrado lo necesario.",[3087,9400,9402],{"id":9401},"_3-mostrar-fallback-sin-ofrecer-salida","3. Mostrar fallback sin ofrecer salida",[15,9404,9405],{},"Un mensaje como “algo salió mal” no es suficiente si el usuario no puede actuar.",[15,9407,9408],{},"Siempre que tenga sentido, añade opciones como reintentar, recargar o volver a un estado válido.",[3087,9410,9412],{"id":9411},"_4-usarlo-para-ocultar-código-frágil","4. Usarlo para ocultar código frágil",[15,9414,9415,9416,9418],{},"Si un componente falla con frecuencia, ",[87,9417,9185],{}," no debería convertirse en una solución permanente. Sirve para mitigar impacto, no para normalizar problemas estructurales.",[22,9420,7997],{"id":7996},[3087,9422,9424],{"id":9423},"dashboard-con-tarjetas-independientes","Dashboard con tarjetas independientes",[15,9426,9427],{},"Si una tarjeta falla, puedes reemplazar solo ese bloque y mantener funcional el resto del tablero.",[3087,9429,9431],{"id":9430},"componentes-de-terceros","Componentes de terceros",[15,9433,9434],{},"Algunas librerías no fallan de forma controlada. Encapsularlas en un boundary permite evitar que rompan toda la vista.",[3087,9436,9438],{"id":9437},"módulos-opcionales","Módulos opcionales",[15,9440,9441],{},"En paneles complejos, ciertos módulos no son críticos. Es preferible degradar esa sección sin afectar la navegación principal.",[22,9443,8027],{"id":8026},[154,9445,9447],{"className":156,"code":9446,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, defineComponent, h, onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref(false)\nconst errorMessage = ref('')\nconst errorSource = ref('')\nconst retryKey = ref(0)\n\nconst RiskyStatsPanel = defineComponent({\n  name: 'RiskyStatsPanel',\n  setup() {\n    const shouldFail = ref(false)\n\n    const stats = computed(() => {\n      if (shouldFail.value) {\n        throw new Error('No fue posible calcular las métricas del tablero.')\n      }\n\n      return [\n        { label: 'Pendientes', value: 14 },\n        { label: 'Completadas', value: 29 },\n        { label: 'Bloqueadas', value: 3 }\n      ]\n    })\n\n    return () =>\n      h('section', { class: 'stats-panel' }, [\n        h('h3', 'Resumen de tareas'),\n        h(\n          'button',\n          {\n            type: 'button',\n            onClick: () => {\n              shouldFail.value = true\n            }\n          },\n          'Simular fallo del widget'\n        ),\n        h(\n          'ul',\n          stats.value.map(stat =>\n            h('li', { key: stat.label }, `${stat.label}: ${stat.value}`)\n          )\n        )\n      ])\n  }\n})\n\nonErrorCaptured((error, instance, info) => {\n  hasError.value = true\n  errorMessage.value =\n    error instanceof Error ? error.message : 'Ocurrió un error inesperado.'\n  errorSource.value = info\n\n  console.error('Widget capturado por el boundary del dashboard', {\n    error,\n    component: instance?.type,\n    info\n  })\n\n  return false\n})\n\nfunction retry() {\n  hasError.value = false\n  errorMessage.value = ''\n  errorSource.value = ''\n  retryKey.value += 1\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dashboard-card\">\n    \u003Cheader>\n      \u003Ch2>Estado del dashboard\u003C\u002Fh2>\n      \u003Cp>\n        Si un widget falla, el resto de la pantalla puede seguir funcionando.\n      \u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cdiv v-if=\"hasError\" class=\"error-box\">\n      \u003Cstrong>Este bloque no pudo renderizarse.\u003C\u002Fstrong>\n      \u003Cp>{{ errorMessage }}\u003C\u002Fp>\n      \u003Csmall>Origen: {{ errorSource }}\u003C\u002Fsmall>\n      \u003Cbutton type=\"button\" @click=\"retry\">Reintentar\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003CRiskyStatsPanel v-else :key=\"retryKey\" \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,9448,9449,9465,9476,9480,9497,9513,9530,9547,9551,9564,9573,9580,9597,9601,9618,9625,9640,9644,9648,9655,9670,9684,9697,9701,9705,9709,9718,9737,9755,9762,9769,9774,9784,9795,9804,9809,9814,9819,9824,9830,9837,9853,9889,9894,9899,9904,9908,9912,9916,9939,9948,9955,9973,9983,9987,10000,10005,10010,10015,10019,10023,10029,10033,10037,10046,10054,10063,10071,10082,10087,10096,10101,10110,10127,10136,10150,10159,10165,10175,10184,10189,10212,10226,10239,10254,10281,10290,10295,10315,10324],{"__ignoreMap":163},[167,9450,9451,9453,9455,9457,9459,9461,9463],{"class":169,"line":170},[167,9452,174],{"class":173},[167,9454,178],{"class":177},[167,9456,182],{"class":181},[167,9458,1050],{"class":181},[167,9460,267],{"class":173},[167,9462,1055],{"class":201},[167,9464,185],{"class":173},[167,9466,9467,9469,9472,9474],{"class":169,"line":188},[167,9468,192],{"class":191},[167,9470,9471],{"class":173}," { computed, defineComponent, h, onErrorCaptured, ref } ",[167,9473,198],{"class":191},[167,9475,202],{"class":201},[167,9477,9478],{"class":169,"line":205},[167,9479,209],{"emptyLinePlaceholder":208},[167,9481,9482,9484,9487,9489,9491,9493,9495],{"class":169,"line":160},[167,9483,216],{"class":191},[167,9485,9486],{"class":219}," hasError",[167,9488,223],{"class":191},[167,9490,226],{"class":181},[167,9492,229],{"class":173},[167,9494,3392],{"class":219},[167,9496,235],{"class":173},[167,9498,9499,9501,9503,9505,9507,9509,9511],{"class":169,"line":238},[167,9500,216],{"class":191},[167,9502,6582],{"class":219},[167,9504,223],{"class":191},[167,9506,226],{"class":181},[167,9508,229],{"class":173},[167,9510,2184],{"class":201},[167,9512,235],{"class":173},[167,9514,9515,9517,9520,9522,9524,9526,9528],{"class":169,"line":243},[167,9516,216],{"class":191},[167,9518,9519],{"class":219}," errorSource",[167,9521,223],{"class":191},[167,9523,226],{"class":181},[167,9525,229],{"class":173},[167,9527,2184],{"class":201},[167,9529,235],{"class":173},[167,9531,9532,9534,9537,9539,9541,9543,9545],{"class":169,"line":261},[167,9533,216],{"class":191},[167,9535,9536],{"class":219}," retryKey",[167,9538,223],{"class":191},[167,9540,226],{"class":181},[167,9542,229],{"class":173},[167,9544,1960],{"class":219},[167,9546,235],{"class":173},[167,9548,9549],{"class":169,"line":273},[167,9550,209],{"emptyLinePlaceholder":208},[167,9552,9553,9555,9558,9560,9562],{"class":169,"line":279},[167,9554,216],{"class":191},[167,9556,9557],{"class":219}," RiskyStatsPanel",[167,9559,223],{"class":191},[167,9561,7156],{"class":181},[167,9563,372],{"class":173},[167,9565,9566,9568,9571],{"class":169,"line":289},[167,9567,4398],{"class":173},[167,9569,9570],{"class":201},"'RiskyStatsPanel'",[167,9572,393],{"class":173},[167,9574,9575,9578],{"class":169,"line":294},[167,9576,9577],{"class":181},"  setup",[167,9579,763],{"class":173},[167,9581,9582,9584,9587,9589,9591,9593,9595],{"class":169,"line":304},[167,9583,8266],{"class":191},[167,9585,9586],{"class":219}," shouldFail",[167,9588,223],{"class":191},[167,9590,226],{"class":181},[167,9592,229],{"class":173},[167,9594,3392],{"class":219},[167,9596,235],{"class":173},[167,9598,9599],{"class":169,"line":313},[167,9600,209],{"emptyLinePlaceholder":208},[167,9602,9603,9605,9608,9610,9612,9614,9616],{"class":169,"line":161},[167,9604,8266],{"class":191},[167,9606,9607],{"class":219}," stats",[167,9609,223],{"class":191},[167,9611,1898],{"class":181},[167,9613,1493],{"class":173},[167,9615,639],{"class":191},[167,9617,1905],{"class":173},[167,9619,9620,9622],{"class":169,"line":335},[167,9621,7261],{"class":191},[167,9623,9624],{"class":173}," (shouldFail.value) {\n",[167,9626,9627,9629,9631,9633,9635,9638],{"class":169,"line":341},[167,9628,7272],{"class":191},[167,9630,4224],{"class":191},[167,9632,6654],{"class":181},[167,9634,229],{"class":173},[167,9636,9637],{"class":201},"'No fue posible calcular las métricas del tablero.'",[167,9639,235],{"class":173},[167,9641,9642],{"class":169,"line":489},[167,9643,7287],{"class":173},[167,9645,9646],{"class":169,"line":495},[167,9647,209],{"emptyLinePlaceholder":208},[167,9649,9650,9652],{"class":169,"line":501},[167,9651,8767],{"class":191},[167,9653,9654],{"class":173}," [\n",[167,9656,9657,9660,9663,9666,9668],{"class":169,"line":512},[167,9658,9659],{"class":173},"        { label: ",[167,9661,9662],{"class":201},"'Pendientes'",[167,9664,9665],{"class":173},", value: ",[167,9667,1872],{"class":219},[167,9669,1856],{"class":173},[167,9671,9672,9674,9677,9679,9682],{"class":169,"line":781},[167,9673,9659],{"class":173},[167,9675,9676],{"class":201},"'Completadas'",[167,9678,9665],{"class":173},[167,9680,9681],{"class":219},"29",[167,9683,1856],{"class":173},[167,9685,9686,9688,9691,9693,9695],{"class":169,"line":786},[167,9687,9659],{"class":173},[167,9689,9690],{"class":201},"'Bloqueadas'",[167,9692,9665],{"class":173},[167,9694,8203],{"class":219},[167,9696,599],{"class":173},[167,9698,9699],{"class":169,"line":2678},[167,9700,8738],{"class":173},[167,9702,9703],{"class":169,"line":2692},[167,9704,8926],{"class":173},[167,9706,9707],{"class":169,"line":3575},[167,9708,209],{"emptyLinePlaceholder":208},[167,9710,9711,9713,9715],{"class":169,"line":5028},[167,9712,1937],{"class":191},[167,9714,1469],{"class":173},[167,9716,9717],{"class":191},"=>\n",[167,9719,9720,9723,9725,9728,9731,9734],{"class":169,"line":5037},[167,9721,9722],{"class":181},"      h",[167,9724,229],{"class":173},[167,9726,9727],{"class":201},"'section'",[167,9729,9730],{"class":173},", { class: ",[167,9732,9733],{"class":201},"'stats-panel'",[167,9735,9736],{"class":173}," }, [\n",[167,9738,9739,9742,9744,9747,9749,9752],{"class":169,"line":5046},[167,9740,9741],{"class":181},"        h",[167,9743,229],{"class":173},[167,9745,9746],{"class":201},"'h3'",[167,9748,1025],{"class":173},[167,9750,9751],{"class":201},"'Resumen de tareas'",[167,9753,9754],{"class":173},"),\n",[167,9756,9757,9759],{"class":169,"line":6756},[167,9758,9741],{"class":181},[167,9760,9761],{"class":173},"(\n",[167,9763,9764,9767],{"class":169,"line":6778},[167,9765,9766],{"class":201},"          'button'",[167,9768,393],{"class":173},[167,9770,9771],{"class":169,"line":6783},[167,9772,9773],{"class":173},"          {\n",[167,9775,9776,9779,9782],{"class":169,"line":6788},[167,9777,9778],{"class":173},"            type: ",[167,9780,9781],{"class":201},"'button'",[167,9783,393],{"class":173},[167,9785,9786,9789,9791,9793],{"class":169,"line":6793},[167,9787,9788],{"class":181},"            onClick",[167,9790,636],{"class":173},[167,9792,639],{"class":191},[167,9794,1905],{"class":173},[167,9796,9797,9800,9802],{"class":169,"line":6809},[167,9798,9799],{"class":173},"              shouldFail.value ",[167,9801,267],{"class":191},[167,9803,3487],{"class":219},[167,9805,9806],{"class":169,"line":6824},[167,9807,9808],{"class":173},"            }\n",[167,9810,9811],{"class":169,"line":6829},[167,9812,9813],{"class":173},"          },\n",[167,9815,9816],{"class":169,"line":6836},[167,9817,9818],{"class":201},"          'Simular fallo del widget'\n",[167,9820,9821],{"class":169,"line":6845},[167,9822,9823],{"class":173},"        ),\n",[167,9825,9826,9828],{"class":169,"line":6854},[167,9827,9741],{"class":181},[167,9829,9761],{"class":173},[167,9831,9832,9835],{"class":169,"line":6861},[167,9833,9834],{"class":201},"          'ul'",[167,9836,393],{"class":173},[167,9838,9839,9842,9845,9847,9850],{"class":169,"line":6879},[167,9840,9841],{"class":173},"          stats.value.",[167,9843,9844],{"class":181},"map",[167,9846,229],{"class":173},[167,9848,9849],{"class":254},"stat",[167,9851,9852],{"class":191}," =>\n",[167,9854,9855,9858,9860,9863,9866,9869,9871,9873,9876,9879,9881,9883,9885,9887],{"class":169,"line":6884},[167,9856,9857],{"class":181},"            h",[167,9859,229],{"class":173},[167,9861,9862],{"class":201},"'li'",[167,9864,9865],{"class":173},", { key: stat.label }, ",[167,9867,9868],{"class":201},"`${",[167,9870,9849],{"class":173},[167,9872,1679],{"class":201},[167,9874,9875],{"class":173},"label",[167,9877,9878],{"class":201},"}: ${",[167,9880,9849],{"class":173},[167,9882,1679],{"class":201},[167,9884,2219],{"class":173},[167,9886,2360],{"class":201},[167,9888,235],{"class":173},[167,9890,9891],{"class":169,"line":6889},[167,9892,9893],{"class":173},"          )\n",[167,9895,9896],{"class":169,"line":6898},[167,9897,9898],{"class":173},"        )\n",[167,9900,9901],{"class":169,"line":6903},[167,9902,9903],{"class":173},"      ])\n",[167,9905,9906],{"class":169,"line":6912},[167,9907,3492],{"class":173},[167,9909,9910],{"class":169,"line":6928},[167,9911,403],{"class":173},[167,9913,9914],{"class":169,"line":6949},[167,9915,209],{"emptyLinePlaceholder":208},[167,9917,9918,9921,9923,9925,9927,9929,9931,9933,9935,9937],{"class":169,"line":6954},[167,9919,9920],{"class":181},"onErrorCaptured",[167,9922,1918],{"class":173},[167,9924,9352],{"class":254},[167,9926,1025],{"class":173},[167,9928,9263],{"class":254},[167,9930,1025],{"class":173},[167,9932,9269],{"class":254},[167,9934,693],{"class":173},[167,9936,639],{"class":191},[167,9938,1905],{"class":173},[167,9940,9941,9944,9946],{"class":169,"line":6975},[167,9942,9943],{"class":173},"  hasError.value ",[167,9945,267],{"class":191},[167,9947,3487],{"class":219},[167,9949,9950,9953],{"class":169,"line":6989},[167,9951,9952],{"class":173},"  errorMessage.value ",[167,9954,6753],{"class":191},[167,9956,9957,9960,9962,9964,9966,9968,9970],{"class":169,"line":7003},[167,9958,9959],{"class":173},"    error ",[167,9961,6762],{"class":191},[167,9963,6654],{"class":181},[167,9965,6767],{"class":191},[167,9967,6770],{"class":173},[167,9969,583],{"class":191},[167,9971,9972],{"class":201}," 'Ocurrió un error inesperado.'\n",[167,9974,9975,9978,9980],{"class":169,"line":7017},[167,9976,9977],{"class":173},"  errorSource.value ",[167,9979,267],{"class":191},[167,9981,9982],{"class":173}," info\n",[167,9984,9985],{"class":169,"line":7026},[167,9986,209],{"emptyLinePlaceholder":208},[167,9988,9989,9991,9993,9995,9998],{"class":169,"line":7031},[167,9990,2608],{"class":173},[167,9992,9352],{"class":181},[167,9994,229],{"class":173},[167,9996,9997],{"class":201},"'Widget capturado por el boundary del dashboard'",[167,9999,627],{"class":173},[167,10001,10002],{"class":169,"line":7048},[167,10003,10004],{"class":173},"    error,\n",[167,10006,10007],{"class":169,"line":7057},[167,10008,10009],{"class":173},"    component: instance?.type,\n",[167,10011,10012],{"class":169,"line":7555},[167,10013,10014],{"class":173},"    info\n",[167,10016,10017],{"class":169,"line":7560},[167,10018,8347],{"class":173},[167,10020,10021],{"class":169,"line":7579},[167,10022,209],{"emptyLinePlaceholder":208},[167,10024,10025,10027],{"class":169,"line":7592},[167,10026,1539],{"class":191},[167,10028,5593],{"class":219},[167,10030,10031],{"class":169,"line":7605},[167,10032,403],{"class":173},[167,10034,10035],{"class":169,"line":7618},[167,10036,209],{"emptyLinePlaceholder":208},[167,10038,10039,10041,10044],{"class":169,"line":7627},[167,10040,246],{"class":191},[167,10042,10043],{"class":181}," retry",[167,10045,763],{"class":173},[167,10047,10048,10050,10052],{"class":169,"line":7632},[167,10049,9943],{"class":173},[167,10051,267],{"class":191},[167,10053,5593],{"class":219},[167,10055,10056,10058,10060],{"class":169,"line":7647},[167,10057,9952],{"class":173},[167,10059,267],{"class":191},[167,10061,10062],{"class":201}," ''\n",[167,10064,10065,10067,10069],{"class":169,"line":7656},[167,10066,9977],{"class":173},[167,10068,267],{"class":191},[167,10070,10062],{"class":201},[167,10072,10074,10077,10080],{"class":169,"line":10073},68,[167,10075,10076],{"class":173},"  retryKey.value ",[167,10078,10079],{"class":191},"+=",[167,10081,2570],{"class":219},[167,10083,10085],{"class":169,"line":10084},69,[167,10086,276],{"class":173},[167,10088,10090,10092,10094],{"class":169,"line":10089},70,[167,10091,282],{"class":173},[167,10093,178],{"class":177},[167,10095,185],{"class":173},[167,10097,10099],{"class":169,"line":10098},71,[167,10100,209],{"emptyLinePlaceholder":208},[167,10102,10104,10106,10108],{"class":169,"line":10103},72,[167,10105,174],{"class":173},[167,10107,299],{"class":177},[167,10109,185],{"class":173},[167,10111,10113,10115,10118,10120,10122,10125],{"class":169,"line":10112},73,[167,10114,307],{"class":173},[167,10116,10117],{"class":177},"section",[167,10119,1245],{"class":181},[167,10121,267],{"class":173},[167,10123,10124],{"class":201},"\"dashboard-card\"",[167,10126,185],{"class":173},[167,10128,10130,10132,10134],{"class":169,"line":10129},74,[167,10131,1257],{"class":173},[167,10133,1260],{"class":177},[167,10135,185],{"class":173},[167,10137,10139,10141,10143,10146,10148],{"class":169,"line":10138},75,[167,10140,1268],{"class":173},[167,10142,22],{"class":177},[167,10144,10145],{"class":173},">Estado del dashboard\u003C\u002F",[167,10147,22],{"class":177},[167,10149,185],{"class":173},[167,10151,10153,10155,10157],{"class":169,"line":10152},76,[167,10154,1268],{"class":173},[167,10156,15],{"class":177},[167,10158,185],{"class":173},[167,10160,10162],{"class":169,"line":10161},77,[167,10163,10164],{"class":173},"        Si un widget falla, el resto de la pantalla puede seguir funcionando.\n",[167,10166,10168,10171,10173],{"class":169,"line":10167},78,[167,10169,10170],{"class":173},"      \u003C\u002F",[167,10172,15],{"class":177},[167,10174,185],{"class":173},[167,10176,10178,10180,10182],{"class":169,"line":10177},79,[167,10179,1292],{"class":173},[167,10181,1260],{"class":177},[167,10183,185],{"class":173},[167,10185,10187],{"class":169,"line":10186},80,[167,10188,209],{"emptyLinePlaceholder":208},[167,10190,10192,10194,10196,10198,10200,10203,10205,10207,10210],{"class":169,"line":10191},81,[167,10193,1257],{"class":173},[167,10195,1242],{"class":177},[167,10197,5694],{"class":181},[167,10199,267],{"class":173},[167,10201,10202],{"class":201},"\"hasError\"",[167,10204,1245],{"class":181},[167,10206,267],{"class":173},[167,10208,10209],{"class":201},"\"error-box\"",[167,10211,185],{"class":173},[167,10213,10215,10217,10219,10222,10224],{"class":169,"line":10214},82,[167,10216,1268],{"class":173},[167,10218,3933],{"class":177},[167,10220,10221],{"class":173},">Este bloque no pudo renderizarse.\u003C\u002F",[167,10223,3933],{"class":177},[167,10225,185],{"class":173},[167,10227,10229,10231,10233,10235,10237],{"class":169,"line":10228},83,[167,10230,1268],{"class":173},[167,10232,15],{"class":177},[167,10234,6942],{"class":173},[167,10236,15],{"class":177},[167,10238,185],{"class":173},[167,10240,10242,10244,10247,10250,10252],{"class":169,"line":10241},84,[167,10243,1268],{"class":173},[167,10245,10246],{"class":177},"small",[167,10248,10249],{"class":173},">Origen: {{ errorSource }}\u003C\u002F",[167,10251,10246],{"class":177},[167,10253,185],{"class":173},[167,10255,10257,10259,10261,10263,10265,10267,10269,10271,10274,10277,10279],{"class":169,"line":10256},85,[167,10258,1268],{"class":173},[167,10260,507],{"class":177},[167,10262,1174],{"class":181},[167,10264,267],{"class":173},[167,10266,1179],{"class":201},[167,10268,1182],{"class":181},[167,10270,267],{"class":173},[167,10272,10273],{"class":201},"\"retry\"",[167,10275,10276],{"class":173},">Reintentar\u003C\u002F",[167,10278,507],{"class":177},[167,10280,185],{"class":173},[167,10282,10284,10286,10288],{"class":169,"line":10283},86,[167,10285,1292],{"class":173},[167,10287,1242],{"class":177},[167,10289,185],{"class":173},[167,10291,10293],{"class":169,"line":10292},87,[167,10294,209],{"emptyLinePlaceholder":208},[167,10296,10298,10300,10303,10305,10308,10310,10313],{"class":169,"line":10297},88,[167,10299,1257],{"class":173},[167,10301,10302],{"class":177},"RiskyStatsPanel",[167,10304,7038],{"class":181},[167,10306,10307],{"class":181}," :key",[167,10309,267],{"class":173},[167,10311,10312],{"class":201},"\"retryKey\"",[167,10314,5325],{"class":173},[167,10316,10318,10320,10322],{"class":169,"line":10317},89,[167,10319,504],{"class":173},[167,10321,10117],{"class":177},[167,10323,185],{"class":173},[167,10325,10327,10329,10331],{"class":169,"line":10326},90,[167,10328,282],{"class":173},[167,10330,299],{"class":177},[167,10332,185],{"class":173},[154,10334,10336],{"className":156,"code":10335,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nconst RiskyStatsPanel = {\n  name: 'RiskyStatsPanel',\n  data() {\n    return {\n      shouldFail: false\n    }\n  },\n  computed: {\n    stats() {\n      if (this.shouldFail) {\n        throw new Error('No fue posible calcular las métricas del tablero.')\n      }\n\n      return [\n        { label: 'Pendientes', value: 14 },\n        { label: 'Completadas', value: 29 },\n        { label: 'Bloqueadas', value: 3 }\n      ]\n    }\n  },\n  template: `\n    \u003Csection class=\"stats-panel\">\n      \u003Ch3>Resumen de tareas\u003C\u002Fh3>\n      \u003Cbutton\n        type=\"button\"\n        @click=\"shouldFail = true\"\n      >\n        Simular fallo del widget\n      \u003C\u002Fbutton>\n\n      \u003Cul>\n        \u003Cli\n          v-for=\"stat in stats\"\n          :key=\"stat.label\"\n        >\n          {{ stat.label }}: {{ stat.value }}\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fsection>\n  `\n}\n\nexport default {\n  name: 'DashboardErrorBoundary',\n  components: {\n    RiskyStatsPanel\n  },\n  data() {\n    return {\n      hasError: false,\n      errorMessage: '',\n      errorSource: '',\n      retryKey: 0\n    }\n  },\n  errorCaptured(error, instance, info) {\n    this.hasError = true\n    this.errorMessage =\n      error instanceof Error ? error.message : 'Ocurrió un error inesperado.'\n    this.errorSource = info\n\n    console.error('Widget capturado por el boundary del dashboard', {\n      error,\n      component: instance?.type,\n      info\n    })\n\n    return false\n  },\n  methods: {\n    retry() {\n      this.hasError = false\n      this.errorMessage = ''\n      this.errorSource = ''\n      this.retryKey += 1\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dashboard-card\">\n    \u003Cheader>\n      \u003Ch2>Estado del dashboard\u003C\u002Fh2>\n      \u003Cp>Si un widget falla, el resto de la pantalla puede seguir funcionando.\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cdiv v-if=\"hasError\" class=\"error-box\">\n      \u003Cstrong>Este bloque no pudo renderizarse.\u003C\u002Fstrong>\n      \u003Cp>{{ errorMessage }}\u003C\u002Fp>\n      \u003Csmall>Origen: {{ errorSource }}\u003C\u002Fsmall>\n      \u003Cbutton type=\"button\" @click=\"retry\">Reintentar\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003CRiskyStatsPanel v-else :key=\"retryKey\" \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,10337,10338,10352,10362,10370,10376,10382,10389,10393,10397,10401,10408,10419,10433,10437,10441,10447,10459,10471,10483,10487,10491,10495,10503,10508,10513,10518,10523,10528,10533,10538,10543,10547,10552,10557,10562,10567,10572,10577,10582,10587,10592,10597,10601,10605,10613,10622,10627,10632,10636,10642,10648,10657,10665,10674,10682,10686,10690,10709,10720,10728,10744,10755,10759,10771,10776,10781,10786,10790,10794,10800,10804,10808,10815,10825,10835,10845,10856,10860,10864,10868,10876,10880,10888,10902,10910,10922,10935,10943,10947,10967,10979,10992,11005,11030,11039,11044,11061,11070],{"__ignoreMap":163},[167,10339,10340,10342,10344,10346,10348,10350],{"class":169,"line":170},[167,10341,174],{"class":173},[167,10343,178],{"class":177},[167,10345,1050],{"class":181},[167,10347,267],{"class":173},[167,10349,1055],{"class":201},[167,10351,185],{"class":173},[167,10353,10354,10356,10358,10360],{"class":169,"line":188},[167,10355,216],{"class":191},[167,10357,9557],{"class":219},[167,10359,223],{"class":191},[167,10361,1905],{"class":173},[167,10363,10364,10366,10368],{"class":169,"line":205},[167,10365,4398],{"class":173},[167,10367,9570],{"class":201},[167,10369,393],{"class":173},[167,10371,10372,10374],{"class":169,"line":160},[167,10373,7176],{"class":181},[167,10375,763],{"class":173},[167,10377,10378,10380],{"class":169,"line":238},[167,10379,1937],{"class":191},[167,10381,1905],{"class":173},[167,10383,10384,10387],{"class":169,"line":243},[167,10385,10386],{"class":173},"      shouldFail: ",[167,10388,8093],{"class":219},[167,10390,10391],{"class":169,"line":261},[167,10392,4049],{"class":173},[167,10394,10395],{"class":169,"line":273},[167,10396,398],{"class":173},[167,10398,10399],{"class":169,"line":279},[167,10400,8755],{"class":173},[167,10402,10403,10406],{"class":169,"line":289},[167,10404,10405],{"class":181},"    stats",[167,10407,763],{"class":173},[167,10409,10410,10412,10414,10416],{"class":169,"line":294},[167,10411,7261],{"class":191},[167,10413,2526],{"class":173},[167,10415,4927],{"class":219},[167,10417,10418],{"class":173},".shouldFail) {\n",[167,10420,10421,10423,10425,10427,10429,10431],{"class":169,"line":304},[167,10422,7272],{"class":191},[167,10424,4224],{"class":191},[167,10426,6654],{"class":181},[167,10428,229],{"class":173},[167,10430,9637],{"class":201},[167,10432,235],{"class":173},[167,10434,10435],{"class":169,"line":313},[167,10436,7287],{"class":173},[167,10438,10439],{"class":169,"line":161},[167,10440,209],{"emptyLinePlaceholder":208},[167,10442,10443,10445],{"class":169,"line":335},[167,10444,8767],{"class":191},[167,10446,9654],{"class":173},[167,10448,10449,10451,10453,10455,10457],{"class":169,"line":341},[167,10450,9659],{"class":173},[167,10452,9662],{"class":201},[167,10454,9665],{"class":173},[167,10456,1872],{"class":219},[167,10458,1856],{"class":173},[167,10460,10461,10463,10465,10467,10469],{"class":169,"line":489},[167,10462,9659],{"class":173},[167,10464,9676],{"class":201},[167,10466,9665],{"class":173},[167,10468,9681],{"class":219},[167,10470,1856],{"class":173},[167,10472,10473,10475,10477,10479,10481],{"class":169,"line":495},[167,10474,9659],{"class":173},[167,10476,9690],{"class":201},[167,10478,9665],{"class":173},[167,10480,8203],{"class":219},[167,10482,599],{"class":173},[167,10484,10485],{"class":169,"line":501},[167,10486,8738],{"class":173},[167,10488,10489],{"class":169,"line":512},[167,10490,4049],{"class":173},[167,10492,10493],{"class":169,"line":781},[167,10494,398],{"class":173},[167,10496,10497,10500],{"class":169,"line":786},[167,10498,10499],{"class":173},"  template: ",[167,10501,10502],{"class":201},"`\n",[167,10504,10505],{"class":169,"line":2678},[167,10506,10507],{"class":201},"    \u003Csection class=\"stats-panel\">\n",[167,10509,10510],{"class":169,"line":2692},[167,10511,10512],{"class":201},"      \u003Ch3>Resumen de tareas\u003C\u002Fh3>\n",[167,10514,10515],{"class":169,"line":3575},[167,10516,10517],{"class":201},"      \u003Cbutton\n",[167,10519,10520],{"class":169,"line":5028},[167,10521,10522],{"class":201},"        type=\"button\"\n",[167,10524,10525],{"class":169,"line":5037},[167,10526,10527],{"class":201},"        @click=\"shouldFail = true\"\n",[167,10529,10530],{"class":169,"line":5046},[167,10531,10532],{"class":201},"      >\n",[167,10534,10535],{"class":169,"line":6756},[167,10536,10537],{"class":201},"        Simular fallo del widget\n",[167,10539,10540],{"class":169,"line":6778},[167,10541,10542],{"class":201},"      \u003C\u002Fbutton>\n",[167,10544,10545],{"class":169,"line":6783},[167,10546,209],{"emptyLinePlaceholder":208},[167,10548,10549],{"class":169,"line":6788},[167,10550,10551],{"class":201},"      \u003Cul>\n",[167,10553,10554],{"class":169,"line":6793},[167,10555,10556],{"class":201},"        \u003Cli\n",[167,10558,10559],{"class":169,"line":6809},[167,10560,10561],{"class":201},"          v-for=\"stat in stats\"\n",[167,10563,10564],{"class":169,"line":6824},[167,10565,10566],{"class":201},"          :key=\"stat.label\"\n",[167,10568,10569],{"class":169,"line":6829},[167,10570,10571],{"class":201},"        >\n",[167,10573,10574],{"class":169,"line":6836},[167,10575,10576],{"class":201},"          {{ stat.label }}: {{ stat.value }}\n",[167,10578,10579],{"class":169,"line":6845},[167,10580,10581],{"class":201},"        \u003C\u002Fli>\n",[167,10583,10584],{"class":169,"line":6854},[167,10585,10586],{"class":201},"      \u003C\u002Ful>\n",[167,10588,10589],{"class":169,"line":6861},[167,10590,10591],{"class":201},"    \u003C\u002Fsection>\n",[167,10593,10594],{"class":169,"line":6879},[167,10595,10596],{"class":201},"  `\n",[167,10598,10599],{"class":169,"line":6884},[167,10600,276],{"class":173},[167,10602,10603],{"class":169,"line":6889},[167,10604,209],{"emptyLinePlaceholder":208},[167,10606,10607,10609,10611],{"class":169,"line":6898},[167,10608,608],{"class":191},[167,10610,3991],{"class":191},[167,10612,1905],{"class":173},[167,10614,10615,10617,10620],{"class":169,"line":6903},[167,10616,4398],{"class":173},[167,10618,10619],{"class":201},"'DashboardErrorBoundary'",[167,10621,393],{"class":173},[167,10623,10624],{"class":169,"line":6912},[167,10625,10626],{"class":173},"  components: {\n",[167,10628,10629],{"class":169,"line":6928},[167,10630,10631],{"class":173},"    RiskyStatsPanel\n",[167,10633,10634],{"class":169,"line":6949},[167,10635,398],{"class":173},[167,10637,10638,10640],{"class":169,"line":6954},[167,10639,7176],{"class":181},[167,10641,763],{"class":173},[167,10643,10644,10646],{"class":169,"line":6975},[167,10645,1937],{"class":191},[167,10647,1905],{"class":173},[167,10649,10650,10653,10655],{"class":169,"line":6989},[167,10651,10652],{"class":173},"      hasError: ",[167,10654,3392],{"class":219},[167,10656,393],{"class":173},[167,10658,10659,10661,10663],{"class":169,"line":7003},[167,10660,7206],{"class":173},[167,10662,2184],{"class":201},[167,10664,393],{"class":173},[167,10666,10667,10670,10672],{"class":169,"line":7017},[167,10668,10669],{"class":173},"      errorSource: ",[167,10671,2184],{"class":201},[167,10673,393],{"class":173},[167,10675,10676,10679],{"class":169,"line":7026},[167,10677,10678],{"class":173},"      retryKey: ",[167,10680,10681],{"class":219},"0\n",[167,10683,10684],{"class":169,"line":7031},[167,10685,4049],{"class":173},[167,10687,10688],{"class":169,"line":7048},[167,10689,398],{"class":173},[167,10691,10692,10695,10697,10699,10701,10703,10705,10707],{"class":169,"line":7057},[167,10693,10694],{"class":181},"  errorCaptured",[167,10696,229],{"class":173},[167,10698,9352],{"class":254},[167,10700,1025],{"class":173},[167,10702,9263],{"class":254},[167,10704,1025],{"class":173},[167,10706,9269],{"class":254},[167,10708,258],{"class":173},[167,10710,10711,10713,10716,10718],{"class":169,"line":7555},[167,10712,879],{"class":219},[167,10714,10715],{"class":173},".hasError ",[167,10717,267],{"class":191},[167,10719,3487],{"class":219},[167,10721,10722,10724,10726],{"class":169,"line":7560},[167,10723,879],{"class":219},[167,10725,7374],{"class":173},[167,10727,6753],{"class":191},[167,10729,10730,10732,10734,10736,10738,10740,10742],{"class":169,"line":7579},[167,10731,6759],{"class":173},[167,10733,6762],{"class":191},[167,10735,6654],{"class":181},[167,10737,6767],{"class":191},[167,10739,6770],{"class":173},[167,10741,583],{"class":191},[167,10743,9972],{"class":201},[167,10745,10746,10748,10751,10753],{"class":169,"line":7592},[167,10747,879],{"class":219},[167,10749,10750],{"class":173},".errorSource ",[167,10752,267],{"class":191},[167,10754,9982],{"class":173},[167,10756,10757],{"class":169,"line":7605},[167,10758,209],{"emptyLinePlaceholder":208},[167,10760,10761,10763,10765,10767,10769],{"class":169,"line":7618},[167,10762,8894],{"class":173},[167,10764,9352],{"class":181},[167,10766,229],{"class":173},[167,10768,9997],{"class":201},[167,10770,627],{"class":173},[167,10772,10773],{"class":169,"line":7627},[167,10774,10775],{"class":173},"      error,\n",[167,10777,10778],{"class":169,"line":7632},[167,10779,10780],{"class":173},"      component: instance?.type,\n",[167,10782,10783],{"class":169,"line":7647},[167,10784,10785],{"class":173},"      info\n",[167,10787,10788],{"class":169,"line":7656},[167,10789,8926],{"class":173},[167,10791,10792],{"class":169,"line":10073},[167,10793,209],{"emptyLinePlaceholder":208},[167,10795,10796,10798],{"class":169,"line":10084},[167,10797,1937],{"class":191},[167,10799,5593],{"class":219},[167,10801,10802],{"class":169,"line":10089},[167,10803,398],{"class":173},[167,10805,10806],{"class":169,"line":10098},[167,10807,4419],{"class":173},[167,10809,10810,10813],{"class":169,"line":10103},[167,10811,10812],{"class":181},"    retry",[167,10814,763],{"class":173},[167,10816,10817,10819,10821,10823],{"class":169,"line":10112},[167,10818,741],{"class":219},[167,10820,10715],{"class":173},[167,10822,267],{"class":191},[167,10824,5593],{"class":219},[167,10826,10827,10829,10831,10833],{"class":169,"line":10129},[167,10828,741],{"class":219},[167,10830,7374],{"class":173},[167,10832,267],{"class":191},[167,10834,10062],{"class":201},[167,10836,10837,10839,10841,10843],{"class":169,"line":10138},[167,10838,741],{"class":219},[167,10840,10750],{"class":173},[167,10842,267],{"class":191},[167,10844,10062],{"class":201},[167,10846,10847,10849,10852,10854],{"class":169,"line":10152},[167,10848,741],{"class":219},[167,10850,10851],{"class":173},".retryKey ",[167,10853,10079],{"class":191},[167,10855,2570],{"class":219},[167,10857,10858],{"class":169,"line":10161},[167,10859,4049],{"class":173},[167,10861,10862],{"class":169,"line":10167},[167,10863,3492],{"class":173},[167,10865,10866],{"class":169,"line":10177},[167,10867,276],{"class":173},[167,10869,10870,10872,10874],{"class":169,"line":10186},[167,10871,282],{"class":173},[167,10873,178],{"class":177},[167,10875,185],{"class":173},[167,10877,10878],{"class":169,"line":10191},[167,10879,209],{"emptyLinePlaceholder":208},[167,10881,10882,10884,10886],{"class":169,"line":10214},[167,10883,174],{"class":173},[167,10885,299],{"class":177},[167,10887,185],{"class":173},[167,10889,10890,10892,10894,10896,10898,10900],{"class":169,"line":10228},[167,10891,307],{"class":173},[167,10893,10117],{"class":177},[167,10895,1245],{"class":181},[167,10897,267],{"class":173},[167,10899,10124],{"class":201},[167,10901,185],{"class":173},[167,10903,10904,10906,10908],{"class":169,"line":10241},[167,10905,1257],{"class":173},[167,10907,1260],{"class":177},[167,10909,185],{"class":173},[167,10911,10912,10914,10916,10918,10920],{"class":169,"line":10256},[167,10913,1268],{"class":173},[167,10915,22],{"class":177},[167,10917,10145],{"class":173},[167,10919,22],{"class":177},[167,10921,185],{"class":173},[167,10923,10924,10926,10928,10931,10933],{"class":169,"line":10283},[167,10925,1268],{"class":173},[167,10927,15],{"class":177},[167,10929,10930],{"class":173},">Si un widget falla, el resto de la pantalla puede seguir funcionando.\u003C\u002F",[167,10932,15],{"class":177},[167,10934,185],{"class":173},[167,10936,10937,10939,10941],{"class":169,"line":10292},[167,10938,1292],{"class":173},[167,10940,1260],{"class":177},[167,10942,185],{"class":173},[167,10944,10945],{"class":169,"line":10297},[167,10946,209],{"emptyLinePlaceholder":208},[167,10948,10949,10951,10953,10955,10957,10959,10961,10963,10965],{"class":169,"line":10317},[167,10950,1257],{"class":173},[167,10952,1242],{"class":177},[167,10954,5694],{"class":181},[167,10956,267],{"class":173},[167,10958,10202],{"class":201},[167,10960,1245],{"class":181},[167,10962,267],{"class":173},[167,10964,10209],{"class":201},[167,10966,185],{"class":173},[167,10968,10969,10971,10973,10975,10977],{"class":169,"line":10326},[167,10970,1268],{"class":173},[167,10972,3933],{"class":177},[167,10974,10221],{"class":173},[167,10976,3933],{"class":177},[167,10978,185],{"class":173},[167,10980,10982,10984,10986,10988,10990],{"class":169,"line":10981},91,[167,10983,1268],{"class":173},[167,10985,15],{"class":177},[167,10987,6942],{"class":173},[167,10989,15],{"class":177},[167,10991,185],{"class":173},[167,10993,10995,10997,10999,11001,11003],{"class":169,"line":10994},92,[167,10996,1268],{"class":173},[167,10998,10246],{"class":177},[167,11000,10249],{"class":173},[167,11002,10246],{"class":177},[167,11004,185],{"class":173},[167,11006,11008,11010,11012,11014,11016,11018,11020,11022,11024,11026,11028],{"class":169,"line":11007},93,[167,11009,1268],{"class":173},[167,11011,507],{"class":177},[167,11013,1174],{"class":181},[167,11015,267],{"class":173},[167,11017,1179],{"class":201},[167,11019,1182],{"class":181},[167,11021,267],{"class":173},[167,11023,10273],{"class":201},[167,11025,10276],{"class":173},[167,11027,507],{"class":177},[167,11029,185],{"class":173},[167,11031,11033,11035,11037],{"class":169,"line":11032},94,[167,11034,1292],{"class":173},[167,11036,1242],{"class":177},[167,11038,185],{"class":173},[167,11040,11042],{"class":169,"line":11041},95,[167,11043,209],{"emptyLinePlaceholder":208},[167,11045,11047,11049,11051,11053,11055,11057,11059],{"class":169,"line":11046},96,[167,11048,1257],{"class":173},[167,11050,10302],{"class":177},[167,11052,7038],{"class":181},[167,11054,10307],{"class":181},[167,11056,267],{"class":173},[167,11058,10312],{"class":201},[167,11060,5325],{"class":173},[167,11062,11064,11066,11068],{"class":169,"line":11063},97,[167,11065,504],{"class":173},[167,11067,10117],{"class":177},[167,11069,185],{"class":173},[167,11071,11073,11075,11077],{"class":169,"line":11072},98,[167,11074,282],{"class":173},[167,11076,299],{"class":177},[167,11078,185],{"class":173},[15,11080,11081],{},"El patrón clave es claro: el error ocurre en el hijo, el padre lo captura, registra contexto y cambia a un estado de respaldo sin afectar el resto del árbol.",[5367,11083,11084],{},[15,11085,11086],{},"En ambos enfoques, la responsabilidad es la misma: el componente padre delimita la zona de riesgo y decide cómo degradar la experiencia si algo falla en su árbol descendiente.",[22,11088,7678],{"id":7677},[15,11090,11091,11093],{},[87,11092,9185],{}," no existe para ocultar excepciones, sino para gestionar mejor su impacto. Bien utilizado, permite construir interfaces más resilientes: una parte puede fallar sin comprometer todo el flujo.",[15,11095,11096],{},"La idea clave: captura localmente, registra con contexto y ofrece una salida clara al usuario.",[924,11098,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":11100},[11101,11102,11103,11104,11105,11112,11117,11118],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":11106},[11107,11108,11110,11111],{"id":9375,"depth":205,"text":9376},{"id":9385,"depth":205,"text":11109},"2. Devolver false siempre",{"id":9401,"depth":205,"text":9402},{"id":9411,"depth":205,"text":9412},{"id":7996,"depth":188,"text":7997,"children":11113},[11114,11115,11116],{"id":9423,"depth":205,"text":9424},{"id":9430,"depth":205,"text":9431},{"id":9437,"depth":205,"text":9438},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773714502\u002Fvue-lifecycle-error-handling-errorcaptured_mn62y7.png","Ilustración de un componente de Vue con un escudo de protección, simbolizando el manejo de errores con errorCaptured.","2026-03-17","Cómo usar errorCaptured y onErrorCaptured para aislar fallos en componentes hijos, mostrar estados de respaldo y registrar errores sin romper toda la interfaz.",{"updatedAt":11124,"coverCaption":11125,"author":946,"keywords":11126},"2026-03-16T22:00:00-05:00","Con errorCaptured, puedes proteger partes específicas de tu UI sin comprometer toda la experiencia.",[3258,9185,9920,11127,11128],"manejo de errores","error boundaries","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[11131],{"headline":9176,"author":11132,"datePublished":11124,"@type":961},{"name":946,"@type":959},{"title":9176,"description":11122},"blog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[11136,11137,11140,11141],{"tag":7724,"color":7725},{"tag":11138,"color":11139},"Manejo de Errores","#E55039",{"tag":1625,"color":1639},{"tag":7730,"color":7731},"epm2rTVpqLV5pyIW1xBngTSC9yZ0Hdu43YNcWNkm4xw",{"id":11144,"title":11145,"body":11146,"cover":13438,"coverAlt":13439,"date":13440,"description":13441,"draft":940,"extension":941,"lab":942,"locale":943,"meta":13442,"navigation":208,"path":13448,"schemaOrg":13449,"seo":13452,"series":7718,"seriesDescription":7719,"seriesOrder":243,"seriesTitle":7720,"slug":942,"stem":13453,"tags":13454,"__hash__":13460},"blog\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es.md","Ciclos de vida en Vue: componentes cacheados con \u003CKeepAlive> (activated, deactivated)",{"type":8,"value":11147,"toc":13417},[11148,11152,11165,11171,11174,11182,11184,11189,11192,11203,11206,11217,11220,11237,11240,11252,11255,11278,11280,11287,11289,11303,11306,11318,11320,11326,11329,11343,11346,11368,11372,11452,11455,11457,11463,11469,11474,11478,11485,11494,11501,11507,11513,11517,11522,11525,11527,11531,11540,11544,11550,11554,11563,12533,13370,13390,13392,13415],[22,11149,11151],{"id":11150},"texto-refinado-completo","Texto refinado completo",[11,11153,11155,11156,2526,11159,1025,11162,6219],{"id":11154},"ciclos-de-vida-en-vue-componentes-cacheados-con-keepalive-activated-deactivated","Ciclos de vida en Vue: componentes cacheados con ",[87,11157,11158],{},"\u003CKeepAlive>",[87,11160,11161],{},"activated",[87,11163,11164],{},"deactivated",[15,11166,11167,11168,11170],{},"No todos los componentes desaparecen realmente cuando dejan de verse. En Vue, un componente envuelto en ",[87,11169,11158],{}," puede salir del DOM activo y, aun así, seguir vivo en memoria. Ese detalle cambia por completo la forma de entender su ciclo de vida.",[15,11172,11173],{},"Si tratas un componente cacheado como si siempre se montara desde cero, es fácil terminar recargando datos sin necesidad, dejando timers o polling corriendo cuando la vista ya no está visible, o mostrando información obsoleta al volver a una pestaña.",[15,11175,11176,11177,1028,11179,11181],{},"Los hooks ",[87,11178,11161],{},[87,11180,11164],{}," existen precisamente para ese escenario: componentes que entran y salen de pantalla sin destruirse en cada cambio.",[22,11183,6257],{"id":6256},[15,11185,11186,11188],{},[87,11187,11158],{}," cachea instancias de componentes dinámicos para preservar su estado entre cambios. En lugar de desmontar el componente cuando deja de mostrarse, Vue lo mueve a un estado desactivado.",[15,11190,11191],{},"Eso significa que el flujo ya no es solo:",[33,11193,11194,11197,11200],{},[36,11195,11196],{},"Montar",[36,11198,11199],{},"Actualizar",[36,11201,11202],{},"Desmontar",[15,11204,11205],{},"Ahora también aparece un estado intermedio muy importante:",[33,11207,11208,11211,11214],{},[36,11209,11210],{},"Activar",[36,11212,11213],{},"Desactivar",[36,11215,11216],{},"Volver a activar",[15,11218,11219],{},"Los hooks implicados son:",[33,11221,11222,11230],{},[36,11223,11224,11227,11228],{},[87,11225,11226],{},"onActivated()"," \u002F ",[87,11229,11161],{},[36,11231,11232,11227,11235],{},[87,11233,11234],{},"onDeactivated()",[87,11236,11164],{},[15,11238,11239],{},"Hay dos matices clave que conviene tener claros:",[33,11241,11242,11247],{},[36,11243,11244,11246],{},[87,11245,11161],{}," también se ejecuta en el montaje inicial del componente cacheado.",[36,11248,11249,11251],{},[87,11250,11164],{}," se ejecuta cuando el componente sale del DOM activo hacia la caché y también cuando finalmente se desmonta.",[15,11253,11254],{},"En términos prácticos:",[33,11256,11257,11262,11267,11272],{},[36,11258,11259,11261],{},[87,11260,6393],{}," sirve para inicialización única.",[36,11263,11264,11266],{},[87,11265,11161],{}," sirve para cada momento en que la vista vuelve a estar activa.",[36,11268,11269,11271],{},[87,11270,11164],{}," sirve para pausar, guardar o limpiar trabajo mientras la instancia queda en segundo plano.",[36,11273,11274,11277],{},[87,11275,11276],{},"unmounted"," solo entra en juego cuando la instancia realmente deja de existir.",[22,11279,6322],{"id":6321},[15,11281,11282,1028,11284,11286],{},[87,11283,11161],{},[87,11285,11164],{}," encajan bien cuando el componente debe comportarse de forma distinta según esté visible o solo cacheado.",[15,11288,9308],{},[33,11290,11291,11294,11297,11300],{},[36,11292,11293],{},"Revalidar datos al volver a una pestaña sin perder el estado local de formularios o filtros.",[36,11295,11296],{},"Pausar polling, listeners u observadores cuando la vista deja de estar activa.",[36,11298,11299],{},"Retomar scroll, foco o sincronización con librerías externas cuando el componente reaparece.",[36,11301,11302],{},"Mantener una navegación fluida entre tabs, dashboards o vistas dinámicas sin reinstanciar todo desde cero.",[15,11304,11305],{},"La regla práctica es simple:",[33,11307,11308,11313],{},[36,11309,11310,11311,1679],{},"Si necesitas reaccionar al regreso del componente, piensa en ",[87,11312,11161],{},[36,11314,11315,11316,1679],{},"Si necesitas detener trabajo mientras la instancia queda cacheada, piensa en ",[87,11317,11164],{},[22,11319,6349],{"id":6348},[15,11321,11322,11323,11325],{},"No todo componente necesita ",[87,11324,11158],{}," ni estos hooks.",[15,11327,11328],{},"Conviene evitarlos cuando:",[33,11330,11331,11334,11337,11340],{},[36,11332,11333],{},"El componente debería reiniciarse limpio en cada visita y no conservar estado.",[36,11335,11336],{},"La lógica encaja mejor en estado global o en datos derivados, sin cachear la vista completa.",[36,11338,11339],{},"El problema real es un flujo de navegación confuso, no la pérdida de estado.",[36,11341,11342],{},"Quieres forzar un refresco completo en cada visita; en ese caso, la caché puede jugar en contra.",[15,11344,11345],{},"También conviene no meter aquí lógica que pertenece a otro sitio:",[33,11347,11348,11354,11362],{},[36,11349,11350,11351,11353],{},"Si dependes de un dato concreto, un ",[87,11352,5475],{}," suele expresar mejor la intención.",[36,11355,11356,11357,90,11359,11361],{},"Si solo necesitas inicializar una vez, ",[87,11358,6393],{},[87,11360,9238],{}," suelen ser suficientes.",[36,11363,11364,11365,11367],{},"Si el componente no está dentro de ",[87,11366,11158],{},", estos hooks no se dispararán.",[22,11369,11371],{"id":11370},"comparación-rápida","Comparación rápida",[56,11373,11374,11390],{},[59,11375,11376],{},[62,11377,11378,11381,11384,11387],{},[65,11379,11380],{},"Hook",[65,11382,11383],{},"Cuándo se dispara",[65,11385,11386],{},"Para qué encaja mejor",[65,11388,11389],{},"Error habitual",[75,11391,11392,11407,11422,11437],{},[62,11393,11394,11398,11401,11404],{},[80,11395,11396],{},[87,11397,6393],{},[80,11399,11400],{},"Cuando la instancia se monta por primera vez",[80,11402,11403],{},"Inicialización única",[80,11405,11406],{},"Poner aquí lógica que debería ejecutarse cada vez que la vista regresa",[62,11408,11409,11413,11416,11419],{},[80,11410,11411],{},[87,11412,11161],{},[80,11414,11415],{},"En el montaje inicial y en cada reactivación desde caché",[80,11417,11418],{},"Refrescar, resincronizar o retomar trabajo visible",[80,11420,11421],{},"Asumir que el componente vuelve desde estado limpio",[62,11423,11424,11428,11431,11434],{},[80,11425,11426],{},[87,11427,11164],{},[80,11429,11430],{},"Cuando sale del DOM activo hacia caché y también al desmontarse",[80,11432,11433],{},"Pausar polling, timers, observers o persistir estado temporal",[80,11435,11436],{},"Tratarlo como si equivaliera a destrucción completa",[62,11438,11439,11443,11446,11449],{},[80,11440,11441],{},[87,11442,11276],{},[80,11444,11445],{},"Cuando la instancia realmente se destruye",[80,11447,11448],{},"Limpieza final",[80,11450,11451],{},"Esperar que ocurra en cada cambio entre vistas cacheadas",[15,11453,11454],{},"La diferencia decisiva es esta: un componente cacheado no muere cuando deja de verse. Simplemente queda en pausa.",[22,11456,3085],{"id":3084},[3087,11458,11460,11461],{"id":11459},"_1-cargar-datos-solo-en-mounted","1. Cargar datos solo en ",[87,11462,6393],{},[15,11464,11465,11466,11468],{},"Funciona la primera vez, pero suele fallar cuando el usuario sale y vuelve a la vista. Como el componente sigue cacheado, ",[87,11467,6393],{}," no vuelve a ejecutarse y puedes terminar mostrando datos obsoletos.",[15,11470,11471,11472,1679],{},"La corrección habitual es mover la revalidación ligera a ",[87,11473,11161],{},[3087,11475,11477],{"id":11476},"_2-dejar-polling-o-timers-activos-mientras-la-vista-está-oculta","2. Dejar polling o timers activos mientras la vista está oculta",[15,11479,11480,11481,11484],{},"Un componente desactivado sigue existiendo en memoria. Si no detienes ",[87,11482,11483],{},"setInterval",", sockets o listeners, el trabajo continúa aunque la pantalla ya no esté visible.",[15,11486,11487,11488,11490,11491,11493],{},"La solución es pausar en ",[87,11489,11164],{}," y reanudar en ",[87,11492,11161],{}," cuando corresponda.",[3087,11495,11497,11498,11500],{"id":11496},"_3-esperar-unmounted-al-cambiar-entre-tabs-cacheadas","3. Esperar ",[87,11499,11276],{}," al cambiar entre tabs cacheadas",[15,11502,11503,11504,11506],{},"Cuando cambias entre componentes dentro de ",[87,11505,11158],{},", muchas veces no hay desmontaje inmediato. Lo que ocurre es una desactivación.",[15,11508,11509,11510,11512],{},"Si toda tu limpieza depende de ",[87,11511,11276],{},", llegará tarde o no ocurrirá cuando esperabas.",[3087,11514,11516],{"id":11515},"_4-confundir-conservar-estado-con-conservar-frescura","4. Confundir conservar estado con conservar frescura",[15,11518,11519,11521],{},[87,11520,11158],{}," conserva estado local, pero no garantiza que los datos sigan actualizados. Puedes volver a un formulario con sus valores intactos y, al mismo tiempo, a una lista basada en datos viejos.",[15,11523,11524],{},"Cachear la instancia no reemplaza una estrategia de refresco.",[22,11526,7997],{"id":7996},[3087,11528,11530],{"id":11529},"volver-a-una-pestaña-sin-perder-filtros","Volver a una pestaña sin perder filtros",[15,11532,11533,11534,11536,11537,11539],{},"Imagina una vista de reportes con filtros, orden y scroll interno. Sin ",[87,11535,11158],{},", cada cambio de tab puede destruir la instancia y obligar al usuario a empezar otra vez. Con caché, mantienes la experiencia. Con ",[87,11538,11161],{},", además, puedes refrescar solo el resumen o la fecha de última sincronización.",[3087,11541,11543],{"id":11542},"pausar-trabajo-en-segundo-plano","Pausar trabajo en segundo plano",[15,11545,11546,11547,11549],{},"Si una vista consulta métrica cada 30 segundos, no conviene que siga haciéndolo cuando el usuario ya se movió a otra sección, pero la instancia quedó cacheada. ",[87,11548,11164],{}," es el lugar natural para detener ese trabajo.",[3087,11551,11553],{"id":11552},"retomar-sincronización-visual","Retomar sincronización visual",[15,11555,11556,11557,11559,11560,11562],{},"Algunas vistas necesitan recalcular tamaños, gráficos o paneles cuando reaparecen. Como el componente no se recrea, ",[87,11558,6393],{}," ya quedó atrás. Ahí ",[87,11561,11161],{}," es el punto correcto para resincronizar la UI.",[154,11564,11566],{"className":156,"code":11565,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, onActivated, onDeactivated, onMounted, ref } from 'vue'\n\ntype Task = {\n  id: number\n  title: string\n  done: boolean\n}\n\nconst tasks = ref\u003CTask[]>([])\nconst filter = ref\u003C'all' | 'pending' | 'done'>('all')\nconst status = ref('Esperando carga...')\nconst lastSync = ref\u003Cstring | null>(null)\nconst poller = ref\u003CReturnType\u003Ctypeof setInterval> | null>(null)\nconst initialized = ref(false)\n\nconst visibleTasks = computed(() => {\n  if (filter.value === 'pending') {\n    return tasks.value.filter(task => !task.done)\n  }\n\n  if (filter.value === 'done') {\n    return tasks.value.filter(task => task.done)\n  }\n\n  return tasks.value\n})\n\nasync function fetchTasks() {\n  status.value = 'Sincronizando...'\n\n  const response = await fetch('\u002Fapi\u002Ftasks')\n  const data = (await response.json()) as { tasks: Task[] }\n\n  tasks.value = data.tasks\n  lastSync.value = new Date().toLocaleTimeString('es-CO')\n  status.value = 'Datos actualizados'\n}\n\nfunction startPolling() {\n  if (poller.value !== null) return\n\n  poller.value = setInterval(() => {\n    void fetchTasks()\n  }, 30000)\n}\n\nfunction stopPolling() {\n  if (poller.value === null) return\n\n  clearInterval(poller.value)\n  poller.value = null\n}\n\nonMounted(() => {\n  initialized.value = true\n})\n\nonActivated(async () => {\n  status.value = initialized.value ? 'Vista reactivada' : 'Cargando vista...'\n  await fetchTasks()\n  startPolling()\n})\n\nonDeactivated(() => {\n  status.value = 'Vista en pausa'\n  stopPolling()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-report\">\n    \u003Cheader>\n      \u003Ch2>Reporte de tareas\u003C\u002Fh2>\n      \u003Cp>{{ status }}\u003C\u002Fp>\n      \u003Cp v-if=\"lastSync\">Última sincronización: {{ lastSync }}\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cnav class=\"filters\">\n      \u003Cbutton @click=\"filter = 'all'\">Todas\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'pending'\">Pendientes\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'done'\">Completadas\u003C\u002Fbutton>\n    \u003C\u002Fnav>\n\n    \u003Cul>\n      \u003Cli\n        v-for=\"task in visibleTasks\"\n        :key=\"task.id\"\n      >\n        {{ task.title }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,11567,11568,11584,11595,11599,11610,11618,11627,11637,11641,11645,11663,11694,11712,11737,11772,11789,11793,11809,11822,11841,11845,11849,11861,11878,11882,11886,11893,11897,11901,11912,11922,11926,11945,11978,11982,11992,12016,12025,12029,12033,12042,12057,12061,12077,12086,12095,12099,12103,12112,12126,12130,12138,12147,12151,12155,12165,12174,12178,12182,12197,12216,12224,12231,12235,12239,12250,12259,12266,12270,12278,12282,12290,12305,12313,12326,12339,12359,12367,12371,12386,12406,12426,12446,12454,12458,12466,12473,12483,12492,12496,12501,12509,12517,12525],{"__ignoreMap":163},[167,11569,11570,11572,11574,11576,11578,11580,11582],{"class":169,"line":170},[167,11571,174],{"class":173},[167,11573,178],{"class":177},[167,11575,182],{"class":181},[167,11577,1050],{"class":181},[167,11579,267],{"class":173},[167,11581,1055],{"class":201},[167,11583,185],{"class":173},[167,11585,11586,11588,11591,11593],{"class":169,"line":188},[167,11587,192],{"class":191},[167,11589,11590],{"class":173}," { computed, onActivated, onDeactivated, onMounted, ref } ",[167,11592,198],{"class":191},[167,11594,202],{"class":201},[167,11596,11597],{"class":169,"line":205},[167,11598,209],{"emptyLinePlaceholder":208},[167,11600,11601,11603,11606,11608],{"class":169,"line":160},[167,11602,569],{"class":191},[167,11604,11605],{"class":181}," Task",[167,11607,223],{"class":191},[167,11609,1905],{"class":173},[167,11611,11612,11614,11616],{"class":169,"line":238},[167,11613,6505],{"class":254},[167,11615,583],{"class":191},[167,11617,6510],{"class":219},[167,11619,11620,11623,11625],{"class":169,"line":243},[167,11621,11622],{"class":254},"  title",[167,11624,583],{"class":191},[167,11626,6520],{"class":219},[167,11628,11629,11632,11634],{"class":169,"line":261},[167,11630,11631],{"class":254},"  done",[167,11633,583],{"class":191},[167,11635,11636],{"class":219}," boolean\n",[167,11638,11639],{"class":169,"line":273},[167,11640,276],{"class":173},[167,11642,11643],{"class":169,"line":279},[167,11644,209],{"emptyLinePlaceholder":208},[167,11646,11647,11649,11651,11653,11655,11657,11660],{"class":169,"line":289},[167,11648,216],{"class":191},[167,11650,3368],{"class":219},[167,11652,223],{"class":191},[167,11654,226],{"class":181},[167,11656,174],{"class":173},[167,11658,11659],{"class":181},"Task",[167,11661,11662],{"class":173},"[]>([])\n",[167,11664,11665,11667,11670,11672,11674,11676,11678,11680,11683,11685,11688,11690,11692],{"class":169,"line":294},[167,11666,216],{"class":191},[167,11668,11669],{"class":219}," filter",[167,11671,223],{"class":191},[167,11673,226],{"class":181},[167,11675,174],{"class":173},[167,11677,232],{"class":201},[167,11679,659],{"class":191},[167,11681,11682],{"class":201}," 'pending'",[167,11684,659],{"class":191},[167,11686,11687],{"class":201}," 'done'",[167,11689,6570],{"class":173},[167,11691,232],{"class":201},[167,11693,235],{"class":173},[167,11695,11696,11698,11701,11703,11705,11707,11710],{"class":169,"line":304},[167,11697,216],{"class":191},[167,11699,11700],{"class":219}," status",[167,11702,223],{"class":191},[167,11704,226],{"class":181},[167,11706,229],{"class":173},[167,11708,11709],{"class":201},"'Esperando carga...'",[167,11711,235],{"class":173},[167,11713,11714,11716,11719,11721,11723,11725,11727,11729,11731,11733,11735],{"class":169,"line":313},[167,11715,216],{"class":191},[167,11717,11718],{"class":219}," lastSync",[167,11720,223],{"class":191},[167,11722,226],{"class":181},[167,11724,174],{"class":173},[167,11726,1111],{"class":219},[167,11728,659],{"class":191},[167,11730,6567],{"class":219},[167,11732,6570],{"class":173},[167,11734,6573],{"class":219},[167,11736,235],{"class":173},[167,11738,11739,11741,11744,11746,11748,11750,11753,11755,11758,11761,11764,11766,11768,11770],{"class":169,"line":161},[167,11740,216],{"class":191},[167,11742,11743],{"class":219}," poller",[167,11745,223],{"class":191},[167,11747,226],{"class":181},[167,11749,174],{"class":173},[167,11751,11752],{"class":181},"ReturnType",[167,11754,174],{"class":173},[167,11756,11757],{"class":191},"typeof",[167,11759,11760],{"class":173}," setInterval> ",[167,11762,11763],{"class":191},"|",[167,11765,6567],{"class":219},[167,11767,6570],{"class":173},[167,11769,6573],{"class":219},[167,11771,235],{"class":173},[167,11773,11774,11776,11779,11781,11783,11785,11787],{"class":169,"line":335},[167,11775,216],{"class":191},[167,11777,11778],{"class":219}," initialized",[167,11780,223],{"class":191},[167,11782,226],{"class":181},[167,11784,229],{"class":173},[167,11786,3392],{"class":219},[167,11788,235],{"class":173},[167,11790,11791],{"class":169,"line":341},[167,11792,209],{"emptyLinePlaceholder":208},[167,11794,11795,11797,11799,11801,11803,11805,11807],{"class":169,"line":489},[167,11796,216],{"class":191},[167,11798,8233],{"class":219},[167,11800,223],{"class":191},[167,11802,1898],{"class":181},[167,11804,1493],{"class":173},[167,11806,639],{"class":191},[167,11808,1905],{"class":173},[167,11810,11811,11813,11816,11818,11820],{"class":169,"line":495},[167,11812,2544],{"class":191},[167,11814,11815],{"class":173}," (filter.value ",[167,11817,2550],{"class":191},[167,11819,11682],{"class":201},[167,11821,258],{"class":173},[167,11823,11824,11826,11828,11830,11832,11834,11836,11838],{"class":169,"line":501},[167,11825,1937],{"class":191},[167,11827,3451],{"class":173},[167,11829,8252],{"class":181},[167,11831,229],{"class":173},[167,11833,5075],{"class":254},[167,11835,8259],{"class":191},[167,11837,5625],{"class":191},[167,11839,11840],{"class":173},"task.done)\n",[167,11842,11843],{"class":169,"line":512},[167,11844,3492],{"class":173},[167,11846,11847],{"class":169,"line":781},[167,11848,209],{"emptyLinePlaceholder":208},[167,11850,11851,11853,11855,11857,11859],{"class":169,"line":786},[167,11852,2544],{"class":191},[167,11854,11815],{"class":173},[167,11856,2550],{"class":191},[167,11858,11687],{"class":201},[167,11860,258],{"class":173},[167,11862,11863,11865,11867,11869,11871,11873,11875],{"class":169,"line":2678},[167,11864,1937],{"class":191},[167,11866,3451],{"class":173},[167,11868,8252],{"class":181},[167,11870,229],{"class":173},[167,11872,5075],{"class":254},[167,11874,8259],{"class":191},[167,11876,11877],{"class":173}," task.done)\n",[167,11879,11880],{"class":169,"line":2692},[167,11881,3492],{"class":173},[167,11883,11884],{"class":169,"line":3575},[167,11885,209],{"emptyLinePlaceholder":208},[167,11887,11888,11890],{"class":169,"line":5028},[167,11889,1539],{"class":191},[167,11891,11892],{"class":173}," tasks.value\n",[167,11894,11895],{"class":169,"line":5037},[167,11896,403],{"class":173},[167,11898,11899],{"class":169,"line":5046},[167,11900,209],{"emptyLinePlaceholder":208},[167,11902,11903,11905,11907,11910],{"class":169,"line":6756},[167,11904,2523],{"class":191},[167,11906,1432],{"class":191},[167,11908,11909],{"class":181}," fetchTasks",[167,11911,763],{"class":173},[167,11913,11914,11917,11919],{"class":169,"line":6778},[167,11915,11916],{"class":173},"  status.value ",[167,11918,267],{"class":191},[167,11920,11921],{"class":201}," 'Sincronizando...'\n",[167,11923,11924],{"class":169,"line":6783},[167,11925,209],{"emptyLinePlaceholder":208},[167,11927,11928,11930,11932,11934,11936,11938,11940,11943],{"class":169,"line":6788},[167,11929,1443],{"class":191},[167,11931,6614],{"class":219},[167,11933,223],{"class":191},[167,11935,3009],{"class":191},[167,11937,6621],{"class":181},[167,11939,229],{"class":173},[167,11941,11942],{"class":201},"'\u002Fapi\u002Ftasks'",[167,11944,235],{"class":173},[167,11946,11947,11949,11952,11954,11956,11958,11960,11962,11964,11966,11968,11971,11973,11975],{"class":169,"line":6793},[167,11948,1443],{"class":191},[167,11950,11951],{"class":219}," data",[167,11953,223],{"class":191},[167,11955,2526],{"class":173},[167,11957,2927],{"class":191},[167,11959,6683],{"class":173},[167,11961,6686],{"class":181},[167,11963,6689],{"class":173},[167,11965,6692],{"class":191},[167,11967,577],{"class":173},[167,11969,11970],{"class":254},"tasks",[167,11972,583],{"class":191},[167,11974,11605],{"class":181},[167,11976,11977],{"class":173},"[] }\n",[167,11979,11980],{"class":169,"line":6809},[167,11981,209],{"emptyLinePlaceholder":208},[167,11983,11984,11987,11989],{"class":169,"line":6824},[167,11985,11986],{"class":173},"  tasks.value ",[167,11988,267],{"class":191},[167,11990,11991],{"class":173}," data.tasks\n",[167,11993,11994,11997,11999,12001,12004,12006,12009,12011,12014],{"class":169,"line":6829},[167,11995,11996],{"class":173},"  lastSync.value ",[167,11998,267],{"class":191},[167,12000,4224],{"class":191},[167,12002,12003],{"class":181}," Date",[167,12005,2503],{"class":173},[167,12007,12008],{"class":181},"toLocaleTimeString",[167,12010,229],{"class":173},[167,12012,12013],{"class":201},"'es-CO'",[167,12015,235],{"class":173},[167,12017,12018,12020,12022],{"class":169,"line":6836},[167,12019,11916],{"class":173},[167,12021,267],{"class":191},[167,12023,12024],{"class":201}," 'Datos actualizados'\n",[167,12026,12027],{"class":169,"line":6845},[167,12028,276],{"class":173},[167,12030,12031],{"class":169,"line":6854},[167,12032,209],{"emptyLinePlaceholder":208},[167,12034,12035,12037,12040],{"class":169,"line":6861},[167,12036,246],{"class":191},[167,12038,12039],{"class":181}," startPolling",[167,12041,763],{"class":173},[167,12043,12044,12046,12049,12051,12053,12055],{"class":169,"line":6879},[167,12045,2544],{"class":191},[167,12047,12048],{"class":173}," (poller.value ",[167,12050,701],{"class":191},[167,12052,6567],{"class":219},[167,12054,693],{"class":173},[167,12056,2556],{"class":191},[167,12058,12059],{"class":169,"line":6884},[167,12060,209],{"emptyLinePlaceholder":208},[167,12062,12063,12066,12068,12071,12073,12075],{"class":169,"line":6889},[167,12064,12065],{"class":173},"  poller.value ",[167,12067,267],{"class":191},[167,12069,12070],{"class":181}," setInterval",[167,12072,1493],{"class":173},[167,12074,639],{"class":191},[167,12076,1905],{"class":173},[167,12078,12079,12082,12084],{"class":169,"line":6898},[167,12080,12081],{"class":191},"    void",[167,12083,11909],{"class":181},[167,12085,2917],{"class":173},[167,12087,12088,12090,12093],{"class":169,"line":6903},[167,12089,1957],{"class":173},[167,12091,12092],{"class":219},"30000",[167,12094,235],{"class":173},[167,12096,12097],{"class":169,"line":6912},[167,12098,276],{"class":173},[167,12100,12101],{"class":169,"line":6928},[167,12102,209],{"emptyLinePlaceholder":208},[167,12104,12105,12107,12110],{"class":169,"line":6949},[167,12106,246],{"class":191},[167,12108,12109],{"class":181}," stopPolling",[167,12111,763],{"class":173},[167,12113,12114,12116,12118,12120,12122,12124],{"class":169,"line":6954},[167,12115,2544],{"class":191},[167,12117,12048],{"class":173},[167,12119,2550],{"class":191},[167,12121,6567],{"class":219},[167,12123,693],{"class":173},[167,12125,2556],{"class":191},[167,12127,12128],{"class":169,"line":6975},[167,12129,209],{"emptyLinePlaceholder":208},[167,12131,12132,12135],{"class":169,"line":6989},[167,12133,12134],{"class":181},"  clearInterval",[167,12136,12137],{"class":173},"(poller.value)\n",[167,12139,12140,12142,12144],{"class":169,"line":7003},[167,12141,12065],{"class":173},[167,12143,267],{"class":191},[167,12145,12146],{"class":219}," null\n",[167,12148,12149],{"class":169,"line":7017},[167,12150,276],{"class":173},[167,12152,12153],{"class":169,"line":7026},[167,12154,209],{"emptyLinePlaceholder":208},[167,12156,12157,12159,12161,12163],{"class":169,"line":7031},[167,12158,6796],{"class":181},[167,12160,1493],{"class":173},[167,12162,639],{"class":191},[167,12164,1905],{"class":173},[167,12166,12167,12170,12172],{"class":169,"line":7048},[167,12168,12169],{"class":173},"  initialized.value ",[167,12171,267],{"class":191},[167,12173,3487],{"class":219},[167,12175,12176],{"class":169,"line":7057},[167,12177,403],{"class":173},[167,12179,12180],{"class":169,"line":7555},[167,12181,209],{"emptyLinePlaceholder":208},[167,12183,12184,12187,12189,12191,12193,12195],{"class":169,"line":7560},[167,12185,12186],{"class":181},"onActivated",[167,12188,229],{"class":173},[167,12190,2523],{"class":191},[167,12192,1469],{"class":173},[167,12194,639],{"class":191},[167,12196,1905],{"class":173},[167,12198,12199,12201,12203,12206,12208,12211,12213],{"class":169,"line":7579},[167,12200,11916],{"class":173},[167,12202,267],{"class":191},[167,12204,12205],{"class":173}," initialized.value ",[167,12207,8316],{"class":191},[167,12209,12210],{"class":201}," 'Vista reactivada'",[167,12212,5312],{"class":191},[167,12214,12215],{"class":201}," 'Cargando vista...'\n",[167,12217,12218,12220,12222],{"class":169,"line":7592},[167,12219,2575],{"class":191},[167,12221,11909],{"class":181},[167,12223,2917],{"class":173},[167,12225,12226,12229],{"class":169,"line":7605},[167,12227,12228],{"class":181},"  startPolling",[167,12230,2917],{"class":173},[167,12232,12233],{"class":169,"line":7618},[167,12234,403],{"class":173},[167,12236,12237],{"class":169,"line":7627},[167,12238,209],{"emptyLinePlaceholder":208},[167,12240,12241,12244,12246,12248],{"class":169,"line":7632},[167,12242,12243],{"class":181},"onDeactivated",[167,12245,1493],{"class":173},[167,12247,639],{"class":191},[167,12249,1905],{"class":173},[167,12251,12252,12254,12256],{"class":169,"line":7647},[167,12253,11916],{"class":173},[167,12255,267],{"class":191},[167,12257,12258],{"class":201}," 'Vista en pausa'\n",[167,12260,12261,12264],{"class":169,"line":7656},[167,12262,12263],{"class":181},"  stopPolling",[167,12265,2917],{"class":173},[167,12267,12268],{"class":169,"line":10073},[167,12269,403],{"class":173},[167,12271,12272,12274,12276],{"class":169,"line":10084},[167,12273,282],{"class":173},[167,12275,178],{"class":177},[167,12277,185],{"class":173},[167,12279,12280],{"class":169,"line":10089},[167,12281,209],{"emptyLinePlaceholder":208},[167,12283,12284,12286,12288],{"class":169,"line":10098},[167,12285,174],{"class":173},[167,12287,299],{"class":177},[167,12289,185],{"class":173},[167,12291,12292,12294,12296,12298,12300,12303],{"class":169,"line":10103},[167,12293,307],{"class":173},[167,12295,10117],{"class":177},[167,12297,1245],{"class":181},[167,12299,267],{"class":173},[167,12301,12302],{"class":201},"\"task-report\"",[167,12304,185],{"class":173},[167,12306,12307,12309,12311],{"class":169,"line":10112},[167,12308,1257],{"class":173},[167,12310,1260],{"class":177},[167,12312,185],{"class":173},[167,12314,12315,12317,12319,12322,12324],{"class":169,"line":10129},[167,12316,1268],{"class":173},[167,12318,22],{"class":177},[167,12320,12321],{"class":173},">Reporte de tareas\u003C\u002F",[167,12323,22],{"class":177},[167,12325,185],{"class":173},[167,12327,12328,12330,12332,12335,12337],{"class":169,"line":10138},[167,12329,1268],{"class":173},[167,12331,15],{"class":177},[167,12333,12334],{"class":173},">{{ status }}\u003C\u002F",[167,12336,15],{"class":177},[167,12338,185],{"class":173},[167,12340,12341,12343,12345,12347,12349,12352,12355,12357],{"class":169,"line":10152},[167,12342,1268],{"class":173},[167,12344,15],{"class":177},[167,12346,5694],{"class":181},[167,12348,267],{"class":173},[167,12350,12351],{"class":201},"\"lastSync\"",[167,12353,12354],{"class":173},">Última sincronización: {{ lastSync }}\u003C\u002F",[167,12356,15],{"class":177},[167,12358,185],{"class":173},[167,12360,12361,12363,12365],{"class":169,"line":10161},[167,12362,1292],{"class":173},[167,12364,1260],{"class":177},[167,12366,185],{"class":173},[167,12368,12369],{"class":169,"line":10167},[167,12370,209],{"emptyLinePlaceholder":208},[167,12372,12373,12375,12377,12379,12381,12384],{"class":169,"line":10177},[167,12374,1257],{"class":173},[167,12376,5691],{"class":177},[167,12378,1245],{"class":181},[167,12380,267],{"class":173},[167,12382,12383],{"class":201},"\"filters\"",[167,12385,185],{"class":173},[167,12387,12388,12390,12392,12394,12396,12399,12402,12404],{"class":169,"line":10186},[167,12389,1268],{"class":173},[167,12391,507],{"class":177},[167,12393,1182],{"class":181},[167,12395,267],{"class":173},[167,12397,12398],{"class":201},"\"filter = 'all'\"",[167,12400,12401],{"class":173},">Todas\u003C\u002F",[167,12403,507],{"class":177},[167,12405,185],{"class":173},[167,12407,12408,12410,12412,12414,12416,12419,12422,12424],{"class":169,"line":10191},[167,12409,1268],{"class":173},[167,12411,507],{"class":177},[167,12413,1182],{"class":181},[167,12415,267],{"class":173},[167,12417,12418],{"class":201},"\"filter = 'pending'\"",[167,12420,12421],{"class":173},">Pendientes\u003C\u002F",[167,12423,507],{"class":177},[167,12425,185],{"class":173},[167,12427,12428,12430,12432,12434,12436,12439,12442,12444],{"class":169,"line":10214},[167,12429,1268],{"class":173},[167,12431,507],{"class":177},[167,12433,1182],{"class":181},[167,12435,267],{"class":173},[167,12437,12438],{"class":201},"\"filter = 'done'\"",[167,12440,12441],{"class":173},">Completadas\u003C\u002F",[167,12443,507],{"class":177},[167,12445,185],{"class":173},[167,12447,12448,12450,12452],{"class":169,"line":10228},[167,12449,1292],{"class":173},[167,12451,5691],{"class":177},[167,12453,185],{"class":173},[167,12455,12456],{"class":169,"line":10241},[167,12457,209],{"emptyLinePlaceholder":208},[167,12459,12460,12462,12464],{"class":169,"line":10256},[167,12461,1257],{"class":173},[167,12463,33],{"class":177},[167,12465,185],{"class":173},[167,12467,12468,12470],{"class":169,"line":10283},[167,12469,1268],{"class":173},[167,12471,12472],{"class":177},"li\n",[167,12474,12475,12478,12480],{"class":169,"line":10292},[167,12476,12477],{"class":181},"        v-for",[167,12479,267],{"class":173},[167,12481,12482],{"class":201},"\"task in visibleTasks\"\n",[167,12484,12485,12488,12490],{"class":169,"line":10297},[167,12486,12487],{"class":181},"        :key",[167,12489,267],{"class":173},[167,12491,3546],{"class":201},[167,12493,12494],{"class":169,"line":10317},[167,12495,10532],{"class":173},[167,12497,12498],{"class":169,"line":10326},[167,12499,12500],{"class":173},"        {{ task.title }}\n",[167,12502,12503,12505,12507],{"class":169,"line":10981},[167,12504,10170],{"class":173},[167,12506,36],{"class":177},[167,12508,185],{"class":173},[167,12510,12511,12513,12515],{"class":169,"line":10994},[167,12512,1292],{"class":173},[167,12514,33],{"class":177},[167,12516,185],{"class":173},[167,12518,12519,12521,12523],{"class":169,"line":11007},[167,12520,504],{"class":173},[167,12522,10117],{"class":177},[167,12524,185],{"class":173},[167,12526,12527,12529,12531],{"class":169,"line":11032},[167,12528,282],{"class":173},[167,12530,299],{"class":177},[167,12532,185],{"class":173},[154,12534,12537],{"className":156,"code":12535,"filename":12536,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      tasks: [],\n      filter: 'all',\n      status: 'Esperando carga...',\n      lastSync: null,\n      poller: null,\n      initialized: false\n    }\n  },\n\n  computed: {\n    visibleTasks() {\n      if (this.filter === 'pending') {\n        return this.tasks.filter(task => !task.done)\n      }\n\n      if (this.filter === 'done') {\n        return this.tasks.filter(task => task.done)\n      }\n\n      return this.tasks\n    }\n  },\n\n  mounted() {\n    this.initialized = true\n  },\n\n  async activated() {\n    this.status = this.initialized ? 'Vista reactivada' : 'Cargando vista...'\n    await this.fetchTasks()\n    this.startPolling()\n  },\n\n  deactivated() {\n    this.status = 'Vista en pausa'\n    this.stopPolling()\n  },\n\n  methods: {\n    async fetchTasks() {\n      this.status = 'Sincronizando...'\n\n      const response = await fetch('\u002Fapi\u002Ftasks')\n      const data = await response.json()\n\n      this.tasks = data.tasks\n      this.lastSync = new Date().toLocaleTimeString('es-CO')\n      this.status = 'Datos actualizados'\n    },\n\n    startPolling() {\n      if (this.poller !== null) return\n\n      this.poller = setInterval(() => {\n        void this.fetchTasks()\n      }, 30000)\n    },\n\n    stopPolling() {\n      if (this.poller === null) return\n\n      clearInterval(this.poller)\n      this.poller = null\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-report\">\n    \u003Cheader>\n      \u003Ch2>Reporte de tareas\u003C\u002Fh2>\n      \u003Cp>{{ status }}\u003C\u002Fp>\n      \u003Cp v-if=\"lastSync\">Última sincronización: {{ lastSync }}\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cnav class=\"filters\">\n      \u003Cbutton @click=\"filter = 'all'\">Todas\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'pending'\">Pendientes\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'done'\">Completadas\u003C\u002Fbutton>\n    \u003C\u002Fnav>\n\n    \u003Cul>\n      \u003Cli\n        v-for=\"task in visibleTasks\"\n        :key=\"task.id\"\n      >\n        {{ task.title }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","Options Api",[87,12538,12539,12547,12555,12561,12567,12572,12581,12590,12599,12608,12615,12619,12623,12627,12631,12637,12654,12674,12678,12682,12698,12716,12720,12724,12733,12737,12741,12745,12752,12763,12767,12771,12780,12801,12814,12825,12829,12833,12840,12850,12861,12865,12869,12873,12881,12891,12895,12913,12929,12933,12944,12967,12977,12981,12985,12992,13011,13015,13031,13044,13053,13057,13061,13068,13086,13090,13102,13112,13116,13120,13124,13132,13136,13144,13158,13166,13178,13190,13208,13216,13220,13234,13252,13270,13288,13296,13300,13308,13314,13322,13330,13334,13338,13346,13354,13362],{"__ignoreMap":163},[167,12540,12541,12543,12545],{"class":169,"line":170},[167,12542,174],{"class":173},[167,12544,178],{"class":177},[167,12546,185],{"class":173},[167,12548,12549,12551,12553],{"class":169,"line":188},[167,12550,608],{"class":191},[167,12552,3991],{"class":191},[167,12554,1905],{"class":173},[167,12556,12557,12559],{"class":169,"line":205},[167,12558,7176],{"class":181},[167,12560,763],{"class":173},[167,12562,12563,12565],{"class":169,"line":160},[167,12564,1937],{"class":191},[167,12566,1905],{"class":173},[167,12568,12569],{"class":169,"line":238},[167,12570,12571],{"class":173},"      tasks: [],\n",[167,12573,12574,12577,12579],{"class":169,"line":243},[167,12575,12576],{"class":173},"      filter: ",[167,12578,232],{"class":201},[167,12580,393],{"class":173},[167,12582,12583,12586,12588],{"class":169,"line":261},[167,12584,12585],{"class":173},"      status: ",[167,12587,11709],{"class":201},[167,12589,393],{"class":173},[167,12591,12592,12595,12597],{"class":169,"line":273},[167,12593,12594],{"class":173},"      lastSync: ",[167,12596,6573],{"class":219},[167,12598,393],{"class":173},[167,12600,12601,12604,12606],{"class":169,"line":279},[167,12602,12603],{"class":173},"      poller: ",[167,12605,6573],{"class":219},[167,12607,393],{"class":173},[167,12609,12610,12613],{"class":169,"line":289},[167,12611,12612],{"class":173},"      initialized: ",[167,12614,8093],{"class":219},[167,12616,12617],{"class":169,"line":294},[167,12618,4049],{"class":173},[167,12620,12621],{"class":169,"line":304},[167,12622,398],{"class":173},[167,12624,12625],{"class":169,"line":313},[167,12626,209],{"emptyLinePlaceholder":208},[167,12628,12629],{"class":169,"line":161},[167,12630,8755],{"class":173},[167,12632,12633,12635],{"class":169,"line":335},[167,12634,8760],{"class":181},[167,12636,763],{"class":173},[167,12638,12639,12641,12643,12645,12648,12650,12652],{"class":169,"line":341},[167,12640,7261],{"class":191},[167,12642,2526],{"class":173},[167,12644,4927],{"class":219},[167,12646,12647],{"class":173},".filter ",[167,12649,2550],{"class":191},[167,12651,11682],{"class":201},[167,12653,258],{"class":173},[167,12655,12656,12658,12660,12662,12664,12666,12668,12670,12672],{"class":169,"line":489},[167,12657,8855],{"class":191},[167,12659,7351],{"class":219},[167,12661,8772],{"class":173},[167,12663,8252],{"class":181},[167,12665,229],{"class":173},[167,12667,5075],{"class":254},[167,12669,8259],{"class":191},[167,12671,5625],{"class":191},[167,12673,11840],{"class":173},[167,12675,12676],{"class":169,"line":495},[167,12677,7287],{"class":173},[167,12679,12680],{"class":169,"line":501},[167,12681,209],{"emptyLinePlaceholder":208},[167,12683,12684,12686,12688,12690,12692,12694,12696],{"class":169,"line":512},[167,12685,7261],{"class":191},[167,12687,2526],{"class":173},[167,12689,4927],{"class":219},[167,12691,12647],{"class":173},[167,12693,2550],{"class":191},[167,12695,11687],{"class":201},[167,12697,258],{"class":173},[167,12699,12700,12702,12704,12706,12708,12710,12712,12714],{"class":169,"line":781},[167,12701,8855],{"class":191},[167,12703,7351],{"class":219},[167,12705,8772],{"class":173},[167,12707,8252],{"class":181},[167,12709,229],{"class":173},[167,12711,5075],{"class":254},[167,12713,8259],{"class":191},[167,12715,11877],{"class":173},[167,12717,12718],{"class":169,"line":786},[167,12719,7287],{"class":173},[167,12721,12722],{"class":169,"line":2678},[167,12723,209],{"emptyLinePlaceholder":208},[167,12725,12726,12728,12730],{"class":169,"line":2692},[167,12727,8767],{"class":191},[167,12729,7351],{"class":219},[167,12731,12732],{"class":173},".tasks\n",[167,12734,12735],{"class":169,"line":3575},[167,12736,4049],{"class":173},[167,12738,12739],{"class":169,"line":5028},[167,12740,398],{"class":173},[167,12742,12743],{"class":169,"line":5037},[167,12744,209],{"emptyLinePlaceholder":208},[167,12746,12747,12750],{"class":169,"line":5046},[167,12748,12749],{"class":181},"  mounted",[167,12751,763],{"class":173},[167,12753,12754,12756,12759,12761],{"class":169,"line":6756},[167,12755,879],{"class":219},[167,12757,12758],{"class":173},".initialized ",[167,12760,267],{"class":191},[167,12762,3487],{"class":219},[167,12764,12765],{"class":169,"line":6778},[167,12766,398],{"class":173},[167,12768,12769],{"class":169,"line":6783},[167,12770,209],{"emptyLinePlaceholder":208},[167,12772,12773,12775,12778],{"class":169,"line":6788},[167,12774,7331],{"class":191},[167,12776,12777],{"class":181}," activated",[167,12779,763],{"class":173},[167,12781,12782,12784,12787,12789,12791,12793,12795,12797,12799],{"class":169,"line":6793},[167,12783,879],{"class":219},[167,12785,12786],{"class":173},".status ",[167,12788,267],{"class":191},[167,12790,7351],{"class":219},[167,12792,12758],{"class":173},[167,12794,8316],{"class":191},[167,12796,12210],{"class":201},[167,12798,5312],{"class":191},[167,12800,12215],{"class":201},[167,12802,12803,12805,12807,12809,12812],{"class":169,"line":6809},[167,12804,6730],{"class":191},[167,12806,7351],{"class":219},[167,12808,1679],{"class":173},[167,12810,12811],{"class":181},"fetchTasks",[167,12813,2917],{"class":173},[167,12815,12816,12818,12820,12823],{"class":169,"line":6824},[167,12817,879],{"class":219},[167,12819,1679],{"class":173},[167,12821,12822],{"class":181},"startPolling",[167,12824,2917],{"class":173},[167,12826,12827],{"class":169,"line":6829},[167,12828,398],{"class":173},[167,12830,12831],{"class":169,"line":6836},[167,12832,209],{"emptyLinePlaceholder":208},[167,12834,12835,12838],{"class":169,"line":6845},[167,12836,12837],{"class":181},"  deactivated",[167,12839,763],{"class":173},[167,12841,12842,12844,12846,12848],{"class":169,"line":6854},[167,12843,879],{"class":219},[167,12845,12786],{"class":173},[167,12847,267],{"class":191},[167,12849,12258],{"class":201},[167,12851,12852,12854,12856,12859],{"class":169,"line":6861},[167,12853,879],{"class":219},[167,12855,1679],{"class":173},[167,12857,12858],{"class":181},"stopPolling",[167,12860,2917],{"class":173},[167,12862,12863],{"class":169,"line":6879},[167,12864,398],{"class":173},[167,12866,12867],{"class":169,"line":6884},[167,12868,209],{"emptyLinePlaceholder":208},[167,12870,12871],{"class":169,"line":6889},[167,12872,4419],{"class":173},[167,12874,12875,12877,12879],{"class":169,"line":6898},[167,12876,7230],{"class":191},[167,12878,11909],{"class":181},[167,12880,763],{"class":173},[167,12882,12883,12885,12887,12889],{"class":169,"line":6903},[167,12884,741],{"class":219},[167,12886,12786],{"class":173},[167,12888,267],{"class":191},[167,12890,11921],{"class":201},[167,12892,12893],{"class":169,"line":6912},[167,12894,209],{"emptyLinePlaceholder":208},[167,12896,12897,12899,12901,12903,12905,12907,12909,12911],{"class":169,"line":6928},[167,12898,4435],{"class":191},[167,12900,6614],{"class":219},[167,12902,223],{"class":191},[167,12904,3009],{"class":191},[167,12906,6621],{"class":181},[167,12908,229],{"class":173},[167,12910,11942],{"class":201},[167,12912,235],{"class":173},[167,12914,12915,12917,12919,12921,12923,12925,12927],{"class":169,"line":6949},[167,12916,4435],{"class":191},[167,12918,11951],{"class":219},[167,12920,223],{"class":191},[167,12922,3009],{"class":191},[167,12924,6683],{"class":173},[167,12926,6686],{"class":181},[167,12928,2917],{"class":173},[167,12930,12931],{"class":169,"line":6954},[167,12932,209],{"emptyLinePlaceholder":208},[167,12934,12935,12937,12940,12942],{"class":169,"line":6975},[167,12936,741],{"class":219},[167,12938,12939],{"class":173},".tasks ",[167,12941,267],{"class":191},[167,12943,11991],{"class":173},[167,12945,12946,12948,12951,12953,12955,12957,12959,12961,12963,12965],{"class":169,"line":6989},[167,12947,741],{"class":219},[167,12949,12950],{"class":173},".lastSync ",[167,12952,267],{"class":191},[167,12954,4224],{"class":191},[167,12956,12003],{"class":181},[167,12958,2503],{"class":173},[167,12960,12008],{"class":181},[167,12962,229],{"class":173},[167,12964,12013],{"class":201},[167,12966,235],{"class":173},[167,12968,12969,12971,12973,12975],{"class":169,"line":7003},[167,12970,741],{"class":219},[167,12972,12786],{"class":173},[167,12974,267],{"class":191},[167,12976,12024],{"class":201},[167,12978,12979],{"class":169,"line":7017},[167,12980,755],{"class":173},[167,12982,12983],{"class":169,"line":7026},[167,12984,209],{"emptyLinePlaceholder":208},[167,12986,12987,12990],{"class":169,"line":7031},[167,12988,12989],{"class":181},"    startPolling",[167,12991,763],{"class":173},[167,12993,12994,12996,12998,13000,13003,13005,13007,13009],{"class":169,"line":7048},[167,12995,7261],{"class":191},[167,12997,2526],{"class":173},[167,12999,4927],{"class":219},[167,13001,13002],{"class":173},".poller ",[167,13004,701],{"class":191},[167,13006,6567],{"class":219},[167,13008,693],{"class":173},[167,13010,2556],{"class":191},[167,13012,13013],{"class":169,"line":7057},[167,13014,209],{"emptyLinePlaceholder":208},[167,13016,13017,13019,13021,13023,13025,13027,13029],{"class":169,"line":7555},[167,13018,741],{"class":219},[167,13020,13002],{"class":173},[167,13022,267],{"class":191},[167,13024,12070],{"class":181},[167,13026,1493],{"class":173},[167,13028,639],{"class":191},[167,13030,1905],{"class":173},[167,13032,13033,13036,13038,13040,13042],{"class":169,"line":7560},[167,13034,13035],{"class":191},"        void",[167,13037,7351],{"class":219},[167,13039,1679],{"class":173},[167,13041,12811],{"class":181},[167,13043,2917],{"class":173},[167,13045,13046,13049,13051],{"class":169,"line":7579},[167,13047,13048],{"class":173},"      }, ",[167,13050,12092],{"class":219},[167,13052,235],{"class":173},[167,13054,13055],{"class":169,"line":7592},[167,13056,755],{"class":173},[167,13058,13059],{"class":169,"line":7605},[167,13060,209],{"emptyLinePlaceholder":208},[167,13062,13063,13066],{"class":169,"line":7618},[167,13064,13065],{"class":181},"    stopPolling",[167,13067,763],{"class":173},[167,13069,13070,13072,13074,13076,13078,13080,13082,13084],{"class":169,"line":7627},[167,13071,7261],{"class":191},[167,13073,2526],{"class":173},[167,13075,4927],{"class":219},[167,13077,13002],{"class":173},[167,13079,2550],{"class":191},[167,13081,6567],{"class":219},[167,13083,693],{"class":173},[167,13085,2556],{"class":191},[167,13087,13088],{"class":169,"line":7632},[167,13089,209],{"emptyLinePlaceholder":208},[167,13091,13092,13095,13097,13099],{"class":169,"line":7647},[167,13093,13094],{"class":181},"      clearInterval",[167,13096,229],{"class":173},[167,13098,4927],{"class":219},[167,13100,13101],{"class":173},".poller)\n",[167,13103,13104,13106,13108,13110],{"class":169,"line":7656},[167,13105,741],{"class":219},[167,13107,13002],{"class":173},[167,13109,267],{"class":191},[167,13111,12146],{"class":219},[167,13113,13114],{"class":169,"line":10073},[167,13115,4049],{"class":173},[167,13117,13118],{"class":169,"line":10084},[167,13119,3492],{"class":173},[167,13121,13122],{"class":169,"line":10089},[167,13123,276],{"class":173},[167,13125,13126,13128,13130],{"class":169,"line":10098},[167,13127,282],{"class":173},[167,13129,178],{"class":177},[167,13131,185],{"class":173},[167,13133,13134],{"class":169,"line":10103},[167,13135,209],{"emptyLinePlaceholder":208},[167,13137,13138,13140,13142],{"class":169,"line":10112},[167,13139,174],{"class":173},[167,13141,299],{"class":177},[167,13143,185],{"class":173},[167,13145,13146,13148,13150,13152,13154,13156],{"class":169,"line":10129},[167,13147,307],{"class":173},[167,13149,10117],{"class":177},[167,13151,1245],{"class":181},[167,13153,267],{"class":173},[167,13155,12302],{"class":201},[167,13157,185],{"class":173},[167,13159,13160,13162,13164],{"class":169,"line":10138},[167,13161,1257],{"class":173},[167,13163,1260],{"class":177},[167,13165,185],{"class":173},[167,13167,13168,13170,13172,13174,13176],{"class":169,"line":10152},[167,13169,1268],{"class":173},[167,13171,22],{"class":177},[167,13173,12321],{"class":173},[167,13175,22],{"class":177},[167,13177,185],{"class":173},[167,13179,13180,13182,13184,13186,13188],{"class":169,"line":10161},[167,13181,1268],{"class":173},[167,13183,15],{"class":177},[167,13185,12334],{"class":173},[167,13187,15],{"class":177},[167,13189,185],{"class":173},[167,13191,13192,13194,13196,13198,13200,13202,13204,13206],{"class":169,"line":10167},[167,13193,1268],{"class":173},[167,13195,15],{"class":177},[167,13197,5694],{"class":181},[167,13199,267],{"class":173},[167,13201,12351],{"class":201},[167,13203,12354],{"class":173},[167,13205,15],{"class":177},[167,13207,185],{"class":173},[167,13209,13210,13212,13214],{"class":169,"line":10177},[167,13211,1292],{"class":173},[167,13213,1260],{"class":177},[167,13215,185],{"class":173},[167,13217,13218],{"class":169,"line":10186},[167,13219,209],{"emptyLinePlaceholder":208},[167,13221,13222,13224,13226,13228,13230,13232],{"class":169,"line":10191},[167,13223,1257],{"class":173},[167,13225,5691],{"class":177},[167,13227,1245],{"class":181},[167,13229,267],{"class":173},[167,13231,12383],{"class":201},[167,13233,185],{"class":173},[167,13235,13236,13238,13240,13242,13244,13246,13248,13250],{"class":169,"line":10214},[167,13237,1268],{"class":173},[167,13239,507],{"class":177},[167,13241,1182],{"class":181},[167,13243,267],{"class":173},[167,13245,12398],{"class":201},[167,13247,12401],{"class":173},[167,13249,507],{"class":177},[167,13251,185],{"class":173},[167,13253,13254,13256,13258,13260,13262,13264,13266,13268],{"class":169,"line":10228},[167,13255,1268],{"class":173},[167,13257,507],{"class":177},[167,13259,1182],{"class":181},[167,13261,267],{"class":173},[167,13263,12418],{"class":201},[167,13265,12421],{"class":173},[167,13267,507],{"class":177},[167,13269,185],{"class":173},[167,13271,13272,13274,13276,13278,13280,13282,13284,13286],{"class":169,"line":10241},[167,13273,1268],{"class":173},[167,13275,507],{"class":177},[167,13277,1182],{"class":181},[167,13279,267],{"class":173},[167,13281,12438],{"class":201},[167,13283,12441],{"class":173},[167,13285,507],{"class":177},[167,13287,185],{"class":173},[167,13289,13290,13292,13294],{"class":169,"line":10256},[167,13291,1292],{"class":173},[167,13293,5691],{"class":177},[167,13295,185],{"class":173},[167,13297,13298],{"class":169,"line":10283},[167,13299,209],{"emptyLinePlaceholder":208},[167,13301,13302,13304,13306],{"class":169,"line":10292},[167,13303,1257],{"class":173},[167,13305,33],{"class":177},[167,13307,185],{"class":173},[167,13309,13310,13312],{"class":169,"line":10297},[167,13311,1268],{"class":173},[167,13313,12472],{"class":177},[167,13315,13316,13318,13320],{"class":169,"line":10317},[167,13317,12477],{"class":181},[167,13319,267],{"class":173},[167,13321,12482],{"class":201},[167,13323,13324,13326,13328],{"class":169,"line":10326},[167,13325,12487],{"class":181},[167,13327,267],{"class":173},[167,13329,3546],{"class":201},[167,13331,13332],{"class":169,"line":10981},[167,13333,10532],{"class":173},[167,13335,13336],{"class":169,"line":10994},[167,13337,12500],{"class":173},[167,13339,13340,13342,13344],{"class":169,"line":11007},[167,13341,10170],{"class":173},[167,13343,36],{"class":177},[167,13345,185],{"class":173},[167,13347,13348,13350,13352],{"class":169,"line":11032},[167,13349,1292],{"class":173},[167,13351,33],{"class":177},[167,13353,185],{"class":173},[167,13355,13356,13358,13360],{"class":169,"line":11041},[167,13357,504],{"class":173},[167,13359,10117],{"class":177},[167,13361,185],{"class":173},[167,13363,13364,13366,13368],{"class":169,"line":11046},[167,13365,282],{"class":173},[167,13367,299],{"class":177},[167,13369,185],{"class":173},[33,13371,13372,13377,13382,13385],{},[36,13373,13374,13376],{},[87,13375,11226],{}," cubre tanto la primera activación como cada regreso desde caché.",[36,13378,13379,13381],{},[87,13380,11234],{}," pausa el polling para no seguir consumiendo recursos fuera de pantalla.",[36,13383,13384],{},"El filtro local se conserva porque la instancia no se destruye.",[36,13386,13387,13389],{},[87,13388,6400],{}," queda reservado para trabajo realmente inicial; aquí solo marca que la instancia ya pasó por su montaje inicial.",[22,13391,7678],{"id":7677},[33,13393,13394,13399,13404,13409,13412],{},[36,13395,13396,13398],{},[87,13397,11158],{}," conserva la instancia y su estado local entre cambios de vista.",[36,13400,13401,13403],{},[87,13402,11161],{}," no significa “montar otra vez”, sino “volver a estar activo”.",[36,13405,13406,13408],{},[87,13407,11164],{}," es el hook adecuado para pausar trabajo cuando la instancia queda cacheada.",[36,13410,13411],{},"Conservar estado no evita que tengas que revalidar datos cuando la vista regresa.",[36,13413,13414],{},"Si el componente debe reiniciarse siempre desde cero, probablemente no deberías cachearlo.",[924,13416,7689],{},{"title":163,"searchDepth":188,"depth":188,"links":13418},[13419,13420,13421,13422,13423,13424,13432,13437],{"id":11150,"depth":188,"text":11151},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":11370,"depth":188,"text":11371},{"id":3084,"depth":188,"text":3085,"children":13425},[13426,13428,13429,13431],{"id":11459,"depth":205,"text":13427},"1. Cargar datos solo en mounted",{"id":11476,"depth":205,"text":11477},{"id":11496,"depth":205,"text":13430},"3. Esperar unmounted al cambiar entre tabs cacheadas",{"id":11515,"depth":205,"text":11516},{"id":7996,"depth":188,"text":7997,"children":13433},[13434,13435,13436],{"id":11529,"depth":205,"text":11530},{"id":11542,"depth":205,"text":11543},{"id":11552,"depth":205,"text":11553},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773371011\u002Fvue-lifecycle-keepalive-activated-deactivated_abjmwe.png","Ilustración de componentes cacheados con KeepAlive en Vue usando activated y deactivated","2026-03-13","Cómo funcionan activated y deactivated en componentes cacheados con \u003CKeepAlive>, cuándo usarlos y cómo evitar datos obsoletos, timers activos y lógica mal ubicada.",{"updatedAt":13443,"coverCaption":13444,"author":946,"keywords":13445},"2026-03-12T23:00:00-05:00","KeepAlive permite desactivar y reactivar componentes sin destruir su estado local",[3258,13446,11161,11164,13447],"KeepAlive","cache de componentes","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[13450],{"headline":11145,"author":13451,"datePublished":13443,"@type":961},{"name":946,"@type":959},{"title":11145,"description":13441},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[13455,13456,13458,13459],{"tag":7724,"color":7725},{"tag":13446,"color":13457},"#27AE60",{"tag":1625,"color":1639},{"tag":7730,"color":7731},"LTJL6v4mw6lt5Nb8vhKocgwmO5u1q1TkDLjAgpE1abw",{"id":13462,"title":13463,"body":13464,"cover":15003,"coverAlt":15004,"date":15005,"description":15006,"draft":940,"extension":941,"lab":942,"locale":943,"meta":15007,"navigation":208,"path":15012,"schemaOrg":15013,"seo":15016,"series":7718,"seriesDescription":7719,"seriesOrder":238,"seriesTitle":7720,"slug":942,"stem":15017,"tags":15018,"__hash__":15022},"blog\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es.md","Ciclos de vida en Vue: fase de desmontaje (beforeUnmount, unmounted)",{"type":8,"value":13465,"toc":14983},[13466,13475,13481,13489,13491,13501,13504,13521,13524,13536,13539,13551,13556,13558,13561,13563,13593,13596,13615,13617,13620,13628,13645,13648,13667,13670,13674,13723,13730,13732,13739,13742,13745,13769,13772,13778,13786,13792,13796,13805,13813,13816,13820,13826,13829,13831,13835,13838,13842,13848,13852,13861,14418,14944,14961,14963,14981],[11,13467,13469,13470,1025,13473,6219],{"id":13468},"ciclos-de-vida-en-vue-fase-de-desmontaje-beforeunmount-unmounted","Ciclos de vida en Vue: fase de desmontaje (",[87,13471,13472],{},"beforeUnmount",[87,13474,11276],{},[15,13476,13477,13478,13480],{},"Muchos bugs no nacen cuando un componente aparece, sino cuando desaparece. Un listener global que quedó activo, un ",[87,13479,11483],{}," que nunca se limpió o una petición que sigue en curso cuando el usuario ya cambió de vista suelen empezar ahí.",[15,13482,13483,13484,1028,13486,13488],{},"La fase de desmontaje sirve para cerrar correctamente esa historia. No se trata solo de “borrar cosas”, sino de dejar el componente en orden cuando Vue lo retira del árbol. Si entiendes bien la diferencia entre ",[87,13485,13472],{},[87,13487,11276],{},", puedes evitar fugas de memoria, efectos duplicados y componentes que siguen haciendo trabajo cuando ya no existen en pantalla.",[22,13490,6257],{"id":6256},[15,13492,13493,13494,13497,13498,13500],{},"El desmontaje ocurre cuando Vue decide retirar un componente del árbol activo. Esto puede pasar, por ejemplo, si un ",[87,13495,13496],{},"v-if"," cambia a ",[87,13499,3392],{},", si cambias de ruta o si un componente dinámico deja de renderizarse.",[15,13502,13503],{},"En esa fase aparecen dos hooks:",[33,13505,13506,13514],{},[36,13507,13508,13510,13511,1679],{},[87,13509,13472],{},": se ejecuta ",[3933,13512,13513],{},"justo antes de que Vue desmonte el componente",[36,13515,13516,13510,13518,1679],{},[87,13517,11276],{},[3933,13519,13520],{},"cuando el componente ya fue desmontado",[15,13522,13523],{},"En Composition API, los equivalentes son:",[33,13525,13526,13531],{},[36,13527,13528],{},[87,13529,13530],{},"onBeforeUnmount()",[36,13532,13533],{},[87,13534,13535],{},"onUnmounted()",[15,13537,13538],{},"La diferencia importante es esta:",[33,13540,13541,13546],{},[36,13542,6304,13543,13545],{},[87,13544,13472],{}," la instancia todavía existe y puedes acceder a su estado, refs y recursos activos para limpiarlos.",[36,13547,6304,13548,13550],{},[87,13549,11276],{}," Vue ya terminó el desmontaje y ya detuvo los efectos reactivos del componente. Ese punto sirve más para confirmaciones finales, trazas o integraciones muy concretas.",[15,13552,13553,13554,1679],{},"En la práctica, casi toda la limpieza útil ocurre en ",[87,13555,13472],{},[22,13557,6322],{"id":6321},[15,13559,13560],{},"La fase de desmontaje tiene sentido cuando el componente abrió recursos que no deben seguir vivos después.",[15,13562,9308],{},[33,13564,13565,13573,13587,13590],{},[36,13566,13567,13568,1025,13570,13572],{},"Quitar listeners registrados sobre ",[87,13569,6414],{},[87,13571,6417],{}," o cualquier objeto externo.",[36,13574,13575,13576,1025,13578,1025,13581,90,13584,1679],{},"Limpiar ",[87,13577,11483],{},[87,13579,13580],{},"setTimeout",[87,13582,13583],{},"requestAnimationFrame",[87,13585,13586],{},"ResizeObserver",[36,13588,13589],{},"Cerrar sockets, desconectar observers o abortar peticiones pendientes.",[36,13591,13592],{},"Guardar una última traza de depuración o telemetría cuando el componente ya terminó de salir.",[15,13594,13595],{},"Una regla sencilla:",[33,13597,13598,13607],{},[36,13599,13600,13601,13604,13605,1679],{},"Si necesitas ",[3933,13602,13603],{},"desconectar o cancelar algo",", piensa primero en ",[87,13606,13472],{},[36,13608,13600,13609,13612,13613,1679],{},[3933,13610,13611],{},"saber que el componente ya terminó de salir",", piensa en ",[87,13614,11276],{},[22,13616,6349],{"id":6348},[15,13618,13619],{},"No todo debe ir en estos hooks.",[15,13621,13622,13623,1028,13625,13627],{},"Evita ",[87,13624,13472],{},[87,13626,11276],{}," cuando:",[33,13629,13630,13636,13639,13642],{},[36,13631,13632,13633,1679],{},"La lógica puede quedar encapsulada en un composable usando ",[87,13634,13635],{},"onScopeDispose",[36,13637,13638],{},"El recurso ya se limpia automáticamente y no requiere intervención manual.",[36,13640,13641],{},"Estás usando el hook para corregir un problema que en realidad viene de una mala estructura del componente.",[36,13643,13644],{},"El componente no se desmonta realmente, sino que solo se oculta.",[15,13646,13647],{},"Ese último punto importa mucho:",[33,13649,13650,13655,13661],{},[36,13651,13652,13654],{},[87,13653,13496],{}," puede desmontar un componente.",[36,13656,13657,13660],{},[87,13658,13659],{},"v-show"," solo lo oculta.",[36,13662,13663,13664,13666],{},"Un componente cacheado con ",[87,13665,11158],{}," puede desactivarse sin desmontarse.",[15,13668,13669],{},"Si confundes esos casos, esperarás un hook que nunca se ejecutará.",[22,13671,13673],{"id":13672},"comparación","Comparación",[56,13675,13676,13691],{},[59,13677,13678],{},[62,13679,13680,13682,13685,13688],{},[65,13681,11380],{},[65,13683,13684],{},"Qué sigue disponible",[65,13686,13687],{},"Uso natural",[65,13689,13690],{},"Riesgo habitual",[75,13692,13693,13708],{},[62,13694,13695,13699,13702,13705],{},[80,13696,13697],{},[87,13698,13472],{},[80,13700,13701],{},"Instancia, refs, estado y recursos activos",[80,13703,13704],{},"Limpiar listeners, timers, observers o abortar peticiones",[80,13706,13707],{},"Dejar demasiado trabajo para después",[62,13709,13710,13714,13717,13720],{},[80,13711,13712],{},[87,13713,11276],{},[80,13715,13716],{},"El componente ya salió del árbol y sus efectos fueron detenidos",[80,13718,13719],{},"Trazas finales o integraciones puntuales",[80,13721,13722],{},"Intentar hacer limpieza que dependía de la instancia viva",[15,13724,13725,13727,13728,1679],{},[87,13726,11276],{}," existe, pero eso no significa que deba cargar con toda la responsabilidad del cierre. Si necesitas tocar algo que el componente abrió, normalmente llegaste tarde si esperas a ",[87,13729,11276],{},[22,13731,3085],{"id":3084},[3087,13733,13735,13736,13738],{"id":13734},"_1-registrar-recursos-en-mounted-y-olvidarse-del-cierre","1. Registrar recursos en ",[87,13737,6393],{}," y olvidarse del cierre",[15,13740,13741],{},"Es el error más común. El componente se monta correctamente, funciona durante un tiempo y luego empieza a comportarse de forma extraña porque un listener antiguo sigue respondiendo aunque la vista ya cambió.",[15,13743,13744],{},"Esto suele pasar con:",[33,13746,13747,13752,13757,13762,13766],{},[36,13748,13749],{},[87,13750,13751],{},"window.addEventListener()",[36,13753,13754],{},[87,13755,13756],{},"setInterval()",[36,13758,13759],{},[87,13760,13761],{},"IntersectionObserver",[36,13763,13764],{},[87,13765,13586],{},[36,13767,13768],{},"websockets o suscripciones externas",[15,13770,13771],{},"Si lo abriste manualmente, debes asumir que también te corresponde cerrarlo.",[3087,13773,13775,13776],{"id":13774},"_2-dejar-toda-la-limpieza-en-unmounted","2. Dejar toda la limpieza en ",[87,13777,11276],{},[15,13779,13780,13782,13783,13785],{},[87,13781,11276],{}," no es el lugar ideal para todo. Si necesitas abortar una petición, desconectar un observer o retirar listeners mientras la instancia todavía es accesible, ",[87,13784,13472],{}," es más claro y más seguro.",[15,13787,13788,13789,13791],{},"Piensa en ",[87,13790,13472],{}," como el momento de desmontar la mesa antes de sacarla del salón.",[3087,13793,13795],{"id":13794},"_3-confundir-ocultar-con-desmontar","3. Confundir ocultar con desmontar",[15,13797,13798,13799,13801,13802,13804],{},"Muchos desarrolladores esperan que ",[87,13800,13472],{}," se ejecute cuando un panel deja de verse. Pero si ese panel usa ",[87,13803,13659],{},", el componente sigue vivo.",[15,13806,13807,13808,13810,13811,1679],{},"También ocurre con ",[87,13809,11158],{},": al cambiar de vista, el componente puede quedar desactivado y luego reactivarse sin pasar por ",[87,13812,11276],{},[15,13814,13815],{},"Si el problema es de activación o desactivación, los hooks correctos pueden ser otros.",[3087,13817,13819],{"id":13818},"_4-lanzar-trabajo-nuevo-cuando-el-componente-ya-se-está-yendo","4. Lanzar trabajo nuevo cuando el componente ya se está yendo",[15,13821,13822,13823,13825],{},"No conviene iniciar nuevas tareas pesadas durante el desmontaje. Si en ",[87,13824,13472],{}," abres otra petición o empiezas otra suscripción, estás complicando justo el momento en que Vue intenta cerrar el componente.",[15,13827,13828],{},"La fase de desmontaje debería reducir trabajo, no crear más.",[22,13830,7997],{"id":7996},[3087,13832,13834],{"id":13833},"limpiar-listeners-globales-al-salir-de-una-vista","Limpiar listeners globales al salir de una vista",[15,13836,13837],{},"Si una vista escucha eventos del navegador, esos listeners deben desaparecer cuando la ruta cambia. De lo contrario, terminarás reaccionando dos veces al mismo evento cuando el usuario vuelva.",[3087,13839,13841],{"id":13840},"abortar-una-petición-pendiente","Abortar una petición pendiente",[15,13843,13844,13845,13847],{},"En componentes con navegación rápida, es normal que una solicitud siga en curso mientras el usuario ya abandonó la página. Cancelarla en ",[87,13846,13472],{}," evita trabajo innecesario y estados inconsistentes.",[3087,13849,13851],{"id":13850},"dejar-una-traza-final-de-depuración","Dejar una traza final de depuración",[15,13853,13854,13856,13857,13860],{},[87,13855,11276],{}," puede ser útil para confirmar que el componente sí salió cuando estás investigando ",[9295,13858,13859],{},"remounts"," inesperados, cacheo o renders condicionales.",[154,13862,13864],{"className":156,"code":13863,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'\n\nconst status = ref('Cargando estado...')\nconst totalTasks = ref\u003Cnumber | null>(null)\n\nlet controller: AbortController | null = null\n\nfunction syncOnlineStatus() {\n  status.value = navigator.onLine ? 'En línea' : 'Sin conexión'\n}\n\nasync function loadSummary() {\n  controller = new AbortController()\n\n  try {\n    const response = await fetch('\u002Fapi\u002Ftasks\u002Fsummary', {\n      signal: controller.signal\n    })\n\n    const data = await response.json() as { total: number }\n    totalTasks.value = data.total\n  }\n  catch (error) {\n    if (error instanceof DOMException && error.name === 'AbortError') {\n      return\n    }\n\n    console.error('No se pudo cargar el resumen', error)\n  }\n}\n\nonMounted(() => {\n  syncOnlineStatus()\n  window.addEventListener('online', syncOnlineStatus)\n  window.addEventListener('offline', syncOnlineStatus)\n  void loadSummary()\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('online', syncOnlineStatus)\n  window.removeEventListener('offline', syncOnlineStatus)\n  controller?.abort()\n})\n\nonUnmounted(() => {\n  console.info('TaskSummary ya salió del árbol')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-summary\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n    \u003Cp v-if=\"totalTasks !== null\">\n      Tareas registradas: {{ totalTasks }}\n    \u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,13865,13866,13882,13893,13897,13914,13940,13944,13965,13969,13978,13997,14001,14005,14016,14029,14033,14039,14058,14063,14067,14071,14100,14110,14114,14121,14146,14151,14155,14159,14173,14177,14181,14185,14195,14202,14216,14229,14238,14242,14246,14257,14269,14281,14291,14295,14299,14310,14323,14327,14335,14339,14347,14362,14374,14389,14394,14402,14410],{"__ignoreMap":163},[167,13867,13868,13870,13872,13874,13876,13878,13880],{"class":169,"line":170},[167,13869,174],{"class":173},[167,13871,178],{"class":177},[167,13873,182],{"class":181},[167,13875,1050],{"class":181},[167,13877,267],{"class":173},[167,13879,1055],{"class":201},[167,13881,185],{"class":173},[167,13883,13884,13886,13889,13891],{"class":169,"line":188},[167,13885,192],{"class":191},[167,13887,13888],{"class":173}," { onBeforeUnmount, onMounted, onUnmounted, ref } ",[167,13890,198],{"class":191},[167,13892,202],{"class":201},[167,13894,13895],{"class":169,"line":205},[167,13896,209],{"emptyLinePlaceholder":208},[167,13898,13899,13901,13903,13905,13907,13909,13912],{"class":169,"line":160},[167,13900,216],{"class":191},[167,13902,11700],{"class":219},[167,13904,223],{"class":191},[167,13906,226],{"class":181},[167,13908,229],{"class":173},[167,13910,13911],{"class":201},"'Cargando estado...'",[167,13913,235],{"class":173},[167,13915,13916,13918,13921,13923,13925,13927,13930,13932,13934,13936,13938],{"class":169,"line":238},[167,13917,216],{"class":191},[167,13919,13920],{"class":219}," totalTasks",[167,13922,223],{"class":191},[167,13924,226],{"class":181},[167,13926,174],{"class":173},[167,13928,13929],{"class":219},"number",[167,13931,659],{"class":191},[167,13933,6567],{"class":219},[167,13935,6570],{"class":173},[167,13937,6573],{"class":219},[167,13939,235],{"class":173},[167,13941,13942],{"class":169,"line":243},[167,13943,209],{"emptyLinePlaceholder":208},[167,13945,13946,13949,13952,13954,13957,13959,13961,13963],{"class":169,"line":261},[167,13947,13948],{"class":191},"let",[167,13950,13951],{"class":173}," controller",[167,13953,583],{"class":191},[167,13955,13956],{"class":181}," AbortController",[167,13958,659],{"class":191},[167,13960,6567],{"class":219},[167,13962,223],{"class":191},[167,13964,12146],{"class":219},[167,13966,13967],{"class":169,"line":273},[167,13968,209],{"emptyLinePlaceholder":208},[167,13970,13971,13973,13976],{"class":169,"line":279},[167,13972,246],{"class":191},[167,13974,13975],{"class":181}," syncOnlineStatus",[167,13977,763],{"class":173},[167,13979,13980,13982,13984,13987,13989,13992,13994],{"class":169,"line":289},[167,13981,11916],{"class":173},[167,13983,267],{"class":191},[167,13985,13986],{"class":173}," navigator.onLine ",[167,13988,8316],{"class":191},[167,13990,13991],{"class":201}," 'En línea'",[167,13993,5312],{"class":191},[167,13995,13996],{"class":201}," 'Sin conexión'\n",[167,13998,13999],{"class":169,"line":294},[167,14000,276],{"class":173},[167,14002,14003],{"class":169,"line":304},[167,14004,209],{"emptyLinePlaceholder":208},[167,14006,14007,14009,14011,14014],{"class":169,"line":313},[167,14008,2523],{"class":191},[167,14010,1432],{"class":191},[167,14012,14013],{"class":181}," loadSummary",[167,14015,763],{"class":173},[167,14017,14018,14021,14023,14025,14027],{"class":169,"line":161},[167,14019,14020],{"class":173},"  controller ",[167,14022,267],{"class":191},[167,14024,4224],{"class":191},[167,14026,13956],{"class":181},[167,14028,2917],{"class":173},[167,14030,14031],{"class":169,"line":335},[167,14032,209],{"emptyLinePlaceholder":208},[167,14034,14035,14037],{"class":169,"line":341},[167,14036,6723],{"class":191},[167,14038,1905],{"class":173},[167,14040,14041,14043,14045,14047,14049,14051,14053,14056],{"class":169,"line":489},[167,14042,8266],{"class":191},[167,14044,6614],{"class":219},[167,14046,223],{"class":191},[167,14048,3009],{"class":191},[167,14050,6621],{"class":181},[167,14052,229],{"class":173},[167,14054,14055],{"class":201},"'\u002Fapi\u002Ftasks\u002Fsummary'",[167,14057,627],{"class":173},[167,14059,14060],{"class":169,"line":495},[167,14061,14062],{"class":173},"      signal: controller.signal\n",[167,14064,14065],{"class":169,"line":501},[167,14066,8926],{"class":173},[167,14068,14069],{"class":169,"line":512},[167,14070,209],{"emptyLinePlaceholder":208},[167,14072,14073,14075,14077,14079,14081,14083,14085,14088,14090,14092,14094,14096,14098],{"class":169,"line":781},[167,14074,8266],{"class":191},[167,14076,11951],{"class":219},[167,14078,223],{"class":191},[167,14080,3009],{"class":191},[167,14082,6683],{"class":173},[167,14084,6686],{"class":181},[167,14086,14087],{"class":173},"() ",[167,14089,6692],{"class":191},[167,14091,577],{"class":173},[167,14093,1921],{"class":254},[167,14095,583],{"class":191},[167,14097,8493],{"class":219},[167,14099,599],{"class":173},[167,14101,14102,14105,14107],{"class":169,"line":786},[167,14103,14104],{"class":173},"    totalTasks.value ",[167,14106,267],{"class":191},[167,14108,14109],{"class":173}," data.total\n",[167,14111,14112],{"class":169,"line":2678},[167,14113,3492],{"class":173},[167,14115,14116,14119],{"class":169,"line":2692},[167,14117,14118],{"class":191},"  catch",[167,14120,6745],{"class":173},[167,14122,14123,14125,14128,14130,14133,14136,14139,14141,14144],{"class":169,"line":3575},[167,14124,7419],{"class":191},[167,14126,14127],{"class":173}," (error ",[167,14129,6762],{"class":191},[167,14131,14132],{"class":181}," DOMException",[167,14134,14135],{"class":191}," &&",[167,14137,14138],{"class":173}," error.name ",[167,14140,2550],{"class":191},[167,14142,14143],{"class":201}," 'AbortError'",[167,14145,258],{"class":173},[167,14147,14148],{"class":169,"line":5028},[167,14149,14150],{"class":191},"      return\n",[167,14152,14153],{"class":169,"line":5037},[167,14154,4049],{"class":173},[167,14156,14157],{"class":169,"line":5046},[167,14158,209],{"emptyLinePlaceholder":208},[167,14160,14161,14163,14165,14167,14170],{"class":169,"line":6756},[167,14162,8894],{"class":173},[167,14164,9352],{"class":181},[167,14166,229],{"class":173},[167,14168,14169],{"class":201},"'No se pudo cargar el resumen'",[167,14171,14172],{"class":173},", error)\n",[167,14174,14175],{"class":169,"line":6778},[167,14176,3492],{"class":173},[167,14178,14179],{"class":169,"line":6783},[167,14180,276],{"class":173},[167,14182,14183],{"class":169,"line":6788},[167,14184,209],{"emptyLinePlaceholder":208},[167,14186,14187,14189,14191,14193],{"class":169,"line":6793},[167,14188,6796],{"class":181},[167,14190,1493],{"class":173},[167,14192,639],{"class":191},[167,14194,1905],{"class":173},[167,14196,14197,14200],{"class":169,"line":6809},[167,14198,14199],{"class":181},"  syncOnlineStatus",[167,14201,2917],{"class":173},[167,14203,14204,14207,14209,14211,14213],{"class":169,"line":6824},[167,14205,14206],{"class":173},"  window.",[167,14208,1501],{"class":181},[167,14210,229],{"class":173},[167,14212,1506],{"class":201},[167,14214,14215],{"class":173},", syncOnlineStatus)\n",[167,14217,14218,14220,14222,14224,14227],{"class":169,"line":6829},[167,14219,14206],{"class":173},[167,14221,1501],{"class":181},[167,14223,229],{"class":173},[167,14225,14226],{"class":201},"'offline'",[167,14228,14215],{"class":173},[167,14230,14231,14234,14236],{"class":169,"line":6836},[167,14232,14233],{"class":191},"  void",[167,14235,14013],{"class":181},[167,14237,2917],{"class":173},[167,14239,14240],{"class":169,"line":6845},[167,14241,403],{"class":173},[167,14243,14244],{"class":169,"line":6854},[167,14245,209],{"emptyLinePlaceholder":208},[167,14247,14248,14251,14253,14255],{"class":169,"line":6861},[167,14249,14250],{"class":181},"onBeforeUnmount",[167,14252,1493],{"class":173},[167,14254,639],{"class":191},[167,14256,1905],{"class":173},[167,14258,14259,14261,14263,14265,14267],{"class":169,"line":6879},[167,14260,14206],{"class":173},[167,14262,1524],{"class":181},[167,14264,229],{"class":173},[167,14266,1506],{"class":201},[167,14268,14215],{"class":173},[167,14270,14271,14273,14275,14277,14279],{"class":169,"line":6884},[167,14272,14206],{"class":173},[167,14274,1524],{"class":181},[167,14276,229],{"class":173},[167,14278,14226],{"class":201},[167,14280,14215],{"class":173},[167,14282,14283,14286,14289],{"class":169,"line":6889},[167,14284,14285],{"class":173},"  controller?.",[167,14287,14288],{"class":181},"abort",[167,14290,2917],{"class":173},[167,14292,14293],{"class":169,"line":6898},[167,14294,403],{"class":173},[167,14296,14297],{"class":169,"line":6903},[167,14298,209],{"emptyLinePlaceholder":208},[167,14300,14301,14304,14306,14308],{"class":169,"line":6912},[167,14302,14303],{"class":181},"onUnmounted",[167,14305,1493],{"class":173},[167,14307,639],{"class":191},[167,14309,1905],{"class":173},[167,14311,14312,14314,14316,14318,14321],{"class":169,"line":6928},[167,14313,2608],{"class":173},[167,14315,9269],{"class":181},[167,14317,229],{"class":173},[167,14319,14320],{"class":201},"'TaskSummary ya salió del árbol'",[167,14322,235],{"class":173},[167,14324,14325],{"class":169,"line":6949},[167,14326,403],{"class":173},[167,14328,14329,14331,14333],{"class":169,"line":6954},[167,14330,282],{"class":173},[167,14332,178],{"class":177},[167,14334,185],{"class":173},[167,14336,14337],{"class":169,"line":6975},[167,14338,209],{"emptyLinePlaceholder":208},[167,14340,14341,14343,14345],{"class":169,"line":6989},[167,14342,174],{"class":173},[167,14344,299],{"class":177},[167,14346,185],{"class":173},[167,14348,14349,14351,14353,14355,14357,14360],{"class":169,"line":7003},[167,14350,307],{"class":173},[167,14352,10117],{"class":177},[167,14354,1245],{"class":181},[167,14356,267],{"class":173},[167,14358,14359],{"class":201},"\"task-summary\"",[167,14361,185],{"class":173},[167,14363,14364,14366,14368,14370,14372],{"class":169,"line":7017},[167,14365,1257],{"class":173},[167,14367,15],{"class":177},[167,14369,12334],{"class":173},[167,14371,15],{"class":177},[167,14373,185],{"class":173},[167,14375,14376,14378,14380,14382,14384,14387],{"class":169,"line":7026},[167,14377,1257],{"class":173},[167,14379,15],{"class":177},[167,14381,5694],{"class":181},[167,14383,267],{"class":173},[167,14385,14386],{"class":201},"\"totalTasks !== null\"",[167,14388,185],{"class":173},[167,14390,14391],{"class":169,"line":7031},[167,14392,14393],{"class":173},"      Tareas registradas: {{ totalTasks }}\n",[167,14395,14396,14398,14400],{"class":169,"line":7048},[167,14397,1292],{"class":173},[167,14399,15],{"class":177},[167,14401,185],{"class":173},[167,14403,14404,14406,14408],{"class":169,"line":7057},[167,14405,504],{"class":173},[167,14407,10117],{"class":177},[167,14409,185],{"class":173},[167,14411,14412,14414,14416],{"class":169,"line":7555},[167,14413,282],{"class":173},[167,14415,299],{"class":177},[167,14417,185],{"class":173},[154,14419,14421],{"className":156,"code":14420,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      status: 'Cargando estado...',\n      totalTasks: null,\n      controller: null\n    }\n  },\n\n  mounted() {\n    this.syncOnlineStatus()\n    window.addEventListener('online', this.syncOnlineStatus)\n    window.addEventListener('offline', this.syncOnlineStatus)\n    void this.loadSummary()\n  },\n\n  beforeUnmount() {\n    window.removeEventListener('online', this.syncOnlineStatus)\n    window.removeEventListener('offline', this.syncOnlineStatus)\n    this.controller?.abort()\n  },\n\n  unmounted() {\n    console.info('TaskSummary ya salió del árbol')\n  },\n\n  methods: {\n    syncOnlineStatus() {\n      this.status = navigator.onLine ? 'En línea' : 'Sin conexión'\n    },\n\n    async loadSummary() {\n      this.controller = new AbortController()\n\n      try {\n        const response = await fetch('\u002Fapi\u002Ftasks\u002Fsummary', {\n          signal: this.controller.signal\n        })\n\n        const data = await response.json()\n        this.totalTasks = data.total\n      }\n      catch (error) {\n        if (error instanceof DOMException && error.name === 'AbortError') {\n          return\n        }\n\n        console.error('No se pudo cargar el resumen', error)\n      }\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-summary\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n    \u003Cp v-if=\"totalTasks !== null\">\n      Tareas registradas: {{ totalTasks }}\n    \u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,14422,14423,14431,14439,14445,14451,14459,14468,14476,14480,14484,14488,14494,14505,14523,14539,14552,14556,14560,14567,14583,14599,14610,14614,14618,14625,14637,14641,14645,14649,14656,14674,14678,14682,14690,14705,14709,14716,14734,14744,14749,14753,14769,14781,14785,14792,14813,14818,14823,14827,14840,14844,14848,14852,14856,14864,14868,14876,14890,14902,14916,14920,14928,14936],{"__ignoreMap":163},[167,14424,14425,14427,14429],{"class":169,"line":170},[167,14426,174],{"class":173},[167,14428,178],{"class":177},[167,14430,185],{"class":173},[167,14432,14433,14435,14437],{"class":169,"line":188},[167,14434,608],{"class":191},[167,14436,3991],{"class":191},[167,14438,1905],{"class":173},[167,14440,14441,14443],{"class":169,"line":205},[167,14442,7176],{"class":181},[167,14444,763],{"class":173},[167,14446,14447,14449],{"class":169,"line":160},[167,14448,1937],{"class":191},[167,14450,1905],{"class":173},[167,14452,14453,14455,14457],{"class":169,"line":238},[167,14454,12585],{"class":173},[167,14456,13911],{"class":201},[167,14458,393],{"class":173},[167,14460,14461,14464,14466],{"class":169,"line":243},[167,14462,14463],{"class":173},"      totalTasks: ",[167,14465,6573],{"class":219},[167,14467,393],{"class":173},[167,14469,14470,14473],{"class":169,"line":261},[167,14471,14472],{"class":173},"      controller: ",[167,14474,14475],{"class":219},"null\n",[167,14477,14478],{"class":169,"line":273},[167,14479,4049],{"class":173},[167,14481,14482],{"class":169,"line":279},[167,14483,398],{"class":173},[167,14485,14486],{"class":169,"line":289},[167,14487,209],{"emptyLinePlaceholder":208},[167,14489,14490,14492],{"class":169,"line":294},[167,14491,12749],{"class":181},[167,14493,763],{"class":173},[167,14495,14496,14498,14500,14503],{"class":169,"line":304},[167,14497,879],{"class":219},[167,14499,1679],{"class":173},[167,14501,14502],{"class":181},"syncOnlineStatus",[167,14504,2917],{"class":173},[167,14506,14507,14510,14512,14514,14516,14518,14520],{"class":169,"line":313},[167,14508,14509],{"class":173},"    window.",[167,14511,1501],{"class":181},[167,14513,229],{"class":173},[167,14515,1506],{"class":201},[167,14517,1025],{"class":173},[167,14519,4927],{"class":219},[167,14521,14522],{"class":173},".syncOnlineStatus)\n",[167,14524,14525,14527,14529,14531,14533,14535,14537],{"class":169,"line":161},[167,14526,14509],{"class":173},[167,14528,1501],{"class":181},[167,14530,229],{"class":173},[167,14532,14226],{"class":201},[167,14534,1025],{"class":173},[167,14536,4927],{"class":219},[167,14538,14522],{"class":173},[167,14540,14541,14543,14545,14547,14550],{"class":169,"line":335},[167,14542,12081],{"class":191},[167,14544,7351],{"class":219},[167,14546,1679],{"class":173},[167,14548,14549],{"class":181},"loadSummary",[167,14551,2917],{"class":173},[167,14553,14554],{"class":169,"line":341},[167,14555,398],{"class":173},[167,14557,14558],{"class":169,"line":489},[167,14559,209],{"emptyLinePlaceholder":208},[167,14561,14562,14565],{"class":169,"line":495},[167,14563,14564],{"class":181},"  beforeUnmount",[167,14566,763],{"class":173},[167,14568,14569,14571,14573,14575,14577,14579,14581],{"class":169,"line":501},[167,14570,14509],{"class":173},[167,14572,1524],{"class":181},[167,14574,229],{"class":173},[167,14576,1506],{"class":201},[167,14578,1025],{"class":173},[167,14580,4927],{"class":219},[167,14582,14522],{"class":173},[167,14584,14585,14587,14589,14591,14593,14595,14597],{"class":169,"line":512},[167,14586,14509],{"class":173},[167,14588,1524],{"class":181},[167,14590,229],{"class":173},[167,14592,14226],{"class":201},[167,14594,1025],{"class":173},[167,14596,4927],{"class":219},[167,14598,14522],{"class":173},[167,14600,14601,14603,14606,14608],{"class":169,"line":781},[167,14602,879],{"class":219},[167,14604,14605],{"class":173},".controller?.",[167,14607,14288],{"class":181},[167,14609,2917],{"class":173},[167,14611,14612],{"class":169,"line":786},[167,14613,398],{"class":173},[167,14615,14616],{"class":169,"line":2678},[167,14617,209],{"emptyLinePlaceholder":208},[167,14619,14620,14623],{"class":169,"line":2692},[167,14621,14622],{"class":181},"  unmounted",[167,14624,763],{"class":173},[167,14626,14627,14629,14631,14633,14635],{"class":169,"line":3575},[167,14628,8894],{"class":173},[167,14630,9269],{"class":181},[167,14632,229],{"class":173},[167,14634,14320],{"class":201},[167,14636,235],{"class":173},[167,14638,14639],{"class":169,"line":5028},[167,14640,398],{"class":173},[167,14642,14643],{"class":169,"line":5037},[167,14644,209],{"emptyLinePlaceholder":208},[167,14646,14647],{"class":169,"line":5046},[167,14648,4419],{"class":173},[167,14650,14651,14654],{"class":169,"line":6756},[167,14652,14653],{"class":181},"    syncOnlineStatus",[167,14655,763],{"class":173},[167,14657,14658,14660,14662,14664,14666,14668,14670,14672],{"class":169,"line":6778},[167,14659,741],{"class":219},[167,14661,12786],{"class":173},[167,14663,267],{"class":191},[167,14665,13986],{"class":173},[167,14667,8316],{"class":191},[167,14669,13991],{"class":201},[167,14671,5312],{"class":191},[167,14673,13996],{"class":201},[167,14675,14676],{"class":169,"line":6783},[167,14677,755],{"class":173},[167,14679,14680],{"class":169,"line":6788},[167,14681,209],{"emptyLinePlaceholder":208},[167,14683,14684,14686,14688],{"class":169,"line":6793},[167,14685,7230],{"class":191},[167,14687,14013],{"class":181},[167,14689,763],{"class":173},[167,14691,14692,14694,14697,14699,14701,14703],{"class":169,"line":6809},[167,14693,741],{"class":219},[167,14695,14696],{"class":173},".controller ",[167,14698,267],{"class":191},[167,14700,4224],{"class":191},[167,14702,13956],{"class":181},[167,14704,2917],{"class":173},[167,14706,14707],{"class":169,"line":6824},[167,14708,209],{"emptyLinePlaceholder":208},[167,14710,14711,14714],{"class":169,"line":6829},[167,14712,14713],{"class":191},"      try",[167,14715,1905],{"class":173},[167,14717,14718,14720,14722,14724,14726,14728,14730,14732],{"class":169,"line":6836},[167,14719,8787],{"class":191},[167,14721,6614],{"class":219},[167,14723,223],{"class":191},[167,14725,3009],{"class":191},[167,14727,6621],{"class":181},[167,14729,229],{"class":173},[167,14731,14055],{"class":201},[167,14733,627],{"class":173},[167,14735,14736,14739,14741],{"class":169,"line":6845},[167,14737,14738],{"class":173},"          signal: ",[167,14740,4927],{"class":219},[167,14742,14743],{"class":173},".controller.signal\n",[167,14745,14746],{"class":169,"line":6854},[167,14747,14748],{"class":173},"        })\n",[167,14750,14751],{"class":169,"line":6861},[167,14752,209],{"emptyLinePlaceholder":208},[167,14754,14755,14757,14759,14761,14763,14765,14767],{"class":169,"line":6879},[167,14756,8787],{"class":191},[167,14758,11951],{"class":219},[167,14760,223],{"class":191},[167,14762,3009],{"class":191},[167,14764,6683],{"class":173},[167,14766,6686],{"class":181},[167,14768,2917],{"class":173},[167,14770,14771,14774,14777,14779],{"class":169,"line":6884},[167,14772,14773],{"class":219},"        this",[167,14775,14776],{"class":173},".totalTasks ",[167,14778,267],{"class":191},[167,14780,14109],{"class":173},[167,14782,14783],{"class":169,"line":6889},[167,14784,7287],{"class":173},[167,14786,14787,14790],{"class":169,"line":6898},[167,14788,14789],{"class":191},"      catch",[167,14791,6745],{"class":173},[167,14793,14794,14797,14799,14801,14803,14805,14807,14809,14811],{"class":169,"line":6903},[167,14795,14796],{"class":191},"        if",[167,14798,14127],{"class":173},[167,14800,6762],{"class":191},[167,14802,14132],{"class":181},[167,14804,14135],{"class":191},[167,14806,14138],{"class":173},[167,14808,2550],{"class":191},[167,14810,14143],{"class":201},[167,14812,258],{"class":173},[167,14814,14815],{"class":169,"line":6912},[167,14816,14817],{"class":191},"          return\n",[167,14819,14820],{"class":169,"line":6928},[167,14821,14822],{"class":173},"        }\n",[167,14824,14825],{"class":169,"line":6949},[167,14826,209],{"emptyLinePlaceholder":208},[167,14828,14829,14832,14834,14836,14838],{"class":169,"line":6954},[167,14830,14831],{"class":173},"        console.",[167,14833,9352],{"class":181},[167,14835,229],{"class":173},[167,14837,14169],{"class":201},[167,14839,14172],{"class":173},[167,14841,14842],{"class":169,"line":6975},[167,14843,7287],{"class":173},[167,14845,14846],{"class":169,"line":6989},[167,14847,4049],{"class":173},[167,14849,14850],{"class":169,"line":7003},[167,14851,3492],{"class":173},[167,14853,14854],{"class":169,"line":7017},[167,14855,276],{"class":173},[167,14857,14858,14860,14862],{"class":169,"line":7026},[167,14859,282],{"class":173},[167,14861,178],{"class":177},[167,14863,185],{"class":173},[167,14865,14866],{"class":169,"line":7031},[167,14867,209],{"emptyLinePlaceholder":208},[167,14869,14870,14872,14874],{"class":169,"line":7048},[167,14871,174],{"class":173},[167,14873,299],{"class":177},[167,14875,185],{"class":173},[167,14877,14878,14880,14882,14884,14886,14888],{"class":169,"line":7057},[167,14879,307],{"class":173},[167,14881,10117],{"class":177},[167,14883,1245],{"class":181},[167,14885,267],{"class":173},[167,14887,14359],{"class":201},[167,14889,185],{"class":173},[167,14891,14892,14894,14896,14898,14900],{"class":169,"line":7555},[167,14893,1257],{"class":173},[167,14895,15],{"class":177},[167,14897,12334],{"class":173},[167,14899,15],{"class":177},[167,14901,185],{"class":173},[167,14903,14904,14906,14908,14910,14912,14914],{"class":169,"line":7560},[167,14905,1257],{"class":173},[167,14907,15],{"class":177},[167,14909,5694],{"class":181},[167,14911,267],{"class":173},[167,14913,14386],{"class":201},[167,14915,185],{"class":173},[167,14917,14918],{"class":169,"line":7579},[167,14919,14393],{"class":173},[167,14921,14922,14924,14926],{"class":169,"line":7592},[167,14923,1292],{"class":173},[167,14925,15],{"class":177},[167,14927,185],{"class":173},[167,14929,14930,14932,14934],{"class":169,"line":7605},[167,14931,504],{"class":173},[167,14933,10117],{"class":177},[167,14935,185],{"class":173},[167,14937,14938,14940,14942],{"class":169,"line":7618},[167,14939,282],{"class":173},[167,14941,299],{"class":177},[167,14943,185],{"class":173},[33,14945,14946,14951,14956],{},[36,14947,14948,14950],{},[87,14949,6400],{}," abre recursos externos.",[36,14952,14953,14955],{},[87,14954,13530],{}," realiza la limpieza real.",[36,14957,14958,14960],{},[87,14959,13535],{}," deja una confirmación final de que el componente ya terminó de salir.",[22,14962,7678],{"id":7677},[33,14964,14965,14970,14975,14978],{},[36,14966,14967,14969],{},[87,14968,13472],{}," es el hook principal para limpiar lo que el componente abrió.",[36,14971,14972,14974],{},[87,14973,11276],{}," confirma que el desmontaje ya terminó.",[36,14976,14977],{},"Si el componente solo se oculta o queda cacheado, estos hooks pueden no ejecutarse.",[36,14979,14980],{},"El criterio más útil es simple: si registraste listeners, timers, observers o peticiones manuales, define también su cierre.",[924,14982,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":14984},[14985,14986,14987,14988,14989,14997,15002],{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":13672,"depth":188,"text":13673},{"id":3084,"depth":188,"text":3085,"children":14990},[14991,14993,14995,14996],{"id":13734,"depth":205,"text":14992},"1. Registrar recursos en mounted y olvidarse del cierre",{"id":13774,"depth":205,"text":14994},"2. Dejar toda la limpieza en unmounted",{"id":13794,"depth":205,"text":13795},{"id":13818,"depth":205,"text":13819},{"id":7996,"depth":188,"text":7997,"children":14998},[14999,15000,15001],{"id":13833,"depth":205,"text":13834},{"id":13840,"depth":205,"text":13841},{"id":13850,"depth":205,"text":13851},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284773\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted_f9gqy0.png","Ilustración de la fase de desmontaje del ciclo de vida de Vue con beforeUnmount y unmounted","2026-03-12","Qué ocurre cuando un componente sale de pantalla y cómo usar beforeUnmount y unmounted para limpiar listeners, timers y efectos sin dejar fugas ni comportamientos extraños.",{"updatedAt":15008,"coverCaption":15009,"author":946,"keywords":15010},"2026-03-11T22:00:00-05:00","La fase de desmontaje ocurre cuando Vue retira un componente del árbol activo",[3258,13472,11276,14250,15011],"cleanup","\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[15014],{"headline":13463,"author":15015,"datePublished":15008,"@type":961},{"name":946,"@type":959},{"title":13463,"description":15006},"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[15019,15020,15021],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":5424,"color":5425},"smji8WZsDewTRrh-7nuJ-1afgxZeubOV6QESqNZQknk",{"id":15024,"title":15025,"body":15026,"cover":16571,"coverAlt":16572,"date":16573,"description":16574,"draft":940,"extension":941,"lab":942,"locale":943,"meta":16575,"navigation":208,"path":16580,"schemaOrg":16581,"seo":16584,"series":7718,"seriesDescription":7719,"seriesOrder":160,"seriesTitle":7720,"slug":942,"stem":16585,"tags":16586,"__hash__":16592},"blog\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es.md","Ciclos de vida en Vue: fase de actualización (beforeUpdate, updated)",{"type":8,"value":15027,"toc":16559},[15028,15038,15044,15051,15054,15056,15059,15062,15078,15083,15095,15098,15128,15139,15144,15149,15151,15157,15159,15176,15184,15193,15195,15198,15204,15223,15233,15235,15243,15246,15255,15271,15278,15281,15371,15374,15381,15394,15400,15408,15411,15416,15420,15426,15429,15440,15443,15452,15454,15458,15461,15464,15467,15471,15478,15483,15487,15490,15573,15576,16048,16499,16511,16513,16556],[11,15029,15031,15032,1025,15035,6219],{"id":15030},"ciclos-de-vida-en-vue-fase-de-actualización-beforeupdate-updated","Ciclos de vida en Vue: fase de actualización (",[87,15033,15034],{},"beforeUpdate",[87,15036,15037],{},"updated",[15,15039,15040,15041,15043],{},"Muchos componentes no fallan al crearse ni al montarse. Fallan después, cuando el estado cambia y la interfaz empieza a re-renderizarse varias veces. Ahí aparecen mediciones incorrectas, efectos duplicados o hooks usados como si fueran un ",[87,15042,1665],{}," global.",[15,15045,15046,15047,15050],{},"La fase de actualización existe precisamente para entender ese momento: ",[3933,15048,15049],{},"cuándo Vue todavía no ha reflejado el cambio en el DOM y cuándo ya terminó de hacerlo",". Si manejas bien esa diferencia, evitas código reactivo confuso y componentes que se vuelven difíciles de mantener.",[15,15052,15053],{},"En aplicaciones reales, muchos problemas de UI —scroll roto, mediciones incorrectas o integraciones con librerías externas que se desincronizan— aparecen justo en este punto del ciclo de vida.",[11,15055,6257],{"id":6256},[15,15057,15058],{},"Cada vez que una dependencia reactiva usada por el componente cambia, Vue programa una nueva renderización.",[15,15060,15061],{},"Durante ese proceso aparecen dos hooks:",[33,15063,15064,15071],{},[36,15065,15066,13510,15068,1679],{},[87,15067,15034],{},[3933,15069,15070],{},"después de que el estado cambió, pero antes de que Vue actualice el DOM",[36,15072,15073,13510,15075,1679],{},[87,15074,15037],{},[3933,15076,15077],{},"después de que Vue ya aplicó los cambios al DOM",[15,15079,6304,15080,15082],{},[3933,15081,3260],{},", los equivalentes son:",[33,15084,15085,15090],{},[36,15086,15087],{},[87,15088,15089],{},"onBeforeUpdate()",[36,15091,15092],{},[87,15093,15094],{},"onUpdated()",[15,15096,15097],{},"La idea práctica es bastante simple:",[33,15099,15100,15108,15115],{},[36,15101,13600,15102,1025,15105,15107],{},[3933,15103,15104],{},"ver el estado anterior del DOM antes de que cambie",[87,15106,15034],{}," es el momento.",[36,15109,13600,15110,1025,15113,15107],{},[3933,15111,15112],{},"leer o manipular el DOM ya actualizado",[87,15114,15037],{},[36,15116,15117,15118,15121,15122,15124,15125,15127],{},"Si lo que quieres es ",[3933,15119,15120],{},"reaccionar a un dato concreto",", normalmente un ",[87,15123,1665],{}," o un ",[87,15126,1661],{}," será más claro que cualquiera de estos hooks.",[15,15129,15130,15131,15134,15135,15138],{},"También conviene recordar algo importante: ",[3933,15132,15133],{},"Vue agrupa cambios reactivos y actualizaciones del DOM",". Esto significa que estos hooks no expresan ",[9295,15136,15137],{},"\"cambió esta variable\"",", sino algo más amplio:",[5367,15140,15141],{},[15,15142,15143],{},"\"El componente está entrando o saliendo de un ciclo completo de actualización.\"",[15,15145,15146,15147,1679],{},"Por eso no son buenos sustitutos de ",[87,15148,1665],{},[11,15150,6322],{"id":6321},[15,15152,15153,15154,1679],{},"La fase de actualización encaja bien cuando tu lógica depende del ",[3933,15155,15156],{},"paso entre un render y el siguiente",[15,15158,9308],{},[33,15160,15161,15164,15167,15170,15173],{},[36,15162,15163],{},"Comparar el DOM visible antes y después de una actualización.",[36,15165,15166],{},"Ajustar scroll o foco después de que cambió una lista renderizada.",[36,15168,15169],{},"Recalcular una integración con una librería externa cuando el marcado ya está actualizado.",[36,15171,15172],{},"Sincronizar layouts dinámicos.",[36,15174,15175],{},"Depurar renderizados excesivos o entender por qué una vista se está refrescando.",[15,15177,15178,15180,15181,1679],{},[87,15179,15034],{}," suele ser útil cuando quieres ",[3933,15182,15183],{},"leer o limpiar algo del DOM anterior antes de que Vue lo reemplace",[15,15185,15186,15188,15189,15192],{},[87,15187,15037],{}," tiene sentido cuando necesitas ",[3933,15190,15191],{},"confirmar que el HTML ya refleja el nuevo estado"," y solo entonces medir, desplazar o sincronizar una librería.",[11,15194,6349],{"id":6348},[15,15196,15197],{},"No todo cambio reactivo necesita estos hooks.",[15,15199,13622,15200,1028,15202,13627],{},[87,15201,15034],{},[87,15203,15037],{},[33,15205,15206,15209,15214,15217],{},[36,15207,15208],{},"Solo quieres reaccionar a una propiedad concreta.",[36,15210,15211,15212,1679],{},"Puedes resolver el problema con ",[87,15213,1661],{},[36,15215,15216],{},"La lógica no depende del DOM.",[36,15218,15219,15220,15222],{},"Estás pensando en ",[87,15221,15037],{}," para disparar más cambios de estado sin una condición clara.",[15,15224,15225,15226,15228,15229,15232],{},"En especial, ",[87,15227,15037],{}," puede volverse peligroso si dentro cambias el mismo estado que provocó el render. Ahí es donde nacen los ",[3933,15230,15231],{},"bucles de actualización"," o los renders innecesarios.",[11,15234,3085],{"id":3084},[22,15236,3180,15238,15240,15241],{"id":15237},"usar-updated-como-reemplazo-de-watch",[87,15239,15037],{}," como reemplazo de ",[87,15242,1665],{},[15,15244,15245],{},"Es un error muy frecuente.",[15,15247,15248,15250,15251,15254],{},[87,15249,15037],{}," se ejecuta ",[3933,15252,15253],{},"cuando el componente ya se volvió a renderizar",", no cuando una variable específica cambió con intención semántica.",[15,15256,15257,15258,1025,15261,1025,15264,15267,15268,15270],{},"Si necesitas reaccionar a ",[87,15259,15260],{},"search",[87,15262,15263],{},"page",[87,15265,15266],{},"filters"," o cualquier dato concreto, un ",[87,15269,1665],{}," comunica mejor el objetivo y reduce trabajo innecesario.",[22,15272,15274,15275,15277],{"id":15273},"modificar-estado-dentro-de-updated-sin-control","Modificar estado dentro de ",[87,15276,15037],{}," sin control",[15,15279,15280],{},"Este es el camino clásico hacia un bucle:",[154,15282,15286],{"className":156,"code":15283,"filename":15284,"highlights":15285,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onUpdated, ref } from 'vue'\n\nconst count = ref(0)\n\nonUpdated(() => {\n  count.value++\n})\n\u003C\u002Fscript>\n","App.vue",[243],[87,15287,15288,15304,15315,15319,15336,15340,15352,15359,15363],{"__ignoreMap":163},[167,15289,15290,15292,15294,15296,15298,15300,15302],{"class":169,"line":170},[167,15291,174],{"class":173},[167,15293,178],{"class":177},[167,15295,182],{"class":181},[167,15297,1050],{"class":181},[167,15299,267],{"class":173},[167,15301,1055],{"class":201},[167,15303,185],{"class":173},[167,15305,15306,15308,15311,15313],{"class":169,"line":188},[167,15307,192],{"class":191},[167,15309,15310],{"class":173}," { onUpdated, ref } ",[167,15312,198],{"class":191},[167,15314,202],{"class":201},[167,15316,15317],{"class":169,"line":205},[167,15318,209],{"emptyLinePlaceholder":208},[167,15320,15321,15323,15326,15328,15330,15332,15334],{"class":169,"line":160},[167,15322,216],{"class":191},[167,15324,15325],{"class":219}," count",[167,15327,223],{"class":191},[167,15329,226],{"class":181},[167,15331,229],{"class":173},[167,15333,1960],{"class":219},[167,15335,235],{"class":173},[167,15337,15338],{"class":169,"line":238},[167,15339,209],{"emptyLinePlaceholder":208},[167,15341,15343,15346,15348,15350],{"class":15342,"line":243},[169,213],[167,15344,15345],{"class":181},"onUpdated",[167,15347,1493],{"class":173},[167,15349,639],{"class":191},[167,15351,1905],{"class":173},[167,15353,15354,15357],{"class":169,"line":261},[167,15355,15356],{"class":173},"  count.value",[167,15358,3126],{"class":191},[167,15360,15361],{"class":169,"line":273},[167,15362,403],{"class":173},[167,15364,15365,15367,15369],{"class":169,"line":279},[167,15366,282],{"class":173},[167,15368,178],{"class":177},[167,15370,185],{"class":173},[15,15372,15373],{},"Cada actualización provoca otra actualización.",[15,15375,15376,15377,15380],{},"Si necesitas corregir estado, hazlo con una ",[3933,15378,15379],{},"condición muy clara"," o mueve esa lógica a:",[33,15382,15383,15387,15391],{},[36,15384,15385],{},[87,15386,1665],{},[36,15388,15389],{},[87,15390,1661],{},[36,15392,15393],{},"la acción que origina el cambio",[22,15395,15397,15398],{"id":15396},"leer-el-dom-nuevo-en-beforeupdate","Leer el DOM nuevo en ",[87,15399,15034],{},[15,15401,6304,15402,15404,15405,1679],{},[87,15403,15034],{}," el DOM visible todavía representa el ",[3933,15406,15407],{},"render anterior",[15,15409,15410],{},"Si mides ahí esperando el nuevo tamaño, el dato será viejo.",[15,15412,15413,15414,1679],{},"Para leer el resultado final del render, usa ",[87,15415,15037],{},[22,15417,15419],{"id":15418},"meter-lógica-pesada-en-cada-actualización","Meter lógica pesada en cada actualización",[15,15421,15422,15423,1679],{},"Estos hooks pueden dispararse ",[3933,15424,15425],{},"muchas veces",[15,15427,15428],{},"Si dentro colocas:",[33,15430,15431,15434,15437],{},[36,15432,15433],{},"Cálculos costosos",[36,15435,15436],{},"Integraciones pesadas",[36,15438,15439],{},"Consultas repetidas al DOM",[15,15441,15442],{},"El componente se degradará rápido.",[5367,15444,15445],{},[15,15446,15447,15448,15451],{},"Si una tarea no necesita ejecutarse en ",[3933,15449,15450],{},"cada render",", probablemente no debería vivir aquí.",[11,15453,7997],{"id":7996},[22,15455,15457],{"id":15456},"mantener-el-scroll-pegado-al-final-en-un-chat","Mantener el scroll pegado al final en un chat",[15,15459,15460],{},"Cuando llega un mensaje nuevo, el array cambia primero y el DOM se actualiza después.",[15,15462,15463],{},"Si haces scroll demasiado pronto, todavía no existe la nueva altura del contenedor.",[15,15465,15466],{},"La solución es esperar al momento en que el DOM ya fue actualizado.",[22,15468,15470],{"id":15469},"recalcular-una-librería-visual-después-de-actualizar-una-lista","Recalcular una librería visual después de actualizar una lista",[15,15472,15473,15474,15477],{},"Algunas librerías (diagramas, grids, tooltips o librerías de layout) necesitan que ",[3933,15475,15476],{},"el markup ya esté en pantalla"," antes de recalcular posiciones o tamaños.",[15,15479,15480,15482],{},[87,15481,15037],{}," permite ejecutar esa sincronización justo después del render.",[22,15484,15486],{"id":15485},"detectar-renderizados-repetidos-durante-depuración","Detectar renderizados repetidos durante depuración",[15,15488,15489],{},"Estos hooks también sirven para entender si un componente se actualiza más de lo esperado.",[154,15491,15494],{"className":156,"code":15492,"filename":15284,"highlights":15493,"language":162,"meta":163,"style":163},"\u003Cscript>\nonBeforeUpdate(() => {\n  console.log('El componente está a punto de actualizarse')\n})\n\nonUpdated(() => {\n  console.log('El componente terminó de actualizarse')\n})\n\u003C\u002Fscript>\n",[188,243],[87,15495,15496,15504,15516,15529,15533,15537,15548,15561,15565],{"__ignoreMap":163},[167,15497,15498,15500,15502],{"class":169,"line":170},[167,15499,174],{"class":173},[167,15501,178],{"class":177},[167,15503,185],{"class":173},[167,15505,15507,15510,15512,15514],{"class":15506,"line":188},[169,213],[167,15508,15509],{"class":181},"onBeforeUpdate",[167,15511,1493],{"class":173},[167,15513,639],{"class":191},[167,15515,1905],{"class":173},[167,15517,15518,15520,15522,15524,15527],{"class":169,"line":205},[167,15519,2608],{"class":173},[167,15521,2611],{"class":181},[167,15523,229],{"class":173},[167,15525,15526],{"class":201},"'El componente está a punto de actualizarse'",[167,15528,235],{"class":173},[167,15530,15531],{"class":169,"line":160},[167,15532,403],{"class":173},[167,15534,15535],{"class":169,"line":238},[167,15536,209],{"emptyLinePlaceholder":208},[167,15538,15540,15542,15544,15546],{"class":15539,"line":243},[169,213],[167,15541,15345],{"class":181},[167,15543,1493],{"class":173},[167,15545,639],{"class":191},[167,15547,1905],{"class":173},[167,15549,15550,15552,15554,15556,15559],{"class":169,"line":261},[167,15551,2608],{"class":173},[167,15553,2611],{"class":181},[167,15555,229],{"class":173},[167,15557,15558],{"class":201},"'El componente terminó de actualizarse'",[167,15560,235],{"class":173},[167,15562,15563],{"class":169,"line":273},[167,15564,403],{"class":173},[167,15566,15567,15569,15571],{"class":169,"line":279},[167,15568,282],{"class":173},[167,15570,178],{"class":177},[167,15572,185],{"class":173},[15,15574,15575],{},"Esto ayuda a detectar dependencias reactivas que provocan renders innecesarios.",[154,15577,15579],{"className":156,"code":15578,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeUpdate, onUpdated, ref } from 'vue'\n\nconst messages = ref([\n  { id: 1, text: 'Primer mensaje' },\n  { id: 2, text: 'Segundo mensaje' }\n])\n\nconst listRef = ref\u003CHTMLOListElement | null>(null)\nconst previousHeight = ref(0)\n\nfunction addMessage() {\n  messages.value.push({\n    id: Date.now(),\n    text: `Mensaje ${messages.value.length + 1}`\n  })\n}\n\nonBeforeUpdate(() => {\n  previousHeight.value = listRef.value?.scrollHeight ?? 0\n})\n\nonUpdated(() => {\n  if (!listRef.value) return\n\n  const nextHeight = listRef.value.scrollHeight\n\n  if (nextHeight > previousHeight.value) {\n    listRef.value.scrollTop = nextHeight\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"chat-panel\">\n    \u003Cbutton @click=\"addMessage\">\n      Agregar mensaje\n    \u003C\u002Fbutton>\n\n    \u003Col\n      ref=\"listRef\"\n      class=\"messages\"\n    >\n      \u003Cli\n        v-for=\"message in messages\"\n        :key=\"message.id\"\n      >\n        {{ message.text }}\n      \u003C\u002Fli>\n    \u003C\u002Fol>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,15580,15581,15597,15608,15612,15625,15639,15652,15656,15660,15686,15703,15707,15716,15726,15737,15765,15769,15773,15777,15787,15803,15807,15811,15821,15834,15838,15850,15854,15867,15877,15881,15885,15893,15897,15905,15920,15935,15940,15948,15952,15959,15969,15979,15983,15989,15998,16007,16011,16016,16024,16032,16040],{"__ignoreMap":163},[167,15582,15583,15585,15587,15589,15591,15593,15595],{"class":169,"line":170},[167,15584,174],{"class":173},[167,15586,178],{"class":177},[167,15588,182],{"class":181},[167,15590,1050],{"class":181},[167,15592,267],{"class":173},[167,15594,1055],{"class":201},[167,15596,185],{"class":173},[167,15598,15599,15601,15604,15606],{"class":169,"line":188},[167,15600,192],{"class":191},[167,15602,15603],{"class":173}," { onBeforeUpdate, onUpdated, ref } ",[167,15605,198],{"class":191},[167,15607,202],{"class":201},[167,15609,15610],{"class":169,"line":205},[167,15611,209],{"emptyLinePlaceholder":208},[167,15613,15614,15616,15619,15621,15623],{"class":169,"line":160},[167,15615,216],{"class":191},[167,15617,15618],{"class":219}," messages",[167,15620,223],{"class":191},[167,15622,226],{"class":181},[167,15624,1827],{"class":173},[167,15626,15627,15629,15631,15634,15637],{"class":169,"line":238},[167,15628,1832],{"class":173},[167,15630,1835],{"class":219},[167,15632,15633],{"class":173},", text: ",[167,15635,15636],{"class":201},"'Primer mensaje'",[167,15638,1856],{"class":173},[167,15640,15641,15643,15645,15647,15650],{"class":169,"line":243},[167,15642,1832],{"class":173},[167,15644,1853],{"class":219},[167,15646,15633],{"class":173},[167,15648,15649],{"class":201},"'Segundo mensaje'",[167,15651,599],{"class":173},[167,15653,15654],{"class":169,"line":261},[167,15655,429],{"class":173},[167,15657,15658],{"class":169,"line":273},[167,15659,209],{"emptyLinePlaceholder":208},[167,15661,15662,15664,15667,15669,15671,15673,15676,15678,15680,15682,15684],{"class":169,"line":279},[167,15663,216],{"class":191},[167,15665,15666],{"class":219}," listRef",[167,15668,223],{"class":191},[167,15670,226],{"class":181},[167,15672,174],{"class":173},[167,15674,15675],{"class":181},"HTMLOListElement",[167,15677,659],{"class":191},[167,15679,6567],{"class":219},[167,15681,6570],{"class":173},[167,15683,6573],{"class":219},[167,15685,235],{"class":173},[167,15687,15688,15690,15693,15695,15697,15699,15701],{"class":169,"line":289},[167,15689,216],{"class":191},[167,15691,15692],{"class":219}," previousHeight",[167,15694,223],{"class":191},[167,15696,226],{"class":181},[167,15698,229],{"class":173},[167,15700,1960],{"class":219},[167,15702,235],{"class":173},[167,15704,15705],{"class":169,"line":294},[167,15706,209],{"emptyLinePlaceholder":208},[167,15708,15709,15711,15714],{"class":169,"line":304},[167,15710,246],{"class":191},[167,15712,15713],{"class":181}," addMessage",[167,15715,763],{"class":173},[167,15717,15718,15721,15724],{"class":169,"line":313},[167,15719,15720],{"class":173},"  messages.value.",[167,15722,15723],{"class":181},"push",[167,15725,372],{"class":173},[167,15727,15728,15731,15734],{"class":169,"line":161},[167,15729,15730],{"class":173},"    id: Date.",[167,15732,15733],{"class":181},"now",[167,15735,15736],{"class":173},"(),\n",[167,15738,15739,15742,15745,15748,15750,15752,15754,15757,15760,15763],{"class":169,"line":335},[167,15740,15741],{"class":173},"    text: ",[167,15743,15744],{"class":201},"`Mensaje ${",[167,15746,15747],{"class":173},"messages",[167,15749,1679],{"class":201},[167,15751,2219],{"class":173},[167,15753,1679],{"class":201},[167,15755,15756],{"class":219},"length",[167,15758,15759],{"class":191}," +",[167,15761,15762],{"class":219}," 1",[167,15764,2232],{"class":201},[167,15766,15767],{"class":169,"line":341},[167,15768,8347],{"class":173},[167,15770,15771],{"class":169,"line":489},[167,15772,276],{"class":173},[167,15774,15775],{"class":169,"line":495},[167,15776,209],{"emptyLinePlaceholder":208},[167,15778,15779,15781,15783,15785],{"class":169,"line":501},[167,15780,15509],{"class":181},[167,15782,1493],{"class":173},[167,15784,639],{"class":191},[167,15786,1905],{"class":173},[167,15788,15789,15792,15794,15797,15800],{"class":169,"line":512},[167,15790,15791],{"class":173},"  previousHeight.value ",[167,15793,267],{"class":191},[167,15795,15796],{"class":173}," listRef.value?.scrollHeight ",[167,15798,15799],{"class":191},"??",[167,15801,15802],{"class":219}," 0\n",[167,15804,15805],{"class":169,"line":781},[167,15806,403],{"class":173},[167,15808,15809],{"class":169,"line":786},[167,15810,209],{"emptyLinePlaceholder":208},[167,15812,15813,15815,15817,15819],{"class":169,"line":2678},[167,15814,15345],{"class":181},[167,15816,1493],{"class":173},[167,15818,639],{"class":191},[167,15820,1905],{"class":173},[167,15822,15823,15825,15827,15829,15832],{"class":169,"line":2692},[167,15824,2544],{"class":191},[167,15826,2526],{"class":173},[167,15828,6641],{"class":191},[167,15830,15831],{"class":173},"listRef.value) ",[167,15833,2556],{"class":191},[167,15835,15836],{"class":169,"line":3575},[167,15837,209],{"emptyLinePlaceholder":208},[167,15839,15840,15842,15845,15847],{"class":169,"line":5028},[167,15841,1443],{"class":191},[167,15843,15844],{"class":219}," nextHeight",[167,15846,223],{"class":191},[167,15848,15849],{"class":173}," listRef.value.scrollHeight\n",[167,15851,15852],{"class":169,"line":5037},[167,15853,209],{"emptyLinePlaceholder":208},[167,15855,15856,15858,15861,15864],{"class":169,"line":5046},[167,15857,2544],{"class":191},[167,15859,15860],{"class":173}," (nextHeight ",[167,15862,15863],{"class":191},">",[167,15865,15866],{"class":173}," previousHeight.value) {\n",[167,15868,15869,15872,15874],{"class":169,"line":6756},[167,15870,15871],{"class":173},"    listRef.value.scrollTop ",[167,15873,267],{"class":191},[167,15875,15876],{"class":173}," nextHeight\n",[167,15878,15879],{"class":169,"line":6778},[167,15880,3492],{"class":173},[167,15882,15883],{"class":169,"line":6783},[167,15884,403],{"class":173},[167,15886,15887,15889,15891],{"class":169,"line":6788},[167,15888,282],{"class":173},[167,15890,178],{"class":177},[167,15892,185],{"class":173},[167,15894,15895],{"class":169,"line":6793},[167,15896,209],{"emptyLinePlaceholder":208},[167,15898,15899,15901,15903],{"class":169,"line":6809},[167,15900,174],{"class":173},[167,15902,299],{"class":177},[167,15904,185],{"class":173},[167,15906,15907,15909,15911,15913,15915,15918],{"class":169,"line":6824},[167,15908,307],{"class":173},[167,15910,10117],{"class":177},[167,15912,1245],{"class":181},[167,15914,267],{"class":173},[167,15916,15917],{"class":201},"\"chat-panel\"",[167,15919,185],{"class":173},[167,15921,15922,15924,15926,15928,15930,15933],{"class":169,"line":6829},[167,15923,1257],{"class":173},[167,15925,507],{"class":177},[167,15927,1182],{"class":181},[167,15929,267],{"class":173},[167,15931,15932],{"class":201},"\"addMessage\"",[167,15934,185],{"class":173},[167,15936,15937],{"class":169,"line":6836},[167,15938,15939],{"class":173},"      Agregar mensaje\n",[167,15941,15942,15944,15946],{"class":169,"line":6845},[167,15943,1292],{"class":173},[167,15945,507],{"class":177},[167,15947,185],{"class":173},[167,15949,15950],{"class":169,"line":6854},[167,15951,209],{"emptyLinePlaceholder":208},[167,15953,15954,15956],{"class":169,"line":6861},[167,15955,1257],{"class":173},[167,15957,15958],{"class":177},"ol\n",[167,15960,15961,15964,15966],{"class":169,"line":6879},[167,15962,15963],{"class":181},"      ref",[167,15965,267],{"class":173},[167,15967,15968],{"class":201},"\"listRef\"\n",[167,15970,15971,15974,15976],{"class":169,"line":6884},[167,15972,15973],{"class":181},"      class",[167,15975,267],{"class":173},[167,15977,15978],{"class":201},"\"messages\"\n",[167,15980,15981],{"class":169,"line":6889},[167,15982,3769],{"class":173},[167,15984,15985,15987],{"class":169,"line":6898},[167,15986,1268],{"class":173},[167,15988,12472],{"class":177},[167,15990,15991,15993,15995],{"class":169,"line":6903},[167,15992,12477],{"class":181},[167,15994,267],{"class":173},[167,15996,15997],{"class":201},"\"message in messages\"\n",[167,15999,16000,16002,16004],{"class":169,"line":6912},[167,16001,12487],{"class":181},[167,16003,267],{"class":173},[167,16005,16006],{"class":201},"\"message.id\"\n",[167,16008,16009],{"class":169,"line":6928},[167,16010,10532],{"class":173},[167,16012,16013],{"class":169,"line":6949},[167,16014,16015],{"class":173},"        {{ message.text }}\n",[167,16017,16018,16020,16022],{"class":169,"line":6954},[167,16019,10170],{"class":173},[167,16021,36],{"class":177},[167,16023,185],{"class":173},[167,16025,16026,16028,16030],{"class":169,"line":6975},[167,16027,1292],{"class":173},[167,16029,3035],{"class":177},[167,16031,185],{"class":173},[167,16033,16034,16036,16038],{"class":169,"line":6989},[167,16035,504],{"class":173},[167,16037,10117],{"class":177},[167,16039,185],{"class":173},[167,16041,16042,16044,16046],{"class":169,"line":7003},[167,16043,282],{"class":173},[167,16045,299],{"class":177},[167,16047,185],{"class":173},[154,16049,16051],{"className":156,"code":16050,"filename":12536,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      messages: [\n        { id: 1, text: 'Primer mensaje' },\n        { id: 2, text: 'Segundo mensaje' }\n      ],\n      previousHeight: 0\n    }\n  },\n\n  methods: {\n    addMessage() {\n      this.messages.push({\n        id: Date.now(),\n        text: `Mensaje ${this.messages.length + 1}`\n      })\n    }\n  },\n\n  beforeUpdate() {\n    if (this.$refs.listRef instanceof HTMLOListElement) {\n      this.previousHeight = this.$refs.listRef.scrollHeight\n    }\n  },\n\n  updated() {\n    if (!(this.$refs.listRef instanceof HTMLOListElement)) {\n      return\n    }\n\n    const nextHeight = this.$refs.listRef.scrollHeight\n\n    if (nextHeight > this.previousHeight) {\n      this.$refs.listRef.scrollTop = nextHeight\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"chat-panel\">\n    \u003Cbutton @click=\"addMessage\">\n      Agregar mensaje\n    \u003C\u002Fbutton>\n\n    \u003Col\n      ref=\"listRef\"\n      class=\"messages\"\n    >\n      \u003Cli\n        v-for=\"message in messages\"\n        :key=\"message.id\"\n      >\n        {{ message.text }}\n      \u003C\u002Fli>\n    \u003C\u002Fol>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,16052,16053,16061,16069,16075,16081,16086,16098,16110,16115,16122,16126,16130,16134,16138,16145,16156,16165,16188,16192,16196,16200,16204,16211,16229,16243,16247,16251,16255,16262,16283,16287,16291,16295,16307,16311,16324,16335,16339,16343,16347,16355,16359,16367,16381,16395,16399,16407,16411,16417,16425,16433,16437,16443,16451,16459,16463,16467,16475,16483,16491],{"__ignoreMap":163},[167,16054,16055,16057,16059],{"class":169,"line":170},[167,16056,174],{"class":173},[167,16058,178],{"class":177},[167,16060,185],{"class":173},[167,16062,16063,16065,16067],{"class":169,"line":188},[167,16064,608],{"class":191},[167,16066,3991],{"class":191},[167,16068,1905],{"class":173},[167,16070,16071,16073],{"class":169,"line":205},[167,16072,7176],{"class":181},[167,16074,763],{"class":173},[167,16076,16077,16079],{"class":169,"line":160},[167,16078,1937],{"class":191},[167,16080,1905],{"class":173},[167,16082,16083],{"class":169,"line":238},[167,16084,16085],{"class":173},"      messages: [\n",[167,16087,16088,16090,16092,16094,16096],{"class":169,"line":243},[167,16089,8677],{"class":173},[167,16091,1835],{"class":219},[167,16093,15633],{"class":173},[167,16095,15636],{"class":201},[167,16097,1856],{"class":173},[167,16099,16100,16102,16104,16106,16108],{"class":169,"line":261},[167,16101,8677],{"class":173},[167,16103,1853],{"class":219},[167,16105,15633],{"class":173},[167,16107,15649],{"class":201},[167,16109,599],{"class":173},[167,16111,16112],{"class":169,"line":273},[167,16113,16114],{"class":173},"      ],\n",[167,16116,16117,16120],{"class":169,"line":279},[167,16118,16119],{"class":173},"      previousHeight: ",[167,16121,10681],{"class":219},[167,16123,16124],{"class":169,"line":289},[167,16125,4049],{"class":173},[167,16127,16128],{"class":169,"line":294},[167,16129,398],{"class":173},[167,16131,16132],{"class":169,"line":304},[167,16133,209],{"emptyLinePlaceholder":208},[167,16135,16136],{"class":169,"line":313},[167,16137,4419],{"class":173},[167,16139,16140,16143],{"class":169,"line":161},[167,16141,16142],{"class":181},"    addMessage",[167,16144,763],{"class":173},[167,16146,16147,16149,16152,16154],{"class":169,"line":335},[167,16148,741],{"class":219},[167,16150,16151],{"class":173},".messages.",[167,16153,15723],{"class":181},[167,16155,372],{"class":173},[167,16157,16158,16161,16163],{"class":169,"line":341},[167,16159,16160],{"class":173},"        id: Date.",[167,16162,15733],{"class":181},[167,16164,15736],{"class":173},[167,16166,16167,16170,16172,16174,16176,16178,16180,16182,16184,16186],{"class":169,"line":489},[167,16168,16169],{"class":173},"        text: ",[167,16171,15744],{"class":201},[167,16173,4927],{"class":219},[167,16175,1679],{"class":201},[167,16177,15747],{"class":173},[167,16179,1679],{"class":201},[167,16181,15756],{"class":219},[167,16183,15759],{"class":191},[167,16185,15762],{"class":219},[167,16187,2232],{"class":201},[167,16189,16190],{"class":169,"line":495},[167,16191,8866],{"class":173},[167,16193,16194],{"class":169,"line":501},[167,16195,4049],{"class":173},[167,16197,16198],{"class":169,"line":512},[167,16199,398],{"class":173},[167,16201,16202],{"class":169,"line":781},[167,16203,209],{"emptyLinePlaceholder":208},[167,16205,16206,16209],{"class":169,"line":786},[167,16207,16208],{"class":181},"  beforeUpdate",[167,16210,763],{"class":173},[167,16212,16213,16215,16217,16219,16222,16224,16227],{"class":169,"line":2678},[167,16214,7419],{"class":191},[167,16216,2526],{"class":173},[167,16218,4927],{"class":219},[167,16220,16221],{"class":173},".$refs.listRef ",[167,16223,6762],{"class":191},[167,16225,16226],{"class":181}," HTMLOListElement",[167,16228,258],{"class":173},[167,16230,16231,16233,16236,16238,16240],{"class":169,"line":2692},[167,16232,741],{"class":219},[167,16234,16235],{"class":173},".previousHeight ",[167,16237,267],{"class":191},[167,16239,7351],{"class":219},[167,16241,16242],{"class":173},".$refs.listRef.scrollHeight\n",[167,16244,16245],{"class":169,"line":3575},[167,16246,4049],{"class":173},[167,16248,16249],{"class":169,"line":5028},[167,16250,398],{"class":173},[167,16252,16253],{"class":169,"line":5037},[167,16254,209],{"emptyLinePlaceholder":208},[167,16256,16257,16260],{"class":169,"line":5046},[167,16258,16259],{"class":181},"  updated",[167,16261,763],{"class":173},[167,16263,16264,16266,16268,16270,16272,16274,16276,16278,16280],{"class":169,"line":6756},[167,16265,7419],{"class":191},[167,16267,2526],{"class":173},[167,16269,6641],{"class":191},[167,16271,229],{"class":173},[167,16273,4927],{"class":219},[167,16275,16221],{"class":173},[167,16277,6762],{"class":191},[167,16279,16226],{"class":181},[167,16281,16282],{"class":173},")) {\n",[167,16284,16285],{"class":169,"line":6778},[167,16286,14150],{"class":191},[167,16288,16289],{"class":169,"line":6783},[167,16290,4049],{"class":173},[167,16292,16293],{"class":169,"line":6788},[167,16294,209],{"emptyLinePlaceholder":208},[167,16296,16297,16299,16301,16303,16305],{"class":169,"line":6793},[167,16298,8266],{"class":191},[167,16300,15844],{"class":219},[167,16302,223],{"class":191},[167,16304,7351],{"class":219},[167,16306,16242],{"class":173},[167,16308,16309],{"class":169,"line":6809},[167,16310,209],{"emptyLinePlaceholder":208},[167,16312,16313,16315,16317,16319,16321],{"class":169,"line":6824},[167,16314,7419],{"class":191},[167,16316,15860],{"class":173},[167,16318,15863],{"class":191},[167,16320,7351],{"class":219},[167,16322,16323],{"class":173},".previousHeight) {\n",[167,16325,16326,16328,16331,16333],{"class":169,"line":6829},[167,16327,741],{"class":219},[167,16329,16330],{"class":173},".$refs.listRef.scrollTop ",[167,16332,267],{"class":191},[167,16334,15876],{"class":173},[167,16336,16337],{"class":169,"line":6836},[167,16338,4049],{"class":173},[167,16340,16341],{"class":169,"line":6845},[167,16342,3492],{"class":173},[167,16344,16345],{"class":169,"line":6854},[167,16346,276],{"class":173},[167,16348,16349,16351,16353],{"class":169,"line":6861},[167,16350,282],{"class":173},[167,16352,178],{"class":177},[167,16354,185],{"class":173},[167,16356,16357],{"class":169,"line":6879},[167,16358,209],{"emptyLinePlaceholder":208},[167,16360,16361,16363,16365],{"class":169,"line":6884},[167,16362,174],{"class":173},[167,16364,299],{"class":177},[167,16366,185],{"class":173},[167,16368,16369,16371,16373,16375,16377,16379],{"class":169,"line":6889},[167,16370,307],{"class":173},[167,16372,10117],{"class":177},[167,16374,1245],{"class":181},[167,16376,267],{"class":173},[167,16378,15917],{"class":201},[167,16380,185],{"class":173},[167,16382,16383,16385,16387,16389,16391,16393],{"class":169,"line":6898},[167,16384,1257],{"class":173},[167,16386,507],{"class":177},[167,16388,1182],{"class":181},[167,16390,267],{"class":173},[167,16392,15932],{"class":201},[167,16394,185],{"class":173},[167,16396,16397],{"class":169,"line":6903},[167,16398,15939],{"class":173},[167,16400,16401,16403,16405],{"class":169,"line":6912},[167,16402,1292],{"class":173},[167,16404,507],{"class":177},[167,16406,185],{"class":173},[167,16408,16409],{"class":169,"line":6928},[167,16410,209],{"emptyLinePlaceholder":208},[167,16412,16413,16415],{"class":169,"line":6949},[167,16414,1257],{"class":173},[167,16416,15958],{"class":177},[167,16418,16419,16421,16423],{"class":169,"line":6954},[167,16420,15963],{"class":181},[167,16422,267],{"class":173},[167,16424,15968],{"class":201},[167,16426,16427,16429,16431],{"class":169,"line":6975},[167,16428,15973],{"class":181},[167,16430,267],{"class":173},[167,16432,15978],{"class":201},[167,16434,16435],{"class":169,"line":6989},[167,16436,3769],{"class":173},[167,16438,16439,16441],{"class":169,"line":7003},[167,16440,1268],{"class":173},[167,16442,12472],{"class":177},[167,16444,16445,16447,16449],{"class":169,"line":7017},[167,16446,12477],{"class":181},[167,16448,267],{"class":173},[167,16450,15997],{"class":201},[167,16452,16453,16455,16457],{"class":169,"line":7026},[167,16454,12487],{"class":181},[167,16456,267],{"class":173},[167,16458,16006],{"class":201},[167,16460,16461],{"class":169,"line":7031},[167,16462,10532],{"class":173},[167,16464,16465],{"class":169,"line":7048},[167,16466,16015],{"class":173},[167,16468,16469,16471,16473],{"class":169,"line":7057},[167,16470,10170],{"class":173},[167,16472,36],{"class":177},[167,16474,185],{"class":173},[167,16476,16477,16479,16481],{"class":169,"line":7555},[167,16478,1292],{"class":173},[167,16480,3035],{"class":177},[167,16482,185],{"class":173},[167,16484,16485,16487,16489],{"class":169,"line":7560},[167,16486,504],{"class":173},[167,16488,10117],{"class":177},[167,16490,185],{"class":173},[167,16492,16493,16495,16497],{"class":169,"line":7579},[167,16494,282],{"class":173},[167,16496,299],{"class":177},[167,16498,185],{"class":173},[33,16500,16501,16506],{},[36,16502,16503,16505],{},[87,16504,15089],{}," guarda la altura del render anterior.",[36,16507,16508,16510],{},[87,16509,15094],{}," decide si debe ajustar el scroll una vez que el nuevo mensaje ya existe en el DOM.",[11,16512,7678],{"id":7677},[33,16514,16515,16523,16532,16540,16547],{},[36,16516,16517,16519,16520,1679],{},[87,16518,15034],{}," te permite observar ",[3933,16521,16522],{},"el punto justo antes del parche del DOM",[36,16524,16525,16527,16528,16531],{},[87,16526,15037],{}," sirve cuando ",[3933,16529,16530],{},"la interfaz ya refleja el nuevo estado"," y necesitas actuar sobre ese resultado.",[36,16533,16534,16535,1679],{},"Si el problema gira alrededor de un dato específico, ",[3933,16536,16537,16539],{},[87,16538,1665],{}," suele ser más expresivo",[36,16541,16542,16543,16546],{},"Estos hooks describen ",[3933,16544,16545],{},"el ciclo de actualización del componente",", no el cambio de una variable concreta.",[36,16548,16549,16550],{},"La regla más importante es esta: ",[3933,16551,16552,16553,16555],{},"no conviertas ",[87,16554,15037],{}," en una máquina de mutar estado después de cada render.",[924,16557,16558],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":163,"searchDepth":188,"depth":188,"links":16560},[16561,16563,16565,16567,16568,16569,16570],{"id":15237,"depth":188,"text":16562},"Usar updated como reemplazo de watch",{"id":15273,"depth":188,"text":16564},"Modificar estado dentro de updated sin control",{"id":15396,"depth":188,"text":16566},"Leer el DOM nuevo en beforeUpdate",{"id":15418,"depth":188,"text":15419},{"id":15456,"depth":188,"text":15457},{"id":15469,"depth":188,"text":15470},{"id":15485,"depth":188,"text":15486},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284616\u002Fvue-lifecycle-update-phase-beforeupdate-updated_qql7os.png","Ilustración de la fase de actualización del ciclo de vida de Vue con beforeUpdate y updated","2026-03-11","Qué ocurre cuando Vue vuelve a renderizar un componente y cómo usar beforeUpdate y updated sin convertirlos en sustitutos de watch o computed.",{"updatedAt":16576,"coverCaption":16577,"author":946,"keywords":16578},"2026-03-10T22:00:00-05:00","La fase de actualización ocurre cuando un cambio reactivo obliga a Vue a volver a renderizar el componente.",[3258,15034,15037,15345,16579],"renderizado","\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[16582],{"headline":15025,"author":16583,"datePublished":16576,"@type":961},{"name":946,"@type":959},{"title":15025,"description":16574},"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[16587,16588,16589,16590,16591],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":9169,"color":9170},{"tag":3269,"color":3270},{"tag":5424,"color":5425},"98z2JKjTHZwuUniJlvBcSw0oAKPwayH9G9A608P_wSQ",{"id":16594,"title":16595,"body":16596,"cover":17830,"coverAlt":17831,"date":17832,"description":17833,"draft":940,"extension":941,"lab":942,"locale":943,"meta":17834,"navigation":208,"path":17839,"schemaOrg":17840,"seo":17843,"series":7718,"seriesDescription":7719,"seriesOrder":205,"seriesTitle":7720,"slug":942,"stem":17844,"tags":17845,"__hash__":17850},"blog\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es.md","Ciclos de vida en Vue: fase de montaje (beforeMount, mounted)",{"type":8,"value":16597,"toc":17809},[16598,16607,16613,16616,16618,16624,16627,16639,16642,16653,16656,16684,16696,16698,16701,16703,16717,16722,16733,16735,16738,16744,16776,16779,16781,16830,16845,16847,16853,16859,16862,16877,16882,16889,16899,16908,16913,17036,17043,17050,17053,17056,17073,17083,17220,17228,17232,17238,17247,17253,17255,17259,17264,17268,17273,17277,17280,17530,17769,17783,17785,17807],[11,16599,16601,16602,1025,16605,6219],{"id":16600},"ciclos-de-vida-en-vue-fase-de-montaje-beforemount-mounted","Ciclos de vida en Vue: fase de montaje (",[87,16603,16604],{},"beforeMount",[87,16606,6393],{},[15,16608,16609,16610,16612],{},"Muchos problemas cotidianos en Vue tienen el mismo origen: intentar interactuar con el DOM demasiado pronto o concentrar en ",[87,16611,6393],{}," lógica que en realidad podría ejecutarse antes.",[15,16614,16615],{},"La fase de montaje marca justamente esa frontera. Es el momento en el que Vue deja de preparar el componente “por dentro” y finalmente lo inserta en la página. Entender bien esa transición te ayuda a decidir cuándo enfocar un input, cuándo inicializar una librería externa y cuándo, simplemente, no necesitas ningún hook.",[22,16617,6257],{"id":6256},[15,16619,16620,16621,1679],{},"Durante la fase de montaje, Vue ya tiene lista la reactividad del componente: props, estado, watchers y el árbol de renderizado ya están preparados. Lo que cambia en esta etapa es que ",[3933,16622,16623],{},"el DOM real pasa a existir",[15,16625,16626],{},"Aquí aparecen dos hooks clásicos del ciclo de vida:",[33,16628,16629,16634],{},[36,16630,16631,16633],{},[87,16632,16604],{},": se ejecuta cuando Vue está a punto de montar el componente, pero el DOM real todavía no ha sido insertado.",[36,16635,16636,16638],{},[87,16637,6393],{},": se ejecuta cuando el componente ya fue montado y puedes interactuar con nodos reales del DOM.",[15,16640,16641],{},"Si trabajas con Composition API, los equivalentes son:",[33,16643,16644,16649],{},[36,16645,16646],{},[87,16647,16648],{},"onBeforeMount()",[36,16650,16651],{},[87,16652,6400],{},[15,16654,16655],{},"Una forma práctica de orientarse:",[33,16657,16658,16668,16676],{},[36,16659,16660,16661,16664,16665,1679],{},"Si necesitas preparar ",[3933,16662,16663],{},"estado o lógica que no depende del DOM",", normalmente eso pertenece a ",[87,16666,16667],{},"setup",[36,16669,13600,16670,16673,16674,1679],{},[3933,16671,16672],{},"interactuar con elementos reales de la interfaz",", el punto natural suele ser ",[87,16675,6393],{},[36,16677,16678,16679,16681,16682,1679],{},"Si estás considerando ",[87,16680,16604],{},", conviene revisar primero si ese código no encaja mejor antes, por ejemplo dentro de ",[87,16683,16667],{},[15,16685,16686,16687,16695],{},"Además, en aplicaciones con SSR, ",[3933,16688,16689,16690,6418,16692,16694],{},"ni ",[87,16691,16604],{},[87,16693,6393],{}," se ejecutan en el servidor",". Son hooks que solo existen en el cliente.",[22,16697,6322],{"id":6321},[15,16699,16700],{},"La fase de montaje tiene sentido cuando el componente necesita cruzar la frontera entre el estado reactivo y el navegador real.",[15,16702,9308],{},[33,16704,16705,16708,16711,16714],{},[36,16706,16707],{},"Enfocar un campo de búsqueda cuando aparece la vista.",[36,16709,16710],{},"Inicializar una librería externa que necesita un contenedor del DOM (por ejemplo, un gráfico o un editor).",[36,16712,16713],{},"Medir tamaños, posiciones o scroll después del primer render.",[36,16715,16716],{},"Registrar integraciones con API del navegador que dependen de nodos reales.",[15,16718,16719,16721],{},[87,16720,16604],{}," tiene menos uso en la práctica, pero puede servir para:",[33,16723,16724,16727,16730],{},[36,16725,16726],{},"Dejar trazas o marcas de depuración antes del montaje.",[36,16728,16729],{},"Ajustar algún estado justo antes de que ocurra el primer render en el navegador.",[36,16731,16732],{},"Preparar integraciones que necesitan saber que el montaje es inminente, aunque todavía no interactúen con el DOM.",[22,16734,6349],{"id":6348},[15,16736,16737],{},"No todo debe resolverse en esta fase.",[15,16739,13622,16740,1028,16742,13627],{},[87,16741,16604],{},[87,16743,6393],{},[33,16745,16746,16752,16764,16770],{},[36,16747,16748,16749,1679],{},"Solo estás cargando datos que ",[3933,16750,16751],{},"no dependen del DOM",[36,16753,16754,16755,16757,16758,16760,16761,1679],{},"La lógica pertenece a un ",[87,16756,1665],{},", un ",[87,16759,1661],{}," o a un ",[3933,16762,16763],{},"composable",[36,16765,16766,16767,16769],{},"Estás usando ",[87,16768,6393],{}," como un cajón de sastre para “todo lo que faltó”.",[36,16771,16772,16773,1679],{},"Necesitas lógica compatible con ",[3933,16774,16775],{},"SSR desde el primer render",[15,16777,16778],{},"En especial, si el trabajo puede hacerse antes del montaje, suele ser mejor hacerlo antes. Así el componente llega más limpio a la pantalla y el primer render no carga con tareas innecesarias.",[22,16780,13673],{"id":13672},[56,16782,16783,16798],{},[59,16784,16785],{},[62,16786,16787,16789,16792,16795],{},[65,16788,11380],{},[65,16790,16791],{},"Qué ya existe",[65,16793,16794],{},"Qué todavía no deberías asumir",[65,16796,16797],{},"Uso típico",[75,16799,16800,16815],{},[62,16801,16802,16806,16809,16812],{},[80,16803,16804],{},[87,16805,16604],{},[80,16807,16808],{},"Estado reactivo, props, métodos y render preparado",[80,16810,16811],{},"DOM real disponible",[80,16813,16814],{},"Lógica puntual previa al montaje",[62,16816,16817,16821,16824,16827],{},[80,16818,16819],{},[87,16820,6393],{},[80,16822,16823],{},"Componente insertado en el DOM",[80,16825,16826],{},"Que librerías externas o procesos asíncronos ya hayan terminado",[80,16828,16829],{},"Enfocar, medir, integrar APIs del navegador",[15,16831,16832,16833,16835,16836,16838,16839,16841,16842,1679],{},"En la mayoría de proyectos modernos, ",[87,16834,6393],{}," aparece con frecuencia y ",[87,16837,16604],{}," muy poco. Eso no significa que ",[87,16840,16604],{}," esté mal, sino que ",[3933,16843,16844],{},"casi siempre existe un lugar mejor para esa lógica",[22,16846,3085],{"id":3084},[3087,16848,16850,16851],{"id":16849},"_1-intentar-leer-o-modificar-el-dom-en-beforemount","1. Intentar leer o modificar el DOM en ",[87,16852,16604],{},[15,16854,16855,16856,16858],{},"Es un error clásico. En ",[87,16857,16604],{}," Vue está a punto de montar el componente, pero los nodos reales todavía no existen.",[15,16860,16861],{},"Si necesitas hacer algo como:",[33,16863,16864,16869,16874],{},[36,16865,16866],{},[87,16867,16868],{},"focus()",[36,16870,16871],{},[87,16872,16873],{},"getBoundingClientRect()",[36,16875,16876],{},"inicializar una librería sobre un contenedor",[15,16878,16879,16880,1679],{},"Entonces debes esperar a ",[87,16881,6393],{},[3087,16883,16885,16886,16888],{"id":16884},"_2-mandar-a-mounted-cualquier-carga-inicial-por-costumbre","2. Mandar a ",[87,16887,6393],{}," cualquier carga inicial por costumbre",[15,16890,16891,16892,16895,16896,16898],{},"No todo ",[87,16893,16894],{},"fetch"," debería vivir en ",[87,16897,6393],{},". Si la petición no depende del DOM, puedes iniciarla antes y evitar retrasar la experiencia visual por una convención innecesaria.",[15,16900,16901,16903,16904,16907],{},[87,16902,6393],{}," ",[3933,16905,16906],{},"no es el hook principal",". Es simplemente el hook correcto cuando el navegador real entra en la conversación.",[15,16909,16910,16911,583],{},"Por ejemplo, este tipo de lógica no necesita ",[87,16912,6393],{},[154,16914,16916],{"className":156,"code":16915,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst users = ref([])\n\nasync function loadUsers() {\n  const res = await fetch('\u002Fapi\u002Fusers')\n  users.value = await res.json()\n}\n\nloadUsers()\n\u003C\u002Fscript>\n",[87,16917,16918,16934,16944,16948,16962,16966,16977,16997,17013,17017,17021,17028],{"__ignoreMap":163},[167,16919,16920,16922,16924,16926,16928,16930,16932],{"class":169,"line":170},[167,16921,174],{"class":173},[167,16923,178],{"class":177},[167,16925,182],{"class":181},[167,16927,1050],{"class":181},[167,16929,267],{"class":173},[167,16931,1055],{"class":201},[167,16933,185],{"class":173},[167,16935,16936,16938,16940,16942],{"class":169,"line":188},[167,16937,192],{"class":191},[167,16939,195],{"class":173},[167,16941,198],{"class":191},[167,16943,202],{"class":201},[167,16945,16946],{"class":169,"line":205},[167,16947,209],{"emptyLinePlaceholder":208},[167,16949,16950,16952,16955,16957,16959],{"class":169,"line":160},[167,16951,216],{"class":191},[167,16953,16954],{"class":219}," users",[167,16956,223],{"class":191},[167,16958,226],{"class":181},[167,16960,16961],{"class":173},"([])\n",[167,16963,16964],{"class":169,"line":238},[167,16965,209],{"emptyLinePlaceholder":208},[167,16967,16968,16970,16972,16975],{"class":169,"line":243},[167,16969,2523],{"class":191},[167,16971,1432],{"class":191},[167,16973,16974],{"class":181}," loadUsers",[167,16976,763],{"class":173},[167,16978,16979,16981,16984,16986,16988,16990,16992,16995],{"class":169,"line":261},[167,16980,1443],{"class":191},[167,16982,16983],{"class":219}," res",[167,16985,223],{"class":191},[167,16987,3009],{"class":191},[167,16989,6621],{"class":181},[167,16991,229],{"class":173},[167,16993,16994],{"class":201},"'\u002Fapi\u002Fusers'",[167,16996,235],{"class":173},[167,16998,16999,17002,17004,17006,17009,17011],{"class":169,"line":273},[167,17000,17001],{"class":173},"  users.value ",[167,17003,267],{"class":191},[167,17005,3009],{"class":191},[167,17007,17008],{"class":173}," res.",[167,17010,6686],{"class":181},[167,17012,2917],{"class":173},[167,17014,17015],{"class":169,"line":279},[167,17016,276],{"class":173},[167,17018,17019],{"class":169,"line":289},[167,17020,209],{"emptyLinePlaceholder":208},[167,17022,17023,17026],{"class":169,"line":294},[167,17024,17025],{"class":181},"loadUsers",[167,17027,2917],{"class":173},[167,17029,17030,17032,17034],{"class":169,"line":304},[167,17031,282],{"class":173},[167,17033,178],{"class":177},[167,17035,185],{"class":173},[5367,17037,17038],{},[15,17039,17040,17041,1679],{},"Aquí la carga puede empezar directamente en ",[87,17042,16667],{},[3087,17044,17046,17047,17049],{"id":17045},"_3-crear-listeners-o-timers-en-mounted-y-olvidarse-de-limpiarlos","3. Crear listeners o timers en ",[87,17048,6393],{}," y olvidarse de limpiarlos",[15,17051,17052],{},"Este error no se nota en el montaje, pero aparece después.",[15,17054,17055],{},"Si registras:",[33,17057,17058,17061,17065,17069],{},[36,17059,17060],{},"eventos globales",[36,17062,17063],{},[87,17064,11483],{},[36,17066,17067],{},[87,17068,13586],{},[36,17070,17071],{},[87,17072,13761],{},[15,17074,17075,17076,17078,17079,90,17081,1679],{},"en ",[87,17077,6393],{},", deberías limpiarlos en ",[87,17080,13472],{},[87,17082,14250],{},[154,17084,17086],{"className":156,"code":17085,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\n\nlet interval: number\n\nonMounted(() => {\n  interval = window.setInterval(() => {\n    console.log('tick')\n  }, 1000)\n})\n\nonBeforeUnmount(() => {\n  clearInterval(interval)\n})\n\u003C\u002Fscript>\n",[87,17087,17088,17104,17115,17119,17130,17134,17144,17161,17174,17183,17187,17191,17201,17208,17212],{"__ignoreMap":163},[167,17089,17090,17092,17094,17096,17098,17100,17102],{"class":169,"line":170},[167,17091,174],{"class":173},[167,17093,178],{"class":177},[167,17095,182],{"class":181},[167,17097,1050],{"class":181},[167,17099,267],{"class":173},[167,17101,1055],{"class":201},[167,17103,185],{"class":173},[167,17105,17106,17108,17111,17113],{"class":169,"line":188},[167,17107,192],{"class":191},[167,17109,17110],{"class":173}," { onMounted, onBeforeUnmount } ",[167,17112,198],{"class":191},[167,17114,202],{"class":201},[167,17116,17117],{"class":169,"line":205},[167,17118,209],{"emptyLinePlaceholder":208},[167,17120,17121,17123,17126,17128],{"class":169,"line":160},[167,17122,13948],{"class":191},[167,17124,17125],{"class":173}," interval",[167,17127,583],{"class":191},[167,17129,6510],{"class":219},[167,17131,17132],{"class":169,"line":238},[167,17133,209],{"emptyLinePlaceholder":208},[167,17135,17136,17138,17140,17142],{"class":169,"line":243},[167,17137,6796],{"class":181},[167,17139,1493],{"class":173},[167,17141,639],{"class":191},[167,17143,1905],{"class":173},[167,17145,17146,17149,17151,17153,17155,17157,17159],{"class":169,"line":261},[167,17147,17148],{"class":173},"  interval ",[167,17150,267],{"class":191},[167,17152,1498],{"class":173},[167,17154,11483],{"class":181},[167,17156,1493],{"class":173},[167,17158,639],{"class":191},[167,17160,1905],{"class":173},[167,17162,17163,17165,17167,17169,17172],{"class":169,"line":273},[167,17164,8894],{"class":173},[167,17166,2611],{"class":181},[167,17168,229],{"class":173},[167,17170,17171],{"class":201},"'tick'",[167,17173,235],{"class":173},[167,17175,17176,17178,17181],{"class":169,"line":279},[167,17177,1957],{"class":173},[167,17179,17180],{"class":219},"1000",[167,17182,235],{"class":173},[167,17184,17185],{"class":169,"line":289},[167,17186,403],{"class":173},[167,17188,17189],{"class":169,"line":294},[167,17190,209],{"emptyLinePlaceholder":208},[167,17192,17193,17195,17197,17199],{"class":169,"line":304},[167,17194,14250],{"class":181},[167,17196,1493],{"class":173},[167,17198,639],{"class":191},[167,17200,1905],{"class":173},[167,17202,17203,17205],{"class":169,"line":313},[167,17204,12134],{"class":181},[167,17206,17207],{"class":173},"(interval)\n",[167,17209,17210],{"class":169,"line":161},[167,17211,403],{"class":173},[167,17213,17214,17216,17218],{"class":169,"line":335},[167,17215,282],{"class":173},[167,17217,178],{"class":177},[167,17219,185],{"class":173},[5367,17221,17222],{},[15,17223,17224,17225,1679],{},"Montar bien también implica ",[3933,17226,17227],{},"dejar preparado el desmontaje",[3087,17229,17231],{"id":17230},"_4-asumir-que-estos-hooks-también-corren-en-ssr","4. Asumir que estos hooks también corren en SSR",[15,17233,17234,17235,1679],{},"En Nuxt o en cualquier flujo con renderizado del lado del servidor, estos hooks ",[3933,17236,17237],{},"solo se ejecutan en el cliente",[15,17239,17240,17241,17243,17244,1679],{},"Si colocas lógica crítica del HTML inicial dentro de ",[87,17242,6393],{},", esa lógica ",[3933,17245,17246],{},"no formará parte del primer render del servidor",[15,17248,17249,17250,1679],{},"En Nuxt, por ejemplo, las cargas de datos iniciales suelen vivir en composables o utilidades como ",[87,17251,17252],{},"useAsyncData",[22,17254,7997],{"id":7996},[3087,17256,17258],{"id":17257},"enfocar-un-input-al-entrar-en-la-vista","Enfocar un input al entrar en la vista",[15,17260,17261,17262,1679],{},"Es uno de los ejemplos más simples y útiles: necesitas que el elemento exista antes de llamar a ",[87,17263,16868],{},[3087,17265,17267],{"id":17266},"inicializar-una-librería-de-terceros","Inicializar una librería de terceros",[15,17269,17270,17271,1679],{},"Si usas un gráfico, un calendario o un editor enriquecido, la librería normalmente requiere un contenedor del DOM. Ese momento natural es ",[87,17272,6393],{},[3087,17274,17276],{"id":17275},"medir-un-bloque-después-del-primer-render","Medir un bloque después del primer render",[15,17278,17279],{},"Algunos componentes necesitan conocer su alto o ancho para decidir animaciones, layout o comportamiento de scroll. Esa medición también pertenece a la fase de montaje.",[154,17281,17283],{"className":156,"code":17282,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeMount, onMounted, ref } from 'vue'\n\nconst searchInput = ref\u003CHTMLInputElement | null>(null)\nconst status = ref('Preparando componente...')\n\nonBeforeMount(() => {\n  status.value = 'Vue ya preparó la instancia, pero el input todavía no existe en el DOM.'\n})\n\nonMounted(() => {\n  searchInput.value?.focus()\n  status.value = 'Componente montado. El input ya puede recibir foco.'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"search-panel\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n\n    \u003Cinput\n      ref=\"searchInput\"\n      type=\"search\"\n      placeholder=\"Buscar tareas\"\n    >\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,17284,17285,17301,17312,17316,17342,17359,17363,17374,17383,17387,17391,17401,17411,17420,17424,17432,17436,17444,17459,17471,17475,17482,17491,17500,17510,17514,17522],{"__ignoreMap":163},[167,17286,17287,17289,17291,17293,17295,17297,17299],{"class":169,"line":170},[167,17288,174],{"class":173},[167,17290,178],{"class":177},[167,17292,182],{"class":181},[167,17294,1050],{"class":181},[167,17296,267],{"class":173},[167,17298,1055],{"class":201},[167,17300,185],{"class":173},[167,17302,17303,17305,17308,17310],{"class":169,"line":188},[167,17304,192],{"class":191},[167,17306,17307],{"class":173}," { onBeforeMount, onMounted, ref } ",[167,17309,198],{"class":191},[167,17311,202],{"class":201},[167,17313,17314],{"class":169,"line":205},[167,17315,209],{"emptyLinePlaceholder":208},[167,17317,17318,17320,17323,17325,17327,17329,17332,17334,17336,17338,17340],{"class":169,"line":160},[167,17319,216],{"class":191},[167,17321,17322],{"class":219}," searchInput",[167,17324,223],{"class":191},[167,17326,226],{"class":181},[167,17328,174],{"class":173},[167,17330,17331],{"class":181},"HTMLInputElement",[167,17333,659],{"class":191},[167,17335,6567],{"class":219},[167,17337,6570],{"class":173},[167,17339,6573],{"class":219},[167,17341,235],{"class":173},[167,17343,17344,17346,17348,17350,17352,17354,17357],{"class":169,"line":238},[167,17345,216],{"class":191},[167,17347,11700],{"class":219},[167,17349,223],{"class":191},[167,17351,226],{"class":181},[167,17353,229],{"class":173},[167,17355,17356],{"class":201},"'Preparando componente...'",[167,17358,235],{"class":173},[167,17360,17361],{"class":169,"line":243},[167,17362,209],{"emptyLinePlaceholder":208},[167,17364,17365,17368,17370,17372],{"class":169,"line":261},[167,17366,17367],{"class":181},"onBeforeMount",[167,17369,1493],{"class":173},[167,17371,639],{"class":191},[167,17373,1905],{"class":173},[167,17375,17376,17378,17380],{"class":169,"line":273},[167,17377,11916],{"class":173},[167,17379,267],{"class":191},[167,17381,17382],{"class":201}," 'Vue ya preparó la instancia, pero el input todavía no existe en el DOM.'\n",[167,17384,17385],{"class":169,"line":279},[167,17386,403],{"class":173},[167,17388,17389],{"class":169,"line":289},[167,17390,209],{"emptyLinePlaceholder":208},[167,17392,17393,17395,17397,17399],{"class":169,"line":294},[167,17394,6796],{"class":181},[167,17396,1493],{"class":173},[167,17398,639],{"class":191},[167,17400,1905],{"class":173},[167,17402,17403,17406,17409],{"class":169,"line":304},[167,17404,17405],{"class":173},"  searchInput.value?.",[167,17407,17408],{"class":181},"focus",[167,17410,2917],{"class":173},[167,17412,17413,17415,17417],{"class":169,"line":313},[167,17414,11916],{"class":173},[167,17416,267],{"class":191},[167,17418,17419],{"class":201}," 'Componente montado. El input ya puede recibir foco.'\n",[167,17421,17422],{"class":169,"line":161},[167,17423,403],{"class":173},[167,17425,17426,17428,17430],{"class":169,"line":335},[167,17427,282],{"class":173},[167,17429,178],{"class":177},[167,17431,185],{"class":173},[167,17433,17434],{"class":169,"line":341},[167,17435,209],{"emptyLinePlaceholder":208},[167,17437,17438,17440,17442],{"class":169,"line":489},[167,17439,174],{"class":173},[167,17441,299],{"class":177},[167,17443,185],{"class":173},[167,17445,17446,17448,17450,17452,17454,17457],{"class":169,"line":495},[167,17447,307],{"class":173},[167,17449,10117],{"class":177},[167,17451,1245],{"class":181},[167,17453,267],{"class":173},[167,17455,17456],{"class":201},"\"search-panel\"",[167,17458,185],{"class":173},[167,17460,17461,17463,17465,17467,17469],{"class":169,"line":501},[167,17462,1257],{"class":173},[167,17464,15],{"class":177},[167,17466,12334],{"class":173},[167,17468,15],{"class":177},[167,17470,185],{"class":173},[167,17472,17473],{"class":169,"line":512},[167,17474,209],{"emptyLinePlaceholder":208},[167,17476,17477,17479],{"class":169,"line":781},[167,17478,1257],{"class":173},[167,17480,17481],{"class":177},"input\n",[167,17483,17484,17486,17488],{"class":169,"line":786},[167,17485,15963],{"class":181},[167,17487,267],{"class":173},[167,17489,17490],{"class":201},"\"searchInput\"\n",[167,17492,17493,17495,17497],{"class":169,"line":2678},[167,17494,3739],{"class":181},[167,17496,267],{"class":173},[167,17498,17499],{"class":201},"\"search\"\n",[167,17501,17502,17505,17507],{"class":169,"line":2692},[167,17503,17504],{"class":181},"      placeholder",[167,17506,267],{"class":173},[167,17508,17509],{"class":201},"\"Buscar tareas\"\n",[167,17511,17512],{"class":169,"line":3575},[167,17513,3769],{"class":173},[167,17515,17516,17518,17520],{"class":169,"line":5028},[167,17517,504],{"class":173},[167,17519,10117],{"class":177},[167,17521,185],{"class":173},[167,17523,17524,17526,17528],{"class":169,"line":5037},[167,17525,282],{"class":173},[167,17527,299],{"class":177},[167,17529,185],{"class":173},[154,17531,17533],{"className":156,"code":17532,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      status: 'Preparando componente...'\n    }\n  },\n\n  beforeMount() {\n    this.status = 'Vue está a punto de insertar el DOM del componente.'\n  },\n\n  mounted() {\n    this.status = 'Componente montado. El input ya puede recibir foco.'\n\n    if (this.$refs.searchInput instanceof HTMLInputElement) {\n      this.$refs.searchInput.focus()\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"search-panel\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n\n    \u003Cinput\n      ref=\"searchInput\"\n      type=\"search\"\n      placeholder=\"Buscar tareas\"\n    >\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,17534,17535,17543,17551,17557,17563,17570,17574,17578,17582,17589,17600,17604,17608,17614,17624,17628,17646,17657,17661,17665,17669,17677,17681,17689,17703,17715,17719,17725,17733,17741,17749,17753,17761],{"__ignoreMap":163},[167,17536,17537,17539,17541],{"class":169,"line":170},[167,17538,174],{"class":173},[167,17540,178],{"class":177},[167,17542,185],{"class":173},[167,17544,17545,17547,17549],{"class":169,"line":188},[167,17546,608],{"class":191},[167,17548,3991],{"class":191},[167,17550,1905],{"class":173},[167,17552,17553,17555],{"class":169,"line":205},[167,17554,7176],{"class":181},[167,17556,763],{"class":173},[167,17558,17559,17561],{"class":169,"line":160},[167,17560,1937],{"class":191},[167,17562,1905],{"class":173},[167,17564,17565,17567],{"class":169,"line":238},[167,17566,12585],{"class":173},[167,17568,17569],{"class":201},"'Preparando componente...'\n",[167,17571,17572],{"class":169,"line":243},[167,17573,4049],{"class":173},[167,17575,17576],{"class":169,"line":261},[167,17577,398],{"class":173},[167,17579,17580],{"class":169,"line":273},[167,17581,209],{"emptyLinePlaceholder":208},[167,17583,17584,17587],{"class":169,"line":279},[167,17585,17586],{"class":181},"  beforeMount",[167,17588,763],{"class":173},[167,17590,17591,17593,17595,17597],{"class":169,"line":289},[167,17592,879],{"class":219},[167,17594,12786],{"class":173},[167,17596,267],{"class":191},[167,17598,17599],{"class":201}," 'Vue está a punto de insertar el DOM del componente.'\n",[167,17601,17602],{"class":169,"line":294},[167,17603,398],{"class":173},[167,17605,17606],{"class":169,"line":304},[167,17607,209],{"emptyLinePlaceholder":208},[167,17609,17610,17612],{"class":169,"line":313},[167,17611,12749],{"class":181},[167,17613,763],{"class":173},[167,17615,17616,17618,17620,17622],{"class":169,"line":161},[167,17617,879],{"class":219},[167,17619,12786],{"class":173},[167,17621,267],{"class":191},[167,17623,17419],{"class":201},[167,17625,17626],{"class":169,"line":335},[167,17627,209],{"emptyLinePlaceholder":208},[167,17629,17630,17632,17634,17636,17639,17641,17644],{"class":169,"line":341},[167,17631,7419],{"class":191},[167,17633,2526],{"class":173},[167,17635,4927],{"class":219},[167,17637,17638],{"class":173},".$refs.searchInput ",[167,17640,6762],{"class":191},[167,17642,17643],{"class":181}," HTMLInputElement",[167,17645,258],{"class":173},[167,17647,17648,17650,17653,17655],{"class":169,"line":489},[167,17649,741],{"class":219},[167,17651,17652],{"class":173},".$refs.searchInput.",[167,17654,17408],{"class":181},[167,17656,2917],{"class":173},[167,17658,17659],{"class":169,"line":495},[167,17660,4049],{"class":173},[167,17662,17663],{"class":169,"line":501},[167,17664,3492],{"class":173},[167,17666,17667],{"class":169,"line":512},[167,17668,276],{"class":173},[167,17670,17671,17673,17675],{"class":169,"line":781},[167,17672,282],{"class":173},[167,17674,178],{"class":177},[167,17676,185],{"class":173},[167,17678,17679],{"class":169,"line":786},[167,17680,209],{"emptyLinePlaceholder":208},[167,17682,17683,17685,17687],{"class":169,"line":2678},[167,17684,174],{"class":173},[167,17686,299],{"class":177},[167,17688,185],{"class":173},[167,17690,17691,17693,17695,17697,17699,17701],{"class":169,"line":2692},[167,17692,307],{"class":173},[167,17694,10117],{"class":177},[167,17696,1245],{"class":181},[167,17698,267],{"class":173},[167,17700,17456],{"class":201},[167,17702,185],{"class":173},[167,17704,17705,17707,17709,17711,17713],{"class":169,"line":3575},[167,17706,1257],{"class":173},[167,17708,15],{"class":177},[167,17710,12334],{"class":173},[167,17712,15],{"class":177},[167,17714,185],{"class":173},[167,17716,17717],{"class":169,"line":5028},[167,17718,209],{"emptyLinePlaceholder":208},[167,17720,17721,17723],{"class":169,"line":5037},[167,17722,1257],{"class":173},[167,17724,17481],{"class":177},[167,17726,17727,17729,17731],{"class":169,"line":5046},[167,17728,15963],{"class":181},[167,17730,267],{"class":173},[167,17732,17490],{"class":201},[167,17734,17735,17737,17739],{"class":169,"line":6756},[167,17736,3739],{"class":181},[167,17738,267],{"class":173},[167,17740,17499],{"class":201},[167,17742,17743,17745,17747],{"class":169,"line":6778},[167,17744,17504],{"class":181},[167,17746,267],{"class":173},[167,17748,17509],{"class":201},[167,17750,17751],{"class":169,"line":6783},[167,17752,3769],{"class":173},[167,17754,17755,17757,17759],{"class":169,"line":6788},[167,17756,504],{"class":173},[167,17758,10117],{"class":177},[167,17760,185],{"class":173},[167,17762,17763,17765,17767],{"class":169,"line":6793},[167,17764,282],{"class":173},[167,17766,299],{"class":177},[167,17768,185],{"class":173},[5367,17770,17771],{},[15,17772,17773,17774,17776,17777,17779,17780,17782],{},"Aquí ",[87,17775,16648],{}," solo actualiza un estado informativo. En cambio, ",[87,17778,16868],{}," queda en ",[87,17781,6400],{}," porque necesita un nodo real del DOM.",[22,17784,7678],{"id":7677},[33,17786,17787,17792,17801],{},[36,17788,17789,17791],{},[87,17790,16604],{}," existe, pero en la mayoría de componentes no será tu herramienta principal. Si no necesitas el DOM, casi siempre conviene resolver la lógica antes.",[36,17793,17794,17796,17797,17800],{},[87,17795,6393],{},", en cambio, tiene un papel muy claro: ",[3933,17798,17799],{},"es el hook donde el componente se encuentra con el navegador real",". Inputs, mediciones, gráficos, observers y librerías de terceros suelen empezar ahí.",[36,17802,17803,17804,1679],{},"La mejor forma de usar esta fase no es meter más cosas en ella, sino ",[3933,17805,17806],{},"reservarla únicamente para lo que realmente depende del DOM",[924,17808,16558],{},{"title":163,"searchDepth":188,"depth":188,"links":17810},[17811,17812,17813,17814,17815,17824,17829],{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":13672,"depth":188,"text":13673},{"id":3084,"depth":188,"text":3085,"children":17816},[17817,17819,17821,17823],{"id":16849,"depth":205,"text":17818},"1. Intentar leer o modificar el DOM en beforeMount",{"id":16884,"depth":205,"text":17820},"2. Mandar a mounted cualquier carga inicial por costumbre",{"id":17045,"depth":205,"text":17822},"3. Crear listeners o timers en mounted y olvidarse de limpiarlos",{"id":17230,"depth":205,"text":17231},{"id":7996,"depth":188,"text":7997,"children":17825},[17826,17827,17828],{"id":17257,"depth":205,"text":17258},{"id":17266,"depth":205,"text":17267},{"id":17275,"depth":205,"text":17276},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284431\u002Fvue-lifecycle-mounting-phase-beforemount-mounted_wkrzal.png","Ilustración del ciclo de vida de un componente Vue enfocada en la fase de montaje del DOM","2026-03-10","Qué ocurre justo antes y justo después de que Vue inserte un componente en el DOM, y cómo usar beforeMount y mounted sin meter lógica donde no corresponde.",{"updatedAt":17835,"coverCaption":17836,"author":946,"keywords":17837},"2026-03-09T22:00:00-05:00","La fase de montaje es el momento en el que Vue crea e inserta el DOM del componente en la página.",[3258,16604,6393,6796,17838],"DOM","\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[17841],{"headline":16595,"author":17842,"datePublished":17835,"@type":961},{"name":946,"@type":959},{"title":16595,"description":17833},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[17846,17847,17848,17849],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":9169,"color":9170},{"tag":5424,"color":5425},"GQ-lIt1QfPL-Vw50b8qQ3uquMQjxzjBexBGH1U_jPMM",{"id":17852,"title":17853,"body":17854,"cover":18980,"coverAlt":18981,"date":18982,"description":18983,"draft":940,"extension":941,"lab":942,"locale":943,"meta":18984,"navigation":208,"path":18988,"schemaOrg":18989,"seo":18992,"series":7718,"seriesDescription":7719,"seriesOrder":188,"seriesTitle":7720,"slug":942,"stem":18993,"tags":18994,"__hash__":18999},"blog\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es.md","Ciclos de vida en Vue: fase de creación (beforeCreate, created, setup)",{"type":8,"value":17855,"toc":18960},[17856,17868,17874,17882,17892,17896,17902,17919,17935,17938,17961,17967,17974,17977,17993,18000,18006,18067,18073,18086,18089,18100,18213,18219,18227,18233,18254,18263,18410,18420,18484,18488,18497,18506,18509,18521,18528,18541,18545,18552,18556,18563,18750,18921,18925,18957],[11,17857,17859,17860,1025,17863,1025,17866,6219],{"id":17858},"ciclos-de-vida-en-vue-fase-de-creación-beforecreate-created-setup","Ciclos de vida en Vue: fase de creación (",[87,17861,17862],{},"beforeCreate",[87,17864,17865],{},"created",[87,17867,16667],{},[15,17869,17870,17871],{},"Cuando empiezas a escribir un componente en Vue, una de las preguntas más comunes es: ",[3933,17872,17873],{},"¿dónde debería colocar la lógica inicial?",[15,17875,17876,17877,17879,17880,1679],{},"La respuesta depende principalmente de si estás trabajando con ",[3933,17878,3973],{}," o con ",[3933,17881,3260],{},[15,17883,17884,17885,17888,17889,1679],{},"La ",[3933,17886,17887],{},"fase de creación"," es el momento en el que Vue construye la instancia del componente, inicializa su sistema de reactividad y prepara su estado interno. En esta etapa, el componente todavía ",[3933,17890,17891],{},"no ha sido montado en el DOM",[22,17893,17895],{"id":17894},"qué-ocurre-en-esta-fase","Qué ocurre en esta fase",[15,17897,17898,17899,17901],{},"En términos prácticos, el orden clásico del ciclo de vida con ",[3933,17900,3973],{}," es:",[3035,17903,17904,17908,17912],{},[36,17905,17906],{},[87,17907,17862],{},[36,17909,17910],{},[87,17911,17865],{},[36,17913,17914,17915,11227,17917,6219],{},"montaje (",[87,17916,16604],{},[87,17918,6393],{},[15,17920,3810,17921,17923,17924,17926,17927,17930,17931,1028,17933,1679],{},[3933,17922,3260],{},", el punto de entrada es ",[87,17925,9238],{},", que se ejecuta ",[3933,17928,17929],{},"antes de los hooks de ciclo de vida de Options API",", incluidos ",[87,17932,17862],{},[87,17934,17865],{},[15,17936,17937],{},"Si quieres quedarte con una idea simple:",[33,17939,17940,17947,17954],{},[36,17941,17942,17946],{},[3933,17943,17944],{},[87,17945,17862],{}," → punto extremadamente temprano; rara vez necesario hoy.",[36,17948,17949,17953],{},[3933,17950,17951],{},[87,17952,17865],{}," → estado reactivo disponible en Options API.",[36,17955,17956,17960],{},[3933,17957,17958],{},[87,17959,16667],{}," → punto de arranque principal en Composition API.",[22,17962,17964,17966],{"id":17963},"beforecreate-cuándo-aparece-y-por-qué-casi-no-se-usa",[87,17965,17862],{},": cuándo aparece y por qué casi no se usa",[15,17968,17969,15250,17971,1679],{},[87,17970,17862],{},[3933,17972,17973],{},"antes de que Vue termine de inicializar el estado reactivo y las opciones de la instancia",[15,17975,17976],{},"En este punto:",[33,17978,17979,17984,17988],{},[36,17980,17981],{},[87,17982,17983],{},"data",[36,17985,17986],{},[87,17987,1661],{},[36,17989,17990],{},[87,17991,17992],{},"methods",[15,17994,17995,17996,17999],{},"Todavía ",[3933,17997,17998],{},"no están inicializados",", por lo que el acceso a la instancia es muy limitado.",[15,18001,18002,18003,1679],{},"Por esta razón, en proyectos modernos con Vue 3 este hook rara vez se utiliza. En la mayoría de casos aparece únicamente en ",[3933,18004,18005],{},"código legado o escenarios muy específicos relacionados con plugins o extensiones del framework",[154,18007,18010],{"className":156,"code":18008,"filename":15284,"highlights":18009,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeCreate() {\n    console.log('El componente está arrancando')\n  }\n}\n\u003C\u002Fscript>\n",[205,160,238],[87,18011,18012,18020,18028,18036,18050,18055,18059],{"__ignoreMap":163},[167,18013,18014,18016,18018],{"class":169,"line":170},[167,18015,174],{"class":173},[167,18017,178],{"class":177},[167,18019,185],{"class":173},[167,18021,18022,18024,18026],{"class":169,"line":188},[167,18023,608],{"class":191},[167,18025,3991],{"class":191},[167,18027,1905],{"class":173},[167,18029,18031,18034],{"class":18030,"line":205},[169,213],[167,18032,18033],{"class":181},"  beforeCreate",[167,18035,763],{"class":173},[167,18037,18039,18041,18043,18045,18048],{"class":18038,"line":160},[169,213],[167,18040,8894],{"class":173},[167,18042,2611],{"class":181},[167,18044,229],{"class":173},[167,18046,18047],{"class":201},"'El componente está arrancando'",[167,18049,235],{"class":173},[167,18051,18053],{"class":18052,"line":238},[169,213],[167,18054,3492],{"class":173},[167,18056,18057],{"class":169,"line":243},[167,18058,276],{"class":173},[167,18060,18061,18063,18065],{"class":169,"line":261},[167,18062,282],{"class":173},[167,18064,178],{"class":177},[167,18066,185],{"class":173},[22,18068,18070,18072],{"id":18069},"created-el-punto-útil-en-options-api",[87,18071,17865],{},": el punto útil en Options API",[15,18074,18075,18076,18078,18079,18082,18083,1679],{},"En el hook ",[87,18077,17865],{},", la instancia del componente ya está completamente inicializada en términos de ",[3933,18080,18081],{},"estado reactivo y métodos",", aunque el ",[3933,18084,18085],{},"DOM todavía no ha sido renderizado",[15,18087,18088],{},"Esto lo convierte en un buen lugar para:",[33,18090,18091,18094,18097],{},[36,18092,18093],{},"Inicializar estado derivado de configuración.",[36,18095,18096],{},"Cargar datos de forma temprana.",[36,18098,18099],{},"Preparar timers o listeners que no dependan del DOM.",[154,18101,18104],{"className":156,"code":18102,"filename":15284,"highlights":18103,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      users: []\n    }\n  },\n  async created() {\n    this.users = await fetch('\u002Fapi\u002Fusers').then((r) => r.json())\n  }\n}\n\u003C\u002Fscript>\n",[273,279,289],[87,18105,18106,18114,18122,18128,18134,18139,18143,18147,18157,18196,18201,18205],{"__ignoreMap":163},[167,18107,18108,18110,18112],{"class":169,"line":170},[167,18109,174],{"class":173},[167,18111,178],{"class":177},[167,18113,185],{"class":173},[167,18115,18116,18118,18120],{"class":169,"line":188},[167,18117,608],{"class":191},[167,18119,3991],{"class":191},[167,18121,1905],{"class":173},[167,18123,18124,18126],{"class":169,"line":205},[167,18125,7176],{"class":181},[167,18127,763],{"class":173},[167,18129,18130,18132],{"class":169,"line":160},[167,18131,1937],{"class":191},[167,18133,1905],{"class":173},[167,18135,18136],{"class":169,"line":238},[167,18137,18138],{"class":173},"      users: []\n",[167,18140,18141],{"class":169,"line":243},[167,18142,4049],{"class":173},[167,18144,18145],{"class":169,"line":261},[167,18146,398],{"class":173},[167,18148,18150,18152,18155],{"class":18149,"line":273},[169,213],[167,18151,7331],{"class":191},[167,18153,18154],{"class":181}," created",[167,18156,763],{"class":173},[167,18158,18160,18162,18165,18167,18169,18171,18173,18175,18177,18180,18182,18185,18187,18189,18192,18194],{"class":18159,"line":279},[169,213],[167,18161,879],{"class":219},[167,18163,18164],{"class":173},".users ",[167,18166,267],{"class":191},[167,18168,3009],{"class":191},[167,18170,6621],{"class":181},[167,18172,229],{"class":173},[167,18174,16994],{"class":201},[167,18176,4270],{"class":173},[167,18178,18179],{"class":181},"then",[167,18181,1918],{"class":173},[167,18183,18184],{"class":254},"r",[167,18186,693],{"class":173},[167,18188,639],{"class":191},[167,18190,18191],{"class":173}," r.",[167,18193,6686],{"class":181},[167,18195,2509],{"class":173},[167,18197,18199],{"class":18198,"line":289},[169,213],[167,18200,3492],{"class":173},[167,18202,18203],{"class":169,"line":294},[167,18204,276],{"class":173},[167,18206,18207,18209,18211],{"class":169,"line":304},[167,18208,282],{"class":173},[167,18210,178],{"class":177},[167,18212,185],{"class":173},[22,18214,18216,18218],{"id":18215},"setup-el-arranque-natural-en-vue-3",[87,18217,16667],{},": el arranque natural en Vue 3",[15,18220,18221,18222,1025,18224,18226],{},"Cuando trabajas con ",[3933,18223,3260],{},[87,18225,9238],{}," es el verdadero punto de entrada del componente.",[15,18228,18229,18230,18232],{},"Dentro de ",[87,18231,16667],{}," defines:",[33,18234,18235,18239,18244,18248,18252],{},[36,18236,18237],{},[87,18238,2085],{},[36,18240,18241],{},[87,18242,18243],{},"reactive",[36,18245,18246],{},[87,18247,1661],{},[36,18249,18250],{},[87,18251,1665],{},[36,18253,1629],{},[15,18255,18256,18257,15250,18259,18262],{},"Además, ",[87,18258,16667],{},[3933,18260,18261],{},"antes de que el componente sea montado",", por lo que permite preparar todo el estado que la vista necesitará en su primer render.",[154,18264,18267],{"className":156,"code":18265,"filename":15284,"highlights":18266,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst count = ref(0)\nconst double = computed(() => count.value * 2)\n\nconsole.log('setup ejecutado')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">\n    count: {{ count }} \u002F double: {{ double }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[261],[87,18268,18269,18279,18290,18294,18310,18335,18339,18354,18362,18366,18374,18389,18394,18402],{"__ignoreMap":163},[167,18270,18271,18273,18275,18277],{"class":169,"line":170},[167,18272,174],{"class":173},[167,18274,178],{"class":177},[167,18276,182],{"class":181},[167,18278,185],{"class":173},[167,18280,18281,18283,18286,18288],{"class":169,"line":188},[167,18282,192],{"class":191},[167,18284,18285],{"class":173}," { ref, computed } ",[167,18287,198],{"class":191},[167,18289,202],{"class":201},[167,18291,18292],{"class":169,"line":205},[167,18293,209],{"emptyLinePlaceholder":208},[167,18295,18296,18298,18300,18302,18304,18306,18308],{"class":169,"line":160},[167,18297,216],{"class":191},[167,18299,15325],{"class":219},[167,18301,223],{"class":191},[167,18303,226],{"class":181},[167,18305,229],{"class":173},[167,18307,1960],{"class":219},[167,18309,235],{"class":173},[167,18311,18312,18314,18317,18319,18321,18323,18325,18328,18330,18333],{"class":169,"line":238},[167,18313,216],{"class":191},[167,18315,18316],{"class":219}," double",[167,18318,223],{"class":191},[167,18320,1898],{"class":181},[167,18322,1493],{"class":173},[167,18324,639],{"class":191},[167,18326,18327],{"class":173}," count.value ",[167,18329,1949],{"class":191},[167,18331,18332],{"class":219}," 2",[167,18334,235],{"class":173},[167,18336,18337],{"class":169,"line":243},[167,18338,209],{"emptyLinePlaceholder":208},[167,18340,18342,18345,18347,18349,18352],{"class":18341,"line":261},[169,213],[167,18343,18344],{"class":173},"console.",[167,18346,2611],{"class":181},[167,18348,229],{"class":173},[167,18350,18351],{"class":201},"'setup ejecutado'",[167,18353,235],{"class":173},[167,18355,18356,18358,18360],{"class":169,"line":273},[167,18357,282],{"class":173},[167,18359,178],{"class":177},[167,18361,185],{"class":173},[167,18363,18364],{"class":169,"line":279},[167,18365,209],{"emptyLinePlaceholder":208},[167,18367,18368,18370,18372],{"class":169,"line":289},[167,18369,174],{"class":173},[167,18371,299],{"class":177},[167,18373,185],{"class":173},[167,18375,18376,18378,18380,18382,18384,18387],{"class":169,"line":294},[167,18377,307],{"class":173},[167,18379,507],{"class":177},[167,18381,1182],{"class":181},[167,18383,267],{"class":173},[167,18385,18386],{"class":201},"\"count++\"",[167,18388,185],{"class":173},[167,18390,18391],{"class":169,"line":304},[167,18392,18393],{"class":173},"    count: {{ count }} \u002F double: {{ double }}\n",[167,18395,18396,18398,18400],{"class":169,"line":313},[167,18397,504],{"class":173},[167,18399,507],{"class":177},[167,18401,185],{"class":173},[167,18403,18404,18406,18408],{"class":169,"line":161},[167,18405,282],{"class":173},[167,18407,299],{"class":177},[167,18409,185],{"class":173},[22,18411,18413,18414,1662,18416,1662,18418],{"id":18412},"comparación-rápida-beforecreate-vs-created-vs-setup","Comparación rápida: ",[87,18415,17862],{},[87,18417,17865],{},[87,18419,16667],{},[56,18421,18422,18438],{},[59,18423,18424],{},[62,18425,18426,18429,18432,18435],{},[65,18427,18428],{},"Punto",[65,18430,18431],{},"API",[65,18433,18434],{},"Qué ya tienes disponible",[65,18436,18437],{},"Cuándo elegirlo",[75,18439,18440,18455,18469],{},[62,18441,18442,18446,18449,18452],{},[80,18443,18444],{},[87,18445,17862],{},[80,18447,18448],{},"Options",[80,18450,18451],{},"Instancia en arranque temprano",[80,18453,18454],{},"Casos muy puntuales o código legado",[62,18456,18457,18461,18463,18466],{},[80,18458,18459],{},[87,18460,17865],{},[80,18462,18448],{},[80,18464,18465],{},"Estado y métodos disponibles, sin DOM",[80,18467,18468],{},"Inicialización de datos o lógica sin DOM",[62,18470,18471,18475,18478,18481],{},[80,18472,18473],{},[87,18474,16667],{},[80,18476,18477],{},"Composition",[80,18479,18480],{},"Reactividad y composables desde el inicio",[80,18482,18483],{},"Opción principal en Vue 3 moderno",[22,18485,18487],{"id":18486},"errores-que-se-repiten-con-frecuencia","Errores que se repiten con frecuencia",[3087,18489,18491,18492,18494,18495],{"id":18490},"_1-intentar-manipular-el-dom-en-created-o-al-inicio-de-setup","1) Intentar manipular el DOM en ",[87,18493,17865],{}," o al inicio de ",[87,18496,16667],{},[15,18498,18499,18500,18502,18503,18505],{},"Ni ",[87,18501,17865],{}," ni el inicio de ",[87,18504,16667],{}," garantizan que el DOM exista.",[15,18507,18508],{},"Si necesitas interactuar con elementos reales del DOM, debes usar:",[33,18510,18511,18516],{},[36,18512,18513,18515],{},[87,18514,6393],{}," (Options API)",[36,18517,18518,18520],{},[87,18519,6796],{}," (Composition API)",[3087,18522,18524,18525,18527],{"id":18523},"_2-usar-beforecreate-por-costumbre","2) Usar ",[87,18526,17862],{}," por costumbre",[15,18529,18530,18531,18534,18535,18537,18538,18540],{},"Muchos ejemplos antiguos de Vue lo utilizan, pero en Vue 3 ",[3933,18532,18533],{},"rara vez aporta ventajas reales"," frente a ",[87,18536,16667],{}," (Composition API) o ",[87,18539,17865],{}," (Options API).",[3087,18542,18544],{"id":18543},"_3-mezclar-mentalmente-options-api-y-composition-api","3) Mezclar mentalmente Options API y Composition API",[15,18546,18547,18548,18551],{},"Vue permite combinar ambas API en un proyecto, pero dentro de un componente conviene ",[3933,18549,18550],{},"tener claro cuál es el punto de entrada principal",". Mezclar ambas sin un criterio claro puede terminar duplicando lógica de inicialización.",[22,18553,18555],{"id":18554},"un-ejemplo-equivalente-en-ambos-estilos","Un ejemplo equivalente en ambos estilos",[15,18557,18558,18559,18562],{},"Supongamos que queremos ",[3933,18560,18561],{},"cargar usuarios cuando se crea el componente",", sin depender del DOM.",[154,18564,18566],{"className":156,"code":18565,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst users = ref([])\n\nasync function loadUsers() {\n  users.value = await fetch('\u002Fapi\u002Fusers').then((r) => r.json())\n}\n\n\u002F\u002F Se ejecuta durante setup (fase de creación)\nloadUsers()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"user in users\" :key=\"user.id\">\n      {{ user.name }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[87,18567,18568,18578,18588,18592,18604,18608,18618,18650,18654,18658,18664,18670,18678,18682,18690,18698,18721,18726,18734,18742],{"__ignoreMap":163},[167,18569,18570,18572,18574,18576],{"class":169,"line":170},[167,18571,174],{"class":173},[167,18573,178],{"class":177},[167,18575,182],{"class":181},[167,18577,185],{"class":173},[167,18579,18580,18582,18584,18586],{"class":169,"line":188},[167,18581,192],{"class":191},[167,18583,195],{"class":173},[167,18585,198],{"class":191},[167,18587,202],{"class":201},[167,18589,18590],{"class":169,"line":205},[167,18591,209],{"emptyLinePlaceholder":208},[167,18593,18594,18596,18598,18600,18602],{"class":169,"line":160},[167,18595,216],{"class":191},[167,18597,16954],{"class":219},[167,18599,223],{"class":191},[167,18601,226],{"class":181},[167,18603,16961],{"class":173},[167,18605,18606],{"class":169,"line":238},[167,18607,209],{"emptyLinePlaceholder":208},[167,18609,18610,18612,18614,18616],{"class":169,"line":243},[167,18611,2523],{"class":191},[167,18613,1432],{"class":191},[167,18615,16974],{"class":181},[167,18617,763],{"class":173},[167,18619,18620,18622,18624,18626,18628,18630,18632,18634,18636,18638,18640,18642,18644,18646,18648],{"class":169,"line":261},[167,18621,17001],{"class":173},[167,18623,267],{"class":191},[167,18625,3009],{"class":191},[167,18627,6621],{"class":181},[167,18629,229],{"class":173},[167,18631,16994],{"class":201},[167,18633,4270],{"class":173},[167,18635,18179],{"class":181},[167,18637,1918],{"class":173},[167,18639,18184],{"class":254},[167,18641,693],{"class":173},[167,18643,639],{"class":191},[167,18645,18191],{"class":173},[167,18647,6686],{"class":181},[167,18649,2509],{"class":173},[167,18651,18652],{"class":169,"line":273},[167,18653,276],{"class":173},[167,18655,18656],{"class":169,"line":279},[167,18657,209],{"emptyLinePlaceholder":208},[167,18659,18660],{"class":169,"line":289},[167,18661,18663],{"class":18662},"sJ8bj","\u002F\u002F Se ejecuta durante setup (fase de creación)\n",[167,18665,18666,18668],{"class":169,"line":294},[167,18667,17025],{"class":181},[167,18669,2917],{"class":173},[167,18671,18672,18674,18676],{"class":169,"line":304},[167,18673,282],{"class":173},[167,18675,178],{"class":177},[167,18677,185],{"class":173},[167,18679,18680],{"class":169,"line":313},[167,18681,209],{"emptyLinePlaceholder":208},[167,18683,18684,18686,18688],{"class":169,"line":161},[167,18685,174],{"class":173},[167,18687,299],{"class":177},[167,18689,185],{"class":173},[167,18691,18692,18694,18696],{"class":169,"line":335},[167,18693,307],{"class":173},[167,18695,33],{"class":177},[167,18697,185],{"class":173},[167,18699,18700,18702,18704,18707,18709,18712,18714,18716,18719],{"class":169,"line":341},[167,18701,1257],{"class":173},[167,18703,36],{"class":177},[167,18705,18706],{"class":181}," v-for",[167,18708,267],{"class":173},[167,18710,18711],{"class":201},"\"user in users\"",[167,18713,10307],{"class":181},[167,18715,267],{"class":173},[167,18717,18718],{"class":201},"\"user.id\"",[167,18720,185],{"class":173},[167,18722,18723],{"class":169,"line":489},[167,18724,18725],{"class":173},"      {{ user.name }}\n",[167,18727,18728,18730,18732],{"class":169,"line":495},[167,18729,1292],{"class":173},[167,18731,36],{"class":177},[167,18733,185],{"class":173},[167,18735,18736,18738,18740],{"class":169,"line":501},[167,18737,504],{"class":173},[167,18739,33],{"class":177},[167,18741,185],{"class":173},[167,18743,18744,18746,18748],{"class":169,"line":512},[167,18745,282],{"class":173},[167,18747,299],{"class":177},[167,18749,185],{"class":173},[154,18751,18753],{"className":156,"code":18752,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      users: []\n    }\n  },\n  async created() {\n    this.users = await fetch('\u002Fapi\u002Fusers').then((r) => r.json())\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"user in users\" :key=\"user.id\">\n      {{ user.name }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[87,18754,18755,18763,18771,18777,18783,18787,18791,18795,18803,18837,18841,18845,18853,18857,18865,18873,18893,18897,18905,18913],{"__ignoreMap":163},[167,18756,18757,18759,18761],{"class":169,"line":170},[167,18758,174],{"class":173},[167,18760,178],{"class":177},[167,18762,185],{"class":173},[167,18764,18765,18767,18769],{"class":169,"line":188},[167,18766,608],{"class":191},[167,18768,3991],{"class":191},[167,18770,1905],{"class":173},[167,18772,18773,18775],{"class":169,"line":205},[167,18774,7176],{"class":181},[167,18776,763],{"class":173},[167,18778,18779,18781],{"class":169,"line":160},[167,18780,1937],{"class":191},[167,18782,1905],{"class":173},[167,18784,18785],{"class":169,"line":238},[167,18786,18138],{"class":173},[167,18788,18789],{"class":169,"line":243},[167,18790,4049],{"class":173},[167,18792,18793],{"class":169,"line":261},[167,18794,398],{"class":173},[167,18796,18797,18799,18801],{"class":169,"line":273},[167,18798,7331],{"class":191},[167,18800,18154],{"class":181},[167,18802,763],{"class":173},[167,18804,18805,18807,18809,18811,18813,18815,18817,18819,18821,18823,18825,18827,18829,18831,18833,18835],{"class":169,"line":279},[167,18806,879],{"class":219},[167,18808,18164],{"class":173},[167,18810,267],{"class":191},[167,18812,3009],{"class":191},[167,18814,6621],{"class":181},[167,18816,229],{"class":173},[167,18818,16994],{"class":201},[167,18820,4270],{"class":173},[167,18822,18179],{"class":181},[167,18824,1918],{"class":173},[167,18826,18184],{"class":254},[167,18828,693],{"class":173},[167,18830,639],{"class":191},[167,18832,18191],{"class":173},[167,18834,6686],{"class":181},[167,18836,2509],{"class":173},[167,18838,18839],{"class":169,"line":289},[167,18840,3492],{"class":173},[167,18842,18843],{"class":169,"line":294},[167,18844,276],{"class":173},[167,18846,18847,18849,18851],{"class":169,"line":304},[167,18848,282],{"class":173},[167,18850,178],{"class":177},[167,18852,185],{"class":173},[167,18854,18855],{"class":169,"line":313},[167,18856,209],{"emptyLinePlaceholder":208},[167,18858,18859,18861,18863],{"class":169,"line":161},[167,18860,174],{"class":173},[167,18862,299],{"class":177},[167,18864,185],{"class":173},[167,18866,18867,18869,18871],{"class":169,"line":335},[167,18868,307],{"class":173},[167,18870,33],{"class":177},[167,18872,185],{"class":173},[167,18874,18875,18877,18879,18881,18883,18885,18887,18889,18891],{"class":169,"line":341},[167,18876,1257],{"class":173},[167,18878,36],{"class":177},[167,18880,18706],{"class":181},[167,18882,267],{"class":173},[167,18884,18711],{"class":201},[167,18886,10307],{"class":181},[167,18888,267],{"class":173},[167,18890,18718],{"class":201},[167,18892,185],{"class":173},[167,18894,18895],{"class":169,"line":489},[167,18896,18725],{"class":173},[167,18898,18899,18901,18903],{"class":169,"line":495},[167,18900,1292],{"class":173},[167,18902,36],{"class":177},[167,18904,185],{"class":173},[167,18906,18907,18909,18911],{"class":169,"line":501},[167,18908,504],{"class":173},[167,18910,33],{"class":177},[167,18912,185],{"class":173},[167,18914,18915,18917,18919],{"class":169,"line":512},[167,18916,282],{"class":173},[167,18918,299],{"class":177},[167,18920,185],{"class":173},[22,18922,18924],{"id":18923},"cierre","Cierre",[33,18926,18927,18936,18948],{},[36,18928,18929,18930,18935],{},"En componentes modernos basados en Vue 3, ",[3933,18931,18932,18934],{},[87,18933,16667],{}," suele ser el punto de entrada más claro y consistente"," para inicializar estado y lógica.",[36,18937,18938,18939,18941,18942,18947],{},"Si trabajas en componentes escritos con ",[3933,18940,3973],{},", el hook ",[3933,18943,18944,18946],{},[87,18945,17865],{}," sigue siendo completamente válido"," para inicialización que no depende del DOM.",[36,18949,18950,18951,18956],{},"En cambio, ",[3933,18952,18953,18955],{},[87,18954,17862],{}," ha quedado como una pieza más histórica que práctica"," en la mayoría de proyectos actuales.",[924,18958,18959],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":163,"searchDepth":188,"depth":188,"links":18961},[18962,18963,18965,18967,18969,18971,18978,18979],{"id":17894,"depth":188,"text":17895},{"id":17963,"depth":188,"text":18964},"beforeCreate: cuándo aparece y por qué casi no se usa",{"id":18069,"depth":188,"text":18966},"created: el punto útil en Options API",{"id":18215,"depth":188,"text":18968},"setup: el arranque natural en Vue 3",{"id":18412,"depth":188,"text":18970},"Comparación rápida: beforeCreate vs created vs setup",{"id":18486,"depth":188,"text":18487,"children":18972},[18973,18975,18977],{"id":18490,"depth":205,"text":18974},"1) Intentar manipular el DOM en created o al inicio de setup",{"id":18523,"depth":205,"text":18976},"2) Usar beforeCreate por costumbre",{"id":18543,"depth":205,"text":18544},{"id":18554,"depth":188,"text":18555},{"id":18923,"depth":188,"text":18924},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1773284254\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup_fkkyiw.png","Ilustración de un ciclo de vida de un componente Vue, destacando la fase de creación con beforeCreate, created y setup","2026-03-07","Qué pasa realmente en la fase de creación de un componente Vue y cómo decidir entre beforeCreate, created y setup.",{"updatedAt":18985,"coverCaption":18986,"author":946,"keywords":18987},"2026-03-06T20:00:00-05:00","En esta imagen se muestra el ciclo de vida de un componente Vue, con énfasis en la fase de creación donde se ejecutan los hooks beforeCreate, created y setup.",[3258,17862,17865,16667,3260],"\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[18990],{"headline":17853,"author":18991,"datePublished":18985,"@type":961},{"name":946,"@type":959},{"title":17853,"description":18983},"blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[18995,18996,18997,18998],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":5424,"color":5425},"gD0R9mljoBWBraFYutY3GdOI6IFtdYK-ul1RE0pCfVo",{"id":19001,"title":19002,"body":19003,"cover":21593,"coverAlt":19002,"date":21594,"description":21595,"draft":940,"extension":941,"lab":942,"locale":943,"meta":21596,"navigation":208,"path":21602,"schemaOrg":21603,"seo":21606,"series":7718,"seriesDescription":7719,"seriesOrder":170,"seriesTitle":7720,"slug":942,"stem":21607,"tags":21608,"__hash__":21613},"blog\u002Fblog\u002Fvue-lifecycle-hooks-overview.es.md","Ciclos de vida en Vue: Una visión general",{"type":8,"value":19004,"toc":21562},[19005,19009,19011,19022,19024,19030,19052,19055,19073,19080,19084,19087,19131,19135,19145,19148,19153,19159,19217,19228,19232,19238,19241,19252,19355,19363,19367,19373,19376,19388,19460,19467,19471,19476,19479,19490,19497,19502,19505,19572,19630,19637,19642,19648,19651,19665,19732,19790,19794,19800,19803,19810,19815,19818,19885,19943,19950,19955,19958,19965,20032,20090,20094,20097,20103,20110,20115,20182,20240,20247,20252,20255,20266,20392,20499,20505,20514,20521,20527,20594,20652,20659,20664,20731,20788,20791,20798,20804,20881,20948,20952,20958,20961,20966,20972,21045,21106,21111,21117,21188,21249,21253,21260,21266,21269,21340,21399,21403,21407,21438,21441,21463,21470,21472,21478,21551,21559],[11,19006,19008],{"id":19007},"ciclos-de-vida-en-vue-guía-práctica-y-cuándo-usar-cada-hook","Ciclos de vida en Vue: guía práctica y cuándo usar cada hook",[22,19010,6231],{"id":6230},[15,19012,19013,19014,19017,19018,19021],{},"Entender el ",[3933,19015,19016],{},"ciclo de vida de un componente"," te permite saber exactamente ",[3933,19019,19020],{},"cuándo ejecutar cada tipo de lógica",": inicialización, acceso al DOM, sincronización con API, limpieza de efectos secundarios o depuración.",[11,19023,6257],{"id":6256},[15,19025,19026,19027,19029],{},"Un componente en ",[3933,19028,951],{}," atraviesa varias fases:",[3035,19031,19032,19037,19042,19047],{},[36,19033,19034],{},[3933,19035,19036],{},"Creación",[36,19038,19039],{},[3933,19040,19041],{},"Montaje",[36,19043,19044],{},[3933,19045,19046],{},"Actualización",[36,19048,19049],{},[3933,19050,19051],{},"Desmontaje",[15,19053,19054],{},"Además, existen hooks especiales para:",[33,19056,19057,19062,19065,19068],{},[36,19058,19059,19060],{},"Componentes cacheados con ",[87,19061,11158],{},[36,19063,19064],{},"Manejo de errores",[36,19066,19067],{},"Depuración del sistema reactivo",[36,19069,19070],{},[3933,19071,19072],{},"SSR (Server-Side Rendering)",[15,19074,19075,19076,19079],{},"En las siguientes secciones veremos ",[3933,19077,19078],{},"cuándo se ejecuta cada hook y para qué sirve",", con ejemplos.",[22,19081,19083],{"id":19082},"mapa-de-la-serie","Mapa de la serie",[15,19085,19086],{},"Si quieres profundizar en cada grupo de hooks, aquí tienes la ruta completa de esta serie:",[33,19088,19089,19095,19100,19105,19110,19116,19121,19126],{},[36,19090,19091],{},[19092,19093,17853],"a",{"href":19094},"\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es\u002F",[36,19096,19097],{},[19092,19098,16595],{"href":19099},"\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es\u002F",[36,19101,19102],{},[19092,19103,15025],{"href":19104},"\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es\u002F",[36,19106,19107],{},[19092,19108,13463],{"href":19109},"\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es\u002F",[36,19111,19112],{},[19092,19113,19115],{"href":19114},"\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es\u002F","Ciclos de vida en Vue: componentes cacheados con KeepAlive (activated, deactivated)",[36,19117,19118],{},[19092,19119,9176],{"href":19120},"\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es\u002F",[36,19122,19123],{},[19092,19124,7735],{"href":19125},"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es\u002F",[36,19127,19128],{},[19092,19129,6209],{"href":19130},"\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es\u002F",[11,19132,19134],{"id":19133},"creación-del-componente","Creación del componente",[15,19136,19137,19138,19141,19142,1679],{},"En esta fase Vue ",[3933,19139,19140],{},"crea la instancia del componente y configura la reactividad",", pero ",[3933,19143,19144],{},"todavía no existe el DOM",[15,19146,19147],{},"Aquí normalmente se inicializa estado, configuración o llamadas iniciales.",[22,19149,19151],{"id":19150},"beforecreate",[87,19152,17862],{},[15,19154,19155,19156,1679],{},"Se ejecuta ",[3933,19157,19158],{},"antes de que Vue configure la reactividad",[154,19160,19163],{"className":156,"code":19161,"filename":15284,"highlights":19162,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeCreate() {\n    console.log('El componente está iniciando')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,19164,19165,19173,19181,19188,19201,19205,19209],{"__ignoreMap":163},[167,19166,19167,19169,19171],{"class":169,"line":170},[167,19168,174],{"class":173},[167,19170,178],{"class":177},[167,19172,185],{"class":173},[167,19174,19175,19177,19179],{"class":169,"line":188},[167,19176,608],{"class":191},[167,19178,3991],{"class":191},[167,19180,1905],{"class":173},[167,19182,19184,19186],{"class":19183,"line":205},[169,213],[167,19185,18033],{"class":181},[167,19187,763],{"class":173},[167,19189,19190,19192,19194,19196,19199],{"class":169,"line":160},[167,19191,8894],{"class":173},[167,19193,2611],{"class":181},[167,19195,229],{"class":173},[167,19197,19198],{"class":201},"'El componente está iniciando'",[167,19200,235],{"class":173},[167,19202,19203],{"class":169,"line":238},[167,19204,3492],{"class":173},[167,19206,19207],{"class":169,"line":243},[167,19208,276],{"class":173},[167,19210,19211,19213,19215],{"class":169,"line":261},[167,19212,282],{"class":173},[167,19214,178],{"class":177},[167,19216,185],{"class":173},[5367,19218,19219],{},[15,19220,19221,19222,19224,19225,19227],{},"No es posible usar ",[87,19223,17862],{}," en Composition API, ya que ",[87,19226,9238],{}," se ejecuta antes de cualquier otro hook.",[22,19229,19230],{"id":17865},[87,19231,17865],{},[15,19233,19234,19235,1679],{},"El estado reactivo ya está disponible, pero ",[3933,19236,19237],{},"el DOM aún no existe",[15,19239,19240],{},"Se suele usar para:",[33,19242,19243,19246,19249],{},[36,19244,19245],{},"Llamadas HTTP",[36,19247,19248],{},"Inicializar estado",[36,19250,19251],{},"Preparar lógica de negocio",[154,19253,19256],{"className":156,"code":19254,"filename":15284,"highlights":19255,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      users: []\n    }\n  },\n  async created() {\n    this.users = await fetch('\u002Fapi\u002Fusers').then(r => r.json())\n  }\n}\n\u003C\u002Fscript>\n",[273],[87,19257,19258,19266,19274,19280,19286,19290,19294,19298,19307,19339,19343,19347],{"__ignoreMap":163},[167,19259,19260,19262,19264],{"class":169,"line":170},[167,19261,174],{"class":173},[167,19263,178],{"class":177},[167,19265,185],{"class":173},[167,19267,19268,19270,19272],{"class":169,"line":188},[167,19269,608],{"class":191},[167,19271,3991],{"class":191},[167,19273,1905],{"class":173},[167,19275,19276,19278],{"class":169,"line":205},[167,19277,7176],{"class":181},[167,19279,763],{"class":173},[167,19281,19282,19284],{"class":169,"line":160},[167,19283,1937],{"class":191},[167,19285,1905],{"class":173},[167,19287,19288],{"class":169,"line":238},[167,19289,18138],{"class":173},[167,19291,19292],{"class":169,"line":243},[167,19293,4049],{"class":173},[167,19295,19296],{"class":169,"line":261},[167,19297,398],{"class":173},[167,19299,19301,19303,19305],{"class":19300,"line":273},[169,213],[167,19302,7331],{"class":191},[167,19304,18154],{"class":181},[167,19306,763],{"class":173},[167,19308,19309,19311,19313,19315,19317,19319,19321,19323,19325,19327,19329,19331,19333,19335,19337],{"class":169,"line":279},[167,19310,879],{"class":219},[167,19312,18164],{"class":173},[167,19314,267],{"class":191},[167,19316,3009],{"class":191},[167,19318,6621],{"class":181},[167,19320,229],{"class":173},[167,19322,16994],{"class":201},[167,19324,4270],{"class":173},[167,19326,18179],{"class":181},[167,19328,229],{"class":173},[167,19330,18184],{"class":254},[167,19332,8259],{"class":191},[167,19334,18191],{"class":173},[167,19336,6686],{"class":181},[167,19338,2509],{"class":173},[167,19340,19341],{"class":169,"line":289},[167,19342,3492],{"class":173},[167,19344,19345],{"class":169,"line":294},[167,19346,276],{"class":173},[167,19348,19349,19351,19353],{"class":169,"line":304},[167,19350,282],{"class":173},[167,19352,178],{"class":177},[167,19354,185],{"class":173},[5367,19356,19357],{},[15,19358,19221,19359,19224,19361,19227],{},[87,19360,17865],{},[87,19362,9238],{},[22,19364,19365],{"id":16667},[87,19366,9238],{},[15,19368,19369,19370,1679],{},"Es el ",[3933,19371,19372],{},"punto de entrada principal en Composition API",[15,19374,19375],{},"Aquí se define:",[33,19377,19378,19381,19383,19385],{},[36,19379,19380],{},"Estado reactivo",[36,19382,954],{},[36,19384,9241],{},[36,19386,19387],{},"Lógica inicial del componente",[154,19389,19392],{"className":156,"code":19390,"filename":15284,"highlights":19391,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nconsole.log('Setup ejecutado')\n\u003C\u002Fscript>\n",[170],[87,19393,19394,19405,19415,19419,19435,19439,19452],{"__ignoreMap":163},[167,19395,19397,19399,19401,19403],{"class":19396,"line":170},[169,213],[167,19398,174],{"class":173},[167,19400,178],{"class":177},[167,19402,182],{"class":181},[167,19404,185],{"class":173},[167,19406,19407,19409,19411,19413],{"class":169,"line":188},[167,19408,192],{"class":191},[167,19410,195],{"class":173},[167,19412,198],{"class":191},[167,19414,202],{"class":201},[167,19416,19417],{"class":169,"line":205},[167,19418,209],{"emptyLinePlaceholder":208},[167,19420,19421,19423,19425,19427,19429,19431,19433],{"class":169,"line":160},[167,19422,216],{"class":191},[167,19424,15325],{"class":219},[167,19426,223],{"class":191},[167,19428,226],{"class":181},[167,19430,229],{"class":173},[167,19432,1960],{"class":219},[167,19434,235],{"class":173},[167,19436,19437],{"class":169,"line":238},[167,19438,209],{"emptyLinePlaceholder":208},[167,19440,19441,19443,19445,19447,19450],{"class":169,"line":243},[167,19442,18344],{"class":173},[167,19444,2611],{"class":181},[167,19446,229],{"class":173},[167,19448,19449],{"class":201},"'Setup ejecutado'",[167,19451,235],{"class":173},[167,19453,19454,19456,19458],{"class":169,"line":261},[167,19455,282],{"class":173},[167,19457,178],{"class":177},[167,19459,185],{"class":173},[5367,19461,19462],{},[15,19463,19221,19464,19466],{},[87,19465,9238],{}," en Options API, ya que es exclusivo de Composition API.",[11,19468,19470],{"id":19469},"montaje-del-componente","Montaje del componente",[15,19472,19137,19473,1679],{},[3933,19474,19475],{},"crea e inserta el DOM del componente",[15,19477,19478],{},"Aquí ya es seguro usar:",[33,19480,19481,19484,19487],{},[36,19482,19483],{},"API del navegador",[36,19485,19486],{},"Librerías externas",[36,19488,19489],{},"Manipulación del DOM",[22,19491,19493,11227,19495],{"id":19492},"onbeforemount-beforemount",[87,19494,17367],{},[87,19496,16604],{},[15,19498,19155,19499,1679],{},[3933,19500,19501],{},"justo antes de insertar el DOM en la página",[15,19503,19504],{},"No es muy común usarlo, pero puede servir para lógica previa al render final.",[154,19506,19509],{"className":156,"code":19507,"filename":3260,"highlights":19508,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeMount } from 'vue'\n\nonBeforeMount(() => {\n  console.log('El componente está por montarse')\n})\n\u003C\u002Fscript>\n",[160],[87,19510,19511,19521,19532,19536,19547,19560,19564],{"__ignoreMap":163},[167,19512,19513,19515,19517,19519],{"class":169,"line":170},[167,19514,174],{"class":173},[167,19516,178],{"class":177},[167,19518,182],{"class":181},[167,19520,185],{"class":173},[167,19522,19523,19525,19528,19530],{"class":169,"line":188},[167,19524,192],{"class":191},[167,19526,19527],{"class":173}," { onBeforeMount } ",[167,19529,198],{"class":191},[167,19531,202],{"class":201},[167,19533,19534],{"class":169,"line":205},[167,19535,209],{"emptyLinePlaceholder":208},[167,19537,19539,19541,19543,19545],{"class":19538,"line":160},[169,213],[167,19540,17367],{"class":181},[167,19542,1493],{"class":173},[167,19544,639],{"class":191},[167,19546,1905],{"class":173},[167,19548,19549,19551,19553,19555,19558],{"class":169,"line":238},[167,19550,2608],{"class":173},[167,19552,2611],{"class":181},[167,19554,229],{"class":173},[167,19556,19557],{"class":201},"'El componente está por montarse'",[167,19559,235],{"class":173},[167,19561,19562],{"class":169,"line":243},[167,19563,403],{"class":173},[167,19565,19566,19568,19570],{"class":169,"line":261},[167,19567,282],{"class":173},[167,19569,178],{"class":177},[167,19571,185],{"class":173},[154,19573,19576],{"className":156,"code":19574,"filename":3973,"highlights":19575,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeMount() {\n    console.log('Antes de montar el componente')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,19577,19578,19586,19594,19601,19614,19618,19622],{"__ignoreMap":163},[167,19579,19580,19582,19584],{"class":169,"line":170},[167,19581,174],{"class":173},[167,19583,178],{"class":177},[167,19585,185],{"class":173},[167,19587,19588,19590,19592],{"class":169,"line":188},[167,19589,608],{"class":191},[167,19591,3991],{"class":191},[167,19593,1905],{"class":173},[167,19595,19597,19599],{"class":19596,"line":205},[169,213],[167,19598,17586],{"class":181},[167,19600,763],{"class":173},[167,19602,19603,19605,19607,19609,19612],{"class":169,"line":160},[167,19604,8894],{"class":173},[167,19606,2611],{"class":181},[167,19608,229],{"class":173},[167,19610,19611],{"class":201},"'Antes de montar el componente'",[167,19613,235],{"class":173},[167,19615,19616],{"class":169,"line":238},[167,19617,3492],{"class":173},[167,19619,19620],{"class":169,"line":243},[167,19621,276],{"class":173},[167,19623,19624,19626,19628],{"class":169,"line":261},[167,19625,282],{"class":173},[167,19627,178],{"class":177},[167,19629,185],{"class":173},[22,19631,19633,11227,19635],{"id":19632},"onmounted-mounted",[87,19634,6796],{},[87,19636,6393],{},[15,19638,19155,19639,1679],{},[3933,19640,19641],{},"después de que el componente fue insertado en el DOM",[15,19643,19644,19645,1679],{},"Este es uno de los hooks ",[3933,19646,19647],{},"más usados",[15,19649,19650],{},"Usos típicos:",[33,19652,19653,19656,19659,19662],{},[36,19654,19655],{},"Inicializar charts",[36,19657,19658],{},"Registrar listeners",[36,19660,19661],{},"Enfocar inputs",[36,19663,19664],{},"Integrar librerías externas",[154,19666,19669],{"className":156,"code":19667,"filename":3260,"highlights":19668,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onMounted } from 'vue'\n\nonMounted(() => {\n  console.log('Componente montado en el DOM')\n})\n\u003C\u002Fscript>\n",[160],[87,19670,19671,19681,19692,19696,19707,19720,19724],{"__ignoreMap":163},[167,19672,19673,19675,19677,19679],{"class":169,"line":170},[167,19674,174],{"class":173},[167,19676,178],{"class":177},[167,19678,182],{"class":181},[167,19680,185],{"class":173},[167,19682,19683,19685,19688,19690],{"class":169,"line":188},[167,19684,192],{"class":191},[167,19686,19687],{"class":173}," { onMounted } ",[167,19689,198],{"class":191},[167,19691,202],{"class":201},[167,19693,19694],{"class":169,"line":205},[167,19695,209],{"emptyLinePlaceholder":208},[167,19697,19699,19701,19703,19705],{"class":19698,"line":160},[169,213],[167,19700,6796],{"class":181},[167,19702,1493],{"class":173},[167,19704,639],{"class":191},[167,19706,1905],{"class":173},[167,19708,19709,19711,19713,19715,19718],{"class":169,"line":238},[167,19710,2608],{"class":173},[167,19712,2611],{"class":181},[167,19714,229],{"class":173},[167,19716,19717],{"class":201},"'Componente montado en el DOM'",[167,19719,235],{"class":173},[167,19721,19722],{"class":169,"line":243},[167,19723,403],{"class":173},[167,19725,19726,19728,19730],{"class":169,"line":261},[167,19727,282],{"class":173},[167,19729,178],{"class":177},[167,19731,185],{"class":173},[154,19733,19736],{"className":156,"code":19734,"filename":3973,"highlights":19735,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  mounted() {\n    console.log('Componente montado')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,19737,19738,19746,19754,19761,19774,19778,19782],{"__ignoreMap":163},[167,19739,19740,19742,19744],{"class":169,"line":170},[167,19741,174],{"class":173},[167,19743,178],{"class":177},[167,19745,185],{"class":173},[167,19747,19748,19750,19752],{"class":169,"line":188},[167,19749,608],{"class":191},[167,19751,3991],{"class":191},[167,19753,1905],{"class":173},[167,19755,19757,19759],{"class":19756,"line":205},[169,213],[167,19758,12749],{"class":181},[167,19760,763],{"class":173},[167,19762,19763,19765,19767,19769,19772],{"class":169,"line":160},[167,19764,8894],{"class":173},[167,19766,2611],{"class":181},[167,19768,229],{"class":173},[167,19770,19771],{"class":201},"'Componente montado'",[167,19773,235],{"class":173},[167,19775,19776],{"class":169,"line":238},[167,19777,3492],{"class":173},[167,19779,19780],{"class":169,"line":243},[167,19781,276],{"class":173},[167,19783,19784,19786,19788],{"class":169,"line":261},[167,19785,282],{"class":173},[167,19787,178],{"class":177},[167,19789,185],{"class":173},[11,19791,19793],{"id":19792},"actualización-del-componente","Actualización del componente",[15,19795,19796,19797,1679],{},"Cuando cambia el estado reactivo, Vue ",[3933,19798,19799],{},"vuelve a renderizar el componente",[15,19801,19802],{},"Estos hooks permiten reaccionar antes o después de que el DOM cambie.",[22,19804,19806,11227,19808],{"id":19805},"onbeforeupdate-beforeupdate",[87,19807,15509],{},[87,19809,15034],{},[15,19811,19155,19812,1679],{},[3933,19813,19814],{},"antes de que Vue actualice el DOM",[15,19816,19817],{},"Puede usarse para inspeccionar el estado previo.",[154,19819,19822],{"className":156,"code":19820,"filename":3260,"highlights":19821,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeUpdate } from 'vue'\n\nonBeforeUpdate(() => {\n  console.log('Antes de actualizar el DOM')\n})\n\u003C\u002Fscript>\n",[160],[87,19823,19824,19834,19845,19849,19860,19873,19877],{"__ignoreMap":163},[167,19825,19826,19828,19830,19832],{"class":169,"line":170},[167,19827,174],{"class":173},[167,19829,178],{"class":177},[167,19831,182],{"class":181},[167,19833,185],{"class":173},[167,19835,19836,19838,19841,19843],{"class":169,"line":188},[167,19837,192],{"class":191},[167,19839,19840],{"class":173}," { onBeforeUpdate } ",[167,19842,198],{"class":191},[167,19844,202],{"class":201},[167,19846,19847],{"class":169,"line":205},[167,19848,209],{"emptyLinePlaceholder":208},[167,19850,19852,19854,19856,19858],{"class":19851,"line":160},[169,213],[167,19853,15509],{"class":181},[167,19855,1493],{"class":173},[167,19857,639],{"class":191},[167,19859,1905],{"class":173},[167,19861,19862,19864,19866,19868,19871],{"class":169,"line":238},[167,19863,2608],{"class":173},[167,19865,2611],{"class":181},[167,19867,229],{"class":173},[167,19869,19870],{"class":201},"'Antes de actualizar el DOM'",[167,19872,235],{"class":173},[167,19874,19875],{"class":169,"line":243},[167,19876,403],{"class":173},[167,19878,19879,19881,19883],{"class":169,"line":261},[167,19880,282],{"class":173},[167,19882,178],{"class":177},[167,19884,185],{"class":173},[154,19886,19889],{"className":156,"code":19887,"filename":3973,"highlights":19888,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeUpdate() {\n    console.log('Antes del update')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,19890,19891,19899,19907,19914,19927,19931,19935],{"__ignoreMap":163},[167,19892,19893,19895,19897],{"class":169,"line":170},[167,19894,174],{"class":173},[167,19896,178],{"class":177},[167,19898,185],{"class":173},[167,19900,19901,19903,19905],{"class":169,"line":188},[167,19902,608],{"class":191},[167,19904,3991],{"class":191},[167,19906,1905],{"class":173},[167,19908,19910,19912],{"class":19909,"line":205},[169,213],[167,19911,16208],{"class":181},[167,19913,763],{"class":173},[167,19915,19916,19918,19920,19922,19925],{"class":169,"line":160},[167,19917,8894],{"class":173},[167,19919,2611],{"class":181},[167,19921,229],{"class":173},[167,19923,19924],{"class":201},"'Antes del update'",[167,19926,235],{"class":173},[167,19928,19929],{"class":169,"line":238},[167,19930,3492],{"class":173},[167,19932,19933],{"class":169,"line":243},[167,19934,276],{"class":173},[167,19936,19937,19939,19941],{"class":169,"line":261},[167,19938,282],{"class":173},[167,19940,178],{"class":177},[167,19942,185],{"class":173},[22,19944,19946,11227,19948],{"id":19945},"onupdated-updated",[87,19947,15345],{},[87,19949,15037],{},[15,19951,19155,19952,1679],{},[3933,19953,19954],{},"después de que Vue actualiza el DOM",[15,19956,19957],{},"Útil cuando necesitas medir o interactuar con el DOM actualizado.",[5367,19959,19960],{},[15,19961,19962,19963,1679],{},"⚠️ No debe usarse como reemplazo de ",[87,19964,1665],{},[154,19966,19969],{"className":156,"code":19967,"filename":3260,"highlights":19968,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onUpdated } from 'vue'\n\nonUpdated(() => {\n  console.log('El DOM ya fue actualizado')\n})\n\u003C\u002Fscript>\n",[160],[87,19970,19971,19981,19992,19996,20007,20020,20024],{"__ignoreMap":163},[167,19972,19973,19975,19977,19979],{"class":169,"line":170},[167,19974,174],{"class":173},[167,19976,178],{"class":177},[167,19978,182],{"class":181},[167,19980,185],{"class":173},[167,19982,19983,19985,19988,19990],{"class":169,"line":188},[167,19984,192],{"class":191},[167,19986,19987],{"class":173}," { onUpdated } ",[167,19989,198],{"class":191},[167,19991,202],{"class":201},[167,19993,19994],{"class":169,"line":205},[167,19995,209],{"emptyLinePlaceholder":208},[167,19997,19999,20001,20003,20005],{"class":19998,"line":160},[169,213],[167,20000,15345],{"class":181},[167,20002,1493],{"class":173},[167,20004,639],{"class":191},[167,20006,1905],{"class":173},[167,20008,20009,20011,20013,20015,20018],{"class":169,"line":238},[167,20010,2608],{"class":173},[167,20012,2611],{"class":181},[167,20014,229],{"class":173},[167,20016,20017],{"class":201},"'El DOM ya fue actualizado'",[167,20019,235],{"class":173},[167,20021,20022],{"class":169,"line":243},[167,20023,403],{"class":173},[167,20025,20026,20028,20030],{"class":169,"line":261},[167,20027,282],{"class":173},[167,20029,178],{"class":177},[167,20031,185],{"class":173},[154,20033,20036],{"className":156,"code":20034,"filename":3973,"highlights":20035,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  updated() {\n    console.log('DOM actualizado')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,20037,20038,20046,20054,20061,20074,20078,20082],{"__ignoreMap":163},[167,20039,20040,20042,20044],{"class":169,"line":170},[167,20041,174],{"class":173},[167,20043,178],{"class":177},[167,20045,185],{"class":173},[167,20047,20048,20050,20052],{"class":169,"line":188},[167,20049,608],{"class":191},[167,20051,3991],{"class":191},[167,20053,1905],{"class":173},[167,20055,20057,20059],{"class":20056,"line":205},[169,213],[167,20058,16259],{"class":181},[167,20060,763],{"class":173},[167,20062,20063,20065,20067,20069,20072],{"class":169,"line":160},[167,20064,8894],{"class":173},[167,20066,2611],{"class":181},[167,20068,229],{"class":173},[167,20070,20071],{"class":201},"'DOM actualizado'",[167,20073,235],{"class":173},[167,20075,20076],{"class":169,"line":238},[167,20077,3492],{"class":173},[167,20079,20080],{"class":169,"line":243},[167,20081,276],{"class":173},[167,20083,20084,20086,20088],{"class":169,"line":261},[167,20085,282],{"class":173},[167,20087,178],{"class":177},[167,20089,185],{"class":173},[11,20091,20093],{"id":20092},"desmontaje-del-componente","Desmontaje del componente",[15,20095,20096],{},"Cuando un componente deja de existir, Vue ejecuta hooks de limpieza.",[15,20098,20099,20100,1679],{},"Esto es ",[3933,20101,20102],{},"clave para evitar fugas de memoria",[22,20104,20106,11227,20108],{"id":20105},"onbeforeunmount-beforeunmount",[87,20107,14250],{},[87,20109,13472],{},[15,20111,19155,20112,1679],{},[3933,20113,20114],{},"justo antes de destruir el componente",[154,20116,20119],{"className":156,"code":20117,"filename":3260,"highlights":20118,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeUnmount } from 'vue'\n\nonBeforeUnmount(() => {\n  console.log('El componente será destruido')\n})\n\u003C\u002Fscript>\n",[160],[87,20120,20121,20131,20142,20146,20157,20170,20174],{"__ignoreMap":163},[167,20122,20123,20125,20127,20129],{"class":169,"line":170},[167,20124,174],{"class":173},[167,20126,178],{"class":177},[167,20128,182],{"class":181},[167,20130,185],{"class":173},[167,20132,20133,20135,20138,20140],{"class":169,"line":188},[167,20134,192],{"class":191},[167,20136,20137],{"class":173}," { onBeforeUnmount } ",[167,20139,198],{"class":191},[167,20141,202],{"class":201},[167,20143,20144],{"class":169,"line":205},[167,20145,209],{"emptyLinePlaceholder":208},[167,20147,20149,20151,20153,20155],{"class":20148,"line":160},[169,213],[167,20150,14250],{"class":181},[167,20152,1493],{"class":173},[167,20154,639],{"class":191},[167,20156,1905],{"class":173},[167,20158,20159,20161,20163,20165,20168],{"class":169,"line":238},[167,20160,2608],{"class":173},[167,20162,2611],{"class":181},[167,20164,229],{"class":173},[167,20166,20167],{"class":201},"'El componente será destruido'",[167,20169,235],{"class":173},[167,20171,20172],{"class":169,"line":243},[167,20173,403],{"class":173},[167,20175,20176,20178,20180],{"class":169,"line":261},[167,20177,282],{"class":173},[167,20179,178],{"class":177},[167,20181,185],{"class":173},[154,20183,20186],{"className":156,"code":20184,"filename":3973,"highlights":20185,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeUnmount() {\n    console.log('Antes de desmontar')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,20187,20188,20196,20204,20211,20224,20228,20232],{"__ignoreMap":163},[167,20189,20190,20192,20194],{"class":169,"line":170},[167,20191,174],{"class":173},[167,20193,178],{"class":177},[167,20195,185],{"class":173},[167,20197,20198,20200,20202],{"class":169,"line":188},[167,20199,608],{"class":191},[167,20201,3991],{"class":191},[167,20203,1905],{"class":173},[167,20205,20207,20209],{"class":20206,"line":205},[169,213],[167,20208,14564],{"class":181},[167,20210,763],{"class":173},[167,20212,20213,20215,20217,20219,20222],{"class":169,"line":160},[167,20214,8894],{"class":173},[167,20216,2611],{"class":181},[167,20218,229],{"class":173},[167,20220,20221],{"class":201},"'Antes de desmontar'",[167,20223,235],{"class":173},[167,20225,20226],{"class":169,"line":238},[167,20227,3492],{"class":173},[167,20229,20230],{"class":169,"line":243},[167,20231,276],{"class":173},[167,20233,20234,20236,20238],{"class":169,"line":261},[167,20235,282],{"class":173},[167,20237,178],{"class":177},[167,20239,185],{"class":173},[22,20241,20243,11227,20245],{"id":20242},"onunmounted-unmounted",[87,20244,14303],{},[87,20246,11276],{},[15,20248,19155,20249,1679],{},[3933,20250,20251],{},"después de que el componente fue destruido",[15,20253,20254],{},"Ideal para limpiar:",[33,20256,20257,20260,20263],{},[36,20258,20259],{},"Timers",[36,20261,20262],{},"Sockets",[36,20264,20265],{},"Event listeners",[154,20267,20270],{"className":156,"code":20268,"filename":3260,"highlights":20269,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onMounted, onUnmounted } from 'vue'\n\nlet timer\n\nonMounted(() => {\n  timer = setInterval(() => {\n    console.log('tick')\n  }, 1000)\n})\n\nonUnmounted(() => {\n  clearInterval(timer)\n})\n\u003C\u002Fscript>\n",[243,304],[87,20271,20272,20282,20293,20297,20304,20308,20319,20334,20346,20354,20358,20362,20373,20380,20384],{"__ignoreMap":163},[167,20273,20274,20276,20278,20280],{"class":169,"line":170},[167,20275,174],{"class":173},[167,20277,178],{"class":177},[167,20279,182],{"class":181},[167,20281,185],{"class":173},[167,20283,20284,20286,20289,20291],{"class":169,"line":188},[167,20285,192],{"class":191},[167,20287,20288],{"class":173}," { onMounted, onUnmounted } ",[167,20290,198],{"class":191},[167,20292,202],{"class":201},[167,20294,20295],{"class":169,"line":205},[167,20296,209],{"emptyLinePlaceholder":208},[167,20298,20299,20301],{"class":169,"line":160},[167,20300,13948],{"class":191},[167,20302,20303],{"class":173}," timer\n",[167,20305,20306],{"class":169,"line":238},[167,20307,209],{"emptyLinePlaceholder":208},[167,20309,20311,20313,20315,20317],{"class":20310,"line":243},[169,213],[167,20312,6796],{"class":181},[167,20314,1493],{"class":173},[167,20316,639],{"class":191},[167,20318,1905],{"class":173},[167,20320,20321,20324,20326,20328,20330,20332],{"class":169,"line":261},[167,20322,20323],{"class":173},"  timer ",[167,20325,267],{"class":191},[167,20327,12070],{"class":181},[167,20329,1493],{"class":173},[167,20331,639],{"class":191},[167,20333,1905],{"class":173},[167,20335,20336,20338,20340,20342,20344],{"class":169,"line":273},[167,20337,8894],{"class":173},[167,20339,2611],{"class":181},[167,20341,229],{"class":173},[167,20343,17171],{"class":201},[167,20345,235],{"class":173},[167,20347,20348,20350,20352],{"class":169,"line":279},[167,20349,1957],{"class":173},[167,20351,17180],{"class":219},[167,20353,235],{"class":173},[167,20355,20356],{"class":169,"line":289},[167,20357,403],{"class":173},[167,20359,20360],{"class":169,"line":294},[167,20361,209],{"emptyLinePlaceholder":208},[167,20363,20365,20367,20369,20371],{"class":20364,"line":304},[169,213],[167,20366,14303],{"class":181},[167,20368,1493],{"class":173},[167,20370,639],{"class":191},[167,20372,1905],{"class":173},[167,20374,20375,20377],{"class":169,"line":313},[167,20376,12134],{"class":181},[167,20378,20379],{"class":173},"(timer)\n",[167,20381,20382],{"class":169,"line":161},[167,20383,403],{"class":173},[167,20385,20386,20388,20390],{"class":169,"line":335},[167,20387,282],{"class":173},[167,20389,178],{"class":177},[167,20391,185],{"class":173},[154,20393,20396],{"className":156,"code":20394,"filename":3973,"highlights":20395,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  mounted() {\n    this.timer = setInterval(() => {\n      console.log('tick')\n    }, 1000)\n  },\n  unmounted() {\n    clearInterval(this.timer)\n  }\n}\n\u003C\u002Fscript>\n",[205,273],[87,20397,20398,20406,20414,20421,20438,20451,20460,20464,20471,20483,20487,20491],{"__ignoreMap":163},[167,20399,20400,20402,20404],{"class":169,"line":170},[167,20401,174],{"class":173},[167,20403,178],{"class":177},[167,20405,185],{"class":173},[167,20407,20408,20410,20412],{"class":169,"line":188},[167,20409,608],{"class":191},[167,20411,3991],{"class":191},[167,20413,1905],{"class":173},[167,20415,20417,20419],{"class":20416,"line":205},[169,213],[167,20418,12749],{"class":181},[167,20420,763],{"class":173},[167,20422,20423,20425,20428,20430,20432,20434,20436],{"class":169,"line":160},[167,20424,879],{"class":219},[167,20426,20427],{"class":173},".timer ",[167,20429,267],{"class":191},[167,20431,12070],{"class":181},[167,20433,1493],{"class":173},[167,20435,639],{"class":191},[167,20437,1905],{"class":173},[167,20439,20440,20443,20445,20447,20449],{"class":169,"line":238},[167,20441,20442],{"class":173},"      console.",[167,20444,2611],{"class":181},[167,20446,229],{"class":173},[167,20448,17171],{"class":201},[167,20450,235],{"class":173},[167,20452,20453,20456,20458],{"class":169,"line":243},[167,20454,20455],{"class":173},"    }, ",[167,20457,17180],{"class":219},[167,20459,235],{"class":173},[167,20461,20462],{"class":169,"line":261},[167,20463,398],{"class":173},[167,20465,20467,20469],{"class":20466,"line":273},[169,213],[167,20468,14622],{"class":181},[167,20470,763],{"class":173},[167,20472,20473,20476,20478,20480],{"class":169,"line":279},[167,20474,20475],{"class":181},"    clearInterval",[167,20477,229],{"class":173},[167,20479,4927],{"class":219},[167,20481,20482],{"class":173},".timer)\n",[167,20484,20485],{"class":169,"line":289},[167,20486,3492],{"class":173},[167,20488,20489],{"class":169,"line":294},[167,20490,276],{"class":173},[167,20492,20493,20495,20497],{"class":169,"line":304},[167,20494,282],{"class":173},[167,20496,178],{"class":177},[167,20498,185],{"class":173},[11,20500,20502,20503],{"id":20501},"hooks-de-keepalive","Hooks de ",[87,20504,11158],{},[15,20506,20507,20508,1025,20510,20513],{},"Cuando un componente está dentro de ",[87,20509,11158],{},[3933,20511,20512],{},"no se destruye",", solo se activa o desactiva.",[22,20515,20517,11227,20519],{"id":20516},"onactivated-activated",[87,20518,12186],{},[87,20520,11161],{},[15,20522,20523,20524,1679],{},"Se ejecuta cuando el componente ",[3933,20525,20526],{},"vuelve a mostrarse",[154,20528,20531],{"className":156,"code":20529,"filename":3260,"highlights":20530,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onActivated } from 'vue'\n\nonActivated(() => {\n  console.log('Componente reactivado')\n})\n\u003C\u002Fscript>\n",[160],[87,20532,20533,20543,20554,20558,20569,20582,20586],{"__ignoreMap":163},[167,20534,20535,20537,20539,20541],{"class":169,"line":170},[167,20536,174],{"class":173},[167,20538,178],{"class":177},[167,20540,182],{"class":181},[167,20542,185],{"class":173},[167,20544,20545,20547,20550,20552],{"class":169,"line":188},[167,20546,192],{"class":191},[167,20548,20549],{"class":173}," { onActivated } ",[167,20551,198],{"class":191},[167,20553,202],{"class":201},[167,20555,20556],{"class":169,"line":205},[167,20557,209],{"emptyLinePlaceholder":208},[167,20559,20561,20563,20565,20567],{"class":20560,"line":160},[169,213],[167,20562,12186],{"class":181},[167,20564,1493],{"class":173},[167,20566,639],{"class":191},[167,20568,1905],{"class":173},[167,20570,20571,20573,20575,20577,20580],{"class":169,"line":238},[167,20572,2608],{"class":173},[167,20574,2611],{"class":181},[167,20576,229],{"class":173},[167,20578,20579],{"class":201},"'Componente reactivado'",[167,20581,235],{"class":173},[167,20583,20584],{"class":169,"line":243},[167,20585,403],{"class":173},[167,20587,20588,20590,20592],{"class":169,"line":261},[167,20589,282],{"class":173},[167,20591,178],{"class":177},[167,20593,185],{"class":173},[154,20595,20598],{"className":156,"code":20596,"filename":3973,"highlights":20597,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  activated() {\n    console.log('Componente reactivado')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,20599,20600,20608,20616,20624,20636,20640,20644],{"__ignoreMap":163},[167,20601,20602,20604,20606],{"class":169,"line":170},[167,20603,174],{"class":173},[167,20605,178],{"class":177},[167,20607,185],{"class":173},[167,20609,20610,20612,20614],{"class":169,"line":188},[167,20611,608],{"class":191},[167,20613,3991],{"class":191},[167,20615,1905],{"class":173},[167,20617,20619,20622],{"class":20618,"line":205},[169,213],[167,20620,20621],{"class":181},"  activated",[167,20623,763],{"class":173},[167,20625,20626,20628,20630,20632,20634],{"class":169,"line":160},[167,20627,8894],{"class":173},[167,20629,2611],{"class":181},[167,20631,229],{"class":173},[167,20633,20579],{"class":201},[167,20635,235],{"class":173},[167,20637,20638],{"class":169,"line":238},[167,20639,3492],{"class":173},[167,20641,20642],{"class":169,"line":243},[167,20643,276],{"class":173},[167,20645,20646,20648,20650],{"class":169,"line":261},[167,20647,282],{"class":173},[167,20649,178],{"class":177},[167,20651,185],{"class":173},[22,20653,20655,11227,20657],{"id":20654},"ondeactivated-deactivated",[87,20656,12243],{},[87,20658,11164],{},[15,20660,20523,20661,1679],{},[3933,20662,20663],{},"se oculta, pero sigue en memoria",[154,20665,20668],{"className":156,"code":20666,"filename":3260,"highlights":20667,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onDeactivated } from 'vue'\n\nonDeactivated(() => {\n  console.log('Componente desactivado')\n})\n\u003C\u002Fscript>\n",[160],[87,20669,20670,20680,20691,20695,20706,20719,20723],{"__ignoreMap":163},[167,20671,20672,20674,20676,20678],{"class":169,"line":170},[167,20673,174],{"class":173},[167,20675,178],{"class":177},[167,20677,182],{"class":181},[167,20679,185],{"class":173},[167,20681,20682,20684,20687,20689],{"class":169,"line":188},[167,20683,192],{"class":191},[167,20685,20686],{"class":173}," { onDeactivated } ",[167,20688,198],{"class":191},[167,20690,202],{"class":201},[167,20692,20693],{"class":169,"line":205},[167,20694,209],{"emptyLinePlaceholder":208},[167,20696,20698,20700,20702,20704],{"class":20697,"line":160},[169,213],[167,20699,12243],{"class":181},[167,20701,1493],{"class":173},[167,20703,639],{"class":191},[167,20705,1905],{"class":173},[167,20707,20708,20710,20712,20714,20717],{"class":169,"line":238},[167,20709,2608],{"class":173},[167,20711,2611],{"class":181},[167,20713,229],{"class":173},[167,20715,20716],{"class":201},"'Componente desactivado'",[167,20718,235],{"class":173},[167,20720,20721],{"class":169,"line":243},[167,20722,403],{"class":173},[167,20724,20725,20727,20729],{"class":169,"line":261},[167,20726,282],{"class":173},[167,20728,178],{"class":177},[167,20730,185],{"class":173},[154,20732,20735],{"className":156,"code":20733,"filename":3973,"highlights":20734,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  deactivated() {\n    console.log('Componente desactivado')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,20736,20737,20745,20753,20760,20772,20776,20780],{"__ignoreMap":163},[167,20738,20739,20741,20743],{"class":169,"line":170},[167,20740,174],{"class":173},[167,20742,178],{"class":177},[167,20744,185],{"class":173},[167,20746,20747,20749,20751],{"class":169,"line":188},[167,20748,608],{"class":191},[167,20750,3991],{"class":191},[167,20752,1905],{"class":173},[167,20754,20756,20758],{"class":20755,"line":205},[169,213],[167,20757,12837],{"class":181},[167,20759,763],{"class":173},[167,20761,20762,20764,20766,20768,20770],{"class":169,"line":160},[167,20763,8894],{"class":173},[167,20765,2611],{"class":181},[167,20767,229],{"class":173},[167,20769,20716],{"class":201},[167,20771,235],{"class":173},[167,20773,20774],{"class":169,"line":238},[167,20775,3492],{"class":173},[167,20777,20778],{"class":169,"line":243},[167,20779,276],{"class":173},[167,20781,20782,20784,20786],{"class":169,"line":261},[167,20783,282],{"class":173},[167,20785,178],{"class":177},[167,20787,185],{"class":173},[11,20789,19064],{"id":20790},"manejo-de-errores",[22,20792,20794,11227,20796],{"id":20793},"onerrorcaptured-errorcaptured",[87,20795,9920],{},[87,20797,9185],{},[15,20799,20800,20801,1679],{},"Permite capturar errores de ",[3933,20802,20803],{},"componentes hijos",[154,20805,20808],{"className":156,"code":20806,"filename":3260,"highlights":20807,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onErrorCaptured } from 'vue'\n\nonErrorCaptured((error) => {\n  console.error('Error capturado:', error)\n  return false\n})\n\u003C\u002Fscript>\n",[160],[87,20809,20810,20820,20831,20835,20850,20863,20869,20873],{"__ignoreMap":163},[167,20811,20812,20814,20816,20818],{"class":169,"line":170},[167,20813,174],{"class":173},[167,20815,178],{"class":177},[167,20817,182],{"class":181},[167,20819,185],{"class":173},[167,20821,20822,20824,20827,20829],{"class":169,"line":188},[167,20823,192],{"class":191},[167,20825,20826],{"class":173}," { onErrorCaptured } ",[167,20828,198],{"class":191},[167,20830,202],{"class":201},[167,20832,20833],{"class":169,"line":205},[167,20834,209],{"emptyLinePlaceholder":208},[167,20836,20838,20840,20842,20844,20846,20848],{"class":20837,"line":160},[169,213],[167,20839,9920],{"class":181},[167,20841,1918],{"class":173},[167,20843,9352],{"class":254},[167,20845,693],{"class":173},[167,20847,639],{"class":191},[167,20849,1905],{"class":173},[167,20851,20852,20854,20856,20858,20861],{"class":169,"line":238},[167,20853,2608],{"class":173},[167,20855,9352],{"class":181},[167,20857,229],{"class":173},[167,20859,20860],{"class":201},"'Error capturado:'",[167,20862,14172],{"class":173},[167,20864,20865,20867],{"class":169,"line":243},[167,20866,1539],{"class":191},[167,20868,5593],{"class":219},[167,20870,20871],{"class":169,"line":261},[167,20872,403],{"class":173},[167,20874,20875,20877,20879],{"class":169,"line":273},[167,20876,282],{"class":173},[167,20878,178],{"class":177},[167,20880,185],{"class":173},[154,20882,20885],{"className":156,"code":20883,"filename":3973,"highlights":20884,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  errorCaptured(error) {\n    console.error('Error capturado:', error)\n    return false\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,20886,20887,20895,20903,20914,20926,20932,20936,20940],{"__ignoreMap":163},[167,20888,20889,20891,20893],{"class":169,"line":170},[167,20890,174],{"class":173},[167,20892,178],{"class":177},[167,20894,185],{"class":173},[167,20896,20897,20899,20901],{"class":169,"line":188},[167,20898,608],{"class":191},[167,20900,3991],{"class":191},[167,20902,1905],{"class":173},[167,20904,20906,20908,20910,20912],{"class":20905,"line":205},[169,213],[167,20907,10694],{"class":181},[167,20909,229],{"class":173},[167,20911,9352],{"class":254},[167,20913,258],{"class":173},[167,20915,20916,20918,20920,20922,20924],{"class":169,"line":160},[167,20917,8894],{"class":173},[167,20919,9352],{"class":181},[167,20921,229],{"class":173},[167,20923,20860],{"class":201},[167,20925,14172],{"class":173},[167,20927,20928,20930],{"class":169,"line":238},[167,20929,1937],{"class":191},[167,20931,5593],{"class":219},[167,20933,20934],{"class":169,"line":243},[167,20935,3492],{"class":173},[167,20937,20938],{"class":169,"line":261},[167,20939,276],{"class":173},[167,20941,20942,20944,20946],{"class":169,"line":273},[167,20943,282],{"class":173},[167,20945,178],{"class":177},[167,20947,185],{"class":173},[11,20949,20951],{"id":20950},"hooks-de-depuración-del-render","Hooks de depuración del render",[15,20953,20954,20955,1679],{},"Estos hooks ayudan a entender ",[3933,20956,20957],{},"por qué un componente se vuelve a renderizar",[15,20959,20960],{},"No deben usarse normalmente en producción.",[22,20962,20964],{"id":20963},"onrendertracked",[87,20965,8360],{},[15,20967,20968,20969,1679],{},"Se ejecuta cuando Vue ",[3933,20970,20971],{},"rastrea una dependencia reactiva durante el render",[154,20973,20976],{"className":156,"code":20974,"filename":3260,"highlights":20975,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onRenderTracked } from 'vue'\n\nonRenderTracked((event) => {\n  console.debug('Dependencia rastreada:', event.key)\n})\n\u003C\u002Fscript>\n",[160],[87,20977,20978,20988,20999,21003,21018,21033,21037],{"__ignoreMap":163},[167,20979,20980,20982,20984,20986],{"class":169,"line":170},[167,20981,174],{"class":173},[167,20983,178],{"class":177},[167,20985,182],{"class":181},[167,20987,185],{"class":173},[167,20989,20990,20992,20995,20997],{"class":169,"line":188},[167,20991,192],{"class":191},[167,20993,20994],{"class":173}," { onRenderTracked } ",[167,20996,198],{"class":191},[167,20998,202],{"class":201},[167,21000,21001],{"class":169,"line":205},[167,21002,209],{"emptyLinePlaceholder":208},[167,21004,21006,21008,21010,21012,21014,21016],{"class":21005,"line":160},[169,213],[167,21007,8360],{"class":181},[167,21009,1918],{"class":173},[167,21011,4195],{"class":254},[167,21013,693],{"class":173},[167,21015,639],{"class":191},[167,21017,1905],{"class":173},[167,21019,21020,21022,21025,21027,21030],{"class":169,"line":238},[167,21021,2608],{"class":173},[167,21023,21024],{"class":181},"debug",[167,21026,229],{"class":173},[167,21028,21029],{"class":201},"'Dependencia rastreada:'",[167,21031,21032],{"class":173},", event.key)\n",[167,21034,21035],{"class":169,"line":243},[167,21036,403],{"class":173},[167,21038,21039,21041,21043],{"class":169,"line":261},[167,21040,282],{"class":173},[167,21042,178],{"class":177},[167,21044,185],{"class":173},[154,21046,21049],{"className":156,"code":21047,"filename":3973,"highlights":21048,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  renderTracked(event) {\n    console.debug('Dependencia rastreada:', event.key)\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,21050,21051,21059,21067,21078,21090,21094,21098],{"__ignoreMap":163},[167,21052,21053,21055,21057],{"class":169,"line":170},[167,21054,174],{"class":173},[167,21056,178],{"class":177},[167,21058,185],{"class":173},[167,21060,21061,21063,21065],{"class":169,"line":188},[167,21062,608],{"class":191},[167,21064,3991],{"class":191},[167,21066,1905],{"class":173},[167,21068,21070,21072,21074,21076],{"class":21069,"line":205},[169,213],[167,21071,8883],{"class":181},[167,21073,229],{"class":173},[167,21075,4195],{"class":254},[167,21077,258],{"class":173},[167,21079,21080,21082,21084,21086,21088],{"class":169,"line":160},[167,21081,8894],{"class":173},[167,21083,21024],{"class":181},[167,21085,229],{"class":173},[167,21087,21029],{"class":201},[167,21089,21032],{"class":173},[167,21091,21092],{"class":169,"line":238},[167,21093,3492],{"class":173},[167,21095,21096],{"class":169,"line":243},[167,21097,276],{"class":173},[167,21099,21100,21102,21104],{"class":169,"line":261},[167,21101,282],{"class":173},[167,21103,178],{"class":177},[167,21105,185],{"class":173},[22,21107,21109],{"id":21108},"onrendertriggered",[87,21110,8420],{},[15,21112,21113,21114,1679],{},"Se ejecuta cuando ",[3933,21115,21116],{},"una dependencia dispara un re-render",[154,21118,21121],{"className":156,"code":21119,"filename":3260,"highlights":21120,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onRenderTriggered } from 'vue'\n\nonRenderTriggered((event) => {\n  console.debug('Re-render causado por:', event.key)\n})\n\u003C\u002Fscript>\n",[160],[87,21122,21123,21133,21144,21148,21163,21176,21180],{"__ignoreMap":163},[167,21124,21125,21127,21129,21131],{"class":169,"line":170},[167,21126,174],{"class":173},[167,21128,178],{"class":177},[167,21130,182],{"class":181},[167,21132,185],{"class":173},[167,21134,21135,21137,21140,21142],{"class":169,"line":188},[167,21136,192],{"class":191},[167,21138,21139],{"class":173}," { onRenderTriggered } ",[167,21141,198],{"class":191},[167,21143,202],{"class":201},[167,21145,21146],{"class":169,"line":205},[167,21147,209],{"emptyLinePlaceholder":208},[167,21149,21151,21153,21155,21157,21159,21161],{"class":21150,"line":160},[169,213],[167,21152,8420],{"class":181},[167,21154,1918],{"class":173},[167,21156,4195],{"class":254},[167,21158,693],{"class":173},[167,21160,639],{"class":191},[167,21162,1905],{"class":173},[167,21164,21165,21167,21169,21171,21174],{"class":169,"line":238},[167,21166,2608],{"class":173},[167,21168,21024],{"class":181},[167,21170,229],{"class":173},[167,21172,21173],{"class":201},"'Re-render causado por:'",[167,21175,21032],{"class":173},[167,21177,21178],{"class":169,"line":243},[167,21179,403],{"class":173},[167,21181,21182,21184,21186],{"class":169,"line":261},[167,21183,282],{"class":173},[167,21185,178],{"class":177},[167,21187,185],{"class":173},[154,21189,21192],{"className":156,"code":21190,"filename":3973,"highlights":21191,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  renderTriggered(event) {\n    console.debug('Re-render causado por:', event.key)\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,21193,21194,21202,21210,21221,21233,21237,21241],{"__ignoreMap":163},[167,21195,21196,21198,21200],{"class":169,"line":170},[167,21197,174],{"class":173},[167,21199,178],{"class":177},[167,21201,185],{"class":173},[167,21203,21204,21206,21208],{"class":169,"line":188},[167,21205,608],{"class":191},[167,21207,3991],{"class":191},[167,21209,1905],{"class":173},[167,21211,21213,21215,21217,21219],{"class":21212,"line":205},[169,213],[167,21214,8939],{"class":181},[167,21216,229],{"class":173},[167,21218,4195],{"class":254},[167,21220,258],{"class":173},[167,21222,21223,21225,21227,21229,21231],{"class":169,"line":160},[167,21224,8894],{"class":173},[167,21226,21024],{"class":181},[167,21228,229],{"class":173},[167,21230,21173],{"class":201},[167,21232,21032],{"class":173},[167,21234,21235],{"class":169,"line":238},[167,21236,3492],{"class":173},[167,21238,21239],{"class":169,"line":243},[167,21240,276],{"class":173},[167,21242,21243,21245,21247],{"class":169,"line":261},[167,21244,282],{"class":173},[167,21246,178],{"class":177},[167,21248,185],{"class":173},[11,21250,21252],{"id":21251},"ssr-server-side-rendering","SSR (Server Side Rendering)",[22,21254,21256,11227,21258],{"id":21255},"onserverprefetch-serverprefetch",[87,21257,6708],{},[87,21259,6218],{},[15,21261,21262,21263,1679],{},"Permite ",[3933,21264,21265],{},"cargar datos antes de renderizar el HTML en el servidor",[15,21267,21268],{},"Esto evita pantallas vacías durante el primer render.",[154,21270,21273],{"className":156,"code":21271,"filename":3260,"highlights":21272,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onServerPrefetch } from 'vue'\n\nonServerPrefetch(async () => {\n  await fetch('\u002Fapi\u002Fdata')\n})\n\u003C\u002Fscript>\n",[160],[87,21274,21275,21285,21296,21300,21315,21328,21332],{"__ignoreMap":163},[167,21276,21277,21279,21281,21283],{"class":169,"line":170},[167,21278,174],{"class":173},[167,21280,178],{"class":177},[167,21282,182],{"class":181},[167,21284,185],{"class":173},[167,21286,21287,21289,21292,21294],{"class":169,"line":188},[167,21288,192],{"class":191},[167,21290,21291],{"class":173}," { onServerPrefetch } ",[167,21293,198],{"class":191},[167,21295,202],{"class":201},[167,21297,21298],{"class":169,"line":205},[167,21299,209],{"emptyLinePlaceholder":208},[167,21301,21303,21305,21307,21309,21311,21313],{"class":21302,"line":160},[169,213],[167,21304,6708],{"class":181},[167,21306,229],{"class":173},[167,21308,2523],{"class":191},[167,21310,1469],{"class":173},[167,21312,639],{"class":191},[167,21314,1905],{"class":173},[167,21316,21317,21319,21321,21323,21326],{"class":169,"line":238},[167,21318,2575],{"class":191},[167,21320,6621],{"class":181},[167,21322,229],{"class":173},[167,21324,21325],{"class":201},"'\u002Fapi\u002Fdata'",[167,21327,235],{"class":173},[167,21329,21330],{"class":169,"line":243},[167,21331,403],{"class":173},[167,21333,21334,21336,21338],{"class":169,"line":261},[167,21335,282],{"class":173},[167,21337,178],{"class":177},[167,21339,185],{"class":173},[154,21341,21344],{"className":156,"code":21342,"filename":3973,"highlights":21343,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  async serverPrefetch() {\n    await fetch('\u002Fapi\u002Fdata')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,21345,21346,21354,21362,21371,21383,21387,21391],{"__ignoreMap":163},[167,21347,21348,21350,21352],{"class":169,"line":170},[167,21349,174],{"class":173},[167,21351,178],{"class":177},[167,21353,185],{"class":173},[167,21355,21356,21358,21360],{"class":169,"line":188},[167,21357,608],{"class":191},[167,21359,3991],{"class":191},[167,21361,1905],{"class":173},[167,21363,21365,21367,21369],{"class":21364,"line":205},[169,213],[167,21366,7331],{"class":191},[167,21368,7334],{"class":181},[167,21370,763],{"class":173},[167,21372,21373,21375,21377,21379,21381],{"class":169,"line":160},[167,21374,6730],{"class":191},[167,21376,6621],{"class":181},[167,21378,229],{"class":173},[167,21380,21325],{"class":201},[167,21382,235],{"class":173},[167,21384,21385],{"class":169,"line":238},[167,21386,3492],{"class":173},[167,21388,21389],{"class":169,"line":243},[167,21390,276],{"class":173},[167,21392,21393,21395,21397],{"class":169,"line":261},[167,21394,282],{"class":173},[167,21396,178],{"class":177},[167,21398,185],{"class":173},[11,21400,21402],{"id":21401},"cuándo-usar-hooks-y-cuándo-no","Cuándo usar hooks (y cuándo no)",[22,21404,21406],{"id":21405},"úsalos-cuando","Úsalos cuando:",[33,21408,21409,21417,21425,21432],{},[36,21410,21411,21412,2526,21415,6219],{},"Necesitas ",[3933,21413,21414],{},"acceder al DOM real",[87,21416,6796],{},[36,21418,21419,21420,2526,21423,6219],{},"Haces ",[3933,21421,21422],{},"limpieza de recursos",[87,21424,14303],{},[36,21426,21427,21428,2526,21430,6219],{},"Trabajas con ",[3933,21429,978],{},[87,21431,6708],{},[36,21433,21434,21435],{},"Necesitas reaccionar a ",[3933,21436,21437],{},"fases del ciclo del componente",[22,21439,7929],{"id":21440},"evítalos-cuando",[33,21442,21443,21450,21457],{},[36,21444,7915,21445,21449],{},[3933,21446,21447],{},[87,21448,1661],{}," resuelve el problema",[36,21451,7915,21452,21456],{},[3933,21453,21454],{},[87,21455,1665],{}," es suficiente",[36,21458,21459,21460],{},"Solo quieres reaccionar a ",[3933,21461,21462],{},"cambios de estado específicos",[15,21464,21465,21466,21469],{},"Los hooks coordinan ",[3933,21467,21468],{},"momentos del ciclo",", no deberían contener toda la lógica del componente.",[11,21471,7678],{"id":7677},[15,21473,21474,21475,583],{},"Los hooks del ciclo de vida permiten controlar ",[3933,21476,21477],{},"momentos clave del componente",[56,21479,21480,21490],{},[59,21481,21482],{},[62,21483,21484,21487],{},[65,21485,21486],{},"Fase",[65,21488,21489],{},"Hooks principales",[75,21491,21492,21502,21512,21522,21532,21543],{},[62,21493,21494,21496],{},[80,21495,19036],{},[80,21497,21498,1025,21500],{},[87,21499,16667],{},[87,21501,17865],{},[62,21503,21504,21506],{},[80,21505,19041],{},[80,21507,21508,1025,21510],{},[87,21509,6796],{},[87,21511,6393],{},[62,21513,21514,21516],{},[80,21515,19046],{},[80,21517,21518,1025,21520],{},[87,21519,15345],{},[87,21521,15037],{},[62,21523,21524,21526],{},[80,21525,19051],{},[80,21527,21528,1025,21530],{},[87,21529,14303],{},[87,21531,11276],{},[62,21533,21534,21537],{},[80,21535,21536],{},"Cache",[80,21538,21539,1025,21541],{},[87,21540,12186],{},[87,21542,12243],{},[62,21544,21545,21547],{},[80,21546,978],{},[80,21548,21549],{},[87,21550,6708],{},[5367,21552,21553],{},[15,21554,21555,21556],{},"Si dudas qué hook usar, pregúntate primero:\n",[3933,21557,21558],{},"¿En qué momento de la vida del componente necesito ejecutar esta lógica?",[924,21560,21561],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":21563},[21564,21565,21566,21567,21568,21569,21571,21573,21575,21577,21579,21581,21583,21585,21587,21588,21589,21591,21592],{"id":6230,"depth":188,"text":6231},{"id":19082,"depth":188,"text":19083},{"id":19150,"depth":188,"text":17862},{"id":17865,"depth":188,"text":17865},{"id":16667,"depth":188,"text":9238},{"id":19492,"depth":188,"text":21570},"onBeforeMount \u002F beforeMount",{"id":19632,"depth":188,"text":21572},"onMounted \u002F mounted",{"id":19805,"depth":188,"text":21574},"onBeforeUpdate \u002F beforeUpdate",{"id":19945,"depth":188,"text":21576},"onUpdated \u002F updated",{"id":20105,"depth":188,"text":21578},"onBeforeUnmount \u002F beforeUnmount",{"id":20242,"depth":188,"text":21580},"onUnmounted \u002F unmounted",{"id":20516,"depth":188,"text":21582},"onActivated \u002F activated",{"id":20654,"depth":188,"text":21584},"onDeactivated \u002F deactivated",{"id":20793,"depth":188,"text":21586},"onErrorCaptured \u002F errorCaptured",{"id":20963,"depth":188,"text":8360},{"id":21108,"depth":188,"text":8420},{"id":21255,"depth":188,"text":21590},"onServerPrefetch \u002F serverPrefetch",{"id":21405,"depth":188,"text":21406},{"id":21440,"depth":188,"text":7929},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772676391\u002Fvue-lifecycle-hooks-overview_ovnxzy.png","2026-03-05","Un mapa claro de todos los ciclos de vida de Vue 3 para entender cuándo usar cada hook.",{"updatedAt":21597,"readingTime":273,"coverCaption":21598,"author":946,"keywords":21599},"2026-03-04T21:30:00-05:00","Panorama de los hooks del ciclo de vida en Vue 3.",[3258,21600,3260,3973,21601],"Ciclos de vida","Hooks","\u002Fblog\u002Fvue-lifecycle-hooks-overview.es",[21604],{"headline":19002,"author":21605,"datePublished":21597,"@type":961},{"name":946,"@type":959},{"title":19002,"description":21595},"blog\u002Fvue-lifecycle-hooks-overview.es",[21609,21610,21611,21612],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":5424,"color":5425},"SBKJnT6tEFXx0FslfjbqCoy_-zKjHKGzNv961L2uqmc",{"id":21615,"title":21616,"body":21617,"cover":23651,"coverAlt":21616,"date":23652,"description":23653,"draft":940,"extension":941,"lab":942,"locale":943,"meta":23654,"navigation":208,"path":23660,"schemaOrg":23661,"seo":23664,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":23665,"tags":23666,"__hash__":23671},"blog\u002Fblog\u002Fvue-3-reactivity-internals.es.md","Cómo funciona internamente el sistema de reactividad en Vue 3",{"type":8,"value":21618,"toc":23622},[21619,21622,21634,21638,21644,21655,21658,21666,21670,21674,21682,21694,21701,21705,21708,21732,21768,21771,21784,21791,21796,21799,21842,21848,21852,21861,21876,22761,22855,22859,22910,22913,22917,22925,22943,22968,22974,22980,22983,23115,23118,23132,23140,23148,23169,23172,23189,23193,23196,23207,23210,23367,23370,23372,23376,23418,23421,23433,23437,23448,23456,23464,23526,23529,23540,23544,23547,23571,23575,23578,23589,23592,23614,23619],[11,21620,21616],{"id":21621},"cómo-funciona-internamente-el-sistema-de-reactividad-en-vue-3",[15,21623,21624,21625,1025,21627,1025,21629,1025,21631,21633],{},"Vue 3 introdujo un sistema de reactividad completamente rediseñado respecto a Vue 2, basado en Proxy y en un grafo dinámico de dependencias. Aunque la API pública (",[87,21626,2085],{},[87,21628,18243],{},[87,21630,1661],{},[87,21632,1665],{},") resulta simple, su funcionamiento interno responde a un modelo cuidadosamente optimizado para granularidad, rendimiento y previsibilidad. Entender este modelo no es opcional en aplicaciones grandes: es la diferencia entre depurar síntomas y resolver causas.",[22,21635,21637],{"id":21636},"introducción-basada-en-un-problema-real","Introducción basada en un problema real",[15,21639,21640,21641,21643],{},"En equipos que ya utilizan Vue 3 en producción, las dudas más costosas no suelen ser “cómo usar ",[87,21642,2085],{},"”, sino estas:",[33,21645,21646,21649,21652],{},[36,21647,21648],{},"¿Cómo sabe Vue exactamente qué actualizar y qué no tocar?",[36,21650,21651],{},"¿Por qué un cambio parece correcto, pero no re-renderiza?",[36,21653,21654],{},"¿Por qué una pantalla vuelve a renderizar demasiado y se vuelve lenta?",[15,21656,21657],{},"La respuesta no está en una API aislada. Está en el motor interno: cómo Vue registra dependencias al leer estado y cómo decide qué efectos ejecutar al escribir estado.",[15,21659,21660,21661,90,21663,21665],{},"Cuando este modelo mental no está claro, se depura a ciegas. Cuando sí lo está, se puede razonar sobre causa raíz, costo de render y comportamiento de ",[87,21662,1661],{},[87,21664,1668],{}," con precisión.",[22,21667,21669],{"id":21668},"modelo-mental-simplificado","Modelo mental simplificado",[3087,21671,21673],{"id":21672},"dependency-tracking-en-una-frase","Dependency tracking en una frase",[15,21675,21676,21677,1025,21679,21681],{},"Cada vez que un efecto activo (render, ",[87,21678,1661],{},[87,21680,1668],{},") lee una propiedad reactiva, Vue registra una relación:",[154,21683,21688],{"className":21684,"code":21685,"filename":21686,"language":21687,"meta":163,"style":163},"language-txt shiki shiki-themes github-light github-dark","efecto X depende de target.key\n","dependency-rule.txt","txt",[87,21689,21690],{"__ignoreMap":163},[167,21691,21692],{"class":169,"line":170},[167,21693,21685],{},[15,21695,21696,21697,21700],{},"Luego, si ",[87,21698,21699],{},"target.key"," cambia, Vue solo notifica los efectos suscritos a esa clave.",[3087,21702,21704],{"id":21703},"estructura-interna-weakmap-map-set","Estructura interna: WeakMap → Map → Set",[15,21706,21707],{},"Un modelo simplificado del almacenamiento de dependencias:",[33,21709,21710,21718,21726],{},[36,21711,21712,21715,21716,4270],{},[87,21713,21714],{},"WeakMap",": índice por objeto reactivo (",[87,21717,7839],{},[36,21719,21720,21723,21724,4270],{},[87,21721,21722],{},"Map",": índice por propiedad dentro de ese objeto (",[87,21725,7845],{},[36,21727,21728,21731],{},[87,21729,21730],{},"Set",": efectos que dependen de esa propiedad.",[154,21733,21736],{"className":21684,"code":21734,"filename":21735,"language":21687,"meta":163,"style":163},"bucket (WeakMap)\n  -> targetA (Map)\n       -> \"count\" (Set: effectRender, effectComputed)\n       -> \"ok\"    (Set: effectRender)\n  -> targetB (Map)\n       -> \"name\"  (Set: effectProfile)\n","dependency-graph.txt",[87,21737,21738,21743,21748,21753,21758,21763],{"__ignoreMap":163},[167,21739,21740],{"class":169,"line":170},[167,21741,21742],{},"bucket (WeakMap)\n",[167,21744,21745],{"class":169,"line":188},[167,21746,21747],{},"  -> targetA (Map)\n",[167,21749,21750],{"class":169,"line":205},[167,21751,21752],{},"       -> \"count\" (Set: effectRender, effectComputed)\n",[167,21754,21755],{"class":169,"line":160},[167,21756,21757],{},"       -> \"ok\"    (Set: effectRender)\n",[167,21759,21760],{"class":169,"line":238},[167,21761,21762],{},"  -> targetB (Map)\n",[167,21764,21765],{"class":169,"line":243},[167,21766,21767],{},"       -> \"name\"  (Set: effectProfile)\n",[15,21769,21770],{},"Esta estructura permite:",[33,21772,21773,21778,21781],{},[36,21774,21775,21776,4270],{},"Evitar memory leaks (gracias a ",[87,21777,21714],{},[36,21779,21780],{},"Tener granularidad por propiedad.",[36,21782,21783],{},"Ejecutar únicamente los efectos necesarios.",[3087,21785,21787,21790],{"id":21786},"activeeffect-la-pieza-crítica",[87,21788,21789],{},"activeEffect",": la pieza crítica",[15,21792,21793,21794,1679],{},"Vue mantiene una referencia global temporal al efecto que está ejecutándose: ",[87,21795,21789],{},[15,21797,21798],{},"Flujo:",[3035,21800,21801,21811,21820,21834],{},[36,21802,21803,21804,21807,21808,1679],{},"Empieza ",[87,21805,21806],{},"effect(fn)"," → ",[87,21809,21810],{},"activeEffect = fn",[36,21812,18229,21813,21816,21817,1679],{},[87,21814,21815],{},"fn",", una lectura reactiva ejecuta ",[87,21818,21819],{},"track(target, key)",[36,21821,21822,21825,21826,21828,21829,21831,21832,1679],{},[87,21823,21824],{},"track"," asocia ",[87,21827,21789],{}," al ",[87,21830,21730],{}," de ",[87,21833,21699],{},[36,21835,21836,21837,1025,21839,21841],{},"Al terminar ",[87,21838,21815],{},[87,21840,21789],{}," vuelve al anterior (stack de efectos anidados).",[15,21843,21844,21845,21847],{},"Sin ",[87,21846,21789],{},", no hay tracking.",[22,21849,21851],{"id":21850},"mini-implementación-desde-cero-en-javascript-puro","Mini implementación desde cero en JavaScript puro",[15,21853,21854,21855,21857,21858,21860],{},"La implementación real es más compleja (maneja tipos de operación, colecciones como ",[87,21856,21722],{},"\u002F",[87,21859,21730],{},", flags internos, etc.), pero este modelo replica las piezas esenciales:",[33,21862,21863,21867,21872],{},[36,21864,21865],{},[87,21866,21819],{},[36,21868,21869],{},[87,21870,21871],{},"trigger(target, key)",[36,21873,21874],{},[87,21875,21806],{},[154,21877,21880],{"className":2879,"code":21878,"filename":21879,"language":2882,"meta":163,"style":163},"\u002F\u002F Grafo global de dependencias.\nconst bucket = new WeakMap()\n\n\u002F\u002F Effect activo y pila para efectos anidados.\nlet activeEffect = null\nconst effectStack = []\n\nfunction cleanup(effectFn) {\n  for (const deps of effectFn.deps) {\n    deps.delete(effectFn)\n  }\n  effectFn.deps.length = 0\n}\n\nfunction effect(fn, options = {}) {\n  const effectFn = () => {\n    cleanup(effectFn)\n    activeEffect = effectFn\n    effectStack.push(effectFn)\n    const result = fn()\n    effectStack.pop()\n    activeEffect = effectStack[effectStack.length - 1] ?? null\n    return result\n  }\n\n  effectFn.deps = []\n  effectFn.options = options\n\n  if (!options.lazy) {\n    effectFn()\n  }\n\n  return effectFn\n}\n\nfunction track(target, key) {\n  if (!activeEffect) return\n\n  let depsMap = bucket.get(target)\n  if (!depsMap) {\n    depsMap = new Map()\n    bucket.set(target, depsMap)\n  }\n\n  let deps = depsMap.get(key)\n  if (!deps) {\n    deps = new Set()\n    depsMap.set(key, deps)\n  }\n\n  if (!deps.has(activeEffect)) {\n    deps.add(activeEffect)\n    activeEffect.deps.push(deps)\n  }\n}\n\nfunction trigger(target, key) {\n  const depsMap = bucket.get(target)\n  if (!depsMap) return\n\n  const deps = depsMap.get(key)\n  if (!deps) return\n\n  const effectsToRun = new Set()\n  deps.forEach((effectFn) => {\n    if (effectFn !== activeEffect) effectsToRun.add(effectFn)\n  })\n\n  effectsToRun.forEach((effectFn) => {\n    if (effectFn.options.scheduler) {\n      effectFn.options.scheduler(effectFn)\n    } else {\n      effectFn()\n    }\n  })\n}\n\nfunction reactive(obj) {\n  return new Proxy(obj, {\n    get(target, key, receiver) {\n      track(target, key)\n      return Reflect.get(target, key, receiver)\n    },\n    set(target, key, value, receiver) {\n      const oldValue = target[key]\n      const result = Reflect.set(target, key, value, receiver)\n      if (!Object.is(oldValue, value)) {\n        trigger(target, key)\n      }\n      return result\n    }\n  })\n}\n","reactivity-core.js",[87,21881,21882,21887,21903,21907,21912,21923,21935,21939,21953,21971,21981,21985,21996,22000,22004,22025,22040,22047,22057,22066,22080,22089,22112,22119,22123,22127,22136,22146,22150,22161,22168,22172,22176,22182,22186,22190,22207,22220,22224,22242,22253,22267,22277,22281,22285,22302,22313,22327,22337,22341,22345,22362,22371,22381,22385,22389,22393,22410,22425,22438,22442,22456,22469,22473,22488,22506,22522,22526,22530,22547,22554,22564,22573,22580,22584,22588,22592,22596,22609,22621,22641,22649,22661,22665,22688,22700,22715,22732,22739,22743,22749,22753,22757],{"__ignoreMap":163},[167,21883,21884],{"class":169,"line":170},[167,21885,21886],{"class":18662},"\u002F\u002F Grafo global de dependencias.\n",[167,21888,21889,21891,21894,21896,21898,21901],{"class":169,"line":188},[167,21890,216],{"class":191},[167,21892,21893],{"class":219}," bucket",[167,21895,223],{"class":191},[167,21897,4224],{"class":191},[167,21899,21900],{"class":181}," WeakMap",[167,21902,2917],{"class":173},[167,21904,21905],{"class":169,"line":205},[167,21906,209],{"emptyLinePlaceholder":208},[167,21908,21909],{"class":169,"line":160},[167,21910,21911],{"class":18662},"\u002F\u002F Effect activo y pila para efectos anidados.\n",[167,21913,21914,21916,21919,21921],{"class":169,"line":238},[167,21915,13948],{"class":191},[167,21917,21918],{"class":173}," activeEffect ",[167,21920,267],{"class":191},[167,21922,12146],{"class":219},[167,21924,21925,21927,21930,21932],{"class":169,"line":243},[167,21926,216],{"class":191},[167,21928,21929],{"class":219}," effectStack",[167,21931,223],{"class":191},[167,21933,21934],{"class":173}," []\n",[167,21936,21937],{"class":169,"line":261},[167,21938,209],{"emptyLinePlaceholder":208},[167,21940,21941,21943,21946,21948,21951],{"class":169,"line":273},[167,21942,246],{"class":191},[167,21944,21945],{"class":181}," cleanup",[167,21947,229],{"class":173},[167,21949,21950],{"class":254},"effectFn",[167,21952,258],{"class":173},[167,21954,21955,21958,21960,21962,21965,21968],{"class":169,"line":279},[167,21956,21957],{"class":191},"  for",[167,21959,2526],{"class":173},[167,21961,216],{"class":191},[167,21963,21964],{"class":219}," deps",[167,21966,21967],{"class":191}," of",[167,21969,21970],{"class":173}," effectFn.deps) {\n",[167,21972,21973,21976,21978],{"class":169,"line":289},[167,21974,21975],{"class":173},"    deps.",[167,21977,7862],{"class":181},[167,21979,21980],{"class":173},"(effectFn)\n",[167,21982,21983],{"class":169,"line":294},[167,21984,3492],{"class":173},[167,21986,21987,21990,21992,21994],{"class":169,"line":304},[167,21988,21989],{"class":173},"  effectFn.deps.",[167,21991,15756],{"class":219},[167,21993,223],{"class":191},[167,21995,15802],{"class":219},[167,21997,21998],{"class":169,"line":313},[167,21999,276],{"class":173},[167,22001,22002],{"class":169,"line":161},[167,22003,209],{"emptyLinePlaceholder":208},[167,22005,22006,22008,22011,22013,22015,22017,22020,22022],{"class":169,"line":335},[167,22007,246],{"class":191},[167,22009,22010],{"class":181}," effect",[167,22012,229],{"class":173},[167,22014,21815],{"class":254},[167,22016,1025],{"class":173},[167,22018,22019],{"class":254},"options",[167,22021,223],{"class":191},[167,22023,22024],{"class":173}," {}) {\n",[167,22026,22027,22029,22032,22034,22036,22038],{"class":169,"line":341},[167,22028,1443],{"class":191},[167,22030,22031],{"class":181}," effectFn",[167,22033,223],{"class":191},[167,22035,1469],{"class":173},[167,22037,639],{"class":191},[167,22039,1905],{"class":173},[167,22041,22042,22045],{"class":169,"line":489},[167,22043,22044],{"class":181},"    cleanup",[167,22046,21980],{"class":173},[167,22048,22049,22052,22054],{"class":169,"line":495},[167,22050,22051],{"class":173},"    activeEffect ",[167,22053,267],{"class":191},[167,22055,22056],{"class":173}," effectFn\n",[167,22058,22059,22062,22064],{"class":169,"line":501},[167,22060,22061],{"class":173},"    effectStack.",[167,22063,15723],{"class":181},[167,22065,21980],{"class":173},[167,22067,22068,22070,22073,22075,22078],{"class":169,"line":512},[167,22069,8266],{"class":191},[167,22071,22072],{"class":219}," result",[167,22074,223],{"class":191},[167,22076,22077],{"class":181}," fn",[167,22079,2917],{"class":173},[167,22081,22082,22084,22087],{"class":169,"line":781},[167,22083,22061],{"class":173},[167,22085,22086],{"class":181},"pop",[167,22088,2917],{"class":173},[167,22090,22091,22093,22095,22098,22100,22103,22105,22108,22110],{"class":169,"line":786},[167,22092,22051],{"class":173},[167,22094,267],{"class":191},[167,22096,22097],{"class":173}," effectStack[effectStack.",[167,22099,15756],{"class":219},[167,22101,22102],{"class":191}," -",[167,22104,15762],{"class":219},[167,22106,22107],{"class":173},"] ",[167,22109,15799],{"class":191},[167,22111,12146],{"class":219},[167,22113,22114,22116],{"class":169,"line":2678},[167,22115,1937],{"class":191},[167,22117,22118],{"class":173}," result\n",[167,22120,22121],{"class":169,"line":2692},[167,22122,3492],{"class":173},[167,22124,22125],{"class":169,"line":3575},[167,22126,209],{"emptyLinePlaceholder":208},[167,22128,22129,22132,22134],{"class":169,"line":5028},[167,22130,22131],{"class":173},"  effectFn.deps ",[167,22133,267],{"class":191},[167,22135,21934],{"class":173},[167,22137,22138,22141,22143],{"class":169,"line":5037},[167,22139,22140],{"class":173},"  effectFn.options ",[167,22142,267],{"class":191},[167,22144,22145],{"class":173}," options\n",[167,22147,22148],{"class":169,"line":5046},[167,22149,209],{"emptyLinePlaceholder":208},[167,22151,22152,22154,22156,22158],{"class":169,"line":6756},[167,22153,2544],{"class":191},[167,22155,2526],{"class":173},[167,22157,6641],{"class":191},[167,22159,22160],{"class":173},"options.lazy) {\n",[167,22162,22163,22166],{"class":169,"line":6778},[167,22164,22165],{"class":181},"    effectFn",[167,22167,2917],{"class":173},[167,22169,22170],{"class":169,"line":6783},[167,22171,3492],{"class":173},[167,22173,22174],{"class":169,"line":6788},[167,22175,209],{"emptyLinePlaceholder":208},[167,22177,22178,22180],{"class":169,"line":6793},[167,22179,1539],{"class":191},[167,22181,22056],{"class":173},[167,22183,22184],{"class":169,"line":6809},[167,22185,276],{"class":173},[167,22187,22188],{"class":169,"line":6824},[167,22189,209],{"emptyLinePlaceholder":208},[167,22191,22192,22194,22197,22199,22201,22203,22205],{"class":169,"line":6829},[167,22193,246],{"class":191},[167,22195,22196],{"class":181}," track",[167,22198,229],{"class":173},[167,22200,7839],{"class":254},[167,22202,1025],{"class":173},[167,22204,7845],{"class":254},[167,22206,258],{"class":173},[167,22208,22209,22211,22213,22215,22218],{"class":169,"line":6836},[167,22210,2544],{"class":191},[167,22212,2526],{"class":173},[167,22214,6641],{"class":191},[167,22216,22217],{"class":173},"activeEffect) ",[167,22219,2556],{"class":191},[167,22221,22222],{"class":169,"line":6845},[167,22223,209],{"emptyLinePlaceholder":208},[167,22225,22226,22229,22232,22234,22237,22239],{"class":169,"line":6854},[167,22227,22228],{"class":191},"  let",[167,22230,22231],{"class":173}," depsMap ",[167,22233,267],{"class":191},[167,22235,22236],{"class":173}," bucket.",[167,22238,4233],{"class":181},[167,22240,22241],{"class":173},"(target)\n",[167,22243,22244,22246,22248,22250],{"class":169,"line":6861},[167,22245,2544],{"class":191},[167,22247,2526],{"class":173},[167,22249,6641],{"class":191},[167,22251,22252],{"class":173},"depsMap) {\n",[167,22254,22255,22258,22260,22262,22265],{"class":169,"line":6879},[167,22256,22257],{"class":173},"    depsMap ",[167,22259,267],{"class":191},[167,22261,4224],{"class":191},[167,22263,22264],{"class":181}," Map",[167,22266,2917],{"class":173},[167,22268,22269,22272,22274],{"class":169,"line":6884},[167,22270,22271],{"class":173},"    bucket.",[167,22273,7856],{"class":181},[167,22275,22276],{"class":173},"(target, depsMap)\n",[167,22278,22279],{"class":169,"line":6889},[167,22280,3492],{"class":173},[167,22282,22283],{"class":169,"line":6898},[167,22284,209],{"emptyLinePlaceholder":208},[167,22286,22287,22289,22292,22294,22297,22299],{"class":169,"line":6903},[167,22288,22228],{"class":191},[167,22290,22291],{"class":173}," deps ",[167,22293,267],{"class":191},[167,22295,22296],{"class":173}," depsMap.",[167,22298,4233],{"class":181},[167,22300,22301],{"class":173},"(key)\n",[167,22303,22304,22306,22308,22310],{"class":169,"line":6912},[167,22305,2544],{"class":191},[167,22307,2526],{"class":173},[167,22309,6641],{"class":191},[167,22311,22312],{"class":173},"deps) {\n",[167,22314,22315,22318,22320,22322,22325],{"class":169,"line":6928},[167,22316,22317],{"class":173},"    deps ",[167,22319,267],{"class":191},[167,22321,4224],{"class":191},[167,22323,22324],{"class":181}," Set",[167,22326,2917],{"class":173},[167,22328,22329,22332,22334],{"class":169,"line":6949},[167,22330,22331],{"class":173},"    depsMap.",[167,22333,7856],{"class":181},[167,22335,22336],{"class":173},"(key, deps)\n",[167,22338,22339],{"class":169,"line":6954},[167,22340,3492],{"class":173},[167,22342,22343],{"class":169,"line":6975},[167,22344,209],{"emptyLinePlaceholder":208},[167,22346,22347,22349,22351,22353,22356,22359],{"class":169,"line":6989},[167,22348,2544],{"class":191},[167,22350,2526],{"class":173},[167,22352,6641],{"class":191},[167,22354,22355],{"class":173},"deps.",[167,22357,22358],{"class":181},"has",[167,22360,22361],{"class":173},"(activeEffect)) {\n",[167,22363,22364,22366,22368],{"class":169,"line":7003},[167,22365,21975],{"class":173},[167,22367,7859],{"class":181},[167,22369,22370],{"class":173},"(activeEffect)\n",[167,22372,22373,22376,22378],{"class":169,"line":7017},[167,22374,22375],{"class":173},"    activeEffect.deps.",[167,22377,15723],{"class":181},[167,22379,22380],{"class":173},"(deps)\n",[167,22382,22383],{"class":169,"line":7026},[167,22384,3492],{"class":173},[167,22386,22387],{"class":169,"line":7031},[167,22388,276],{"class":173},[167,22390,22391],{"class":169,"line":7048},[167,22392,209],{"emptyLinePlaceholder":208},[167,22394,22395,22397,22400,22402,22404,22406,22408],{"class":169,"line":7057},[167,22396,246],{"class":191},[167,22398,22399],{"class":181}," trigger",[167,22401,229],{"class":173},[167,22403,7839],{"class":254},[167,22405,1025],{"class":173},[167,22407,7845],{"class":254},[167,22409,258],{"class":173},[167,22411,22412,22414,22417,22419,22421,22423],{"class":169,"line":7555},[167,22413,1443],{"class":191},[167,22415,22416],{"class":219}," depsMap",[167,22418,223],{"class":191},[167,22420,22236],{"class":173},[167,22422,4233],{"class":181},[167,22424,22241],{"class":173},[167,22426,22427,22429,22431,22433,22436],{"class":169,"line":7560},[167,22428,2544],{"class":191},[167,22430,2526],{"class":173},[167,22432,6641],{"class":191},[167,22434,22435],{"class":173},"depsMap) ",[167,22437,2556],{"class":191},[167,22439,22440],{"class":169,"line":7579},[167,22441,209],{"emptyLinePlaceholder":208},[167,22443,22444,22446,22448,22450,22452,22454],{"class":169,"line":7592},[167,22445,1443],{"class":191},[167,22447,21964],{"class":219},[167,22449,223],{"class":191},[167,22451,22296],{"class":173},[167,22453,4233],{"class":181},[167,22455,22301],{"class":173},[167,22457,22458,22460,22462,22464,22467],{"class":169,"line":7605},[167,22459,2544],{"class":191},[167,22461,2526],{"class":173},[167,22463,6641],{"class":191},[167,22465,22466],{"class":173},"deps) ",[167,22468,2556],{"class":191},[167,22470,22471],{"class":169,"line":7618},[167,22472,209],{"emptyLinePlaceholder":208},[167,22474,22475,22477,22480,22482,22484,22486],{"class":169,"line":7627},[167,22476,1443],{"class":191},[167,22478,22479],{"class":219}," effectsToRun",[167,22481,223],{"class":191},[167,22483,4224],{"class":191},[167,22485,22324],{"class":181},[167,22487,2917],{"class":173},[167,22489,22490,22493,22496,22498,22500,22502,22504],{"class":169,"line":7632},[167,22491,22492],{"class":173},"  deps.",[167,22494,22495],{"class":181},"forEach",[167,22497,1918],{"class":173},[167,22499,21950],{"class":254},[167,22501,693],{"class":173},[167,22503,639],{"class":191},[167,22505,1905],{"class":173},[167,22507,22508,22510,22513,22515,22518,22520],{"class":169,"line":7647},[167,22509,7419],{"class":191},[167,22511,22512],{"class":173}," (effectFn ",[167,22514,701],{"class":191},[167,22516,22517],{"class":173}," activeEffect) effectsToRun.",[167,22519,7859],{"class":181},[167,22521,21980],{"class":173},[167,22523,22524],{"class":169,"line":7656},[167,22525,8347],{"class":173},[167,22527,22528],{"class":169,"line":10073},[167,22529,209],{"emptyLinePlaceholder":208},[167,22531,22532,22535,22537,22539,22541,22543,22545],{"class":169,"line":10084},[167,22533,22534],{"class":173},"  effectsToRun.",[167,22536,22495],{"class":181},[167,22538,1918],{"class":173},[167,22540,21950],{"class":254},[167,22542,693],{"class":173},[167,22544,639],{"class":191},[167,22546,1905],{"class":173},[167,22548,22549,22551],{"class":169,"line":10089},[167,22550,7419],{"class":191},[167,22552,22553],{"class":173}," (effectFn.options.scheduler) {\n",[167,22555,22556,22559,22562],{"class":169,"line":10098},[167,22557,22558],{"class":173},"      effectFn.options.",[167,22560,22561],{"class":181},"scheduler",[167,22563,21980],{"class":173},[167,22565,22566,22568,22571],{"class":169,"line":10103},[167,22567,7363],{"class":173},[167,22569,22570],{"class":191},"else",[167,22572,1905],{"class":173},[167,22574,22575,22578],{"class":169,"line":10112},[167,22576,22577],{"class":181},"      effectFn",[167,22579,2917],{"class":173},[167,22581,22582],{"class":169,"line":10129},[167,22583,4049],{"class":173},[167,22585,22586],{"class":169,"line":10138},[167,22587,8347],{"class":173},[167,22589,22590],{"class":169,"line":10152},[167,22591,276],{"class":173},[167,22593,22594],{"class":169,"line":10161},[167,22595,209],{"emptyLinePlaceholder":208},[167,22597,22598,22600,22602,22604,22607],{"class":169,"line":10167},[167,22599,246],{"class":191},[167,22601,846],{"class":181},[167,22603,229],{"class":173},[167,22605,22606],{"class":254},"obj",[167,22608,258],{"class":173},[167,22610,22611,22613,22615,22618],{"class":169,"line":10177},[167,22612,1539],{"class":191},[167,22614,4224],{"class":191},[167,22616,22617],{"class":181}," Proxy",[167,22619,22620],{"class":173},"(obj, {\n",[167,22622,22623,22626,22628,22630,22632,22634,22636,22639],{"class":169,"line":10186},[167,22624,22625],{"class":181},"    get",[167,22627,229],{"class":173},[167,22629,7839],{"class":254},[167,22631,1025],{"class":173},[167,22633,7845],{"class":254},[167,22635,1025],{"class":173},[167,22637,22638],{"class":254},"receiver",[167,22640,258],{"class":173},[167,22642,22643,22646],{"class":169,"line":10191},[167,22644,22645],{"class":181},"      track",[167,22647,22648],{"class":173},"(target, key)\n",[167,22650,22651,22653,22656,22658],{"class":169,"line":10214},[167,22652,8767],{"class":191},[167,22654,22655],{"class":173}," Reflect.",[167,22657,4233],{"class":181},[167,22659,22660],{"class":173},"(target, key, receiver)\n",[167,22662,22663],{"class":169,"line":10228},[167,22664,755],{"class":173},[167,22666,22667,22670,22672,22674,22676,22678,22680,22682,22684,22686],{"class":169,"line":10241},[167,22668,22669],{"class":181},"    set",[167,22671,229],{"class":173},[167,22673,7839],{"class":254},[167,22675,1025],{"class":173},[167,22677,7845],{"class":254},[167,22679,1025],{"class":173},[167,22681,2219],{"class":254},[167,22683,1025],{"class":173},[167,22685,22638],{"class":254},[167,22687,258],{"class":173},[167,22689,22690,22692,22695,22697],{"class":169,"line":10256},[167,22691,4435],{"class":191},[167,22693,22694],{"class":219}," oldValue",[167,22696,223],{"class":191},[167,22698,22699],{"class":173}," target[key]\n",[167,22701,22702,22704,22706,22708,22710,22712],{"class":169,"line":10283},[167,22703,4435],{"class":191},[167,22705,22072],{"class":219},[167,22707,223],{"class":191},[167,22709,22655],{"class":173},[167,22711,7856],{"class":181},[167,22713,22714],{"class":173},"(target, key, value, receiver)\n",[167,22716,22717,22719,22721,22723,22726,22729],{"class":169,"line":10292},[167,22718,7261],{"class":191},[167,22720,2526],{"class":173},[167,22722,6641],{"class":191},[167,22724,22725],{"class":173},"Object.",[167,22727,22728],{"class":181},"is",[167,22730,22731],{"class":173},"(oldValue, value)) {\n",[167,22733,22734,22737],{"class":169,"line":10297},[167,22735,22736],{"class":181},"        trigger",[167,22738,22648],{"class":173},[167,22740,22741],{"class":169,"line":10317},[167,22742,7287],{"class":173},[167,22744,22745,22747],{"class":169,"line":10326},[167,22746,8767],{"class":191},[167,22748,22118],{"class":173},[167,22750,22751],{"class":169,"line":10981},[167,22752,4049],{"class":173},[167,22754,22755],{"class":169,"line":10994},[167,22756,8347],{"class":173},[167,22758,22759],{"class":169,"line":11007},[167,22760,276],{"class":173},[154,22762,22765],{"className":2879,"code":22763,"filename":22764,"language":2882,"meta":163,"style":163},"const state = reactive({ count: 0, ok: true })\n\neffect(() => {\n  console.log(\"render ->\", state.ok ? state.count : \"hidden\")\n})\n\nstate.count++\nstate.ok = false\n","demo.js",[87,22766,22767,22790,22794,22805,22831,22835,22839,22846],{"__ignoreMap":163},[167,22768,22769,22771,22774,22776,22778,22781,22783,22786,22788],{"class":169,"line":170},[167,22770,216],{"class":191},[167,22772,22773],{"class":219}," state",[167,22775,223],{"class":191},[167,22777,846],{"class":181},[167,22779,22780],{"class":173},"({ count: ",[167,22782,1960],{"class":219},[167,22784,22785],{"class":173},", ok: ",[167,22787,390],{"class":219},[167,22789,2242],{"class":173},[167,22791,22792],{"class":169,"line":188},[167,22793,209],{"emptyLinePlaceholder":208},[167,22795,22796,22799,22801,22803],{"class":169,"line":205},[167,22797,22798],{"class":181},"effect",[167,22800,1493],{"class":173},[167,22802,639],{"class":191},[167,22804,1905],{"class":173},[167,22806,22807,22809,22811,22813,22816,22819,22821,22824,22826,22829],{"class":169,"line":160},[167,22808,2608],{"class":173},[167,22810,2611],{"class":181},[167,22812,229],{"class":173},[167,22814,22815],{"class":201},"\"render ->\"",[167,22817,22818],{"class":173},", state.ok ",[167,22820,8316],{"class":191},[167,22822,22823],{"class":173}," state.count ",[167,22825,583],{"class":191},[167,22827,22828],{"class":201}," \"hidden\"",[167,22830,235],{"class":173},[167,22832,22833],{"class":169,"line":238},[167,22834,403],{"class":173},[167,22836,22837],{"class":169,"line":243},[167,22838,209],{"emptyLinePlaceholder":208},[167,22840,22841,22844],{"class":169,"line":261},[167,22842,22843],{"class":173},"state.count",[167,22845,3126],{"class":191},[167,22847,22848,22851,22853],{"class":169,"line":273},[167,22849,22850],{"class":173},"state.ok ",[167,22852,267],{"class":191},[167,22854,5593],{"class":219},[3087,22856,22858],{"id":22857},"paso-a-paso-de-lo-que-ocurre","Paso a paso de lo que ocurre",[3035,22860,22861,22866,22884,22892,22902],{},[36,22862,22863,22865],{},[87,22864,22798],{}," ejecuta la función de render y la marca como activa.",[36,22867,22868,22869,1028,22872,22874,22875,22877,22878,22881,22882,1679],{},"Al leer ",[87,22870,22871],{},"state.ok",[87,22873,22843],{},", el ",[87,22876,4233],{}," del ",[87,22879,22880],{},"Proxy"," dispara ",[87,22883,21824],{},[36,22885,22886,22888,22889,1679],{},[87,22887,21824],{}," guarda dependencias en ",[87,22890,22891],{},"WeakMap → Map → Set",[36,22893,22894,22895,22874,22897,22881,22899,1679],{},"Cuando cambias ",[87,22896,22843],{},[87,22898,7856],{},[87,22900,22901],{},"trigger",[36,22903,22904,22906,22907,22909],{},[87,22905,22901],{}," busca el ",[87,22908,21730],{}," de esa key y re-ejecuta solo los efectos dependientes.",[15,22911,22912],{},"Este patrón es exactamente el núcleo del sistema de reactividad de Vue 3.",[22,22914,22916],{"id":22915},"conexión-con-vue-real","Conexión con Vue real",[3087,22918,22920,22922,22923],{"id":22919},"reactive-usa-proxy",[87,22921,18243],{}," usa ",[87,22924,22880],{},[15,22926,22927,22929,22930,22932,22933,1025,22935,1025,22937,1025,22939,22942],{},[87,22928,18243],{}," no “magia” valores: crea un ",[87,22931,22880],{}," que intercepta operaciones (",[87,22934,4233],{},[87,22936,7856],{},[87,22938,22358],{},[87,22940,22941],{},"deleteProperty",", iteración, etc.).",[33,22944,22945,22950,22955],{},[36,22946,6304,22947,22949],{},[87,22948,4233],{}," se hace tracking.",[36,22951,6304,22952,22954],{},[87,22953,7856],{}," se hace trigger.",[36,22956,22957,22958,1025,22960,1025,22962,1025,22964,22967],{},"Para arrays y colecciones (",[87,22959,21722],{},[87,22961,21730],{},[87,22963,21714],{},[87,22965,22966],{},"WeakSet",") existen manejadores específicos.",[3087,22969,22971,22973],{"id":22970},"ref-envuelve-primitivos",[87,22972,2085],{}," envuelve primitivos",[15,22975,22976,22977,1679],{},"Como un primitivo no puede proxificarse por propiedad, Vue usa un objeto contenedor con getter\u002Fsetter en ",[87,22978,22979],{},".value",[15,22981,22982],{},"Simplificación conceptual:",[154,22984,22987],{"className":2879,"code":22985,"filename":22986,"language":2882,"meta":163,"style":163},"function ref(raw) {\n  const box = {\n    get value() {\n      track(box, \"value\")\n      return raw\n    },\n    set value(newValue) {\n      if (!Object.is(raw, newValue)) {\n        raw = newValue\n        trigger(box, \"value\")\n      }\n    }\n  }\n  return box\n}\n","ref.js",[87,22988,22989,23002,23013,23022,23034,23041,23045,23057,23072,23082,23092,23096,23100,23104,23111],{"__ignoreMap":163},[167,22990,22991,22993,22995,22997,23000],{"class":169,"line":170},[167,22992,246],{"class":191},[167,22994,226],{"class":181},[167,22996,229],{"class":173},[167,22998,22999],{"class":254},"raw",[167,23001,258],{"class":173},[167,23003,23004,23006,23009,23011],{"class":169,"line":188},[167,23005,1443],{"class":191},[167,23007,23008],{"class":219}," box",[167,23010,223],{"class":191},[167,23012,1905],{"class":173},[167,23014,23015,23017,23020],{"class":169,"line":205},[167,23016,22625],{"class":191},[167,23018,23019],{"class":181}," value",[167,23021,763],{"class":173},[167,23023,23024,23026,23029,23032],{"class":169,"line":160},[167,23025,22645],{"class":181},[167,23027,23028],{"class":173},"(box, ",[167,23030,23031],{"class":201},"\"value\"",[167,23033,235],{"class":173},[167,23035,23036,23038],{"class":169,"line":238},[167,23037,8767],{"class":191},[167,23039,23040],{"class":173}," raw\n",[167,23042,23043],{"class":169,"line":243},[167,23044,755],{"class":173},[167,23046,23047,23049,23051,23053,23055],{"class":169,"line":261},[167,23048,22669],{"class":191},[167,23050,23019],{"class":181},[167,23052,229],{"class":173},[167,23054,7868],{"class":254},[167,23056,258],{"class":173},[167,23058,23059,23061,23063,23065,23067,23069],{"class":169,"line":273},[167,23060,7261],{"class":191},[167,23062,2526],{"class":173},[167,23064,6641],{"class":191},[167,23066,22725],{"class":173},[167,23068,22728],{"class":181},[167,23070,23071],{"class":173},"(raw, newValue)) {\n",[167,23073,23074,23077,23079],{"class":169,"line":279},[167,23075,23076],{"class":173},"        raw ",[167,23078,267],{"class":191},[167,23080,23081],{"class":173}," newValue\n",[167,23083,23084,23086,23088,23090],{"class":169,"line":289},[167,23085,22736],{"class":181},[167,23087,23028],{"class":173},[167,23089,23031],{"class":201},[167,23091,235],{"class":173},[167,23093,23094],{"class":169,"line":294},[167,23095,7287],{"class":173},[167,23097,23098],{"class":169,"line":304},[167,23099,4049],{"class":173},[167,23101,23102],{"class":169,"line":313},[167,23103,3492],{"class":173},[167,23105,23106,23108],{"class":169,"line":161},[167,23107,1539],{"class":191},[167,23109,23110],{"class":173}," box\n",[167,23112,23113],{"class":169,"line":335},[167,23114,276],{"class":173},[15,23116,23117],{},"En Vue real:",[33,23119,23120,23126],{},[36,23121,23122,23123,23125],{},"Los objetos pasados a ",[87,23124,2085],{}," se convierten internamente en reactivos.",[36,23127,23128,23129,23131],{},"En templates, ",[87,23130,22979],{}," se desempaqueta automáticamente (ref unwrapping).",[3087,23133,23135,23137,23138],{"id":23134},"computed-se-construye-sobre-effect",[87,23136,1661],{}," se construye sobre ",[87,23139,22798],{},[15,23141,23142,23144,23145,23147],{},[87,23143,1661],{}," se implementa usando un ",[87,23146,22798],{}," lazy:",[3035,23149,23150,23155,23158,23161],{},[36,23151,23152,23153,1679],{},"No se evalúa hasta que alguien lee ",[87,23154,22979],{},[36,23156,23157],{},"Cachea el resultado.",[36,23159,23160],{},"Se invalida cuando cambia una dependencia interna.",[36,23162,23163,23164,21857,23166,23168],{},"Expone su propio ",[87,23165,21824],{},[87,23167,22901],{}," para quienes dependen del computed.",[15,23170,23171],{},"Internamente, combina:",[33,23173,23174,23180,23186],{},[36,23175,23176,23177],{},"Un efecto con ",[87,23178,23179],{},"lazy: true",[36,23181,23182,23183],{},"Un flag ",[87,23184,23185],{},"dirty",[36,23187,23188],{},"Un scheduler que marca como inválido en lugar de recalcular inmediatamente",[3087,23190,23192],{"id":23191},"scheduler-y-batching","Scheduler y batching",[15,23194,23195],{},"Vue evita trabajo redundante dentro del mismo tick:",[3035,23197,23198,23201,23204],{},[36,23199,23200],{},"En lugar de ejecutar cada efecto inmediatamente, puede encolarlo.",[36,23202,23203],{},"Deduplica jobs repetidos.",[36,23205,23206],{},"Hace flush en una microtask.",[15,23208,23209],{},"Mini scheduler conceptual:",[154,23211,23214],{"className":2879,"code":23212,"filename":23213,"language":2882,"meta":163,"style":163},"const queue = new Set()\nlet flushing = false\nconst p = Promise.resolve()\n\nfunction scheduler(job) {\n  queue.add(job)\n  if (flushing) return\n  flushing = true\n  p.then(() => {\n    queue.forEach((j) => j())\n    queue.clear()\n    flushing = false\n  })\n}\n","scheduler.js",[87,23215,23216,23231,23242,23261,23265,23279,23289,23298,23307,23320,23341,23350,23359,23363],{"__ignoreMap":163},[167,23217,23218,23220,23223,23225,23227,23229],{"class":169,"line":170},[167,23219,216],{"class":191},[167,23221,23222],{"class":219}," queue",[167,23224,223],{"class":191},[167,23226,4224],{"class":191},[167,23228,22324],{"class":181},[167,23230,2917],{"class":173},[167,23232,23233,23235,23238,23240],{"class":169,"line":188},[167,23234,13948],{"class":191},[167,23236,23237],{"class":173}," flushing ",[167,23239,267],{"class":191},[167,23241,5593],{"class":219},[167,23243,23244,23246,23249,23251,23254,23256,23259],{"class":169,"line":205},[167,23245,216],{"class":191},[167,23247,23248],{"class":219}," p",[167,23250,223],{"class":191},[167,23252,23253],{"class":219}," Promise",[167,23255,1679],{"class":173},[167,23257,23258],{"class":181},"resolve",[167,23260,2917],{"class":173},[167,23262,23263],{"class":169,"line":160},[167,23264,209],{"emptyLinePlaceholder":208},[167,23266,23267,23269,23272,23274,23277],{"class":169,"line":238},[167,23268,246],{"class":191},[167,23270,23271],{"class":181}," scheduler",[167,23273,229],{"class":173},[167,23275,23276],{"class":254},"job",[167,23278,258],{"class":173},[167,23280,23281,23284,23286],{"class":169,"line":243},[167,23282,23283],{"class":173},"  queue.",[167,23285,7859],{"class":181},[167,23287,23288],{"class":173},"(job)\n",[167,23290,23291,23293,23296],{"class":169,"line":261},[167,23292,2544],{"class":191},[167,23294,23295],{"class":173}," (flushing) ",[167,23297,2556],{"class":191},[167,23299,23300,23303,23305],{"class":169,"line":273},[167,23301,23302],{"class":173},"  flushing ",[167,23304,267],{"class":191},[167,23306,3487],{"class":219},[167,23308,23309,23312,23314,23316,23318],{"class":169,"line":279},[167,23310,23311],{"class":173},"  p.",[167,23313,18179],{"class":181},[167,23315,1493],{"class":173},[167,23317,639],{"class":191},[167,23319,1905],{"class":173},[167,23321,23322,23325,23327,23329,23332,23334,23336,23339],{"class":169,"line":289},[167,23323,23324],{"class":173},"    queue.",[167,23326,22495],{"class":181},[167,23328,1918],{"class":173},[167,23330,23331],{"class":254},"j",[167,23333,693],{"class":173},[167,23335,639],{"class":191},[167,23337,23338],{"class":181}," j",[167,23340,2509],{"class":173},[167,23342,23343,23345,23348],{"class":169,"line":294},[167,23344,23324],{"class":173},[167,23346,23347],{"class":181},"clear",[167,23349,2917],{"class":173},[167,23351,23352,23355,23357],{"class":169,"line":304},[167,23353,23354],{"class":173},"    flushing ",[167,23356,267],{"class":191},[167,23358,5593],{"class":219},[167,23360,23361],{"class":169,"line":313},[167,23362,8347],{"class":173},[167,23364,23365],{"class":169,"line":161},[167,23366,276],{"class":173},[15,23368,23369],{},"Esto explica por qué 10 mutaciones síncronas pueden producir un único render final.",[22,23371,3085],{"id":3084},[3087,23373,23375],{"id":23374},"la-desestructuración-rompe-la-reactividad","La desestructuración rompe la reactividad",[154,23377,23380],{"className":2879,"code":23378,"filename":23379,"language":2882,"meta":163,"style":163},"const state = reactive({ count: 0 })\nconst { count } = state \u002F\u002F count deja de estar enlazado\n","destructuring-breaks-reactivity.js",[87,23381,23382,23398],{"__ignoreMap":163},[167,23383,23384,23386,23388,23390,23392,23394,23396],{"class":169,"line":170},[167,23385,216],{"class":191},[167,23387,22773],{"class":219},[167,23389,223],{"class":191},[167,23391,846],{"class":181},[167,23393,22780],{"class":173},[167,23395,1960],{"class":219},[167,23397,2242],{"class":173},[167,23399,23400,23402,23404,23407,23410,23412,23415],{"class":169,"line":188},[167,23401,216],{"class":191},[167,23403,577],{"class":173},[167,23405,23406],{"class":219},"count",[167,23408,23409],{"class":173}," } ",[167,23411,267],{"class":191},[167,23413,23414],{"class":173}," state ",[167,23416,23417],{"class":18662},"\u002F\u002F count deja de estar enlazado\n",[15,23419,23420],{},"Corrección:",[33,23422,23423,23428],{},[36,23424,3180,23425],{},[87,23426,23427],{},"toRef(state, \"count\")",[36,23429,23430,23431,1679],{},"Acceder como ",[87,23432,22843],{},[3087,23434,23436],{"id":23435},"mutaciones-fuera-del-proxy","Mutaciones fuera del proxy",[15,23438,23439,23440,23442,23443,23445,23446,1679],{},"Si mutas una referencia “raw” fuera del ",[87,23441,22880],{},", Vue no puede disparar ",[87,23444,22901],{},".\nTodo acceso\u002Fescritura que deba ser reactivo debe pasar por el proxy o por ",[87,23447,22979],{},[3087,23449,23451,1662,23454],{"id":23450},"shallowref-vs-ref",[87,23452,23453],{},"shallowRef",[87,23455,2085],{},[15,23457,23458,23460,23461,23463],{},[87,23459,23453],{}," solo rastrea el reemplazo de ",[87,23462,22979],{},", no mutaciones profundas.",[154,23465,23468],{"className":2879,"code":23466,"filename":23467,"language":2882,"meta":163,"style":163},"const user = shallowRef({ name: \"Ana\" })\nuser.value.name = \"Eva\" \u002F\u002F no dispara por sí solo\nuser.value = { ...user.value, name: \"Eva\" } \u002F\u002F sí dispara\n","shallow-ref-example.js",[87,23469,23470,23490,23503],{"__ignoreMap":163},[167,23471,23472,23474,23477,23479,23482,23485,23488],{"class":169,"line":170},[167,23473,216],{"class":191},[167,23475,23476],{"class":219}," user",[167,23478,223],{"class":191},[167,23480,23481],{"class":181}," shallowRef",[167,23483,23484],{"class":173},"({ name: ",[167,23486,23487],{"class":201},"\"Ana\"",[167,23489,2242],{"class":173},[167,23491,23492,23495,23497,23500],{"class":169,"line":188},[167,23493,23494],{"class":173},"user.value.name ",[167,23496,267],{"class":191},[167,23498,23499],{"class":201}," \"Eva\"",[167,23501,23502],{"class":18662}," \u002F\u002F no dispara por sí solo\n",[167,23504,23505,23508,23510,23512,23515,23518,23521,23523],{"class":169,"line":205},[167,23506,23507],{"class":173},"user.value ",[167,23509,267],{"class":191},[167,23511,577],{"class":173},[167,23513,23514],{"class":191},"...",[167,23516,23517],{"class":173},"user.value, name: ",[167,23519,23520],{"class":201},"\"Eva\"",[167,23522,23409],{"class":173},[167,23524,23525],{"class":18662},"\u002F\u002F sí dispara\n",[15,23527,23528],{},"Es útil cuando:",[33,23530,23531,23534,23537],{},[36,23532,23533],{},"Manejas estructuras grandes,",[36,23535,23536],{},"Trabajas con librerías externas,",[36,23538,23539],{},"Quieres controlar manualmente cuándo invalidar.",[3087,23541,23543],{"id":23542},"effects-que-se-ejecutan-más-de-lo-esperado","Effects que se ejecutan más de lo esperado",[15,23545,23546],{},"Causas típicas:",[33,23548,23549,23555,23560,23568],{},[36,23550,23551,23552,23554],{},"Leer demasiadas fuentes dentro de un mismo ",[87,23553,1668],{},";",[36,23556,23557,23558,23554],{},"Crear objetos nuevos en cada evaluación de ",[87,23559,1661],{},[36,23561,3180,23562,23564,23565,23567],{},[87,23563,1668],{}," cuando ",[87,23566,1661],{}," era suficiente;",[36,23569,23570],{},"Mutar estado dentro de un efecto sin aislar dependencias.",[22,23572,23574],{"id":23573},"conclusión","Conclusión",[15,23576,23577],{},"Cuando entiendes el motor interno de Vue 3, cambia tu forma de construir UI:",[33,23579,23580,23583,23586],{},[36,23581,23582],{},"Pasas de ensayo-error a diagnóstico por dependencias;",[36,23584,23585],{},"Distingues entre problema de tracking y problema de rendering;",[36,23587,23588],{},"Diseñas estado para reducir renders y costo computacional.",[15,23590,23591],{},"En aplicaciones grandes, esto impacta directamente en:",[33,23593,23594,23597,23600],{},[36,23595,23596],{},"Rendimiento estable bajo carga;",[36,23598,23599],{},"Menos bugs intermitentes de sincronización;",[36,23601,23602,23603,1025,23605,1025,23607,1025,23609,1025,23611,23613],{},"Decisiones más finas sobre ",[87,23604,2085],{},[87,23606,18243],{},[87,23608,23453],{},[87,23610,1661],{},[87,23612,1665],{}," y scheduling.",[5367,23615,23616],{},[15,23617,23618],{},"La reactividad de Vue 3 no es magia. Es un grafo de dependencias bien diseñado y un scheduler eficiente. Entenderlo te permite escribir código más predecible, más performante y mucho más fácil de depurar.",[924,23620,23621],{},"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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":163,"searchDepth":188,"depth":188,"links":23623},[23624,23625,23631,23634,23643,23650],{"id":21636,"depth":188,"text":21637},{"id":21668,"depth":188,"text":21669,"children":23626},[23627,23628,23629],{"id":21672,"depth":205,"text":21673},{"id":21703,"depth":205,"text":21704},{"id":21786,"depth":205,"text":23630},"activeEffect: la pieza crítica",{"id":21850,"depth":188,"text":21851,"children":23632},[23633],{"id":22857,"depth":205,"text":22858},{"id":22915,"depth":188,"text":22916,"children":23635},[23636,23638,23640,23642],{"id":22919,"depth":205,"text":23637},"reactive usa Proxy",{"id":22970,"depth":205,"text":23639},"ref envuelve primitivos",{"id":23134,"depth":205,"text":23641},"computed se construye sobre effect",{"id":23191,"depth":205,"text":23192},{"id":3084,"depth":188,"text":3085,"children":23644},[23645,23646,23647,23649],{"id":23374,"depth":205,"text":23375},{"id":23435,"depth":205,"text":23436},{"id":23450,"depth":205,"text":23648},"shallowRef vs ref",{"id":23542,"depth":205,"text":23543},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772497884\u002Fvue-3-reactivity-internals_hhru1s.png","2026-03-03","Disección técnica del motor reactivo de Vue 3: dependency tracking, estructura WeakMap->Map->Set, activeEffect, scheduler, batching y errores reales de arquitectura.",{"updatedAt":23655,"coverCaption":23656,"author":946,"keywords":23657},"2026-03-02T20:00:00-05:00","Portada temporal: reemplazar por arte final de TODOvue",[951,3259,23658,22561,23659,1661],"dependency tracking","batching","\u002Fblog\u002Fvue-3-reactivity-internals.es",[23662],{"headline":21616,"author":23663,"datePublished":23655,"@type":961},{"name":946,"@type":959},{"title":21616,"description":23653},"blog\u002Fvue-3-reactivity-internals.es",[23667,23668,23669,23670],{"tag":3269,"color":3270},{"tag":953,"color":971},{"tag":3273,"color":3274},{"tag":7730,"color":7731},"rGnK0yeWSoPTGptH72z9OmVf4RB34BbFjfhRirLS9g8",{"id":23673,"title":23674,"body":23675,"cover":26445,"coverAlt":26446,"date":26447,"description":26448,"draft":940,"extension":941,"lab":942,"locale":943,"meta":26449,"navigation":208,"path":26455,"schemaOrg":26456,"seo":26459,"series":26460,"seriesDescription":26461,"seriesOrder":294,"seriesTitle":26462,"slug":942,"stem":26463,"tags":26464,"__hash__":26474},"blog\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es.md","Directivas en Vue: Directivas personalizadas",{"type":8,"value":23676,"toc":26427},[23677,23681,23685,23692,23720,23730,23732,23738,23741,23758,23761,23771,23778,23817,23827,23831,23851,23855,23875,23877,23981,23983,24001,24007,24676,25135,25155,25159,25165,25320,25414,25449,25455,25950,26278,26372,26385,26387,26424],[11,23678,23680],{"id":23679},"directivas-personalizadas-en-vue-3","Directivas personalizadas en Vue 3",[22,23682,23684],{"id":23683},"por-qué-es-importante","Por qué es importante",[15,23686,23687,23688,23691],{},"Las directivas personalizadas te permiten encapsular ",[3933,23689,23690],{},"manipulación imperativa de DOM"," que no encaja bien en un componente o en un composable “puro”. Son especialmente útiles para comportamientos de bajo nivel como:",[33,23693,23694,23700,23706,23712],{},[36,23695,23696,23697,6219],{},"Foco automático (",[87,23698,23699],{},"v-autofocus",[36,23701,23702,23703,6219],{},"Atajos de teclado (",[87,23704,23705],{},"v-hotkey",[36,23707,23708,23709,6219],{},"Clic fuera para cerrar (",[87,23710,23711],{},"v-click-outside",[36,23713,23714,23715,1025,23717,23719],{},"Integración con API del navegador o librerías no reactivas (por ejemplo, ",[87,23716,13761],{},[87,23718,13586],{},", tooltips)",[15,23721,23722,23723,1025,23726,23729],{},"Si no las diseñas bien, es fácil terminar con ",[3933,23724,23725],{},"listeners duplicados",[3933,23727,23728],{},"fugas de memoria"," o lógica duplicada en múltiples vistas.",[22,23731,6257],{"id":6256},[15,23733,23734,23735,1679],{},"Una directiva personalizada es un objeto (o una función abreviada) con hooks que Vue ejecuta sobre un ",[3933,23736,23737],{},"elemento real del DOM",[15,23739,23740],{},"En Vue 3, una directiva puede exponer estos hooks (los más usados en la práctica):",[33,23742,23743,23748,23753],{},[36,23744,23745,23747],{},[87,23746,6393],{},": El elemento ya está en el DOM (ideal para agregar listeners u observers).",[36,23749,23750,23752],{},[87,23751,15037],{},": El componente se actualizó y necesitas refrescar el comportamiento.",[36,23754,23755,23757],{},[87,23756,11276],{},": Limpieza de listeners, timers, observers, etc.",[15,23759,23760],{},"Y también existen hooks “before-*” que son útiles en algunos casos:",[33,23762,23763],{},[36,23764,23765,1025,23767,1025,23769],{},[87,23766,16604],{},[87,23768,15034],{},[87,23770,13472],{},[15,23772,23773,23774,23777],{},"El ",[87,23775,23776],{},"binding"," te da acceso al valor recibido, argumento y modificadores:",[33,23779,23780,23789,23799,23808],{},[36,23781,23782,23785,23786,4270],{},[87,23783,23784],{},"binding.value",": Valor actual (",[87,23787,23788],{},"v-mi-directiva=\"valor\"",[36,23790,23791,23794,23795,21857,23797,4270],{},[87,23792,23793],{},"binding.oldValue",": Valor anterior (solo disponible en ",[87,23796,15034],{},[87,23798,15037],{},[36,23800,23801,23804,23805,4270],{},[87,23802,23803],{},"binding.arg",": Argumento (",[87,23806,23807],{},"v-mi-directiva:delay=\"300\"",[36,23809,23810,23813,23814,4270],{},[87,23811,23812],{},"binding.modifiers",": Modificadores (",[87,23815,23816],{},"v-mi-directiva.once.capture",[15,23818,23819,23820,23823,23824,1679],{},"Regla práctica: usa directivas para ",[3933,23821,23822],{},"comportamiento del elemento",", no para ",[3933,23825,23826],{},"estado de negocio",[22,23828,23830],{"id":23829},"cuándo-usar-directivas-personalizadas","Cuándo usar directivas personalizadas",[3035,23832,23833,23836,23844],{},[36,23834,23835],{},"Cuando necesitas lógica imperativa de DOM reutilizable en varios componentes.",[36,23837,23838,23839,1025,23841,23843],{},"Cuando integras APIs no reactivas (",[87,23840,13761],{},[87,23842,13586],{},", tooltips de terceros).",[36,23845,23846,23847,1025,23849,4270],{},"Cuando quieres un contrato declarativo en template para un comportamiento concreto (",[87,23848,23699],{},[87,23850,23711],{},[22,23852,23854],{"id":23853},"cuándo-evitarlas","Cuándo evitarlas",[3035,23856,23857,23860,23872],{},[36,23858,23859],{},"Cuando la solución real es un componente (estructura visual + estado + eventos).",[36,23861,23862,23863,1025,23866,1025,23869,4270],{},"Cuando la lógica se resuelve con bindings o directivas nativas (",[87,23864,23865],{},"v-model",[87,23867,23868],{},"v-bind",[87,23870,23871],{},"v-on",[36,23873,23874],{},"Cuando intentas usar una directiva para coordinar estado global o flujos de datos complejos.",[22,23876,3085],{"id":3084},[3035,23878,23879,23899,23920,23940,23961],{},[36,23880,23881,23886],{},[3933,23882,23883,23884,1679],{},"No limpiar recursos en ",[87,23885,11276],{},[33,23887,23888,23894],{},[36,23889,23890,23891,23893],{},"Por qué pasa: se agrega un listener en ",[87,23892,6393],{}," y se olvida removerlo.",[36,23895,23896,23897,1679],{},"Solución: guarda referencias (en el elemento o en un closure controlado) y limpia siempre en ",[87,23898,11276],{},[36,23900,23901,23904],{},[3933,23902,23903],{},"Acoplar la directiva a un caso único.",[33,23905,23906,23909],{},[36,23907,23908],{},"Por qué pasa: nombres genéricos con lógica demasiado específica.",[36,23910,23911,23912,1025,23914,1028,23917,1679],{},"Solución: define un contrato claro con ",[87,23913,2219],{},[87,23915,23916],{},"arg",[87,23918,23919],{},"modifiers",[36,23921,23922,23925],{},[3933,23923,23924],{},"Asumir que una directiva aplicada sobre un componente “siempre” afecta un único nodo DOM.",[33,23926,23927,23930],{},[36,23928,23929],{},"Por qué pasa: se presupone un único root estable o que el componente “forwardea” atributos\u002Fdirectivas como esperamos.",[36,23931,23932,23933,1025,23935,1025,23937,23939],{},"Solución: para comportamientos de bajo nivel, prioriza aplicarla a elementos HTML concretos (",[87,23934,2650],{},[87,23936,1242],{},[87,23938,507],{},"). Si la aplicas sobre un componente, asegúrate de que ese componente tenga un root claro y que no rompa el forwarding (casos como múltiples roots o ciertas configuraciones pueden sorprender).",[36,23941,23942,23945],{},[3933,23943,23944],{},"Capturar un callback y no actualizarlo.",[33,23946,23947,23956],{},[36,23948,23949,23950,23952,23953,23955],{},"Por qué pasa: se registra un handler en ",[87,23951,6393],{}," que cierra sobre ",[87,23954,23784],{}," inicial. Si el callback cambia, el listener sigue llamando al antiguo.",[36,23957,23958,23959,1679],{},"Solución: guarda el callback “vigente” en el elemento y actualízalo en ",[87,23960,15037],{},[36,23962,23963,23968],{},[3933,23964,23965,23966,1679],{},"Ejecutar trabajo pesado en cada ",[87,23967,15037],{},[33,23969,23970,23973],{},[36,23971,23972],{},"Por qué pasa: falta comparación entre valor anterior y actual.",[36,23974,23975,23976,1028,23978,23980],{},"Solución: salir temprano cuando corresponda (por ejemplo, comparando ",[87,23977,23784],{},[87,23979,23793],{}," cuando aplique).",[22,23982,7997],{"id":7996},[33,23984,23985,23990,23995],{},[36,23986,23987,23989],{},[87,23988,23699],{},": enfoca un input al montar.",[36,23991,23992,23994],{},[87,23993,23711],{},": cierra menú o modal al hacer clic fuera.",[36,23996,23997,24000],{},[87,23998,23999],{},"v-intersect",": dispara callback cuando un bloque entra en el viewport.",[3087,24002,24004,24006],{"id":24003},"v-click-outside-con-callback-actualizable",[87,24005,23711],{}," (con callback actualizable)",[154,24008,24010],{"className":156,"code":24009,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport type { Directive } from \"vue\";\nimport { ref } from \"vue\";\n\ntype ClickOutsideHandler = (event: MouseEvent) => void;\n\ntype ElWithClickOutside = HTMLElement & {\n  __clickOutsideHandler__?: (event: MouseEvent) => void;\n  __clickOutsideCallback__?: ClickOutsideHandler;\n};\n\nconst isOpen = ref(false);\n\nconst vClickOutside: Directive\u003CElWithClickOutside, ClickOutsideHandler> = {\n  mounted(el, binding) {\n    if (typeof binding.value !== \"function\") return;\n\n    \u002F\u002F Guardamos el callback vigente (importante si cambia con el tiempo)\n    el.__clickOutsideCallback__ = binding.value;\n\n    const handler = (event: MouseEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n\n      \u002F\u002F Si el click es fuera del elemento, llamamos al callback actual\n      if (!el.contains(target)) {\n        el.__clickOutsideCallback__?.(event);\n      }\n    };\n\n    el.__clickOutsideHandler__ = handler;\n\n    \u002F\u002F Capture ayuda con overlays \u002F stopPropagation dentro del dropdown\n    document.addEventListener(\"click\", handler, true);\n  },\n\n  updated(el, binding) {\n    \u002F\u002F Mantén el callback al día si cambió\n    if (typeof binding.value === \"function\") {\n      el.__clickOutsideCallback__ = binding.value;\n    }\n  },\n\n  unmounted(el) {\n    if (el.__clickOutsideHandler__) {\n      document.removeEventListener(\"click\", el.__clickOutsideHandler__, true);\n    }\n    delete el.__clickOutsideHandler__;\n    delete el.__clickOutsideCallback__;\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dropdown-demo\">\n    \u003Cbutton type=\"button\" @click=\"isOpen = !isOpen\">Alternar menú\u003C\u002Fbutton>\n\n    \u003Cdiv v-if=\"isOpen\" v-click-outside=\"() => (isOpen = false)\">\n      \u003Cp>Panel abierto\u003C\u002Fp>\n      \u003Cp>Haz click fuera para cerrarlo.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,24011,24012,24028,24045,24057,24061,24088,24092,24109,24133,24144,24149,24153,24170,24174,24203,24218,24241,24245,24250,24260,24264,24287,24310,24325,24329,24334,24351,24362,24366,24371,24375,24385,24389,24394,24413,24417,24421,24435,24440,24456,24465,24469,24473,24477,24487,24494,24512,24516,24524,24531,24535,24539,24547,24551,24559,24574,24600,24604,24626,24639,24652,24660,24668],{"__ignoreMap":163},[167,24013,24014,24016,24018,24020,24022,24024,24026],{"class":169,"line":170},[167,24015,174],{"class":173},[167,24017,178],{"class":177},[167,24019,182],{"class":181},[167,24021,1050],{"class":181},[167,24023,267],{"class":173},[167,24025,1055],{"class":201},[167,24027,185],{"class":173},[167,24029,24030,24032,24034,24037,24039,24042],{"class":169,"line":188},[167,24031,192],{"class":191},[167,24033,1174],{"class":191},[167,24035,24036],{"class":173}," { Directive } ",[167,24038,198],{"class":191},[167,24040,24041],{"class":201}," \"vue\"",[167,24043,24044],{"class":173},";\n",[167,24046,24047,24049,24051,24053,24055],{"class":169,"line":205},[167,24048,192],{"class":191},[167,24050,195],{"class":173},[167,24052,198],{"class":191},[167,24054,24041],{"class":201},[167,24056,24044],{"class":173},[167,24058,24059],{"class":169,"line":160},[167,24060,209],{"emptyLinePlaceholder":208},[167,24062,24063,24065,24068,24070,24072,24074,24076,24079,24081,24083,24086],{"class":169,"line":238},[167,24064,569],{"class":191},[167,24066,24067],{"class":181}," ClickOutsideHandler",[167,24069,223],{"class":191},[167,24071,2526],{"class":173},[167,24073,4195],{"class":254},[167,24075,583],{"class":191},[167,24077,24078],{"class":181}," MouseEvent",[167,24080,693],{"class":173},[167,24082,639],{"class":191},[167,24084,24085],{"class":219}," void",[167,24087,24044],{"class":173},[167,24089,24090],{"class":169,"line":243},[167,24091,209],{"emptyLinePlaceholder":208},[167,24093,24094,24096,24099,24101,24104,24107],{"class":169,"line":261},[167,24095,569],{"class":191},[167,24097,24098],{"class":181}," ElWithClickOutside",[167,24100,223],{"class":191},[167,24102,24103],{"class":181}," HTMLElement",[167,24105,24106],{"class":191}," &",[167,24108,1905],{"class":173},[167,24110,24111,24114,24117,24119,24121,24123,24125,24127,24129,24131],{"class":169,"line":273},[167,24112,24113],{"class":181},"  __clickOutsideHandler__",[167,24115,24116],{"class":191},"?:",[167,24118,2526],{"class":173},[167,24120,4195],{"class":254},[167,24122,583],{"class":191},[167,24124,24078],{"class":181},[167,24126,693],{"class":173},[167,24128,639],{"class":191},[167,24130,24085],{"class":219},[167,24132,24044],{"class":173},[167,24134,24135,24138,24140,24142],{"class":169,"line":279},[167,24136,24137],{"class":254},"  __clickOutsideCallback__",[167,24139,24116],{"class":191},[167,24141,24067],{"class":181},[167,24143,24044],{"class":173},[167,24145,24146],{"class":169,"line":289},[167,24147,24148],{"class":173},"};\n",[167,24150,24151],{"class":169,"line":294},[167,24152,209],{"emptyLinePlaceholder":208},[167,24154,24155,24157,24159,24161,24163,24165,24167],{"class":169,"line":304},[167,24156,216],{"class":191},[167,24158,5523],{"class":219},[167,24160,223],{"class":191},[167,24162,226],{"class":181},[167,24164,229],{"class":173},[167,24166,3392],{"class":219},[167,24168,24169],{"class":173},");\n",[167,24171,24172],{"class":169,"line":313},[167,24173,209],{"emptyLinePlaceholder":208},[167,24175,24176,24178,24181,24183,24186,24188,24191,24193,24196,24199,24201],{"class":169,"line":161},[167,24177,216],{"class":191},[167,24179,24180],{"class":219}," vClickOutside",[167,24182,583],{"class":191},[167,24184,24185],{"class":181}," Directive",[167,24187,174],{"class":173},[167,24189,24190],{"class":181},"ElWithClickOutside",[167,24192,1025],{"class":173},[167,24194,24195],{"class":181},"ClickOutsideHandler",[167,24197,24198],{"class":173},"> ",[167,24200,267],{"class":191},[167,24202,1905],{"class":173},[167,24204,24205,24207,24209,24212,24214,24216],{"class":169,"line":335},[167,24206,12749],{"class":181},[167,24208,229],{"class":173},[167,24210,24211],{"class":254},"el",[167,24213,1025],{"class":173},[167,24215,23776],{"class":254},[167,24217,258],{"class":173},[167,24219,24220,24222,24224,24226,24229,24231,24234,24236,24239],{"class":169,"line":341},[167,24221,7419],{"class":191},[167,24223,2526],{"class":173},[167,24225,11757],{"class":191},[167,24227,24228],{"class":173}," binding.value ",[167,24230,701],{"class":191},[167,24232,24233],{"class":201}," \"function\"",[167,24235,693],{"class":173},[167,24237,24238],{"class":191},"return",[167,24240,24044],{"class":173},[167,24242,24243],{"class":169,"line":489},[167,24244,209],{"emptyLinePlaceholder":208},[167,24246,24247],{"class":169,"line":495},[167,24248,24249],{"class":18662},"    \u002F\u002F Guardamos el callback vigente (importante si cambia con el tiempo)\n",[167,24251,24252,24255,24257],{"class":169,"line":501},[167,24253,24254],{"class":173},"    el.__clickOutsideCallback__ ",[167,24256,267],{"class":191},[167,24258,24259],{"class":173}," binding.value;\n",[167,24261,24262],{"class":169,"line":512},[167,24263,209],{"emptyLinePlaceholder":208},[167,24265,24266,24268,24271,24273,24275,24277,24279,24281,24283,24285],{"class":169,"line":781},[167,24267,8266],{"class":191},[167,24269,24270],{"class":181}," handler",[167,24272,223],{"class":191},[167,24274,2526],{"class":173},[167,24276,4195],{"class":254},[167,24278,583],{"class":191},[167,24280,24078],{"class":181},[167,24282,693],{"class":173},[167,24284,639],{"class":191},[167,24286,1905],{"class":173},[167,24288,24289,24291,24294,24296,24299,24301,24304,24306,24308],{"class":169,"line":786},[167,24290,4435],{"class":191},[167,24292,24293],{"class":219}," target",[167,24295,223],{"class":191},[167,24297,24298],{"class":173}," event.target ",[167,24300,6692],{"class":191},[167,24302,24303],{"class":181}," Node",[167,24305,659],{"class":191},[167,24307,6567],{"class":219},[167,24309,24044],{"class":173},[167,24311,24312,24314,24316,24318,24321,24323],{"class":169,"line":2678},[167,24313,7261],{"class":191},[167,24315,2526],{"class":173},[167,24317,6641],{"class":191},[167,24319,24320],{"class":173},"target) ",[167,24322,24238],{"class":191},[167,24324,24044],{"class":173},[167,24326,24327],{"class":169,"line":2692},[167,24328,209],{"emptyLinePlaceholder":208},[167,24330,24331],{"class":169,"line":3575},[167,24332,24333],{"class":18662},"      \u002F\u002F Si el click es fuera del elemento, llamamos al callback actual\n",[167,24335,24336,24338,24340,24342,24345,24348],{"class":169,"line":5028},[167,24337,7261],{"class":191},[167,24339,2526],{"class":173},[167,24341,6641],{"class":191},[167,24343,24344],{"class":173},"el.",[167,24346,24347],{"class":181},"contains",[167,24349,24350],{"class":173},"(target)) {\n",[167,24352,24353,24356,24359],{"class":169,"line":5037},[167,24354,24355],{"class":173},"        el.",[167,24357,24358],{"class":181},"__clickOutsideCallback__",[167,24360,24361],{"class":173},"?.(event);\n",[167,24363,24364],{"class":169,"line":5046},[167,24365,7287],{"class":173},[167,24367,24368],{"class":169,"line":6756},[167,24369,24370],{"class":173},"    };\n",[167,24372,24373],{"class":169,"line":6778},[167,24374,209],{"emptyLinePlaceholder":208},[167,24376,24377,24380,24382],{"class":169,"line":6783},[167,24378,24379],{"class":173},"    el.__clickOutsideHandler__ ",[167,24381,267],{"class":191},[167,24383,24384],{"class":173}," handler;\n",[167,24386,24387],{"class":169,"line":6788},[167,24388,209],{"emptyLinePlaceholder":208},[167,24390,24391],{"class":169,"line":6793},[167,24392,24393],{"class":18662},"    \u002F\u002F Capture ayuda con overlays \u002F stopPropagation dentro del dropdown\n",[167,24395,24396,24399,24401,24403,24406,24409,24411],{"class":169,"line":6809},[167,24397,24398],{"class":173},"    document.",[167,24400,1501],{"class":181},[167,24402,229],{"class":173},[167,24404,24405],{"class":201},"\"click\"",[167,24407,24408],{"class":173},", handler, ",[167,24410,390],{"class":219},[167,24412,24169],{"class":173},[167,24414,24415],{"class":169,"line":6824},[167,24416,398],{"class":173},[167,24418,24419],{"class":169,"line":6829},[167,24420,209],{"emptyLinePlaceholder":208},[167,24422,24423,24425,24427,24429,24431,24433],{"class":169,"line":6836},[167,24424,16259],{"class":181},[167,24426,229],{"class":173},[167,24428,24211],{"class":254},[167,24430,1025],{"class":173},[167,24432,23776],{"class":254},[167,24434,258],{"class":173},[167,24436,24437],{"class":169,"line":6845},[167,24438,24439],{"class":18662},"    \u002F\u002F Mantén el callback al día si cambió\n",[167,24441,24442,24444,24446,24448,24450,24452,24454],{"class":169,"line":6854},[167,24443,7419],{"class":191},[167,24445,2526],{"class":173},[167,24447,11757],{"class":191},[167,24449,24228],{"class":173},[167,24451,2550],{"class":191},[167,24453,24233],{"class":201},[167,24455,258],{"class":173},[167,24457,24458,24461,24463],{"class":169,"line":6861},[167,24459,24460],{"class":173},"      el.__clickOutsideCallback__ ",[167,24462,267],{"class":191},[167,24464,24259],{"class":173},[167,24466,24467],{"class":169,"line":6879},[167,24468,4049],{"class":173},[167,24470,24471],{"class":169,"line":6884},[167,24472,398],{"class":173},[167,24474,24475],{"class":169,"line":6889},[167,24476,209],{"emptyLinePlaceholder":208},[167,24478,24479,24481,24483,24485],{"class":169,"line":6898},[167,24480,14622],{"class":181},[167,24482,229],{"class":173},[167,24484,24211],{"class":254},[167,24486,258],{"class":173},[167,24488,24489,24491],{"class":169,"line":6903},[167,24490,7419],{"class":191},[167,24492,24493],{"class":173}," (el.__clickOutsideHandler__) {\n",[167,24495,24496,24499,24501,24503,24505,24508,24510],{"class":169,"line":6912},[167,24497,24498],{"class":173},"      document.",[167,24500,1524],{"class":181},[167,24502,229],{"class":173},[167,24504,24405],{"class":201},[167,24506,24507],{"class":173},", el.__clickOutsideHandler__, ",[167,24509,390],{"class":219},[167,24511,24169],{"class":173},[167,24513,24514],{"class":169,"line":6928},[167,24515,4049],{"class":173},[167,24517,24518,24521],{"class":169,"line":6949},[167,24519,24520],{"class":191},"    delete",[167,24522,24523],{"class":173}," el.__clickOutsideHandler__;\n",[167,24525,24526,24528],{"class":169,"line":6954},[167,24527,24520],{"class":191},[167,24529,24530],{"class":173}," el.__clickOutsideCallback__;\n",[167,24532,24533],{"class":169,"line":6975},[167,24534,398],{"class":173},[167,24536,24537],{"class":169,"line":6989},[167,24538,24148],{"class":173},[167,24540,24541,24543,24545],{"class":169,"line":7003},[167,24542,282],{"class":173},[167,24544,178],{"class":177},[167,24546,185],{"class":173},[167,24548,24549],{"class":169,"line":7017},[167,24550,209],{"emptyLinePlaceholder":208},[167,24552,24553,24555,24557],{"class":169,"line":7026},[167,24554,174],{"class":173},[167,24556,299],{"class":177},[167,24558,185],{"class":173},[167,24560,24561,24563,24565,24567,24569,24572],{"class":169,"line":7031},[167,24562,307],{"class":173},[167,24564,10117],{"class":177},[167,24566,1245],{"class":181},[167,24568,267],{"class":173},[167,24570,24571],{"class":201},"\"dropdown-demo\"",[167,24573,185],{"class":173},[167,24575,24576,24578,24580,24582,24584,24586,24588,24590,24593,24596,24598],{"class":169,"line":7048},[167,24577,1257],{"class":173},[167,24579,507],{"class":177},[167,24581,1174],{"class":181},[167,24583,267],{"class":173},[167,24585,1179],{"class":201},[167,24587,1182],{"class":181},[167,24589,267],{"class":173},[167,24591,24592],{"class":201},"\"isOpen = !isOpen\"",[167,24594,24595],{"class":173},">Alternar menú\u003C\u002F",[167,24597,507],{"class":177},[167,24599,185],{"class":173},[167,24601,24602],{"class":169,"line":7057},[167,24603,209],{"emptyLinePlaceholder":208},[167,24605,24606,24608,24610,24612,24614,24616,24619,24621,24624],{"class":169,"line":7555},[167,24607,1257],{"class":173},[167,24609,1242],{"class":177},[167,24611,5694],{"class":181},[167,24613,267],{"class":173},[167,24615,5699],{"class":201},[167,24617,24618],{"class":181}," v-click-outside",[167,24620,267],{"class":173},[167,24622,24623],{"class":201},"\"() => (isOpen = false)\"",[167,24625,185],{"class":173},[167,24627,24628,24630,24632,24635,24637],{"class":169,"line":7560},[167,24629,1268],{"class":173},[167,24631,15],{"class":177},[167,24633,24634],{"class":173},">Panel abierto\u003C\u002F",[167,24636,15],{"class":177},[167,24638,185],{"class":173},[167,24640,24641,24643,24645,24648,24650],{"class":169,"line":7579},[167,24642,1268],{"class":173},[167,24644,15],{"class":177},[167,24646,24647],{"class":173},">Haz click fuera para cerrarlo.\u003C\u002F",[167,24649,15],{"class":177},[167,24651,185],{"class":173},[167,24653,24654,24656,24658],{"class":169,"line":7592},[167,24655,1292],{"class":173},[167,24657,1242],{"class":177},[167,24659,185],{"class":173},[167,24661,24662,24664,24666],{"class":169,"line":7605},[167,24663,504],{"class":173},[167,24665,10117],{"class":177},[167,24667,185],{"class":173},[167,24669,24670,24672,24674],{"class":169,"line":7618},[167,24671,282],{"class":173},[167,24673,299],{"class":177},[167,24675,185],{"class":173},[154,24677,24679],{"className":156,"code":24678,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: \"ClickOutsideExample\",\n  data() {\n    return {\n      isOpen: false,\n    };\n  },\n  directives: {\n    clickOutside: {\n      mounted(el, binding) {\n        if (typeof binding.value !== \"function\") return;\n\n        el.__clickOutsideCallback__ = binding.value;\n\n        el.__clickOutsideHandler__ = (event) => {\n          const target = event.target;\n          if (target && !el.contains(target)) {\n            el.__clickOutsideCallback__?.(event);\n          }\n        };\n\n        document.addEventListener(\"click\", el.__clickOutsideHandler__, true);\n      },\n      updated(el, binding) {\n        if (typeof binding.value === \"function\") {\n          el.__clickOutsideCallback__ = binding.value;\n        }\n      },\n      unmounted(el) {\n        if (el.__clickOutsideHandler__) {\n          document.removeEventListener(\"click\", el.__clickOutsideHandler__, true);\n        }\n        delete el.__clickOutsideHandler__;\n        delete el.__clickOutsideCallback__;\n      },\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dropdown-demo\">\n    \u003Cbutton type=\"button\" @click=\"isOpen = !isOpen\">Alternar menú\u003C\u002Fbutton>\n\n    \u003Cdiv v-if=\"isOpen\" v-click-outside=\"() => (isOpen = false)\">\n      \u003Cp>Panel abierto\u003C\u002Fp>\n      \u003Cp>Haz click fuera para cerrarlo.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,24680,24681,24689,24697,24706,24712,24718,24727,24731,24735,24740,24745,24760,24780,24784,24793,24797,24816,24828,24846,24855,24860,24865,24869,24886,24890,24905,24921,24930,24934,24938,24949,24955,24972,24976,24983,24989,24993,24997,25001,25005,25013,25017,25025,25039,25063,25067,25087,25099,25111,25119,25127],{"__ignoreMap":163},[167,24682,24683,24685,24687],{"class":169,"line":170},[167,24684,174],{"class":173},[167,24686,178],{"class":177},[167,24688,185],{"class":173},[167,24690,24691,24693,24695],{"class":169,"line":188},[167,24692,608],{"class":191},[167,24694,3991],{"class":191},[167,24696,1905],{"class":173},[167,24698,24699,24701,24704],{"class":169,"line":205},[167,24700,4398],{"class":173},[167,24702,24703],{"class":201},"\"ClickOutsideExample\"",[167,24705,393],{"class":173},[167,24707,24708,24710],{"class":169,"line":160},[167,24709,7176],{"class":181},[167,24711,763],{"class":173},[167,24713,24714,24716],{"class":169,"line":238},[167,24715,1937],{"class":191},[167,24717,1905],{"class":173},[167,24719,24720,24723,24725],{"class":169,"line":243},[167,24721,24722],{"class":173},"      isOpen: ",[167,24724,3392],{"class":219},[167,24726,393],{"class":173},[167,24728,24729],{"class":169,"line":261},[167,24730,24370],{"class":173},[167,24732,24733],{"class":169,"line":273},[167,24734,398],{"class":173},[167,24736,24737],{"class":169,"line":279},[167,24738,24739],{"class":173},"  directives: {\n",[167,24741,24742],{"class":169,"line":289},[167,24743,24744],{"class":173},"    clickOutside: {\n",[167,24746,24747,24750,24752,24754,24756,24758],{"class":169,"line":294},[167,24748,24749],{"class":181},"      mounted",[167,24751,229],{"class":173},[167,24753,24211],{"class":254},[167,24755,1025],{"class":173},[167,24757,23776],{"class":254},[167,24759,258],{"class":173},[167,24761,24762,24764,24766,24768,24770,24772,24774,24776,24778],{"class":169,"line":304},[167,24763,14796],{"class":191},[167,24765,2526],{"class":173},[167,24767,11757],{"class":191},[167,24769,24228],{"class":173},[167,24771,701],{"class":191},[167,24773,24233],{"class":201},[167,24775,693],{"class":173},[167,24777,24238],{"class":191},[167,24779,24044],{"class":173},[167,24781,24782],{"class":169,"line":313},[167,24783,209],{"emptyLinePlaceholder":208},[167,24785,24786,24789,24791],{"class":169,"line":161},[167,24787,24788],{"class":173},"        el.__clickOutsideCallback__ ",[167,24790,267],{"class":191},[167,24792,24259],{"class":173},[167,24794,24795],{"class":169,"line":335},[167,24796,209],{"emptyLinePlaceholder":208},[167,24798,24799,24801,24804,24806,24808,24810,24812,24814],{"class":169,"line":341},[167,24800,24355],{"class":173},[167,24802,24803],{"class":181},"__clickOutsideHandler__",[167,24805,223],{"class":191},[167,24807,2526],{"class":173},[167,24809,4195],{"class":254},[167,24811,693],{"class":173},[167,24813,639],{"class":191},[167,24815,1905],{"class":173},[167,24817,24818,24821,24823,24825],{"class":169,"line":489},[167,24819,24820],{"class":191},"          const",[167,24822,24293],{"class":219},[167,24824,223],{"class":191},[167,24826,24827],{"class":173}," event.target;\n",[167,24829,24830,24833,24836,24838,24840,24842,24844],{"class":169,"line":495},[167,24831,24832],{"class":191},"          if",[167,24834,24835],{"class":173}," (target ",[167,24837,8339],{"class":191},[167,24839,5625],{"class":191},[167,24841,24344],{"class":173},[167,24843,24347],{"class":181},[167,24845,24350],{"class":173},[167,24847,24848,24851,24853],{"class":169,"line":501},[167,24849,24850],{"class":173},"            el.",[167,24852,24358],{"class":181},[167,24854,24361],{"class":173},[167,24856,24857],{"class":169,"line":512},[167,24858,24859],{"class":173},"          }\n",[167,24861,24862],{"class":169,"line":781},[167,24863,24864],{"class":173},"        };\n",[167,24866,24867],{"class":169,"line":786},[167,24868,209],{"emptyLinePlaceholder":208},[167,24870,24871,24874,24876,24878,24880,24882,24884],{"class":169,"line":2678},[167,24872,24873],{"class":173},"        document.",[167,24875,1501],{"class":181},[167,24877,229],{"class":173},[167,24879,24405],{"class":201},[167,24881,24507],{"class":173},[167,24883,390],{"class":219},[167,24885,24169],{"class":173},[167,24887,24888],{"class":169,"line":2692},[167,24889,8642],{"class":173},[167,24891,24892,24895,24897,24899,24901,24903],{"class":169,"line":3575},[167,24893,24894],{"class":181},"      updated",[167,24896,229],{"class":173},[167,24898,24211],{"class":254},[167,24900,1025],{"class":173},[167,24902,23776],{"class":254},[167,24904,258],{"class":173},[167,24906,24907,24909,24911,24913,24915,24917,24919],{"class":169,"line":5028},[167,24908,14796],{"class":191},[167,24910,2526],{"class":173},[167,24912,11757],{"class":191},[167,24914,24228],{"class":173},[167,24916,2550],{"class":191},[167,24918,24233],{"class":201},[167,24920,258],{"class":173},[167,24922,24923,24926,24928],{"class":169,"line":5037},[167,24924,24925],{"class":173},"          el.__clickOutsideCallback__ ",[167,24927,267],{"class":191},[167,24929,24259],{"class":173},[167,24931,24932],{"class":169,"line":5046},[167,24933,14822],{"class":173},[167,24935,24936],{"class":169,"line":6756},[167,24937,8642],{"class":173},[167,24939,24940,24943,24945,24947],{"class":169,"line":6778},[167,24941,24942],{"class":181},"      unmounted",[167,24944,229],{"class":173},[167,24946,24211],{"class":254},[167,24948,258],{"class":173},[167,24950,24951,24953],{"class":169,"line":6783},[167,24952,14796],{"class":191},[167,24954,24493],{"class":173},[167,24956,24957,24960,24962,24964,24966,24968,24970],{"class":169,"line":6788},[167,24958,24959],{"class":173},"          document.",[167,24961,1524],{"class":181},[167,24963,229],{"class":173},[167,24965,24405],{"class":201},[167,24967,24507],{"class":173},[167,24969,390],{"class":219},[167,24971,24169],{"class":173},[167,24973,24974],{"class":169,"line":6793},[167,24975,14822],{"class":173},[167,24977,24978,24981],{"class":169,"line":6809},[167,24979,24980],{"class":191},"        delete",[167,24982,24523],{"class":173},[167,24984,24985,24987],{"class":169,"line":6824},[167,24986,24980],{"class":191},[167,24988,24530],{"class":173},[167,24990,24991],{"class":169,"line":6829},[167,24992,8642],{"class":173},[167,24994,24995],{"class":169,"line":6836},[167,24996,755],{"class":173},[167,24998,24999],{"class":169,"line":6845},[167,25000,398],{"class":173},[167,25002,25003],{"class":169,"line":6854},[167,25004,24148],{"class":173},[167,25006,25007,25009,25011],{"class":169,"line":6861},[167,25008,282],{"class":173},[167,25010,178],{"class":177},[167,25012,185],{"class":173},[167,25014,25015],{"class":169,"line":6879},[167,25016,209],{"emptyLinePlaceholder":208},[167,25018,25019,25021,25023],{"class":169,"line":6884},[167,25020,174],{"class":173},[167,25022,299],{"class":177},[167,25024,185],{"class":173},[167,25026,25027,25029,25031,25033,25035,25037],{"class":169,"line":6889},[167,25028,307],{"class":173},[167,25030,10117],{"class":177},[167,25032,1245],{"class":181},[167,25034,267],{"class":173},[167,25036,24571],{"class":201},[167,25038,185],{"class":173},[167,25040,25041,25043,25045,25047,25049,25051,25053,25055,25057,25059,25061],{"class":169,"line":6898},[167,25042,1257],{"class":173},[167,25044,507],{"class":177},[167,25046,1174],{"class":181},[167,25048,267],{"class":173},[167,25050,1179],{"class":201},[167,25052,1182],{"class":181},[167,25054,267],{"class":173},[167,25056,24592],{"class":201},[167,25058,24595],{"class":173},[167,25060,507],{"class":177},[167,25062,185],{"class":173},[167,25064,25065],{"class":169,"line":6903},[167,25066,209],{"emptyLinePlaceholder":208},[167,25068,25069,25071,25073,25075,25077,25079,25081,25083,25085],{"class":169,"line":6912},[167,25070,1257],{"class":173},[167,25072,1242],{"class":177},[167,25074,5694],{"class":181},[167,25076,267],{"class":173},[167,25078,5699],{"class":201},[167,25080,24618],{"class":181},[167,25082,267],{"class":173},[167,25084,24623],{"class":201},[167,25086,185],{"class":173},[167,25088,25089,25091,25093,25095,25097],{"class":169,"line":6928},[167,25090,1268],{"class":173},[167,25092,15],{"class":177},[167,25094,24634],{"class":173},[167,25096,15],{"class":177},[167,25098,185],{"class":173},[167,25100,25101,25103,25105,25107,25109],{"class":169,"line":6949},[167,25102,1268],{"class":173},[167,25104,15],{"class":177},[167,25106,24647],{"class":173},[167,25108,15],{"class":177},[167,25110,185],{"class":173},[167,25112,25113,25115,25117],{"class":169,"line":6954},[167,25114,1292],{"class":173},[167,25116,1242],{"class":177},[167,25118,185],{"class":173},[167,25120,25121,25123,25125],{"class":169,"line":6975},[167,25122,504],{"class":173},[167,25124,10117],{"class":177},[167,25126,185],{"class":173},[167,25128,25129,25131,25133],{"class":169,"line":6989},[167,25130,282],{"class":173},[167,25132,299],{"class":177},[167,25134,185],{"class":173},[5367,25136,25137],{},[15,25138,6304,25139,25141,25142,25145,25146,25149,25150,21807,25153,4270],{},[87,25140,1008],{},", cualquier variable ",[3933,25143,25144],{},"camelCase"," que empiece por ",[87,25147,25148],{},"v"," puede usarse como directiva (",[87,25151,25152],{},"vClickOutside",[87,25154,23711],{},[22,25156,25158],{"id":25157},"más-ejemplos-útiles","Más ejemplos útiles",[3087,25160,25162,25164],{"id":25161},"v-autofocus-básico-y-práctico",[87,25163,23699],{}," (básico y práctico)",[154,25166,25169],{"className":542,"code":25167,"filename":25168,"language":546,"meta":163,"style":163},"import type { Directive } from \"vue\";\n\nexport const vAutofocus: Directive\u003CHTMLElement, boolean | undefined> = {\n  mounted(el, binding) {\n    \u002F\u002F v-autofocus=\"false\" desactiva el comportamiento\n    if (binding.value === false) return;\n\n    \u002F\u002F En inputs\u002Ftextarea suele ser lo esperado\n    if (typeof (el as any).focus === \"function\") {\n      (el as any).focus();\n    }\n  },\n};\n","main.ts",[87,25170,25171,25185,25189,25222,25236,25241,25258,25262,25267,25292,25308,25312,25316],{"__ignoreMap":163},[167,25172,25173,25175,25177,25179,25181,25183],{"class":169,"line":170},[167,25174,192],{"class":191},[167,25176,1174],{"class":191},[167,25178,24036],{"class":173},[167,25180,198],{"class":191},[167,25182,24041],{"class":201},[167,25184,24044],{"class":173},[167,25186,25187],{"class":169,"line":188},[167,25188,209],{"emptyLinePlaceholder":208},[167,25190,25191,25193,25195,25198,25200,25202,25204,25207,25209,25212,25214,25216,25218,25220],{"class":169,"line":205},[167,25192,608],{"class":191},[167,25194,611],{"class":191},[167,25196,25197],{"class":219}," vAutofocus",[167,25199,583],{"class":191},[167,25201,24185],{"class":181},[167,25203,174],{"class":173},[167,25205,25206],{"class":181},"HTMLElement",[167,25208,1025],{"class":173},[167,25210,25211],{"class":219},"boolean",[167,25213,659],{"class":191},[167,25215,662],{"class":219},[167,25217,24198],{"class":173},[167,25219,267],{"class":191},[167,25221,1905],{"class":173},[167,25223,25224,25226,25228,25230,25232,25234],{"class":169,"line":160},[167,25225,12749],{"class":181},[167,25227,229],{"class":173},[167,25229,24211],{"class":254},[167,25231,1025],{"class":173},[167,25233,23776],{"class":254},[167,25235,258],{"class":173},[167,25237,25238],{"class":169,"line":238},[167,25239,25240],{"class":18662},"    \u002F\u002F v-autofocus=\"false\" desactiva el comportamiento\n",[167,25242,25243,25245,25248,25250,25252,25254,25256],{"class":169,"line":243},[167,25244,7419],{"class":191},[167,25246,25247],{"class":173}," (binding.value ",[167,25249,2550],{"class":191},[167,25251,5777],{"class":219},[167,25253,693],{"class":173},[167,25255,24238],{"class":191},[167,25257,24044],{"class":173},[167,25259,25260],{"class":169,"line":261},[167,25261,209],{"emptyLinePlaceholder":208},[167,25263,25264],{"class":169,"line":273},[167,25265,25266],{"class":18662},"    \u002F\u002F En inputs\u002Ftextarea suele ser lo esperado\n",[167,25268,25269,25271,25273,25275,25278,25280,25283,25286,25288,25290],{"class":169,"line":279},[167,25270,7419],{"class":191},[167,25272,2526],{"class":173},[167,25274,11757],{"class":191},[167,25276,25277],{"class":173}," (el ",[167,25279,6692],{"class":191},[167,25281,25282],{"class":219}," any",[167,25284,25285],{"class":173},").focus ",[167,25287,2550],{"class":191},[167,25289,24233],{"class":201},[167,25291,258],{"class":173},[167,25293,25294,25297,25299,25301,25303,25305],{"class":169,"line":289},[167,25295,25296],{"class":173},"      (el ",[167,25298,6692],{"class":191},[167,25300,25282],{"class":219},[167,25302,4270],{"class":173},[167,25304,17408],{"class":181},[167,25306,25307],{"class":173},"();\n",[167,25309,25310],{"class":169,"line":294},[167,25311,4049],{"class":173},[167,25313,25314],{"class":169,"line":304},[167,25315,398],{"class":173},[167,25317,25318],{"class":169,"line":313},[167,25319,24148],{"class":173},[154,25321,25324],{"className":2879,"code":25322,"filename":25323,"language":2882,"meta":163,"style":163},"export const vAutofocus = {\n  mounted(el, binding) {\n    \u002F\u002F v-autofocus=\"false\" desactiva el comportamiento\n    if (binding.value === false) return;\n    \u002F\u002F En inputs\u002Ftextarea suele ser lo esperado\n    if (typeof el.focus === \"function\") {\n      el.focus();\n    }\n  },\n};\n","main.js",[87,25325,25326,25338,25352,25356,25372,25376,25393,25402,25406,25410],{"__ignoreMap":163},[167,25327,25328,25330,25332,25334,25336],{"class":169,"line":170},[167,25329,608],{"class":191},[167,25331,611],{"class":191},[167,25333,25197],{"class":219},[167,25335,223],{"class":191},[167,25337,1905],{"class":173},[167,25339,25340,25342,25344,25346,25348,25350],{"class":169,"line":188},[167,25341,12749],{"class":181},[167,25343,229],{"class":173},[167,25345,24211],{"class":254},[167,25347,1025],{"class":173},[167,25349,23776],{"class":254},[167,25351,258],{"class":173},[167,25353,25354],{"class":169,"line":205},[167,25355,25240],{"class":18662},[167,25357,25358,25360,25362,25364,25366,25368,25370],{"class":169,"line":160},[167,25359,7419],{"class":191},[167,25361,25247],{"class":173},[167,25363,2550],{"class":191},[167,25365,5777],{"class":219},[167,25367,693],{"class":173},[167,25369,24238],{"class":191},[167,25371,24044],{"class":173},[167,25373,25374],{"class":169,"line":238},[167,25375,25266],{"class":18662},[167,25377,25378,25380,25382,25384,25387,25389,25391],{"class":169,"line":243},[167,25379,7419],{"class":191},[167,25381,2526],{"class":173},[167,25383,11757],{"class":191},[167,25385,25386],{"class":173}," el.focus ",[167,25388,2550],{"class":191},[167,25390,24233],{"class":201},[167,25392,258],{"class":173},[167,25394,25395,25398,25400],{"class":169,"line":261},[167,25396,25397],{"class":173},"      el.",[167,25399,17408],{"class":181},[167,25401,25307],{"class":173},[167,25403,25404],{"class":169,"line":273},[167,25405,4049],{"class":173},[167,25407,25408],{"class":169,"line":279},[167,25409,398],{"class":173},[167,25411,25412],{"class":169,"line":289},[167,25413,24148],{"class":173},[154,25415,25417],{"className":156,"code":25416,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cinput v-autofocus \u002F>\n\u003Cinput v-autofocus=\"isDesktop\" \u002F>\n",[87,25418,25419,25430],{"__ignoreMap":163},[167,25420,25421,25423,25425,25428],{"class":169,"line":170},[167,25422,174],{"class":173},[167,25424,2650],{"class":177},[167,25426,25427],{"class":181}," v-autofocus",[167,25429,5325],{"class":173},[167,25431,25432,25434,25436,25438,25440,25442,25445,25447],{"class":169,"line":188},[167,25433,174],{"class":173},[167,25435,2650],{"class":177},[167,25437,25427],{"class":181},[167,25439,267],{"class":173},[167,25441,5080],{"class":201},[167,25443,25444],{"class":173},"isDesktop",[167,25446,5080],{"class":201},[167,25448,5325],{"class":173},[3087,25450,25452,25454],{"id":25451},"v-intersect-intersectionobserver",[87,25453,23999],{}," (IntersectionObserver)",[154,25456,25458],{"className":542,"code":25457,"filename":25168,"language":546,"meta":163,"style":163},"import type { Directive } from \"vue\";\n\ntype IntersectValue = {\n  onEnter?: (entry: IntersectionObserverEntry) => void;\n  onLeave?: (entry: IntersectionObserverEntry) => void;\n  options?: IntersectionObserverInit;\n};\n\ntype ElWithObserver = HTMLElement & { __io__?: IntersectionObserver };\n\nexport const vIntersect: Directive\u003CElWithObserver, IntersectValue> = {\n  mounted(el, binding) {\n    const { onEnter, onLeave, options } = binding.value ?? {};\n\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n\n    io.observe(el);\n    el.__io__ = io;\n  },\n  updated(el, binding) {\n    \u002F\u002F Si cambian options de forma dinámica, lo más seguro es recrear el observer\n    \u002F\u002F (micro-optimización: solo recrear si realmente cambian)\n    \u002F\u002F Aquí lo dejamos simple y explícito:\n    el.__io__?.disconnect();\n    delete el.__io__;\n    const { onEnter, onLeave, options } = binding.value ?? {};\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n    io.observe(el);\n    el.__io__ = io;\n  },\n  unmounted(el) {\n    el.__io__?.disconnect();\n    delete el.__io__;\n  },\n};\n",[87,25459,25460,25474,25478,25489,25514,25537,25549,25553,25557,25583,25587,25616,25630,25659,25663,25687,25704,25716,25726,25730,25735,25739,25750,25760,25764,25778,25783,25788,25793,25803,25810,25836,25858,25872,25882,25890,25894,25898,25906,25914,25918,25928,25936,25942,25946],{"__ignoreMap":163},[167,25461,25462,25464,25466,25468,25470,25472],{"class":169,"line":170},[167,25463,192],{"class":191},[167,25465,1174],{"class":191},[167,25467,24036],{"class":173},[167,25469,198],{"class":191},[167,25471,24041],{"class":201},[167,25473,24044],{"class":173},[167,25475,25476],{"class":169,"line":188},[167,25477,209],{"emptyLinePlaceholder":208},[167,25479,25480,25482,25485,25487],{"class":169,"line":205},[167,25481,569],{"class":191},[167,25483,25484],{"class":181}," IntersectValue",[167,25486,223],{"class":191},[167,25488,1905],{"class":173},[167,25490,25491,25494,25496,25498,25501,25503,25506,25508,25510,25512],{"class":169,"line":160},[167,25492,25493],{"class":181},"  onEnter",[167,25495,24116],{"class":191},[167,25497,2526],{"class":173},[167,25499,25500],{"class":254},"entry",[167,25502,583],{"class":191},[167,25504,25505],{"class":181}," IntersectionObserverEntry",[167,25507,693],{"class":173},[167,25509,639],{"class":191},[167,25511,24085],{"class":219},[167,25513,24044],{"class":173},[167,25515,25516,25519,25521,25523,25525,25527,25529,25531,25533,25535],{"class":169,"line":238},[167,25517,25518],{"class":181},"  onLeave",[167,25520,24116],{"class":191},[167,25522,2526],{"class":173},[167,25524,25500],{"class":254},[167,25526,583],{"class":191},[167,25528,25505],{"class":181},[167,25530,693],{"class":173},[167,25532,639],{"class":191},[167,25534,24085],{"class":219},[167,25536,24044],{"class":173},[167,25538,25539,25542,25544,25547],{"class":169,"line":243},[167,25540,25541],{"class":254},"  options",[167,25543,24116],{"class":191},[167,25545,25546],{"class":181}," IntersectionObserverInit",[167,25548,24044],{"class":173},[167,25550,25551],{"class":169,"line":261},[167,25552,24148],{"class":173},[167,25554,25555],{"class":169,"line":273},[167,25556,209],{"emptyLinePlaceholder":208},[167,25558,25559,25561,25564,25566,25568,25570,25572,25575,25577,25580],{"class":169,"line":279},[167,25560,569],{"class":191},[167,25562,25563],{"class":181}," ElWithObserver",[167,25565,223],{"class":191},[167,25567,24103],{"class":181},[167,25569,24106],{"class":191},[167,25571,577],{"class":173},[167,25573,25574],{"class":254},"__io__",[167,25576,24116],{"class":191},[167,25578,25579],{"class":181}," IntersectionObserver",[167,25581,25582],{"class":173}," };\n",[167,25584,25585],{"class":169,"line":289},[167,25586,209],{"emptyLinePlaceholder":208},[167,25588,25589,25591,25593,25596,25598,25600,25602,25605,25607,25610,25612,25614],{"class":169,"line":294},[167,25590,608],{"class":191},[167,25592,611],{"class":191},[167,25594,25595],{"class":219}," vIntersect",[167,25597,583],{"class":191},[167,25599,24185],{"class":181},[167,25601,174],{"class":173},[167,25603,25604],{"class":181},"ElWithObserver",[167,25606,1025],{"class":173},[167,25608,25609],{"class":181},"IntersectValue",[167,25611,24198],{"class":173},[167,25613,267],{"class":191},[167,25615,1905],{"class":173},[167,25617,25618,25620,25622,25624,25626,25628],{"class":169,"line":304},[167,25619,12749],{"class":181},[167,25621,229],{"class":173},[167,25623,24211],{"class":254},[167,25625,1025],{"class":173},[167,25627,23776],{"class":254},[167,25629,258],{"class":173},[167,25631,25632,25634,25636,25639,25641,25644,25646,25648,25650,25652,25654,25656],{"class":169,"line":313},[167,25633,8266],{"class":191},[167,25635,577],{"class":173},[167,25637,25638],{"class":219},"onEnter",[167,25640,1025],{"class":173},[167,25642,25643],{"class":219},"onLeave",[167,25645,1025],{"class":173},[167,25647,22019],{"class":219},[167,25649,23409],{"class":173},[167,25651,267],{"class":191},[167,25653,24228],{"class":173},[167,25655,15799],{"class":191},[167,25657,25658],{"class":173}," {};\n",[167,25660,25661],{"class":169,"line":161},[167,25662,209],{"emptyLinePlaceholder":208},[167,25664,25665,25667,25670,25672,25674,25676,25678,25681,25683,25685],{"class":169,"line":335},[167,25666,8266],{"class":191},[167,25668,25669],{"class":219}," io",[167,25671,223],{"class":191},[167,25673,4224],{"class":191},[167,25675,25579],{"class":181},[167,25677,1918],{"class":173},[167,25679,25680],{"class":254},"entries",[167,25682,693],{"class":173},[167,25684,639],{"class":191},[167,25686,1905],{"class":173},[167,25688,25689,25692,25694,25696,25699,25701],{"class":169,"line":341},[167,25690,25691],{"class":191},"      for",[167,25693,2526],{"class":173},[167,25695,216],{"class":191},[167,25697,25698],{"class":219}," entry",[167,25700,21967],{"class":191},[167,25702,25703],{"class":173}," entries) {\n",[167,25705,25706,25708,25711,25713],{"class":169,"line":489},[167,25707,14796],{"class":191},[167,25709,25710],{"class":173}," (entry.isIntersecting) ",[167,25712,25638],{"class":181},[167,25714,25715],{"class":173},"?.(entry);\n",[167,25717,25718,25721,25724],{"class":169,"line":495},[167,25719,25720],{"class":191},"        else",[167,25722,25723],{"class":181}," onLeave",[167,25725,25715],{"class":173},[167,25727,25728],{"class":169,"line":501},[167,25729,7287],{"class":173},[167,25731,25732],{"class":169,"line":512},[167,25733,25734],{"class":173},"    }, options);\n",[167,25736,25737],{"class":169,"line":781},[167,25738,209],{"emptyLinePlaceholder":208},[167,25740,25741,25744,25747],{"class":169,"line":786},[167,25742,25743],{"class":173},"    io.",[167,25745,25746],{"class":181},"observe",[167,25748,25749],{"class":173},"(el);\n",[167,25751,25752,25755,25757],{"class":169,"line":2678},[167,25753,25754],{"class":173},"    el.__io__ ",[167,25756,267],{"class":191},[167,25758,25759],{"class":173}," io;\n",[167,25761,25762],{"class":169,"line":2692},[167,25763,398],{"class":173},[167,25765,25766,25768,25770,25772,25774,25776],{"class":169,"line":3575},[167,25767,16259],{"class":181},[167,25769,229],{"class":173},[167,25771,24211],{"class":254},[167,25773,1025],{"class":173},[167,25775,23776],{"class":254},[167,25777,258],{"class":173},[167,25779,25780],{"class":169,"line":5028},[167,25781,25782],{"class":18662},"    \u002F\u002F Si cambian options de forma dinámica, lo más seguro es recrear el observer\n",[167,25784,25785],{"class":169,"line":5037},[167,25786,25787],{"class":18662},"    \u002F\u002F (micro-optimización: solo recrear si realmente cambian)\n",[167,25789,25790],{"class":169,"line":5046},[167,25791,25792],{"class":18662},"    \u002F\u002F Aquí lo dejamos simple y explícito:\n",[167,25794,25795,25798,25801],{"class":169,"line":6756},[167,25796,25797],{"class":173},"    el.__io__?.",[167,25799,25800],{"class":181},"disconnect",[167,25802,25307],{"class":173},[167,25804,25805,25807],{"class":169,"line":6778},[167,25806,24520],{"class":191},[167,25808,25809],{"class":173}," el.__io__;\n",[167,25811,25812,25814,25816,25818,25820,25822,25824,25826,25828,25830,25832,25834],{"class":169,"line":6783},[167,25813,8266],{"class":191},[167,25815,577],{"class":173},[167,25817,25638],{"class":219},[167,25819,1025],{"class":173},[167,25821,25643],{"class":219},[167,25823,1025],{"class":173},[167,25825,22019],{"class":219},[167,25827,23409],{"class":173},[167,25829,267],{"class":191},[167,25831,24228],{"class":173},[167,25833,15799],{"class":191},[167,25835,25658],{"class":173},[167,25837,25838,25840,25842,25844,25846,25848,25850,25852,25854,25856],{"class":169,"line":6788},[167,25839,8266],{"class":191},[167,25841,25669],{"class":219},[167,25843,223],{"class":191},[167,25845,4224],{"class":191},[167,25847,25579],{"class":181},[167,25849,1918],{"class":173},[167,25851,25680],{"class":254},[167,25853,693],{"class":173},[167,25855,639],{"class":191},[167,25857,1905],{"class":173},[167,25859,25860,25862,25864,25866,25868,25870],{"class":169,"line":6793},[167,25861,25691],{"class":191},[167,25863,2526],{"class":173},[167,25865,216],{"class":191},[167,25867,25698],{"class":219},[167,25869,21967],{"class":191},[167,25871,25703],{"class":173},[167,25873,25874,25876,25878,25880],{"class":169,"line":6809},[167,25875,14796],{"class":191},[167,25877,25710],{"class":173},[167,25879,25638],{"class":181},[167,25881,25715],{"class":173},[167,25883,25884,25886,25888],{"class":169,"line":6824},[167,25885,25720],{"class":191},[167,25887,25723],{"class":181},[167,25889,25715],{"class":173},[167,25891,25892],{"class":169,"line":6829},[167,25893,7287],{"class":173},[167,25895,25896],{"class":169,"line":6836},[167,25897,25734],{"class":173},[167,25899,25900,25902,25904],{"class":169,"line":6845},[167,25901,25743],{"class":173},[167,25903,25746],{"class":181},[167,25905,25749],{"class":173},[167,25907,25908,25910,25912],{"class":169,"line":6854},[167,25909,25754],{"class":173},[167,25911,267],{"class":191},[167,25913,25759],{"class":173},[167,25915,25916],{"class":169,"line":6861},[167,25917,398],{"class":173},[167,25919,25920,25922,25924,25926],{"class":169,"line":6879},[167,25921,14622],{"class":181},[167,25923,229],{"class":173},[167,25925,24211],{"class":254},[167,25927,258],{"class":173},[167,25929,25930,25932,25934],{"class":169,"line":6884},[167,25931,25797],{"class":173},[167,25933,25800],{"class":181},[167,25935,25307],{"class":173},[167,25937,25938,25940],{"class":169,"line":6889},[167,25939,24520],{"class":191},[167,25941,25809],{"class":173},[167,25943,25944],{"class":169,"line":6898},[167,25945,398],{"class":173},[167,25947,25948],{"class":169,"line":6903},[167,25949,24148],{"class":173},[154,25951,25953],{"className":2879,"code":25952,"filename":25323,"language":2882,"meta":163,"style":163},"export const vIntersect = {\n  mounted(el, binding) {\n    const { onEnter, onLeave, options } = binding.value ?? {};\n\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n    \n    io.observe(el);\n    el.__io__ = io;\n  },\n  updated(el, binding) {\n    \u002F\u002F Si cambian options de forma dinámica, lo más seguro es recrear el observer\n    \u002F\u002F (micro-optimización: solo recrear si realmente cambian)\n    \u002F\u002F Aquí lo dejamos simple y explícito:\n    el.__io__?.disconnect();\n    delete el.__io__;\n    const { onEnter, onLeave, options } = binding.value ?? {};\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n    io.observe(el);\n    el.__io__ = io;\n  },\n  unmounted(el) {\n    el.__io__?.disconnect();\n    delete el.__io__;\n  },\n};\n",[87,25954,25955,25967,25981,26007,26011,26033,26047,26057,26065,26069,26073,26078,26086,26094,26098,26112,26116,26120,26124,26132,26138,26164,26186,26200,26210,26218,26222,26226,26234,26242,26246,26256,26264,26270,26274],{"__ignoreMap":163},[167,25956,25957,25959,25961,25963,25965],{"class":169,"line":170},[167,25958,608],{"class":191},[167,25960,611],{"class":191},[167,25962,25595],{"class":219},[167,25964,223],{"class":191},[167,25966,1905],{"class":173},[167,25968,25969,25971,25973,25975,25977,25979],{"class":169,"line":188},[167,25970,12749],{"class":181},[167,25972,229],{"class":173},[167,25974,24211],{"class":254},[167,25976,1025],{"class":173},[167,25978,23776],{"class":254},[167,25980,258],{"class":173},[167,25982,25983,25985,25987,25989,25991,25993,25995,25997,25999,26001,26003,26005],{"class":169,"line":205},[167,25984,8266],{"class":191},[167,25986,577],{"class":173},[167,25988,25638],{"class":219},[167,25990,1025],{"class":173},[167,25992,25643],{"class":219},[167,25994,1025],{"class":173},[167,25996,22019],{"class":219},[167,25998,23409],{"class":173},[167,26000,267],{"class":191},[167,26002,24228],{"class":173},[167,26004,15799],{"class":191},[167,26006,25658],{"class":173},[167,26008,26009],{"class":169,"line":160},[167,26010,209],{"emptyLinePlaceholder":208},[167,26012,26013,26015,26017,26019,26021,26023,26025,26027,26029,26031],{"class":169,"line":238},[167,26014,8266],{"class":191},[167,26016,25669],{"class":219},[167,26018,223],{"class":191},[167,26020,4224],{"class":191},[167,26022,25579],{"class":181},[167,26024,1918],{"class":173},[167,26026,25680],{"class":254},[167,26028,693],{"class":173},[167,26030,639],{"class":191},[167,26032,1905],{"class":173},[167,26034,26035,26037,26039,26041,26043,26045],{"class":169,"line":243},[167,26036,25691],{"class":191},[167,26038,2526],{"class":173},[167,26040,216],{"class":191},[167,26042,25698],{"class":219},[167,26044,21967],{"class":191},[167,26046,25703],{"class":173},[167,26048,26049,26051,26053,26055],{"class":169,"line":261},[167,26050,14796],{"class":191},[167,26052,25710],{"class":173},[167,26054,25638],{"class":181},[167,26056,25715],{"class":173},[167,26058,26059,26061,26063],{"class":169,"line":273},[167,26060,25720],{"class":191},[167,26062,25723],{"class":181},[167,26064,25715],{"class":173},[167,26066,26067],{"class":169,"line":279},[167,26068,7287],{"class":173},[167,26070,26071],{"class":169,"line":289},[167,26072,25734],{"class":173},[167,26074,26075],{"class":169,"line":294},[167,26076,26077],{"class":173},"    \n",[167,26079,26080,26082,26084],{"class":169,"line":304},[167,26081,25743],{"class":173},[167,26083,25746],{"class":181},[167,26085,25749],{"class":173},[167,26087,26088,26090,26092],{"class":169,"line":313},[167,26089,25754],{"class":173},[167,26091,267],{"class":191},[167,26093,25759],{"class":173},[167,26095,26096],{"class":169,"line":161},[167,26097,398],{"class":173},[167,26099,26100,26102,26104,26106,26108,26110],{"class":169,"line":335},[167,26101,16259],{"class":181},[167,26103,229],{"class":173},[167,26105,24211],{"class":254},[167,26107,1025],{"class":173},[167,26109,23776],{"class":254},[167,26111,258],{"class":173},[167,26113,26114],{"class":169,"line":341},[167,26115,25782],{"class":18662},[167,26117,26118],{"class":169,"line":489},[167,26119,25787],{"class":18662},[167,26121,26122],{"class":169,"line":495},[167,26123,25792],{"class":18662},[167,26125,26126,26128,26130],{"class":169,"line":501},[167,26127,25797],{"class":173},[167,26129,25800],{"class":181},[167,26131,25307],{"class":173},[167,26133,26134,26136],{"class":169,"line":512},[167,26135,24520],{"class":191},[167,26137,25809],{"class":173},[167,26139,26140,26142,26144,26146,26148,26150,26152,26154,26156,26158,26160,26162],{"class":169,"line":781},[167,26141,8266],{"class":191},[167,26143,577],{"class":173},[167,26145,25638],{"class":219},[167,26147,1025],{"class":173},[167,26149,25643],{"class":219},[167,26151,1025],{"class":173},[167,26153,22019],{"class":219},[167,26155,23409],{"class":173},[167,26157,267],{"class":191},[167,26159,24228],{"class":173},[167,26161,15799],{"class":191},[167,26163,25658],{"class":173},[167,26165,26166,26168,26170,26172,26174,26176,26178,26180,26182,26184],{"class":169,"line":786},[167,26167,8266],{"class":191},[167,26169,25669],{"class":219},[167,26171,223],{"class":191},[167,26173,4224],{"class":191},[167,26175,25579],{"class":181},[167,26177,1918],{"class":173},[167,26179,25680],{"class":254},[167,26181,693],{"class":173},[167,26183,639],{"class":191},[167,26185,1905],{"class":173},[167,26187,26188,26190,26192,26194,26196,26198],{"class":169,"line":2678},[167,26189,25691],{"class":191},[167,26191,2526],{"class":173},[167,26193,216],{"class":191},[167,26195,25698],{"class":219},[167,26197,21967],{"class":191},[167,26199,25703],{"class":173},[167,26201,26202,26204,26206,26208],{"class":169,"line":2692},[167,26203,14796],{"class":191},[167,26205,25710],{"class":173},[167,26207,25638],{"class":181},[167,26209,25715],{"class":173},[167,26211,26212,26214,26216],{"class":169,"line":3575},[167,26213,25720],{"class":191},[167,26215,25723],{"class":181},[167,26217,25715],{"class":173},[167,26219,26220],{"class":169,"line":5028},[167,26221,7287],{"class":173},[167,26223,26224],{"class":169,"line":5037},[167,26225,25734],{"class":173},[167,26227,26228,26230,26232],{"class":169,"line":5046},[167,26229,25743],{"class":173},[167,26231,25746],{"class":181},[167,26233,25749],{"class":173},[167,26235,26236,26238,26240],{"class":169,"line":6756},[167,26237,25754],{"class":173},[167,26239,267],{"class":191},[167,26241,25759],{"class":173},[167,26243,26244],{"class":169,"line":6778},[167,26245,398],{"class":173},[167,26247,26248,26250,26252,26254],{"class":169,"line":6783},[167,26249,14622],{"class":181},[167,26251,229],{"class":173},[167,26253,24211],{"class":254},[167,26255,258],{"class":173},[167,26257,26258,26260,26262],{"class":169,"line":6788},[167,26259,25797],{"class":173},[167,26261,25800],{"class":181},[167,26263,25307],{"class":173},[167,26265,26266,26268],{"class":169,"line":6793},[167,26267,24520],{"class":191},[167,26269,25809],{"class":173},[167,26271,26272],{"class":169,"line":6809},[167,26273,398],{"class":173},[167,26275,26276],{"class":169,"line":6824},[167,26277,24148],{"class":173},[154,26279,26281],{"className":156,"code":26280,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cdiv\n  v-intersect=\"{\n    onEnter: () => (visible = true),\n    onLeave: () => (visible = false),\n    options: { threshold: 0.2 }\n  }\"\n>\n  ...\n\u003C\u002Fdiv>\n",[87,26282,26283,26290,26302,26321,26338,26348,26355,26359,26364],{"__ignoreMap":163},[167,26284,26285,26287],{"class":169,"line":170},[167,26286,174],{"class":173},[167,26288,26289],{"class":177},"div\n",[167,26291,26292,26295,26297,26299],{"class":169,"line":188},[167,26293,26294],{"class":181},"  v-intersect",[167,26296,267],{"class":173},[167,26298,5080],{"class":201},[167,26300,26301],{"class":173},"{\n",[167,26303,26304,26307,26309,26311,26314,26316,26319],{"class":169,"line":205},[167,26305,26306],{"class":181},"    onEnter",[167,26308,636],{"class":173},[167,26310,639],{"class":191},[167,26312,26313],{"class":173}," (visible ",[167,26315,267],{"class":191},[167,26317,26318],{"class":219}," true",[167,26320,9754],{"class":173},[167,26322,26323,26326,26328,26330,26332,26334,26336],{"class":169,"line":160},[167,26324,26325],{"class":181},"    onLeave",[167,26327,636],{"class":173},[167,26329,639],{"class":191},[167,26331,26313],{"class":173},[167,26333,267],{"class":191},[167,26335,5777],{"class":219},[167,26337,9754],{"class":173},[167,26339,26340,26343,26346],{"class":169,"line":238},[167,26341,26342],{"class":173},"    options: { threshold: ",[167,26344,26345],{"class":219},"0.2",[167,26347,599],{"class":173},[167,26349,26350,26353],{"class":169,"line":243},[167,26351,26352],{"class":173},"  }",[167,26354,5085],{"class":201},[167,26356,26357],{"class":169,"line":261},[167,26358,185],{"class":173},[167,26360,26361],{"class":169,"line":273},[167,26362,26363],{"class":173},"  ...\n",[167,26365,26366,26368,26370],{"class":169,"line":279},[167,26367,282],{"class":173},[167,26369,1242],{"class":177},[167,26371,185],{"class":173},[5367,26373,26374],{},[15,26375,26376,26377,26379,26380,1662,26382,26384],{},"Si vas a recrear observers en ",[87,26378,15037],{},", intenta comparar ",[87,26381,23784],{},[87,26383,23793],{}," para evitar trabajo innecesario.",[22,26386,7678],{"id":7677},[33,26388,26389,26395,26401,26411,26421],{},[36,26390,26391,26392,1679],{},"Las directivas personalizadas son ideales para encapsular ",[3933,26393,26394],{},"comportamiento de DOM reutilizable",[36,26396,26397,26398,26400],{},"El hook ",[87,26399,11276],{}," es obligatorio para limpieza y evitar fugas.",[36,26402,26403,26404,1025,26406,1025,26408,26410],{},"Mantén un contrato simple (",[87,26405,2219],{},[87,26407,23916],{},[87,26409,23919],{},") y evita mezclar estado de negocio.",[36,26412,26413,26414,26417,26418,26420],{},"En Vue 3, ",[3933,26415,26416],{},"si el callback puede cambiar",", actualízalo en ",[87,26419,15037],{}," para no quedarte con una referencia vieja.",[36,26422,26423],{},"Prioriza Composition API; usa Options API cuando lo necesites por compatibilidad incremental.",[924,26425,26426],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}",{"title":163,"searchDepth":188,"depth":188,"links":26428},[26429,26430,26431,26432,26433,26434,26438,26444],{"id":23683,"depth":188,"text":23684},{"id":6256,"depth":188,"text":6257},{"id":23829,"depth":188,"text":23830},{"id":23853,"depth":188,"text":23854},{"id":3084,"depth":188,"text":3085},{"id":7996,"depth":188,"text":7997,"children":26435},[26436],{"id":24003,"depth":205,"text":26437},"v-click-outside (con callback actualizable)",{"id":25157,"depth":188,"text":25158,"children":26439},[26440,26442],{"id":25161,"depth":205,"text":26441},"v-autofocus (básico y práctico)",{"id":25451,"depth":205,"text":26443},"v-intersect (IntersectionObserver)",{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1772207944\u002Fdirectives-vue-custom-directives-guide_nwp7od.png","Ejemplo de directiva personalizada en Vue 3","2026-02-27","Aprende a crear directivas personalizadas en Vue 3 con casos reales, ciclo de vida, limpieza correcta y ejemplos equivalentes en Composition API y Options API.",{"updatedAt":26450,"coverCaption":26446,"author":946,"keywords":26451},"2026-02-27T12:30:00-05:00",[3258,26452,26453,26454,3260,3973],"directivas personalizadas","custom directives","ciclo de vida","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es",[26457],{"headline":23680,"author":26458,"datePublished":26450,"@type":961},{"name":946,"@type":959},{"title":23674,"description":26448},"vue-directives","Ruta paso a paso para dominar las directivas principales de Vue.","Directivas en Vue","blog\u002Fdirectives-vue-custom-directives-guide.es",[26465,26468,26471,26472,26473],{"tag":26466,"color":26467},"Directivas","#6C5CE7",{"tag":26469,"color":26470},"Directivas Personalizadas","#7D5FFF",{"tag":953,"color":971},{"tag":3269,"color":3270},{"tag":7730,"color":7731},"wVpr_e--WXOvyGkAScAp5eWTfVDbzY9Te6sVUdj96GA",{"id":26476,"title":26477,"body":26478,"cover":27738,"coverAlt":27739,"date":27740,"description":27741,"draft":940,"extension":941,"lab":942,"locale":943,"meta":27742,"navigation":208,"path":27747,"schemaOrg":27748,"seo":27752,"series":26460,"seriesDescription":26461,"seriesOrder":289,"seriesTitle":26462,"slug":942,"stem":27753,"tags":27754,"__hash__":27761},"blog\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es.md","Directivas en Vue: v-cloak",{"type":8,"value":26479,"toc":27716},[26480,26487,26500,26504,26507,26512,26517,26532,26534,26542,26547,26552,26586,26599,26609,26613,26620,26623,26636,26639,26650,26652,26656,26667,26669,26671,26685,26692,26694,26701,26708,26715,26725,26729,26735,26739,26744,26746,26750,26778,26786,26790,26927,27065,27180,27184,27190,27194,27430,27659,27685,27687,27692,27697,27713],[11,26481,26483,26484],{"id":26482},"directivas-en-vue-v-cloak","Directivas en Vue: ",[87,26485,26486],{},"v-cloak",[15,26488,26489,26491,26492,26495,26496,26499],{},[87,26490,26486],{}," resuelve un problema visual clásico en aplicaciones con ",[3933,26493,26494],{},"Vue",": el parpadeo de plantillas sin compilar (",[87,26497,26498],{},"{{ ... }}",") antes de que la instancia termine de montarse. Es una directiva simple, pero estratégica cuando te importa la percepción de calidad en la primera carga.",[22,26501,26503],{"id":26502},"por-qué-importa","Por qué importa",[15,26505,26506],{},"Si tu HTML inicial contiene expresiones de Vue, el navegador puede renderizarlas en crudo durante unos milisegundos, especialmente si el bundle aún no se ha descargado o ejecutado.\nEse “flash” degrada la experiencia y transmite sensación de inestabilidad.",[15,26508,26509,26511],{},[87,26510,26486],{}," evita ese estado intermedio ocultando el contenido hasta que Vue haya completado el montaje y compilado el template.",[15,26513,26514],{},[3933,26515,26516],{},"Beneficios directos:",[33,26518,26519,26526,26529],{},[36,26520,26521,26522,26525],{},"El usuario no ve ",[87,26523,26524],{},"{{ message }}"," ni estructuras sin procesar.",[36,26527,26528],{},"La carga inicial se percibe más limpia y profesional.",[36,26530,26531],{},"Reduces ruido visual en landing pages, layouts estáticos o integraciones progresivas.",[22,26533,6257],{"id":6256},[15,26535,26536,26538,26539,26541],{},[87,26537,26486],{}," funciona en conjunto con CSS.\nVue elimina automáticamente el atributo ",[87,26540,26486],{}," del nodo cuando la instancia ha sido montada y el template compilado.",[15,26543,26544],{},[3933,26545,26546],{},"Patrón típico:",[3035,26548,26549],{},[36,26550,26551],{},"Añades una regla CSS global:",[154,26553,26558],{"className":26554,"code":26555,"filename":26556,"language":26557,"meta":163,"style":163},"language-css shiki shiki-themes github-light github-dark","[v-cloak] {\n display: none;\n}\n","style.css","css",[87,26559,26560,26570,26582],{"__ignoreMap":163},[167,26561,26562,26565,26567],{"class":169,"line":170},[167,26563,26564],{"class":173},"[",[167,26566,26486],{"class":181},[167,26568,26569],{"class":173},"] {\n",[167,26571,26572,26575,26577,26580],{"class":169,"line":188},[167,26573,26574],{"class":219}," display",[167,26576,1108],{"class":173},[167,26578,26579],{"class":219},"none",[167,26581,24044],{"class":173},[167,26583,26584],{"class":169,"line":205},[167,26585,276],{"class":173},[3035,26587,26588,26593,26596],{"start":188},[36,26589,26590,26591,1679],{},"Marcas el contenedor raíz (o el fragmento necesario) con ",[87,26592,26486],{},[36,26594,26595],{},"Mientras Vue no monta, el bloque permanece oculto.",[36,26597,26598],{},"Cuando Vue monta, elimina el atributo y el contenido aparece ya procesado.",[5367,26600,26601],{},[15,26602,26603,26605,26606,4270],{},[87,26604,26486],{}," no transforma datos ni agrega reactividad. Solo controla la visibilidad durante la fase previa al montaje (",[87,26607,26608],{},"before mount",[22,26610,26612],{"id":26611},"consideraciones-en-vue-3-y-ssr","Consideraciones en Vue 3 y SSR",[15,26614,26615,26616,26619],{},"En aplicaciones con SSR (por ejemplo, usando ",[3933,26617,26618],{},"Nuxt 4","), el HTML ya llega compilado desde el servidor, por lo que normalmente no existe riesgo de mostrar interpolaciones en crudo.",[15,26621,26622],{},"En esos casos:",[33,26624,26625,26630,26633],{},[36,26626,26627,26629],{},[87,26628,26486],{}," suele ser innecesario.",[36,26631,26632],{},"No corrige problemas de hydration mismatch.",[36,26634,26635],{},"No sustituye una estrategia adecuada de loading o streaming.",[15,26637,26638],{},"Su utilidad es mayor en:",[33,26640,26641,26644,26647],{},[36,26642,26643],{},"Integraciones progresivas sobre HTML existente.",[36,26645,26646],{},"Aplicaciones SPA donde el bundle puede tardar en ejecutarse.",[36,26648,26649],{},"Entornos donde el HTML inicial contiene marcadores Vue sin procesar.",[22,26651,6322],{"id":6321},[15,26653,1582,26654,13627],{},[87,26655,26486],{},[33,26657,26658,26661,26664],{},[36,26659,26660],{},"Sirves HTML inicial con plantillas Vue visibles (CMS, integración progresiva).",[36,26662,26663],{},"La app tarda perceptiblemente en montar por tamaño del bundle o red lenta.",[36,26665,26666],{},"Quieres blindar la primera impresión visual de componentes críticos (hero, login, pricing).",[22,26668,6349],{"id":6348},[15,26670,6355],{},[33,26672,26673,26676,26679,26682],{},[36,26674,26675],{},"No existe riesgo real de mostrar interpolaciones.",[36,26677,26678],{},"Puedes resolver el estado inicial con skeletons o placeholders más ricos.",[36,26680,26681],{},"Ocultar el contenedor completo afecta accesibilidad o continuidad visual.",[36,26683,26684],{},"Estás en SSR donde el HTML ya llega procesado correctamente.",[5367,26686,26687],{},[15,26688,26689,26691],{},[87,26690,26486],{}," no es una estrategia de performance; es un ajuste de acabado visual.",[22,26693,3085],{"id":3084},[3087,26695,26697,26698,26700],{"id":26696},"_1-usar-v-cloak-sin-css","1) Usar ",[87,26699,26486],{}," sin CSS",[15,26702,26703,26704,26707],{},"Si no defines ",[87,26705,26706],{},"[v-cloak] { display: none; }",", la directiva no tendrá efecto visible.",[3087,26709,26711,26712],{"id":26710},"_2-declarar-la-regla-en-un-style-scoped","2) Declarar la regla en un ",[87,26713,26714],{},"\u003Cstyle scoped>",[15,26716,26717,26718,26720,26721,26724],{},"Si la regla vive en un ",[87,26719,26714],{}," de otro componente, no afectará al nodo marcado.\nDeclárala en estilos globales (por ejemplo, en ",[87,26722,26723],{},"main.css"," o en el layout raíz).",[3087,26726,26728],{"id":26727},"_3-ocultar-demasiado-contenido","3) Ocultar demasiado contenido",[15,26730,26731,26732,26734],{},"Aplicar ",[87,26733,26486],{}," al wrapper completo puede dejar la pantalla vacía durante el arranque.\nEn vistas complejas, úsalo solo en fragmentos donde exista riesgo real de parpadeo.",[3087,26736,26738],{"id":26737},"_4-esperar-que-resuelva-hydration-mismatches","4) Esperar que resuelva hydration mismatches",[15,26740,26741,26743],{},[87,26742,26486],{}," no corrige diferencias entre el HTML del servidor y el render del cliente.\nLos hydration mismatches deben resolverse alineando la lógica de renderizado entre servidor y cliente.",[22,26745,7997],{"id":7996},[3087,26747,26749],{"id":26748},"_1-uso-mínimo-global","1) Uso mínimo global",[154,26751,26753],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},"[v-cloak] {\n  display: none;\n}\n",[87,26754,26755,26763,26774],{"__ignoreMap":163},[167,26756,26757,26759,26761],{"class":169,"line":170},[167,26758,26564],{"class":173},[167,26760,26486],{"class":181},[167,26762,26569],{"class":173},[167,26764,26765,26768,26770,26772],{"class":169,"line":188},[167,26766,26767],{"class":219},"  display",[167,26769,1108],{"class":173},[167,26771,26579],{"class":219},[167,26773,24044],{"class":173},[167,26775,26776],{"class":169,"line":205},[167,26777,276],{"class":173},[5367,26779,26780],{},[15,26781,26782,26783,26785],{},"Con esa regla global, cualquier bloque marcado con ",[87,26784,26486],{}," permanecerá oculto hasta que Vue elimine el atributo tras el montaje.",[3087,26787,26789],{"id":26788},"_2-hero-con-texto-reactivo","2) Hero con texto reactivo",[154,26791,26794],{"className":156,"code":26792,"filename":3260,"highlights":26793,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst headline = ref(\"Aprende Vue sin fricción\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-cloak class=\"hero\">\n    \u003Ch1>{{ headline }}\u003C\u002Fh1>\n    \u003Cp>Guías prácticas para equipos frontend.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[273],[87,26795,26796,26812,26824,26828,26846,26854,26858,26866,26885,26898,26911,26919],{"__ignoreMap":163},[167,26797,26798,26800,26802,26804,26806,26808,26810],{"class":169,"line":170},[167,26799,174],{"class":173},[167,26801,178],{"class":177},[167,26803,182],{"class":181},[167,26805,1050],{"class":181},[167,26807,267],{"class":173},[167,26809,1055],{"class":201},[167,26811,185],{"class":173},[167,26813,26814,26816,26818,26820,26822],{"class":169,"line":188},[167,26815,192],{"class":191},[167,26817,195],{"class":173},[167,26819,198],{"class":191},[167,26821,24041],{"class":201},[167,26823,24044],{"class":173},[167,26825,26826],{"class":169,"line":205},[167,26827,209],{"emptyLinePlaceholder":208},[167,26829,26830,26832,26835,26837,26839,26841,26844],{"class":169,"line":160},[167,26831,216],{"class":191},[167,26833,26834],{"class":219}," headline",[167,26836,223],{"class":191},[167,26838,226],{"class":181},[167,26840,229],{"class":173},[167,26842,26843],{"class":201},"\"Aprende Vue sin fricción\"",[167,26845,24169],{"class":173},[167,26847,26848,26850,26852],{"class":169,"line":238},[167,26849,282],{"class":173},[167,26851,178],{"class":177},[167,26853,185],{"class":173},[167,26855,26856],{"class":169,"line":243},[167,26857,209],{"emptyLinePlaceholder":208},[167,26859,26860,26862,26864],{"class":169,"line":261},[167,26861,174],{"class":173},[167,26863,299],{"class":177},[167,26865,185],{"class":173},[167,26867,26869,26871,26873,26876,26878,26880,26883],{"class":26868,"line":273},[169,213],[167,26870,307],{"class":173},[167,26872,10117],{"class":177},[167,26874,26875],{"class":181}," v-cloak",[167,26877,1245],{"class":181},[167,26879,267],{"class":173},[167,26881,26882],{"class":201},"\"hero\"",[167,26884,185],{"class":173},[167,26886,26887,26889,26891,26894,26896],{"class":169,"line":279},[167,26888,1257],{"class":173},[167,26890,11],{"class":177},[167,26892,26893],{"class":173},">{{ headline }}\u003C\u002F",[167,26895,11],{"class":177},[167,26897,185],{"class":173},[167,26899,26900,26902,26904,26907,26909],{"class":169,"line":289},[167,26901,1257],{"class":173},[167,26903,15],{"class":177},[167,26905,26906],{"class":173},">Guías prácticas para equipos frontend.\u003C\u002F",[167,26908,15],{"class":177},[167,26910,185],{"class":173},[167,26912,26913,26915,26917],{"class":169,"line":294},[167,26914,504],{"class":173},[167,26916,10117],{"class":177},[167,26918,185],{"class":173},[167,26920,26921,26923,26925],{"class":169,"line":304},[167,26922,282],{"class":173},[167,26924,299],{"class":177},[167,26926,185],{"class":173},[154,26928,26931],{"className":156,"code":26929,"filename":3973,"highlights":26930,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      headline: \"Aprende Vue sin fricción\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-cloak class=\"hero\">\n    \u003Ch1>{{ headline }}\u003C\u002Fh1>\n    \u003Cp>Guías prácticas para equipos frontend.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[304],[87,26932,26933,26947,26955,26961,26967,26976,26980,26984,26988,26996,27000,27008,27025,27037,27049,27057],{"__ignoreMap":163},[167,26934,26935,26937,26939,26941,26943,26945],{"class":169,"line":170},[167,26936,174],{"class":173},[167,26938,178],{"class":177},[167,26940,1050],{"class":181},[167,26942,267],{"class":173},[167,26944,1055],{"class":201},[167,26946,185],{"class":173},[167,26948,26949,26951,26953],{"class":169,"line":188},[167,26950,608],{"class":191},[167,26952,3991],{"class":191},[167,26954,1905],{"class":173},[167,26956,26957,26959],{"class":169,"line":205},[167,26958,7176],{"class":181},[167,26960,763],{"class":173},[167,26962,26963,26965],{"class":169,"line":160},[167,26964,1937],{"class":191},[167,26966,1905],{"class":173},[167,26968,26969,26972,26974],{"class":169,"line":238},[167,26970,26971],{"class":173},"      headline: ",[167,26973,26843],{"class":201},[167,26975,393],{"class":173},[167,26977,26978],{"class":169,"line":243},[167,26979,24370],{"class":173},[167,26981,26982],{"class":169,"line":261},[167,26983,398],{"class":173},[167,26985,26986],{"class":169,"line":273},[167,26987,24148],{"class":173},[167,26989,26990,26992,26994],{"class":169,"line":279},[167,26991,282],{"class":173},[167,26993,178],{"class":177},[167,26995,185],{"class":173},[167,26997,26998],{"class":169,"line":289},[167,26999,209],{"emptyLinePlaceholder":208},[167,27001,27002,27004,27006],{"class":169,"line":294},[167,27003,174],{"class":173},[167,27005,299],{"class":177},[167,27007,185],{"class":173},[167,27009,27011,27013,27015,27017,27019,27021,27023],{"class":27010,"line":304},[169,213],[167,27012,307],{"class":173},[167,27014,10117],{"class":177},[167,27016,26875],{"class":181},[167,27018,1245],{"class":181},[167,27020,267],{"class":173},[167,27022,26882],{"class":201},[167,27024,185],{"class":173},[167,27026,27027,27029,27031,27033,27035],{"class":169,"line":313},[167,27028,1257],{"class":173},[167,27030,11],{"class":177},[167,27032,26893],{"class":173},[167,27034,11],{"class":177},[167,27036,185],{"class":173},[167,27038,27039,27041,27043,27045,27047],{"class":169,"line":161},[167,27040,1257],{"class":173},[167,27042,15],{"class":177},[167,27044,26906],{"class":173},[167,27046,15],{"class":177},[167,27048,185],{"class":173},[167,27050,27051,27053,27055],{"class":169,"line":335},[167,27052,504],{"class":173},[167,27054,10117],{"class":177},[167,27056,185],{"class":173},[167,27058,27059,27061,27063],{"class":169,"line":341},[167,27060,282],{"class":173},[167,27062,299],{"class":177},[167,27064,185],{"class":173},[154,27066,27069],{"className":26554,"code":27067,"filename":26556,"highlights":27068,"language":26557,"meta":163,"style":163},"[v-cloak] {\n  display: none;\n}\n\n.hero {\n  background: linear-gradient(135deg, #6C5CE7, #B173BF);\n  color: white;\n  padding: 2rem;\n  border-radius: 8px;\n}\n",[170,188,205],[87,27070,27071,27080,27091,27096,27100,27107,27135,27147,27161,27176],{"__ignoreMap":163},[167,27072,27074,27076,27078],{"class":27073,"line":170},[169,213],[167,27075,26564],{"class":173},[167,27077,26486],{"class":181},[167,27079,26569],{"class":173},[167,27081,27083,27085,27087,27089],{"class":27082,"line":188},[169,213],[167,27084,26767],{"class":219},[167,27086,1108],{"class":173},[167,27088,26579],{"class":219},[167,27090,24044],{"class":173},[167,27092,27094],{"class":27093,"line":205},[169,213],[167,27095,276],{"class":173},[167,27097,27098],{"class":169,"line":160},[167,27099,209],{"emptyLinePlaceholder":208},[167,27101,27102,27105],{"class":169,"line":238},[167,27103,27104],{"class":181},".hero",[167,27106,1905],{"class":173},[167,27108,27109,27112,27114,27117,27119,27122,27125,27127,27129,27131,27133],{"class":169,"line":243},[167,27110,27111],{"class":219},"  background",[167,27113,1108],{"class":173},[167,27115,27116],{"class":219},"linear-gradient",[167,27118,229],{"class":173},[167,27120,27121],{"class":219},"135",[167,27123,27124],{"class":191},"deg",[167,27126,1025],{"class":173},[167,27128,26467],{"class":219},[167,27130,1025],{"class":173},[167,27132,5425],{"class":219},[167,27134,24169],{"class":173},[167,27136,27137,27140,27142,27145],{"class":169,"line":261},[167,27138,27139],{"class":219},"  color",[167,27141,1108],{"class":173},[167,27143,27144],{"class":219},"white",[167,27146,24044],{"class":173},[167,27148,27149,27152,27154,27156,27159],{"class":169,"line":273},[167,27150,27151],{"class":219},"  padding",[167,27153,1108],{"class":173},[167,27155,1853],{"class":219},[167,27157,27158],{"class":191},"rem",[167,27160,24044],{"class":173},[167,27162,27163,27166,27168,27171,27174],{"class":169,"line":279},[167,27164,27165],{"class":219},"  border-radius",[167,27167,1108],{"class":173},[167,27169,27170],{"class":219},"8",[167,27172,27173],{"class":191},"px",[167,27175,24044],{"class":173},[167,27177,27178],{"class":169,"line":289},[167,27179,276],{"class":173},[3087,27181,27183],{"id":27182},"_3-integración-progresiva-en-html-existente","3) Integración progresiva en HTML existente",[15,27185,27186,27187,27189],{},"Cuando montas Vue en una sección específica de una página legacy (por ejemplo, un bloque de login o un widget interactivo), ",[87,27188,26486],{}," evita mostrar marcadores sin procesar durante el bootstrap inicial.",[3087,27191,27193],{"id":27192},"_4-ejemplo-completo-con-estado-asíncrono","4) Ejemplo completo con estado asíncrono",[154,27195,27197],{"className":156,"code":27196,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref } from \"vue\";\n\nconst user = ref\u003C{ name: string } | null>(null);\n\nonMounted(async () => {\n  await new Promise((resolve) => setTimeout(resolve, 350));\n  user.value = { name: \"Cristhian\" };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Caside v-cloak class=\"welcome-card\">\n    \u003Ch2>Panel\u003C\u002Fh2>\n    \u003Cp v-if=\"user\">Hola, {{ user.name }}\u003C\u002Fp>\n    \u003Cp v-else>Cargando perfil...\u003C\u002Fp>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,27198,27199,27215,27228,27232,27262,27266,27280,27308,27323,27328,27336,27340,27348,27366,27379,27399,27414,27422],{"__ignoreMap":163},[167,27200,27201,27203,27205,27207,27209,27211,27213],{"class":169,"line":170},[167,27202,174],{"class":173},[167,27204,178],{"class":177},[167,27206,182],{"class":181},[167,27208,1050],{"class":181},[167,27210,267],{"class":173},[167,27212,1055],{"class":201},[167,27214,185],{"class":173},[167,27216,27217,27219,27222,27224,27226],{"class":169,"line":188},[167,27218,192],{"class":191},[167,27220,27221],{"class":173}," { onMounted, ref } ",[167,27223,198],{"class":191},[167,27225,24041],{"class":201},[167,27227,24044],{"class":173},[167,27229,27230],{"class":169,"line":205},[167,27231,209],{"emptyLinePlaceholder":208},[167,27233,27234,27236,27238,27240,27242,27244,27246,27248,27250,27252,27254,27256,27258,27260],{"class":169,"line":160},[167,27235,216],{"class":191},[167,27237,23476],{"class":219},[167,27239,223],{"class":191},[167,27241,226],{"class":181},[167,27243,1073],{"class":173},[167,27245,592],{"class":254},[167,27247,583],{"class":191},[167,27249,586],{"class":219},[167,27251,23409],{"class":173},[167,27253,11763],{"class":191},[167,27255,6567],{"class":219},[167,27257,6570],{"class":173},[167,27259,6573],{"class":219},[167,27261,24169],{"class":173},[167,27263,27264],{"class":169,"line":238},[167,27265,209],{"emptyLinePlaceholder":208},[167,27267,27268,27270,27272,27274,27276,27278],{"class":169,"line":243},[167,27269,6796],{"class":181},[167,27271,229],{"class":173},[167,27273,2523],{"class":191},[167,27275,1469],{"class":173},[167,27277,639],{"class":191},[167,27279,1905],{"class":173},[167,27281,27282,27284,27286,27288,27290,27292,27294,27296,27299,27302,27305],{"class":169,"line":261},[167,27283,2575],{"class":191},[167,27285,4224],{"class":191},[167,27287,23253],{"class":219},[167,27289,1918],{"class":173},[167,27291,23258],{"class":254},[167,27293,693],{"class":173},[167,27295,639],{"class":191},[167,27297,27298],{"class":181}," setTimeout",[167,27300,27301],{"class":173},"(resolve, ",[167,27303,27304],{"class":219},"350",[167,27306,27307],{"class":173},"));\n",[167,27309,27310,27313,27315,27318,27321],{"class":169,"line":273},[167,27311,27312],{"class":173},"  user.value ",[167,27314,267],{"class":191},[167,27316,27317],{"class":173}," { name: ",[167,27319,27320],{"class":201},"\"Cristhian\"",[167,27322,25582],{"class":173},[167,27324,27325],{"class":169,"line":279},[167,27326,27327],{"class":173},"});\n",[167,27329,27330,27332,27334],{"class":169,"line":289},[167,27331,282],{"class":173},[167,27333,178],{"class":177},[167,27335,185],{"class":173},[167,27337,27338],{"class":169,"line":294},[167,27339,209],{"emptyLinePlaceholder":208},[167,27341,27342,27344,27346],{"class":169,"line":304},[167,27343,174],{"class":173},[167,27345,299],{"class":177},[167,27347,185],{"class":173},[167,27349,27350,27352,27355,27357,27359,27361,27364],{"class":169,"line":313},[167,27351,307],{"class":173},[167,27353,27354],{"class":177},"aside",[167,27356,26875],{"class":181},[167,27358,1245],{"class":181},[167,27360,267],{"class":173},[167,27362,27363],{"class":201},"\"welcome-card\"",[167,27365,185],{"class":173},[167,27367,27368,27370,27372,27375,27377],{"class":169,"line":161},[167,27369,1257],{"class":173},[167,27371,22],{"class":177},[167,27373,27374],{"class":173},">Panel\u003C\u002F",[167,27376,22],{"class":177},[167,27378,185],{"class":173},[167,27380,27381,27383,27385,27387,27389,27392,27395,27397],{"class":169,"line":335},[167,27382,1257],{"class":173},[167,27384,15],{"class":177},[167,27386,5694],{"class":181},[167,27388,267],{"class":173},[167,27390,27391],{"class":201},"\"user\"",[167,27393,27394],{"class":173},">Hola, {{ user.name }}\u003C\u002F",[167,27396,15],{"class":177},[167,27398,185],{"class":173},[167,27400,27401,27403,27405,27407,27410,27412],{"class":169,"line":341},[167,27402,1257],{"class":173},[167,27404,15],{"class":177},[167,27406,7038],{"class":181},[167,27408,27409],{"class":173},">Cargando perfil...\u003C\u002F",[167,27411,15],{"class":177},[167,27413,185],{"class":173},[167,27415,27416,27418,27420],{"class":169,"line":489},[167,27417,504],{"class":173},[167,27419,27354],{"class":177},[167,27421,185],{"class":173},[167,27423,27424,27426,27428],{"class":169,"line":495},[167,27425,282],{"class":173},[167,27427,299],{"class":177},[167,27429,185],{"class":173},[154,27431,27433],{"className":156,"code":27432,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: \"WelcomeCard\",\n  data() {\n    return {\n      user: null as null | { name: string },\n    };\n  },\n  async mounted() {\n    await new Promise((resolve) => setTimeout(resolve, 350));\n    this.user = { name: \"Cristhian\" };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Caside v-cloak class=\"welcome-card\">\n    \u003Ch2>Panel\u003C\u002Fh2>\n    \u003Cp v-if=\"user\">Hola, {{ user.name }}\u003C\u002Fp>\n    \u003Cp v-else>Cargando perfil...\u003C\u002Fp>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,27434,27435,27449,27457,27466,27472,27478,27501,27505,27509,27517,27541,27555,27559,27563,27571,27575,27583,27599,27611,27629,27643,27651],{"__ignoreMap":163},[167,27436,27437,27439,27441,27443,27445,27447],{"class":169,"line":170},[167,27438,174],{"class":173},[167,27440,178],{"class":177},[167,27442,1050],{"class":181},[167,27444,267],{"class":173},[167,27446,1055],{"class":201},[167,27448,185],{"class":173},[167,27450,27451,27453,27455],{"class":169,"line":188},[167,27452,608],{"class":191},[167,27454,3991],{"class":191},[167,27456,1905],{"class":173},[167,27458,27459,27461,27464],{"class":169,"line":205},[167,27460,4398],{"class":173},[167,27462,27463],{"class":201},"\"WelcomeCard\"",[167,27465,393],{"class":173},[167,27467,27468,27470],{"class":169,"line":160},[167,27469,7176],{"class":181},[167,27471,763],{"class":173},[167,27473,27474,27476],{"class":169,"line":238},[167,27475,1937],{"class":191},[167,27477,1905],{"class":173},[167,27479,27480,27483,27485,27487,27489,27491,27493,27495,27497,27499],{"class":169,"line":243},[167,27481,27482],{"class":173},"      user: ",[167,27484,6573],{"class":219},[167,27486,654],{"class":191},[167,27488,6567],{"class":219},[167,27490,659],{"class":191},[167,27492,577],{"class":173},[167,27494,592],{"class":254},[167,27496,583],{"class":191},[167,27498,586],{"class":219},[167,27500,1856],{"class":173},[167,27502,27503],{"class":169,"line":261},[167,27504,24370],{"class":173},[167,27506,27507],{"class":169,"line":273},[167,27508,398],{"class":173},[167,27510,27511,27513,27515],{"class":169,"line":279},[167,27512,7331],{"class":191},[167,27514,7412],{"class":181},[167,27516,763],{"class":173},[167,27518,27519,27521,27523,27525,27527,27529,27531,27533,27535,27537,27539],{"class":169,"line":289},[167,27520,6730],{"class":191},[167,27522,4224],{"class":191},[167,27524,23253],{"class":219},[167,27526,1918],{"class":173},[167,27528,23258],{"class":254},[167,27530,693],{"class":173},[167,27532,639],{"class":191},[167,27534,27298],{"class":181},[167,27536,27301],{"class":173},[167,27538,27304],{"class":219},[167,27540,27307],{"class":173},[167,27542,27543,27545,27547,27549,27551,27553],{"class":169,"line":294},[167,27544,879],{"class":219},[167,27546,744],{"class":173},[167,27548,267],{"class":191},[167,27550,27317],{"class":173},[167,27552,27320],{"class":201},[167,27554,25582],{"class":173},[167,27556,27557],{"class":169,"line":304},[167,27558,398],{"class":173},[167,27560,27561],{"class":169,"line":313},[167,27562,24148],{"class":173},[167,27564,27565,27567,27569],{"class":169,"line":161},[167,27566,282],{"class":173},[167,27568,178],{"class":177},[167,27570,185],{"class":173},[167,27572,27573],{"class":169,"line":335},[167,27574,209],{"emptyLinePlaceholder":208},[167,27576,27577,27579,27581],{"class":169,"line":341},[167,27578,174],{"class":173},[167,27580,299],{"class":177},[167,27582,185],{"class":173},[167,27584,27585,27587,27589,27591,27593,27595,27597],{"class":169,"line":489},[167,27586,307],{"class":173},[167,27588,27354],{"class":177},[167,27590,26875],{"class":181},[167,27592,1245],{"class":181},[167,27594,267],{"class":173},[167,27596,27363],{"class":201},[167,27598,185],{"class":173},[167,27600,27601,27603,27605,27607,27609],{"class":169,"line":495},[167,27602,1257],{"class":173},[167,27604,22],{"class":177},[167,27606,27374],{"class":173},[167,27608,22],{"class":177},[167,27610,185],{"class":173},[167,27612,27613,27615,27617,27619,27621,27623,27625,27627],{"class":169,"line":501},[167,27614,1257],{"class":173},[167,27616,15],{"class":177},[167,27618,5694],{"class":181},[167,27620,267],{"class":173},[167,27622,27391],{"class":201},[167,27624,27394],{"class":173},[167,27626,15],{"class":177},[167,27628,185],{"class":173},[167,27630,27631,27633,27635,27637,27639,27641],{"class":169,"line":512},[167,27632,1257],{"class":173},[167,27634,15],{"class":177},[167,27636,7038],{"class":181},[167,27638,27409],{"class":173},[167,27640,15],{"class":177},[167,27642,185],{"class":173},[167,27644,27645,27647,27649],{"class":169,"line":781},[167,27646,504],{"class":173},[167,27648,27354],{"class":177},[167,27650,185],{"class":173},[167,27652,27653,27655,27657],{"class":169,"line":786},[167,27654,282],{"class":173},[167,27656,299],{"class":177},[167,27658,185],{"class":173},[154,27660,27661],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},[87,27662,27663,27671,27681],{"__ignoreMap":163},[167,27664,27665,27667,27669],{"class":169,"line":170},[167,27666,26564],{"class":173},[167,27668,26486],{"class":181},[167,27670,26569],{"class":173},[167,27672,27673,27675,27677,27679],{"class":169,"line":188},[167,27674,26767],{"class":219},[167,27676,1108],{"class":173},[167,27678,26579],{"class":219},[167,27680,24044],{"class":173},[167,27682,27683],{"class":169,"line":205},[167,27684,276],{"class":173},[22,27686,7678],{"id":7677},[15,27688,27689,27691],{},[87,27690,26486],{}," es una directiva de acabado visual: no modifica tu lógica ni tu modelo de reactividad, pero sí mejora la calidad percibida del render inicial en contextos donde el template puede mostrarse sin compilar.",[15,27693,27694],{},[3933,27695,27696],{},"Puntos clave:",[33,27698,27699,27704,27707,27710],{},[36,27700,27701,27702,1679],{},"Requiere una regla CSS global: ",[87,27703,26706],{},[36,27705,27706],{},"Previene el flash de interpolaciones sin procesar.",[36,27708,27709],{},"No sustituye optimización de rendimiento ni resuelve hydration mismatches.",[36,27711,27712],{},"Debe aplicarse de forma selectiva y consciente del contexto (SPA vs SSR).",[924,27714,27715],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":27717},[27718,27719,27720,27721,27722,27723,27731,27737],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257},{"id":26611,"depth":188,"text":26612},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":27724},[27725,27727,27729,27730],{"id":26696,"depth":205,"text":27726},"1) Usar v-cloak sin CSS",{"id":26710,"depth":205,"text":27728},"2) Declarar la regla en un \u003Cstyle scoped>",{"id":26727,"depth":205,"text":26728},{"id":26737,"depth":205,"text":26738},{"id":7996,"depth":188,"text":7997,"children":27732},[27733,27734,27735,27736],{"id":26748,"depth":205,"text":26749},{"id":26788,"depth":205,"text":26789},{"id":27182,"depth":205,"text":27183},{"id":27192,"depth":205,"text":27193},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771976009\u002Fdirectives-vue-v-cloak-guide_vhkz2i.png","Portada temporal para el artículo sobre v-cloak en Vue","2026-02-25","Aprende a usar v-cloak en Vue 3 para evitar el parpadeo de plantillas sin compilar, con Composition API y Options API, casos reales, errores comunes y buenas prácticas.",{"updatedAt":27743,"coverCaption":23656,"author":946,"keywords":27744},"2026-02-25T12:30:00-05:00",[3258,26486,27745,27746,3260,3973],"FOUC","hydration","\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es",[27749],{"headline":27750,"author":27751,"datePublished":27743,"@type":961},"Directiva v-cloak en Vue: evita parpadeos antes del montaje",{"name":946,"@type":959},{"title":26477,"description":27741},"blog\u002Fdirectives-vue-v-cloak-guide.es",[27755,27756,27759,27760],{"tag":26466,"color":26467},{"tag":27757,"color":27758},"Templates","#00B894",{"tag":9169,"color":9170},{"tag":5424,"color":5425},"JfS7unY1XQ1HsdW8oWBHbTqDpzHjl2-9BrnPQZr3SRE",{"id":27763,"title":27764,"body":27765,"cover":30402,"coverAlt":30403,"date":30404,"description":30405,"draft":940,"extension":941,"lab":942,"locale":943,"meta":30406,"navigation":208,"path":30410,"schemaOrg":30411,"seo":30415,"series":26460,"seriesDescription":26461,"seriesOrder":279,"seriesTitle":26462,"slug":942,"stem":30416,"tags":30417,"__hash__":30423},"blog\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es.md","Directivas en Vue: v-once \u002F v-memo \u002F v-pre",{"type":8,"value":27766,"toc":30372},[27767,27779,27792,27794,27797,27800,27817,27820,27822,27826,27829,27832,27836,27847,27856,27860,27870,27873,27875,27878,27898,27901,27915,27917,27920,27937,27940,27942,27959,27962,27979,27981,27988,27994,28003,28009,28012,28017,28024,28029,28036,28040,28043,28048,28050,28056,28194,28326,28338,28344,28691,28962,28978,28984,29082,29199,29203,29215,29816,30338,30340,30349,30366,30369],[11,27768,26483,27770,11227,27773,11227,27776],{"id":27769},"directivas-en-vue-v-once-v-memo-v-pre",[87,27771,27772],{},"v-once",[87,27774,27775],{},"v-memo",[87,27777,27778],{},"v-pre",[15,27780,27781,1025,27783,1028,27785,27787,27788,27791],{},[87,27782,27772],{},[87,27784,27775],{},[87,27786,27778],{}," son directivas enfocadas en rendimiento y control de compilación\u002Frender. No son para “poner en todo”, pero en escenarios concretos reducen trabajo innecesario y evitan ",[9295,27789,27790],{},"re-renders"," costosos.",[22,27793,26503],{"id":26502},[15,27795,27796],{},"En apps grandes, muchos problemas de rendimiento no vienen de una sola operación pesada, sino de miles de renders pequeños que se repiten sin necesidad.",[15,27798,27799],{},"Estas directivas te permiten:",[33,27801,27802,27807,27812],{},[36,27803,27804,27805,4270],{},"Congelar fragmentos estáticos (",[87,27806,27772],{},[36,27808,27809,27810,4270],{},"Reutilizar subárboles cuando dependencias clave no cambian (",[87,27811,27775],{},[36,27813,27814,27815,4270],{},"Omitir compilación de expresiones para contenido literal (",[87,27816,27778],{},[15,27818,27819],{},"Usadas con criterio, mejoran la fluidez sin romper la legibilidad.",[22,27821,6257],{"id":6256},[3087,27823,27824],{"id":27772},[87,27825,27772],{},[15,27827,27828],{},"Renderiza el nodo una sola vez. En actualizaciones posteriores, Vue reutiliza el resultado y no vuelve a evaluarlo.",[15,27830,27831],{},"Ideal para contenido realmente inmutable (versión de build, texto legal fijo, metadata de entorno, etc.).",[3087,27833,27834],{"id":27775},[87,27835,27775],{},[15,27837,27838,27839,27842,27843,27846],{},"Memoiza (cachea) un subárbol del template con base en un ",[3933,27840,27841],{},"arreglo de dependencias",". Si ninguna dependencia cambia, Vue omite el ",[9295,27844,27845],{},"patch"," de ese subárbol.",[15,27848,27849,27850,27852,27853,1679],{},"Útil cuando una porción del template es costosa y depende de pocas señales estables. Nota importante: ",[87,27851,27775],{}," existe desde Vue ",[3933,27854,27855],{},"3.2+",[3087,27857,27858],{"id":27778},[87,27859,27778],{},[15,27861,27862,27863,27866,27867,27869],{},"Le dice a Vue que ",[3933,27864,27865],{},"no compile"," ese bloque. Las interpolaciones ",[87,27868,26498],{}," se muestran como texto literal.",[15,27871,27872],{},"Es perfecto para ejemplos de código o snippets donde quieres imprimir sintaxis de Vue sin evaluarla.",[22,27874,6322],{"id":6321},[15,27876,27877],{},"Usa estas directivas cuando tengas una razón concreta y medible:",[33,27879,27880,27885,27893],{},[36,27881,27882,27884],{},[87,27883,27772],{},": bloques estáticos que no deben reaccionar a cambios.",[36,27886,27887,27889,27890,1679],{},[87,27888,27775],{},": listas o tarjetas complejas con alto costo de render cuando conoces ",[3933,27891,27892],{},"dependencias exactas",[36,27894,27895,27897],{},[87,27896,27778],{},": documentación, tutoriales o demos donde quieres mostrar moustaches literalmente.",[15,27899,27900],{},"Casos reales:",[33,27902,27903,27909,27912],{},[36,27904,27905,27906,27908],{},"Dashboard con cards densas que solo cambian por ",[87,27907,580],{}," y estado puntual.",[36,27910,27911],{},"Pantalla de onboarding con secciones 100% estáticas.",[36,27913,27914],{},"Vista de documentación dentro de tu app que muestra sintaxis de Vue “en crudo”.",[22,27916,6349],{"id":6348},[15,27918,27919],{},"Evítalas cuando solo intentas “optimizar por optimizar”:",[33,27921,27922,27927,27932],{},[36,27923,2095,27924,27926],{},[87,27925,27772],{}," en datos que luego deben actualizarse.",[36,27928,2095,27929,27931],{},[87,27930,27775],{}," sin entender bien sus dependencias; puede ocultar cambios esperados.",[36,27933,2095,27934,27936],{},[87,27935,27778],{}," en bloques que sí necesitan bindings o eventos.",[15,27938,27939],{},"Si no has detectado un problema real de render, primero mide con Vue Devtools antes de complejizar el template.",[22,27941,11371],{"id":11370},[33,27943,27944,27949,27954],{},[36,27945,27946,27948],{},[87,27947,27772],{},": congelado permanente después del primer render.",[36,27950,27951,27953],{},[87,27952,27775],{},": congelado condicional según dependencias.",[36,27955,27956,27958],{},[87,27957,27778],{},": sin compilación de plantilla; salida literal.",[15,27960,27961],{},"Regla rápida:",[33,27963,27964,27969,27974],{},[36,27965,27966,27967,1679],{},"Quieres “no volver a actualizar nunca”: ",[87,27968,27772],{},[36,27970,27971,27972,1679],{},"Quieres “actualizar solo si cambian X dependencias”: ",[87,27973,27775],{},[36,27975,27976,27977,1679],{},"Quieres “mostrar template sin interpretar”: ",[87,27978,27778],{},[22,27980,3085],{"id":3084},[3087,27982,27984,27985,27987],{"id":27983},"_1-aplicar-v-once-sobre-datos-que-sí-cambian","1) Aplicar ",[87,27986,27772],{}," sobre datos que sí cambian",[15,27989,27990,27991,27993],{},"Si la fuente cambia pero el nodo tiene ",[87,27992,27772],{},", la UI quedará desfasada.",[15,27995,27996,27999,28000,28002],{},[3933,27997,27998],{},"Solución:"," limita ",[87,28001,27772],{}," a contenido estrictamente inmutable.",[3087,28004,28006,28007],{"id":28005},"_2-definir-mal-dependencias-en-v-memo","2) Definir mal dependencias en ",[87,28008,27775],{},[15,28010,28011],{},"Si olvidas una dependencia relevante, Vue puede reutilizar un subárbol viejo.\nSi incluyes demasiadas dependencias, pierdes el beneficio.",[15,28013,28014,28016],{},[3933,28015,27998],{}," declara solo señales que realmente afectan el HTML renderizado (y asegúrate de incluir todas).",[3087,28018,28020,28021,28023],{"id":28019},"_3-esperar-que-v-pre-procese-directivas-o-interpolaciones","3) Esperar que ",[87,28022,27778],{}," procese directivas o interpolaciones",[15,28025,3810,28026,28028],{},[87,28027,27778],{},", Vue no interpreta nada dentro del bloque (ni moustaches, ni directivas anidadas).",[15,28030,28031,22922,28033,28035],{},[3933,28032,27998],{},[87,28034,27778],{}," solo para salida literal\u002Fdocumentación.",[3087,28037,28039],{"id":28038},"_4-usarlas-sin-validar-impacto","4) Usarlas sin validar impacto",[15,28041,28042],{},"Agregar estas directivas indiscriminadamente puede aumentar complejidad sin mejorar performance real.",[15,28044,28045,28047],{},[3933,28046,27998],{}," perfila primero y optimiza donde el costo sea comprobable.",[22,28049,7997],{"id":7996},[3087,28051,28053,28054],{"id":28052},"_1-bloque-estático-con-v-once","1) Bloque estático con ",[87,28055,27772],{},[154,28057,28060],{"className":156,"code":28058,"filename":3260,"highlights":28059,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst counter = ref(0);\nconst buildVersion = \"2026.02.24\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"counter++\">Clicks: {{ counter }}\u003C\u002Fbutton>\n\n  \u003Cp v-once>Build: {{ buildVersion }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[294],[87,28061,28062,28078,28090,28094,28111,28125,28133,28137,28145,28165,28169,28186],{"__ignoreMap":163},[167,28063,28064,28066,28068,28070,28072,28074,28076],{"class":169,"line":170},[167,28065,174],{"class":173},[167,28067,178],{"class":177},[167,28069,182],{"class":181},[167,28071,1050],{"class":181},[167,28073,267],{"class":173},[167,28075,1055],{"class":201},[167,28077,185],{"class":173},[167,28079,28080,28082,28084,28086,28088],{"class":169,"line":188},[167,28081,192],{"class":191},[167,28083,195],{"class":173},[167,28085,198],{"class":191},[167,28087,24041],{"class":201},[167,28089,24044],{"class":173},[167,28091,28092],{"class":169,"line":205},[167,28093,209],{"emptyLinePlaceholder":208},[167,28095,28096,28098,28101,28103,28105,28107,28109],{"class":169,"line":160},[167,28097,216],{"class":191},[167,28099,28100],{"class":219}," counter",[167,28102,223],{"class":191},[167,28104,226],{"class":181},[167,28106,229],{"class":173},[167,28108,1960],{"class":219},[167,28110,24169],{"class":173},[167,28112,28113,28115,28118,28120,28123],{"class":169,"line":238},[167,28114,216],{"class":191},[167,28116,28117],{"class":219}," buildVersion",[167,28119,223],{"class":191},[167,28121,28122],{"class":201}," \"2026.02.24\"",[167,28124,24044],{"class":173},[167,28126,28127,28129,28131],{"class":169,"line":243},[167,28128,282],{"class":173},[167,28130,178],{"class":177},[167,28132,185],{"class":173},[167,28134,28135],{"class":169,"line":261},[167,28136,209],{"emptyLinePlaceholder":208},[167,28138,28139,28141,28143],{"class":169,"line":273},[167,28140,174],{"class":173},[167,28142,299],{"class":177},[167,28144,185],{"class":173},[167,28146,28147,28149,28151,28153,28155,28158,28161,28163],{"class":169,"line":279},[167,28148,307],{"class":173},[167,28150,507],{"class":177},[167,28152,1182],{"class":181},[167,28154,267],{"class":173},[167,28156,28157],{"class":201},"\"counter++\"",[167,28159,28160],{"class":173},">Clicks: {{ counter }}\u003C\u002F",[167,28162,507],{"class":177},[167,28164,185],{"class":173},[167,28166,28167],{"class":169,"line":289},[167,28168,209],{"emptyLinePlaceholder":208},[167,28170,28172,28174,28176,28179,28182,28184],{"class":28171,"line":294},[169,213],[167,28173,307],{"class":173},[167,28175,15],{"class":177},[167,28177,28178],{"class":181}," v-once",[167,28180,28181],{"class":173},">Build: {{ buildVersion }}\u003C\u002F",[167,28183,15],{"class":177},[167,28185,185],{"class":173},[167,28187,28188,28190,28192],{"class":169,"line":304},[167,28189,282],{"class":173},[167,28191,299],{"class":177},[167,28193,185],{"class":173},[154,28195,28198],{"className":156,"code":28196,"filename":3973,"highlights":28197,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      counter: 0,\n      buildVersion: \"2026.02.24\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"counter++\">Clicks: {{ counter }}\u003C\u002Fbutton>\n  \u003Cp v-once>Build: {{ buildVersion }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[161],[87,28199,28200,28214,28222,28228,28234,28243,28253,28257,28261,28265,28273,28277,28285,28303,28318],{"__ignoreMap":163},[167,28201,28202,28204,28206,28208,28210,28212],{"class":169,"line":170},[167,28203,174],{"class":173},[167,28205,178],{"class":177},[167,28207,1050],{"class":181},[167,28209,267],{"class":173},[167,28211,1055],{"class":201},[167,28213,185],{"class":173},[167,28215,28216,28218,28220],{"class":169,"line":188},[167,28217,608],{"class":191},[167,28219,3991],{"class":191},[167,28221,1905],{"class":173},[167,28223,28224,28226],{"class":169,"line":205},[167,28225,7176],{"class":181},[167,28227,763],{"class":173},[167,28229,28230,28232],{"class":169,"line":160},[167,28231,1937],{"class":191},[167,28233,1905],{"class":173},[167,28235,28236,28239,28241],{"class":169,"line":238},[167,28237,28238],{"class":173},"      counter: ",[167,28240,1960],{"class":219},[167,28242,393],{"class":173},[167,28244,28245,28248,28251],{"class":169,"line":243},[167,28246,28247],{"class":173},"      buildVersion: ",[167,28249,28250],{"class":201},"\"2026.02.24\"",[167,28252,393],{"class":173},[167,28254,28255],{"class":169,"line":261},[167,28256,24370],{"class":173},[167,28258,28259],{"class":169,"line":273},[167,28260,398],{"class":173},[167,28262,28263],{"class":169,"line":279},[167,28264,24148],{"class":173},[167,28266,28267,28269,28271],{"class":169,"line":289},[167,28268,282],{"class":173},[167,28270,178],{"class":177},[167,28272,185],{"class":173},[167,28274,28275],{"class":169,"line":294},[167,28276,209],{"emptyLinePlaceholder":208},[167,28278,28279,28281,28283],{"class":169,"line":304},[167,28280,174],{"class":173},[167,28282,299],{"class":177},[167,28284,185],{"class":173},[167,28286,28287,28289,28291,28293,28295,28297,28299,28301],{"class":169,"line":313},[167,28288,307],{"class":173},[167,28290,507],{"class":177},[167,28292,1182],{"class":181},[167,28294,267],{"class":173},[167,28296,28157],{"class":201},[167,28298,28160],{"class":173},[167,28300,507],{"class":177},[167,28302,185],{"class":173},[167,28304,28306,28308,28310,28312,28314,28316],{"class":28305,"line":161},[169,213],[167,28307,307],{"class":173},[167,28309,15],{"class":177},[167,28311,28178],{"class":181},[167,28313,28181],{"class":173},[167,28315,15],{"class":177},[167,28317,185],{"class":173},[167,28319,28320,28322,28324],{"class":169,"line":335},[167,28321,282],{"class":173},[167,28323,299],{"class":177},[167,28325,185],{"class":173},[5367,28327,28328],{},[15,28329,28330,28331,28334,28335,28337],{},"Nota: este ejemplo asume que ",[87,28332,28333],{},"buildVersion"," es inmutable. Si en tu app podría cambiar (p. ej., viene de una llamada async), ",[87,28336,27772],{}," no es lo correcto.",[3087,28339,28341,28342],{"id":28340},"_2-segmento-pesado-con-v-memo","2) Segmento pesado con ",[87,28343,27775],{},[154,28345,28348],{"className":156,"code":28346,"filename":3260,"highlights":28347,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\ntype UserCard = { id: number; name: string; isOnline: boolean; score: number };\n\nconst selectedId = ref\u003Cnumber | null>(null);\nconst users = ref\u003CUserCard[]>([\n  { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n  { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n  { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-for=\"user in users\"\n    :key=\"user.id\"\n    v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n    class=\"card\"\n  >\n    \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n    \u003Cp>Puntaje: {{ user.score }}\u003C\u002Fp>\n    \u003Cp>{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C\u002Fp>\n    \u003Cbutton @click=\"selectedId = user.id\">Seleccionar\u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[495],[87,28349,28350,28366,28378,28382,28428,28432,28457,28474,28497,28519,28541,28546,28554,28558,28566,28573,28582,28591,28602,28612,28616,28629,28642,28655,28675,28683],{"__ignoreMap":163},[167,28351,28352,28354,28356,28358,28360,28362,28364],{"class":169,"line":170},[167,28353,174],{"class":173},[167,28355,178],{"class":177},[167,28357,182],{"class":181},[167,28359,1050],{"class":181},[167,28361,267],{"class":173},[167,28363,1055],{"class":201},[167,28365,185],{"class":173},[167,28367,28368,28370,28372,28374,28376],{"class":169,"line":188},[167,28369,192],{"class":191},[167,28371,195],{"class":173},[167,28373,198],{"class":191},[167,28375,24041],{"class":201},[167,28377,24044],{"class":173},[167,28379,28380],{"class":169,"line":205},[167,28381,209],{"emptyLinePlaceholder":208},[167,28383,28384,28386,28389,28391,28393,28395,28397,28399,28401,28403,28405,28407,28409,28412,28414,28417,28419,28422,28424,28426],{"class":169,"line":160},[167,28385,569],{"class":191},[167,28387,28388],{"class":181}," UserCard",[167,28390,223],{"class":191},[167,28392,577],{"class":173},[167,28394,580],{"class":254},[167,28396,583],{"class":191},[167,28398,8493],{"class":219},[167,28400,589],{"class":173},[167,28402,592],{"class":254},[167,28404,583],{"class":191},[167,28406,586],{"class":219},[167,28408,589],{"class":173},[167,28410,28411],{"class":254},"isOnline",[167,28413,583],{"class":191},[167,28415,28416],{"class":219}," boolean",[167,28418,589],{"class":173},[167,28420,28421],{"class":254},"score",[167,28423,583],{"class":191},[167,28425,8493],{"class":219},[167,28427,25582],{"class":173},[167,28429,28430],{"class":169,"line":238},[167,28431,209],{"emptyLinePlaceholder":208},[167,28433,28434,28436,28439,28441,28443,28445,28447,28449,28451,28453,28455],{"class":169,"line":243},[167,28435,216],{"class":191},[167,28437,28438],{"class":219}," selectedId",[167,28440,223],{"class":191},[167,28442,226],{"class":181},[167,28444,174],{"class":173},[167,28446,13929],{"class":219},[167,28448,659],{"class":191},[167,28450,6567],{"class":219},[167,28452,6570],{"class":173},[167,28454,6573],{"class":219},[167,28456,24169],{"class":173},[167,28458,28459,28461,28463,28465,28467,28469,28471],{"class":169,"line":261},[167,28460,216],{"class":191},[167,28462,16954],{"class":219},[167,28464,223],{"class":191},[167,28466,226],{"class":181},[167,28468,174],{"class":173},[167,28470,5309],{"class":181},[167,28472,28473],{"class":173},"[]>([\n",[167,28475,28476,28478,28480,28482,28484,28487,28489,28492,28495],{"class":169,"line":273},[167,28477,1832],{"class":173},[167,28479,1835],{"class":219},[167,28481,1838],{"class":173},[167,28483,23487],{"class":201},[167,28485,28486],{"class":173},", isOnline: ",[167,28488,390],{"class":219},[167,28490,28491],{"class":173},", score: ",[167,28493,28494],{"class":219},"98",[167,28496,1856],{"class":173},[167,28498,28499,28501,28503,28505,28508,28510,28512,28514,28517],{"class":169,"line":279},[167,28500,1832],{"class":173},[167,28502,1853],{"class":219},[167,28504,1838],{"class":173},[167,28506,28507],{"class":201},"\"Luis\"",[167,28509,28486],{"class":173},[167,28511,3392],{"class":219},[167,28513,28491],{"class":173},[167,28515,28516],{"class":219},"77",[167,28518,1856],{"class":173},[167,28520,28521,28523,28525,28527,28530,28532,28534,28536,28539],{"class":169,"line":289},[167,28522,1832],{"class":173},[167,28524,8203],{"class":219},[167,28526,1838],{"class":173},[167,28528,28529],{"class":201},"\"Marta\"",[167,28531,28486],{"class":173},[167,28533,390],{"class":219},[167,28535,28491],{"class":173},[167,28537,28538],{"class":219},"88",[167,28540,1856],{"class":173},[167,28542,28543],{"class":169,"line":294},[167,28544,28545],{"class":173},"]);\n",[167,28547,28548,28550,28552],{"class":169,"line":304},[167,28549,282],{"class":173},[167,28551,178],{"class":177},[167,28553,185],{"class":173},[167,28555,28556],{"class":169,"line":313},[167,28557,209],{"emptyLinePlaceholder":208},[167,28559,28560,28562,28564],{"class":169,"line":161},[167,28561,174],{"class":173},[167,28563,299],{"class":177},[167,28565,185],{"class":173},[167,28567,28568,28570],{"class":169,"line":335},[167,28569,307],{"class":173},[167,28571,28572],{"class":177},"article\n",[167,28574,28575,28577,28579],{"class":169,"line":341},[167,28576,3530],{"class":181},[167,28578,267],{"class":173},[167,28580,28581],{"class":201},"\"user in users\"\n",[167,28583,28584,28586,28588],{"class":169,"line":489},[167,28585,3541],{"class":181},[167,28587,267],{"class":173},[167,28589,28590],{"class":201},"\"user.id\"\n",[167,28592,28594,28597,28599],{"class":28593,"line":495},[169,213],[167,28595,28596],{"class":181},"    v-memo",[167,28598,267],{"class":173},[167,28600,28601],{"class":201},"\"[user.id, user.isOnline, selectedId === user.id]\"\n",[167,28603,28604,28607,28609],{"class":169,"line":501},[167,28605,28606],{"class":181},"    class",[167,28608,267],{"class":173},[167,28610,28611],{"class":201},"\"card\"\n",[167,28613,28614],{"class":169,"line":512},[167,28615,492],{"class":173},[167,28617,28618,28620,28622,28625,28627],{"class":169,"line":781},[167,28619,1257],{"class":173},[167,28621,3087],{"class":177},[167,28623,28624],{"class":173},">{{ user.name }}\u003C\u002F",[167,28626,3087],{"class":177},[167,28628,185],{"class":173},[167,28630,28631,28633,28635,28638,28640],{"class":169,"line":786},[167,28632,1257],{"class":173},[167,28634,15],{"class":177},[167,28636,28637],{"class":173},">Puntaje: {{ user.score }}\u003C\u002F",[167,28639,15],{"class":177},[167,28641,185],{"class":173},[167,28643,28644,28646,28648,28651,28653],{"class":169,"line":2678},[167,28645,1257],{"class":173},[167,28647,15],{"class":177},[167,28649,28650],{"class":173},">{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C\u002F",[167,28652,15],{"class":177},[167,28654,185],{"class":173},[167,28656,28657,28659,28661,28663,28665,28668,28671,28673],{"class":169,"line":2692},[167,28658,1257],{"class":173},[167,28660,507],{"class":177},[167,28662,1182],{"class":181},[167,28664,267],{"class":173},[167,28666,28667],{"class":201},"\"selectedId = user.id\"",[167,28669,28670],{"class":173},">Seleccionar\u003C\u002F",[167,28672,507],{"class":177},[167,28674,185],{"class":173},[167,28676,28677,28679,28681],{"class":169,"line":3575},[167,28678,504],{"class":173},[167,28680,3696],{"class":177},[167,28682,185],{"class":173},[167,28684,28685,28687,28689],{"class":169,"line":5028},[167,28686,282],{"class":173},[167,28688,299],{"class":177},[167,28690,185],{"class":173},[154,28692,28695],{"className":156,"code":28693,"filename":3973,"highlights":28694,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      selectedId: null as number | null,\n      users: [\n        { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n        { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n        { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n      ],\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-for=\"user in users\"\n    :key=\"user.id\"\n    v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n    class=\"card\"\n  >\n    \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n    \u003Cp>Puntaje: {{ user.score }}\u003C\u002Fp>\n    \u003Cp>{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C\u002Fp>\n    \u003Cbutton @click=\"selectedId = user.id\">Seleccionar\u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[512],[87,28696,28697,28711,28719,28725,28731,28748,28753,28773,28793,28813,28817,28821,28825,28829,28837,28841,28849,28855,28863,28871,28880,28888,28892,28904,28916,28928,28946,28954],{"__ignoreMap":163},[167,28698,28699,28701,28703,28705,28707,28709],{"class":169,"line":170},[167,28700,174],{"class":173},[167,28702,178],{"class":177},[167,28704,1050],{"class":181},[167,28706,267],{"class":173},[167,28708,1055],{"class":201},[167,28710,185],{"class":173},[167,28712,28713,28715,28717],{"class":169,"line":188},[167,28714,608],{"class":191},[167,28716,3991],{"class":191},[167,28718,1905],{"class":173},[167,28720,28721,28723],{"class":169,"line":205},[167,28722,7176],{"class":181},[167,28724,763],{"class":173},[167,28726,28727,28729],{"class":169,"line":160},[167,28728,1937],{"class":191},[167,28730,1905],{"class":173},[167,28732,28733,28736,28738,28740,28742,28744,28746],{"class":169,"line":238},[167,28734,28735],{"class":173},"      selectedId: ",[167,28737,6573],{"class":219},[167,28739,654],{"class":191},[167,28741,8493],{"class":219},[167,28743,659],{"class":191},[167,28745,6567],{"class":219},[167,28747,393],{"class":173},[167,28749,28750],{"class":169,"line":243},[167,28751,28752],{"class":173},"      users: [\n",[167,28754,28755,28757,28759,28761,28763,28765,28767,28769,28771],{"class":169,"line":261},[167,28756,8677],{"class":173},[167,28758,1835],{"class":219},[167,28760,1838],{"class":173},[167,28762,23487],{"class":201},[167,28764,28486],{"class":173},[167,28766,390],{"class":219},[167,28768,28491],{"class":173},[167,28770,28494],{"class":219},[167,28772,1856],{"class":173},[167,28774,28775,28777,28779,28781,28783,28785,28787,28789,28791],{"class":169,"line":273},[167,28776,8677],{"class":173},[167,28778,1853],{"class":219},[167,28780,1838],{"class":173},[167,28782,28507],{"class":201},[167,28784,28486],{"class":173},[167,28786,3392],{"class":219},[167,28788,28491],{"class":173},[167,28790,28516],{"class":219},[167,28792,1856],{"class":173},[167,28794,28795,28797,28799,28801,28803,28805,28807,28809,28811],{"class":169,"line":279},[167,28796,8677],{"class":173},[167,28798,8203],{"class":219},[167,28800,1838],{"class":173},[167,28802,28529],{"class":201},[167,28804,28486],{"class":173},[167,28806,390],{"class":219},[167,28808,28491],{"class":173},[167,28810,28538],{"class":219},[167,28812,1856],{"class":173},[167,28814,28815],{"class":169,"line":289},[167,28816,16114],{"class":173},[167,28818,28819],{"class":169,"line":294},[167,28820,24370],{"class":173},[167,28822,28823],{"class":169,"line":304},[167,28824,398],{"class":173},[167,28826,28827],{"class":169,"line":313},[167,28828,24148],{"class":173},[167,28830,28831,28833,28835],{"class":169,"line":161},[167,28832,282],{"class":173},[167,28834,178],{"class":177},[167,28836,185],{"class":173},[167,28838,28839],{"class":169,"line":335},[167,28840,209],{"emptyLinePlaceholder":208},[167,28842,28843,28845,28847],{"class":169,"line":341},[167,28844,174],{"class":173},[167,28846,299],{"class":177},[167,28848,185],{"class":173},[167,28850,28851,28853],{"class":169,"line":489},[167,28852,307],{"class":173},[167,28854,28572],{"class":177},[167,28856,28857,28859,28861],{"class":169,"line":495},[167,28858,3530],{"class":181},[167,28860,267],{"class":173},[167,28862,28581],{"class":201},[167,28864,28865,28867,28869],{"class":169,"line":501},[167,28866,3541],{"class":181},[167,28868,267],{"class":173},[167,28870,28590],{"class":201},[167,28872,28874,28876,28878],{"class":28873,"line":512},[169,213],[167,28875,28596],{"class":181},[167,28877,267],{"class":173},[167,28879,28601],{"class":201},[167,28881,28882,28884,28886],{"class":169,"line":781},[167,28883,28606],{"class":181},[167,28885,267],{"class":173},[167,28887,28611],{"class":201},[167,28889,28890],{"class":169,"line":786},[167,28891,492],{"class":173},[167,28893,28894,28896,28898,28900,28902],{"class":169,"line":2678},[167,28895,1257],{"class":173},[167,28897,3087],{"class":177},[167,28899,28624],{"class":173},[167,28901,3087],{"class":177},[167,28903,185],{"class":173},[167,28905,28906,28908,28910,28912,28914],{"class":169,"line":2692},[167,28907,1257],{"class":173},[167,28909,15],{"class":177},[167,28911,28637],{"class":173},[167,28913,15],{"class":177},[167,28915,185],{"class":173},[167,28917,28918,28920,28922,28924,28926],{"class":169,"line":3575},[167,28919,1257],{"class":173},[167,28921,15],{"class":177},[167,28923,28650],{"class":173},[167,28925,15],{"class":177},[167,28927,185],{"class":173},[167,28929,28930,28932,28934,28936,28938,28940,28942,28944],{"class":169,"line":5028},[167,28931,1257],{"class":173},[167,28933,507],{"class":177},[167,28935,1182],{"class":181},[167,28937,267],{"class":173},[167,28939,28667],{"class":201},[167,28941,28670],{"class":173},[167,28943,507],{"class":177},[167,28945,185],{"class":173},[167,28947,28948,28950,28952],{"class":169,"line":5037},[167,28949,504],{"class":173},[167,28951,3696],{"class":177},[167,28953,185],{"class":173},[167,28955,28956,28958,28960],{"class":169,"line":5046},[167,28957,282],{"class":173},[167,28959,299],{"class":177},[167,28961,185],{"class":173},[5367,28963,28964],{},[15,28965,28966,28967,28969,28970,28973,28974,28977],{},"Importante: el arreglo de ",[87,28968,27775],{}," debe incluir ",[3933,28971,28972],{},"todo"," lo que afecte el HTML. Si ",[87,28975,28976],{},"user.score"," puede cambiar, también debería estar en dependencias (si no, el DOM podría quedarse con un puntaje viejo).",[3087,28979,28981,28982],{"id":28980},"_3-bloque-literal-con-v-pre","3) Bloque literal con ",[87,28983,27778],{},[154,28985,28988],{"className":156,"code":28986,"filename":3260,"highlights":28987,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst message = \"No debe renderizarse dentro del bloque v-pre\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C\u002Fp>\n\n  \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n",[273],[87,28989,28990,29006,29020,29028,29032,29040,29053,29057,29074],{"__ignoreMap":163},[167,28991,28992,28994,28996,28998,29000,29002,29004],{"class":169,"line":170},[167,28993,174],{"class":173},[167,28995,178],{"class":177},[167,28997,182],{"class":181},[167,28999,1050],{"class":181},[167,29001,267],{"class":173},[167,29003,1055],{"class":201},[167,29005,185],{"class":173},[167,29007,29008,29010,29013,29015,29018],{"class":169,"line":188},[167,29009,216],{"class":191},[167,29011,29012],{"class":219}," message",[167,29014,223],{"class":191},[167,29016,29017],{"class":201}," \"No debe renderizarse dentro del bloque v-pre\"",[167,29019,24044],{"class":173},[167,29021,29022,29024,29026],{"class":169,"line":205},[167,29023,282],{"class":173},[167,29025,178],{"class":177},[167,29027,185],{"class":173},[167,29029,29030],{"class":169,"line":160},[167,29031,209],{"emptyLinePlaceholder":208},[167,29033,29034,29036,29038],{"class":169,"line":238},[167,29035,174],{"class":173},[167,29037,299],{"class":177},[167,29039,185],{"class":173},[167,29041,29042,29044,29046,29049,29051],{"class":169,"line":243},[167,29043,307],{"class":173},[167,29045,15],{"class":177},[167,29047,29048],{"class":173},">{{ message }}\u003C\u002F",[167,29050,15],{"class":177},[167,29052,185],{"class":173},[167,29054,29055],{"class":169,"line":261},[167,29056,209],{"emptyLinePlaceholder":208},[167,29058,29060,29062,29064,29067,29070,29072],{"class":29059,"line":273},[169,213],[167,29061,307],{"class":173},[167,29063,154],{"class":177},[167,29065,29066],{"class":181}," v-pre",[167,29068,29069],{"class":173},">{{ message }} + {{ 2 + 2 }}\u003C\u002F",[167,29071,154],{"class":177},[167,29073,185],{"class":173},[167,29075,29076,29078,29080],{"class":169,"line":279},[167,29077,282],{"class":173},[167,29079,299],{"class":177},[167,29081,185],{"class":173},[154,29083,29086],{"className":156,"code":29084,"filename":3973,"highlights":29085,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      message: \"No debe renderizarse dentro del bloque v-pre\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C\u002Fp>\n  \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n",[313],[87,29087,29088,29102,29110,29116,29122,29132,29136,29140,29144,29152,29156,29164,29176,29191],{"__ignoreMap":163},[167,29089,29090,29092,29094,29096,29098,29100],{"class":169,"line":170},[167,29091,174],{"class":173},[167,29093,178],{"class":177},[167,29095,1050],{"class":181},[167,29097,267],{"class":173},[167,29099,1055],{"class":201},[167,29101,185],{"class":173},[167,29103,29104,29106,29108],{"class":169,"line":188},[167,29105,608],{"class":191},[167,29107,3991],{"class":191},[167,29109,1905],{"class":173},[167,29111,29112,29114],{"class":169,"line":205},[167,29113,7176],{"class":181},[167,29115,763],{"class":173},[167,29117,29118,29120],{"class":169,"line":160},[167,29119,1937],{"class":191},[167,29121,1905],{"class":173},[167,29123,29124,29127,29130],{"class":169,"line":238},[167,29125,29126],{"class":173},"      message: ",[167,29128,29129],{"class":201},"\"No debe renderizarse dentro del bloque v-pre\"",[167,29131,393],{"class":173},[167,29133,29134],{"class":169,"line":243},[167,29135,24370],{"class":173},[167,29137,29138],{"class":169,"line":261},[167,29139,398],{"class":173},[167,29141,29142],{"class":169,"line":273},[167,29143,24148],{"class":173},[167,29145,29146,29148,29150],{"class":169,"line":279},[167,29147,282],{"class":173},[167,29149,178],{"class":177},[167,29151,185],{"class":173},[167,29153,29154],{"class":169,"line":289},[167,29155,209],{"emptyLinePlaceholder":208},[167,29157,29158,29160,29162],{"class":169,"line":294},[167,29159,174],{"class":173},[167,29161,299],{"class":177},[167,29163,185],{"class":173},[167,29165,29166,29168,29170,29172,29174],{"class":169,"line":304},[167,29167,307],{"class":173},[167,29169,15],{"class":177},[167,29171,29048],{"class":173},[167,29173,15],{"class":177},[167,29175,185],{"class":173},[167,29177,29179,29181,29183,29185,29187,29189],{"class":29178,"line":313},[169,213],[167,29180,307],{"class":173},[167,29182,154],{"class":177},[167,29184,29066],{"class":181},[167,29186,29069],{"class":173},[167,29188,154],{"class":177},[167,29190,185],{"class":173},[167,29192,29193,29195,29197],{"class":169,"line":161},[167,29194,282],{"class":173},[167,29196,299],{"class":177},[167,29198,185],{"class":173},[3087,29200,29202],{"id":29201},"_4-ejemplo-completo","4) Ejemplo completo",[15,29204,29205,29206,29208,29209,29211,29212,29214],{},"Componente de lista con cabecera estática (",[87,29207,27772],{},"), tarjetas memoizadas (",[87,29210,27775],{},") y snippet literal (",[87,29213,27778],{},"):",[154,29216,29218],{"className":156,"code":29217,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = { id: number; title: string; done: boolean; owner: string };\n\nconst selectedOwner = ref\u003C\"all\" | string>(\"all\");\nconst tasks = ref\u003CTask[]>([\n  { id: 1, title: \"Configurar CI\", done: true, owner: \"Ana\" },\n  { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n  { id: 3, title: \"Actualizar docs\", done: false, owner: \"Ana\" },\n]);\n\nconst owners = computed(() => [\"all\", ...new Set(tasks.value.map((t) => t.owner))]);\nconst visibleTasks = computed(() =>\n  selectedOwner.value === \"all\"\n    ? tasks.value\n    : tasks.value.filter((t) => t.owner === selectedOwner.value)\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cheader v-once>\n    \u003Ch2>Panel de tareas del sprint\u003C\u002Fh2>\n    \u003Cp>Contenido institucional estático\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Clabel>\n    Filtrar por owner\n    \u003Cselect v-model=\"selectedOwner\">\n      \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Flabel>\n\n  \u003Csection\n    v-for=\"task in visibleTasks\"\n    :key=\"task.id\"\n    v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n    class=\"task-card\"\n  >\n    \u003Ch3>{{ task.title }}\u003C\u002Fh3>\n    \u003Cp>Owner: {{ task.owner }}\u003C\u002Fp>\n    \u003Cp>Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Caside>\n    \u003Ch4>Snippet para docs\u003C\u002Fh4>\n    \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C\u002Fcode>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,29219,29220,29236,29248,29252,29297,29301,29327,29343,29364,29385,29406,29410,29414,29457,29471,29481,29488,29513,29517,29525,29529,29537,29547,29560,29573,29581,29585,29593,29598,29613,29648,29656,29664,29668,29675,29683,29691,29700,29709,29713,29725,29738,29751,29759,29763,29771,29785,29800,29808],{"__ignoreMap":163},[167,29221,29222,29224,29226,29228,29230,29232,29234],{"class":169,"line":170},[167,29223,174],{"class":173},[167,29225,178],{"class":177},[167,29227,182],{"class":181},[167,29229,1050],{"class":181},[167,29231,267],{"class":173},[167,29233,1055],{"class":201},[167,29235,185],{"class":173},[167,29237,29238,29240,29242,29244,29246],{"class":169,"line":188},[167,29239,192],{"class":191},[167,29241,1805],{"class":173},[167,29243,198],{"class":191},[167,29245,24041],{"class":201},[167,29247,24044],{"class":173},[167,29249,29250],{"class":169,"line":205},[167,29251,209],{"emptyLinePlaceholder":208},[167,29253,29254,29256,29258,29260,29262,29264,29266,29268,29270,29273,29275,29277,29279,29282,29284,29286,29288,29291,29293,29295],{"class":169,"line":160},[167,29255,569],{"class":191},[167,29257,11605],{"class":181},[167,29259,223],{"class":191},[167,29261,577],{"class":173},[167,29263,580],{"class":254},[167,29265,583],{"class":191},[167,29267,8493],{"class":219},[167,29269,589],{"class":173},[167,29271,29272],{"class":254},"title",[167,29274,583],{"class":191},[167,29276,586],{"class":219},[167,29278,589],{"class":173},[167,29280,29281],{"class":254},"done",[167,29283,583],{"class":191},[167,29285,28416],{"class":219},[167,29287,589],{"class":173},[167,29289,29290],{"class":254},"owner",[167,29292,583],{"class":191},[167,29294,586],{"class":219},[167,29296,25582],{"class":173},[167,29298,29299],{"class":169,"line":238},[167,29300,209],{"emptyLinePlaceholder":208},[167,29302,29303,29305,29308,29310,29312,29314,29317,29319,29321,29323,29325],{"class":169,"line":243},[167,29304,216],{"class":191},[167,29306,29307],{"class":219}," selectedOwner",[167,29309,223],{"class":191},[167,29311,226],{"class":181},[167,29313,174],{"class":173},[167,29315,29316],{"class":201},"\"all\"",[167,29318,659],{"class":191},[167,29320,586],{"class":219},[167,29322,6570],{"class":173},[167,29324,29316],{"class":201},[167,29326,24169],{"class":173},[167,29328,29329,29331,29333,29335,29337,29339,29341],{"class":169,"line":261},[167,29330,216],{"class":191},[167,29332,3368],{"class":219},[167,29334,223],{"class":191},[167,29336,226],{"class":181},[167,29338,174],{"class":173},[167,29340,11659],{"class":181},[167,29342,28473],{"class":173},[167,29344,29345,29347,29349,29351,29354,29356,29358,29360,29362],{"class":169,"line":273},[167,29346,1832],{"class":173},[167,29348,1835],{"class":219},[167,29350,3383],{"class":173},[167,29352,29353],{"class":201},"\"Configurar CI\"",[167,29355,8164],{"class":173},[167,29357,390],{"class":219},[167,29359,8169],{"class":173},[167,29361,23487],{"class":201},[167,29363,1856],{"class":173},[167,29365,29366,29368,29370,29372,29375,29377,29379,29381,29383],{"class":169,"line":279},[167,29367,1832],{"class":173},[167,29369,1853],{"class":219},[167,29371,3383],{"class":173},[167,29373,29374],{"class":201},"\"Refactor store\"",[167,29376,8164],{"class":173},[167,29378,3392],{"class":219},[167,29380,8169],{"class":173},[167,29382,28507],{"class":201},[167,29384,1856],{"class":173},[167,29386,29387,29389,29391,29393,29396,29398,29400,29402,29404],{"class":169,"line":289},[167,29388,1832],{"class":173},[167,29390,8203],{"class":219},[167,29392,3383],{"class":173},[167,29394,29395],{"class":201},"\"Actualizar docs\"",[167,29397,8164],{"class":173},[167,29399,3392],{"class":219},[167,29401,8169],{"class":173},[167,29403,23487],{"class":201},[167,29405,1856],{"class":173},[167,29407,29408],{"class":169,"line":294},[167,29409,28545],{"class":173},[167,29411,29412],{"class":169,"line":304},[167,29413,209],{"emptyLinePlaceholder":208},[167,29415,29416,29418,29421,29423,29425,29427,29429,29431,29433,29435,29438,29440,29443,29445,29447,29450,29452,29454],{"class":169,"line":313},[167,29417,216],{"class":191},[167,29419,29420],{"class":219}," owners",[167,29422,223],{"class":191},[167,29424,1898],{"class":181},[167,29426,1493],{"class":173},[167,29428,639],{"class":191},[167,29430,1103],{"class":173},[167,29432,29316],{"class":201},[167,29434,1025],{"class":173},[167,29436,29437],{"class":191},"...new",[167,29439,22324],{"class":181},[167,29441,29442],{"class":173},"(tasks.value.",[167,29444,9844],{"class":181},[167,29446,1918],{"class":173},[167,29448,29449],{"class":254},"t",[167,29451,693],{"class":173},[167,29453,639],{"class":191},[167,29455,29456],{"class":173}," t.owner))]);\n",[167,29458,29459,29461,29463,29465,29467,29469],{"class":169,"line":161},[167,29460,216],{"class":191},[167,29462,8233],{"class":219},[167,29464,223],{"class":191},[167,29466,1898],{"class":181},[167,29468,1493],{"class":173},[167,29470,9717],{"class":191},[167,29472,29473,29476,29478],{"class":169,"line":335},[167,29474,29475],{"class":173},"  selectedOwner.value ",[167,29477,2550],{"class":191},[167,29479,29480],{"class":201}," \"all\"\n",[167,29482,29483,29486],{"class":169,"line":341},[167,29484,29485],{"class":191},"    ?",[167,29487,11892],{"class":173},[167,29489,29490,29493,29495,29497,29499,29501,29503,29505,29508,29510],{"class":169,"line":489},[167,29491,29492],{"class":191},"    :",[167,29494,3451],{"class":173},[167,29496,8252],{"class":181},[167,29498,1918],{"class":173},[167,29500,29449],{"class":254},[167,29502,693],{"class":173},[167,29504,639],{"class":191},[167,29506,29507],{"class":173}," t.owner ",[167,29509,2550],{"class":191},[167,29511,29512],{"class":173}," selectedOwner.value)\n",[167,29514,29515],{"class":169,"line":495},[167,29516,24169],{"class":173},[167,29518,29519,29521,29523],{"class":169,"line":501},[167,29520,282],{"class":173},[167,29522,178],{"class":177},[167,29524,185],{"class":173},[167,29526,29527],{"class":169,"line":512},[167,29528,209],{"emptyLinePlaceholder":208},[167,29530,29531,29533,29535],{"class":169,"line":781},[167,29532,174],{"class":173},[167,29534,299],{"class":177},[167,29536,185],{"class":173},[167,29538,29539,29541,29543,29545],{"class":169,"line":786},[167,29540,307],{"class":173},[167,29542,1260],{"class":177},[167,29544,28178],{"class":181},[167,29546,185],{"class":173},[167,29548,29549,29551,29553,29556,29558],{"class":169,"line":2678},[167,29550,1257],{"class":173},[167,29552,22],{"class":177},[167,29554,29555],{"class":173},">Panel de tareas del sprint\u003C\u002F",[167,29557,22],{"class":177},[167,29559,185],{"class":173},[167,29561,29562,29564,29566,29569,29571],{"class":169,"line":2692},[167,29563,1257],{"class":173},[167,29565,15],{"class":177},[167,29567,29568],{"class":173},">Contenido institucional estático\u003C\u002F",[167,29570,15],{"class":177},[167,29572,185],{"class":173},[167,29574,29575,29577,29579],{"class":169,"line":3575},[167,29576,504],{"class":173},[167,29578,1260],{"class":177},[167,29580,185],{"class":173},[167,29582,29583],{"class":169,"line":5028},[167,29584,209],{"emptyLinePlaceholder":208},[167,29586,29587,29589,29591],{"class":169,"line":5037},[167,29588,307],{"class":173},[167,29590,9875],{"class":177},[167,29592,185],{"class":173},[167,29594,29595],{"class":169,"line":5046},[167,29596,29597],{"class":173},"    Filtrar por owner\n",[167,29599,29600,29602,29604,29606,29608,29611],{"class":169,"line":6756},[167,29601,1257],{"class":173},[167,29603,1098],{"class":177},[167,29605,2653],{"class":181},[167,29607,267],{"class":173},[167,29609,29610],{"class":201},"\"selectedOwner\"",[167,29612,185],{"class":173},[167,29614,29615,29617,29620,29622,29624,29627,29629,29631,29634,29637,29639,29641,29644,29646],{"class":169,"line":6778},[167,29616,1268],{"class":173},[167,29618,29619],{"class":177},"option",[167,29621,18706],{"class":181},[167,29623,267],{"class":173},[167,29625,29626],{"class":201},"\"owner in owners\"",[167,29628,10307],{"class":181},[167,29630,267],{"class":173},[167,29632,29633],{"class":201},"\"owner\"",[167,29635,29636],{"class":181}," :value",[167,29638,267],{"class":173},[167,29640,29633],{"class":201},[167,29642,29643],{"class":173},">{{ owner }}\u003C\u002F",[167,29645,29619],{"class":177},[167,29647,185],{"class":173},[167,29649,29650,29652,29654],{"class":169,"line":6783},[167,29651,1292],{"class":173},[167,29653,1098],{"class":177},[167,29655,185],{"class":173},[167,29657,29658,29660,29662],{"class":169,"line":6788},[167,29659,504],{"class":173},[167,29661,9875],{"class":177},[167,29663,185],{"class":173},[167,29665,29666],{"class":169,"line":6793},[167,29667,209],{"emptyLinePlaceholder":208},[167,29669,29670,29672],{"class":169,"line":6809},[167,29671,307],{"class":173},[167,29673,29674],{"class":177},"section\n",[167,29676,29677,29679,29681],{"class":169,"line":6824},[167,29678,3530],{"class":181},[167,29680,267],{"class":173},[167,29682,12482],{"class":201},[167,29684,29685,29687,29689],{"class":169,"line":6829},[167,29686,3541],{"class":181},[167,29688,267],{"class":173},[167,29690,3546],{"class":201},[167,29692,29693,29695,29697],{"class":169,"line":6836},[167,29694,28596],{"class":181},[167,29696,267],{"class":173},[167,29698,29699],{"class":201},"\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n",[167,29701,29702,29704,29706],{"class":169,"line":6845},[167,29703,28606],{"class":181},[167,29705,267],{"class":173},[167,29707,29708],{"class":201},"\"task-card\"\n",[167,29710,29711],{"class":169,"line":6854},[167,29712,492],{"class":173},[167,29714,29715,29717,29719,29721,29723],{"class":169,"line":6861},[167,29716,1257],{"class":173},[167,29718,3087],{"class":177},[167,29720,4979],{"class":173},[167,29722,3087],{"class":177},[167,29724,185],{"class":173},[167,29726,29727,29729,29731,29734,29736],{"class":169,"line":6879},[167,29728,1257],{"class":173},[167,29730,15],{"class":177},[167,29732,29733],{"class":173},">Owner: {{ task.owner }}\u003C\u002F",[167,29735,15],{"class":177},[167,29737,185],{"class":173},[167,29739,29740,29742,29744,29747,29749],{"class":169,"line":6884},[167,29741,1257],{"class":173},[167,29743,15],{"class":177},[167,29745,29746],{"class":173},">Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C\u002F",[167,29748,15],{"class":177},[167,29750,185],{"class":173},[167,29752,29753,29755,29757],{"class":169,"line":6889},[167,29754,504],{"class":173},[167,29756,10117],{"class":177},[167,29758,185],{"class":173},[167,29760,29761],{"class":169,"line":6898},[167,29762,209],{"emptyLinePlaceholder":208},[167,29764,29765,29767,29769],{"class":169,"line":6903},[167,29766,307],{"class":173},[167,29768,27354],{"class":177},[167,29770,185],{"class":173},[167,29772,29773,29775,29778,29781,29783],{"class":169,"line":6912},[167,29774,1257],{"class":173},[167,29776,29777],{"class":177},"h4",[167,29779,29780],{"class":173},">Snippet para docs\u003C\u002F",[167,29782,29777],{"class":177},[167,29784,185],{"class":173},[167,29786,29787,29789,29791,29793,29796,29798],{"class":169,"line":6928},[167,29788,1257],{"class":173},[167,29790,87],{"class":177},[167,29792,29066],{"class":181},[167,29794,29795],{"class":173},">{{ title }} - {{ owner }}\u003C\u002F",[167,29797,87],{"class":177},[167,29799,185],{"class":173},[167,29801,29802,29804,29806],{"class":169,"line":6949},[167,29803,504],{"class":173},[167,29805,27354],{"class":177},[167,29807,185],{"class":173},[167,29809,29810,29812,29814],{"class":169,"line":6954},[167,29811,282],{"class":173},[167,29813,299],{"class":177},[167,29815,185],{"class":173},[154,29817,29819],{"className":156,"code":29818,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      selectedOwner: \"all\",\n      tasks: [\n        { id: 1, title: \"Configurar CI\", done: true, owner: \"Ana\" },\n        { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n        { id: 3, title: \"Actualizar docs\", done: false, owner: \"Ana\" },\n      ],\n    };\n  },\n  computed: {\n    owners() {\n      return [\"all\", ...new Set(this.tasks.map((t) => t.owner))];\n    },\n    visibleTasks() {\n      return this.selectedOwner === \"all\"\n        ? this.tasks\n        : this.tasks.filter((t) => t.owner === this.selectedOwner);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cheader v-once>\n    \u003Ch2>Panel de tareas del sprint\u003C\u002Fh2>\n    \u003Cp>Contenido institucional estático\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Clabel>\n    Filtrar por owner\n    \u003Cselect v-model=\"selectedOwner\">\n      \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Flabel>\n\n  \u003Csection\n    v-for=\"task in visibleTasks\"\n    :key=\"task.id\"\n    v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n    class=\"task-card\"\n  >\n    \u003Ch3>{{ task.title }}\u003C\u002Fh3>\n    \u003Cp>Owner: {{ task.owner }}\u003C\u002Fp>\n    \u003Cp>Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Caside>\n    \u003Ch4>Snippet para docs\u003C\u002Fh4>\n    \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C\u002Fcode>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,29820,29821,29835,29843,29849,29855,29864,29868,29888,29908,29928,29932,29936,29940,29944,29951,29984,29988,29994,30007,30016,30044,30048,30052,30056,30064,30068,30076,30086,30098,30110,30118,30122,30130,30134,30148,30178,30186,30194,30198,30204,30212,30220,30228,30236,30240,30252,30264,30276,30284,30288,30296,30308,30322,30330],{"__ignoreMap":163},[167,29822,29823,29825,29827,29829,29831,29833],{"class":169,"line":170},[167,29824,174],{"class":173},[167,29826,178],{"class":177},[167,29828,1050],{"class":181},[167,29830,267],{"class":173},[167,29832,1055],{"class":201},[167,29834,185],{"class":173},[167,29836,29837,29839,29841],{"class":169,"line":188},[167,29838,608],{"class":191},[167,29840,3991],{"class":191},[167,29842,1905],{"class":173},[167,29844,29845,29847],{"class":169,"line":205},[167,29846,7176],{"class":181},[167,29848,763],{"class":173},[167,29850,29851,29853],{"class":169,"line":160},[167,29852,1937],{"class":191},[167,29854,1905],{"class":173},[167,29856,29857,29860,29862],{"class":169,"line":238},[167,29858,29859],{"class":173},"      selectedOwner: ",[167,29861,29316],{"class":201},[167,29863,393],{"class":173},[167,29865,29866],{"class":169,"line":243},[167,29867,8672],{"class":173},[167,29869,29870,29872,29874,29876,29878,29880,29882,29884,29886],{"class":169,"line":261},[167,29871,8677],{"class":173},[167,29873,1835],{"class":219},[167,29875,3383],{"class":173},[167,29877,29353],{"class":201},[167,29879,8164],{"class":173},[167,29881,390],{"class":219},[167,29883,8169],{"class":173},[167,29885,23487],{"class":201},[167,29887,1856],{"class":173},[167,29889,29890,29892,29894,29896,29898,29900,29902,29904,29906],{"class":169,"line":273},[167,29891,8677],{"class":173},[167,29893,1853],{"class":219},[167,29895,3383],{"class":173},[167,29897,29374],{"class":201},[167,29899,8164],{"class":173},[167,29901,3392],{"class":219},[167,29903,8169],{"class":173},[167,29905,28507],{"class":201},[167,29907,1856],{"class":173},[167,29909,29910,29912,29914,29916,29918,29920,29922,29924,29926],{"class":169,"line":279},[167,29911,8677],{"class":173},[167,29913,8203],{"class":219},[167,29915,3383],{"class":173},[167,29917,29395],{"class":201},[167,29919,8164],{"class":173},[167,29921,3392],{"class":219},[167,29923,8169],{"class":173},[167,29925,23487],{"class":201},[167,29927,1856],{"class":173},[167,29929,29930],{"class":169,"line":289},[167,29931,16114],{"class":173},[167,29933,29934],{"class":169,"line":294},[167,29935,24370],{"class":173},[167,29937,29938],{"class":169,"line":304},[167,29939,398],{"class":173},[167,29941,29942],{"class":169,"line":313},[167,29943,8755],{"class":173},[167,29945,29946,29949],{"class":169,"line":161},[167,29947,29948],{"class":181},"    owners",[167,29950,763],{"class":173},[167,29952,29953,29955,29957,29959,29961,29963,29965,29967,29969,29971,29973,29975,29977,29979,29981],{"class":169,"line":335},[167,29954,8767],{"class":191},[167,29956,1103],{"class":173},[167,29958,29316],{"class":201},[167,29960,1025],{"class":173},[167,29962,29437],{"class":191},[167,29964,22324],{"class":181},[167,29966,229],{"class":173},[167,29968,4927],{"class":219},[167,29970,8772],{"class":173},[167,29972,9844],{"class":181},[167,29974,1918],{"class":173},[167,29976,29449],{"class":254},[167,29978,693],{"class":173},[167,29980,639],{"class":191},[167,29982,29983],{"class":173}," t.owner))];\n",[167,29985,29986],{"class":169,"line":341},[167,29987,755],{"class":173},[167,29989,29990,29992],{"class":169,"line":489},[167,29991,8760],{"class":181},[167,29993,763],{"class":173},[167,29995,29996,29998,30000,30003,30005],{"class":169,"line":495},[167,29997,8767],{"class":191},[167,29999,7351],{"class":219},[167,30001,30002],{"class":173},".selectedOwner ",[167,30004,2550],{"class":191},[167,30006,29480],{"class":201},[167,30008,30009,30012,30014],{"class":169,"line":501},[167,30010,30011],{"class":191},"        ?",[167,30013,7351],{"class":219},[167,30015,12732],{"class":173},[167,30017,30018,30021,30023,30025,30027,30029,30031,30033,30035,30037,30039,30041],{"class":169,"line":512},[167,30019,30020],{"class":191},"        :",[167,30022,7351],{"class":219},[167,30024,8772],{"class":173},[167,30026,8252],{"class":181},[167,30028,1918],{"class":173},[167,30030,29449],{"class":254},[167,30032,693],{"class":173},[167,30034,639],{"class":191},[167,30036,29507],{"class":173},[167,30038,2550],{"class":191},[167,30040,7351],{"class":219},[167,30042,30043],{"class":173},".selectedOwner);\n",[167,30045,30046],{"class":169,"line":781},[167,30047,755],{"class":173},[167,30049,30050],{"class":169,"line":786},[167,30051,398],{"class":173},[167,30053,30054],{"class":169,"line":2678},[167,30055,24148],{"class":173},[167,30057,30058,30060,30062],{"class":169,"line":2692},[167,30059,282],{"class":173},[167,30061,178],{"class":177},[167,30063,185],{"class":173},[167,30065,30066],{"class":169,"line":3575},[167,30067,209],{"emptyLinePlaceholder":208},[167,30069,30070,30072,30074],{"class":169,"line":5028},[167,30071,174],{"class":173},[167,30073,299],{"class":177},[167,30075,185],{"class":173},[167,30077,30078,30080,30082,30084],{"class":169,"line":5037},[167,30079,307],{"class":173},[167,30081,1260],{"class":177},[167,30083,28178],{"class":181},[167,30085,185],{"class":173},[167,30087,30088,30090,30092,30094,30096],{"class":169,"line":5046},[167,30089,1257],{"class":173},[167,30091,22],{"class":177},[167,30093,29555],{"class":173},[167,30095,22],{"class":177},[167,30097,185],{"class":173},[167,30099,30100,30102,30104,30106,30108],{"class":169,"line":6756},[167,30101,1257],{"class":173},[167,30103,15],{"class":177},[167,30105,29568],{"class":173},[167,30107,15],{"class":177},[167,30109,185],{"class":173},[167,30111,30112,30114,30116],{"class":169,"line":6778},[167,30113,504],{"class":173},[167,30115,1260],{"class":177},[167,30117,185],{"class":173},[167,30119,30120],{"class":169,"line":6783},[167,30121,209],{"emptyLinePlaceholder":208},[167,30123,30124,30126,30128],{"class":169,"line":6788},[167,30125,307],{"class":173},[167,30127,9875],{"class":177},[167,30129,185],{"class":173},[167,30131,30132],{"class":169,"line":6793},[167,30133,29597],{"class":173},[167,30135,30136,30138,30140,30142,30144,30146],{"class":169,"line":6809},[167,30137,1257],{"class":173},[167,30139,1098],{"class":177},[167,30141,2653],{"class":181},[167,30143,267],{"class":173},[167,30145,29610],{"class":201},[167,30147,185],{"class":173},[167,30149,30150,30152,30154,30156,30158,30160,30162,30164,30166,30168,30170,30172,30174,30176],{"class":169,"line":6824},[167,30151,1268],{"class":173},[167,30153,29619],{"class":177},[167,30155,18706],{"class":181},[167,30157,267],{"class":173},[167,30159,29626],{"class":201},[167,30161,10307],{"class":181},[167,30163,267],{"class":173},[167,30165,29633],{"class":201},[167,30167,29636],{"class":181},[167,30169,267],{"class":173},[167,30171,29633],{"class":201},[167,30173,29643],{"class":173},[167,30175,29619],{"class":177},[167,30177,185],{"class":173},[167,30179,30180,30182,30184],{"class":169,"line":6829},[167,30181,1292],{"class":173},[167,30183,1098],{"class":177},[167,30185,185],{"class":173},[167,30187,30188,30190,30192],{"class":169,"line":6836},[167,30189,504],{"class":173},[167,30191,9875],{"class":177},[167,30193,185],{"class":173},[167,30195,30196],{"class":169,"line":6845},[167,30197,209],{"emptyLinePlaceholder":208},[167,30199,30200,30202],{"class":169,"line":6854},[167,30201,307],{"class":173},[167,30203,29674],{"class":177},[167,30205,30206,30208,30210],{"class":169,"line":6861},[167,30207,3530],{"class":181},[167,30209,267],{"class":173},[167,30211,12482],{"class":201},[167,30213,30214,30216,30218],{"class":169,"line":6879},[167,30215,3541],{"class":181},[167,30217,267],{"class":173},[167,30219,3546],{"class":201},[167,30221,30222,30224,30226],{"class":169,"line":6884},[167,30223,28596],{"class":181},[167,30225,267],{"class":173},[167,30227,29699],{"class":201},[167,30229,30230,30232,30234],{"class":169,"line":6889},[167,30231,28606],{"class":181},[167,30233,267],{"class":173},[167,30235,29708],{"class":201},[167,30237,30238],{"class":169,"line":6898},[167,30239,492],{"class":173},[167,30241,30242,30244,30246,30248,30250],{"class":169,"line":6903},[167,30243,1257],{"class":173},[167,30245,3087],{"class":177},[167,30247,4979],{"class":173},[167,30249,3087],{"class":177},[167,30251,185],{"class":173},[167,30253,30254,30256,30258,30260,30262],{"class":169,"line":6912},[167,30255,1257],{"class":173},[167,30257,15],{"class":177},[167,30259,29733],{"class":173},[167,30261,15],{"class":177},[167,30263,185],{"class":173},[167,30265,30266,30268,30270,30272,30274],{"class":169,"line":6928},[167,30267,1257],{"class":173},[167,30269,15],{"class":177},[167,30271,29746],{"class":173},[167,30273,15],{"class":177},[167,30275,185],{"class":173},[167,30277,30278,30280,30282],{"class":169,"line":6949},[167,30279,504],{"class":173},[167,30281,10117],{"class":177},[167,30283,185],{"class":173},[167,30285,30286],{"class":169,"line":6954},[167,30287,209],{"emptyLinePlaceholder":208},[167,30289,30290,30292,30294],{"class":169,"line":6975},[167,30291,307],{"class":173},[167,30293,27354],{"class":177},[167,30295,185],{"class":173},[167,30297,30298,30300,30302,30304,30306],{"class":169,"line":6989},[167,30299,1257],{"class":173},[167,30301,29777],{"class":177},[167,30303,29780],{"class":173},[167,30305,29777],{"class":177},[167,30307,185],{"class":173},[167,30309,30310,30312,30314,30316,30318,30320],{"class":169,"line":7003},[167,30311,1257],{"class":173},[167,30313,87],{"class":177},[167,30315,29066],{"class":181},[167,30317,29795],{"class":173},[167,30319,87],{"class":177},[167,30321,185],{"class":173},[167,30323,30324,30326,30328],{"class":169,"line":7017},[167,30325,504],{"class":173},[167,30327,27354],{"class":177},[167,30329,185],{"class":173},[167,30331,30332,30334,30336],{"class":169,"line":7026},[167,30333,282],{"class":173},[167,30335,299],{"class":177},[167,30337,185],{"class":173},[22,30339,7678],{"id":7677},[15,30341,30342,1025,30344,1028,30346,30348],{},[87,30343,27772],{},[87,30345,27775],{},[87,30347,27778],{}," son herramientas de precisión:",[33,30350,30351,30356,30361],{},[36,30352,30353,30355],{},[87,30354,27772],{}," para congelar contenido inmutable.",[36,30357,30358,30360],{},[87,30359,27775],{}," para evitar renders cuando dependencias clave no cambian.",[36,30362,30363,30365],{},[87,30364,27778],{}," para mostrar template literal sin compilación.",[15,30367,30368],{},"La clave no es usarlas en todo, sino en puntos donde el costo de render sea real y el comportamiento esperado sea claro.",[924,30370,30371],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":30373},[30374,30375,30380,30381,30382,30383,30392,30401],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257,"children":30376},[30377,30378,30379],{"id":27772,"depth":205,"text":27772},{"id":27775,"depth":205,"text":27775},{"id":27778,"depth":205,"text":27778},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":11370,"depth":188,"text":11371},{"id":3084,"depth":188,"text":3085,"children":30384},[30385,30387,30389,30391],{"id":27983,"depth":205,"text":30386},"1) Aplicar v-once sobre datos que sí cambian",{"id":28005,"depth":205,"text":30388},"2) Definir mal dependencias en v-memo",{"id":28019,"depth":205,"text":30390},"3) Esperar que v-pre procese directivas o interpolaciones",{"id":28038,"depth":205,"text":28039},{"id":7996,"depth":188,"text":7997,"children":30393},[30394,30396,30398,30400],{"id":28052,"depth":205,"text":30395},"1) Bloque estático con v-once",{"id":28340,"depth":205,"text":30397},"2) Segmento pesado con v-memo",{"id":28980,"depth":205,"text":30399},"3) Bloque literal con v-pre",{"id":29201,"depth":205,"text":29202},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771897190\u002Fdirectives-vue-v-once-v-memo-v-pre-guide_ljsdlv.png","Imagen temporal para portada del artículo sobre v-once, v-memo y v-pre en Vue","2026-02-24","Aprende cuándo usar v-once, v-memo y v-pre en Vue 3 para optimizar renderizado, evitar trabajo innecesario y mantener componentes claros.",{"updatedAt":30407,"coverCaption":23656,"author":946,"keywords":30408},"2026-02-23T21:00:00-05:00",[3258,27772,27775,27778,30409],"optimización render","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[30412],{"headline":30413,"author":30414,"datePublished":30407,"@type":961},"Directivas en Vue: v-once, v-memo y v-pre para renderizado eficiente",{"name":946,"@type":959},{"title":27764,"description":30405},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[30418,30419,30420,30421,30422],{"tag":26466,"color":26467},{"tag":3273,"color":3274},{"tag":9169,"color":9170},{"tag":3269,"color":3270},{"tag":7730,"color":7731},"ltUtJZ-ViSqRogEpVIS3x2XdEz345biUTyEg7SJpXLo",{"id":30425,"title":30426,"body":30427,"cover":31677,"coverAlt":31678,"date":31679,"description":31680,"draft":940,"extension":941,"lab":942,"locale":942,"meta":31681,"navigation":208,"path":31686,"schemaOrg":31687,"seo":31690,"series":26460,"seriesDescription":26461,"seriesOrder":273,"seriesTitle":26462,"slug":942,"stem":31691,"tags":31692,"__hash__":31697},"blog\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es.md","Directivas en Vue: v-text y v-html",{"type":8,"value":30428,"toc":31640},[30429,30438,30446,30463,30468,30470,30478,30492,30497,30501,30505,30512,30541,30544,30561,30570,30574,30581,30610,30613,30637,30641,30646,30665,30670,30691,30695,30700,30705,30710,30728,30730,30736,30739,30767,30783,30790,30793,30810,30821,30828,30837,30841,30844,30846,30852,30887,30894,30929,30933,30996,30998,31306,31593,31595,31623,31637],[11,30430,26483,30432,1662,30435],{"id":30431},"directivas-en-vue-v-text-vs-v-html",[87,30433,30434],{},"v-text",[87,30436,30437],{},"v-html",[15,30439,30440,30441,1028,30443,30445],{},"En Vue, ",[87,30442,30434],{},[87,30444,30437],{}," permiten renderizar contenido dinámico en el DOM, pero no hacen lo mismo ni implican el mismo nivel de riesgo.",[33,30447,30448,30456],{},[36,30449,30450,30452,30453,1679],{},[87,30451,30434],{}," inserta ",[3933,30454,30455],{},"texto plano",[36,30457,30458,30452,30460,1679],{},[87,30459,30437],{},[3933,30461,30462],{},"HTML interpretado por el navegador",[5367,30464,30465],{},[15,30466,30467],{},"Entender esta diferencia es clave para evitar bugs de UI y, sobre todo, vulnerabilidades de seguridad como XSS.",[22,30469,26503],{"id":26502},[15,30471,30472,30473,1028,30475,30477],{},"En proyectos reales es habitual recibir contenido desde APIs, CMS o incluso formularios de usuario. Elegir incorrectamente entre ",[87,30474,30434],{},[87,30476,30437],{}," puede provocar:",[33,30479,30480,30483,30486,30489],{},[36,30481,30482],{},"Diseños rotos por etiquetas inesperadas.",[36,30484,30485],{},"Exposición a ataques XSS.",[36,30487,30488],{},"Lógica de sanitización duplicada en múltiples componentes.",[36,30490,30491],{},"Inconsistencias visuales difíciles de depurar.",[5367,30493,30494],{},[15,30495,30496],{},"Tomar la decisión correcta desde el inicio mejora la seguridad, el mantenimiento y la coherencia del código.",[22,30498,30500],{"id":30499},"concepto-base","Concepto base",[3087,30502,30503],{"id":30434},[87,30504,30434],{},[15,30506,30507,30508,30511],{},"Renderiza el valor como contenido textual del nodo (",[87,30509,30510],{},"textContent",").\nSi el valor incluye etiquetas HTML, estas se muestran como texto literal, no se interpretan.",[154,30513,30515],{"className":156,"code":30514,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cp v-text=\"message\">\u003C\u002Fp>\n",[87,30516,30517],{"__ignoreMap":163},[167,30518,30519,30521,30523,30526,30528,30530,30533,30535,30537,30539],{"class":169,"line":170},[167,30520,174],{"class":173},[167,30522,15],{"class":177},[167,30524,30525],{"class":181}," v-text",[167,30527,267],{"class":173},[167,30529,5080],{"class":201},[167,30531,30532],{"class":173},"message",[167,30534,5080],{"class":201},[167,30536,1282],{"class":173},[167,30538,15],{"class":177},[167,30540,185],{"class":173},[15,30542,30543],{},"Es equivalente a la interpolación estándar:",[154,30545,30547],{"className":156,"code":30546,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cp>{{ message }}\u003C\u002Fp>\n",[87,30548,30549],{"__ignoreMap":163},[167,30550,30551,30553,30555,30557,30559],{"class":169,"line":170},[167,30552,174],{"class":173},[167,30554,15],{"class":177},[167,30556,29048],{"class":173},[167,30558,15],{"class":177},[167,30560,185],{"class":173},[5367,30562,30563],{},[15,30564,30565,30566,30569],{},"En la práctica, la interpolación (",[87,30567,30568],{},"{{ }}",") es la forma más común y legible para texto dinámico.",[3087,30571,30572],{"id":30437},[87,30573,30437],{},[15,30575,30576,30577,30580],{},"Renderiza el valor como HTML dentro del nodo (",[87,30578,30579],{},"innerHTML",").\nSi el string contiene etiquetas, el navegador las procesa como parte del DOM.",[154,30582,30584],{"className":156,"code":30583,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cdiv v-html=\"htmlSnippet\">\u003C\u002Fdiv>\n",[87,30585,30586],{"__ignoreMap":163},[167,30587,30588,30590,30592,30595,30597,30599,30602,30604,30606,30608],{"class":169,"line":170},[167,30589,174],{"class":173},[167,30591,1242],{"class":177},[167,30593,30594],{"class":181}," v-html",[167,30596,267],{"class":173},[167,30598,5080],{"class":201},[167,30600,30601],{"class":173},"htmlSnippet",[167,30603,5080],{"class":201},[167,30605,1282],{"class":173},[167,30607,1242],{"class":177},[167,30609,185],{"class":173},[15,30611,30612],{},"Consideraciones importantes:",[33,30614,30615,30623,30631,30634],{},[36,30616,30617,16903,30619,30622],{},[87,30618,30437],{},[3933,30620,30621],{},"no compila plantillas Vue"," dentro del contenido inyectado.",[36,30624,30625,30626,1025,30628,7863],{},"No enlaza directivas (",[87,30627,13496],{},[87,30629,30630],{},"@click",[36,30632,30633],{},"No debe utilizarse con contenido no confiable.",[36,30635,30636],{},"El contenido inyectado queda fuera del scope del compilador de plantillas.",[22,30638,30640],{"id":30639},"cuándo-usar-cada-uno","Cuándo usar cada uno",[3087,30642,1582,30644,13627],{"id":30643},"usa-v-text-cuando",[87,30645,30434],{},[33,30647,30648,30651,30659,30662],{},[36,30649,30650],{},"Renderizas texto dinámico simple y seguro.",[36,30652,30653,30654,90,30656,30658],{},"El contenido puede incluir ",[87,30655,174],{},[87,30657,15863],{}," y necesitas que se muestren literalmente.",[36,30660,30661],{},"No necesitas formato enriquecido.",[36,30663,30664],{},"Quieres la opción más segura por defecto.",[3087,30666,1582,30668,13627],{"id":30667},"usa-v-html-cuando",[87,30669,30437],{},[33,30671,30672,30675,30678,30688],{},[36,30673,30674],{},"Renderizas contenido HTML previamente sanitizado.",[36,30676,30677],{},"El contenido proviene de un CMS controlado o backend confiable.",[36,30679,30680,30681,1025,30684,30687],{},"Necesitas respetar formato enriquecido (",[87,30682,30683],{},"\u003Cstrong>",[87,30685,30686],{},"\u003Cem>",", listas, enlaces, etc.).",[36,30689,30690],{},"Existe una estrategia clara y centralizada de sanitización.",[22,30692,30694],{"id":30693},"cuándo-evitarlos","Cuándo evitarlos",[3087,30696,13622,30698,13627],{"id":30697},"evita-v-text-cuando",[87,30699,30434],{},[33,30701,30702],{},[36,30703,30704],{},"Necesitas HTML real con formato enriquecido.",[3087,30706,13622,30708,13627],{"id":30707},"evita-v-html-cuando",[87,30709,30437],{},[33,30711,30712,30715,30718,30721],{},[36,30713,30714],{},"El contenido proviene directamente de input de usuario sin sanitizar.",[36,30716,30717],{},"No tienes una estrategia centralizada de sanitización.",[36,30719,30720],{},"El mismo resultado puede lograrse con componentes explícitos (más seguro y mantenible).",[36,30722,30723,30724,30727],{},"Puedes modelar la estructura con datos y renderizarla con ",[87,30725,30726],{},"v-for"," y componentes en lugar de inyectar HTML crudo.",[22,30729,3085],{"id":3084},[3087,30731,26697,30733,30735],{"id":30732},"_1-usar-v-html-con-contenido-no-confiable",[87,30734,30437],{}," con contenido no confiable",[15,30737,30738],{},"Incorrecto:",[154,30740,30742],{"className":156,"code":30741,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cdiv v-html=\"userBio\">\u003C\u002Fdiv>\n",[87,30743,30744],{"__ignoreMap":163},[167,30745,30746,30748,30750,30752,30754,30756,30759,30761,30763,30765],{"class":169,"line":170},[167,30747,174],{"class":173},[167,30749,1242],{"class":177},[167,30751,30594],{"class":181},[167,30753,267],{"class":173},[167,30755,5080],{"class":201},[167,30757,30758],{"class":173},"userBio",[167,30760,5080],{"class":201},[167,30762,1282],{"class":173},[167,30764,1242],{"class":177},[167,30766,185],{"class":173},[15,30768,3172,30769,30771,30772,30775,30776,1025,30779,30782],{},[87,30770,30758],{}," no está sanitizado, puede inyectar ",[87,30773,30774],{},"\u003Cscript>",", atributos peligrosos (",[87,30777,30778],{},"onerror",[87,30780,30781],{},"onclick",") o URLs maliciosas.",[3087,30784,30786,30787,30789],{"id":30785},"_2-esperar-que-v-html-procese-directivas-de-vue","2) Esperar que ",[87,30788,30437],{}," procese directivas de Vue",[15,30791,30792],{},"Esto no funciona:",[154,30794,30796],{"className":2879,"code":30795,"filename":25323,"language":2882,"meta":163,"style":163},"const html = '\u003Cbutton @click=\"save\">Guardar\u003C\u002Fbutton>'\n",[87,30797,30798],{"__ignoreMap":163},[167,30799,30800,30802,30805,30807],{"class":169,"line":170},[167,30801,216],{"class":191},[167,30803,30804],{"class":219}," html",[167,30806,223],{"class":191},[167,30808,30809],{"class":201}," '\u003Cbutton @click=\"save\">Guardar\u003C\u002Fbutton>'\n",[5367,30811,30812],{},[15,30813,30814,30815,16903,30817,30820],{},"Las directivas dentro de un string inyectado con ",[87,30816,30437],{},[3933,30818,30819],{},"no se compilan ni se enlazan"," al contexto del componente.",[3087,30822,30824,30825,30827],{"id":30823},"_3-usar-v-html-por-flexibilidad","3) Usar ",[87,30826,30437],{}," “por flexibilidad”",[15,30829,30830,30831,30833,30834,30836],{},"Si solo necesitas texto, usa interpolación (",[87,30832,30568],{},") o ",[87,30835,30434],{},".\nEs más simple, más legible y más seguro.",[3087,30838,30840],{"id":30839},"_4-repetir-la-sanitización-en-cada-componente","4) Repetir la sanitización en cada componente",[15,30842,30843],{},"La sanitización debe vivir en una función, composable o utility centralizada.\nDuplicarla en cada vista aumenta el riesgo de inconsistencias y errores.",[22,30845,7997],{"id":7996},[3087,30847,30849,30850,6219],{"id":30848},"_1-mensaje-dinámico-seguro-v-text","1) Mensaje dinámico seguro (",[87,30851,30434],{},[154,30853,30855],{"className":156,"code":30854,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cp class=\"status\" v-text=\"statusMessage\">\u003C\u002Fp>\n",[87,30856,30857],{"__ignoreMap":163},[167,30858,30859,30861,30863,30865,30867,30870,30872,30874,30876,30879,30881,30883,30885],{"class":169,"line":170},[167,30860,174],{"class":173},[167,30862,15],{"class":177},[167,30864,1245],{"class":181},[167,30866,267],{"class":173},[167,30868,30869],{"class":201},"\"status\"",[167,30871,30525],{"class":181},[167,30873,267],{"class":173},[167,30875,5080],{"class":201},[167,30877,30878],{"class":173},"statusMessage",[167,30880,5080],{"class":201},[167,30882,1282],{"class":173},[167,30884,15],{"class":177},[167,30886,185],{"class":173},[3087,30888,30890,30891,30893],{"id":30889},"_2-descripción-enriquecida-desde-un-cms-v-html-sanitización-previa","2) Descripción enriquecida desde un CMS (",[87,30892,30437],{}," + sanitización previa)",[154,30895,30897],{"className":156,"code":30896,"filename":15284,"language":162,"meta":163,"style":163},"\u003Carticle class=\"prose\" v-html=\"safeHtml\">\u003C\u002Farticle>\n",[87,30898,30899],{"__ignoreMap":163},[167,30900,30901,30903,30905,30907,30909,30912,30914,30916,30918,30921,30923,30925,30927],{"class":169,"line":170},[167,30902,174],{"class":173},[167,30904,3696],{"class":177},[167,30906,1245],{"class":181},[167,30908,267],{"class":173},[167,30910,30911],{"class":201},"\"prose\"",[167,30913,30594],{"class":181},[167,30915,267],{"class":173},[167,30917,5080],{"class":201},[167,30919,30920],{"class":173},"safeHtml",[167,30922,5080],{"class":201},[167,30924,1282],{"class":173},[167,30926,3696],{"class":177},[167,30928,185],{"class":173},[3087,30930,30932],{"id":30931},"_3-fallback-entre-html-permitido-y-texto-plano","3) Fallback entre HTML permitido y texto plano",[154,30934,30936],{"className":156,"code":30935,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cdiv v-if=\"allowRichText\" v-html=\"safeHtml\">\u003C\u002Fdiv>\n\u003Cp v-else v-text=\"plainText\">\u003C\u002Fp>\n",[87,30937,30938,30971],{"__ignoreMap":163},[167,30939,30940,30942,30944,30946,30948,30950,30953,30955,30957,30959,30961,30963,30965,30967,30969],{"class":169,"line":170},[167,30941,174],{"class":173},[167,30943,1242],{"class":177},[167,30945,5694],{"class":191},[167,30947,267],{"class":173},[167,30949,5080],{"class":201},[167,30951,30952],{"class":173},"allowRichText",[167,30954,5080],{"class":201},[167,30956,30594],{"class":181},[167,30958,267],{"class":173},[167,30960,5080],{"class":201},[167,30962,30920],{"class":173},[167,30964,5080],{"class":201},[167,30966,1282],{"class":173},[167,30968,1242],{"class":177},[167,30970,185],{"class":173},[167,30972,30973,30975,30977,30979,30981,30983,30985,30988,30990,30992,30994],{"class":169,"line":188},[167,30974,174],{"class":173},[167,30976,15],{"class":177},[167,30978,7038],{"class":191},[167,30980,30525],{"class":181},[167,30982,267],{"class":173},[167,30984,5080],{"class":201},[167,30986,30987],{"class":173},"plainText",[167,30989,5080],{"class":201},[167,30991,1282],{"class":173},[167,30993,15],{"class":177},[167,30995,185],{"class":173},[22,30997,8027],{"id":8026},[154,30999,31001],{"className":156,"code":31000,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nconst allowRichText = ref(true);\nconst rawFromCms = ref(\"\u003Ch3>Novedades\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> mejora DX.\u003C\u002Fp>\");\nconst plainFallback = ref(\"Novedades: Vue 3 mejora DX.\");\n\nfunction sanitizeHtml(input: string) {\n  \u002F\u002F Placeholder: en producción usa una librería robusta como DOMPurify.\n  return input.replace(\u002F\u003Cscript.*?>.*?\u003C\\\u002Fscript>\u002Fgi, \"\");\n}\n\nconst safeHtml = computed(() => sanitizeHtml(rawFromCms.value));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Contenido editorial\u003C\u002Fh2>\n\n    \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C\u002Fdiv>\n    \u003Cp v-else v-text=\"plainFallback\">\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,31002,31003,31019,31031,31035,31052,31070,31088,31092,31109,31114,31164,31168,31172,31192,31200,31204,31212,31220,31233,31237,31269,31290,31298],{"__ignoreMap":163},[167,31004,31005,31007,31009,31011,31013,31015,31017],{"class":169,"line":170},[167,31006,174],{"class":173},[167,31008,178],{"class":177},[167,31010,182],{"class":181},[167,31012,1050],{"class":181},[167,31014,267],{"class":173},[167,31016,1055],{"class":201},[167,31018,185],{"class":173},[167,31020,31021,31023,31025,31027,31029],{"class":169,"line":188},[167,31022,192],{"class":191},[167,31024,1805],{"class":173},[167,31026,198],{"class":191},[167,31028,24041],{"class":201},[167,31030,24044],{"class":173},[167,31032,31033],{"class":169,"line":205},[167,31034,209],{"emptyLinePlaceholder":208},[167,31036,31037,31039,31042,31044,31046,31048,31050],{"class":169,"line":160},[167,31038,216],{"class":191},[167,31040,31041],{"class":219}," allowRichText",[167,31043,223],{"class":191},[167,31045,226],{"class":181},[167,31047,229],{"class":173},[167,31049,390],{"class":219},[167,31051,24169],{"class":173},[167,31053,31054,31056,31059,31061,31063,31065,31068],{"class":169,"line":238},[167,31055,216],{"class":191},[167,31057,31058],{"class":219}," rawFromCms",[167,31060,223],{"class":191},[167,31062,226],{"class":181},[167,31064,229],{"class":173},[167,31066,31067],{"class":201},"\"\u003Ch3>Novedades\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> mejora DX.\u003C\u002Fp>\"",[167,31069,24169],{"class":173},[167,31071,31072,31074,31077,31079,31081,31083,31086],{"class":169,"line":243},[167,31073,216],{"class":191},[167,31075,31076],{"class":219}," plainFallback",[167,31078,223],{"class":191},[167,31080,226],{"class":181},[167,31082,229],{"class":173},[167,31084,31085],{"class":201},"\"Novedades: Vue 3 mejora DX.\"",[167,31087,24169],{"class":173},[167,31089,31090],{"class":169,"line":261},[167,31091,209],{"emptyLinePlaceholder":208},[167,31093,31094,31096,31099,31101,31103,31105,31107],{"class":169,"line":273},[167,31095,246],{"class":191},[167,31097,31098],{"class":181}," sanitizeHtml",[167,31100,229],{"class":173},[167,31102,2650],{"class":254},[167,31104,583],{"class":191},[167,31106,586],{"class":219},[167,31108,258],{"class":173},[167,31110,31111],{"class":169,"line":279},[167,31112,31113],{"class":18662},"  \u002F\u002F Placeholder: en producción usa una librería robusta como DOMPurify.\n",[167,31115,31116,31118,31121,31124,31126,31128,31132,31134,31137,31139,31141,31143,31145,31149,31152,31154,31157,31159,31162],{"class":169,"line":289},[167,31117,1539],{"class":191},[167,31119,31120],{"class":173}," input.",[167,31122,31123],{"class":181},"replace",[167,31125,229],{"class":173},[167,31127,21857],{"class":201},[167,31129,31131],{"class":31130},"sA_wV","\u003Cscript",[167,31133,1679],{"class":219},[167,31135,31136],{"class":191},"*?",[167,31138,15863],{"class":31130},[167,31140,1679],{"class":219},[167,31142,31136],{"class":191},[167,31144,174],{"class":31130},[167,31146,31148],{"class":31147},"snhLl","\\\u002F",[167,31150,31151],{"class":31130},"script>",[167,31153,21857],{"class":201},[167,31155,31156],{"class":191},"gi",[167,31158,1025],{"class":173},[167,31160,31161],{"class":201},"\"\"",[167,31163,24169],{"class":173},[167,31165,31166],{"class":169,"line":294},[167,31167,276],{"class":173},[167,31169,31170],{"class":169,"line":304},[167,31171,209],{"emptyLinePlaceholder":208},[167,31173,31174,31176,31179,31181,31183,31185,31187,31189],{"class":169,"line":313},[167,31175,216],{"class":191},[167,31177,31178],{"class":219}," safeHtml",[167,31180,223],{"class":191},[167,31182,1898],{"class":181},[167,31184,1493],{"class":173},[167,31186,639],{"class":191},[167,31188,31098],{"class":181},[167,31190,31191],{"class":173},"(rawFromCms.value));\n",[167,31193,31194,31196,31198],{"class":169,"line":161},[167,31195,282],{"class":173},[167,31197,178],{"class":177},[167,31199,185],{"class":173},[167,31201,31202],{"class":169,"line":335},[167,31203,209],{"emptyLinePlaceholder":208},[167,31205,31206,31208,31210],{"class":169,"line":341},[167,31207,174],{"class":173},[167,31209,299],{"class":177},[167,31211,185],{"class":173},[167,31213,31214,31216,31218],{"class":169,"line":489},[167,31215,307],{"class":173},[167,31217,10117],{"class":177},[167,31219,185],{"class":173},[167,31221,31222,31224,31226,31229,31231],{"class":169,"line":495},[167,31223,1257],{"class":173},[167,31225,22],{"class":177},[167,31227,31228],{"class":173},">Contenido editorial\u003C\u002F",[167,31230,22],{"class":177},[167,31232,185],{"class":173},[167,31234,31235],{"class":169,"line":501},[167,31236,209],{"emptyLinePlaceholder":208},[167,31238,31239,31241,31243,31245,31247,31250,31252,31254,31256,31258,31260,31263,31265,31267],{"class":169,"line":512},[167,31240,1257],{"class":173},[167,31242,1242],{"class":177},[167,31244,5694],{"class":181},[167,31246,267],{"class":173},[167,31248,31249],{"class":201},"\"allowRichText\"",[167,31251,1245],{"class":181},[167,31253,267],{"class":173},[167,31255,30911],{"class":201},[167,31257,30594],{"class":181},[167,31259,267],{"class":173},[167,31261,31262],{"class":201},"\"safeHtml\"",[167,31264,1282],{"class":173},[167,31266,1242],{"class":177},[167,31268,185],{"class":173},[167,31270,31271,31273,31275,31277,31279,31281,31284,31286,31288],{"class":169,"line":781},[167,31272,1257],{"class":173},[167,31274,15],{"class":177},[167,31276,7038],{"class":181},[167,31278,30525],{"class":181},[167,31280,267],{"class":173},[167,31282,31283],{"class":201},"\"plainFallback\"",[167,31285,1282],{"class":173},[167,31287,15],{"class":177},[167,31289,185],{"class":173},[167,31291,31292,31294,31296],{"class":169,"line":786},[167,31293,504],{"class":173},[167,31295,10117],{"class":177},[167,31297,185],{"class":173},[167,31299,31300,31302,31304],{"class":169,"line":2678},[167,31301,282],{"class":173},[167,31303,299],{"class":177},[167,31305,185],{"class":173},[154,31307,31309],{"className":156,"code":31308,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      allowRichText: true,\n      rawFromCms: \"\u003Ch3>Novedades\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> mejora DX.\u003C\u002Fp>\",\n      plainFallback: \"Novedades: Vue 3 mejora DX.\",\n    };\n  },\n  computed: {\n    safeHtml() {\n      return this.sanitizeHtml(this.rawFromCms);\n    },\n  },\n  methods: {\n    sanitizeHtml(input) {\n      \u002F\u002F Placeholder: en producción usa una librería robusta como DOMPurify.\n      return input.replace(\u002F\u003Cscript.*?>.*?\u003C\\\u002Fscript>\u002Fgi, \"\");\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Contenido editorial\u003C\u002Fh2>\n\n    \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C\u002Fdiv>\n    \u003Cp v-else v-text=\"plainFallback\">\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,31310,31311,31319,31327,31333,31339,31348,31357,31366,31370,31374,31378,31385,31403,31407,31411,31415,31426,31431,31471,31475,31479,31483,31491,31495,31503,31511,31523,31527,31557,31577,31585],{"__ignoreMap":163},[167,31312,31313,31315,31317],{"class":169,"line":170},[167,31314,174],{"class":173},[167,31316,178],{"class":177},[167,31318,185],{"class":173},[167,31320,31321,31323,31325],{"class":169,"line":188},[167,31322,608],{"class":191},[167,31324,3991],{"class":191},[167,31326,1905],{"class":173},[167,31328,31329,31331],{"class":169,"line":205},[167,31330,7176],{"class":181},[167,31332,763],{"class":173},[167,31334,31335,31337],{"class":169,"line":160},[167,31336,1937],{"class":191},[167,31338,1905],{"class":173},[167,31340,31341,31344,31346],{"class":169,"line":238},[167,31342,31343],{"class":173},"      allowRichText: ",[167,31345,390],{"class":219},[167,31347,393],{"class":173},[167,31349,31350,31353,31355],{"class":169,"line":243},[167,31351,31352],{"class":173},"      rawFromCms: ",[167,31354,31067],{"class":201},[167,31356,393],{"class":173},[167,31358,31359,31362,31364],{"class":169,"line":261},[167,31360,31361],{"class":173},"      plainFallback: ",[167,31363,31085],{"class":201},[167,31365,393],{"class":173},[167,31367,31368],{"class":169,"line":273},[167,31369,24370],{"class":173},[167,31371,31372],{"class":169,"line":279},[167,31373,398],{"class":173},[167,31375,31376],{"class":169,"line":289},[167,31377,8755],{"class":173},[167,31379,31380,31383],{"class":169,"line":294},[167,31381,31382],{"class":181},"    safeHtml",[167,31384,763],{"class":173},[167,31386,31387,31389,31391,31393,31396,31398,31400],{"class":169,"line":304},[167,31388,8767],{"class":191},[167,31390,7351],{"class":219},[167,31392,1679],{"class":173},[167,31394,31395],{"class":181},"sanitizeHtml",[167,31397,229],{"class":173},[167,31399,4927],{"class":219},[167,31401,31402],{"class":173},".rawFromCms);\n",[167,31404,31405],{"class":169,"line":313},[167,31406,755],{"class":173},[167,31408,31409],{"class":169,"line":161},[167,31410,398],{"class":173},[167,31412,31413],{"class":169,"line":335},[167,31414,4419],{"class":173},[167,31416,31417,31420,31422,31424],{"class":169,"line":341},[167,31418,31419],{"class":181},"    sanitizeHtml",[167,31421,229],{"class":173},[167,31423,2650],{"class":254},[167,31425,258],{"class":173},[167,31427,31428],{"class":169,"line":489},[167,31429,31430],{"class":18662},"      \u002F\u002F Placeholder: en producción usa una librería robusta como DOMPurify.\n",[167,31432,31433,31435,31437,31439,31441,31443,31445,31447,31449,31451,31453,31455,31457,31459,31461,31463,31465,31467,31469],{"class":169,"line":495},[167,31434,8767],{"class":191},[167,31436,31120],{"class":173},[167,31438,31123],{"class":181},[167,31440,229],{"class":173},[167,31442,21857],{"class":201},[167,31444,31131],{"class":31130},[167,31446,1679],{"class":219},[167,31448,31136],{"class":191},[167,31450,15863],{"class":31130},[167,31452,1679],{"class":219},[167,31454,31136],{"class":191},[167,31456,174],{"class":31130},[167,31458,31148],{"class":31147},[167,31460,31151],{"class":31130},[167,31462,21857],{"class":201},[167,31464,31156],{"class":191},[167,31466,1025],{"class":173},[167,31468,31161],{"class":201},[167,31470,24169],{"class":173},[167,31472,31473],{"class":169,"line":501},[167,31474,755],{"class":173},[167,31476,31477],{"class":169,"line":512},[167,31478,398],{"class":173},[167,31480,31481],{"class":169,"line":781},[167,31482,24148],{"class":173},[167,31484,31485,31487,31489],{"class":169,"line":786},[167,31486,282],{"class":173},[167,31488,178],{"class":177},[167,31490,185],{"class":173},[167,31492,31493],{"class":169,"line":2678},[167,31494,209],{"emptyLinePlaceholder":208},[167,31496,31497,31499,31501],{"class":169,"line":2692},[167,31498,174],{"class":173},[167,31500,299],{"class":177},[167,31502,185],{"class":173},[167,31504,31505,31507,31509],{"class":169,"line":3575},[167,31506,307],{"class":173},[167,31508,10117],{"class":177},[167,31510,185],{"class":173},[167,31512,31513,31515,31517,31519,31521],{"class":169,"line":5028},[167,31514,1257],{"class":173},[167,31516,22],{"class":177},[167,31518,31228],{"class":173},[167,31520,22],{"class":177},[167,31522,185],{"class":173},[167,31524,31525],{"class":169,"line":5037},[167,31526,209],{"emptyLinePlaceholder":208},[167,31528,31529,31531,31533,31535,31537,31539,31541,31543,31545,31547,31549,31551,31553,31555],{"class":169,"line":5046},[167,31530,1257],{"class":173},[167,31532,1242],{"class":177},[167,31534,5694],{"class":181},[167,31536,267],{"class":173},[167,31538,31249],{"class":201},[167,31540,1245],{"class":181},[167,31542,267],{"class":173},[167,31544,30911],{"class":201},[167,31546,30594],{"class":181},[167,31548,267],{"class":173},[167,31550,31262],{"class":201},[167,31552,1282],{"class":173},[167,31554,1242],{"class":177},[167,31556,185],{"class":173},[167,31558,31559,31561,31563,31565,31567,31569,31571,31573,31575],{"class":169,"line":6756},[167,31560,1257],{"class":173},[167,31562,15],{"class":177},[167,31564,7038],{"class":181},[167,31566,30525],{"class":181},[167,31568,267],{"class":173},[167,31570,31283],{"class":201},[167,31572,1282],{"class":173},[167,31574,15],{"class":177},[167,31576,185],{"class":173},[167,31578,31579,31581,31583],{"class":169,"line":6778},[167,31580,504],{"class":173},[167,31582,10117],{"class":177},[167,31584,185],{"class":173},[167,31586,31587,31589,31591],{"class":169,"line":6783},[167,31588,282],{"class":173},[167,31590,299],{"class":177},[167,31592,185],{"class":173},[22,31594,7678],{"id":7677},[33,31596,31597,31602,31610,31615,31620],{},[36,31598,31599,31601],{},[87,31600,30434],{}," es para texto plano y es la opción por defecto cuando no necesitas HTML.",[36,31603,31604,31605,31607,31608,1679],{},"La interpolación (",[87,31606,30568],{},") suele ser más idiomática que ",[87,31609,30434],{},[36,31611,31612,31614],{},[87,31613,30437],{}," solo debe usarse con contenido confiable o previamente sanitizado.",[36,31616,31617,31619],{},[87,31618,30437],{}," no compila ni enlaza directivas Vue.",[36,31621,31622],{},"Centraliza la sanitización en una capa clara (utility\u002Fcomposable).",[5367,31624,31625],{},[15,31626,31627,31630,31631,31633,31634,31636],{},[3933,31628,31629],{},"Regla práctica:"," si dudas, empieza con interpolación o ",[87,31632,30434],{},", y utiliza ",[87,31635,30437],{}," únicamente cuando el caso de uso lo justifique explícitamente.",[924,31638,31639],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}",{"title":163,"searchDepth":188,"depth":188,"links":31641},[31642,31643,31647,31653,31659,31668,31675,31676],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500,"children":31644},[31645,31646],{"id":30434,"depth":205,"text":30434},{"id":30437,"depth":205,"text":30437},{"id":30639,"depth":188,"text":30640,"children":31648},[31649,31651],{"id":30643,"depth":205,"text":31650},"Usa v-text cuando:",{"id":30667,"depth":205,"text":31652},"Usa v-html cuando:",{"id":30693,"depth":188,"text":30694,"children":31654},[31655,31657],{"id":30697,"depth":205,"text":31656},"Evita v-text cuando:",{"id":30707,"depth":205,"text":31658},"Evita v-html cuando:",{"id":3084,"depth":188,"text":3085,"children":31660},[31661,31663,31665,31667],{"id":30732,"depth":205,"text":31662},"1) Usar v-html con contenido no confiable",{"id":30785,"depth":205,"text":31664},"2) Esperar que v-html procese directivas de Vue",{"id":30823,"depth":205,"text":31666},"3) Usar v-html “por flexibilidad”",{"id":30839,"depth":205,"text":30840},{"id":7996,"depth":188,"text":7997,"children":31669},[31670,31672,31674],{"id":30848,"depth":205,"text":31671},"1) Mensaje dinámico seguro (v-text)",{"id":30889,"depth":205,"text":31673},"2) Descripción enriquecida desde un CMS (v-html + sanitización previa)",{"id":30931,"depth":205,"text":30932},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771635700\u002Fdirectives-vue-v-text-v-html-guide_n0cemz.png","Ejemplo de uso de v-text y v-html en Vue.js","2026-02-21","Aprende cuándo usar v-text y v-html en Vue, diferencias clave, riesgos de seguridad, errores comunes y patrones recomendados con ejemplos en Composition API y Options API.",{"updatedAt":31682,"coverCaption":31683,"keywords":31684},"2026-02-20T20:00:00-05:00","Aprende a usar v-text y v-html de forma segura y efectiva en tus proyectos Vue",[3258,30434,30437,31685,16579,3260,3973],"XSS","\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es",[31688],{"headline":30426,"author":31689,"datePublished":31682,"@type":961},{"name":946,"@type":959},{"title":30426,"description":31680},"blog\u002Fdirectives-vue-v-text-v-html-guide.es",[31693,31694,31695,31696],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":9169,"color":9170},{"tag":5424,"color":5425},"nRl4DrJhzsMVrCXStftR_-Go1SJK8NAAhi0uuGqgmkI",{"id":31699,"title":31700,"body":31701,"cover":33914,"coverAlt":33915,"date":33916,"description":33917,"draft":940,"extension":941,"lab":942,"locale":943,"meta":33918,"navigation":208,"path":33924,"schemaOrg":33925,"seo":33929,"series":26460,"seriesDescription":26461,"seriesOrder":261,"seriesTitle":26462,"slug":942,"stem":33930,"tags":33931,"__hash__":33936},"blog\u002Fblog\u002Fdirectives-vue-v-slot-guide.es.md","Directivas en Vue: v-slot",{"type":8,"value":31702,"toc":33893},[31703,31709,31714,31717,31719,31722,31733,31740,31742,31749,31808,31875,31878,31903,31906,31929,31940,31942,31946,31967,31969,31971,31982,31987,31989,31998,32003,32013,32049,32089,32093,32100,32154,32157,32161,32164,32166,32185,32190,32194,32197,32200,32226,32228,32232,32307,32311,32456,32460,32601,32608,32611,32684,32689,32693,32696,33020,33276,33280,33283,33604,33862,33864,33890],[11,31704,26483,31706],{"id":31705},"directivas-en-vue-v-slot",[87,31707,31708],{},"v-slot",[15,31710,31711,31713],{},[87,31712,31708],{}," permite decidir, desde el componente padre, qué contenido se renderizará dentro de zonas específicas definidas por el componente hijo.\nEn términos simples: el hijo define “huecos” y el padre decide qué colocar en ellos.",[15,31715,31716],{},"Es una de las herramientas más potentes de Vue 3 para construir componentes reutilizables sin perder control sobre el renderizado.",[22,31718,26503],{"id":26502},[15,31720,31721],{},"Sin slots, muchos componentes terminan siendo rígidos:",[33,31723,31724,31727,31730],{},[36,31725,31726],{},"Con textos y botones “quemados” dentro del hijo.",[36,31728,31729],{},"Con demasiadas props para cubrir casos muy específicos.",[36,31731,31732],{},"Difíciles de reutilizar en pantallas diferentes.",[5367,31734,31735],{},[15,31736,3810,31737,31739],{},[87,31738,31708],{},", puedes diseñar componentes base (cards, modals, tablas, layouts) que se adapten a distintos contextos sin duplicar lógica ni sacrificar claridad.",[22,31741,30500],{"id":30499},[15,31743,31744,31745,31748],{},"Un componente hijo define ",[87,31746,31747],{},"\u003Cslot \u002F>",", y el padre inyecta contenido:",[154,31750,31754],{"className":156,"code":31751,"filename":31752,"highlights":31753,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Csection class=\"card\">\n    \u003Cslot \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","BaseCard.vue",[205],[87,31755,31756,31764,31779,31792,31800],{"__ignoreMap":163},[167,31757,31758,31760,31762],{"class":169,"line":170},[167,31759,174],{"class":173},[167,31761,299],{"class":177},[167,31763,185],{"class":173},[167,31765,31766,31768,31770,31772,31774,31777],{"class":169,"line":188},[167,31767,307],{"class":173},[167,31769,10117],{"class":177},[167,31771,1245],{"class":181},[167,31773,267],{"class":173},[167,31775,31776],{"class":201},"\"card\"",[167,31778,185],{"class":173},[167,31780,31782,31784,31786,31790],{"class":31781,"line":205},[169,213],[167,31783,1257],{"class":173},[167,31785,1271],{"class":177},[167,31787,31789],{"class":31788},"s7hpK"," \u002F",[167,31791,185],{"class":173},[167,31793,31794,31796,31798],{"class":169,"line":160},[167,31795,504],{"class":173},[167,31797,10117],{"class":177},[167,31799,185],{"class":173},[167,31801,31802,31804,31806],{"class":169,"line":238},[167,31803,282],{"class":173},[167,31805,299],{"class":177},[167,31807,185],{"class":173},[154,31809,31812],{"className":156,"code":31810,"filename":15284,"highlights":31811,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CBaseCard>\n    \u003Ch2>Título dinámico\u003C\u002Fh2>\n    \u003Cp>Contenido personalizado desde el padre.\u003C\u002Fp>\n  \u003C\u002FBaseCard>\n\u003C\u002Ftemplate>\n",[188,238],[87,31813,31814,31822,31832,31845,31858,31867],{"__ignoreMap":163},[167,31815,31816,31818,31820],{"class":169,"line":170},[167,31817,174],{"class":173},[167,31819,299],{"class":177},[167,31821,185],{"class":173},[167,31823,31825,31827,31830],{"class":31824,"line":188},[169,213],[167,31826,307],{"class":173},[167,31828,31829],{"class":177},"BaseCard",[167,31831,185],{"class":173},[167,31833,31834,31836,31838,31841,31843],{"class":169,"line":205},[167,31835,1257],{"class":173},[167,31837,22],{"class":177},[167,31839,31840],{"class":173},">Título dinámico\u003C\u002F",[167,31842,22],{"class":177},[167,31844,185],{"class":173},[167,31846,31847,31849,31851,31854,31856],{"class":169,"line":160},[167,31848,1257],{"class":173},[167,31850,15],{"class":177},[167,31852,31853],{"class":173},">Contenido personalizado desde el padre.\u003C\u002F",[167,31855,15],{"class":177},[167,31857,185],{"class":173},[167,31859,31861,31863,31865],{"class":31860,"line":238},[169,213],[167,31862,504],{"class":173},[167,31864,31829],{"class":177},[167,31866,185],{"class":173},[167,31868,31869,31871,31873],{"class":169,"line":243},[167,31870,282],{"class":173},[167,31872,299],{"class":177},[167,31874,185],{"class":173},[15,31876,31877],{},"Tipos de slots:",[33,31879,31880,31887,31895],{},[36,31881,31882,1108,31885],{},[3933,31883,31884],{},"Slot por defecto",[87,31886,31747],{},[36,31888,31889,1108,31892],{},[3933,31890,31891],{},"Slots nombrados",[87,31893,31894],{},"\u003Cslot name=\"header\" \u002F>",[36,31896,31897,1108,31900],{},[3933,31898,31899],{},"Slots con props (scoped slots)",[87,31901,31902],{},"\u003Cslot name=\"row\" :item=\"item\" \u002F>",[15,31904,31905],{},"Sintaxis común en el padre:",[33,31907,31908,31914,31923],{},[36,31909,31910,31913],{},[87,31911,31912],{},"#default"," para el slot por defecto.",[36,31915,31916,1025,31919,31922],{},[87,31917,31918],{},"#header",[87,31920,31921],{},"#footer",", etc. para slots nombrados.",[36,31924,31925,31928],{},[87,31926,31927],{},"#row=\"{ item }\""," para recibir props desde el hijo.",[5367,31930,31931],{},[15,31932,31933,31936,31937,1679],{},[87,31934,31935],{},"#"," es la forma abreviada de ",[87,31938,31939],{},"v-slot:",[22,31941,6322],{"id":6321},[15,31943,1582,31944,13627],{},[87,31945,31708],{},[33,31947,31948,31951,31957],{},[36,31949,31950],{},"Tienes un componente estructural (card, modal, layout) cuyo contenido cambia según la vista.",[36,31952,31953,31954,4270],{},"Necesitas exponer datos internos del hijo al padre para personalizar el render (",[87,31955,31956],{},"scoped slots",[36,31958,31959,31960,1025,31963,31966],{},"Quieres una API flexible sin proliferar props booleanas como ",[87,31961,31962],{},"showHeader",[87,31964,31965],{},"showFooter",", etc.",[22,31968,6349],{"id":6348},[15,31970,6355],{},[33,31972,31973,31976,31979],{},[36,31974,31975],{},"El componente tiene estructura y contenido completamente fijos.",[36,31977,31978],{},"Estás usando slots para esconder lógica que debería vivir en composables o en el store.",[36,31980,31981],{},"El template se vuelve excesivamente complejo por anidación profunda de slots.",[5367,31983,31984],{},[15,31985,31986],{},"En estos casos, menos flexibilidad suele traducirse en mayor mantenibilidad.",[22,31988,3085],{"id":3084},[3087,31990,26697,31992,31994,31995],{"id":31991},"_1-usar-v-slot-en-un-elemento-que-no-es-componente-o-template",[87,31993,31708],{}," en un elemento que no es componente o ",[87,31996,31997],{},"\u003Ctemplate>",[15,31999,32000,32002],{},[87,32001,31708],{}," solo puede usarse en:",[33,32004,32005,32008],{},[36,32006,32007],{},"Un componente.",[36,32009,7915,32010,32012],{},[87,32011,31997],{}," que envuelve contenido para un slot específico.",[154,32014,32018],{"className":156,"code":32015,"filename":32016,"highlights":32017,"language":162,"meta":163,"style":163},"\u003Cdiv v-slot:header>\n  Título\n\u003C\u002Fdiv>\n","Incorrecto.vue",[170],[87,32019,32020,32036,32041],{"__ignoreMap":163},[167,32021,32023,32025,32027,32030,32032,32034],{"class":32022,"line":170},[169,213],[167,32024,174],{"class":173},[167,32026,1242],{"class":177},[167,32028,32029],{"class":181}," v-slot",[167,32031,583],{"class":173},[167,32033,1260],{"class":181},[167,32035,185],{"class":173},[167,32037,32038],{"class":169,"line":188},[167,32039,32040],{"class":173},"  Título\n",[167,32042,32043,32045,32047],{"class":169,"line":205},[167,32044,282],{"class":173},[167,32046,1242],{"class":177},[167,32048,185],{"class":173},[154,32050,32054],{"className":156,"code":32051,"filename":32052,"highlights":32053,"language":162,"meta":163,"style":163},"\u003CBaseCard>\n  \u003Ctemplate #header>\n    Título\n  \u003C\u002Ftemplate>\n\u003C\u002FBaseCard>\n","Correcto.vue",[188,160],[87,32055,32056,32064,32070,32075,32081],{"__ignoreMap":163},[167,32057,32058,32060,32062],{"class":169,"line":170},[167,32059,174],{"class":173},[167,32061,31829],{"class":177},[167,32063,185],{"class":173},[167,32065,32067],{"class":32066,"line":188},[169,213],[167,32068,32069],{"class":173},"  \u003Ctemplate #header>\n",[167,32071,32072],{"class":169,"line":205},[167,32073,32074],{"class":173},"    Título\n",[167,32076,32078],{"class":32077,"line":160},[169,213],[167,32079,32080],{"class":173},"  \u003C\u002Ftemplate>\n",[167,32082,32083,32085,32087],{"class":169,"line":238},[167,32084,282],{"class":173},[167,32086,31829],{"class":177},[167,32088,185],{"class":173},[3087,32090,32092],{"id":32091},"_2-no-destructurar-las-props-de-un-scoped-slot","2) No destructurar las props de un scoped slot",[15,32094,32095,32096,32099],{},"Si el hijo expone ",[87,32097,32098],{},":item=\"row\"",", el padre debe capturar ese objeto correctamente:",[154,32101,32105],{"className":156,"code":32102,"filename":32103,"highlights":32104,"language":162,"meta":163,"style":163},"\u003CDataTable :rows=\"users\">\n  \u003Ctemplate #row=\"{ item }\">\n    \u003Cstrong>{{ item.name }}\u003C\u002Fstrong>\n  \u003C\u002Ftemplate>\n\u003C\u002FDataTable>\n","DataTable.vue",[170,188],[87,32106,32107,32131,32137,32142,32146],{"__ignoreMap":163},[167,32108,32110,32112,32115,32117,32120,32122,32124,32127,32129],{"class":32109,"line":170},[169,213],[167,32111,174],{"class":173},[167,32113,32114],{"class":177},"DataTable",[167,32116,5312],{"class":173},[167,32118,32119],{"class":181},"rows",[167,32121,267],{"class":173},[167,32123,5080],{"class":201},[167,32125,32126],{"class":173},"users",[167,32128,5080],{"class":201},[167,32130,185],{"class":173},[167,32132,32134],{"class":32133,"line":188},[169,213],[167,32135,32136],{"class":173},"  \u003Ctemplate #row=\"{ item }\">\n",[167,32138,32139],{"class":169,"line":205},[167,32140,32141],{"class":173},"    \u003Cstrong>{{ item.name }}\u003C\u002Fstrong>\n",[167,32143,32144],{"class":169,"line":160},[167,32145,32080],{"class":173},[167,32147,32148,32150,32152],{"class":169,"line":238},[167,32149,282],{"class":173},[167,32151,32114],{"class":177},[167,32153,185],{"class":173},[15,32155,32156],{},"Si no se destructura correctamente, perderás acceso explícito a las props del slot.",[3087,32158,32160],{"id":32159},"_3-convertir-los-slots-en-prop-drilling-visual","3) Convertir los slots en “prop drilling visual”",[15,32162,32163],{},"Cuando todo pasa por slots y casi nada por props o eventos bien definidos, la API del componente se vuelve confusa.",[15,32165,31629],{},[33,32167,32168,32174,32179],{},[36,32169,32170,32173],{},[3933,32171,32172],{},"Props"," → configuración.",[36,32175,32176,32178],{},[3933,32177,1647],{}," → estructura\u002Fcontenido.",[36,32180,32181,32184],{},[3933,32182,32183],{},"Emits"," → eventos.",[5367,32186,32187],{},[15,32188,32189],{},"Separar responsabilidades mantiene la API clara y predecible.",[3087,32191,32193],{"id":32192},"_4-no-definir-fallback-en-el-hijo","4) No definir fallback en el hijo",[15,32195,32196],{},"Si el padre no provee contenido para un slot, puede quedar un espacio vacío inesperado.",[15,32198,32199],{},"Siempre que tenga sentido, define contenido por defecto:",[154,32201,32203],{"className":156,"code":32202,"filename":31752,"language":162,"meta":163,"style":163},"\u003Cslot>\n  Fallback por defecto\n\u003C\u002Fslot>\n",[87,32204,32205,32213,32218],{"__ignoreMap":163},[167,32206,32207,32209,32211],{"class":169,"line":170},[167,32208,174],{"class":173},[167,32210,1271],{"class":177},[167,32212,185],{"class":173},[167,32214,32215],{"class":169,"line":188},[167,32216,32217],{"class":173},"  Fallback por defecto\n",[167,32219,32220,32222,32224],{"class":169,"line":205},[167,32221,282],{"class":173},[167,32223,1271],{"class":177},[167,32225,185],{"class":173},[22,32227,7997],{"id":7996},[3087,32229,32231],{"id":32230},"_1-slot-por-defecto-con-fallback","1) Slot por defecto con fallback",[154,32233,32236],{"className":156,"code":32234,"filename":31752,"highlights":32235,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Carticle class=\"card\">\n    \u003Cslot>\n      \u003Cp>Contenido por defecto de la tarjeta.\u003C\u002Fp>\n    \u003C\u002Fslot>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[205,238],[87,32237,32238,32246,32260,32269,32282,32291,32299],{"__ignoreMap":163},[167,32239,32240,32242,32244],{"class":169,"line":170},[167,32241,174],{"class":173},[167,32243,299],{"class":177},[167,32245,185],{"class":173},[167,32247,32248,32250,32252,32254,32256,32258],{"class":169,"line":188},[167,32249,307],{"class":173},[167,32251,3696],{"class":177},[167,32253,1245],{"class":181},[167,32255,267],{"class":173},[167,32257,31776],{"class":201},[167,32259,185],{"class":173},[167,32261,32263,32265,32267],{"class":32262,"line":205},[169,213],[167,32264,1257],{"class":173},[167,32266,1271],{"class":177},[167,32268,185],{"class":173},[167,32270,32271,32273,32275,32278,32280],{"class":169,"line":160},[167,32272,1268],{"class":173},[167,32274,15],{"class":177},[167,32276,32277],{"class":173},">Contenido por defecto de la tarjeta.\u003C\u002F",[167,32279,15],{"class":177},[167,32281,185],{"class":173},[167,32283,32285,32287,32289],{"class":32284,"line":238},[169,213],[167,32286,1292],{"class":173},[167,32288,1271],{"class":177},[167,32290,185],{"class":173},[167,32292,32293,32295,32297],{"class":169,"line":243},[167,32294,504],{"class":173},[167,32296,3696],{"class":177},[167,32298,185],{"class":173},[167,32300,32301,32303,32305],{"class":169,"line":261},[167,32302,282],{"class":173},[167,32304,299],{"class":177},[167,32306,185],{"class":173},[3087,32308,32310],{"id":32309},"_2-slots-nombrados-para-estructurar-un-layout","2) Slots nombrados para estructurar un layout",[154,32312,32315],{"className":156,"code":32313,"filename":1224,"highlights":32314,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Csection class=\"layout\">\n    \u003Cheader>\n      \u003Cslot name=\"header\" \u002F>\n    \u003C\u002Fheader>\n\n    \u003Cmain>\n      \u003Cslot \u002F>\n    \u003C\u002Fmain>\n\n    \u003Cfooter>\n      \u003Cslot name=\"footer\" \u002F>\n    \u003C\u002Ffooter>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[160,273,304],[87,32316,32317,32325,32339,32347,32364,32372,32376,32384,32395,32403,32407,32415,32432,32440,32448],{"__ignoreMap":163},[167,32318,32319,32321,32323],{"class":169,"line":170},[167,32320,174],{"class":173},[167,32322,299],{"class":177},[167,32324,185],{"class":173},[167,32326,32327,32329,32331,32333,32335,32337],{"class":169,"line":188},[167,32328,307],{"class":173},[167,32330,10117],{"class":177},[167,32332,1245],{"class":181},[167,32334,267],{"class":173},[167,32336,1250],{"class":201},[167,32338,185],{"class":173},[167,32340,32341,32343,32345],{"class":169,"line":205},[167,32342,1257],{"class":173},[167,32344,1260],{"class":177},[167,32346,185],{"class":173},[167,32348,32350,32352,32354,32356,32358,32360,32362],{"class":32349,"line":160},[169,213],[167,32351,1268],{"class":173},[167,32353,1271],{"class":177},[167,32355,1274],{"class":181},[167,32357,267],{"class":173},[167,32359,1279],{"class":201},[167,32361,31789],{"class":31788},[167,32363,185],{"class":173},[167,32365,32366,32368,32370],{"class":169,"line":238},[167,32367,1292],{"class":173},[167,32369,1260],{"class":177},[167,32371,185],{"class":173},[167,32373,32374],{"class":169,"line":243},[167,32375,209],{"emptyLinePlaceholder":208},[167,32377,32378,32380,32382],{"class":169,"line":261},[167,32379,1257],{"class":173},[167,32381,1304],{"class":177},[167,32383,185],{"class":173},[167,32385,32387,32389,32391,32393],{"class":32386,"line":273},[169,213],[167,32388,1268],{"class":173},[167,32390,1271],{"class":177},[167,32392,31789],{"class":31788},[167,32394,185],{"class":173},[167,32396,32397,32399,32401],{"class":169,"line":279},[167,32398,1292],{"class":173},[167,32400,1304],{"class":177},[167,32402,185],{"class":173},[167,32404,32405],{"class":169,"line":289},[167,32406,209],{"emptyLinePlaceholder":208},[167,32408,32409,32411,32413],{"class":169,"line":294},[167,32410,1257],{"class":173},[167,32412,1334],{"class":177},[167,32414,185],{"class":173},[167,32416,32418,32420,32422,32424,32426,32428,32430],{"class":32417,"line":304},[169,213],[167,32419,1268],{"class":173},[167,32421,1271],{"class":177},[167,32423,1274],{"class":181},[167,32425,267],{"class":173},[167,32427,1349],{"class":201},[167,32429,31789],{"class":31788},[167,32431,185],{"class":173},[167,32433,32434,32436,32438],{"class":169,"line":313},[167,32435,1292],{"class":173},[167,32437,1334],{"class":177},[167,32439,185],{"class":173},[167,32441,32442,32444,32446],{"class":169,"line":161},[167,32443,504],{"class":173},[167,32445,10117],{"class":177},[167,32447,185],{"class":173},[167,32449,32450,32452,32454],{"class":169,"line":335},[167,32451,282],{"class":173},[167,32453,299],{"class":177},[167,32455,185],{"class":173},[3087,32457,32459],{"id":32458},"_3-scoped-slot-para-personalizar-filas-de-una-tabla","3) Scoped slot para personalizar filas de una tabla",[154,32461,32464],{"className":156,"code":32462,"filename":32103,"highlights":32463,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Ctable>\n    \u003Ctbody>\n      \u003Ctr v-for=\"row in rows\" :key=\"row.id\">\n        \u003Ctd>\n          \u003Cslot name=\"row\" :item=\"row\">\n            {{ row.name }}\n          \u003C\u002Fslot>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Ftemplate>\n",[243,273],[87,32465,32466,32474,32482,32490,32512,32521,32545,32550,32560,32569,32577,32585,32593],{"__ignoreMap":163},[167,32467,32468,32470,32472],{"class":169,"line":170},[167,32469,174],{"class":173},[167,32471,299],{"class":177},[167,32473,185],{"class":173},[167,32475,32476,32478,32480],{"class":169,"line":188},[167,32477,307],{"class":173},[167,32479,56],{"class":177},[167,32481,185],{"class":173},[167,32483,32484,32486,32488],{"class":169,"line":205},[167,32485,1257],{"class":173},[167,32487,75],{"class":177},[167,32489,185],{"class":173},[167,32491,32492,32494,32496,32498,32500,32503,32505,32507,32510],{"class":169,"line":160},[167,32493,1268],{"class":173},[167,32495,62],{"class":177},[167,32497,18706],{"class":181},[167,32499,267],{"class":173},[167,32501,32502],{"class":201},"\"row in rows\"",[167,32504,10307],{"class":181},[167,32506,267],{"class":173},[167,32508,32509],{"class":201},"\"row.id\"",[167,32511,185],{"class":173},[167,32513,32514,32517,32519],{"class":169,"line":238},[167,32515,32516],{"class":173},"        \u003C",[167,32518,80],{"class":177},[167,32520,185],{"class":173},[167,32522,32524,32527,32529,32531,32533,32536,32539,32541,32543],{"class":32523,"line":243},[169,213],[167,32525,32526],{"class":173},"          \u003C",[167,32528,1271],{"class":177},[167,32530,1274],{"class":181},[167,32532,267],{"class":173},[167,32534,32535],{"class":201},"\"row\"",[167,32537,32538],{"class":181}," :item",[167,32540,267],{"class":173},[167,32542,32535],{"class":201},[167,32544,185],{"class":173},[167,32546,32547],{"class":169,"line":261},[167,32548,32549],{"class":173},"            {{ row.name }}\n",[167,32551,32553,32556,32558],{"class":32552,"line":273},[169,213],[167,32554,32555],{"class":173},"          \u003C\u002F",[167,32557,1271],{"class":177},[167,32559,185],{"class":173},[167,32561,32562,32565,32567],{"class":169,"line":279},[167,32563,32564],{"class":173},"        \u003C\u002F",[167,32566,80],{"class":177},[167,32568,185],{"class":173},[167,32570,32571,32573,32575],{"class":169,"line":289},[167,32572,10170],{"class":173},[167,32574,62],{"class":177},[167,32576,185],{"class":173},[167,32578,32579,32581,32583],{"class":169,"line":294},[167,32580,1292],{"class":173},[167,32582,75],{"class":177},[167,32584,185],{"class":173},[167,32586,32587,32589,32591],{"class":169,"line":304},[167,32588,504],{"class":173},[167,32590,56],{"class":177},[167,32592,185],{"class":173},[167,32594,32595,32597,32599],{"class":169,"line":313},[167,32596,282],{"class":173},[167,32598,299],{"class":177},[167,32600,185],{"class":173},[3087,32602,32604,32605,32607],{"id":32603},"_4-v-slot-con-argumento-dinámico","4) ",[87,32606,31708],{}," con argumento dinámico",[15,32609,32610],{},"Vue permite argumentos dinámicos usando la misma sintaxis que otras directivas dinámicas:",[154,32612,32616],{"className":156,"code":32613,"filename":32614,"highlights":32615,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CWidgetShell>\n    \u003Ctemplate v-slot:[zonaActiva]>\n      \u003Cp>Este bloque entra en una zona dinámica.\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n  \u003C\u002FWidgetShell>\n\u003C\u002Ftemplate>\n","Padre.vue",[205],[87,32617,32618,32626,32635,32647,32660,32668,32676],{"__ignoreMap":163},[167,32619,32620,32622,32624],{"class":169,"line":170},[167,32621,174],{"class":173},[167,32623,299],{"class":177},[167,32625,185],{"class":173},[167,32627,32628,32630,32633],{"class":169,"line":188},[167,32629,307],{"class":173},[167,32631,32632],{"class":177},"WidgetShell",[167,32634,185],{"class":173},[167,32636,32638,32640,32642,32644],{"class":32637,"line":205},[169,213],[167,32639,1257],{"class":173},[167,32641,299],{"class":177},[167,32643,32029],{"class":181},[167,32645,32646],{"class":173},":[zonaActiva]>\n",[167,32648,32649,32651,32653,32656,32658],{"class":169,"line":160},[167,32650,1268],{"class":173},[167,32652,15],{"class":177},[167,32654,32655],{"class":173},">Este bloque entra en una zona dinámica.\u003C\u002F",[167,32657,15],{"class":177},[167,32659,185],{"class":173},[167,32661,32662,32664,32666],{"class":169,"line":238},[167,32663,1292],{"class":173},[167,32665,299],{"class":177},[167,32667,185],{"class":173},[167,32669,32670,32672,32674],{"class":169,"line":243},[167,32671,504],{"class":173},[167,32673,32632],{"class":177},[167,32675,185],{"class":173},[167,32677,32678,32680,32682],{"class":169,"line":261},[167,32679,282],{"class":173},[167,32681,299],{"class":177},[167,32683,185],{"class":173},[5367,32685,32686],{},[15,32687,32688],{},"Úsalo con moderación. Si existen muchas zonas dinámicas, probablemente la API del componente necesite simplificarse.",[11,32690,32692],{"id":32691},"ejemplo-con-composition-api","Ejemplo con Composition API",[15,32694,32695],{},"El hijo expone una tabla base y el padre decide cómo renderizar la celda de acciones.",[154,32697,32699],{"className":156,"code":32698,"filename":32103,"language":162,"meta":163,"style":163},"\u003Cscript setup>\ndefineProps({\n  rows: {\n    type: Array,\n    required: true,\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctable class=\"min-w-full border-collapse\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth class=\"text-left\">Nombre\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Rol\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Acciones\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n        \u003Ctd>{{ user.name }}\u003C\u002Ftd>\n        \u003Ctd>{{ user.role }}\u003C\u002Ftd>\n        \u003Ctd>\n          \u003Cslot name=\"actions\" :user=\"user\">\n            \u003Cbutton type=\"button\">Ver perfil\u003C\u002Fbutton>\n          \u003C\u002Fslot>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Ftemplate>\n",[87,32700,32701,32711,32717,32722,32727,32735,32739,32743,32751,32755,32763,32778,32786,32794,32814,32833,32852,32860,32868,32876,32897,32909,32922,32930,32952,32972,32980,32988,32996,33004,33012],{"__ignoreMap":163},[167,32702,32703,32705,32707,32709],{"class":169,"line":170},[167,32704,174],{"class":173},[167,32706,178],{"class":177},[167,32708,182],{"class":181},[167,32710,185],{"class":173},[167,32712,32713,32715],{"class":169,"line":188},[167,32714,369],{"class":181},[167,32716,372],{"class":173},[167,32718,32719],{"class":169,"line":205},[167,32720,32721],{"class":173},"  rows: {\n",[167,32723,32724],{"class":169,"line":160},[167,32725,32726],{"class":173},"    type: Array,\n",[167,32728,32729,32731,32733],{"class":169,"line":238},[167,32730,387],{"class":173},[167,32732,390],{"class":219},[167,32734,393],{"class":173},[167,32736,32737],{"class":169,"line":243},[167,32738,398],{"class":173},[167,32740,32741],{"class":169,"line":261},[167,32742,27327],{"class":173},[167,32744,32745,32747,32749],{"class":169,"line":273},[167,32746,282],{"class":173},[167,32748,178],{"class":177},[167,32750,185],{"class":173},[167,32752,32753],{"class":169,"line":279},[167,32754,209],{"emptyLinePlaceholder":208},[167,32756,32757,32759,32761],{"class":169,"line":289},[167,32758,174],{"class":173},[167,32760,299],{"class":177},[167,32762,185],{"class":173},[167,32764,32765,32767,32769,32771,32773,32776],{"class":169,"line":294},[167,32766,307],{"class":173},[167,32768,56],{"class":177},[167,32770,1245],{"class":181},[167,32772,267],{"class":173},[167,32774,32775],{"class":201},"\"min-w-full border-collapse\"",[167,32777,185],{"class":173},[167,32779,32780,32782,32784],{"class":169,"line":304},[167,32781,1257],{"class":173},[167,32783,59],{"class":177},[167,32785,185],{"class":173},[167,32787,32788,32790,32792],{"class":169,"line":313},[167,32789,1268],{"class":173},[167,32791,62],{"class":177},[167,32793,185],{"class":173},[167,32795,32796,32798,32800,32802,32804,32807,32810,32812],{"class":169,"line":161},[167,32797,32516],{"class":173},[167,32799,65],{"class":177},[167,32801,1245],{"class":181},[167,32803,267],{"class":173},[167,32805,32806],{"class":201},"\"text-left\"",[167,32808,32809],{"class":173},">Nombre\u003C\u002F",[167,32811,65],{"class":177},[167,32813,185],{"class":173},[167,32815,32816,32818,32820,32822,32824,32826,32829,32831],{"class":169,"line":335},[167,32817,32516],{"class":173},[167,32819,65],{"class":177},[167,32821,1245],{"class":181},[167,32823,267],{"class":173},[167,32825,32806],{"class":201},[167,32827,32828],{"class":173},">Rol\u003C\u002F",[167,32830,65],{"class":177},[167,32832,185],{"class":173},[167,32834,32835,32837,32839,32841,32843,32845,32848,32850],{"class":169,"line":341},[167,32836,32516],{"class":173},[167,32838,65],{"class":177},[167,32840,1245],{"class":181},[167,32842,267],{"class":173},[167,32844,32806],{"class":201},[167,32846,32847],{"class":173},">Acciones\u003C\u002F",[167,32849,65],{"class":177},[167,32851,185],{"class":173},[167,32853,32854,32856,32858],{"class":169,"line":489},[167,32855,10170],{"class":173},[167,32857,62],{"class":177},[167,32859,185],{"class":173},[167,32861,32862,32864,32866],{"class":169,"line":495},[167,32863,1292],{"class":173},[167,32865,59],{"class":177},[167,32867,185],{"class":173},[167,32869,32870,32872,32874],{"class":169,"line":501},[167,32871,1257],{"class":173},[167,32873,75],{"class":177},[167,32875,185],{"class":173},[167,32877,32878,32880,32882,32884,32886,32889,32891,32893,32895],{"class":169,"line":512},[167,32879,1268],{"class":173},[167,32881,62],{"class":177},[167,32883,18706],{"class":181},[167,32885,267],{"class":173},[167,32887,32888],{"class":201},"\"user in rows\"",[167,32890,10307],{"class":181},[167,32892,267],{"class":173},[167,32894,18718],{"class":201},[167,32896,185],{"class":173},[167,32898,32899,32901,32903,32905,32907],{"class":169,"line":781},[167,32900,32516],{"class":173},[167,32902,80],{"class":177},[167,32904,28624],{"class":173},[167,32906,80],{"class":177},[167,32908,185],{"class":173},[167,32910,32911,32913,32915,32918,32920],{"class":169,"line":786},[167,32912,32516],{"class":173},[167,32914,80],{"class":177},[167,32916,32917],{"class":173},">{{ user.role }}\u003C\u002F",[167,32919,80],{"class":177},[167,32921,185],{"class":173},[167,32923,32924,32926,32928],{"class":169,"line":2678},[167,32925,32516],{"class":173},[167,32927,80],{"class":177},[167,32929,185],{"class":173},[167,32931,32932,32934,32936,32938,32940,32943,32946,32948,32950],{"class":169,"line":2692},[167,32933,32526],{"class":173},[167,32935,1271],{"class":177},[167,32937,1274],{"class":181},[167,32939,267],{"class":173},[167,32941,32942],{"class":201},"\"actions\"",[167,32944,32945],{"class":181}," :user",[167,32947,267],{"class":173},[167,32949,27391],{"class":201},[167,32951,185],{"class":173},[167,32953,32954,32957,32959,32961,32963,32965,32968,32970],{"class":169,"line":3575},[167,32955,32956],{"class":173},"            \u003C",[167,32958,507],{"class":177},[167,32960,1174],{"class":181},[167,32962,267],{"class":173},[167,32964,1179],{"class":201},[167,32966,32967],{"class":173},">Ver perfil\u003C\u002F",[167,32969,507],{"class":177},[167,32971,185],{"class":173},[167,32973,32974,32976,32978],{"class":169,"line":5028},[167,32975,32555],{"class":173},[167,32977,1271],{"class":177},[167,32979,185],{"class":173},[167,32981,32982,32984,32986],{"class":169,"line":5037},[167,32983,32564],{"class":173},[167,32985,80],{"class":177},[167,32987,185],{"class":173},[167,32989,32990,32992,32994],{"class":169,"line":5046},[167,32991,10170],{"class":173},[167,32993,62],{"class":177},[167,32995,185],{"class":173},[167,32997,32998,33000,33002],{"class":169,"line":6756},[167,32999,1292],{"class":173},[167,33001,75],{"class":177},[167,33003,185],{"class":173},[167,33005,33006,33008,33010],{"class":169,"line":6778},[167,33007,504],{"class":173},[167,33009,56],{"class":177},[167,33011,185],{"class":173},[167,33013,33014,33016,33018],{"class":169,"line":6783},[167,33015,282],{"class":173},[167,33017,299],{"class":177},[167,33019,185],{"class":173},[154,33021,33024],{"className":156,"code":33022,"filename":33023,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\nimport DataTable from \".\u002FDataTable.vue\";\n\nconst users = ref([\n  { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n  { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n]);\n\nfunction toggleStatus(user) {\n  user.active = !user.active;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDataTable :rows=\"users\">\n    \u003Ctemplate #actions=\"{ user }\">\n      \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n        {{ user.active ? \"Desactivar\" : \"Activar\" }}\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDataTable>\n\u003C\u002Ftemplate>\n","UsersView.vue",[87,33025,33026,33036,33048,33062,33066,33078,33101,33122,33126,33130,33143,33155,33159,33167,33171,33179,33195,33218,33239,33244,33252,33260,33268],{"__ignoreMap":163},[167,33027,33028,33030,33032,33034],{"class":169,"line":170},[167,33029,174],{"class":173},[167,33031,178],{"class":177},[167,33033,182],{"class":181},[167,33035,185],{"class":173},[167,33037,33038,33040,33042,33044,33046],{"class":169,"line":188},[167,33039,192],{"class":191},[167,33041,195],{"class":173},[167,33043,198],{"class":191},[167,33045,24041],{"class":201},[167,33047,24044],{"class":173},[167,33049,33050,33052,33055,33057,33060],{"class":169,"line":205},[167,33051,192],{"class":191},[167,33053,33054],{"class":173}," DataTable ",[167,33056,198],{"class":191},[167,33058,33059],{"class":201}," \".\u002FDataTable.vue\"",[167,33061,24044],{"class":173},[167,33063,33064],{"class":169,"line":160},[167,33065,209],{"emptyLinePlaceholder":208},[167,33067,33068,33070,33072,33074,33076],{"class":169,"line":238},[167,33069,216],{"class":191},[167,33071,16954],{"class":219},[167,33073,223],{"class":191},[167,33075,226],{"class":181},[167,33077,1827],{"class":173},[167,33079,33080,33082,33084,33086,33088,33091,33094,33097,33099],{"class":169,"line":243},[167,33081,1832],{"class":173},[167,33083,1835],{"class":219},[167,33085,1838],{"class":173},[167,33087,23487],{"class":201},[167,33089,33090],{"class":173},", role: ",[167,33092,33093],{"class":201},"\"Admin\"",[167,33095,33096],{"class":173},", active: ",[167,33098,390],{"class":219},[167,33100,1856],{"class":173},[167,33102,33103,33105,33107,33109,33111,33113,33116,33118,33120],{"class":169,"line":261},[167,33104,1832],{"class":173},[167,33106,1853],{"class":219},[167,33108,1838],{"class":173},[167,33110,28507],{"class":201},[167,33112,33090],{"class":173},[167,33114,33115],{"class":201},"\"Editor\"",[167,33117,33096],{"class":173},[167,33119,3392],{"class":219},[167,33121,1856],{"class":173},[167,33123,33124],{"class":169,"line":273},[167,33125,28545],{"class":173},[167,33127,33128],{"class":169,"line":279},[167,33129,209],{"emptyLinePlaceholder":208},[167,33131,33132,33134,33137,33139,33141],{"class":169,"line":289},[167,33133,246],{"class":191},[167,33135,33136],{"class":181}," toggleStatus",[167,33138,229],{"class":173},[167,33140,729],{"class":254},[167,33142,258],{"class":173},[167,33144,33145,33148,33150,33152],{"class":169,"line":294},[167,33146,33147],{"class":173},"  user.active ",[167,33149,267],{"class":191},[167,33151,5625],{"class":191},[167,33153,33154],{"class":173},"user.active;\n",[167,33156,33157],{"class":169,"line":304},[167,33158,276],{"class":173},[167,33160,33161,33163,33165],{"class":169,"line":313},[167,33162,282],{"class":173},[167,33164,178],{"class":177},[167,33166,185],{"class":173},[167,33168,33169],{"class":169,"line":161},[167,33170,209],{"emptyLinePlaceholder":208},[167,33172,33173,33175,33177],{"class":169,"line":335},[167,33174,174],{"class":173},[167,33176,299],{"class":177},[167,33178,185],{"class":173},[167,33180,33181,33183,33185,33188,33190,33193],{"class":169,"line":341},[167,33182,307],{"class":173},[167,33184,32114],{"class":177},[167,33186,33187],{"class":181}," :rows",[167,33189,267],{"class":173},[167,33191,33192],{"class":201},"\"users\"",[167,33194,185],{"class":173},[167,33196,33197,33199,33201,33204,33207,33209,33211,33214,33216],{"class":169,"line":489},[167,33198,1257],{"class":173},[167,33200,299],{"class":177},[167,33202,33203],{"class":173}," #",[167,33205,33206],{"class":181},"actions",[167,33208,267],{"class":173},[167,33210,5080],{"class":201},[167,33212,33213],{"class":173},"{ user }",[167,33215,5080],{"class":201},[167,33217,185],{"class":173},[167,33219,33220,33222,33224,33226,33228,33230,33232,33234,33237],{"class":169,"line":495},[167,33221,1268],{"class":173},[167,33223,507],{"class":177},[167,33225,1174],{"class":181},[167,33227,267],{"class":173},[167,33229,1179],{"class":201},[167,33231,1182],{"class":181},[167,33233,267],{"class":173},[167,33235,33236],{"class":201},"\"toggleStatus(user)\"",[167,33238,185],{"class":173},[167,33240,33241],{"class":169,"line":501},[167,33242,33243],{"class":173},"        {{ user.active ? \"Desactivar\" : \"Activar\" }}\n",[167,33245,33246,33248,33250],{"class":169,"line":512},[167,33247,10170],{"class":173},[167,33249,507],{"class":177},[167,33251,185],{"class":173},[167,33253,33254,33256,33258],{"class":169,"line":781},[167,33255,1292],{"class":173},[167,33257,299],{"class":177},[167,33259,185],{"class":173},[167,33261,33262,33264,33266],{"class":169,"line":786},[167,33263,504],{"class":173},[167,33265,32114],{"class":177},[167,33267,185],{"class":173},[167,33269,33270,33272,33274],{"class":169,"line":2678},[167,33271,282],{"class":173},[167,33273,299],{"class":177},[167,33275,185],{"class":173},[11,33277,33279],{"id":33278},"ejemplo-con-options-api","Ejemplo con Options API",[15,33281,33282],{},"El mismo comportamiento, ahora utilizando Options API para mantener equivalencia conceptual.",[154,33284,33286],{"className":156,"code":33285,"filename":32103,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  props: {\n    rows: {\n      type: Array,\n      required: true,\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctable class=\"min-w-full border-collapse\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth class=\"text-left\">Nombre\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Rol\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Acciones\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n        \u003Ctd>{{ user.name }}\u003C\u002Ftd>\n        \u003Ctd>{{ user.role }}\u003C\u002Ftd>\n        \u003Ctd>\n          \u003Cslot name=\"actions\" :user=\"user\">\n            \u003Cbutton type=\"button\">Ver perfil\u003C\u002Fbutton>\n          \u003C\u002Fslot>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Ftemplate>\n",[87,33287,33288,33296,33304,33308,33313,33318,33326,33330,33334,33338,33346,33350,33358,33372,33380,33388,33406,33424,33442,33450,33458,33466,33486,33498,33510,33518,33538,33556,33564,33572,33580,33588,33596],{"__ignoreMap":163},[167,33289,33290,33292,33294],{"class":169,"line":170},[167,33291,174],{"class":173},[167,33293,178],{"class":177},[167,33295,185],{"class":173},[167,33297,33298,33300,33302],{"class":169,"line":188},[167,33299,608],{"class":191},[167,33301,3991],{"class":191},[167,33303,1905],{"class":173},[167,33305,33306],{"class":169,"line":205},[167,33307,3999],{"class":173},[167,33309,33310],{"class":169,"line":160},[167,33311,33312],{"class":173},"    rows: {\n",[167,33314,33315],{"class":169,"line":238},[167,33316,33317],{"class":173},"      type: Array,\n",[167,33319,33320,33322,33324],{"class":169,"line":243},[167,33321,4017],{"class":173},[167,33323,390],{"class":219},[167,33325,393],{"class":173},[167,33327,33328],{"class":169,"line":261},[167,33329,755],{"class":173},[167,33331,33332],{"class":169,"line":273},[167,33333,398],{"class":173},[167,33335,33336],{"class":169,"line":279},[167,33337,24148],{"class":173},[167,33339,33340,33342,33344],{"class":169,"line":289},[167,33341,282],{"class":173},[167,33343,178],{"class":177},[167,33345,185],{"class":173},[167,33347,33348],{"class":169,"line":294},[167,33349,209],{"emptyLinePlaceholder":208},[167,33351,33352,33354,33356],{"class":169,"line":304},[167,33353,174],{"class":173},[167,33355,299],{"class":177},[167,33357,185],{"class":173},[167,33359,33360,33362,33364,33366,33368,33370],{"class":169,"line":313},[167,33361,307],{"class":173},[167,33363,56],{"class":177},[167,33365,1245],{"class":181},[167,33367,267],{"class":173},[167,33369,32775],{"class":201},[167,33371,185],{"class":173},[167,33373,33374,33376,33378],{"class":169,"line":161},[167,33375,1257],{"class":173},[167,33377,59],{"class":177},[167,33379,185],{"class":173},[167,33381,33382,33384,33386],{"class":169,"line":335},[167,33383,1268],{"class":173},[167,33385,62],{"class":177},[167,33387,185],{"class":173},[167,33389,33390,33392,33394,33396,33398,33400,33402,33404],{"class":169,"line":341},[167,33391,32516],{"class":173},[167,33393,65],{"class":177},[167,33395,1245],{"class":181},[167,33397,267],{"class":173},[167,33399,32806],{"class":201},[167,33401,32809],{"class":173},[167,33403,65],{"class":177},[167,33405,185],{"class":173},[167,33407,33408,33410,33412,33414,33416,33418,33420,33422],{"class":169,"line":489},[167,33409,32516],{"class":173},[167,33411,65],{"class":177},[167,33413,1245],{"class":181},[167,33415,267],{"class":173},[167,33417,32806],{"class":201},[167,33419,32828],{"class":173},[167,33421,65],{"class":177},[167,33423,185],{"class":173},[167,33425,33426,33428,33430,33432,33434,33436,33438,33440],{"class":169,"line":495},[167,33427,32516],{"class":173},[167,33429,65],{"class":177},[167,33431,1245],{"class":181},[167,33433,267],{"class":173},[167,33435,32806],{"class":201},[167,33437,32847],{"class":173},[167,33439,65],{"class":177},[167,33441,185],{"class":173},[167,33443,33444,33446,33448],{"class":169,"line":501},[167,33445,10170],{"class":173},[167,33447,62],{"class":177},[167,33449,185],{"class":173},[167,33451,33452,33454,33456],{"class":169,"line":512},[167,33453,1292],{"class":173},[167,33455,59],{"class":177},[167,33457,185],{"class":173},[167,33459,33460,33462,33464],{"class":169,"line":781},[167,33461,1257],{"class":173},[167,33463,75],{"class":177},[167,33465,185],{"class":173},[167,33467,33468,33470,33472,33474,33476,33478,33480,33482,33484],{"class":169,"line":786},[167,33469,1268],{"class":173},[167,33471,62],{"class":177},[167,33473,18706],{"class":181},[167,33475,267],{"class":173},[167,33477,32888],{"class":201},[167,33479,10307],{"class":181},[167,33481,267],{"class":173},[167,33483,18718],{"class":201},[167,33485,185],{"class":173},[167,33487,33488,33490,33492,33494,33496],{"class":169,"line":2678},[167,33489,32516],{"class":173},[167,33491,80],{"class":177},[167,33493,28624],{"class":173},[167,33495,80],{"class":177},[167,33497,185],{"class":173},[167,33499,33500,33502,33504,33506,33508],{"class":169,"line":2692},[167,33501,32516],{"class":173},[167,33503,80],{"class":177},[167,33505,32917],{"class":173},[167,33507,80],{"class":177},[167,33509,185],{"class":173},[167,33511,33512,33514,33516],{"class":169,"line":3575},[167,33513,32516],{"class":173},[167,33515,80],{"class":177},[167,33517,185],{"class":173},[167,33519,33520,33522,33524,33526,33528,33530,33532,33534,33536],{"class":169,"line":5028},[167,33521,32526],{"class":173},[167,33523,1271],{"class":177},[167,33525,1274],{"class":181},[167,33527,267],{"class":173},[167,33529,32942],{"class":201},[167,33531,32945],{"class":181},[167,33533,267],{"class":173},[167,33535,27391],{"class":201},[167,33537,185],{"class":173},[167,33539,33540,33542,33544,33546,33548,33550,33552,33554],{"class":169,"line":5037},[167,33541,32956],{"class":173},[167,33543,507],{"class":177},[167,33545,1174],{"class":181},[167,33547,267],{"class":173},[167,33549,1179],{"class":201},[167,33551,32967],{"class":173},[167,33553,507],{"class":177},[167,33555,185],{"class":173},[167,33557,33558,33560,33562],{"class":169,"line":5046},[167,33559,32555],{"class":173},[167,33561,1271],{"class":177},[167,33563,185],{"class":173},[167,33565,33566,33568,33570],{"class":169,"line":6756},[167,33567,32564],{"class":173},[167,33569,80],{"class":177},[167,33571,185],{"class":173},[167,33573,33574,33576,33578],{"class":169,"line":6778},[167,33575,10170],{"class":173},[167,33577,62],{"class":177},[167,33579,185],{"class":173},[167,33581,33582,33584,33586],{"class":169,"line":6783},[167,33583,1292],{"class":173},[167,33585,75],{"class":177},[167,33587,185],{"class":173},[167,33589,33590,33592,33594],{"class":169,"line":6788},[167,33591,504],{"class":173},[167,33593,56],{"class":177},[167,33595,185],{"class":173},[167,33597,33598,33600,33602],{"class":169,"line":6793},[167,33599,282],{"class":173},[167,33601,299],{"class":177},[167,33603,185],{"class":173},[154,33605,33607],{"className":156,"code":33606,"filename":33023,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport DataTable from \".\u002FDataTable.vue\";\n\nexport default {\n  components: { DataTable },\n  data() {\n    return {\n      users: [\n        { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n        { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n      ],\n    };\n  },\n  methods: {\n    toggleStatus(user) {\n      user.active = !user.active;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDataTable :rows=\"users\">\n    \u003Ctemplate #actions=\"{ user }\">\n      \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n        {{ user.active ? \"Desactivar\" : \"Activar\" }}\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDataTable>\n\u003C\u002Ftemplate>\n",[87,33608,33609,33617,33629,33633,33641,33646,33652,33658,33662,33682,33702,33706,33710,33714,33718,33729,33740,33744,33748,33752,33760,33764,33772,33786,33806,33826,33830,33838,33846,33854],{"__ignoreMap":163},[167,33610,33611,33613,33615],{"class":169,"line":170},[167,33612,174],{"class":173},[167,33614,178],{"class":177},[167,33616,185],{"class":173},[167,33618,33619,33621,33623,33625,33627],{"class":169,"line":188},[167,33620,192],{"class":191},[167,33622,33054],{"class":173},[167,33624,198],{"class":191},[167,33626,33059],{"class":201},[167,33628,24044],{"class":173},[167,33630,33631],{"class":169,"line":205},[167,33632,209],{"emptyLinePlaceholder":208},[167,33634,33635,33637,33639],{"class":169,"line":160},[167,33636,608],{"class":191},[167,33638,3991],{"class":191},[167,33640,1905],{"class":173},[167,33642,33643],{"class":169,"line":238},[167,33644,33645],{"class":173},"  components: { DataTable },\n",[167,33647,33648,33650],{"class":169,"line":243},[167,33649,7176],{"class":181},[167,33651,763],{"class":173},[167,33653,33654,33656],{"class":169,"line":261},[167,33655,1937],{"class":191},[167,33657,1905],{"class":173},[167,33659,33660],{"class":169,"line":273},[167,33661,28752],{"class":173},[167,33663,33664,33666,33668,33670,33672,33674,33676,33678,33680],{"class":169,"line":279},[167,33665,8677],{"class":173},[167,33667,1835],{"class":219},[167,33669,1838],{"class":173},[167,33671,23487],{"class":201},[167,33673,33090],{"class":173},[167,33675,33093],{"class":201},[167,33677,33096],{"class":173},[167,33679,390],{"class":219},[167,33681,1856],{"class":173},[167,33683,33684,33686,33688,33690,33692,33694,33696,33698,33700],{"class":169,"line":289},[167,33685,8677],{"class":173},[167,33687,1853],{"class":219},[167,33689,1838],{"class":173},[167,33691,28507],{"class":201},[167,33693,33090],{"class":173},[167,33695,33115],{"class":201},[167,33697,33096],{"class":173},[167,33699,3392],{"class":219},[167,33701,1856],{"class":173},[167,33703,33704],{"class":169,"line":294},[167,33705,16114],{"class":173},[167,33707,33708],{"class":169,"line":304},[167,33709,24370],{"class":173},[167,33711,33712],{"class":169,"line":313},[167,33713,398],{"class":173},[167,33715,33716],{"class":169,"line":161},[167,33717,4419],{"class":173},[167,33719,33720,33723,33725,33727],{"class":169,"line":335},[167,33721,33722],{"class":181},"    toggleStatus",[167,33724,229],{"class":173},[167,33726,729],{"class":254},[167,33728,258],{"class":173},[167,33730,33731,33734,33736,33738],{"class":169,"line":341},[167,33732,33733],{"class":173},"      user.active ",[167,33735,267],{"class":191},[167,33737,5625],{"class":191},[167,33739,33154],{"class":173},[167,33741,33742],{"class":169,"line":489},[167,33743,755],{"class":173},[167,33745,33746],{"class":169,"line":495},[167,33747,398],{"class":173},[167,33749,33750],{"class":169,"line":501},[167,33751,24148],{"class":173},[167,33753,33754,33756,33758],{"class":169,"line":512},[167,33755,282],{"class":173},[167,33757,178],{"class":177},[167,33759,185],{"class":173},[167,33761,33762],{"class":169,"line":781},[167,33763,209],{"emptyLinePlaceholder":208},[167,33765,33766,33768,33770],{"class":169,"line":786},[167,33767,174],{"class":173},[167,33769,299],{"class":177},[167,33771,185],{"class":173},[167,33773,33774,33776,33778,33780,33782,33784],{"class":169,"line":2678},[167,33775,307],{"class":173},[167,33777,32114],{"class":177},[167,33779,33187],{"class":181},[167,33781,267],{"class":173},[167,33783,33192],{"class":201},[167,33785,185],{"class":173},[167,33787,33788,33790,33792,33794,33796,33798,33800,33802,33804],{"class":169,"line":2692},[167,33789,1257],{"class":173},[167,33791,299],{"class":177},[167,33793,33203],{"class":173},[167,33795,33206],{"class":181},[167,33797,267],{"class":173},[167,33799,5080],{"class":201},[167,33801,33213],{"class":173},[167,33803,5080],{"class":201},[167,33805,185],{"class":173},[167,33807,33808,33810,33812,33814,33816,33818,33820,33822,33824],{"class":169,"line":3575},[167,33809,1268],{"class":173},[167,33811,507],{"class":177},[167,33813,1174],{"class":181},[167,33815,267],{"class":173},[167,33817,1179],{"class":201},[167,33819,1182],{"class":181},[167,33821,267],{"class":173},[167,33823,33236],{"class":201},[167,33825,185],{"class":173},[167,33827,33828],{"class":169,"line":5028},[167,33829,33243],{"class":173},[167,33831,33832,33834,33836],{"class":169,"line":5037},[167,33833,10170],{"class":173},[167,33835,507],{"class":177},[167,33837,185],{"class":173},[167,33839,33840,33842,33844],{"class":169,"line":5046},[167,33841,1292],{"class":173},[167,33843,299],{"class":177},[167,33845,185],{"class":173},[167,33847,33848,33850,33852],{"class":169,"line":6756},[167,33849,504],{"class":173},[167,33851,32114],{"class":177},[167,33853,185],{"class":173},[167,33855,33856,33858,33860],{"class":169,"line":6778},[167,33857,282],{"class":173},[167,33859,299],{"class":177},[167,33861,185],{"class":173},[22,33863,7678],{"id":7677},[33,33865,33866,33871,33874,33881,33884,33887],{},[36,33867,33868,33870],{},[87,33869,31708],{}," transforma componentes rígidos en piezas reutilizables y expresivas.",[36,33872,33873],{},"Usa el slot por defecto para el contenido principal.",[36,33875,33876,33877,1025,33879,7863],{},"Usa slots nombrados para estructura (",[87,33878,1260],{},[87,33880,1334],{},[36,33882,33883],{},"Usa scoped slots cuando el hijo deba compartir datos y el padre controlar el render.",[36,33885,33886],{},"Define fallback cuando tenga sentido para evitar huecos vacíos.",[36,33888,33889],{},"Mantén la API clara: props para configuración, slots para contenido y emits para eventos.",[924,33891,33892],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":33894},[33895,33896,33897,33898,33899,33906,33913],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":33900},[33901,33903,33904,33905],{"id":31991,"depth":205,"text":33902},"1) Usar v-slot en un elemento que no es componente o \u003Ctemplate>",{"id":32091,"depth":205,"text":32092},{"id":32159,"depth":205,"text":32160},{"id":32192,"depth":205,"text":32193},{"id":7996,"depth":188,"text":7997,"children":33907},[33908,33909,33910,33911],{"id":32230,"depth":205,"text":32231},{"id":32309,"depth":205,"text":32310},{"id":32458,"depth":205,"text":32459},{"id":32603,"depth":205,"text":33912},"4) v-slot con argumento dinámico",{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771508914\u002Fdirectives-vue-v-slot-guide_wr2iyy.png","Portada del artículo Directivas en Vue: v-slot","2026-02-19","Aprende a dominar v-slot en Vue 3: slots por defecto, nombrados y con props (scoped slots), con ejemplos claros en Composition API y Options API.",{"updatedAt":33919,"coverCaption":33920,"author":946,"keywords":33921},"2026-02-19T08:00:00-05:00","Usa v-slot para construir componentes más flexibles y reutilizables.",[3258,31708,33922,31956,33923,3260,3973],"slots","componentes reutilizables","\u002Fblog\u002Fdirectives-vue-v-slot-guide.es",[33926],{"headline":33927,"author":33928,"datePublished":33919,"@type":961},"Directivas en Vue: v-slot con ejemplos claros y prácticos",{"name":946,"@type":959},{"title":31700,"description":33917},"blog\u002Fdirectives-vue-v-slot-guide.es",[33932,33933,33934,33935],{"tag":26466,"color":26467},{"tag":1647,"color":1648},{"tag":1625,"color":1639},{"tag":7730,"color":7731},"DxshI1c7MLWMpiJg_QZh4QLABHouxeRnejywUpaJAOU",{"id":33938,"title":33939,"body":33940,"cover":36728,"coverAlt":36729,"date":36730,"description":36731,"draft":940,"extension":941,"lab":942,"locale":943,"meta":36732,"navigation":208,"path":36737,"schemaOrg":36738,"seo":36742,"series":26460,"seriesDescription":26461,"seriesOrder":243,"seriesTitle":26462,"slug":942,"stem":36743,"tags":36744,"__hash__":36751},"blog\u002Fblog\u002Fdirectives-vue-v-model-guide.es.md","Directivas en Vue: v-model",{"type":8,"value":33941,"toc":36703},[33942,33947,33952,33954,33960,33965,33983,33985,33990,33994,34013,34035,34039,34042,34065,34068,34085,34095,34097,34102,34104,34128,34130,34134,34151,34153,34157,34159,34219,34228,34233,34240,34242,34272,34279,34282,34306,34310,34313,34335,34339,34345,34347,34351,34478,34608,34615,34759,34895,34899,35026,35156,35160,35162,35171,35314,35903,35905,35912,36090,36659,36661,36666,36669,36671,36701],[11,33943,26483,33945],{"id":33944},"directivas-en-vue-v-model",[87,33946,23865],{},[15,33948,33949,33951],{},[87,33950,23865],{}," reduce fricción en formularios porque sincroniza la UI y el estado con una sola declaración. Bien utilizado, hace que tus componentes sean más legibles y consistentes; mal aplicado, puede ocultar flujos de datos confusos y bugs sutiles.",[22,33953,26503],{"id":26502},[15,33955,33956,33957,33959],{},"En interfaces reales, gran parte de la experiencia depende de formularios y filtros.\n",[87,33958,23865],{}," te permite declarar la sincronización entre vista y estado sin manipular el DOM manualmente, manteniendo el código más predecible y fácil de mantener.",[15,33961,3810,33962,33964],{},[87,33963,23865],{}," puedes:",[33,33966,33967,33977,33980],{},[36,33968,33969,33970,33973,33974,1679],{},"Evitar boilerplate repetitivo de ",[87,33971,33972],{},":value"," + ",[87,33975,33976],{},"@input",[36,33978,33979],{},"Mantener alineado lo que ve el usuario con el estado reactivo.",[36,33981,33982],{},"Estandarizar la API de componentes de formulario reutilizables.",[22,33984,6257],{"id":6256},[15,33986,26413,33987,33989],{},[87,33988,23865],{}," es azúcar sintáctica para enlazar un valor y escuchar su actualización.",[3087,33991,33993],{"id":33992},"en-elementos-nativos","En elementos nativos",[33,33995,33996,34002],{},[36,33997,33998,34001],{},[87,33999,34000],{},"v-model=\"email\""," equivale a enlazar el valor y escuchar el evento correspondiente.",[36,34003,34004,34005,1025,34007,1025,34010,7863],{},"Vue adapta automáticamente la prop y el evento según el tipo de control (",[87,34006,2650],{},[87,34008,34009],{},"change",[87,34011,34012],{},"checkbox",[15,34014,34015,34016,34019,34020,33973,34022,34024,34025,34028,34029,34032,34033,1679],{},"Por ejemplo, en un ",[87,34017,34018],{},"\u003Cinput type=\"text\">",", se traduce a ",[87,34021,33972],{},[87,34023,33976],{},".\nEn un ",[87,34026,34027],{},"\u003Cinput type=\"checkbox\">",", enlaza ",[87,34030,34031],{},"checked"," y escucha ",[87,34034,34009],{},[3087,34036,34038],{"id":34037},"en-componentes","En componentes",[15,34040,34041],{},"En Vue 3:",[33,34043,34044,34050,34056],{},[36,34045,34046,34047,1679],{},"Por defecto usa la prop ",[87,34048,34049],{},"modelValue",[36,34051,34052,34053,1679],{},"Espera el evento ",[87,34054,34055],{},"update:modelValue",[36,34057,34058,34059,1025,34062,1679],{},"Puedes usar argumentos para modelos adicionales: ",[87,34060,34061],{},"v-model:title",[87,34063,34064],{},"v-model:filters",[15,34066,34067],{},"También soporta modificadores como:",[33,34069,34070,34075,34080],{},[36,34071,34072],{},[87,34073,34074],{},".trim",[36,34076,34077],{},[87,34078,34079],{},".number",[36,34081,34082],{},[87,34083,34084],{},".lazy",[15,34086,34087,34088,34091,34092,34094],{},"Desde Vue 3.3+, puedes usar ",[87,34089,34090],{},"defineModel()"," en ",[87,34093,1008],{}," para simplificar la definición del contrato del modelo en componentes.",[22,34096,6322],{"id":6321},[15,34098,1582,34099,34101],{},[87,34100,23865],{}," cuando el objetivo principal sea sincronizar datos de entrada con el estado de la aplicación.",[15,34103,9308],{},[33,34105,34106,34109,34112,34125],{},[36,34107,34108],{},"Formularios de registro, login o perfil.",[36,34110,34111],{},"Filtros de búsqueda en tiempo real.",[36,34113,34114,34115,1025,34118,1025,34121,34124],{},"Componentes de UI reutilizables (",[87,34116,34117],{},"TextInput",[87,34119,34120],{},"Toggle",[87,34122,34123],{},"Select",") con contrato consistente.",[36,34126,34127],{},"Configuraciones rápidas de interfaz (switches, sliders, preferencias).",[22,34129,6349],{"id":6348},[15,34131,13622,34132,13627],{},[87,34133,23865],{},[33,34135,34136,34142,34145,34148],{},[36,34137,34138,34139,34141],{},"El dato es de solo lectura o derivado (",[87,34140,1661],{}," sin setter).",[36,34143,34144],{},"Necesitas trazabilidad estricta de cada cambio por reglas de dominio complejas.",[36,34146,34147],{},"El procesamiento por pulsación es costoso y requiere un pipeline explícito (debounce, throttle, validaciones pesadas).",[36,34149,34150],{},"Quieres mantener un flujo explícito de eventos de negocio, no solo de UI.",[22,34152,3085],{"id":3084},[3087,34154,34156],{"id":34155},"_1-mutar-props-directamente-en-el-hijo","1) Mutar props directamente en el hijo",[15,34158,30738],{},[154,34160,34163],{"className":156,"code":34161,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ modelValue: string }>()\nprops.modelValue = \"nuevo valor\"\n\u003C\u002Fscript>\n","Evitar",[87,34164,34165,34181,34201,34211],{"__ignoreMap":163},[167,34166,34167,34169,34171,34173,34175,34177,34179],{"class":169,"line":170},[167,34168,174],{"class":173},[167,34170,178],{"class":177},[167,34172,182],{"class":181},[167,34174,1050],{"class":181},[167,34176,267],{"class":173},[167,34178,1055],{"class":201},[167,34180,185],{"class":173},[167,34182,34183,34185,34187,34189,34191,34193,34195,34197,34199],{"class":169,"line":188},[167,34184,216],{"class":191},[167,34186,1065],{"class":219},[167,34188,223],{"class":191},[167,34190,1070],{"class":181},[167,34192,1073],{"class":173},[167,34194,34049],{"class":254},[167,34196,583],{"class":191},[167,34198,586],{"class":219},[167,34200,1083],{"class":173},[167,34202,34203,34206,34208],{"class":169,"line":205},[167,34204,34205],{"class":173},"props.modelValue ",[167,34207,267],{"class":191},[167,34209,34210],{"class":201}," \"nuevo valor\"\n",[167,34212,34213,34215,34217],{"class":169,"line":160},[167,34214,282],{"class":173},[167,34216,178],{"class":177},[167,34218,185],{"class":173},[15,34220,34221,34222,34224,34225,1679],{},"Correcto: emite ",[87,34223,34055],{}," o usa ",[87,34226,34227],{},"defineModel",[5367,34229,34230],{},[15,34231,34232],{},"Las props son de solo lectura. Mutarlas rompe el flujo unidireccional de datos.",[3087,34234,34236,34237,34239],{"id":34235},"_2-enlazar-v-model-a-expresiones-no-escribibles","2) Enlazar ",[87,34238,23865],{}," a expresiones no escribibles",[15,34241,30738],{},[154,34243,34245],{"className":156,"code":34244,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cinput v-model=\"user.name.toUpperCase()\" \u002F>\n",[87,34246,34247],{"__ignoreMap":163},[167,34248,34249,34251,34253,34255,34257,34259,34262,34265,34268,34270],{"class":169,"line":170},[167,34250,174],{"class":173},[167,34252,2650],{"class":177},[167,34254,2653],{"class":181},[167,34256,267],{"class":173},[167,34258,5080],{"class":201},[167,34260,34261],{"class":173},"user.name.",[167,34263,34264],{"class":181},"toUpperCase",[167,34266,34267],{"class":173},"()",[167,34269,5080],{"class":201},[167,34271,5325],{"class":173},[5367,34273,34274],{},[15,34275,34276,34278],{},[87,34277,23865],{}," requiere una referencia escribible. Una expresión derivada no tiene setter.",[15,34280,34281],{},"Correcto:",[154,34283,34286],{"className":156,"code":34284,"filename":34285,"language":162,"meta":163,"style":163},"\u003Cinput v-model=\"user.name\" \u002F>\n","Recomendado",[87,34287,34288],{"__ignoreMap":163},[167,34289,34290,34292,34294,34296,34298,34300,34302,34304],{"class":169,"line":170},[167,34291,174],{"class":173},[167,34293,2650],{"class":177},[167,34295,2653],{"class":181},[167,34297,267],{"class":173},[167,34299,5080],{"class":201},[167,34301,5205],{"class":173},[167,34303,5080],{"class":201},[167,34305,5325],{"class":173},[3087,34307,34309],{"id":34308},"_3-no-usar-modificadores-donde-sí-aportan-valor","3) No usar modificadores donde sí aportan valor",[15,34311,34312],{},"Ejemplo:",[33,34314,34315,34320,34330],{},[36,34316,21844,34317,34319],{},[87,34318,34074],{},", guardas espacios innecesarios.",[36,34321,21844,34322,34324,34325,34327,34328,1679],{},[87,34323,34079],{},", recibes ",[87,34326,1111],{}," cuando esperabas ",[87,34329,13929],{},[36,34331,21844,34332,34334],{},[87,34333,34084],{},", actualizas en cada pulsación cuando solo necesitabas al perder el foco.",[3087,34336,34338],{"id":34337},"_4-meter-demasiada-lógica-en-el-setter-del-modelo","4) Meter demasiada lógica en el setter del modelo",[15,34340,34341,34342,34344],{},"Mantén el flujo de ",[87,34343,23865],{}," simple y mueve reglas complejas a funciones o composables.\nEl modelo debe sincronizar estado; la lógica de negocio no debería vivir en el setter.",[11,34346,7997],{"id":7996},[22,34348,34350],{"id":34349},"_1-input-de-texto-con-saneamiento-básico","1) Input de texto con saneamiento básico",[154,34352,34355],{"className":156,"code":34353,"filename":3260,"highlights":34354,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst fullName = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Nombre completo\n    \u003Cinput v-model.trim=\"fullName\" type=\"text\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[289],[87,34356,34357,34373,34385,34389,34405,34413,34417,34425,34433,34438,34462,34470],{"__ignoreMap":163},[167,34358,34359,34361,34363,34365,34367,34369,34371],{"class":169,"line":170},[167,34360,174],{"class":173},[167,34362,178],{"class":177},[167,34364,182],{"class":181},[167,34366,1050],{"class":181},[167,34368,267],{"class":173},[167,34370,1055],{"class":201},[167,34372,185],{"class":173},[167,34374,34375,34377,34379,34381,34383],{"class":169,"line":188},[167,34376,192],{"class":191},[167,34378,195],{"class":173},[167,34380,198],{"class":191},[167,34382,24041],{"class":201},[167,34384,24044],{"class":173},[167,34386,34387],{"class":169,"line":205},[167,34388,209],{"emptyLinePlaceholder":208},[167,34390,34391,34393,34395,34397,34399,34401,34403],{"class":169,"line":160},[167,34392,216],{"class":191},[167,34394,2175],{"class":219},[167,34396,223],{"class":191},[167,34398,226],{"class":181},[167,34400,229],{"class":173},[167,34402,31161],{"class":201},[167,34404,24169],{"class":173},[167,34406,34407,34409,34411],{"class":169,"line":238},[167,34408,282],{"class":173},[167,34410,178],{"class":177},[167,34412,185],{"class":173},[167,34414,34415],{"class":169,"line":243},[167,34416,209],{"emptyLinePlaceholder":208},[167,34418,34419,34421,34423],{"class":169,"line":261},[167,34420,174],{"class":173},[167,34422,299],{"class":177},[167,34424,185],{"class":173},[167,34426,34427,34429,34431],{"class":169,"line":273},[167,34428,307],{"class":173},[167,34430,9875],{"class":177},[167,34432,185],{"class":173},[167,34434,34435],{"class":169,"line":279},[167,34436,34437],{"class":173},"    Nombre completo\n",[167,34439,34441,34443,34445,34448,34450,34453,34455,34457,34460],{"class":34440,"line":289},[169,213],[167,34442,1257],{"class":173},[167,34444,2650],{"class":177},[167,34446,34447],{"class":181}," v-model.trim",[167,34449,267],{"class":173},[167,34451,34452],{"class":201},"\"fullName\"",[167,34454,1174],{"class":181},[167,34456,267],{"class":173},[167,34458,34459],{"class":201},"\"text\"",[167,34461,5325],{"class":173},[167,34463,34464,34466,34468],{"class":169,"line":294},[167,34465,504],{"class":173},[167,34467,9875],{"class":177},[167,34469,185],{"class":173},[167,34471,34472,34474,34476],{"class":169,"line":304},[167,34473,282],{"class":173},[167,34475,299],{"class":177},[167,34477,185],{"class":173},[154,34479,34482],{"className":156,"code":34480,"filename":3973,"highlights":34481,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      fullName: \"\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Nombre completo\n    \u003Cinput v-model.trim=\"fullName\" type=\"text\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[161],[87,34483,34484,34498,34506,34512,34518,34527,34531,34535,34539,34547,34551,34559,34567,34571,34592,34600],{"__ignoreMap":163},[167,34485,34486,34488,34490,34492,34494,34496],{"class":169,"line":170},[167,34487,174],{"class":173},[167,34489,178],{"class":177},[167,34491,1050],{"class":181},[167,34493,267],{"class":173},[167,34495,1055],{"class":201},[167,34497,185],{"class":173},[167,34499,34500,34502,34504],{"class":169,"line":188},[167,34501,608],{"class":191},[167,34503,3991],{"class":191},[167,34505,1905],{"class":173},[167,34507,34508,34510],{"class":169,"line":205},[167,34509,7176],{"class":181},[167,34511,763],{"class":173},[167,34513,34514,34516],{"class":169,"line":160},[167,34515,1937],{"class":191},[167,34517,1905],{"class":173},[167,34519,34520,34523,34525],{"class":169,"line":238},[167,34521,34522],{"class":173},"      fullName: ",[167,34524,31161],{"class":201},[167,34526,393],{"class":173},[167,34528,34529],{"class":169,"line":243},[167,34530,24370],{"class":173},[167,34532,34533],{"class":169,"line":261},[167,34534,398],{"class":173},[167,34536,34537],{"class":169,"line":273},[167,34538,24148],{"class":173},[167,34540,34541,34543,34545],{"class":169,"line":279},[167,34542,282],{"class":173},[167,34544,178],{"class":177},[167,34546,185],{"class":173},[167,34548,34549],{"class":169,"line":289},[167,34550,209],{"emptyLinePlaceholder":208},[167,34552,34553,34555,34557],{"class":169,"line":294},[167,34554,174],{"class":173},[167,34556,299],{"class":177},[167,34558,185],{"class":173},[167,34560,34561,34563,34565],{"class":169,"line":304},[167,34562,307],{"class":173},[167,34564,9875],{"class":177},[167,34566,185],{"class":173},[167,34568,34569],{"class":169,"line":313},[167,34570,34437],{"class":173},[167,34572,34574,34576,34578,34580,34582,34584,34586,34588,34590],{"class":34573,"line":161},[169,213],[167,34575,1257],{"class":173},[167,34577,2650],{"class":177},[167,34579,34447],{"class":181},[167,34581,267],{"class":173},[167,34583,34452],{"class":201},[167,34585,1174],{"class":181},[167,34587,267],{"class":173},[167,34589,34459],{"class":201},[167,34591,5325],{"class":173},[167,34593,34594,34596,34598],{"class":169,"line":335},[167,34595,504],{"class":173},[167,34597,9875],{"class":177},[167,34599,185],{"class":173},[167,34601,34602,34604,34606],{"class":169,"line":341},[167,34603,282],{"class":173},[167,34605,299],{"class":177},[167,34607,185],{"class":173},[22,34609,34611,34612],{"id":34610},"_2-input-numérico-con-v-modelnumber","2) Input numérico con ",[87,34613,34614],{},"v-model.number",[154,34616,34619],{"className":156,"code":34617,"filename":3260,"highlights":34618,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst age = ref\u003Cnumber | null>(null);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Edad\n    \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[289],[87,34620,34621,34637,34649,34653,34678,34686,34690,34698,34706,34711,34743,34751],{"__ignoreMap":163},[167,34622,34623,34625,34627,34629,34631,34633,34635],{"class":169,"line":170},[167,34624,174],{"class":173},[167,34626,178],{"class":177},[167,34628,182],{"class":181},[167,34630,1050],{"class":181},[167,34632,267],{"class":173},[167,34634,1055],{"class":201},[167,34636,185],{"class":173},[167,34638,34639,34641,34643,34645,34647],{"class":169,"line":188},[167,34640,192],{"class":191},[167,34642,195],{"class":173},[167,34644,198],{"class":191},[167,34646,24041],{"class":201},[167,34648,24044],{"class":173},[167,34650,34651],{"class":169,"line":205},[167,34652,209],{"emptyLinePlaceholder":208},[167,34654,34655,34657,34660,34662,34664,34666,34668,34670,34672,34674,34676],{"class":169,"line":160},[167,34656,216],{"class":191},[167,34658,34659],{"class":219}," age",[167,34661,223],{"class":191},[167,34663,226],{"class":181},[167,34665,174],{"class":173},[167,34667,13929],{"class":219},[167,34669,659],{"class":191},[167,34671,6567],{"class":219},[167,34673,6570],{"class":173},[167,34675,6573],{"class":219},[167,34677,24169],{"class":173},[167,34679,34680,34682,34684],{"class":169,"line":238},[167,34681,282],{"class":173},[167,34683,178],{"class":177},[167,34685,185],{"class":173},[167,34687,34688],{"class":169,"line":243},[167,34689,209],{"emptyLinePlaceholder":208},[167,34691,34692,34694,34696],{"class":169,"line":261},[167,34693,174],{"class":173},[167,34695,299],{"class":177},[167,34697,185],{"class":173},[167,34699,34700,34702,34704],{"class":169,"line":273},[167,34701,307],{"class":173},[167,34703,9875],{"class":177},[167,34705,185],{"class":173},[167,34707,34708],{"class":169,"line":279},[167,34709,34710],{"class":173},"    Edad\n",[167,34712,34714,34716,34718,34721,34723,34726,34728,34730,34733,34736,34738,34741],{"class":34713,"line":289},[169,213],[167,34715,1257],{"class":173},[167,34717,2650],{"class":177},[167,34719,34720],{"class":181}," v-model.number",[167,34722,267],{"class":173},[167,34724,34725],{"class":201},"\"age\"",[167,34727,1174],{"class":181},[167,34729,267],{"class":173},[167,34731,34732],{"class":201},"\"number\"",[167,34734,34735],{"class":181}," min",[167,34737,267],{"class":173},[167,34739,34740],{"class":201},"\"0\"",[167,34742,5325],{"class":173},[167,34744,34745,34747,34749],{"class":169,"line":294},[167,34746,504],{"class":173},[167,34748,9875],{"class":177},[167,34750,185],{"class":173},[167,34752,34753,34755,34757],{"class":169,"line":304},[167,34754,282],{"class":173},[167,34756,299],{"class":177},[167,34758,185],{"class":173},[154,34760,34763],{"className":156,"code":34761,"filename":3973,"highlights":34762,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      age: null,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Edad\n    \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[161],[87,34764,34765,34779,34787,34793,34799,34808,34812,34816,34820,34828,34832,34840,34848,34852,34879,34887],{"__ignoreMap":163},[167,34766,34767,34769,34771,34773,34775,34777],{"class":169,"line":170},[167,34768,174],{"class":173},[167,34770,178],{"class":177},[167,34772,1050],{"class":181},[167,34774,267],{"class":173},[167,34776,1055],{"class":201},[167,34778,185],{"class":173},[167,34780,34781,34783,34785],{"class":169,"line":188},[167,34782,608],{"class":191},[167,34784,3991],{"class":191},[167,34786,1905],{"class":173},[167,34788,34789,34791],{"class":169,"line":205},[167,34790,7176],{"class":181},[167,34792,763],{"class":173},[167,34794,34795,34797],{"class":169,"line":160},[167,34796,1937],{"class":191},[167,34798,1905],{"class":173},[167,34800,34801,34804,34806],{"class":169,"line":238},[167,34802,34803],{"class":173},"      age: ",[167,34805,6573],{"class":219},[167,34807,393],{"class":173},[167,34809,34810],{"class":169,"line":243},[167,34811,24370],{"class":173},[167,34813,34814],{"class":169,"line":261},[167,34815,398],{"class":173},[167,34817,34818],{"class":169,"line":273},[167,34819,24148],{"class":173},[167,34821,34822,34824,34826],{"class":169,"line":279},[167,34823,282],{"class":173},[167,34825,178],{"class":177},[167,34827,185],{"class":173},[167,34829,34830],{"class":169,"line":289},[167,34831,209],{"emptyLinePlaceholder":208},[167,34833,34834,34836,34838],{"class":169,"line":294},[167,34835,174],{"class":173},[167,34837,299],{"class":177},[167,34839,185],{"class":173},[167,34841,34842,34844,34846],{"class":169,"line":304},[167,34843,307],{"class":173},[167,34845,9875],{"class":177},[167,34847,185],{"class":173},[167,34849,34850],{"class":169,"line":313},[167,34851,34710],{"class":173},[167,34853,34855,34857,34859,34861,34863,34865,34867,34869,34871,34873,34875,34877],{"class":34854,"line":161},[169,213],[167,34856,1257],{"class":173},[167,34858,2650],{"class":177},[167,34860,34720],{"class":181},[167,34862,267],{"class":173},[167,34864,34725],{"class":201},[167,34866,1174],{"class":181},[167,34868,267],{"class":173},[167,34870,34732],{"class":201},[167,34872,34735],{"class":181},[167,34874,267],{"class":173},[167,34876,34740],{"class":201},[167,34878,5325],{"class":173},[167,34880,34881,34883,34885],{"class":169,"line":335},[167,34882,504],{"class":173},[167,34884,9875],{"class":177},[167,34886,185],{"class":173},[167,34888,34889,34891,34893],{"class":169,"line":341},[167,34890,282],{"class":173},[167,34892,299],{"class":177},[167,34894,185],{"class":173},[22,34896,34898],{"id":34897},"_3-checkbox-para-estado-booleano","3) Checkbox para estado booleano",[154,34900,34903],{"className":156,"code":34901,"filename":3260,"highlights":34902,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst acceptedTerms = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" \u002F>\n    Acepto términos y condiciones\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[279],[87,34904,34905,34921,34933,34937,34954,34962,34966,34974,34982,35005,35010,35018],{"__ignoreMap":163},[167,34906,34907,34909,34911,34913,34915,34917,34919],{"class":169,"line":170},[167,34908,174],{"class":173},[167,34910,178],{"class":177},[167,34912,182],{"class":181},[167,34914,1050],{"class":181},[167,34916,267],{"class":173},[167,34918,1055],{"class":201},[167,34920,185],{"class":173},[167,34922,34923,34925,34927,34929,34931],{"class":169,"line":188},[167,34924,192],{"class":191},[167,34926,195],{"class":173},[167,34928,198],{"class":191},[167,34930,24041],{"class":201},[167,34932,24044],{"class":173},[167,34934,34935],{"class":169,"line":205},[167,34936,209],{"emptyLinePlaceholder":208},[167,34938,34939,34941,34944,34946,34948,34950,34952],{"class":169,"line":160},[167,34940,216],{"class":191},[167,34942,34943],{"class":219}," acceptedTerms",[167,34945,223],{"class":191},[167,34947,226],{"class":181},[167,34949,229],{"class":173},[167,34951,3392],{"class":219},[167,34953,24169],{"class":173},[167,34955,34956,34958,34960],{"class":169,"line":238},[167,34957,282],{"class":173},[167,34959,178],{"class":177},[167,34961,185],{"class":173},[167,34963,34964],{"class":169,"line":243},[167,34965,209],{"emptyLinePlaceholder":208},[167,34967,34968,34970,34972],{"class":169,"line":261},[167,34969,174],{"class":173},[167,34971,299],{"class":177},[167,34973,185],{"class":173},[167,34975,34976,34978,34980],{"class":169,"line":273},[167,34977,307],{"class":173},[167,34979,9875],{"class":177},[167,34981,185],{"class":173},[167,34983,34985,34987,34989,34991,34993,34996,34998,35000,35003],{"class":34984,"line":279},[169,213],[167,34986,1257],{"class":173},[167,34988,2650],{"class":177},[167,34990,2653],{"class":181},[167,34992,267],{"class":173},[167,34994,34995],{"class":201},"\"acceptedTerms\"",[167,34997,1174],{"class":181},[167,34999,267],{"class":173},[167,35001,35002],{"class":201},"\"checkbox\"",[167,35004,5325],{"class":173},[167,35006,35007],{"class":169,"line":289},[167,35008,35009],{"class":173},"    Acepto términos y condiciones\n",[167,35011,35012,35014,35016],{"class":169,"line":294},[167,35013,504],{"class":173},[167,35015,9875],{"class":177},[167,35017,185],{"class":173},[167,35019,35020,35022,35024],{"class":169,"line":304},[167,35021,282],{"class":173},[167,35023,299],{"class":177},[167,35025,185],{"class":173},[154,35027,35030],{"className":156,"code":35028,"filename":3973,"highlights":35029,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      acceptedTerms: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" \u002F>\n    Acepto términos y condiciones\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[313],[87,35031,35032,35046,35054,35060,35066,35075,35079,35083,35087,35095,35099,35107,35115,35136,35140,35148],{"__ignoreMap":163},[167,35033,35034,35036,35038,35040,35042,35044],{"class":169,"line":170},[167,35035,174],{"class":173},[167,35037,178],{"class":177},[167,35039,1050],{"class":181},[167,35041,267],{"class":173},[167,35043,1055],{"class":201},[167,35045,185],{"class":173},[167,35047,35048,35050,35052],{"class":169,"line":188},[167,35049,608],{"class":191},[167,35051,3991],{"class":191},[167,35053,1905],{"class":173},[167,35055,35056,35058],{"class":169,"line":205},[167,35057,7176],{"class":181},[167,35059,763],{"class":173},[167,35061,35062,35064],{"class":169,"line":160},[167,35063,1937],{"class":191},[167,35065,1905],{"class":173},[167,35067,35068,35071,35073],{"class":169,"line":238},[167,35069,35070],{"class":173},"      acceptedTerms: ",[167,35072,3392],{"class":219},[167,35074,393],{"class":173},[167,35076,35077],{"class":169,"line":243},[167,35078,24370],{"class":173},[167,35080,35081],{"class":169,"line":261},[167,35082,398],{"class":173},[167,35084,35085],{"class":169,"line":273},[167,35086,24148],{"class":173},[167,35088,35089,35091,35093],{"class":169,"line":279},[167,35090,282],{"class":173},[167,35092,178],{"class":177},[167,35094,185],{"class":173},[167,35096,35097],{"class":169,"line":289},[167,35098,209],{"emptyLinePlaceholder":208},[167,35100,35101,35103,35105],{"class":169,"line":294},[167,35102,174],{"class":173},[167,35104,299],{"class":177},[167,35106,185],{"class":173},[167,35108,35109,35111,35113],{"class":169,"line":304},[167,35110,307],{"class":173},[167,35112,9875],{"class":177},[167,35114,185],{"class":173},[167,35116,35118,35120,35122,35124,35126,35128,35130,35132,35134],{"class":35117,"line":313},[169,213],[167,35119,1257],{"class":173},[167,35121,2650],{"class":177},[167,35123,2653],{"class":181},[167,35125,267],{"class":173},[167,35127,34995],{"class":201},[167,35129,1174],{"class":181},[167,35131,267],{"class":173},[167,35133,35002],{"class":201},[167,35135,5325],{"class":173},[167,35137,35138],{"class":169,"line":161},[167,35139,35009],{"class":173},[167,35141,35142,35144,35146],{"class":169,"line":335},[167,35143,504],{"class":173},[167,35145,9875],{"class":177},[167,35147,185],{"class":173},[167,35149,35150,35152,35154],{"class":169,"line":341},[167,35151,282],{"class":173},[167,35153,299],{"class":177},[167,35155,185],{"class":173},[22,35157,35159],{"id":35158},"_4-ejemplos-completos","4) Ejemplos completos",[3087,35161,32692],{"id":32691},[15,35163,35164,35167,35168,35170],{},[87,35165,35166],{},"SearchInput"," reutilizable con ",[87,35169,34227],{}," + pantalla de filtros:",[154,35172,35176],{"className":156,"code":35173,"filename":35174,"highlights":35175,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst model = defineModel\u003Cstring>({ default: \"\" });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"field\">\n    Buscar\n    \u003Cinput\n      v-model.trim=\"model\"\n      type=\"text\"\n      placeholder=\"Escribe para filtrar...\"\n    \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n","SearchInput.vue",[279],[87,35177,35178,35194,35218,35226,35230,35238,35253,35258,35264,35275,35284,35293,35298,35306],{"__ignoreMap":163},[167,35179,35180,35182,35184,35186,35188,35190,35192],{"class":169,"line":170},[167,35181,174],{"class":173},[167,35183,178],{"class":177},[167,35185,182],{"class":181},[167,35187,1050],{"class":181},[167,35189,267],{"class":173},[167,35191,1055],{"class":201},[167,35193,185],{"class":173},[167,35195,35196,35198,35201,35203,35206,35208,35210,35213,35215],{"class":169,"line":188},[167,35197,216],{"class":191},[167,35199,35200],{"class":219}," model",[167,35202,223],{"class":191},[167,35204,35205],{"class":181}," defineModel",[167,35207,174],{"class":173},[167,35209,1111],{"class":219},[167,35211,35212],{"class":173},">({ default: ",[167,35214,31161],{"class":201},[167,35216,35217],{"class":173}," });\n",[167,35219,35220,35222,35224],{"class":169,"line":205},[167,35221,282],{"class":173},[167,35223,178],{"class":177},[167,35225,185],{"class":173},[167,35227,35228],{"class":169,"line":160},[167,35229,209],{"emptyLinePlaceholder":208},[167,35231,35232,35234,35236],{"class":169,"line":238},[167,35233,174],{"class":173},[167,35235,299],{"class":177},[167,35237,185],{"class":173},[167,35239,35240,35242,35244,35246,35248,35251],{"class":169,"line":243},[167,35241,307],{"class":173},[167,35243,9875],{"class":177},[167,35245,1245],{"class":181},[167,35247,267],{"class":173},[167,35249,35250],{"class":201},"\"field\"",[167,35252,185],{"class":173},[167,35254,35255],{"class":169,"line":261},[167,35256,35257],{"class":173},"    Buscar\n",[167,35259,35260,35262],{"class":169,"line":273},[167,35261,1257],{"class":173},[167,35263,17481],{"class":177},[167,35265,35267,35270,35272],{"class":35266,"line":279},[169,213],[167,35268,35269],{"class":181},"      v-model.trim",[167,35271,267],{"class":173},[167,35273,35274],{"class":201},"\"model\"\n",[167,35276,35277,35279,35281],{"class":169,"line":289},[167,35278,3739],{"class":181},[167,35280,267],{"class":173},[167,35282,35283],{"class":201},"\"text\"\n",[167,35285,35286,35288,35290],{"class":169,"line":294},[167,35287,17504],{"class":181},[167,35289,267],{"class":173},[167,35291,35292],{"class":201},"\"Escribe para filtrar...\"\n",[167,35294,35295],{"class":169,"line":304},[167,35296,35297],{"class":173},"    \u002F>\n",[167,35299,35300,35302,35304],{"class":169,"line":313},[167,35301,504],{"class":173},[167,35303,9875],{"class":177},[167,35305,185],{"class":173},[167,35307,35308,35310,35312],{"class":169,"line":161},[167,35309,282],{"class":173},[167,35311,299],{"class":177},[167,35313,185],{"class":173},[154,35315,35318],{"className":156,"code":35316,"filename":35317,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport SearchInput from \".\u002FSearchInput.vue\";\n\nconst query = ref(\"\");\nconst minPrice = ref\u003Cnumber | null>(null);\nconst onlyInStock = ref(false);\n\nconst products = ref([\n  { id: 1, name: \"Teclado mecánico\", price: 89, stock: true },\n  { id: 2, name: \"Mouse ergonómico\", price: 45, stock: false },\n  { id: 3, name: 'Monitor 27\"', price: 299, stock: true },\n]);\n\nconst filteredProducts = computed(() =>\n  products.value.filter((p) => {\n    const matchesQuery =\n      p.name.toLowerCase().includes(query.value.toLowerCase());\n    const matchesPrice =\n      minPrice.value == null || p.price >= minPrice.value;\n    const matchesStock = !onlyInStock.value || p.stock;\n\n    return matchesQuery && matchesPrice && matchesStock;\n  })\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Filtros\u003C\u002Fh2>\n\n    \u003CSearchInput v-model=\"query\" \u002F>\n\n    \u003Clabel>\n      Precio mínimo\n      \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" \u002F>\n    \u003C\u002Flabel>\n\n    \u003Clabel>\n      \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" \u002F>\n      Solo disponibles\n    \u003C\u002Flabel>\n\n    \u003Cul>\n      \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n        {{ item.name }} - ${{ item.price }}\n        \u003Cspan v-if=\"!item.stock\">(sin stock)\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n","ProductFilter.vue",[87,35319,35320,35336,35348,35362,35366,35382,35407,35424,35428,35441,35464,35486,35508,35512,35516,35531,35548,35558,35577,35586,35607,35626,35630,35647,35651,35655,35663,35667,35675,35683,35696,35700,35714,35718,35726,35731,35758,35766,35770,35778,35799,35804,35812,35816,35824,35846,35851,35871,35879,35887,35895],{"__ignoreMap":163},[167,35321,35322,35324,35326,35328,35330,35332,35334],{"class":169,"line":170},[167,35323,174],{"class":173},[167,35325,178],{"class":177},[167,35327,182],{"class":181},[167,35329,1050],{"class":181},[167,35331,267],{"class":173},[167,35333,1055],{"class":201},[167,35335,185],{"class":173},[167,35337,35338,35340,35342,35344,35346],{"class":169,"line":188},[167,35339,192],{"class":191},[167,35341,1805],{"class":173},[167,35343,198],{"class":191},[167,35345,24041],{"class":201},[167,35347,24044],{"class":173},[167,35349,35350,35352,35355,35357,35360],{"class":169,"line":205},[167,35351,192],{"class":191},[167,35353,35354],{"class":173}," SearchInput ",[167,35356,198],{"class":191},[167,35358,35359],{"class":201}," \".\u002FSearchInput.vue\"",[167,35361,24044],{"class":173},[167,35363,35364],{"class":169,"line":160},[167,35365,209],{"emptyLinePlaceholder":208},[167,35367,35368,35370,35372,35374,35376,35378,35380],{"class":169,"line":238},[167,35369,216],{"class":191},[167,35371,2448],{"class":219},[167,35373,223],{"class":191},[167,35375,226],{"class":181},[167,35377,229],{"class":173},[167,35379,31161],{"class":201},[167,35381,24169],{"class":173},[167,35383,35384,35386,35389,35391,35393,35395,35397,35399,35401,35403,35405],{"class":169,"line":243},[167,35385,216],{"class":191},[167,35387,35388],{"class":219}," minPrice",[167,35390,223],{"class":191},[167,35392,226],{"class":181},[167,35394,174],{"class":173},[167,35396,13929],{"class":219},[167,35398,659],{"class":191},[167,35400,6567],{"class":219},[167,35402,6570],{"class":173},[167,35404,6573],{"class":219},[167,35406,24169],{"class":173},[167,35408,35409,35411,35414,35416,35418,35420,35422],{"class":169,"line":261},[167,35410,216],{"class":191},[167,35412,35413],{"class":219}," onlyInStock",[167,35415,223],{"class":191},[167,35417,226],{"class":181},[167,35419,229],{"class":173},[167,35421,3392],{"class":219},[167,35423,24169],{"class":173},[167,35425,35426],{"class":169,"line":273},[167,35427,209],{"emptyLinePlaceholder":208},[167,35429,35430,35432,35435,35437,35439],{"class":169,"line":279},[167,35431,216],{"class":191},[167,35433,35434],{"class":219}," products",[167,35436,223],{"class":191},[167,35438,226],{"class":181},[167,35440,1827],{"class":173},[167,35442,35443,35445,35447,35449,35452,35454,35457,35460,35462],{"class":169,"line":289},[167,35444,1832],{"class":173},[167,35446,1835],{"class":219},[167,35448,1838],{"class":173},[167,35450,35451],{"class":201},"\"Teclado mecánico\"",[167,35453,1844],{"class":173},[167,35455,35456],{"class":219},"89",[167,35458,35459],{"class":173},", stock: ",[167,35461,390],{"class":219},[167,35463,1856],{"class":173},[167,35465,35466,35468,35470,35472,35475,35477,35480,35482,35484],{"class":169,"line":294},[167,35467,1832],{"class":173},[167,35469,1853],{"class":219},[167,35471,1838],{"class":173},[167,35473,35474],{"class":201},"\"Mouse ergonómico\"",[167,35476,1844],{"class":173},[167,35478,35479],{"class":219},"45",[167,35481,35459],{"class":173},[167,35483,3392],{"class":219},[167,35485,1856],{"class":173},[167,35487,35488,35490,35492,35494,35497,35499,35502,35504,35506],{"class":169,"line":304},[167,35489,1832],{"class":173},[167,35491,8203],{"class":219},[167,35493,1838],{"class":173},[167,35495,35496],{"class":201},"'Monitor 27\"'",[167,35498,1844],{"class":173},[167,35500,35501],{"class":219},"299",[167,35503,35459],{"class":173},[167,35505,390],{"class":219},[167,35507,1856],{"class":173},[167,35509,35510],{"class":169,"line":313},[167,35511,28545],{"class":173},[167,35513,35514],{"class":169,"line":161},[167,35515,209],{"emptyLinePlaceholder":208},[167,35517,35518,35520,35523,35525,35527,35529],{"class":169,"line":335},[167,35519,216],{"class":191},[167,35521,35522],{"class":219}," filteredProducts",[167,35524,223],{"class":191},[167,35526,1898],{"class":181},[167,35528,1493],{"class":173},[167,35530,9717],{"class":191},[167,35532,35533,35536,35538,35540,35542,35544,35546],{"class":169,"line":341},[167,35534,35535],{"class":173},"  products.value.",[167,35537,8252],{"class":181},[167,35539,1918],{"class":173},[167,35541,15],{"class":254},[167,35543,693],{"class":173},[167,35545,639],{"class":191},[167,35547,1905],{"class":173},[167,35549,35550,35552,35555],{"class":169,"line":489},[167,35551,8266],{"class":191},[167,35553,35554],{"class":219}," matchesQuery",[167,35556,35557],{"class":191}," =\n",[167,35559,35560,35563,35565,35567,35569,35572,35574],{"class":169,"line":495},[167,35561,35562],{"class":173},"      p.name.",[167,35564,2506],{"class":181},[167,35566,2503],{"class":173},[167,35568,8290],{"class":181},[167,35570,35571],{"class":173},"(query.value.",[167,35573,2506],{"class":181},[167,35575,35576],{"class":173},"());\n",[167,35578,35579,35581,35584],{"class":169,"line":501},[167,35580,8266],{"class":191},[167,35582,35583],{"class":219}," matchesPrice",[167,35585,35557],{"class":191},[167,35587,35588,35591,35594,35596,35599,35602,35604],{"class":169,"line":512},[167,35589,35590],{"class":173},"      minPrice.value ",[167,35592,35593],{"class":191},"==",[167,35595,6567],{"class":219},[167,35597,35598],{"class":191}," ||",[167,35600,35601],{"class":173}," p.price ",[167,35603,1991],{"class":191},[167,35605,35606],{"class":173}," minPrice.value;\n",[167,35608,35609,35611,35614,35616,35618,35621,35623],{"class":169,"line":781},[167,35610,8266],{"class":191},[167,35612,35613],{"class":219}," matchesStock",[167,35615,223],{"class":191},[167,35617,5625],{"class":191},[167,35619,35620],{"class":173},"onlyInStock.value ",[167,35622,4264],{"class":191},[167,35624,35625],{"class":173}," p.stock;\n",[167,35627,35628],{"class":169,"line":786},[167,35629,209],{"emptyLinePlaceholder":208},[167,35631,35632,35634,35637,35639,35642,35644],{"class":169,"line":2678},[167,35633,1937],{"class":191},[167,35635,35636],{"class":173}," matchesQuery ",[167,35638,8339],{"class":191},[167,35640,35641],{"class":173}," matchesPrice ",[167,35643,8339],{"class":191},[167,35645,35646],{"class":173}," matchesStock;\n",[167,35648,35649],{"class":169,"line":2692},[167,35650,8347],{"class":173},[167,35652,35653],{"class":169,"line":3575},[167,35654,24169],{"class":173},[167,35656,35657,35659,35661],{"class":169,"line":5028},[167,35658,282],{"class":173},[167,35660,178],{"class":177},[167,35662,185],{"class":173},[167,35664,35665],{"class":169,"line":5037},[167,35666,209],{"emptyLinePlaceholder":208},[167,35668,35669,35671,35673],{"class":169,"line":5046},[167,35670,174],{"class":173},[167,35672,299],{"class":177},[167,35674,185],{"class":173},[167,35676,35677,35679,35681],{"class":169,"line":6756},[167,35678,307],{"class":173},[167,35680,10117],{"class":177},[167,35682,185],{"class":173},[167,35684,35685,35687,35689,35692,35694],{"class":169,"line":6778},[167,35686,1257],{"class":173},[167,35688,22],{"class":177},[167,35690,35691],{"class":173},">Filtros\u003C\u002F",[167,35693,22],{"class":177},[167,35695,185],{"class":173},[167,35697,35698],{"class":169,"line":6783},[167,35699,209],{"emptyLinePlaceholder":208},[167,35701,35702,35704,35706,35708,35710,35712],{"class":169,"line":6788},[167,35703,1257],{"class":173},[167,35705,35166],{"class":177},[167,35707,2653],{"class":181},[167,35709,267],{"class":173},[167,35711,2658],{"class":201},[167,35713,5325],{"class":173},[167,35715,35716],{"class":169,"line":6793},[167,35717,209],{"emptyLinePlaceholder":208},[167,35719,35720,35722,35724],{"class":169,"line":6809},[167,35721,1257],{"class":173},[167,35723,9875],{"class":177},[167,35725,185],{"class":173},[167,35727,35728],{"class":169,"line":6824},[167,35729,35730],{"class":173},"      Precio mínimo\n",[167,35732,35733,35735,35737,35739,35741,35744,35746,35748,35750,35752,35754,35756],{"class":169,"line":6829},[167,35734,1268],{"class":173},[167,35736,2650],{"class":177},[167,35738,34720],{"class":181},[167,35740,267],{"class":173},[167,35742,35743],{"class":201},"\"minPrice\"",[167,35745,1174],{"class":181},[167,35747,267],{"class":173},[167,35749,34732],{"class":201},[167,35751,34735],{"class":181},[167,35753,267],{"class":173},[167,35755,34740],{"class":201},[167,35757,5325],{"class":173},[167,35759,35760,35762,35764],{"class":169,"line":6836},[167,35761,1292],{"class":173},[167,35763,9875],{"class":177},[167,35765,185],{"class":173},[167,35767,35768],{"class":169,"line":6845},[167,35769,209],{"emptyLinePlaceholder":208},[167,35771,35772,35774,35776],{"class":169,"line":6854},[167,35773,1257],{"class":173},[167,35775,9875],{"class":177},[167,35777,185],{"class":173},[167,35779,35780,35782,35784,35786,35788,35791,35793,35795,35797],{"class":169,"line":6861},[167,35781,1268],{"class":173},[167,35783,2650],{"class":177},[167,35785,2653],{"class":181},[167,35787,267],{"class":173},[167,35789,35790],{"class":201},"\"onlyInStock\"",[167,35792,1174],{"class":181},[167,35794,267],{"class":173},[167,35796,35002],{"class":201},[167,35798,5325],{"class":173},[167,35800,35801],{"class":169,"line":6879},[167,35802,35803],{"class":173},"      Solo disponibles\n",[167,35805,35806,35808,35810],{"class":169,"line":6884},[167,35807,1292],{"class":173},[167,35809,9875],{"class":177},[167,35811,185],{"class":173},[167,35813,35814],{"class":169,"line":6889},[167,35815,209],{"emptyLinePlaceholder":208},[167,35817,35818,35820,35822],{"class":169,"line":6898},[167,35819,1257],{"class":173},[167,35821,33],{"class":177},[167,35823,185],{"class":173},[167,35825,35826,35828,35830,35832,35834,35837,35839,35841,35844],{"class":169,"line":6903},[167,35827,1268],{"class":173},[167,35829,36],{"class":177},[167,35831,18706],{"class":181},[167,35833,267],{"class":173},[167,35835,35836],{"class":201},"\"item in filteredProducts\"",[167,35838,10307],{"class":181},[167,35840,267],{"class":173},[167,35842,35843],{"class":201},"\"item.id\"",[167,35845,185],{"class":173},[167,35847,35848],{"class":169,"line":6912},[167,35849,35850],{"class":173},"        {{ item.name }} - ${{ item.price }}\n",[167,35852,35853,35855,35857,35859,35861,35864,35867,35869],{"class":169,"line":6928},[167,35854,32516],{"class":173},[167,35856,167],{"class":177},[167,35858,5694],{"class":181},[167,35860,267],{"class":173},[167,35862,35863],{"class":201},"\"!item.stock\"",[167,35865,35866],{"class":173},">(sin stock)\u003C\u002F",[167,35868,167],{"class":177},[167,35870,185],{"class":173},[167,35872,35873,35875,35877],{"class":169,"line":6949},[167,35874,10170],{"class":173},[167,35876,36],{"class":177},[167,35878,185],{"class":173},[167,35880,35881,35883,35885],{"class":169,"line":6954},[167,35882,1292],{"class":173},[167,35884,33],{"class":177},[167,35886,185],{"class":173},[167,35888,35889,35891,35893],{"class":169,"line":6975},[167,35890,504],{"class":173},[167,35892,10117],{"class":177},[167,35894,185],{"class":173},[167,35896,35897,35899,35901],{"class":169,"line":6989},[167,35898,282],{"class":173},[167,35900,299],{"class":177},[167,35902,185],{"class":173},[3087,35904,33279],{"id":33278},[15,35906,35907,35908,1028,35910,583],{},"Mismo comportamiento usando ",[87,35909,34049],{},[87,35911,34055],{},[154,35913,35915],{"className":156,"code":35914,"filename":35174,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: \"SearchInput\",\n  props: {\n    modelValue: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: [\"update:modelValue\"],\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"field\">\n    Buscar\n    \u003Cinput\n      :value=\"modelValue\"\n      type=\"text\"\n      placeholder=\"Escribe para filtrar...\"\n      @input=\"$emit('update:modelValue', $event.target.value.trim())\"\n    \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[87,35916,35917,35931,35939,35948,35952,35957,35961,35969,35973,35977,35986,35990,35998,36002,36010,36024,36028,36034,36044,36052,36060,36070,36074,36082],{"__ignoreMap":163},[167,35918,35919,35921,35923,35925,35927,35929],{"class":169,"line":170},[167,35920,174],{"class":173},[167,35922,178],{"class":177},[167,35924,1050],{"class":181},[167,35926,267],{"class":173},[167,35928,1055],{"class":201},[167,35930,185],{"class":173},[167,35932,35933,35935,35937],{"class":169,"line":188},[167,35934,608],{"class":191},[167,35936,3991],{"class":191},[167,35938,1905],{"class":173},[167,35940,35941,35943,35946],{"class":169,"line":205},[167,35942,4398],{"class":173},[167,35944,35945],{"class":201},"\"SearchInput\"",[167,35947,393],{"class":173},[167,35949,35950],{"class":169,"line":160},[167,35951,3999],{"class":173},[167,35953,35954],{"class":169,"line":238},[167,35955,35956],{"class":173},"    modelValue: {\n",[167,35958,35959],{"class":169,"line":243},[167,35960,4011],{"class":173},[167,35962,35963,35965,35967],{"class":169,"line":261},[167,35964,4041],{"class":173},[167,35966,31161],{"class":201},[167,35968,393],{"class":173},[167,35970,35971],{"class":169,"line":273},[167,35972,755],{"class":173},[167,35974,35975],{"class":169,"line":279},[167,35976,398],{"class":173},[167,35978,35979,35981,35984],{"class":169,"line":289},[167,35980,4409],{"class":173},[167,35982,35983],{"class":201},"\"update:modelValue\"",[167,35985,4414],{"class":173},[167,35987,35988],{"class":169,"line":294},[167,35989,24148],{"class":173},[167,35991,35992,35994,35996],{"class":169,"line":304},[167,35993,282],{"class":173},[167,35995,178],{"class":177},[167,35997,185],{"class":173},[167,35999,36000],{"class":169,"line":313},[167,36001,209],{"emptyLinePlaceholder":208},[167,36003,36004,36006,36008],{"class":169,"line":161},[167,36005,174],{"class":173},[167,36007,299],{"class":177},[167,36009,185],{"class":173},[167,36011,36012,36014,36016,36018,36020,36022],{"class":169,"line":335},[167,36013,307],{"class":173},[167,36015,9875],{"class":177},[167,36017,1245],{"class":181},[167,36019,267],{"class":173},[167,36021,35250],{"class":201},[167,36023,185],{"class":173},[167,36025,36026],{"class":169,"line":341},[167,36027,35257],{"class":173},[167,36029,36030,36032],{"class":169,"line":489},[167,36031,1257],{"class":173},[167,36033,17481],{"class":177},[167,36035,36036,36039,36041],{"class":169,"line":495},[167,36037,36038],{"class":181},"      :value",[167,36040,267],{"class":173},[167,36042,36043],{"class":201},"\"modelValue\"\n",[167,36045,36046,36048,36050],{"class":169,"line":501},[167,36047,3739],{"class":181},[167,36049,267],{"class":173},[167,36051,35283],{"class":201},[167,36053,36054,36056,36058],{"class":169,"line":512},[167,36055,17504],{"class":181},[167,36057,267],{"class":173},[167,36059,35292],{"class":201},[167,36061,36062,36065,36067],{"class":169,"line":781},[167,36063,36064],{"class":181},"      @input",[167,36066,267],{"class":173},[167,36068,36069],{"class":201},"\"$emit('update:modelValue', $event.target.value.trim())\"\n",[167,36071,36072],{"class":169,"line":786},[167,36073,35297],{"class":173},[167,36075,36076,36078,36080],{"class":169,"line":2678},[167,36077,504],{"class":173},[167,36079,9875],{"class":177},[167,36081,185],{"class":173},[167,36083,36084,36086,36088],{"class":169,"line":2692},[167,36085,282],{"class":173},[167,36087,299],{"class":177},[167,36089,185],{"class":173},[154,36091,36093],{"className":156,"code":36092,"filename":35317,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport SearchInput from \".\u002FSearchInput.vue\";\n\nexport default {\n  name: \"ProductFilter\",\n  components: { SearchInput },\n  data() {\n    return {\n      query: \"\",\n      minPrice: null,\n      onlyInStock: false,\n      products: [\n        { id: 1, name: \"Teclado mecánico\", price: 89, stock: true },\n        { id: 2, name: \"Mouse ergonómico\", price: 45, stock: false },\n        { id: 3, name: 'Monitor 27\"', price: 299, stock: true },\n      ],\n    };\n  },\n  computed: {\n    filteredProducts() {\n      return this.products.filter((p) => {\n        const matchesQuery = p.name\n          .toLowerCase()\n          .includes(this.query.toLowerCase());\n        const matchesPrice =\n          this.minPrice == null || p.price >= Number(this.minPrice);\n        const matchesStock = !this.onlyInStock || p.stock;\n\n        return matchesQuery && matchesPrice && matchesStock;\n      });\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Filtros\u003C\u002Fh2>\n\n    \u003CSearchInput v-model=\"query\" \u002F>\n\n    \u003Clabel>\n      Precio mínimo\n      \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" \u002F>\n    \u003C\u002Flabel>\n\n    \u003Clabel>\n      \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" \u002F>\n      Solo disponibles\n    \u003C\u002Flabel>\n\n    \u003Cul>\n      \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n        {{ item.name }} - ${{ item.price }}\n        \u003Cspan v-if=\"!item.stock\">(sin stock)\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,36094,36095,36109,36121,36125,36133,36142,36147,36153,36159,36168,36177,36186,36191,36211,36231,36251,36255,36259,36263,36267,36274,36295,36306,36314,36331,36339,36367,36386,36390,36404,36409,36413,36417,36421,36429,36433,36441,36449,36461,36465,36479,36483,36491,36495,36521,36529,36533,36541,36561,36565,36573,36577,36585,36605,36609,36627,36635,36643,36651],{"__ignoreMap":163},[167,36096,36097,36099,36101,36103,36105,36107],{"class":169,"line":170},[167,36098,174],{"class":173},[167,36100,178],{"class":177},[167,36102,1050],{"class":181},[167,36104,267],{"class":173},[167,36106,1055],{"class":201},[167,36108,185],{"class":173},[167,36110,36111,36113,36115,36117,36119],{"class":169,"line":188},[167,36112,192],{"class":191},[167,36114,35354],{"class":173},[167,36116,198],{"class":191},[167,36118,35359],{"class":201},[167,36120,24044],{"class":173},[167,36122,36123],{"class":169,"line":205},[167,36124,209],{"emptyLinePlaceholder":208},[167,36126,36127,36129,36131],{"class":169,"line":160},[167,36128,608],{"class":191},[167,36130,3991],{"class":191},[167,36132,1905],{"class":173},[167,36134,36135,36137,36140],{"class":169,"line":238},[167,36136,4398],{"class":173},[167,36138,36139],{"class":201},"\"ProductFilter\"",[167,36141,393],{"class":173},[167,36143,36144],{"class":169,"line":243},[167,36145,36146],{"class":173},"  components: { SearchInput },\n",[167,36148,36149,36151],{"class":169,"line":261},[167,36150,7176],{"class":181},[167,36152,763],{"class":173},[167,36154,36155,36157],{"class":169,"line":273},[167,36156,1937],{"class":191},[167,36158,1905],{"class":173},[167,36160,36161,36164,36166],{"class":169,"line":279},[167,36162,36163],{"class":173},"      query: ",[167,36165,31161],{"class":201},[167,36167,393],{"class":173},[167,36169,36170,36173,36175],{"class":169,"line":289},[167,36171,36172],{"class":173},"      minPrice: ",[167,36174,6573],{"class":219},[167,36176,393],{"class":173},[167,36178,36179,36182,36184],{"class":169,"line":294},[167,36180,36181],{"class":173},"      onlyInStock: ",[167,36183,3392],{"class":219},[167,36185,393],{"class":173},[167,36187,36188],{"class":169,"line":304},[167,36189,36190],{"class":173},"      products: [\n",[167,36192,36193,36195,36197,36199,36201,36203,36205,36207,36209],{"class":169,"line":313},[167,36194,8677],{"class":173},[167,36196,1835],{"class":219},[167,36198,1838],{"class":173},[167,36200,35451],{"class":201},[167,36202,1844],{"class":173},[167,36204,35456],{"class":219},[167,36206,35459],{"class":173},[167,36208,390],{"class":219},[167,36210,1856],{"class":173},[167,36212,36213,36215,36217,36219,36221,36223,36225,36227,36229],{"class":169,"line":161},[167,36214,8677],{"class":173},[167,36216,1853],{"class":219},[167,36218,1838],{"class":173},[167,36220,35474],{"class":201},[167,36222,1844],{"class":173},[167,36224,35479],{"class":219},[167,36226,35459],{"class":173},[167,36228,3392],{"class":219},[167,36230,1856],{"class":173},[167,36232,36233,36235,36237,36239,36241,36243,36245,36247,36249],{"class":169,"line":335},[167,36234,8677],{"class":173},[167,36236,8203],{"class":219},[167,36238,1838],{"class":173},[167,36240,35496],{"class":201},[167,36242,1844],{"class":173},[167,36244,35501],{"class":219},[167,36246,35459],{"class":173},[167,36248,390],{"class":219},[167,36250,1856],{"class":173},[167,36252,36253],{"class":169,"line":341},[167,36254,16114],{"class":173},[167,36256,36257],{"class":169,"line":489},[167,36258,24370],{"class":173},[167,36260,36261],{"class":169,"line":495},[167,36262,398],{"class":173},[167,36264,36265],{"class":169,"line":501},[167,36266,8755],{"class":173},[167,36268,36269,36272],{"class":169,"line":512},[167,36270,36271],{"class":181},"    filteredProducts",[167,36273,763],{"class":173},[167,36275,36276,36278,36280,36283,36285,36287,36289,36291,36293],{"class":169,"line":781},[167,36277,8767],{"class":191},[167,36279,7351],{"class":219},[167,36281,36282],{"class":173},".products.",[167,36284,8252],{"class":181},[167,36286,1918],{"class":173},[167,36288,15],{"class":254},[167,36290,693],{"class":173},[167,36292,639],{"class":191},[167,36294,1905],{"class":173},[167,36296,36297,36299,36301,36303],{"class":169,"line":786},[167,36298,8787],{"class":191},[167,36300,35554],{"class":219},[167,36302,223],{"class":191},[167,36304,36305],{"class":173}," p.name\n",[167,36307,36308,36310,36312],{"class":169,"line":2678},[167,36309,8798],{"class":173},[167,36311,2506],{"class":181},[167,36313,2917],{"class":173},[167,36315,36316,36318,36320,36322,36324,36327,36329],{"class":169,"line":2692},[167,36317,8798],{"class":173},[167,36319,8290],{"class":181},[167,36321,229],{"class":173},[167,36323,4927],{"class":219},[167,36325,36326],{"class":173},".query.",[167,36328,2506],{"class":181},[167,36330,35576],{"class":173},[167,36332,36333,36335,36337],{"class":169,"line":3575},[167,36334,8787],{"class":191},[167,36336,35583],{"class":219},[167,36338,35557],{"class":191},[167,36340,36341,36344,36347,36349,36351,36353,36355,36357,36360,36362,36364],{"class":169,"line":5028},[167,36342,36343],{"class":219},"          this",[167,36345,36346],{"class":173},".minPrice ",[167,36348,35593],{"class":191},[167,36350,6567],{"class":219},[167,36352,35598],{"class":191},[167,36354,35601],{"class":173},[167,36356,1991],{"class":191},[167,36358,36359],{"class":181}," Number",[167,36361,229],{"class":173},[167,36363,4927],{"class":219},[167,36365,36366],{"class":173},".minPrice);\n",[167,36368,36369,36371,36373,36375,36377,36379,36382,36384],{"class":169,"line":5037},[167,36370,8787],{"class":191},[167,36372,35613],{"class":219},[167,36374,223],{"class":191},[167,36376,5625],{"class":191},[167,36378,4927],{"class":219},[167,36380,36381],{"class":173},".onlyInStock ",[167,36383,4264],{"class":191},[167,36385,35625],{"class":173},[167,36387,36388],{"class":169,"line":5046},[167,36389,209],{"emptyLinePlaceholder":208},[167,36391,36392,36394,36396,36398,36400,36402],{"class":169,"line":6756},[167,36393,8855],{"class":191},[167,36395,35636],{"class":173},[167,36397,8339],{"class":191},[167,36399,35641],{"class":173},[167,36401,8339],{"class":191},[167,36403,35646],{"class":173},[167,36405,36406],{"class":169,"line":6778},[167,36407,36408],{"class":173},"      });\n",[167,36410,36411],{"class":169,"line":6783},[167,36412,755],{"class":173},[167,36414,36415],{"class":169,"line":6788},[167,36416,398],{"class":173},[167,36418,36419],{"class":169,"line":6793},[167,36420,24148],{"class":173},[167,36422,36423,36425,36427],{"class":169,"line":6809},[167,36424,282],{"class":173},[167,36426,178],{"class":177},[167,36428,185],{"class":173},[167,36430,36431],{"class":169,"line":6824},[167,36432,209],{"emptyLinePlaceholder":208},[167,36434,36435,36437,36439],{"class":169,"line":6829},[167,36436,174],{"class":173},[167,36438,299],{"class":177},[167,36440,185],{"class":173},[167,36442,36443,36445,36447],{"class":169,"line":6836},[167,36444,307],{"class":173},[167,36446,10117],{"class":177},[167,36448,185],{"class":173},[167,36450,36451,36453,36455,36457,36459],{"class":169,"line":6845},[167,36452,1257],{"class":173},[167,36454,22],{"class":177},[167,36456,35691],{"class":173},[167,36458,22],{"class":177},[167,36460,185],{"class":173},[167,36462,36463],{"class":169,"line":6854},[167,36464,209],{"emptyLinePlaceholder":208},[167,36466,36467,36469,36471,36473,36475,36477],{"class":169,"line":6861},[167,36468,1257],{"class":173},[167,36470,35166],{"class":177},[167,36472,2653],{"class":181},[167,36474,267],{"class":173},[167,36476,2658],{"class":201},[167,36478,5325],{"class":173},[167,36480,36481],{"class":169,"line":6879},[167,36482,209],{"emptyLinePlaceholder":208},[167,36484,36485,36487,36489],{"class":169,"line":6884},[167,36486,1257],{"class":173},[167,36488,9875],{"class":177},[167,36490,185],{"class":173},[167,36492,36493],{"class":169,"line":6889},[167,36494,35730],{"class":173},[167,36496,36497,36499,36501,36503,36505,36507,36509,36511,36513,36515,36517,36519],{"class":169,"line":6898},[167,36498,1268],{"class":173},[167,36500,2650],{"class":177},[167,36502,34720],{"class":181},[167,36504,267],{"class":173},[167,36506,35743],{"class":201},[167,36508,1174],{"class":181},[167,36510,267],{"class":173},[167,36512,34732],{"class":201},[167,36514,34735],{"class":181},[167,36516,267],{"class":173},[167,36518,34740],{"class":201},[167,36520,5325],{"class":173},[167,36522,36523,36525,36527],{"class":169,"line":6903},[167,36524,1292],{"class":173},[167,36526,9875],{"class":177},[167,36528,185],{"class":173},[167,36530,36531],{"class":169,"line":6912},[167,36532,209],{"emptyLinePlaceholder":208},[167,36534,36535,36537,36539],{"class":169,"line":6928},[167,36536,1257],{"class":173},[167,36538,9875],{"class":177},[167,36540,185],{"class":173},[167,36542,36543,36545,36547,36549,36551,36553,36555,36557,36559],{"class":169,"line":6949},[167,36544,1268],{"class":173},[167,36546,2650],{"class":177},[167,36548,2653],{"class":181},[167,36550,267],{"class":173},[167,36552,35790],{"class":201},[167,36554,1174],{"class":181},[167,36556,267],{"class":173},[167,36558,35002],{"class":201},[167,36560,5325],{"class":173},[167,36562,36563],{"class":169,"line":6954},[167,36564,35803],{"class":173},[167,36566,36567,36569,36571],{"class":169,"line":6975},[167,36568,1292],{"class":173},[167,36570,9875],{"class":177},[167,36572,185],{"class":173},[167,36574,36575],{"class":169,"line":6989},[167,36576,209],{"emptyLinePlaceholder":208},[167,36578,36579,36581,36583],{"class":169,"line":7003},[167,36580,1257],{"class":173},[167,36582,33],{"class":177},[167,36584,185],{"class":173},[167,36586,36587,36589,36591,36593,36595,36597,36599,36601,36603],{"class":169,"line":7017},[167,36588,1268],{"class":173},[167,36590,36],{"class":177},[167,36592,18706],{"class":181},[167,36594,267],{"class":173},[167,36596,35836],{"class":201},[167,36598,10307],{"class":181},[167,36600,267],{"class":173},[167,36602,35843],{"class":201},[167,36604,185],{"class":173},[167,36606,36607],{"class":169,"line":7026},[167,36608,35850],{"class":173},[167,36610,36611,36613,36615,36617,36619,36621,36623,36625],{"class":169,"line":7031},[167,36612,32516],{"class":173},[167,36614,167],{"class":177},[167,36616,5694],{"class":181},[167,36618,267],{"class":173},[167,36620,35863],{"class":201},[167,36622,35866],{"class":173},[167,36624,167],{"class":177},[167,36626,185],{"class":173},[167,36628,36629,36631,36633],{"class":169,"line":7048},[167,36630,10170],{"class":173},[167,36632,36],{"class":177},[167,36634,185],{"class":173},[167,36636,36637,36639,36641],{"class":169,"line":7057},[167,36638,1292],{"class":173},[167,36640,33],{"class":177},[167,36642,185],{"class":173},[167,36644,36645,36647,36649],{"class":169,"line":7555},[167,36646,504],{"class":173},[167,36648,10117],{"class":177},[167,36650,185],{"class":173},[167,36652,36653,36655,36657],{"class":169,"line":7560},[167,36654,282],{"class":173},[167,36656,299],{"class":177},[167,36658,185],{"class":173},[22,36660,7678],{"id":7677},[15,36662,36663,36665],{},[87,36664,23865],{}," es la forma idiomática en Vue 3 para sincronizar UI y estado en formularios y componentes.",[15,36667,36668],{},"Úsalo para reducir boilerplate y mantener consistencia, pero evita convertirlo en un atajo para lógica de negocio compleja.",[15,36670,27696],{},[33,36672,36673,36679,36688,36698],{},[36,36674,36675,36676,36678],{},"En inputs nativos, simplifica ",[87,36677,33972],{}," + eventos.",[36,36680,36681,36682,11227,36684,34224,36686,1679],{},"En componentes, respeta ",[87,36683,34049],{},[87,36685,34055],{},[87,36687,34227],{},[36,36689,36690,36691,1025,36693,1025,36695,36697],{},"Aplica modificadores (",[87,36692,34074],{},[87,36694,34079],{},[87,36696,34084],{},") cuando mejoren la calidad de los datos o el rendimiento.",[36,36699,36700],{},"Mantén el flujo de datos claro y explícito cuando el dominio lo requiera.",[924,36702,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":36704},[36705,36706,36710,36711,36712,36719,36720,36722,36723,36727],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257,"children":36707},[36708,36709],{"id":33992,"depth":205,"text":33993},{"id":34037,"depth":205,"text":34038},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":36713},[36714,36715,36717,36718],{"id":34155,"depth":205,"text":34156},{"id":34235,"depth":205,"text":36716},"2) Enlazar v-model a expresiones no escribibles",{"id":34308,"depth":205,"text":34309},{"id":34337,"depth":205,"text":34338},{"id":34349,"depth":188,"text":34350},{"id":34610,"depth":188,"text":36721},"2) Input numérico con v-model.number",{"id":34897,"depth":188,"text":34898},{"id":35158,"depth":188,"text":35159,"children":36724},[36725,36726],{"id":32691,"depth":205,"text":32692},{"id":33278,"depth":205,"text":33279},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771265788\u002Fdirectives-vue-v-model-guide_ticgya.png","Imagen temporal para portada del artículo sobre v-model en Vue","2026-02-16","Aprende a usar v-model en Vue 3 para formularios y componentes personalizados, con Composition API y Options API, casos reales, errores comunes y buenas practicas.",{"updatedAt":36733,"coverCaption":23656,"author":946,"keywords":36734},"2026-02-16T13:30:00-05:00",[3258,23865,36735,36736,3260,3973],"formularios","two-way binding","\u002Fblog\u002Fdirectives-vue-v-model-guide.es",[36739],{"headline":36740,"author":36741,"datePublished":36733,"@type":961},"Directiva v-model en Vue: guía completa para formularios y componentes",{"name":946,"@type":959},{"title":33939,"description":36731},"blog\u002Fdirectives-vue-v-model-guide.es",[36745,36746,36749,36750],{"tag":26466,"color":26467},{"tag":36747,"color":36748},"Formularios","#E67E22",{"tag":3269,"color":3270},{"tag":5424,"color":5425},"O_hXXsF2G3Nazt5a_Ggj8OT6_GTMtHDuGhVbwudOzcU",{"id":36753,"title":36754,"body":36755,"cover":39749,"coverAlt":39750,"date":39751,"description":39752,"draft":940,"extension":941,"lab":942,"locale":943,"meta":39753,"navigation":208,"path":39758,"schemaOrg":39759,"seo":39763,"series":26460,"seriesDescription":26461,"seriesOrder":238,"seriesTitle":26462,"slug":942,"stem":39764,"tags":39765,"__hash__":39769},"blog\u002Fblog\u002Fdirectives-vue-v-on-guide.es.md","Directivas en Vue: v-on",{"type":8,"value":36756,"toc":39726},[36757,36762,36770,36772,36780,36791,36798,36800,36803,36838,36841,36871,36876,36931,36933,36938,36940,36971,36973,36978,36991,36996,36998,37002,37004,37037,37044,37073,37080,37082,37108,37110,37140,37147,37151,37154,37219,37222,37253,37256,37263,37265,37294,37296,37324,37330,37332,37336,37439,37548,37554,37758,37971,37975,38116,38264,38268,38391,38523,38525,38528,38547,39155,39687,39689,39694,39697,39723],[11,36758,26483,36760],{"id":36759},"directivas-en-vue-v-on",[87,36761,23871],{},[15,36763,36764,36766,36767,36769],{},[87,36765,23871],{}," conecta eventos del DOM o de componentes con funciones de tu app.\nCuando el usuario hace clic, escribe o pulsa una tecla, ",[87,36768,23871],{}," dispara la lógica que definiste.",[22,36771,26503],{"id":26502},[15,36773,21844,36774,36776,36777,36779],{},[87,36775,23871],{},", una interfaz no responde a la interacción del usuario.\nCon ",[87,36778,23871],{},", puedes:",[33,36781,36782,36785,36788],{},[36,36783,36784],{},"Capturar acciones del usuario sin manipular el DOM manualmente.",[36,36786,36787],{},"Mantener la interacción declarativa y legible en el template.",[36,36789,36790],{},"Separar estado, renderizado y comportamiento de forma consistente con Vue.",[5367,36792,36793],{},[15,36794,36795,36797],{},[87,36796,23871],{}," es la base de botones, formularios, atajos de teclado y comunicación entre componentes vía eventos.",[22,36799,30500],{"id":30499},[15,36801,36802],{},"La forma larga:",[154,36804,36806],{"className":156,"code":36805,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cbutton v-on:click=\"increment\">Sumar\u003C\u002Fbutton>\n",[87,36807,36808],{"__ignoreMap":163},[167,36809,36810,36812,36814,36817,36819,36822,36824,36826,36829,36831,36834,36836],{"class":169,"line":170},[167,36811,174],{"class":173},[167,36813,507],{"class":177},[167,36815,36816],{"class":181}," v-on",[167,36818,583],{"class":173},[167,36820,36821],{"class":181},"click",[167,36823,267],{"class":173},[167,36825,5080],{"class":201},[167,36827,36828],{"class":173},"increment",[167,36830,5080],{"class":201},[167,36832,36833],{"class":173},">Sumar\u003C\u002F",[167,36835,507],{"class":177},[167,36837,185],{"class":173},[15,36839,36840],{},"La forma corta recomendada:",[154,36842,36844],{"className":156,"code":36843,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"increment\">Sumar\u003C\u002Fbutton>\n",[87,36845,36846],{"__ignoreMap":163},[167,36847,36848,36850,36852,36855,36857,36859,36861,36863,36865,36867,36869],{"class":169,"line":170},[167,36849,174],{"class":173},[167,36851,507],{"class":177},[167,36853,36854],{"class":173}," @",[167,36856,36821],{"class":181},[167,36858,267],{"class":173},[167,36860,5080],{"class":201},[167,36862,36828],{"class":173},[167,36864,5080],{"class":201},[167,36866,36833],{"class":173},[167,36868,507],{"class":177},[167,36870,185],{"class":173},[15,36872,36873,36875],{},[87,36874,23871],{}," admite:",[33,36877,36878,36891,36900,36915],{},[36,36879,36880,36881,1025,36883,1025,36885,1025,36888,4270],{},"Eventos nativos (",[87,36882,36821],{},[87,36884,2650],{},[87,36886,36887],{},"submit",[87,36889,36890],{},"keydown",[36,36892,36893,36894,1025,36897,4270],{},"Eventos emitidos por componentes (",[87,36895,36896],{},"@save",[87,36898,36899],{},"@close",[36,36901,36902,36903,1025,36906,1025,36909,1025,36912,4270],{},"Modificadores de evento (",[87,36904,36905],{},".prevent",[87,36907,36908],{},".stop",[87,36910,36911],{},".once",[87,36913,36914],{},".self",[36,36916,36917,36918,1025,36921,36924,36925,1025,36928,7863],{},"Modificadores de teclado (",[87,36919,36920],{},".enter",[87,36922,36923],{},".esc",", combinaciones con ",[87,36926,36927],{},"ctrl",[87,36929,36930],{},"shift",[22,36932,6322],{"id":6321},[15,36934,1582,36935,36937],{},[87,36936,23871],{}," cuando necesites reaccionar a acciones del usuario o a eventos de componentes.",[15,36939,9308],{},[33,36941,36942,36948,36954,36960,36965],{},[36,36943,36944,36945,4270],{},"Botones de acción (",[87,36946,36947],{},"@click=\"createTask\"",[36,36949,36950,36951,4270],{},"Formularios (",[87,36952,36953],{},"@submit.prevent=\"submitForm\"",[36,36955,36956,36957,4270],{},"Inputs en tiempo real (",[87,36958,36959],{},"@input=\"handleSearch\"",[36,36961,23702,36962,4270],{},[87,36963,36964],{},"@keydown.ctrl.enter=\"publish\"",[36,36966,36967,36968,4270],{},"Eventos personalizados desde componentes hijos (",[87,36969,36970],{},"@save=\"persistTask\"",[22,36972,6349],{"id":6348},[15,36974,13622,36975,36977],{},[87,36976,23871],{}," en estos casos:",[33,36979,36980,36983,36988],{},[36,36981,36982],{},"Cuando no hay interacción real y el contenido es completamente estático.",[36,36984,36985,36986,1679],{},"Cuando colocas demasiada lógica inline en el template; es mejor moverla a funciones o ",[87,36987,1661],{},[36,36989,36990],{},"Cuando intentas “resolver” seguridad con eventos del frontend: la validación real debe ocurrir en backend.",[5367,36992,36993],{},[15,36994,36995],{},"También evita encadenar muchos modificadores sin una intención clara, porque dificulta el mantenimiento.",[22,36997,3085],{"id":3084},[3087,36999,37001],{"id":37000},"_1-ejecutar-la-función-en-vez-de-referenciarla","1) Ejecutar la función en vez de referenciarla",[15,37003,30738],{},[154,37005,37007],{"className":156,"code":37006,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"saveTask()\">Guardar\u003C\u002Fbutton>\n",[87,37008,37009],{"__ignoreMap":163},[167,37010,37011,37013,37015,37017,37019,37021,37023,37026,37028,37030,37033,37035],{"class":169,"line":170},[167,37012,174],{"class":173},[167,37014,507],{"class":177},[167,37016,36854],{"class":173},[167,37018,36821],{"class":181},[167,37020,267],{"class":173},[167,37022,5080],{"class":201},[167,37024,37025],{"class":181},"saveTask",[167,37027,34267],{"class":173},[167,37029,5080],{"class":201},[167,37031,37032],{"class":173},">Guardar\u003C\u002F",[167,37034,507],{"class":177},[167,37036,185],{"class":173},[15,37038,37039,37040,37043],{},"Esto ",[3933,37041,37042],{},"es válido",", pero si no necesitas argumentos, suele ser más limpio:",[154,37045,37047],{"className":156,"code":37046,"filename":34285,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"saveTask\">Guardar\u003C\u002Fbutton>\n",[87,37048,37049],{"__ignoreMap":163},[167,37050,37051,37053,37055,37057,37059,37061,37063,37065,37067,37069,37071],{"class":169,"line":170},[167,37052,174],{"class":173},[167,37054,507],{"class":177},[167,37056,36854],{"class":173},[167,37058,36821],{"class":181},[167,37060,267],{"class":173},[167,37062,5080],{"class":201},[167,37064,37025],{"class":173},[167,37066,5080],{"class":201},[167,37068,37032],{"class":173},[167,37070,507],{"class":177},[167,37072,185],{"class":173},[3087,37074,37076,37077,37079],{"id":37075},"_2-olvidar-prevent-en-formularios","2) Olvidar ",[87,37078,36905],{}," en formularios",[15,37081,30738],{},[154,37083,37085],{"className":156,"code":37084,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cform @submit=\"submitForm\">\n",[87,37086,37087],{"__ignoreMap":163},[167,37088,37089,37091,37093,37095,37097,37099,37101,37104,37106],{"class":169,"line":170},[167,37090,174],{"class":173},[167,37092,4305],{"class":177},[167,37094,36854],{"class":173},[167,37096,36887],{"class":181},[167,37098,267],{"class":173},[167,37100,5080],{"class":201},[167,37102,37103],{"class":173},"submitForm",[167,37105,5080],{"class":201},[167,37107,185],{"class":173},[15,37109,34281],{},[154,37111,37113],{"className":156,"code":37112,"filename":34285,"language":162,"meta":163,"style":163},"\u003Cform @submit.prevent=\"submitForm\">\n",[87,37114,37115],{"__ignoreMap":163},[167,37116,37117,37119,37121,37123,37125,37127,37130,37132,37134,37136,37138],{"class":169,"line":170},[167,37118,174],{"class":173},[167,37120,4305],{"class":177},[167,37122,36854],{"class":173},[167,37124,36887],{"class":181},[167,37126,1679],{"class":173},[167,37128,37129],{"class":181},"prevent",[167,37131,267],{"class":173},[167,37133,5080],{"class":201},[167,37135,37103],{"class":173},[167,37137,5080],{"class":201},[167,37139,185],{"class":173},[5367,37141,37142],{},[15,37143,21844,37144,37146],{},[87,37145,36905],{},", el navegador recarga la página por defecto.",[3087,37148,37150],{"id":37149},"_3-poner-demasiada-lógica-dentro-del-template","3) Poner demasiada lógica dentro del template",[15,37152,37153],{},"Evitar:",[154,37155,37157],{"className":156,"code":37156,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"isAdmin && canEdit && !isLocked ? publishNow() : showWarning()\">\n  Publicar\n\u003C\u002Fbutton>\n",[87,37158,37159,37206,37211],{"__ignoreMap":163},[167,37160,37161,37163,37165,37167,37169,37171,37173,37176,37178,37181,37183,37185,37188,37190,37193,37195,37197,37200,37202,37204],{"class":169,"line":170},[167,37162,174],{"class":173},[167,37164,507],{"class":177},[167,37166,36854],{"class":173},[167,37168,36821],{"class":181},[167,37170,267],{"class":173},[167,37172,5080],{"class":201},[167,37174,37175],{"class":173},"isAdmin ",[167,37177,8339],{"class":191},[167,37179,37180],{"class":173}," canEdit ",[167,37182,8339],{"class":191},[167,37184,5625],{"class":191},[167,37186,37187],{"class":173},"isLocked ",[167,37189,8316],{"class":191},[167,37191,37192],{"class":181}," publishNow",[167,37194,14087],{"class":173},[167,37196,583],{"class":191},[167,37198,37199],{"class":181}," showWarning",[167,37201,34267],{"class":173},[167,37203,5080],{"class":201},[167,37205,185],{"class":173},[167,37207,37208],{"class":169,"line":188},[167,37209,37210],{"class":173},"  Publicar\n",[167,37212,37213,37215,37217],{"class":169,"line":205},[167,37214,282],{"class":173},[167,37216,507],{"class":177},[167,37218,185],{"class":173},[15,37220,37221],{},"Mejor:",[154,37223,37225],{"className":156,"code":37224,"filename":34285,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"handlePublishClick\">Publicar\u003C\u002Fbutton>\n",[87,37226,37227],{"__ignoreMap":163},[167,37228,37229,37231,37233,37235,37237,37239,37241,37244,37246,37249,37251],{"class":169,"line":170},[167,37230,174],{"class":173},[167,37232,507],{"class":177},[167,37234,36854],{"class":173},[167,37236,36821],{"class":181},[167,37238,267],{"class":173},[167,37240,5080],{"class":201},[167,37242,37243],{"class":173},"handlePublishClick",[167,37245,5080],{"class":201},[167,37247,37248],{"class":173},">Publicar\u003C\u002F",[167,37250,507],{"class":177},[167,37252,185],{"class":173},[15,37254,37255],{},"Y mover la decisión a una función clara en el script.",[3087,37257,37259,37260,37262],{"id":37258},"_4-usar-event-sin-declararlo","4) Usar ",[87,37261,4195],{}," sin declararlo",[15,37264,30738],{},[154,37266,37268],{"className":156,"code":37267,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cinput @input=\"onInput(event)\" \u002F>\n",[87,37269,37270],{"__ignoreMap":163},[167,37271,37272,37274,37276,37278,37280,37282,37284,37287,37290,37292],{"class":169,"line":170},[167,37273,174],{"class":173},[167,37275,2650],{"class":177},[167,37277,36854],{"class":173},[167,37279,2650],{"class":181},[167,37281,267],{"class":173},[167,37283,5080],{"class":201},[167,37285,37286],{"class":181},"onInput",[167,37288,37289],{"class":173},"(event)",[167,37291,5080],{"class":201},[167,37293,5325],{"class":173},[15,37295,34281],{},[154,37297,37299],{"className":156,"code":37298,"filename":34285,"language":162,"meta":163,"style":163},"\u003Cinput @input=\"onInput($event)\" \u002F>\n",[87,37300,37301],{"__ignoreMap":163},[167,37302,37303,37305,37307,37309,37311,37313,37315,37317,37320,37322],{"class":169,"line":170},[167,37304,174],{"class":173},[167,37306,2650],{"class":177},[167,37308,36854],{"class":173},[167,37310,2650],{"class":181},[167,37312,267],{"class":173},[167,37314,5080],{"class":201},[167,37316,37286],{"class":181},[167,37318,37319],{"class":173},"($event)",[167,37321,5080],{"class":201},[167,37323,5325],{"class":173},[15,37325,37326,37327,37329],{},"O mejor aún, tipar el evento y leer ",[87,37328,7839],{}," de forma segura en TypeScript.",[22,37331,7997],{"id":7996},[3087,37333,37335],{"id":37334},"_1-click-simple-para-actualizar-estado","1) Click simple para actualizar estado",[154,37337,37340],{"className":156,"code":37338,"filename":3260,"highlights":37339,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst count = ref(0);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Clicks: {{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[160,273],[87,37341,37342,37358,37370,37374,37391,37399,37403,37411,37431],{"__ignoreMap":163},[167,37343,37344,37346,37348,37350,37352,37354,37356],{"class":169,"line":170},[167,37345,174],{"class":173},[167,37347,178],{"class":177},[167,37349,182],{"class":181},[167,37351,1050],{"class":181},[167,37353,267],{"class":173},[167,37355,1055],{"class":201},[167,37357,185],{"class":173},[167,37359,37360,37362,37364,37366,37368],{"class":169,"line":188},[167,37361,192],{"class":191},[167,37363,195],{"class":173},[167,37365,198],{"class":191},[167,37367,24041],{"class":201},[167,37369,24044],{"class":173},[167,37371,37372],{"class":169,"line":205},[167,37373,209],{"emptyLinePlaceholder":208},[167,37375,37377,37379,37381,37383,37385,37387,37389],{"class":37376,"line":160},[169,213],[167,37378,216],{"class":191},[167,37380,15325],{"class":219},[167,37382,223],{"class":191},[167,37384,226],{"class":181},[167,37386,229],{"class":173},[167,37388,1960],{"class":219},[167,37390,24169],{"class":173},[167,37392,37393,37395,37397],{"class":169,"line":238},[167,37394,282],{"class":173},[167,37396,178],{"class":177},[167,37398,185],{"class":173},[167,37400,37401],{"class":169,"line":243},[167,37402,209],{"emptyLinePlaceholder":208},[167,37404,37405,37407,37409],{"class":169,"line":261},[167,37406,174],{"class":173},[167,37408,299],{"class":177},[167,37410,185],{"class":173},[167,37412,37414,37416,37418,37420,37422,37424,37427,37429],{"class":37413,"line":273},[169,213],[167,37415,307],{"class":173},[167,37417,507],{"class":177},[167,37419,1182],{"class":181},[167,37421,267],{"class":173},[167,37423,18386],{"class":201},[167,37425,37426],{"class":173},">Clicks: {{ count }}\u003C\u002F",[167,37428,507],{"class":177},[167,37430,185],{"class":173},[167,37432,37433,37435,37437],{"class":169,"line":279},[167,37434,282],{"class":173},[167,37436,299],{"class":177},[167,37438,185],{"class":173},[154,37440,37443],{"className":156,"code":37441,"filename":3973,"highlights":37442,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      count: 0,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Clicks: {{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[238,304],[87,37444,37445,37459,37467,37473,37479,37489,37493,37497,37501,37509,37513,37521,37540],{"__ignoreMap":163},[167,37446,37447,37449,37451,37453,37455,37457],{"class":169,"line":170},[167,37448,174],{"class":173},[167,37450,178],{"class":177},[167,37452,1050],{"class":181},[167,37454,267],{"class":173},[167,37456,1055],{"class":201},[167,37458,185],{"class":173},[167,37460,37461,37463,37465],{"class":169,"line":188},[167,37462,608],{"class":191},[167,37464,3991],{"class":191},[167,37466,1905],{"class":173},[167,37468,37469,37471],{"class":169,"line":205},[167,37470,7176],{"class":181},[167,37472,763],{"class":173},[167,37474,37475,37477],{"class":169,"line":160},[167,37476,1937],{"class":191},[167,37478,1905],{"class":173},[167,37480,37482,37485,37487],{"class":37481,"line":238},[169,213],[167,37483,37484],{"class":173},"      count: ",[167,37486,1960],{"class":219},[167,37488,393],{"class":173},[167,37490,37491],{"class":169,"line":243},[167,37492,24370],{"class":173},[167,37494,37495],{"class":169,"line":261},[167,37496,398],{"class":173},[167,37498,37499],{"class":169,"line":273},[167,37500,24148],{"class":173},[167,37502,37503,37505,37507],{"class":169,"line":279},[167,37504,282],{"class":173},[167,37506,178],{"class":177},[167,37508,185],{"class":173},[167,37510,37511],{"class":169,"line":289},[167,37512,209],{"emptyLinePlaceholder":208},[167,37514,37515,37517,37519],{"class":169,"line":294},[167,37516,174],{"class":173},[167,37518,299],{"class":177},[167,37520,185],{"class":173},[167,37522,37524,37526,37528,37530,37532,37534,37536,37538],{"class":37523,"line":304},[169,213],[167,37525,307],{"class":173},[167,37527,507],{"class":177},[167,37529,1182],{"class":181},[167,37531,267],{"class":173},[167,37533,18386],{"class":201},[167,37535,37426],{"class":173},[167,37537,507],{"class":177},[167,37539,185],{"class":173},[167,37541,37542,37544,37546],{"class":169,"line":313},[167,37543,282],{"class":173},[167,37545,299],{"class":177},[167,37547,185],{"class":173},[3087,37549,37551,37552],{"id":37550},"_2-submit-de-formulario-con-prevent","2) Submit de formulario con ",[87,37553,36905],{},[154,37555,37558],{"className":156,"code":37556,"filename":3260,"highlights":37557,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst email = ref(\"\");\n\nfunction submitForm() {\n  if (!email.value.trim()) return;\n  console.log(\"Enviar:\", email.value);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submitForm\">\n    \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"tu@email.com\" \u002F>\n    \u003Cbutton type=\"submit\">Enviar\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[313],[87,37559,37560,37576,37588,37592,37609,37613,37622,37641,37655,37659,37667,37671,37679,37695,37723,37742,37750],{"__ignoreMap":163},[167,37561,37562,37564,37566,37568,37570,37572,37574],{"class":169,"line":170},[167,37563,174],{"class":173},[167,37565,178],{"class":177},[167,37567,182],{"class":181},[167,37569,1050],{"class":181},[167,37571,267],{"class":173},[167,37573,1055],{"class":201},[167,37575,185],{"class":173},[167,37577,37578,37580,37582,37584,37586],{"class":169,"line":188},[167,37579,192],{"class":191},[167,37581,195],{"class":173},[167,37583,198],{"class":191},[167,37585,24041],{"class":201},[167,37587,24044],{"class":173},[167,37589,37590],{"class":169,"line":205},[167,37591,209],{"emptyLinePlaceholder":208},[167,37593,37594,37596,37599,37601,37603,37605,37607],{"class":169,"line":160},[167,37595,216],{"class":191},[167,37597,37598],{"class":219}," email",[167,37600,223],{"class":191},[167,37602,226],{"class":181},[167,37604,229],{"class":173},[167,37606,31161],{"class":201},[167,37608,24169],{"class":173},[167,37610,37611],{"class":169,"line":238},[167,37612,209],{"emptyLinePlaceholder":208},[167,37614,37615,37617,37620],{"class":169,"line":243},[167,37616,246],{"class":191},[167,37618,37619],{"class":181}," submitForm",[167,37621,763],{"class":173},[167,37623,37624,37626,37628,37630,37633,37635,37637,37639],{"class":169,"line":261},[167,37625,2544],{"class":191},[167,37627,2526],{"class":173},[167,37629,6641],{"class":191},[167,37631,37632],{"class":173},"email.value.",[167,37634,2500],{"class":181},[167,37636,6689],{"class":173},[167,37638,24238],{"class":191},[167,37640,24044],{"class":173},[167,37642,37643,37645,37647,37649,37652],{"class":169,"line":273},[167,37644,2608],{"class":173},[167,37646,2611],{"class":181},[167,37648,229],{"class":173},[167,37650,37651],{"class":201},"\"Enviar:\"",[167,37653,37654],{"class":173},", email.value);\n",[167,37656,37657],{"class":169,"line":279},[167,37658,276],{"class":173},[167,37660,37661,37663,37665],{"class":169,"line":289},[167,37662,282],{"class":173},[167,37664,178],{"class":177},[167,37666,185],{"class":173},[167,37668,37669],{"class":169,"line":294},[167,37670,209],{"emptyLinePlaceholder":208},[167,37672,37673,37675,37677],{"class":169,"line":304},[167,37674,174],{"class":173},[167,37676,299],{"class":177},[167,37678,185],{"class":173},[167,37680,37682,37684,37686,37688,37690,37693],{"class":37681,"line":313},[169,213],[167,37683,307],{"class":173},[167,37685,4305],{"class":177},[167,37687,4308],{"class":181},[167,37689,267],{"class":173},[167,37691,37692],{"class":201},"\"submitForm\"",[167,37694,185],{"class":173},[167,37696,37697,37699,37701,37703,37705,37708,37710,37712,37714,37716,37718,37721],{"class":169,"line":161},[167,37698,1257],{"class":173},[167,37700,2650],{"class":177},[167,37702,2653],{"class":181},[167,37704,267],{"class":173},[167,37706,37707],{"class":201},"\"email\"",[167,37709,1174],{"class":181},[167,37711,267],{"class":173},[167,37713,37707],{"class":201},[167,37715,2668],{"class":181},[167,37717,267],{"class":173},[167,37719,37720],{"class":201},"\"tu@email.com\"",[167,37722,5325],{"class":173},[167,37724,37725,37727,37729,37731,37733,37735,37738,37740],{"class":169,"line":335},[167,37726,1257],{"class":173},[167,37728,507],{"class":177},[167,37730,1174],{"class":181},[167,37732,267],{"class":173},[167,37734,4348],{"class":201},[167,37736,37737],{"class":173},">Enviar\u003C\u002F",[167,37739,507],{"class":177},[167,37741,185],{"class":173},[167,37743,37744,37746,37748],{"class":169,"line":341},[167,37745,504],{"class":173},[167,37747,4305],{"class":177},[167,37749,185],{"class":173},[167,37751,37752,37754,37756],{"class":169,"line":489},[167,37753,282],{"class":173},[167,37755,299],{"class":177},[167,37757,185],{"class":173},[154,37759,37762],{"className":156,"code":37760,"filename":3973,"highlights":37761,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      email: \"\",\n    };\n  },\n  methods: {\n    submitForm() {\n      if (!this.email.trim()) return;\n      console.log(\"Enviar:\", this.email);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submitForm\">\n    \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"tu@email.com\" \u002F>\n    \u003Cbutton type=\"submit\">Enviar\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[495],[87,37763,37764,37778,37786,37792,37798,37807,37811,37815,37819,37826,37847,37864,37868,37872,37876,37884,37888,37896,37911,37937,37955,37963],{"__ignoreMap":163},[167,37765,37766,37768,37770,37772,37774,37776],{"class":169,"line":170},[167,37767,174],{"class":173},[167,37769,178],{"class":177},[167,37771,1050],{"class":181},[167,37773,267],{"class":173},[167,37775,1055],{"class":201},[167,37777,185],{"class":173},[167,37779,37780,37782,37784],{"class":169,"line":188},[167,37781,608],{"class":191},[167,37783,3991],{"class":191},[167,37785,1905],{"class":173},[167,37787,37788,37790],{"class":169,"line":205},[167,37789,7176],{"class":181},[167,37791,763],{"class":173},[167,37793,37794,37796],{"class":169,"line":160},[167,37795,1937],{"class":191},[167,37797,1905],{"class":173},[167,37799,37800,37803,37805],{"class":169,"line":238},[167,37801,37802],{"class":173},"      email: ",[167,37804,31161],{"class":201},[167,37806,393],{"class":173},[167,37808,37809],{"class":169,"line":243},[167,37810,24370],{"class":173},[167,37812,37813],{"class":169,"line":261},[167,37814,398],{"class":173},[167,37816,37817],{"class":169,"line":273},[167,37818,4419],{"class":173},[167,37820,37821,37824],{"class":169,"line":279},[167,37822,37823],{"class":181},"    submitForm",[167,37825,763],{"class":173},[167,37827,37828,37830,37832,37834,37836,37839,37841,37843,37845],{"class":169,"line":289},[167,37829,7261],{"class":191},[167,37831,2526],{"class":173},[167,37833,6641],{"class":191},[167,37835,4927],{"class":219},[167,37837,37838],{"class":173},".email.",[167,37840,2500],{"class":181},[167,37842,6689],{"class":173},[167,37844,24238],{"class":191},[167,37846,24044],{"class":173},[167,37848,37849,37851,37853,37855,37857,37859,37861],{"class":169,"line":294},[167,37850,20442],{"class":173},[167,37852,2611],{"class":181},[167,37854,229],{"class":173},[167,37856,37651],{"class":201},[167,37858,1025],{"class":173},[167,37860,4927],{"class":219},[167,37862,37863],{"class":173},".email);\n",[167,37865,37866],{"class":169,"line":304},[167,37867,755],{"class":173},[167,37869,37870],{"class":169,"line":313},[167,37871,398],{"class":173},[167,37873,37874],{"class":169,"line":161},[167,37875,24148],{"class":173},[167,37877,37878,37880,37882],{"class":169,"line":335},[167,37879,282],{"class":173},[167,37881,178],{"class":177},[167,37883,185],{"class":173},[167,37885,37886],{"class":169,"line":341},[167,37887,209],{"emptyLinePlaceholder":208},[167,37889,37890,37892,37894],{"class":169,"line":489},[167,37891,174],{"class":173},[167,37893,299],{"class":177},[167,37895,185],{"class":173},[167,37897,37899,37901,37903,37905,37907,37909],{"class":37898,"line":495},[169,213],[167,37900,307],{"class":173},[167,37902,4305],{"class":177},[167,37904,4308],{"class":181},[167,37906,267],{"class":173},[167,37908,37692],{"class":201},[167,37910,185],{"class":173},[167,37912,37913,37915,37917,37919,37921,37923,37925,37927,37929,37931,37933,37935],{"class":169,"line":501},[167,37914,1257],{"class":173},[167,37916,2650],{"class":177},[167,37918,2653],{"class":181},[167,37920,267],{"class":173},[167,37922,37707],{"class":201},[167,37924,1174],{"class":181},[167,37926,267],{"class":173},[167,37928,37707],{"class":201},[167,37930,2668],{"class":181},[167,37932,267],{"class":173},[167,37934,37720],{"class":201},[167,37936,5325],{"class":173},[167,37938,37939,37941,37943,37945,37947,37949,37951,37953],{"class":169,"line":512},[167,37940,1257],{"class":173},[167,37942,507],{"class":177},[167,37944,1174],{"class":181},[167,37946,267],{"class":173},[167,37948,4348],{"class":201},[167,37950,37737],{"class":173},[167,37952,507],{"class":177},[167,37954,185],{"class":173},[167,37956,37957,37959,37961],{"class":169,"line":781},[167,37958,504],{"class":173},[167,37960,4305],{"class":177},[167,37962,185],{"class":173},[167,37964,37965,37967,37969],{"class":169,"line":786},[167,37966,282],{"class":173},[167,37968,299],{"class":177},[167,37970,185],{"class":173},[3087,37972,37974],{"id":37973},"_3-atajo-de-teclado-con-modificadores","3) Atajo de teclado con modificadores",[154,37976,37979],{"className":156,"code":37977,"filename":3260,"highlights":37978,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst note = ref(\"\");\n\nfunction saveDraft() {\n  console.log(\"Borrador guardado:\", note.value);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" \u002F>\n\u003C\u002Ftemplate>\n",[304],[87,37980,37981,37997,38009,38013,38030,38034,38043,38057,38061,38069,38073,38081,38108],{"__ignoreMap":163},[167,37982,37983,37985,37987,37989,37991,37993,37995],{"class":169,"line":170},[167,37984,174],{"class":173},[167,37986,178],{"class":177},[167,37988,182],{"class":181},[167,37990,1050],{"class":181},[167,37992,267],{"class":173},[167,37994,1055],{"class":201},[167,37996,185],{"class":173},[167,37998,37999,38001,38003,38005,38007],{"class":169,"line":188},[167,38000,192],{"class":191},[167,38002,195],{"class":173},[167,38004,198],{"class":191},[167,38006,24041],{"class":201},[167,38008,24044],{"class":173},[167,38010,38011],{"class":169,"line":205},[167,38012,209],{"emptyLinePlaceholder":208},[167,38014,38015,38017,38020,38022,38024,38026,38028],{"class":169,"line":160},[167,38016,216],{"class":191},[167,38018,38019],{"class":219}," note",[167,38021,223],{"class":191},[167,38023,226],{"class":181},[167,38025,229],{"class":173},[167,38027,31161],{"class":201},[167,38029,24169],{"class":173},[167,38031,38032],{"class":169,"line":238},[167,38033,209],{"emptyLinePlaceholder":208},[167,38035,38036,38038,38041],{"class":169,"line":243},[167,38037,246],{"class":191},[167,38039,38040],{"class":181}," saveDraft",[167,38042,763],{"class":173},[167,38044,38045,38047,38049,38051,38054],{"class":169,"line":261},[167,38046,2608],{"class":173},[167,38048,2611],{"class":181},[167,38050,229],{"class":173},[167,38052,38053],{"class":201},"\"Borrador guardado:\"",[167,38055,38056],{"class":173},", note.value);\n",[167,38058,38059],{"class":169,"line":273},[167,38060,276],{"class":173},[167,38062,38063,38065,38067],{"class":169,"line":279},[167,38064,282],{"class":173},[167,38066,178],{"class":177},[167,38068,185],{"class":173},[167,38070,38071],{"class":169,"line":289},[167,38072,209],{"emptyLinePlaceholder":208},[167,38074,38075,38077,38079],{"class":169,"line":294},[167,38076,174],{"class":173},[167,38078,299],{"class":177},[167,38080,185],{"class":173},[167,38082,38084,38086,38089,38091,38093,38096,38099,38101,38104,38106],{"class":38083,"line":304},[169,213],[167,38085,307],{"class":173},[167,38087,38088],{"class":177},"textarea",[167,38090,2653],{"class":181},[167,38092,267],{"class":173},[167,38094,38095],{"class":201},"\"note\"",[167,38097,38098],{"class":181}," @keydown.ctrl.enter.prevent",[167,38100,267],{"class":173},[167,38102,38103],{"class":201},"\"saveDraft\"",[167,38105,31789],{"class":31788},[167,38107,185],{"class":173},[167,38109,38110,38112,38114],{"class":169,"line":313},[167,38111,282],{"class":173},[167,38113,299],{"class":177},[167,38115,185],{"class":173},[154,38117,38120],{"className":156,"code":38118,"filename":3973,"highlights":38119,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      note: \"\",\n    };\n  },\n  methods: {\n    saveDraft() {\n      console.log(\"Borrador guardado:\", this.note);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" \u002F>\n\u003C\u002Ftemplate>\n",[489],[87,38121,38122,38136,38144,38150,38156,38165,38169,38173,38177,38184,38201,38205,38209,38213,38221,38225,38233,38256],{"__ignoreMap":163},[167,38123,38124,38126,38128,38130,38132,38134],{"class":169,"line":170},[167,38125,174],{"class":173},[167,38127,178],{"class":177},[167,38129,1050],{"class":181},[167,38131,267],{"class":173},[167,38133,1055],{"class":201},[167,38135,185],{"class":173},[167,38137,38138,38140,38142],{"class":169,"line":188},[167,38139,608],{"class":191},[167,38141,3991],{"class":191},[167,38143,1905],{"class":173},[167,38145,38146,38148],{"class":169,"line":205},[167,38147,7176],{"class":181},[167,38149,763],{"class":173},[167,38151,38152,38154],{"class":169,"line":160},[167,38153,1937],{"class":191},[167,38155,1905],{"class":173},[167,38157,38158,38161,38163],{"class":169,"line":238},[167,38159,38160],{"class":173},"      note: ",[167,38162,31161],{"class":201},[167,38164,393],{"class":173},[167,38166,38167],{"class":169,"line":243},[167,38168,24370],{"class":173},[167,38170,38171],{"class":169,"line":261},[167,38172,398],{"class":173},[167,38174,38175],{"class":169,"line":273},[167,38176,4419],{"class":173},[167,38178,38179,38182],{"class":169,"line":279},[167,38180,38181],{"class":181},"    saveDraft",[167,38183,763],{"class":173},[167,38185,38186,38188,38190,38192,38194,38196,38198],{"class":169,"line":289},[167,38187,20442],{"class":173},[167,38189,2611],{"class":181},[167,38191,229],{"class":173},[167,38193,38053],{"class":201},[167,38195,1025],{"class":173},[167,38197,4927],{"class":219},[167,38199,38200],{"class":173},".note);\n",[167,38202,38203],{"class":169,"line":294},[167,38204,755],{"class":173},[167,38206,38207],{"class":169,"line":304},[167,38208,398],{"class":173},[167,38210,38211],{"class":169,"line":313},[167,38212,24148],{"class":173},[167,38214,38215,38217,38219],{"class":169,"line":161},[167,38216,282],{"class":173},[167,38218,178],{"class":177},[167,38220,185],{"class":173},[167,38222,38223],{"class":169,"line":335},[167,38224,209],{"emptyLinePlaceholder":208},[167,38226,38227,38229,38231],{"class":169,"line":341},[167,38228,174],{"class":173},[167,38230,299],{"class":177},[167,38232,185],{"class":173},[167,38234,38236,38238,38240,38242,38244,38246,38248,38250,38252,38254],{"class":38235,"line":489},[169,213],[167,38237,307],{"class":173},[167,38239,38088],{"class":177},[167,38241,2653],{"class":181},[167,38243,267],{"class":173},[167,38245,38095],{"class":201},[167,38247,38098],{"class":181},[167,38249,267],{"class":173},[167,38251,38103],{"class":201},[167,38253,31789],{"class":31788},[167,38255,185],{"class":173},[167,38257,38258,38260,38262],{"class":169,"line":495},[167,38259,282],{"class":173},[167,38261,299],{"class":177},[167,38263,185],{"class":173},[3087,38265,38267],{"id":38266},"_4-evento-personalizado-desde-un-componente-hijo","4) Evento personalizado desde un componente hijo",[154,38269,38272],{"className":156,"code":38270,"filename":3260,"highlights":38271,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport TaskForm from \".\u002FTaskForm.vue\";\n\nfunction handleSave(taskTitle: string) {\n  console.log(\"Nueva tarea:\", taskTitle);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskForm @save=\"handleSave\" \u002F>\n\u003C\u002Ftemplate>\n",[160,289],[87,38273,38274,38290,38304,38308,38327,38341,38345,38353,38357,38365,38383],{"__ignoreMap":163},[167,38275,38276,38278,38280,38282,38284,38286,38288],{"class":169,"line":170},[167,38277,174],{"class":173},[167,38279,178],{"class":177},[167,38281,182],{"class":181},[167,38283,1050],{"class":181},[167,38285,267],{"class":173},[167,38287,1055],{"class":201},[167,38289,185],{"class":173},[167,38291,38292,38294,38297,38299,38302],{"class":169,"line":188},[167,38293,192],{"class":191},[167,38295,38296],{"class":173}," TaskForm ",[167,38298,198],{"class":191},[167,38300,38301],{"class":201}," \".\u002FTaskForm.vue\"",[167,38303,24044],{"class":173},[167,38305,38306],{"class":169,"line":205},[167,38307,209],{"emptyLinePlaceholder":208},[167,38309,38311,38313,38316,38318,38321,38323,38325],{"class":38310,"line":160},[169,213],[167,38312,246],{"class":191},[167,38314,38315],{"class":181}," handleSave",[167,38317,229],{"class":173},[167,38319,38320],{"class":254},"taskTitle",[167,38322,583],{"class":191},[167,38324,586],{"class":219},[167,38326,258],{"class":173},[167,38328,38329,38331,38333,38335,38338],{"class":169,"line":238},[167,38330,2608],{"class":173},[167,38332,2611],{"class":181},[167,38334,229],{"class":173},[167,38336,38337],{"class":201},"\"Nueva tarea:\"",[167,38339,38340],{"class":173},", taskTitle);\n",[167,38342,38343],{"class":169,"line":243},[167,38344,276],{"class":173},[167,38346,38347,38349,38351],{"class":169,"line":261},[167,38348,282],{"class":173},[167,38350,178],{"class":177},[167,38352,185],{"class":173},[167,38354,38355],{"class":169,"line":273},[167,38356,209],{"emptyLinePlaceholder":208},[167,38358,38359,38361,38363],{"class":169,"line":279},[167,38360,174],{"class":173},[167,38362,299],{"class":177},[167,38364,185],{"class":173},[167,38366,38368,38370,38373,38376,38378,38381],{"class":38367,"line":289},[169,213],[167,38369,307],{"class":173},[167,38371,38372],{"class":177},"TaskForm",[167,38374,38375],{"class":181}," @save",[167,38377,267],{"class":173},[167,38379,38380],{"class":201},"\"handleSave\"",[167,38382,5325],{"class":173},[167,38384,38385,38387,38389],{"class":169,"line":294},[167,38386,282],{"class":173},[167,38388,299],{"class":177},[167,38390,185],{"class":173},[154,38392,38395],{"className":156,"code":38393,"filename":3973,"highlights":38394,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport TaskForm from \".\u002FTaskForm.vue\";\n\nexport default {\n  components: { TaskForm },\n  methods: {\n    handleSave(taskTitle) {\n      console.log(\"Nueva tarea:\", taskTitle);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskForm @save=\"handleSave\" \u002F>\n\u003C\u002Ftemplate>\n",[243,161],[87,38396,38397,38411,38423,38427,38435,38440,38445,38456,38468,38472,38476,38480,38488,38492,38501,38515],{"__ignoreMap":163},[167,38398,38399,38401,38403,38405,38407,38409],{"class":169,"line":170},[167,38400,174],{"class":173},[167,38402,178],{"class":177},[167,38404,1050],{"class":181},[167,38406,267],{"class":173},[167,38408,1055],{"class":201},[167,38410,185],{"class":173},[167,38412,38413,38415,38417,38419,38421],{"class":169,"line":188},[167,38414,192],{"class":191},[167,38416,38296],{"class":173},[167,38418,198],{"class":191},[167,38420,38301],{"class":201},[167,38422,24044],{"class":173},[167,38424,38425],{"class":169,"line":205},[167,38426,209],{"emptyLinePlaceholder":208},[167,38428,38429,38431,38433],{"class":169,"line":160},[167,38430,608],{"class":191},[167,38432,3991],{"class":191},[167,38434,1905],{"class":173},[167,38436,38437],{"class":169,"line":238},[167,38438,38439],{"class":173},"  components: { TaskForm },\n",[167,38441,38443],{"class":38442,"line":243},[169,213],[167,38444,4419],{"class":173},[167,38446,38447,38450,38452,38454],{"class":169,"line":261},[167,38448,38449],{"class":181},"    handleSave",[167,38451,229],{"class":173},[167,38453,38320],{"class":254},[167,38455,258],{"class":173},[167,38457,38458,38460,38462,38464,38466],{"class":169,"line":273},[167,38459,20442],{"class":173},[167,38461,2611],{"class":181},[167,38463,229],{"class":173},[167,38465,38337],{"class":201},[167,38467,38340],{"class":173},[167,38469,38470],{"class":169,"line":279},[167,38471,755],{"class":173},[167,38473,38474],{"class":169,"line":289},[167,38475,398],{"class":173},[167,38477,38478],{"class":169,"line":294},[167,38479,24148],{"class":173},[167,38481,38482,38484,38486],{"class":169,"line":304},[167,38483,282],{"class":173},[167,38485,178],{"class":177},[167,38487,185],{"class":173},[167,38489,38490],{"class":169,"line":313},[167,38491,209],{"emptyLinePlaceholder":208},[167,38493,38495,38497,38499],{"class":38494,"line":161},[169,213],[167,38496,174],{"class":173},[167,38498,299],{"class":177},[167,38500,185],{"class":173},[167,38502,38503,38505,38507,38509,38511,38513],{"class":169,"line":335},[167,38504,307],{"class":173},[167,38506,38372],{"class":177},[167,38508,38375],{"class":181},[167,38510,267],{"class":173},[167,38512,38380],{"class":201},[167,38514,5325],{"class":173},[167,38516,38517,38519,38521],{"class":169,"line":341},[167,38518,282],{"class":173},[167,38520,299],{"class":177},[167,38522,185],{"class":173},[22,38524,8027],{"id":8026},[15,38526,38527],{},"Componente de lista de tareas con:",[33,38529,38530,38536,38541],{},[36,38531,38532,38535],{},[87,38533,38534],{},"@submit.prevent"," para crear tareas.",[36,38537,38538,38540],{},[87,38539,30630],{}," para marcar como completada.",[36,38542,38543,38546],{},[87,38544,38545],{},"@keydown.enter"," para envío rápido.",[154,38548,38550],{"className":156,"code":38549,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = {\n  id: number;\n  title: string;\n  done: boolean;\n};\n\nconst draft = ref(\"\");\nconst tasks = ref\u003CTask[]>([]);\n\nconst remaining = computed(() => tasks.value.filter((task) => !task.done).length);\n\nfunction addTask() {\n  const title = draft.value.trim();\n  if (!title) return;\n\n  tasks.value.push({\n    id: Date.now(),\n    title,\n    done: false,\n  });\n  draft.value = \"\";\n}\n\nfunction toggleTask(id: number) {\n  const task = tasks.value.find((item) => item.id === id);\n  if (!task) return;\n  task.done = !task.done;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Tareas\u003C\u002Fh2>\n    \u003Cp>Pendientes: {{ remaining }}\u003C\u002Fp>\n\n    \u003Cform @submit.prevent=\"addTask\">\n      \u003Cinput\n        v-model=\"draft\"\n        type=\"text\"\n        placeholder=\"Escribe una tarea y pulsa Enter\"\n        @keydown.enter.prevent=\"addTask\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Agregar\u003C\u002Fbutton>\n    \u003C\u002Fform>\n\n    \u003Cul>\n      \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n        \u003Cbutton @click=\"toggleTask(task.id)\">\n          {{ task.done ? \"Reabrir\" : \"Completar\" }}\n        \u003C\u002Fbutton>\n        \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n          {{ task.title }}\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,38551,38552,38568,38580,38584,38594,38604,38614,38624,38628,38632,38649,38666,38670,38706,38710,38719,38735,38750,38754,38763,38771,38776,38785,38790,38802,38806,38810,38826,38853,38867,38878,38882,38890,38894,38902,38910,38923,38936,38940,38955,38961,38971,38980,38990,39000,39005,39024,39032,39036,39044,39066,39081,39086,39094,39110,39115,39123,39131,39139,39147],{"__ignoreMap":163},[167,38553,38554,38556,38558,38560,38562,38564,38566],{"class":169,"line":170},[167,38555,174],{"class":173},[167,38557,178],{"class":177},[167,38559,182],{"class":181},[167,38561,1050],{"class":181},[167,38563,267],{"class":173},[167,38565,1055],{"class":201},[167,38567,185],{"class":173},[167,38569,38570,38572,38574,38576,38578],{"class":169,"line":188},[167,38571,192],{"class":191},[167,38573,1805],{"class":173},[167,38575,198],{"class":191},[167,38577,24041],{"class":201},[167,38579,24044],{"class":173},[167,38581,38582],{"class":169,"line":205},[167,38583,209],{"emptyLinePlaceholder":208},[167,38585,38586,38588,38590,38592],{"class":169,"line":160},[167,38587,569],{"class":191},[167,38589,11605],{"class":181},[167,38591,223],{"class":191},[167,38593,1905],{"class":173},[167,38595,38596,38598,38600,38602],{"class":169,"line":238},[167,38597,6505],{"class":254},[167,38599,583],{"class":191},[167,38601,8493],{"class":219},[167,38603,24044],{"class":173},[167,38605,38606,38608,38610,38612],{"class":169,"line":243},[167,38607,11622],{"class":254},[167,38609,583],{"class":191},[167,38611,586],{"class":219},[167,38613,24044],{"class":173},[167,38615,38616,38618,38620,38622],{"class":169,"line":261},[167,38617,11631],{"class":254},[167,38619,583],{"class":191},[167,38621,28416],{"class":219},[167,38623,24044],{"class":173},[167,38625,38626],{"class":169,"line":273},[167,38627,24148],{"class":173},[167,38629,38630],{"class":169,"line":279},[167,38631,209],{"emptyLinePlaceholder":208},[167,38633,38634,38636,38639,38641,38643,38645,38647],{"class":169,"line":289},[167,38635,216],{"class":191},[167,38637,38638],{"class":219}," draft",[167,38640,223],{"class":191},[167,38642,226],{"class":181},[167,38644,229],{"class":173},[167,38646,31161],{"class":201},[167,38648,24169],{"class":173},[167,38650,38651,38653,38655,38657,38659,38661,38663],{"class":169,"line":294},[167,38652,216],{"class":191},[167,38654,3368],{"class":219},[167,38656,223],{"class":191},[167,38658,226],{"class":181},[167,38660,174],{"class":173},[167,38662,11659],{"class":181},[167,38664,38665],{"class":173},"[]>([]);\n",[167,38667,38668],{"class":169,"line":304},[167,38669,209],{"emptyLinePlaceholder":208},[167,38671,38672,38674,38677,38679,38681,38683,38685,38687,38689,38691,38693,38695,38697,38699,38702,38704],{"class":169,"line":313},[167,38673,216],{"class":191},[167,38675,38676],{"class":219}," remaining",[167,38678,223],{"class":191},[167,38680,1898],{"class":181},[167,38682,1493],{"class":173},[167,38684,639],{"class":191},[167,38686,3451],{"class":173},[167,38688,8252],{"class":181},[167,38690,1918],{"class":173},[167,38692,5075],{"class":254},[167,38694,693],{"class":173},[167,38696,639],{"class":191},[167,38698,5625],{"class":191},[167,38700,38701],{"class":173},"task.done).",[167,38703,15756],{"class":219},[167,38705,24169],{"class":173},[167,38707,38708],{"class":169,"line":161},[167,38709,209],{"emptyLinePlaceholder":208},[167,38711,38712,38714,38717],{"class":169,"line":335},[167,38713,246],{"class":191},[167,38715,38716],{"class":181}," addTask",[167,38718,763],{"class":173},[167,38720,38721,38723,38726,38728,38731,38733],{"class":169,"line":341},[167,38722,1443],{"class":191},[167,38724,38725],{"class":219}," title",[167,38727,223],{"class":191},[167,38729,38730],{"class":173}," draft.value.",[167,38732,2500],{"class":181},[167,38734,25307],{"class":173},[167,38736,38737,38739,38741,38743,38746,38748],{"class":169,"line":489},[167,38738,2544],{"class":191},[167,38740,2526],{"class":173},[167,38742,6641],{"class":191},[167,38744,38745],{"class":173},"title) ",[167,38747,24238],{"class":191},[167,38749,24044],{"class":173},[167,38751,38752],{"class":169,"line":495},[167,38753,209],{"emptyLinePlaceholder":208},[167,38755,38756,38759,38761],{"class":169,"line":501},[167,38757,38758],{"class":173},"  tasks.value.",[167,38760,15723],{"class":181},[167,38762,372],{"class":173},[167,38764,38765,38767,38769],{"class":169,"line":512},[167,38766,15730],{"class":173},[167,38768,15733],{"class":181},[167,38770,15736],{"class":173},[167,38772,38773],{"class":169,"line":781},[167,38774,38775],{"class":173},"    title,\n",[167,38777,38778,38781,38783],{"class":169,"line":786},[167,38779,38780],{"class":173},"    done: ",[167,38782,3392],{"class":219},[167,38784,393],{"class":173},[167,38786,38787],{"class":169,"line":2678},[167,38788,38789],{"class":173},"  });\n",[167,38791,38792,38795,38797,38800],{"class":169,"line":2692},[167,38793,38794],{"class":173},"  draft.value ",[167,38796,267],{"class":191},[167,38798,38799],{"class":201}," \"\"",[167,38801,24044],{"class":173},[167,38803,38804],{"class":169,"line":3575},[167,38805,276],{"class":173},[167,38807,38808],{"class":169,"line":5028},[167,38809,209],{"emptyLinePlaceholder":208},[167,38811,38812,38814,38816,38818,38820,38822,38824],{"class":169,"line":5037},[167,38813,246],{"class":191},[167,38815,8484],{"class":181},[167,38817,229],{"class":173},[167,38819,580],{"class":254},[167,38821,583],{"class":191},[167,38823,8493],{"class":219},[167,38825,258],{"class":173},[167,38827,38828,38830,38832,38834,38836,38838,38840,38842,38844,38846,38848,38850],{"class":169,"line":5046},[167,38829,1443],{"class":191},[167,38831,3446],{"class":219},[167,38833,223],{"class":191},[167,38835,3451],{"class":173},[167,38837,3454],{"class":181},[167,38839,1918],{"class":173},[167,38841,1926],{"class":254},[167,38843,693],{"class":173},[167,38845,639],{"class":191},[167,38847,3465],{"class":173},[167,38849,2550],{"class":191},[167,38851,38852],{"class":173}," id);\n",[167,38854,38855,38857,38859,38861,38863,38865],{"class":169,"line":6756},[167,38856,2544],{"class":191},[167,38858,2526],{"class":173},[167,38860,6641],{"class":191},[167,38862,8534],{"class":173},[167,38864,24238],{"class":191},[167,38866,24044],{"class":173},[167,38868,38869,38871,38873,38875],{"class":169,"line":6778},[167,38870,8545],{"class":173},[167,38872,267],{"class":191},[167,38874,5625],{"class":191},[167,38876,38877],{"class":173},"task.done;\n",[167,38879,38880],{"class":169,"line":6783},[167,38881,276],{"class":173},[167,38883,38884,38886,38888],{"class":169,"line":6788},[167,38885,282],{"class":173},[167,38887,178],{"class":177},[167,38889,185],{"class":173},[167,38891,38892],{"class":169,"line":6793},[167,38893,209],{"emptyLinePlaceholder":208},[167,38895,38896,38898,38900],{"class":169,"line":6809},[167,38897,174],{"class":173},[167,38899,299],{"class":177},[167,38901,185],{"class":173},[167,38903,38904,38906,38908],{"class":169,"line":6824},[167,38905,307],{"class":173},[167,38907,10117],{"class":177},[167,38909,185],{"class":173},[167,38911,38912,38914,38916,38919,38921],{"class":169,"line":6829},[167,38913,1257],{"class":173},[167,38915,22],{"class":177},[167,38917,38918],{"class":173},">Tareas\u003C\u002F",[167,38920,22],{"class":177},[167,38922,185],{"class":173},[167,38924,38925,38927,38929,38932,38934],{"class":169,"line":6836},[167,38926,1257],{"class":173},[167,38928,15],{"class":177},[167,38930,38931],{"class":173},">Pendientes: {{ remaining }}\u003C\u002F",[167,38933,15],{"class":177},[167,38935,185],{"class":173},[167,38937,38938],{"class":169,"line":6845},[167,38939,209],{"emptyLinePlaceholder":208},[167,38941,38942,38944,38946,38948,38950,38953],{"class":169,"line":6854},[167,38943,1257],{"class":173},[167,38945,4305],{"class":177},[167,38947,4308],{"class":181},[167,38949,267],{"class":173},[167,38951,38952],{"class":201},"\"addTask\"",[167,38954,185],{"class":173},[167,38956,38957,38959],{"class":169,"line":6861},[167,38958,1268],{"class":173},[167,38960,17481],{"class":177},[167,38962,38963,38966,38968],{"class":169,"line":6879},[167,38964,38965],{"class":181},"        v-model",[167,38967,267],{"class":173},[167,38969,38970],{"class":201},"\"draft\"\n",[167,38972,38973,38976,38978],{"class":169,"line":6884},[167,38974,38975],{"class":181},"        type",[167,38977,267],{"class":173},[167,38979,35283],{"class":201},[167,38981,38982,38985,38987],{"class":169,"line":6889},[167,38983,38984],{"class":181},"        placeholder",[167,38986,267],{"class":173},[167,38988,38989],{"class":201},"\"Escribe una tarea y pulsa Enter\"\n",[167,38991,38992,38995,38997],{"class":169,"line":6898},[167,38993,38994],{"class":181},"        @keydown.enter.prevent",[167,38996,267],{"class":173},[167,38998,38999],{"class":201},"\"addTask\"\n",[167,39001,39002],{"class":169,"line":6903},[167,39003,39004],{"class":173},"      \u002F>\n",[167,39006,39007,39009,39011,39013,39015,39017,39020,39022],{"class":169,"line":6912},[167,39008,1268],{"class":173},[167,39010,507],{"class":177},[167,39012,1174],{"class":181},[167,39014,267],{"class":173},[167,39016,4348],{"class":201},[167,39018,39019],{"class":173},">Agregar\u003C\u002F",[167,39021,507],{"class":177},[167,39023,185],{"class":173},[167,39025,39026,39028,39030],{"class":169,"line":6928},[167,39027,1292],{"class":173},[167,39029,4305],{"class":177},[167,39031,185],{"class":173},[167,39033,39034],{"class":169,"line":6949},[167,39035,209],{"emptyLinePlaceholder":208},[167,39037,39038,39040,39042],{"class":169,"line":6954},[167,39039,1257],{"class":173},[167,39041,33],{"class":177},[167,39043,185],{"class":173},[167,39045,39046,39048,39050,39052,39054,39057,39059,39061,39064],{"class":169,"line":6975},[167,39047,1268],{"class":173},[167,39049,36],{"class":177},[167,39051,18706],{"class":181},[167,39053,267],{"class":173},[167,39055,39056],{"class":201},"\"task in tasks\"",[167,39058,10307],{"class":181},[167,39060,267],{"class":173},[167,39062,39063],{"class":201},"\"task.id\"",[167,39065,185],{"class":173},[167,39067,39068,39070,39072,39074,39076,39079],{"class":169,"line":6989},[167,39069,32516],{"class":173},[167,39071,507],{"class":177},[167,39073,1182],{"class":181},[167,39075,267],{"class":173},[167,39077,39078],{"class":201},"\"toggleTask(task.id)\"",[167,39080,185],{"class":173},[167,39082,39083],{"class":169,"line":7003},[167,39084,39085],{"class":173},"          {{ task.done ? \"Reabrir\" : \"Completar\" }}\n",[167,39087,39088,39090,39092],{"class":169,"line":7017},[167,39089,32564],{"class":173},[167,39091,507],{"class":177},[167,39093,185],{"class":173},[167,39095,39096,39098,39100,39103,39105,39108],{"class":169,"line":7026},[167,39097,32516],{"class":173},[167,39099,167],{"class":177},[167,39101,39102],{"class":181}," :style",[167,39104,267],{"class":173},[167,39106,39107],{"class":201},"\"{ textDecoration: task.done ? 'line-through' : 'none' }\"",[167,39109,185],{"class":173},[167,39111,39112],{"class":169,"line":7031},[167,39113,39114],{"class":173},"          {{ task.title }}\n",[167,39116,39117,39119,39121],{"class":169,"line":7048},[167,39118,32564],{"class":173},[167,39120,167],{"class":177},[167,39122,185],{"class":173},[167,39124,39125,39127,39129],{"class":169,"line":7057},[167,39126,10170],{"class":173},[167,39128,36],{"class":177},[167,39130,185],{"class":173},[167,39132,39133,39135,39137],{"class":169,"line":7555},[167,39134,1292],{"class":173},[167,39136,33],{"class":177},[167,39138,185],{"class":173},[167,39140,39141,39143,39145],{"class":169,"line":7560},[167,39142,504],{"class":173},[167,39144,10117],{"class":177},[167,39146,185],{"class":173},[167,39148,39149,39151,39153],{"class":169,"line":7579},[167,39150,282],{"class":173},[167,39152,299],{"class":177},[167,39154,185],{"class":173},[154,39156,39158],{"className":156,"code":39157,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      draft: \"\",\n      tasks: [],\n    };\n  },\n  computed: {\n    remaining() {\n      return this.tasks.filter((task) => !task.done).length;\n    },\n  },\n  methods: {\n    addTask() {\n      const title = this.draft.trim();\n      if (!title) return;\n\n      this.tasks.push({\n        id: Date.now(),\n        title,\n        done: false,\n      });\n      this.draft = \"\";\n    },\n    toggleTask(id) {\n      const task = this.tasks.find((item) => item.id === id);\n      if (!task) return;\n      task.done = !task.done;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Tareas\u003C\u002Fh2>\n    \u003Cp>Pendientes: {{ remaining }}\u003C\u002Fp>\n\n    \u003Cform @submit.prevent=\"addTask\">\n      \u003Cinput\n        v-model=\"draft\"\n        type=\"text\"\n        placeholder=\"Escribe una tarea y pulsa Enter\"\n        @keydown.enter.prevent=\"addTask\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Agregar\u003C\u002Fbutton>\n    \u003C\u002Fform>\n\n    \u003Cul>\n      \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n        \u003Cbutton @click=\"toggleTask(task.id)\">\n          {{ task.done ? \"Reabrir\" : \"Completar\" }}\n        \u003C\u002Fbutton>\n        \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n          {{ task.title }}\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,39159,39160,39174,39182,39188,39194,39203,39207,39211,39215,39219,39226,39252,39256,39260,39264,39271,39288,39302,39306,39316,39324,39329,39338,39342,39355,39359,39369,39397,39411,39421,39425,39429,39433,39441,39445,39453,39461,39473,39485,39489,39503,39509,39517,39525,39533,39541,39545,39563,39571,39575,39583,39603,39617,39621,39629,39643,39647,39655,39663,39671,39679],{"__ignoreMap":163},[167,39161,39162,39164,39166,39168,39170,39172],{"class":169,"line":170},[167,39163,174],{"class":173},[167,39165,178],{"class":177},[167,39167,1050],{"class":181},[167,39169,267],{"class":173},[167,39171,1055],{"class":201},[167,39173,185],{"class":173},[167,39175,39176,39178,39180],{"class":169,"line":188},[167,39177,608],{"class":191},[167,39179,3991],{"class":191},[167,39181,1905],{"class":173},[167,39183,39184,39186],{"class":169,"line":205},[167,39185,7176],{"class":181},[167,39187,763],{"class":173},[167,39189,39190,39192],{"class":169,"line":160},[167,39191,1937],{"class":191},[167,39193,1905],{"class":173},[167,39195,39196,39199,39201],{"class":169,"line":238},[167,39197,39198],{"class":173},"      draft: ",[167,39200,31161],{"class":201},[167,39202,393],{"class":173},[167,39204,39205],{"class":169,"line":243},[167,39206,12571],{"class":173},[167,39208,39209],{"class":169,"line":261},[167,39210,24370],{"class":173},[167,39212,39213],{"class":169,"line":273},[167,39214,398],{"class":173},[167,39216,39217],{"class":169,"line":279},[167,39218,8755],{"class":173},[167,39220,39221,39224],{"class":169,"line":289},[167,39222,39223],{"class":181},"    remaining",[167,39225,763],{"class":173},[167,39227,39228,39230,39232,39234,39236,39238,39240,39242,39244,39246,39248,39250],{"class":169,"line":294},[167,39229,8767],{"class":191},[167,39231,7351],{"class":219},[167,39233,8772],{"class":173},[167,39235,8252],{"class":181},[167,39237,1918],{"class":173},[167,39239,5075],{"class":254},[167,39241,693],{"class":173},[167,39243,639],{"class":191},[167,39245,5625],{"class":191},[167,39247,38701],{"class":173},[167,39249,15756],{"class":219},[167,39251,24044],{"class":173},[167,39253,39254],{"class":169,"line":304},[167,39255,755],{"class":173},[167,39257,39258],{"class":169,"line":313},[167,39259,398],{"class":173},[167,39261,39262],{"class":169,"line":161},[167,39263,4419],{"class":173},[167,39265,39266,39269],{"class":169,"line":335},[167,39267,39268],{"class":181},"    addTask",[167,39270,763],{"class":173},[167,39272,39273,39275,39277,39279,39281,39284,39286],{"class":169,"line":341},[167,39274,4435],{"class":191},[167,39276,38725],{"class":219},[167,39278,223],{"class":191},[167,39280,7351],{"class":219},[167,39282,39283],{"class":173},".draft.",[167,39285,2500],{"class":181},[167,39287,25307],{"class":173},[167,39289,39290,39292,39294,39296,39298,39300],{"class":169,"line":489},[167,39291,7261],{"class":191},[167,39293,2526],{"class":173},[167,39295,6641],{"class":191},[167,39297,38745],{"class":173},[167,39299,24238],{"class":191},[167,39301,24044],{"class":173},[167,39303,39304],{"class":169,"line":495},[167,39305,209],{"emptyLinePlaceholder":208},[167,39307,39308,39310,39312,39314],{"class":169,"line":501},[167,39309,741],{"class":219},[167,39311,8772],{"class":173},[167,39313,15723],{"class":181},[167,39315,372],{"class":173},[167,39317,39318,39320,39322],{"class":169,"line":512},[167,39319,16160],{"class":173},[167,39321,15733],{"class":181},[167,39323,15736],{"class":173},[167,39325,39326],{"class":169,"line":781},[167,39327,39328],{"class":173},"        title,\n",[167,39330,39331,39334,39336],{"class":169,"line":786},[167,39332,39333],{"class":173},"        done: ",[167,39335,3392],{"class":219},[167,39337,393],{"class":173},[167,39339,39340],{"class":169,"line":2678},[167,39341,36408],{"class":173},[167,39343,39344,39346,39349,39351,39353],{"class":169,"line":2692},[167,39345,741],{"class":219},[167,39347,39348],{"class":173},".draft ",[167,39350,267],{"class":191},[167,39352,38799],{"class":201},[167,39354,24044],{"class":173},[167,39356,39357],{"class":169,"line":3575},[167,39358,755],{"class":173},[167,39360,39361,39363,39365,39367],{"class":169,"line":5028},[167,39362,9000],{"class":181},[167,39364,229],{"class":173},[167,39366,580],{"class":254},[167,39368,258],{"class":173},[167,39370,39371,39373,39375,39377,39379,39381,39383,39385,39387,39389,39391,39393,39395],{"class":169,"line":5037},[167,39372,4435],{"class":191},[167,39374,3446],{"class":219},[167,39376,223],{"class":191},[167,39378,7351],{"class":219},[167,39380,8772],{"class":173},[167,39382,3454],{"class":181},[167,39384,1918],{"class":173},[167,39386,1926],{"class":254},[167,39388,693],{"class":173},[167,39390,639],{"class":191},[167,39392,3465],{"class":173},[167,39394,2550],{"class":191},[167,39396,38852],{"class":173},[167,39398,39399,39401,39403,39405,39407,39409],{"class":169,"line":5046},[167,39400,7261],{"class":191},[167,39402,2526],{"class":173},[167,39404,6641],{"class":191},[167,39406,8534],{"class":173},[167,39408,24238],{"class":191},[167,39410,24044],{"class":173},[167,39412,39413,39415,39417,39419],{"class":169,"line":6756},[167,39414,9057],{"class":173},[167,39416,267],{"class":191},[167,39418,5625],{"class":191},[167,39420,38877],{"class":173},[167,39422,39423],{"class":169,"line":6778},[167,39424,755],{"class":173},[167,39426,39427],{"class":169,"line":6783},[167,39428,398],{"class":173},[167,39430,39431],{"class":169,"line":6788},[167,39432,24148],{"class":173},[167,39434,39435,39437,39439],{"class":169,"line":6793},[167,39436,282],{"class":173},[167,39438,178],{"class":177},[167,39440,185],{"class":173},[167,39442,39443],{"class":169,"line":6809},[167,39444,209],{"emptyLinePlaceholder":208},[167,39446,39447,39449,39451],{"class":169,"line":6824},[167,39448,174],{"class":173},[167,39450,299],{"class":177},[167,39452,185],{"class":173},[167,39454,39455,39457,39459],{"class":169,"line":6829},[167,39456,307],{"class":173},[167,39458,10117],{"class":177},[167,39460,185],{"class":173},[167,39462,39463,39465,39467,39469,39471],{"class":169,"line":6836},[167,39464,1257],{"class":173},[167,39466,22],{"class":177},[167,39468,38918],{"class":173},[167,39470,22],{"class":177},[167,39472,185],{"class":173},[167,39474,39475,39477,39479,39481,39483],{"class":169,"line":6845},[167,39476,1257],{"class":173},[167,39478,15],{"class":177},[167,39480,38931],{"class":173},[167,39482,15],{"class":177},[167,39484,185],{"class":173},[167,39486,39487],{"class":169,"line":6854},[167,39488,209],{"emptyLinePlaceholder":208},[167,39490,39491,39493,39495,39497,39499,39501],{"class":169,"line":6861},[167,39492,1257],{"class":173},[167,39494,4305],{"class":177},[167,39496,4308],{"class":181},[167,39498,267],{"class":173},[167,39500,38952],{"class":201},[167,39502,185],{"class":173},[167,39504,39505,39507],{"class":169,"line":6879},[167,39506,1268],{"class":173},[167,39508,17481],{"class":177},[167,39510,39511,39513,39515],{"class":169,"line":6884},[167,39512,38965],{"class":181},[167,39514,267],{"class":173},[167,39516,38970],{"class":201},[167,39518,39519,39521,39523],{"class":169,"line":6889},[167,39520,38975],{"class":181},[167,39522,267],{"class":173},[167,39524,35283],{"class":201},[167,39526,39527,39529,39531],{"class":169,"line":6898},[167,39528,38984],{"class":181},[167,39530,267],{"class":173},[167,39532,38989],{"class":201},[167,39534,39535,39537,39539],{"class":169,"line":6903},[167,39536,38994],{"class":181},[167,39538,267],{"class":173},[167,39540,38999],{"class":201},[167,39542,39543],{"class":169,"line":6912},[167,39544,39004],{"class":173},[167,39546,39547,39549,39551,39553,39555,39557,39559,39561],{"class":169,"line":6928},[167,39548,1268],{"class":173},[167,39550,507],{"class":177},[167,39552,1174],{"class":181},[167,39554,267],{"class":173},[167,39556,4348],{"class":201},[167,39558,39019],{"class":173},[167,39560,507],{"class":177},[167,39562,185],{"class":173},[167,39564,39565,39567,39569],{"class":169,"line":6949},[167,39566,1292],{"class":173},[167,39568,4305],{"class":177},[167,39570,185],{"class":173},[167,39572,39573],{"class":169,"line":6954},[167,39574,209],{"emptyLinePlaceholder":208},[167,39576,39577,39579,39581],{"class":169,"line":6975},[167,39578,1257],{"class":173},[167,39580,33],{"class":177},[167,39582,185],{"class":173},[167,39584,39585,39587,39589,39591,39593,39595,39597,39599,39601],{"class":169,"line":6989},[167,39586,1268],{"class":173},[167,39588,36],{"class":177},[167,39590,18706],{"class":181},[167,39592,267],{"class":173},[167,39594,39056],{"class":201},[167,39596,10307],{"class":181},[167,39598,267],{"class":173},[167,39600,39063],{"class":201},[167,39602,185],{"class":173},[167,39604,39605,39607,39609,39611,39613,39615],{"class":169,"line":7003},[167,39606,32516],{"class":173},[167,39608,507],{"class":177},[167,39610,1182],{"class":181},[167,39612,267],{"class":173},[167,39614,39078],{"class":201},[167,39616,185],{"class":173},[167,39618,39619],{"class":169,"line":7017},[167,39620,39085],{"class":173},[167,39622,39623,39625,39627],{"class":169,"line":7026},[167,39624,32564],{"class":173},[167,39626,507],{"class":177},[167,39628,185],{"class":173},[167,39630,39631,39633,39635,39637,39639,39641],{"class":169,"line":7031},[167,39632,32516],{"class":173},[167,39634,167],{"class":177},[167,39636,39102],{"class":181},[167,39638,267],{"class":173},[167,39640,39107],{"class":201},[167,39642,185],{"class":173},[167,39644,39645],{"class":169,"line":7048},[167,39646,39114],{"class":173},[167,39648,39649,39651,39653],{"class":169,"line":7057},[167,39650,32564],{"class":173},[167,39652,167],{"class":177},[167,39654,185],{"class":173},[167,39656,39657,39659,39661],{"class":169,"line":7555},[167,39658,10170],{"class":173},[167,39660,36],{"class":177},[167,39662,185],{"class":173},[167,39664,39665,39667,39669],{"class":169,"line":7560},[167,39666,1292],{"class":173},[167,39668,33],{"class":177},[167,39670,185],{"class":173},[167,39672,39673,39675,39677],{"class":169,"line":7579},[167,39674,504],{"class":173},[167,39676,10117],{"class":177},[167,39678,185],{"class":173},[167,39680,39681,39683,39685],{"class":169,"line":7592},[167,39682,282],{"class":173},[167,39684,299],{"class":177},[167,39686,185],{"class":173},[22,39688,7678],{"id":7677},[15,39690,39691,39693],{},[87,39692,23871],{}," es la directiva que convierte plantillas estáticas en interfaces interactivas.\nSi la usas con handlers claros y modificadores correctos, reduces bugs y mejoras legibilidad.",[15,39695,39696],{},"Puntos clave para recordar:",[33,39698,39699,39707,39710,39720],{},[36,39700,1582,39701,39704,39705,1679],{},[87,39702,39703],{},"@"," como shorthand de ",[87,39706,23871],{},[36,39708,39709],{},"Prefiere funciones del script sobre expresiones complejas inline.",[36,39711,39712,39713,1025,39715,1025,39717,39719],{},"Aprovecha modificadores (",[87,39714,36905],{},[87,39716,36908],{},[87,39718,36911],{},") cuando sean necesarios.",[36,39721,39722],{},"Mantén consistencia entre Composition API y Options API para facilitar mantenimiento.",[924,39724,39725],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":39727},[39728,39729,39730,39731,39732,39740,39747,39748],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":39733},[39734,39735,39737,39738],{"id":37000,"depth":205,"text":37001},{"id":37075,"depth":205,"text":39736},"2) Olvidar .prevent en formularios",{"id":37149,"depth":205,"text":37150},{"id":37258,"depth":205,"text":39739},"4) Usar event sin declararlo",{"id":7996,"depth":188,"text":7997,"children":39741},[39742,39743,39745,39746],{"id":37334,"depth":205,"text":37335},{"id":37550,"depth":205,"text":39744},"2) Submit de formulario con .prevent",{"id":37973,"depth":205,"text":37974},{"id":38266,"depth":205,"text":38267},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771022043\u002Fdirectives-vue-v-on-guide_hwtqel.png","Imagen temporal para portada del articulo sobre v-on en Vue","2026-02-13","Aprende a usar v-on en Vue con eventos del DOM, modificadores, atajos de teclado y buenas practicas para mantener componentes claros y mantenibles.",{"updatedAt":39754,"coverCaption":23656,"author":946,"keywords":39755},"2026-02-13T10:30:00-05:00",[3258,23871,39756,39757,3260,3973],"eventos","event modifiers","\u002Fblog\u002Fdirectives-vue-v-on-guide.es",[39760],{"headline":39761,"author":39762,"datePublished":39754,"@type":961},"Directiva v-on en Vue: guia practica para manejar eventos",{"name":946,"@type":959},{"title":36754,"description":39752},"blog\u002Fdirectives-vue-v-on-guide.es",[39766,39767,39768],{"tag":26466,"color":26467},{"tag":1644,"color":1645},{"tag":5424,"color":5425},"WAEXmV8fTD0ITkOvmyn62Tdvu5vw7wpMPNxDrqfLAt4",{"id":39771,"title":39772,"body":39773,"cover":42726,"coverAlt":42727,"date":42728,"description":42729,"draft":940,"extension":941,"lab":942,"locale":943,"meta":42730,"navigation":208,"path":42736,"schemaOrg":42737,"seo":42741,"series":26460,"seriesDescription":26461,"seriesOrder":160,"seriesTitle":26462,"slug":942,"stem":42742,"tags":42743,"__hash__":42748},"blog\u002Fblog\u002Fdirectives-vue-v-bind-guide.es.md","Directivas en Vue: v-bind",{"type":8,"value":39774,"toc":42695},[39775,39780,39785,39790,39792,39797,39811,39816,39818,39821,39856,39859,39888,39893,39938,39940,39945,39963,39965,39967,39983,39985,39992,39994,40029,40031,40079,40086,40096,40098,40165,40170,40174,40179,40204,40214,40221,40226,40228,40234,40350,40465,40471,40579,40690,40698,40850,40993,41000,41127,41248,41254,41257,41377,41490,41498,41643,41793,41800,41804,41810,42230,42650,42652,42657,42660,42686,42692],[11,39776,26483,39778],{"id":39777},"directivas-en-vue-v-bind",[87,39779,23868],{},[15,39781,39782,39784],{},[87,39783,23868],{}," conecta atributos o props del template con datos reactivos.\nSi el estado cambia, el atributo también cambia.",[15,39786,30440,39787,39789],{},[87,39788,23868],{}," es una de las piezas más importantes porque te permite pasar de HTML estático a UI dinámica sin manipular el DOM manualmente.",[22,39791,26503],{"id":26502},[15,39793,21844,39794,39796],{},[87,39795,23868],{},", terminarías escribiendo lógica imperativa para:",[33,39798,39799,39802,39805,39808],{},[36,39800,39801],{},"Activar\u002Fdesactivar botones.",[36,39803,39804],{},"Cambiar clases según estado.",[36,39806,39807],{},"Renderizar enlaces o imágenes dinámicas,",[36,39809,39810],{},"Pasar datos de un componente padre a uno hijo.",[15,39812,3810,39813,39815],{},[87,39814,23868],{},", todo eso se vuelve declarativo.\nDescribes la relación entre estado y UI, y Vue se encarga del resto.",[22,39817,30500],{"id":30499},[15,39819,39820],{},"La forma base es:",[154,39822,39824],{"className":156,"code":39823,"filename":15284,"language":162,"meta":163,"style":163},"\u003Ca v-bind:href=\"url\">Ir al sitio\u003C\u002Fa>\n",[87,39825,39826],{"__ignoreMap":163},[167,39827,39828,39830,39832,39835,39837,39840,39842,39844,39847,39849,39852,39854],{"class":169,"line":170},[167,39829,174],{"class":173},[167,39831,19092],{"class":177},[167,39833,39834],{"class":181}," v-bind",[167,39836,583],{"class":173},[167,39838,39839],{"class":181},"href",[167,39841,267],{"class":173},[167,39843,5080],{"class":201},[167,39845,39846],{"class":173},"url",[167,39848,5080],{"class":201},[167,39850,39851],{"class":173},">Ir al sitio\u003C\u002F",[167,39853,19092],{"class":177},[167,39855,185],{"class":173},[15,39857,39858],{},"Shorthand recomendado:",[154,39860,39862],{"className":156,"code":39861,"filename":15284,"language":162,"meta":163,"style":163},"\u003Ca :href=\"url\">Ir al sitio\u003C\u002Fa>\n",[87,39863,39864],{"__ignoreMap":163},[167,39865,39866,39868,39870,39872,39874,39876,39878,39880,39882,39884,39886],{"class":169,"line":170},[167,39867,174],{"class":173},[167,39869,19092],{"class":177},[167,39871,5312],{"class":173},[167,39873,39839],{"class":181},[167,39875,267],{"class":173},[167,39877,5080],{"class":201},[167,39879,39846],{"class":173},[167,39881,5080],{"class":201},[167,39883,39851],{"class":173},[167,39885,19092],{"class":177},[167,39887,185],{"class":173},[15,39889,39890,39892],{},[87,39891,23868],{}," funciona con:",[33,39894,39895,39911,39917,39926,39932],{},[36,39896,39897,39898,1025,39900,1025,39903,1025,39906,1025,39908,39910],{},"Atributos HTML (",[87,39899,39839],{},[87,39901,39902],{},"src",[87,39904,39905],{},"disabled",[87,39907,580],{},[87,39909,29272],{},"),",[36,39912,39913,39914,39910],{},"Props de componentes (",[87,39915,39916],{},":user=\"currentUser\"",[36,39918,39919,39920,1028,39923,39925],{},"Bindings especiales para ",[87,39921,39922],{},"class",[87,39924,924],{},",",[36,39927,39928,39929,39910],{},"Argumentos dinámicos (",[87,39930,39931],{},":[attrName]=\"value\"",[36,39933,39934,39935,4270],{},"Spread-like bindings (",[87,39936,39937],{},"v-bind=\"attrsObject\"",[22,39939,6322],{"id":6321},[15,39941,1582,39942,39944],{},[87,39943,23868],{}," cuando necesites:",[33,39946,39947,39950,39957,39960],{},[36,39948,39949],{},"Valores dinámicos en atributos.",[36,39951,39952,39953,11227,39955,4270],{},"Cambiar presentación según estado (",[87,39954,39922],{},[87,39956,924],{},[36,39958,39959],{},"Pasar datos reactivos a componentes hijos.",[36,39961,39962],{},"Construir componentes reutilizables con props configurables.",[22,39964,6349],{"id":6348},[15,39966,6355],{},[33,39968,39969,39972,39977],{},[36,39970,39971],{},"El valor es fijo y nunca cambia (puedes dejar HTML estático).",[36,39973,39974,39975,4270],{},"Metes lógica compleja directamente en el template (mejor mover a ",[87,39976,1661],{},[36,39978,39979,39980,39982],{},"Usas ",[87,39981,23868],{}," como sustituto de validación o seguridad (eso no lo resuelve el template).",[22,39984,3085],{"id":3084},[3087,39986,39988,39989,39991],{"id":39987},"_1-olvidar-que-v-bind-evalúa-javascript","1) Olvidar que ",[87,39990,23868],{}," evalúa JavaScript",[15,39993,30738],{},[154,39995,39998],{"className":156,"code":39996,"filename":39997,"language":162,"meta":163,"style":163},"\u003Cimg :src=\"\u002Fimages\u002Favatar.png\" \u002F>\n","Incorrecto",[87,39999,40000],{"__ignoreMap":163},[167,40001,40002,40004,40007,40009,40011,40013,40015,40017,40020,40022,40025,40027],{"class":169,"line":170},[167,40003,174],{"class":173},[167,40005,40006],{"class":177},"img",[167,40008,5312],{"class":173},[167,40010,39902],{"class":181},[167,40012,267],{"class":173},[167,40014,5080],{"class":201},[167,40016,21857],{"class":191},[167,40018,40019],{"class":173},"images",[167,40021,21857],{"class":191},[167,40023,40024],{"class":173},"avatar.png",[167,40026,5080],{"class":201},[167,40028,5325],{"class":173},[15,40030,34281],{},[154,40032,40035],{"className":156,"code":40033,"filename":40034,"language":162,"meta":163,"style":163},"\u003Cimg src=\"\u002Fimages\u002Favatar.png\" \u002F>\n\u003C!-- o -->\n\u003Cimg :src=\"avatarUrl\" \u002F>\n","Correcto",[87,40036,40037,40053,40058],{"__ignoreMap":163},[167,40038,40039,40041,40043,40046,40048,40051],{"class":169,"line":170},[167,40040,174],{"class":173},[167,40042,40006],{"class":177},[167,40044,40045],{"class":181}," src",[167,40047,267],{"class":173},[167,40049,40050],{"class":201},"\"\u002Fimages\u002Favatar.png\"",[167,40052,5325],{"class":173},[167,40054,40055],{"class":169,"line":188},[167,40056,40057],{"class":18662},"\u003C!-- o -->\n",[167,40059,40060,40062,40064,40066,40068,40070,40072,40075,40077],{"class":169,"line":205},[167,40061,174],{"class":173},[167,40063,40006],{"class":177},[167,40065,5312],{"class":173},[167,40067,39902],{"class":181},[167,40069,267],{"class":173},[167,40071,5080],{"class":201},[167,40073,40074],{"class":173},"avatarUrl",[167,40076,5080],{"class":201},[167,40078,5325],{"class":173},[15,40080,40081,40082,40085],{},"Si usas ",[87,40083,40084],{},":src",", Vue espera una expresión JS válida.",[3087,40087,40089,40090,90,40093],{"id":40088},"_2-poner-demasiada-lógica-inline-en-class-o-style","2) Poner demasiada lógica inline en ",[87,40091,40092],{},":class",[87,40094,40095],{},":style",[15,40097,30738],{},[154,40099,40101],{"className":156,"code":40100,"filename":34162,"language":162,"meta":163,"style":163},"\u003Cbutton :class=\"isAdmin && isActive && !isLocked ? 'btn btn-primary' : isLocked ? 'btn btn-muted' : 'btn'\">\n  Guardar\n\u003C\u002Fbutton>\n",[87,40102,40103,40152,40157],{"__ignoreMap":163},[167,40104,40105,40107,40109,40111,40113,40115,40117,40119,40121,40124,40126,40128,40130,40132,40135,40137,40140,40142,40145,40147,40150],{"class":169,"line":170},[167,40106,174],{"class":173},[167,40108,507],{"class":177},[167,40110,5312],{"class":173},[167,40112,39922],{"class":181},[167,40114,267],{"class":173},[167,40116,5080],{"class":201},[167,40118,37175],{"class":173},[167,40120,8339],{"class":191},[167,40122,40123],{"class":173}," isActive ",[167,40125,8339],{"class":191},[167,40127,5625],{"class":191},[167,40129,37187],{"class":173},[167,40131,8316],{"class":191},[167,40133,40134],{"class":201}," 'btn btn-primary'",[167,40136,5312],{"class":191},[167,40138,40139],{"class":173}," isLocked ",[167,40141,8316],{"class":191},[167,40143,40144],{"class":201}," 'btn btn-muted'",[167,40146,5312],{"class":191},[167,40148,40149],{"class":201}," 'btn'\"",[167,40151,185],{"class":173},[167,40153,40154],{"class":169,"line":188},[167,40155,40156],{"class":173},"  Guardar\n",[167,40158,40159,40161,40163],{"class":169,"line":205},[167,40160,282],{"class":173},[167,40162,507],{"class":177},[167,40164,185],{"class":173},[15,40166,40167,40168,1679],{},"Mejor: extraer a ",[87,40169,1661],{},[3087,40171,40173],{"id":40172},"_3-confundir-atributo-html-con-prop-de-componente","3) Confundir atributo HTML con prop de componente",[15,40175,40176,40178],{},[87,40177,23868],{}," sirve para ambos, pero en componentes debes pasar la prop exacta definida por el hijo:",[154,40180,40182],{"className":156,"code":5300,"filename":40181,"language":162,"meta":163,"style":163},"Padre",[87,40183,40184],{"__ignoreMap":163},[167,40185,40186,40188,40190,40192,40194,40196,40198,40200,40202],{"class":169,"line":170},[167,40187,174],{"class":173},[167,40189,5309],{"class":177},[167,40191,5312],{"class":173},[167,40193,729],{"class":181},[167,40195,267],{"class":173},[167,40197,5080],{"class":201},[167,40199,729],{"class":173},[167,40201,5080],{"class":201},[167,40203,5325],{"class":173},[15,40205,40206,40207,40210,40211,40213],{},"Si el hijo espera ",[87,40208,40209],{},"profile"," y tú pasas ",[87,40212,729],{},", no llegará la data correcta.",[3087,40215,40217,40218,40220],{"id":40216},"_4-creer-que-v-bind-protege-datos","4) Creer que ",[87,40219,23868],{}," \"protege\" datos",[15,40222,40223,40225],{},[87,40224,23868],{}," solo refleja estado en la UI.\nNo reemplaza validación del backend ni reglas de autorización.",[22,40227,7997],{"id":7996},[3087,40229,40231,40232,6219],{"id":40230},"_1-básico-enlace-dinámico-href","1) Básico: enlace dinámico (",[87,40233,39839],{},[154,40235,40238],{"className":156,"code":40236,"filename":3260,"highlights":40237,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst docsUrl = ref(\"https:\u002F\u002Fvuejs.org\u002F\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Documentación Vue\u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[160,273],[87,40239,40240,40250,40262,40266,40285,40293,40297,40305,40342],{"__ignoreMap":163},[167,40241,40242,40244,40246,40248],{"class":169,"line":170},[167,40243,174],{"class":173},[167,40245,178],{"class":177},[167,40247,182],{"class":181},[167,40249,185],{"class":173},[167,40251,40252,40254,40256,40258,40260],{"class":169,"line":188},[167,40253,192],{"class":191},[167,40255,195],{"class":173},[167,40257,198],{"class":191},[167,40259,24041],{"class":201},[167,40261,24044],{"class":173},[167,40263,40264],{"class":169,"line":205},[167,40265,209],{"emptyLinePlaceholder":208},[167,40267,40269,40271,40274,40276,40278,40280,40283],{"class":40268,"line":160},[169,213],[167,40270,216],{"class":191},[167,40272,40273],{"class":219}," docsUrl",[167,40275,223],{"class":191},[167,40277,226],{"class":181},[167,40279,229],{"class":173},[167,40281,40282],{"class":201},"\"https:\u002F\u002Fvuejs.org\u002F\"",[167,40284,24169],{"class":173},[167,40286,40287,40289,40291],{"class":169,"line":238},[167,40288,282],{"class":173},[167,40290,178],{"class":177},[167,40292,185],{"class":173},[167,40294,40295],{"class":169,"line":243},[167,40296,209],{"emptyLinePlaceholder":208},[167,40298,40299,40301,40303],{"class":169,"line":261},[167,40300,174],{"class":173},[167,40302,299],{"class":177},[167,40304,185],{"class":173},[167,40306,40308,40310,40312,40315,40317,40320,40322,40324,40327,40330,40332,40335,40338,40340],{"class":40307,"line":273},[169,213],[167,40309,307],{"class":173},[167,40311,19092],{"class":177},[167,40313,40314],{"class":181}," :href",[167,40316,267],{"class":173},[167,40318,40319],{"class":201},"\"docsUrl\"",[167,40321,24293],{"class":181},[167,40323,267],{"class":173},[167,40325,40326],{"class":201},"\"_blank\"",[167,40328,40329],{"class":181}," rel",[167,40331,267],{"class":173},[167,40333,40334],{"class":201},"\"noopener\"",[167,40336,40337],{"class":173},">Documentación Vue\u003C\u002F",[167,40339,19092],{"class":177},[167,40341,185],{"class":173},[167,40343,40344,40346,40348],{"class":169,"line":279},[167,40345,282],{"class":173},[167,40347,299],{"class":177},[167,40349,185],{"class":173},[154,40351,40354],{"className":156,"code":40352,"filename":3973,"highlights":40353,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      docsUrl: \"https:\u002F\u002Fvuejs.org\u002F\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Documentación Vue\u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[238,304],[87,40355,40356,40364,40372,40378,40384,40394,40398,40402,40406,40414,40418,40426,40457],{"__ignoreMap":163},[167,40357,40358,40360,40362],{"class":169,"line":170},[167,40359,174],{"class":173},[167,40361,178],{"class":177},[167,40363,185],{"class":173},[167,40365,40366,40368,40370],{"class":169,"line":188},[167,40367,608],{"class":191},[167,40369,3991],{"class":191},[167,40371,1905],{"class":173},[167,40373,40374,40376],{"class":169,"line":205},[167,40375,7176],{"class":181},[167,40377,763],{"class":173},[167,40379,40380,40382],{"class":169,"line":160},[167,40381,1937],{"class":191},[167,40383,1905],{"class":173},[167,40385,40387,40390,40392],{"class":40386,"line":238},[169,213],[167,40388,40389],{"class":173},"      docsUrl: ",[167,40391,40282],{"class":201},[167,40393,393],{"class":173},[167,40395,40396],{"class":169,"line":243},[167,40397,24370],{"class":173},[167,40399,40400],{"class":169,"line":261},[167,40401,398],{"class":173},[167,40403,40404],{"class":169,"line":273},[167,40405,24148],{"class":173},[167,40407,40408,40410,40412],{"class":169,"line":279},[167,40409,282],{"class":173},[167,40411,178],{"class":177},[167,40413,185],{"class":173},[167,40415,40416],{"class":169,"line":289},[167,40417,209],{"emptyLinePlaceholder":208},[167,40419,40420,40422,40424],{"class":169,"line":294},[167,40421,174],{"class":173},[167,40423,299],{"class":177},[167,40425,185],{"class":173},[167,40427,40429,40431,40433,40435,40437,40439,40441,40443,40445,40447,40449,40451,40453,40455],{"class":40428,"line":304},[169,213],[167,40430,307],{"class":173},[167,40432,19092],{"class":177},[167,40434,40314],{"class":181},[167,40436,267],{"class":173},[167,40438,40319],{"class":201},[167,40440,24293],{"class":181},[167,40442,267],{"class":173},[167,40444,40326],{"class":201},[167,40446,40329],{"class":181},[167,40448,267],{"class":173},[167,40450,40334],{"class":201},[167,40452,40337],{"class":173},[167,40454,19092],{"class":177},[167,40456,185],{"class":173},[167,40458,40459,40461,40463],{"class":169,"line":313},[167,40460,282],{"class":173},[167,40462,299],{"class":177},[167,40464,185],{"class":173},[3087,40466,40468,40469,6219],{"id":40467},"_2-atributo-booleano-dinámico-disabled","2) Atributo booleano dinámico (",[87,40470,39905],{},[154,40472,40475],{"className":156,"code":40473,"filename":3260,"highlights":40474,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isSaving = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :disabled=\"isSaving\">\n    {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[160,273],[87,40476,40477,40487,40499,40503,40521,40529,40533,40541,40558,40563,40571],{"__ignoreMap":163},[167,40478,40479,40481,40483,40485],{"class":169,"line":170},[167,40480,174],{"class":173},[167,40482,178],{"class":177},[167,40484,182],{"class":181},[167,40486,185],{"class":173},[167,40488,40489,40491,40493,40495,40497],{"class":169,"line":188},[167,40490,192],{"class":191},[167,40492,195],{"class":173},[167,40494,198],{"class":191},[167,40496,24041],{"class":201},[167,40498,24044],{"class":173},[167,40500,40501],{"class":169,"line":205},[167,40502,209],{"emptyLinePlaceholder":208},[167,40504,40506,40508,40511,40513,40515,40517,40519],{"class":40505,"line":160},[169,213],[167,40507,216],{"class":191},[167,40509,40510],{"class":219}," isSaving",[167,40512,223],{"class":191},[167,40514,226],{"class":181},[167,40516,229],{"class":173},[167,40518,3392],{"class":219},[167,40520,24169],{"class":173},[167,40522,40523,40525,40527],{"class":169,"line":238},[167,40524,282],{"class":173},[167,40526,178],{"class":177},[167,40528,185],{"class":173},[167,40530,40531],{"class":169,"line":243},[167,40532,209],{"emptyLinePlaceholder":208},[167,40534,40535,40537,40539],{"class":169,"line":261},[167,40536,174],{"class":173},[167,40538,299],{"class":177},[167,40540,185],{"class":173},[167,40542,40544,40546,40548,40551,40553,40556],{"class":40543,"line":273},[169,213],[167,40545,307],{"class":173},[167,40547,507],{"class":177},[167,40549,40550],{"class":181}," :disabled",[167,40552,267],{"class":173},[167,40554,40555],{"class":201},"\"isSaving\"",[167,40557,185],{"class":173},[167,40559,40560],{"class":169,"line":279},[167,40561,40562],{"class":173},"    {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n",[167,40564,40565,40567,40569],{"class":169,"line":289},[167,40566,504],{"class":173},[167,40568,507],{"class":177},[167,40570,185],{"class":173},[167,40572,40573,40575,40577],{"class":169,"line":294},[167,40574,282],{"class":173},[167,40576,299],{"class":177},[167,40578,185],{"class":173},[154,40580,40583],{"className":156,"code":40581,"filename":3973,"highlights":40582,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isSaving: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :disabled=\"isSaving\">\n    {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[238,304],[87,40584,40585,40593,40601,40607,40613,40623,40627,40631,40635,40643,40647,40655,40670,40674,40682],{"__ignoreMap":163},[167,40586,40587,40589,40591],{"class":169,"line":170},[167,40588,174],{"class":173},[167,40590,178],{"class":177},[167,40592,185],{"class":173},[167,40594,40595,40597,40599],{"class":169,"line":188},[167,40596,608],{"class":191},[167,40598,3991],{"class":191},[167,40600,1905],{"class":173},[167,40602,40603,40605],{"class":169,"line":205},[167,40604,7176],{"class":181},[167,40606,763],{"class":173},[167,40608,40609,40611],{"class":169,"line":160},[167,40610,1937],{"class":191},[167,40612,1905],{"class":173},[167,40614,40616,40619,40621],{"class":40615,"line":238},[169,213],[167,40617,40618],{"class":173},"      isSaving: ",[167,40620,3392],{"class":219},[167,40622,393],{"class":173},[167,40624,40625],{"class":169,"line":243},[167,40626,24370],{"class":173},[167,40628,40629],{"class":169,"line":261},[167,40630,398],{"class":173},[167,40632,40633],{"class":169,"line":273},[167,40634,24148],{"class":173},[167,40636,40637,40639,40641],{"class":169,"line":279},[167,40638,282],{"class":173},[167,40640,178],{"class":177},[167,40642,185],{"class":173},[167,40644,40645],{"class":169,"line":289},[167,40646,209],{"emptyLinePlaceholder":208},[167,40648,40649,40651,40653],{"class":169,"line":294},[167,40650,174],{"class":173},[167,40652,299],{"class":177},[167,40654,185],{"class":173},[167,40656,40658,40660,40662,40664,40666,40668],{"class":40657,"line":304},[169,213],[167,40659,307],{"class":173},[167,40661,507],{"class":177},[167,40663,40550],{"class":181},[167,40665,267],{"class":173},[167,40667,40555],{"class":201},[167,40669,185],{"class":173},[167,40671,40672],{"class":169,"line":313},[167,40673,40562],{"class":173},[167,40675,40676,40678,40680],{"class":169,"line":161},[167,40677,504],{"class":173},[167,40679,507],{"class":177},[167,40681,185],{"class":173},[167,40683,40684,40686,40688],{"class":169,"line":335},[167,40685,282],{"class":173},[167,40687,299],{"class":177},[167,40689,185],{"class":173},[3087,40691,40693,40694,40697],{"id":40692},"_3-v-bindclass-con-objeto-patrón-recomendado","3) ",[87,40695,40696],{},"v-bind:class"," con objeto (patrón recomendado)",[154,40699,40702],{"className":156,"code":40700,"filename":3260,"highlights":40701,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isActive = ref(true);\nconst hasError = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp\n    :class=\"{\n      'text-success': isActive,\n      'text-danger': hasError,\n      'text-muted': !isActive && !hasError,\n    }\"\n  >\n    Estado del sistema\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[160,289,294,304,313,161],[87,40703,40704,40714,40726,40730,40747,40763,40771,40775,40783,40790,40801,40807,40813,40819,40825,40829,40834,40842],{"__ignoreMap":163},[167,40705,40706,40708,40710,40712],{"class":169,"line":170},[167,40707,174],{"class":173},[167,40709,178],{"class":177},[167,40711,182],{"class":181},[167,40713,185],{"class":173},[167,40715,40716,40718,40720,40722,40724],{"class":169,"line":188},[167,40717,192],{"class":191},[167,40719,195],{"class":173},[167,40721,198],{"class":191},[167,40723,24041],{"class":201},[167,40725,24044],{"class":173},[167,40727,40728],{"class":169,"line":205},[167,40729,209],{"emptyLinePlaceholder":208},[167,40731,40733,40735,40737,40739,40741,40743,40745],{"class":40732,"line":160},[169,213],[167,40734,216],{"class":191},[167,40736,5786],{"class":219},[167,40738,223],{"class":191},[167,40740,226],{"class":181},[167,40742,229],{"class":173},[167,40744,390],{"class":219},[167,40746,24169],{"class":173},[167,40748,40749,40751,40753,40755,40757,40759,40761],{"class":169,"line":238},[167,40750,216],{"class":191},[167,40752,9486],{"class":219},[167,40754,223],{"class":191},[167,40756,226],{"class":181},[167,40758,229],{"class":173},[167,40760,3392],{"class":219},[167,40762,24169],{"class":173},[167,40764,40765,40767,40769],{"class":169,"line":243},[167,40766,282],{"class":173},[167,40768,178],{"class":177},[167,40770,185],{"class":173},[167,40772,40773],{"class":169,"line":261},[167,40774,209],{"emptyLinePlaceholder":208},[167,40776,40777,40779,40781],{"class":169,"line":273},[167,40778,174],{"class":173},[167,40780,299],{"class":177},[167,40782,185],{"class":173},[167,40784,40785,40787],{"class":169,"line":279},[167,40786,307],{"class":173},[167,40788,40789],{"class":177},"p\n",[167,40791,40793,40796,40798],{"class":40792,"line":289},[169,213],[167,40794,40795],{"class":181},"    :class",[167,40797,267],{"class":173},[167,40799,40800],{"class":201},"\"{\n",[167,40802,40804],{"class":40803,"line":294},[169,213],[167,40805,40806],{"class":201},"      'text-success': isActive,\n",[167,40808,40810],{"class":40809,"line":304},[169,213],[167,40811,40812],{"class":201},"      'text-danger': hasError,\n",[167,40814,40816],{"class":40815,"line":313},[169,213],[167,40817,40818],{"class":201},"      'text-muted': !isActive && !hasError,\n",[167,40820,40822],{"class":40821,"line":161},[169,213],[167,40823,40824],{"class":201},"    }\"\n",[167,40826,40827],{"class":169,"line":335},[167,40828,492],{"class":173},[167,40830,40831],{"class":169,"line":341},[167,40832,40833],{"class":173},"    Estado del sistema\n",[167,40835,40836,40838,40840],{"class":169,"line":489},[167,40837,504],{"class":173},[167,40839,15],{"class":177},[167,40841,185],{"class":173},[167,40843,40844,40846,40848],{"class":169,"line":495},[167,40845,282],{"class":173},[167,40847,299],{"class":177},[167,40849,185],{"class":173},[154,40851,40854],{"className":156,"code":40852,"filename":3973,"highlights":40853,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isActive: true,\n      hasError: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp\n    :class=\"{\n      'text-success': isActive,\n      'text-danger': hasError,\n      'text-muted': !isActive && !hasError,\n    }\"\n  >\n    Estado del sistema\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[238,313,161,335,341,489],[87,40855,40856,40864,40872,40878,40884,40894,40902,40906,40910,40914,40922,40926,40934,40941,40950,40955,40960,40965,40969,40973,40977,40985],{"__ignoreMap":163},[167,40857,40858,40860,40862],{"class":169,"line":170},[167,40859,174],{"class":173},[167,40861,178],{"class":177},[167,40863,185],{"class":173},[167,40865,40866,40868,40870],{"class":169,"line":188},[167,40867,608],{"class":191},[167,40869,3991],{"class":191},[167,40871,1905],{"class":173},[167,40873,40874,40876],{"class":169,"line":205},[167,40875,7176],{"class":181},[167,40877,763],{"class":173},[167,40879,40880,40882],{"class":169,"line":160},[167,40881,1937],{"class":191},[167,40883,1905],{"class":173},[167,40885,40887,40890,40892],{"class":40886,"line":238},[169,213],[167,40888,40889],{"class":173},"      isActive: ",[167,40891,390],{"class":219},[167,40893,393],{"class":173},[167,40895,40896,40898,40900],{"class":169,"line":243},[167,40897,10652],{"class":173},[167,40899,3392],{"class":219},[167,40901,393],{"class":173},[167,40903,40904],{"class":169,"line":261},[167,40905,24370],{"class":173},[167,40907,40908],{"class":169,"line":273},[167,40909,398],{"class":173},[167,40911,40912],{"class":169,"line":279},[167,40913,24148],{"class":173},[167,40915,40916,40918,40920],{"class":169,"line":289},[167,40917,282],{"class":173},[167,40919,178],{"class":177},[167,40921,185],{"class":173},[167,40923,40924],{"class":169,"line":294},[167,40925,209],{"emptyLinePlaceholder":208},[167,40927,40928,40930,40932],{"class":169,"line":304},[167,40929,174],{"class":173},[167,40931,299],{"class":177},[167,40933,185],{"class":173},[167,40935,40937,40939],{"class":40936,"line":313},[169,213],[167,40938,307],{"class":173},[167,40940,40789],{"class":177},[167,40942,40944,40946,40948],{"class":40943,"line":161},[169,213],[167,40945,40795],{"class":181},[167,40947,267],{"class":173},[167,40949,40800],{"class":201},[167,40951,40953],{"class":40952,"line":335},[169,213],[167,40954,40806],{"class":201},[167,40956,40958],{"class":40957,"line":341},[169,213],[167,40959,40812],{"class":201},[167,40961,40963],{"class":40962,"line":489},[169,213],[167,40964,40818],{"class":201},[167,40966,40967],{"class":169,"line":495},[167,40968,40824],{"class":201},[167,40970,40971],{"class":169,"line":501},[167,40972,492],{"class":173},[167,40974,40975],{"class":169,"line":512},[167,40976,40833],{"class":173},[167,40978,40979,40981,40983],{"class":169,"line":781},[167,40980,504],{"class":173},[167,40982,15],{"class":177},[167,40984,185],{"class":173},[167,40986,40987,40989,40991],{"class":169,"line":786},[167,40988,282],{"class":173},[167,40990,299],{"class":177},[167,40992,185],{"class":173},[3087,40994,32604,40996,40999],{"id":40995},"_4-v-bindstyle-dinámico-con-objeto",[87,40997,40998],{},"v-bind:style"," dinámico con objeto",[154,41001,41004],{"className":156,"code":41002,"filename":3260,"highlights":41003,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst fontSize = ref(16);\nconst textColor = ref(\"#1D5BA1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n    Texto con estilo reactivo\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[160,238,279],[87,41005,41006,41016,41028,41032,41051,41070,41078,41082,41090,41106,41111,41119],{"__ignoreMap":163},[167,41007,41008,41010,41012,41014],{"class":169,"line":170},[167,41009,174],{"class":173},[167,41011,178],{"class":177},[167,41013,182],{"class":181},[167,41015,185],{"class":173},[167,41017,41018,41020,41022,41024,41026],{"class":169,"line":188},[167,41019,192],{"class":191},[167,41021,195],{"class":173},[167,41023,198],{"class":191},[167,41025,24041],{"class":201},[167,41027,24044],{"class":173},[167,41029,41030],{"class":169,"line":205},[167,41031,209],{"emptyLinePlaceholder":208},[167,41033,41035,41037,41040,41042,41044,41046,41049],{"class":41034,"line":160},[169,213],[167,41036,216],{"class":191},[167,41038,41039],{"class":219}," fontSize",[167,41041,223],{"class":191},[167,41043,226],{"class":181},[167,41045,229],{"class":173},[167,41047,41048],{"class":219},"16",[167,41050,24169],{"class":173},[167,41052,41054,41056,41059,41061,41063,41065,41068],{"class":41053,"line":238},[169,213],[167,41055,216],{"class":191},[167,41057,41058],{"class":219}," textColor",[167,41060,223],{"class":191},[167,41062,226],{"class":181},[167,41064,229],{"class":173},[167,41066,41067],{"class":201},"\"#1D5BA1\"",[167,41069,24169],{"class":173},[167,41071,41072,41074,41076],{"class":169,"line":243},[167,41073,282],{"class":173},[167,41075,178],{"class":177},[167,41077,185],{"class":173},[167,41079,41080],{"class":169,"line":261},[167,41081,209],{"emptyLinePlaceholder":208},[167,41083,41084,41086,41088],{"class":169,"line":273},[167,41085,174],{"class":173},[167,41087,299],{"class":177},[167,41089,185],{"class":173},[167,41091,41093,41095,41097,41099,41101,41104],{"class":41092,"line":279},[169,213],[167,41094,307],{"class":173},[167,41096,15],{"class":177},[167,41098,39102],{"class":181},[167,41100,267],{"class":173},[167,41102,41103],{"class":201},"\"{ fontSize: `${fontSize}px`, color: textColor }\"",[167,41105,185],{"class":173},[167,41107,41108],{"class":169,"line":289},[167,41109,41110],{"class":173},"    Texto con estilo reactivo\n",[167,41112,41113,41115,41117],{"class":169,"line":294},[167,41114,504],{"class":173},[167,41116,15],{"class":177},[167,41118,185],{"class":173},[167,41120,41121,41123,41125],{"class":169,"line":304},[167,41122,282],{"class":173},[167,41124,299],{"class":177},[167,41126,185],{"class":173},[154,41128,41131],{"className":156,"code":41129,"filename":3973,"highlights":41130,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      fontSize: 16,\n      textColor: \"#1D5BA1\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n    Texto con estilo reactivo\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[238,243,313],[87,41132,41133,41141,41149,41155,41161,41171,41181,41185,41189,41193,41201,41205,41213,41228,41232,41240],{"__ignoreMap":163},[167,41134,41135,41137,41139],{"class":169,"line":170},[167,41136,174],{"class":173},[167,41138,178],{"class":177},[167,41140,185],{"class":173},[167,41142,41143,41145,41147],{"class":169,"line":188},[167,41144,608],{"class":191},[167,41146,3991],{"class":191},[167,41148,1905],{"class":173},[167,41150,41151,41153],{"class":169,"line":205},[167,41152,7176],{"class":181},[167,41154,763],{"class":173},[167,41156,41157,41159],{"class":169,"line":160},[167,41158,1937],{"class":191},[167,41160,1905],{"class":173},[167,41162,41164,41167,41169],{"class":41163,"line":238},[169,213],[167,41165,41166],{"class":173},"      fontSize: ",[167,41168,41048],{"class":219},[167,41170,393],{"class":173},[167,41172,41174,41177,41179],{"class":41173,"line":243},[169,213],[167,41175,41176],{"class":173},"      textColor: ",[167,41178,41067],{"class":201},[167,41180,393],{"class":173},[167,41182,41183],{"class":169,"line":261},[167,41184,24370],{"class":173},[167,41186,41187],{"class":169,"line":273},[167,41188,398],{"class":173},[167,41190,41191],{"class":169,"line":279},[167,41192,24148],{"class":173},[167,41194,41195,41197,41199],{"class":169,"line":289},[167,41196,282],{"class":173},[167,41198,178],{"class":177},[167,41200,185],{"class":173},[167,41202,41203],{"class":169,"line":294},[167,41204,209],{"emptyLinePlaceholder":208},[167,41206,41207,41209,41211],{"class":169,"line":304},[167,41208,174],{"class":173},[167,41210,299],{"class":177},[167,41212,185],{"class":173},[167,41214,41216,41218,41220,41222,41224,41226],{"class":41215,"line":313},[169,213],[167,41217,307],{"class":173},[167,41219,15],{"class":177},[167,41221,39102],{"class":181},[167,41223,267],{"class":173},[167,41225,41103],{"class":201},[167,41227,185],{"class":173},[167,41229,41230],{"class":169,"line":161},[167,41231,41110],{"class":173},[167,41233,41234,41236,41238],{"class":169,"line":335},[167,41235,504],{"class":173},[167,41237,15],{"class":177},[167,41239,185],{"class":173},[167,41241,41242,41244,41246],{"class":169,"line":341},[167,41243,282],{"class":173},[167,41245,299],{"class":177},[167,41247,185],{"class":173},[3087,41249,41251,41252],{"id":41250},"_5-argumento-dinámico-attrnamevalue","5) Argumento dinámico: ",[87,41253,39931],{},[15,41255,41256],{},"Útil cuando el nombre del atributo también depende del estado.",[154,41258,41261],{"className":156,"code":41259,"filename":3260,"highlights":41260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst attrName = ref(\"title\");\nconst attrValue = ref(\"Tooltip dinámico\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[160,238,279],[87,41262,41263,41273,41285,41289,41308,41327,41335,41339,41347,41369],{"__ignoreMap":163},[167,41264,41265,41267,41269,41271],{"class":169,"line":170},[167,41266,174],{"class":173},[167,41268,178],{"class":177},[167,41270,182],{"class":181},[167,41272,185],{"class":173},[167,41274,41275,41277,41279,41281,41283],{"class":169,"line":188},[167,41276,192],{"class":191},[167,41278,195],{"class":173},[167,41280,198],{"class":191},[167,41282,24041],{"class":201},[167,41284,24044],{"class":173},[167,41286,41287],{"class":169,"line":205},[167,41288,209],{"emptyLinePlaceholder":208},[167,41290,41292,41294,41297,41299,41301,41303,41306],{"class":41291,"line":160},[169,213],[167,41293,216],{"class":191},[167,41295,41296],{"class":219}," attrName",[167,41298,223],{"class":191},[167,41300,226],{"class":181},[167,41302,229],{"class":173},[167,41304,41305],{"class":201},"\"title\"",[167,41307,24169],{"class":173},[167,41309,41311,41313,41316,41318,41320,41322,41325],{"class":41310,"line":238},[169,213],[167,41312,216],{"class":191},[167,41314,41315],{"class":219}," attrValue",[167,41317,223],{"class":191},[167,41319,226],{"class":181},[167,41321,229],{"class":173},[167,41323,41324],{"class":201},"\"Tooltip dinámico\"",[167,41326,24169],{"class":173},[167,41328,41329,41331,41333],{"class":169,"line":243},[167,41330,282],{"class":173},[167,41332,178],{"class":177},[167,41334,185],{"class":173},[167,41336,41337],{"class":169,"line":261},[167,41338,209],{"emptyLinePlaceholder":208},[167,41340,41341,41343,41345],{"class":169,"line":273},[167,41342,174],{"class":173},[167,41344,299],{"class":177},[167,41346,185],{"class":173},[167,41348,41350,41352,41354,41357,41359,41362,41365,41367],{"class":41349,"line":279},[169,213],[167,41351,307],{"class":173},[167,41353,507],{"class":177},[167,41355,41356],{"class":181}," :[attrName]",[167,41358,267],{"class":173},[167,41360,41361],{"class":201},"\"attrValue\"",[167,41363,41364],{"class":173},">Hover me\u003C\u002F",[167,41366,507],{"class":177},[167,41368,185],{"class":173},[167,41370,41371,41373,41375],{"class":169,"line":289},[167,41372,282],{"class":173},[167,41374,299],{"class":177},[167,41376,185],{"class":173},[154,41378,41381],{"className":156,"code":41379,"filename":3973,"highlights":41380,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      attrName: \"title\",\n      attrValue: \"Tooltip dinámico\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[238,243,313],[87,41382,41383,41391,41399,41405,41411,41421,41431,41435,41439,41443,41451,41455,41463,41482],{"__ignoreMap":163},[167,41384,41385,41387,41389],{"class":169,"line":170},[167,41386,174],{"class":173},[167,41388,178],{"class":177},[167,41390,185],{"class":173},[167,41392,41393,41395,41397],{"class":169,"line":188},[167,41394,608],{"class":191},[167,41396,3991],{"class":191},[167,41398,1905],{"class":173},[167,41400,41401,41403],{"class":169,"line":205},[167,41402,7176],{"class":181},[167,41404,763],{"class":173},[167,41406,41407,41409],{"class":169,"line":160},[167,41408,1937],{"class":191},[167,41410,1905],{"class":173},[167,41412,41414,41417,41419],{"class":41413,"line":238},[169,213],[167,41415,41416],{"class":173},"      attrName: ",[167,41418,41305],{"class":201},[167,41420,393],{"class":173},[167,41422,41424,41427,41429],{"class":41423,"line":243},[169,213],[167,41425,41426],{"class":173},"      attrValue: ",[167,41428,41324],{"class":201},[167,41430,393],{"class":173},[167,41432,41433],{"class":169,"line":261},[167,41434,24370],{"class":173},[167,41436,41437],{"class":169,"line":273},[167,41438,398],{"class":173},[167,41440,41441],{"class":169,"line":279},[167,41442,24148],{"class":173},[167,41444,41445,41447,41449],{"class":169,"line":289},[167,41446,282],{"class":173},[167,41448,178],{"class":177},[167,41450,185],{"class":173},[167,41452,41453],{"class":169,"line":294},[167,41454,209],{"emptyLinePlaceholder":208},[167,41456,41457,41459,41461],{"class":169,"line":304},[167,41458,174],{"class":173},[167,41460,299],{"class":177},[167,41462,185],{"class":173},[167,41464,41466,41468,41470,41472,41474,41476,41478,41480],{"class":41465,"line":313},[169,213],[167,41467,307],{"class":173},[167,41469,507],{"class":177},[167,41471,41356],{"class":181},[167,41473,267],{"class":173},[167,41475,41361],{"class":201},[167,41477,41364],{"class":173},[167,41479,507],{"class":177},[167,41481,185],{"class":173},[167,41483,41484,41486,41488],{"class":169,"line":161},[167,41485,282],{"class":173},[167,41487,299],{"class":177},[167,41489,185],{"class":173},[3087,41491,41493,41494,41497],{"id":41492},"_6-v-bindobj-para-pasar-múltiples-atributos-o-props","6) ",[87,41495,41496],{},"v-bind=\"obj\""," para pasar múltiples atributos o props",[154,41499,41502],{"className":156,"code":41500,"filename":3260,"highlights":41501,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst inputAttrs = ref({\n  id: \"email\",\n  type: \"email\",\n  placeholder: \"tu@email.com\",\n  autocomplete: \"email\",\n  required: true,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-bind=\"inputAttrs\" \u002F>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,279,289,161],[87,41503,41504,41514,41526,41530,41544,41554,41564,41574,41584,41594,41599,41607,41611,41619,41635],{"__ignoreMap":163},[167,41505,41506,41508,41510,41512],{"class":169,"line":170},[167,41507,174],{"class":173},[167,41509,178],{"class":177},[167,41511,182],{"class":181},[167,41513,185],{"class":173},[167,41515,41516,41518,41520,41522,41524],{"class":169,"line":188},[167,41517,192],{"class":191},[167,41519,195],{"class":173},[167,41521,198],{"class":191},[167,41523,24041],{"class":201},[167,41525,24044],{"class":173},[167,41527,41528],{"class":169,"line":205},[167,41529,209],{"emptyLinePlaceholder":208},[167,41531,41533,41535,41538,41540,41542],{"class":41532,"line":160},[169,213],[167,41534,216],{"class":191},[167,41536,41537],{"class":219}," inputAttrs",[167,41539,223],{"class":191},[167,41541,226],{"class":181},[167,41543,372],{"class":173},[167,41545,41547,41550,41552],{"class":41546,"line":238},[169,213],[167,41548,41549],{"class":173},"  id: ",[167,41551,37707],{"class":201},[167,41553,393],{"class":173},[167,41555,41557,41560,41562],{"class":41556,"line":243},[169,213],[167,41558,41559],{"class":173},"  type: ",[167,41561,37707],{"class":201},[167,41563,393],{"class":173},[167,41565,41567,41570,41572],{"class":41566,"line":261},[169,213],[167,41568,41569],{"class":173},"  placeholder: ",[167,41571,37720],{"class":201},[167,41573,393],{"class":173},[167,41575,41577,41580,41582],{"class":41576,"line":273},[169,213],[167,41578,41579],{"class":173},"  autocomplete: ",[167,41581,37707],{"class":201},[167,41583,393],{"class":173},[167,41585,41587,41590,41592],{"class":41586,"line":279},[169,213],[167,41588,41589],{"class":173},"  required: ",[167,41591,390],{"class":219},[167,41593,393],{"class":173},[167,41595,41597],{"class":41596,"line":289},[169,213],[167,41598,27327],{"class":173},[167,41600,41601,41603,41605],{"class":169,"line":294},[167,41602,282],{"class":173},[167,41604,178],{"class":177},[167,41606,185],{"class":173},[167,41608,41609],{"class":169,"line":304},[167,41610,209],{"emptyLinePlaceholder":208},[167,41612,41613,41615,41617],{"class":169,"line":313},[167,41614,174],{"class":173},[167,41616,299],{"class":177},[167,41618,185],{"class":173},[167,41620,41622,41624,41626,41628,41630,41633],{"class":41621,"line":161},[169,213],[167,41623,307],{"class":173},[167,41625,2650],{"class":177},[167,41627,39834],{"class":181},[167,41629,267],{"class":173},[167,41631,41632],{"class":201},"\"inputAttrs\"",[167,41634,5325],{"class":173},[167,41636,41637,41639,41641],{"class":169,"line":335},[167,41638,282],{"class":173},[167,41640,299],{"class":177},[167,41642,185],{"class":173},[154,41644,41647],{"className":156,"code":41645,"filename":3973,"highlights":41646,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      inputAttrs: {\n        id: \"email\",\n        type: \"email\",\n        placeholder: \"tu@email.com\",\n        autocomplete: \"email\",\n        required: true,\n      },\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-bind=\"inputAttrs\" \u002F>\n\u003C\u002Ftemplate>\n",[238,243,261,273,279,289,294,495],[87,41648,41649,41657,41665,41671,41677,41683,41693,41703,41713,41723,41733,41738,41742,41746,41750,41758,41762,41770,41785],{"__ignoreMap":163},[167,41650,41651,41653,41655],{"class":169,"line":170},[167,41652,174],{"class":173},[167,41654,178],{"class":177},[167,41656,185],{"class":173},[167,41658,41659,41661,41663],{"class":169,"line":188},[167,41660,608],{"class":191},[167,41662,3991],{"class":191},[167,41664,1905],{"class":173},[167,41666,41667,41669],{"class":169,"line":205},[167,41668,7176],{"class":181},[167,41670,763],{"class":173},[167,41672,41673,41675],{"class":169,"line":160},[167,41674,1937],{"class":191},[167,41676,1905],{"class":173},[167,41678,41680],{"class":41679,"line":238},[169,213],[167,41681,41682],{"class":173},"      inputAttrs: {\n",[167,41684,41686,41689,41691],{"class":41685,"line":243},[169,213],[167,41687,41688],{"class":173},"        id: ",[167,41690,37707],{"class":201},[167,41692,393],{"class":173},[167,41694,41696,41699,41701],{"class":41695,"line":261},[169,213],[167,41697,41698],{"class":173},"        type: ",[167,41700,37707],{"class":201},[167,41702,393],{"class":173},[167,41704,41706,41709,41711],{"class":41705,"line":273},[169,213],[167,41707,41708],{"class":173},"        placeholder: ",[167,41710,37720],{"class":201},[167,41712,393],{"class":173},[167,41714,41716,41719,41721],{"class":41715,"line":279},[169,213],[167,41717,41718],{"class":173},"        autocomplete: ",[167,41720,37707],{"class":201},[167,41722,393],{"class":173},[167,41724,41726,41729,41731],{"class":41725,"line":289},[169,213],[167,41727,41728],{"class":173},"        required: ",[167,41730,390],{"class":219},[167,41732,393],{"class":173},[167,41734,41736],{"class":41735,"line":294},[169,213],[167,41737,8642],{"class":173},[167,41739,41740],{"class":169,"line":304},[167,41741,24370],{"class":173},[167,41743,41744],{"class":169,"line":313},[167,41745,398],{"class":173},[167,41747,41748],{"class":169,"line":161},[167,41749,24148],{"class":173},[167,41751,41752,41754,41756],{"class":169,"line":335},[167,41753,282],{"class":173},[167,41755,178],{"class":177},[167,41757,185],{"class":173},[167,41759,41760],{"class":169,"line":341},[167,41761,209],{"emptyLinePlaceholder":208},[167,41763,41764,41766,41768],{"class":169,"line":489},[167,41765,174],{"class":173},[167,41767,299],{"class":177},[167,41769,185],{"class":173},[167,41771,41773,41775,41777,41779,41781,41783],{"class":41772,"line":495},[169,213],[167,41774,307],{"class":173},[167,41776,2650],{"class":177},[167,41778,39834],{"class":181},[167,41780,267],{"class":173},[167,41782,41632],{"class":201},[167,41784,5325],{"class":173},[167,41786,41787,41789,41791],{"class":169,"line":501},[167,41788,282],{"class":173},[167,41790,299],{"class":177},[167,41792,185],{"class":173},[5367,41794,41795],{},[15,41796,41797,41799],{},[87,41798,41496],{}," también es común para forwarding de props en componentes base.",[22,41801,41803],{"id":41802},"ejemplo-integrado","Ejemplo integrado",[15,41805,41806,41807,41809],{},"Formulario simple con ",[87,41808,23868],{}," para atributos, clases y estado.",[154,41811,41813],{"className":156,"code":41812,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from \"vue\";\n\nconst email = ref(\"\");\nconst isSubmitting = ref(false);\nconst hasError = ref(false);\n\nconst inputAttrs = computed(() => ({\n  type: \"email\",\n  placeholder: \"Ingresa tu correo\",\n  autocomplete: \"email\",\n  required: true,\n}));\n\nconst buttonClass = computed(() => ({\n  \"btn-primary\": !isSubmitting.value,\n  \"btn-disabled\": isSubmitting.value,\n}));\n\nfunction submit() {\n  hasError.value = email.value.trim() === \"\";\n  if (hasError.value) return;\n  isSubmitting.value = true;\n  setTimeout(() => {\n    isSubmitting.value = false;\n  }, 1000);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" \u002F>\n\n    \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n      {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n    \u003C\u002Fbutton>\n\n    \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n      {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n    \u003C\u002Fp>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[87,41814,41815,41825,41837,41841,41857,41874,41890,41894,41910,41918,41927,41935,41943,41948,41952,41969,41981,41989,41993,41997,42006,42025,42036,42047,42058,42069,42077,42081,42089,42093,42101,42115,42143,42147,42169,42174,42182,42186,42201,42206,42214,42222],{"__ignoreMap":163},[167,41816,41817,41819,41821,41823],{"class":169,"line":170},[167,41818,174],{"class":173},[167,41820,178],{"class":177},[167,41822,182],{"class":181},[167,41824,185],{"class":173},[167,41826,41827,41829,41831,41833,41835],{"class":169,"line":188},[167,41828,192],{"class":191},[167,41830,1805],{"class":173},[167,41832,198],{"class":191},[167,41834,24041],{"class":201},[167,41836,24044],{"class":173},[167,41838,41839],{"class":169,"line":205},[167,41840,209],{"emptyLinePlaceholder":208},[167,41842,41843,41845,41847,41849,41851,41853,41855],{"class":169,"line":160},[167,41844,216],{"class":191},[167,41846,37598],{"class":219},[167,41848,223],{"class":191},[167,41850,226],{"class":181},[167,41852,229],{"class":173},[167,41854,31161],{"class":201},[167,41856,24169],{"class":173},[167,41858,41859,41861,41864,41866,41868,41870,41872],{"class":169,"line":238},[167,41860,216],{"class":191},[167,41862,41863],{"class":219}," isSubmitting",[167,41865,223],{"class":191},[167,41867,226],{"class":181},[167,41869,229],{"class":173},[167,41871,3392],{"class":219},[167,41873,24169],{"class":173},[167,41875,41876,41878,41880,41882,41884,41886,41888],{"class":169,"line":243},[167,41877,216],{"class":191},[167,41879,9486],{"class":219},[167,41881,223],{"class":191},[167,41883,226],{"class":181},[167,41885,229],{"class":173},[167,41887,3392],{"class":219},[167,41889,24169],{"class":173},[167,41891,41892],{"class":169,"line":261},[167,41893,209],{"emptyLinePlaceholder":208},[167,41895,41896,41898,41900,41902,41904,41906,41908],{"class":169,"line":273},[167,41897,216],{"class":191},[167,41899,41537],{"class":219},[167,41901,223],{"class":191},[167,41903,1898],{"class":181},[167,41905,1493],{"class":173},[167,41907,639],{"class":191},[167,41909,642],{"class":173},[167,41911,41912,41914,41916],{"class":169,"line":279},[167,41913,41559],{"class":173},[167,41915,37707],{"class":201},[167,41917,393],{"class":173},[167,41919,41920,41922,41925],{"class":169,"line":289},[167,41921,41569],{"class":173},[167,41923,41924],{"class":201},"\"Ingresa tu correo\"",[167,41926,393],{"class":173},[167,41928,41929,41931,41933],{"class":169,"line":294},[167,41930,41579],{"class":173},[167,41932,37707],{"class":201},[167,41934,393],{"class":173},[167,41936,41937,41939,41941],{"class":169,"line":304},[167,41938,41589],{"class":173},[167,41940,390],{"class":219},[167,41942,393],{"class":173},[167,41944,41945],{"class":169,"line":313},[167,41946,41947],{"class":173},"}));\n",[167,41949,41950],{"class":169,"line":161},[167,41951,209],{"emptyLinePlaceholder":208},[167,41953,41954,41956,41959,41961,41963,41965,41967],{"class":169,"line":335},[167,41955,216],{"class":191},[167,41957,41958],{"class":219}," buttonClass",[167,41960,223],{"class":191},[167,41962,1898],{"class":181},[167,41964,1493],{"class":173},[167,41966,639],{"class":191},[167,41968,642],{"class":173},[167,41970,41971,41974,41976,41978],{"class":169,"line":341},[167,41972,41973],{"class":201},"  \"btn-primary\"",[167,41975,1108],{"class":173},[167,41977,6641],{"class":191},[167,41979,41980],{"class":173},"isSubmitting.value,\n",[167,41982,41983,41986],{"class":169,"line":489},[167,41984,41985],{"class":201},"  \"btn-disabled\"",[167,41987,41988],{"class":173},": isSubmitting.value,\n",[167,41990,41991],{"class":169,"line":495},[167,41992,41947],{"class":173},[167,41994,41995],{"class":169,"line":501},[167,41996,209],{"emptyLinePlaceholder":208},[167,41998,41999,42001,42004],{"class":169,"line":512},[167,42000,246],{"class":191},[167,42002,42003],{"class":181}," submit",[167,42005,763],{"class":173},[167,42007,42008,42010,42012,42015,42017,42019,42021,42023],{"class":169,"line":781},[167,42009,9943],{"class":173},[167,42011,267],{"class":191},[167,42013,42014],{"class":173}," email.value.",[167,42016,2500],{"class":181},[167,42018,14087],{"class":173},[167,42020,2550],{"class":191},[167,42022,38799],{"class":201},[167,42024,24044],{"class":173},[167,42026,42027,42029,42032,42034],{"class":169,"line":786},[167,42028,2544],{"class":191},[167,42030,42031],{"class":173}," (hasError.value) ",[167,42033,24238],{"class":191},[167,42035,24044],{"class":173},[167,42037,42038,42041,42043,42045],{"class":169,"line":2678},[167,42039,42040],{"class":173},"  isSubmitting.value ",[167,42042,267],{"class":191},[167,42044,26318],{"class":219},[167,42046,24044],{"class":173},[167,42048,42049,42052,42054,42056],{"class":169,"line":2692},[167,42050,42051],{"class":181},"  setTimeout",[167,42053,1493],{"class":173},[167,42055,639],{"class":191},[167,42057,1905],{"class":173},[167,42059,42060,42063,42065,42067],{"class":169,"line":3575},[167,42061,42062],{"class":173},"    isSubmitting.value ",[167,42064,267],{"class":191},[167,42066,5777],{"class":219},[167,42068,24044],{"class":173},[167,42070,42071,42073,42075],{"class":169,"line":5028},[167,42072,1957],{"class":173},[167,42074,17180],{"class":219},[167,42076,24169],{"class":173},[167,42078,42079],{"class":169,"line":5037},[167,42080,276],{"class":173},[167,42082,42083,42085,42087],{"class":169,"line":5046},[167,42084,282],{"class":173},[167,42086,178],{"class":177},[167,42088,185],{"class":173},[167,42090,42091],{"class":169,"line":6756},[167,42092,209],{"emptyLinePlaceholder":208},[167,42094,42095,42097,42099],{"class":169,"line":6778},[167,42096,174],{"class":173},[167,42098,299],{"class":177},[167,42100,185],{"class":173},[167,42102,42103,42105,42107,42109,42111,42113],{"class":169,"line":6783},[167,42104,307],{"class":173},[167,42106,4305],{"class":177},[167,42108,4308],{"class":181},[167,42110,267],{"class":173},[167,42112,4348],{"class":201},[167,42114,185],{"class":173},[167,42116,42117,42119,42121,42123,42125,42127,42129,42131,42133,42136,42138,42141],{"class":169,"line":6788},[167,42118,1257],{"class":173},[167,42120,2650],{"class":177},[167,42122,39834],{"class":181},[167,42124,267],{"class":173},[167,42126,41632],{"class":201},[167,42128,2653],{"class":181},[167,42130,267],{"class":173},[167,42132,37707],{"class":201},[167,42134,42135],{"class":181}," :class",[167,42137,267],{"class":173},[167,42139,42140],{"class":201},"\"{ 'input-error': hasError }\"",[167,42142,5325],{"class":173},[167,42144,42145],{"class":169,"line":6793},[167,42146,209],{"emptyLinePlaceholder":208},[167,42148,42149,42151,42153,42155,42157,42160,42162,42164,42167],{"class":169,"line":6809},[167,42150,1257],{"class":173},[167,42152,507],{"class":177},[167,42154,40550],{"class":181},[167,42156,267],{"class":173},[167,42158,42159],{"class":201},"\"isSubmitting\"",[167,42161,42135],{"class":181},[167,42163,267],{"class":173},[167,42165,42166],{"class":201},"\"buttonClass\"",[167,42168,185],{"class":173},[167,42170,42171],{"class":169,"line":6824},[167,42172,42173],{"class":173},"      {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n",[167,42175,42176,42178,42180],{"class":169,"line":6829},[167,42177,1292],{"class":173},[167,42179,507],{"class":177},[167,42181,185],{"class":173},[167,42183,42184],{"class":169,"line":6836},[167,42185,209],{"emptyLinePlaceholder":208},[167,42187,42188,42190,42192,42194,42196,42199],{"class":169,"line":6845},[167,42189,1257],{"class":173},[167,42191,15],{"class":177},[167,42193,39102],{"class":181},[167,42195,267],{"class":173},[167,42197,42198],{"class":201},"\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\"",[167,42200,185],{"class":173},[167,42202,42203],{"class":169,"line":6854},[167,42204,42205],{"class":173},"      {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n",[167,42207,42208,42210,42212],{"class":169,"line":6861},[167,42209,1292],{"class":173},[167,42211,15],{"class":177},[167,42213,185],{"class":173},[167,42215,42216,42218,42220],{"class":169,"line":6879},[167,42217,504],{"class":173},[167,42219,4305],{"class":177},[167,42221,185],{"class":173},[167,42223,42224,42226,42228],{"class":169,"line":6884},[167,42225,282],{"class":173},[167,42227,299],{"class":177},[167,42229,185],{"class":173},[154,42231,42233],{"className":156,"code":42232,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      email: \"\",\n      isSubmitting: false,\n      hasError: false,\n    };\n  },\n  computed: {\n    inputAttrs() {\n      return {\n        type: \"email\",\n        placeholder: \"Ingresa tu correo\",\n        autocomplete: \"email\",\n        required: true,\n      };\n    },\n    buttonClass() {\n      return {\n        \"btn-primary\": !this.isSubmitting,\n        \"btn-disabled\": this.isSubmitting,\n      };\n    },\n  },\n  methods: {\n    submit() {\n      this.hasError = this.email.trim() === \"\";\n      if (this.hasError) return;\n      this.isSubmitting = true;\n      setTimeout(() => {\n        this.isSubmitting = false;\n      }, 1000);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" \u002F>\n\n    \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n      {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n    \u003C\u002Fbutton>\n\n    \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n      {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n    \u003C\u002Fp>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[87,42234,42235,42243,42251,42257,42263,42271,42280,42288,42292,42296,42300,42307,42313,42321,42329,42337,42345,42350,42354,42361,42367,42381,42392,42396,42400,42404,42408,42415,42437,42452,42465,42476,42488,42496,42500,42504,42508,42516,42520,42528,42542,42568,42572,42592,42596,42604,42608,42622,42626,42634,42642],{"__ignoreMap":163},[167,42236,42237,42239,42241],{"class":169,"line":170},[167,42238,174],{"class":173},[167,42240,178],{"class":177},[167,42242,185],{"class":173},[167,42244,42245,42247,42249],{"class":169,"line":188},[167,42246,608],{"class":191},[167,42248,3991],{"class":191},[167,42250,1905],{"class":173},[167,42252,42253,42255],{"class":169,"line":205},[167,42254,7176],{"class":181},[167,42256,763],{"class":173},[167,42258,42259,42261],{"class":169,"line":160},[167,42260,1937],{"class":191},[167,42262,1905],{"class":173},[167,42264,42265,42267,42269],{"class":169,"line":238},[167,42266,37802],{"class":173},[167,42268,31161],{"class":201},[167,42270,393],{"class":173},[167,42272,42273,42276,42278],{"class":169,"line":243},[167,42274,42275],{"class":173},"      isSubmitting: ",[167,42277,3392],{"class":219},[167,42279,393],{"class":173},[167,42281,42282,42284,42286],{"class":169,"line":261},[167,42283,10652],{"class":173},[167,42285,3392],{"class":219},[167,42287,393],{"class":173},[167,42289,42290],{"class":169,"line":273},[167,42291,24370],{"class":173},[167,42293,42294],{"class":169,"line":279},[167,42295,398],{"class":173},[167,42297,42298],{"class":169,"line":289},[167,42299,8755],{"class":173},[167,42301,42302,42305],{"class":169,"line":294},[167,42303,42304],{"class":181},"    inputAttrs",[167,42306,763],{"class":173},[167,42308,42309,42311],{"class":169,"line":304},[167,42310,8767],{"class":191},[167,42312,1905],{"class":173},[167,42314,42315,42317,42319],{"class":169,"line":313},[167,42316,41698],{"class":173},[167,42318,37707],{"class":201},[167,42320,393],{"class":173},[167,42322,42323,42325,42327],{"class":169,"line":161},[167,42324,41708],{"class":173},[167,42326,41924],{"class":201},[167,42328,393],{"class":173},[167,42330,42331,42333,42335],{"class":169,"line":335},[167,42332,41718],{"class":173},[167,42334,37707],{"class":201},[167,42336,393],{"class":173},[167,42338,42339,42341,42343],{"class":169,"line":341},[167,42340,41728],{"class":173},[167,42342,390],{"class":219},[167,42344,393],{"class":173},[167,42346,42347],{"class":169,"line":489},[167,42348,42349],{"class":173},"      };\n",[167,42351,42352],{"class":169,"line":495},[167,42353,755],{"class":173},[167,42355,42356,42359],{"class":169,"line":501},[167,42357,42358],{"class":181},"    buttonClass",[167,42360,763],{"class":173},[167,42362,42363,42365],{"class":169,"line":512},[167,42364,8767],{"class":191},[167,42366,1905],{"class":173},[167,42368,42369,42372,42374,42376,42378],{"class":169,"line":781},[167,42370,42371],{"class":201},"        \"btn-primary\"",[167,42373,1108],{"class":173},[167,42375,6641],{"class":191},[167,42377,4927],{"class":219},[167,42379,42380],{"class":173},".isSubmitting,\n",[167,42382,42383,42386,42388,42390],{"class":169,"line":786},[167,42384,42385],{"class":201},"        \"btn-disabled\"",[167,42387,1108],{"class":173},[167,42389,4927],{"class":219},[167,42391,42380],{"class":173},[167,42393,42394],{"class":169,"line":2678},[167,42395,42349],{"class":173},[167,42397,42398],{"class":169,"line":2692},[167,42399,755],{"class":173},[167,42401,42402],{"class":169,"line":3575},[167,42403,398],{"class":173},[167,42405,42406],{"class":169,"line":5028},[167,42407,4419],{"class":173},[167,42409,42410,42413],{"class":169,"line":5037},[167,42411,42412],{"class":181},"    submit",[167,42414,763],{"class":173},[167,42416,42417,42419,42421,42423,42425,42427,42429,42431,42433,42435],{"class":169,"line":5046},[167,42418,741],{"class":219},[167,42420,10715],{"class":173},[167,42422,267],{"class":191},[167,42424,7351],{"class":219},[167,42426,37838],{"class":173},[167,42428,2500],{"class":181},[167,42430,14087],{"class":173},[167,42432,2550],{"class":191},[167,42434,38799],{"class":201},[167,42436,24044],{"class":173},[167,42438,42439,42441,42443,42445,42448,42450],{"class":169,"line":6756},[167,42440,7261],{"class":191},[167,42442,2526],{"class":173},[167,42444,4927],{"class":219},[167,42446,42447],{"class":173},".hasError) ",[167,42449,24238],{"class":191},[167,42451,24044],{"class":173},[167,42453,42454,42456,42459,42461,42463],{"class":169,"line":6778},[167,42455,741],{"class":219},[167,42457,42458],{"class":173},".isSubmitting ",[167,42460,267],{"class":191},[167,42462,26318],{"class":219},[167,42464,24044],{"class":173},[167,42466,42467,42470,42472,42474],{"class":169,"line":6783},[167,42468,42469],{"class":181},"      setTimeout",[167,42471,1493],{"class":173},[167,42473,639],{"class":191},[167,42475,1905],{"class":173},[167,42477,42478,42480,42482,42484,42486],{"class":169,"line":6788},[167,42479,14773],{"class":219},[167,42481,42458],{"class":173},[167,42483,267],{"class":191},[167,42485,5777],{"class":219},[167,42487,24044],{"class":173},[167,42489,42490,42492,42494],{"class":169,"line":6793},[167,42491,13048],{"class":173},[167,42493,17180],{"class":219},[167,42495,24169],{"class":173},[167,42497,42498],{"class":169,"line":6809},[167,42499,755],{"class":173},[167,42501,42502],{"class":169,"line":6824},[167,42503,398],{"class":173},[167,42505,42506],{"class":169,"line":6829},[167,42507,24148],{"class":173},[167,42509,42510,42512,42514],{"class":169,"line":6836},[167,42511,282],{"class":173},[167,42513,178],{"class":177},[167,42515,185],{"class":173},[167,42517,42518],{"class":169,"line":6845},[167,42519,209],{"emptyLinePlaceholder":208},[167,42521,42522,42524,42526],{"class":169,"line":6854},[167,42523,174],{"class":173},[167,42525,299],{"class":177},[167,42527,185],{"class":173},[167,42529,42530,42532,42534,42536,42538,42540],{"class":169,"line":6861},[167,42531,307],{"class":173},[167,42533,4305],{"class":177},[167,42535,4308],{"class":181},[167,42537,267],{"class":173},[167,42539,4348],{"class":201},[167,42541,185],{"class":173},[167,42543,42544,42546,42548,42550,42552,42554,42556,42558,42560,42562,42564,42566],{"class":169,"line":6879},[167,42545,1257],{"class":173},[167,42547,2650],{"class":177},[167,42549,39834],{"class":181},[167,42551,267],{"class":173},[167,42553,41632],{"class":201},[167,42555,2653],{"class":181},[167,42557,267],{"class":173},[167,42559,37707],{"class":201},[167,42561,42135],{"class":181},[167,42563,267],{"class":173},[167,42565,42140],{"class":201},[167,42567,5325],{"class":173},[167,42569,42570],{"class":169,"line":6884},[167,42571,209],{"emptyLinePlaceholder":208},[167,42573,42574,42576,42578,42580,42582,42584,42586,42588,42590],{"class":169,"line":6889},[167,42575,1257],{"class":173},[167,42577,507],{"class":177},[167,42579,40550],{"class":181},[167,42581,267],{"class":173},[167,42583,42159],{"class":201},[167,42585,42135],{"class":181},[167,42587,267],{"class":173},[167,42589,42166],{"class":201},[167,42591,185],{"class":173},[167,42593,42594],{"class":169,"line":6898},[167,42595,42173],{"class":173},[167,42597,42598,42600,42602],{"class":169,"line":6903},[167,42599,1292],{"class":173},[167,42601,507],{"class":177},[167,42603,185],{"class":173},[167,42605,42606],{"class":169,"line":6912},[167,42607,209],{"emptyLinePlaceholder":208},[167,42609,42610,42612,42614,42616,42618,42620],{"class":169,"line":6928},[167,42611,1257],{"class":173},[167,42613,15],{"class":177},[167,42615,39102],{"class":181},[167,42617,267],{"class":173},[167,42619,42198],{"class":201},[167,42621,185],{"class":173},[167,42623,42624],{"class":169,"line":6949},[167,42625,42205],{"class":173},[167,42627,42628,42630,42632],{"class":169,"line":6954},[167,42629,1292],{"class":173},[167,42631,15],{"class":177},[167,42633,185],{"class":173},[167,42635,42636,42638,42640],{"class":169,"line":6975},[167,42637,504],{"class":173},[167,42639,4305],{"class":177},[167,42641,185],{"class":173},[167,42643,42644,42646,42648],{"class":169,"line":6989},[167,42645,282],{"class":173},[167,42647,299],{"class":177},[167,42649,185],{"class":173},[22,42651,7678],{"id":7677},[15,42653,42654,42656],{},[87,42655,23868],{}," es la forma declarativa de conectar estado y atributos en Vue.\nDominarlo te permite construir interfaces dinámicas de manera limpia y mantenible.",[15,42658,42659],{},"Qué recordar:",[33,42661,42662,42669,42676,42681],{},[36,42663,42664,42666,42667,1679],{},[87,42665,583],{}," es shorthand de ",[87,42668,23868],{},[36,42670,42671,42672,1028,42674,1679],{},"Úsalo para atributos, props, ",[87,42673,39922],{},[87,42675,924],{},[36,42677,42678,42679,1679],{},"Evita lógica compleja inline: mueve reglas a ",[87,42680,1661],{},[36,42682,42683,42685],{},[87,42684,41496],{}," es ideal para agrupar atributos\u002Fprops.",[15,42687,42688,42689,42691],{},"Si entiendes bien ",[87,42690,23868],{},", entiendes una parte central de cómo Vue traduce reactividad en UI real.",[924,42693,42694],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":163,"searchDepth":188,"depth":188,"links":42696},[42697,42698,42699,42700,42701,42710,42724,42725],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":42702},[42703,42705,42707,42708],{"id":39987,"depth":205,"text":42704},"1) Olvidar que v-bind evalúa JavaScript",{"id":40088,"depth":205,"text":42706},"2) Poner demasiada lógica inline en :class o :style",{"id":40172,"depth":205,"text":40173},{"id":40216,"depth":205,"text":42709},"4) Creer que v-bind \"protege\" datos",{"id":7996,"depth":188,"text":7997,"children":42711},[42712,42714,42716,42718,42720,42722],{"id":40230,"depth":205,"text":42713},"1) Básico: enlace dinámico (href)",{"id":40467,"depth":205,"text":42715},"2) Atributo booleano dinámico (disabled)",{"id":40692,"depth":205,"text":42717},"3) v-bind:class con objeto (patrón recomendado)",{"id":40995,"depth":205,"text":42719},"4) v-bind:style dinámico con objeto",{"id":41250,"depth":205,"text":42721},"5) Argumento dinámico: :[attrName]=\"value\"",{"id":41492,"depth":205,"text":42723},"6) v-bind=\"obj\" para pasar múltiples atributos o props",{"id":41802,"depth":188,"text":41803},{"id":7677,"depth":188,"text":7678},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770849828\u002Fdirectives-vue-v-bind-guide_gqrgyj.png","Imagen temporal para portada del artículo sobre v-bind en Vue","2026-02-11","Aprende a usar v-bind en Vue desde lo más básico hasta patrones avanzados: atributos dinámicos, class\u002Fstyle reactivos, props en componentes y errores comunes.",{"updatedAt":42731,"coverCaption":23656,"author":946,"keywords":42732},"2026-02-11T18:00:00-05:00",[3258,23868,42733,42734,42735,3260,3973],"atributos dinámicos","class binding","style binding","\u002Fblog\u002Fdirectives-vue-v-bind-guide.es",[42738],{"headline":42739,"author":42740,"datePublished":42731,"@type":961},"Directiva v-bind en Vue: guía de básico a avanzado",{"name":946,"@type":959},{"title":39772,"description":42729},"blog\u002Fdirectives-vue-v-bind-guide.es",[42744,42745,42746,42747],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":3269,"color":3270},{"tag":5424,"color":5425},"ggicPee9rp0vgescxGeL26jTmua2py715WKhjmXHpp0",{"id":42750,"title":42751,"body":42752,"cover":46074,"coverAlt":46075,"date":46076,"description":46077,"draft":940,"extension":941,"lab":942,"locale":943,"meta":46078,"navigation":208,"path":46082,"schemaOrg":46083,"seo":46087,"series":26460,"seriesDescription":26461,"seriesOrder":205,"seriesTitle":26462,"slug":942,"stem":46088,"tags":46089,"__hash__":46095},"blog\u002Fblog\u002Fdirectives-vue-v-for-guide.es.md","Directivas en Vue: v-for",{"type":8,"value":42753,"toc":46038},[42754,42761,42766,42769,42782,42785,42787,42790,42807,42813,42824,42830,42833,42844,42846,42852,42876,42880,43002,43127,43131,43134,43340,43547,43554,43560,43563,43681,43805,43809,43947,44088,44094,44286,44476,44480,44486,44494,44771,45035,45041,45190,45350,45354,45575,45794,45800,45808,45863,45866,45874,45883,45949,45957,45963,45966,45972,45978,45982,46008,46010,46015,46018,46033,46036],[11,42755,42757,42758,42760],{"id":42756},"directiva-v-for-en-vue-de-lo-básico-a-lo-avanzado","Directiva ",[87,42759,30726],{}," en Vue: de lo básico a lo avanzado",[15,42762,42763,42765],{},[87,42764,30726],{}," es la directiva de Vue para renderizar listas.\nParece simple, pero usarla bien marca una diferencia enorme en rendimiento, estabilidad visual y legibilidad del código.",[15,42767,42768],{},"La idea clave es esta:",[33,42770,42771,42776],{},[36,42772,42773,42775],{},[87,42774,30726],{}," describe cómo repetir estructura en el template.",[36,42777,42778,42781],{},[87,42779,42780],{},":key"," le dice a Vue cómo identificar cada nodo de forma estable.",[15,42783,42784],{},"Si dominas ese par, evitas la mayoría de bugs en listas dinámicas.",[22,42786,26503],{"id":26502},[15,42788,42789],{},"En aplicaciones reales siempre renderizas listas:",[33,42791,42792,42795,42798,42801,42804],{},[36,42793,42794],{},"Tareas",[36,42796,42797],{},"Productos",[36,42799,42800],{},"Comentarios",[36,42802,42803],{},"Notificaciones",[36,42805,42806],{},"Filas de tablas",[15,42808,42809,42810,42812],{},"Cuando la lista cambia (insertar, borrar, reordenar), Vue necesita saber qué item es cuál.\nSi la clave (",[87,42811,7845],{},") no es estable, aparecen errores como:",[33,42814,42815,42818,42821],{},[36,42816,42817],{},"Estados internos mezclados entre filas",[36,42819,42820],{},"Animaciones raras",[36,42822,42823],{},"Inputs que \"saltan\" de elemento",[22,42825,42827,42828],{"id":42826},"cuándo-usar-v-for","Cuándo usar ",[87,42829,30726],{},[15,42831,42832],{},"Úsalo cuando necesitas:",[33,42834,42835,42838,42841],{},[36,42836,42837],{},"Renderizar arrays u objetos reactivos",[36,42839,42840],{},"Repetir componentes con distintos datos",[36,42842,42843],{},"Mostrar estructuras anidadas (ej: categorías y productos)",[22,42845,6349],{"id":6348},[15,42847,42848,42849,42851],{},"Evita usar ",[87,42850,30726],{}," para:",[33,42853,42854,42857,42867],{},[36,42855,42856],{},"Hacer filtrado complejo directamente en el template",[36,42858,42859,42860,1028,42862,42864,42865],{},"Combinar ",[87,42861,13496],{},[87,42863,30726],{}," en el mismo nodo si puedes prefiltrar con ",[87,42866,1661],{},[36,42868,3180,42869,42872,42873,42875],{},[87,42870,42871],{},"index"," como ",[87,42874,7845],{}," en listas que cambian de orden",[22,42877,42879],{"id":42878},"sintaxis-base","Sintaxis base",[154,42881,42884],{"className":156,"code":42882,"filename":3260,"highlights":42883,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst frameworks = ref(['Vue', 'React', 'Svelte'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"framework in frameworks\" :key=\"framework\">\n    {{ framework }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[273],[87,42885,42886,42896,42906,42910,42938,42946,42950,42958,42981,42986,42994],{"__ignoreMap":163},[167,42887,42888,42890,42892,42894],{"class":169,"line":170},[167,42889,174],{"class":173},[167,42891,178],{"class":177},[167,42893,182],{"class":181},[167,42895,185],{"class":173},[167,42897,42898,42900,42902,42904],{"class":169,"line":188},[167,42899,192],{"class":191},[167,42901,195],{"class":173},[167,42903,198],{"class":191},[167,42905,202],{"class":201},[167,42907,42908],{"class":169,"line":205},[167,42909,209],{"emptyLinePlaceholder":208},[167,42911,42912,42914,42917,42919,42921,42923,42926,42928,42931,42933,42936],{"class":169,"line":160},[167,42913,216],{"class":191},[167,42915,42916],{"class":219}," frameworks",[167,42918,223],{"class":191},[167,42920,226],{"class":181},[167,42922,423],{"class":173},[167,42924,42925],{"class":201},"'Vue'",[167,42927,1025],{"class":173},[167,42929,42930],{"class":201},"'React'",[167,42932,1025],{"class":173},[167,42934,42935],{"class":201},"'Svelte'",[167,42937,429],{"class":173},[167,42939,42940,42942,42944],{"class":169,"line":238},[167,42941,282],{"class":173},[167,42943,178],{"class":177},[167,42945,185],{"class":173},[167,42947,42948],{"class":169,"line":243},[167,42949,209],{"emptyLinePlaceholder":208},[167,42951,42952,42954,42956],{"class":169,"line":261},[167,42953,174],{"class":173},[167,42955,299],{"class":177},[167,42957,185],{"class":173},[167,42959,42961,42963,42965,42967,42969,42972,42974,42976,42979],{"class":42960,"line":273},[169,213],[167,42962,307],{"class":173},[167,42964,36],{"class":177},[167,42966,18706],{"class":181},[167,42968,267],{"class":173},[167,42970,42971],{"class":201},"\"framework in frameworks\"",[167,42973,10307],{"class":181},[167,42975,267],{"class":173},[167,42977,42978],{"class":201},"\"framework\"",[167,42980,185],{"class":173},[167,42982,42983],{"class":169,"line":279},[167,42984,42985],{"class":173},"    {{ framework }}\n",[167,42987,42988,42990,42992],{"class":169,"line":289},[167,42989,504],{"class":173},[167,42991,36],{"class":177},[167,42993,185],{"class":173},[167,42995,42996,42998,43000],{"class":169,"line":294},[167,42997,282],{"class":173},[167,42999,299],{"class":177},[167,43001,185],{"class":173},[154,43003,43006],{"className":156,"code":43004,"filename":3973,"highlights":43005,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      frameworks: ['Vue', 'React', 'Svelte']\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"framework in frameworks\" :key=\"framework\">\n    {{ framework }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[304],[87,43007,43008,43016,43024,43030,43036,43054,43058,43062,43066,43074,43078,43086,43107,43111,43119],{"__ignoreMap":163},[167,43009,43010,43012,43014],{"class":169,"line":170},[167,43011,174],{"class":173},[167,43013,178],{"class":177},[167,43015,185],{"class":173},[167,43017,43018,43020,43022],{"class":169,"line":188},[167,43019,608],{"class":191},[167,43021,3991],{"class":191},[167,43023,1905],{"class":173},[167,43025,43026,43028],{"class":169,"line":205},[167,43027,7176],{"class":181},[167,43029,763],{"class":173},[167,43031,43032,43034],{"class":169,"line":160},[167,43033,1937],{"class":191},[167,43035,1905],{"class":173},[167,43037,43038,43041,43043,43045,43047,43049,43051],{"class":169,"line":238},[167,43039,43040],{"class":173},"      frameworks: [",[167,43042,42925],{"class":201},[167,43044,1025],{"class":173},[167,43046,42930],{"class":201},[167,43048,1025],{"class":173},[167,43050,42935],{"class":201},[167,43052,43053],{"class":173},"]\n",[167,43055,43056],{"class":169,"line":243},[167,43057,4049],{"class":173},[167,43059,43060],{"class":169,"line":261},[167,43061,3492],{"class":173},[167,43063,43064],{"class":169,"line":273},[167,43065,276],{"class":173},[167,43067,43068,43070,43072],{"class":169,"line":279},[167,43069,282],{"class":173},[167,43071,178],{"class":177},[167,43073,185],{"class":173},[167,43075,43076],{"class":169,"line":289},[167,43077,209],{"emptyLinePlaceholder":208},[167,43079,43080,43082,43084],{"class":169,"line":294},[167,43081,174],{"class":173},[167,43083,299],{"class":177},[167,43085,185],{"class":173},[167,43087,43089,43091,43093,43095,43097,43099,43101,43103,43105],{"class":43088,"line":304},[169,213],[167,43090,307],{"class":173},[167,43092,36],{"class":177},[167,43094,18706],{"class":181},[167,43096,267],{"class":173},[167,43098,42971],{"class":201},[167,43100,10307],{"class":181},[167,43102,267],{"class":173},[167,43104,42978],{"class":201},[167,43106,185],{"class":173},[167,43108,43109],{"class":169,"line":313},[167,43110,42985],{"class":173},[167,43112,43113,43115,43117],{"class":169,"line":161},[167,43114,504],{"class":173},[167,43116,36],{"class":177},[167,43118,185],{"class":173},[167,43120,43121,43123,43125],{"class":169,"line":335},[167,43122,282],{"class":173},[167,43124,299],{"class":177},[167,43126,185],{"class":173},[22,43128,43130],{"id":43129},"ejemplo-básico-lista-de-tareas","Ejemplo básico: lista de tareas",[15,43132,43133],{},"Este es el patrón más común y correcto para empezar.",[154,43135,43138],{"className":156,"code":43136,"filename":3260,"highlights":43137,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst todos = ref([\n  { id: 1, text: 'Aprender v-for', done: true },\n  { id: 2, text: 'Practicar key estable', done: false },\n  { id: 3, text: 'Evitar index como key', done: false }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n      \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n        {{ todo.text }}\n      \u003C\u002Fspan>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,313],[87,43139,43140,43150,43160,43164,43178,43196,43214,43232,43237,43245,43249,43257,43265,43288,43303,43308,43316,43324,43332],{"__ignoreMap":163},[167,43141,43142,43144,43146,43148],{"class":169,"line":170},[167,43143,174],{"class":173},[167,43145,178],{"class":177},[167,43147,182],{"class":181},[167,43149,185],{"class":173},[167,43151,43152,43154,43156,43158],{"class":169,"line":188},[167,43153,192],{"class":191},[167,43155,195],{"class":173},[167,43157,198],{"class":191},[167,43159,202],{"class":201},[167,43161,43162],{"class":169,"line":205},[167,43163,209],{"emptyLinePlaceholder":208},[167,43165,43167,43169,43172,43174,43176],{"class":43166,"line":160},[169,213],[167,43168,216],{"class":191},[167,43170,43171],{"class":219}," todos",[167,43173,223],{"class":191},[167,43175,226],{"class":181},[167,43177,1827],{"class":173},[167,43179,43181,43183,43185,43187,43190,43192,43194],{"class":43180,"line":238},[169,213],[167,43182,1832],{"class":173},[167,43184,1835],{"class":219},[167,43186,15633],{"class":173},[167,43188,43189],{"class":201},"'Aprender v-for'",[167,43191,8164],{"class":173},[167,43193,390],{"class":219},[167,43195,1856],{"class":173},[167,43197,43199,43201,43203,43205,43208,43210,43212],{"class":43198,"line":243},[169,213],[167,43200,1832],{"class":173},[167,43202,1853],{"class":219},[167,43204,15633],{"class":173},[167,43206,43207],{"class":201},"'Practicar key estable'",[167,43209,8164],{"class":173},[167,43211,3392],{"class":219},[167,43213,1856],{"class":173},[167,43215,43217,43219,43221,43223,43226,43228,43230],{"class":43216,"line":261},[169,213],[167,43218,1832],{"class":173},[167,43220,8203],{"class":219},[167,43222,15633],{"class":173},[167,43224,43225],{"class":201},"'Evitar index como key'",[167,43227,8164],{"class":173},[167,43229,3392],{"class":219},[167,43231,599],{"class":173},[167,43233,43235],{"class":43234,"line":273},[169,213],[167,43236,429],{"class":173},[167,43238,43239,43241,43243],{"class":169,"line":279},[167,43240,282],{"class":173},[167,43242,178],{"class":177},[167,43244,185],{"class":173},[167,43246,43247],{"class":169,"line":289},[167,43248,209],{"emptyLinePlaceholder":208},[167,43250,43251,43253,43255],{"class":169,"line":294},[167,43252,174],{"class":173},[167,43254,299],{"class":177},[167,43256,185],{"class":173},[167,43258,43259,43261,43263],{"class":169,"line":304},[167,43260,307],{"class":173},[167,43262,33],{"class":177},[167,43264,185],{"class":173},[167,43266,43268,43270,43272,43274,43276,43279,43281,43283,43286],{"class":43267,"line":313},[169,213],[167,43269,1257],{"class":173},[167,43271,36],{"class":177},[167,43273,18706],{"class":181},[167,43275,267],{"class":173},[167,43277,43278],{"class":201},"\"todo in todos\"",[167,43280,10307],{"class":181},[167,43282,267],{"class":173},[167,43284,43285],{"class":201},"\"todo.id\"",[167,43287,185],{"class":173},[167,43289,43290,43292,43294,43296,43298,43301],{"class":169,"line":161},[167,43291,1268],{"class":173},[167,43293,167],{"class":177},[167,43295,39102],{"class":181},[167,43297,267],{"class":173},[167,43299,43300],{"class":201},"\"{ textDecoration: todo.done ? 'line-through' : 'none' }\"",[167,43302,185],{"class":173},[167,43304,43305],{"class":169,"line":335},[167,43306,43307],{"class":173},"        {{ todo.text }}\n",[167,43309,43310,43312,43314],{"class":169,"line":341},[167,43311,10170],{"class":173},[167,43313,167],{"class":177},[167,43315,185],{"class":173},[167,43317,43318,43320,43322],{"class":169,"line":489},[167,43319,1292],{"class":173},[167,43321,36],{"class":177},[167,43323,185],{"class":173},[167,43325,43326,43328,43330],{"class":169,"line":495},[167,43327,504],{"class":173},[167,43329,33],{"class":177},[167,43331,185],{"class":173},[167,43333,43334,43336,43338],{"class":169,"line":501},[167,43335,282],{"class":173},[167,43337,299],{"class":177},[167,43339,185],{"class":173},[154,43341,43344],{"className":156,"code":43342,"filename":3973,"highlights":43343,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      todos: [\n        { id: 1, text: 'Aprender v-for', done: true },\n        { id: 2, text: 'Practicar key estable', done: false },\n        { id: 3, text: 'Evitar index como key', done: false }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n      \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n        {{ todo.text }}\n      \u003C\u002Fspan>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[238,243,261,273,279,489],[87,43345,43346,43354,43362,43368,43374,43380,43397,43414,43431,43436,43440,43444,43448,43456,43460,43468,43476,43497,43511,43515,43523,43531,43539],{"__ignoreMap":163},[167,43347,43348,43350,43352],{"class":169,"line":170},[167,43349,174],{"class":173},[167,43351,178],{"class":177},[167,43353,185],{"class":173},[167,43355,43356,43358,43360],{"class":169,"line":188},[167,43357,608],{"class":191},[167,43359,3991],{"class":191},[167,43361,1905],{"class":173},[167,43363,43364,43366],{"class":169,"line":205},[167,43365,7176],{"class":181},[167,43367,763],{"class":173},[167,43369,43370,43372],{"class":169,"line":160},[167,43371,1937],{"class":191},[167,43373,1905],{"class":173},[167,43375,43377],{"class":43376,"line":238},[169,213],[167,43378,43379],{"class":173},"      todos: [\n",[167,43381,43383,43385,43387,43389,43391,43393,43395],{"class":43382,"line":243},[169,213],[167,43384,8677],{"class":173},[167,43386,1835],{"class":219},[167,43388,15633],{"class":173},[167,43390,43189],{"class":201},[167,43392,8164],{"class":173},[167,43394,390],{"class":219},[167,43396,1856],{"class":173},[167,43398,43400,43402,43404,43406,43408,43410,43412],{"class":43399,"line":261},[169,213],[167,43401,8677],{"class":173},[167,43403,1853],{"class":219},[167,43405,15633],{"class":173},[167,43407,43207],{"class":201},[167,43409,8164],{"class":173},[167,43411,3392],{"class":219},[167,43413,1856],{"class":173},[167,43415,43417,43419,43421,43423,43425,43427,43429],{"class":43416,"line":273},[169,213],[167,43418,8677],{"class":173},[167,43420,8203],{"class":219},[167,43422,15633],{"class":173},[167,43424,43225],{"class":201},[167,43426,8164],{"class":173},[167,43428,3392],{"class":219},[167,43430,599],{"class":173},[167,43432,43434],{"class":43433,"line":279},[169,213],[167,43435,8738],{"class":173},[167,43437,43438],{"class":169,"line":289},[167,43439,4049],{"class":173},[167,43441,43442],{"class":169,"line":294},[167,43443,3492],{"class":173},[167,43445,43446],{"class":169,"line":304},[167,43447,276],{"class":173},[167,43449,43450,43452,43454],{"class":169,"line":313},[167,43451,282],{"class":173},[167,43453,178],{"class":177},[167,43455,185],{"class":173},[167,43457,43458],{"class":169,"line":161},[167,43459,209],{"emptyLinePlaceholder":208},[167,43461,43462,43464,43466],{"class":169,"line":335},[167,43463,174],{"class":173},[167,43465,299],{"class":177},[167,43467,185],{"class":173},[167,43469,43470,43472,43474],{"class":169,"line":341},[167,43471,307],{"class":173},[167,43473,33],{"class":177},[167,43475,185],{"class":173},[167,43477,43479,43481,43483,43485,43487,43489,43491,43493,43495],{"class":43478,"line":489},[169,213],[167,43480,1257],{"class":173},[167,43482,36],{"class":177},[167,43484,18706],{"class":181},[167,43486,267],{"class":173},[167,43488,43278],{"class":201},[167,43490,10307],{"class":181},[167,43492,267],{"class":173},[167,43494,43285],{"class":201},[167,43496,185],{"class":173},[167,43498,43499,43501,43503,43505,43507,43509],{"class":169,"line":495},[167,43500,1268],{"class":173},[167,43502,167],{"class":177},[167,43504,39102],{"class":181},[167,43506,267],{"class":173},[167,43508,43300],{"class":201},[167,43510,185],{"class":173},[167,43512,43513],{"class":169,"line":501},[167,43514,43307],{"class":173},[167,43516,43517,43519,43521],{"class":169,"line":512},[167,43518,10170],{"class":173},[167,43520,167],{"class":177},[167,43522,185],{"class":173},[167,43524,43525,43527,43529],{"class":169,"line":781},[167,43526,1292],{"class":173},[167,43528,36],{"class":177},[167,43530,185],{"class":173},[167,43532,43533,43535,43537],{"class":169,"line":786},[167,43534,504],{"class":173},[167,43536,33],{"class":177},[167,43538,185],{"class":173},[167,43540,43541,43543,43545],{"class":169,"line":2678},[167,43542,282],{"class":173},[167,43544,299],{"class":177},[167,43546,185],{"class":173},[22,43548,43550,43551],{"id":43549},"nivel-intermedio-índice-objetos-y-template-v-for","Nivel intermedio: índice, objetos y ",[87,43552,43553],{},"template v-for",[3087,43555,43557,43558],{"id":43556},"_1-índice-en-v-for","1) Índice en ",[87,43559,30726],{},[15,43561,43562],{},"Puedes obtener índice cuando realmente lo necesitas:",[154,43564,43567],{"className":156,"code":43565,"filename":3260,"highlights":43566,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst users = ref(['Ana', 'Luis', 'Marta'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-for=\"(user, index) in users\" :key=\"user\">\n    #{{ index + 1 }} - {{ user }}\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273],[87,43568,43569,43579,43589,43593,43618,43626,43630,43638,43660,43665,43673],{"__ignoreMap":163},[167,43570,43571,43573,43575,43577],{"class":169,"line":170},[167,43572,174],{"class":173},[167,43574,178],{"class":177},[167,43576,182],{"class":181},[167,43578,185],{"class":173},[167,43580,43581,43583,43585,43587],{"class":169,"line":188},[167,43582,192],{"class":191},[167,43584,195],{"class":173},[167,43586,198],{"class":191},[167,43588,202],{"class":201},[167,43590,43591],{"class":169,"line":205},[167,43592,209],{"emptyLinePlaceholder":208},[167,43594,43595,43597,43599,43601,43603,43605,43607,43609,43611,43613,43616],{"class":169,"line":160},[167,43596,216],{"class":191},[167,43598,16954],{"class":219},[167,43600,223],{"class":191},[167,43602,226],{"class":181},[167,43604,423],{"class":173},[167,43606,8172],{"class":201},[167,43608,1025],{"class":173},[167,43610,8194],{"class":201},[167,43612,1025],{"class":173},[167,43614,43615],{"class":201},"'Marta'",[167,43617,429],{"class":173},[167,43619,43620,43622,43624],{"class":169,"line":238},[167,43621,282],{"class":173},[167,43623,178],{"class":177},[167,43625,185],{"class":173},[167,43627,43628],{"class":169,"line":243},[167,43629,209],{"emptyLinePlaceholder":208},[167,43631,43632,43634,43636],{"class":169,"line":261},[167,43633,174],{"class":173},[167,43635,299],{"class":177},[167,43637,185],{"class":173},[167,43639,43641,43643,43645,43647,43649,43652,43654,43656,43658],{"class":43640,"line":273},[169,213],[167,43642,307],{"class":173},[167,43644,15],{"class":177},[167,43646,18706],{"class":181},[167,43648,267],{"class":173},[167,43650,43651],{"class":201},"\"(user, index) in users\"",[167,43653,10307],{"class":181},[167,43655,267],{"class":173},[167,43657,27391],{"class":201},[167,43659,185],{"class":173},[167,43661,43662],{"class":169,"line":279},[167,43663,43664],{"class":173},"    #{{ index + 1 }} - {{ user }}\n",[167,43666,43667,43669,43671],{"class":169,"line":289},[167,43668,504],{"class":173},[167,43670,15],{"class":177},[167,43672,185],{"class":173},[167,43674,43675,43677,43679],{"class":169,"line":294},[167,43676,282],{"class":173},[167,43678,299],{"class":177},[167,43680,185],{"class":173},[154,43682,43685],{"className":156,"code":43683,"filename":3973,"highlights":43684,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      users: ['Ana', 'Luis', 'Marta']\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-for=\"(user, index) in users\" :key=\"user\">\n    #{{ index + 1 }} - {{ user }}\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304],[87,43686,43687,43695,43703,43709,43715,43732,43736,43740,43744,43752,43756,43764,43785,43789,43797],{"__ignoreMap":163},[167,43688,43689,43691,43693],{"class":169,"line":170},[167,43690,174],{"class":173},[167,43692,178],{"class":177},[167,43694,185],{"class":173},[167,43696,43697,43699,43701],{"class":169,"line":188},[167,43698,608],{"class":191},[167,43700,3991],{"class":191},[167,43702,1905],{"class":173},[167,43704,43705,43707],{"class":169,"line":205},[167,43706,7176],{"class":181},[167,43708,763],{"class":173},[167,43710,43711,43713],{"class":169,"line":160},[167,43712,1937],{"class":191},[167,43714,1905],{"class":173},[167,43716,43717,43720,43722,43724,43726,43728,43730],{"class":169,"line":238},[167,43718,43719],{"class":173},"      users: [",[167,43721,8172],{"class":201},[167,43723,1025],{"class":173},[167,43725,8194],{"class":201},[167,43727,1025],{"class":173},[167,43729,43615],{"class":201},[167,43731,43053],{"class":173},[167,43733,43734],{"class":169,"line":243},[167,43735,4049],{"class":173},[167,43737,43738],{"class":169,"line":261},[167,43739,3492],{"class":173},[167,43741,43742],{"class":169,"line":273},[167,43743,276],{"class":173},[167,43745,43746,43748,43750],{"class":169,"line":279},[167,43747,282],{"class":173},[167,43749,178],{"class":177},[167,43751,185],{"class":173},[167,43753,43754],{"class":169,"line":289},[167,43755,209],{"emptyLinePlaceholder":208},[167,43757,43758,43760,43762],{"class":169,"line":294},[167,43759,174],{"class":173},[167,43761,299],{"class":177},[167,43763,185],{"class":173},[167,43765,43767,43769,43771,43773,43775,43777,43779,43781,43783],{"class":43766,"line":304},[169,213],[167,43768,307],{"class":173},[167,43770,15],{"class":177},[167,43772,18706],{"class":181},[167,43774,267],{"class":173},[167,43776,43651],{"class":201},[167,43778,10307],{"class":181},[167,43780,267],{"class":173},[167,43782,27391],{"class":201},[167,43784,185],{"class":173},[167,43786,43787],{"class":169,"line":313},[167,43788,43664],{"class":173},[167,43790,43791,43793,43795],{"class":169,"line":161},[167,43792,504],{"class":173},[167,43794,15],{"class":177},[167,43796,185],{"class":173},[167,43798,43799,43801,43803],{"class":169,"line":335},[167,43800,282],{"class":173},[167,43802,299],{"class":177},[167,43804,185],{"class":173},[3087,43806,43808],{"id":43807},"_2-iterar-un-objeto","2) Iterar un objeto",[154,43810,43813],{"className":156,"code":43811,"filename":3260,"highlights":43812,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst profile = ref({\n  name: 'Cristian',\n  role: 'Frontend Dev',\n  country: 'Colombia'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"(value, key) in profile\" :key=\"key\">\n    {{ key }}: {{ value }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[304],[87,43814,43815,43825,43835,43839,43852,43861,43871,43879,43883,43891,43895,43903,43926,43931,43939],{"__ignoreMap":163},[167,43816,43817,43819,43821,43823],{"class":169,"line":170},[167,43818,174],{"class":173},[167,43820,178],{"class":177},[167,43822,182],{"class":181},[167,43824,185],{"class":173},[167,43826,43827,43829,43831,43833],{"class":169,"line":188},[167,43828,192],{"class":191},[167,43830,195],{"class":173},[167,43832,198],{"class":191},[167,43834,202],{"class":201},[167,43836,43837],{"class":169,"line":205},[167,43838,209],{"emptyLinePlaceholder":208},[167,43840,43841,43843,43846,43848,43850],{"class":169,"line":160},[167,43842,216],{"class":191},[167,43844,43845],{"class":219}," profile",[167,43847,223],{"class":191},[167,43849,226],{"class":181},[167,43851,372],{"class":173},[167,43853,43854,43856,43859],{"class":169,"line":238},[167,43855,4398],{"class":173},[167,43857,43858],{"class":201},"'Cristian'",[167,43860,393],{"class":173},[167,43862,43863,43866,43869],{"class":169,"line":243},[167,43864,43865],{"class":173},"  role: ",[167,43867,43868],{"class":201},"'Frontend Dev'",[167,43870,393],{"class":173},[167,43872,43873,43876],{"class":169,"line":261},[167,43874,43875],{"class":173},"  country: ",[167,43877,43878],{"class":201},"'Colombia'\n",[167,43880,43881],{"class":169,"line":273},[167,43882,403],{"class":173},[167,43884,43885,43887,43889],{"class":169,"line":279},[167,43886,282],{"class":173},[167,43888,178],{"class":177},[167,43890,185],{"class":173},[167,43892,43893],{"class":169,"line":289},[167,43894,209],{"emptyLinePlaceholder":208},[167,43896,43897,43899,43901],{"class":169,"line":294},[167,43898,174],{"class":173},[167,43900,299],{"class":177},[167,43902,185],{"class":173},[167,43904,43906,43908,43910,43912,43914,43917,43919,43921,43924],{"class":43905,"line":304},[169,213],[167,43907,307],{"class":173},[167,43909,36],{"class":177},[167,43911,18706],{"class":181},[167,43913,267],{"class":173},[167,43915,43916],{"class":201},"\"(value, key) in profile\"",[167,43918,10307],{"class":181},[167,43920,267],{"class":173},[167,43922,43923],{"class":201},"\"key\"",[167,43925,185],{"class":173},[167,43927,43928],{"class":169,"line":313},[167,43929,43930],{"class":173},"    {{ key }}: {{ value }}\n",[167,43932,43933,43935,43937],{"class":169,"line":161},[167,43934,504],{"class":173},[167,43936,36],{"class":177},[167,43938,185],{"class":173},[167,43940,43941,43943,43945],{"class":169,"line":335},[167,43942,282],{"class":173},[167,43944,299],{"class":177},[167,43946,185],{"class":173},[154,43948,43951],{"className":156,"code":43949,"filename":3973,"highlights":43950,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      profile: {\n        name: 'Cristian',\n        role: 'Frontend Dev',\n        country: 'Colombia'\n      }\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"(value, key) in profile\" :key=\"key\">\n    {{ key }}: {{ value }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[341],[87,43952,43953,43961,43969,43975,43981,43986,43995,44004,44011,44015,44019,44023,44027,44035,44039,44047,44068,44072,44080],{"__ignoreMap":163},[167,43954,43955,43957,43959],{"class":169,"line":170},[167,43956,174],{"class":173},[167,43958,178],{"class":177},[167,43960,185],{"class":173},[167,43962,43963,43965,43967],{"class":169,"line":188},[167,43964,608],{"class":191},[167,43966,3991],{"class":191},[167,43968,1905],{"class":173},[167,43970,43971,43973],{"class":169,"line":205},[167,43972,7176],{"class":181},[167,43974,763],{"class":173},[167,43976,43977,43979],{"class":169,"line":160},[167,43978,1937],{"class":191},[167,43980,1905],{"class":173},[167,43982,43983],{"class":169,"line":238},[167,43984,43985],{"class":173},"      profile: {\n",[167,43987,43988,43991,43993],{"class":169,"line":243},[167,43989,43990],{"class":173},"        name: ",[167,43992,43858],{"class":201},[167,43994,393],{"class":173},[167,43996,43997,44000,44002],{"class":169,"line":261},[167,43998,43999],{"class":173},"        role: ",[167,44001,43868],{"class":201},[167,44003,393],{"class":173},[167,44005,44006,44009],{"class":169,"line":273},[167,44007,44008],{"class":173},"        country: ",[167,44010,43878],{"class":201},[167,44012,44013],{"class":169,"line":279},[167,44014,7287],{"class":173},[167,44016,44017],{"class":169,"line":289},[167,44018,4049],{"class":173},[167,44020,44021],{"class":169,"line":294},[167,44022,3492],{"class":173},[167,44024,44025],{"class":169,"line":304},[167,44026,276],{"class":173},[167,44028,44029,44031,44033],{"class":169,"line":313},[167,44030,282],{"class":173},[167,44032,178],{"class":177},[167,44034,185],{"class":173},[167,44036,44037],{"class":169,"line":161},[167,44038,209],{"emptyLinePlaceholder":208},[167,44040,44041,44043,44045],{"class":169,"line":335},[167,44042,174],{"class":173},[167,44044,299],{"class":177},[167,44046,185],{"class":173},[167,44048,44050,44052,44054,44056,44058,44060,44062,44064,44066],{"class":44049,"line":341},[169,213],[167,44051,307],{"class":173},[167,44053,36],{"class":177},[167,44055,18706],{"class":181},[167,44057,267],{"class":173},[167,44059,43916],{"class":201},[167,44061,10307],{"class":181},[167,44063,267],{"class":173},[167,44065,43923],{"class":201},[167,44067,185],{"class":173},[167,44069,44070],{"class":169,"line":489},[167,44071,43930],{"class":173},[167,44073,44074,44076,44078],{"class":169,"line":495},[167,44075,504],{"class":173},[167,44077,36],{"class":177},[167,44079,185],{"class":173},[167,44081,44082,44084,44086],{"class":169,"line":501},[167,44083,282],{"class":173},[167,44085,299],{"class":177},[167,44087,185],{"class":173},[3087,44089,44091,44092],{"id":44090},"_3-repetir-varios-nodos-con-template","3) Repetir varios nodos con ",[87,44093,299],{},[154,44095,44098],{"className":156,"code":44096,"filename":3260,"highlights":44097,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst items = ref([\n  { id: 1, title: 'Vue 3', description: 'Framework progresivo' },\n  { id: 2, title: 'Pinia', description: 'Estado global moderno' }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n    \u003Ch3>{{ item.title }}\u003C\u002Fh3>\n    \u003Cp>{{ item.description }}\u003C\u002Fp>\n    \u003Chr \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002Ftemplate>\n",[294],[87,44099,44100,44110,44120,44124,44136,44155,44173,44177,44185,44189,44197,44235,44248,44261,44270,44278],{"__ignoreMap":163},[167,44101,44102,44104,44106,44108],{"class":169,"line":170},[167,44103,174],{"class":173},[167,44105,178],{"class":177},[167,44107,182],{"class":181},[167,44109,185],{"class":173},[167,44111,44112,44114,44116,44118],{"class":169,"line":188},[167,44113,192],{"class":191},[167,44115,195],{"class":173},[167,44117,198],{"class":191},[167,44119,202],{"class":201},[167,44121,44122],{"class":169,"line":205},[167,44123,209],{"emptyLinePlaceholder":208},[167,44125,44126,44128,44130,44132,44134],{"class":169,"line":160},[167,44127,216],{"class":191},[167,44129,1820],{"class":219},[167,44131,223],{"class":191},[167,44133,226],{"class":181},[167,44135,1827],{"class":173},[167,44137,44138,44140,44142,44144,44147,44150,44153],{"class":169,"line":238},[167,44139,1832],{"class":173},[167,44141,1835],{"class":219},[167,44143,3383],{"class":173},[167,44145,44146],{"class":201},"'Vue 3'",[167,44148,44149],{"class":173},", description: ",[167,44151,44152],{"class":201},"'Framework progresivo'",[167,44154,1856],{"class":173},[167,44156,44157,44159,44161,44163,44166,44168,44171],{"class":169,"line":243},[167,44158,1832],{"class":173},[167,44160,1853],{"class":219},[167,44162,3383],{"class":173},[167,44164,44165],{"class":201},"'Pinia'",[167,44167,44149],{"class":173},[167,44169,44170],{"class":201},"'Estado global moderno'",[167,44172,599],{"class":173},[167,44174,44175],{"class":169,"line":261},[167,44176,429],{"class":173},[167,44178,44179,44181,44183],{"class":169,"line":273},[167,44180,282],{"class":173},[167,44182,178],{"class":177},[167,44184,185],{"class":173},[167,44186,44187],{"class":169,"line":279},[167,44188,209],{"emptyLinePlaceholder":208},[167,44190,44191,44193,44195],{"class":169,"line":289},[167,44192,174],{"class":173},[167,44194,299],{"class":177},[167,44196,185],{"class":173},[167,44198,44200,44202,44204,44206,44208,44210,44213,44216,44218,44220,44222,44224,44226,44228,44231,44233],{"class":44199,"line":294},[169,213],[167,44201,307],{"class":173},[167,44203,299],{"class":177},[167,44205,18706],{"class":191},[167,44207,267],{"class":173},[167,44209,5080],{"class":201},[167,44211,44212],{"class":173},"item ",[167,44214,44215],{"class":191},"in",[167,44217,1820],{"class":173},[167,44219,5080],{"class":201},[167,44221,5312],{"class":173},[167,44223,7845],{"class":181},[167,44225,267],{"class":173},[167,44227,5080],{"class":201},[167,44229,44230],{"class":173},"item.id",[167,44232,5080],{"class":201},[167,44234,185],{"class":173},[167,44236,44237,44239,44241,44244,44246],{"class":169,"line":304},[167,44238,1257],{"class":173},[167,44240,3087],{"class":177},[167,44242,44243],{"class":173},">{{ item.title }}\u003C\u002F",[167,44245,3087],{"class":177},[167,44247,185],{"class":173},[167,44249,44250,44252,44254,44257,44259],{"class":169,"line":313},[167,44251,1257],{"class":173},[167,44253,15],{"class":177},[167,44255,44256],{"class":173},">{{ item.description }}\u003C\u002F",[167,44258,15],{"class":177},[167,44260,185],{"class":173},[167,44262,44263,44265,44268],{"class":169,"line":161},[167,44264,1257],{"class":173},[167,44266,44267],{"class":177},"hr",[167,44269,5325],{"class":173},[167,44271,44272,44274,44276],{"class":169,"line":335},[167,44273,504],{"class":173},[167,44275,299],{"class":177},[167,44277,185],{"class":173},[167,44279,44280,44282,44284],{"class":169,"line":341},[167,44281,282],{"class":173},[167,44283,299],{"class":177},[167,44285,185],{"class":173},[154,44287,44290],{"className":156,"code":44288,"filename":3973,"highlights":44289,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      items: [\n        { id: 1, title: 'Vue 3', description: 'Framework progresivo' },\n        { id: 2, title: 'Pinia', description: 'Estado global moderno' }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n    \u003Ch3>{{ item.title }}\u003C\u002Fh3>\n    \u003Cp>{{ item.description }}\u003C\u002Fp>\n    \u003Chr \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002Ftemplate>\n",[335],[87,44291,44292,44300,44308,44314,44320,44325,44341,44357,44361,44365,44369,44373,44381,44385,44393,44428,44440,44452,44460,44468],{"__ignoreMap":163},[167,44293,44294,44296,44298],{"class":169,"line":170},[167,44295,174],{"class":173},[167,44297,178],{"class":177},[167,44299,185],{"class":173},[167,44301,44302,44304,44306],{"class":169,"line":188},[167,44303,608],{"class":191},[167,44305,3991],{"class":191},[167,44307,1905],{"class":173},[167,44309,44310,44312],{"class":169,"line":205},[167,44311,7176],{"class":181},[167,44313,763],{"class":173},[167,44315,44316,44318],{"class":169,"line":160},[167,44317,1937],{"class":191},[167,44319,1905],{"class":173},[167,44321,44322],{"class":169,"line":238},[167,44323,44324],{"class":173},"      items: [\n",[167,44326,44327,44329,44331,44333,44335,44337,44339],{"class":169,"line":243},[167,44328,8677],{"class":173},[167,44330,1835],{"class":219},[167,44332,3383],{"class":173},[167,44334,44146],{"class":201},[167,44336,44149],{"class":173},[167,44338,44152],{"class":201},[167,44340,1856],{"class":173},[167,44342,44343,44345,44347,44349,44351,44353,44355],{"class":169,"line":261},[167,44344,8677],{"class":173},[167,44346,1853],{"class":219},[167,44348,3383],{"class":173},[167,44350,44165],{"class":201},[167,44352,44149],{"class":173},[167,44354,44170],{"class":201},[167,44356,599],{"class":173},[167,44358,44359],{"class":169,"line":273},[167,44360,8738],{"class":173},[167,44362,44363],{"class":169,"line":279},[167,44364,4049],{"class":173},[167,44366,44367],{"class":169,"line":289},[167,44368,3492],{"class":173},[167,44370,44371],{"class":169,"line":294},[167,44372,276],{"class":173},[167,44374,44375,44377,44379],{"class":169,"line":304},[167,44376,282],{"class":173},[167,44378,178],{"class":177},[167,44380,185],{"class":173},[167,44382,44383],{"class":169,"line":313},[167,44384,209],{"emptyLinePlaceholder":208},[167,44386,44387,44389,44391],{"class":169,"line":161},[167,44388,174],{"class":173},[167,44390,299],{"class":177},[167,44392,185],{"class":173},[167,44394,44396,44398,44400,44402,44404,44406,44408,44410,44412,44414,44416,44418,44420,44422,44424,44426],{"class":44395,"line":335},[169,213],[167,44397,307],{"class":173},[167,44399,299],{"class":177},[167,44401,18706],{"class":191},[167,44403,267],{"class":173},[167,44405,5080],{"class":201},[167,44407,44212],{"class":173},[167,44409,44215],{"class":191},[167,44411,1820],{"class":173},[167,44413,5080],{"class":201},[167,44415,5312],{"class":173},[167,44417,7845],{"class":181},[167,44419,267],{"class":173},[167,44421,5080],{"class":201},[167,44423,44230],{"class":173},[167,44425,5080],{"class":201},[167,44427,185],{"class":173},[167,44429,44430,44432,44434,44436,44438],{"class":169,"line":341},[167,44431,1257],{"class":173},[167,44433,3087],{"class":177},[167,44435,44243],{"class":173},[167,44437,3087],{"class":177},[167,44439,185],{"class":173},[167,44441,44442,44444,44446,44448,44450],{"class":169,"line":489},[167,44443,1257],{"class":173},[167,44445,15],{"class":177},[167,44447,44256],{"class":173},[167,44449,15],{"class":177},[167,44451,185],{"class":173},[167,44453,44454,44456,44458],{"class":169,"line":495},[167,44455,1257],{"class":173},[167,44457,44267],{"class":177},[167,44459,5325],{"class":173},[167,44461,44462,44464,44466],{"class":169,"line":501},[167,44463,504],{"class":173},[167,44465,299],{"class":177},[167,44467,185],{"class":173},[167,44469,44470,44472,44474],{"class":169,"line":512},[167,44471,282],{"class":173},[167,44473,299],{"class":177},[167,44475,185],{"class":173},[22,44477,44479],{"id":44478},"nivel-avanzado-listas-derivadas-componentes-y-anidación","Nivel avanzado: listas derivadas, componentes y anidación",[3087,44481,44483,44484],{"id":44482},"_1-prefiltrar-y-ordenar-con-computed","1) Prefiltrar y ordenar con ",[87,44485,1661],{},[15,44487,44488,44489,44491,44492,1679],{},"No hagas lógica pesada dentro del ",[87,44490,30726],{},".\nDeriva la lista antes, con ",[87,44493,1661],{},[154,44495,44498],{"className":156,"code":44496,"filename":3260,"highlights":44497,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst products = ref([\n  { id: 1, name: 'Laptop', price: 1200, stock: 5 },\n  { id: 2, name: 'Mouse', price: 25, stock: 0 },\n  { id: 3, name: 'Keyboard', price: 80, stock: 12 }\n])\n\nconst inStockSorted = computed(() => {\n  return products.value\n    .filter(product => product.stock > 0)\n    .slice()\n    .sort((a, b) => a.price - b.price)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"product in inStockSorted\" :key=\"product.id\">\n    {{ product.name }} - ${{ product.price }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[289,294,304,313,161,335,501],[87,44499,44500,44510,44520,44524,44536,44559,44581,44604,44608,44612,44630,44638,44662,44672,44702,44707,44715,44719,44727,44750,44755,44763],{"__ignoreMap":163},[167,44501,44502,44504,44506,44508],{"class":169,"line":170},[167,44503,174],{"class":173},[167,44505,178],{"class":177},[167,44507,182],{"class":181},[167,44509,185],{"class":173},[167,44511,44512,44514,44516,44518],{"class":169,"line":188},[167,44513,192],{"class":191},[167,44515,1805],{"class":173},[167,44517,198],{"class":191},[167,44519,202],{"class":201},[167,44521,44522],{"class":169,"line":205},[167,44523,209],{"emptyLinePlaceholder":208},[167,44525,44526,44528,44530,44532,44534],{"class":169,"line":160},[167,44527,216],{"class":191},[167,44529,35434],{"class":219},[167,44531,223],{"class":191},[167,44533,226],{"class":181},[167,44535,1827],{"class":173},[167,44537,44538,44540,44542,44544,44547,44549,44552,44554,44557],{"class":169,"line":238},[167,44539,1832],{"class":173},[167,44541,1835],{"class":219},[167,44543,1838],{"class":173},[167,44545,44546],{"class":201},"'Laptop'",[167,44548,1844],{"class":173},[167,44550,44551],{"class":219},"1200",[167,44553,35459],{"class":173},[167,44555,44556],{"class":219},"5",[167,44558,1856],{"class":173},[167,44560,44561,44563,44565,44567,44570,44572,44575,44577,44579],{"class":169,"line":243},[167,44562,1832],{"class":173},[167,44564,1853],{"class":219},[167,44566,1838],{"class":173},[167,44568,44569],{"class":201},"'Mouse'",[167,44571,1844],{"class":173},[167,44573,44574],{"class":219},"25",[167,44576,35459],{"class":173},[167,44578,1960],{"class":219},[167,44580,1856],{"class":173},[167,44582,44583,44585,44587,44589,44592,44594,44597,44599,44602],{"class":169,"line":261},[167,44584,1832],{"class":173},[167,44586,8203],{"class":219},[167,44588,1838],{"class":173},[167,44590,44591],{"class":201},"'Keyboard'",[167,44593,1844],{"class":173},[167,44595,44596],{"class":219},"80",[167,44598,35459],{"class":173},[167,44600,44601],{"class":219},"12",[167,44603,599],{"class":173},[167,44605,44606],{"class":169,"line":273},[167,44607,429],{"class":173},[167,44609,44610],{"class":169,"line":279},[167,44611,209],{"emptyLinePlaceholder":208},[167,44613,44615,44617,44620,44622,44624,44626,44628],{"class":44614,"line":289},[169,213],[167,44616,216],{"class":191},[167,44618,44619],{"class":219}," inStockSorted",[167,44621,223],{"class":191},[167,44623,1898],{"class":181},[167,44625,1493],{"class":173},[167,44627,639],{"class":191},[167,44629,1905],{"class":173},[167,44631,44633,44635],{"class":44632,"line":294},[169,213],[167,44634,1539],{"class":191},[167,44636,44637],{"class":173}," products.value\n",[167,44639,44641,44644,44646,44648,44650,44652,44655,44657,44660],{"class":44640,"line":304},[169,213],[167,44642,44643],{"class":173},"    .",[167,44645,8252],{"class":181},[167,44647,229],{"class":173},[167,44649,6968],{"class":254},[167,44651,8259],{"class":191},[167,44653,44654],{"class":173}," product.stock ",[167,44656,15863],{"class":191},[167,44658,44659],{"class":219}," 0",[167,44661,235],{"class":173},[167,44663,44665,44667,44670],{"class":44664,"line":313},[169,213],[167,44666,44643],{"class":173},[167,44668,44669],{"class":181},"slice",[167,44671,2917],{"class":173},[167,44673,44675,44677,44680,44682,44684,44686,44689,44691,44693,44696,44699],{"class":44674,"line":161},[169,213],[167,44676,44643],{"class":173},[167,44678,44679],{"class":181},"sort",[167,44681,1918],{"class":173},[167,44683,19092],{"class":254},[167,44685,1025],{"class":173},[167,44687,44688],{"class":254},"b",[167,44690,693],{"class":173},[167,44692,639],{"class":191},[167,44694,44695],{"class":173}," a.price ",[167,44697,44698],{"class":191},"-",[167,44700,44701],{"class":173}," b.price)\n",[167,44703,44705],{"class":44704,"line":335},[169,213],[167,44706,403],{"class":173},[167,44708,44709,44711,44713],{"class":169,"line":341},[167,44710,282],{"class":173},[167,44712,178],{"class":177},[167,44714,185],{"class":173},[167,44716,44717],{"class":169,"line":489},[167,44718,209],{"emptyLinePlaceholder":208},[167,44720,44721,44723,44725],{"class":169,"line":495},[167,44722,174],{"class":173},[167,44724,299],{"class":177},[167,44726,185],{"class":173},[167,44728,44730,44732,44734,44736,44738,44741,44743,44745,44748],{"class":44729,"line":501},[169,213],[167,44731,307],{"class":173},[167,44733,36],{"class":177},[167,44735,18706],{"class":181},[167,44737,267],{"class":173},[167,44739,44740],{"class":201},"\"product in inStockSorted\"",[167,44742,10307],{"class":181},[167,44744,267],{"class":173},[167,44746,44747],{"class":201},"\"product.id\"",[167,44749,185],{"class":173},[167,44751,44752],{"class":169,"line":512},[167,44753,44754],{"class":173},"    {{ product.name }} - ${{ product.price }}\n",[167,44756,44757,44759,44761],{"class":169,"line":781},[167,44758,504],{"class":173},[167,44760,36],{"class":177},[167,44762,185],{"class":173},[167,44764,44765,44767,44769],{"class":169,"line":786},[167,44766,282],{"class":173},[167,44768,299],{"class":177},[167,44770,185],{"class":173},[154,44772,44775],{"className":156,"code":44773,"filename":3973,"highlights":44774,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      products: [\n        { id: 1, name: 'Laptop', price: 1200, stock: 5 },\n        { id: 2, name: 'Mouse', price: 25, stock: 0 },\n        { id: 3, name: 'Keyboard', price: 80, stock: 12 }\n      ]\n    }\n  },\n  computed: {\n    inStockSorted() {\n      return this.products\n        .filter(product => product.stock > 0)\n        .slice()\n        .sort((a, b) => a.price - b.price)\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"product in inStockSorted\" :key=\"product.id\">\n    {{ product.name }} - ${{ product.price }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[304,313,161,335,341,489,495,501,2692],[87,44776,44777,44785,44793,44799,44805,44809,44829,44849,44869,44873,44877,44881,44886,44894,44904,44926,44935,44960,44965,44970,44974,44982,44986,44994,45015,45019,45027],{"__ignoreMap":163},[167,44778,44779,44781,44783],{"class":169,"line":170},[167,44780,174],{"class":173},[167,44782,178],{"class":177},[167,44784,185],{"class":173},[167,44786,44787,44789,44791],{"class":169,"line":188},[167,44788,608],{"class":191},[167,44790,3991],{"class":191},[167,44792,1905],{"class":173},[167,44794,44795,44797],{"class":169,"line":205},[167,44796,7176],{"class":181},[167,44798,763],{"class":173},[167,44800,44801,44803],{"class":169,"line":160},[167,44802,1937],{"class":191},[167,44804,1905],{"class":173},[167,44806,44807],{"class":169,"line":238},[167,44808,36190],{"class":173},[167,44810,44811,44813,44815,44817,44819,44821,44823,44825,44827],{"class":169,"line":243},[167,44812,8677],{"class":173},[167,44814,1835],{"class":219},[167,44816,1838],{"class":173},[167,44818,44546],{"class":201},[167,44820,1844],{"class":173},[167,44822,44551],{"class":219},[167,44824,35459],{"class":173},[167,44826,44556],{"class":219},[167,44828,1856],{"class":173},[167,44830,44831,44833,44835,44837,44839,44841,44843,44845,44847],{"class":169,"line":261},[167,44832,8677],{"class":173},[167,44834,1853],{"class":219},[167,44836,1838],{"class":173},[167,44838,44569],{"class":201},[167,44840,1844],{"class":173},[167,44842,44574],{"class":219},[167,44844,35459],{"class":173},[167,44846,1960],{"class":219},[167,44848,1856],{"class":173},[167,44850,44851,44853,44855,44857,44859,44861,44863,44865,44867],{"class":169,"line":273},[167,44852,8677],{"class":173},[167,44854,8203],{"class":219},[167,44856,1838],{"class":173},[167,44858,44591],{"class":201},[167,44860,1844],{"class":173},[167,44862,44596],{"class":219},[167,44864,35459],{"class":173},[167,44866,44601],{"class":219},[167,44868,599],{"class":173},[167,44870,44871],{"class":169,"line":279},[167,44872,8738],{"class":173},[167,44874,44875],{"class":169,"line":289},[167,44876,4049],{"class":173},[167,44878,44879],{"class":169,"line":294},[167,44880,398],{"class":173},[167,44882,44884],{"class":44883,"line":304},[169,213],[167,44885,8755],{"class":173},[167,44887,44889,44892],{"class":44888,"line":313},[169,213],[167,44890,44891],{"class":181},"    inStockSorted",[167,44893,763],{"class":173},[167,44895,44897,44899,44901],{"class":44896,"line":161},[169,213],[167,44898,8767],{"class":191},[167,44900,7351],{"class":219},[167,44902,44903],{"class":173},".products\n",[167,44905,44907,44910,44912,44914,44916,44918,44920,44922,44924],{"class":44906,"line":335},[169,213],[167,44908,44909],{"class":173},"        .",[167,44911,8252],{"class":181},[167,44913,229],{"class":173},[167,44915,6968],{"class":254},[167,44917,8259],{"class":191},[167,44919,44654],{"class":173},[167,44921,15863],{"class":191},[167,44923,44659],{"class":219},[167,44925,235],{"class":173},[167,44927,44929,44931,44933],{"class":44928,"line":341},[169,213],[167,44930,44909],{"class":173},[167,44932,44669],{"class":181},[167,44934,2917],{"class":173},[167,44936,44938,44940,44942,44944,44946,44948,44950,44952,44954,44956,44958],{"class":44937,"line":489},[169,213],[167,44939,44909],{"class":173},[167,44941,44679],{"class":181},[167,44943,1918],{"class":173},[167,44945,19092],{"class":254},[167,44947,1025],{"class":173},[167,44949,44688],{"class":254},[167,44951,693],{"class":173},[167,44953,639],{"class":191},[167,44955,44695],{"class":173},[167,44957,44698],{"class":191},[167,44959,44701],{"class":173},[167,44961,44963],{"class":44962,"line":495},[169,213],[167,44964,4049],{"class":173},[167,44966,44968],{"class":44967,"line":501},[169,213],[167,44969,3492],{"class":173},[167,44971,44972],{"class":169,"line":512},[167,44973,276],{"class":173},[167,44975,44976,44978,44980],{"class":169,"line":781},[167,44977,282],{"class":173},[167,44979,178],{"class":177},[167,44981,185],{"class":173},[167,44983,44984],{"class":169,"line":786},[167,44985,209],{"emptyLinePlaceholder":208},[167,44987,44988,44990,44992],{"class":169,"line":2678},[167,44989,174],{"class":173},[167,44991,299],{"class":177},[167,44993,185],{"class":173},[167,44995,44997,44999,45001,45003,45005,45007,45009,45011,45013],{"class":44996,"line":2692},[169,213],[167,44998,307],{"class":173},[167,45000,36],{"class":177},[167,45002,18706],{"class":181},[167,45004,267],{"class":173},[167,45006,44740],{"class":201},[167,45008,10307],{"class":181},[167,45010,267],{"class":173},[167,45012,44747],{"class":201},[167,45014,185],{"class":173},[167,45016,45017],{"class":169,"line":3575},[167,45018,44754],{"class":173},[167,45020,45021,45023,45025],{"class":169,"line":5028},[167,45022,504],{"class":173},[167,45024,36],{"class":177},[167,45026,185],{"class":173},[167,45028,45029,45031,45033],{"class":169,"line":5037},[167,45030,282],{"class":173},[167,45032,299],{"class":177},[167,45034,185],{"class":173},[3087,45036,45038,45039],{"id":45037},"_2-renderizar-componentes-con-v-for","2) Renderizar componentes con ",[87,45040,30726],{},[154,45042,45045],{"className":156,"code":45043,"filename":3260,"highlights":45044,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport UserCard from '~\u002Fcomponents\u002FUserCard.vue'\n\nconst users = ref([\n  { id: 'u1', name: 'Ana', role: 'Admin' },\n  { id: 'u2', name: 'Luis', role: 'Editor' }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUserCard v-for=\"user in users\" :key=\"user.id\" :user=\"user\" \u002F>\n\u003C\u002Ftemplate>\n",[304],[87,45046,45047,45057,45067,45079,45083,45095,45113,45131,45135,45143,45147,45155,45182],{"__ignoreMap":163},[167,45048,45049,45051,45053,45055],{"class":169,"line":170},[167,45050,174],{"class":173},[167,45052,178],{"class":177},[167,45054,182],{"class":181},[167,45056,185],{"class":173},[167,45058,45059,45061,45063,45065],{"class":169,"line":188},[167,45060,192],{"class":191},[167,45062,195],{"class":173},[167,45064,198],{"class":191},[167,45066,202],{"class":201},[167,45068,45069,45071,45074,45076],{"class":169,"line":205},[167,45070,192],{"class":191},[167,45072,45073],{"class":173}," UserCard ",[167,45075,198],{"class":191},[167,45077,45078],{"class":201}," '~\u002Fcomponents\u002FUserCard.vue'\n",[167,45080,45081],{"class":169,"line":160},[167,45082,209],{"emptyLinePlaceholder":208},[167,45084,45085,45087,45089,45091,45093],{"class":169,"line":238},[167,45086,216],{"class":191},[167,45088,16954],{"class":219},[167,45090,223],{"class":191},[167,45092,226],{"class":181},[167,45094,1827],{"class":173},[167,45096,45097,45099,45102,45104,45106,45108,45111],{"class":169,"line":243},[167,45098,1832],{"class":173},[167,45100,45101],{"class":201},"'u1'",[167,45103,1838],{"class":173},[167,45105,8172],{"class":201},[167,45107,33090],{"class":173},[167,45109,45110],{"class":201},"'Admin'",[167,45112,1856],{"class":173},[167,45114,45115,45117,45120,45122,45124,45126,45129],{"class":169,"line":261},[167,45116,1832],{"class":173},[167,45118,45119],{"class":201},"'u2'",[167,45121,1838],{"class":173},[167,45123,8194],{"class":201},[167,45125,33090],{"class":173},[167,45127,45128],{"class":201},"'Editor'",[167,45130,599],{"class":173},[167,45132,45133],{"class":169,"line":273},[167,45134,429],{"class":173},[167,45136,45137,45139,45141],{"class":169,"line":279},[167,45138,282],{"class":173},[167,45140,178],{"class":177},[167,45142,185],{"class":173},[167,45144,45145],{"class":169,"line":289},[167,45146,209],{"emptyLinePlaceholder":208},[167,45148,45149,45151,45153],{"class":169,"line":294},[167,45150,174],{"class":173},[167,45152,299],{"class":177},[167,45154,185],{"class":173},[167,45156,45158,45160,45162,45164,45166,45168,45170,45172,45174,45176,45178,45180],{"class":45157,"line":304},[169,213],[167,45159,307],{"class":173},[167,45161,5309],{"class":177},[167,45163,18706],{"class":181},[167,45165,267],{"class":173},[167,45167,18711],{"class":201},[167,45169,10307],{"class":181},[167,45171,267],{"class":173},[167,45173,18718],{"class":201},[167,45175,32945],{"class":181},[167,45177,267],{"class":173},[167,45179,27391],{"class":201},[167,45181,5325],{"class":173},[167,45183,45184,45186,45188],{"class":169,"line":313},[167,45185,282],{"class":173},[167,45187,299],{"class":177},[167,45189,185],{"class":173},[154,45191,45194],{"className":156,"code":45192,"filename":3973,"highlights":45193,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport UserCard from '~\u002Fcomponents\u002FUserCard.vue'\n\nexport default {\n  components: { UserCard },\n  data() {\n    return {\n      users: [\n        { id: 'u1', name: 'Ana', role: 'Admin' },\n        { id: 'u2', name: 'Luis', role: 'Editor' }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUserCard v-for=\"user in users\" :key=\"user.id\" :user=\"user\" \u002F>\n\u003C\u002Ftemplate>\n",[495],[87,45195,45196,45204,45214,45218,45226,45231,45237,45243,45247,45263,45279,45283,45287,45291,45295,45303,45307,45315,45342],{"__ignoreMap":163},[167,45197,45198,45200,45202],{"class":169,"line":170},[167,45199,174],{"class":173},[167,45201,178],{"class":177},[167,45203,185],{"class":173},[167,45205,45206,45208,45210,45212],{"class":169,"line":188},[167,45207,192],{"class":191},[167,45209,45073],{"class":173},[167,45211,198],{"class":191},[167,45213,45078],{"class":201},[167,45215,45216],{"class":169,"line":205},[167,45217,209],{"emptyLinePlaceholder":208},[167,45219,45220,45222,45224],{"class":169,"line":160},[167,45221,608],{"class":191},[167,45223,3991],{"class":191},[167,45225,1905],{"class":173},[167,45227,45228],{"class":169,"line":238},[167,45229,45230],{"class":173},"  components: { UserCard },\n",[167,45232,45233,45235],{"class":169,"line":243},[167,45234,7176],{"class":181},[167,45236,763],{"class":173},[167,45238,45239,45241],{"class":169,"line":261},[167,45240,1937],{"class":191},[167,45242,1905],{"class":173},[167,45244,45245],{"class":169,"line":273},[167,45246,28752],{"class":173},[167,45248,45249,45251,45253,45255,45257,45259,45261],{"class":169,"line":279},[167,45250,8677],{"class":173},[167,45252,45101],{"class":201},[167,45254,1838],{"class":173},[167,45256,8172],{"class":201},[167,45258,33090],{"class":173},[167,45260,45110],{"class":201},[167,45262,1856],{"class":173},[167,45264,45265,45267,45269,45271,45273,45275,45277],{"class":169,"line":289},[167,45266,8677],{"class":173},[167,45268,45119],{"class":201},[167,45270,1838],{"class":173},[167,45272,8194],{"class":201},[167,45274,33090],{"class":173},[167,45276,45128],{"class":201},[167,45278,599],{"class":173},[167,45280,45281],{"class":169,"line":294},[167,45282,8738],{"class":173},[167,45284,45285],{"class":169,"line":304},[167,45286,4049],{"class":173},[167,45288,45289],{"class":169,"line":313},[167,45290,3492],{"class":173},[167,45292,45293],{"class":169,"line":161},[167,45294,276],{"class":173},[167,45296,45297,45299,45301],{"class":169,"line":335},[167,45298,282],{"class":173},[167,45300,178],{"class":177},[167,45302,185],{"class":173},[167,45304,45305],{"class":169,"line":341},[167,45306,209],{"emptyLinePlaceholder":208},[167,45308,45309,45311,45313],{"class":169,"line":489},[167,45310,174],{"class":173},[167,45312,299],{"class":177},[167,45314,185],{"class":173},[167,45316,45318,45320,45322,45324,45326,45328,45330,45332,45334,45336,45338,45340],{"class":45317,"line":495},[169,213],[167,45319,307],{"class":173},[167,45321,5309],{"class":177},[167,45323,18706],{"class":181},[167,45325,267],{"class":173},[167,45327,18711],{"class":201},[167,45329,10307],{"class":181},[167,45331,267],{"class":173},[167,45333,18718],{"class":201},[167,45335,32945],{"class":181},[167,45337,267],{"class":173},[167,45339,27391],{"class":201},[167,45341,5325],{"class":173},[167,45343,45344,45346,45348],{"class":169,"line":501},[167,45345,282],{"class":173},[167,45347,299],{"class":177},[167,45349,185],{"class":173},[3087,45351,45353],{"id":45352},"_3-listas-anidadas-categorías-y-productos","3) Listas anidadas (categorías y productos)",[154,45355,45358],{"className":156,"code":45356,"filename":3260,"highlights":45357,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst categories = ref([\n  {\n    id: 'c1',\n    name: 'Periféricos',\n    products: [\n      { id: 'p1', name: 'Mouse' },\n      { id: 'p2', name: 'Teclado' }\n    ]\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n    \u003Ch3>{{ category.name }}\u003C\u002Fh3>\n    \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n      {{ product.name }}\n    \u003C\u002Fli>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[489,501],[87,45359,45360,45370,45380,45384,45397,45402,45412,45422,45427,45441,45455,45460,45464,45468,45476,45480,45488,45511,45524,45546,45551,45559,45567],{"__ignoreMap":163},[167,45361,45362,45364,45366,45368],{"class":169,"line":170},[167,45363,174],{"class":173},[167,45365,178],{"class":177},[167,45367,182],{"class":181},[167,45369,185],{"class":173},[167,45371,45372,45374,45376,45378],{"class":169,"line":188},[167,45373,192],{"class":191},[167,45375,195],{"class":173},[167,45377,198],{"class":191},[167,45379,202],{"class":201},[167,45381,45382],{"class":169,"line":205},[167,45383,209],{"emptyLinePlaceholder":208},[167,45385,45386,45388,45391,45393,45395],{"class":169,"line":160},[167,45387,216],{"class":191},[167,45389,45390],{"class":219}," categories",[167,45392,223],{"class":191},[167,45394,226],{"class":181},[167,45396,1827],{"class":173},[167,45398,45399],{"class":169,"line":238},[167,45400,45401],{"class":173},"  {\n",[167,45403,45404,45407,45410],{"class":169,"line":243},[167,45405,45406],{"class":173},"    id: ",[167,45408,45409],{"class":201},"'c1'",[167,45411,393],{"class":173},[167,45413,45414,45417,45420],{"class":169,"line":261},[167,45415,45416],{"class":173},"    name: ",[167,45418,45419],{"class":201},"'Periféricos'",[167,45421,393],{"class":173},[167,45423,45424],{"class":169,"line":273},[167,45425,45426],{"class":173},"    products: [\n",[167,45428,45429,45432,45435,45437,45439],{"class":169,"line":279},[167,45430,45431],{"class":173},"      { id: ",[167,45433,45434],{"class":201},"'p1'",[167,45436,1838],{"class":173},[167,45438,44569],{"class":201},[167,45440,1856],{"class":173},[167,45442,45443,45445,45448,45450,45453],{"class":169,"line":289},[167,45444,45431],{"class":173},[167,45446,45447],{"class":201},"'p2'",[167,45449,1838],{"class":173},[167,45451,45452],{"class":201},"'Teclado'",[167,45454,599],{"class":173},[167,45456,45457],{"class":169,"line":294},[167,45458,45459],{"class":173},"    ]\n",[167,45461,45462],{"class":169,"line":304},[167,45463,3492],{"class":173},[167,45465,45466],{"class":169,"line":313},[167,45467,429],{"class":173},[167,45469,45470,45472,45474],{"class":169,"line":161},[167,45471,282],{"class":173},[167,45473,178],{"class":177},[167,45475,185],{"class":173},[167,45477,45478],{"class":169,"line":335},[167,45479,209],{"emptyLinePlaceholder":208},[167,45481,45482,45484,45486],{"class":169,"line":341},[167,45483,174],{"class":173},[167,45485,299],{"class":177},[167,45487,185],{"class":173},[167,45489,45491,45493,45495,45497,45499,45502,45504,45506,45509],{"class":45490,"line":489},[169,213],[167,45492,307],{"class":173},[167,45494,10117],{"class":177},[167,45496,18706],{"class":181},[167,45498,267],{"class":173},[167,45500,45501],{"class":201},"\"category in categories\"",[167,45503,10307],{"class":181},[167,45505,267],{"class":173},[167,45507,45508],{"class":201},"\"category.id\"",[167,45510,185],{"class":173},[167,45512,45513,45515,45517,45520,45522],{"class":169,"line":495},[167,45514,1257],{"class":173},[167,45516,3087],{"class":177},[167,45518,45519],{"class":173},">{{ category.name }}\u003C\u002F",[167,45521,3087],{"class":177},[167,45523,185],{"class":173},[167,45525,45527,45529,45531,45533,45535,45538,45540,45542,45544],{"class":45526,"line":501},[169,213],[167,45528,1257],{"class":173},[167,45530,36],{"class":177},[167,45532,18706],{"class":181},[167,45534,267],{"class":173},[167,45536,45537],{"class":201},"\"product in category.products\"",[167,45539,10307],{"class":181},[167,45541,267],{"class":173},[167,45543,44747],{"class":201},[167,45545,185],{"class":173},[167,45547,45548],{"class":169,"line":512},[167,45549,45550],{"class":173},"      {{ product.name }}\n",[167,45552,45553,45555,45557],{"class":169,"line":781},[167,45554,1292],{"class":173},[167,45556,36],{"class":177},[167,45558,185],{"class":173},[167,45560,45561,45563,45565],{"class":169,"line":786},[167,45562,504],{"class":173},[167,45564,10117],{"class":177},[167,45566,185],{"class":173},[167,45568,45569,45571,45573],{"class":169,"line":2678},[167,45570,282],{"class":173},[167,45572,299],{"class":177},[167,45574,185],{"class":173},[154,45576,45579],{"className":156,"code":45577,"filename":3973,"highlights":45578,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      categories: [\n        {\n          id: 'c1',\n          name: 'Periféricos',\n          products: [\n            { id: 'p1', name: 'Mouse' },\n            { id: 'p2', name: 'Teclado' }\n          ]\n        }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n    \u003Ch3>{{ category.name }}\u003C\u002Fh3>\n    \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n      {{ product.name }}\n    \u003C\u002Fli>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[781,2678],[87,45580,45581,45589,45597,45603,45609,45614,45619,45628,45637,45642,45655,45667,45672,45676,45680,45684,45688,45692,45700,45704,45712,45733,45745,45766,45770,45778,45786],{"__ignoreMap":163},[167,45582,45583,45585,45587],{"class":169,"line":170},[167,45584,174],{"class":173},[167,45586,178],{"class":177},[167,45588,185],{"class":173},[167,45590,45591,45593,45595],{"class":169,"line":188},[167,45592,608],{"class":191},[167,45594,3991],{"class":191},[167,45596,1905],{"class":173},[167,45598,45599,45601],{"class":169,"line":205},[167,45600,7176],{"class":181},[167,45602,763],{"class":173},[167,45604,45605,45607],{"class":169,"line":160},[167,45606,1937],{"class":191},[167,45608,1905],{"class":173},[167,45610,45611],{"class":169,"line":238},[167,45612,45613],{"class":173},"      categories: [\n",[167,45615,45616],{"class":169,"line":243},[167,45617,45618],{"class":173},"        {\n",[167,45620,45621,45624,45626],{"class":169,"line":261},[167,45622,45623],{"class":173},"          id: ",[167,45625,45409],{"class":201},[167,45627,393],{"class":173},[167,45629,45630,45633,45635],{"class":169,"line":273},[167,45631,45632],{"class":173},"          name: ",[167,45634,45419],{"class":201},[167,45636,393],{"class":173},[167,45638,45639],{"class":169,"line":279},[167,45640,45641],{"class":173},"          products: [\n",[167,45643,45644,45647,45649,45651,45653],{"class":169,"line":289},[167,45645,45646],{"class":173},"            { id: ",[167,45648,45434],{"class":201},[167,45650,1838],{"class":173},[167,45652,44569],{"class":201},[167,45654,1856],{"class":173},[167,45656,45657,45659,45661,45663,45665],{"class":169,"line":294},[167,45658,45646],{"class":173},[167,45660,45447],{"class":201},[167,45662,1838],{"class":173},[167,45664,45452],{"class":201},[167,45666,599],{"class":173},[167,45668,45669],{"class":169,"line":304},[167,45670,45671],{"class":173},"          ]\n",[167,45673,45674],{"class":169,"line":313},[167,45675,14822],{"class":173},[167,45677,45678],{"class":169,"line":161},[167,45679,8738],{"class":173},[167,45681,45682],{"class":169,"line":335},[167,45683,4049],{"class":173},[167,45685,45686],{"class":169,"line":341},[167,45687,3492],{"class":173},[167,45689,45690],{"class":169,"line":489},[167,45691,276],{"class":173},[167,45693,45694,45696,45698],{"class":169,"line":495},[167,45695,282],{"class":173},[167,45697,178],{"class":177},[167,45699,185],{"class":173},[167,45701,45702],{"class":169,"line":501},[167,45703,209],{"emptyLinePlaceholder":208},[167,45705,45706,45708,45710],{"class":169,"line":512},[167,45707,174],{"class":173},[167,45709,299],{"class":177},[167,45711,185],{"class":173},[167,45713,45715,45717,45719,45721,45723,45725,45727,45729,45731],{"class":45714,"line":781},[169,213],[167,45716,307],{"class":173},[167,45718,10117],{"class":177},[167,45720,18706],{"class":181},[167,45722,267],{"class":173},[167,45724,45501],{"class":201},[167,45726,10307],{"class":181},[167,45728,267],{"class":173},[167,45730,45508],{"class":201},[167,45732,185],{"class":173},[167,45734,45735,45737,45739,45741,45743],{"class":169,"line":786},[167,45736,1257],{"class":173},[167,45738,3087],{"class":177},[167,45740,45519],{"class":173},[167,45742,3087],{"class":177},[167,45744,185],{"class":173},[167,45746,45748,45750,45752,45754,45756,45758,45760,45762,45764],{"class":45747,"line":2678},[169,213],[167,45749,1257],{"class":173},[167,45751,36],{"class":177},[167,45753,18706],{"class":181},[167,45755,267],{"class":173},[167,45757,45537],{"class":201},[167,45759,10307],{"class":181},[167,45761,267],{"class":173},[167,45763,44747],{"class":201},[167,45765,185],{"class":173},[167,45767,45768],{"class":169,"line":2692},[167,45769,45550],{"class":173},[167,45771,45772,45774,45776],{"class":169,"line":3575},[167,45773,1292],{"class":173},[167,45775,36],{"class":177},[167,45777,185],{"class":173},[167,45779,45780,45782,45784],{"class":169,"line":5028},[167,45781,504],{"class":173},[167,45783,10117],{"class":177},[167,45785,185],{"class":173},[167,45787,45788,45790,45792],{"class":169,"line":5037},[167,45789,282],{"class":173},[167,45791,299],{"class":177},[167,45793,185],{"class":173},[22,45795,45797,45798],{"id":45796},"errores-comunes-con-v-for","Errores comunes con ",[87,45799,30726],{},[3087,45801,26697,45803,42872,45805,45807],{"id":45802},"_1-usar-index-como-key-en-listas-mutables",[87,45804,42871],{},[87,45806,7845],{}," en listas mutables",[154,45809,45812],{"className":156,"code":45810,"filename":39997,"highlights":45811,"language":162,"meta":163,"style":163},"\u003Cli v-for=\"(item, index) in items\" :key=\"index\">\n  {{ item.name }}\n\u003C\u002Fli>\n",[170],[87,45813,45814,45850,45855],{"__ignoreMap":163},[167,45815,45817,45819,45821,45823,45825,45827,45830,45832,45834,45836,45838,45840,45842,45844,45846,45848],{"class":45816,"line":170},[169,213],[167,45818,174],{"class":173},[167,45820,36],{"class":177},[167,45822,18706],{"class":191},[167,45824,267],{"class":173},[167,45826,5080],{"class":201},[167,45828,45829],{"class":173},"(item, index) ",[167,45831,44215],{"class":191},[167,45833,1820],{"class":173},[167,45835,5080],{"class":201},[167,45837,5312],{"class":173},[167,45839,7845],{"class":181},[167,45841,267],{"class":173},[167,45843,5080],{"class":201},[167,45845,42871],{"class":173},[167,45847,5080],{"class":201},[167,45849,185],{"class":173},[167,45851,45852],{"class":169,"line":188},[167,45853,45854],{"class":173},"  {{ item.name }}\n",[167,45856,45857,45859,45861],{"class":169,"line":205},[167,45858,282],{"class":173},[167,45860,36],{"class":177},[167,45862,185],{"class":173},[15,45864,45865],{},"Esto puede romper el estado de cada fila al reordenar o insertar elementos.",[5367,45867,45868],{},[15,45869,45870,45871,45873],{},"Usa una clave estable (",[87,45872,44230],{},") cuando exista.",[3087,45875,45877,45878,1028,45880,45882],{"id":45876},"_2-mezclar-v-if-y-v-for-en-el-mismo-nodo","2) Mezclar ",[87,45879,13496],{},[87,45881,30726],{}," en el mismo nodo",[154,45884,45887],{"className":156,"code":45885,"filename":34162,"highlights":45886,"language":162,"meta":163,"style":163},"\u003Cli v-for=\"user in users\" v-if=\"user.active\" :key=\"user.id\">\n  {{ user.name }}\n\u003C\u002Fli>\n",[170],[87,45888,45889,45936,45941],{"__ignoreMap":163},[167,45890,45892,45894,45896,45898,45900,45902,45905,45907,45909,45911,45913,45915,45917,45920,45922,45924,45926,45928,45930,45932,45934],{"class":45891,"line":170},[169,213],[167,45893,174],{"class":173},[167,45895,36],{"class":177},[167,45897,18706],{"class":191},[167,45899,267],{"class":173},[167,45901,5080],{"class":201},[167,45903,45904],{"class":173},"user ",[167,45906,44215],{"class":191},[167,45908,16954],{"class":173},[167,45910,5080],{"class":201},[167,45912,5694],{"class":191},[167,45914,267],{"class":173},[167,45916,5080],{"class":201},[167,45918,45919],{"class":173},"user.active",[167,45921,5080],{"class":201},[167,45923,5312],{"class":173},[167,45925,7845],{"class":181},[167,45927,267],{"class":173},[167,45929,5080],{"class":201},[167,45931,5190],{"class":173},[167,45933,5080],{"class":201},[167,45935,185],{"class":173},[167,45937,45938],{"class":169,"line":188},[167,45939,45940],{"class":173},"  {{ user.name }}\n",[167,45942,45943,45945,45947],{"class":169,"line":205},[167,45944,282],{"class":173},[167,45946,36],{"class":177},[167,45948,185],{"class":173},[5367,45950,45951],{},[15,45952,45953,45954,45956],{},"Crea una lista ",[87,45955,1661],{}," filtrada e itera esa lista.",[3087,45958,45960,45961],{"id":45959},"_3-mutar-directamente-el-resultado-de-un-computed","3) Mutar directamente el resultado de un ",[87,45962,1661],{},[15,45964,45965],{},"Si derives una lista ordenada\u002Ffiltrada, no la mutas directamente.\nLa fuente de verdad debe seguir siendo el estado original.",[3087,45967,32604,45969,45971],{"id":45968},"_4-key-duplicadas",[87,45970,7845],{}," duplicadas",[15,45973,45974,45975,45977],{},"Si dos elementos comparten la misma ",[87,45976,7845],{},", Vue no puede hacer diff correctamente.\nResultado: renders inconsistentes y bugs visuales difíciles de depurar.",[22,45979,45981],{"id":45980},"buenas-prácticas-rápidas","Buenas prácticas rápidas",[33,45983,45984,45991,45996,45999,46005],{},[36,45985,1582,45986,45988,45989,1679],{},[87,45987,580],{}," estable para ",[87,45990,42780],{},[36,45992,45993,45994,1679],{},"Prefiltra y ordena con ",[87,45995,1661],{},[36,45997,45998],{},"Evita lógica compleja en el template.",[36,46000,46001,46002,46004],{},"Mantén los bloques ",[87,46003,30726],{}," pequeños y legibles.",[36,46006,46007],{},"En listas grandes, considera paginación o virtualización.",[22,46009,23574],{"id":23573},[15,46011,46012,46014],{},[87,46013,30726],{}," no es solo \"pintar arrays\".\nEs una pieza central del renderizado declarativo en Vue.",[15,46016,46017],{},"Si aplicas estas reglas:",[33,46019,46020,46025,46030],{},[36,46021,46022,46024],{},[87,46023,7845],{}," estable",[36,46026,46027,46028],{},"Listas derivadas con ",[87,46029,1661],{},[36,46031,46032],{},"Estructura limpia del template",[15,46034,46035],{},"Vas a tener componentes más predecibles, más performantes y mucho más fáciles de mantener.",[924,46037,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":46039},[46040,46041,46043,46044,46045,46046,46054,46061,46072,46073],{"id":26502,"depth":188,"text":26503},{"id":42826,"depth":188,"text":46042},"Cuándo usar v-for",{"id":6348,"depth":188,"text":6349},{"id":42878,"depth":188,"text":42879},{"id":43129,"depth":188,"text":43130},{"id":43549,"depth":188,"text":46047,"children":46048},"Nivel intermedio: índice, objetos y template v-for",[46049,46051,46052],{"id":43556,"depth":205,"text":46050},"1) Índice en v-for",{"id":43807,"depth":205,"text":43808},{"id":44090,"depth":205,"text":46053},"3) Repetir varios nodos con template",{"id":44478,"depth":188,"text":44479,"children":46055},[46056,46058,46060],{"id":44482,"depth":205,"text":46057},"1) Prefiltrar y ordenar con computed",{"id":45037,"depth":205,"text":46059},"2) Renderizar componentes con v-for",{"id":45352,"depth":205,"text":45353},{"id":45796,"depth":188,"text":46062,"children":46063},"Errores comunes con v-for",[46064,46066,46068,46070],{"id":45802,"depth":205,"text":46065},"1) Usar index como key en listas mutables",{"id":45876,"depth":205,"text":46067},"2) Mezclar v-if y v-for en el mismo nodo",{"id":45959,"depth":205,"text":46069},"3) Mutar directamente el resultado de un computed",{"id":45968,"depth":205,"text":46071},"4) key duplicadas",{"id":45980,"depth":188,"text":45981},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770690176\u002Fdirectives-vue-v-for-guide_itbdds.png","Imagen temporal para portada del artículo sobre v-for en Vue","2026-02-10","Aprende a dominar v-for en Vue con ejemplos prácticos desde lo más básico hasta patrones avanzados, uso correcto de key, errores comunes y buenas prácticas en Composition API y Options API.",{"updatedAt":46079,"coverCaption":23656,"author":946,"keywords":46080},"2026-02-09T21:30:00-05:00",[3258,30726,46081,7845,3260,3973,16579],"listas","\u002Fblog\u002Fdirectives-vue-v-for-guide.es",[46084],{"headline":46085,"author":46086,"datePublished":46079,"@type":961},"Directiva v-for en Vue: guía completa de básico a avanzado",{"name":946,"@type":959},{"title":42751,"description":46077},"blog\u002Fdirectives-vue-v-for-guide.es",[46090,46091,46093,46094],{"tag":26466,"color":26467},{"tag":46092,"color":3270},"Listas",{"tag":27757,"color":27758},{"tag":5424,"color":5425},"h_Z-6C71ir_sIzxviVE8eEY3vMd8ZVXbADx8GTll9U8",{"id":46097,"title":46098,"body":46099,"cover":47938,"coverAlt":47939,"date":47940,"description":47941,"draft":940,"extension":941,"lab":942,"locale":943,"meta":47942,"navigation":208,"path":47948,"schemaOrg":47949,"seo":47953,"series":26460,"seriesDescription":26461,"seriesOrder":188,"seriesTitle":26462,"slug":942,"stem":47954,"tags":47955,"__hash__":47962},"blog\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es.md","Directivas en Vue: v-if, v-else y v-show",{"type":8,"value":46100,"toc":47912},[46101,46112,46126,46153,46163,46167,46171,46187,46192,46203,46214,46222,46233,46236,46251,46255,46262,46266,46274,46286,46290,46325,46333,46336,46574,46817,46837,46843,46851,47037,47225,47229,47236,47247,47256,47266,47276,47521,47754,47756,47765,47767,47818,47830,47836,47851,47858,47871,47873,47901,47909],[11,46102,46104,1025,46106,1028,46109,46111],{"id":46103},"v-if-v-else-y-v-show-en-vue-cuándo-usar-cada-una",[87,46105,13496],{},[87,46107,46108],{},"v-else",[87,46110,13659],{}," en Vue: cuándo usar cada una",[15,46113,46114,46115,1025,46117,1028,46119,46121,46122,46125],{},"Las directivas ",[87,46116,13496],{},[87,46118,46108],{},[87,46120,13659],{}," sirven para ",[3933,46123,46124],{},"mostrar u ocultar contenido"," en función de una condición reactiva.\nLa diferencia clave —la que evita bugs sutiles y problemas de rendimiento— es esta:",[33,46127,46128,46140],{},[36,46129,46130,1108,46136,46139],{},[3933,46131,46132,11227,46134],{},[87,46133,13496],{},[87,46135,46108],{},[9295,46137,46138],{},"crean o destruyen"," elementos del DOM.",[36,46141,46142,1108,46146,46149,46150,1679],{},[3933,46143,46144],{},[87,46145,13659],{},[9295,46147,46148],{},"no destruye nada","; solo alterna ",[87,46151,46152],{},"display: none",[15,46154,46155,46156,1662,46159,46162],{},"Si lo piensas como ",[3933,46157,46158],{},"“¿Esto existe?”",[3933,46160,46161],{},"“¿Esto se ve?”",", ya vas por buen camino.",[22,46164,46166],{"id":46165},"qué-hace-cada-una","Qué hace cada una",[3087,46168,46169],{"id":13496},[87,46170,13496],{},[15,46172,46173,46174,46177,46178,46180,46181,46183,46184,1679],{},"Renderiza el elemento ",[3933,46175,46176],{},"solo si"," la condición es ",[87,46179,390],{},".\nSi es ",[87,46182,3392],{},", el elemento ",[3933,46185,46186],{},"no existe en el DOM",[15,46188,46189],{},[3933,46190,46191],{},"Útil cuando:",[33,46193,46194,46197,46200],{},[36,46195,46196],{},"El contenido es pesado (componentes grandes, listas, gráficos)",[36,46198,46199],{},"No debería existir si no se cumple la condición (permisos de UI, flujos sensibles)",[36,46201,46202],{},"Se muestra pocas veces u ocasionalmente",[5367,46204,46205],{},[15,46206,46207,46209,46210,46213],{},[87,46208,13496],{}," tiene un costo mayor al alternar, porque implica ",[3933,46211,46212],{},"montaje y desmontaje"," del árbol de componentes.",[3087,46215,46217,1028,46219],{"id":46216},"v-else-y-v-else-if",[87,46218,46108],{},[87,46220,46221],{},"v-else-if",[15,46223,46224,46225,46228,46229,90,46231,1679],{},"Se usan ",[3933,46226,46227],{},"inmediatamente después"," de un ",[87,46230,13496],{},[87,46232,46221],{},[15,46234,46235],{},"Reglas importantes:",[33,46237,46238,46245],{},[36,46239,46240,46241,46244],{},"Deben estar ",[3933,46242,46243],{},"adyacentes"," (sin nodos intermedios).",[36,46246,46247,46248,1679],{},"Vue los interpreta como ",[3933,46249,46250],{},"un único bloque condicional",[3087,46252,46253],{"id":13659},[87,46254,13659],{},[15,46256,46257,46258,46261],{},"El elemento ",[3933,46259,46260],{},"siempre se renderiza"," (existe en el DOM), pero se muestra u oculta con CSS.",[15,46263,46264],{},[3933,46265,46191],{},[33,46267,46268,46271],{},[36,46269,46270],{},"La visibilidad cambia con frecuencia (toggles, menús, paneles)",[36,46272,46273],{},"Quieres evitar el costo de montar\u002Fdesmontar",[5367,46275,46276],{},[15,46277,46278,16903,46280,46285],{},[87,46279,13659],{},[3933,46281,46282,46283],{},"no funciona con ",[87,46284,31997],{},", porque no es un elemento real.\nEl contenido sigue en el DOM: foco, tab order y accesibilidad pueden verse afectados si no se gestiona bien.",[22,46287,46289],{"id":46288},"resumen-rápido-cuál-usar","Resumen rápido: cuál usar",[33,46291,46292,46303,46316],{},[36,46293,1582,46294,46298,46299,46302],{},[3933,46295,46296],{},[87,46297,13496],{}," cuando el contenido ",[3933,46300,46301],{},"no debe existir"," si la condición no se cumple.",[36,46304,1582,46305,46298,46309,46312,46313,1679],{},[3933,46306,46307],{},[87,46308,13659],{},[3933,46310,46311],{},"solo debe ocultarse"," y el toggle será ",[3933,46314,46315],{},"frecuente",[36,46317,1582,46318,46322,46323,1679],{},[3933,46319,46320],{},[87,46321,46108],{}," para el caso alternativo inmediato de un ",[87,46324,13496],{},[22,46326,46328,46329,33973,46331,6219],{"id":46327},"ejemplo-1-login-v-if-v-else","Ejemplo 1: Login (",[87,46330,13496],{},[87,46332,46108],{},[15,46334,46335],{},"Cuando una persona está autenticada, muestras el panel; si no, un CTA para iniciar sesión.",[154,46337,46340],{"className":156,"code":46338,"filename":3260,"highlights":46339,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isLoggedIn = ref(false);\n\nfunction toggleLogin() {\n  isLoggedIn.value = !isLoggedIn.value;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"toggleLogin\">\n    {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n  \u003C\u002Fbutton>\n\n  \u003Csection v-if=\"isLoggedIn\">\n    \u003Ch2>Welcome back\u003C\u002Fh2>\n    \u003Cp>You have access to your dashboard.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Csection v-else>\n    \u003Ch2>Please log in\u003C\u002Fh2>\n    \u003Cp>You need an account to continue.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[261,341,781],[87,46341,46342,46352,46364,46368,46385,46389,46398,46411,46415,46423,46427,46435,46450,46455,46463,46467,46483,46496,46509,46517,46521,46532,46545,46558,46566],{"__ignoreMap":163},[167,46343,46344,46346,46348,46350],{"class":169,"line":170},[167,46345,174],{"class":173},[167,46347,178],{"class":177},[167,46349,182],{"class":181},[167,46351,185],{"class":173},[167,46353,46354,46356,46358,46360,46362],{"class":169,"line":188},[167,46355,192],{"class":191},[167,46357,195],{"class":173},[167,46359,198],{"class":191},[167,46361,24041],{"class":201},[167,46363,24044],{"class":173},[167,46365,46366],{"class":169,"line":205},[167,46367,209],{"emptyLinePlaceholder":208},[167,46369,46370,46372,46375,46377,46379,46381,46383],{"class":169,"line":160},[167,46371,216],{"class":191},[167,46373,46374],{"class":219}," isLoggedIn",[167,46376,223],{"class":191},[167,46378,226],{"class":181},[167,46380,229],{"class":173},[167,46382,3392],{"class":219},[167,46384,24169],{"class":173},[167,46386,46387],{"class":169,"line":238},[167,46388,209],{"emptyLinePlaceholder":208},[167,46390,46391,46393,46396],{"class":169,"line":243},[167,46392,246],{"class":191},[167,46394,46395],{"class":181}," toggleLogin",[167,46397,763],{"class":173},[167,46399,46401,46404,46406,46408],{"class":46400,"line":261},[169,213],[167,46402,46403],{"class":173},"  isLoggedIn.value ",[167,46405,267],{"class":191},[167,46407,5625],{"class":191},[167,46409,46410],{"class":173},"isLoggedIn.value;\n",[167,46412,46413],{"class":169,"line":273},[167,46414,276],{"class":173},[167,46416,46417,46419,46421],{"class":169,"line":279},[167,46418,282],{"class":173},[167,46420,178],{"class":177},[167,46422,185],{"class":173},[167,46424,46425],{"class":169,"line":289},[167,46426,209],{"emptyLinePlaceholder":208},[167,46428,46429,46431,46433],{"class":169,"line":294},[167,46430,174],{"class":173},[167,46432,299],{"class":177},[167,46434,185],{"class":173},[167,46436,46437,46439,46441,46443,46445,46448],{"class":169,"line":304},[167,46438,307],{"class":173},[167,46440,507],{"class":177},[167,46442,1182],{"class":181},[167,46444,267],{"class":173},[167,46446,46447],{"class":201},"\"toggleLogin\"",[167,46449,185],{"class":173},[167,46451,46452],{"class":169,"line":313},[167,46453,46454],{"class":173},"    {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n",[167,46456,46457,46459,46461],{"class":169,"line":161},[167,46458,504],{"class":173},[167,46460,507],{"class":177},[167,46462,185],{"class":173},[167,46464,46465],{"class":169,"line":335},[167,46466,209],{"emptyLinePlaceholder":208},[167,46468,46470,46472,46474,46476,46478,46481],{"class":46469,"line":341},[169,213],[167,46471,307],{"class":173},[167,46473,10117],{"class":177},[167,46475,5694],{"class":181},[167,46477,267],{"class":173},[167,46479,46480],{"class":201},"\"isLoggedIn\"",[167,46482,185],{"class":173},[167,46484,46485,46487,46489,46492,46494],{"class":169,"line":489},[167,46486,1257],{"class":173},[167,46488,22],{"class":177},[167,46490,46491],{"class":173},">Welcome back\u003C\u002F",[167,46493,22],{"class":177},[167,46495,185],{"class":173},[167,46497,46498,46500,46502,46505,46507],{"class":169,"line":495},[167,46499,1257],{"class":173},[167,46501,15],{"class":177},[167,46503,46504],{"class":173},">You have access to your dashboard.\u003C\u002F",[167,46506,15],{"class":177},[167,46508,185],{"class":173},[167,46510,46511,46513,46515],{"class":169,"line":501},[167,46512,504],{"class":173},[167,46514,10117],{"class":177},[167,46516,185],{"class":173},[167,46518,46519],{"class":169,"line":512},[167,46520,209],{"emptyLinePlaceholder":208},[167,46522,46524,46526,46528,46530],{"class":46523,"line":781},[169,213],[167,46525,307],{"class":173},[167,46527,10117],{"class":177},[167,46529,7038],{"class":181},[167,46531,185],{"class":173},[167,46533,46534,46536,46538,46541,46543],{"class":169,"line":786},[167,46535,1257],{"class":173},[167,46537,22],{"class":177},[167,46539,46540],{"class":173},">Please log in\u003C\u002F",[167,46542,22],{"class":177},[167,46544,185],{"class":173},[167,46546,46547,46549,46551,46554,46556],{"class":169,"line":2678},[167,46548,1257],{"class":173},[167,46550,15],{"class":177},[167,46552,46553],{"class":173},">You need an account to continue.\u003C\u002F",[167,46555,15],{"class":177},[167,46557,185],{"class":173},[167,46559,46560,46562,46564],{"class":169,"line":2692},[167,46561,504],{"class":173},[167,46563,10117],{"class":177},[167,46565,185],{"class":173},[167,46567,46568,46570,46572],{"class":169,"line":3575},[167,46569,282],{"class":173},[167,46571,299],{"class":177},[167,46573,185],{"class":173},[154,46575,46578],{"className":156,"code":46576,"filename":3973,"highlights":46577,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isLoggedIn: false,\n    };\n  },\n  methods: {\n    toggleLogin() {\n      this.isLoggedIn = !this.isLoggedIn;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"toggleLogin\">\n    {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n  \u003C\u002Fbutton>\n\n  \u003Csection v-if=\"isLoggedIn\">\n    \u003Ch2>Welcome back\u003C\u002Fh2>\n    \u003Cp>You have access to your dashboard.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Csection v-else>\n    \u003Ch2>Please log in\u003C\u002Fh2>\n    \u003Cp>You need an account to continue.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[289,781,5028],[87,46579,46580,46588,46596,46602,46608,46617,46621,46625,46629,46636,46653,46657,46661,46665,46673,46677,46685,46699,46703,46711,46715,46730,46742,46754,46762,46766,46777,46789,46801,46809],{"__ignoreMap":163},[167,46581,46582,46584,46586],{"class":169,"line":170},[167,46583,174],{"class":173},[167,46585,178],{"class":177},[167,46587,185],{"class":173},[167,46589,46590,46592,46594],{"class":169,"line":188},[167,46591,608],{"class":191},[167,46593,3991],{"class":191},[167,46595,1905],{"class":173},[167,46597,46598,46600],{"class":169,"line":205},[167,46599,7176],{"class":181},[167,46601,763],{"class":173},[167,46603,46604,46606],{"class":169,"line":160},[167,46605,1937],{"class":191},[167,46607,1905],{"class":173},[167,46609,46610,46613,46615],{"class":169,"line":238},[167,46611,46612],{"class":173},"      isLoggedIn: ",[167,46614,3392],{"class":219},[167,46616,393],{"class":173},[167,46618,46619],{"class":169,"line":243},[167,46620,24370],{"class":173},[167,46622,46623],{"class":169,"line":261},[167,46624,398],{"class":173},[167,46626,46627],{"class":169,"line":273},[167,46628,4419],{"class":173},[167,46630,46631,46634],{"class":169,"line":279},[167,46632,46633],{"class":181},"    toggleLogin",[167,46635,763],{"class":173},[167,46637,46639,46641,46644,46646,46648,46650],{"class":46638,"line":289},[169,213],[167,46640,741],{"class":219},[167,46642,46643],{"class":173},".isLoggedIn ",[167,46645,267],{"class":191},[167,46647,5625],{"class":191},[167,46649,4927],{"class":219},[167,46651,46652],{"class":173},".isLoggedIn;\n",[167,46654,46655],{"class":169,"line":294},[167,46656,755],{"class":173},[167,46658,46659],{"class":169,"line":304},[167,46660,398],{"class":173},[167,46662,46663],{"class":169,"line":313},[167,46664,24148],{"class":173},[167,46666,46667,46669,46671],{"class":169,"line":161},[167,46668,282],{"class":173},[167,46670,178],{"class":177},[167,46672,185],{"class":173},[167,46674,46675],{"class":169,"line":335},[167,46676,209],{"emptyLinePlaceholder":208},[167,46678,46679,46681,46683],{"class":169,"line":341},[167,46680,174],{"class":173},[167,46682,299],{"class":177},[167,46684,185],{"class":173},[167,46686,46687,46689,46691,46693,46695,46697],{"class":169,"line":489},[167,46688,307],{"class":173},[167,46690,507],{"class":177},[167,46692,1182],{"class":181},[167,46694,267],{"class":173},[167,46696,46447],{"class":201},[167,46698,185],{"class":173},[167,46700,46701],{"class":169,"line":495},[167,46702,46454],{"class":173},[167,46704,46705,46707,46709],{"class":169,"line":501},[167,46706,504],{"class":173},[167,46708,507],{"class":177},[167,46710,185],{"class":173},[167,46712,46713],{"class":169,"line":512},[167,46714,209],{"emptyLinePlaceholder":208},[167,46716,46718,46720,46722,46724,46726,46728],{"class":46717,"line":781},[169,213],[167,46719,307],{"class":173},[167,46721,10117],{"class":177},[167,46723,5694],{"class":181},[167,46725,267],{"class":173},[167,46727,46480],{"class":201},[167,46729,185],{"class":173},[167,46731,46732,46734,46736,46738,46740],{"class":169,"line":786},[167,46733,1257],{"class":173},[167,46735,22],{"class":177},[167,46737,46491],{"class":173},[167,46739,22],{"class":177},[167,46741,185],{"class":173},[167,46743,46744,46746,46748,46750,46752],{"class":169,"line":2678},[167,46745,1257],{"class":173},[167,46747,15],{"class":177},[167,46749,46504],{"class":173},[167,46751,15],{"class":177},[167,46753,185],{"class":173},[167,46755,46756,46758,46760],{"class":169,"line":2692},[167,46757,504],{"class":173},[167,46759,10117],{"class":177},[167,46761,185],{"class":173},[167,46763,46764],{"class":169,"line":3575},[167,46765,209],{"emptyLinePlaceholder":208},[167,46767,46769,46771,46773,46775],{"class":46768,"line":5028},[169,213],[167,46770,307],{"class":173},[167,46772,10117],{"class":177},[167,46774,7038],{"class":181},[167,46776,185],{"class":173},[167,46778,46779,46781,46783,46785,46787],{"class":169,"line":5037},[167,46780,1257],{"class":173},[167,46782,22],{"class":177},[167,46784,46540],{"class":173},[167,46786,22],{"class":177},[167,46788,185],{"class":173},[167,46790,46791,46793,46795,46797,46799],{"class":169,"line":5046},[167,46792,1257],{"class":173},[167,46794,15],{"class":177},[167,46796,46553],{"class":173},[167,46798,15],{"class":177},[167,46800,185],{"class":173},[167,46802,46803,46805,46807],{"class":169,"line":6756},[167,46804,504],{"class":173},[167,46806,10117],{"class":177},[167,46808,185],{"class":173},[167,46810,46811,46813,46815],{"class":169,"line":6778},[167,46812,282],{"class":173},[167,46814,299],{"class":177},[167,46816,185],{"class":173},[5367,46818,46819],{},[15,46820,23773,46821,46824,46825,22877,46828,46830,46831,46834,46835,1679],{},[87,46822,46823],{},"\u003Csection v-else>"," debe ir ",[3933,46826,46827],{},"justo después",[87,46829,13496],{},".\nSi intercalas un comentario, un ",[87,46832,46833],{},"\u003Cdiv>"," u otro nodo, Vue deja de asociarlo como ",[87,46836,22570],{},[22,46838,46840,46841,6219],{"id":46839},"ejemplo-2-tabs-o-panel-que-se-abre-y-cierra-v-show","Ejemplo 2: Tabs o panel que se abre y cierra (",[87,46842,13659],{},[15,46844,46845,46846,46850],{},"Un panel de filtros que el usuario abre y cierra constantemente. Aquí ",[3933,46847,46848],{},[87,46849,13659],{}," es ideal.",[154,46852,46855],{"className":156,"code":46853,"filename":3260,"highlights":46854,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"isOpen = !isOpen\">\n    {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n  \u003C\u002Fbutton>\n\n  \u003Caside v-show=\"isOpen\" class=\"filters\">\n    \u003Ch3>Filters\u003C\u002Fh3>\n    \u003Clabel>\n      \u003Cinput type=\"checkbox\" \u002F>\n      Only available items\n    \u003C\u002Flabel>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[160,304],[87,46856,46857,46867,46879,46883,46900,46908,46912,46920,46934,46939,46947,46951,46973,46986,46994,47008,47013,47021,47029],{"__ignoreMap":163},[167,46858,46859,46861,46863,46865],{"class":169,"line":170},[167,46860,174],{"class":173},[167,46862,178],{"class":177},[167,46864,182],{"class":181},[167,46866,185],{"class":173},[167,46868,46869,46871,46873,46875,46877],{"class":169,"line":188},[167,46870,192],{"class":191},[167,46872,195],{"class":173},[167,46874,198],{"class":191},[167,46876,24041],{"class":201},[167,46878,24044],{"class":173},[167,46880,46881],{"class":169,"line":205},[167,46882,209],{"emptyLinePlaceholder":208},[167,46884,46886,46888,46890,46892,46894,46896,46898],{"class":46885,"line":160},[169,213],[167,46887,216],{"class":191},[167,46889,5523],{"class":219},[167,46891,223],{"class":191},[167,46893,226],{"class":181},[167,46895,229],{"class":173},[167,46897,3392],{"class":219},[167,46899,24169],{"class":173},[167,46901,46902,46904,46906],{"class":169,"line":238},[167,46903,282],{"class":173},[167,46905,178],{"class":177},[167,46907,185],{"class":173},[167,46909,46910],{"class":169,"line":243},[167,46911,209],{"emptyLinePlaceholder":208},[167,46913,46914,46916,46918],{"class":169,"line":261},[167,46915,174],{"class":173},[167,46917,299],{"class":177},[167,46919,185],{"class":173},[167,46921,46922,46924,46926,46928,46930,46932],{"class":169,"line":273},[167,46923,307],{"class":173},[167,46925,507],{"class":177},[167,46927,1182],{"class":181},[167,46929,267],{"class":173},[167,46931,24592],{"class":201},[167,46933,185],{"class":173},[167,46935,46936],{"class":169,"line":279},[167,46937,46938],{"class":173},"    {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n",[167,46940,46941,46943,46945],{"class":169,"line":289},[167,46942,504],{"class":173},[167,46944,507],{"class":177},[167,46946,185],{"class":173},[167,46948,46949],{"class":169,"line":294},[167,46950,209],{"emptyLinePlaceholder":208},[167,46952,46954,46956,46958,46961,46963,46965,46967,46969,46971],{"class":46953,"line":304},[169,213],[167,46955,307],{"class":173},[167,46957,27354],{"class":177},[167,46959,46960],{"class":181}," v-show",[167,46962,267],{"class":173},[167,46964,5699],{"class":201},[167,46966,1245],{"class":181},[167,46968,267],{"class":173},[167,46970,12383],{"class":201},[167,46972,185],{"class":173},[167,46974,46975,46977,46979,46982,46984],{"class":169,"line":313},[167,46976,1257],{"class":173},[167,46978,3087],{"class":177},[167,46980,46981],{"class":173},">Filters\u003C\u002F",[167,46983,3087],{"class":177},[167,46985,185],{"class":173},[167,46987,46988,46990,46992],{"class":169,"line":161},[167,46989,1257],{"class":173},[167,46991,9875],{"class":177},[167,46993,185],{"class":173},[167,46995,46996,46998,47000,47002,47004,47006],{"class":169,"line":335},[167,46997,1268],{"class":173},[167,46999,2650],{"class":177},[167,47001,1174],{"class":181},[167,47003,267],{"class":173},[167,47005,35002],{"class":201},[167,47007,5325],{"class":173},[167,47009,47010],{"class":169,"line":341},[167,47011,47012],{"class":173},"      Only available items\n",[167,47014,47015,47017,47019],{"class":169,"line":489},[167,47016,1292],{"class":173},[167,47018,9875],{"class":177},[167,47020,185],{"class":173},[167,47022,47023,47025,47027],{"class":169,"line":495},[167,47024,504],{"class":173},[167,47026,27354],{"class":177},[167,47028,185],{"class":173},[167,47030,47031,47033,47035],{"class":169,"line":501},[167,47032,282],{"class":173},[167,47034,299],{"class":177},[167,47036,185],{"class":173},[154,47038,47041],{"className":156,"code":47039,"filename":3973,"highlights":47040,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isOpen: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"isOpen = !isOpen\">\n    {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n  \u003C\u002Fbutton>\n\n  \u003Caside v-show=\"isOpen\" class=\"filters\">\n    \u003Ch3>Filters\u003C\u002Fh3>\n    \u003Clabel>\n      \u003Cinput type=\"checkbox\" \u002F>\n      Only available items\n    \u003C\u002Flabel>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[238,341],[87,47042,47043,47051,47059,47065,47071,47080,47084,47088,47092,47100,47104,47112,47126,47130,47138,47142,47163,47175,47183,47197,47201,47209,47217],{"__ignoreMap":163},[167,47044,47045,47047,47049],{"class":169,"line":170},[167,47046,174],{"class":173},[167,47048,178],{"class":177},[167,47050,185],{"class":173},[167,47052,47053,47055,47057],{"class":169,"line":188},[167,47054,608],{"class":191},[167,47056,3991],{"class":191},[167,47058,1905],{"class":173},[167,47060,47061,47063],{"class":169,"line":205},[167,47062,7176],{"class":181},[167,47064,763],{"class":173},[167,47066,47067,47069],{"class":169,"line":160},[167,47068,1937],{"class":191},[167,47070,1905],{"class":173},[167,47072,47074,47076,47078],{"class":47073,"line":238},[169,213],[167,47075,24722],{"class":173},[167,47077,3392],{"class":219},[167,47079,393],{"class":173},[167,47081,47082],{"class":169,"line":243},[167,47083,24370],{"class":173},[167,47085,47086],{"class":169,"line":261},[167,47087,398],{"class":173},[167,47089,47090],{"class":169,"line":273},[167,47091,24148],{"class":173},[167,47093,47094,47096,47098],{"class":169,"line":279},[167,47095,282],{"class":173},[167,47097,178],{"class":177},[167,47099,185],{"class":173},[167,47101,47102],{"class":169,"line":289},[167,47103,209],{"emptyLinePlaceholder":208},[167,47105,47106,47108,47110],{"class":169,"line":294},[167,47107,174],{"class":173},[167,47109,299],{"class":177},[167,47111,185],{"class":173},[167,47113,47114,47116,47118,47120,47122,47124],{"class":169,"line":304},[167,47115,307],{"class":173},[167,47117,507],{"class":177},[167,47119,1182],{"class":181},[167,47121,267],{"class":173},[167,47123,24592],{"class":201},[167,47125,185],{"class":173},[167,47127,47128],{"class":169,"line":313},[167,47129,46938],{"class":173},[167,47131,47132,47134,47136],{"class":169,"line":161},[167,47133,504],{"class":173},[167,47135,507],{"class":177},[167,47137,185],{"class":173},[167,47139,47140],{"class":169,"line":335},[167,47141,209],{"emptyLinePlaceholder":208},[167,47143,47145,47147,47149,47151,47153,47155,47157,47159,47161],{"class":47144,"line":341},[169,213],[167,47146,307],{"class":173},[167,47148,27354],{"class":177},[167,47150,46960],{"class":181},[167,47152,267],{"class":173},[167,47154,5699],{"class":201},[167,47156,1245],{"class":181},[167,47158,267],{"class":173},[167,47160,12383],{"class":201},[167,47162,185],{"class":173},[167,47164,47165,47167,47169,47171,47173],{"class":169,"line":489},[167,47166,1257],{"class":173},[167,47168,3087],{"class":177},[167,47170,46981],{"class":173},[167,47172,3087],{"class":177},[167,47174,185],{"class":173},[167,47176,47177,47179,47181],{"class":169,"line":495},[167,47178,1257],{"class":173},[167,47180,9875],{"class":177},[167,47182,185],{"class":173},[167,47184,47185,47187,47189,47191,47193,47195],{"class":169,"line":501},[167,47186,1268],{"class":173},[167,47188,2650],{"class":177},[167,47190,1174],{"class":181},[167,47192,267],{"class":173},[167,47194,35002],{"class":201},[167,47196,5325],{"class":173},[167,47198,47199],{"class":169,"line":512},[167,47200,47012],{"class":173},[167,47202,47203,47205,47207],{"class":169,"line":781},[167,47204,1292],{"class":173},[167,47206,9875],{"class":177},[167,47208,185],{"class":173},[167,47210,47211,47213,47215],{"class":169,"line":786},[167,47212,504],{"class":173},[167,47214,27354],{"class":177},[167,47216,185],{"class":173},[167,47218,47219,47221,47223],{"class":169,"line":2678},[167,47220,282],{"class":173},[167,47222,299],{"class":177},[167,47224,185],{"class":173},[3087,47226,47228],{"id":47227},"nota-de-ux-y-accesibilidad","Nota de UX y accesibilidad",[15,47230,47231,47232,47235],{},"Como el panel ",[3933,47233,47234],{},"sigue existiendo",", sus elementos interactivos pueden:",[33,47237,47238,47241,47244],{},[36,47239,47240],{},"Conservar estado",[36,47242,47243],{},"Conservar foco (a veces deseable, a veces no)",[36,47245,47246],{},"Seguir siendo accesibles para lectores de pantalla si no se manejan roles\u002FARIA",[15,47248,47249,47250,47253,47254,1679],{},"Si el contenido ",[3933,47251,47252],{},"no debería existir"," en absoluto, usa ",[87,47255,13496],{},[22,47257,47259,47261,47262,47265],{"id":47258},"v-else-if-múltiples-estados-sin-anidar-if-innecesarios",[87,47260,46221],{},": múltiples estados (sin anidar ",[87,47263,47264],{},"if"," innecesarios)",[15,47267,47268,47269,1025,47271,1028,47273,1679],{},"Un patrón común: ",[9295,47270,9346],{},[9295,47272,9352],{},[9295,47274,47275],{},"success",[154,47277,47280],{"className":156,"code":47278,"filename":3260,"highlights":47279,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst status = ref(\"idle\"); \u002F\u002F \"idle\" | \"loading\" | \"error\" | \"success\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"status = 'loading'\">Simulate loading\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'error'\">Simulate error\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'success'\">Simulate success\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'idle'\">Reset\u003C\u002Fbutton>\n\n  \u003Cp v-if=\"status === 'loading'\">Loading...\u003C\u002Fp>\n  \u003Cp v-else-if=\"status === 'error'\">Something went wrong.\u003C\u002Fp>\n  \u003Cp v-else-if=\"status === 'success'\">Done!\u003C\u002Fp>\n  \u003Cp v-else>Idle. Click a button.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[160,313,161,335,341],[87,47281,47282,47292,47304,47308,47330,47338,47342,47350,47370,47390,47410,47430,47434,47455,47476,47497,47513],{"__ignoreMap":163},[167,47283,47284,47286,47288,47290],{"class":169,"line":170},[167,47285,174],{"class":173},[167,47287,178],{"class":177},[167,47289,182],{"class":181},[167,47291,185],{"class":173},[167,47293,47294,47296,47298,47300,47302],{"class":169,"line":188},[167,47295,192],{"class":191},[167,47297,195],{"class":173},[167,47299,198],{"class":191},[167,47301,24041],{"class":201},[167,47303,24044],{"class":173},[167,47305,47306],{"class":169,"line":205},[167,47307,209],{"emptyLinePlaceholder":208},[167,47309,47311,47313,47315,47317,47319,47321,47324,47327],{"class":47310,"line":160},[169,213],[167,47312,216],{"class":191},[167,47314,11700],{"class":219},[167,47316,223],{"class":191},[167,47318,226],{"class":181},[167,47320,229],{"class":173},[167,47322,47323],{"class":201},"\"idle\"",[167,47325,47326],{"class":173},"); ",[167,47328,47329],{"class":18662},"\u002F\u002F \"idle\" | \"loading\" | \"error\" | \"success\"\n",[167,47331,47332,47334,47336],{"class":169,"line":238},[167,47333,282],{"class":173},[167,47335,178],{"class":177},[167,47337,185],{"class":173},[167,47339,47340],{"class":169,"line":243},[167,47341,209],{"emptyLinePlaceholder":208},[167,47343,47344,47346,47348],{"class":169,"line":261},[167,47345,174],{"class":173},[167,47347,299],{"class":177},[167,47349,185],{"class":173},[167,47351,47352,47354,47356,47358,47360,47363,47366,47368],{"class":169,"line":273},[167,47353,307],{"class":173},[167,47355,507],{"class":177},[167,47357,1182],{"class":181},[167,47359,267],{"class":173},[167,47361,47362],{"class":201},"\"status = 'loading'\"",[167,47364,47365],{"class":173},">Simulate loading\u003C\u002F",[167,47367,507],{"class":177},[167,47369,185],{"class":173},[167,47371,47372,47374,47376,47378,47380,47383,47386,47388],{"class":169,"line":279},[167,47373,307],{"class":173},[167,47375,507],{"class":177},[167,47377,1182],{"class":181},[167,47379,267],{"class":173},[167,47381,47382],{"class":201},"\"status = 'error'\"",[167,47384,47385],{"class":173},">Simulate error\u003C\u002F",[167,47387,507],{"class":177},[167,47389,185],{"class":173},[167,47391,47392,47394,47396,47398,47400,47403,47406,47408],{"class":169,"line":289},[167,47393,307],{"class":173},[167,47395,507],{"class":177},[167,47397,1182],{"class":181},[167,47399,267],{"class":173},[167,47401,47402],{"class":201},"\"status = 'success'\"",[167,47404,47405],{"class":173},">Simulate success\u003C\u002F",[167,47407,507],{"class":177},[167,47409,185],{"class":173},[167,47411,47412,47414,47416,47418,47420,47423,47426,47428],{"class":169,"line":294},[167,47413,307],{"class":173},[167,47415,507],{"class":177},[167,47417,1182],{"class":181},[167,47419,267],{"class":173},[167,47421,47422],{"class":201},"\"status = 'idle'\"",[167,47424,47425],{"class":173},">Reset\u003C\u002F",[167,47427,507],{"class":177},[167,47429,185],{"class":173},[167,47431,47432],{"class":169,"line":304},[167,47433,209],{"emptyLinePlaceholder":208},[167,47435,47437,47439,47441,47443,47445,47448,47451,47453],{"class":47436,"line":313},[169,213],[167,47438,307],{"class":173},[167,47440,15],{"class":177},[167,47442,5694],{"class":181},[167,47444,267],{"class":173},[167,47446,47447],{"class":201},"\"status === 'loading'\"",[167,47449,47450],{"class":173},">Loading...\u003C\u002F",[167,47452,15],{"class":177},[167,47454,185],{"class":173},[167,47456,47458,47460,47462,47464,47466,47469,47472,47474],{"class":47457,"line":161},[169,213],[167,47459,307],{"class":173},[167,47461,15],{"class":177},[167,47463,6961],{"class":181},[167,47465,267],{"class":173},[167,47467,47468],{"class":201},"\"status === 'error'\"",[167,47470,47471],{"class":173},">Something went wrong.\u003C\u002F",[167,47473,15],{"class":177},[167,47475,185],{"class":173},[167,47477,47479,47481,47483,47485,47487,47490,47493,47495],{"class":47478,"line":335},[169,213],[167,47480,307],{"class":173},[167,47482,15],{"class":177},[167,47484,6961],{"class":181},[167,47486,267],{"class":173},[167,47488,47489],{"class":201},"\"status === 'success'\"",[167,47491,47492],{"class":173},">Done!\u003C\u002F",[167,47494,15],{"class":177},[167,47496,185],{"class":173},[167,47498,47500,47502,47504,47506,47509,47511],{"class":47499,"line":341},[169,213],[167,47501,307],{"class":173},[167,47503,15],{"class":177},[167,47505,7038],{"class":181},[167,47507,47508],{"class":173},">Idle. Click a button.\u003C\u002F",[167,47510,15],{"class":177},[167,47512,185],{"class":173},[167,47514,47515,47517,47519],{"class":169,"line":489},[167,47516,282],{"class":173},[167,47518,299],{"class":177},[167,47520,185],{"class":173},[154,47522,47525],{"className":156,"code":47523,"filename":3973,"highlights":47524,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      status: \"idle\", \u002F\u002F \"idle\" | \"loading\" | \"error\" | \"success\"\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"status = 'loading'\">Simulate loading\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'error'\">Simulate error\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'success'\">Simulate success\u003C\u002Fbutton>\n  \u003Cbutton @click=\"status = 'idle'\">Reset\u003C\u002Fbutton>\n\n  \u003Cp v-if=\"status === 'loading'\">Loading...\u003C\u002Fp>\n  \u003Cp v-else-if=\"status === 'error'\">Something went wrong.\u003C\u002Fp>\n  \u003Cp v-else-if=\"status === 'success'\">Done!\u003C\u002Fp>\n  \u003Cp v-else>Idle. Click a button.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[238,489,495,501,512],[87,47526,47527,47535,47543,47549,47555,47566,47570,47574,47578,47586,47590,47598,47616,47634,47652,47670,47674,47693,47712,47731,47746],{"__ignoreMap":163},[167,47528,47529,47531,47533],{"class":169,"line":170},[167,47530,174],{"class":173},[167,47532,178],{"class":177},[167,47534,185],{"class":173},[167,47536,47537,47539,47541],{"class":169,"line":188},[167,47538,608],{"class":191},[167,47540,3991],{"class":191},[167,47542,1905],{"class":173},[167,47544,47545,47547],{"class":169,"line":205},[167,47546,7176],{"class":181},[167,47548,763],{"class":173},[167,47550,47551,47553],{"class":169,"line":160},[167,47552,1937],{"class":191},[167,47554,1905],{"class":173},[167,47556,47558,47560,47562,47564],{"class":47557,"line":238},[169,213],[167,47559,12585],{"class":173},[167,47561,47323],{"class":201},[167,47563,1025],{"class":173},[167,47565,47329],{"class":18662},[167,47567,47568],{"class":169,"line":243},[167,47569,24370],{"class":173},[167,47571,47572],{"class":169,"line":261},[167,47573,398],{"class":173},[167,47575,47576],{"class":169,"line":273},[167,47577,24148],{"class":173},[167,47579,47580,47582,47584],{"class":169,"line":279},[167,47581,282],{"class":173},[167,47583,178],{"class":177},[167,47585,185],{"class":173},[167,47587,47588],{"class":169,"line":289},[167,47589,209],{"emptyLinePlaceholder":208},[167,47591,47592,47594,47596],{"class":169,"line":294},[167,47593,174],{"class":173},[167,47595,299],{"class":177},[167,47597,185],{"class":173},[167,47599,47600,47602,47604,47606,47608,47610,47612,47614],{"class":169,"line":304},[167,47601,307],{"class":173},[167,47603,507],{"class":177},[167,47605,1182],{"class":181},[167,47607,267],{"class":173},[167,47609,47362],{"class":201},[167,47611,47365],{"class":173},[167,47613,507],{"class":177},[167,47615,185],{"class":173},[167,47617,47618,47620,47622,47624,47626,47628,47630,47632],{"class":169,"line":313},[167,47619,307],{"class":173},[167,47621,507],{"class":177},[167,47623,1182],{"class":181},[167,47625,267],{"class":173},[167,47627,47382],{"class":201},[167,47629,47385],{"class":173},[167,47631,507],{"class":177},[167,47633,185],{"class":173},[167,47635,47636,47638,47640,47642,47644,47646,47648,47650],{"class":169,"line":161},[167,47637,307],{"class":173},[167,47639,507],{"class":177},[167,47641,1182],{"class":181},[167,47643,267],{"class":173},[167,47645,47402],{"class":201},[167,47647,47405],{"class":173},[167,47649,507],{"class":177},[167,47651,185],{"class":173},[167,47653,47654,47656,47658,47660,47662,47664,47666,47668],{"class":169,"line":335},[167,47655,307],{"class":173},[167,47657,507],{"class":177},[167,47659,1182],{"class":181},[167,47661,267],{"class":173},[167,47663,47422],{"class":201},[167,47665,47425],{"class":173},[167,47667,507],{"class":177},[167,47669,185],{"class":173},[167,47671,47672],{"class":169,"line":341},[167,47673,209],{"emptyLinePlaceholder":208},[167,47675,47677,47679,47681,47683,47685,47687,47689,47691],{"class":47676,"line":489},[169,213],[167,47678,307],{"class":173},[167,47680,15],{"class":177},[167,47682,5694],{"class":181},[167,47684,267],{"class":173},[167,47686,47447],{"class":201},[167,47688,47450],{"class":173},[167,47690,15],{"class":177},[167,47692,185],{"class":173},[167,47694,47696,47698,47700,47702,47704,47706,47708,47710],{"class":47695,"line":495},[169,213],[167,47697,307],{"class":173},[167,47699,15],{"class":177},[167,47701,6961],{"class":181},[167,47703,267],{"class":173},[167,47705,47468],{"class":201},[167,47707,47471],{"class":173},[167,47709,15],{"class":177},[167,47711,185],{"class":173},[167,47713,47715,47717,47719,47721,47723,47725,47727,47729],{"class":47714,"line":501},[169,213],[167,47716,307],{"class":173},[167,47718,15],{"class":177},[167,47720,6961],{"class":181},[167,47722,267],{"class":173},[167,47724,47489],{"class":201},[167,47726,47492],{"class":173},[167,47728,15],{"class":177},[167,47730,185],{"class":173},[167,47732,47734,47736,47738,47740,47742,47744],{"class":47733,"line":512},[169,213],[167,47735,307],{"class":173},[167,47737,15],{"class":177},[167,47739,7038],{"class":181},[167,47741,47508],{"class":173},[167,47743,15],{"class":177},[167,47745,185],{"class":173},[167,47747,47748,47750,47752],{"class":169,"line":781},[167,47749,282],{"class":173},[167,47751,299],{"class":177},[167,47753,185],{"class":173},[22,47755,3085],{"id":3084},[3087,47757,47759,47760,47762,47763],{"id":47758},"_1-v-else-separado-del-v-if","1) ",[87,47761,46108],{}," separado del ",[87,47764,13496],{},[15,47766,30738],{},[154,47768,47771],{"className":156,"code":47769,"filename":15284,"highlights":47770,"language":162,"meta":163,"style":163},"\u003Cdiv v-if=\"ok\">Ok\u003C\u002Fdiv>\n\u003C!-- comentario o nodo -->\n\u003Cdiv v-else>No ok\u003C\u002Fdiv>\n",[188],[87,47772,47773,47797,47803],{"__ignoreMap":163},[167,47774,47775,47777,47779,47781,47783,47785,47788,47790,47793,47795],{"class":169,"line":170},[167,47776,174],{"class":173},[167,47778,1242],{"class":177},[167,47780,5694],{"class":191},[167,47782,267],{"class":173},[167,47784,5080],{"class":201},[167,47786,47787],{"class":173},"ok",[167,47789,5080],{"class":201},[167,47791,47792],{"class":173},">Ok\u003C\u002F",[167,47794,1242],{"class":177},[167,47796,185],{"class":173},[167,47798,47800],{"class":47799,"line":188},[169,213],[167,47801,47802],{"class":18662},"\u003C!-- comentario o nodo -->\n",[167,47804,47805,47807,47809,47811,47814,47816],{"class":169,"line":205},[167,47806,174],{"class":173},[167,47808,1242],{"class":177},[167,47810,7038],{"class":191},[167,47812,47813],{"class":173},">No ok\u003C\u002F",[167,47815,1242],{"class":177},[167,47817,185],{"class":173},[5367,47819,47820],{},[15,47821,23773,47822,46824,47824,47827,47828,1679],{},[87,47823,46108],{},[3933,47825,47826],{},"inmediatamente"," después del ",[87,47829,13496],{},[3087,47831,18524,47833,47835],{"id":47832},"_2-usar-v-show-para-contenido-que-no-debería-existir",[87,47834,13659],{}," para contenido que no debería existir",[15,47837,47838,47839,47841,47842,1025,47845,47848,47849,1679],{},"Si ocultas con ",[87,47840,13659],{}," algo como un ",[9295,47843,47844],{},"admin panel",[3933,47846,47847],{},"sigue en el DOM",".\nNo es seguridad; es solo presentación. La seguridad va en el backend, pero en la UI al menos usa ",[87,47850,13496],{},[3087,47852,47854,47855,47857],{"id":47853},"_3-pensar-que-v-if-es-gratis","3) Pensar que ",[87,47856,13496],{}," es “gratis”",[15,47859,47860,47861,47863,47864,47867,47868,47870],{},"Alternar ",[87,47862,13496],{}," muchas veces implica ",[3933,47865,47866],{},"montajes y desmontajes repetidos",".\nSi el usuario va a abrir y cerrar algo constantemente, ",[87,47869,13659],{}," suele ser mejor opción.",[22,47872,23574],{"id":23573},[33,47874,47875,47886,47894],{},[36,47876,47877,47881,47882,47885],{},[3933,47878,47879],{},[87,47880,13496],{},": controla la ",[3933,47883,47884],{},"existencia real"," del elemento.",[36,47887,47888,47893],{},[3933,47889,47890],{},[87,47891,47892],{},"v-else \u002F v-else-if",": ramas alternativas del mismo bloque condicional.",[36,47895,47896,47900],{},[3933,47897,47898],{},[87,47899,13659],{},": ocultar\u002Fmostrar rápido con CSS, sin destruir el DOM.",[5367,47902,47903],{},[15,47904,47905,47906],{},"Una UI se vuelve más clara cuando decides conscientemente:\n",[3933,47907,47908],{},"¿Quiero que esto exista o solo que se vea?",[924,47910,47911],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":163,"searchDepth":188,"depth":188,"links":47913},[47914,47920,47921,47923,47927,47929,47937],{"id":46165,"depth":188,"text":46166,"children":47915},[47916,47917,47919],{"id":13496,"depth":205,"text":13496},{"id":46216,"depth":205,"text":47918},"v-else y v-else-if",{"id":13659,"depth":205,"text":13659},{"id":46288,"depth":188,"text":46289},{"id":46327,"depth":188,"text":47922},"Ejemplo 1: Login (v-if + v-else)",{"id":46839,"depth":188,"text":47924,"children":47925},"Ejemplo 2: Tabs o panel que se abre y cierra (v-show)",[47926],{"id":47227,"depth":205,"text":47228},{"id":47258,"depth":188,"text":47928},"v-else-if: múltiples estados (sin anidar if innecesarios)",{"id":3084,"depth":188,"text":3085,"children":47930},[47931,47933,47935],{"id":47758,"depth":205,"text":47932},"1) v-else separado del v-if",{"id":47832,"depth":205,"text":47934},"2) Usar v-show para contenido que no debería existir",{"id":47853,"depth":205,"text":47936},"3) Pensar que v-if es “gratis”",{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1771265982\u002Fdirectives-vue-v-if-v-else-v-show-guide_qmtjik.png","Ilustración conceptual del renderizado condicional en Vue.js","2026-02-05","Aprende a usar v-if, v-else y v-show en Vue con ejemplos claros, buenas prácticas y notas clave para elegir correctamente entre renderizado condicional y visibilidad.",{"updatedAt":47943,"coverCaption":47944,"author":946,"keywords":47945},"2026-02-05T12:30:00-05:00","Renderizado condicional en Vue.js ilustrado por TODOvue",[3258,13496,46108,13659,47946,47947,3260,3973],"conditional rendering","directives","\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[47950],{"headline":47951,"author":47952,"datePublished":47943,"@type":961},"v-if, v-else y v-show en Vue: cuándo usar cada uno",{"name":946,"@type":959},{"title":46098,"description":47941},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[47956,47957,47960,47961],{"tag":26466,"color":26467},{"tag":47958,"color":47959},"Renderizado Condicional","#E056FD",{"tag":27757,"color":27758},{"tag":5424,"color":5425},"b5lwqC2_R5GDZNjdpBMFknx2dcvVk_FQOPGFJOy4LmQ",{"id":47964,"title":47965,"body":47966,"cover":51331,"coverAlt":47965,"date":51332,"description":51333,"draft":940,"extension":941,"lab":942,"locale":943,"meta":51334,"navigation":208,"path":51338,"schemaOrg":51339,"seo":51343,"series":26460,"seriesDescription":26461,"seriesOrder":170,"seriesTitle":26462,"slug":942,"stem":51344,"tags":51345,"__hash__":51352},"blog\u002Fblog\u002Fvue-directives-overview.es.md","Directivas en Vue: Una Visión General",{"type":8,"value":47967,"toc":51312},[47968,47972,47987,47998,48000,48003,48055,48064,48073,48076,48087,48199,48314,48318,48327,48329,48337,48434,48534,48538,48541,48544,48555,48690,48831,48839,48843,48846,48851,48856,48957,49073,49077,49084,49087,49097,49208,49322,49330,49334,49337,49458,49599,49612,49616,49619,49714,49814,49817,49821,49824,49920,50021,50030,50034,50037,50183,50340,50346,50350,50357,50466,50579,50582,50586,50589,50719,50838,50845,50849,50852,50920,50994,50997,51001,51004,51072,51145,51148,51151,51154,51245,51279,51282,51284,51290,51293,51303,51310],[11,47969,47971],{"id":47970},"directivas-en-vue-3-guía-completa-para-entenderlas-bien","Directivas en Vue 3: guía completa para entenderlas bien",[15,47973,47974,47975,47978,47979,47982,47983,47986],{},"Las directivas en Vue son ",[3933,47976,47977],{},"atributos especiales"," que permiten aplicar lógica reactiva directamente sobre el DOM.\nTodas comienzan con ",[87,47980,47981],{},"v-"," y existen para ",[3933,47984,47985],{},"reducir código imperativo"," y hacer que el template sea más expresivo y declarativo.",[15,47988,47989,47990,47993,47994,47997],{},"Esta entrada es un ",[3933,47991,47992],{},"mapa general",": no profundiza al extremo, pero te deja claro ",[3933,47995,47996],{},"qué hace cada directiva, cuándo usarla y qué problema resuelve",".\nCada una tendrá luego su artículo dedicado.",[22,47999,19083],{"id":19082},[15,48001,48002],{},"Si quieres profundizar en cada directiva, aquí tienes la ruta completa de esta serie:",[33,48004,48005,48010,48015,48020,48025,48030,48035,48040,48045,48050],{},[36,48006,48007],{},[19092,48008,46098],{"href":48009},"\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es\u002F",[36,48011,48012],{},[19092,48013,42751],{"href":48014},"\u002Fblog\u002Fdirectives-vue-v-for-guide.es\u002F",[36,48016,48017],{},[19092,48018,39772],{"href":48019},"\u002Fblog\u002Fdirectives-vue-v-bind-guide.es\u002F",[36,48021,48022],{},[19092,48023,33939],{"href":48024},"\u002Fblog\u002Fdirectives-vue-v-model-guide.es\u002F",[36,48026,48027],{},[19092,48028,36754],{"href":48029},"\u002Fblog\u002Fdirectives-vue-v-on-guide.es\u002F",[36,48031,48032],{},[19092,48033,30426],{"href":48034},"\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es\u002F",[36,48036,48037],{},[19092,48038,31700],{"href":48039},"\u002Fblog\u002Fdirectives-vue-v-slot-guide.es\u002F",[36,48041,48042],{},[19092,48043,27764],{"href":48044},"\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es\u002F",[36,48046,48047],{},[19092,48048,26477],{"href":48049},"\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es\u002F",[36,48051,48052],{},[19092,48053,23674],{"href":48054},"\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es\u002F",[22,48056,48058,1025,48060,1025,48062],{"id":48057},"v-if-v-else-if-v-else",[87,48059,13496],{},[87,48061,46221],{},[87,48063,46108],{},[15,48065,48066,48067,48070,48071,1679],{},"Sirven para ",[3933,48068,48069],{},"renderizar o eliminar elementos del DOM"," según una condición reactiva.\nSi la condición es falsa, el elemento ",[3933,48072,46186],{},[15,48074,48075],{},"Úsala cuando:",[33,48077,48078,48081,48084],{},[36,48079,48080],{},"El contenido es pesado",[36,48082,48083],{},"No siempre debe existir",[36,48085,48086],{},"Depende de permisos o estados críticos",[154,48088,48091],{"className":156,"code":48089,"filename":3260,"highlights":48090,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst isLogged = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"isLogged\">Bienvenido\u003C\u002Fp>\n  \u003Cp v-else>No has iniciado sesión\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273,279],[87,48092,48093,48103,48113,48117,48134,48142,48146,48154,48175,48191],{"__ignoreMap":163},[167,48094,48095,48097,48099,48101],{"class":169,"line":170},[167,48096,174],{"class":173},[167,48098,178],{"class":177},[167,48100,182],{"class":181},[167,48102,185],{"class":173},[167,48104,48105,48107,48109,48111],{"class":169,"line":188},[167,48106,192],{"class":191},[167,48108,195],{"class":173},[167,48110,198],{"class":191},[167,48112,202],{"class":201},[167,48114,48115],{"class":169,"line":205},[167,48116,209],{"emptyLinePlaceholder":208},[167,48118,48119,48121,48124,48126,48128,48130,48132],{"class":169,"line":160},[167,48120,216],{"class":191},[167,48122,48123],{"class":219}," isLogged",[167,48125,223],{"class":191},[167,48127,226],{"class":181},[167,48129,229],{"class":173},[167,48131,390],{"class":219},[167,48133,235],{"class":173},[167,48135,48136,48138,48140],{"class":169,"line":238},[167,48137,282],{"class":173},[167,48139,178],{"class":177},[167,48141,185],{"class":173},[167,48143,48144],{"class":169,"line":243},[167,48145,209],{"emptyLinePlaceholder":208},[167,48147,48148,48150,48152],{"class":169,"line":261},[167,48149,174],{"class":173},[167,48151,299],{"class":177},[167,48153,185],{"class":173},[167,48155,48157,48159,48161,48163,48165,48168,48171,48173],{"class":48156,"line":273},[169,213],[167,48158,307],{"class":173},[167,48160,15],{"class":177},[167,48162,5694],{"class":181},[167,48164,267],{"class":173},[167,48166,48167],{"class":201},"\"isLogged\"",[167,48169,48170],{"class":173},">Bienvenido\u003C\u002F",[167,48172,15],{"class":177},[167,48174,185],{"class":173},[167,48176,48178,48180,48182,48184,48187,48189],{"class":48177,"line":279},[169,213],[167,48179,307],{"class":173},[167,48181,15],{"class":177},[167,48183,7038],{"class":181},[167,48185,48186],{"class":173},">No has iniciado sesión\u003C\u002F",[167,48188,15],{"class":177},[167,48190,185],{"class":173},[167,48192,48193,48195,48197],{"class":169,"line":289},[167,48194,282],{"class":173},[167,48196,299],{"class":177},[167,48198,185],{"class":173},[154,48200,48203],{"className":156,"code":48201,"filename":3973,"highlights":48202,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isLogged: true\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"isLogged\">Bienvenido\u003C\u002Fp>\n  \u003Cp v-else>No has iniciado sesión\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304,313],[87,48204,48205,48213,48221,48227,48233,48240,48244,48248,48252,48260,48264,48272,48291,48306],{"__ignoreMap":163},[167,48206,48207,48209,48211],{"class":169,"line":170},[167,48208,174],{"class":173},[167,48210,178],{"class":177},[167,48212,185],{"class":173},[167,48214,48215,48217,48219],{"class":169,"line":188},[167,48216,608],{"class":191},[167,48218,3991],{"class":191},[167,48220,1905],{"class":173},[167,48222,48223,48225],{"class":169,"line":205},[167,48224,7176],{"class":181},[167,48226,763],{"class":173},[167,48228,48229,48231],{"class":169,"line":160},[167,48230,1937],{"class":191},[167,48232,1905],{"class":173},[167,48234,48235,48238],{"class":169,"line":238},[167,48236,48237],{"class":173},"      isLogged: ",[167,48239,3637],{"class":219},[167,48241,48242],{"class":169,"line":243},[167,48243,4049],{"class":173},[167,48245,48246],{"class":169,"line":261},[167,48247,3492],{"class":173},[167,48249,48250],{"class":169,"line":273},[167,48251,276],{"class":173},[167,48253,48254,48256,48258],{"class":169,"line":279},[167,48255,282],{"class":173},[167,48257,178],{"class":177},[167,48259,185],{"class":173},[167,48261,48262],{"class":169,"line":289},[167,48263,209],{"emptyLinePlaceholder":208},[167,48265,48266,48268,48270],{"class":169,"line":294},[167,48267,174],{"class":173},[167,48269,299],{"class":177},[167,48271,185],{"class":173},[167,48273,48275,48277,48279,48281,48283,48285,48287,48289],{"class":48274,"line":304},[169,213],[167,48276,307],{"class":173},[167,48278,15],{"class":177},[167,48280,5694],{"class":181},[167,48282,267],{"class":173},[167,48284,48167],{"class":201},[167,48286,48170],{"class":173},[167,48288,15],{"class":177},[167,48290,185],{"class":173},[167,48292,48294,48296,48298,48300,48302,48304],{"class":48293,"line":313},[169,213],[167,48295,307],{"class":173},[167,48297,15],{"class":177},[167,48299,7038],{"class":181},[167,48301,48186],{"class":173},[167,48303,15],{"class":177},[167,48305,185],{"class":173},[167,48307,48308,48310,48312],{"class":169,"line":161},[167,48309,282],{"class":173},[167,48311,299],{"class":177},[167,48313,185],{"class":173},[22,48315,48316],{"id":13659},[87,48317,13659],{},[15,48319,48320,48321,48323,48324,1679],{},"Controla la visibilidad usando CSS (",[87,48322,46152],{},"), pero ",[3933,48325,48326],{},"el elemento siempre existe en el DOM",[15,48328,48075],{},[33,48330,48331,48334],{},[36,48332,48333],{},"El elemento se muestra y oculta con frecuencia",[36,48335,48336],{},"No quieres pagar el costo de montar y desmontar el nodo",[154,48338,48341],{"className":156,"code":48339,"filename":3260,"highlights":48340,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n  \nconst isVisible = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-show=\"isVisible\">Contenido visible\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273],[87,48342,48343,48353,48363,48368,48385,48393,48397,48405,48426],{"__ignoreMap":163},[167,48344,48345,48347,48349,48351],{"class":169,"line":170},[167,48346,174],{"class":173},[167,48348,178],{"class":177},[167,48350,182],{"class":181},[167,48352,185],{"class":173},[167,48354,48355,48357,48359,48361],{"class":169,"line":188},[167,48356,192],{"class":191},[167,48358,195],{"class":173},[167,48360,198],{"class":191},[167,48362,202],{"class":201},[167,48364,48365],{"class":169,"line":205},[167,48366,48367],{"class":173},"  \n",[167,48369,48370,48372,48375,48377,48379,48381,48383],{"class":169,"line":160},[167,48371,216],{"class":191},[167,48373,48374],{"class":219}," isVisible",[167,48376,223],{"class":191},[167,48378,226],{"class":181},[167,48380,229],{"class":173},[167,48382,390],{"class":219},[167,48384,235],{"class":173},[167,48386,48387,48389,48391],{"class":169,"line":238},[167,48388,282],{"class":173},[167,48390,178],{"class":177},[167,48392,185],{"class":173},[167,48394,48395],{"class":169,"line":243},[167,48396,209],{"emptyLinePlaceholder":208},[167,48398,48399,48401,48403],{"class":169,"line":261},[167,48400,174],{"class":173},[167,48402,299],{"class":177},[167,48404,185],{"class":173},[167,48406,48408,48410,48412,48414,48416,48419,48422,48424],{"class":48407,"line":273},[169,213],[167,48409,307],{"class":173},[167,48411,15],{"class":177},[167,48413,46960],{"class":181},[167,48415,267],{"class":173},[167,48417,48418],{"class":201},"\"isVisible\"",[167,48420,48421],{"class":173},">Contenido visible\u003C\u002F",[167,48423,15],{"class":177},[167,48425,185],{"class":173},[167,48427,48428,48430,48432],{"class":169,"line":279},[167,48429,282],{"class":173},[167,48431,299],{"class":177},[167,48433,185],{"class":173},[154,48435,48438],{"className":156,"code":48436,"filename":3973,"highlights":48437,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isVisible: true\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-show=\"isVisible\">Contenido visible\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304],[87,48439,48440,48448,48456,48462,48468,48475,48479,48483,48487,48495,48499,48507,48526],{"__ignoreMap":163},[167,48441,48442,48444,48446],{"class":169,"line":170},[167,48443,174],{"class":173},[167,48445,178],{"class":177},[167,48447,185],{"class":173},[167,48449,48450,48452,48454],{"class":169,"line":188},[167,48451,608],{"class":191},[167,48453,3991],{"class":191},[167,48455,1905],{"class":173},[167,48457,48458,48460],{"class":169,"line":205},[167,48459,7176],{"class":181},[167,48461,763],{"class":173},[167,48463,48464,48466],{"class":169,"line":160},[167,48465,1937],{"class":191},[167,48467,1905],{"class":173},[167,48469,48470,48473],{"class":169,"line":238},[167,48471,48472],{"class":173},"      isVisible: ",[167,48474,3637],{"class":219},[167,48476,48477],{"class":169,"line":243},[167,48478,4049],{"class":173},[167,48480,48481],{"class":169,"line":261},[167,48482,3492],{"class":173},[167,48484,48485],{"class":169,"line":273},[167,48486,276],{"class":173},[167,48488,48489,48491,48493],{"class":169,"line":279},[167,48490,282],{"class":173},[167,48492,178],{"class":177},[167,48494,185],{"class":173},[167,48496,48497],{"class":169,"line":289},[167,48498,209],{"emptyLinePlaceholder":208},[167,48500,48501,48503,48505],{"class":169,"line":294},[167,48502,174],{"class":173},[167,48504,299],{"class":177},[167,48506,185],{"class":173},[167,48508,48510,48512,48514,48516,48518,48520,48522,48524],{"class":48509,"line":304},[169,213],[167,48511,307],{"class":173},[167,48513,15],{"class":177},[167,48515,46960],{"class":181},[167,48517,267],{"class":173},[167,48519,48418],{"class":201},[167,48521,48421],{"class":173},[167,48523,15],{"class":177},[167,48525,185],{"class":173},[167,48527,48528,48530,48532],{"class":169,"line":313},[167,48529,282],{"class":173},[167,48531,299],{"class":177},[167,48533,185],{"class":173},[22,48535,48536],{"id":30726},[87,48537,30726],{},[15,48539,48540],{},"Permite renderizar listas a partir de arreglos u objetos reactivos.",[15,48542,48543],{},"Clave mental:",[5367,48545,48546],{},[15,48547,48548,48550,48551,48554],{},[87,48549,30726],{}," describe ",[3933,48552,48553],{},"estructura",", no lógica.",[154,48556,48559],{"className":156,"code":48557,"filename":3260,"highlights":48558,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n  \nconst items = ref([\n  { id: 1, name: 'Vue' },\n  { id: 2, name: 'React' }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"item in items\" :key=\"item.id\">\n    {{ item.name }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[294,304,313],[87,48560,48561,48571,48581,48585,48597,48609,48621,48625,48633,48637,48645,48667,48673,48682],{"__ignoreMap":163},[167,48562,48563,48565,48567,48569],{"class":169,"line":170},[167,48564,174],{"class":173},[167,48566,178],{"class":177},[167,48568,182],{"class":181},[167,48570,185],{"class":173},[167,48572,48573,48575,48577,48579],{"class":169,"line":188},[167,48574,192],{"class":191},[167,48576,195],{"class":173},[167,48578,198],{"class":191},[167,48580,202],{"class":201},[167,48582,48583],{"class":169,"line":205},[167,48584,48367],{"class":173},[167,48586,48587,48589,48591,48593,48595],{"class":169,"line":160},[167,48588,216],{"class":191},[167,48590,1820],{"class":219},[167,48592,223],{"class":191},[167,48594,226],{"class":181},[167,48596,1827],{"class":173},[167,48598,48599,48601,48603,48605,48607],{"class":169,"line":238},[167,48600,1832],{"class":173},[167,48602,1835],{"class":219},[167,48604,1838],{"class":173},[167,48606,42925],{"class":201},[167,48608,1856],{"class":173},[167,48610,48611,48613,48615,48617,48619],{"class":169,"line":243},[167,48612,1832],{"class":173},[167,48614,1853],{"class":219},[167,48616,1838],{"class":173},[167,48618,42930],{"class":201},[167,48620,599],{"class":173},[167,48622,48623],{"class":169,"line":261},[167,48624,429],{"class":173},[167,48626,48627,48629,48631],{"class":169,"line":273},[167,48628,282],{"class":173},[167,48630,178],{"class":177},[167,48632,185],{"class":173},[167,48634,48635],{"class":169,"line":279},[167,48636,209],{"emptyLinePlaceholder":208},[167,48638,48639,48641,48643],{"class":169,"line":289},[167,48640,174],{"class":173},[167,48642,299],{"class":177},[167,48644,185],{"class":173},[167,48646,48648,48650,48652,48654,48656,48659,48661,48663,48665],{"class":48647,"line":294},[169,213],[167,48649,307],{"class":173},[167,48651,36],{"class":177},[167,48653,18706],{"class":181},[167,48655,267],{"class":173},[167,48657,48658],{"class":201},"\"item in items\"",[167,48660,10307],{"class":181},[167,48662,267],{"class":173},[167,48664,35843],{"class":201},[167,48666,185],{"class":173},[167,48668,48670],{"class":48669,"line":304},[169,213],[167,48671,48672],{"class":173},"    {{ item.name }}\n",[167,48674,48676,48678,48680],{"class":48675,"line":313},[169,213],[167,48677,504],{"class":173},[167,48679,36],{"class":177},[167,48681,185],{"class":173},[167,48683,48684,48686,48688],{"class":169,"line":161},[167,48685,282],{"class":173},[167,48687,299],{"class":177},[167,48689,185],{"class":173},[154,48691,48694],{"className":156,"code":48692,"filename":3973,"highlights":48693,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      items: [\n        { id: 1, name: 'Vue' },\n        { id: 2, name: 'React' }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli v-for=\"item in items\" :key=\"item.id\">\n    {{ item.name }}\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[335,341,489],[87,48695,48696,48704,48712,48718,48724,48728,48740,48752,48756,48760,48764,48768,48776,48780,48788,48809,48814,48823],{"__ignoreMap":163},[167,48697,48698,48700,48702],{"class":169,"line":170},[167,48699,174],{"class":173},[167,48701,178],{"class":177},[167,48703,185],{"class":173},[167,48705,48706,48708,48710],{"class":169,"line":188},[167,48707,608],{"class":191},[167,48709,3991],{"class":191},[167,48711,1905],{"class":173},[167,48713,48714,48716],{"class":169,"line":205},[167,48715,7176],{"class":181},[167,48717,763],{"class":173},[167,48719,48720,48722],{"class":169,"line":160},[167,48721,1937],{"class":191},[167,48723,1905],{"class":173},[167,48725,48726],{"class":169,"line":238},[167,48727,44324],{"class":173},[167,48729,48730,48732,48734,48736,48738],{"class":169,"line":243},[167,48731,8677],{"class":173},[167,48733,1835],{"class":219},[167,48735,1838],{"class":173},[167,48737,42925],{"class":201},[167,48739,1856],{"class":173},[167,48741,48742,48744,48746,48748,48750],{"class":169,"line":261},[167,48743,8677],{"class":173},[167,48745,1853],{"class":219},[167,48747,1838],{"class":173},[167,48749,42930],{"class":201},[167,48751,599],{"class":173},[167,48753,48754],{"class":169,"line":273},[167,48755,8738],{"class":173},[167,48757,48758],{"class":169,"line":279},[167,48759,4049],{"class":173},[167,48761,48762],{"class":169,"line":289},[167,48763,3492],{"class":173},[167,48765,48766],{"class":169,"line":294},[167,48767,276],{"class":173},[167,48769,48770,48772,48774],{"class":169,"line":304},[167,48771,282],{"class":173},[167,48773,178],{"class":177},[167,48775,185],{"class":173},[167,48777,48778],{"class":169,"line":313},[167,48779,209],{"emptyLinePlaceholder":208},[167,48781,48782,48784,48786],{"class":169,"line":161},[167,48783,174],{"class":173},[167,48785,299],{"class":177},[167,48787,185],{"class":173},[167,48789,48791,48793,48795,48797,48799,48801,48803,48805,48807],{"class":48790,"line":335},[169,213],[167,48792,307],{"class":173},[167,48794,36],{"class":177},[167,48796,18706],{"class":181},[167,48798,267],{"class":173},[167,48800,48658],{"class":201},[167,48802,10307],{"class":181},[167,48804,267],{"class":173},[167,48806,35843],{"class":201},[167,48808,185],{"class":173},[167,48810,48812],{"class":48811,"line":341},[169,213],[167,48813,48672],{"class":173},[167,48815,48817,48819,48821],{"class":48816,"line":489},[169,213],[167,48818,504],{"class":173},[167,48820,36],{"class":177},[167,48822,185],{"class":173},[167,48824,48825,48827,48829],{"class":169,"line":495},[167,48826,282],{"class":173},[167,48828,299],{"class":177},[167,48830,185],{"class":173},[15,48832,48833,16903,48835,48838],{},[87,48834,7845],{},[3933,48836,48837],{},"no es opcional",". Nunca lo fue.\nEs esencial para que Vue pueda optimizar correctamente el renderizado.",[22,48840,48841],{"id":23868},[87,48842,23868],{},[15,48844,48845],{},"Vincula dinámicamente atributos HTML o props de componentes.",[15,48847,13788,48848,48850],{},[87,48849,23868],{}," como:",[5367,48852,48853],{},[15,48854,48855],{},"“Este atributo depende del estado”",[154,48857,48860],{"className":156,"code":48858,"filename":3260,"highlights":48859,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst imageUrl = ref('https:\u002F\u002Fexample.com\u002Fimage.jpg')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg v-bind:src=\"imageUrl\" alt=\"Imagen dinámica\" \u002F>\n\u003C\u002Ftemplate>\n",[273],[87,48861,48862,48872,48882,48886,48904,48912,48916,48924,48949],{"__ignoreMap":163},[167,48863,48864,48866,48868,48870],{"class":169,"line":170},[167,48865,174],{"class":173},[167,48867,178],{"class":177},[167,48869,182],{"class":181},[167,48871,185],{"class":173},[167,48873,48874,48876,48878,48880],{"class":169,"line":188},[167,48875,192],{"class":191},[167,48877,195],{"class":173},[167,48879,198],{"class":191},[167,48881,202],{"class":201},[167,48883,48884],{"class":169,"line":205},[167,48885,209],{"emptyLinePlaceholder":208},[167,48887,48888,48890,48893,48895,48897,48899,48902],{"class":169,"line":160},[167,48889,216],{"class":191},[167,48891,48892],{"class":219}," imageUrl",[167,48894,223],{"class":191},[167,48896,226],{"class":181},[167,48898,229],{"class":173},[167,48900,48901],{"class":201},"'https:\u002F\u002Fexample.com\u002Fimage.jpg'",[167,48903,235],{"class":173},[167,48905,48906,48908,48910],{"class":169,"line":238},[167,48907,282],{"class":173},[167,48909,178],{"class":177},[167,48911,185],{"class":173},[167,48913,48914],{"class":169,"line":243},[167,48915,209],{"emptyLinePlaceholder":208},[167,48917,48918,48920,48922],{"class":169,"line":261},[167,48919,174],{"class":173},[167,48921,299],{"class":177},[167,48923,185],{"class":173},[167,48925,48927,48929,48931,48934,48936,48939,48942,48944,48947],{"class":48926,"line":273},[169,213],[167,48928,307],{"class":173},[167,48930,40006],{"class":177},[167,48932,48933],{"class":181}," v-bind:src",[167,48935,267],{"class":173},[167,48937,48938],{"class":201},"\"imageUrl\"",[167,48940,48941],{"class":181}," alt",[167,48943,267],{"class":173},[167,48945,48946],{"class":201},"\"Imagen dinámica\"",[167,48948,5325],{"class":173},[167,48950,48951,48953,48955],{"class":169,"line":279},[167,48952,282],{"class":173},[167,48954,299],{"class":177},[167,48956,185],{"class":173},[154,48958,48961],{"className":156,"code":48959,"filename":3973,"highlights":48960,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      imageUrl: '\u002Flogo.png',\n      description: 'Logo'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg :src=\"imageUrl\" :alt=\"description\" \u002F>\n\u003C\u002Ftemplate>\n",[313],[87,48962,48963,48971,48979,48985,48991,49001,49009,49013,49017,49021,49029,49033,49041,49065],{"__ignoreMap":163},[167,48964,48965,48967,48969],{"class":169,"line":170},[167,48966,174],{"class":173},[167,48968,178],{"class":177},[167,48970,185],{"class":173},[167,48972,48973,48975,48977],{"class":169,"line":188},[167,48974,608],{"class":191},[167,48976,3991],{"class":191},[167,48978,1905],{"class":173},[167,48980,48981,48983],{"class":169,"line":205},[167,48982,7176],{"class":181},[167,48984,763],{"class":173},[167,48986,48987,48989],{"class":169,"line":160},[167,48988,1937],{"class":191},[167,48990,1905],{"class":173},[167,48992,48993,48996,48999],{"class":169,"line":238},[167,48994,48995],{"class":173},"      imageUrl: ",[167,48997,48998],{"class":201},"'\u002Flogo.png'",[167,49000,393],{"class":173},[167,49002,49003,49006],{"class":169,"line":243},[167,49004,49005],{"class":173},"      description: ",[167,49007,49008],{"class":201},"'Logo'\n",[167,49010,49011],{"class":169,"line":261},[167,49012,4049],{"class":173},[167,49014,49015],{"class":169,"line":273},[167,49016,3492],{"class":173},[167,49018,49019],{"class":169,"line":279},[167,49020,276],{"class":173},[167,49022,49023,49025,49027],{"class":169,"line":289},[167,49024,282],{"class":173},[167,49026,178],{"class":177},[167,49028,185],{"class":173},[167,49030,49031],{"class":169,"line":294},[167,49032,209],{"emptyLinePlaceholder":208},[167,49034,49035,49037,49039],{"class":169,"line":304},[167,49036,174],{"class":173},[167,49038,299],{"class":177},[167,49040,185],{"class":173},[167,49042,49044,49046,49048,49051,49053,49055,49058,49060,49063],{"class":49043,"line":313},[169,213],[167,49045,307],{"class":173},[167,49047,40006],{"class":177},[167,49049,49050],{"class":181}," :src",[167,49052,267],{"class":173},[167,49054,48938],{"class":201},[167,49056,49057],{"class":181}," :alt",[167,49059,267],{"class":173},[167,49061,49062],{"class":201},"\"description\"",[167,49064,5325],{"class":173},[167,49066,49067,49069,49071],{"class":169,"line":161},[167,49068,282],{"class":173},[167,49070,299],{"class":177},[167,49072,185],{"class":173},[22,49074,49075],{"id":23865},[87,49076,23865],{},[15,49078,49079,49080,49083],{},"Crea una ",[3933,49081,49082],{},"sincronización bidireccional"," entre el estado y un input o componente.",[15,49085,49086],{},"Es ideal para:",[33,49088,49089,49091,49094],{},[36,49090,36747],{},[36,49092,49093],{},"Inputs controlados",[36,49095,49096],{},"Componentes reutilizables",[154,49098,49101],{"className":156,"code":49099,"filename":3260,"highlights":49100,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst username = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"username\" placeholder=\"Ingresa tu nombre de usuario\" \u002F>\n  \u003Cp>Hola, {{ username }}!\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273],[87,49102,49103,49113,49123,49127,49144,49152,49156,49164,49187,49200],{"__ignoreMap":163},[167,49104,49105,49107,49109,49111],{"class":169,"line":170},[167,49106,174],{"class":173},[167,49108,178],{"class":177},[167,49110,182],{"class":181},[167,49112,185],{"class":173},[167,49114,49115,49117,49119,49121],{"class":169,"line":188},[167,49116,192],{"class":191},[167,49118,195],{"class":173},[167,49120,198],{"class":191},[167,49122,202],{"class":201},[167,49124,49125],{"class":169,"line":205},[167,49126,209],{"emptyLinePlaceholder":208},[167,49128,49129,49131,49134,49136,49138,49140,49142],{"class":169,"line":160},[167,49130,216],{"class":191},[167,49132,49133],{"class":219}," username",[167,49135,223],{"class":191},[167,49137,226],{"class":181},[167,49139,229],{"class":173},[167,49141,2184],{"class":201},[167,49143,235],{"class":173},[167,49145,49146,49148,49150],{"class":169,"line":238},[167,49147,282],{"class":173},[167,49149,178],{"class":177},[167,49151,185],{"class":173},[167,49153,49154],{"class":169,"line":243},[167,49155,209],{"emptyLinePlaceholder":208},[167,49157,49158,49160,49162],{"class":169,"line":261},[167,49159,174],{"class":173},[167,49161,299],{"class":177},[167,49163,185],{"class":173},[167,49165,49167,49169,49171,49173,49175,49178,49180,49182,49185],{"class":49166,"line":273},[169,213],[167,49168,307],{"class":173},[167,49170,2650],{"class":177},[167,49172,2653],{"class":181},[167,49174,267],{"class":173},[167,49176,49177],{"class":201},"\"username\"",[167,49179,2668],{"class":181},[167,49181,267],{"class":173},[167,49183,49184],{"class":201},"\"Ingresa tu nombre de usuario\"",[167,49186,5325],{"class":173},[167,49188,49189,49191,49193,49196,49198],{"class":169,"line":279},[167,49190,307],{"class":173},[167,49192,15],{"class":177},[167,49194,49195],{"class":173},">Hola, {{ username }}!\u003C\u002F",[167,49197,15],{"class":177},[167,49199,185],{"class":173},[167,49201,49202,49204,49206],{"class":169,"line":289},[167,49203,282],{"class":173},[167,49205,299],{"class":177},[167,49207,185],{"class":173},[154,49209,49212],{"className":156,"code":49210,"filename":3973,"highlights":49211,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      username: ''\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"username\" placeholder=\"Ingresa tu nombre de usuario\" \u002F>\n  \u003Cp>Hola, {{ username }}!\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304],[87,49213,49214,49222,49230,49236,49242,49249,49253,49257,49261,49269,49273,49281,49302,49314],{"__ignoreMap":163},[167,49215,49216,49218,49220],{"class":169,"line":170},[167,49217,174],{"class":173},[167,49219,178],{"class":177},[167,49221,185],{"class":173},[167,49223,49224,49226,49228],{"class":169,"line":188},[167,49225,608],{"class":191},[167,49227,3991],{"class":191},[167,49229,1905],{"class":173},[167,49231,49232,49234],{"class":169,"line":205},[167,49233,7176],{"class":181},[167,49235,763],{"class":173},[167,49237,49238,49240],{"class":169,"line":160},[167,49239,1937],{"class":191},[167,49241,1905],{"class":173},[167,49243,49244,49247],{"class":169,"line":238},[167,49245,49246],{"class":173},"      username: ",[167,49248,7209],{"class":201},[167,49250,49251],{"class":169,"line":243},[167,49252,4049],{"class":173},[167,49254,49255],{"class":169,"line":261},[167,49256,3492],{"class":173},[167,49258,49259],{"class":169,"line":273},[167,49260,276],{"class":173},[167,49262,49263,49265,49267],{"class":169,"line":279},[167,49264,282],{"class":173},[167,49266,178],{"class":177},[167,49268,185],{"class":173},[167,49270,49271],{"class":169,"line":289},[167,49272,209],{"emptyLinePlaceholder":208},[167,49274,49275,49277,49279],{"class":169,"line":294},[167,49276,174],{"class":173},[167,49278,299],{"class":177},[167,49280,185],{"class":173},[167,49282,49284,49286,49288,49290,49292,49294,49296,49298,49300],{"class":49283,"line":304},[169,213],[167,49285,307],{"class":173},[167,49287,2650],{"class":177},[167,49289,2653],{"class":181},[167,49291,267],{"class":173},[167,49293,49177],{"class":201},[167,49295,2668],{"class":181},[167,49297,267],{"class":173},[167,49299,49184],{"class":201},[167,49301,5325],{"class":173},[167,49303,49304,49306,49308,49310,49312],{"class":169,"line":313},[167,49305,307],{"class":173},[167,49307,15],{"class":177},[167,49309,49195],{"class":173},[167,49311,15],{"class":177},[167,49313,185],{"class":173},[167,49315,49316,49318,49320],{"class":169,"line":161},[167,49317,282],{"class":173},[167,49319,299],{"class":177},[167,49321,185],{"class":173},[15,49323,49324,49325,33973,49327,49329],{},"Internamente, combina props y eventos (",[87,49326,34049],{},[87,49328,34055],{},").\nNo es magia, pero se le parece bastante.",[22,49331,49332],{"id":23871},[87,49333,23871],{},[15,49335,49336],{},"Escucha eventos del DOM y ejecuta lógica reactiva.",[154,49338,49341],{"className":156,"code":49339,"filename":3260,"highlights":49340,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\nconst increment = () => {\n  count.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton v-on:click=\"increment\">Has hecho clic {{ count }} veces\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[294],[87,49342,49343,49353,49363,49367,49383,49398,49404,49408,49416,49420,49428,49450],{"__ignoreMap":163},[167,49344,49345,49347,49349,49351],{"class":169,"line":170},[167,49346,174],{"class":173},[167,49348,178],{"class":177},[167,49350,182],{"class":181},[167,49352,185],{"class":173},[167,49354,49355,49357,49359,49361],{"class":169,"line":188},[167,49356,192],{"class":191},[167,49358,195],{"class":173},[167,49360,198],{"class":191},[167,49362,202],{"class":201},[167,49364,49365],{"class":169,"line":205},[167,49366,209],{"emptyLinePlaceholder":208},[167,49368,49369,49371,49373,49375,49377,49379,49381],{"class":169,"line":160},[167,49370,216],{"class":191},[167,49372,15325],{"class":219},[167,49374,223],{"class":191},[167,49376,226],{"class":181},[167,49378,229],{"class":173},[167,49380,1960],{"class":219},[167,49382,235],{"class":173},[167,49384,49385,49387,49390,49392,49394,49396],{"class":169,"line":238},[167,49386,216],{"class":191},[167,49388,49389],{"class":181}," increment",[167,49391,223],{"class":191},[167,49393,1469],{"class":173},[167,49395,639],{"class":191},[167,49397,1905],{"class":173},[167,49399,49400,49402],{"class":169,"line":243},[167,49401,15356],{"class":173},[167,49403,3126],{"class":191},[167,49405,49406],{"class":169,"line":261},[167,49407,276],{"class":173},[167,49409,49410,49412,49414],{"class":169,"line":273},[167,49411,282],{"class":173},[167,49413,178],{"class":177},[167,49415,185],{"class":173},[167,49417,49418],{"class":169,"line":279},[167,49419,209],{"emptyLinePlaceholder":208},[167,49421,49422,49424,49426],{"class":169,"line":289},[167,49423,174],{"class":173},[167,49425,299],{"class":177},[167,49427,185],{"class":173},[167,49429,49431,49433,49435,49438,49440,49443,49446,49448],{"class":49430,"line":294},[169,213],[167,49432,307],{"class":173},[167,49434,507],{"class":177},[167,49436,49437],{"class":181}," v-on:click",[167,49439,267],{"class":173},[167,49441,49442],{"class":201},"\"increment\"",[167,49444,49445],{"class":173},">Has hecho clic {{ count }} veces\u003C\u002F",[167,49447,507],{"class":177},[167,49449,185],{"class":173},[167,49451,49452,49454,49456],{"class":169,"line":304},[167,49453,282],{"class":173},[167,49455,299],{"class":177},[167,49457,185],{"class":173},[154,49459,49462],{"className":156,"code":49460,"filename":3973,"highlights":49461,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      count: 0\n    }\n  },\n  methods: {\n    increment() {\n      this.count++\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton v-on:click=\"increment\">Clickeame\u003C\u002Fbutton>\n  \u003Cp>Has clickeado {{ count }} veces.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[489],[87,49463,49464,49472,49480,49486,49492,49498,49502,49506,49510,49517,49526,49530,49534,49538,49546,49550,49558,49578,49591],{"__ignoreMap":163},[167,49465,49466,49468,49470],{"class":169,"line":170},[167,49467,174],{"class":173},[167,49469,178],{"class":177},[167,49471,185],{"class":173},[167,49473,49474,49476,49478],{"class":169,"line":188},[167,49475,608],{"class":191},[167,49477,3991],{"class":191},[167,49479,1905],{"class":173},[167,49481,49482,49484],{"class":169,"line":205},[167,49483,7176],{"class":181},[167,49485,763],{"class":173},[167,49487,49488,49490],{"class":169,"line":160},[167,49489,1937],{"class":191},[167,49491,1905],{"class":173},[167,49493,49494,49496],{"class":169,"line":238},[167,49495,37484],{"class":173},[167,49497,10681],{"class":219},[167,49499,49500],{"class":169,"line":243},[167,49501,4049],{"class":173},[167,49503,49504],{"class":169,"line":261},[167,49505,398],{"class":173},[167,49507,49508],{"class":169,"line":273},[167,49509,4419],{"class":173},[167,49511,49512,49515],{"class":169,"line":279},[167,49513,49514],{"class":181},"    increment",[167,49516,763],{"class":173},[167,49518,49519,49521,49524],{"class":169,"line":289},[167,49520,741],{"class":219},[167,49522,49523],{"class":173},".count",[167,49525,3126],{"class":191},[167,49527,49528],{"class":169,"line":294},[167,49529,4049],{"class":173},[167,49531,49532],{"class":169,"line":304},[167,49533,3492],{"class":173},[167,49535,49536],{"class":169,"line":313},[167,49537,276],{"class":173},[167,49539,49540,49542,49544],{"class":169,"line":161},[167,49541,282],{"class":173},[167,49543,178],{"class":177},[167,49545,185],{"class":173},[167,49547,49548],{"class":169,"line":335},[167,49549,209],{"emptyLinePlaceholder":208},[167,49551,49552,49554,49556],{"class":169,"line":341},[167,49553,174],{"class":173},[167,49555,299],{"class":177},[167,49557,185],{"class":173},[167,49559,49561,49563,49565,49567,49569,49571,49574,49576],{"class":49560,"line":489},[169,213],[167,49562,307],{"class":173},[167,49564,507],{"class":177},[167,49566,49437],{"class":181},[167,49568,267],{"class":173},[167,49570,49442],{"class":201},[167,49572,49573],{"class":173},">Clickeame\u003C\u002F",[167,49575,507],{"class":177},[167,49577,185],{"class":173},[167,49579,49580,49582,49584,49587,49589],{"class":169,"line":495},[167,49581,307],{"class":173},[167,49583,15],{"class":177},[167,49585,49586],{"class":173},">Has clickeado {{ count }} veces.\u003C\u002F",[167,49588,15],{"class":177},[167,49590,185],{"class":173},[167,49592,49593,49595,49597],{"class":169,"line":501},[167,49594,282],{"class":173},[167,49596,299],{"class":177},[167,49598,185],{"class":173},[15,49600,49601,49602,2526,49605,1025,49607,1025,49609,49611],{},"Soporta ",[3933,49603,49604],{},"modificadores",[87,49606,36908],{},[87,49608,36905],{},[87,49610,36911],{},", etc.) que evitan código innecesario.",[22,49613,49614],{"id":30434},[87,49615,30434],{},[15,49617,49618],{},"Inserta texto plano en un elemento, reemplazando su contenido.",[154,49620,49623],{"className":156,"code":49621,"filename":3260,"highlights":49622,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst message = ref('Hola Mundo')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-text=\"message\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[273],[87,49624,49625,49635,49645,49649,49666,49674,49678,49686,49706],{"__ignoreMap":163},[167,49626,49627,49629,49631,49633],{"class":169,"line":170},[167,49628,174],{"class":173},[167,49630,178],{"class":177},[167,49632,182],{"class":181},[167,49634,185],{"class":173},[167,49636,49637,49639,49641,49643],{"class":169,"line":188},[167,49638,192],{"class":191},[167,49640,195],{"class":173},[167,49642,198],{"class":191},[167,49644,202],{"class":201},[167,49646,49647],{"class":169,"line":205},[167,49648,209],{"emptyLinePlaceholder":208},[167,49650,49651,49653,49655,49657,49659,49661,49664],{"class":169,"line":160},[167,49652,216],{"class":191},[167,49654,29012],{"class":219},[167,49656,223],{"class":191},[167,49658,226],{"class":181},[167,49660,229],{"class":173},[167,49662,49663],{"class":201},"'Hola Mundo'",[167,49665,235],{"class":173},[167,49667,49668,49670,49672],{"class":169,"line":238},[167,49669,282],{"class":173},[167,49671,178],{"class":177},[167,49673,185],{"class":173},[167,49675,49676],{"class":169,"line":243},[167,49677,209],{"emptyLinePlaceholder":208},[167,49679,49680,49682,49684],{"class":169,"line":261},[167,49681,174],{"class":173},[167,49683,299],{"class":177},[167,49685,185],{"class":173},[167,49687,49689,49691,49693,49695,49697,49700,49702,49704],{"class":49688,"line":273},[169,213],[167,49690,307],{"class":173},[167,49692,1242],{"class":177},[167,49694,30525],{"class":181},[167,49696,267],{"class":173},[167,49698,49699],{"class":201},"\"message\"",[167,49701,1282],{"class":173},[167,49703,1242],{"class":177},[167,49705,185],{"class":173},[167,49707,49708,49710,49712],{"class":169,"line":279},[167,49709,282],{"class":173},[167,49711,299],{"class":177},[167,49713,185],{"class":173},[154,49715,49718],{"className":156,"code":49716,"filename":3973,"highlights":49717,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      message: 'Hola Vue'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-text=\"message\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,49719,49720,49728,49736,49742,49748,49755,49759,49763,49767,49775,49779,49787,49806],{"__ignoreMap":163},[167,49721,49722,49724,49726],{"class":169,"line":170},[167,49723,174],{"class":173},[167,49725,178],{"class":177},[167,49727,185],{"class":173},[167,49729,49730,49732,49734],{"class":169,"line":188},[167,49731,608],{"class":191},[167,49733,3991],{"class":191},[167,49735,1905],{"class":173},[167,49737,49738,49740],{"class":169,"line":205},[167,49739,7176],{"class":181},[167,49741,763],{"class":173},[167,49743,49744,49746],{"class":169,"line":160},[167,49745,1937],{"class":191},[167,49747,1905],{"class":173},[167,49749,49750,49752],{"class":169,"line":238},[167,49751,29126],{"class":173},[167,49753,49754],{"class":201},"'Hola Vue'\n",[167,49756,49757],{"class":169,"line":243},[167,49758,4049],{"class":173},[167,49760,49761],{"class":169,"line":261},[167,49762,3492],{"class":173},[167,49764,49765],{"class":169,"line":273},[167,49766,276],{"class":173},[167,49768,49769,49771,49773],{"class":169,"line":279},[167,49770,282],{"class":173},[167,49772,178],{"class":177},[167,49774,185],{"class":173},[167,49776,49777],{"class":169,"line":289},[167,49778,209],{"emptyLinePlaceholder":208},[167,49780,49781,49783,49785],{"class":169,"line":294},[167,49782,174],{"class":173},[167,49784,299],{"class":177},[167,49786,185],{"class":173},[167,49788,49790,49792,49794,49796,49798,49800,49802,49804],{"class":49789,"line":304},[169,213],[167,49791,307],{"class":173},[167,49793,1242],{"class":177},[167,49795,30525],{"class":181},[167,49797,267],{"class":173},[167,49799,49699],{"class":201},[167,49801,1282],{"class":173},[167,49803,1242],{"class":177},[167,49805,185],{"class":173},[167,49807,49808,49810,49812],{"class":169,"line":313},[167,49809,282],{"class":173},[167,49811,299],{"class":177},[167,49813,185],{"class":173},[15,49815,49816],{},"No se usa mucho, pero existe para casos muy específicos donde no quieres interpolaciones.",[22,49818,49819],{"id":30437},[87,49820,30437],{},[15,49822,49823],{},"Inserta HTML sin escapar.",[154,49825,49828],{"className":156,"code":49826,"filename":3260,"highlights":49827,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst rawHtml = ref('\u003Cstrong>Texto en negrita\u003C\u002Fstrong>')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-html=\"rawHtml\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[273],[87,49829,49830,49840,49850,49854,49872,49880,49884,49892,49912],{"__ignoreMap":163},[167,49831,49832,49834,49836,49838],{"class":169,"line":170},[167,49833,174],{"class":173},[167,49835,178],{"class":177},[167,49837,182],{"class":181},[167,49839,185],{"class":173},[167,49841,49842,49844,49846,49848],{"class":169,"line":188},[167,49843,192],{"class":191},[167,49845,195],{"class":173},[167,49847,198],{"class":191},[167,49849,202],{"class":201},[167,49851,49852],{"class":169,"line":205},[167,49853,209],{"emptyLinePlaceholder":208},[167,49855,49856,49858,49861,49863,49865,49867,49870],{"class":169,"line":160},[167,49857,216],{"class":191},[167,49859,49860],{"class":219}," rawHtml",[167,49862,223],{"class":191},[167,49864,226],{"class":181},[167,49866,229],{"class":173},[167,49868,49869],{"class":201},"'\u003Cstrong>Texto en negrita\u003C\u002Fstrong>'",[167,49871,235],{"class":173},[167,49873,49874,49876,49878],{"class":169,"line":238},[167,49875,282],{"class":173},[167,49877,178],{"class":177},[167,49879,185],{"class":173},[167,49881,49882],{"class":169,"line":243},[167,49883,209],{"emptyLinePlaceholder":208},[167,49885,49886,49888,49890],{"class":169,"line":261},[167,49887,174],{"class":173},[167,49889,299],{"class":177},[167,49891,185],{"class":173},[167,49893,49895,49897,49899,49901,49903,49906,49908,49910],{"class":49894,"line":273},[169,213],[167,49896,307],{"class":173},[167,49898,1242],{"class":177},[167,49900,30594],{"class":181},[167,49902,267],{"class":173},[167,49904,49905],{"class":201},"\"rawHtml\"",[167,49907,1282],{"class":173},[167,49909,1242],{"class":177},[167,49911,185],{"class":173},[167,49913,49914,49916,49918],{"class":169,"line":279},[167,49915,282],{"class":173},[167,49917,299],{"class":177},[167,49919,185],{"class":173},[154,49921,49924],{"className":156,"code":49922,"filename":3973,"highlights":49923,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      rawHtml: '\u003Cstrong>HTML dinámico\u003C\u002Fstrong>'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-html=\"rawHtml\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,49925,49926,49934,49942,49948,49954,49962,49966,49970,49974,49982,49986,49994,50013],{"__ignoreMap":163},[167,49927,49928,49930,49932],{"class":169,"line":170},[167,49929,174],{"class":173},[167,49931,178],{"class":177},[167,49933,185],{"class":173},[167,49935,49936,49938,49940],{"class":169,"line":188},[167,49937,608],{"class":191},[167,49939,3991],{"class":191},[167,49941,1905],{"class":173},[167,49943,49944,49946],{"class":169,"line":205},[167,49945,7176],{"class":181},[167,49947,763],{"class":173},[167,49949,49950,49952],{"class":169,"line":160},[167,49951,1937],{"class":191},[167,49953,1905],{"class":173},[167,49955,49956,49959],{"class":169,"line":238},[167,49957,49958],{"class":173},"      rawHtml: ",[167,49960,49961],{"class":201},"'\u003Cstrong>HTML dinámico\u003C\u002Fstrong>'\n",[167,49963,49964],{"class":169,"line":243},[167,49965,4049],{"class":173},[167,49967,49968],{"class":169,"line":261},[167,49969,3492],{"class":173},[167,49971,49972],{"class":169,"line":273},[167,49973,276],{"class":173},[167,49975,49976,49978,49980],{"class":169,"line":279},[167,49977,282],{"class":173},[167,49979,178],{"class":177},[167,49981,185],{"class":173},[167,49983,49984],{"class":169,"line":289},[167,49985,209],{"emptyLinePlaceholder":208},[167,49987,49988,49990,49992],{"class":169,"line":294},[167,49989,174],{"class":173},[167,49991,299],{"class":177},[167,49993,185],{"class":173},[167,49995,49997,49999,50001,50003,50005,50007,50009,50011],{"class":49996,"line":304},[169,213],[167,49998,307],{"class":173},[167,50000,1242],{"class":177},[167,50002,30594],{"class":181},[167,50004,267],{"class":173},[167,50006,49905],{"class":201},[167,50008,1282],{"class":173},[167,50010,1242],{"class":177},[167,50012,185],{"class":173},[167,50014,50015,50017,50019],{"class":169,"line":313},[167,50016,282],{"class":173},[167,50018,299],{"class":177},[167,50020,185],{"class":173},[5367,50022,50023],{},[15,50024,50025,50026,50029],{},"⚠️ ",[3933,50027,50028],{},"Nunca lo uses con contenido no confiable",".\nEs una puerta directa a XSS si no sabes exactamente lo que estás renderizando.",[22,50031,50032],{"id":31708},[87,50033,31708],{},[15,50035,50036],{},"Permite definir contenido dinámico dentro de componentes mediante slots.",[154,50038,50041],{"className":156,"code":50039,"filename":3260,"highlights":50040,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMyCard>\n    \u003Ctemplate v-slot:header>\n      \u003Ch1>Encabezado Personalizado\u003C\u002Fh1>\n    \u003C\u002Ftemplate>\n    \u003Cp>Contenido del cuerpo de la tarjeta.\u003C\u002Fp>\n    \u003Ctemplate v-slot:footer>\n      \u003Cbutton>Acción\u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FMyCard>\n\u003C\u002Ftemplate>\n",[243,289],[87,50042,50043,50053,50061,50065,50073,50082,50097,50110,50118,50131,50146,50159,50167,50175],{"__ignoreMap":163},[167,50044,50045,50047,50049,50051],{"class":169,"line":170},[167,50046,174],{"class":173},[167,50048,178],{"class":177},[167,50050,182],{"class":181},[167,50052,185],{"class":173},[167,50054,50055,50057,50059],{"class":169,"line":188},[167,50056,282],{"class":173},[167,50058,178],{"class":177},[167,50060,185],{"class":173},[167,50062,50063],{"class":169,"line":205},[167,50064,209],{"emptyLinePlaceholder":208},[167,50066,50067,50069,50071],{"class":169,"line":160},[167,50068,174],{"class":173},[167,50070,299],{"class":177},[167,50072,185],{"class":173},[167,50074,50075,50077,50080],{"class":169,"line":238},[167,50076,307],{"class":173},[167,50078,50079],{"class":177},"MyCard",[167,50081,185],{"class":173},[167,50083,50085,50087,50089,50091,50093,50095],{"class":50084,"line":243},[169,213],[167,50086,1257],{"class":173},[167,50088,299],{"class":177},[167,50090,32029],{"class":181},[167,50092,583],{"class":173},[167,50094,1260],{"class":181},[167,50096,185],{"class":173},[167,50098,50099,50101,50103,50106,50108],{"class":169,"line":261},[167,50100,1268],{"class":173},[167,50102,11],{"class":177},[167,50104,50105],{"class":173},">Encabezado Personalizado\u003C\u002F",[167,50107,11],{"class":177},[167,50109,185],{"class":173},[167,50111,50112,50114,50116],{"class":169,"line":273},[167,50113,1292],{"class":173},[167,50115,299],{"class":177},[167,50117,185],{"class":173},[167,50119,50120,50122,50124,50127,50129],{"class":169,"line":279},[167,50121,1257],{"class":173},[167,50123,15],{"class":177},[167,50125,50126],{"class":173},">Contenido del cuerpo de la tarjeta.\u003C\u002F",[167,50128,15],{"class":177},[167,50130,185],{"class":173},[167,50132,50134,50136,50138,50140,50142,50144],{"class":50133,"line":289},[169,213],[167,50135,1257],{"class":173},[167,50137,299],{"class":177},[167,50139,32029],{"class":181},[167,50141,583],{"class":173},[167,50143,1334],{"class":181},[167,50145,185],{"class":173},[167,50147,50148,50150,50152,50155,50157],{"class":169,"line":294},[167,50149,1268],{"class":173},[167,50151,507],{"class":177},[167,50153,50154],{"class":173},">Acción\u003C\u002F",[167,50156,507],{"class":177},[167,50158,185],{"class":173},[167,50160,50161,50163,50165],{"class":169,"line":304},[167,50162,1292],{"class":173},[167,50164,299],{"class":177},[167,50166,185],{"class":173},[167,50168,50169,50171,50173],{"class":169,"line":313},[167,50170,504],{"class":173},[167,50172,50079],{"class":177},[167,50174,185],{"class":173},[167,50176,50177,50179,50181],{"class":169,"line":161},[167,50178,282],{"class":173},[167,50180,299],{"class":177},[167,50182,185],{"class":173},[154,50184,50187],{"className":156,"code":50185,"filename":3973,"highlights":50186,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  components: { MyCard }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMyCard>\n    \u003Ctemplate v-slot:header>\n      \u003Ch1>Encabezado Personalizado\u003C\u002Fh1>\n    \u003C\u002Ftemplate>\n    \u003Cp>Contenido del cuerpo de la tarjeta.\u003C\u002Fp>\n    \u003Ctemplate v-slot:footer>\n      \u003Cbutton>Acción\u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FMyCard>\n\u003C\u002Ftemplate>\n",[279,313],[87,50188,50189,50197,50205,50210,50214,50222,50226,50234,50242,50257,50269,50277,50289,50304,50316,50324,50332],{"__ignoreMap":163},[167,50190,50191,50193,50195],{"class":169,"line":170},[167,50192,174],{"class":173},[167,50194,178],{"class":177},[167,50196,185],{"class":173},[167,50198,50199,50201,50203],{"class":169,"line":188},[167,50200,608],{"class":191},[167,50202,3991],{"class":191},[167,50204,1905],{"class":173},[167,50206,50207],{"class":169,"line":205},[167,50208,50209],{"class":173},"  components: { MyCard }\n",[167,50211,50212],{"class":169,"line":160},[167,50213,276],{"class":173},[167,50215,50216,50218,50220],{"class":169,"line":238},[167,50217,282],{"class":173},[167,50219,178],{"class":177},[167,50221,185],{"class":173},[167,50223,50224],{"class":169,"line":243},[167,50225,209],{"emptyLinePlaceholder":208},[167,50227,50228,50230,50232],{"class":169,"line":261},[167,50229,174],{"class":173},[167,50231,299],{"class":177},[167,50233,185],{"class":173},[167,50235,50236,50238,50240],{"class":169,"line":273},[167,50237,307],{"class":173},[167,50239,50079],{"class":177},[167,50241,185],{"class":173},[167,50243,50245,50247,50249,50251,50253,50255],{"class":50244,"line":279},[169,213],[167,50246,1257],{"class":173},[167,50248,299],{"class":177},[167,50250,32029],{"class":181},[167,50252,583],{"class":173},[167,50254,1260],{"class":181},[167,50256,185],{"class":173},[167,50258,50259,50261,50263,50265,50267],{"class":169,"line":289},[167,50260,1268],{"class":173},[167,50262,11],{"class":177},[167,50264,50105],{"class":173},[167,50266,11],{"class":177},[167,50268,185],{"class":173},[167,50270,50271,50273,50275],{"class":169,"line":294},[167,50272,1292],{"class":173},[167,50274,299],{"class":177},[167,50276,185],{"class":173},[167,50278,50279,50281,50283,50285,50287],{"class":169,"line":304},[167,50280,1257],{"class":173},[167,50282,15],{"class":177},[167,50284,50126],{"class":173},[167,50286,15],{"class":177},[167,50288,185],{"class":173},[167,50290,50292,50294,50296,50298,50300,50302],{"class":50291,"line":313},[169,213],[167,50293,1257],{"class":173},[167,50295,299],{"class":177},[167,50297,32029],{"class":181},[167,50299,583],{"class":173},[167,50301,1334],{"class":181},[167,50303,185],{"class":173},[167,50305,50306,50308,50310,50312,50314],{"class":169,"line":161},[167,50307,1268],{"class":173},[167,50309,507],{"class":177},[167,50311,50154],{"class":173},[167,50313,507],{"class":177},[167,50315,185],{"class":173},[167,50317,50318,50320,50322],{"class":169,"line":335},[167,50319,1292],{"class":173},[167,50321,299],{"class":177},[167,50323,185],{"class":173},[167,50325,50326,50328,50330],{"class":169,"line":341},[167,50327,504],{"class":173},[167,50329,50079],{"class":177},[167,50331,185],{"class":173},[167,50333,50334,50336,50338],{"class":169,"line":489},[167,50335,282],{"class":173},[167,50337,299],{"class":177},[167,50339,185],{"class":173},[15,50341,50342,50343,1679],{},"Es clave para crear componentes ",[3933,50344,50345],{},"flexibles, composables y reutilizables",[22,50347,50348],{"id":27772},[87,50349,27772],{},[15,50351,50352,50353,50356],{},"Renderiza el contenido ",[3933,50354,50355],{},"una sola vez"," y lo excluye del sistema reactivo.",[154,50358,50361],{"className":156,"code":50359,"filename":3260,"highlights":50360,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n  \nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-once>Este texto no cambiará: {{ count }}\u003C\u002Fp>\n  \u003Cbutton @click=\"count++\">Incrementar\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[273],[87,50362,50363,50373,50383,50387,50403,50411,50415,50423,50439,50458],{"__ignoreMap":163},[167,50364,50365,50367,50369,50371],{"class":169,"line":170},[167,50366,174],{"class":173},[167,50368,178],{"class":177},[167,50370,182],{"class":181},[167,50372,185],{"class":173},[167,50374,50375,50377,50379,50381],{"class":169,"line":188},[167,50376,192],{"class":191},[167,50378,195],{"class":173},[167,50380,198],{"class":191},[167,50382,202],{"class":201},[167,50384,50385],{"class":169,"line":205},[167,50386,48367],{"class":173},[167,50388,50389,50391,50393,50395,50397,50399,50401],{"class":169,"line":160},[167,50390,216],{"class":191},[167,50392,15325],{"class":219},[167,50394,223],{"class":191},[167,50396,226],{"class":181},[167,50398,229],{"class":173},[167,50400,1960],{"class":219},[167,50402,235],{"class":173},[167,50404,50405,50407,50409],{"class":169,"line":238},[167,50406,282],{"class":173},[167,50408,178],{"class":177},[167,50410,185],{"class":173},[167,50412,50413],{"class":169,"line":243},[167,50414,209],{"emptyLinePlaceholder":208},[167,50416,50417,50419,50421],{"class":169,"line":261},[167,50418,174],{"class":173},[167,50420,299],{"class":177},[167,50422,185],{"class":173},[167,50424,50426,50428,50430,50432,50435,50437],{"class":50425,"line":273},[169,213],[167,50427,307],{"class":173},[167,50429,15],{"class":177},[167,50431,28178],{"class":181},[167,50433,50434],{"class":173},">Este texto no cambiará: {{ count }}\u003C\u002F",[167,50436,15],{"class":177},[167,50438,185],{"class":173},[167,50440,50441,50443,50445,50447,50449,50451,50454,50456],{"class":169,"line":279},[167,50442,307],{"class":173},[167,50444,507],{"class":177},[167,50446,1182],{"class":181},[167,50448,267],{"class":173},[167,50450,18386],{"class":201},[167,50452,50453],{"class":173},">Incrementar\u003C\u002F",[167,50455,507],{"class":177},[167,50457,185],{"class":173},[167,50459,50460,50462,50464],{"class":169,"line":289},[167,50461,282],{"class":173},[167,50463,299],{"class":177},[167,50465,185],{"class":173},[154,50467,50470],{"className":156,"code":50468,"filename":3973,"highlights":50469,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      count: 0\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-once>Este texto no cambiará: {{ count }}\u003C\u002Fp>\n  \u003Cbutton @click=\"count++\">Incrementar\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[304],[87,50471,50472,50480,50488,50494,50500,50506,50510,50514,50518,50526,50530,50538,50553,50571],{"__ignoreMap":163},[167,50473,50474,50476,50478],{"class":169,"line":170},[167,50475,174],{"class":173},[167,50477,178],{"class":177},[167,50479,185],{"class":173},[167,50481,50482,50484,50486],{"class":169,"line":188},[167,50483,608],{"class":191},[167,50485,3991],{"class":191},[167,50487,1905],{"class":173},[167,50489,50490,50492],{"class":169,"line":205},[167,50491,7176],{"class":181},[167,50493,763],{"class":173},[167,50495,50496,50498],{"class":169,"line":160},[167,50497,1937],{"class":191},[167,50499,1905],{"class":173},[167,50501,50502,50504],{"class":169,"line":238},[167,50503,37484],{"class":173},[167,50505,10681],{"class":219},[167,50507,50508],{"class":169,"line":243},[167,50509,4049],{"class":173},[167,50511,50512],{"class":169,"line":261},[167,50513,3492],{"class":173},[167,50515,50516],{"class":169,"line":273},[167,50517,276],{"class":173},[167,50519,50520,50522,50524],{"class":169,"line":279},[167,50521,282],{"class":173},[167,50523,178],{"class":177},[167,50525,185],{"class":173},[167,50527,50528],{"class":169,"line":289},[167,50529,209],{"emptyLinePlaceholder":208},[167,50531,50532,50534,50536],{"class":169,"line":294},[167,50533,174],{"class":173},[167,50535,299],{"class":177},[167,50537,185],{"class":173},[167,50539,50541,50543,50545,50547,50549,50551],{"class":50540,"line":304},[169,213],[167,50542,307],{"class":173},[167,50544,15],{"class":177},[167,50546,28178],{"class":181},[167,50548,50434],{"class":173},[167,50550,15],{"class":177},[167,50552,185],{"class":173},[167,50554,50555,50557,50559,50561,50563,50565,50567,50569],{"class":169,"line":313},[167,50556,307],{"class":173},[167,50558,507],{"class":177},[167,50560,1182],{"class":181},[167,50562,267],{"class":173},[167,50564,18386],{"class":201},[167,50566,50453],{"class":173},[167,50568,507],{"class":177},[167,50570,185],{"class":173},[167,50572,50573,50575,50577],{"class":169,"line":161},[167,50574,282],{"class":173},[167,50576,299],{"class":177},[167,50578,185],{"class":173},[15,50580,50581],{},"Útil cuando el contenido no debe actualizarse jamás, incluso si el estado cambia.",[22,50583,50584],{"id":27775},[87,50585,27775],{},[15,50587,50588],{},"Evita renderizados innecesarios cuando las dependencias no cambian.",[154,50590,50593],{"className":156,"code":50591,"filename":3260,"highlights":50592,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[count]\">\n    \u003Cp>Este bloque solo se re-renderiza si 'count' cambia: {{ count }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cbutton @click=\"count++\">Incrementar\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[273],[87,50594,50595,50605,50615,50619,50635,50643,50647,50655,50672,50685,50693,50711],{"__ignoreMap":163},[167,50596,50597,50599,50601,50603],{"class":169,"line":170},[167,50598,174],{"class":173},[167,50600,178],{"class":177},[167,50602,182],{"class":181},[167,50604,185],{"class":173},[167,50606,50607,50609,50611,50613],{"class":169,"line":188},[167,50608,192],{"class":191},[167,50610,195],{"class":173},[167,50612,198],{"class":191},[167,50614,202],{"class":201},[167,50616,50617],{"class":169,"line":205},[167,50618,209],{"emptyLinePlaceholder":208},[167,50620,50621,50623,50625,50627,50629,50631,50633],{"class":169,"line":160},[167,50622,216],{"class":191},[167,50624,15325],{"class":219},[167,50626,223],{"class":191},[167,50628,226],{"class":181},[167,50630,229],{"class":173},[167,50632,1960],{"class":219},[167,50634,235],{"class":173},[167,50636,50637,50639,50641],{"class":169,"line":238},[167,50638,282],{"class":173},[167,50640,178],{"class":177},[167,50642,185],{"class":173},[167,50644,50645],{"class":169,"line":243},[167,50646,209],{"emptyLinePlaceholder":208},[167,50648,50649,50651,50653],{"class":169,"line":261},[167,50650,174],{"class":173},[167,50652,299],{"class":177},[167,50654,185],{"class":173},[167,50656,50658,50660,50662,50665,50667,50670],{"class":50657,"line":273},[169,213],[167,50659,307],{"class":173},[167,50661,1242],{"class":177},[167,50663,50664],{"class":181}," v-memo",[167,50666,267],{"class":173},[167,50668,50669],{"class":201},"\"[count]\"",[167,50671,185],{"class":173},[167,50673,50674,50676,50678,50681,50683],{"class":169,"line":279},[167,50675,1257],{"class":173},[167,50677,15],{"class":177},[167,50679,50680],{"class":173},">Este bloque solo se re-renderiza si 'count' cambia: {{ count }}\u003C\u002F",[167,50682,15],{"class":177},[167,50684,185],{"class":173},[167,50686,50687,50689,50691],{"class":169,"line":289},[167,50688,504],{"class":173},[167,50690,1242],{"class":177},[167,50692,185],{"class":173},[167,50694,50695,50697,50699,50701,50703,50705,50707,50709],{"class":169,"line":294},[167,50696,307],{"class":173},[167,50698,507],{"class":177},[167,50700,1182],{"class":181},[167,50702,267],{"class":173},[167,50704,18386],{"class":201},[167,50706,50453],{"class":173},[167,50708,507],{"class":177},[167,50710,185],{"class":173},[167,50712,50713,50715,50717],{"class":169,"line":304},[167,50714,282],{"class":173},[167,50716,299],{"class":177},[167,50718,185],{"class":173},[154,50720,50723],{"className":156,"code":50721,"filename":3973,"highlights":50722,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      value: 10\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[value]\">\n    \u003Cp>El valor es: {{ value }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,50724,50725,50733,50741,50747,50753,50761,50765,50769,50773,50781,50785,50793,50809,50822,50830],{"__ignoreMap":163},[167,50726,50727,50729,50731],{"class":169,"line":170},[167,50728,174],{"class":173},[167,50730,178],{"class":177},[167,50732,185],{"class":173},[167,50734,50735,50737,50739],{"class":169,"line":188},[167,50736,608],{"class":191},[167,50738,3991],{"class":191},[167,50740,1905],{"class":173},[167,50742,50743,50745],{"class":169,"line":205},[167,50744,7176],{"class":181},[167,50746,763],{"class":173},[167,50748,50749,50751],{"class":169,"line":160},[167,50750,1937],{"class":191},[167,50752,1905],{"class":173},[167,50754,50755,50758],{"class":169,"line":238},[167,50756,50757],{"class":173},"      value: ",[167,50759,50760],{"class":219},"10\n",[167,50762,50763],{"class":169,"line":243},[167,50764,4049],{"class":173},[167,50766,50767],{"class":169,"line":261},[167,50768,3492],{"class":173},[167,50770,50771],{"class":169,"line":273},[167,50772,276],{"class":173},[167,50774,50775,50777,50779],{"class":169,"line":279},[167,50776,282],{"class":173},[167,50778,178],{"class":177},[167,50780,185],{"class":173},[167,50782,50783],{"class":169,"line":289},[167,50784,209],{"emptyLinePlaceholder":208},[167,50786,50787,50789,50791],{"class":169,"line":294},[167,50788,174],{"class":173},[167,50790,299],{"class":177},[167,50792,185],{"class":173},[167,50794,50796,50798,50800,50802,50804,50807],{"class":50795,"line":304},[169,213],[167,50797,307],{"class":173},[167,50799,1242],{"class":177},[167,50801,50664],{"class":181},[167,50803,267],{"class":173},[167,50805,50806],{"class":201},"\"[value]\"",[167,50808,185],{"class":173},[167,50810,50811,50813,50815,50818,50820],{"class":169,"line":313},[167,50812,1257],{"class":173},[167,50814,15],{"class":177},[167,50816,50817],{"class":173},">El valor es: {{ value }}\u003C\u002F",[167,50819,15],{"class":177},[167,50821,185],{"class":173},[167,50823,50824,50826,50828],{"class":169,"line":161},[167,50825,504],{"class":173},[167,50827,1242],{"class":177},[167,50829,185],{"class":173},[167,50831,50832,50834,50836],{"class":169,"line":335},[167,50833,282],{"class":173},[167,50835,299],{"class":177},[167,50837,185],{"class":173},[15,50839,50840,50841,50844],{},"Es una ",[3933,50842,50843],{},"optimización avanzada",".\nNo está pensada para usarse “porque sí”, sino en cuellos de botella reales.",[22,50846,50847],{"id":27778},[87,50848,27778],{},[15,50850,50851],{},"Evita que Vue compile el contenido del nodo.",[154,50853,50856],{"className":156,"code":50854,"filename":3260,"highlights":50855,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-pre>\n    {{ esto_no_se_evaluará }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[238],[87,50857,50858,50868,50876,50880,50888,50899,50904,50912],{"__ignoreMap":163},[167,50859,50860,50862,50864,50866],{"class":169,"line":170},[167,50861,174],{"class":173},[167,50863,178],{"class":177},[167,50865,182],{"class":181},[167,50867,185],{"class":173},[167,50869,50870,50872,50874],{"class":169,"line":188},[167,50871,282],{"class":173},[167,50873,178],{"class":177},[167,50875,185],{"class":173},[167,50877,50878],{"class":169,"line":205},[167,50879,209],{"emptyLinePlaceholder":208},[167,50881,50882,50884,50886],{"class":169,"line":160},[167,50883,174],{"class":173},[167,50885,299],{"class":177},[167,50887,185],{"class":173},[167,50889,50891,50893,50895,50897],{"class":50890,"line":238},[169,213],[167,50892,307],{"class":173},[167,50894,1242],{"class":177},[167,50896,29066],{"class":181},[167,50898,185],{"class":173},[167,50900,50901],{"class":169,"line":243},[167,50902,50903],{"class":173},"    {{ esto_no_se_evaluará }}\n",[167,50905,50906,50908,50910],{"class":169,"line":261},[167,50907,504],{"class":173},[167,50909,1242],{"class":177},[167,50911,185],{"class":173},[167,50913,50914,50916,50918],{"class":169,"line":273},[167,50915,282],{"class":173},[167,50917,299],{"class":177},[167,50919,185],{"class":173},[154,50921,50924],{"className":156,"code":50922,"filename":3973,"highlights":50923,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-pre>\n    {{ esto_no_se_evaluará }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[243],[87,50925,50926,50934,50943,50951,50955,50963,50974,50978,50986],{"__ignoreMap":163},[167,50927,50928,50930,50932],{"class":169,"line":170},[167,50929,174],{"class":173},[167,50931,178],{"class":177},[167,50933,185],{"class":173},[167,50935,50936,50938,50940],{"class":169,"line":188},[167,50937,608],{"class":191},[167,50939,3991],{"class":191},[167,50941,50942],{"class":173}," {}\n",[167,50944,50945,50947,50949],{"class":169,"line":205},[167,50946,282],{"class":173},[167,50948,178],{"class":177},[167,50950,185],{"class":173},[167,50952,50953],{"class":169,"line":160},[167,50954,209],{"emptyLinePlaceholder":208},[167,50956,50957,50959,50961],{"class":169,"line":238},[167,50958,174],{"class":173},[167,50960,299],{"class":177},[167,50962,185],{"class":173},[167,50964,50966,50968,50970,50972],{"class":50965,"line":243},[169,213],[167,50967,307],{"class":173},[167,50969,1242],{"class":177},[167,50971,29066],{"class":181},[167,50973,185],{"class":173},[167,50975,50976],{"class":169,"line":261},[167,50977,50903],{"class":173},[167,50979,50980,50982,50984],{"class":169,"line":273},[167,50981,504],{"class":173},[167,50983,1242],{"class":177},[167,50985,185],{"class":173},[167,50987,50988,50990,50992],{"class":169,"line":279},[167,50989,282],{"class":173},[167,50991,299],{"class":177},[167,50993,185],{"class":173},[15,50995,50996],{},"Perfecta para mostrar snippets, ejemplos literales o templates de demostración.",[22,50998,50999],{"id":26486},[87,51000,26486],{},[15,51002,51003],{},"Oculta el template hasta que Vue termine de montar la aplicación.",[154,51005,51008],{"className":156,"code":51006,"filename":3260,"highlights":51007,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-cloak>\n    {{ mensaje }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[238],[87,51009,51010,51020,51028,51032,51040,51051,51056,51064],{"__ignoreMap":163},[167,51011,51012,51014,51016,51018],{"class":169,"line":170},[167,51013,174],{"class":173},[167,51015,178],{"class":177},[167,51017,182],{"class":181},[167,51019,185],{"class":173},[167,51021,51022,51024,51026],{"class":169,"line":188},[167,51023,282],{"class":173},[167,51025,178],{"class":177},[167,51027,185],{"class":173},[167,51029,51030],{"class":169,"line":205},[167,51031,209],{"emptyLinePlaceholder":208},[167,51033,51034,51036,51038],{"class":169,"line":160},[167,51035,174],{"class":173},[167,51037,299],{"class":177},[167,51039,185],{"class":173},[167,51041,51043,51045,51047,51049],{"class":51042,"line":238},[169,213],[167,51044,307],{"class":173},[167,51046,1242],{"class":177},[167,51048,26875],{"class":181},[167,51050,185],{"class":173},[167,51052,51053],{"class":169,"line":243},[167,51054,51055],{"class":173},"    {{ mensaje }}\n",[167,51057,51058,51060,51062],{"class":169,"line":261},[167,51059,504],{"class":173},[167,51061,1242],{"class":177},[167,51063,185],{"class":173},[167,51065,51066,51068,51070],{"class":169,"line":273},[167,51067,282],{"class":173},[167,51069,299],{"class":177},[167,51071,185],{"class":173},[154,51073,51076],{"className":156,"code":51074,"filename":3973,"highlights":51075,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-cloak>\n    {{ mensaje }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[243],[87,51077,51078,51086,51094,51102,51106,51114,51125,51129,51137],{"__ignoreMap":163},[167,51079,51080,51082,51084],{"class":169,"line":170},[167,51081,174],{"class":173},[167,51083,178],{"class":177},[167,51085,185],{"class":173},[167,51087,51088,51090,51092],{"class":169,"line":188},[167,51089,608],{"class":191},[167,51091,3991],{"class":191},[167,51093,50942],{"class":173},[167,51095,51096,51098,51100],{"class":169,"line":205},[167,51097,282],{"class":173},[167,51099,178],{"class":177},[167,51101,185],{"class":173},[167,51103,51104],{"class":169,"line":160},[167,51105,209],{"emptyLinePlaceholder":208},[167,51107,51108,51110,51112],{"class":169,"line":238},[167,51109,174],{"class":173},[167,51111,299],{"class":177},[167,51113,185],{"class":173},[167,51115,51117,51119,51121,51123],{"class":51116,"line":243},[169,213],[167,51118,307],{"class":173},[167,51120,1242],{"class":177},[167,51122,26875],{"class":181},[167,51124,185],{"class":173},[167,51126,51127],{"class":169,"line":261},[167,51128,51055],{"class":173},[167,51130,51131,51133,51135],{"class":169,"line":273},[167,51132,504],{"class":173},[167,51134,1242],{"class":177},[167,51136,185],{"class":173},[167,51138,51139,51141,51143],{"class":169,"line":279},[167,51140,282],{"class":173},[167,51142,299],{"class":177},[167,51144,185],{"class":173},[15,51146,51147],{},"Evita el parpadeo inicial en aplicaciones renderizadas del lado del cliente.",[22,51149,9244],{"id":51150},"directivas-personalizadas",[15,51152,51153],{},"Permiten extender Vue para manipular directamente el DOM cuando no hay otra opción más declarativa.",[154,51155,51158],{"className":2879,"code":51156,"filename":25323,"highlights":51157,"language":2882,"meta":163,"style":163},"import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\nconst app = createApp(App)\napp.directive('focus', {\n  mounted(el) {\n    el.focus()\n  }\n})\n",[160,238,243,261,273],[87,51159,51160,51171,51183,51198,51214,51225,51235,51240],{"__ignoreMap":163},[167,51161,51162,51164,51167,51169],{"class":169,"line":170},[167,51163,192],{"class":191},[167,51165,51166],{"class":173}," { createApp } ",[167,51168,198],{"class":191},[167,51170,202],{"class":201},[167,51172,51173,51175,51178,51180],{"class":169,"line":188},[167,51174,192],{"class":191},[167,51176,51177],{"class":173}," App ",[167,51179,198],{"class":191},[167,51181,51182],{"class":201}," '.\u002FApp.vue'\n",[167,51184,51185,51187,51190,51192,51195],{"class":169,"line":205},[167,51186,216],{"class":191},[167,51188,51189],{"class":219}," app",[167,51191,223],{"class":191},[167,51193,51194],{"class":181}," createApp",[167,51196,51197],{"class":173},"(App)\n",[167,51199,51201,51204,51207,51209,51212],{"class":51200,"line":160},[169,213],[167,51202,51203],{"class":173},"app.",[167,51205,51206],{"class":181},"directive",[167,51208,229],{"class":173},[167,51210,51211],{"class":201},"'focus'",[167,51213,627],{"class":173},[167,51215,51217,51219,51221,51223],{"class":51216,"line":238},[169,213],[167,51218,12749],{"class":181},[167,51220,229],{"class":173},[167,51222,24211],{"class":254},[167,51224,258],{"class":173},[167,51226,51228,51231,51233],{"class":51227,"line":243},[169,213],[167,51229,51230],{"class":173},"    el.",[167,51232,17408],{"class":181},[167,51234,2917],{"class":173},[167,51236,51238],{"class":51237,"line":261},[169,213],[167,51239,3492],{"class":173},[167,51241,51243],{"class":51242,"line":273},[169,213],[167,51244,403],{"class":173},[154,51246,51249],{"className":156,"code":51247,"filename":15284,"highlights":51248,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cinput v-focus \u002F>\n\u003C\u002Ftemplate>\n",[188],[87,51250,51251,51259,51271],{"__ignoreMap":163},[167,51252,51253,51255,51257],{"class":169,"line":170},[167,51254,174],{"class":173},[167,51256,299],{"class":177},[167,51258,185],{"class":173},[167,51260,51262,51264,51266,51269],{"class":51261,"line":188},[169,213],[167,51263,307],{"class":173},[167,51265,2650],{"class":177},[167,51267,51268],{"class":181}," v-focus",[167,51270,5325],{"class":173},[167,51272,51273,51275,51277],{"class":169,"line":205},[167,51274,282],{"class":173},[167,51276,299],{"class":177},[167,51278,185],{"class":173},[15,51280,51281],{},"Son poderosas, pero deben usarse con cuidado:\nsi abusas de ellas, probablemente estás rompiendo el modelo mental de Vue.",[22,51283,23574],{"id":23573},[15,51285,51286,51287,1679],{},"Las directivas no son solo sintaxis bonita.\nSon ",[3933,51288,51289],{},"contratos claros entre el estado y el DOM",[15,51291,51292],{},"Este artículo es el punto de partida.\nCada directiva tendrá su entrada individual, con:",[33,51294,51295,51298,51300],{},[36,51296,51297],{},"Casos reales",[36,51299,3085],{},[36,51301,51302],{},"Buenas y malas prácticas",[15,51304,51305,51306,51309],{},"Este mapa ya te permite ",[3933,51307,51308],{},"leer código Vue con criterio",".\nLo demás es profundidad, no confusión.",[924,51311,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":51313},[51314,51315,51317,51318,51319,51320,51321,51322,51323,51324,51325,51326,51327,51328,51329,51330],{"id":19082,"depth":188,"text":19083},{"id":48057,"depth":188,"text":51316},"v-if, v-else-if, v-else",{"id":13659,"depth":188,"text":13659},{"id":30726,"depth":188,"text":30726},{"id":23868,"depth":188,"text":23868},{"id":23865,"depth":188,"text":23865},{"id":23871,"depth":188,"text":23871},{"id":30434,"depth":188,"text":30434},{"id":30437,"depth":188,"text":30437},{"id":31708,"depth":188,"text":31708},{"id":27772,"depth":188,"text":27772},{"id":27775,"depth":188,"text":27775},{"id":27778,"depth":188,"text":27778},{"id":26486,"depth":188,"text":26486},{"id":51150,"depth":188,"text":9244},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1770161262\u002Fvue-directives-overview_qyrngz.png","2026-02-04","Explora las directivas esenciales de Vue.js, su sintaxis y casos de uso comunes.",{"updatedAt":33919,"readingTime":243,"coverCaption":51335,"author":946,"keywords":51336},"Imagen destacada que representa las directivas en Vue.js.",[3258,26466,51337,973],"Desarrollo Frontend","\u002Fblog\u002Fvue-directives-overview.es",[51340],{"headline":47965,"author":51341,"datePublished":51342,"@type":961},{"name":946,"@type":959},"2026-02-03T20:00:00-05:00",{"title":47965,"description":51333},"blog\u002Fvue-directives-overview.es",[51346,51347,51348,51349,51350,51351],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":47958,"color":47959},{"tag":46092,"color":3270},{"tag":3269,"color":3270},{"tag":5424,"color":5425},"JwLOQaBKN45DaJoFg7X918rNjFPTm8MZd7iOm0BuH68",{"id":51354,"title":51355,"body":51356,"cover":52115,"coverAlt":51355,"date":52116,"description":52117,"draft":940,"extension":941,"lab":942,"locale":943,"meta":52118,"navigation":208,"path":52123,"schemaOrg":52124,"seo":52128,"series":963,"seriesDescription":964,"seriesOrder":238,"seriesTitle":965,"slug":942,"stem":52129,"tags":52130,"__hash__":52138},"blog\u002Fblog\u002Fmastering-renderless-components-vue-3.es.md","Patrones Avanzados en Vue 3: El Poder de los Renderless Components",{"type":8,"value":51357,"toc":52104},[51358,51362,51373,51377,51384,51391,51395,51409,51413,51416,51566,51719,51725,51837,51844,51864,51955,51958,51962,51971,52050,52061,52065,52088,52092,52101],[11,51359,51361],{"id":51360},"el-patrón-renderless-en-vue-3-arquitectura-y-separación-de-responsabilidades","El Patrón Renderless en Vue 3: Arquitectura y Separación de Responsabilidades",[15,51363,51364,51365,51368,51369,51372],{},"En el ecosistema de Vue 3, la reutilización de código ha evolucionado significativamente gracias a la Composition API. Sin embargo, persiste un desafío recurrente: ",[3933,51366,51367],{},"¿Cómo compartir una lógica de interfaz compleja sin imponer un diseño o una estructura HTML específicos?"," Aquí es donde el patrón de ",[3933,51370,51371],{},"Renderless Components"," se consolida como una herramienta indispensable para la arquitectura de software.",[22,51374,51376],{"id":51375},"qué-es-un-renderless-component","¿Qué es un Renderless Component?",[15,51378,51379,51380,51383],{},"Un componente ",[9295,51381,51382],{},"renderless"," (sin renderizado) es aquel que no genera ningún marcado propio ni estilos CSS. Su única responsabilidad es encapsular el estado y la lógica de comportamiento para exponer estos datos al componente padre. El padre, a su vez, decide exactamente qué elementos del DOM utilizar y cómo estilizarlos.",[15,51385,51386,51387,51390],{},"Este patrón es la columna vertebral de las ",[3933,51388,51389],{},"bibliotecas \"Headless UI\"",", permitiendo que la lógica de un componente —como la gestión de un modal, un desplegable o un formulario— sea universal, mientras que el diseño permanece 100% personalizable.",[22,51392,51394],{"id":51393},"el-motor-scoped-slots","El Motor: Scoped Slots",[15,51396,51397,51398,51401,51402,51404,51405,51408],{},"La implementación de este patrón se apoya en los ",[3933,51399,51400],{},"Scoped Slots",". A diferencia de un ",[9295,51403,1271],{}," convencional, un ",[9295,51406,51407],{},"scoped slot"," permite al componente hijo enviar datos \"hacia arriba\" a la plantilla del padre en el momento de la ejecución.",[3087,51410,51412],{"id":51411},"ejemplo-práctico-un-controlador-de-visibilidad","Ejemplo Práctico: Un Controlador de Visibilidad",[15,51414,51415],{},"Imagina un componente que gestiona el estado de \"abierto\u002Fcerrado\", algo esencial en menús y modales.",[154,51417,51421],{"className":156,"code":51418,"filename":51419,"highlights":51420,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const isOpen = ref(false);\n  const toggle = () => {\n    isOpen.value = !isOpen.value;\n  };\n\n  \u002F\u002F Exponemos el estado y el método al slot\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C\u002Fslot>\n\u003C\u002Ftemplate>\n","LogicToggle.vue - Composition API",[160,238,243,261,313],[87,51422,51423,51433,51447,51451,51468,51483,51496,51502,51506,51511,51519,51523,51531,51558],{"__ignoreMap":163},[167,51424,51425,51427,51429,51431],{"class":169,"line":170},[167,51426,174],{"class":173},[167,51428,178],{"class":177},[167,51430,182],{"class":181},[167,51432,185],{"class":173},[167,51434,51435,51438,51440,51442,51445],{"class":169,"line":188},[167,51436,51437],{"class":191},"  import",[167,51439,195],{"class":173},[167,51441,198],{"class":191},[167,51443,51444],{"class":201}," 'vue'",[167,51446,24044],{"class":173},[167,51448,51449],{"class":169,"line":205},[167,51450,209],{"emptyLinePlaceholder":208},[167,51452,51454,51456,51458,51460,51462,51464,51466],{"class":51453,"line":160},[169,213],[167,51455,1443],{"class":191},[167,51457,5523],{"class":219},[167,51459,223],{"class":191},[167,51461,226],{"class":181},[167,51463,229],{"class":173},[167,51465,3392],{"class":219},[167,51467,24169],{"class":173},[167,51469,51471,51473,51475,51477,51479,51481],{"class":51470,"line":238},[169,213],[167,51472,1443],{"class":191},[167,51474,5608],{"class":181},[167,51476,223],{"class":191},[167,51478,1469],{"class":173},[167,51480,639],{"class":191},[167,51482,1905],{"class":173},[167,51484,51486,51489,51491,51493],{"class":51485,"line":243},[169,213],[167,51487,51488],{"class":173},"    isOpen.value ",[167,51490,267],{"class":191},[167,51492,5625],{"class":191},[167,51494,51495],{"class":173},"isOpen.value;\n",[167,51497,51499],{"class":51498,"line":261},[169,213],[167,51500,51501],{"class":173},"  };\n",[167,51503,51504],{"class":169,"line":273},[167,51505,209],{"emptyLinePlaceholder":208},[167,51507,51508],{"class":169,"line":279},[167,51509,51510],{"class":18662},"  \u002F\u002F Exponemos el estado y el método al slot\n",[167,51512,51513,51515,51517],{"class":169,"line":289},[167,51514,282],{"class":173},[167,51516,178],{"class":177},[167,51518,185],{"class":173},[167,51520,51521],{"class":169,"line":294},[167,51522,209],{"emptyLinePlaceholder":208},[167,51524,51525,51527,51529],{"class":169,"line":304},[167,51526,174],{"class":173},[167,51528,299],{"class":177},[167,51530,185],{"class":173},[167,51532,51534,51536,51538,51541,51543,51545,51548,51550,51552,51554,51556],{"class":51533,"line":313},[169,213],[167,51535,307],{"class":173},[167,51537,1271],{"class":177},[167,51539,51540],{"class":181}," :isOpen",[167,51542,267],{"class":173},[167,51544,5699],{"class":201},[167,51546,51547],{"class":181}," :toggle",[167,51549,267],{"class":173},[167,51551,5665],{"class":201},[167,51553,1282],{"class":173},[167,51555,1271],{"class":177},[167,51557,185],{"class":173},[167,51559,51560,51562,51564],{"class":169,"line":161},[167,51561,282],{"class":173},[167,51563,299],{"class":177},[167,51565,185],{"class":173},[154,51567,51571],{"className":156,"code":51568,"filename":51569,"highlights":51570,"language":162,"meta":163,"style":163},"\u003Cscript>\n  export default {\n    data() {\n      return {\n        isOpen: false\n      };\n    },\n    methods: {\n      toggle() {\n        this.isOpen = !this.isOpen;\n      }\n    }\n  };\n  \u002F\u002F Exponemos el estado y el método al slot\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C\u002Fslot>\n\u003C\u002Ftemplate>\n","LogicToggle.vue - Options API",[238,279,289,294,495],[87,51572,51573,51581,51590,51597,51603,51611,51615,51619,51624,51632,51649,51654,51658,51662,51666,51674,51678,51686,51711],{"__ignoreMap":163},[167,51574,51575,51577,51579],{"class":169,"line":170},[167,51576,174],{"class":173},[167,51578,178],{"class":177},[167,51580,185],{"class":173},[167,51582,51583,51586,51588],{"class":169,"line":188},[167,51584,51585],{"class":191},"  export",[167,51587,3991],{"class":191},[167,51589,1905],{"class":173},[167,51591,51592,51595],{"class":169,"line":205},[167,51593,51594],{"class":181},"    data",[167,51596,763],{"class":173},[167,51598,51599,51601],{"class":169,"line":160},[167,51600,8767],{"class":191},[167,51602,1905],{"class":173},[167,51604,51606,51609],{"class":51605,"line":238},[169,213],[167,51607,51608],{"class":173},"        isOpen: ",[167,51610,8093],{"class":219},[167,51612,51613],{"class":169,"line":243},[167,51614,42349],{"class":173},[167,51616,51617],{"class":169,"line":261},[167,51618,755],{"class":173},[167,51620,51621],{"class":169,"line":273},[167,51622,51623],{"class":173},"    methods: {\n",[167,51625,51627,51630],{"class":51626,"line":279},[169,213],[167,51628,51629],{"class":181},"      toggle",[167,51631,763],{"class":173},[167,51633,51635,51637,51640,51642,51644,51646],{"class":51634,"line":289},[169,213],[167,51636,14773],{"class":219},[167,51638,51639],{"class":173},".isOpen ",[167,51641,267],{"class":191},[167,51643,5625],{"class":191},[167,51645,4927],{"class":219},[167,51647,51648],{"class":173},".isOpen;\n",[167,51650,51652],{"class":51651,"line":294},[169,213],[167,51653,7287],{"class":173},[167,51655,51656],{"class":169,"line":304},[167,51657,4049],{"class":173},[167,51659,51660],{"class":169,"line":313},[167,51661,51501],{"class":173},[167,51663,51664],{"class":169,"line":161},[167,51665,51510],{"class":18662},[167,51667,51668,51670,51672],{"class":169,"line":335},[167,51669,282],{"class":173},[167,51671,178],{"class":177},[167,51673,185],{"class":173},[167,51675,51676],{"class":169,"line":341},[167,51677,209],{"emptyLinePlaceholder":208},[167,51679,51680,51682,51684],{"class":169,"line":489},[167,51681,174],{"class":173},[167,51683,299],{"class":177},[167,51685,185],{"class":173},[167,51687,51689,51691,51693,51695,51697,51699,51701,51703,51705,51707,51709],{"class":51688,"line":495},[169,213],[167,51690,307],{"class":173},[167,51692,1271],{"class":177},[167,51694,51540],{"class":181},[167,51696,267],{"class":173},[167,51698,5699],{"class":201},[167,51700,51547],{"class":181},[167,51702,267],{"class":173},[167,51704,5665],{"class":201},[167,51706,1282],{"class":173},[167,51708,1271],{"class":177},[167,51710,185],{"class":173},[167,51712,51713,51715,51717],{"class":169,"line":501},[167,51714,282],{"class":173},[167,51716,299],{"class":177},[167,51718,185],{"class":173},[15,51720,51721,51724],{},[3933,51722,51723],{},"Implementación en el Padre","\nAl consumir este componente, gozas de total libertad creativa:",[154,51726,51730],{"className":156,"code":51727,"filename":51728,"highlights":51729,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CLogicToggle v-slot=\"{ isOpen, toggle }\">\n    \u003Cbutton @click=\"toggle\">\n      {{ isOpen ? 'Cerrar Menú' : 'Abrir Menú' }}\n    \u003C\u002Fbutton>\n    \u003Cdiv v-if=\"isOpen\" class=\"custom-dropdown\">\n      Contenido dinámico aquí\n    \u003C\u002Fdiv>\n  \u003C\u002FLogicToggle>\n\u003C\u002Ftemplate>\n","ParentComponent.vue",[188,205,160,243],[87,51731,51732,51740,51757,51772,51778,51786,51808,51813,51821,51829],{"__ignoreMap":163},[167,51733,51734,51736,51738],{"class":169,"line":170},[167,51735,174],{"class":173},[167,51737,299],{"class":177},[167,51739,185],{"class":173},[167,51741,51743,51745,51748,51750,51752,51755],{"class":51742,"line":188},[169,213],[167,51744,307],{"class":173},[167,51746,51747],{"class":177},"LogicToggle",[167,51749,32029],{"class":181},[167,51751,267],{"class":173},[167,51753,51754],{"class":201},"\"{ isOpen, toggle }\"",[167,51756,185],{"class":173},[167,51758,51760,51762,51764,51766,51768,51770],{"class":51759,"line":205},[169,213],[167,51761,1257],{"class":173},[167,51763,507],{"class":177},[167,51765,1182],{"class":181},[167,51767,267],{"class":173},[167,51769,5665],{"class":201},[167,51771,185],{"class":173},[167,51773,51775],{"class":51774,"line":160},[169,213],[167,51776,51777],{"class":173},"      {{ isOpen ? 'Cerrar Menú' : 'Abrir Menú' }}\n",[167,51779,51780,51782,51784],{"class":169,"line":238},[167,51781,1292],{"class":173},[167,51783,507],{"class":177},[167,51785,185],{"class":173},[167,51787,51789,51791,51793,51795,51797,51799,51801,51803,51806],{"class":51788,"line":243},[169,213],[167,51790,1257],{"class":173},[167,51792,1242],{"class":177},[167,51794,5694],{"class":181},[167,51796,267],{"class":173},[167,51798,5699],{"class":201},[167,51800,1245],{"class":181},[167,51802,267],{"class":173},[167,51804,51805],{"class":201},"\"custom-dropdown\"",[167,51807,185],{"class":173},[167,51809,51810],{"class":169,"line":261},[167,51811,51812],{"class":173},"      Contenido dinámico aquí\n",[167,51814,51815,51817,51819],{"class":169,"line":273},[167,51816,1292],{"class":173},[167,51818,1242],{"class":177},[167,51820,185],{"class":173},[167,51822,51823,51825,51827],{"class":169,"line":279},[167,51824,504],{"class":173},[167,51826,51747],{"class":177},[167,51828,185],{"class":173},[167,51830,51831,51833,51835],{"class":169,"line":289},[167,51832,282],{"class":173},[167,51834,299],{"class":177},[167,51836,185],{"class":173},[22,51838,51840,51841,6219],{"id":51839},"optimización-senior-render-functions-h","Optimización Senior: Render Functions (",[87,51842,51843],{},"h",[15,51845,51846,51847,51849,51850,51853,51854,2526,51856,51859,51860,51863],{},"Para alcanzar un nivel de producción profesional, especialmente en bibliotecas distribuidas vía NPM, es recomendable prescindir del bloque ",[87,51848,31997],{},". Al utilizar la función ",[87,51851,51852],{},"render"," y el método ",[87,51855,51843],{},[9295,51857,51858],{},"hyperscript","), eliminamos la ",[3933,51861,51862],{},"sobrecarga"," de la compilación de plantillas y evitamos la creación de nodos adicionales innecesarios en el DOM.",[154,51865,51871],{"className":51866,"code":51867,"filename":51868,"highlights":51869,"language":51870,"meta":163,"style":163},"language-javascript shiki shiki-themes github-light github-dark","import { ref, h } from 'vue';\n\nexport default {\n  setup(props, { slots }) {\n    const isOpen = ref(false);\n    const toggle = () => (isOpen.value = !isOpen.value);\n\n    return () => {\n      \u002F\u002F Retornamos el slot por defecto pasando el estado\n      return slots.default ? slots.default({\n        isOpen: isOpen.value,\n        toggle\n      }) : null;\n    };\n  }\n};\n","LogicToggle.js",[160,238,243,289,294,304,313],"javascript",[87,51872,51873,51878,51882,51887,51893,51899,51905,51909,51914,51919,51925,51931,51937,51943,51947,51951],{"__ignoreMap":163},[167,51874,51875],{"class":169,"line":170},[167,51876,51877],{},"import { ref, h } from 'vue';\n",[167,51879,51880],{"class":169,"line":188},[167,51881,209],{"emptyLinePlaceholder":208},[167,51883,51884],{"class":169,"line":205},[167,51885,51886],{},"export default {\n",[167,51888,51890],{"class":51889,"line":160},[169,213],[167,51891,51892],{},"  setup(props, { slots }) {\n",[167,51894,51896],{"class":51895,"line":238},[169,213],[167,51897,51898],{},"    const isOpen = ref(false);\n",[167,51900,51902],{"class":51901,"line":243},[169,213],[167,51903,51904],{},"    const toggle = () => (isOpen.value = !isOpen.value);\n",[167,51906,51907],{"class":169,"line":261},[167,51908,209],{"emptyLinePlaceholder":208},[167,51910,51911],{"class":169,"line":273},[167,51912,51913],{},"    return () => {\n",[167,51915,51916],{"class":169,"line":279},[167,51917,51918],{},"      \u002F\u002F Retornamos el slot por defecto pasando el estado\n",[167,51920,51922],{"class":51921,"line":289},[169,213],[167,51923,51924],{},"      return slots.default ? slots.default({\n",[167,51926,51928],{"class":51927,"line":294},[169,213],[167,51929,51930],{},"        isOpen: isOpen.value,\n",[167,51932,51934],{"class":51933,"line":304},[169,213],[167,51935,51936],{},"        toggle\n",[167,51938,51940],{"class":51939,"line":313},[169,213],[167,51941,51942],{},"      }) : null;\n",[167,51944,51945],{"class":169,"line":161},[167,51946,24370],{},[167,51948,51949],{"class":169,"line":335},[167,51950,3492],{},[167,51952,51953],{"class":169,"line":341},[167,51954,24148],{},[15,51956,51957],{},"Esta aproximación permite que el componente actúe como un \"pasamanos\" puro de datos, manteniendo el Virtual DOM limpio y eficiente.",[22,51959,51961],{"id":51960},"renderless-components-vs-composables","Renderless Components vs. Composables",[15,51963,51964,51965,2526,51968,51970],{},"Una duda frecuente es por qué no utilizar simplemente un ",[9295,51966,51967],{},"Composable",[87,51969,5735],{},"). La elección depende del contexto:",[56,51972,51973,51984],{},[59,51974,51975],{},[62,51976,51977,51980,51982],{},[65,51978,51979],{},"Característica",[65,51981,954],{},[65,51983,51371],{},[75,51985,51986,51999,52012,52025,52037],{},[62,51987,51988,51993,51996],{},[80,51989,51990],{},[3933,51991,51992],{},"Encapsulación",[80,51994,51995],{},"Lógica pura de JavaScript.",[80,51997,51998],{},"Lógica ligada al ciclo de vida del componente.",[62,52000,52001,52006,52009],{},[80,52002,52003],{},[3933,52004,52005],{},"Plantilla",[80,52007,52008],{},"Se importa en el script.",[80,52010,52011],{},"Se define de forma declarativa en la plantilla.",[62,52013,52014,52019,52022],{},[80,52015,52016],{},[3933,52017,52018],{},"Ámbito",[80,52020,52021],{},"Ideal para lógica global o de negocio.",[80,52023,52024],{},"Ideal para patrones de UI (accesibilidad, eventos).",[62,52026,52027,52031,52034],{},[80,52028,52029],{},[3933,52030,1647],{},[80,52032,52033],{},"No tiene acceso a slots.",[80,52035,52036],{},"Puede orquestar múltiples subcomponentes.",[62,52038,52039,52044,52047],{},[80,52040,52041],{},[3933,52042,52043],{},"Curva de aprendizaje",[80,52045,52046],{},"Requiere entender reactividad pura.",[80,52048,52049],{},"Más intuitivo para desarrolladores de plantillas.",[15,52051,3304,52052,52054,52055,52057,52058,4270],{},[9295,52053,51371],{}," brillan cuando la lógica requiere interactuar con el ciclo de vida (como ",[87,52056,6796],{},") o cuando deseas crear una jerarquía de componentes que compartan un estado implícito (",[9295,52059,52060],{},"Compound Components",[22,52062,52064],{"id":52063},"ventajas-competitivas-del-patrón","Ventajas Competitivas del Patrón",[3035,52066,52067,52076,52082],{},[36,52068,52069,52072,52073,52075],{},[3933,52070,52071],{},"Mantenibilidad:"," Si la lógica de validación cambia, solo modificas el componente ",[9295,52074,51382],{},". La interfaz permanece intacta.",[36,52077,52078,52081],{},[3933,52079,52080],{},"Testabilidad:"," Facilita las pruebas unitarias sobre la lógica de estado sin lidiar con selectores de CSS o colisiones de estilos.",[36,52083,52084,52087],{},[3933,52085,52086],{},"Extensibilidad:"," Permite crear múltiples versiones visuales de una misma funcionalidad sin duplicar código lógico.",[22,52089,52091],{"id":52090},"consideraciones-finales","Consideraciones Finales",[15,52093,52094,52095,52097,52098,52100],{},"Si bien este patrón ofrece una flexibilidad inigualable, debe usarse con criterio. En plantillas muy extensas, el uso excesivo de ",[87,52096,31708],{}," puede dificultar la lectura del código. Sin embargo, para el desarrollo de sistemas de diseño y bibliotecas de componentes, los ",[3933,52099,51371],{}," representan el estándar de oro en la arquitectura de Vue 3.",[924,52102,52103],{},"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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":163,"searchDepth":188,"depth":188,"links":52105},[52106,52107,52110,52112,52113,52114],{"id":51375,"depth":188,"text":51376},{"id":51393,"depth":188,"text":51394,"children":52108},[52109],{"id":51411,"depth":205,"text":51412},{"id":51839,"depth":188,"text":52111},"Optimización Senior: Render Functions (h)",{"id":51960,"depth":188,"text":51961},{"id":52063,"depth":188,"text":52064},{"id":52090,"depth":188,"text":52091},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1769789805\u002Fmastering-renderless-components-vue-3_f5mqbs.png","2026-01-30","Explora cómo los Renderless Components en Vue 3 pueden mejorar la reutilización de código y la separación de lógica y presentación en tus aplicaciones.",{"updatedAt":945,"coverCaption":52119,"author":946,"keywords":52120},"Imagen destacada que representa el concepto de Renderless Components en Vue 3.",[951,51371,52121,52122,51337],"Reutilización de Código","Patrones de Diseño","\u002Fblog\u002Fmastering-renderless-components-vue-3.es",[52125],{"headline":51355,"author":52126,"datePublished":52127,"@type":961},{"name":946,"@type":959},"2026-01-30T17:00:00-05:00",{"title":51355,"description":52117},"blog\u002Fmastering-renderless-components-vue-3.es",[52131,52132,52134,52135,52136,52137],{"tag":953,"color":971},{"tag":52122,"color":52133},"#9C27B0",{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":7730,"color":7731},{"tag":973,"color":974},"yhkSM0r6ZSd16RBB-_Wkgi8QVsIgmic3u6hkdzzyLog",{"id":52140,"title":52141,"body":52142,"cover":54060,"coverAlt":52141,"date":54061,"description":54062,"draft":940,"extension":941,"lab":942,"locale":943,"meta":54063,"navigation":208,"path":54066,"schemaOrg":54067,"seo":54071,"series":963,"seriesDescription":964,"seriesOrder":160,"seriesTitle":965,"slug":942,"stem":54072,"tags":54073,"__hash__":54082},"blog\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es.md","Provide e Inject en Vue 3: Guía definitiva para eliminar el Prop Drilling",{"type":8,"value":52143,"toc":54045},[52144,52148,52155,52165,52169,52196,52203,52206,52220,52224,52227,52233,52355,52435,52441,52537,52614,52618,52631,52652,52662,52680,52687,52692,52823,53014,53019,53153,53382,53386,53393,53435,53439,53442,53453,53459,53620,53626,53832,53836,53847,53858,53862,53872,53894,53897,53901,53975,53979,53999,54001,54011,54039,54042],[11,52145,52147],{"id":52146},"provide-e-inject-cómo-evitar-el-prop-drilling-en-vuejs","Provide e Inject: Cómo evitar el Prop Drilling en Vue.js",[15,52149,52150,52151,52154],{},"Imagina que en tu proyecto tienes un componente \"Abuelo\" que debe enviar un dato a un componente \"Nieto\". Tradicionalmente, tendrías que pasar ese dato a través del componente \"Padre\", aunque este último no lo utilice para nada. A este fenómeno se le conoce como ",[3933,52152,52153],{},"Prop Drilling",", y es una de las principales causas de que el código se vuelva complejo y difícil de mantener.",[15,52156,52157,52160,52161,52164],{},[87,52158,52159],{},"Provide"," e ",[87,52162,52163],{},"Inject"," permiten que un componente ancestro exponga un dato para que cualquier descendiente lo \"atrape\" directamente, sin necesidad de pasarlo manualmente por cada nivel de la jerarquía.",[22,52166,52168],{"id":52167},"problemas-comunes-del-prop-drilling","Problemas comunes del Prop Drilling",[3035,52170,52171,52181,52187],{},[36,52172,52173,52176,52177,52180],{},[3933,52174,52175],{},"Mantenimiento costoso:"," Si decides renombrar una ",[87,52178,52179],{},"prop"," o modificar su estructura, debes actualizar cada componente intermedio, incluso si no consumen el dato.",[36,52182,52183,52186],{},[3933,52184,52185],{},"Fragilidad:"," Al depender de múltiples niveles de anidamiento, es más fácil romper la cadena de datos por un error en un componente intermedio.",[36,52188,52189,52192,52193,52195],{},[3933,52190,52191],{},"Baja Reutilización:"," Los componentes intermedios pierden versatilidad, ya que quedan obligados a recibir y transmitir ",[87,52194,3300],{}," que no pertenecen a su lógica interna.",[22,52197,52199,52200],{"id":52198},"la-solución-nativa-provide-e-inject","La solución nativa: ",[3933,52201,52202],{},"Provide e Inject",[15,52204,52205],{},"Vue nos ofrece una solución integrada sin necesidad de recurrir a librerías externas de gestión de estado (como Pinia):",[33,52207,52208,52214],{},[36,52209,52210,52213],{},[3933,52211,52212],{},"Provide:"," El componente ancestro define y \"provee\" el dato al árbol de componentes.",[36,52215,52216,52219],{},[3933,52217,52218],{},"Inject:"," Cualquier componente descendiente, sin importar su profundidad, \"inyecta\" y consume ese dato.",[22,52221,52223],{"id":52222},"implementación-en-vue-3-composition-api-y-options-api","Implementación en Vue 3 (Composition API y Options API)",[15,52225,52226],{},"Para implementar esta comunicación, seguimos una estructura de clave y valor.",[29777,52228,52230],{"id":52229},"componente-emisor-abuelo",[3933,52231,52232],{},"Componente Emisor (Abuelo):",[154,52234,52237],{"className":156,"code":52235,"filename":3260,"highlights":52236,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, provide } from 'vue'\nimport Hijo from '.\u002FHijo.vue'\n\nconst nombreApp = ref('TODOvue')\n\n\u002F\u002F Provee el dato usando una \"clave\" única\nprovide('app-name-key', nombreApp)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHijo \u002F>\n\u003C\u002Ftemplate>\n",[188,273],[87,52238,52239,52249,52261,52273,52277,52295,52299,52304,52318,52326,52330,52338,52347],{"__ignoreMap":163},[167,52240,52241,52243,52245,52247],{"class":169,"line":170},[167,52242,174],{"class":173},[167,52244,178],{"class":177},[167,52246,182],{"class":181},[167,52248,185],{"class":173},[167,52250,52252,52254,52257,52259],{"class":52251,"line":188},[169,213],[167,52253,192],{"class":191},[167,52255,52256],{"class":173}," { ref, provide } ",[167,52258,198],{"class":191},[167,52260,202],{"class":201},[167,52262,52263,52265,52268,52270],{"class":169,"line":205},[167,52264,192],{"class":191},[167,52266,52267],{"class":173}," Hijo ",[167,52269,198],{"class":191},[167,52271,52272],{"class":201}," '.\u002FHijo.vue'\n",[167,52274,52275],{"class":169,"line":160},[167,52276,209],{"emptyLinePlaceholder":208},[167,52278,52279,52281,52284,52286,52288,52290,52293],{"class":169,"line":238},[167,52280,216],{"class":191},[167,52282,52283],{"class":219}," nombreApp",[167,52285,223],{"class":191},[167,52287,226],{"class":181},[167,52289,229],{"class":173},[167,52291,52292],{"class":201},"'TODOvue'",[167,52294,235],{"class":173},[167,52296,52297],{"class":169,"line":243},[167,52298,209],{"emptyLinePlaceholder":208},[167,52300,52301],{"class":169,"line":261},[167,52302,52303],{"class":18662},"\u002F\u002F Provee el dato usando una \"clave\" única\n",[167,52305,52307,52310,52312,52315],{"class":52306,"line":273},[169,213],[167,52308,52309],{"class":181},"provide",[167,52311,229],{"class":173},[167,52313,52314],{"class":201},"'app-name-key'",[167,52316,52317],{"class":173},", nombreApp)\n",[167,52319,52320,52322,52324],{"class":169,"line":279},[167,52321,282],{"class":173},[167,52323,178],{"class":177},[167,52325,185],{"class":173},[167,52327,52328],{"class":169,"line":289},[167,52329,209],{"emptyLinePlaceholder":208},[167,52331,52332,52334,52336],{"class":169,"line":294},[167,52333,174],{"class":173},[167,52335,299],{"class":177},[167,52337,185],{"class":173},[167,52339,52340,52342,52345],{"class":169,"line":304},[167,52341,307],{"class":173},[167,52343,52344],{"class":177},"Hijo",[167,52346,5325],{"class":173},[167,52348,52349,52351,52353],{"class":169,"line":313},[167,52350,282],{"class":173},[167,52352,299],{"class":177},[167,52354,185],{"class":173},[154,52356,52359],{"className":156,"code":52357,"filename":3973,"highlights":52358,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  provide: {\n    nombreApp : 'TODOvue'\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHijo \u002F>\n\u003C\u002Ftemplate>\n",[205],[87,52360,52361,52369,52377,52383,52391,52395,52399,52407,52411,52419,52427],{"__ignoreMap":163},[167,52362,52363,52365,52367],{"class":169,"line":170},[167,52364,174],{"class":173},[167,52366,178],{"class":177},[167,52368,185],{"class":173},[167,52370,52371,52373,52375],{"class":169,"line":188},[167,52372,608],{"class":191},[167,52374,3991],{"class":191},[167,52376,1905],{"class":173},[167,52378,52380],{"class":52379,"line":205},[169,213],[167,52381,52382],{"class":173},"  provide: {\n",[167,52384,52385,52388],{"class":169,"line":160},[167,52386,52387],{"class":173},"    nombreApp : ",[167,52389,52390],{"class":201},"'TODOvue'\n",[167,52392,52393],{"class":169,"line":238},[167,52394,3492],{"class":173},[167,52396,52397],{"class":169,"line":243},[167,52398,276],{"class":173},[167,52400,52401,52403,52405],{"class":169,"line":261},[167,52402,282],{"class":173},[167,52404,178],{"class":177},[167,52406,185],{"class":173},[167,52408,52409],{"class":169,"line":273},[167,52410,209],{"emptyLinePlaceholder":208},[167,52412,52413,52415,52417],{"class":169,"line":279},[167,52414,174],{"class":173},[167,52416,299],{"class":177},[167,52418,185],{"class":173},[167,52420,52421,52423,52425],{"class":169,"line":289},[167,52422,307],{"class":173},[167,52424,52344],{"class":177},[167,52426,5325],{"class":173},[167,52428,52429,52431,52433],{"class":169,"line":294},[167,52430,282],{"class":173},[167,52432,299],{"class":177},[167,52434,185],{"class":173},[29777,52436,52438],{"id":52437},"componente-receptor-nieto",[3933,52439,52440],{},"Componente Receptor (Nieto):",[154,52442,52445],{"className":156,"code":52443,"filename":3260,"highlights":52444,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\n\u002F\u002F \"Atrapa\" el dato usando la misma clave definida en el ancestro\nconst nombreApp = inject('app-name-key')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ nombreApp }}\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n",[188,238],[87,52446,52447,52457,52469,52473,52478,52496,52504,52508,52516,52529],{"__ignoreMap":163},[167,52448,52449,52451,52453,52455],{"class":169,"line":170},[167,52450,174],{"class":173},[167,52452,178],{"class":177},[167,52454,182],{"class":181},[167,52456,185],{"class":173},[167,52458,52460,52462,52465,52467],{"class":52459,"line":188},[169,213],[167,52461,192],{"class":191},[167,52463,52464],{"class":173}," { inject } ",[167,52466,198],{"class":191},[167,52468,202],{"class":201},[167,52470,52471],{"class":169,"line":205},[167,52472,209],{"emptyLinePlaceholder":208},[167,52474,52475],{"class":169,"line":160},[167,52476,52477],{"class":18662},"\u002F\u002F \"Atrapa\" el dato usando la misma clave definida en el ancestro\n",[167,52479,52481,52483,52485,52487,52490,52492,52494],{"class":52480,"line":238},[169,213],[167,52482,216],{"class":191},[167,52484,52283],{"class":219},[167,52486,223],{"class":191},[167,52488,52489],{"class":181}," inject",[167,52491,229],{"class":173},[167,52493,52314],{"class":201},[167,52495,235],{"class":173},[167,52497,52498,52500,52502],{"class":169,"line":243},[167,52499,282],{"class":173},[167,52501,178],{"class":177},[167,52503,185],{"class":173},[167,52505,52506],{"class":169,"line":261},[167,52507,209],{"emptyLinePlaceholder":208},[167,52509,52510,52512,52514],{"class":169,"line":273},[167,52511,174],{"class":173},[167,52513,299],{"class":177},[167,52515,185],{"class":173},[167,52517,52518,52520,52522,52525,52527],{"class":169,"line":279},[167,52519,307],{"class":173},[167,52521,11],{"class":177},[167,52523,52524],{"class":173},">{{ nombreApp }}\u003C\u002F",[167,52526,11],{"class":177},[167,52528,185],{"class":173},[167,52530,52531,52533,52535],{"class":169,"line":289},[167,52532,282],{"class":173},[167,52534,299],{"class":177},[167,52536,185],{"class":173},[154,52538,52541],{"className":156,"code":52539,"filename":3973,"highlights":52540,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  inject: ['nombreApp'],\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ nombreApp }}\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n",[205],[87,52542,52543,52551,52559,52570,52574,52582,52586,52594,52606],{"__ignoreMap":163},[167,52544,52545,52547,52549],{"class":169,"line":170},[167,52546,174],{"class":173},[167,52548,178],{"class":177},[167,52550,185],{"class":173},[167,52552,52553,52555,52557],{"class":169,"line":188},[167,52554,608],{"class":191},[167,52556,3991],{"class":191},[167,52558,1905],{"class":173},[167,52560,52562,52565,52568],{"class":52561,"line":205},[169,213],[167,52563,52564],{"class":173},"  inject: [",[167,52566,52567],{"class":201},"'nombreApp'",[167,52569,4414],{"class":173},[167,52571,52572],{"class":169,"line":160},[167,52573,276],{"class":173},[167,52575,52576,52578,52580],{"class":169,"line":238},[167,52577,282],{"class":173},[167,52579,178],{"class":177},[167,52581,185],{"class":173},[167,52583,52584],{"class":169,"line":243},[167,52585,209],{"emptyLinePlaceholder":208},[167,52587,52588,52590,52592],{"class":169,"line":261},[167,52589,174],{"class":173},[167,52591,299],{"class":177},[167,52593,185],{"class":173},[167,52595,52596,52598,52600,52602,52604],{"class":169,"line":273},[167,52597,307],{"class":173},[167,52599,11],{"class":177},[167,52601,52524],{"class":173},[167,52603,11],{"class":177},[167,52605,185],{"class":173},[167,52607,52608,52610,52612],{"class":169,"line":279},[167,52609,282],{"class":173},[167,52611,299],{"class":177},[167,52613,185],{"class":173},[22,52615,52617],{"id":52616},"el-reto-de-la-reactividad-y-la-seguridad","El reto de la reactividad y la seguridad",[15,52619,52620,52621,15124,52623,52625,52626,52630],{},"Para que los cambios en el dato fluyan correctamente, debemos pasar un ",[87,52622,2085],{},[87,52624,18243],{},". Si quieres profundizar más sobre cómo funciona la reactividad en Vue 3, puedes consultar nuestra entrada ",[19092,52627,52629],{"href":52628},"\u002Fblog\u002Fvue-reactivity-explained.es\u002F","¿Qué es la reactividad? La magia detrás de Vue.js explicada con claridad",". Sin embargo, esto introduce un riesgo: un componente hijo podría intentar modificar el valor directamente.",[154,52632,52635],{"className":51866,"code":52633,"filename":52634,"language":51870,"meta":163,"style":163},"\u002F\u002F ¡Peligro! Modificar el estado desde un hijo dificulta la depuración\nidioma.value = 'en'\n","inject-example.js",[87,52636,52637,52642],{"__ignoreMap":163},[167,52638,52639],{"class":169,"line":170},[167,52640,52641],{"class":18662},"\u002F\u002F ¡Peligro! Modificar el estado desde un hijo dificulta la depuración\n",[167,52643,52644,52647,52649],{"class":169,"line":188},[167,52645,52646],{"class":173},"idioma.value ",[167,52648,267],{"class":191},[167,52650,52651],{"class":201}," 'en'\n",[15,52653,52654,52655,52658,52659,583],{},"Si cualquier componente puede alterar el estado inyectado, perdemos el rastro de ",[3933,52656,52657],{},"quién, cuándo y por qué"," cambió el dato. Para solucionar esto, aplicamos el patrón de ",[3933,52660,52661],{},"Inyección de Solo Lectura",[3035,52663,52664,52674],{},[36,52665,52666,52669,52670,52673],{},[3933,52667,52668],{},"El dato:"," Se protege con ",[87,52671,52672],{},"readonly()"," para evitar modificaciones accidentales.",[36,52675,52676,52679],{},[3933,52677,52678],{},"La función:"," Se provee una función específica para realizar el cambio, centralizando la lógica en el ancestro.",[22,52681,52683,52684],{"id":52682},"ejemplo-de-uso-correcto-con-readonly","Ejemplo de uso correcto con ",[87,52685,52686],{},"readonly",[29777,52688,52690],{"id":52689},"componente-emisor-abuelo-1",[3933,52691,52232],{},[154,52693,52696],{"className":156,"code":52694,"filename":3260,"highlights":52695,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, provide, readonly } from 'vue'\n\nconst idioma = ref('es')\nconst cambiarIdioma = (nuevo) => {\n  idioma.value = nuevo\n}\n\nprovide('config-idioma', {\n  idioma: readonly(idioma), \u002F\u002F Protegemos el estado\n  cambiarIdioma             \u002F\u002F Exponemos la vía de modificación\n})\n\u003C\u002Fscript>\n",[289],[87,52697,52698,52708,52719,52723,52740,52760,52770,52774,52778,52789,52803,52811,52815],{"__ignoreMap":163},[167,52699,52700,52702,52704,52706],{"class":169,"line":170},[167,52701,174],{"class":173},[167,52703,178],{"class":177},[167,52705,182],{"class":181},[167,52707,185],{"class":173},[167,52709,52710,52712,52715,52717],{"class":169,"line":188},[167,52711,192],{"class":191},[167,52713,52714],{"class":173}," { ref, provide, readonly } ",[167,52716,198],{"class":191},[167,52718,202],{"class":201},[167,52720,52721],{"class":169,"line":205},[167,52722,209],{"emptyLinePlaceholder":208},[167,52724,52725,52727,52730,52732,52734,52736,52738],{"class":169,"line":160},[167,52726,216],{"class":191},[167,52728,52729],{"class":219}," idioma",[167,52731,223],{"class":191},[167,52733,226],{"class":181},[167,52735,229],{"class":173},[167,52737,2788],{"class":201},[167,52739,235],{"class":173},[167,52741,52742,52744,52747,52749,52751,52754,52756,52758],{"class":169,"line":238},[167,52743,216],{"class":191},[167,52745,52746],{"class":181}," cambiarIdioma",[167,52748,223],{"class":191},[167,52750,2526],{"class":173},[167,52752,52753],{"class":254},"nuevo",[167,52755,693],{"class":173},[167,52757,639],{"class":191},[167,52759,1905],{"class":173},[167,52761,52762,52765,52767],{"class":169,"line":243},[167,52763,52764],{"class":173},"  idioma.value ",[167,52766,267],{"class":191},[167,52768,52769],{"class":173}," nuevo\n",[167,52771,52772],{"class":169,"line":261},[167,52773,276],{"class":173},[167,52775,52776],{"class":169,"line":273},[167,52777,209],{"emptyLinePlaceholder":208},[167,52779,52780,52782,52784,52787],{"class":169,"line":279},[167,52781,52309],{"class":181},[167,52783,229],{"class":173},[167,52785,52786],{"class":201},"'config-idioma'",[167,52788,627],{"class":173},[167,52790,52792,52795,52797,52800],{"class":52791,"line":289},[169,213],[167,52793,52794],{"class":173},"  idioma: ",[167,52796,52686],{"class":181},[167,52798,52799],{"class":173},"(idioma), ",[167,52801,52802],{"class":18662},"\u002F\u002F Protegemos el estado\n",[167,52804,52805,52808],{"class":169,"line":294},[167,52806,52807],{"class":173},"  cambiarIdioma             ",[167,52809,52810],{"class":18662},"\u002F\u002F Exponemos la vía de modificación\n",[167,52812,52813],{"class":169,"line":304},[167,52814,403],{"class":173},[167,52816,52817,52819,52821],{"class":169,"line":313},[167,52818,282],{"class":173},[167,52820,178],{"class":177},[167,52822,185],{"class":173},[154,52824,52827],{"className":156,"code":52825,"filename":3973,"highlights":52826,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport { computed } from 'vue'\n\nexport default {\n  data() {\n    return {\n      idioma: 'es'\n    }\n  },\n    methods: {\n      cambiarIdioma(nuevo) {\n        this.idioma = nuevo\n      }\n  },\n  provide() {\n    return {\n      \u002F\u002F IMPORTANTE: En Options API, 'provide' se evalúa una sola vez.\n      \u002F\u002F Para mantener reactividad, envolvemos el valor con computed()\n      \u002F\u002F que crea una función getter que Vue reevalúa automáticamente\n      'config-idioma': {\n        \u002F\u002F Usamos computed para que el hijo vea los cambios de this.idioma\n        idioma: computed(() => this.idioma),\n        cambiarIdioma: this.cambiarIdioma\n      }\n    }\n  }\n}\n\u003C\u002Fscript>\n",[2678],[87,52828,52829,52837,52848,52852,52860,52866,52872,52880,52884,52888,52892,52903,52914,52918,52922,52929,52935,52940,52945,52950,52958,52963,52979,52990,52994,52998,53002,53006],{"__ignoreMap":163},[167,52830,52831,52833,52835],{"class":169,"line":170},[167,52832,174],{"class":173},[167,52834,178],{"class":177},[167,52836,185],{"class":173},[167,52838,52839,52841,52844,52846],{"class":169,"line":188},[167,52840,192],{"class":191},[167,52842,52843],{"class":173}," { computed } ",[167,52845,198],{"class":191},[167,52847,202],{"class":201},[167,52849,52850],{"class":169,"line":205},[167,52851,209],{"emptyLinePlaceholder":208},[167,52853,52854,52856,52858],{"class":169,"line":160},[167,52855,608],{"class":191},[167,52857,3991],{"class":191},[167,52859,1905],{"class":173},[167,52861,52862,52864],{"class":169,"line":238},[167,52863,7176],{"class":181},[167,52865,763],{"class":173},[167,52867,52868,52870],{"class":169,"line":243},[167,52869,1937],{"class":191},[167,52871,1905],{"class":173},[167,52873,52874,52877],{"class":169,"line":261},[167,52875,52876],{"class":173},"      idioma: ",[167,52878,52879],{"class":201},"'es'\n",[167,52881,52882],{"class":169,"line":273},[167,52883,4049],{"class":173},[167,52885,52886],{"class":169,"line":279},[167,52887,398],{"class":173},[167,52889,52890],{"class":169,"line":289},[167,52891,51623],{"class":173},[167,52893,52894,52897,52899,52901],{"class":169,"line":294},[167,52895,52896],{"class":181},"      cambiarIdioma",[167,52898,229],{"class":173},[167,52900,52753],{"class":254},[167,52902,258],{"class":173},[167,52904,52905,52907,52910,52912],{"class":169,"line":304},[167,52906,14773],{"class":219},[167,52908,52909],{"class":173},".idioma ",[167,52911,267],{"class":191},[167,52913,52769],{"class":173},[167,52915,52916],{"class":169,"line":313},[167,52917,7287],{"class":173},[167,52919,52920],{"class":169,"line":161},[167,52921,398],{"class":173},[167,52923,52924,52927],{"class":169,"line":335},[167,52925,52926],{"class":181},"  provide",[167,52928,763],{"class":173},[167,52930,52931,52933],{"class":169,"line":341},[167,52932,1937],{"class":191},[167,52934,1905],{"class":173},[167,52936,52937],{"class":169,"line":489},[167,52938,52939],{"class":18662},"      \u002F\u002F IMPORTANTE: En Options API, 'provide' se evalúa una sola vez.\n",[167,52941,52942],{"class":169,"line":495},[167,52943,52944],{"class":18662},"      \u002F\u002F Para mantener reactividad, envolvemos el valor con computed()\n",[167,52946,52947],{"class":169,"line":501},[167,52948,52949],{"class":18662},"      \u002F\u002F que crea una función getter que Vue reevalúa automáticamente\n",[167,52951,52952,52955],{"class":169,"line":512},[167,52953,52954],{"class":201},"      'config-idioma'",[167,52956,52957],{"class":173},": {\n",[167,52959,52960],{"class":169,"line":781},[167,52961,52962],{"class":18662},"        \u002F\u002F Usamos computed para que el hijo vea los cambios de this.idioma\n",[167,52964,52965,52968,52970,52972,52974,52976],{"class":169,"line":786},[167,52966,52967],{"class":173},"        idioma: ",[167,52969,1661],{"class":181},[167,52971,1493],{"class":173},[167,52973,639],{"class":191},[167,52975,7351],{"class":219},[167,52977,52978],{"class":173},".idioma),\n",[167,52980,52982,52985,52987],{"class":52981,"line":2678},[169,213],[167,52983,52984],{"class":173},"        cambiarIdioma: ",[167,52986,4927],{"class":219},[167,52988,52989],{"class":173},".cambiarIdioma\n",[167,52991,52992],{"class":169,"line":2692},[167,52993,7287],{"class":173},[167,52995,52996],{"class":169,"line":3575},[167,52997,4049],{"class":173},[167,52999,53000],{"class":169,"line":5028},[167,53001,3492],{"class":173},[167,53003,53004],{"class":169,"line":5037},[167,53005,276],{"class":173},[167,53007,53008,53010,53012],{"class":169,"line":5046},[167,53009,282],{"class":173},[167,53011,178],{"class":177},[167,53013,185],{"class":173},[29777,53015,53017],{"id":53016},"componente-receptor-nieto-1",[3933,53018,52440],{},[154,53020,53023],{"className":156,"code":53021,"filename":3260,"highlights":53022,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst { idioma, cambiarIdioma } = inject('config-idioma')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Idioma actual: {{ idioma }}\u003C\u002Fp>\n    \u003Cbutton @click=\"cambiarIdioma('en')\">Cambiar a Inglés\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[160],[87,53024,53025,53035,53045,53049,53076,53084,53088,53096,53104,53117,53137,53145],{"__ignoreMap":163},[167,53026,53027,53029,53031,53033],{"class":169,"line":170},[167,53028,174],{"class":173},[167,53030,178],{"class":177},[167,53032,182],{"class":181},[167,53034,185],{"class":173},[167,53036,53037,53039,53041,53043],{"class":169,"line":188},[167,53038,192],{"class":191},[167,53040,52464],{"class":173},[167,53042,198],{"class":191},[167,53044,202],{"class":201},[167,53046,53047],{"class":169,"line":205},[167,53048,209],{"emptyLinePlaceholder":208},[167,53050,53052,53054,53056,53059,53061,53064,53066,53068,53070,53072,53074],{"class":53051,"line":160},[169,213],[167,53053,216],{"class":191},[167,53055,577],{"class":173},[167,53057,53058],{"class":219},"idioma",[167,53060,1025],{"class":173},[167,53062,53063],{"class":219},"cambiarIdioma",[167,53065,23409],{"class":173},[167,53067,267],{"class":191},[167,53069,52489],{"class":181},[167,53071,229],{"class":173},[167,53073,52786],{"class":201},[167,53075,235],{"class":173},[167,53077,53078,53080,53082],{"class":169,"line":238},[167,53079,282],{"class":173},[167,53081,178],{"class":177},[167,53083,185],{"class":173},[167,53085,53086],{"class":169,"line":243},[167,53087,209],{"emptyLinePlaceholder":208},[167,53089,53090,53092,53094],{"class":169,"line":261},[167,53091,174],{"class":173},[167,53093,299],{"class":177},[167,53095,185],{"class":173},[167,53097,53098,53100,53102],{"class":169,"line":273},[167,53099,307],{"class":173},[167,53101,1242],{"class":177},[167,53103,185],{"class":173},[167,53105,53106,53108,53110,53113,53115],{"class":169,"line":279},[167,53107,1257],{"class":173},[167,53109,15],{"class":177},[167,53111,53112],{"class":173},">Idioma actual: {{ idioma }}\u003C\u002F",[167,53114,15],{"class":177},[167,53116,185],{"class":173},[167,53118,53119,53121,53123,53125,53127,53130,53133,53135],{"class":169,"line":289},[167,53120,1257],{"class":173},[167,53122,507],{"class":177},[167,53124,1182],{"class":181},[167,53126,267],{"class":173},[167,53128,53129],{"class":201},"\"cambiarIdioma('en')\"",[167,53131,53132],{"class":173},">Cambiar a Inglés\u003C\u002F",[167,53134,507],{"class":177},[167,53136,185],{"class":173},[167,53138,53139,53141,53143],{"class":169,"line":294},[167,53140,504],{"class":173},[167,53142,1242],{"class":177},[167,53144,185],{"class":173},[167,53146,53147,53149,53151],{"class":169,"line":304},[167,53148,282],{"class":173},[167,53150,299],{"class":177},[167,53152,185],{"class":173},[154,53154,53157],{"className":156,"code":53155,"filename":3973,"highlights":53156,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  inject: {\n    configIdioma: {\n      from: 'config-idioma',\n      default: () => ({\n        idioma: { value: 'es' },\n        cambiarIdioma: () => {}\n      })\n    }\n  },\n  computed: {\n    idiomaActual() {\n      return this.configIdioma.idioma.value\n    }\n  },\n  methods: {\n    cambiarAIngles() {\n      this.configIdioma.cambiarIdioma('en')\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Idioma actual: {{ idiomaActual }}\u003C\u002Fp>\n    \u003Cbutton @click=\"cambiarAIngles\">Cambiar a Inglés\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[261,161],[87,53158,53159,53167,53175,53180,53185,53194,53205,53215,53226,53230,53234,53238,53242,53249,53259,53263,53267,53271,53278,53294,53298,53302,53306,53314,53318,53326,53334,53347,53366,53374],{"__ignoreMap":163},[167,53160,53161,53163,53165],{"class":169,"line":170},[167,53162,174],{"class":173},[167,53164,178],{"class":177},[167,53166,185],{"class":173},[167,53168,53169,53171,53173],{"class":169,"line":188},[167,53170,608],{"class":191},[167,53172,3991],{"class":191},[167,53174,1905],{"class":173},[167,53176,53177],{"class":169,"line":205},[167,53178,53179],{"class":173},"  inject: {\n",[167,53181,53182],{"class":169,"line":160},[167,53183,53184],{"class":173},"    configIdioma: {\n",[167,53186,53187,53190,53192],{"class":169,"line":238},[167,53188,53189],{"class":173},"      from: ",[167,53191,52786],{"class":201},[167,53193,393],{"class":173},[167,53195,53196,53199,53201,53203],{"class":169,"line":243},[167,53197,53198],{"class":181},"      default",[167,53200,636],{"class":173},[167,53202,639],{"class":191},[167,53204,642],{"class":173},[167,53206,53208,53211,53213],{"class":53207,"line":261},[169,213],[167,53209,53210],{"class":173},"        idioma: { value: ",[167,53212,2788],{"class":201},[167,53214,1856],{"class":173},[167,53216,53217,53220,53222,53224],{"class":169,"line":273},[167,53218,53219],{"class":181},"        cambiarIdioma",[167,53221,636],{"class":173},[167,53223,639],{"class":191},[167,53225,50942],{"class":173},[167,53227,53228],{"class":169,"line":279},[167,53229,8866],{"class":173},[167,53231,53232],{"class":169,"line":289},[167,53233,4049],{"class":173},[167,53235,53236],{"class":169,"line":294},[167,53237,398],{"class":173},[167,53239,53240],{"class":169,"line":304},[167,53241,8755],{"class":173},[167,53243,53244,53247],{"class":169,"line":313},[167,53245,53246],{"class":181},"    idiomaActual",[167,53248,763],{"class":173},[167,53250,53252,53254,53256],{"class":53251,"line":161},[169,213],[167,53253,8767],{"class":191},[167,53255,7351],{"class":219},[167,53257,53258],{"class":173},".configIdioma.idioma.value\n",[167,53260,53261],{"class":169,"line":335},[167,53262,4049],{"class":173},[167,53264,53265],{"class":169,"line":341},[167,53266,398],{"class":173},[167,53268,53269],{"class":169,"line":489},[167,53270,4419],{"class":173},[167,53272,53273,53276],{"class":169,"line":495},[167,53274,53275],{"class":181},"    cambiarAIngles",[167,53277,763],{"class":173},[167,53279,53280,53282,53285,53287,53289,53292],{"class":169,"line":501},[167,53281,741],{"class":219},[167,53283,53284],{"class":173},".configIdioma.",[167,53286,53063],{"class":181},[167,53288,229],{"class":173},[167,53290,53291],{"class":201},"'en'",[167,53293,235],{"class":173},[167,53295,53296],{"class":169,"line":512},[167,53297,4049],{"class":173},[167,53299,53300],{"class":169,"line":781},[167,53301,3492],{"class":173},[167,53303,53304],{"class":169,"line":786},[167,53305,276],{"class":173},[167,53307,53308,53310,53312],{"class":169,"line":2678},[167,53309,282],{"class":173},[167,53311,178],{"class":177},[167,53313,185],{"class":173},[167,53315,53316],{"class":169,"line":2692},[167,53317,209],{"emptyLinePlaceholder":208},[167,53319,53320,53322,53324],{"class":169,"line":3575},[167,53321,174],{"class":173},[167,53323,299],{"class":177},[167,53325,185],{"class":173},[167,53327,53328,53330,53332],{"class":169,"line":5028},[167,53329,307],{"class":173},[167,53331,1242],{"class":177},[167,53333,185],{"class":173},[167,53335,53336,53338,53340,53343,53345],{"class":169,"line":5037},[167,53337,1257],{"class":173},[167,53339,15],{"class":177},[167,53341,53342],{"class":173},">Idioma actual: {{ idiomaActual }}\u003C\u002F",[167,53344,15],{"class":177},[167,53346,185],{"class":173},[167,53348,53349,53351,53353,53355,53357,53360,53362,53364],{"class":169,"line":5046},[167,53350,1257],{"class":173},[167,53352,507],{"class":177},[167,53354,1182],{"class":181},[167,53356,267],{"class":173},[167,53358,53359],{"class":201},"\"cambiarAIngles\"",[167,53361,53132],{"class":173},[167,53363,507],{"class":177},[167,53365,185],{"class":173},[167,53367,53368,53370,53372],{"class":169,"line":6756},[167,53369,504],{"class":173},[167,53371,1242],{"class":177},[167,53373,185],{"class":173},[167,53375,53376,53378,53380],{"class":169,"line":6778},[167,53377,282],{"class":173},[167,53379,299],{"class":177},[167,53381,185],{"class":173},[22,53383,53385],{"id":53384},"manejo-de-valores-por-defecto","Manejo de valores por defecto",[15,53387,53388,53389,53392],{},"Para hacer tus componentes más robustos, puedes definir un valor por defecto en el ",[87,53390,53391],{},"inject",". Si el componente se usa fuera de un árbol que provea la clave, evitarás errores de ejecución:",[154,53394,53398],{"className":51866,"code":53395,"filename":53396,"highlights":53397,"language":51870,"meta":163,"style":163},"\u002F\u002F Si no encuentra 'user-data', usará el objeto por defecto\nconst usuario = inject('user-data', { nombre: 'Invitado', premium: false })\n","inject-default.js",[188],[87,53399,53400,53405],{"__ignoreMap":163},[167,53401,53402],{"class":169,"line":170},[167,53403,53404],{"class":18662},"\u002F\u002F Si no encuentra 'user-data', usará el objeto por defecto\n",[167,53406,53408,53410,53413,53415,53417,53419,53422,53425,53428,53431,53433],{"class":53407,"line":188},[169,213],[167,53409,216],{"class":191},[167,53411,53412],{"class":219}," usuario",[167,53414,223],{"class":191},[167,53416,52489],{"class":181},[167,53418,229],{"class":173},[167,53420,53421],{"class":201},"'user-data'",[167,53423,53424],{"class":173},", { nombre: ",[167,53426,53427],{"class":201},"'Invitado'",[167,53429,53430],{"class":173},", premium: ",[167,53432,3392],{"class":219},[167,53434,2242],{"class":173},[22,53436,53438],{"id":53437},"provideinject-a-nivel-de-aplicación","Provide\u002FInject a nivel de aplicación",[15,53440,53441],{},"Además de usarlo entre componentes, puedes definir valores globales directamente en la instancia de la aplicación. Esto es útil para:",[33,53443,53444,53447,53450],{},[36,53445,53446],{},"Configuración de la aplicación (URL de API, claves de servicios)",[36,53448,53449],{},"Temas o preferencias globales",[36,53451,53452],{},"Plugins o utilidades compartidas",[29777,53454,53456],{"id":53455},"implementación",[3933,53457,53458],{},"Implementación:",[154,53460,53463],{"className":51866,"code":53461,"filename":25323,"highlights":53462,"language":51870,"meta":163,"style":163},"import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\n\n\u002F\u002F Provee valores globales disponibles en toda la aplicación\napp.provide('api-url', 'https:\u002F\u002Fapi.ejemplo.com')\napp.provide('theme', 'dark')\napp.provide('analytics', {\n  trackEvent: (eventName) => {\n    console.log(`Evento: ${eventName}`)\n  }\n})\n\napp.mount('#app')\n",[261,273],[87,53464,53465,53475,53485,53489,53501,53505,53510,53529,53548,53561,53577,53594,53598,53602,53606],{"__ignoreMap":163},[167,53466,53467,53469,53471,53473],{"class":169,"line":170},[167,53468,192],{"class":191},[167,53470,51166],{"class":173},[167,53472,198],{"class":191},[167,53474,202],{"class":201},[167,53476,53477,53479,53481,53483],{"class":169,"line":188},[167,53478,192],{"class":191},[167,53480,51177],{"class":173},[167,53482,198],{"class":191},[167,53484,51182],{"class":201},[167,53486,53487],{"class":169,"line":205},[167,53488,209],{"emptyLinePlaceholder":208},[167,53490,53491,53493,53495,53497,53499],{"class":169,"line":160},[167,53492,216],{"class":191},[167,53494,51189],{"class":219},[167,53496,223],{"class":191},[167,53498,51194],{"class":181},[167,53500,51197],{"class":173},[167,53502,53503],{"class":169,"line":238},[167,53504,209],{"emptyLinePlaceholder":208},[167,53506,53507],{"class":169,"line":243},[167,53508,53509],{"class":18662},"\u002F\u002F Provee valores globales disponibles en toda la aplicación\n",[167,53511,53513,53515,53517,53519,53522,53524,53527],{"class":53512,"line":261},[169,213],[167,53514,51203],{"class":173},[167,53516,52309],{"class":181},[167,53518,229],{"class":173},[167,53520,53521],{"class":201},"'api-url'",[167,53523,1025],{"class":173},[167,53525,53526],{"class":201},"'https:\u002F\u002Fapi.ejemplo.com'",[167,53528,235],{"class":173},[167,53530,53532,53534,53536,53538,53541,53543,53546],{"class":53531,"line":273},[169,213],[167,53533,51203],{"class":173},[167,53535,52309],{"class":181},[167,53537,229],{"class":173},[167,53539,53540],{"class":201},"'theme'",[167,53542,1025],{"class":173},[167,53544,53545],{"class":201},"'dark'",[167,53547,235],{"class":173},[167,53549,53550,53552,53554,53556,53559],{"class":169,"line":279},[167,53551,51203],{"class":173},[167,53553,52309],{"class":181},[167,53555,229],{"class":173},[167,53557,53558],{"class":201},"'analytics'",[167,53560,627],{"class":173},[167,53562,53563,53566,53568,53571,53573,53575],{"class":169,"line":289},[167,53564,53565],{"class":181},"  trackEvent",[167,53567,688],{"class":173},[167,53569,53570],{"class":254},"eventName",[167,53572,693],{"class":173},[167,53574,639],{"class":191},[167,53576,1905],{"class":173},[167,53578,53579,53581,53583,53585,53588,53590,53592],{"class":169,"line":294},[167,53580,8894],{"class":173},[167,53582,2611],{"class":181},[167,53584,229],{"class":173},[167,53586,53587],{"class":201},"`Evento: ${",[167,53589,53570],{"class":173},[167,53591,2360],{"class":201},[167,53593,235],{"class":173},[167,53595,53596],{"class":169,"line":304},[167,53597,3492],{"class":173},[167,53599,53600],{"class":169,"line":313},[167,53601,403],{"class":173},[167,53603,53604],{"class":169,"line":161},[167,53605,209],{"emptyLinePlaceholder":208},[167,53607,53608,53610,53613,53615,53618],{"class":169,"line":335},[167,53609,51203],{"class":173},[167,53611,53612],{"class":181},"mount",[167,53614,229],{"class":173},[167,53616,53617],{"class":201},"'#app'",[167,53619,235],{"class":173},[29777,53621,53623],{"id":53622},"consumiendo-en-cualquier-componente",[3933,53624,53625],{},"Consumiendo en cualquier componente:",[154,53627,53631],{"className":156,"code":53628,"filename":53629,"highlights":53630,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst apiUrl = inject('api-url')\nconst theme = inject('theme')\nconst analytics = inject('analytics')\n\nconst handleClick = () => {\n  analytics.trackEvent('button-click')\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`theme-${theme}`\">\n    \u003Cp>API Base: {{ apiUrl }}\u003C\u002Fp>\n    \u003Cbutton @click=\"handleClick\">Hacer clic\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","SomeComponent.vue",[160,238],[87,53632,53633,53643,53653,53657,53675,53693,53710,53714,53729,53744,53748,53756,53760,53768,53783,53796,53816,53824],{"__ignoreMap":163},[167,53634,53635,53637,53639,53641],{"class":169,"line":170},[167,53636,174],{"class":173},[167,53638,178],{"class":177},[167,53640,182],{"class":181},[167,53642,185],{"class":173},[167,53644,53645,53647,53649,53651],{"class":169,"line":188},[167,53646,192],{"class":191},[167,53648,52464],{"class":173},[167,53650,198],{"class":191},[167,53652,202],{"class":201},[167,53654,53655],{"class":169,"line":205},[167,53656,209],{"emptyLinePlaceholder":208},[167,53658,53660,53662,53665,53667,53669,53671,53673],{"class":53659,"line":160},[169,213],[167,53661,216],{"class":191},[167,53663,53664],{"class":219}," apiUrl",[167,53666,223],{"class":191},[167,53668,52489],{"class":181},[167,53670,229],{"class":173},[167,53672,53521],{"class":201},[167,53674,235],{"class":173},[167,53676,53678,53680,53683,53685,53687,53689,53691],{"class":53677,"line":238},[169,213],[167,53679,216],{"class":191},[167,53681,53682],{"class":219}," theme",[167,53684,223],{"class":191},[167,53686,52489],{"class":181},[167,53688,229],{"class":173},[167,53690,53540],{"class":201},[167,53692,235],{"class":173},[167,53694,53695,53697,53700,53702,53704,53706,53708],{"class":169,"line":243},[167,53696,216],{"class":191},[167,53698,53699],{"class":219}," analytics",[167,53701,223],{"class":191},[167,53703,52489],{"class":181},[167,53705,229],{"class":173},[167,53707,53558],{"class":201},[167,53709,235],{"class":173},[167,53711,53712],{"class":169,"line":261},[167,53713,209],{"emptyLinePlaceholder":208},[167,53715,53716,53718,53721,53723,53725,53727],{"class":169,"line":273},[167,53717,216],{"class":191},[167,53719,53720],{"class":181}," handleClick",[167,53722,223],{"class":191},[167,53724,1469],{"class":173},[167,53726,639],{"class":191},[167,53728,1905],{"class":173},[167,53730,53731,53734,53737,53739,53742],{"class":169,"line":279},[167,53732,53733],{"class":173},"  analytics.",[167,53735,53736],{"class":181},"trackEvent",[167,53738,229],{"class":173},[167,53740,53741],{"class":201},"'button-click'",[167,53743,235],{"class":173},[167,53745,53746],{"class":169,"line":289},[167,53747,276],{"class":173},[167,53749,53750,53752,53754],{"class":169,"line":294},[167,53751,282],{"class":173},[167,53753,178],{"class":177},[167,53755,185],{"class":173},[167,53757,53758],{"class":169,"line":304},[167,53759,209],{"emptyLinePlaceholder":208},[167,53761,53762,53764,53766],{"class":169,"line":313},[167,53763,174],{"class":173},[167,53765,299],{"class":177},[167,53767,185],{"class":173},[167,53769,53770,53772,53774,53776,53778,53781],{"class":169,"line":161},[167,53771,307],{"class":173},[167,53773,1242],{"class":177},[167,53775,42135],{"class":181},[167,53777,267],{"class":173},[167,53779,53780],{"class":201},"\"`theme-${theme}`\"",[167,53782,185],{"class":173},[167,53784,53785,53787,53789,53792,53794],{"class":169,"line":335},[167,53786,1257],{"class":173},[167,53788,15],{"class":177},[167,53790,53791],{"class":173},">API Base: {{ apiUrl }}\u003C\u002F",[167,53793,15],{"class":177},[167,53795,185],{"class":173},[167,53797,53798,53800,53802,53804,53806,53809,53812,53814],{"class":169,"line":341},[167,53799,1257],{"class":173},[167,53801,507],{"class":177},[167,53803,1182],{"class":181},[167,53805,267],{"class":173},[167,53807,53808],{"class":201},"\"handleClick\"",[167,53810,53811],{"class":173},">Hacer clic\u003C\u002F",[167,53813,507],{"class":177},[167,53815,185],{"class":173},[167,53817,53818,53820,53822],{"class":169,"line":489},[167,53819,504],{"class":173},[167,53821,1242],{"class":177},[167,53823,185],{"class":173},[167,53825,53826,53828,53830],{"class":169,"line":495},[167,53827,282],{"class":173},[167,53829,299],{"class":177},[167,53831,185],{"class":173},[29777,53833,53835],{"id":53834},"ventajas","Ventajas",[33,53837,53838,53841,53844],{},[36,53839,53840],{},"No necesitas crear un componente raíz solo para proveer valores",[36,53842,53843],{},"Ideal para configuraciones que no cambian durante la vida de la aplicación",[36,53845,53846],{},"Simplifica el testing al poder sobrescribir estos valores fácilmente",[5367,53848,53849],{},[15,53850,53851,53854,53855,1679],{},[3933,53852,53853],{},"Nota:"," Para valores reactivos a nivel de aplicación que cambien frecuentemente, considera usar Pinia en lugar de ",[87,53856,53857],{},"app.provide()",[22,53859,53861],{"id":53860},"bajo-el-capó-cómo-funciona","Bajo el capó: ¿Cómo funciona?",[15,53863,53864,53865,53867,53868,53871],{},"La eficiencia de ",[87,53866,997],{}," radica en que utiliza la ",[3933,53869,53870],{},"cadena de prototipos"," de JavaScript.",[3035,53873,53874,53889],{},[36,53875,53876,53878,53879,53882,53883,53885,53886,1679],{},[3933,53877,52212],{}," Cuando un componente provee algo, Vue crea un nuevo objeto ",[87,53880,53881],{},"provides"," para ese componente que hereda del objeto ",[87,53884,53881],{}," de su padre mediante ",[87,53887,53888],{},"Object.create()",[36,53890,53891,53893],{},[3933,53892,52218],{}," Vue simplemente busca la clave en el objeto. Si no está en el padre inmediato, el motor de JavaScript sube por la cadena de prototipos hasta encontrarlo o llegar al final.",[15,53895,53896],{},"Esta arquitectura permite que un hijo \"sobrescriba\" un valor para sus propios descendientes sin afectar a sus hermanos o ancestros, garantizando un aislamiento total.",[22,53898,53900],{"id":53899},"resumen-de-capacidades","Resumen de capacidades",[56,53902,53903,53915],{},[59,53904,53905],{},[62,53906,53907,53909,53912],{},[65,53908,51979],{},[65,53910,53911],{},"Nivel Básico",[65,53913,53914],{},"Nivel Profesional",[75,53916,53917,53930,53946,53959],{},[62,53918,53919,53924,53927],{},[80,53920,53921],{},[3933,53922,53923],{},"Flujo",[80,53925,53926],{},"Pasar datos de A a B",[80,53928,53929],{},"Arquitectura de estado jerárquico",[62,53931,53932,53937,53940],{},[80,53933,53934],{},[3933,53935,53936],{},"Seguridad",[80,53938,53939],{},"Datos mutables (riesgoso)",[80,53941,53942,53943,53945],{},"Uso de ",[87,53944,52672],{}," para proteger el estado",[62,53947,53948,53953,53956],{},[80,53949,53950],{},[3933,53951,53952],{},"Robustez",[80,53954,53955],{},"Puede fallar si falta la clave",[80,53957,53958],{},"Uso de valores por defecto",[62,53960,53961,53966,53969],{},[80,53962,53963],{},[3933,53964,53965],{},"Alcance",[80,53967,53968],{},"Entre componentes locales",[80,53970,53971,53972],{},"Configuración global a nivel de ",[87,53973,53974],{},"app",[22,53976,53978],{"id":53977},"cuándo-no-usar-provideinject","Cuándo NO usar Provide\u002FInject",[33,53980,53981,53987,53993],{},[36,53982,53983,53986],{},[3933,53984,53985],{},"Para estado global complejo:"," Usa Pinia o Vuex",[36,53988,53989,53992],{},[3933,53990,53991],{},"Para comunicación entre hermanos:"," Usa composables o el patrón Event Bus",[36,53994,53995,53998],{},[3933,53996,53997],{},"Para estado simple de 2 niveles:"," Las props son más explícitas y fáciles de seguir",[22,54000,23574],{"id":23573},[15,54002,54003,52160,54005,54007,54008,54010],{},[87,54004,52159],{},[87,54006,53391],{}," son herramientas poderosas que, usadas correctamente, eliminan el ",[3933,54009,52153],{}," sin comprometer la mantenibilidad del código. La clave está en:",[3035,54012,54013,54021,54027,54033],{},[36,54014,54015,54018,54019],{},[3933,54016,54017],{},"Proteger el estado"," con ",[87,54020,52672],{},[36,54022,54023,54026],{},[3933,54024,54025],{},"Proveer funciones"," para modificarlo de forma controlada",[36,54028,54029,54032],{},[3933,54030,54031],{},"Definir valores por defecto"," para mayor robustez",[36,54034,54035,54038],{},[3933,54036,54037],{},"Usarlo en el nivel adecuado:"," componentes para estado jerárquico, Pinia para estado global complejo",[15,54040,54041],{},"Dominar este patrón te permitirá construir aplicaciones Vue más escalables y fáciles de mantener.",[924,54043,54044],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":54046},[54047,54048,54050,54051,54052,54054,54055,54056,54057,54058,54059],{"id":52167,"depth":188,"text":52168},{"id":52198,"depth":188,"text":54049},"La solución nativa: Provide e Inject",{"id":52222,"depth":188,"text":52223},{"id":52616,"depth":188,"text":52617},{"id":52682,"depth":188,"text":54053},"Ejemplo de uso correcto con readonly",{"id":53384,"depth":188,"text":53385},{"id":53437,"depth":188,"text":53438},{"id":53860,"depth":188,"text":53861},{"id":53899,"depth":188,"text":53900},{"id":53977,"depth":188,"text":53978},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1769126104\u002Fvue-provide-inject-avoid-prop-drilling_pkd9s1.png","2026-01-23","Aprende a usar provide e inject en Vue.js para eliminar el Prop Drilling, gestionar la reactividad de forma segura con readonly y mejorar la arquitectura de tus componentes.",{"updatedAt":945,"coverCaption":54064,"author":946,"keywords":54065},"Provide e Inject en Vue 3 por TODOvue",[3258,52159,52163,52153,3260,3259],"\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es",[54068],{"headline":52141,"author":54069,"datePublished":54070,"@type":961},{"name":946,"@type":959},"2026-01-22T23:30:00-05:00",{"title":52141,"description":54062},"blog\u002Fvue-provide-inject-avoid-prop-drilling.es",[54074,54077,54078,54079,54080,54081],{"tag":54075,"color":54076},"Inyección de Dependencias","#2E86DE",{"tag":952,"color":969},{"tag":953,"color":971},{"tag":52122,"color":52133},{"tag":1625,"color":1639},{"tag":973,"color":974},"CBAqb072PTyDEOYcOpi9rvDl3rIQYoWB3nPWEjCk12M",{"id":54084,"title":52629,"body":54085,"cover":54721,"coverAlt":54722,"date":54723,"description":54724,"draft":940,"extension":941,"lab":54725,"locale":943,"meta":54735,"navigation":208,"path":54739,"schemaOrg":54740,"seo":54745,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":54746,"tags":54747,"__hash__":54753},"blog\u002Fblog\u002Fvue-reactivity-explained.es.md",{"type":8,"value":54086,"toc":54707},[54087,54090,54093,54096,54100,54103,54124,54127,54135,54139,54142,54149,54161,54176,54182,54188,54191,54199,54207,54210,54273,54281,54285,54288,54308,54311,54315,54318,54336,54361,54364,54422,54426,54563,54701,54704],[11,54088,52629],{"id":54089},"qué-es-la-reactividad-la-magia-detrás-de-vuejs-explicada-con-claridad",[15,54091,54092],{},"La reactividad es el corazón de Vue.js. Es lo que hace que la interfaz no sea un adorno bonito, sino un sistema vivo que responde a los cambios de estado sin que tú tengas que perseguir el DOM como si fuera 2012.",[15,54094,54095],{},"En este artículo vamos a desmontar el concepto sin misticismo innecesario: primero con una analogía simple, luego con lo que realmente ocurre a nivel técnico, y finalmente con buenas prácticas que te ahorrarán bugs y problemas de rendimiento.",[22,54097,54099],{"id":54098},"la-analogía-el-efecto-excel","La analogía: el efecto Excel",[15,54101,54102],{},"No necesitas un doctorado en ciencias de la computación para entender la reactividad. Basta con haber usado Excel sin romper nada.",[15,54104,54105,54106,54109,54110,54113,54114,54116,54117,90,54120,54123],{},"Si en una celda ",[3933,54107,54108],{},"C1"," escribes la fórmula ",[87,54111,54112],{},"=A1 + B1",", el valor de ",[3933,54115,54108],{}," se actualiza automáticamente cuando cambian ",[3933,54118,54119],{},"A1",[3933,54121,54122],{},"B1",". No haces clic en “refrescar”, no vuelves a escribir la fórmula. Simplemente ocurre.",[15,54125,54126],{},"Eso es reactividad: una relación automática entre datos y resultados.",[5367,54128,54129],{},[15,54130,54131,54134],{},[3933,54132,54133],{},"Analogía del mundo real:"," imagina una cafetera inteligente. En el momento en que detecta que hay una taza colocada, el botón de iniciar se activa. No porque alguien lo programe cada vez, sino porque el sistema está atento al estado.",[22,54136,54138],{"id":54137},"la-evolución-técnica-de-vue-2-a-vue-3","La evolución técnica: de Vue 2 a Vue 3",[15,54140,54141],{},"Vue no siempre tuvo el sistema de reactividad elegante que conocemos hoy. Entender su evolución ayuda a escribir mejor código y a no pelearse con el framework.",[3087,54143,54145,54146],{"id":54144},"vue-2-objectdefineproperty","Vue 2: ",[87,54147,54148],{},"Object.defineProperty",[15,54150,54151,54152,1028,54155,54158,54159,1679],{},"En Vue 2, cada propiedad reactiva se convertía en un par de ",[9295,54153,54154],{},"getters",[9295,54156,54157],{},"setters"," usando ",[87,54160,54148],{},[33,54162,54163],{},[36,54164,54165,54168,54169,54172,54173,1679],{},[3933,54166,54167],{},"La limitación:"," Vue tenía que recorrer el objeto completo al inicializarlo. Si añadías una propiedad nueva o modificabas un índice de un array directamente (",[87,54170,54171],{},"arr[0] = x","), Vue no se enteraba. Por eso existían soluciones como ",[87,54174,54175],{},"Vue.set()",[3087,54177,54179,54180],{"id":54178},"vue-3-el-poder-de-proxy","Vue 3: el poder de ",[87,54181,22880],{},[15,54183,54184,54185,53871],{},"Vue 3 cambió completamente el enfoque usando ",[3933,54186,54187],{},"Proxies",[15,54189,54190],{},"Un Proxy envuelve un objeto y puede interceptar prácticamente cualquier operación: leer, escribir, borrar o añadir propiedades.",[33,54192,54193],{},[36,54194,54195,54198],{},[3933,54196,54197],{},"La ventaja:"," no importa cuándo ni cómo cambie el objeto. Vue puede detectarlo. El resultado es una reactividad más profunda, más predecible y con mejor rendimiento.",[22,54200,54202,54203,1662,54205],{"id":54201},"los-dos-pilares-ref-vs-reactive","Los dos pilares: ",[87,54204,89],{},[87,54206,93],{},[15,54208,54209],{},"Si usas la Composition API, esta duda aparece antes de que termines tu primer café.",[56,54211,54212,54226],{},[59,54213,54214],{},[62,54215,54216,54218,54222],{},[65,54217,51979],{},[65,54219,54220],{},[87,54221,89],{},[65,54223,54224],{},[87,54225,93],{},[75,54227,54228,54239,54251,54262],{},[62,54229,54230,54233,54236],{},[80,54231,54232],{},"Tipo de dato",[80,54234,54235],{},"Primitivos y objetos",[80,54237,54238],{},"Solo objetos y colecciones",[62,54240,54241,54244,54248],{},[80,54242,54243],{},"Acceso en JS",[80,54245,54246],{},[87,54247,22979],{},[80,54249,54250],{},"Acceso directo",[62,54252,54253,54257,54260],{},[80,54254,6304,54255],{},[87,54256,31997],{},[80,54258,54259],{},"Auto-desempaquetado",[80,54261,54250],{},[62,54263,54264,54267,54270],{},[80,54265,54266],{},"Uso ideal",[80,54268,54269],{},"Estados simples y aislados",[80,54271,54272],{},"Estados complejos o anidados",[15,54274,54275,54276,54278,54279,1679],{},"Regla mental rápida: si es una sola cosa, ",[87,54277,2085],{},". Si es una estructura, ",[87,54280,18243],{},[22,54282,54284],{"id":54283},"el-ciclo-interno-track-y-trigger","El ciclo interno: track y trigger",[15,54286,54287],{},"El motor de reactividad de Vue funciona con un sistema sorprendentemente elegante:",[3035,54289,54290,54296,54302],{},[36,54291,54292,54295],{},[3933,54293,54294],{},"Track:"," cuando una función lee una variable reactiva, Vue registra esa relación.",[36,54297,54298,54301],{},[3933,54299,54300],{},"Trigger:"," cuando el valor cambia, Vue notifica a todas las funciones que dependen de él.",[36,54303,54304,54307],{},[3933,54305,54306],{},"Update:"," el componente se vuelve a renderizar. El Virtual DOM se encarga de actualizar solo lo necesario.",[15,54309,54310],{},"Tú cambias datos. Vue decide qué tocar en el DOM. Separación de responsabilidades en su máxima expresión.",[22,54312,54314],{"id":54313},"consejos-de-rendimiento-nivel-2026","Consejos de rendimiento (nivel 2026)",[15,54316,54317],{},"Si tu aplicación empieza a crecer, estas decisiones importan más de lo que parece.",[33,54319,54320,54330],{},[36,54321,54322,54329],{},[3933,54323,54324,1028,54326,583],{},[87,54325,23453],{},[87,54327,54328],{},"shallowReactive"," útiles cuando trabajas con objetos grandes que no necesitan reactividad profunda.",[36,54331,54332,54335],{},[3933,54333,54334],{},"Cuidado al desestructurar:"," hacer esto rompe la reactividad:",[154,54337,54340],{"className":51866,"code":54338,"filename":54339,"language":51870,"meta":163,"style":163},"const { nombre } = estadoReactivo; \u002F\u002F mal\n","index.js",[87,54341,54342],{"__ignoreMap":163},[167,54343,54344,54346,54348,54351,54353,54355,54358],{"class":169,"line":170},[167,54345,216],{"class":191},[167,54347,577],{"class":173},[167,54349,54350],{"class":219},"nombre",[167,54352,23409],{"class":173},[167,54354,267],{"class":191},[167,54356,54357],{"class":173}," estadoReactivo; ",[167,54359,54360],{"class":18662},"\u002F\u002F mal\n",[15,54362,54363],{},"La forma correcta es:",[154,54365,54367],{"className":51866,"code":54366,"filename":54339,"language":51870,"meta":163,"style":163},"import { reactive, toRefs } from 'vue';\n\nconst estado = reactive({ nombre: 'Vue' });\nconst { nombre } = toRefs(estado);\n",[87,54368,54369,54382,54386,54404],{"__ignoreMap":163},[167,54370,54371,54373,54376,54378,54380],{"class":169,"line":170},[167,54372,192],{"class":191},[167,54374,54375],{"class":173}," { reactive, toRefs } ",[167,54377,198],{"class":191},[167,54379,51444],{"class":201},[167,54381,24044],{"class":173},[167,54383,54384],{"class":169,"line":188},[167,54385,209],{"emptyLinePlaceholder":208},[167,54387,54388,54390,54393,54395,54397,54400,54402],{"class":169,"line":205},[167,54389,216],{"class":191},[167,54391,54392],{"class":219}," estado",[167,54394,223],{"class":191},[167,54396,846],{"class":181},[167,54398,54399],{"class":173},"({ nombre: ",[167,54401,42925],{"class":201},[167,54403,35217],{"class":173},[167,54405,54406,54408,54410,54412,54414,54416,54419],{"class":169,"line":160},[167,54407,216],{"class":191},[167,54409,577],{"class":173},[167,54411,54350],{"class":219},[167,54413,23409],{"class":173},[167,54415,267],{"class":191},[167,54417,54418],{"class":181}," toRefs",[167,54420,54421],{"class":173},"(estado);\n",[22,54423,54425],{"id":54424},"ejemplo-práctico-el-contador-más-honesto-del-mundo","Ejemplo práctico: el contador más honesto del mundo",[154,54427,54429],{"className":156,"code":54428,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue';\n\nconst tazasDeCafe = ref(0);\n\nconst incrementar = () => {\n  tazasDeCafe.value++;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"incrementar\">\n    Tazas consumidas: {{ tazasDeCafe }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,54430,54431,54441,54453,54457,54474,54478,54493,54503,54507,54515,54519,54527,54542,54547,54555],{"__ignoreMap":163},[167,54432,54433,54435,54437,54439],{"class":169,"line":170},[167,54434,174],{"class":173},[167,54436,178],{"class":177},[167,54438,182],{"class":181},[167,54440,185],{"class":173},[167,54442,54443,54445,54447,54449,54451],{"class":169,"line":188},[167,54444,192],{"class":191},[167,54446,195],{"class":173},[167,54448,198],{"class":191},[167,54450,51444],{"class":201},[167,54452,24044],{"class":173},[167,54454,54455],{"class":169,"line":205},[167,54456,209],{"emptyLinePlaceholder":208},[167,54458,54459,54461,54464,54466,54468,54470,54472],{"class":169,"line":160},[167,54460,216],{"class":191},[167,54462,54463],{"class":219}," tazasDeCafe",[167,54465,223],{"class":191},[167,54467,226],{"class":181},[167,54469,229],{"class":173},[167,54471,1960],{"class":219},[167,54473,24169],{"class":173},[167,54475,54476],{"class":169,"line":238},[167,54477,209],{"emptyLinePlaceholder":208},[167,54479,54480,54482,54485,54487,54489,54491],{"class":169,"line":243},[167,54481,216],{"class":191},[167,54483,54484],{"class":181}," incrementar",[167,54486,223],{"class":191},[167,54488,1469],{"class":173},[167,54490,639],{"class":191},[167,54492,1905],{"class":173},[167,54494,54495,54498,54501],{"class":169,"line":261},[167,54496,54497],{"class":173},"  tazasDeCafe.value",[167,54499,54500],{"class":191},"++",[167,54502,24044],{"class":173},[167,54504,54505],{"class":169,"line":273},[167,54506,24148],{"class":173},[167,54508,54509,54511,54513],{"class":169,"line":279},[167,54510,282],{"class":173},[167,54512,178],{"class":177},[167,54514,185],{"class":173},[167,54516,54517],{"class":169,"line":289},[167,54518,209],{"emptyLinePlaceholder":208},[167,54520,54521,54523,54525],{"class":169,"line":294},[167,54522,174],{"class":173},[167,54524,299],{"class":177},[167,54526,185],{"class":173},[167,54528,54529,54531,54533,54535,54537,54540],{"class":169,"line":304},[167,54530,307],{"class":173},[167,54532,507],{"class":177},[167,54534,1182],{"class":181},[167,54536,267],{"class":173},[167,54538,54539],{"class":201},"\"incrementar\"",[167,54541,185],{"class":173},[167,54543,54544],{"class":169,"line":313},[167,54545,54546],{"class":173},"    Tazas consumidas: {{ tazasDeCafe }}\n",[167,54548,54549,54551,54553],{"class":169,"line":161},[167,54550,504],{"class":173},[167,54552,507],{"class":177},[167,54554,185],{"class":173},[167,54556,54557,54559,54561],{"class":169,"line":335},[167,54558,282],{"class":173},[167,54560,299],{"class":177},[167,54562,185],{"class":173},[154,54564,54566],{"className":156,"code":54565,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      tazasDeCafe: 0,\n    };\n  },\n  methods: {\n    incrementar() {\n      this.tazasDeCafe++;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"incrementar\">\n    Tazas consumidas: {{ tazasDeCafe }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,54567,54568,54576,54584,54590,54596,54605,54609,54613,54617,54624,54635,54639,54643,54647,54655,54659,54667,54681,54685,54693],{"__ignoreMap":163},[167,54569,54570,54572,54574],{"class":169,"line":170},[167,54571,174],{"class":173},[167,54573,178],{"class":177},[167,54575,185],{"class":173},[167,54577,54578,54580,54582],{"class":169,"line":188},[167,54579,608],{"class":191},[167,54581,3991],{"class":191},[167,54583,1905],{"class":173},[167,54585,54586,54588],{"class":169,"line":205},[167,54587,7176],{"class":181},[167,54589,763],{"class":173},[167,54591,54592,54594],{"class":169,"line":160},[167,54593,1937],{"class":191},[167,54595,1905],{"class":173},[167,54597,54598,54601,54603],{"class":169,"line":238},[167,54599,54600],{"class":173},"      tazasDeCafe: ",[167,54602,1960],{"class":219},[167,54604,393],{"class":173},[167,54606,54607],{"class":169,"line":243},[167,54608,24370],{"class":173},[167,54610,54611],{"class":169,"line":261},[167,54612,398],{"class":173},[167,54614,54615],{"class":169,"line":273},[167,54616,4419],{"class":173},[167,54618,54619,54622],{"class":169,"line":279},[167,54620,54621],{"class":181},"    incrementar",[167,54623,763],{"class":173},[167,54625,54626,54628,54631,54633],{"class":169,"line":289},[167,54627,741],{"class":219},[167,54629,54630],{"class":173},".tazasDeCafe",[167,54632,54500],{"class":191},[167,54634,24044],{"class":173},[167,54636,54637],{"class":169,"line":294},[167,54638,755],{"class":173},[167,54640,54641],{"class":169,"line":304},[167,54642,398],{"class":173},[167,54644,54645],{"class":169,"line":313},[167,54646,24148],{"class":173},[167,54648,54649,54651,54653],{"class":169,"line":161},[167,54650,282],{"class":173},[167,54652,178],{"class":177},[167,54654,185],{"class":173},[167,54656,54657],{"class":169,"line":335},[167,54658,209],{"emptyLinePlaceholder":208},[167,54660,54661,54663,54665],{"class":169,"line":341},[167,54662,174],{"class":173},[167,54664,299],{"class":177},[167,54666,185],{"class":173},[167,54668,54669,54671,54673,54675,54677,54679],{"class":169,"line":489},[167,54670,307],{"class":173},[167,54672,507],{"class":177},[167,54674,1182],{"class":181},[167,54676,267],{"class":173},[167,54678,54539],{"class":201},[167,54680,185],{"class":173},[167,54682,54683],{"class":169,"line":495},[167,54684,54546],{"class":173},[167,54686,54687,54689,54691],{"class":169,"line":501},[167,54688,504],{"class":173},[167,54690,507],{"class":177},[167,54692,185],{"class":173},[167,54694,54695,54697,54699],{"class":169,"line":512},[167,54696,282],{"class":173},[167,54698,299],{"class":177},[167,54700,185],{"class":173},[15,54702,54703],{},"Cada clic actualiza el estado. Vue detecta el cambio, vuelve a renderizar lo necesario y tú no tocas el DOM en ningún momento. Eso es la reactividad bien entendida: menos código imperativo, menos errores mentales y una interfaz que hace exactamente lo que debería.",[924,54705,54706],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":163,"searchDepth":188,"depth":188,"links":54708},[54709,54710,54716,54718,54719,54720],{"id":54098,"depth":188,"text":54099},{"id":54137,"depth":188,"text":54138,"children":54711},[54712,54714],{"id":54144,"depth":205,"text":54713},"Vue 2: Object.defineProperty",{"id":54178,"depth":205,"text":54715},"Vue 3: el poder de Proxy",{"id":54201,"depth":188,"text":54717},"Los dos pilares: ref() vs reactive()",{"id":54283,"depth":188,"text":54284},{"id":54313,"depth":188,"text":54314},{"id":54424,"depth":188,"text":54425},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1767664201\u002Fmagical_vue_coding_laboratory_p1incq.jpg","Ilustración de un laboratorio de codificación mágica de Vue.js","2026-01-06","Explora el sistema de reactividad de Vue.js, desde analogías simples hasta su implementación técnica con Proxies, y aprende a optimizar tus aplicaciones.",{"title":54726,"goal":54727,"tasks":54728,"starterCode":54733,"solutionHint":54734},"Construye un contador reactivo pequeno","Practica la diferencia entre estado, estado derivado y efectos creando un contador pequeno con primitivas de reactividad de Vue.",[54729,54730,54731,54732],"Crea un contador con ref() y muestra su valor actual.","Agrega un computed que duplique el contador.","Usa watch() para registrar cuando el contador llegue a 5.","Explica en una frase que lecturas se rastrean y que escrituras disparan actualizaciones.","\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nwatch(count, (value) => {\n  if (value === 5) {\n    console.log('El contador llego a 5')\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Contador: {{ count }}\u003C\u002Fbutton>\n  \u003Cp>Doble: {{ doubled }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El template y el getter de computed leen count, por eso Vue rastrea esas dependencias. Al hacer clic en el boton se escribe en count, asi que Vue dispara las actualizaciones dependientes.",{"updatedAt":54736,"coverCaption":54737,"author":946,"keywords":54738},"2026-02-11T00:00:00-05:00","Ilustración de un laboratorio de codificación mágica de Vue.js por TODOvue",[3258,3269,54187,3260,2085,18243],"\u002Fblog\u002Fvue-reactivity-explained.es",[54741],{"headline":54742,"author":54743,"datePublished":54744,"@type":961},"Vue 3.6 Beta: La Revolución de Vapor Mode y el Nuevo Motor de Reactividad",{"name":946,"@type":959},"2026-01-05T22:00:00-05:00",{"title":52629,"description":54724},"blog\u002Fvue-reactivity-explained.es",[54748,54749,54750],{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"tag":54751,"color":54752},"Historia","#F27E68","aNdUKGKLcU0hgUVTWG4WlFQa2a_Y5FJ5gcfUnxVfX-o",{"id":54755,"title":54742,"body":54756,"cover":55594,"coverAlt":55595,"date":55596,"description":55597,"draft":940,"extension":941,"lab":942,"locale":943,"meta":55598,"navigation":208,"path":55601,"schemaOrg":55602,"seo":55606,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":55607,"tags":55608,"__hash__":55619},"blog\u002Fblog\u002Fvue-beta-vapor-mode-revealed.es.md",{"type":8,"value":54757,"toc":55573},[54758,54761,54772,54778,54782,54792,54796,54803,54806,54849,54857,54865,54871,54875,54884,54891,54896,54920,54925,54952,54956,54959,54963,55051,55060,55064,55077,55081,55084,55247,55253,55257,55349,55353,55356,55360,55378,55393,55407,55421,55425,55432,55514,55518,55524,55558,55560,55570],[11,54759,54742],{"id":54760},"vue-36-beta-la-revolución-de-vapor-mode-y-el-nuevo-motor-de-reactividad",[15,54762,54763,54764,54767,54768,54771],{},"El ecosistema de Vue ha alcanzado un punto de inflexión con el lanzamiento de la ",[3933,54765,54766],{},"versión 3.6.0-beta.1",".\nEsta actualización no es un paso incremental; es una reingeniería profunda que prepara a Vue para un futuro donde el ",[3933,54769,54770],{},"Virtual DOM (VDOM)"," deja de ser el protagonista absoluto.",[15,54773,54774,54775,1679],{},"En este artículo, desglosamos los dos pilares de esta beta: la llegada de la \"Paridad Funcional\" en Vapor Mode y el nuevo motor de señales inspirado en ",[87,54776,54777],{},"alien-signals",[22,54779,54781],{"id":54780},"vapor-mode-alcanzando-la-paridad-funcional","Vapor Mode: Alcanzando la \"Paridad Funcional\"",[15,54783,54784,54785,54788,54789,1679],{},"Hasta hace poco, ",[3933,54786,54787],{},"Vapor Mode"," era un experimento prometedor pero limitado.\nCon la versión 3.6, el equipo core anuncia que se ha alcanzado la ",[3933,54790,54791],{},"Paridad Funcional",[3087,54793,54795],{"id":54794},"qué-significa-paridad-funcional-exactamente","¿Qué significa \"Paridad Funcional\" exactamente?",[15,54797,54798,54799,54802],{},"En el desarrollo de software, este término significa que una nueva implementación (en este caso, el compilador Vapor) ya es capaz de hacer ",[3933,54800,54801],{},"exactamente lo mismo"," que la implementación original (el compilador de VDOM estándar).",[15,54804,54805],{},"Para nosotros los desarrolladores, esto implica que Vapor ya no es solo para \"componentes simples\". Ahora soporta:",[33,54807,54808,54821,54836],{},[36,54809,54810,54813,54814,1025,54816,54818,54819,1679],{},[3933,54811,54812],{},"Directivas de control total:"," Manejo complejo de ",[87,54815,13496],{},[87,54817,30726],{}," (con algoritmos de movimiento de nodos optimizados) y ",[87,54820,23865],{},[36,54822,54823,54826,54827,54829,54830,54833,54834,1679],{},[3933,54824,54825],{},"Arquitectura de Componentes:"," Soporte para ",[9295,54828,51400],{},", componentes dinámicos (",[87,54831,54832],{},"\u003Ccomponent :is=\"...\">",") y ",[87,54835,13446],{},[36,54837,54838,54841,54842,54845,54846,1679],{},[3933,54839,54840],{},"Funciones integradas:"," Soporte nativo para ",[87,54843,54844],{},"\u003CTeleport>"," y el sistema de ",[87,54847,54848],{},"\u003CTransition>",[5367,54850,54851],{},[15,54852,54853,54856],{},[3933,54854,54855],{},"En resumen:"," La paridad funcional permite que un componente complejo de producción pueda ser compilado en modo Vapor sin perder ninguna característica de Vue, pero ganando una velocidad de ejecución sin precedentes.",[22,54858,54860,54861,54864],{"id":54859},"refactorización-de-vuereactivity-el-efecto-alien","Refactorización de ",[87,54862,54863],{},"@vue\u002Freactivity",": El efecto \"Alien\"",[15,54866,54867,54868,54870],{},"La gran sorpresa técnica de Vue 3.6 es la integración de los conceptos de ",[3933,54869,54777],{}," (una librería de señales ultrarrápida creada por Johnson Chu, miembro del core team) dentro del núcleo de Vue.",[3087,54872,54874],{"id":54873},"por-qué-cambiar-el-motor-de-señales","¿Por qué cambiar el motor de señales?",[15,54876,54877,54878,54880,54881,54883],{},"El sistema de reactividad de Vue 3 basado en ",[87,54879,22880],{}," era excelente, pero sufría en dos puntos: el uso de memoria y la limpieza de dependencias.\nLa adopción del modelo de ",[87,54882,54777],{}," resuelve esto cambiando la estructura de datos interna.",[29777,54885,54887,54888,54890],{"id":54886},"el-cambio-técnico-de-set-a-listas-enlazadas","El cambio técnico: De ",[87,54889,21730],{}," a Listas Enlazadas",[15,54892,54893,54894,1679],{},"Tradicionalmente, Vue guardaba los \"suscriptores\" (los efectos que deben ejecutarse cuando un dato cambia) en objetos tipo ",[87,54895,21730],{},[33,54897,54898,54910],{},[36,54899,54900,54903,54904,54906,54907,4270],{},[3933,54901,54902],{},"El Problema:"," Crear miles de ",[87,54905,21730],{}," consume mucha memoria y estresa al recolector de basura (",[9295,54908,54909],{},"Garbage Collector",[36,54911,54912,54915,54916,54919],{},[3933,54913,54914],{},"La Solución:"," El nuevo motor usa una ",[3933,54917,54918],{},"Lista Doblemente Enlazada",". Las suscripciones se conectan entre sí como eslabones de una cadena.",[15,54921,54922],{},[3933,54923,54924],{},"Los beneficios reales son impactantes:",[3035,54926,54927,54937,54943],{},[36,54928,54929,54932,54933,54936],{},[3933,54930,54931],{},"Reducción de Memoria:"," Hasta un ",[3933,54934,54935],{},"14% - 20% menos de consumo"," en aplicaciones con alta densidad de estados.",[36,54938,54939,54942],{},[3933,54940,54941],{},"Operaciones O(1):"," Añadir o eliminar una suscripción reactiva ahora tiene un coste constante, sin importar cuántas dependencias existan.",[36,54944,54945,54948,54949,54951],{},[3933,54946,54947],{},"Computadas Inteligentes:"," Se ha refinado el algoritmo de \"limpieza\" (cleanup), evitando que las propiedades ",[87,54950,1661],{}," se recalculen innecesariamente cuando las dependencias no han cambiado realmente.",[22,54953,54955],{"id":54954},"comparativa-vnode-vs-vapor-mode","Comparativa: VNode vs. Vapor Mode",[15,54957,54958],{},"Para entender por qué esto es una revolución, comparemos qué sucede \"bajo el capó\" con un componente básico.",[3087,54960,54962],{"id":54961},"código-fuente","Código Fuente",[154,54964,54966],{"className":156,"code":54965,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Contador: {{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,54967,54968,54978,54988,55004,55012,55016,55024,55043],{"__ignoreMap":163},[167,54969,54970,54972,54974,54976],{"class":169,"line":170},[167,54971,174],{"class":173},[167,54973,178],{"class":177},[167,54975,182],{"class":181},[167,54977,185],{"class":173},[167,54979,54980,54982,54984,54986],{"class":169,"line":188},[167,54981,192],{"class":191},[167,54983,195],{"class":173},[167,54985,198],{"class":191},[167,54987,202],{"class":201},[167,54989,54990,54992,54994,54996,54998,55000,55002],{"class":169,"line":205},[167,54991,216],{"class":191},[167,54993,15325],{"class":219},[167,54995,223],{"class":191},[167,54997,226],{"class":181},[167,54999,229],{"class":173},[167,55001,1960],{"class":219},[167,55003,235],{"class":173},[167,55005,55006,55008,55010],{"class":169,"line":160},[167,55007,282],{"class":173},[167,55009,178],{"class":177},[167,55011,185],{"class":173},[167,55013,55014],{"class":169,"line":238},[167,55015,209],{"emptyLinePlaceholder":208},[167,55017,55018,55020,55022],{"class":169,"line":243},[167,55019,174],{"class":173},[167,55021,299],{"class":177},[167,55023,185],{"class":173},[167,55025,55026,55028,55030,55032,55034,55036,55039,55041],{"class":169,"line":261},[167,55027,307],{"class":173},[167,55029,507],{"class":177},[167,55031,1182],{"class":181},[167,55033,267],{"class":173},[167,55035,18386],{"class":201},[167,55037,55038],{"class":173},">Contador: {{ count }}\u003C\u002F",[167,55040,507],{"class":177},[167,55042,185],{"class":173},[167,55044,55045,55047,55049],{"class":169,"line":273},[167,55046,282],{"class":173},[167,55048,299],{"class":177},[167,55050,185],{"class":173},[154,55052,55054],{"className":156,"code":55053,"filename":3973,"language":162,"meta":163,"style":163},"\u002F\u002F Vapor Mode es exclusivo de Composition API. No hay soporte disponible para Options API.\n",[87,55055,55056],{"__ignoreMap":163},[167,55057,55058],{"class":169,"line":170},[167,55059,55053],{"class":173},[3087,55061,55063],{"id":55062},"el-enfoque-tradicional-virtual-dom","El enfoque tradicional (Virtual DOM)",[15,55065,55066,55067,55069,55070,55072,55073,55076],{},"Vue crea un objeto de JavaScript (VNode) que representa el botón. Cuando ",[87,55068,23406],{}," cambia, Vue crea un ",[3933,55071,52753],{}," VNode, compara ambos (",[9295,55074,55075],{},"diffing",") y decide qué parte del DOM real actualizar. Esto ocurre en milisegundos, pero tiene un costo de CPU y memoria.",[3087,55078,55080],{"id":55079},"el-enfoque-vapor-directo-al-grano","El enfoque Vapor (Directo al grano)",[15,55082,55083],{},"El compilador de Vapor genera código que \"apunta\" directamente al nodo de texto del botón.",[154,55085,55088],{"className":51866,"code":55086,"filename":55087,"language":51870,"meta":163,"style":163},"import { delegateEvents, t, setInterpolation, renderEffect } from '@vue\u002Fruntime-vapor'\n\nconst t0 = t('\u003Cbutton>\u003C\u002Fbutton>') \u002F\u002F Plantilla estática\n\nexport function render(_ctx) {\n  const el0 = t0() \n  delegateEvents(el0, 'click', () => _ctx.count++)\n  \n  \u002F\u002F No hay comparación de árboles. Hay un \"vínculo\" directo.\n  renderEffect(() => {\n    setInterpolation(el0, () => `Contador: ${_ctx.count}`)\n  })\n  \n  return el0\n}\n","Counter.vapor.compiled.js",[87,55089,55090,55102,55106,55128,55132,55148,55162,55185,55189,55194,55205,55228,55232,55236,55243],{"__ignoreMap":163},[167,55091,55092,55094,55097,55099],{"class":169,"line":170},[167,55093,192],{"class":191},[167,55095,55096],{"class":173}," { delegateEvents, t, setInterpolation, renderEffect } ",[167,55098,198],{"class":191},[167,55100,55101],{"class":201}," '@vue\u002Fruntime-vapor'\n",[167,55103,55104],{"class":169,"line":188},[167,55105,209],{"emptyLinePlaceholder":208},[167,55107,55108,55110,55113,55115,55118,55120,55123,55125],{"class":169,"line":205},[167,55109,216],{"class":191},[167,55111,55112],{"class":219}," t0",[167,55114,223],{"class":191},[167,55116,55117],{"class":181}," t",[167,55119,229],{"class":173},[167,55121,55122],{"class":201},"'\u003Cbutton>\u003C\u002Fbutton>'",[167,55124,693],{"class":173},[167,55126,55127],{"class":18662},"\u002F\u002F Plantilla estática\n",[167,55129,55130],{"class":169,"line":160},[167,55131,209],{"emptyLinePlaceholder":208},[167,55133,55134,55136,55138,55141,55143,55146],{"class":169,"line":238},[167,55135,608],{"class":191},[167,55137,1432],{"class":191},[167,55139,55140],{"class":181}," render",[167,55142,229],{"class":173},[167,55144,55145],{"class":254},"_ctx",[167,55147,258],{"class":173},[167,55149,55150,55152,55155,55157,55159],{"class":169,"line":243},[167,55151,1443],{"class":191},[167,55153,55154],{"class":219}," el0",[167,55156,223],{"class":191},[167,55158,55112],{"class":181},[167,55160,55161],{"class":173},"() \n",[167,55163,55164,55167,55170,55173,55176,55178,55181,55183],{"class":169,"line":261},[167,55165,55166],{"class":181},"  delegateEvents",[167,55168,55169],{"class":173},"(el0, ",[167,55171,55172],{"class":201},"'click'",[167,55174,55175],{"class":173},", () ",[167,55177,639],{"class":191},[167,55179,55180],{"class":173}," _ctx.count",[167,55182,54500],{"class":191},[167,55184,235],{"class":173},[167,55186,55187],{"class":169,"line":273},[167,55188,48367],{"class":173},[167,55190,55191],{"class":169,"line":279},[167,55192,55193],{"class":18662},"  \u002F\u002F No hay comparación de árboles. Hay un \"vínculo\" directo.\n",[167,55195,55196,55199,55201,55203],{"class":169,"line":289},[167,55197,55198],{"class":181},"  renderEffect",[167,55200,1493],{"class":173},[167,55202,639],{"class":191},[167,55204,1905],{"class":173},[167,55206,55207,55210,55213,55215,55218,55220,55222,55224,55226],{"class":169,"line":294},[167,55208,55209],{"class":181},"    setInterpolation",[167,55211,55212],{"class":173},"(el0, () ",[167,55214,639],{"class":191},[167,55216,55217],{"class":201}," `Contador: ${",[167,55219,55145],{"class":173},[167,55221,1679],{"class":201},[167,55223,23406],{"class":173},[167,55225,2360],{"class":201},[167,55227,235],{"class":173},[167,55229,55230],{"class":169,"line":304},[167,55231,8347],{"class":173},[167,55233,55234],{"class":169,"line":313},[167,55235,48367],{"class":173},[167,55237,55238,55240],{"class":169,"line":161},[167,55239,1539],{"class":191},[167,55241,55242],{"class":173}," el0\n",[167,55244,55245],{"class":169,"line":335},[167,55246,276],{"class":173},[15,55248,55249,55252],{},[3933,55250,55251],{},"Resultado:"," Cero Virtual DOM, cero algoritmos de comparación, solo manipulación directa del DOM con la máxima eficiencia posible.",[22,55254,55256],{"id":55255},"tabla-de-rendimiento-y-capacidades","Tabla de Rendimiento y Capacidades",[56,55258,55259,55271],{},[59,55260,55261],{},[62,55262,55263,55265,55268],{},[65,55264,51979],{},[65,55266,55267],{},"Vue 3.5 (Standard)",[65,55269,55270],{},"Vue 3.6 (Vapor Mode)",[75,55272,55273,55287,55303,55318,55334],{},[62,55274,55275,55280,55282],{},[80,55276,55277],{},[3933,55278,55279],{},"Estructura Interna",[80,55281,54770],{},[80,55283,55284],{},[3933,55285,55286],{},"VDOM-less (Directo)",[62,55288,55289,55294,55299],{},[80,55290,55291],{},[3933,55292,55293],{},"Motor de Señales",[80,55295,55296,55297],{},"Basado en ",[87,55298,21730],{},[80,55300,55301],{},[3933,55302,54918],{},[62,55304,55305,55310,55313],{},[80,55306,55307],{},[3933,55308,55309],{},"Consumo de Memoria",[80,55311,55312],{},"Base estándar",[80,55314,55315],{},[3933,55316,55317],{},"~14% menor",[62,55319,55320,55325,55328],{},[80,55321,55322],{},[3933,55323,55324],{},"Interoperabilidad",[80,55326,55327],{},"Completa",[80,55329,55330,55331,6219],{},"Alta (vía ",[87,55332,55333],{},"vaporInterop",[62,55335,55336,55341,55344],{},[80,55337,55338],{},[3933,55339,55340],{},"Recomendado para",[80,55342,55343],{},"Apps generales, SSR masivo",[80,55345,55346],{},[3933,55347,55348],{},"Dispositivos IoT, Dashboards pesados, Web Components",[22,55350,55352],{"id":55351},"cómo-empezar-a-probarlo","¿Cómo empezar a probarlo?",[15,55354,55355],{},"Para experimentar con estas mejoras, debes usar la versión beta y configurar tu entorno de Vite para reconocer el modo Vapor.",[3087,55357,55359],{"id":55358},"paso-1-instalación","Paso 1: Instalación",[154,55361,55366],{"className":55362,"code":55363,"filename":55364,"language":55365,"meta":163,"style":163},"language-bash shiki shiki-themes github-light github-dark","npm install vue@3.6.0-beta.1\n","npm","bash",[87,55367,55368],{"__ignoreMap":163},[167,55369,55370,55372,55375],{"class":169,"line":170},[167,55371,55364],{"class":181},[167,55373,55374],{"class":201}," install",[167,55376,55377],{"class":201}," vue@3.6.0-beta.1\n",[154,55379,55382],{"className":55362,"code":55380,"filename":55381,"language":55365,"meta":163,"style":163},"pnpm add vue@3.6.0-beta.1\n","pnpm",[87,55383,55384],{"__ignoreMap":163},[167,55385,55386,55388,55391],{"class":169,"line":170},[167,55387,55381],{"class":181},[167,55389,55390],{"class":201}," add",[167,55392,55377],{"class":201},[154,55394,55397],{"className":55362,"code":55395,"filename":55396,"language":55365,"meta":163,"style":163},"yarn add vue@3.6.0-beta.1\n","yarn",[87,55398,55399],{"__ignoreMap":163},[167,55400,55401,55403,55405],{"class":169,"line":170},[167,55402,55396],{"class":181},[167,55404,55390],{"class":201},[167,55406,55377],{"class":201},[154,55408,55411],{"className":55362,"code":55409,"filename":55410,"language":55365,"meta":163,"style":163},"bun add vue@3.6.0-beta.1\n","bun",[87,55412,55413],{"__ignoreMap":163},[167,55414,55415,55417,55419],{"class":169,"line":170},[167,55416,55410],{"class":181},[167,55418,55390],{"class":201},[167,55420,55377],{"class":201},[3087,55422,55424],{"id":55423},"paso-2-configuración-de-vite","Paso 2: Configuración de Vite",[15,55426,55427,55428,55431],{},"Activa el soporte para archivos ",[87,55429,55430],{},".vapor.vue"," (la convención recomendada para diferenciar componentes):",[154,55433,55437],{"className":51866,"code":55434,"filename":55435,"highlights":55436,"language":51870,"meta":163,"style":163},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      vapor: true \u002F\u002F Activa el compilador de Vapor\n    })\n  ]\n})\n","vite.config.js",[261],[87,55438,55439,55451,55463,55467,55478,55483,55490,55501,55505,55510],{"__ignoreMap":163},[167,55440,55441,55443,55446,55448],{"class":169,"line":170},[167,55442,192],{"class":191},[167,55444,55445],{"class":173}," { defineConfig } ",[167,55447,198],{"class":191},[167,55449,55450],{"class":201}," 'vite'\n",[167,55452,55453,55455,55458,55460],{"class":169,"line":188},[167,55454,192],{"class":191},[167,55456,55457],{"class":173}," vue ",[167,55459,198],{"class":191},[167,55461,55462],{"class":201}," '@vitejs\u002Fplugin-vue'\n",[167,55464,55465],{"class":169,"line":205},[167,55466,209],{"emptyLinePlaceholder":208},[167,55468,55469,55471,55473,55476],{"class":169,"line":160},[167,55470,608],{"class":191},[167,55472,3991],{"class":191},[167,55474,55475],{"class":181}," defineConfig",[167,55477,372],{"class":173},[167,55479,55480],{"class":169,"line":238},[167,55481,55482],{"class":173},"  plugins: [\n",[167,55484,55485,55488],{"class":169,"line":243},[167,55486,55487],{"class":181},"    vue",[167,55489,372],{"class":173},[167,55491,55493,55496,55498],{"class":55492,"line":261},[169,213],[167,55494,55495],{"class":173},"      vapor: ",[167,55497,390],{"class":219},[167,55499,55500],{"class":18662}," \u002F\u002F Activa el compilador de Vapor\n",[167,55502,55503],{"class":169,"line":273},[167,55504,8926],{"class":173},[167,55506,55507],{"class":169,"line":279},[167,55508,55509],{"class":173},"  ]\n",[167,55511,55512],{"class":169,"line":289},[167,55513,403],{"class":173},[3087,55515,55517],{"id":55516},"paso-3-uso-de-componentes","Paso 3: Uso de componentes",[15,55519,55520,55521,55523],{},"Puedes mezclar componentes estándar y Vapor. Para forzar a un componente a usar el nuevo motor, usa la extensión ",[87,55522,55430],{}," o define el bloque script:",[154,55525,55529],{"className":156,"code":55526,"filename":55527,"highlights":55528,"language":162,"meta":163,"style":163},"\u003Cscript setup vapor>\n\u002F\u002F Este componente se compilará sin Virtual DOM\n\u003C\u002Fscript>\n","Index.vue",[170],[87,55530,55531,55545,55550],{"__ignoreMap":163},[167,55532,55534,55536,55538,55540,55543],{"class":55533,"line":170},[169,213],[167,55535,174],{"class":173},[167,55537,178],{"class":177},[167,55539,182],{"class":181},[167,55541,55542],{"class":181}," vapor",[167,55544,185],{"class":173},[167,55546,55547],{"class":169,"line":188},[167,55548,55549],{"class":18662},"\u002F\u002F Este componente se compilará sin Virtual DOM\n",[167,55551,55552,55554,55556],{"class":169,"line":205},[167,55553,282],{"class":173},[167,55555,178],{"class":177},[167,55557,185],{"class":173},[22,55559,23574],{"id":23573},[15,55561,55562,55563,55566,55567,55569],{},"Vue 3.6 no es solo una actualización; es un mensaje claro a la comunidad: ",[3933,55564,55565],{},"Vue puede ser tan rápido y ligero como el que más, sin sacrificar su amada sintaxis."," Al integrar la eficiencia de ",[87,55568,54777],{}," y alcanzar la paridad funcional con Vapor, Vue se posiciona como el framework más flexible y potente para la próxima década del desarrollo web.",[924,55571,55572],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":163,"searchDepth":188,"depth":188,"links":55574},[55575,55578,55582,55587,55588,55593],{"id":54780,"depth":188,"text":54781,"children":55576},[55577],{"id":54794,"depth":205,"text":54795},{"id":54859,"depth":188,"text":55579,"children":55580},"Refactorización de @vue\u002Freactivity: El efecto \"Alien\"",[55581],{"id":54873,"depth":205,"text":54874},{"id":54954,"depth":188,"text":54955,"children":55583},[55584,55585,55586],{"id":54961,"depth":205,"text":54962},{"id":55062,"depth":205,"text":55063},{"id":55079,"depth":205,"text":55080},{"id":55255,"depth":188,"text":55256},{"id":55351,"depth":188,"text":55352,"children":55589},[55590,55591,55592],{"id":55358,"depth":205,"text":55359},{"id":55423,"depth":205,"text":55424},{"id":55516,"depth":205,"text":55517},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766870280\u002Fvue-beta-vapor-mode-revealed_snvcqg.png","Logo de Vue.js sobre un fondo de código fuente","2025-12-27","Explora las novedades de Vue 3.6 Beta, incluyendo Vapor Mode y la integración de alien-signals para una reactividad más eficiente.",{"updatedAt":54736,"coverCaption":55599,"author":946,"keywords":55600},"Descubre las innovaciones de Vue 3.6 Beta: Vapor Mode y un motor de reactividad renovado","vue 3.6, vapor mode, alien-signals, reactividad, javascript, framework, frontend, beta","\u002Fblog\u002Fvue-beta-vapor-mode-revealed.es",[55603],{"headline":54742,"author":55604,"datePublished":55605,"@type":961},{"name":946,"@type":959},"2025-12-27T00:00:00-05",{"title":54742,"description":55597},"blog\u002Fvue-beta-vapor-mode-revealed.es",[55609,55612,55614,55615,55618],{"tag":55610,"color":55611},"Beta","#42B883",{"tag":54787,"color":55613},"#41B2A6",{"tag":3269,"color":3270},{"tag":55616,"color":55617},"Ecosistema","#68D4F2",{"tag":7730,"color":7731},"OoT1wXBWbx7Nm_VxKBcOVEX_68taHaHv5lb5JWYp_3Q",{"id":55621,"title":55622,"body":55623,"cover":56581,"coverAlt":56582,"date":56583,"description":56584,"draft":940,"extension":941,"lab":942,"locale":943,"meta":56585,"navigation":208,"path":56587,"schemaOrg":56588,"seo":56592,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":56593,"tags":56594,"__hash__":56599},"blog\u002Fblog\u002Fsetting-up-vue-with-vite.es.md","¿Cómo crear tu primer proyecto con Vue usando Vite?",{"type":8,"value":55624,"toc":56569},[55625,55629,55636,55640,55643,55679,55683,55690,55703,55707,55710,55728,55744,55759,55774,55784,55788,55791,55815,55819,55822,55825,55837,55840,55852,55863,55874,55885,55892,55896,55899,55914,55925,55936,55949,55956,55960,55963,56004,56008,56014,56277,56529,56533,56566],[11,55626,55628],{"id":55627},"guía-creando-tu-primer-proyecto-con-vue-y-vite","Guía: Creando tu primer proyecto con Vue y Vite",[15,55630,55631,55632,55635],{},"En esta guía aprenderás a configurar un entorno de desarrollo moderno. ",[3933,55633,55634],{},"Vite"," es una herramienta que reemplaza al antiguo Vue CLI, ofreciendo una velocidad de carga casi instantánea durante el desarrollo.",[22,55637,55639],{"id":55638},"resumen-de-la-solución","Resumen de la solución",[15,55641,55642],{},"Para completar este proyecto, seguiremos estos pasos:",[3035,55644,55645,55651,55661,55667,55673],{},[36,55646,55647,55650],{},[3933,55648,55649],{},"Preparación",": Verificación de herramientas necesarias (Node.js).",[36,55652,55653,55656,55657,55660],{},[3933,55654,55655],{},"Andamiaje",": Uso del comando ",[87,55658,55659],{},"npm create vite"," para generar la estructura.",[36,55662,55663,55666],{},[3933,55664,55665],{},"Instalación",": Configuración de las dependencias del proyecto.",[36,55668,55669,55672],{},[3933,55670,55671],{},"Ejecución",": Lanzamiento del servidor de desarrollo local.",[36,55674,55675,55678],{},[3933,55676,55677],{},"Exploración",": Breve explicación de la estructura de archivos generada.",[22,55680,55682],{"id":55681},"requisitos-previos","Requisitos previos",[15,55684,55685,55686,55689],{},"Antes de empezar, asegúrate de tener instalado ",[3933,55687,55688],{},"Node.js"," (versión 18 o superior). Puedes verificarlo abriendo una terminal y escribiendo:",[154,55691,55693],{"className":55362,"code":55692,"filename":55365,"language":55365,"meta":163,"style":163},"node -v\n",[87,55694,55695],{"__ignoreMap":163},[167,55696,55697,55700],{"class":169,"line":170},[167,55698,55699],{"class":181},"node",[167,55701,55702],{"class":219}," -v\n",[22,55704,55706],{"id":55705},"paso-1-inicializar-el-proyecto","Paso 1: Inicializar el proyecto",[15,55708,55709],{},"Abre tu terminal en la carpeta donde quieras guardar tu proyecto y ejecuta el siguiente comando:",[154,55711,55713],{"className":55362,"code":55712,"filename":55364,"language":55365,"meta":163,"style":163},"npm create vite@latest mi-primer-proyecto-vue\n",[87,55714,55715],{"__ignoreMap":163},[167,55716,55717,55719,55722,55725],{"class":169,"line":170},[167,55718,55364],{"class":181},[167,55720,55721],{"class":201}," create",[167,55723,55724],{"class":201}," vite@latest",[167,55726,55727],{"class":201}," mi-primer-proyecto-vue\n",[154,55729,55731],{"className":55362,"code":55730,"filename":55381,"language":55365,"meta":163,"style":163},"pnpm create vite mi-primer-proyecto-vue\n",[87,55732,55733],{"__ignoreMap":163},[167,55734,55735,55737,55739,55742],{"class":169,"line":170},[167,55736,55381],{"class":181},[167,55738,55721],{"class":201},[167,55740,55741],{"class":201}," vite",[167,55743,55727],{"class":201},[154,55745,55747],{"className":55362,"code":55746,"filename":55396,"language":55365,"meta":163,"style":163},"yarn create vite mi-primer-proyecto-vue\n",[87,55748,55749],{"__ignoreMap":163},[167,55750,55751,55753,55755,55757],{"class":169,"line":170},[167,55752,55396],{"class":181},[167,55754,55721],{"class":201},[167,55756,55741],{"class":201},[167,55758,55727],{"class":201},[154,55760,55762],{"className":55362,"code":55761,"filename":55410,"language":55365,"meta":163,"style":163},"bun create vite mi-primer-proyecto-vue\n",[87,55763,55764],{"__ignoreMap":163},[167,55765,55766,55768,55770,55772],{"class":169,"line":170},[167,55767,55410],{"class":181},[167,55769,55721],{"class":201},[167,55771,55741],{"class":201},[167,55773,55727],{"class":201},[5367,55775,55776],{},[15,55777,55778,16903,55780,55783],{},[3933,55779,53853],{},[87,55781,55782],{},"mi-primer-proyecto-vue"," es el nombre de la carpeta que se creará. Puedes cambiarlo por el que prefieras.",[22,55785,55787],{"id":55786},"paso-2-configuración-del-asistente","Paso 2: Configuración del asistente",[15,55789,55790],{},"Una vez ejecutado el comando, la terminal te hará unas preguntas interactivas. Sigue estas opciones para un proyecto estándar:",[3035,55792,55793,55801],{},[36,55794,55795,55798,55799,1679],{},[3933,55796,55797],{},"Select a framework:"," Usa las flechas del teclado para seleccionar ",[87,55800,26494],{},[36,55802,55803,55806,55807,55810,55811,55814],{},[3933,55804,55805],{},"Select a variant:"," Selecciona ",[87,55808,55809],{},"JavaScript"," (o ",[87,55812,55813],{},"TypeScript"," si prefieres tipado fuerte, pero para empezar recomendamos JavaScript).",[22,55816,55818],{"id":55817},"paso-3-instalación-de-dependencias","Paso 3: Instalación de dependencias",[15,55820,55821],{},"Vite crea la estructura de archivos, pero no instala las librerías automáticamente para ahorrar tiempo. Debes entrar a la carpeta e instalarlas manualmente:",[15,55823,55824],{},"Entra a la carpeta del proyecto",[154,55826,55828],{"className":55362,"code":55827,"filename":55365,"language":55365,"meta":163,"style":163},"cd mi-primer-proyecto-vue\n",[87,55829,55830],{"__ignoreMap":163},[167,55831,55832,55835],{"class":169,"line":170},[167,55833,55834],{"class":219},"cd",[167,55836,55727],{"class":201},[15,55838,55839],{},"Instala todas las librerías necesarias",[154,55841,55843],{"className":55362,"code":55842,"filename":55364,"language":55365,"meta":163,"style":163},"npm install\n",[87,55844,55845],{"__ignoreMap":163},[167,55846,55847,55849],{"class":169,"line":170},[167,55848,55364],{"class":181},[167,55850,55851],{"class":201}," install\n",[154,55853,55855],{"className":55362,"code":55854,"filename":55381,"language":55365,"meta":163,"style":163},"pnpm install\n",[87,55856,55857],{"__ignoreMap":163},[167,55858,55859,55861],{"class":169,"line":170},[167,55860,55381],{"class":181},[167,55862,55851],{"class":201},[154,55864,55866],{"className":55362,"code":55865,"filename":55396,"language":55365,"meta":163,"style":163},"yarn install\n",[87,55867,55868],{"__ignoreMap":163},[167,55869,55870,55872],{"class":169,"line":170},[167,55871,55396],{"class":181},[167,55873,55851],{"class":201},[154,55875,55877],{"className":55362,"code":55876,"filename":55410,"language":55365,"meta":163,"style":163},"bun install\n",[87,55878,55879],{"__ignoreMap":163},[167,55880,55881,55883],{"class":169,"line":170},[167,55882,55410],{"class":181},[167,55884,55851],{"class":201},[15,55886,55887,55888,55891],{},"Este proceso creará la carpeta ",[87,55889,55890],{},"node_modules",", que contiene todo el código necesario para que Vue funcione.",[22,55893,55895],{"id":55894},"paso-4-ejecutar-el-servidor-de-desarrollo","Paso 4: Ejecutar el servidor de desarrollo",[15,55897,55898],{},"¡Ya estás listo! Ahora inicia el servidor para ver tu aplicación en el navegador:",[154,55900,55902],{"className":55362,"code":55901,"filename":55364,"language":55365,"meta":163,"style":163},"npm run dev\n",[87,55903,55904],{"__ignoreMap":163},[167,55905,55906,55908,55911],{"class":169,"line":170},[167,55907,55364],{"class":181},[167,55909,55910],{"class":201}," run",[167,55912,55913],{"class":201}," dev\n",[154,55915,55917],{"className":55362,"code":55916,"filename":55381,"language":55365,"meta":163,"style":163},"pnpm dev\n",[87,55918,55919],{"__ignoreMap":163},[167,55920,55921,55923],{"class":169,"line":170},[167,55922,55381],{"class":181},[167,55924,55913],{"class":201},[154,55926,55928],{"className":55362,"code":55927,"filename":55396,"language":55365,"meta":163,"style":163},"yarn dev\n",[87,55929,55930],{"__ignoreMap":163},[167,55931,55932,55934],{"class":169,"line":170},[167,55933,55396],{"class":181},[167,55935,55913],{"class":201},[154,55937,55939],{"className":55362,"code":55938,"filename":55410,"language":55365,"meta":163,"style":163},"bun run dev\n",[87,55940,55941],{"__ignoreMap":163},[167,55942,55943,55945,55947],{"class":169,"line":170},[167,55944,55410],{"class":181},[167,55946,55910],{"class":201},[167,55948,55913],{"class":201},[15,55950,55951,55952,55955],{},"La terminal te mostrará una URL (normalmente ",[87,55953,55954],{},"http:\u002F\u002Flocalhost:5173\u002F","). Abre ese enlace en tu navegador y verás la página de bienvenida de Vue.",[22,55957,55959],{"id":55958},"paso-5-estructura-del-proyecto","Paso 5: Estructura del proyecto",[15,55961,55962],{},"Aquí tienes una descripción de los archivos más importantes que verás en tu editor de código:",[33,55964,55965,55973,55981,55989,55997],{},[36,55966,55967,55972],{},[3933,55968,55969],{},[87,55970,55971],{},"index.html",": El punto de entrada principal. Vite lo usa para montar la aplicación.",[36,55974,55975,55980],{},[3933,55976,55977],{},[87,55978,55979],{},"src\u002Fmain.js",": El archivo JavaScript que inicializa la instancia de Vue y la conecta con el HTML.",[36,55982,55983,55988],{},[3933,55984,55985],{},[87,55986,55987],{},"src\u002FApp.vue",": El componente raíz de tu aplicación. Todo lo que escribas aquí se verá en pantalla.",[36,55990,55991,55996],{},[3933,55992,55993],{},[87,55994,55995],{},"src\u002Fcomponents\u002F",": Carpeta donde guardarás tus propios componentes reutilizables.",[36,55998,55999,56003],{},[3933,56000,56001],{},[87,56002,55435],{},": Archivo de configuración de Vite.",[22,56005,56007],{"id":56006},"ejemplo-de-un-componente-básico","Ejemplo de un componente básico",[15,56009,56010,56011,56013],{},"Para empezar a programar, puedes abrir el archivo ",[87,56012,55987],{}," y reemplazar su contenido con este código sencillo para entender cómo funciona la reactividad:",[154,56015,56017],{"className":156,"code":56016,"filename":3260,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ mensaje }}\u003C\u002Fh1>\n    \u003Cbutton @click=\"incrementar\">Contador: {{ contador }}\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue';\n\n\u002F\u002F Definimos una variable reactiva\nconst mensaje = \"¡Hola desde mi app con Vite!\";\nconst contador = ref(0);\n\n\u002F\u002F Función para cambiar el estado\nconst incrementar = () => {\n  contador.value++;\n};\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\nh1 {\n  color: #42b983;\n}\nbutton {\n  padding: 10px 20px;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[87,56018,56019,56027,56035,56048,56067,56075,56083,56087,56097,56109,56113,56118,56132,56149,56153,56158,56172,56181,56185,56193,56197,56208,56214,56225,56229,56235,56253,56265,56269],{"__ignoreMap":163},[167,56020,56021,56023,56025],{"class":169,"line":170},[167,56022,174],{"class":173},[167,56024,299],{"class":177},[167,56026,185],{"class":173},[167,56028,56029,56031,56033],{"class":169,"line":188},[167,56030,307],{"class":173},[167,56032,1242],{"class":177},[167,56034,185],{"class":173},[167,56036,56037,56039,56041,56044,56046],{"class":169,"line":205},[167,56038,1257],{"class":173},[167,56040,11],{"class":177},[167,56042,56043],{"class":173},">{{ mensaje }}\u003C\u002F",[167,56045,11],{"class":177},[167,56047,185],{"class":173},[167,56049,56050,56052,56054,56056,56058,56060,56063,56065],{"class":169,"line":160},[167,56051,1257],{"class":173},[167,56053,507],{"class":177},[167,56055,1182],{"class":181},[167,56057,267],{"class":173},[167,56059,54539],{"class":201},[167,56061,56062],{"class":173},">Contador: {{ contador }}\u003C\u002F",[167,56064,507],{"class":177},[167,56066,185],{"class":173},[167,56068,56069,56071,56073],{"class":169,"line":238},[167,56070,504],{"class":173},[167,56072,1242],{"class":177},[167,56074,185],{"class":173},[167,56076,56077,56079,56081],{"class":169,"line":243},[167,56078,282],{"class":173},[167,56080,299],{"class":177},[167,56082,185],{"class":173},[167,56084,56085],{"class":169,"line":261},[167,56086,209],{"emptyLinePlaceholder":208},[167,56088,56089,56091,56093,56095],{"class":169,"line":273},[167,56090,174],{"class":173},[167,56092,178],{"class":177},[167,56094,182],{"class":181},[167,56096,185],{"class":173},[167,56098,56099,56101,56103,56105,56107],{"class":169,"line":279},[167,56100,192],{"class":191},[167,56102,195],{"class":173},[167,56104,198],{"class":191},[167,56106,51444],{"class":201},[167,56108,24044],{"class":173},[167,56110,56111],{"class":169,"line":289},[167,56112,209],{"emptyLinePlaceholder":208},[167,56114,56115],{"class":169,"line":294},[167,56116,56117],{"class":18662},"\u002F\u002F Definimos una variable reactiva\n",[167,56119,56120,56122,56125,56127,56130],{"class":169,"line":304},[167,56121,216],{"class":191},[167,56123,56124],{"class":219}," mensaje",[167,56126,223],{"class":191},[167,56128,56129],{"class":201}," \"¡Hola desde mi app con Vite!\"",[167,56131,24044],{"class":173},[167,56133,56134,56136,56139,56141,56143,56145,56147],{"class":169,"line":313},[167,56135,216],{"class":191},[167,56137,56138],{"class":219}," contador",[167,56140,223],{"class":191},[167,56142,226],{"class":181},[167,56144,229],{"class":173},[167,56146,1960],{"class":219},[167,56148,24169],{"class":173},[167,56150,56151],{"class":169,"line":161},[167,56152,209],{"emptyLinePlaceholder":208},[167,56154,56155],{"class":169,"line":335},[167,56156,56157],{"class":18662},"\u002F\u002F Función para cambiar el estado\n",[167,56159,56160,56162,56164,56166,56168,56170],{"class":169,"line":341},[167,56161,216],{"class":191},[167,56163,54484],{"class":181},[167,56165,223],{"class":191},[167,56167,1469],{"class":173},[167,56169,639],{"class":191},[167,56171,1905],{"class":173},[167,56173,56174,56177,56179],{"class":169,"line":489},[167,56175,56176],{"class":173},"  contador.value",[167,56178,54500],{"class":191},[167,56180,24044],{"class":173},[167,56182,56183],{"class":169,"line":495},[167,56184,24148],{"class":173},[167,56186,56187,56189,56191],{"class":169,"line":501},[167,56188,282],{"class":173},[167,56190,178],{"class":177},[167,56192,185],{"class":173},[167,56194,56195],{"class":169,"line":512},[167,56196,209],{"emptyLinePlaceholder":208},[167,56198,56199,56201,56203,56206],{"class":169,"line":781},[167,56200,174],{"class":173},[167,56202,924],{"class":177},[167,56204,56205],{"class":181}," scoped",[167,56207,185],{"class":173},[167,56209,56210,56212],{"class":169,"line":786},[167,56211,11],{"class":177},[167,56213,1905],{"class":173},[167,56215,56216,56218,56220,56223],{"class":169,"line":2678},[167,56217,27139],{"class":219},[167,56219,1108],{"class":173},[167,56221,56222],{"class":219},"#42b983",[167,56224,24044],{"class":173},[167,56226,56227],{"class":169,"line":2692},[167,56228,276],{"class":173},[167,56230,56231,56233],{"class":169,"line":3575},[167,56232,507],{"class":177},[167,56234,1905],{"class":173},[167,56236,56237,56239,56241,56244,56246,56249,56251],{"class":169,"line":5028},[167,56238,27151],{"class":219},[167,56240,1108],{"class":173},[167,56242,56243],{"class":219},"10",[167,56245,27173],{"class":191},[167,56247,56248],{"class":219}," 20",[167,56250,27173],{"class":191},[167,56252,24044],{"class":173},[167,56254,56255,56258,56260,56263],{"class":169,"line":5037},[167,56256,56257],{"class":219},"  cursor",[167,56259,1108],{"class":173},[167,56261,56262],{"class":219},"pointer",[167,56264,24044],{"class":173},[167,56266,56267],{"class":169,"line":5046},[167,56268,276],{"class":173},[167,56270,56271,56273,56275],{"class":169,"line":6756},[167,56272,282],{"class":173},[167,56274,924],{"class":177},[167,56276,185],{"class":173},[154,56278,56280],{"className":156,"code":56279,"filename":3973,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ mensaje }}\u003C\u002Fh1>\n    \u003Cbutton @click=\"incrementar\">Contador: {{ contador }}\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      mensaje: '¡Hola desde mi app con Vite!',\n      contador: 0\n    };\n  },\n  methods: {\n    incrementar() {\n      this.contador++;\n    }\n  }\n};\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\nh1 {\n  color: #42b983;\n}\nbutton {\n  padding: 10px 20px;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[87,56281,56282,56290,56298,56310,56328,56336,56344,56348,56356,56364,56373,56379,56385,56395,56402,56406,56410,56414,56420,56431,56435,56439,56443,56451,56455,56465,56471,56481,56485,56491,56507,56517,56521],{"__ignoreMap":163},[167,56283,56284,56286,56288],{"class":169,"line":170},[167,56285,174],{"class":173},[167,56287,299],{"class":177},[167,56289,185],{"class":173},[167,56291,56292,56294,56296],{"class":169,"line":188},[167,56293,307],{"class":173},[167,56295,1242],{"class":177},[167,56297,185],{"class":173},[167,56299,56300,56302,56304,56306,56308],{"class":169,"line":205},[167,56301,1257],{"class":173},[167,56303,11],{"class":177},[167,56305,56043],{"class":173},[167,56307,11],{"class":177},[167,56309,185],{"class":173},[167,56311,56312,56314,56316,56318,56320,56322,56324,56326],{"class":169,"line":160},[167,56313,1257],{"class":173},[167,56315,507],{"class":177},[167,56317,1182],{"class":181},[167,56319,267],{"class":173},[167,56321,54539],{"class":201},[167,56323,56062],{"class":173},[167,56325,507],{"class":177},[167,56327,185],{"class":173},[167,56329,56330,56332,56334],{"class":169,"line":238},[167,56331,504],{"class":173},[167,56333,1242],{"class":177},[167,56335,185],{"class":173},[167,56337,56338,56340,56342],{"class":169,"line":243},[167,56339,282],{"class":173},[167,56341,299],{"class":177},[167,56343,185],{"class":173},[167,56345,56346],{"class":169,"line":261},[167,56347,209],{"emptyLinePlaceholder":208},[167,56349,56350,56352,56354],{"class":169,"line":273},[167,56351,174],{"class":173},[167,56353,178],{"class":177},[167,56355,185],{"class":173},[167,56357,56358,56360,56362],{"class":169,"line":279},[167,56359,608],{"class":191},[167,56361,3991],{"class":191},[167,56363,1905],{"class":173},[167,56365,56366,56368,56371],{"class":169,"line":289},[167,56367,4398],{"class":173},[167,56369,56370],{"class":201},"'App'",[167,56372,393],{"class":173},[167,56374,56375,56377],{"class":169,"line":294},[167,56376,7176],{"class":181},[167,56378,763],{"class":173},[167,56380,56381,56383],{"class":169,"line":304},[167,56382,1937],{"class":191},[167,56384,1905],{"class":173},[167,56386,56387,56390,56393],{"class":169,"line":313},[167,56388,56389],{"class":173},"      mensaje: ",[167,56391,56392],{"class":201},"'¡Hola desde mi app con Vite!'",[167,56394,393],{"class":173},[167,56396,56397,56400],{"class":169,"line":161},[167,56398,56399],{"class":173},"      contador: ",[167,56401,10681],{"class":219},[167,56403,56404],{"class":169,"line":335},[167,56405,24370],{"class":173},[167,56407,56408],{"class":169,"line":341},[167,56409,398],{"class":173},[167,56411,56412],{"class":169,"line":489},[167,56413,4419],{"class":173},[167,56415,56416,56418],{"class":169,"line":495},[167,56417,54621],{"class":181},[167,56419,763],{"class":173},[167,56421,56422,56424,56427,56429],{"class":169,"line":501},[167,56423,741],{"class":219},[167,56425,56426],{"class":173},".contador",[167,56428,54500],{"class":191},[167,56430,24044],{"class":173},[167,56432,56433],{"class":169,"line":512},[167,56434,4049],{"class":173},[167,56436,56437],{"class":169,"line":781},[167,56438,3492],{"class":173},[167,56440,56441],{"class":169,"line":786},[167,56442,24148],{"class":173},[167,56444,56445,56447,56449],{"class":169,"line":2678},[167,56446,282],{"class":173},[167,56448,178],{"class":177},[167,56450,185],{"class":173},[167,56452,56453],{"class":169,"line":2692},[167,56454,209],{"emptyLinePlaceholder":208},[167,56456,56457,56459,56461,56463],{"class":169,"line":3575},[167,56458,174],{"class":173},[167,56460,924],{"class":177},[167,56462,56205],{"class":181},[167,56464,185],{"class":173},[167,56466,56467,56469],{"class":169,"line":5028},[167,56468,11],{"class":177},[167,56470,1905],{"class":173},[167,56472,56473,56475,56477,56479],{"class":169,"line":5037},[167,56474,27139],{"class":219},[167,56476,1108],{"class":173},[167,56478,56222],{"class":219},[167,56480,24044],{"class":173},[167,56482,56483],{"class":169,"line":5046},[167,56484,276],{"class":173},[167,56486,56487,56489],{"class":169,"line":6756},[167,56488,507],{"class":177},[167,56490,1905],{"class":173},[167,56492,56493,56495,56497,56499,56501,56503,56505],{"class":169,"line":6778},[167,56494,27151],{"class":219},[167,56496,1108],{"class":173},[167,56498,56243],{"class":219},[167,56500,27173],{"class":191},[167,56502,56248],{"class":219},[167,56504,27173],{"class":191},[167,56506,24044],{"class":173},[167,56508,56509,56511,56513,56515],{"class":169,"line":6783},[167,56510,56257],{"class":219},[167,56512,1108],{"class":173},[167,56514,56262],{"class":219},[167,56516,24044],{"class":173},[167,56518,56519],{"class":169,"line":6788},[167,56520,276],{"class":173},[167,56522,56523,56525,56527],{"class":169,"line":6793},[167,56524,282],{"class":173},[167,56526,924],{"class":177},[167,56528,185],{"class":173},[3087,56530,56532],{"id":56531},"explicación-del-código","Explicación del código:",[33,56534,56535,56545,56555],{},[36,56536,56537,56541,56542,56544],{},[3933,56538,56539],{},[87,56540,31997],{},": Contiene el HTML. Usamos ",[87,56543,30568],{}," para mostrar variables.",[36,56546,56547,56551,56552,56554],{},[3933,56548,56549],{},[87,56550,1008],{},": Es la forma moderna de escribir lógica en Vue 3. Usamos ",[87,56553,2085],{}," para que Vue sepa que cuando el valor cambie, debe actualizar la pantalla.",[36,56556,56557,56561,56562,56565],{},[3933,56558,56559],{},[87,56560,26714],{},": Aquí va el CSS, y el atributo ",[87,56563,56564],{},"scoped"," asegura que los estilos solo afecten a este componente.",[924,56567,56568],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":163,"searchDepth":188,"depth":188,"links":56570},[56571,56572,56573,56574,56575,56576,56577,56578],{"id":55638,"depth":188,"text":55639},{"id":55681,"depth":188,"text":55682},{"id":55705,"depth":188,"text":55706},{"id":55786,"depth":188,"text":55787},{"id":55817,"depth":188,"text":55818},{"id":55894,"depth":188,"text":55895},{"id":55958,"depth":188,"text":55959},{"id":56006,"depth":188,"text":56007,"children":56579},[56580],{"id":56531,"depth":205,"text":56532},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766607505\u002Fsetting_up_vue_with_vite_crikmp.png","Logo de Vue.js con el logo de Vite de fondo","2025-12-24","Una guía paso a paso para configurar un entorno de desarrollo moderno con Vue.js y Vite.",{"updatedAt":54736,"coverCaption":56586},"Configura tu entorno de desarrollo con Vue y Vite en minutos","\u002Fblog\u002Fsetting-up-vue-with-vite.es",[56589],{"headline":55622,"author":56590,"datePublished":56591,"@type":961},{"name":946,"@type":959},"2025-12-24T00:00:00-05",{"title":55622,"description":56584},"blog\u002Fsetting-up-vue-with-vite.es",[56595,56597,56598],{"tag":55634,"color":56596},"#646CFF",{"tag":55616,"color":55617},{"tag":5424,"color":5425},"MUgSVDrbxUy7t0OhAKC7RQ8Mxme-tp8kojsvtX1_Uoo",{"id":56601,"title":56602,"body":56603,"cover":56776,"coverAlt":56777,"date":56778,"description":56779,"draft":940,"extension":941,"lab":942,"locale":943,"meta":56780,"navigation":208,"path":56782,"schemaOrg":56783,"seo":56787,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":56788,"tags":56789,"__hash__":56792},"blog\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es.md","Historia y Evolución de Vue.js: El Framework Progresivo",{"type":8,"value":56604,"toc":56767},[56605,56609,56615,56619,56630,56636,56640,56647,56686,56696,56700,56704,56718,56722,56725,56750,56754],[11,56606,56608],{"id":56607},"vuejs-la-evolución-del-framework-progresivo","Vue.js: La Evolución del Framework Progresivo",[15,56610,56611,56612,56614],{},"Desde su humilde comienzo como un proyecto paralelo en Google hasta convertirse en uno de los pilares del desarrollo web moderno, ",[3933,56613,3258],{}," ha mantenido una filosofía única: ser el framework que crece contigo. En este artículo, exploraremos cómo su historia y diseño técnico han redefinido la experiencia de desarrollo (DX).",[22,56616,56618],{"id":56617},"el-origen-la-visión-de-evan-you","El Origen: La Visión de Evan You",[15,56620,56621,56622,56625,56626,56629],{},"La historia de Vue comienza en 2013, dentro de las oficinas de Google Creative Lab. ",[3933,56623,56624],{},"Evan You",", trabajando con AngularJS, sintió que podía extraer lo mejor de ese mundo (el enlace de datos o ",[9295,56627,56628],{},"data binding",") y combinarlo con una estructura mucho más ligera y menos restrictiva.",[15,56631,6304,56632,56635],{},[3933,56633,56634],{},"febrero de 2014",", se lanzó oficialmente la versión 1.0. A diferencia de sus competidores, Vue no nació bajo el ala de una gran corporación (como React con Facebook o Angular con Google), sino como un proyecto independiente impulsado por la comunidad y el feedback directo de los desarrolladores.",[22,56637,56639],{"id":56638},"la-filosofía-del-framework-progresivo","La Filosofía del \"Framework Progresivo\"",[15,56641,56642,56643,56646],{},"¿Qué significa realmente que Vue sea ",[3933,56644,56645],{},"progresivo","? A diferencia de los frameworks monolíticos, Vue se divide en capas que puedes adoptar según tus necesidades:",[3035,56648,56649,56655,56661,56670,56678],{},[36,56650,56651,56654],{},[3933,56652,56653],{},"Declarative Rendering:"," Puedes usarlo solo para manejar el DOM.",[36,56656,56657,56660],{},[3933,56658,56659],{},"Component System:"," Para crear interfaces modulares.",[36,56662,56663,56666,56667,1679],{},[3933,56664,56665],{},"Client-Side Routing:"," Mediante ",[9295,56668,56669],{},"Vue Router",[36,56671,56672,56666,56675,56677],{},[3933,56673,56674],{},"State Management:",[9295,56676,950],{}," (anteriormente Vuex).",[36,56679,56680,56683,56684,1679],{},[3933,56681,56682],{},"Build System:"," Optimizado actualmente por ",[9295,56685,55634],{},[15,56687,56688,56689,56691,56692,56695],{},"Esta escalabilidad permite que un desarrollador integre Vue en una página legacy mediante un simple ",[87,56690,1008],{}," de CDN, o construya una ",[3933,56693,56694],{},"Single Page Application (SPA)"," compleja con millones de usuarios.",[22,56697,56699],{"id":56698},"evolución-técnica-de-la-v1-a-la-v3","Evolución Técnica: De la V1 a la V3",[3087,56701,56703],{"id":56702},"vue-2-la-consolidación","Vue 2: La Consolidación",[15,56705,56706,56707,56710,56711,56714,56715,56717],{},"Lanzado en 2016, introdujo el ",[3933,56708,56709],{},"Virtual DOM",", mejorando drásticamente el rendimiento. Fue la era donde el ecosistema explotó, popularizando los ",[3933,56712,56713],{},"Single File Components (SFC)"," y el uso de ",[87,56716,54148],{}," para su sistema de reactividad.",[3087,56719,56721],{"id":56720},"vue-3-el-gran-salto-one-piece","Vue 3: El Gran Salto (One Piece)",[15,56723,56724],{},"En septiembre de 2020, Vue 3 trajo una reescritura completa del núcleo. Los cambios clave fueron:",[33,56726,56727,56738,56744],{},[36,56728,56729,56732,56733,56735,56736,4270],{},[3933,56730,56731],{},"Composition API:"," Una alternativa superior a la ",[9295,56734,3973],{}," para organizar la lógica de componentes complejos y mejorar la reutilización de código (",[9295,56737,1629],{},[36,56739,56740,56743],{},[3933,56741,56742],{},"Reactividad basada en Proxies:"," Superando las limitaciones de Vue 2, permitiendo detectar cambios en propiedades nuevas y arreglos de forma nativa.",[36,56745,56746,56749],{},[3933,56747,56748],{},"Soporte de TypeScript de primer nivel:"," El framework ahora está escrito en TS, facilitando el tipado estático.",[22,56751,56753],{"id":56752},"el-futuro-y-el-ecosistema-actual","El Futuro y el Ecosistema Actual",[15,56755,56756,56757,56759,56760,56763,56764,56766],{},"Hoy, Vue no es solo una librería; es un estándar de rendimiento gracias a ",[3933,56758,55634],{},", el motor de bundling creado por el propio equipo de Vue que ha revolucionado la industria. Con el auge de ",[3933,56761,56762],{},"Nuxt 3"," para aplicaciones SSR (Server Side Rendering) y la transición oficial a ",[3933,56765,950],{}," como gestor de estado, el ecosistema es más robusto y maduro que nunca.",{"title":163,"searchDepth":188,"depth":188,"links":56768},[56769,56770,56771,56775],{"id":56617,"depth":188,"text":56618},{"id":56638,"depth":188,"text":56639},{"id":56698,"depth":188,"text":56699,"children":56772},[56773,56774],{"id":56702,"depth":205,"text":56703},{"id":56720,"depth":205,"text":56721},{"id":56752,"depth":188,"text":56753},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766105778\u002Fhistoria_de_vue_wbwv72.png","Logo de Vue.js con fondo de código fuente","2025-12-19","Desde sus inicios como un proyecto paralelo en Google hasta convertirse en uno de los pilares del desarrollo web moderno, exploramos la evolución y filosofía de Vue.js.",{"updatedAt":54736,"coverCaption":56781},"Explorando la evolución de Vue.js desde sus inicios hasta la actualidad","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[56784],{"headline":56602,"author":56785,"datePublished":56786,"@type":961},{"name":946,"@type":959},"2025-12-19T00:00:00-05",{"title":56602,"description":56779},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[56790,56791],{"tag":54751,"color":54752},{"tag":55616,"color":55617},"rJyCA4jjvQiJ_sw3YqFOoiddKcMhFEHJpq4Aw3J5Uzg",{"id":56794,"title":56795,"body":56796,"cover":57427,"coverAlt":55595,"date":57428,"description":57429,"draft":940,"extension":941,"lab":942,"locale":943,"meta":57430,"navigation":208,"path":57433,"schemaOrg":57434,"seo":57438,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":57439,"tags":57440,"__hash__":57444},"blog\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es.md","¿Qué es Vue.js y por qué deberías usarlo?",{"type":8,"value":56797,"toc":57409},[56798,56802,56808,56814,56817,56821,56827,56833,56838,56844,56855,56859,56865,57080,57289,57300,57304,57307,57313,57325,57330,57340,57344,57350,57355,57361,57376,57382,57387,57393,57398,57400,57403,57406],[11,56799,56801],{"id":56800},"vuejs-el-framework-progresivo-para-la-web-moderna","Vue.js: El Framework Progresivo para la Web Moderna",[15,56803,56804,56805,56807],{},"En el saturado ecosistema de JavaScript, elegir una herramienta para el frontend puede sentirse como intentar dar a un blanco móvil. Sin embargo, ",[3933,56806,3258],{}," ha logrado posicionarse no solo como una alternativa a gigantes como React o Angular, sino como la opción preferida para quienes buscan un equilibrio entre potencia, simplicidad y rendimiento.",[15,56809,56810,56813],{},[3933,56811,56812],{},"Vue.js es un framework JavaScript de código abierto"," creado por Evan You en 2014, diseñado específicamente para construir interfaces de usuario interactivas y aplicaciones de una sola página (SPA). Su filosofía se centra en ser accesible, versátil y eficiente, priorizando la experiencia del desarrollador sin comprometer el rendimiento.",[15,56815,56816],{},"Pero, ¿qué es exactamente lo que hace a Vue especial y por qué deberías considerarlo para tu próximo proyecto en 2025?",[22,56818,56820],{"id":56819},"el-concepto-de-framework-progresivo","El Concepto de \"Framework Progresivo\"",[15,56822,56823,56824,56826],{},"A diferencia de otros frameworks monolíticos que te obligan a adoptar toda su estructura desde el día uno, Vue se define como ",[3933,56825,56645],{},". Esto significa que su complejidad escala según tus necesidades:",[3087,56828,56830],{"id":56829},"uso-como-librería",[3933,56831,56832],{},"Uso como librería:",[33,56834,56835],{},[36,56836,56837],{},"Puedes integrar Vue en una página existente mediante un simple CDN para manejar widgets pequeños o añadir interactividad ligera sin reescribir todo tu backend.",[3087,56839,56841],{"id":56840},"uso-como-framework-spa",[3933,56842,56843],{},"Uso como Framework (SPA):",[33,56845,56846],{},[36,56847,56848,56849,56851,56852,56854],{},"Puedes construir aplicaciones robustas de una sola página (Single Page Applications) utilizando su ecosistema oficial completo: ",[3933,56850,56669],{}," para la navegación y ",[3933,56853,950],{}," para la gestión del estado global.",[22,56856,56858],{"id":56857},"reactividad-transparente-y-eficiente","Reactividad Transparente y Eficiente",[15,56860,56861,56862,56864],{},"El corazón de Vue es su sistema de reactividad. En su versión 3, Vue utiliza los ",[87,56863,22880],{}," nativos de JavaScript para interceptar cambios en los datos. Esto permite que el framework sepa exactamente qué parte del DOM debe actualizarse, evitando renderizados innecesarios y procesos pesados de comparación de nodos.",[154,56866,56868],{"className":156,"code":56867,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, computed } from 'vue';\n\n\u002F\u002F Estado reactivo simple\nconst contador = ref(0);\n\n\u002F\u002F Propiedad computada: se recalcula solo cuando cambia 'contador'\nconst esPar = computed(() => contador.value % 2 === 0);\n\nconst incrementar = () => {\n  contador.value++;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"contador\">\n    \u003Ch3>Contador: {{ contador }}\u003C\u002Fh3>\n    \u003Cp>El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C\u002Fp>\n    \u003Cbutton @click=\"incrementar\">Incrementar\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[87,56869,56870,56880,56892,56896,56901,56917,56921,56926,56956,56960,56974,56982,56986,56994,56998,57006,57021,57033,57046,57064,57072],{"__ignoreMap":163},[167,56871,56872,56874,56876,56878],{"class":169,"line":170},[167,56873,174],{"class":173},[167,56875,178],{"class":177},[167,56877,182],{"class":181},[167,56879,185],{"class":173},[167,56881,56882,56884,56886,56888,56890],{"class":169,"line":188},[167,56883,192],{"class":191},[167,56885,18285],{"class":173},[167,56887,198],{"class":191},[167,56889,51444],{"class":201},[167,56891,24044],{"class":173},[167,56893,56894],{"class":169,"line":205},[167,56895,209],{"emptyLinePlaceholder":208},[167,56897,56898],{"class":169,"line":160},[167,56899,56900],{"class":18662},"\u002F\u002F Estado reactivo simple\n",[167,56902,56903,56905,56907,56909,56911,56913,56915],{"class":169,"line":238},[167,56904,216],{"class":191},[167,56906,56138],{"class":219},[167,56908,223],{"class":191},[167,56910,226],{"class":181},[167,56912,229],{"class":173},[167,56914,1960],{"class":219},[167,56916,24169],{"class":173},[167,56918,56919],{"class":169,"line":243},[167,56920,209],{"emptyLinePlaceholder":208},[167,56922,56923],{"class":169,"line":261},[167,56924,56925],{"class":18662},"\u002F\u002F Propiedad computada: se recalcula solo cuando cambia 'contador'\n",[167,56927,56928,56930,56933,56935,56937,56939,56941,56944,56947,56949,56952,56954],{"class":169,"line":273},[167,56929,216],{"class":191},[167,56931,56932],{"class":219}," esPar",[167,56934,223],{"class":191},[167,56936,1898],{"class":181},[167,56938,1493],{"class":173},[167,56940,639],{"class":191},[167,56942,56943],{"class":173}," contador.value ",[167,56945,56946],{"class":191},"%",[167,56948,18332],{"class":219},[167,56950,56951],{"class":191}," ===",[167,56953,44659],{"class":219},[167,56955,24169],{"class":173},[167,56957,56958],{"class":169,"line":279},[167,56959,209],{"emptyLinePlaceholder":208},[167,56961,56962,56964,56966,56968,56970,56972],{"class":169,"line":289},[167,56963,216],{"class":191},[167,56965,54484],{"class":181},[167,56967,223],{"class":191},[167,56969,1469],{"class":173},[167,56971,639],{"class":191},[167,56973,1905],{"class":173},[167,56975,56976,56978,56980],{"class":169,"line":294},[167,56977,56176],{"class":173},[167,56979,54500],{"class":191},[167,56981,24044],{"class":173},[167,56983,56984],{"class":169,"line":304},[167,56985,24148],{"class":173},[167,56987,56988,56990,56992],{"class":169,"line":313},[167,56989,282],{"class":173},[167,56991,178],{"class":177},[167,56993,185],{"class":173},[167,56995,56996],{"class":169,"line":161},[167,56997,209],{"emptyLinePlaceholder":208},[167,56999,57000,57002,57004],{"class":169,"line":335},[167,57001,174],{"class":173},[167,57003,299],{"class":177},[167,57005,185],{"class":173},[167,57007,57008,57010,57012,57014,57016,57019],{"class":169,"line":341},[167,57009,307],{"class":173},[167,57011,1242],{"class":177},[167,57013,1245],{"class":181},[167,57015,267],{"class":173},[167,57017,57018],{"class":201},"\"contador\"",[167,57020,185],{"class":173},[167,57022,57023,57025,57027,57029,57031],{"class":169,"line":489},[167,57024,1257],{"class":173},[167,57026,3087],{"class":177},[167,57028,56062],{"class":173},[167,57030,3087],{"class":177},[167,57032,185],{"class":173},[167,57034,57035,57037,57039,57042,57044],{"class":169,"line":495},[167,57036,1257],{"class":173},[167,57038,15],{"class":177},[167,57040,57041],{"class":173},">El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C\u002F",[167,57043,15],{"class":177},[167,57045,185],{"class":173},[167,57047,57048,57050,57052,57054,57056,57058,57060,57062],{"class":169,"line":501},[167,57049,1257],{"class":173},[167,57051,507],{"class":177},[167,57053,1182],{"class":181},[167,57055,267],{"class":173},[167,57057,54539],{"class":201},[167,57059,50453],{"class":173},[167,57061,507],{"class":177},[167,57063,185],{"class":173},[167,57065,57066,57068,57070],{"class":169,"line":512},[167,57067,504],{"class":173},[167,57069,1242],{"class":177},[167,57071,185],{"class":173},[167,57073,57074,57076,57078],{"class":169,"line":781},[167,57075,282],{"class":173},[167,57077,299],{"class":177},[167,57079,185],{"class":173},[154,57081,57083],{"className":156,"code":57082,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      contador: 0\n    };\n  },\n  computed: {\n    esPar() {\n      return this.contador % 2 === 0;\n    }\n  },\n  methods: {\n    incrementar() {\n      this.contador++;\n    }\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"contador\">\n    \u003Ch3>Contador: {{ contador }}\u003C\u002Fh3>\n    \u003Cp>El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C\u002Fp>\n    \u003Cbutton @click=\"incrementar\">Incrementar\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[87,57084,57085,57093,57101,57107,57113,57119,57123,57127,57131,57138,57157,57161,57165,57169,57175,57185,57189,57193,57197,57205,57209,57217,57231,57243,57255,57273,57281],{"__ignoreMap":163},[167,57086,57087,57089,57091],{"class":169,"line":170},[167,57088,174],{"class":173},[167,57090,178],{"class":177},[167,57092,185],{"class":173},[167,57094,57095,57097,57099],{"class":169,"line":188},[167,57096,608],{"class":191},[167,57098,3991],{"class":191},[167,57100,1905],{"class":173},[167,57102,57103,57105],{"class":169,"line":205},[167,57104,7176],{"class":181},[167,57106,763],{"class":173},[167,57108,57109,57111],{"class":169,"line":160},[167,57110,1937],{"class":191},[167,57112,1905],{"class":173},[167,57114,57115,57117],{"class":169,"line":238},[167,57116,56399],{"class":173},[167,57118,10681],{"class":219},[167,57120,57121],{"class":169,"line":243},[167,57122,24370],{"class":173},[167,57124,57125],{"class":169,"line":261},[167,57126,398],{"class":173},[167,57128,57129],{"class":169,"line":273},[167,57130,8755],{"class":173},[167,57132,57133,57136],{"class":169,"line":279},[167,57134,57135],{"class":181},"    esPar",[167,57137,763],{"class":173},[167,57139,57140,57142,57144,57147,57149,57151,57153,57155],{"class":169,"line":289},[167,57141,8767],{"class":191},[167,57143,7351],{"class":219},[167,57145,57146],{"class":173},".contador ",[167,57148,56946],{"class":191},[167,57150,18332],{"class":219},[167,57152,56951],{"class":191},[167,57154,44659],{"class":219},[167,57156,24044],{"class":173},[167,57158,57159],{"class":169,"line":294},[167,57160,4049],{"class":173},[167,57162,57163],{"class":169,"line":304},[167,57164,398],{"class":173},[167,57166,57167],{"class":169,"line":313},[167,57168,4419],{"class":173},[167,57170,57171,57173],{"class":169,"line":161},[167,57172,54621],{"class":181},[167,57174,763],{"class":173},[167,57176,57177,57179,57181,57183],{"class":169,"line":335},[167,57178,741],{"class":219},[167,57180,56426],{"class":173},[167,57182,54500],{"class":191},[167,57184,24044],{"class":173},[167,57186,57187],{"class":169,"line":341},[167,57188,4049],{"class":173},[167,57190,57191],{"class":169,"line":489},[167,57192,3492],{"class":173},[167,57194,57195],{"class":169,"line":495},[167,57196,24148],{"class":173},[167,57198,57199,57201,57203],{"class":169,"line":501},[167,57200,282],{"class":173},[167,57202,178],{"class":177},[167,57204,185],{"class":173},[167,57206,57207],{"class":169,"line":512},[167,57208,209],{"emptyLinePlaceholder":208},[167,57210,57211,57213,57215],{"class":169,"line":781},[167,57212,174],{"class":173},[167,57214,299],{"class":177},[167,57216,185],{"class":173},[167,57218,57219,57221,57223,57225,57227,57229],{"class":169,"line":786},[167,57220,307],{"class":173},[167,57222,1242],{"class":177},[167,57224,1245],{"class":181},[167,57226,267],{"class":173},[167,57228,57018],{"class":201},[167,57230,185],{"class":173},[167,57232,57233,57235,57237,57239,57241],{"class":169,"line":2678},[167,57234,1257],{"class":173},[167,57236,3087],{"class":177},[167,57238,56062],{"class":173},[167,57240,3087],{"class":177},[167,57242,185],{"class":173},[167,57244,57245,57247,57249,57251,57253],{"class":169,"line":2692},[167,57246,1257],{"class":173},[167,57248,15],{"class":177},[167,57250,57041],{"class":173},[167,57252,15],{"class":177},[167,57254,185],{"class":173},[167,57256,57257,57259,57261,57263,57265,57267,57269,57271],{"class":169,"line":3575},[167,57258,1257],{"class":173},[167,57260,507],{"class":177},[167,57262,1182],{"class":181},[167,57264,267],{"class":173},[167,57266,54539],{"class":201},[167,57268,50453],{"class":173},[167,57270,507],{"class":177},[167,57272,185],{"class":173},[167,57274,57275,57277,57279],{"class":169,"line":5028},[167,57276,504],{"class":173},[167,57278,1242],{"class":177},[167,57280,185],{"class":173},[167,57282,57283,57285,57287],{"class":169,"line":5037},[167,57284,282],{"class":173},[167,57286,299],{"class":177},[167,57288,185],{"class":173},[15,57290,57291,57292,57295,57296,57299],{},"Este simple ejemplo demuestra cómo Vue rastrea automáticamente las dependencias: cuando ",[87,57293,57294],{},"contador"," cambia, tanto la visualización del número como la propiedad computada ",[87,57297,57298],{},"esPar"," se actualizan sin intervención manual.",[22,57301,57303],{"id":57302},"versatilidad-de-apis-options-vs-composition","Versatilidad de APIs: Options vs. Composition",[15,57305,57306],{},"Una de las mayores fortalezas de Vue es su dualidad, adaptándose al nivel de experiencia del equipo y a la escala del problema:",[3087,57308,57310],{"id":57309},"options-api",[3933,57311,57312],{},"Options API:",[33,57314,57315],{},[36,57316,57317,57318,1025,57320,1025,57322,57324],{},"La forma clásica. Organiza el código por \"opciones\" (",[87,57319,17983],{},[87,57321,17992],{},[87,57323,1661],{},"). Es extremadamente legible y recomendada para quienes están haciendo la transición desde HTML\u002FJS básico o jQuery.",[3087,57326,57328],{"id":57327},"composition-api",[3933,57329,56731],{},[33,57331,57332],{},[36,57333,57334,57335,57337,57338,1679],{},"Introducida en Vue 3, permite agrupar la lógica por funcionalidades en lugar de por tipos de opción. Es la herramienta definitiva para proyectos grandes, ya que facilita la creación de lógica reutilizable (",[3933,57336,954],{},") y ofrece una integración nativa y robusta con ",[3933,57339,55813],{},[22,57341,57343],{"id":57342},"por-qué-elegir-vuejs-hoy","¿Por qué elegir Vue.js hoy?",[3087,57345,57347],{"id":57346},"curva-de-aprendizaje-amable",[3933,57348,57349],{},"Curva de aprendizaje amable:",[33,57351,57352],{},[36,57353,57354],{},"Si dominas los fundamentos de la web (HTML, CSS y JS), serás productivo en Vue en cuestión de horas. Su sintaxis de plantillas (Templates) es familiar y reduce la carga cognitiva.",[3087,57356,57358],{"id":57357},"ecosistema-unificado",[3933,57359,57360],{},"Ecosistema Unificado:",[33,57362,57363],{},[36,57364,57365,57366,57368,57369,57371,57372,57375],{},"El equipo oficial de Vue mantiene las herramientas críticas: ",[3933,57367,55634],{}," (el bundler más rápido del mercado), ",[3933,57370,950],{}," (estado) y ",[3933,57373,57374],{},"Router",". Esto garantiza que todas las piezas encajen perfectamente tras cada actualización.",[3087,57377,57379],{"id":57378},"rendimiento-de-élite",[3933,57380,57381],{},"Rendimiento de Élite:",[33,57383,57384],{},[36,57385,57386],{},"Gracias a un compilador inteligente que optimiza las plantillas en tiempo de construcción, Vue genera un código de ejecución ligero que suele superar en velocidad a frameworks con mayor cuota de mercado.",[3087,57388,57390],{"id":57389},"documentación-de-referencia",[3933,57391,57392],{},"Documentación de referencia:",[33,57394,57395],{},[36,57396,57397],{},"Es ampliamente considerada como el estándar de oro en la industria por ser clara, estar siempre actualizada y ofrecer ejemplos que funcionan \"a la primera\".",[22,57399,23574],{"id":23573},[15,57401,57402],{},"Vue.js no intenta reinventar la web, sino hacer que trabajar en ella sea más placentero y eficiente. Es la elección lógica si buscas un framework que crezca con tu proyecto, ofreciendo la flexibilidad de una pequeña librería con la potencia de un entorno empresarial de alto nivel.",[15,57404,57405],{},"Ya sea que estés construyendo tu primera aplicación web o migrando un proyecto legacy, Vue te acompaña en cada etapa sin imponerte decisiones arquitectónicas prematuras. Su comunidad activa, el soporte corporativo de empresas como Alibaba y la constante innovación del equipo core garantizan que Vue seguirá siendo relevante en los años venideros.",[924,57407,57408],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":163,"searchDepth":188,"depth":188,"links":57410},[57411,57415,57416,57420,57426],{"id":56819,"depth":188,"text":56820,"children":57412},[57413,57414],{"id":56829,"depth":205,"text":56832},{"id":56840,"depth":205,"text":56843},{"id":56857,"depth":188,"text":56858},{"id":57302,"depth":188,"text":57303,"children":57417},[57418,57419],{"id":57309,"depth":205,"text":57312},{"id":57327,"depth":205,"text":56731},{"id":57342,"depth":188,"text":57343,"children":57421},[57422,57423,57424,57425],{"id":57346,"depth":205,"text":57349},{"id":57357,"depth":205,"text":57360},{"id":57378,"depth":205,"text":57381},{"id":57389,"depth":205,"text":57392},{"id":23573,"depth":188,"text":23574},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766098457\u002FQue_es_Vue_y_por_que_deberias_usarlo_tmowoz.png","2025-12-18","Descubre Vue.js, un framework progresivo de JavaScript, y aprende por qué es una excelente opción para desarrollar aplicaciones web modernas y reactivas.",{"updatedAt":54736,"coverCaption":57431,"author":946,"keywords":57432},"Explorando Vue.js: El framework progresivo para la web moderna","vue.js, javascript, framework, frontend, spa, reactividad, composition api, vue 3","\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[57435],{"headline":56795,"author":57436,"datePublished":57437,"@type":961},{"name":946,"@type":959},"2025-12-18T00:00:00-05",{"title":56795,"description":57429},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[57441,57442,57443],{"tag":55616,"color":55617},{"tag":5424,"color":5425},{"tag":54751,"color":54752},"3oUGsbaCuwOgI_KyRJd-09Ixe2vRBkwOj4YxwJT8Nks",{"id":57446,"title":57447,"body":57448,"cover":57603,"coverAlt":57604,"date":57605,"description":57606,"draft":940,"extension":941,"lab":942,"locale":943,"meta":57607,"navigation":208,"path":57609,"schemaOrg":57610,"seo":57614,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":57615,"tags":57616,"__hash__":57622},"blog\u002Fblog\u002Fwelcome-to-todovue.es.md","TODOvue: Un espacio dedicado al ecosistema de Vue.js",{"type":8,"value":57449,"toc":57597},[57450,57456,57462,57472,57476,57479,57530,57534,57540,57547,57554,57558,57572,57576,57582,57585,57587],[11,57451,57453,57454,6641],{"id":57452},"bienvenidos-a-todovue","¡Bienvenidos a ",[3933,57455,946],{},[15,57457,57458,57459,57461],{},"Este espacio nace de una necesidad clara: establecer un punto de encuentro para desarrolladores que, al igual que yo, encuentran en el ecosistema de ",[3933,57460,3258],{}," una de las herramientas más potentes, elegantes y eficientes para construir la web moderna.",[15,57463,57464,57466,57467,1025,57469,57471],{},[3933,57465,946],{}," no es solo un blog; es un proyecto técnico dedicado a desglosar cada rincón de ",[3933,57468,951],{},[3933,57470,6307],{}," y el abanico de librerías que optimizan nuestro flujo de trabajo diario.",[22,57473,57475],{"id":57474},"qué-esperar-de-este-blog","¿Qué esperar de este blog?",[15,57477,57478],{},"Nuestro objetivo es trascender los tutoriales introductorios. En TODOvue profundizaremos en pilares fundamentales para el desarrollo profesional:",[33,57480,57481,57492,57507,57517],{},[36,57482,57483,57486,57487,57489,57490,1679],{},[3933,57484,57485],{},"Patrones de Diseño y Composición",": Uso avanzado de la ",[3933,57488,3260],{},", patrones de reusabilidad y diseño de ",[9295,57491,1629],{},[36,57493,57494,57497,57498,1025,57500,1025,57503,57506],{},[3933,57495,57496],{},"Ecosistema Nuxt",": Estrategias de renderizado avanzado (",[3933,57499,978],{},[3933,57501,57502],{},"SSG",[3933,57504,57505],{},"Hybrid Rendering \u002F ISR","), gestión de módulos y despliegue optimizado.",[36,57508,57509,57512,57513,57516],{},[3933,57510,57511],{},"Rendimiento y Optimización",": Técnicas de ",[9295,57514,57515],{},"code-splitting",", optimización de bundles y estrategias para alcanzar la máxima velocidad en el lado del cliente.",[36,57518,57519,57522,57523,1025,57525,1025,57527,57529],{},[3933,57520,57521],{},"Herramientas y Librerías",": Análisis profundo de ",[3933,57524,950],{},[3933,57526,56669],{},[3933,57528,55634],{}," y las propuestas emergentes más disruptivas de la comunidad.",[22,57531,57533],{"id":57532},"dogfooding-construido-con-lo-que-enseñamos","\"Dogfooding\": Construido con lo que enseñamos",[15,57535,57536,57537,1679],{},"Un aspecto diferencial de este blog es su propia arquitectura. Todo lo que interactúa en esta plataforma ha sido desarrollado bajo los principios de ",[3933,57538,57539],{},"Atomic Design",[15,57541,57542,57543,57546],{},"He decidido que cada pieza de TODOvue —desde los átomos (botones) hasta el motor de renderizado de artículos— funcione como un componente independiente publicado en ",[3933,57544,57545],{},"NPM",". Aunque el foco principal es el contenido educativo, la infraestructura es totalmente transparente y abierta para quienes deseen integrarla en sus propios proyectos.",[15,57548,57549,57550,57553],{},"Creemos en el ",[3933,57551,57552],{},"Open Source"," no solo como una filosofía, sino como una práctica de ingeniería. Si un componente es lo suficientemente robusto para dar vida a este blog, debe estar disponible para la comunidad en el registro de NPM.",[22,57555,57557],{"id":57556},"por-qué-ahora","¿Por qué ahora?",[15,57559,57560,57561,57563,57564,57567,57568,57571],{},"Vue 3 ha alcanzado un estado de madurez excepcional. Gracias a la adopción de ",[87,57562,1008],{},", la estabilidad de Nuxt 3 y la velocidad de Vite, el desarrollo ",[9295,57565,57566],{},"frontend"," nunca ha sido tan gratificante. Sin embargo, la evolución es constante: surgen nuevos retos, ",[9295,57569,57570],{},"breaking changes"," y patrones de arquitectura que merecen ser documentados y analizados con rigor técnico.",[22,57573,57575],{"id":57574},"únete-a-la-conversación","Únete a la conversación",[15,57577,57578,57579,57581],{},"Este es el inicio de un camino de aprendizaje continuo. ",[3933,57580,946],{}," aspira a ser una fuente de consulta confiable y un espacio de intercambio de conocimientos.",[15,57583,57584],{},"Te invito a explorar el contenido, experimentar con los componentes que alimentan este sitio y, sobre todo, a mantener la curiosidad por este framework que nos apasiona.",[44267,57586],{},[15,57588,57589,57592,57593],{},[3933,57590,57591],{},"¿Hay algún tema específico de Vue o Nuxt que te gustaría que tratáramos primero?","\n¡Contáctame! ",[19092,57594,57596],{"href":57595},"mailto:blog@todovue.blog","blog@todovue.blog",{"title":163,"searchDepth":188,"depth":188,"links":57598},[57599,57600,57601,57602],{"id":57474,"depth":188,"text":57475},{"id":57532,"depth":188,"text":57533},{"id":57556,"depth":188,"text":57557},{"id":57574,"depth":188,"text":57575},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766098456\u002FTODOvue_idegxt.png","Logo de TODOvue con código fuente de fondo","2025-12-17","Bienvenidos a TODOvue. Un blog técnico diseñado por y para desarrolladores, donde exploramos a fondo Vue 3, Nuxt y la arquitectura de componentes moderna.",{"updatedAt":54736,"coverCaption":57608},"Explorando el universo de Vue.js de principio a fin","\u002Fblog\u002Fwelcome-to-todovue.es",[57611],{"headline":57447,"author":57612,"datePublished":57613,"@type":961},{"name":946,"@type":959},"2025-12-17T00:00:00-05:00",{"title":57447,"description":57606},"blog\u002Fwelcome-to-todovue.es",[57617,57618,57621],{"tag":946,"color":55611},{"tag":57619,"color":57620},"Offtopic","#605AD1",{"tag":55616,"color":55617},"QCC1KEhGX4J18VW5hhPy_dY_G47DK7o6kElWExWVHwg",[57624,60273,62785,65672,68416,69640,70772,73998,77103,78908,80587,83290,85871,88774,91571,94142,96591,98748,100798,102006,103100,103276,103398,104138,104791,105565,106270,107204,108046,108636,109170,109904,110563,112565,114476,116330,118038,118843,119515,120986,122323,125654,128838,129950,130942,132741,134450,137000,139363,141572,143651,144864,145948,147291,148539,149914,151207,152686,154057,155550,156909,158794,160482,161137,161685,161844,161958,162601],{"id":57625,"title":57626,"body":57627,"cover":26445,"coverAlt":60247,"date":26447,"description":60248,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":60250,"navigation":208,"path":60253,"schemaOrg":60254,"seo":60257,"series":26460,"seriesDescription":60258,"seriesOrder":294,"seriesTitle":60259,"slug":942,"stem":60260,"tags":60261,"__hash__":60272},"blog\u002Fblog\u002Fdirectives-vue-custom-directives-guide.en.md","Vue Directives: Custom Directives",{"type":8,"value":57628,"toc":60230},[57629,57633,57637,57644,57668,57678,57682,57688,57691,57708,57711,57721,57727,57762,57772,57776,57796,57800,57817,57821,57923,57927,57944,57950,58566,59005,59024,59028,59034,59179,59270,59302,59306,59766,60093,60175,60188,60192,60228],[11,57630,57632],{"id":57631},"custom-directives-in-vue-3","Custom Directives in Vue 3",[22,57634,57636],{"id":57635},"why-this-matters","Why This Matters",[15,57638,57639,57640,57643],{},"Custom directives let you encapsulate ",[3933,57641,57642],{},"imperative DOM manipulation"," that does not fit well in a component or a pure composable. They are especially useful for low-level behavior such as:",[33,57645,57646,57651,57656,57661],{},[36,57647,57648,57649,6219],{},"Autofocus (",[87,57650,23699],{},[36,57652,57653,57654,6219],{},"Keyboard shortcuts (",[87,57655,23705],{},[36,57657,57658,57659,6219],{},"Click outside to close (",[87,57660,23711],{},[36,57662,57663,57664,1025,57666,23719],{},"Integrating browser APIs or non-reactive libraries (",[87,57665,13761],{},[87,57667,13586],{},[15,57669,57670,57671,1025,57674,57677],{},"If directives are not designed carefully, it is easy to end up with ",[3933,57672,57673],{},"duplicated listeners",[3933,57675,57676],{},"memory leaks",", or repeated logic across multiple views.",[22,57679,57681],{"id":57680},"core-concept","Core Concept",[15,57683,57684,57685,1679],{},"A custom directive is an object (or shorthand function) with hooks that Vue runs on a ",[3933,57686,57687],{},"real DOM element",[15,57689,57690],{},"In Vue 3, a directive can expose these hooks (most commonly used):",[33,57692,57693,57698,57703],{},[36,57694,57695,57697],{},[87,57696,6393],{},": The element is already in the DOM (great for listeners and observers).",[36,57699,57700,57702],{},[87,57701,15037],{},": The component updated and you need to refresh behavior.",[36,57704,57705,57707],{},[87,57706,11276],{},": Cleanup for listeners, timers, observers, and more.",[15,57709,57710],{},"There are also useful before-hooks:",[33,57712,57713],{},[36,57714,57715,1025,57717,1025,57719],{},[87,57716,16604],{},[87,57718,15034],{},[87,57720,13472],{},[15,57722,57723,57724,57726],{},"The ",[87,57725,23776],{}," object gives you the current value, argument, and modifiers:",[33,57728,57729,57737,57746,57754],{},[36,57730,57731,57733,57734,4270],{},[87,57732,23784],{},": Current value (",[87,57735,57736],{},"v-my-directive=\"value\"",[36,57738,57739,57741,57742,21857,57744,4270],{},[87,57740,23793],{},": Previous value (available in ",[87,57743,15034],{},[87,57745,15037],{},[36,57747,57748,57750,57751,4270],{},[87,57749,23803],{},": Argument (",[87,57752,57753],{},"v-my-directive:delay=\"300\"",[36,57755,57756,57758,57759,4270],{},[87,57757,23812],{},": Modifiers (",[87,57760,57761],{},"v-my-directive.once.capture",[15,57763,57764,57765,57768,57769,1679],{},"Practical rule: use directives for ",[3933,57766,57767],{},"element behavior",", not ",[3933,57770,57771],{},"business state",[22,57773,57775],{"id":57774},"when-to-use","When To Use",[3035,57777,57778,57781,57789],{},[36,57779,57780],{},"When you need reusable imperative DOM logic across multiple components.",[36,57782,57783,57784,1025,57786,57788],{},"When integrating non-reactive APIs (",[87,57785,13761],{},[87,57787,13586],{},", third-party tooltips).",[36,57790,57791,57792,1025,57794,4270],{},"When you want a declarative template contract for a specific behavior (",[87,57793,23699],{},[87,57795,23711],{},[22,57797,57799],{"id":57798},"when-to-avoid","When To Avoid",[3035,57801,57802,57805,57814],{},[36,57803,57804],{},"When the real solution is a component (visual structure + state + events).",[36,57806,57807,57808,1025,57810,1025,57812,4270],{},"When native bindings or built-in directives already solve it (",[87,57809,23865],{},[87,57811,23868],{},[87,57813,23871],{},[36,57815,57816],{},"When trying to coordinate global state or complex data flow through a directive.",[22,57818,57820],{"id":57819},"common-mistakes","Common Mistakes",[3035,57822,57823,57843,57863,57883,57903],{},[36,57824,57825,57830],{},[3933,57826,57827,57828,1679],{},"Not cleaning up resources in ",[87,57829,11276],{},[33,57831,57832,57838],{},[36,57833,57834,57835,57837],{},"Why it happens: a listener is added in ",[87,57836,6393],{}," and never removed.",[36,57839,57840,57841,1679],{},"Fix: keep references (on the element or in a controlled closure) and always clean up in ",[87,57842,11276],{},[36,57844,57845,57848],{},[3933,57846,57847],{},"Overfitting a directive to a single case.",[33,57849,57850,57853],{},[36,57851,57852],{},"Why it happens: generic name, highly specific logic.",[36,57854,57855,57856,1025,57858,57860,57861,1679],{},"Fix: define a clear contract using ",[87,57857,2219],{},[87,57859,23916],{},", and ",[87,57862,23919],{},[36,57864,57865,57868],{},[3933,57866,57867],{},"Assuming a directive on a component will always target one stable DOM node.",[33,57869,57870,57873],{},[36,57871,57872],{},"Why it happens: expecting one root and attribute\u002Fdirective forwarding to always behave the same.",[36,57874,57875,57876,1025,57878,1025,57880,57882],{},"Fix: for low-level behavior, prefer concrete HTML elements (",[87,57877,2650],{},[87,57879,1242],{},[87,57881,507],{},"). If used on a component, verify it has a clear root and forwarding is not broken (multi-root and specific setups can surprise you).",[36,57884,57885,57888],{},[3933,57886,57887],{},"Capturing a callback once and never updating it.",[33,57889,57890,57898],{},[36,57891,57892,57893,57895,57896,1679],{},"Why it happens: listener registered in ",[87,57894,6393],{}," closes over the initial ",[87,57897,23784],{},[36,57899,57900,57901,1679],{},"Fix: store the “current” callback on the element and refresh it in ",[87,57902,15037],{},[36,57904,57905,57910],{},[3933,57906,57907,57908,1679],{},"Doing heavy work on every ",[87,57909,15037],{},[33,57911,57912,57915],{},[36,57913,57914],{},"Why it happens: no check between previous and current values.",[36,57916,57917,57918,57920,57921,4270],{},"Fix: exit early when appropriate (for example, compare ",[87,57919,23784],{}," and ",[87,57922,23793],{},[22,57924,57926],{"id":57925},"practical-examples","Practical Examples",[33,57928,57929,57934,57939],{},[36,57930,57931,57933],{},[87,57932,23699],{},": focus an input on mount.",[36,57935,57936,57938],{},[87,57937,23711],{},": close a menu or modal when clicking outside.",[36,57940,57941,57943],{},[87,57942,23999],{},": trigger callbacks when an element enters the viewport.",[3087,57945,57947,57949],{"id":57946},"v-click-outside-with-updatable-callback",[87,57948,23711],{}," (with updatable callback)",[154,57951,57953],{"className":156,"code":57952,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport type { Directive } from \"vue\";\nimport { ref } from \"vue\";\n\ntype ClickOutsideHandler = (event: MouseEvent) => void;\n\ntype ElWithClickOutside = HTMLElement & {\n  __clickOutsideHandler__?: (event: MouseEvent) => void;\n  __clickOutsideCallback__?: ClickOutsideHandler;\n};\n\nconst isOpen = ref(false);\n\nconst vClickOutside: Directive\u003CElWithClickOutside, ClickOutsideHandler> = {\n  mounted(el, binding) {\n    if (typeof binding.value !== \"function\") return;\n\n    \u002F\u002F Keep the current callback (important when it changes over time)\n    el.__clickOutsideCallback__ = binding.value;\n\n    const handler = (event: MouseEvent) => {\n      const target = event.target as Node | null;\n      if (!target) return;\n\n      \u002F\u002F If click is outside, call the latest callback\n      if (!el.contains(target)) {\n        el.__clickOutsideCallback__?.(event);\n      }\n    };\n\n    el.__clickOutsideHandler__ = handler;\n\n    \u002F\u002F Capture helps with overlays \u002F stopPropagation inside dropdowns\n    document.addEventListener(\"click\", handler, true);\n  },\n\n  updated(el, binding) {\n    \u002F\u002F Keep callback fresh if it changed\n    if (typeof binding.value === \"function\") {\n      el.__clickOutsideCallback__ = binding.value;\n    }\n  },\n\n  unmounted(el) {\n    if (el.__clickOutsideHandler__) {\n      document.removeEventListener(\"click\", el.__clickOutsideHandler__, true);\n    }\n    delete el.__clickOutsideHandler__;\n    delete el.__clickOutsideCallback__;\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dropdown-demo\">\n    \u003Cbutton type=\"button\" @click=\"isOpen = !isOpen\">Toggle menu\u003C\u002Fbutton>\n\n    \u003Cdiv v-if=\"isOpen\" v-click-outside=\"() => (isOpen = false)\">\n      \u003Cp>Panel open\u003C\u002Fp>\n      \u003Cp>Click outside to close.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,57954,57955,57971,57985,57997,58001,58025,58029,58043,58065,58075,58079,58083,58099,58103,58127,58141,58161,58165,58170,58178,58182,58204,58224,58238,58242,58247,58261,58269,58273,58277,58281,58289,58293,58298,58314,58318,58322,58336,58341,58357,58365,58369,58373,58377,58387,58393,58409,58413,58419,58425,58429,58433,58441,58445,58453,58467,58492,58496,58516,58529,58542,58550,58558],{"__ignoreMap":163},[167,57956,57957,57959,57961,57963,57965,57967,57969],{"class":169,"line":170},[167,57958,174],{"class":173},[167,57960,178],{"class":177},[167,57962,182],{"class":181},[167,57964,1050],{"class":181},[167,57966,267],{"class":173},[167,57968,1055],{"class":201},[167,57970,185],{"class":173},[167,57972,57973,57975,57977,57979,57981,57983],{"class":169,"line":188},[167,57974,192],{"class":191},[167,57976,1174],{"class":191},[167,57978,24036],{"class":173},[167,57980,198],{"class":191},[167,57982,24041],{"class":201},[167,57984,24044],{"class":173},[167,57986,57987,57989,57991,57993,57995],{"class":169,"line":205},[167,57988,192],{"class":191},[167,57990,195],{"class":173},[167,57992,198],{"class":191},[167,57994,24041],{"class":201},[167,57996,24044],{"class":173},[167,57998,57999],{"class":169,"line":160},[167,58000,209],{"emptyLinePlaceholder":208},[167,58002,58003,58005,58007,58009,58011,58013,58015,58017,58019,58021,58023],{"class":169,"line":238},[167,58004,569],{"class":191},[167,58006,24067],{"class":181},[167,58008,223],{"class":191},[167,58010,2526],{"class":173},[167,58012,4195],{"class":254},[167,58014,583],{"class":191},[167,58016,24078],{"class":181},[167,58018,693],{"class":173},[167,58020,639],{"class":191},[167,58022,24085],{"class":219},[167,58024,24044],{"class":173},[167,58026,58027],{"class":169,"line":243},[167,58028,209],{"emptyLinePlaceholder":208},[167,58030,58031,58033,58035,58037,58039,58041],{"class":169,"line":261},[167,58032,569],{"class":191},[167,58034,24098],{"class":181},[167,58036,223],{"class":191},[167,58038,24103],{"class":181},[167,58040,24106],{"class":191},[167,58042,1905],{"class":173},[167,58044,58045,58047,58049,58051,58053,58055,58057,58059,58061,58063],{"class":169,"line":273},[167,58046,24113],{"class":181},[167,58048,24116],{"class":191},[167,58050,2526],{"class":173},[167,58052,4195],{"class":254},[167,58054,583],{"class":191},[167,58056,24078],{"class":181},[167,58058,693],{"class":173},[167,58060,639],{"class":191},[167,58062,24085],{"class":219},[167,58064,24044],{"class":173},[167,58066,58067,58069,58071,58073],{"class":169,"line":279},[167,58068,24137],{"class":254},[167,58070,24116],{"class":191},[167,58072,24067],{"class":181},[167,58074,24044],{"class":173},[167,58076,58077],{"class":169,"line":289},[167,58078,24148],{"class":173},[167,58080,58081],{"class":169,"line":294},[167,58082,209],{"emptyLinePlaceholder":208},[167,58084,58085,58087,58089,58091,58093,58095,58097],{"class":169,"line":304},[167,58086,216],{"class":191},[167,58088,5523],{"class":219},[167,58090,223],{"class":191},[167,58092,226],{"class":181},[167,58094,229],{"class":173},[167,58096,3392],{"class":219},[167,58098,24169],{"class":173},[167,58100,58101],{"class":169,"line":313},[167,58102,209],{"emptyLinePlaceholder":208},[167,58104,58105,58107,58109,58111,58113,58115,58117,58119,58121,58123,58125],{"class":169,"line":161},[167,58106,216],{"class":191},[167,58108,24180],{"class":219},[167,58110,583],{"class":191},[167,58112,24185],{"class":181},[167,58114,174],{"class":173},[167,58116,24190],{"class":181},[167,58118,1025],{"class":173},[167,58120,24195],{"class":181},[167,58122,24198],{"class":173},[167,58124,267],{"class":191},[167,58126,1905],{"class":173},[167,58128,58129,58131,58133,58135,58137,58139],{"class":169,"line":335},[167,58130,12749],{"class":181},[167,58132,229],{"class":173},[167,58134,24211],{"class":254},[167,58136,1025],{"class":173},[167,58138,23776],{"class":254},[167,58140,258],{"class":173},[167,58142,58143,58145,58147,58149,58151,58153,58155,58157,58159],{"class":169,"line":341},[167,58144,7419],{"class":191},[167,58146,2526],{"class":173},[167,58148,11757],{"class":191},[167,58150,24228],{"class":173},[167,58152,701],{"class":191},[167,58154,24233],{"class":201},[167,58156,693],{"class":173},[167,58158,24238],{"class":191},[167,58160,24044],{"class":173},[167,58162,58163],{"class":169,"line":489},[167,58164,209],{"emptyLinePlaceholder":208},[167,58166,58167],{"class":169,"line":495},[167,58168,58169],{"class":18662},"    \u002F\u002F Keep the current callback (important when it changes over time)\n",[167,58171,58172,58174,58176],{"class":169,"line":501},[167,58173,24254],{"class":173},[167,58175,267],{"class":191},[167,58177,24259],{"class":173},[167,58179,58180],{"class":169,"line":512},[167,58181,209],{"emptyLinePlaceholder":208},[167,58183,58184,58186,58188,58190,58192,58194,58196,58198,58200,58202],{"class":169,"line":781},[167,58185,8266],{"class":191},[167,58187,24270],{"class":181},[167,58189,223],{"class":191},[167,58191,2526],{"class":173},[167,58193,4195],{"class":254},[167,58195,583],{"class":191},[167,58197,24078],{"class":181},[167,58199,693],{"class":173},[167,58201,639],{"class":191},[167,58203,1905],{"class":173},[167,58205,58206,58208,58210,58212,58214,58216,58218,58220,58222],{"class":169,"line":786},[167,58207,4435],{"class":191},[167,58209,24293],{"class":219},[167,58211,223],{"class":191},[167,58213,24298],{"class":173},[167,58215,6692],{"class":191},[167,58217,24303],{"class":181},[167,58219,659],{"class":191},[167,58221,6567],{"class":219},[167,58223,24044],{"class":173},[167,58225,58226,58228,58230,58232,58234,58236],{"class":169,"line":2678},[167,58227,7261],{"class":191},[167,58229,2526],{"class":173},[167,58231,6641],{"class":191},[167,58233,24320],{"class":173},[167,58235,24238],{"class":191},[167,58237,24044],{"class":173},[167,58239,58240],{"class":169,"line":2692},[167,58241,209],{"emptyLinePlaceholder":208},[167,58243,58244],{"class":169,"line":3575},[167,58245,58246],{"class":18662},"      \u002F\u002F If click is outside, call the latest callback\n",[167,58248,58249,58251,58253,58255,58257,58259],{"class":169,"line":5028},[167,58250,7261],{"class":191},[167,58252,2526],{"class":173},[167,58254,6641],{"class":191},[167,58256,24344],{"class":173},[167,58258,24347],{"class":181},[167,58260,24350],{"class":173},[167,58262,58263,58265,58267],{"class":169,"line":5037},[167,58264,24355],{"class":173},[167,58266,24358],{"class":181},[167,58268,24361],{"class":173},[167,58270,58271],{"class":169,"line":5046},[167,58272,7287],{"class":173},[167,58274,58275],{"class":169,"line":6756},[167,58276,24370],{"class":173},[167,58278,58279],{"class":169,"line":6778},[167,58280,209],{"emptyLinePlaceholder":208},[167,58282,58283,58285,58287],{"class":169,"line":6783},[167,58284,24379],{"class":173},[167,58286,267],{"class":191},[167,58288,24384],{"class":173},[167,58290,58291],{"class":169,"line":6788},[167,58292,209],{"emptyLinePlaceholder":208},[167,58294,58295],{"class":169,"line":6793},[167,58296,58297],{"class":18662},"    \u002F\u002F Capture helps with overlays \u002F stopPropagation inside dropdowns\n",[167,58299,58300,58302,58304,58306,58308,58310,58312],{"class":169,"line":6809},[167,58301,24398],{"class":173},[167,58303,1501],{"class":181},[167,58305,229],{"class":173},[167,58307,24405],{"class":201},[167,58309,24408],{"class":173},[167,58311,390],{"class":219},[167,58313,24169],{"class":173},[167,58315,58316],{"class":169,"line":6824},[167,58317,398],{"class":173},[167,58319,58320],{"class":169,"line":6829},[167,58321,209],{"emptyLinePlaceholder":208},[167,58323,58324,58326,58328,58330,58332,58334],{"class":169,"line":6836},[167,58325,16259],{"class":181},[167,58327,229],{"class":173},[167,58329,24211],{"class":254},[167,58331,1025],{"class":173},[167,58333,23776],{"class":254},[167,58335,258],{"class":173},[167,58337,58338],{"class":169,"line":6845},[167,58339,58340],{"class":18662},"    \u002F\u002F Keep callback fresh if it changed\n",[167,58342,58343,58345,58347,58349,58351,58353,58355],{"class":169,"line":6854},[167,58344,7419],{"class":191},[167,58346,2526],{"class":173},[167,58348,11757],{"class":191},[167,58350,24228],{"class":173},[167,58352,2550],{"class":191},[167,58354,24233],{"class":201},[167,58356,258],{"class":173},[167,58358,58359,58361,58363],{"class":169,"line":6861},[167,58360,24460],{"class":173},[167,58362,267],{"class":191},[167,58364,24259],{"class":173},[167,58366,58367],{"class":169,"line":6879},[167,58368,4049],{"class":173},[167,58370,58371],{"class":169,"line":6884},[167,58372,398],{"class":173},[167,58374,58375],{"class":169,"line":6889},[167,58376,209],{"emptyLinePlaceholder":208},[167,58378,58379,58381,58383,58385],{"class":169,"line":6898},[167,58380,14622],{"class":181},[167,58382,229],{"class":173},[167,58384,24211],{"class":254},[167,58386,258],{"class":173},[167,58388,58389,58391],{"class":169,"line":6903},[167,58390,7419],{"class":191},[167,58392,24493],{"class":173},[167,58394,58395,58397,58399,58401,58403,58405,58407],{"class":169,"line":6912},[167,58396,24498],{"class":173},[167,58398,1524],{"class":181},[167,58400,229],{"class":173},[167,58402,24405],{"class":201},[167,58404,24507],{"class":173},[167,58406,390],{"class":219},[167,58408,24169],{"class":173},[167,58410,58411],{"class":169,"line":6928},[167,58412,4049],{"class":173},[167,58414,58415,58417],{"class":169,"line":6949},[167,58416,24520],{"class":191},[167,58418,24523],{"class":173},[167,58420,58421,58423],{"class":169,"line":6954},[167,58422,24520],{"class":191},[167,58424,24530],{"class":173},[167,58426,58427],{"class":169,"line":6975},[167,58428,398],{"class":173},[167,58430,58431],{"class":169,"line":6989},[167,58432,24148],{"class":173},[167,58434,58435,58437,58439],{"class":169,"line":7003},[167,58436,282],{"class":173},[167,58438,178],{"class":177},[167,58440,185],{"class":173},[167,58442,58443],{"class":169,"line":7017},[167,58444,209],{"emptyLinePlaceholder":208},[167,58446,58447,58449,58451],{"class":169,"line":7026},[167,58448,174],{"class":173},[167,58450,299],{"class":177},[167,58452,185],{"class":173},[167,58454,58455,58457,58459,58461,58463,58465],{"class":169,"line":7031},[167,58456,307],{"class":173},[167,58458,10117],{"class":177},[167,58460,1245],{"class":181},[167,58462,267],{"class":173},[167,58464,24571],{"class":201},[167,58466,185],{"class":173},[167,58468,58469,58471,58473,58475,58477,58479,58481,58483,58485,58488,58490],{"class":169,"line":7048},[167,58470,1257],{"class":173},[167,58472,507],{"class":177},[167,58474,1174],{"class":181},[167,58476,267],{"class":173},[167,58478,1179],{"class":201},[167,58480,1182],{"class":181},[167,58482,267],{"class":173},[167,58484,24592],{"class":201},[167,58486,58487],{"class":173},">Toggle menu\u003C\u002F",[167,58489,507],{"class":177},[167,58491,185],{"class":173},[167,58493,58494],{"class":169,"line":7057},[167,58495,209],{"emptyLinePlaceholder":208},[167,58497,58498,58500,58502,58504,58506,58508,58510,58512,58514],{"class":169,"line":7555},[167,58499,1257],{"class":173},[167,58501,1242],{"class":177},[167,58503,5694],{"class":181},[167,58505,267],{"class":173},[167,58507,5699],{"class":201},[167,58509,24618],{"class":181},[167,58511,267],{"class":173},[167,58513,24623],{"class":201},[167,58515,185],{"class":173},[167,58517,58518,58520,58522,58525,58527],{"class":169,"line":7560},[167,58519,1268],{"class":173},[167,58521,15],{"class":177},[167,58523,58524],{"class":173},">Panel open\u003C\u002F",[167,58526,15],{"class":177},[167,58528,185],{"class":173},[167,58530,58531,58533,58535,58538,58540],{"class":169,"line":7579},[167,58532,1268],{"class":173},[167,58534,15],{"class":177},[167,58536,58537],{"class":173},">Click outside to close.\u003C\u002F",[167,58539,15],{"class":177},[167,58541,185],{"class":173},[167,58543,58544,58546,58548],{"class":169,"line":7592},[167,58545,1292],{"class":173},[167,58547,1242],{"class":177},[167,58549,185],{"class":173},[167,58551,58552,58554,58556],{"class":169,"line":7605},[167,58553,504],{"class":173},[167,58555,10117],{"class":177},[167,58557,185],{"class":173},[167,58559,58560,58562,58564],{"class":169,"line":7618},[167,58561,282],{"class":173},[167,58563,299],{"class":177},[167,58565,185],{"class":173},[154,58567,58569],{"className":156,"code":58568,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: \"ClickOutsideExample\",\n  data() {\n    return {\n      isOpen: false,\n    };\n  },\n  directives: {\n    clickOutside: {\n      mounted(el, binding) {\n        if (typeof binding.value !== \"function\") return;\n\n        el.__clickOutsideCallback__ = binding.value;\n\n        el.__clickOutsideHandler__ = (event) => {\n          const target = event.target;\n          if (target && !el.contains(target)) {\n            el.__clickOutsideCallback__?.(event);\n          }\n        };\n\n        document.addEventListener(\"click\", el.__clickOutsideHandler__, true);\n      },\n      updated(el, binding) {\n        if (typeof binding.value === \"function\") {\n          el.__clickOutsideCallback__ = binding.value;\n        }\n      },\n      unmounted(el) {\n        if (el.__clickOutsideHandler__) {\n          document.removeEventListener(\"click\", el.__clickOutsideHandler__, true);\n        }\n        delete el.__clickOutsideHandler__;\n        delete el.__clickOutsideCallback__;\n      },\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dropdown-demo\">\n    \u003Cbutton type=\"button\" @click=\"isOpen = !isOpen\">Toggle menu\u003C\u002Fbutton>\n\n    \u003Cdiv v-if=\"isOpen\" v-click-outside=\"() => (isOpen = false)\">\n      \u003Cp>Panel open\u003C\u002Fp>\n      \u003Cp>Click outside to close.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,58570,58571,58579,58587,58595,58601,58607,58615,58619,58623,58627,58631,58645,58665,58669,58677,58681,58699,58709,58725,58733,58737,58741,58745,58761,58765,58779,58795,58803,58807,58811,58821,58827,58843,58847,58853,58859,58863,58867,58871,58875,58883,58887,58895,58909,58933,58937,58957,58969,58981,58989,58997],{"__ignoreMap":163},[167,58572,58573,58575,58577],{"class":169,"line":170},[167,58574,174],{"class":173},[167,58576,178],{"class":177},[167,58578,185],{"class":173},[167,58580,58581,58583,58585],{"class":169,"line":188},[167,58582,608],{"class":191},[167,58584,3991],{"class":191},[167,58586,1905],{"class":173},[167,58588,58589,58591,58593],{"class":169,"line":205},[167,58590,4398],{"class":173},[167,58592,24703],{"class":201},[167,58594,393],{"class":173},[167,58596,58597,58599],{"class":169,"line":160},[167,58598,7176],{"class":181},[167,58600,763],{"class":173},[167,58602,58603,58605],{"class":169,"line":238},[167,58604,1937],{"class":191},[167,58606,1905],{"class":173},[167,58608,58609,58611,58613],{"class":169,"line":243},[167,58610,24722],{"class":173},[167,58612,3392],{"class":219},[167,58614,393],{"class":173},[167,58616,58617],{"class":169,"line":261},[167,58618,24370],{"class":173},[167,58620,58621],{"class":169,"line":273},[167,58622,398],{"class":173},[167,58624,58625],{"class":169,"line":279},[167,58626,24739],{"class":173},[167,58628,58629],{"class":169,"line":289},[167,58630,24744],{"class":173},[167,58632,58633,58635,58637,58639,58641,58643],{"class":169,"line":294},[167,58634,24749],{"class":181},[167,58636,229],{"class":173},[167,58638,24211],{"class":254},[167,58640,1025],{"class":173},[167,58642,23776],{"class":254},[167,58644,258],{"class":173},[167,58646,58647,58649,58651,58653,58655,58657,58659,58661,58663],{"class":169,"line":304},[167,58648,14796],{"class":191},[167,58650,2526],{"class":173},[167,58652,11757],{"class":191},[167,58654,24228],{"class":173},[167,58656,701],{"class":191},[167,58658,24233],{"class":201},[167,58660,693],{"class":173},[167,58662,24238],{"class":191},[167,58664,24044],{"class":173},[167,58666,58667],{"class":169,"line":313},[167,58668,209],{"emptyLinePlaceholder":208},[167,58670,58671,58673,58675],{"class":169,"line":161},[167,58672,24788],{"class":173},[167,58674,267],{"class":191},[167,58676,24259],{"class":173},[167,58678,58679],{"class":169,"line":335},[167,58680,209],{"emptyLinePlaceholder":208},[167,58682,58683,58685,58687,58689,58691,58693,58695,58697],{"class":169,"line":341},[167,58684,24355],{"class":173},[167,58686,24803],{"class":181},[167,58688,223],{"class":191},[167,58690,2526],{"class":173},[167,58692,4195],{"class":254},[167,58694,693],{"class":173},[167,58696,639],{"class":191},[167,58698,1905],{"class":173},[167,58700,58701,58703,58705,58707],{"class":169,"line":489},[167,58702,24820],{"class":191},[167,58704,24293],{"class":219},[167,58706,223],{"class":191},[167,58708,24827],{"class":173},[167,58710,58711,58713,58715,58717,58719,58721,58723],{"class":169,"line":495},[167,58712,24832],{"class":191},[167,58714,24835],{"class":173},[167,58716,8339],{"class":191},[167,58718,5625],{"class":191},[167,58720,24344],{"class":173},[167,58722,24347],{"class":181},[167,58724,24350],{"class":173},[167,58726,58727,58729,58731],{"class":169,"line":501},[167,58728,24850],{"class":173},[167,58730,24358],{"class":181},[167,58732,24361],{"class":173},[167,58734,58735],{"class":169,"line":512},[167,58736,24859],{"class":173},[167,58738,58739],{"class":169,"line":781},[167,58740,24864],{"class":173},[167,58742,58743],{"class":169,"line":786},[167,58744,209],{"emptyLinePlaceholder":208},[167,58746,58747,58749,58751,58753,58755,58757,58759],{"class":169,"line":2678},[167,58748,24873],{"class":173},[167,58750,1501],{"class":181},[167,58752,229],{"class":173},[167,58754,24405],{"class":201},[167,58756,24507],{"class":173},[167,58758,390],{"class":219},[167,58760,24169],{"class":173},[167,58762,58763],{"class":169,"line":2692},[167,58764,8642],{"class":173},[167,58766,58767,58769,58771,58773,58775,58777],{"class":169,"line":3575},[167,58768,24894],{"class":181},[167,58770,229],{"class":173},[167,58772,24211],{"class":254},[167,58774,1025],{"class":173},[167,58776,23776],{"class":254},[167,58778,258],{"class":173},[167,58780,58781,58783,58785,58787,58789,58791,58793],{"class":169,"line":5028},[167,58782,14796],{"class":191},[167,58784,2526],{"class":173},[167,58786,11757],{"class":191},[167,58788,24228],{"class":173},[167,58790,2550],{"class":191},[167,58792,24233],{"class":201},[167,58794,258],{"class":173},[167,58796,58797,58799,58801],{"class":169,"line":5037},[167,58798,24925],{"class":173},[167,58800,267],{"class":191},[167,58802,24259],{"class":173},[167,58804,58805],{"class":169,"line":5046},[167,58806,14822],{"class":173},[167,58808,58809],{"class":169,"line":6756},[167,58810,8642],{"class":173},[167,58812,58813,58815,58817,58819],{"class":169,"line":6778},[167,58814,24942],{"class":181},[167,58816,229],{"class":173},[167,58818,24211],{"class":254},[167,58820,258],{"class":173},[167,58822,58823,58825],{"class":169,"line":6783},[167,58824,14796],{"class":191},[167,58826,24493],{"class":173},[167,58828,58829,58831,58833,58835,58837,58839,58841],{"class":169,"line":6788},[167,58830,24959],{"class":173},[167,58832,1524],{"class":181},[167,58834,229],{"class":173},[167,58836,24405],{"class":201},[167,58838,24507],{"class":173},[167,58840,390],{"class":219},[167,58842,24169],{"class":173},[167,58844,58845],{"class":169,"line":6793},[167,58846,14822],{"class":173},[167,58848,58849,58851],{"class":169,"line":6809},[167,58850,24980],{"class":191},[167,58852,24523],{"class":173},[167,58854,58855,58857],{"class":169,"line":6824},[167,58856,24980],{"class":191},[167,58858,24530],{"class":173},[167,58860,58861],{"class":169,"line":6829},[167,58862,8642],{"class":173},[167,58864,58865],{"class":169,"line":6836},[167,58866,755],{"class":173},[167,58868,58869],{"class":169,"line":6845},[167,58870,398],{"class":173},[167,58872,58873],{"class":169,"line":6854},[167,58874,24148],{"class":173},[167,58876,58877,58879,58881],{"class":169,"line":6861},[167,58878,282],{"class":173},[167,58880,178],{"class":177},[167,58882,185],{"class":173},[167,58884,58885],{"class":169,"line":6879},[167,58886,209],{"emptyLinePlaceholder":208},[167,58888,58889,58891,58893],{"class":169,"line":6884},[167,58890,174],{"class":173},[167,58892,299],{"class":177},[167,58894,185],{"class":173},[167,58896,58897,58899,58901,58903,58905,58907],{"class":169,"line":6889},[167,58898,307],{"class":173},[167,58900,10117],{"class":177},[167,58902,1245],{"class":181},[167,58904,267],{"class":173},[167,58906,24571],{"class":201},[167,58908,185],{"class":173},[167,58910,58911,58913,58915,58917,58919,58921,58923,58925,58927,58929,58931],{"class":169,"line":6898},[167,58912,1257],{"class":173},[167,58914,507],{"class":177},[167,58916,1174],{"class":181},[167,58918,267],{"class":173},[167,58920,1179],{"class":201},[167,58922,1182],{"class":181},[167,58924,267],{"class":173},[167,58926,24592],{"class":201},[167,58928,58487],{"class":173},[167,58930,507],{"class":177},[167,58932,185],{"class":173},[167,58934,58935],{"class":169,"line":6903},[167,58936,209],{"emptyLinePlaceholder":208},[167,58938,58939,58941,58943,58945,58947,58949,58951,58953,58955],{"class":169,"line":6912},[167,58940,1257],{"class":173},[167,58942,1242],{"class":177},[167,58944,5694],{"class":181},[167,58946,267],{"class":173},[167,58948,5699],{"class":201},[167,58950,24618],{"class":181},[167,58952,267],{"class":173},[167,58954,24623],{"class":201},[167,58956,185],{"class":173},[167,58958,58959,58961,58963,58965,58967],{"class":169,"line":6928},[167,58960,1268],{"class":173},[167,58962,15],{"class":177},[167,58964,58524],{"class":173},[167,58966,15],{"class":177},[167,58968,185],{"class":173},[167,58970,58971,58973,58975,58977,58979],{"class":169,"line":6949},[167,58972,1268],{"class":173},[167,58974,15],{"class":177},[167,58976,58537],{"class":173},[167,58978,15],{"class":177},[167,58980,185],{"class":173},[167,58982,58983,58985,58987],{"class":169,"line":6954},[167,58984,1292],{"class":173},[167,58986,1242],{"class":177},[167,58988,185],{"class":173},[167,58990,58991,58993,58995],{"class":169,"line":6975},[167,58992,504],{"class":173},[167,58994,10117],{"class":177},[167,58996,185],{"class":173},[167,58998,58999,59001,59003],{"class":169,"line":6989},[167,59000,282],{"class":173},[167,59002,299],{"class":177},[167,59004,185],{"class":173},[5367,59006,59007],{},[15,59008,59009,59010,59012,59013,59015,59016,59018,59019,59021,59022,4270],{},"In ",[87,59011,1008],{},", any ",[3933,59014,25144],{}," variable that starts with ",[87,59017,25148],{}," can be used as a directive (",[87,59020,25152],{}," -> ",[87,59023,23711],{},[22,59025,59027],{"id":59026},"more-useful-examples","More Useful Examples",[3087,59029,59031,59033],{"id":59030},"v-autofocus-basic-and-practical",[87,59032,23699],{}," (basic and practical)",[154,59035,59037],{"className":542,"code":59036,"filename":25168,"language":546,"meta":163,"style":163},"import type { Directive } from \"vue\";\n\nexport const vAutofocus: Directive\u003CHTMLElement, boolean | undefined> = {\n  mounted(el, binding) {\n    \u002F\u002F v-autofocus=\"false\" disables the behavior\n    if (binding.value === false) return;\n\n    \u002F\u002F Usually expected for inputs\u002Ftextareas\n    if (typeof (el as any).focus === \"function\") {\n      (el as any).focus();\n    }\n  },\n};\n",[87,59038,59039,59053,59057,59087,59101,59106,59122,59126,59131,59153,59167,59171,59175],{"__ignoreMap":163},[167,59040,59041,59043,59045,59047,59049,59051],{"class":169,"line":170},[167,59042,192],{"class":191},[167,59044,1174],{"class":191},[167,59046,24036],{"class":173},[167,59048,198],{"class":191},[167,59050,24041],{"class":201},[167,59052,24044],{"class":173},[167,59054,59055],{"class":169,"line":188},[167,59056,209],{"emptyLinePlaceholder":208},[167,59058,59059,59061,59063,59065,59067,59069,59071,59073,59075,59077,59079,59081,59083,59085],{"class":169,"line":205},[167,59060,608],{"class":191},[167,59062,611],{"class":191},[167,59064,25197],{"class":219},[167,59066,583],{"class":191},[167,59068,24185],{"class":181},[167,59070,174],{"class":173},[167,59072,25206],{"class":181},[167,59074,1025],{"class":173},[167,59076,25211],{"class":219},[167,59078,659],{"class":191},[167,59080,662],{"class":219},[167,59082,24198],{"class":173},[167,59084,267],{"class":191},[167,59086,1905],{"class":173},[167,59088,59089,59091,59093,59095,59097,59099],{"class":169,"line":160},[167,59090,12749],{"class":181},[167,59092,229],{"class":173},[167,59094,24211],{"class":254},[167,59096,1025],{"class":173},[167,59098,23776],{"class":254},[167,59100,258],{"class":173},[167,59102,59103],{"class":169,"line":238},[167,59104,59105],{"class":18662},"    \u002F\u002F v-autofocus=\"false\" disables the behavior\n",[167,59107,59108,59110,59112,59114,59116,59118,59120],{"class":169,"line":243},[167,59109,7419],{"class":191},[167,59111,25247],{"class":173},[167,59113,2550],{"class":191},[167,59115,5777],{"class":219},[167,59117,693],{"class":173},[167,59119,24238],{"class":191},[167,59121,24044],{"class":173},[167,59123,59124],{"class":169,"line":261},[167,59125,209],{"emptyLinePlaceholder":208},[167,59127,59128],{"class":169,"line":273},[167,59129,59130],{"class":18662},"    \u002F\u002F Usually expected for inputs\u002Ftextareas\n",[167,59132,59133,59135,59137,59139,59141,59143,59145,59147,59149,59151],{"class":169,"line":279},[167,59134,7419],{"class":191},[167,59136,2526],{"class":173},[167,59138,11757],{"class":191},[167,59140,25277],{"class":173},[167,59142,6692],{"class":191},[167,59144,25282],{"class":219},[167,59146,25285],{"class":173},[167,59148,2550],{"class":191},[167,59150,24233],{"class":201},[167,59152,258],{"class":173},[167,59154,59155,59157,59159,59161,59163,59165],{"class":169,"line":289},[167,59156,25296],{"class":173},[167,59158,6692],{"class":191},[167,59160,25282],{"class":219},[167,59162,4270],{"class":173},[167,59164,17408],{"class":181},[167,59166,25307],{"class":173},[167,59168,59169],{"class":169,"line":294},[167,59170,4049],{"class":173},[167,59172,59173],{"class":169,"line":304},[167,59174,398],{"class":173},[167,59176,59177],{"class":169,"line":313},[167,59178,24148],{"class":173},[154,59180,59182],{"className":2879,"code":59181,"filename":25323,"language":2882,"meta":163,"style":163},"export const vAutofocus = {\n  mounted(el, binding) {\n    \u002F\u002F v-autofocus=\"false\" disables the behavior\n    if (binding.value === false) return;\n    \u002F\u002F Usually expected for inputs\u002Ftextareas\n    if (typeof el.focus === \"function\") {\n      el.focus();\n    }\n  },\n};\n",[87,59183,59184,59196,59210,59214,59230,59234,59250,59258,59262,59266],{"__ignoreMap":163},[167,59185,59186,59188,59190,59192,59194],{"class":169,"line":170},[167,59187,608],{"class":191},[167,59189,611],{"class":191},[167,59191,25197],{"class":219},[167,59193,223],{"class":191},[167,59195,1905],{"class":173},[167,59197,59198,59200,59202,59204,59206,59208],{"class":169,"line":188},[167,59199,12749],{"class":181},[167,59201,229],{"class":173},[167,59203,24211],{"class":254},[167,59205,1025],{"class":173},[167,59207,23776],{"class":254},[167,59209,258],{"class":173},[167,59211,59212],{"class":169,"line":205},[167,59213,59105],{"class":18662},[167,59215,59216,59218,59220,59222,59224,59226,59228],{"class":169,"line":160},[167,59217,7419],{"class":191},[167,59219,25247],{"class":173},[167,59221,2550],{"class":191},[167,59223,5777],{"class":219},[167,59225,693],{"class":173},[167,59227,24238],{"class":191},[167,59229,24044],{"class":173},[167,59231,59232],{"class":169,"line":238},[167,59233,59130],{"class":18662},[167,59235,59236,59238,59240,59242,59244,59246,59248],{"class":169,"line":243},[167,59237,7419],{"class":191},[167,59239,2526],{"class":173},[167,59241,11757],{"class":191},[167,59243,25386],{"class":173},[167,59245,2550],{"class":191},[167,59247,24233],{"class":201},[167,59249,258],{"class":173},[167,59251,59252,59254,59256],{"class":169,"line":261},[167,59253,25397],{"class":173},[167,59255,17408],{"class":181},[167,59257,25307],{"class":173},[167,59259,59260],{"class":169,"line":273},[167,59261,4049],{"class":173},[167,59263,59264],{"class":169,"line":279},[167,59265,398],{"class":173},[167,59267,59268],{"class":169,"line":289},[167,59269,24148],{"class":173},[154,59271,59272],{"className":156,"code":25416,"filename":15284,"language":162,"meta":163,"style":163},[87,59273,59274,59284],{"__ignoreMap":163},[167,59275,59276,59278,59280,59282],{"class":169,"line":170},[167,59277,174],{"class":173},[167,59279,2650],{"class":177},[167,59281,25427],{"class":181},[167,59283,5325],{"class":173},[167,59285,59286,59288,59290,59292,59294,59296,59298,59300],{"class":169,"line":188},[167,59287,174],{"class":173},[167,59289,2650],{"class":177},[167,59291,25427],{"class":181},[167,59293,267],{"class":173},[167,59295,5080],{"class":201},[167,59297,25444],{"class":173},[167,59299,5080],{"class":201},[167,59301,5325],{"class":173},[3087,59303,59304,25454],{"id":25451},[87,59305,23999],{},[154,59307,59309],{"className":542,"code":59308,"filename":25168,"language":546,"meta":163,"style":163},"import type { Directive } from \"vue\";\n\ntype IntersectValue = {\n  onEnter?: (entry: IntersectionObserverEntry) => void;\n  onLeave?: (entry: IntersectionObserverEntry) => void;\n  options?: IntersectionObserverInit;\n};\n\ntype ElWithObserver = HTMLElement & { __io__?: IntersectionObserver };\n\nexport const vIntersect: Directive\u003CElWithObserver, IntersectValue> = {\n  mounted(el, binding) {\n    const { onEnter, onLeave, options } = binding.value ?? {};\n\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n\n    io.observe(el);\n    el.__io__ = io;\n  },\n  updated(el, binding) {\n    \u002F\u002F If options change dynamically, recreating the observer is usually safest\n    \u002F\u002F (micro-optimization: only recreate when values truly changed)\n    \u002F\u002F Keeping it explicit here:\n    el.__io__?.disconnect();\n    delete el.__io__;\n    const { onEnter, onLeave, options } = binding.value ?? {};\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n    io.observe(el);\n    el.__io__ = io;\n  },\n  unmounted(el) {\n    el.__io__?.disconnect();\n    delete el.__io__;\n  },\n};\n",[87,59310,59311,59325,59329,59339,59361,59383,59393,59397,59401,59423,59427,59453,59467,59493,59497,59519,59533,59543,59551,59555,59559,59563,59571,59579,59583,59597,59602,59607,59612,59620,59626,59652,59674,59688,59698,59706,59710,59714,59722,59730,59734,59744,59752,59758,59762],{"__ignoreMap":163},[167,59312,59313,59315,59317,59319,59321,59323],{"class":169,"line":170},[167,59314,192],{"class":191},[167,59316,1174],{"class":191},[167,59318,24036],{"class":173},[167,59320,198],{"class":191},[167,59322,24041],{"class":201},[167,59324,24044],{"class":173},[167,59326,59327],{"class":169,"line":188},[167,59328,209],{"emptyLinePlaceholder":208},[167,59330,59331,59333,59335,59337],{"class":169,"line":205},[167,59332,569],{"class":191},[167,59334,25484],{"class":181},[167,59336,223],{"class":191},[167,59338,1905],{"class":173},[167,59340,59341,59343,59345,59347,59349,59351,59353,59355,59357,59359],{"class":169,"line":160},[167,59342,25493],{"class":181},[167,59344,24116],{"class":191},[167,59346,2526],{"class":173},[167,59348,25500],{"class":254},[167,59350,583],{"class":191},[167,59352,25505],{"class":181},[167,59354,693],{"class":173},[167,59356,639],{"class":191},[167,59358,24085],{"class":219},[167,59360,24044],{"class":173},[167,59362,59363,59365,59367,59369,59371,59373,59375,59377,59379,59381],{"class":169,"line":238},[167,59364,25518],{"class":181},[167,59366,24116],{"class":191},[167,59368,2526],{"class":173},[167,59370,25500],{"class":254},[167,59372,583],{"class":191},[167,59374,25505],{"class":181},[167,59376,693],{"class":173},[167,59378,639],{"class":191},[167,59380,24085],{"class":219},[167,59382,24044],{"class":173},[167,59384,59385,59387,59389,59391],{"class":169,"line":243},[167,59386,25541],{"class":254},[167,59388,24116],{"class":191},[167,59390,25546],{"class":181},[167,59392,24044],{"class":173},[167,59394,59395],{"class":169,"line":261},[167,59396,24148],{"class":173},[167,59398,59399],{"class":169,"line":273},[167,59400,209],{"emptyLinePlaceholder":208},[167,59402,59403,59405,59407,59409,59411,59413,59415,59417,59419,59421],{"class":169,"line":279},[167,59404,569],{"class":191},[167,59406,25563],{"class":181},[167,59408,223],{"class":191},[167,59410,24103],{"class":181},[167,59412,24106],{"class":191},[167,59414,577],{"class":173},[167,59416,25574],{"class":254},[167,59418,24116],{"class":191},[167,59420,25579],{"class":181},[167,59422,25582],{"class":173},[167,59424,59425],{"class":169,"line":289},[167,59426,209],{"emptyLinePlaceholder":208},[167,59428,59429,59431,59433,59435,59437,59439,59441,59443,59445,59447,59449,59451],{"class":169,"line":294},[167,59430,608],{"class":191},[167,59432,611],{"class":191},[167,59434,25595],{"class":219},[167,59436,583],{"class":191},[167,59438,24185],{"class":181},[167,59440,174],{"class":173},[167,59442,25604],{"class":181},[167,59444,1025],{"class":173},[167,59446,25609],{"class":181},[167,59448,24198],{"class":173},[167,59450,267],{"class":191},[167,59452,1905],{"class":173},[167,59454,59455,59457,59459,59461,59463,59465],{"class":169,"line":304},[167,59456,12749],{"class":181},[167,59458,229],{"class":173},[167,59460,24211],{"class":254},[167,59462,1025],{"class":173},[167,59464,23776],{"class":254},[167,59466,258],{"class":173},[167,59468,59469,59471,59473,59475,59477,59479,59481,59483,59485,59487,59489,59491],{"class":169,"line":313},[167,59470,8266],{"class":191},[167,59472,577],{"class":173},[167,59474,25638],{"class":219},[167,59476,1025],{"class":173},[167,59478,25643],{"class":219},[167,59480,1025],{"class":173},[167,59482,22019],{"class":219},[167,59484,23409],{"class":173},[167,59486,267],{"class":191},[167,59488,24228],{"class":173},[167,59490,15799],{"class":191},[167,59492,25658],{"class":173},[167,59494,59495],{"class":169,"line":161},[167,59496,209],{"emptyLinePlaceholder":208},[167,59498,59499,59501,59503,59505,59507,59509,59511,59513,59515,59517],{"class":169,"line":335},[167,59500,8266],{"class":191},[167,59502,25669],{"class":219},[167,59504,223],{"class":191},[167,59506,4224],{"class":191},[167,59508,25579],{"class":181},[167,59510,1918],{"class":173},[167,59512,25680],{"class":254},[167,59514,693],{"class":173},[167,59516,639],{"class":191},[167,59518,1905],{"class":173},[167,59520,59521,59523,59525,59527,59529,59531],{"class":169,"line":341},[167,59522,25691],{"class":191},[167,59524,2526],{"class":173},[167,59526,216],{"class":191},[167,59528,25698],{"class":219},[167,59530,21967],{"class":191},[167,59532,25703],{"class":173},[167,59534,59535,59537,59539,59541],{"class":169,"line":489},[167,59536,14796],{"class":191},[167,59538,25710],{"class":173},[167,59540,25638],{"class":181},[167,59542,25715],{"class":173},[167,59544,59545,59547,59549],{"class":169,"line":495},[167,59546,25720],{"class":191},[167,59548,25723],{"class":181},[167,59550,25715],{"class":173},[167,59552,59553],{"class":169,"line":501},[167,59554,7287],{"class":173},[167,59556,59557],{"class":169,"line":512},[167,59558,25734],{"class":173},[167,59560,59561],{"class":169,"line":781},[167,59562,209],{"emptyLinePlaceholder":208},[167,59564,59565,59567,59569],{"class":169,"line":786},[167,59566,25743],{"class":173},[167,59568,25746],{"class":181},[167,59570,25749],{"class":173},[167,59572,59573,59575,59577],{"class":169,"line":2678},[167,59574,25754],{"class":173},[167,59576,267],{"class":191},[167,59578,25759],{"class":173},[167,59580,59581],{"class":169,"line":2692},[167,59582,398],{"class":173},[167,59584,59585,59587,59589,59591,59593,59595],{"class":169,"line":3575},[167,59586,16259],{"class":181},[167,59588,229],{"class":173},[167,59590,24211],{"class":254},[167,59592,1025],{"class":173},[167,59594,23776],{"class":254},[167,59596,258],{"class":173},[167,59598,59599],{"class":169,"line":5028},[167,59600,59601],{"class":18662},"    \u002F\u002F If options change dynamically, recreating the observer is usually safest\n",[167,59603,59604],{"class":169,"line":5037},[167,59605,59606],{"class":18662},"    \u002F\u002F (micro-optimization: only recreate when values truly changed)\n",[167,59608,59609],{"class":169,"line":5046},[167,59610,59611],{"class":18662},"    \u002F\u002F Keeping it explicit here:\n",[167,59613,59614,59616,59618],{"class":169,"line":6756},[167,59615,25797],{"class":173},[167,59617,25800],{"class":181},[167,59619,25307],{"class":173},[167,59621,59622,59624],{"class":169,"line":6778},[167,59623,24520],{"class":191},[167,59625,25809],{"class":173},[167,59627,59628,59630,59632,59634,59636,59638,59640,59642,59644,59646,59648,59650],{"class":169,"line":6783},[167,59629,8266],{"class":191},[167,59631,577],{"class":173},[167,59633,25638],{"class":219},[167,59635,1025],{"class":173},[167,59637,25643],{"class":219},[167,59639,1025],{"class":173},[167,59641,22019],{"class":219},[167,59643,23409],{"class":173},[167,59645,267],{"class":191},[167,59647,24228],{"class":173},[167,59649,15799],{"class":191},[167,59651,25658],{"class":173},[167,59653,59654,59656,59658,59660,59662,59664,59666,59668,59670,59672],{"class":169,"line":6788},[167,59655,8266],{"class":191},[167,59657,25669],{"class":219},[167,59659,223],{"class":191},[167,59661,4224],{"class":191},[167,59663,25579],{"class":181},[167,59665,1918],{"class":173},[167,59667,25680],{"class":254},[167,59669,693],{"class":173},[167,59671,639],{"class":191},[167,59673,1905],{"class":173},[167,59675,59676,59678,59680,59682,59684,59686],{"class":169,"line":6793},[167,59677,25691],{"class":191},[167,59679,2526],{"class":173},[167,59681,216],{"class":191},[167,59683,25698],{"class":219},[167,59685,21967],{"class":191},[167,59687,25703],{"class":173},[167,59689,59690,59692,59694,59696],{"class":169,"line":6809},[167,59691,14796],{"class":191},[167,59693,25710],{"class":173},[167,59695,25638],{"class":181},[167,59697,25715],{"class":173},[167,59699,59700,59702,59704],{"class":169,"line":6824},[167,59701,25720],{"class":191},[167,59703,25723],{"class":181},[167,59705,25715],{"class":173},[167,59707,59708],{"class":169,"line":6829},[167,59709,7287],{"class":173},[167,59711,59712],{"class":169,"line":6836},[167,59713,25734],{"class":173},[167,59715,59716,59718,59720],{"class":169,"line":6845},[167,59717,25743],{"class":173},[167,59719,25746],{"class":181},[167,59721,25749],{"class":173},[167,59723,59724,59726,59728],{"class":169,"line":6854},[167,59725,25754],{"class":173},[167,59727,267],{"class":191},[167,59729,25759],{"class":173},[167,59731,59732],{"class":169,"line":6861},[167,59733,398],{"class":173},[167,59735,59736,59738,59740,59742],{"class":169,"line":6879},[167,59737,14622],{"class":181},[167,59739,229],{"class":173},[167,59741,24211],{"class":254},[167,59743,258],{"class":173},[167,59745,59746,59748,59750],{"class":169,"line":6884},[167,59747,25797],{"class":173},[167,59749,25800],{"class":181},[167,59751,25307],{"class":173},[167,59753,59754,59756],{"class":169,"line":6889},[167,59755,24520],{"class":191},[167,59757,25809],{"class":173},[167,59759,59760],{"class":169,"line":6898},[167,59761,398],{"class":173},[167,59763,59764],{"class":169,"line":6903},[167,59765,24148],{"class":173},[154,59767,59769],{"className":2879,"code":59768,"filename":25323,"language":2882,"meta":163,"style":163},"export const vIntersect = {\n  mounted(el, binding) {\n    const { onEnter, onLeave, options } = binding.value ?? {};\n\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n\n    io.observe(el);\n    el.__io__ = io;\n  },\n  updated(el, binding) {\n    \u002F\u002F If options change dynamically, recreating the observer is usually safest\n    \u002F\u002F (micro-optimization: only recreate when values truly changed)\n    \u002F\u002F Keeping it explicit here:\n    el.__io__?.disconnect();\n    delete el.__io__;\n    const { onEnter, onLeave, options } = binding.value ?? {};\n    const io = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) onEnter?.(entry);\n        else onLeave?.(entry);\n      }\n    }, options);\n    io.observe(el);\n    el.__io__ = io;\n  },\n  unmounted(el) {\n    el.__io__?.disconnect();\n    delete el.__io__;\n  },\n};\n",[87,59770,59771,59783,59797,59823,59827,59849,59863,59873,59881,59885,59889,59893,59901,59909,59913,59927,59931,59935,59939,59947,59953,59979,60001,60015,60025,60033,60037,60041,60049,60057,60061,60071,60079,60085,60089],{"__ignoreMap":163},[167,59772,59773,59775,59777,59779,59781],{"class":169,"line":170},[167,59774,608],{"class":191},[167,59776,611],{"class":191},[167,59778,25595],{"class":219},[167,59780,223],{"class":191},[167,59782,1905],{"class":173},[167,59784,59785,59787,59789,59791,59793,59795],{"class":169,"line":188},[167,59786,12749],{"class":181},[167,59788,229],{"class":173},[167,59790,24211],{"class":254},[167,59792,1025],{"class":173},[167,59794,23776],{"class":254},[167,59796,258],{"class":173},[167,59798,59799,59801,59803,59805,59807,59809,59811,59813,59815,59817,59819,59821],{"class":169,"line":205},[167,59800,8266],{"class":191},[167,59802,577],{"class":173},[167,59804,25638],{"class":219},[167,59806,1025],{"class":173},[167,59808,25643],{"class":219},[167,59810,1025],{"class":173},[167,59812,22019],{"class":219},[167,59814,23409],{"class":173},[167,59816,267],{"class":191},[167,59818,24228],{"class":173},[167,59820,15799],{"class":191},[167,59822,25658],{"class":173},[167,59824,59825],{"class":169,"line":160},[167,59826,209],{"emptyLinePlaceholder":208},[167,59828,59829,59831,59833,59835,59837,59839,59841,59843,59845,59847],{"class":169,"line":238},[167,59830,8266],{"class":191},[167,59832,25669],{"class":219},[167,59834,223],{"class":191},[167,59836,4224],{"class":191},[167,59838,25579],{"class":181},[167,59840,1918],{"class":173},[167,59842,25680],{"class":254},[167,59844,693],{"class":173},[167,59846,639],{"class":191},[167,59848,1905],{"class":173},[167,59850,59851,59853,59855,59857,59859,59861],{"class":169,"line":243},[167,59852,25691],{"class":191},[167,59854,2526],{"class":173},[167,59856,216],{"class":191},[167,59858,25698],{"class":219},[167,59860,21967],{"class":191},[167,59862,25703],{"class":173},[167,59864,59865,59867,59869,59871],{"class":169,"line":261},[167,59866,14796],{"class":191},[167,59868,25710],{"class":173},[167,59870,25638],{"class":181},[167,59872,25715],{"class":173},[167,59874,59875,59877,59879],{"class":169,"line":273},[167,59876,25720],{"class":191},[167,59878,25723],{"class":181},[167,59880,25715],{"class":173},[167,59882,59883],{"class":169,"line":279},[167,59884,7287],{"class":173},[167,59886,59887],{"class":169,"line":289},[167,59888,25734],{"class":173},[167,59890,59891],{"class":169,"line":294},[167,59892,209],{"emptyLinePlaceholder":208},[167,59894,59895,59897,59899],{"class":169,"line":304},[167,59896,25743],{"class":173},[167,59898,25746],{"class":181},[167,59900,25749],{"class":173},[167,59902,59903,59905,59907],{"class":169,"line":313},[167,59904,25754],{"class":173},[167,59906,267],{"class":191},[167,59908,25759],{"class":173},[167,59910,59911],{"class":169,"line":161},[167,59912,398],{"class":173},[167,59914,59915,59917,59919,59921,59923,59925],{"class":169,"line":335},[167,59916,16259],{"class":181},[167,59918,229],{"class":173},[167,59920,24211],{"class":254},[167,59922,1025],{"class":173},[167,59924,23776],{"class":254},[167,59926,258],{"class":173},[167,59928,59929],{"class":169,"line":341},[167,59930,59601],{"class":18662},[167,59932,59933],{"class":169,"line":489},[167,59934,59606],{"class":18662},[167,59936,59937],{"class":169,"line":495},[167,59938,59611],{"class":18662},[167,59940,59941,59943,59945],{"class":169,"line":501},[167,59942,25797],{"class":173},[167,59944,25800],{"class":181},[167,59946,25307],{"class":173},[167,59948,59949,59951],{"class":169,"line":512},[167,59950,24520],{"class":191},[167,59952,25809],{"class":173},[167,59954,59955,59957,59959,59961,59963,59965,59967,59969,59971,59973,59975,59977],{"class":169,"line":781},[167,59956,8266],{"class":191},[167,59958,577],{"class":173},[167,59960,25638],{"class":219},[167,59962,1025],{"class":173},[167,59964,25643],{"class":219},[167,59966,1025],{"class":173},[167,59968,22019],{"class":219},[167,59970,23409],{"class":173},[167,59972,267],{"class":191},[167,59974,24228],{"class":173},[167,59976,15799],{"class":191},[167,59978,25658],{"class":173},[167,59980,59981,59983,59985,59987,59989,59991,59993,59995,59997,59999],{"class":169,"line":786},[167,59982,8266],{"class":191},[167,59984,25669],{"class":219},[167,59986,223],{"class":191},[167,59988,4224],{"class":191},[167,59990,25579],{"class":181},[167,59992,1918],{"class":173},[167,59994,25680],{"class":254},[167,59996,693],{"class":173},[167,59998,639],{"class":191},[167,60000,1905],{"class":173},[167,60002,60003,60005,60007,60009,60011,60013],{"class":169,"line":2678},[167,60004,25691],{"class":191},[167,60006,2526],{"class":173},[167,60008,216],{"class":191},[167,60010,25698],{"class":219},[167,60012,21967],{"class":191},[167,60014,25703],{"class":173},[167,60016,60017,60019,60021,60023],{"class":169,"line":2692},[167,60018,14796],{"class":191},[167,60020,25710],{"class":173},[167,60022,25638],{"class":181},[167,60024,25715],{"class":173},[167,60026,60027,60029,60031],{"class":169,"line":3575},[167,60028,25720],{"class":191},[167,60030,25723],{"class":181},[167,60032,25715],{"class":173},[167,60034,60035],{"class":169,"line":5028},[167,60036,7287],{"class":173},[167,60038,60039],{"class":169,"line":5037},[167,60040,25734],{"class":173},[167,60042,60043,60045,60047],{"class":169,"line":5046},[167,60044,25743],{"class":173},[167,60046,25746],{"class":181},[167,60048,25749],{"class":173},[167,60050,60051,60053,60055],{"class":169,"line":6756},[167,60052,25754],{"class":173},[167,60054,267],{"class":191},[167,60056,25759],{"class":173},[167,60058,60059],{"class":169,"line":6778},[167,60060,398],{"class":173},[167,60062,60063,60065,60067,60069],{"class":169,"line":6783},[167,60064,14622],{"class":181},[167,60066,229],{"class":173},[167,60068,24211],{"class":254},[167,60070,258],{"class":173},[167,60072,60073,60075,60077],{"class":169,"line":6788},[167,60074,25797],{"class":173},[167,60076,25800],{"class":181},[167,60078,25307],{"class":173},[167,60080,60081,60083],{"class":169,"line":6793},[167,60082,24520],{"class":191},[167,60084,25809],{"class":173},[167,60086,60087],{"class":169,"line":6809},[167,60088,398],{"class":173},[167,60090,60091],{"class":169,"line":6824},[167,60092,24148],{"class":173},[154,60094,60095],{"className":156,"code":26280,"filename":15284,"language":162,"meta":163,"style":163},[87,60096,60097,60103,60113,60129,60145,60153,60159,60163,60167],{"__ignoreMap":163},[167,60098,60099,60101],{"class":169,"line":170},[167,60100,174],{"class":173},[167,60102,26289],{"class":177},[167,60104,60105,60107,60109,60111],{"class":169,"line":188},[167,60106,26294],{"class":181},[167,60108,267],{"class":173},[167,60110,5080],{"class":201},[167,60112,26301],{"class":173},[167,60114,60115,60117,60119,60121,60123,60125,60127],{"class":169,"line":205},[167,60116,26306],{"class":181},[167,60118,636],{"class":173},[167,60120,639],{"class":191},[167,60122,26313],{"class":173},[167,60124,267],{"class":191},[167,60126,26318],{"class":219},[167,60128,9754],{"class":173},[167,60130,60131,60133,60135,60137,60139,60141,60143],{"class":169,"line":160},[167,60132,26325],{"class":181},[167,60134,636],{"class":173},[167,60136,639],{"class":191},[167,60138,26313],{"class":173},[167,60140,267],{"class":191},[167,60142,5777],{"class":219},[167,60144,9754],{"class":173},[167,60146,60147,60149,60151],{"class":169,"line":238},[167,60148,26342],{"class":173},[167,60150,26345],{"class":219},[167,60152,599],{"class":173},[167,60154,60155,60157],{"class":169,"line":243},[167,60156,26352],{"class":173},[167,60158,5085],{"class":201},[167,60160,60161],{"class":169,"line":261},[167,60162,185],{"class":173},[167,60164,60165],{"class":169,"line":273},[167,60166,26363],{"class":173},[167,60168,60169,60171,60173],{"class":169,"line":279},[167,60170,282],{"class":173},[167,60172,1242],{"class":177},[167,60174,185],{"class":173},[5367,60176,60177],{},[15,60178,60179,60180,60182,60183,1662,60185,60187],{},"If you recreate observers in ",[87,60181,15037],{},", compare ",[87,60184,23784],{},[87,60186,23793],{}," when possible to avoid unnecessary work.",[22,60189,60191],{"id":60190},"summary","Summary",[33,60193,60194,60200,60205,60215,60225],{},[36,60195,60196,60197,1679],{},"Custom directives are ideal for reusable ",[3933,60198,60199],{},"DOM behavior",[36,60201,60202,60204],{},[87,60203,11276],{}," is essential to clean resources and prevent leaks.",[36,60206,60207,60208,1025,60210,1025,60212,60214],{},"Keep a simple contract (",[87,60209,2219],{},[87,60211,23916],{},[87,60213,23919],{},") and avoid mixing in business state.",[36,60216,60217,60218,60221,60222,60224],{},"In Vue 3, ",[3933,60219,60220],{},"if callback references can change",", refresh them in ",[87,60223,15037],{}," so listeners do not call stale handlers.",[36,60226,60227],{},"Prefer Composition API; use Options API when needed for incremental compatibility.",[924,60229,26426],{},{"title":163,"searchDepth":188,"depth":188,"links":60231},[60232,60233,60234,60235,60236,60237,60241,60246],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":57819,"depth":188,"text":57820},{"id":57925,"depth":188,"text":57926,"children":60238},[60239],{"id":57946,"depth":205,"text":60240},"v-click-outside (with updatable callback)",{"id":59026,"depth":188,"text":59027,"children":60242},[60243,60245],{"id":59030,"depth":205,"text":60244},"v-autofocus (basic and practical)",{"id":25451,"depth":205,"text":26443},{"id":60190,"depth":188,"text":60191},"Example of a custom directive in Vue 3","Learn how to create custom directives in Vue 3 with real-world cases, lifecycle hooks, proper cleanup, and equivalent Composition API and Options API examples.","en",{"updatedAt":26450,"coverCaption":60247,"author":946,"keywords":60251},[3258,26453,60252,3260,3973],"directive lifecycle","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.en",[60255],{"headline":57632,"author":60256,"datePublished":26450,"@type":961},{"name":946,"@type":959},{"title":57626,"description":60248},"A step-by-step path to master Vue core directives.","Vue Directives","blog\u002Fdirectives-vue-custom-directives-guide.en",[60262,60264,60266,60268,60270],{"tag":60263,"color":26467},"Directives",{"tag":60265,"color":26470},"Custom Directives",{"tag":60267,"color":971},"Architecture",{"tag":60269,"color":3270},"Reactivity",{"tag":60271,"color":7731},"Advanced","VbWd4b36KntGtlVvxTEiDtcGMmtX119Q4P6hsGOcxHE",{"id":23673,"title":23674,"body":60274,"cover":26445,"coverAlt":26446,"date":26447,"description":26448,"draft":940,"extension":941,"lab":942,"locale":943,"meta":62773,"navigation":208,"path":26455,"schemaOrg":62775,"seo":62778,"series":26460,"seriesDescription":26461,"seriesOrder":294,"seriesTitle":26462,"slug":942,"stem":26463,"tags":62779,"__hash__":26474},{"type":8,"value":60275,"toc":62758},[60276,60278,60280,60284,60304,60310,60312,60316,60318,60332,60334,60344,60348,60376,60382,60384,60400,60402,60416,60418,60500,60502,60516,60520,61128,61566,61580,61582,61586,61728,61818,61850,61854,62310,62636,62718,62728,62730,62756],[11,60277,23680],{"id":23679},[22,60279,23684],{"id":23683},[15,60281,23687,60282,23691],{},[3933,60283,23690],{},[33,60285,60286,60290,60294,60298],{},[36,60287,23696,60288,6219],{},[87,60289,23699],{},[36,60291,23702,60292,6219],{},[87,60293,23705],{},[36,60295,23708,60296,6219],{},[87,60297,23711],{},[36,60299,23714,60300,1025,60302,23719],{},[87,60301,13761],{},[87,60303,13586],{},[15,60305,23722,60306,1025,60308,23729],{},[3933,60307,23725],{},[3933,60309,23728],{},[22,60311,6257],{"id":6256},[15,60313,23734,60314,1679],{},[3933,60315,23737],{},[15,60317,23740],{},[33,60319,60320,60324,60328],{},[36,60321,60322,23747],{},[87,60323,6393],{},[36,60325,60326,23752],{},[87,60327,15037],{},[36,60329,60330,23757],{},[87,60331,11276],{},[15,60333,23760],{},[33,60335,60336],{},[36,60337,60338,1025,60340,1025,60342],{},[87,60339,16604],{},[87,60341,15034],{},[87,60343,13472],{},[15,60345,23773,60346,23777],{},[87,60347,23776],{},[33,60349,60350,60356,60364,60370],{},[36,60351,60352,23785,60354,4270],{},[87,60353,23784],{},[87,60355,23788],{},[36,60357,60358,23794,60360,21857,60362,4270],{},[87,60359,23793],{},[87,60361,15034],{},[87,60363,15037],{},[36,60365,60366,23804,60368,4270],{},[87,60367,23803],{},[87,60369,23807],{},[36,60371,60372,23813,60374,4270],{},[87,60373,23812],{},[87,60375,23816],{},[15,60377,23819,60378,23823,60380,1679],{},[3933,60379,23822],{},[3933,60381,23826],{},[22,60383,23830],{"id":23829},[3035,60385,60386,60388,60394],{},[36,60387,23835],{},[36,60389,23838,60390,1025,60392,23843],{},[87,60391,13761],{},[87,60393,13586],{},[36,60395,23846,60396,1025,60398,4270],{},[87,60397,23699],{},[87,60399,23711],{},[22,60401,23854],{"id":23853},[3035,60403,60404,60406,60414],{},[36,60405,23859],{},[36,60407,23862,60408,1025,60410,1025,60412,4270],{},[87,60409,23865],{},[87,60411,23868],{},[87,60413,23871],{},[36,60415,23874],{},[22,60417,3085],{"id":3084},[3035,60419,60420,60436,60452,60468,60484],{},[36,60421,60422,60426],{},[3933,60423,23883,60424,1679],{},[87,60425,11276],{},[33,60427,60428,60432],{},[36,60429,23890,60430,23893],{},[87,60431,6393],{},[36,60433,23896,60434,1679],{},[87,60435,11276],{},[36,60437,60438,60440],{},[3933,60439,23903],{},[33,60441,60442,60444],{},[36,60443,23908],{},[36,60445,23911,60446,1025,60448,1028,60450,1679],{},[87,60447,2219],{},[87,60449,23916],{},[87,60451,23919],{},[36,60453,60454,60456],{},[3933,60455,23924],{},[33,60457,60458,60460],{},[36,60459,23929],{},[36,60461,23932,60462,1025,60464,1025,60466,23939],{},[87,60463,2650],{},[87,60465,1242],{},[87,60467,507],{},[36,60469,60470,60472],{},[3933,60471,23944],{},[33,60473,60474,60480],{},[36,60475,23949,60476,23952,60478,23955],{},[87,60477,6393],{},[87,60479,23784],{},[36,60481,23958,60482,1679],{},[87,60483,15037],{},[36,60485,60486,60490],{},[3933,60487,23965,60488,1679],{},[87,60489,15037],{},[33,60491,60492,60494],{},[36,60493,23972],{},[36,60495,23975,60496,1028,60498,23980],{},[87,60497,23784],{},[87,60499,23793],{},[22,60501,7997],{"id":7996},[33,60503,60504,60508,60512],{},[36,60505,60506,23989],{},[87,60507,23699],{},[36,60509,60510,23994],{},[87,60511,23711],{},[36,60513,60514,24000],{},[87,60515,23999],{},[3087,60517,60518,24006],{"id":24003},[87,60519,23711],{},[154,60521,60522],{"className":156,"code":24009,"filename":3260,"language":162,"meta":163,"style":163},[87,60523,60524,60540,60554,60566,60570,60594,60598,60612,60634,60644,60648,60652,60668,60672,60696,60710,60730,60734,60738,60746,60750,60772,60792,60806,60810,60814,60828,60836,60840,60844,60848,60856,60860,60864,60880,60884,60888,60902,60906,60922,60930,60934,60938,60942,60952,60958,60974,60978,60984,60990,60994,60998,61006,61010,61018,61032,61056,61060,61080,61092,61104,61112,61120],{"__ignoreMap":163},[167,60525,60526,60528,60530,60532,60534,60536,60538],{"class":169,"line":170},[167,60527,174],{"class":173},[167,60529,178],{"class":177},[167,60531,182],{"class":181},[167,60533,1050],{"class":181},[167,60535,267],{"class":173},[167,60537,1055],{"class":201},[167,60539,185],{"class":173},[167,60541,60542,60544,60546,60548,60550,60552],{"class":169,"line":188},[167,60543,192],{"class":191},[167,60545,1174],{"class":191},[167,60547,24036],{"class":173},[167,60549,198],{"class":191},[167,60551,24041],{"class":201},[167,60553,24044],{"class":173},[167,60555,60556,60558,60560,60562,60564],{"class":169,"line":205},[167,60557,192],{"class":191},[167,60559,195],{"class":173},[167,60561,198],{"class":191},[167,60563,24041],{"class":201},[167,60565,24044],{"class":173},[167,60567,60568],{"class":169,"line":160},[167,60569,209],{"emptyLinePlaceholder":208},[167,60571,60572,60574,60576,60578,60580,60582,60584,60586,60588,60590,60592],{"class":169,"line":238},[167,60573,569],{"class":191},[167,60575,24067],{"class":181},[167,60577,223],{"class":191},[167,60579,2526],{"class":173},[167,60581,4195],{"class":254},[167,60583,583],{"class":191},[167,60585,24078],{"class":181},[167,60587,693],{"class":173},[167,60589,639],{"class":191},[167,60591,24085],{"class":219},[167,60593,24044],{"class":173},[167,60595,60596],{"class":169,"line":243},[167,60597,209],{"emptyLinePlaceholder":208},[167,60599,60600,60602,60604,60606,60608,60610],{"class":169,"line":261},[167,60601,569],{"class":191},[167,60603,24098],{"class":181},[167,60605,223],{"class":191},[167,60607,24103],{"class":181},[167,60609,24106],{"class":191},[167,60611,1905],{"class":173},[167,60613,60614,60616,60618,60620,60622,60624,60626,60628,60630,60632],{"class":169,"line":273},[167,60615,24113],{"class":181},[167,60617,24116],{"class":191},[167,60619,2526],{"class":173},[167,60621,4195],{"class":254},[167,60623,583],{"class":191},[167,60625,24078],{"class":181},[167,60627,693],{"class":173},[167,60629,639],{"class":191},[167,60631,24085],{"class":219},[167,60633,24044],{"class":173},[167,60635,60636,60638,60640,60642],{"class":169,"line":279},[167,60637,24137],{"class":254},[167,60639,24116],{"class":191},[167,60641,24067],{"class":181},[167,60643,24044],{"class":173},[167,60645,60646],{"class":169,"line":289},[167,60647,24148],{"class":173},[167,60649,60650],{"class":169,"line":294},[167,60651,209],{"emptyLinePlaceholder":208},[167,60653,60654,60656,60658,60660,60662,60664,60666],{"class":169,"line":304},[167,60655,216],{"class":191},[167,60657,5523],{"class":219},[167,60659,223],{"class":191},[167,60661,226],{"class":181},[167,60663,229],{"class":173},[167,60665,3392],{"class":219},[167,60667,24169],{"class":173},[167,60669,60670],{"class":169,"line":313},[167,60671,209],{"emptyLinePlaceholder":208},[167,60673,60674,60676,60678,60680,60682,60684,60686,60688,60690,60692,60694],{"class":169,"line":161},[167,60675,216],{"class":191},[167,60677,24180],{"class":219},[167,60679,583],{"class":191},[167,60681,24185],{"class":181},[167,60683,174],{"class":173},[167,60685,24190],{"class":181},[167,60687,1025],{"class":173},[167,60689,24195],{"class":181},[167,60691,24198],{"class":173},[167,60693,267],{"class":191},[167,60695,1905],{"class":173},[167,60697,60698,60700,60702,60704,60706,60708],{"class":169,"line":335},[167,60699,12749],{"class":181},[167,60701,229],{"class":173},[167,60703,24211],{"class":254},[167,60705,1025],{"class":173},[167,60707,23776],{"class":254},[167,60709,258],{"class":173},[167,60711,60712,60714,60716,60718,60720,60722,60724,60726,60728],{"class":169,"line":341},[167,60713,7419],{"class":191},[167,60715,2526],{"class":173},[167,60717,11757],{"class":191},[167,60719,24228],{"class":173},[167,60721,701],{"class":191},[167,60723,24233],{"class":201},[167,60725,693],{"class":173},[167,60727,24238],{"class":191},[167,60729,24044],{"class":173},[167,60731,60732],{"class":169,"line":489},[167,60733,209],{"emptyLinePlaceholder":208},[167,60735,60736],{"class":169,"line":495},[167,60737,24249],{"class":18662},[167,60739,60740,60742,60744],{"class":169,"line":501},[167,60741,24254],{"class":173},[167,60743,267],{"class":191},[167,60745,24259],{"class":173},[167,60747,60748],{"class":169,"line":512},[167,60749,209],{"emptyLinePlaceholder":208},[167,60751,60752,60754,60756,60758,60760,60762,60764,60766,60768,60770],{"class":169,"line":781},[167,60753,8266],{"class":191},[167,60755,24270],{"class":181},[167,60757,223],{"class":191},[167,60759,2526],{"class":173},[167,60761,4195],{"class":254},[167,60763,583],{"class":191},[167,60765,24078],{"class":181},[167,60767,693],{"class":173},[167,60769,639],{"class":191},[167,60771,1905],{"class":173},[167,60773,60774,60776,60778,60780,60782,60784,60786,60788,60790],{"class":169,"line":786},[167,60775,4435],{"class":191},[167,60777,24293],{"class":219},[167,60779,223],{"class":191},[167,60781,24298],{"class":173},[167,60783,6692],{"class":191},[167,60785,24303],{"class":181},[167,60787,659],{"class":191},[167,60789,6567],{"class":219},[167,60791,24044],{"class":173},[167,60793,60794,60796,60798,60800,60802,60804],{"class":169,"line":2678},[167,60795,7261],{"class":191},[167,60797,2526],{"class":173},[167,60799,6641],{"class":191},[167,60801,24320],{"class":173},[167,60803,24238],{"class":191},[167,60805,24044],{"class":173},[167,60807,60808],{"class":169,"line":2692},[167,60809,209],{"emptyLinePlaceholder":208},[167,60811,60812],{"class":169,"line":3575},[167,60813,24333],{"class":18662},[167,60815,60816,60818,60820,60822,60824,60826],{"class":169,"line":5028},[167,60817,7261],{"class":191},[167,60819,2526],{"class":173},[167,60821,6641],{"class":191},[167,60823,24344],{"class":173},[167,60825,24347],{"class":181},[167,60827,24350],{"class":173},[167,60829,60830,60832,60834],{"class":169,"line":5037},[167,60831,24355],{"class":173},[167,60833,24358],{"class":181},[167,60835,24361],{"class":173},[167,60837,60838],{"class":169,"line":5046},[167,60839,7287],{"class":173},[167,60841,60842],{"class":169,"line":6756},[167,60843,24370],{"class":173},[167,60845,60846],{"class":169,"line":6778},[167,60847,209],{"emptyLinePlaceholder":208},[167,60849,60850,60852,60854],{"class":169,"line":6783},[167,60851,24379],{"class":173},[167,60853,267],{"class":191},[167,60855,24384],{"class":173},[167,60857,60858],{"class":169,"line":6788},[167,60859,209],{"emptyLinePlaceholder":208},[167,60861,60862],{"class":169,"line":6793},[167,60863,24393],{"class":18662},[167,60865,60866,60868,60870,60872,60874,60876,60878],{"class":169,"line":6809},[167,60867,24398],{"class":173},[167,60869,1501],{"class":181},[167,60871,229],{"class":173},[167,60873,24405],{"class":201},[167,60875,24408],{"class":173},[167,60877,390],{"class":219},[167,60879,24169],{"class":173},[167,60881,60882],{"class":169,"line":6824},[167,60883,398],{"class":173},[167,60885,60886],{"class":169,"line":6829},[167,60887,209],{"emptyLinePlaceholder":208},[167,60889,60890,60892,60894,60896,60898,60900],{"class":169,"line":6836},[167,60891,16259],{"class":181},[167,60893,229],{"class":173},[167,60895,24211],{"class":254},[167,60897,1025],{"class":173},[167,60899,23776],{"class":254},[167,60901,258],{"class":173},[167,60903,60904],{"class":169,"line":6845},[167,60905,24439],{"class":18662},[167,60907,60908,60910,60912,60914,60916,60918,60920],{"class":169,"line":6854},[167,60909,7419],{"class":191},[167,60911,2526],{"class":173},[167,60913,11757],{"class":191},[167,60915,24228],{"class":173},[167,60917,2550],{"class":191},[167,60919,24233],{"class":201},[167,60921,258],{"class":173},[167,60923,60924,60926,60928],{"class":169,"line":6861},[167,60925,24460],{"class":173},[167,60927,267],{"class":191},[167,60929,24259],{"class":173},[167,60931,60932],{"class":169,"line":6879},[167,60933,4049],{"class":173},[167,60935,60936],{"class":169,"line":6884},[167,60937,398],{"class":173},[167,60939,60940],{"class":169,"line":6889},[167,60941,209],{"emptyLinePlaceholder":208},[167,60943,60944,60946,60948,60950],{"class":169,"line":6898},[167,60945,14622],{"class":181},[167,60947,229],{"class":173},[167,60949,24211],{"class":254},[167,60951,258],{"class":173},[167,60953,60954,60956],{"class":169,"line":6903},[167,60955,7419],{"class":191},[167,60957,24493],{"class":173},[167,60959,60960,60962,60964,60966,60968,60970,60972],{"class":169,"line":6912},[167,60961,24498],{"class":173},[167,60963,1524],{"class":181},[167,60965,229],{"class":173},[167,60967,24405],{"class":201},[167,60969,24507],{"class":173},[167,60971,390],{"class":219},[167,60973,24169],{"class":173},[167,60975,60976],{"class":169,"line":6928},[167,60977,4049],{"class":173},[167,60979,60980,60982],{"class":169,"line":6949},[167,60981,24520],{"class":191},[167,60983,24523],{"class":173},[167,60985,60986,60988],{"class":169,"line":6954},[167,60987,24520],{"class":191},[167,60989,24530],{"class":173},[167,60991,60992],{"class":169,"line":6975},[167,60993,398],{"class":173},[167,60995,60996],{"class":169,"line":6989},[167,60997,24148],{"class":173},[167,60999,61000,61002,61004],{"class":169,"line":7003},[167,61001,282],{"class":173},[167,61003,178],{"class":177},[167,61005,185],{"class":173},[167,61007,61008],{"class":169,"line":7017},[167,61009,209],{"emptyLinePlaceholder":208},[167,61011,61012,61014,61016],{"class":169,"line":7026},[167,61013,174],{"class":173},[167,61015,299],{"class":177},[167,61017,185],{"class":173},[167,61019,61020,61022,61024,61026,61028,61030],{"class":169,"line":7031},[167,61021,307],{"class":173},[167,61023,10117],{"class":177},[167,61025,1245],{"class":181},[167,61027,267],{"class":173},[167,61029,24571],{"class":201},[167,61031,185],{"class":173},[167,61033,61034,61036,61038,61040,61042,61044,61046,61048,61050,61052,61054],{"class":169,"line":7048},[167,61035,1257],{"class":173},[167,61037,507],{"class":177},[167,61039,1174],{"class":181},[167,61041,267],{"class":173},[167,61043,1179],{"class":201},[167,61045,1182],{"class":181},[167,61047,267],{"class":173},[167,61049,24592],{"class":201},[167,61051,24595],{"class":173},[167,61053,507],{"class":177},[167,61055,185],{"class":173},[167,61057,61058],{"class":169,"line":7057},[167,61059,209],{"emptyLinePlaceholder":208},[167,61061,61062,61064,61066,61068,61070,61072,61074,61076,61078],{"class":169,"line":7555},[167,61063,1257],{"class":173},[167,61065,1242],{"class":177},[167,61067,5694],{"class":181},[167,61069,267],{"class":173},[167,61071,5699],{"class":201},[167,61073,24618],{"class":181},[167,61075,267],{"class":173},[167,61077,24623],{"class":201},[167,61079,185],{"class":173},[167,61081,61082,61084,61086,61088,61090],{"class":169,"line":7560},[167,61083,1268],{"class":173},[167,61085,15],{"class":177},[167,61087,24634],{"class":173},[167,61089,15],{"class":177},[167,61091,185],{"class":173},[167,61093,61094,61096,61098,61100,61102],{"class":169,"line":7579},[167,61095,1268],{"class":173},[167,61097,15],{"class":177},[167,61099,24647],{"class":173},[167,61101,15],{"class":177},[167,61103,185],{"class":173},[167,61105,61106,61108,61110],{"class":169,"line":7592},[167,61107,1292],{"class":173},[167,61109,1242],{"class":177},[167,61111,185],{"class":173},[167,61113,61114,61116,61118],{"class":169,"line":7605},[167,61115,504],{"class":173},[167,61117,10117],{"class":177},[167,61119,185],{"class":173},[167,61121,61122,61124,61126],{"class":169,"line":7618},[167,61123,282],{"class":173},[167,61125,299],{"class":177},[167,61127,185],{"class":173},[154,61129,61130],{"className":156,"code":24678,"filename":3973,"language":162,"meta":163,"style":163},[87,61131,61132,61140,61148,61156,61162,61168,61176,61180,61184,61188,61192,61206,61226,61230,61238,61242,61260,61270,61286,61294,61298,61302,61306,61322,61326,61340,61356,61364,61368,61372,61382,61388,61404,61408,61414,61420,61424,61428,61432,61436,61444,61448,61456,61470,61494,61498,61518,61530,61542,61550,61558],{"__ignoreMap":163},[167,61133,61134,61136,61138],{"class":169,"line":170},[167,61135,174],{"class":173},[167,61137,178],{"class":177},[167,61139,185],{"class":173},[167,61141,61142,61144,61146],{"class":169,"line":188},[167,61143,608],{"class":191},[167,61145,3991],{"class":191},[167,61147,1905],{"class":173},[167,61149,61150,61152,61154],{"class":169,"line":205},[167,61151,4398],{"class":173},[167,61153,24703],{"class":201},[167,61155,393],{"class":173},[167,61157,61158,61160],{"class":169,"line":160},[167,61159,7176],{"class":181},[167,61161,763],{"class":173},[167,61163,61164,61166],{"class":169,"line":238},[167,61165,1937],{"class":191},[167,61167,1905],{"class":173},[167,61169,61170,61172,61174],{"class":169,"line":243},[167,61171,24722],{"class":173},[167,61173,3392],{"class":219},[167,61175,393],{"class":173},[167,61177,61178],{"class":169,"line":261},[167,61179,24370],{"class":173},[167,61181,61182],{"class":169,"line":273},[167,61183,398],{"class":173},[167,61185,61186],{"class":169,"line":279},[167,61187,24739],{"class":173},[167,61189,61190],{"class":169,"line":289},[167,61191,24744],{"class":173},[167,61193,61194,61196,61198,61200,61202,61204],{"class":169,"line":294},[167,61195,24749],{"class":181},[167,61197,229],{"class":173},[167,61199,24211],{"class":254},[167,61201,1025],{"class":173},[167,61203,23776],{"class":254},[167,61205,258],{"class":173},[167,61207,61208,61210,61212,61214,61216,61218,61220,61222,61224],{"class":169,"line":304},[167,61209,14796],{"class":191},[167,61211,2526],{"class":173},[167,61213,11757],{"class":191},[167,61215,24228],{"class":173},[167,61217,701],{"class":191},[167,61219,24233],{"class":201},[167,61221,693],{"class":173},[167,61223,24238],{"class":191},[167,61225,24044],{"class":173},[167,61227,61228],{"class":169,"line":313},[167,61229,209],{"emptyLinePlaceholder":208},[167,61231,61232,61234,61236],{"class":169,"line":161},[167,61233,24788],{"class":173},[167,61235,267],{"class":191},[167,61237,24259],{"class":173},[167,61239,61240],{"class":169,"line":335},[167,61241,209],{"emptyLinePlaceholder":208},[167,61243,61244,61246,61248,61250,61252,61254,61256,61258],{"class":169,"line":341},[167,61245,24355],{"class":173},[167,61247,24803],{"class":181},[167,61249,223],{"class":191},[167,61251,2526],{"class":173},[167,61253,4195],{"class":254},[167,61255,693],{"class":173},[167,61257,639],{"class":191},[167,61259,1905],{"class":173},[167,61261,61262,61264,61266,61268],{"class":169,"line":489},[167,61263,24820],{"class":191},[167,61265,24293],{"class":219},[167,61267,223],{"class":191},[167,61269,24827],{"class":173},[167,61271,61272,61274,61276,61278,61280,61282,61284],{"class":169,"line":495},[167,61273,24832],{"class":191},[167,61275,24835],{"class":173},[167,61277,8339],{"class":191},[167,61279,5625],{"class":191},[167,61281,24344],{"class":173},[167,61283,24347],{"class":181},[167,61285,24350],{"class":173},[167,61287,61288,61290,61292],{"class":169,"line":501},[167,61289,24850],{"class":173},[167,61291,24358],{"class":181},[167,61293,24361],{"class":173},[167,61295,61296],{"class":169,"line":512},[167,61297,24859],{"class":173},[167,61299,61300],{"class":169,"line":781},[167,61301,24864],{"class":173},[167,61303,61304],{"class":169,"line":786},[167,61305,209],{"emptyLinePlaceholder":208},[167,61307,61308,61310,61312,61314,61316,61318,61320],{"class":169,"line":2678},[167,61309,24873],{"class":173},[167,61311,1501],{"class":181},[167,61313,229],{"class":173},[167,61315,24405],{"class":201},[167,61317,24507],{"class":173},[167,61319,390],{"class":219},[167,61321,24169],{"class":173},[167,61323,61324],{"class":169,"line":2692},[167,61325,8642],{"class":173},[167,61327,61328,61330,61332,61334,61336,61338],{"class":169,"line":3575},[167,61329,24894],{"class":181},[167,61331,229],{"class":173},[167,61333,24211],{"class":254},[167,61335,1025],{"class":173},[167,61337,23776],{"class":254},[167,61339,258],{"class":173},[167,61341,61342,61344,61346,61348,61350,61352,61354],{"class":169,"line":5028},[167,61343,14796],{"class":191},[167,61345,2526],{"class":173},[167,61347,11757],{"class":191},[167,61349,24228],{"class":173},[167,61351,2550],{"class":191},[167,61353,24233],{"class":201},[167,61355,258],{"class":173},[167,61357,61358,61360,61362],{"class":169,"line":5037},[167,61359,24925],{"class":173},[167,61361,267],{"class":191},[167,61363,24259],{"class":173},[167,61365,61366],{"class":169,"line":5046},[167,61367,14822],{"class":173},[167,61369,61370],{"class":169,"line":6756},[167,61371,8642],{"class":173},[167,61373,61374,61376,61378,61380],{"class":169,"line":6778},[167,61375,24942],{"class":181},[167,61377,229],{"class":173},[167,61379,24211],{"class":254},[167,61381,258],{"class":173},[167,61383,61384,61386],{"class":169,"line":6783},[167,61385,14796],{"class":191},[167,61387,24493],{"class":173},[167,61389,61390,61392,61394,61396,61398,61400,61402],{"class":169,"line":6788},[167,61391,24959],{"class":173},[167,61393,1524],{"class":181},[167,61395,229],{"class":173},[167,61397,24405],{"class":201},[167,61399,24507],{"class":173},[167,61401,390],{"class":219},[167,61403,24169],{"class":173},[167,61405,61406],{"class":169,"line":6793},[167,61407,14822],{"class":173},[167,61409,61410,61412],{"class":169,"line":6809},[167,61411,24980],{"class":191},[167,61413,24523],{"class":173},[167,61415,61416,61418],{"class":169,"line":6824},[167,61417,24980],{"class":191},[167,61419,24530],{"class":173},[167,61421,61422],{"class":169,"line":6829},[167,61423,8642],{"class":173},[167,61425,61426],{"class":169,"line":6836},[167,61427,755],{"class":173},[167,61429,61430],{"class":169,"line":6845},[167,61431,398],{"class":173},[167,61433,61434],{"class":169,"line":6854},[167,61435,24148],{"class":173},[167,61437,61438,61440,61442],{"class":169,"line":6861},[167,61439,282],{"class":173},[167,61441,178],{"class":177},[167,61443,185],{"class":173},[167,61445,61446],{"class":169,"line":6879},[167,61447,209],{"emptyLinePlaceholder":208},[167,61449,61450,61452,61454],{"class":169,"line":6884},[167,61451,174],{"class":173},[167,61453,299],{"class":177},[167,61455,185],{"class":173},[167,61457,61458,61460,61462,61464,61466,61468],{"class":169,"line":6889},[167,61459,307],{"class":173},[167,61461,10117],{"class":177},[167,61463,1245],{"class":181},[167,61465,267],{"class":173},[167,61467,24571],{"class":201},[167,61469,185],{"class":173},[167,61471,61472,61474,61476,61478,61480,61482,61484,61486,61488,61490,61492],{"class":169,"line":6898},[167,61473,1257],{"class":173},[167,61475,507],{"class":177},[167,61477,1174],{"class":181},[167,61479,267],{"class":173},[167,61481,1179],{"class":201},[167,61483,1182],{"class":181},[167,61485,267],{"class":173},[167,61487,24592],{"class":201},[167,61489,24595],{"class":173},[167,61491,507],{"class":177},[167,61493,185],{"class":173},[167,61495,61496],{"class":169,"line":6903},[167,61497,209],{"emptyLinePlaceholder":208},[167,61499,61500,61502,61504,61506,61508,61510,61512,61514,61516],{"class":169,"line":6912},[167,61501,1257],{"class":173},[167,61503,1242],{"class":177},[167,61505,5694],{"class":181},[167,61507,267],{"class":173},[167,61509,5699],{"class":201},[167,61511,24618],{"class":181},[167,61513,267],{"class":173},[167,61515,24623],{"class":201},[167,61517,185],{"class":173},[167,61519,61520,61522,61524,61526,61528],{"class":169,"line":6928},[167,61521,1268],{"class":173},[167,61523,15],{"class":177},[167,61525,24634],{"class":173},[167,61527,15],{"class":177},[167,61529,185],{"class":173},[167,61531,61532,61534,61536,61538,61540],{"class":169,"line":6949},[167,61533,1268],{"class":173},[167,61535,15],{"class":177},[167,61537,24647],{"class":173},[167,61539,15],{"class":177},[167,61541,185],{"class":173},[167,61543,61544,61546,61548],{"class":169,"line":6954},[167,61545,1292],{"class":173},[167,61547,1242],{"class":177},[167,61549,185],{"class":173},[167,61551,61552,61554,61556],{"class":169,"line":6975},[167,61553,504],{"class":173},[167,61555,10117],{"class":177},[167,61557,185],{"class":173},[167,61559,61560,61562,61564],{"class":169,"line":6989},[167,61561,282],{"class":173},[167,61563,299],{"class":177},[167,61565,185],{"class":173},[5367,61567,61568],{},[15,61569,6304,61570,25141,61572,25145,61574,25149,61576,21807,61578,4270],{},[87,61571,1008],{},[3933,61573,25144],{},[87,61575,25148],{},[87,61577,25152],{},[87,61579,23711],{},[22,61581,25158],{"id":25157},[3087,61583,61584,25164],{"id":25161},[87,61585,23699],{},[154,61587,61588],{"className":542,"code":25167,"filename":25168,"language":546,"meta":163,"style":163},[87,61589,61590,61604,61608,61638,61652,61656,61672,61676,61680,61702,61716,61720,61724],{"__ignoreMap":163},[167,61591,61592,61594,61596,61598,61600,61602],{"class":169,"line":170},[167,61593,192],{"class":191},[167,61595,1174],{"class":191},[167,61597,24036],{"class":173},[167,61599,198],{"class":191},[167,61601,24041],{"class":201},[167,61603,24044],{"class":173},[167,61605,61606],{"class":169,"line":188},[167,61607,209],{"emptyLinePlaceholder":208},[167,61609,61610,61612,61614,61616,61618,61620,61622,61624,61626,61628,61630,61632,61634,61636],{"class":169,"line":205},[167,61611,608],{"class":191},[167,61613,611],{"class":191},[167,61615,25197],{"class":219},[167,61617,583],{"class":191},[167,61619,24185],{"class":181},[167,61621,174],{"class":173},[167,61623,25206],{"class":181},[167,61625,1025],{"class":173},[167,61627,25211],{"class":219},[167,61629,659],{"class":191},[167,61631,662],{"class":219},[167,61633,24198],{"class":173},[167,61635,267],{"class":191},[167,61637,1905],{"class":173},[167,61639,61640,61642,61644,61646,61648,61650],{"class":169,"line":160},[167,61641,12749],{"class":181},[167,61643,229],{"class":173},[167,61645,24211],{"class":254},[167,61647,1025],{"class":173},[167,61649,23776],{"class":254},[167,61651,258],{"class":173},[167,61653,61654],{"class":169,"line":238},[167,61655,25240],{"class":18662},[167,61657,61658,61660,61662,61664,61666,61668,61670],{"class":169,"line":243},[167,61659,7419],{"class":191},[167,61661,25247],{"class":173},[167,61663,2550],{"class":191},[167,61665,5777],{"class":219},[167,61667,693],{"class":173},[167,61669,24238],{"class":191},[167,61671,24044],{"class":173},[167,61673,61674],{"class":169,"line":261},[167,61675,209],{"emptyLinePlaceholder":208},[167,61677,61678],{"class":169,"line":273},[167,61679,25266],{"class":18662},[167,61681,61682,61684,61686,61688,61690,61692,61694,61696,61698,61700],{"class":169,"line":279},[167,61683,7419],{"class":191},[167,61685,2526],{"class":173},[167,61687,11757],{"class":191},[167,61689,25277],{"class":173},[167,61691,6692],{"class":191},[167,61693,25282],{"class":219},[167,61695,25285],{"class":173},[167,61697,2550],{"class":191},[167,61699,24233],{"class":201},[167,61701,258],{"class":173},[167,61703,61704,61706,61708,61710,61712,61714],{"class":169,"line":289},[167,61705,25296],{"class":173},[167,61707,6692],{"class":191},[167,61709,25282],{"class":219},[167,61711,4270],{"class":173},[167,61713,17408],{"class":181},[167,61715,25307],{"class":173},[167,61717,61718],{"class":169,"line":294},[167,61719,4049],{"class":173},[167,61721,61722],{"class":169,"line":304},[167,61723,398],{"class":173},[167,61725,61726],{"class":169,"line":313},[167,61727,24148],{"class":173},[154,61729,61730],{"className":2879,"code":25322,"filename":25323,"language":2882,"meta":163,"style":163},[87,61731,61732,61744,61758,61762,61778,61782,61798,61806,61810,61814],{"__ignoreMap":163},[167,61733,61734,61736,61738,61740,61742],{"class":169,"line":170},[167,61735,608],{"class":191},[167,61737,611],{"class":191},[167,61739,25197],{"class":219},[167,61741,223],{"class":191},[167,61743,1905],{"class":173},[167,61745,61746,61748,61750,61752,61754,61756],{"class":169,"line":188},[167,61747,12749],{"class":181},[167,61749,229],{"class":173},[167,61751,24211],{"class":254},[167,61753,1025],{"class":173},[167,61755,23776],{"class":254},[167,61757,258],{"class":173},[167,61759,61760],{"class":169,"line":205},[167,61761,25240],{"class":18662},[167,61763,61764,61766,61768,61770,61772,61774,61776],{"class":169,"line":160},[167,61765,7419],{"class":191},[167,61767,25247],{"class":173},[167,61769,2550],{"class":191},[167,61771,5777],{"class":219},[167,61773,693],{"class":173},[167,61775,24238],{"class":191},[167,61777,24044],{"class":173},[167,61779,61780],{"class":169,"line":238},[167,61781,25266],{"class":18662},[167,61783,61784,61786,61788,61790,61792,61794,61796],{"class":169,"line":243},[167,61785,7419],{"class":191},[167,61787,2526],{"class":173},[167,61789,11757],{"class":191},[167,61791,25386],{"class":173},[167,61793,2550],{"class":191},[167,61795,24233],{"class":201},[167,61797,258],{"class":173},[167,61799,61800,61802,61804],{"class":169,"line":261},[167,61801,25397],{"class":173},[167,61803,17408],{"class":181},[167,61805,25307],{"class":173},[167,61807,61808],{"class":169,"line":273},[167,61809,4049],{"class":173},[167,61811,61812],{"class":169,"line":279},[167,61813,398],{"class":173},[167,61815,61816],{"class":169,"line":289},[167,61817,24148],{"class":173},[154,61819,61820],{"className":156,"code":25416,"filename":15284,"language":162,"meta":163,"style":163},[87,61821,61822,61832],{"__ignoreMap":163},[167,61823,61824,61826,61828,61830],{"class":169,"line":170},[167,61825,174],{"class":173},[167,61827,2650],{"class":177},[167,61829,25427],{"class":181},[167,61831,5325],{"class":173},[167,61833,61834,61836,61838,61840,61842,61844,61846,61848],{"class":169,"line":188},[167,61835,174],{"class":173},[167,61837,2650],{"class":177},[167,61839,25427],{"class":181},[167,61841,267],{"class":173},[167,61843,5080],{"class":201},[167,61845,25444],{"class":173},[167,61847,5080],{"class":201},[167,61849,5325],{"class":173},[3087,61851,61852,25454],{"id":25451},[87,61853,23999],{},[154,61855,61856],{"className":542,"code":25457,"filename":25168,"language":546,"meta":163,"style":163},[87,61857,61858,61872,61876,61886,61908,61930,61940,61944,61948,61970,61974,62000,62014,62040,62044,62066,62080,62090,62098,62102,62106,62110,62118,62126,62130,62144,62148,62152,62156,62164,62170,62196,62218,62232,62242,62250,62254,62258,62266,62274,62278,62288,62296,62302,62306],{"__ignoreMap":163},[167,61859,61860,61862,61864,61866,61868,61870],{"class":169,"line":170},[167,61861,192],{"class":191},[167,61863,1174],{"class":191},[167,61865,24036],{"class":173},[167,61867,198],{"class":191},[167,61869,24041],{"class":201},[167,61871,24044],{"class":173},[167,61873,61874],{"class":169,"line":188},[167,61875,209],{"emptyLinePlaceholder":208},[167,61877,61878,61880,61882,61884],{"class":169,"line":205},[167,61879,569],{"class":191},[167,61881,25484],{"class":181},[167,61883,223],{"class":191},[167,61885,1905],{"class":173},[167,61887,61888,61890,61892,61894,61896,61898,61900,61902,61904,61906],{"class":169,"line":160},[167,61889,25493],{"class":181},[167,61891,24116],{"class":191},[167,61893,2526],{"class":173},[167,61895,25500],{"class":254},[167,61897,583],{"class":191},[167,61899,25505],{"class":181},[167,61901,693],{"class":173},[167,61903,639],{"class":191},[167,61905,24085],{"class":219},[167,61907,24044],{"class":173},[167,61909,61910,61912,61914,61916,61918,61920,61922,61924,61926,61928],{"class":169,"line":238},[167,61911,25518],{"class":181},[167,61913,24116],{"class":191},[167,61915,2526],{"class":173},[167,61917,25500],{"class":254},[167,61919,583],{"class":191},[167,61921,25505],{"class":181},[167,61923,693],{"class":173},[167,61925,639],{"class":191},[167,61927,24085],{"class":219},[167,61929,24044],{"class":173},[167,61931,61932,61934,61936,61938],{"class":169,"line":243},[167,61933,25541],{"class":254},[167,61935,24116],{"class":191},[167,61937,25546],{"class":181},[167,61939,24044],{"class":173},[167,61941,61942],{"class":169,"line":261},[167,61943,24148],{"class":173},[167,61945,61946],{"class":169,"line":273},[167,61947,209],{"emptyLinePlaceholder":208},[167,61949,61950,61952,61954,61956,61958,61960,61962,61964,61966,61968],{"class":169,"line":279},[167,61951,569],{"class":191},[167,61953,25563],{"class":181},[167,61955,223],{"class":191},[167,61957,24103],{"class":181},[167,61959,24106],{"class":191},[167,61961,577],{"class":173},[167,61963,25574],{"class":254},[167,61965,24116],{"class":191},[167,61967,25579],{"class":181},[167,61969,25582],{"class":173},[167,61971,61972],{"class":169,"line":289},[167,61973,209],{"emptyLinePlaceholder":208},[167,61975,61976,61978,61980,61982,61984,61986,61988,61990,61992,61994,61996,61998],{"class":169,"line":294},[167,61977,608],{"class":191},[167,61979,611],{"class":191},[167,61981,25595],{"class":219},[167,61983,583],{"class":191},[167,61985,24185],{"class":181},[167,61987,174],{"class":173},[167,61989,25604],{"class":181},[167,61991,1025],{"class":173},[167,61993,25609],{"class":181},[167,61995,24198],{"class":173},[167,61997,267],{"class":191},[167,61999,1905],{"class":173},[167,62001,62002,62004,62006,62008,62010,62012],{"class":169,"line":304},[167,62003,12749],{"class":181},[167,62005,229],{"class":173},[167,62007,24211],{"class":254},[167,62009,1025],{"class":173},[167,62011,23776],{"class":254},[167,62013,258],{"class":173},[167,62015,62016,62018,62020,62022,62024,62026,62028,62030,62032,62034,62036,62038],{"class":169,"line":313},[167,62017,8266],{"class":191},[167,62019,577],{"class":173},[167,62021,25638],{"class":219},[167,62023,1025],{"class":173},[167,62025,25643],{"class":219},[167,62027,1025],{"class":173},[167,62029,22019],{"class":219},[167,62031,23409],{"class":173},[167,62033,267],{"class":191},[167,62035,24228],{"class":173},[167,62037,15799],{"class":191},[167,62039,25658],{"class":173},[167,62041,62042],{"class":169,"line":161},[167,62043,209],{"emptyLinePlaceholder":208},[167,62045,62046,62048,62050,62052,62054,62056,62058,62060,62062,62064],{"class":169,"line":335},[167,62047,8266],{"class":191},[167,62049,25669],{"class":219},[167,62051,223],{"class":191},[167,62053,4224],{"class":191},[167,62055,25579],{"class":181},[167,62057,1918],{"class":173},[167,62059,25680],{"class":254},[167,62061,693],{"class":173},[167,62063,639],{"class":191},[167,62065,1905],{"class":173},[167,62067,62068,62070,62072,62074,62076,62078],{"class":169,"line":341},[167,62069,25691],{"class":191},[167,62071,2526],{"class":173},[167,62073,216],{"class":191},[167,62075,25698],{"class":219},[167,62077,21967],{"class":191},[167,62079,25703],{"class":173},[167,62081,62082,62084,62086,62088],{"class":169,"line":489},[167,62083,14796],{"class":191},[167,62085,25710],{"class":173},[167,62087,25638],{"class":181},[167,62089,25715],{"class":173},[167,62091,62092,62094,62096],{"class":169,"line":495},[167,62093,25720],{"class":191},[167,62095,25723],{"class":181},[167,62097,25715],{"class":173},[167,62099,62100],{"class":169,"line":501},[167,62101,7287],{"class":173},[167,62103,62104],{"class":169,"line":512},[167,62105,25734],{"class":173},[167,62107,62108],{"class":169,"line":781},[167,62109,209],{"emptyLinePlaceholder":208},[167,62111,62112,62114,62116],{"class":169,"line":786},[167,62113,25743],{"class":173},[167,62115,25746],{"class":181},[167,62117,25749],{"class":173},[167,62119,62120,62122,62124],{"class":169,"line":2678},[167,62121,25754],{"class":173},[167,62123,267],{"class":191},[167,62125,25759],{"class":173},[167,62127,62128],{"class":169,"line":2692},[167,62129,398],{"class":173},[167,62131,62132,62134,62136,62138,62140,62142],{"class":169,"line":3575},[167,62133,16259],{"class":181},[167,62135,229],{"class":173},[167,62137,24211],{"class":254},[167,62139,1025],{"class":173},[167,62141,23776],{"class":254},[167,62143,258],{"class":173},[167,62145,62146],{"class":169,"line":5028},[167,62147,25782],{"class":18662},[167,62149,62150],{"class":169,"line":5037},[167,62151,25787],{"class":18662},[167,62153,62154],{"class":169,"line":5046},[167,62155,25792],{"class":18662},[167,62157,62158,62160,62162],{"class":169,"line":6756},[167,62159,25797],{"class":173},[167,62161,25800],{"class":181},[167,62163,25307],{"class":173},[167,62165,62166,62168],{"class":169,"line":6778},[167,62167,24520],{"class":191},[167,62169,25809],{"class":173},[167,62171,62172,62174,62176,62178,62180,62182,62184,62186,62188,62190,62192,62194],{"class":169,"line":6783},[167,62173,8266],{"class":191},[167,62175,577],{"class":173},[167,62177,25638],{"class":219},[167,62179,1025],{"class":173},[167,62181,25643],{"class":219},[167,62183,1025],{"class":173},[167,62185,22019],{"class":219},[167,62187,23409],{"class":173},[167,62189,267],{"class":191},[167,62191,24228],{"class":173},[167,62193,15799],{"class":191},[167,62195,25658],{"class":173},[167,62197,62198,62200,62202,62204,62206,62208,62210,62212,62214,62216],{"class":169,"line":6788},[167,62199,8266],{"class":191},[167,62201,25669],{"class":219},[167,62203,223],{"class":191},[167,62205,4224],{"class":191},[167,62207,25579],{"class":181},[167,62209,1918],{"class":173},[167,62211,25680],{"class":254},[167,62213,693],{"class":173},[167,62215,639],{"class":191},[167,62217,1905],{"class":173},[167,62219,62220,62222,62224,62226,62228,62230],{"class":169,"line":6793},[167,62221,25691],{"class":191},[167,62223,2526],{"class":173},[167,62225,216],{"class":191},[167,62227,25698],{"class":219},[167,62229,21967],{"class":191},[167,62231,25703],{"class":173},[167,62233,62234,62236,62238,62240],{"class":169,"line":6809},[167,62235,14796],{"class":191},[167,62237,25710],{"class":173},[167,62239,25638],{"class":181},[167,62241,25715],{"class":173},[167,62243,62244,62246,62248],{"class":169,"line":6824},[167,62245,25720],{"class":191},[167,62247,25723],{"class":181},[167,62249,25715],{"class":173},[167,62251,62252],{"class":169,"line":6829},[167,62253,7287],{"class":173},[167,62255,62256],{"class":169,"line":6836},[167,62257,25734],{"class":173},[167,62259,62260,62262,62264],{"class":169,"line":6845},[167,62261,25743],{"class":173},[167,62263,25746],{"class":181},[167,62265,25749],{"class":173},[167,62267,62268,62270,62272],{"class":169,"line":6854},[167,62269,25754],{"class":173},[167,62271,267],{"class":191},[167,62273,25759],{"class":173},[167,62275,62276],{"class":169,"line":6861},[167,62277,398],{"class":173},[167,62279,62280,62282,62284,62286],{"class":169,"line":6879},[167,62281,14622],{"class":181},[167,62283,229],{"class":173},[167,62285,24211],{"class":254},[167,62287,258],{"class":173},[167,62289,62290,62292,62294],{"class":169,"line":6884},[167,62291,25797],{"class":173},[167,62293,25800],{"class":181},[167,62295,25307],{"class":173},[167,62297,62298,62300],{"class":169,"line":6889},[167,62299,24520],{"class":191},[167,62301,25809],{"class":173},[167,62303,62304],{"class":169,"line":6898},[167,62305,398],{"class":173},[167,62307,62308],{"class":169,"line":6903},[167,62309,24148],{"class":173},[154,62311,62312],{"className":2879,"code":25952,"filename":25323,"language":2882,"meta":163,"style":163},[87,62313,62314,62326,62340,62366,62370,62392,62406,62416,62424,62428,62432,62436,62444,62452,62456,62470,62474,62478,62482,62490,62496,62522,62544,62558,62568,62576,62580,62584,62592,62600,62604,62614,62622,62628,62632],{"__ignoreMap":163},[167,62315,62316,62318,62320,62322,62324],{"class":169,"line":170},[167,62317,608],{"class":191},[167,62319,611],{"class":191},[167,62321,25595],{"class":219},[167,62323,223],{"class":191},[167,62325,1905],{"class":173},[167,62327,62328,62330,62332,62334,62336,62338],{"class":169,"line":188},[167,62329,12749],{"class":181},[167,62331,229],{"class":173},[167,62333,24211],{"class":254},[167,62335,1025],{"class":173},[167,62337,23776],{"class":254},[167,62339,258],{"class":173},[167,62341,62342,62344,62346,62348,62350,62352,62354,62356,62358,62360,62362,62364],{"class":169,"line":205},[167,62343,8266],{"class":191},[167,62345,577],{"class":173},[167,62347,25638],{"class":219},[167,62349,1025],{"class":173},[167,62351,25643],{"class":219},[167,62353,1025],{"class":173},[167,62355,22019],{"class":219},[167,62357,23409],{"class":173},[167,62359,267],{"class":191},[167,62361,24228],{"class":173},[167,62363,15799],{"class":191},[167,62365,25658],{"class":173},[167,62367,62368],{"class":169,"line":160},[167,62369,209],{"emptyLinePlaceholder":208},[167,62371,62372,62374,62376,62378,62380,62382,62384,62386,62388,62390],{"class":169,"line":238},[167,62373,8266],{"class":191},[167,62375,25669],{"class":219},[167,62377,223],{"class":191},[167,62379,4224],{"class":191},[167,62381,25579],{"class":181},[167,62383,1918],{"class":173},[167,62385,25680],{"class":254},[167,62387,693],{"class":173},[167,62389,639],{"class":191},[167,62391,1905],{"class":173},[167,62393,62394,62396,62398,62400,62402,62404],{"class":169,"line":243},[167,62395,25691],{"class":191},[167,62397,2526],{"class":173},[167,62399,216],{"class":191},[167,62401,25698],{"class":219},[167,62403,21967],{"class":191},[167,62405,25703],{"class":173},[167,62407,62408,62410,62412,62414],{"class":169,"line":261},[167,62409,14796],{"class":191},[167,62411,25710],{"class":173},[167,62413,25638],{"class":181},[167,62415,25715],{"class":173},[167,62417,62418,62420,62422],{"class":169,"line":273},[167,62419,25720],{"class":191},[167,62421,25723],{"class":181},[167,62423,25715],{"class":173},[167,62425,62426],{"class":169,"line":279},[167,62427,7287],{"class":173},[167,62429,62430],{"class":169,"line":289},[167,62431,25734],{"class":173},[167,62433,62434],{"class":169,"line":294},[167,62435,26077],{"class":173},[167,62437,62438,62440,62442],{"class":169,"line":304},[167,62439,25743],{"class":173},[167,62441,25746],{"class":181},[167,62443,25749],{"class":173},[167,62445,62446,62448,62450],{"class":169,"line":313},[167,62447,25754],{"class":173},[167,62449,267],{"class":191},[167,62451,25759],{"class":173},[167,62453,62454],{"class":169,"line":161},[167,62455,398],{"class":173},[167,62457,62458,62460,62462,62464,62466,62468],{"class":169,"line":335},[167,62459,16259],{"class":181},[167,62461,229],{"class":173},[167,62463,24211],{"class":254},[167,62465,1025],{"class":173},[167,62467,23776],{"class":254},[167,62469,258],{"class":173},[167,62471,62472],{"class":169,"line":341},[167,62473,25782],{"class":18662},[167,62475,62476],{"class":169,"line":489},[167,62477,25787],{"class":18662},[167,62479,62480],{"class":169,"line":495},[167,62481,25792],{"class":18662},[167,62483,62484,62486,62488],{"class":169,"line":501},[167,62485,25797],{"class":173},[167,62487,25800],{"class":181},[167,62489,25307],{"class":173},[167,62491,62492,62494],{"class":169,"line":512},[167,62493,24520],{"class":191},[167,62495,25809],{"class":173},[167,62497,62498,62500,62502,62504,62506,62508,62510,62512,62514,62516,62518,62520],{"class":169,"line":781},[167,62499,8266],{"class":191},[167,62501,577],{"class":173},[167,62503,25638],{"class":219},[167,62505,1025],{"class":173},[167,62507,25643],{"class":219},[167,62509,1025],{"class":173},[167,62511,22019],{"class":219},[167,62513,23409],{"class":173},[167,62515,267],{"class":191},[167,62517,24228],{"class":173},[167,62519,15799],{"class":191},[167,62521,25658],{"class":173},[167,62523,62524,62526,62528,62530,62532,62534,62536,62538,62540,62542],{"class":169,"line":786},[167,62525,8266],{"class":191},[167,62527,25669],{"class":219},[167,62529,223],{"class":191},[167,62531,4224],{"class":191},[167,62533,25579],{"class":181},[167,62535,1918],{"class":173},[167,62537,25680],{"class":254},[167,62539,693],{"class":173},[167,62541,639],{"class":191},[167,62543,1905],{"class":173},[167,62545,62546,62548,62550,62552,62554,62556],{"class":169,"line":2678},[167,62547,25691],{"class":191},[167,62549,2526],{"class":173},[167,62551,216],{"class":191},[167,62553,25698],{"class":219},[167,62555,21967],{"class":191},[167,62557,25703],{"class":173},[167,62559,62560,62562,62564,62566],{"class":169,"line":2692},[167,62561,14796],{"class":191},[167,62563,25710],{"class":173},[167,62565,25638],{"class":181},[167,62567,25715],{"class":173},[167,62569,62570,62572,62574],{"class":169,"line":3575},[167,62571,25720],{"class":191},[167,62573,25723],{"class":181},[167,62575,25715],{"class":173},[167,62577,62578],{"class":169,"line":5028},[167,62579,7287],{"class":173},[167,62581,62582],{"class":169,"line":5037},[167,62583,25734],{"class":173},[167,62585,62586,62588,62590],{"class":169,"line":5046},[167,62587,25743],{"class":173},[167,62589,25746],{"class":181},[167,62591,25749],{"class":173},[167,62593,62594,62596,62598],{"class":169,"line":6756},[167,62595,25754],{"class":173},[167,62597,267],{"class":191},[167,62599,25759],{"class":173},[167,62601,62602],{"class":169,"line":6778},[167,62603,398],{"class":173},[167,62605,62606,62608,62610,62612],{"class":169,"line":6783},[167,62607,14622],{"class":181},[167,62609,229],{"class":173},[167,62611,24211],{"class":254},[167,62613,258],{"class":173},[167,62615,62616,62618,62620],{"class":169,"line":6788},[167,62617,25797],{"class":173},[167,62619,25800],{"class":181},[167,62621,25307],{"class":173},[167,62623,62624,62626],{"class":169,"line":6793},[167,62625,24520],{"class":191},[167,62627,25809],{"class":173},[167,62629,62630],{"class":169,"line":6809},[167,62631,398],{"class":173},[167,62633,62634],{"class":169,"line":6824},[167,62635,24148],{"class":173},[154,62637,62638],{"className":156,"code":26280,"filename":15284,"language":162,"meta":163,"style":163},[87,62639,62640,62646,62656,62672,62688,62696,62702,62706,62710],{"__ignoreMap":163},[167,62641,62642,62644],{"class":169,"line":170},[167,62643,174],{"class":173},[167,62645,26289],{"class":177},[167,62647,62648,62650,62652,62654],{"class":169,"line":188},[167,62649,26294],{"class":181},[167,62651,267],{"class":173},[167,62653,5080],{"class":201},[167,62655,26301],{"class":173},[167,62657,62658,62660,62662,62664,62666,62668,62670],{"class":169,"line":205},[167,62659,26306],{"class":181},[167,62661,636],{"class":173},[167,62663,639],{"class":191},[167,62665,26313],{"class":173},[167,62667,267],{"class":191},[167,62669,26318],{"class":219},[167,62671,9754],{"class":173},[167,62673,62674,62676,62678,62680,62682,62684,62686],{"class":169,"line":160},[167,62675,26325],{"class":181},[167,62677,636],{"class":173},[167,62679,639],{"class":191},[167,62681,26313],{"class":173},[167,62683,267],{"class":191},[167,62685,5777],{"class":219},[167,62687,9754],{"class":173},[167,62689,62690,62692,62694],{"class":169,"line":238},[167,62691,26342],{"class":173},[167,62693,26345],{"class":219},[167,62695,599],{"class":173},[167,62697,62698,62700],{"class":169,"line":243},[167,62699,26352],{"class":173},[167,62701,5085],{"class":201},[167,62703,62704],{"class":169,"line":261},[167,62705,185],{"class":173},[167,62707,62708],{"class":169,"line":273},[167,62709,26363],{"class":173},[167,62711,62712,62714,62716],{"class":169,"line":279},[167,62713,282],{"class":173},[167,62715,1242],{"class":177},[167,62717,185],{"class":173},[5367,62719,62720],{},[15,62721,26376,62722,26379,62724,1662,62726,26384],{},[87,62723,15037],{},[87,62725,23784],{},[87,62727,23793],{},[22,62729,7678],{"id":7677},[33,62731,62732,62736,62740,62748,62754],{},[36,62733,26391,62734,1679],{},[3933,62735,26394],{},[36,62737,26397,62738,26400],{},[87,62739,11276],{},[36,62741,26403,62742,1025,62744,1025,62746,26410],{},[87,62743,2219],{},[87,62745,23916],{},[87,62747,23919],{},[36,62749,26413,62750,26417,62752,26420],{},[3933,62751,26416],{},[87,62753,15037],{},[36,62755,26423],{},[924,62757,26426],{},{"title":163,"searchDepth":188,"depth":188,"links":62759},[62760,62761,62762,62763,62764,62765,62768,62772],{"id":23683,"depth":188,"text":23684},{"id":6256,"depth":188,"text":6257},{"id":23829,"depth":188,"text":23830},{"id":23853,"depth":188,"text":23854},{"id":3084,"depth":188,"text":3085},{"id":7996,"depth":188,"text":7997,"children":62766},[62767],{"id":24003,"depth":205,"text":26437},{"id":25157,"depth":188,"text":25158,"children":62769},[62770,62771],{"id":25161,"depth":205,"text":26441},{"id":25451,"depth":205,"text":26443},{"id":7677,"depth":188,"text":7678},{"updatedAt":26450,"coverCaption":26446,"author":946,"keywords":62774},[3258,26452,26453,26454,3260,3973],[62776],{"headline":23680,"author":62777,"datePublished":26450,"@type":961},{"name":946,"@type":959},{"title":23674,"description":26448},[62780,62781,62782,62783,62784],{"tag":26466,"color":26467},{"tag":26469,"color":26470},{"tag":953,"color":971},{"tag":3269,"color":3270},{"tag":7730,"color":7731},{"id":62786,"title":62787,"body":62788,"cover":42726,"coverAlt":65652,"date":42728,"description":65653,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":65654,"navigation":208,"path":65658,"schemaOrg":65659,"seo":65663,"series":26460,"seriesDescription":60258,"seriesOrder":160,"seriesTitle":60259,"slug":942,"stem":65664,"tags":65665,"__hash__":65671},"blog\u002Fblog\u002Fdirectives-vue-v-bind-guide.en.md","Vue Directive: v-bind",{"type":8,"value":62789,"toc":65621},[62790,62796,62801,62807,62811,62817,62831,62837,62840,62843,62875,62878,62907,62912,62949,62953,62959,62977,62981,62984,63000,63003,63010,63013,63044,63047,63092,63098,63107,63109,63172,63177,63181,63186,63211,63220,63227,63232,63235,63241,63350,63464,63470,63575,63685,63691,63836,63978,63985,64107,64226,64232,64235,64349,64460,64466,64605,64749,64756,64760,64766,65168,65577,65579,65584,65587,65613,65619],[11,62791,62793,62794],{"id":62792},"vue-directive-v-bind","Vue Directive: ",[87,62795,23868],{},[15,62797,62798,62800],{},[87,62799,23868],{}," connects template attributes or props to reactive data.\nIf the state changes, the attribute changes too.",[15,62802,62803,62804,62806],{},"In Vue, ",[87,62805,23868],{}," is one of the core pieces that turns static HTML into dynamic UI without manual DOM manipulation.",[22,62808,62810],{"id":62809},"why-it-matters","Why it matters",[15,62812,62813,62814,62816],{},"Without ",[87,62815,23868],{},", you would end up writing imperative logic to:",[33,62818,62819,62822,62825,62828],{},[36,62820,62821],{},"Enable\u002Fdisable buttons.",[36,62823,62824],{},"Switch classes based on state.",[36,62826,62827],{},"Render dynamic links or images.",[36,62829,62830],{},"Pass data from a parent component to a child component.",[15,62832,62833,62834,62836],{},"With ",[87,62835,23868],{},", all of that becomes declarative.\nYou describe the relationship between state and UI, and Vue handles the updates.",[22,62838,62839],{"id":57680},"Core concept",[15,62841,62842],{},"Basic form:",[154,62844,62846],{"className":156,"code":62845,"filename":15284,"language":162,"meta":163,"style":163},"\u003Ca v-bind:href=\"url\">Go to site\u003C\u002Fa>\n",[87,62847,62848],{"__ignoreMap":163},[167,62849,62850,62852,62854,62856,62858,62860,62862,62864,62866,62868,62871,62873],{"class":169,"line":170},[167,62851,174],{"class":173},[167,62853,19092],{"class":177},[167,62855,39834],{"class":181},[167,62857,583],{"class":173},[167,62859,39839],{"class":181},[167,62861,267],{"class":173},[167,62863,5080],{"class":201},[167,62865,39846],{"class":173},[167,62867,5080],{"class":201},[167,62869,62870],{"class":173},">Go to site\u003C\u002F",[167,62872,19092],{"class":177},[167,62874,185],{"class":173},[15,62876,62877],{},"Recommended shorthand:",[154,62879,62881],{"className":156,"code":62880,"filename":15284,"language":162,"meta":163,"style":163},"\u003Ca :href=\"url\">Go to site\u003C\u002Fa>\n",[87,62882,62883],{"__ignoreMap":163},[167,62884,62885,62887,62889,62891,62893,62895,62897,62899,62901,62903,62905],{"class":169,"line":170},[167,62886,174],{"class":173},[167,62888,19092],{"class":177},[167,62890,5312],{"class":173},[167,62892,39839],{"class":181},[167,62894,267],{"class":173},[167,62896,5080],{"class":201},[167,62898,39846],{"class":173},[167,62900,5080],{"class":201},[167,62902,62870],{"class":173},[167,62904,19092],{"class":177},[167,62906,185],{"class":173},[15,62908,62909,62911],{},[87,62910,23868],{}," works with:",[33,62913,62914,62927,62932,62939,62944],{},[36,62915,62916,62917,1025,62919,1025,62921,1025,62923,1025,62925,39910],{},"HTML attributes (",[87,62918,39839],{},[87,62920,39902],{},[87,62922,39905],{},[87,62924,580],{},[87,62926,29272],{},[36,62928,62929,62930,39910],{},"component props (",[87,62931,39916],{},[36,62933,62934,62935,57920,62937,39925],{},"special bindings for ",[87,62936,39922],{},[87,62938,924],{},[36,62940,62941,62942,39910],{},"dynamic arguments (",[87,62943,39931],{},[36,62945,62946,62947,4270],{},"spread-like bindings (",[87,62948,39937],{},[22,62950,62952],{"id":62951},"when-to-use-it","When to use it",[15,62954,62955,62956,62958],{},"Use ",[87,62957,23868],{}," when you need:",[33,62960,62961,62964,62971,62974],{},[36,62962,62963],{},"Dynamic values in attributes.",[36,62965,62966,62967,11227,62969,4270],{},"State-driven presentation (",[87,62968,39922],{},[87,62970,924],{},[36,62972,62973],{},"Reactive data passed to child components.",[36,62975,62976],{},"Reusable components with configurable props.",[22,62978,62980],{"id":62979},"when-to-avoid-it","When to avoid it",[15,62982,62983],{},"Avoid it when:",[33,62985,62986,62989,62994],{},[36,62987,62988],{},"The value is fixed and never changes (plain static HTML is enough).",[36,62990,62991,62992,4270],{},"You are putting complex logic directly in the template (move it to ",[87,62993,1661],{},[36,62995,62996,62997,62999],{},"You are trying to use ",[87,62998,23868],{}," as a security or validation layer (it is not).",[22,63001,63002],{"id":57819},"Common mistakes",[3087,63004,63006,63007,63009],{"id":63005},"_1-forgetting-that-v-bind-evaluates-javascript","1) Forgetting that ",[87,63008,23868],{}," evaluates JavaScript",[15,63011,63012],{},"Incorrect:",[154,63014,63016],{"className":156,"code":39996,"filename":63015,"language":162,"meta":163,"style":163},"Incorrect",[87,63017,63018],{"__ignoreMap":163},[167,63019,63020,63022,63024,63026,63028,63030,63032,63034,63036,63038,63040,63042],{"class":169,"line":170},[167,63021,174],{"class":173},[167,63023,40006],{"class":177},[167,63025,5312],{"class":173},[167,63027,39902],{"class":181},[167,63029,267],{"class":173},[167,63031,5080],{"class":201},[167,63033,21857],{"class":191},[167,63035,40019],{"class":173},[167,63037,21857],{"class":191},[167,63039,40024],{"class":173},[167,63041,5080],{"class":201},[167,63043,5325],{"class":173},[15,63045,63046],{},"Correct:",[154,63048,63051],{"className":156,"code":63049,"filename":63050,"language":162,"meta":163,"style":163},"\u003Cimg src=\"\u002Fimages\u002Favatar.png\" \u002F>\n\u003C!-- or -->\n\u003Cimg :src=\"avatarUrl\" \u002F>\n","Correct",[87,63052,63053,63067,63072],{"__ignoreMap":163},[167,63054,63055,63057,63059,63061,63063,63065],{"class":169,"line":170},[167,63056,174],{"class":173},[167,63058,40006],{"class":177},[167,63060,40045],{"class":181},[167,63062,267],{"class":173},[167,63064,40050],{"class":201},[167,63066,5325],{"class":173},[167,63068,63069],{"class":169,"line":188},[167,63070,63071],{"class":18662},"\u003C!-- or -->\n",[167,63073,63074,63076,63078,63080,63082,63084,63086,63088,63090],{"class":169,"line":205},[167,63075,174],{"class":173},[167,63077,40006],{"class":177},[167,63079,5312],{"class":173},[167,63081,39902],{"class":181},[167,63083,267],{"class":173},[167,63085,5080],{"class":201},[167,63087,40074],{"class":173},[167,63089,5080],{"class":201},[167,63091,5325],{"class":173},[15,63093,63094,63095,63097],{},"If you use ",[87,63096,40084],{},", Vue expects a valid JS expression.",[3087,63099,63101,63102,63104,63105],{"id":63100},"_2-writing-too-much-inline-logic-in-class-or-style","2) Writing too much inline logic in ",[87,63103,40092],{}," or ",[87,63106,40095],{},[15,63108,63012],{},[154,63110,63113],{"className":156,"code":63111,"filename":63112,"language":162,"meta":163,"style":163},"\u003Cbutton :class=\"isAdmin && isActive && !isLocked ? 'btn btn-primary' : isLocked ? 'btn btn-muted' : 'btn'\">\n  Save\n\u003C\u002Fbutton>\n","Avoid",[87,63114,63115,63159,63164],{"__ignoreMap":163},[167,63116,63117,63119,63121,63123,63125,63127,63129,63131,63133,63135,63137,63139,63141,63143,63145,63147,63149,63151,63153,63155,63157],{"class":169,"line":170},[167,63118,174],{"class":173},[167,63120,507],{"class":177},[167,63122,5312],{"class":173},[167,63124,39922],{"class":181},[167,63126,267],{"class":173},[167,63128,5080],{"class":201},[167,63130,37175],{"class":173},[167,63132,8339],{"class":191},[167,63134,40123],{"class":173},[167,63136,8339],{"class":191},[167,63138,5625],{"class":191},[167,63140,37187],{"class":173},[167,63142,8316],{"class":191},[167,63144,40134],{"class":201},[167,63146,5312],{"class":191},[167,63148,40139],{"class":173},[167,63150,8316],{"class":191},[167,63152,40144],{"class":201},[167,63154,5312],{"class":191},[167,63156,40149],{"class":201},[167,63158,185],{"class":173},[167,63160,63161],{"class":169,"line":188},[167,63162,63163],{"class":173},"  Save\n",[167,63165,63166,63168,63170],{"class":169,"line":205},[167,63167,282],{"class":173},[167,63169,507],{"class":177},[167,63171,185],{"class":173},[15,63173,63174,63175,1679],{},"Better: extract this into ",[87,63176,1661],{},[3087,63178,63180],{"id":63179},"_3-mixing-up-an-html-attribute-with-a-component-prop","3) Mixing up an HTML attribute with a component prop",[15,63182,63183,63185],{},[87,63184,23868],{}," supports both, but in components you must pass the exact prop expected by the child:",[154,63187,63189],{"className":156,"code":5300,"filename":63188,"language":162,"meta":163,"style":163},"Parent",[87,63190,63191],{"__ignoreMap":163},[167,63192,63193,63195,63197,63199,63201,63203,63205,63207,63209],{"class":169,"line":170},[167,63194,174],{"class":173},[167,63196,5309],{"class":177},[167,63198,5312],{"class":173},[167,63200,729],{"class":181},[167,63202,267],{"class":173},[167,63204,5080],{"class":201},[167,63206,729],{"class":173},[167,63208,5080],{"class":201},[167,63210,5325],{"class":173},[15,63212,63213,63214,63216,63217,63219],{},"If the child expects ",[87,63215,40209],{}," and you pass ",[87,63218,729],{},", the data will not match.",[3087,63221,63223,63224,63226],{"id":63222},"_4-assuming-v-bind-protects-data","4) Assuming ",[87,63225,23868],{}," \"protects\" data",[15,63228,63229,63231],{},[87,63230,23868],{}," only reflects state in the UI.\nIt does not replace backend validation or authorization rules.",[22,63233,63234],{"id":57925},"Practical examples",[3087,63236,63238,63239,6219],{"id":63237},"_1-basic-dynamic-link-href","1) Basic: dynamic link (",[87,63240,39839],{},[154,63242,63245],{"className":156,"code":63243,"filename":3260,"highlights":63244,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst docsUrl = ref(\"https:\u002F\u002Fvuejs.org\u002F\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Vue Docs\u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[160,273],[87,63246,63247,63257,63269,63273,63290,63298,63302,63310,63342],{"__ignoreMap":163},[167,63248,63249,63251,63253,63255],{"class":169,"line":170},[167,63250,174],{"class":173},[167,63252,178],{"class":177},[167,63254,182],{"class":181},[167,63256,185],{"class":173},[167,63258,63259,63261,63263,63265,63267],{"class":169,"line":188},[167,63260,192],{"class":191},[167,63262,195],{"class":173},[167,63264,198],{"class":191},[167,63266,24041],{"class":201},[167,63268,24044],{"class":173},[167,63270,63271],{"class":169,"line":205},[167,63272,209],{"emptyLinePlaceholder":208},[167,63274,63276,63278,63280,63282,63284,63286,63288],{"class":63275,"line":160},[169,213],[167,63277,216],{"class":191},[167,63279,40273],{"class":219},[167,63281,223],{"class":191},[167,63283,226],{"class":181},[167,63285,229],{"class":173},[167,63287,40282],{"class":201},[167,63289,24169],{"class":173},[167,63291,63292,63294,63296],{"class":169,"line":238},[167,63293,282],{"class":173},[167,63295,178],{"class":177},[167,63297,185],{"class":173},[167,63299,63300],{"class":169,"line":243},[167,63301,209],{"emptyLinePlaceholder":208},[167,63303,63304,63306,63308],{"class":169,"line":261},[167,63305,174],{"class":173},[167,63307,299],{"class":177},[167,63309,185],{"class":173},[167,63311,63313,63315,63317,63319,63321,63323,63325,63327,63329,63331,63333,63335,63338,63340],{"class":63312,"line":273},[169,213],[167,63314,307],{"class":173},[167,63316,19092],{"class":177},[167,63318,40314],{"class":181},[167,63320,267],{"class":173},[167,63322,40319],{"class":201},[167,63324,24293],{"class":181},[167,63326,267],{"class":173},[167,63328,40326],{"class":201},[167,63330,40329],{"class":181},[167,63332,267],{"class":173},[167,63334,40334],{"class":201},[167,63336,63337],{"class":173},">Vue Docs\u003C\u002F",[167,63339,19092],{"class":177},[167,63341,185],{"class":173},[167,63343,63344,63346,63348],{"class":169,"line":279},[167,63345,282],{"class":173},[167,63347,299],{"class":177},[167,63349,185],{"class":173},[154,63351,63354],{"className":156,"code":63352,"filename":3973,"highlights":63353,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      docsUrl: \"https:\u002F\u002Fvuejs.org\u002F\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Vue Docs\u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[238,304],[87,63355,63356,63364,63372,63378,63384,63393,63397,63401,63405,63413,63417,63425,63456],{"__ignoreMap":163},[167,63357,63358,63360,63362],{"class":169,"line":170},[167,63359,174],{"class":173},[167,63361,178],{"class":177},[167,63363,185],{"class":173},[167,63365,63366,63368,63370],{"class":169,"line":188},[167,63367,608],{"class":191},[167,63369,3991],{"class":191},[167,63371,1905],{"class":173},[167,63373,63374,63376],{"class":169,"line":205},[167,63375,7176],{"class":181},[167,63377,763],{"class":173},[167,63379,63380,63382],{"class":169,"line":160},[167,63381,1937],{"class":191},[167,63383,1905],{"class":173},[167,63385,63387,63389,63391],{"class":63386,"line":238},[169,213],[167,63388,40389],{"class":173},[167,63390,40282],{"class":201},[167,63392,393],{"class":173},[167,63394,63395],{"class":169,"line":243},[167,63396,24370],{"class":173},[167,63398,63399],{"class":169,"line":261},[167,63400,398],{"class":173},[167,63402,63403],{"class":169,"line":273},[167,63404,24148],{"class":173},[167,63406,63407,63409,63411],{"class":169,"line":279},[167,63408,282],{"class":173},[167,63410,178],{"class":177},[167,63412,185],{"class":173},[167,63414,63415],{"class":169,"line":289},[167,63416,209],{"emptyLinePlaceholder":208},[167,63418,63419,63421,63423],{"class":169,"line":294},[167,63420,174],{"class":173},[167,63422,299],{"class":177},[167,63424,185],{"class":173},[167,63426,63428,63430,63432,63434,63436,63438,63440,63442,63444,63446,63448,63450,63452,63454],{"class":63427,"line":304},[169,213],[167,63429,307],{"class":173},[167,63431,19092],{"class":177},[167,63433,40314],{"class":181},[167,63435,267],{"class":173},[167,63437,40319],{"class":201},[167,63439,24293],{"class":181},[167,63441,267],{"class":173},[167,63443,40326],{"class":201},[167,63445,40329],{"class":181},[167,63447,267],{"class":173},[167,63449,40334],{"class":201},[167,63451,63337],{"class":173},[167,63453,19092],{"class":177},[167,63455,185],{"class":173},[167,63457,63458,63460,63462],{"class":169,"line":313},[167,63459,282],{"class":173},[167,63461,299],{"class":177},[167,63463,185],{"class":173},[3087,63465,63467,63468,6219],{"id":63466},"_2-dynamic-boolean-attribute-disabled","2) Dynamic boolean attribute (",[87,63469,39905],{},[154,63471,63474],{"className":156,"code":63472,"filename":3260,"highlights":63473,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isSaving = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :disabled=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save changes\" }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[160,273],[87,63475,63476,63486,63498,63502,63519,63527,63531,63539,63554,63559,63567],{"__ignoreMap":163},[167,63477,63478,63480,63482,63484],{"class":169,"line":170},[167,63479,174],{"class":173},[167,63481,178],{"class":177},[167,63483,182],{"class":181},[167,63485,185],{"class":173},[167,63487,63488,63490,63492,63494,63496],{"class":169,"line":188},[167,63489,192],{"class":191},[167,63491,195],{"class":173},[167,63493,198],{"class":191},[167,63495,24041],{"class":201},[167,63497,24044],{"class":173},[167,63499,63500],{"class":169,"line":205},[167,63501,209],{"emptyLinePlaceholder":208},[167,63503,63505,63507,63509,63511,63513,63515,63517],{"class":63504,"line":160},[169,213],[167,63506,216],{"class":191},[167,63508,40510],{"class":219},[167,63510,223],{"class":191},[167,63512,226],{"class":181},[167,63514,229],{"class":173},[167,63516,3392],{"class":219},[167,63518,24169],{"class":173},[167,63520,63521,63523,63525],{"class":169,"line":238},[167,63522,282],{"class":173},[167,63524,178],{"class":177},[167,63526,185],{"class":173},[167,63528,63529],{"class":169,"line":243},[167,63530,209],{"emptyLinePlaceholder":208},[167,63532,63533,63535,63537],{"class":169,"line":261},[167,63534,174],{"class":173},[167,63536,299],{"class":177},[167,63538,185],{"class":173},[167,63540,63542,63544,63546,63548,63550,63552],{"class":63541,"line":273},[169,213],[167,63543,307],{"class":173},[167,63545,507],{"class":177},[167,63547,40550],{"class":181},[167,63549,267],{"class":173},[167,63551,40555],{"class":201},[167,63553,185],{"class":173},[167,63555,63556],{"class":169,"line":279},[167,63557,63558],{"class":173},"    {{ isSaving ? \"Saving...\" : \"Save changes\" }}\n",[167,63560,63561,63563,63565],{"class":169,"line":289},[167,63562,504],{"class":173},[167,63564,507],{"class":177},[167,63566,185],{"class":173},[167,63568,63569,63571,63573],{"class":169,"line":294},[167,63570,282],{"class":173},[167,63572,299],{"class":177},[167,63574,185],{"class":173},[154,63576,63579],{"className":156,"code":63577,"filename":3973,"highlights":63578,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isSaving: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :disabled=\"isSaving\">\n    {{ isSaving ? \"Saving...\" : \"Save changes\" }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[238,304],[87,63580,63581,63589,63597,63603,63609,63618,63622,63626,63630,63638,63642,63650,63665,63669,63677],{"__ignoreMap":163},[167,63582,63583,63585,63587],{"class":169,"line":170},[167,63584,174],{"class":173},[167,63586,178],{"class":177},[167,63588,185],{"class":173},[167,63590,63591,63593,63595],{"class":169,"line":188},[167,63592,608],{"class":191},[167,63594,3991],{"class":191},[167,63596,1905],{"class":173},[167,63598,63599,63601],{"class":169,"line":205},[167,63600,7176],{"class":181},[167,63602,763],{"class":173},[167,63604,63605,63607],{"class":169,"line":160},[167,63606,1937],{"class":191},[167,63608,1905],{"class":173},[167,63610,63612,63614,63616],{"class":63611,"line":238},[169,213],[167,63613,40618],{"class":173},[167,63615,3392],{"class":219},[167,63617,393],{"class":173},[167,63619,63620],{"class":169,"line":243},[167,63621,24370],{"class":173},[167,63623,63624],{"class":169,"line":261},[167,63625,398],{"class":173},[167,63627,63628],{"class":169,"line":273},[167,63629,24148],{"class":173},[167,63631,63632,63634,63636],{"class":169,"line":279},[167,63633,282],{"class":173},[167,63635,178],{"class":177},[167,63637,185],{"class":173},[167,63639,63640],{"class":169,"line":289},[167,63641,209],{"emptyLinePlaceholder":208},[167,63643,63644,63646,63648],{"class":169,"line":294},[167,63645,174],{"class":173},[167,63647,299],{"class":177},[167,63649,185],{"class":173},[167,63651,63653,63655,63657,63659,63661,63663],{"class":63652,"line":304},[169,213],[167,63654,307],{"class":173},[167,63656,507],{"class":177},[167,63658,40550],{"class":181},[167,63660,267],{"class":173},[167,63662,40555],{"class":201},[167,63664,185],{"class":173},[167,63666,63667],{"class":169,"line":313},[167,63668,63558],{"class":173},[167,63670,63671,63673,63675],{"class":169,"line":161},[167,63672,504],{"class":173},[167,63674,507],{"class":177},[167,63676,185],{"class":173},[167,63678,63679,63681,63683],{"class":169,"line":335},[167,63680,282],{"class":173},[167,63682,299],{"class":177},[167,63684,185],{"class":173},[3087,63686,40693,63688,63690],{"id":63687},"_3-v-bindclass-with-an-object-recommended-pattern",[87,63689,40696],{}," with an object (recommended pattern)",[154,63692,63695],{"className":156,"code":63693,"filename":3260,"highlights":63694,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isActive = ref(true);\nconst hasError = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp\n    :class=\"{\n      'text-success': isActive,\n      'text-danger': hasError,\n      'text-muted': !isActive && !hasError,\n    }\"\n  >\n    System status\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[160,289,294,304,313,161],[87,63696,63697,63707,63719,63723,63740,63756,63764,63768,63776,63782,63791,63796,63801,63806,63811,63815,63820,63828],{"__ignoreMap":163},[167,63698,63699,63701,63703,63705],{"class":169,"line":170},[167,63700,174],{"class":173},[167,63702,178],{"class":177},[167,63704,182],{"class":181},[167,63706,185],{"class":173},[167,63708,63709,63711,63713,63715,63717],{"class":169,"line":188},[167,63710,192],{"class":191},[167,63712,195],{"class":173},[167,63714,198],{"class":191},[167,63716,24041],{"class":201},[167,63718,24044],{"class":173},[167,63720,63721],{"class":169,"line":205},[167,63722,209],{"emptyLinePlaceholder":208},[167,63724,63726,63728,63730,63732,63734,63736,63738],{"class":63725,"line":160},[169,213],[167,63727,216],{"class":191},[167,63729,5786],{"class":219},[167,63731,223],{"class":191},[167,63733,226],{"class":181},[167,63735,229],{"class":173},[167,63737,390],{"class":219},[167,63739,24169],{"class":173},[167,63741,63742,63744,63746,63748,63750,63752,63754],{"class":169,"line":238},[167,63743,216],{"class":191},[167,63745,9486],{"class":219},[167,63747,223],{"class":191},[167,63749,226],{"class":181},[167,63751,229],{"class":173},[167,63753,3392],{"class":219},[167,63755,24169],{"class":173},[167,63757,63758,63760,63762],{"class":169,"line":243},[167,63759,282],{"class":173},[167,63761,178],{"class":177},[167,63763,185],{"class":173},[167,63765,63766],{"class":169,"line":261},[167,63767,209],{"emptyLinePlaceholder":208},[167,63769,63770,63772,63774],{"class":169,"line":273},[167,63771,174],{"class":173},[167,63773,299],{"class":177},[167,63775,185],{"class":173},[167,63777,63778,63780],{"class":169,"line":279},[167,63779,307],{"class":173},[167,63781,40789],{"class":177},[167,63783,63785,63787,63789],{"class":63784,"line":289},[169,213],[167,63786,40795],{"class":181},[167,63788,267],{"class":173},[167,63790,40800],{"class":201},[167,63792,63794],{"class":63793,"line":294},[169,213],[167,63795,40806],{"class":201},[167,63797,63799],{"class":63798,"line":304},[169,213],[167,63800,40812],{"class":201},[167,63802,63804],{"class":63803,"line":313},[169,213],[167,63805,40818],{"class":201},[167,63807,63809],{"class":63808,"line":161},[169,213],[167,63810,40824],{"class":201},[167,63812,63813],{"class":169,"line":335},[167,63814,492],{"class":173},[167,63816,63817],{"class":169,"line":341},[167,63818,63819],{"class":173},"    System status\n",[167,63821,63822,63824,63826],{"class":169,"line":489},[167,63823,504],{"class":173},[167,63825,15],{"class":177},[167,63827,185],{"class":173},[167,63829,63830,63832,63834],{"class":169,"line":495},[167,63831,282],{"class":173},[167,63833,299],{"class":177},[167,63835,185],{"class":173},[154,63837,63840],{"className":156,"code":63838,"filename":3973,"highlights":63839,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isActive: true,\n      hasError: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp\n    :class=\"{\n      'text-success': isActive,\n      'text-danger': hasError,\n      'text-muted': !isActive && !hasError,\n    }\"\n  >\n    System status\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[238,313,161,335,341,489],[87,63841,63842,63850,63858,63864,63870,63879,63887,63891,63895,63899,63907,63911,63919,63926,63935,63940,63945,63950,63954,63958,63962,63970],{"__ignoreMap":163},[167,63843,63844,63846,63848],{"class":169,"line":170},[167,63845,174],{"class":173},[167,63847,178],{"class":177},[167,63849,185],{"class":173},[167,63851,63852,63854,63856],{"class":169,"line":188},[167,63853,608],{"class":191},[167,63855,3991],{"class":191},[167,63857,1905],{"class":173},[167,63859,63860,63862],{"class":169,"line":205},[167,63861,7176],{"class":181},[167,63863,763],{"class":173},[167,63865,63866,63868],{"class":169,"line":160},[167,63867,1937],{"class":191},[167,63869,1905],{"class":173},[167,63871,63873,63875,63877],{"class":63872,"line":238},[169,213],[167,63874,40889],{"class":173},[167,63876,390],{"class":219},[167,63878,393],{"class":173},[167,63880,63881,63883,63885],{"class":169,"line":243},[167,63882,10652],{"class":173},[167,63884,3392],{"class":219},[167,63886,393],{"class":173},[167,63888,63889],{"class":169,"line":261},[167,63890,24370],{"class":173},[167,63892,63893],{"class":169,"line":273},[167,63894,398],{"class":173},[167,63896,63897],{"class":169,"line":279},[167,63898,24148],{"class":173},[167,63900,63901,63903,63905],{"class":169,"line":289},[167,63902,282],{"class":173},[167,63904,178],{"class":177},[167,63906,185],{"class":173},[167,63908,63909],{"class":169,"line":294},[167,63910,209],{"emptyLinePlaceholder":208},[167,63912,63913,63915,63917],{"class":169,"line":304},[167,63914,174],{"class":173},[167,63916,299],{"class":177},[167,63918,185],{"class":173},[167,63920,63922,63924],{"class":63921,"line":313},[169,213],[167,63923,307],{"class":173},[167,63925,40789],{"class":177},[167,63927,63929,63931,63933],{"class":63928,"line":161},[169,213],[167,63930,40795],{"class":181},[167,63932,267],{"class":173},[167,63934,40800],{"class":201},[167,63936,63938],{"class":63937,"line":335},[169,213],[167,63939,40806],{"class":201},[167,63941,63943],{"class":63942,"line":341},[169,213],[167,63944,40812],{"class":201},[167,63946,63948],{"class":63947,"line":489},[169,213],[167,63949,40818],{"class":201},[167,63951,63952],{"class":169,"line":495},[167,63953,40824],{"class":201},[167,63955,63956],{"class":169,"line":501},[167,63957,492],{"class":173},[167,63959,63960],{"class":169,"line":512},[167,63961,63819],{"class":173},[167,63963,63964,63966,63968],{"class":169,"line":781},[167,63965,504],{"class":173},[167,63967,15],{"class":177},[167,63969,185],{"class":173},[167,63971,63972,63974,63976],{"class":169,"line":786},[167,63973,282],{"class":173},[167,63975,299],{"class":177},[167,63977,185],{"class":173},[3087,63979,63981,63982,63984],{"id":63980},"_4-dynamic-v-bindstyle-with-an-object","4) Dynamic ",[87,63983,40998],{}," with an object",[154,63986,63989],{"className":156,"code":63987,"filename":3260,"highlights":63988,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst fontSize = ref(16);\nconst textColor = ref(\"#1D5BA1\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n    Text with reactive style\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[160,238,279],[87,63990,63991,64001,64013,64017,64034,64051,64059,64063,64071,64086,64091,64099],{"__ignoreMap":163},[167,63992,63993,63995,63997,63999],{"class":169,"line":170},[167,63994,174],{"class":173},[167,63996,178],{"class":177},[167,63998,182],{"class":181},[167,64000,185],{"class":173},[167,64002,64003,64005,64007,64009,64011],{"class":169,"line":188},[167,64004,192],{"class":191},[167,64006,195],{"class":173},[167,64008,198],{"class":191},[167,64010,24041],{"class":201},[167,64012,24044],{"class":173},[167,64014,64015],{"class":169,"line":205},[167,64016,209],{"emptyLinePlaceholder":208},[167,64018,64020,64022,64024,64026,64028,64030,64032],{"class":64019,"line":160},[169,213],[167,64021,216],{"class":191},[167,64023,41039],{"class":219},[167,64025,223],{"class":191},[167,64027,226],{"class":181},[167,64029,229],{"class":173},[167,64031,41048],{"class":219},[167,64033,24169],{"class":173},[167,64035,64037,64039,64041,64043,64045,64047,64049],{"class":64036,"line":238},[169,213],[167,64038,216],{"class":191},[167,64040,41058],{"class":219},[167,64042,223],{"class":191},[167,64044,226],{"class":181},[167,64046,229],{"class":173},[167,64048,41067],{"class":201},[167,64050,24169],{"class":173},[167,64052,64053,64055,64057],{"class":169,"line":243},[167,64054,282],{"class":173},[167,64056,178],{"class":177},[167,64058,185],{"class":173},[167,64060,64061],{"class":169,"line":261},[167,64062,209],{"emptyLinePlaceholder":208},[167,64064,64065,64067,64069],{"class":169,"line":273},[167,64066,174],{"class":173},[167,64068,299],{"class":177},[167,64070,185],{"class":173},[167,64072,64074,64076,64078,64080,64082,64084],{"class":64073,"line":279},[169,213],[167,64075,307],{"class":173},[167,64077,15],{"class":177},[167,64079,39102],{"class":181},[167,64081,267],{"class":173},[167,64083,41103],{"class":201},[167,64085,185],{"class":173},[167,64087,64088],{"class":169,"line":289},[167,64089,64090],{"class":173},"    Text with reactive style\n",[167,64092,64093,64095,64097],{"class":169,"line":294},[167,64094,504],{"class":173},[167,64096,15],{"class":177},[167,64098,185],{"class":173},[167,64100,64101,64103,64105],{"class":169,"line":304},[167,64102,282],{"class":173},[167,64104,299],{"class":177},[167,64106,185],{"class":173},[154,64108,64111],{"className":156,"code":64109,"filename":3973,"highlights":64110,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      fontSize: 16,\n      textColor: \"#1D5BA1\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n    Text with reactive style\n  \u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[238,243,313],[87,64112,64113,64121,64129,64135,64141,64150,64159,64163,64167,64171,64179,64183,64191,64206,64210,64218],{"__ignoreMap":163},[167,64114,64115,64117,64119],{"class":169,"line":170},[167,64116,174],{"class":173},[167,64118,178],{"class":177},[167,64120,185],{"class":173},[167,64122,64123,64125,64127],{"class":169,"line":188},[167,64124,608],{"class":191},[167,64126,3991],{"class":191},[167,64128,1905],{"class":173},[167,64130,64131,64133],{"class":169,"line":205},[167,64132,7176],{"class":181},[167,64134,763],{"class":173},[167,64136,64137,64139],{"class":169,"line":160},[167,64138,1937],{"class":191},[167,64140,1905],{"class":173},[167,64142,64144,64146,64148],{"class":64143,"line":238},[169,213],[167,64145,41166],{"class":173},[167,64147,41048],{"class":219},[167,64149,393],{"class":173},[167,64151,64153,64155,64157],{"class":64152,"line":243},[169,213],[167,64154,41176],{"class":173},[167,64156,41067],{"class":201},[167,64158,393],{"class":173},[167,64160,64161],{"class":169,"line":261},[167,64162,24370],{"class":173},[167,64164,64165],{"class":169,"line":273},[167,64166,398],{"class":173},[167,64168,64169],{"class":169,"line":279},[167,64170,24148],{"class":173},[167,64172,64173,64175,64177],{"class":169,"line":289},[167,64174,282],{"class":173},[167,64176,178],{"class":177},[167,64178,185],{"class":173},[167,64180,64181],{"class":169,"line":294},[167,64182,209],{"emptyLinePlaceholder":208},[167,64184,64185,64187,64189],{"class":169,"line":304},[167,64186,174],{"class":173},[167,64188,299],{"class":177},[167,64190,185],{"class":173},[167,64192,64194,64196,64198,64200,64202,64204],{"class":64193,"line":313},[169,213],[167,64195,307],{"class":173},[167,64197,15],{"class":177},[167,64199,39102],{"class":181},[167,64201,267],{"class":173},[167,64203,41103],{"class":201},[167,64205,185],{"class":173},[167,64207,64208],{"class":169,"line":161},[167,64209,64090],{"class":173},[167,64211,64212,64214,64216],{"class":169,"line":335},[167,64213,504],{"class":173},[167,64215,15],{"class":177},[167,64217,185],{"class":173},[167,64219,64220,64222,64224],{"class":169,"line":341},[167,64221,282],{"class":173},[167,64223,299],{"class":177},[167,64225,185],{"class":173},[3087,64227,64229,64230],{"id":64228},"_5-dynamic-argument-attrnamevalue","5) Dynamic argument: ",[87,64231,39931],{},[15,64233,64234],{},"Useful when the attribute name itself depends on state.",[154,64236,64239],{"className":156,"code":64237,"filename":3260,"highlights":64238,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst attrName = ref(\"title\");\nconst attrValue = ref(\"Dynamic tooltip\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[160,238,279],[87,64240,64241,64251,64263,64267,64284,64302,64310,64314,64322,64341],{"__ignoreMap":163},[167,64242,64243,64245,64247,64249],{"class":169,"line":170},[167,64244,174],{"class":173},[167,64246,178],{"class":177},[167,64248,182],{"class":181},[167,64250,185],{"class":173},[167,64252,64253,64255,64257,64259,64261],{"class":169,"line":188},[167,64254,192],{"class":191},[167,64256,195],{"class":173},[167,64258,198],{"class":191},[167,64260,24041],{"class":201},[167,64262,24044],{"class":173},[167,64264,64265],{"class":169,"line":205},[167,64266,209],{"emptyLinePlaceholder":208},[167,64268,64270,64272,64274,64276,64278,64280,64282],{"class":64269,"line":160},[169,213],[167,64271,216],{"class":191},[167,64273,41296],{"class":219},[167,64275,223],{"class":191},[167,64277,226],{"class":181},[167,64279,229],{"class":173},[167,64281,41305],{"class":201},[167,64283,24169],{"class":173},[167,64285,64287,64289,64291,64293,64295,64297,64300],{"class":64286,"line":238},[169,213],[167,64288,216],{"class":191},[167,64290,41315],{"class":219},[167,64292,223],{"class":191},[167,64294,226],{"class":181},[167,64296,229],{"class":173},[167,64298,64299],{"class":201},"\"Dynamic tooltip\"",[167,64301,24169],{"class":173},[167,64303,64304,64306,64308],{"class":169,"line":243},[167,64305,282],{"class":173},[167,64307,178],{"class":177},[167,64309,185],{"class":173},[167,64311,64312],{"class":169,"line":261},[167,64313,209],{"emptyLinePlaceholder":208},[167,64315,64316,64318,64320],{"class":169,"line":273},[167,64317,174],{"class":173},[167,64319,299],{"class":177},[167,64321,185],{"class":173},[167,64323,64325,64327,64329,64331,64333,64335,64337,64339],{"class":64324,"line":279},[169,213],[167,64326,307],{"class":173},[167,64328,507],{"class":177},[167,64330,41356],{"class":181},[167,64332,267],{"class":173},[167,64334,41361],{"class":201},[167,64336,41364],{"class":173},[167,64338,507],{"class":177},[167,64340,185],{"class":173},[167,64342,64343,64345,64347],{"class":169,"line":289},[167,64344,282],{"class":173},[167,64346,299],{"class":177},[167,64348,185],{"class":173},[154,64350,64353],{"className":156,"code":64351,"filename":3973,"highlights":64352,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      attrName: \"title\",\n      attrValue: \"Dynamic tooltip\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[238,243,313],[87,64354,64355,64363,64371,64377,64383,64392,64401,64405,64409,64413,64421,64425,64433,64452],{"__ignoreMap":163},[167,64356,64357,64359,64361],{"class":169,"line":170},[167,64358,174],{"class":173},[167,64360,178],{"class":177},[167,64362,185],{"class":173},[167,64364,64365,64367,64369],{"class":169,"line":188},[167,64366,608],{"class":191},[167,64368,3991],{"class":191},[167,64370,1905],{"class":173},[167,64372,64373,64375],{"class":169,"line":205},[167,64374,7176],{"class":181},[167,64376,763],{"class":173},[167,64378,64379,64381],{"class":169,"line":160},[167,64380,1937],{"class":191},[167,64382,1905],{"class":173},[167,64384,64386,64388,64390],{"class":64385,"line":238},[169,213],[167,64387,41416],{"class":173},[167,64389,41305],{"class":201},[167,64391,393],{"class":173},[167,64393,64395,64397,64399],{"class":64394,"line":243},[169,213],[167,64396,41426],{"class":173},[167,64398,64299],{"class":201},[167,64400,393],{"class":173},[167,64402,64403],{"class":169,"line":261},[167,64404,24370],{"class":173},[167,64406,64407],{"class":169,"line":273},[167,64408,398],{"class":173},[167,64410,64411],{"class":169,"line":279},[167,64412,24148],{"class":173},[167,64414,64415,64417,64419],{"class":169,"line":289},[167,64416,282],{"class":173},[167,64418,178],{"class":177},[167,64420,185],{"class":173},[167,64422,64423],{"class":169,"line":294},[167,64424,209],{"emptyLinePlaceholder":208},[167,64426,64427,64429,64431],{"class":169,"line":304},[167,64428,174],{"class":173},[167,64430,299],{"class":177},[167,64432,185],{"class":173},[167,64434,64436,64438,64440,64442,64444,64446,64448,64450],{"class":64435,"line":313},[169,213],[167,64437,307],{"class":173},[167,64439,507],{"class":177},[167,64441,41356],{"class":181},[167,64443,267],{"class":173},[167,64445,41361],{"class":201},[167,64447,41364],{"class":173},[167,64449,507],{"class":177},[167,64451,185],{"class":173},[167,64453,64454,64456,64458],{"class":169,"line":161},[167,64455,282],{"class":173},[167,64457,299],{"class":177},[167,64459,185],{"class":173},[3087,64461,41493,64463,64465],{"id":64462},"_6-v-bindobj-to-pass-multiple-attributes-or-props",[87,64464,41496],{}," to pass multiple attributes or props",[154,64467,64470],{"className":156,"code":64468,"filename":3260,"highlights":64469,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst inputAttrs = ref({\n  id: \"email\",\n  type: \"email\",\n  placeholder: \"you@email.com\",\n  autocomplete: \"email\",\n  required: true,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-bind=\"inputAttrs\" \u002F>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,279,289,161],[87,64471,64472,64482,64494,64498,64511,64520,64529,64539,64548,64557,64562,64570,64574,64582,64597],{"__ignoreMap":163},[167,64473,64474,64476,64478,64480],{"class":169,"line":170},[167,64475,174],{"class":173},[167,64477,178],{"class":177},[167,64479,182],{"class":181},[167,64481,185],{"class":173},[167,64483,64484,64486,64488,64490,64492],{"class":169,"line":188},[167,64485,192],{"class":191},[167,64487,195],{"class":173},[167,64489,198],{"class":191},[167,64491,24041],{"class":201},[167,64493,24044],{"class":173},[167,64495,64496],{"class":169,"line":205},[167,64497,209],{"emptyLinePlaceholder":208},[167,64499,64501,64503,64505,64507,64509],{"class":64500,"line":160},[169,213],[167,64502,216],{"class":191},[167,64504,41537],{"class":219},[167,64506,223],{"class":191},[167,64508,226],{"class":181},[167,64510,372],{"class":173},[167,64512,64514,64516,64518],{"class":64513,"line":238},[169,213],[167,64515,41549],{"class":173},[167,64517,37707],{"class":201},[167,64519,393],{"class":173},[167,64521,64523,64525,64527],{"class":64522,"line":243},[169,213],[167,64524,41559],{"class":173},[167,64526,37707],{"class":201},[167,64528,393],{"class":173},[167,64530,64532,64534,64537],{"class":64531,"line":261},[169,213],[167,64533,41569],{"class":173},[167,64535,64536],{"class":201},"\"you@email.com\"",[167,64538,393],{"class":173},[167,64540,64542,64544,64546],{"class":64541,"line":273},[169,213],[167,64543,41579],{"class":173},[167,64545,37707],{"class":201},[167,64547,393],{"class":173},[167,64549,64551,64553,64555],{"class":64550,"line":279},[169,213],[167,64552,41589],{"class":173},[167,64554,390],{"class":219},[167,64556,393],{"class":173},[167,64558,64560],{"class":64559,"line":289},[169,213],[167,64561,27327],{"class":173},[167,64563,64564,64566,64568],{"class":169,"line":294},[167,64565,282],{"class":173},[167,64567,178],{"class":177},[167,64569,185],{"class":173},[167,64571,64572],{"class":169,"line":304},[167,64573,209],{"emptyLinePlaceholder":208},[167,64575,64576,64578,64580],{"class":169,"line":313},[167,64577,174],{"class":173},[167,64579,299],{"class":177},[167,64581,185],{"class":173},[167,64583,64585,64587,64589,64591,64593,64595],{"class":64584,"line":161},[169,213],[167,64586,307],{"class":173},[167,64588,2650],{"class":177},[167,64590,39834],{"class":181},[167,64592,267],{"class":173},[167,64594,41632],{"class":201},[167,64596,5325],{"class":173},[167,64598,64599,64601,64603],{"class":169,"line":335},[167,64600,282],{"class":173},[167,64602,299],{"class":177},[167,64604,185],{"class":173},[154,64606,64609],{"className":156,"code":64607,"filename":3973,"highlights":64608,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      inputAttrs: {\n        id: \"email\",\n        type: \"email\",\n        placeholder: \"you@email.com\",\n        autocomplete: \"email\",\n        required: true,\n      },\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-bind=\"inputAttrs\" \u002F>\n\u003C\u002Ftemplate>\n",[238,243,261,273,279,289,294,495],[87,64610,64611,64619,64627,64633,64639,64644,64653,64662,64671,64680,64689,64694,64698,64702,64706,64714,64718,64726,64741],{"__ignoreMap":163},[167,64612,64613,64615,64617],{"class":169,"line":170},[167,64614,174],{"class":173},[167,64616,178],{"class":177},[167,64618,185],{"class":173},[167,64620,64621,64623,64625],{"class":169,"line":188},[167,64622,608],{"class":191},[167,64624,3991],{"class":191},[167,64626,1905],{"class":173},[167,64628,64629,64631],{"class":169,"line":205},[167,64630,7176],{"class":181},[167,64632,763],{"class":173},[167,64634,64635,64637],{"class":169,"line":160},[167,64636,1937],{"class":191},[167,64638,1905],{"class":173},[167,64640,64642],{"class":64641,"line":238},[169,213],[167,64643,41682],{"class":173},[167,64645,64647,64649,64651],{"class":64646,"line":243},[169,213],[167,64648,41688],{"class":173},[167,64650,37707],{"class":201},[167,64652,393],{"class":173},[167,64654,64656,64658,64660],{"class":64655,"line":261},[169,213],[167,64657,41698],{"class":173},[167,64659,37707],{"class":201},[167,64661,393],{"class":173},[167,64663,64665,64667,64669],{"class":64664,"line":273},[169,213],[167,64666,41708],{"class":173},[167,64668,64536],{"class":201},[167,64670,393],{"class":173},[167,64672,64674,64676,64678],{"class":64673,"line":279},[169,213],[167,64675,41718],{"class":173},[167,64677,37707],{"class":201},[167,64679,393],{"class":173},[167,64681,64683,64685,64687],{"class":64682,"line":289},[169,213],[167,64684,41728],{"class":173},[167,64686,390],{"class":219},[167,64688,393],{"class":173},[167,64690,64692],{"class":64691,"line":294},[169,213],[167,64693,8642],{"class":173},[167,64695,64696],{"class":169,"line":304},[167,64697,24370],{"class":173},[167,64699,64700],{"class":169,"line":313},[167,64701,398],{"class":173},[167,64703,64704],{"class":169,"line":161},[167,64705,24148],{"class":173},[167,64707,64708,64710,64712],{"class":169,"line":335},[167,64709,282],{"class":173},[167,64711,178],{"class":177},[167,64713,185],{"class":173},[167,64715,64716],{"class":169,"line":341},[167,64717,209],{"emptyLinePlaceholder":208},[167,64719,64720,64722,64724],{"class":169,"line":489},[167,64721,174],{"class":173},[167,64723,299],{"class":177},[167,64725,185],{"class":173},[167,64727,64729,64731,64733,64735,64737,64739],{"class":64728,"line":495},[169,213],[167,64730,307],{"class":173},[167,64732,2650],{"class":177},[167,64734,39834],{"class":181},[167,64736,267],{"class":173},[167,64738,41632],{"class":201},[167,64740,5325],{"class":173},[167,64742,64743,64745,64747],{"class":169,"line":501},[167,64744,282],{"class":173},[167,64746,299],{"class":177},[167,64748,185],{"class":173},[5367,64750,64751],{},[15,64752,64753,64755],{},[87,64754,41496],{}," is also common for prop forwarding in base components.",[22,64757,64759],{"id":64758},"integrated-example","Integrated example",[15,64761,64762,64763,64765],{},"Simple form using ",[87,64764,23868],{}," for attributes, classes, and state.",[154,64767,64769],{"className":156,"code":64768,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from \"vue\";\n\nconst email = ref(\"\");\nconst isSubmitting = ref(false);\nconst hasError = ref(false);\n\nconst inputAttrs = computed(() => ({\n  type: \"email\",\n  placeholder: \"Enter your email\",\n  autocomplete: \"email\",\n  required: true,\n}));\n\nconst buttonClass = computed(() => ({\n  \"btn-primary\": !isSubmitting.value,\n  \"btn-disabled\": isSubmitting.value,\n}));\n\nfunction submit() {\n  hasError.value = email.value.trim() === \"\";\n  if (hasError.value) return;\n  isSubmitting.value = true;\n  setTimeout(() => {\n    isSubmitting.value = false;\n  }, 1000);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" \u002F>\n\n    \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n      {{ isSubmitting ? \"Submitting...\" : \"Submit\" }}\n    \u003C\u002Fbutton>\n\n    \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n      {{ hasError ? \"Email is required.\" : \"Ready to submit.\" }}\n    \u003C\u002Fp>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[87,64770,64771,64781,64793,64797,64813,64829,64845,64849,64865,64873,64882,64890,64898,64902,64906,64922,64932,64938,64942,64946,64954,64972,64982,64992,65002,65012,65020,65024,65032,65036,65044,65058,65084,65088,65108,65113,65121,65125,65139,65144,65152,65160],{"__ignoreMap":163},[167,64772,64773,64775,64777,64779],{"class":169,"line":170},[167,64774,174],{"class":173},[167,64776,178],{"class":177},[167,64778,182],{"class":181},[167,64780,185],{"class":173},[167,64782,64783,64785,64787,64789,64791],{"class":169,"line":188},[167,64784,192],{"class":191},[167,64786,1805],{"class":173},[167,64788,198],{"class":191},[167,64790,24041],{"class":201},[167,64792,24044],{"class":173},[167,64794,64795],{"class":169,"line":205},[167,64796,209],{"emptyLinePlaceholder":208},[167,64798,64799,64801,64803,64805,64807,64809,64811],{"class":169,"line":160},[167,64800,216],{"class":191},[167,64802,37598],{"class":219},[167,64804,223],{"class":191},[167,64806,226],{"class":181},[167,64808,229],{"class":173},[167,64810,31161],{"class":201},[167,64812,24169],{"class":173},[167,64814,64815,64817,64819,64821,64823,64825,64827],{"class":169,"line":238},[167,64816,216],{"class":191},[167,64818,41863],{"class":219},[167,64820,223],{"class":191},[167,64822,226],{"class":181},[167,64824,229],{"class":173},[167,64826,3392],{"class":219},[167,64828,24169],{"class":173},[167,64830,64831,64833,64835,64837,64839,64841,64843],{"class":169,"line":243},[167,64832,216],{"class":191},[167,64834,9486],{"class":219},[167,64836,223],{"class":191},[167,64838,226],{"class":181},[167,64840,229],{"class":173},[167,64842,3392],{"class":219},[167,64844,24169],{"class":173},[167,64846,64847],{"class":169,"line":261},[167,64848,209],{"emptyLinePlaceholder":208},[167,64850,64851,64853,64855,64857,64859,64861,64863],{"class":169,"line":273},[167,64852,216],{"class":191},[167,64854,41537],{"class":219},[167,64856,223],{"class":191},[167,64858,1898],{"class":181},[167,64860,1493],{"class":173},[167,64862,639],{"class":191},[167,64864,642],{"class":173},[167,64866,64867,64869,64871],{"class":169,"line":279},[167,64868,41559],{"class":173},[167,64870,37707],{"class":201},[167,64872,393],{"class":173},[167,64874,64875,64877,64880],{"class":169,"line":289},[167,64876,41569],{"class":173},[167,64878,64879],{"class":201},"\"Enter your email\"",[167,64881,393],{"class":173},[167,64883,64884,64886,64888],{"class":169,"line":294},[167,64885,41579],{"class":173},[167,64887,37707],{"class":201},[167,64889,393],{"class":173},[167,64891,64892,64894,64896],{"class":169,"line":304},[167,64893,41589],{"class":173},[167,64895,390],{"class":219},[167,64897,393],{"class":173},[167,64899,64900],{"class":169,"line":313},[167,64901,41947],{"class":173},[167,64903,64904],{"class":169,"line":161},[167,64905,209],{"emptyLinePlaceholder":208},[167,64907,64908,64910,64912,64914,64916,64918,64920],{"class":169,"line":335},[167,64909,216],{"class":191},[167,64911,41958],{"class":219},[167,64913,223],{"class":191},[167,64915,1898],{"class":181},[167,64917,1493],{"class":173},[167,64919,639],{"class":191},[167,64921,642],{"class":173},[167,64923,64924,64926,64928,64930],{"class":169,"line":341},[167,64925,41973],{"class":201},[167,64927,1108],{"class":173},[167,64929,6641],{"class":191},[167,64931,41980],{"class":173},[167,64933,64934,64936],{"class":169,"line":489},[167,64935,41985],{"class":201},[167,64937,41988],{"class":173},[167,64939,64940],{"class":169,"line":495},[167,64941,41947],{"class":173},[167,64943,64944],{"class":169,"line":501},[167,64945,209],{"emptyLinePlaceholder":208},[167,64947,64948,64950,64952],{"class":169,"line":512},[167,64949,246],{"class":191},[167,64951,42003],{"class":181},[167,64953,763],{"class":173},[167,64955,64956,64958,64960,64962,64964,64966,64968,64970],{"class":169,"line":781},[167,64957,9943],{"class":173},[167,64959,267],{"class":191},[167,64961,42014],{"class":173},[167,64963,2500],{"class":181},[167,64965,14087],{"class":173},[167,64967,2550],{"class":191},[167,64969,38799],{"class":201},[167,64971,24044],{"class":173},[167,64973,64974,64976,64978,64980],{"class":169,"line":786},[167,64975,2544],{"class":191},[167,64977,42031],{"class":173},[167,64979,24238],{"class":191},[167,64981,24044],{"class":173},[167,64983,64984,64986,64988,64990],{"class":169,"line":2678},[167,64985,42040],{"class":173},[167,64987,267],{"class":191},[167,64989,26318],{"class":219},[167,64991,24044],{"class":173},[167,64993,64994,64996,64998,65000],{"class":169,"line":2692},[167,64995,42051],{"class":181},[167,64997,1493],{"class":173},[167,64999,639],{"class":191},[167,65001,1905],{"class":173},[167,65003,65004,65006,65008,65010],{"class":169,"line":3575},[167,65005,42062],{"class":173},[167,65007,267],{"class":191},[167,65009,5777],{"class":219},[167,65011,24044],{"class":173},[167,65013,65014,65016,65018],{"class":169,"line":5028},[167,65015,1957],{"class":173},[167,65017,17180],{"class":219},[167,65019,24169],{"class":173},[167,65021,65022],{"class":169,"line":5037},[167,65023,276],{"class":173},[167,65025,65026,65028,65030],{"class":169,"line":5046},[167,65027,282],{"class":173},[167,65029,178],{"class":177},[167,65031,185],{"class":173},[167,65033,65034],{"class":169,"line":6756},[167,65035,209],{"emptyLinePlaceholder":208},[167,65037,65038,65040,65042],{"class":169,"line":6778},[167,65039,174],{"class":173},[167,65041,299],{"class":177},[167,65043,185],{"class":173},[167,65045,65046,65048,65050,65052,65054,65056],{"class":169,"line":6783},[167,65047,307],{"class":173},[167,65049,4305],{"class":177},[167,65051,4308],{"class":181},[167,65053,267],{"class":173},[167,65055,4348],{"class":201},[167,65057,185],{"class":173},[167,65059,65060,65062,65064,65066,65068,65070,65072,65074,65076,65078,65080,65082],{"class":169,"line":6788},[167,65061,1257],{"class":173},[167,65063,2650],{"class":177},[167,65065,39834],{"class":181},[167,65067,267],{"class":173},[167,65069,41632],{"class":201},[167,65071,2653],{"class":181},[167,65073,267],{"class":173},[167,65075,37707],{"class":201},[167,65077,42135],{"class":181},[167,65079,267],{"class":173},[167,65081,42140],{"class":201},[167,65083,5325],{"class":173},[167,65085,65086],{"class":169,"line":6793},[167,65087,209],{"emptyLinePlaceholder":208},[167,65089,65090,65092,65094,65096,65098,65100,65102,65104,65106],{"class":169,"line":6809},[167,65091,1257],{"class":173},[167,65093,507],{"class":177},[167,65095,40550],{"class":181},[167,65097,267],{"class":173},[167,65099,42159],{"class":201},[167,65101,42135],{"class":181},[167,65103,267],{"class":173},[167,65105,42166],{"class":201},[167,65107,185],{"class":173},[167,65109,65110],{"class":169,"line":6824},[167,65111,65112],{"class":173},"      {{ isSubmitting ? \"Submitting...\" : \"Submit\" }}\n",[167,65114,65115,65117,65119],{"class":169,"line":6829},[167,65116,1292],{"class":173},[167,65118,507],{"class":177},[167,65120,185],{"class":173},[167,65122,65123],{"class":169,"line":6836},[167,65124,209],{"emptyLinePlaceholder":208},[167,65126,65127,65129,65131,65133,65135,65137],{"class":169,"line":6845},[167,65128,1257],{"class":173},[167,65130,15],{"class":177},[167,65132,39102],{"class":181},[167,65134,267],{"class":173},[167,65136,42198],{"class":201},[167,65138,185],{"class":173},[167,65140,65141],{"class":169,"line":6854},[167,65142,65143],{"class":173},"      {{ hasError ? \"Email is required.\" : \"Ready to submit.\" }}\n",[167,65145,65146,65148,65150],{"class":169,"line":6861},[167,65147,1292],{"class":173},[167,65149,15],{"class":177},[167,65151,185],{"class":173},[167,65153,65154,65156,65158],{"class":169,"line":6879},[167,65155,504],{"class":173},[167,65157,4305],{"class":177},[167,65159,185],{"class":173},[167,65161,65162,65164,65166],{"class":169,"line":6884},[167,65163,282],{"class":173},[167,65165,299],{"class":177},[167,65167,185],{"class":173},[154,65169,65171],{"className":156,"code":65170,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      email: \"\",\n      isSubmitting: false,\n      hasError: false,\n    };\n  },\n  computed: {\n    inputAttrs() {\n      return {\n        type: \"email\",\n        placeholder: \"Enter your email\",\n        autocomplete: \"email\",\n        required: true,\n      };\n    },\n    buttonClass() {\n      return {\n        \"btn-primary\": !this.isSubmitting,\n        \"btn-disabled\": this.isSubmitting,\n      };\n    },\n  },\n  methods: {\n    submit() {\n      this.hasError = this.email.trim() === \"\";\n      if (this.hasError) return;\n      this.isSubmitting = true;\n      setTimeout(() => {\n        this.isSubmitting = false;\n      }, 1000);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submit\">\n    \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" \u002F>\n\n    \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n      {{ isSubmitting ? \"Submitting...\" : \"Submit\" }}\n    \u003C\u002Fbutton>\n\n    \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n      {{ hasError ? \"Email is required.\" : \"Ready to submit.\" }}\n    \u003C\u002Fp>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[87,65172,65173,65181,65189,65195,65201,65209,65217,65225,65229,65233,65237,65243,65249,65257,65265,65273,65281,65285,65289,65295,65301,65313,65323,65327,65331,65335,65339,65345,65367,65381,65393,65403,65415,65423,65427,65431,65435,65443,65447,65455,65469,65495,65499,65519,65523,65531,65535,65549,65553,65561,65569],{"__ignoreMap":163},[167,65174,65175,65177,65179],{"class":169,"line":170},[167,65176,174],{"class":173},[167,65178,178],{"class":177},[167,65180,185],{"class":173},[167,65182,65183,65185,65187],{"class":169,"line":188},[167,65184,608],{"class":191},[167,65186,3991],{"class":191},[167,65188,1905],{"class":173},[167,65190,65191,65193],{"class":169,"line":205},[167,65192,7176],{"class":181},[167,65194,763],{"class":173},[167,65196,65197,65199],{"class":169,"line":160},[167,65198,1937],{"class":191},[167,65200,1905],{"class":173},[167,65202,65203,65205,65207],{"class":169,"line":238},[167,65204,37802],{"class":173},[167,65206,31161],{"class":201},[167,65208,393],{"class":173},[167,65210,65211,65213,65215],{"class":169,"line":243},[167,65212,42275],{"class":173},[167,65214,3392],{"class":219},[167,65216,393],{"class":173},[167,65218,65219,65221,65223],{"class":169,"line":261},[167,65220,10652],{"class":173},[167,65222,3392],{"class":219},[167,65224,393],{"class":173},[167,65226,65227],{"class":169,"line":273},[167,65228,24370],{"class":173},[167,65230,65231],{"class":169,"line":279},[167,65232,398],{"class":173},[167,65234,65235],{"class":169,"line":289},[167,65236,8755],{"class":173},[167,65238,65239,65241],{"class":169,"line":294},[167,65240,42304],{"class":181},[167,65242,763],{"class":173},[167,65244,65245,65247],{"class":169,"line":304},[167,65246,8767],{"class":191},[167,65248,1905],{"class":173},[167,65250,65251,65253,65255],{"class":169,"line":313},[167,65252,41698],{"class":173},[167,65254,37707],{"class":201},[167,65256,393],{"class":173},[167,65258,65259,65261,65263],{"class":169,"line":161},[167,65260,41708],{"class":173},[167,65262,64879],{"class":201},[167,65264,393],{"class":173},[167,65266,65267,65269,65271],{"class":169,"line":335},[167,65268,41718],{"class":173},[167,65270,37707],{"class":201},[167,65272,393],{"class":173},[167,65274,65275,65277,65279],{"class":169,"line":341},[167,65276,41728],{"class":173},[167,65278,390],{"class":219},[167,65280,393],{"class":173},[167,65282,65283],{"class":169,"line":489},[167,65284,42349],{"class":173},[167,65286,65287],{"class":169,"line":495},[167,65288,755],{"class":173},[167,65290,65291,65293],{"class":169,"line":501},[167,65292,42358],{"class":181},[167,65294,763],{"class":173},[167,65296,65297,65299],{"class":169,"line":512},[167,65298,8767],{"class":191},[167,65300,1905],{"class":173},[167,65302,65303,65305,65307,65309,65311],{"class":169,"line":781},[167,65304,42371],{"class":201},[167,65306,1108],{"class":173},[167,65308,6641],{"class":191},[167,65310,4927],{"class":219},[167,65312,42380],{"class":173},[167,65314,65315,65317,65319,65321],{"class":169,"line":786},[167,65316,42385],{"class":201},[167,65318,1108],{"class":173},[167,65320,4927],{"class":219},[167,65322,42380],{"class":173},[167,65324,65325],{"class":169,"line":2678},[167,65326,42349],{"class":173},[167,65328,65329],{"class":169,"line":2692},[167,65330,755],{"class":173},[167,65332,65333],{"class":169,"line":3575},[167,65334,398],{"class":173},[167,65336,65337],{"class":169,"line":5028},[167,65338,4419],{"class":173},[167,65340,65341,65343],{"class":169,"line":5037},[167,65342,42412],{"class":181},[167,65344,763],{"class":173},[167,65346,65347,65349,65351,65353,65355,65357,65359,65361,65363,65365],{"class":169,"line":5046},[167,65348,741],{"class":219},[167,65350,10715],{"class":173},[167,65352,267],{"class":191},[167,65354,7351],{"class":219},[167,65356,37838],{"class":173},[167,65358,2500],{"class":181},[167,65360,14087],{"class":173},[167,65362,2550],{"class":191},[167,65364,38799],{"class":201},[167,65366,24044],{"class":173},[167,65368,65369,65371,65373,65375,65377,65379],{"class":169,"line":6756},[167,65370,7261],{"class":191},[167,65372,2526],{"class":173},[167,65374,4927],{"class":219},[167,65376,42447],{"class":173},[167,65378,24238],{"class":191},[167,65380,24044],{"class":173},[167,65382,65383,65385,65387,65389,65391],{"class":169,"line":6778},[167,65384,741],{"class":219},[167,65386,42458],{"class":173},[167,65388,267],{"class":191},[167,65390,26318],{"class":219},[167,65392,24044],{"class":173},[167,65394,65395,65397,65399,65401],{"class":169,"line":6783},[167,65396,42469],{"class":181},[167,65398,1493],{"class":173},[167,65400,639],{"class":191},[167,65402,1905],{"class":173},[167,65404,65405,65407,65409,65411,65413],{"class":169,"line":6788},[167,65406,14773],{"class":219},[167,65408,42458],{"class":173},[167,65410,267],{"class":191},[167,65412,5777],{"class":219},[167,65414,24044],{"class":173},[167,65416,65417,65419,65421],{"class":169,"line":6793},[167,65418,13048],{"class":173},[167,65420,17180],{"class":219},[167,65422,24169],{"class":173},[167,65424,65425],{"class":169,"line":6809},[167,65426,755],{"class":173},[167,65428,65429],{"class":169,"line":6824},[167,65430,398],{"class":173},[167,65432,65433],{"class":169,"line":6829},[167,65434,24148],{"class":173},[167,65436,65437,65439,65441],{"class":169,"line":6836},[167,65438,282],{"class":173},[167,65440,178],{"class":177},[167,65442,185],{"class":173},[167,65444,65445],{"class":169,"line":6845},[167,65446,209],{"emptyLinePlaceholder":208},[167,65448,65449,65451,65453],{"class":169,"line":6854},[167,65450,174],{"class":173},[167,65452,299],{"class":177},[167,65454,185],{"class":173},[167,65456,65457,65459,65461,65463,65465,65467],{"class":169,"line":6861},[167,65458,307],{"class":173},[167,65460,4305],{"class":177},[167,65462,4308],{"class":181},[167,65464,267],{"class":173},[167,65466,4348],{"class":201},[167,65468,185],{"class":173},[167,65470,65471,65473,65475,65477,65479,65481,65483,65485,65487,65489,65491,65493],{"class":169,"line":6879},[167,65472,1257],{"class":173},[167,65474,2650],{"class":177},[167,65476,39834],{"class":181},[167,65478,267],{"class":173},[167,65480,41632],{"class":201},[167,65482,2653],{"class":181},[167,65484,267],{"class":173},[167,65486,37707],{"class":201},[167,65488,42135],{"class":181},[167,65490,267],{"class":173},[167,65492,42140],{"class":201},[167,65494,5325],{"class":173},[167,65496,65497],{"class":169,"line":6884},[167,65498,209],{"emptyLinePlaceholder":208},[167,65500,65501,65503,65505,65507,65509,65511,65513,65515,65517],{"class":169,"line":6889},[167,65502,1257],{"class":173},[167,65504,507],{"class":177},[167,65506,40550],{"class":181},[167,65508,267],{"class":173},[167,65510,42159],{"class":201},[167,65512,42135],{"class":181},[167,65514,267],{"class":173},[167,65516,42166],{"class":201},[167,65518,185],{"class":173},[167,65520,65521],{"class":169,"line":6898},[167,65522,65112],{"class":173},[167,65524,65525,65527,65529],{"class":169,"line":6903},[167,65526,1292],{"class":173},[167,65528,507],{"class":177},[167,65530,185],{"class":173},[167,65532,65533],{"class":169,"line":6912},[167,65534,209],{"emptyLinePlaceholder":208},[167,65536,65537,65539,65541,65543,65545,65547],{"class":169,"line":6928},[167,65538,1257],{"class":173},[167,65540,15],{"class":177},[167,65542,39102],{"class":181},[167,65544,267],{"class":173},[167,65546,42198],{"class":201},[167,65548,185],{"class":173},[167,65550,65551],{"class":169,"line":6949},[167,65552,65143],{"class":173},[167,65554,65555,65557,65559],{"class":169,"line":6954},[167,65556,1292],{"class":173},[167,65558,15],{"class":177},[167,65560,185],{"class":173},[167,65562,65563,65565,65567],{"class":169,"line":6975},[167,65564,504],{"class":173},[167,65566,4305],{"class":177},[167,65568,185],{"class":173},[167,65570,65571,65573,65575],{"class":169,"line":6989},[167,65572,282],{"class":173},[167,65574,299],{"class":177},[167,65576,185],{"class":173},[22,65578,60191],{"id":60190},[15,65580,65581,65583],{},[87,65582,23868],{}," is the declarative way to connect state and attributes in Vue.\nMastering it helps you build dynamic interfaces that stay clean and maintainable.",[15,65585,65586],{},"Key takeaways:",[33,65588,65589,65596,65603,65608],{},[36,65590,65591,65593,65594,1679],{},[87,65592,583],{}," is shorthand for ",[87,65595,23868],{},[36,65597,65598,65599,57860,65601,1679],{},"Use it for attributes, props, ",[87,65600,39922],{},[87,65602,924],{},[36,65604,65605,65606,1679],{},"Avoid complex inline logic: move rules into ",[87,65607,1661],{},[36,65609,65610,65612],{},[87,65611,41496],{}," is ideal for grouping attributes\u002Fprops.",[15,65614,65615,65616,65618],{},"If you understand ",[87,65617,23868],{}," well, you understand a core part of how Vue turns reactivity into real UI.",[924,65620,42694],{},{"title":163,"searchDepth":188,"depth":188,"links":65622},[65623,65624,65625,65626,65627,65636,65650,65651],{"id":62809,"depth":188,"text":62810},{"id":57680,"depth":188,"text":62839},{"id":62951,"depth":188,"text":62952},{"id":62979,"depth":188,"text":62980},{"id":57819,"depth":188,"text":63002,"children":65628},[65629,65631,65633,65634],{"id":63005,"depth":205,"text":65630},"1) Forgetting that v-bind evaluates JavaScript",{"id":63100,"depth":205,"text":65632},"2) Writing too much inline logic in :class or :style",{"id":63179,"depth":205,"text":63180},{"id":63222,"depth":205,"text":65635},"4) Assuming v-bind \"protects\" data",{"id":57925,"depth":188,"text":63234,"children":65637},[65638,65640,65642,65644,65646,65648],{"id":63237,"depth":205,"text":65639},"1) Basic: dynamic link (href)",{"id":63466,"depth":205,"text":65641},"2) Dynamic boolean attribute (disabled)",{"id":63687,"depth":205,"text":65643},"3) v-bind:class with an object (recommended pattern)",{"id":63980,"depth":205,"text":65645},"4) Dynamic v-bind:style with an object",{"id":64228,"depth":205,"text":65647},"5) Dynamic argument: :[attrName]=\"value\"",{"id":64462,"depth":205,"text":65649},"6) v-bind=\"obj\" to pass multiple attributes or props",{"id":64758,"depth":188,"text":64759},{"id":60190,"depth":188,"text":60191},"Temporary cover image for the Vue v-bind article","Learn how to use v-bind in Vue from basic syntax to advanced patterns: dynamic attributes, reactive class\u002Fstyle bindings, component props, and common mistakes.",{"updatedAt":42731,"coverCaption":65655,"author":946,"keywords":65656},"Temporary cover: replace with TODOvue final artwork",[3258,23868,65657,42734,42735,3260,3973],"dynamic attributes","\u002Fblog\u002Fdirectives-vue-v-bind-guide.en",[65660],{"headline":65661,"author":65662,"datePublished":42731,"@type":961},"Vue directive v-bind: guide from basic to advanced",{"name":946,"@type":959},{"title":62787,"description":65653},"blog\u002Fdirectives-vue-v-bind-guide.en",[65666,65667,65668,65669],{"tag":60263,"color":26467},{"tag":27757,"color":27758},{"tag":60269,"color":3270},{"tag":65670,"color":5425},"Basics","fBQPYAMVg07MPh1WzK72iS9TKXH9Qc-lEO0tLvQWAN0",{"id":39771,"title":39772,"body":65673,"cover":42726,"coverAlt":42727,"date":42728,"description":42729,"draft":940,"extension":941,"lab":942,"locale":943,"meta":68405,"navigation":208,"path":42736,"schemaOrg":68407,"seo":68410,"series":26460,"seriesDescription":26461,"seriesOrder":160,"seriesTitle":26462,"slug":942,"stem":42742,"tags":68411,"__hash__":42748},{"type":8,"value":65674,"toc":68383},[65675,65679,65683,65687,65689,65693,65703,65707,65709,65711,65741,65743,65771,65775,65807,65809,65813,65827,65829,65831,65843,65845,65849,65851,65881,65883,65925,65929,65935,65937,65997,66001,66003,66007,66031,66037,66041,66045,66047,66051,66158,66271,66275,66378,66487,66491,66634,66775,66779,66899,67017,67021,67023,67135,67245,67249,67386,67529,67535,67537,67541,67939,68347,68349,68353,68355,68377,68381],[11,65676,26483,65677],{"id":39777},[87,65678,23868],{},[15,65680,65681,39784],{},[87,65682,23868],{},[15,65684,30440,65685,39789],{},[87,65686,23868],{},[22,65688,26503],{"id":26502},[15,65690,21844,65691,39796],{},[87,65692,23868],{},[33,65694,65695,65697,65699,65701],{},[36,65696,39801],{},[36,65698,39804],{},[36,65700,39807],{},[36,65702,39810],{},[15,65704,3810,65705,39815],{},[87,65706,23868],{},[22,65708,30500],{"id":30499},[15,65710,39820],{},[154,65712,65713],{"className":156,"code":39823,"filename":15284,"language":162,"meta":163,"style":163},[87,65714,65715],{"__ignoreMap":163},[167,65716,65717,65719,65721,65723,65725,65727,65729,65731,65733,65735,65737,65739],{"class":169,"line":170},[167,65718,174],{"class":173},[167,65720,19092],{"class":177},[167,65722,39834],{"class":181},[167,65724,583],{"class":173},[167,65726,39839],{"class":181},[167,65728,267],{"class":173},[167,65730,5080],{"class":201},[167,65732,39846],{"class":173},[167,65734,5080],{"class":201},[167,65736,39851],{"class":173},[167,65738,19092],{"class":177},[167,65740,185],{"class":173},[15,65742,39858],{},[154,65744,65745],{"className":156,"code":39861,"filename":15284,"language":162,"meta":163,"style":163},[87,65746,65747],{"__ignoreMap":163},[167,65748,65749,65751,65753,65755,65757,65759,65761,65763,65765,65767,65769],{"class":169,"line":170},[167,65750,174],{"class":173},[167,65752,19092],{"class":177},[167,65754,5312],{"class":173},[167,65756,39839],{"class":181},[167,65758,267],{"class":173},[167,65760,5080],{"class":201},[167,65762,39846],{"class":173},[167,65764,5080],{"class":201},[167,65766,39851],{"class":173},[167,65768,19092],{"class":177},[167,65770,185],{"class":173},[15,65772,65773,39892],{},[87,65774,23868],{},[33,65776,65777,65789,65793,65799,65803],{},[36,65778,39897,65779,1025,65781,1025,65783,1025,65785,1025,65787,39910],{},[87,65780,39839],{},[87,65782,39902],{},[87,65784,39905],{},[87,65786,580],{},[87,65788,29272],{},[36,65790,39913,65791,39910],{},[87,65792,39916],{},[36,65794,39919,65795,1028,65797,39925],{},[87,65796,39922],{},[87,65798,924],{},[36,65800,39928,65801,39910],{},[87,65802,39931],{},[36,65804,39934,65805,4270],{},[87,65806,39937],{},[22,65808,6322],{"id":6321},[15,65810,1582,65811,39944],{},[87,65812,23868],{},[33,65814,65815,65817,65823,65825],{},[36,65816,39949],{},[36,65818,39952,65819,11227,65821,4270],{},[87,65820,39922],{},[87,65822,924],{},[36,65824,39959],{},[36,65826,39962],{},[22,65828,6349],{"id":6348},[15,65830,6355],{},[33,65832,65833,65835,65839],{},[36,65834,39971],{},[36,65836,39974,65837,4270],{},[87,65838,1661],{},[36,65840,39979,65841,39982],{},[87,65842,23868],{},[22,65844,3085],{"id":3084},[3087,65846,39988,65847,39991],{"id":39987},[87,65848,23868],{},[15,65850,30738],{},[154,65852,65853],{"className":156,"code":39996,"filename":39997,"language":162,"meta":163,"style":163},[87,65854,65855],{"__ignoreMap":163},[167,65856,65857,65859,65861,65863,65865,65867,65869,65871,65873,65875,65877,65879],{"class":169,"line":170},[167,65858,174],{"class":173},[167,65860,40006],{"class":177},[167,65862,5312],{"class":173},[167,65864,39902],{"class":181},[167,65866,267],{"class":173},[167,65868,5080],{"class":201},[167,65870,21857],{"class":191},[167,65872,40019],{"class":173},[167,65874,21857],{"class":191},[167,65876,40024],{"class":173},[167,65878,5080],{"class":201},[167,65880,5325],{"class":173},[15,65882,34281],{},[154,65884,65885],{"className":156,"code":40033,"filename":40034,"language":162,"meta":163,"style":163},[87,65886,65887,65901,65905],{"__ignoreMap":163},[167,65888,65889,65891,65893,65895,65897,65899],{"class":169,"line":170},[167,65890,174],{"class":173},[167,65892,40006],{"class":177},[167,65894,40045],{"class":181},[167,65896,267],{"class":173},[167,65898,40050],{"class":201},[167,65900,5325],{"class":173},[167,65902,65903],{"class":169,"line":188},[167,65904,40057],{"class":18662},[167,65906,65907,65909,65911,65913,65915,65917,65919,65921,65923],{"class":169,"line":205},[167,65908,174],{"class":173},[167,65910,40006],{"class":177},[167,65912,5312],{"class":173},[167,65914,39902],{"class":181},[167,65916,267],{"class":173},[167,65918,5080],{"class":201},[167,65920,40074],{"class":173},[167,65922,5080],{"class":201},[167,65924,5325],{"class":173},[15,65926,40081,65927,40085],{},[87,65928,40084],{},[3087,65930,40089,65931,90,65933],{"id":40088},[87,65932,40092],{},[87,65934,40095],{},[15,65936,30738],{},[154,65938,65939],{"className":156,"code":40100,"filename":34162,"language":162,"meta":163,"style":163},[87,65940,65941,65985,65989],{"__ignoreMap":163},[167,65942,65943,65945,65947,65949,65951,65953,65955,65957,65959,65961,65963,65965,65967,65969,65971,65973,65975,65977,65979,65981,65983],{"class":169,"line":170},[167,65944,174],{"class":173},[167,65946,507],{"class":177},[167,65948,5312],{"class":173},[167,65950,39922],{"class":181},[167,65952,267],{"class":173},[167,65954,5080],{"class":201},[167,65956,37175],{"class":173},[167,65958,8339],{"class":191},[167,65960,40123],{"class":173},[167,65962,8339],{"class":191},[167,65964,5625],{"class":191},[167,65966,37187],{"class":173},[167,65968,8316],{"class":191},[167,65970,40134],{"class":201},[167,65972,5312],{"class":191},[167,65974,40139],{"class":173},[167,65976,8316],{"class":191},[167,65978,40144],{"class":201},[167,65980,5312],{"class":191},[167,65982,40149],{"class":201},[167,65984,185],{"class":173},[167,65986,65987],{"class":169,"line":188},[167,65988,40156],{"class":173},[167,65990,65991,65993,65995],{"class":169,"line":205},[167,65992,282],{"class":173},[167,65994,507],{"class":177},[167,65996,185],{"class":173},[15,65998,40167,65999,1679],{},[87,66000,1661],{},[3087,66002,40173],{"id":40172},[15,66004,66005,40178],{},[87,66006,23868],{},[154,66008,66009],{"className":156,"code":5300,"filename":40181,"language":162,"meta":163,"style":163},[87,66010,66011],{"__ignoreMap":163},[167,66012,66013,66015,66017,66019,66021,66023,66025,66027,66029],{"class":169,"line":170},[167,66014,174],{"class":173},[167,66016,5309],{"class":177},[167,66018,5312],{"class":173},[167,66020,729],{"class":181},[167,66022,267],{"class":173},[167,66024,5080],{"class":201},[167,66026,729],{"class":173},[167,66028,5080],{"class":201},[167,66030,5325],{"class":173},[15,66032,40206,66033,40210,66035,40213],{},[87,66034,40209],{},[87,66036,729],{},[3087,66038,40217,66039,40220],{"id":40216},[87,66040,23868],{},[15,66042,66043,40225],{},[87,66044,23868],{},[22,66046,7997],{"id":7996},[3087,66048,40231,66049,6219],{"id":40230},[87,66050,39839],{},[154,66052,66054],{"className":156,"code":40236,"filename":3260,"highlights":66053,"language":162,"meta":163,"style":163},[160,273],[87,66055,66056,66066,66078,66082,66099,66107,66111,66119,66150],{"__ignoreMap":163},[167,66057,66058,66060,66062,66064],{"class":169,"line":170},[167,66059,174],{"class":173},[167,66061,178],{"class":177},[167,66063,182],{"class":181},[167,66065,185],{"class":173},[167,66067,66068,66070,66072,66074,66076],{"class":169,"line":188},[167,66069,192],{"class":191},[167,66071,195],{"class":173},[167,66073,198],{"class":191},[167,66075,24041],{"class":201},[167,66077,24044],{"class":173},[167,66079,66080],{"class":169,"line":205},[167,66081,209],{"emptyLinePlaceholder":208},[167,66083,66085,66087,66089,66091,66093,66095,66097],{"class":66084,"line":160},[169,213],[167,66086,216],{"class":191},[167,66088,40273],{"class":219},[167,66090,223],{"class":191},[167,66092,226],{"class":181},[167,66094,229],{"class":173},[167,66096,40282],{"class":201},[167,66098,24169],{"class":173},[167,66100,66101,66103,66105],{"class":169,"line":238},[167,66102,282],{"class":173},[167,66104,178],{"class":177},[167,66106,185],{"class":173},[167,66108,66109],{"class":169,"line":243},[167,66110,209],{"emptyLinePlaceholder":208},[167,66112,66113,66115,66117],{"class":169,"line":261},[167,66114,174],{"class":173},[167,66116,299],{"class":177},[167,66118,185],{"class":173},[167,66120,66122,66124,66126,66128,66130,66132,66134,66136,66138,66140,66142,66144,66146,66148],{"class":66121,"line":273},[169,213],[167,66123,307],{"class":173},[167,66125,19092],{"class":177},[167,66127,40314],{"class":181},[167,66129,267],{"class":173},[167,66131,40319],{"class":201},[167,66133,24293],{"class":181},[167,66135,267],{"class":173},[167,66137,40326],{"class":201},[167,66139,40329],{"class":181},[167,66141,267],{"class":173},[167,66143,40334],{"class":201},[167,66145,40337],{"class":173},[167,66147,19092],{"class":177},[167,66149,185],{"class":173},[167,66151,66152,66154,66156],{"class":169,"line":279},[167,66153,282],{"class":173},[167,66155,299],{"class":177},[167,66157,185],{"class":173},[154,66159,66161],{"className":156,"code":40352,"filename":3973,"highlights":66160,"language":162,"meta":163,"style":163},[238,304],[87,66162,66163,66171,66179,66185,66191,66200,66204,66208,66212,66220,66224,66232,66263],{"__ignoreMap":163},[167,66164,66165,66167,66169],{"class":169,"line":170},[167,66166,174],{"class":173},[167,66168,178],{"class":177},[167,66170,185],{"class":173},[167,66172,66173,66175,66177],{"class":169,"line":188},[167,66174,608],{"class":191},[167,66176,3991],{"class":191},[167,66178,1905],{"class":173},[167,66180,66181,66183],{"class":169,"line":205},[167,66182,7176],{"class":181},[167,66184,763],{"class":173},[167,66186,66187,66189],{"class":169,"line":160},[167,66188,1937],{"class":191},[167,66190,1905],{"class":173},[167,66192,66194,66196,66198],{"class":66193,"line":238},[169,213],[167,66195,40389],{"class":173},[167,66197,40282],{"class":201},[167,66199,393],{"class":173},[167,66201,66202],{"class":169,"line":243},[167,66203,24370],{"class":173},[167,66205,66206],{"class":169,"line":261},[167,66207,398],{"class":173},[167,66209,66210],{"class":169,"line":273},[167,66211,24148],{"class":173},[167,66213,66214,66216,66218],{"class":169,"line":279},[167,66215,282],{"class":173},[167,66217,178],{"class":177},[167,66219,185],{"class":173},[167,66221,66222],{"class":169,"line":289},[167,66223,209],{"emptyLinePlaceholder":208},[167,66225,66226,66228,66230],{"class":169,"line":294},[167,66227,174],{"class":173},[167,66229,299],{"class":177},[167,66231,185],{"class":173},[167,66233,66235,66237,66239,66241,66243,66245,66247,66249,66251,66253,66255,66257,66259,66261],{"class":66234,"line":304},[169,213],[167,66236,307],{"class":173},[167,66238,19092],{"class":177},[167,66240,40314],{"class":181},[167,66242,267],{"class":173},[167,66244,40319],{"class":201},[167,66246,24293],{"class":181},[167,66248,267],{"class":173},[167,66250,40326],{"class":201},[167,66252,40329],{"class":181},[167,66254,267],{"class":173},[167,66256,40334],{"class":201},[167,66258,40337],{"class":173},[167,66260,19092],{"class":177},[167,66262,185],{"class":173},[167,66264,66265,66267,66269],{"class":169,"line":313},[167,66266,282],{"class":173},[167,66268,299],{"class":177},[167,66270,185],{"class":173},[3087,66272,40468,66273,6219],{"id":40467},[87,66274,39905],{},[154,66276,66278],{"className":156,"code":40473,"filename":3260,"highlights":66277,"language":162,"meta":163,"style":163},[160,273],[87,66279,66280,66290,66302,66306,66323,66331,66335,66343,66358,66362,66370],{"__ignoreMap":163},[167,66281,66282,66284,66286,66288],{"class":169,"line":170},[167,66283,174],{"class":173},[167,66285,178],{"class":177},[167,66287,182],{"class":181},[167,66289,185],{"class":173},[167,66291,66292,66294,66296,66298,66300],{"class":169,"line":188},[167,66293,192],{"class":191},[167,66295,195],{"class":173},[167,66297,198],{"class":191},[167,66299,24041],{"class":201},[167,66301,24044],{"class":173},[167,66303,66304],{"class":169,"line":205},[167,66305,209],{"emptyLinePlaceholder":208},[167,66307,66309,66311,66313,66315,66317,66319,66321],{"class":66308,"line":160},[169,213],[167,66310,216],{"class":191},[167,66312,40510],{"class":219},[167,66314,223],{"class":191},[167,66316,226],{"class":181},[167,66318,229],{"class":173},[167,66320,3392],{"class":219},[167,66322,24169],{"class":173},[167,66324,66325,66327,66329],{"class":169,"line":238},[167,66326,282],{"class":173},[167,66328,178],{"class":177},[167,66330,185],{"class":173},[167,66332,66333],{"class":169,"line":243},[167,66334,209],{"emptyLinePlaceholder":208},[167,66336,66337,66339,66341],{"class":169,"line":261},[167,66338,174],{"class":173},[167,66340,299],{"class":177},[167,66342,185],{"class":173},[167,66344,66346,66348,66350,66352,66354,66356],{"class":66345,"line":273},[169,213],[167,66347,307],{"class":173},[167,66349,507],{"class":177},[167,66351,40550],{"class":181},[167,66353,267],{"class":173},[167,66355,40555],{"class":201},[167,66357,185],{"class":173},[167,66359,66360],{"class":169,"line":279},[167,66361,40562],{"class":173},[167,66363,66364,66366,66368],{"class":169,"line":289},[167,66365,504],{"class":173},[167,66367,507],{"class":177},[167,66369,185],{"class":173},[167,66371,66372,66374,66376],{"class":169,"line":294},[167,66373,282],{"class":173},[167,66375,299],{"class":177},[167,66377,185],{"class":173},[154,66379,66381],{"className":156,"code":40581,"filename":3973,"highlights":66380,"language":162,"meta":163,"style":163},[238,304],[87,66382,66383,66391,66399,66405,66411,66420,66424,66428,66432,66440,66444,66452,66467,66471,66479],{"__ignoreMap":163},[167,66384,66385,66387,66389],{"class":169,"line":170},[167,66386,174],{"class":173},[167,66388,178],{"class":177},[167,66390,185],{"class":173},[167,66392,66393,66395,66397],{"class":169,"line":188},[167,66394,608],{"class":191},[167,66396,3991],{"class":191},[167,66398,1905],{"class":173},[167,66400,66401,66403],{"class":169,"line":205},[167,66402,7176],{"class":181},[167,66404,763],{"class":173},[167,66406,66407,66409],{"class":169,"line":160},[167,66408,1937],{"class":191},[167,66410,1905],{"class":173},[167,66412,66414,66416,66418],{"class":66413,"line":238},[169,213],[167,66415,40618],{"class":173},[167,66417,3392],{"class":219},[167,66419,393],{"class":173},[167,66421,66422],{"class":169,"line":243},[167,66423,24370],{"class":173},[167,66425,66426],{"class":169,"line":261},[167,66427,398],{"class":173},[167,66429,66430],{"class":169,"line":273},[167,66431,24148],{"class":173},[167,66433,66434,66436,66438],{"class":169,"line":279},[167,66435,282],{"class":173},[167,66437,178],{"class":177},[167,66439,185],{"class":173},[167,66441,66442],{"class":169,"line":289},[167,66443,209],{"emptyLinePlaceholder":208},[167,66445,66446,66448,66450],{"class":169,"line":294},[167,66447,174],{"class":173},[167,66449,299],{"class":177},[167,66451,185],{"class":173},[167,66453,66455,66457,66459,66461,66463,66465],{"class":66454,"line":304},[169,213],[167,66456,307],{"class":173},[167,66458,507],{"class":177},[167,66460,40550],{"class":181},[167,66462,267],{"class":173},[167,66464,40555],{"class":201},[167,66466,185],{"class":173},[167,66468,66469],{"class":169,"line":313},[167,66470,40562],{"class":173},[167,66472,66473,66475,66477],{"class":169,"line":161},[167,66474,504],{"class":173},[167,66476,507],{"class":177},[167,66478,185],{"class":173},[167,66480,66481,66483,66485],{"class":169,"line":335},[167,66482,282],{"class":173},[167,66484,299],{"class":177},[167,66486,185],{"class":173},[3087,66488,40693,66489,40697],{"id":40692},[87,66490,40696],{},[154,66492,66494],{"className":156,"code":40700,"filename":3260,"highlights":66493,"language":162,"meta":163,"style":163},[160,289,294,304,313,161],[87,66495,66496,66506,66518,66522,66539,66555,66563,66567,66575,66581,66590,66595,66600,66605,66610,66614,66618,66626],{"__ignoreMap":163},[167,66497,66498,66500,66502,66504],{"class":169,"line":170},[167,66499,174],{"class":173},[167,66501,178],{"class":177},[167,66503,182],{"class":181},[167,66505,185],{"class":173},[167,66507,66508,66510,66512,66514,66516],{"class":169,"line":188},[167,66509,192],{"class":191},[167,66511,195],{"class":173},[167,66513,198],{"class":191},[167,66515,24041],{"class":201},[167,66517,24044],{"class":173},[167,66519,66520],{"class":169,"line":205},[167,66521,209],{"emptyLinePlaceholder":208},[167,66523,66525,66527,66529,66531,66533,66535,66537],{"class":66524,"line":160},[169,213],[167,66526,216],{"class":191},[167,66528,5786],{"class":219},[167,66530,223],{"class":191},[167,66532,226],{"class":181},[167,66534,229],{"class":173},[167,66536,390],{"class":219},[167,66538,24169],{"class":173},[167,66540,66541,66543,66545,66547,66549,66551,66553],{"class":169,"line":238},[167,66542,216],{"class":191},[167,66544,9486],{"class":219},[167,66546,223],{"class":191},[167,66548,226],{"class":181},[167,66550,229],{"class":173},[167,66552,3392],{"class":219},[167,66554,24169],{"class":173},[167,66556,66557,66559,66561],{"class":169,"line":243},[167,66558,282],{"class":173},[167,66560,178],{"class":177},[167,66562,185],{"class":173},[167,66564,66565],{"class":169,"line":261},[167,66566,209],{"emptyLinePlaceholder":208},[167,66568,66569,66571,66573],{"class":169,"line":273},[167,66570,174],{"class":173},[167,66572,299],{"class":177},[167,66574,185],{"class":173},[167,66576,66577,66579],{"class":169,"line":279},[167,66578,307],{"class":173},[167,66580,40789],{"class":177},[167,66582,66584,66586,66588],{"class":66583,"line":289},[169,213],[167,66585,40795],{"class":181},[167,66587,267],{"class":173},[167,66589,40800],{"class":201},[167,66591,66593],{"class":66592,"line":294},[169,213],[167,66594,40806],{"class":201},[167,66596,66598],{"class":66597,"line":304},[169,213],[167,66599,40812],{"class":201},[167,66601,66603],{"class":66602,"line":313},[169,213],[167,66604,40818],{"class":201},[167,66606,66608],{"class":66607,"line":161},[169,213],[167,66609,40824],{"class":201},[167,66611,66612],{"class":169,"line":335},[167,66613,492],{"class":173},[167,66615,66616],{"class":169,"line":341},[167,66617,40833],{"class":173},[167,66619,66620,66622,66624],{"class":169,"line":489},[167,66621,504],{"class":173},[167,66623,15],{"class":177},[167,66625,185],{"class":173},[167,66627,66628,66630,66632],{"class":169,"line":495},[167,66629,282],{"class":173},[167,66631,299],{"class":177},[167,66633,185],{"class":173},[154,66635,66637],{"className":156,"code":40852,"filename":3973,"highlights":66636,"language":162,"meta":163,"style":163},[238,313,161,335,341,489],[87,66638,66639,66647,66655,66661,66667,66676,66684,66688,66692,66696,66704,66708,66716,66723,66732,66737,66742,66747,66751,66755,66759,66767],{"__ignoreMap":163},[167,66640,66641,66643,66645],{"class":169,"line":170},[167,66642,174],{"class":173},[167,66644,178],{"class":177},[167,66646,185],{"class":173},[167,66648,66649,66651,66653],{"class":169,"line":188},[167,66650,608],{"class":191},[167,66652,3991],{"class":191},[167,66654,1905],{"class":173},[167,66656,66657,66659],{"class":169,"line":205},[167,66658,7176],{"class":181},[167,66660,763],{"class":173},[167,66662,66663,66665],{"class":169,"line":160},[167,66664,1937],{"class":191},[167,66666,1905],{"class":173},[167,66668,66670,66672,66674],{"class":66669,"line":238},[169,213],[167,66671,40889],{"class":173},[167,66673,390],{"class":219},[167,66675,393],{"class":173},[167,66677,66678,66680,66682],{"class":169,"line":243},[167,66679,10652],{"class":173},[167,66681,3392],{"class":219},[167,66683,393],{"class":173},[167,66685,66686],{"class":169,"line":261},[167,66687,24370],{"class":173},[167,66689,66690],{"class":169,"line":273},[167,66691,398],{"class":173},[167,66693,66694],{"class":169,"line":279},[167,66695,24148],{"class":173},[167,66697,66698,66700,66702],{"class":169,"line":289},[167,66699,282],{"class":173},[167,66701,178],{"class":177},[167,66703,185],{"class":173},[167,66705,66706],{"class":169,"line":294},[167,66707,209],{"emptyLinePlaceholder":208},[167,66709,66710,66712,66714],{"class":169,"line":304},[167,66711,174],{"class":173},[167,66713,299],{"class":177},[167,66715,185],{"class":173},[167,66717,66719,66721],{"class":66718,"line":313},[169,213],[167,66720,307],{"class":173},[167,66722,40789],{"class":177},[167,66724,66726,66728,66730],{"class":66725,"line":161},[169,213],[167,66727,40795],{"class":181},[167,66729,267],{"class":173},[167,66731,40800],{"class":201},[167,66733,66735],{"class":66734,"line":335},[169,213],[167,66736,40806],{"class":201},[167,66738,66740],{"class":66739,"line":341},[169,213],[167,66741,40812],{"class":201},[167,66743,66745],{"class":66744,"line":489},[169,213],[167,66746,40818],{"class":201},[167,66748,66749],{"class":169,"line":495},[167,66750,40824],{"class":201},[167,66752,66753],{"class":169,"line":501},[167,66754,492],{"class":173},[167,66756,66757],{"class":169,"line":512},[167,66758,40833],{"class":173},[167,66760,66761,66763,66765],{"class":169,"line":781},[167,66762,504],{"class":173},[167,66764,15],{"class":177},[167,66766,185],{"class":173},[167,66768,66769,66771,66773],{"class":169,"line":786},[167,66770,282],{"class":173},[167,66772,299],{"class":177},[167,66774,185],{"class":173},[3087,66776,32604,66777,40999],{"id":40995},[87,66778,40998],{},[154,66780,66782],{"className":156,"code":41002,"filename":3260,"highlights":66781,"language":162,"meta":163,"style":163},[160,238,279],[87,66783,66784,66794,66806,66810,66827,66844,66852,66856,66864,66879,66883,66891],{"__ignoreMap":163},[167,66785,66786,66788,66790,66792],{"class":169,"line":170},[167,66787,174],{"class":173},[167,66789,178],{"class":177},[167,66791,182],{"class":181},[167,66793,185],{"class":173},[167,66795,66796,66798,66800,66802,66804],{"class":169,"line":188},[167,66797,192],{"class":191},[167,66799,195],{"class":173},[167,66801,198],{"class":191},[167,66803,24041],{"class":201},[167,66805,24044],{"class":173},[167,66807,66808],{"class":169,"line":205},[167,66809,209],{"emptyLinePlaceholder":208},[167,66811,66813,66815,66817,66819,66821,66823,66825],{"class":66812,"line":160},[169,213],[167,66814,216],{"class":191},[167,66816,41039],{"class":219},[167,66818,223],{"class":191},[167,66820,226],{"class":181},[167,66822,229],{"class":173},[167,66824,41048],{"class":219},[167,66826,24169],{"class":173},[167,66828,66830,66832,66834,66836,66838,66840,66842],{"class":66829,"line":238},[169,213],[167,66831,216],{"class":191},[167,66833,41058],{"class":219},[167,66835,223],{"class":191},[167,66837,226],{"class":181},[167,66839,229],{"class":173},[167,66841,41067],{"class":201},[167,66843,24169],{"class":173},[167,66845,66846,66848,66850],{"class":169,"line":243},[167,66847,282],{"class":173},[167,66849,178],{"class":177},[167,66851,185],{"class":173},[167,66853,66854],{"class":169,"line":261},[167,66855,209],{"emptyLinePlaceholder":208},[167,66857,66858,66860,66862],{"class":169,"line":273},[167,66859,174],{"class":173},[167,66861,299],{"class":177},[167,66863,185],{"class":173},[167,66865,66867,66869,66871,66873,66875,66877],{"class":66866,"line":279},[169,213],[167,66868,307],{"class":173},[167,66870,15],{"class":177},[167,66872,39102],{"class":181},[167,66874,267],{"class":173},[167,66876,41103],{"class":201},[167,66878,185],{"class":173},[167,66880,66881],{"class":169,"line":289},[167,66882,41110],{"class":173},[167,66884,66885,66887,66889],{"class":169,"line":294},[167,66886,504],{"class":173},[167,66888,15],{"class":177},[167,66890,185],{"class":173},[167,66892,66893,66895,66897],{"class":169,"line":304},[167,66894,282],{"class":173},[167,66896,299],{"class":177},[167,66898,185],{"class":173},[154,66900,66902],{"className":156,"code":41129,"filename":3973,"highlights":66901,"language":162,"meta":163,"style":163},[238,243,313],[87,66903,66904,66912,66920,66926,66932,66941,66950,66954,66958,66962,66970,66974,66982,66997,67001,67009],{"__ignoreMap":163},[167,66905,66906,66908,66910],{"class":169,"line":170},[167,66907,174],{"class":173},[167,66909,178],{"class":177},[167,66911,185],{"class":173},[167,66913,66914,66916,66918],{"class":169,"line":188},[167,66915,608],{"class":191},[167,66917,3991],{"class":191},[167,66919,1905],{"class":173},[167,66921,66922,66924],{"class":169,"line":205},[167,66923,7176],{"class":181},[167,66925,763],{"class":173},[167,66927,66928,66930],{"class":169,"line":160},[167,66929,1937],{"class":191},[167,66931,1905],{"class":173},[167,66933,66935,66937,66939],{"class":66934,"line":238},[169,213],[167,66936,41166],{"class":173},[167,66938,41048],{"class":219},[167,66940,393],{"class":173},[167,66942,66944,66946,66948],{"class":66943,"line":243},[169,213],[167,66945,41176],{"class":173},[167,66947,41067],{"class":201},[167,66949,393],{"class":173},[167,66951,66952],{"class":169,"line":261},[167,66953,24370],{"class":173},[167,66955,66956],{"class":169,"line":273},[167,66957,398],{"class":173},[167,66959,66960],{"class":169,"line":279},[167,66961,24148],{"class":173},[167,66963,66964,66966,66968],{"class":169,"line":289},[167,66965,282],{"class":173},[167,66967,178],{"class":177},[167,66969,185],{"class":173},[167,66971,66972],{"class":169,"line":294},[167,66973,209],{"emptyLinePlaceholder":208},[167,66975,66976,66978,66980],{"class":169,"line":304},[167,66977,174],{"class":173},[167,66979,299],{"class":177},[167,66981,185],{"class":173},[167,66983,66985,66987,66989,66991,66993,66995],{"class":66984,"line":313},[169,213],[167,66986,307],{"class":173},[167,66988,15],{"class":177},[167,66990,39102],{"class":181},[167,66992,267],{"class":173},[167,66994,41103],{"class":201},[167,66996,185],{"class":173},[167,66998,66999],{"class":169,"line":161},[167,67000,41110],{"class":173},[167,67002,67003,67005,67007],{"class":169,"line":335},[167,67004,504],{"class":173},[167,67006,15],{"class":177},[167,67008,185],{"class":173},[167,67010,67011,67013,67015],{"class":169,"line":341},[167,67012,282],{"class":173},[167,67014,299],{"class":177},[167,67016,185],{"class":173},[3087,67018,41251,67019],{"id":41250},[87,67020,39931],{},[15,67022,41256],{},[154,67024,67026],{"className":156,"code":41259,"filename":3260,"highlights":67025,"language":162,"meta":163,"style":163},[160,238,279],[87,67027,67028,67038,67050,67054,67071,67088,67096,67100,67108,67127],{"__ignoreMap":163},[167,67029,67030,67032,67034,67036],{"class":169,"line":170},[167,67031,174],{"class":173},[167,67033,178],{"class":177},[167,67035,182],{"class":181},[167,67037,185],{"class":173},[167,67039,67040,67042,67044,67046,67048],{"class":169,"line":188},[167,67041,192],{"class":191},[167,67043,195],{"class":173},[167,67045,198],{"class":191},[167,67047,24041],{"class":201},[167,67049,24044],{"class":173},[167,67051,67052],{"class":169,"line":205},[167,67053,209],{"emptyLinePlaceholder":208},[167,67055,67057,67059,67061,67063,67065,67067,67069],{"class":67056,"line":160},[169,213],[167,67058,216],{"class":191},[167,67060,41296],{"class":219},[167,67062,223],{"class":191},[167,67064,226],{"class":181},[167,67066,229],{"class":173},[167,67068,41305],{"class":201},[167,67070,24169],{"class":173},[167,67072,67074,67076,67078,67080,67082,67084,67086],{"class":67073,"line":238},[169,213],[167,67075,216],{"class":191},[167,67077,41315],{"class":219},[167,67079,223],{"class":191},[167,67081,226],{"class":181},[167,67083,229],{"class":173},[167,67085,41324],{"class":201},[167,67087,24169],{"class":173},[167,67089,67090,67092,67094],{"class":169,"line":243},[167,67091,282],{"class":173},[167,67093,178],{"class":177},[167,67095,185],{"class":173},[167,67097,67098],{"class":169,"line":261},[167,67099,209],{"emptyLinePlaceholder":208},[167,67101,67102,67104,67106],{"class":169,"line":273},[167,67103,174],{"class":173},[167,67105,299],{"class":177},[167,67107,185],{"class":173},[167,67109,67111,67113,67115,67117,67119,67121,67123,67125],{"class":67110,"line":279},[169,213],[167,67112,307],{"class":173},[167,67114,507],{"class":177},[167,67116,41356],{"class":181},[167,67118,267],{"class":173},[167,67120,41361],{"class":201},[167,67122,41364],{"class":173},[167,67124,507],{"class":177},[167,67126,185],{"class":173},[167,67128,67129,67131,67133],{"class":169,"line":289},[167,67130,282],{"class":173},[167,67132,299],{"class":177},[167,67134,185],{"class":173},[154,67136,67138],{"className":156,"code":41379,"filename":3973,"highlights":67137,"language":162,"meta":163,"style":163},[238,243,313],[87,67139,67140,67148,67156,67162,67168,67177,67186,67190,67194,67198,67206,67210,67218,67237],{"__ignoreMap":163},[167,67141,67142,67144,67146],{"class":169,"line":170},[167,67143,174],{"class":173},[167,67145,178],{"class":177},[167,67147,185],{"class":173},[167,67149,67150,67152,67154],{"class":169,"line":188},[167,67151,608],{"class":191},[167,67153,3991],{"class":191},[167,67155,1905],{"class":173},[167,67157,67158,67160],{"class":169,"line":205},[167,67159,7176],{"class":181},[167,67161,763],{"class":173},[167,67163,67164,67166],{"class":169,"line":160},[167,67165,1937],{"class":191},[167,67167,1905],{"class":173},[167,67169,67171,67173,67175],{"class":67170,"line":238},[169,213],[167,67172,41416],{"class":173},[167,67174,41305],{"class":201},[167,67176,393],{"class":173},[167,67178,67180,67182,67184],{"class":67179,"line":243},[169,213],[167,67181,41426],{"class":173},[167,67183,41324],{"class":201},[167,67185,393],{"class":173},[167,67187,67188],{"class":169,"line":261},[167,67189,24370],{"class":173},[167,67191,67192],{"class":169,"line":273},[167,67193,398],{"class":173},[167,67195,67196],{"class":169,"line":279},[167,67197,24148],{"class":173},[167,67199,67200,67202,67204],{"class":169,"line":289},[167,67201,282],{"class":173},[167,67203,178],{"class":177},[167,67205,185],{"class":173},[167,67207,67208],{"class":169,"line":294},[167,67209,209],{"emptyLinePlaceholder":208},[167,67211,67212,67214,67216],{"class":169,"line":304},[167,67213,174],{"class":173},[167,67215,299],{"class":177},[167,67217,185],{"class":173},[167,67219,67221,67223,67225,67227,67229,67231,67233,67235],{"class":67220,"line":313},[169,213],[167,67222,307],{"class":173},[167,67224,507],{"class":177},[167,67226,41356],{"class":181},[167,67228,267],{"class":173},[167,67230,41361],{"class":201},[167,67232,41364],{"class":173},[167,67234,507],{"class":177},[167,67236,185],{"class":173},[167,67238,67239,67241,67243],{"class":169,"line":161},[167,67240,282],{"class":173},[167,67242,299],{"class":177},[167,67244,185],{"class":173},[3087,67246,41493,67247,41497],{"id":41492},[87,67248,41496],{},[154,67250,67252],{"className":156,"code":41500,"filename":3260,"highlights":67251,"language":162,"meta":163,"style":163},[160,238,243,261,273,279,289,161],[87,67253,67254,67264,67276,67280,67293,67302,67311,67320,67329,67338,67343,67351,67355,67363,67378],{"__ignoreMap":163},[167,67255,67256,67258,67260,67262],{"class":169,"line":170},[167,67257,174],{"class":173},[167,67259,178],{"class":177},[167,67261,182],{"class":181},[167,67263,185],{"class":173},[167,67265,67266,67268,67270,67272,67274],{"class":169,"line":188},[167,67267,192],{"class":191},[167,67269,195],{"class":173},[167,67271,198],{"class":191},[167,67273,24041],{"class":201},[167,67275,24044],{"class":173},[167,67277,67278],{"class":169,"line":205},[167,67279,209],{"emptyLinePlaceholder":208},[167,67281,67283,67285,67287,67289,67291],{"class":67282,"line":160},[169,213],[167,67284,216],{"class":191},[167,67286,41537],{"class":219},[167,67288,223],{"class":191},[167,67290,226],{"class":181},[167,67292,372],{"class":173},[167,67294,67296,67298,67300],{"class":67295,"line":238},[169,213],[167,67297,41549],{"class":173},[167,67299,37707],{"class":201},[167,67301,393],{"class":173},[167,67303,67305,67307,67309],{"class":67304,"line":243},[169,213],[167,67306,41559],{"class":173},[167,67308,37707],{"class":201},[167,67310,393],{"class":173},[167,67312,67314,67316,67318],{"class":67313,"line":261},[169,213],[167,67315,41569],{"class":173},[167,67317,37720],{"class":201},[167,67319,393],{"class":173},[167,67321,67323,67325,67327],{"class":67322,"line":273},[169,213],[167,67324,41579],{"class":173},[167,67326,37707],{"class":201},[167,67328,393],{"class":173},[167,67330,67332,67334,67336],{"class":67331,"line":279},[169,213],[167,67333,41589],{"class":173},[167,67335,390],{"class":219},[167,67337,393],{"class":173},[167,67339,67341],{"class":67340,"line":289},[169,213],[167,67342,27327],{"class":173},[167,67344,67345,67347,67349],{"class":169,"line":294},[167,67346,282],{"class":173},[167,67348,178],{"class":177},[167,67350,185],{"class":173},[167,67352,67353],{"class":169,"line":304},[167,67354,209],{"emptyLinePlaceholder":208},[167,67356,67357,67359,67361],{"class":169,"line":313},[167,67358,174],{"class":173},[167,67360,299],{"class":177},[167,67362,185],{"class":173},[167,67364,67366,67368,67370,67372,67374,67376],{"class":67365,"line":161},[169,213],[167,67367,307],{"class":173},[167,67369,2650],{"class":177},[167,67371,39834],{"class":181},[167,67373,267],{"class":173},[167,67375,41632],{"class":201},[167,67377,5325],{"class":173},[167,67379,67380,67382,67384],{"class":169,"line":335},[167,67381,282],{"class":173},[167,67383,299],{"class":177},[167,67385,185],{"class":173},[154,67387,67389],{"className":156,"code":41645,"filename":3973,"highlights":67388,"language":162,"meta":163,"style":163},[238,243,261,273,279,289,294,495],[87,67390,67391,67399,67407,67413,67419,67424,67433,67442,67451,67460,67469,67474,67478,67482,67486,67494,67498,67506,67521],{"__ignoreMap":163},[167,67392,67393,67395,67397],{"class":169,"line":170},[167,67394,174],{"class":173},[167,67396,178],{"class":177},[167,67398,185],{"class":173},[167,67400,67401,67403,67405],{"class":169,"line":188},[167,67402,608],{"class":191},[167,67404,3991],{"class":191},[167,67406,1905],{"class":173},[167,67408,67409,67411],{"class":169,"line":205},[167,67410,7176],{"class":181},[167,67412,763],{"class":173},[167,67414,67415,67417],{"class":169,"line":160},[167,67416,1937],{"class":191},[167,67418,1905],{"class":173},[167,67420,67422],{"class":67421,"line":238},[169,213],[167,67423,41682],{"class":173},[167,67425,67427,67429,67431],{"class":67426,"line":243},[169,213],[167,67428,41688],{"class":173},[167,67430,37707],{"class":201},[167,67432,393],{"class":173},[167,67434,67436,67438,67440],{"class":67435,"line":261},[169,213],[167,67437,41698],{"class":173},[167,67439,37707],{"class":201},[167,67441,393],{"class":173},[167,67443,67445,67447,67449],{"class":67444,"line":273},[169,213],[167,67446,41708],{"class":173},[167,67448,37720],{"class":201},[167,67450,393],{"class":173},[167,67452,67454,67456,67458],{"class":67453,"line":279},[169,213],[167,67455,41718],{"class":173},[167,67457,37707],{"class":201},[167,67459,393],{"class":173},[167,67461,67463,67465,67467],{"class":67462,"line":289},[169,213],[167,67464,41728],{"class":173},[167,67466,390],{"class":219},[167,67468,393],{"class":173},[167,67470,67472],{"class":67471,"line":294},[169,213],[167,67473,8642],{"class":173},[167,67475,67476],{"class":169,"line":304},[167,67477,24370],{"class":173},[167,67479,67480],{"class":169,"line":313},[167,67481,398],{"class":173},[167,67483,67484],{"class":169,"line":161},[167,67485,24148],{"class":173},[167,67487,67488,67490,67492],{"class":169,"line":335},[167,67489,282],{"class":173},[167,67491,178],{"class":177},[167,67493,185],{"class":173},[167,67495,67496],{"class":169,"line":341},[167,67497,209],{"emptyLinePlaceholder":208},[167,67499,67500,67502,67504],{"class":169,"line":489},[167,67501,174],{"class":173},[167,67503,299],{"class":177},[167,67505,185],{"class":173},[167,67507,67509,67511,67513,67515,67517,67519],{"class":67508,"line":495},[169,213],[167,67510,307],{"class":173},[167,67512,2650],{"class":177},[167,67514,39834],{"class":181},[167,67516,267],{"class":173},[167,67518,41632],{"class":201},[167,67520,5325],{"class":173},[167,67522,67523,67525,67527],{"class":169,"line":501},[167,67524,282],{"class":173},[167,67526,299],{"class":177},[167,67528,185],{"class":173},[5367,67530,67531],{},[15,67532,67533,41799],{},[87,67534,41496],{},[22,67536,41803],{"id":41802},[15,67538,41806,67539,41809],{},[87,67540,23868],{},[154,67542,67543],{"className":156,"code":41812,"filename":3260,"language":162,"meta":163,"style":163},[87,67544,67545,67555,67567,67571,67587,67603,67619,67623,67639,67647,67655,67663,67671,67675,67679,67695,67705,67711,67715,67719,67727,67745,67755,67765,67775,67785,67793,67797,67805,67809,67817,67831,67857,67861,67881,67885,67893,67897,67911,67915,67923,67931],{"__ignoreMap":163},[167,67546,67547,67549,67551,67553],{"class":169,"line":170},[167,67548,174],{"class":173},[167,67550,178],{"class":177},[167,67552,182],{"class":181},[167,67554,185],{"class":173},[167,67556,67557,67559,67561,67563,67565],{"class":169,"line":188},[167,67558,192],{"class":191},[167,67560,1805],{"class":173},[167,67562,198],{"class":191},[167,67564,24041],{"class":201},[167,67566,24044],{"class":173},[167,67568,67569],{"class":169,"line":205},[167,67570,209],{"emptyLinePlaceholder":208},[167,67572,67573,67575,67577,67579,67581,67583,67585],{"class":169,"line":160},[167,67574,216],{"class":191},[167,67576,37598],{"class":219},[167,67578,223],{"class":191},[167,67580,226],{"class":181},[167,67582,229],{"class":173},[167,67584,31161],{"class":201},[167,67586,24169],{"class":173},[167,67588,67589,67591,67593,67595,67597,67599,67601],{"class":169,"line":238},[167,67590,216],{"class":191},[167,67592,41863],{"class":219},[167,67594,223],{"class":191},[167,67596,226],{"class":181},[167,67598,229],{"class":173},[167,67600,3392],{"class":219},[167,67602,24169],{"class":173},[167,67604,67605,67607,67609,67611,67613,67615,67617],{"class":169,"line":243},[167,67606,216],{"class":191},[167,67608,9486],{"class":219},[167,67610,223],{"class":191},[167,67612,226],{"class":181},[167,67614,229],{"class":173},[167,67616,3392],{"class":219},[167,67618,24169],{"class":173},[167,67620,67621],{"class":169,"line":261},[167,67622,209],{"emptyLinePlaceholder":208},[167,67624,67625,67627,67629,67631,67633,67635,67637],{"class":169,"line":273},[167,67626,216],{"class":191},[167,67628,41537],{"class":219},[167,67630,223],{"class":191},[167,67632,1898],{"class":181},[167,67634,1493],{"class":173},[167,67636,639],{"class":191},[167,67638,642],{"class":173},[167,67640,67641,67643,67645],{"class":169,"line":279},[167,67642,41559],{"class":173},[167,67644,37707],{"class":201},[167,67646,393],{"class":173},[167,67648,67649,67651,67653],{"class":169,"line":289},[167,67650,41569],{"class":173},[167,67652,41924],{"class":201},[167,67654,393],{"class":173},[167,67656,67657,67659,67661],{"class":169,"line":294},[167,67658,41579],{"class":173},[167,67660,37707],{"class":201},[167,67662,393],{"class":173},[167,67664,67665,67667,67669],{"class":169,"line":304},[167,67666,41589],{"class":173},[167,67668,390],{"class":219},[167,67670,393],{"class":173},[167,67672,67673],{"class":169,"line":313},[167,67674,41947],{"class":173},[167,67676,67677],{"class":169,"line":161},[167,67678,209],{"emptyLinePlaceholder":208},[167,67680,67681,67683,67685,67687,67689,67691,67693],{"class":169,"line":335},[167,67682,216],{"class":191},[167,67684,41958],{"class":219},[167,67686,223],{"class":191},[167,67688,1898],{"class":181},[167,67690,1493],{"class":173},[167,67692,639],{"class":191},[167,67694,642],{"class":173},[167,67696,67697,67699,67701,67703],{"class":169,"line":341},[167,67698,41973],{"class":201},[167,67700,1108],{"class":173},[167,67702,6641],{"class":191},[167,67704,41980],{"class":173},[167,67706,67707,67709],{"class":169,"line":489},[167,67708,41985],{"class":201},[167,67710,41988],{"class":173},[167,67712,67713],{"class":169,"line":495},[167,67714,41947],{"class":173},[167,67716,67717],{"class":169,"line":501},[167,67718,209],{"emptyLinePlaceholder":208},[167,67720,67721,67723,67725],{"class":169,"line":512},[167,67722,246],{"class":191},[167,67724,42003],{"class":181},[167,67726,763],{"class":173},[167,67728,67729,67731,67733,67735,67737,67739,67741,67743],{"class":169,"line":781},[167,67730,9943],{"class":173},[167,67732,267],{"class":191},[167,67734,42014],{"class":173},[167,67736,2500],{"class":181},[167,67738,14087],{"class":173},[167,67740,2550],{"class":191},[167,67742,38799],{"class":201},[167,67744,24044],{"class":173},[167,67746,67747,67749,67751,67753],{"class":169,"line":786},[167,67748,2544],{"class":191},[167,67750,42031],{"class":173},[167,67752,24238],{"class":191},[167,67754,24044],{"class":173},[167,67756,67757,67759,67761,67763],{"class":169,"line":2678},[167,67758,42040],{"class":173},[167,67760,267],{"class":191},[167,67762,26318],{"class":219},[167,67764,24044],{"class":173},[167,67766,67767,67769,67771,67773],{"class":169,"line":2692},[167,67768,42051],{"class":181},[167,67770,1493],{"class":173},[167,67772,639],{"class":191},[167,67774,1905],{"class":173},[167,67776,67777,67779,67781,67783],{"class":169,"line":3575},[167,67778,42062],{"class":173},[167,67780,267],{"class":191},[167,67782,5777],{"class":219},[167,67784,24044],{"class":173},[167,67786,67787,67789,67791],{"class":169,"line":5028},[167,67788,1957],{"class":173},[167,67790,17180],{"class":219},[167,67792,24169],{"class":173},[167,67794,67795],{"class":169,"line":5037},[167,67796,276],{"class":173},[167,67798,67799,67801,67803],{"class":169,"line":5046},[167,67800,282],{"class":173},[167,67802,178],{"class":177},[167,67804,185],{"class":173},[167,67806,67807],{"class":169,"line":6756},[167,67808,209],{"emptyLinePlaceholder":208},[167,67810,67811,67813,67815],{"class":169,"line":6778},[167,67812,174],{"class":173},[167,67814,299],{"class":177},[167,67816,185],{"class":173},[167,67818,67819,67821,67823,67825,67827,67829],{"class":169,"line":6783},[167,67820,307],{"class":173},[167,67822,4305],{"class":177},[167,67824,4308],{"class":181},[167,67826,267],{"class":173},[167,67828,4348],{"class":201},[167,67830,185],{"class":173},[167,67832,67833,67835,67837,67839,67841,67843,67845,67847,67849,67851,67853,67855],{"class":169,"line":6788},[167,67834,1257],{"class":173},[167,67836,2650],{"class":177},[167,67838,39834],{"class":181},[167,67840,267],{"class":173},[167,67842,41632],{"class":201},[167,67844,2653],{"class":181},[167,67846,267],{"class":173},[167,67848,37707],{"class":201},[167,67850,42135],{"class":181},[167,67852,267],{"class":173},[167,67854,42140],{"class":201},[167,67856,5325],{"class":173},[167,67858,67859],{"class":169,"line":6793},[167,67860,209],{"emptyLinePlaceholder":208},[167,67862,67863,67865,67867,67869,67871,67873,67875,67877,67879],{"class":169,"line":6809},[167,67864,1257],{"class":173},[167,67866,507],{"class":177},[167,67868,40550],{"class":181},[167,67870,267],{"class":173},[167,67872,42159],{"class":201},[167,67874,42135],{"class":181},[167,67876,267],{"class":173},[167,67878,42166],{"class":201},[167,67880,185],{"class":173},[167,67882,67883],{"class":169,"line":6824},[167,67884,42173],{"class":173},[167,67886,67887,67889,67891],{"class":169,"line":6829},[167,67888,1292],{"class":173},[167,67890,507],{"class":177},[167,67892,185],{"class":173},[167,67894,67895],{"class":169,"line":6836},[167,67896,209],{"emptyLinePlaceholder":208},[167,67898,67899,67901,67903,67905,67907,67909],{"class":169,"line":6845},[167,67900,1257],{"class":173},[167,67902,15],{"class":177},[167,67904,39102],{"class":181},[167,67906,267],{"class":173},[167,67908,42198],{"class":201},[167,67910,185],{"class":173},[167,67912,67913],{"class":169,"line":6854},[167,67914,42205],{"class":173},[167,67916,67917,67919,67921],{"class":169,"line":6861},[167,67918,1292],{"class":173},[167,67920,15],{"class":177},[167,67922,185],{"class":173},[167,67924,67925,67927,67929],{"class":169,"line":6879},[167,67926,504],{"class":173},[167,67928,4305],{"class":177},[167,67930,185],{"class":173},[167,67932,67933,67935,67937],{"class":169,"line":6884},[167,67934,282],{"class":173},[167,67936,299],{"class":177},[167,67938,185],{"class":173},[154,67940,67941],{"className":156,"code":42232,"filename":3973,"language":162,"meta":163,"style":163},[87,67942,67943,67951,67959,67965,67971,67979,67987,67995,67999,68003,68007,68013,68019,68027,68035,68043,68051,68055,68059,68065,68071,68083,68093,68097,68101,68105,68109,68115,68137,68151,68163,68173,68185,68193,68197,68201,68205,68213,68217,68225,68239,68265,68269,68289,68293,68301,68305,68319,68323,68331,68339],{"__ignoreMap":163},[167,67944,67945,67947,67949],{"class":169,"line":170},[167,67946,174],{"class":173},[167,67948,178],{"class":177},[167,67950,185],{"class":173},[167,67952,67953,67955,67957],{"class":169,"line":188},[167,67954,608],{"class":191},[167,67956,3991],{"class":191},[167,67958,1905],{"class":173},[167,67960,67961,67963],{"class":169,"line":205},[167,67962,7176],{"class":181},[167,67964,763],{"class":173},[167,67966,67967,67969],{"class":169,"line":160},[167,67968,1937],{"class":191},[167,67970,1905],{"class":173},[167,67972,67973,67975,67977],{"class":169,"line":238},[167,67974,37802],{"class":173},[167,67976,31161],{"class":201},[167,67978,393],{"class":173},[167,67980,67981,67983,67985],{"class":169,"line":243},[167,67982,42275],{"class":173},[167,67984,3392],{"class":219},[167,67986,393],{"class":173},[167,67988,67989,67991,67993],{"class":169,"line":261},[167,67990,10652],{"class":173},[167,67992,3392],{"class":219},[167,67994,393],{"class":173},[167,67996,67997],{"class":169,"line":273},[167,67998,24370],{"class":173},[167,68000,68001],{"class":169,"line":279},[167,68002,398],{"class":173},[167,68004,68005],{"class":169,"line":289},[167,68006,8755],{"class":173},[167,68008,68009,68011],{"class":169,"line":294},[167,68010,42304],{"class":181},[167,68012,763],{"class":173},[167,68014,68015,68017],{"class":169,"line":304},[167,68016,8767],{"class":191},[167,68018,1905],{"class":173},[167,68020,68021,68023,68025],{"class":169,"line":313},[167,68022,41698],{"class":173},[167,68024,37707],{"class":201},[167,68026,393],{"class":173},[167,68028,68029,68031,68033],{"class":169,"line":161},[167,68030,41708],{"class":173},[167,68032,41924],{"class":201},[167,68034,393],{"class":173},[167,68036,68037,68039,68041],{"class":169,"line":335},[167,68038,41718],{"class":173},[167,68040,37707],{"class":201},[167,68042,393],{"class":173},[167,68044,68045,68047,68049],{"class":169,"line":341},[167,68046,41728],{"class":173},[167,68048,390],{"class":219},[167,68050,393],{"class":173},[167,68052,68053],{"class":169,"line":489},[167,68054,42349],{"class":173},[167,68056,68057],{"class":169,"line":495},[167,68058,755],{"class":173},[167,68060,68061,68063],{"class":169,"line":501},[167,68062,42358],{"class":181},[167,68064,763],{"class":173},[167,68066,68067,68069],{"class":169,"line":512},[167,68068,8767],{"class":191},[167,68070,1905],{"class":173},[167,68072,68073,68075,68077,68079,68081],{"class":169,"line":781},[167,68074,42371],{"class":201},[167,68076,1108],{"class":173},[167,68078,6641],{"class":191},[167,68080,4927],{"class":219},[167,68082,42380],{"class":173},[167,68084,68085,68087,68089,68091],{"class":169,"line":786},[167,68086,42385],{"class":201},[167,68088,1108],{"class":173},[167,68090,4927],{"class":219},[167,68092,42380],{"class":173},[167,68094,68095],{"class":169,"line":2678},[167,68096,42349],{"class":173},[167,68098,68099],{"class":169,"line":2692},[167,68100,755],{"class":173},[167,68102,68103],{"class":169,"line":3575},[167,68104,398],{"class":173},[167,68106,68107],{"class":169,"line":5028},[167,68108,4419],{"class":173},[167,68110,68111,68113],{"class":169,"line":5037},[167,68112,42412],{"class":181},[167,68114,763],{"class":173},[167,68116,68117,68119,68121,68123,68125,68127,68129,68131,68133,68135],{"class":169,"line":5046},[167,68118,741],{"class":219},[167,68120,10715],{"class":173},[167,68122,267],{"class":191},[167,68124,7351],{"class":219},[167,68126,37838],{"class":173},[167,68128,2500],{"class":181},[167,68130,14087],{"class":173},[167,68132,2550],{"class":191},[167,68134,38799],{"class":201},[167,68136,24044],{"class":173},[167,68138,68139,68141,68143,68145,68147,68149],{"class":169,"line":6756},[167,68140,7261],{"class":191},[167,68142,2526],{"class":173},[167,68144,4927],{"class":219},[167,68146,42447],{"class":173},[167,68148,24238],{"class":191},[167,68150,24044],{"class":173},[167,68152,68153,68155,68157,68159,68161],{"class":169,"line":6778},[167,68154,741],{"class":219},[167,68156,42458],{"class":173},[167,68158,267],{"class":191},[167,68160,26318],{"class":219},[167,68162,24044],{"class":173},[167,68164,68165,68167,68169,68171],{"class":169,"line":6783},[167,68166,42469],{"class":181},[167,68168,1493],{"class":173},[167,68170,639],{"class":191},[167,68172,1905],{"class":173},[167,68174,68175,68177,68179,68181,68183],{"class":169,"line":6788},[167,68176,14773],{"class":219},[167,68178,42458],{"class":173},[167,68180,267],{"class":191},[167,68182,5777],{"class":219},[167,68184,24044],{"class":173},[167,68186,68187,68189,68191],{"class":169,"line":6793},[167,68188,13048],{"class":173},[167,68190,17180],{"class":219},[167,68192,24169],{"class":173},[167,68194,68195],{"class":169,"line":6809},[167,68196,755],{"class":173},[167,68198,68199],{"class":169,"line":6824},[167,68200,398],{"class":173},[167,68202,68203],{"class":169,"line":6829},[167,68204,24148],{"class":173},[167,68206,68207,68209,68211],{"class":169,"line":6836},[167,68208,282],{"class":173},[167,68210,178],{"class":177},[167,68212,185],{"class":173},[167,68214,68215],{"class":169,"line":6845},[167,68216,209],{"emptyLinePlaceholder":208},[167,68218,68219,68221,68223],{"class":169,"line":6854},[167,68220,174],{"class":173},[167,68222,299],{"class":177},[167,68224,185],{"class":173},[167,68226,68227,68229,68231,68233,68235,68237],{"class":169,"line":6861},[167,68228,307],{"class":173},[167,68230,4305],{"class":177},[167,68232,4308],{"class":181},[167,68234,267],{"class":173},[167,68236,4348],{"class":201},[167,68238,185],{"class":173},[167,68240,68241,68243,68245,68247,68249,68251,68253,68255,68257,68259,68261,68263],{"class":169,"line":6879},[167,68242,1257],{"class":173},[167,68244,2650],{"class":177},[167,68246,39834],{"class":181},[167,68248,267],{"class":173},[167,68250,41632],{"class":201},[167,68252,2653],{"class":181},[167,68254,267],{"class":173},[167,68256,37707],{"class":201},[167,68258,42135],{"class":181},[167,68260,267],{"class":173},[167,68262,42140],{"class":201},[167,68264,5325],{"class":173},[167,68266,68267],{"class":169,"line":6884},[167,68268,209],{"emptyLinePlaceholder":208},[167,68270,68271,68273,68275,68277,68279,68281,68283,68285,68287],{"class":169,"line":6889},[167,68272,1257],{"class":173},[167,68274,507],{"class":177},[167,68276,40550],{"class":181},[167,68278,267],{"class":173},[167,68280,42159],{"class":201},[167,68282,42135],{"class":181},[167,68284,267],{"class":173},[167,68286,42166],{"class":201},[167,68288,185],{"class":173},[167,68290,68291],{"class":169,"line":6898},[167,68292,42173],{"class":173},[167,68294,68295,68297,68299],{"class":169,"line":6903},[167,68296,1292],{"class":173},[167,68298,507],{"class":177},[167,68300,185],{"class":173},[167,68302,68303],{"class":169,"line":6912},[167,68304,209],{"emptyLinePlaceholder":208},[167,68306,68307,68309,68311,68313,68315,68317],{"class":169,"line":6928},[167,68308,1257],{"class":173},[167,68310,15],{"class":177},[167,68312,39102],{"class":181},[167,68314,267],{"class":173},[167,68316,42198],{"class":201},[167,68318,185],{"class":173},[167,68320,68321],{"class":169,"line":6949},[167,68322,42205],{"class":173},[167,68324,68325,68327,68329],{"class":169,"line":6954},[167,68326,1292],{"class":173},[167,68328,15],{"class":177},[167,68330,185],{"class":173},[167,68332,68333,68335,68337],{"class":169,"line":6975},[167,68334,504],{"class":173},[167,68336,4305],{"class":177},[167,68338,185],{"class":173},[167,68340,68341,68343,68345],{"class":169,"line":6989},[167,68342,282],{"class":173},[167,68344,299],{"class":177},[167,68346,185],{"class":173},[22,68348,7678],{"id":7677},[15,68350,68351,42656],{},[87,68352,23868],{},[15,68354,42659],{},[33,68356,68357,68363,68369,68373],{},[36,68358,68359,42666,68361,1679],{},[87,68360,583],{},[87,68362,23868],{},[36,68364,42671,68365,1028,68367,1679],{},[87,68366,39922],{},[87,68368,924],{},[36,68370,42678,68371,1679],{},[87,68372,1661],{},[36,68374,68375,42685],{},[87,68376,41496],{},[15,68378,42688,68379,42691],{},[87,68380,23868],{},[924,68382,42694],{},{"title":163,"searchDepth":188,"depth":188,"links":68384},[68385,68386,68387,68388,68389,68395,68403,68404],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":68390},[68391,68392,68393,68394],{"id":39987,"depth":205,"text":42704},{"id":40088,"depth":205,"text":42706},{"id":40172,"depth":205,"text":40173},{"id":40216,"depth":205,"text":42709},{"id":7996,"depth":188,"text":7997,"children":68396},[68397,68398,68399,68400,68401,68402],{"id":40230,"depth":205,"text":42713},{"id":40467,"depth":205,"text":42715},{"id":40692,"depth":205,"text":42717},{"id":40995,"depth":205,"text":42719},{"id":41250,"depth":205,"text":42721},{"id":41492,"depth":205,"text":42723},{"id":41802,"depth":188,"text":41803},{"id":7677,"depth":188,"text":7678},{"updatedAt":42731,"coverCaption":23656,"author":946,"keywords":68406},[3258,23868,42733,42734,42735,3260,3973],[68408],{"headline":42739,"author":68409,"datePublished":42731,"@type":961},{"name":946,"@type":959},{"title":39772,"description":42729},[68412,68413,68414,68415],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":68417,"title":68418,"body":68419,"cover":27738,"coverAlt":69622,"date":27740,"description":69623,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":69624,"navigation":208,"path":69626,"schemaOrg":69627,"seo":69631,"series":26460,"seriesDescription":60258,"seriesOrder":289,"seriesTitle":60259,"slug":942,"stem":69632,"tags":69633,"__hash__":69639},"blog\u002Fblog\u002Fdirectives-vue-v-cloak-guide.en.md","Vue Directives: v-cloak",{"type":8,"value":68420,"toc":69601},[68421,68427,68438,68440,68443,68448,68451,68465,68467,68475,68478,68483,68509,68522,68531,68535,68541,68544,68557,68560,68571,68574,68579,68590,68593,68595,68609,68616,68618,68625,68631,68635,68644,68648,68654,68658,68663,68665,68669,68695,68701,68705,68838,68975,69077,69081,69087,69091,69318,69547,69573,69575,69580,69583,69599],[11,68422,68424,68425],{"id":68423},"vue-directives-v-cloak","Vue Directives: ",[87,68426,26486],{},[15,68428,68429,68431,68432,68434,68435,68437],{},[87,68430,26486],{}," solves a classic visual issue in ",[3933,68433,26494],{}," apps: the flicker of uncompiled templates (",[87,68436,26498],{},") before the instance finishes mounting. It is a simple directive, but a strategic one when first-load quality matters.",[22,68439,62810],{"id":62809},[15,68441,68442],{},"If your initial HTML includes Vue expressions, the browser can render them raw for a few milliseconds, especially when the bundle has not downloaded or executed yet.\nThat flash hurts user experience and gives a sense of instability.",[15,68444,68445,68447],{},[87,68446,26486],{}," prevents this intermediate state by hiding content until Vue has finished mounting and compiling the template.",[15,68449,68450],{},"Direct benefits:",[33,68452,68453,68459,68462],{},[36,68454,68455,68456,68458],{},"Users do not see ",[87,68457,26524],{}," or unprocessed structures.",[36,68460,68461],{},"First paint feels cleaner and more professional.",[36,68463,68464],{},"You reduce visual noise in landing pages, static layouts, or progressive integrations.",[22,68466,62839],{"id":57680},[15,68468,68469,68471,68472,68474],{},[87,68470,26486],{}," works together with CSS.\nVue automatically removes the ",[87,68473,26486],{}," attribute from the node once the instance has mounted and the template is compiled.",[15,68476,68477],{},"Typical pattern:",[3035,68479,68480],{},[36,68481,68482],{},"Add a global CSS rule:",[154,68484,68485],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},[87,68486,68487,68495,68505],{"__ignoreMap":163},[167,68488,68489,68491,68493],{"class":169,"line":170},[167,68490,26564],{"class":173},[167,68492,26486],{"class":181},[167,68494,26569],{"class":173},[167,68496,68497,68499,68501,68503],{"class":169,"line":188},[167,68498,26767],{"class":219},[167,68500,1108],{"class":173},[167,68502,26579],{"class":219},[167,68504,24044],{"class":173},[167,68506,68507],{"class":169,"line":205},[167,68508,276],{"class":173},[3035,68510,68511,68516,68519],{"start":188},[36,68512,68513,68514,1679],{},"Mark the root container (or the required fragment) with ",[87,68515,26486],{},[36,68517,68518],{},"While Vue has not mounted, the block stays hidden.",[36,68520,68521],{},"When Vue mounts, it removes the attribute and processed content appears.",[5367,68523,68524],{},[15,68525,68526,68528,68529,4270],{},[87,68527,26486],{}," does not transform data or add reactivity. It only controls visibility during the pre-mount phase (",[87,68530,26608],{},[22,68532,68534],{"id":68533},"vue-3-and-ssr-considerations","Vue 3 and SSR considerations",[15,68536,68537,68538,68540],{},"In SSR apps (for example, with ",[3933,68539,26618],{},"), HTML already arrives compiled from the server, so there is usually no risk of showing raw interpolations.",[15,68542,68543],{},"In those cases:",[33,68545,68546,68551,68554],{},[36,68547,68548,68550],{},[87,68549,26486],{}," is usually unnecessary.",[36,68552,68553],{},"It does not fix hydration mismatches.",[36,68555,68556],{},"It does not replace a proper loading or streaming strategy.",[15,68558,68559],{},"Its value is higher in:",[33,68561,68562,68565,68568],{},[36,68563,68564],{},"Progressive enhancement over existing HTML.",[36,68566,68567],{},"SPA apps where the bundle can take time to execute.",[36,68569,68570],{},"Environments where initial HTML includes raw Vue markers.",[22,68572,68573],{"id":57774},"When to use",[15,68575,62955,68576,68578],{},[87,68577,26486],{}," when:",[33,68580,68581,68584,68587],{},[36,68582,68583],{},"You serve initial HTML with visible Vue templates (CMS, progressive integration).",[36,68585,68586],{},"The app takes noticeable time to mount because of bundle size or slow network.",[36,68588,68589],{},"You want to protect first visual impression for critical components (hero, login, pricing).",[22,68591,68592],{"id":57798},"When to avoid",[15,68594,62983],{},[33,68596,68597,68600,68603,68606],{},[36,68598,68599],{},"There is no real risk of exposing interpolations.",[36,68601,68602],{},"Skeletons or richer placeholders solve initial state better.",[36,68604,68605],{},"Hiding the full container hurts accessibility or layout continuity.",[36,68607,68608],{},"You are in SSR and HTML already arrives processed.",[5367,68610,68611],{},[15,68612,68613,68615],{},[87,68614,26486],{}," is not a performance strategy; it is a visual finishing adjustment.",[22,68617,63002],{"id":57819},[3087,68619,68621,68622,68624],{"id":68620},"_1-using-v-cloak-without-css","1) Using ",[87,68623,26486],{}," without CSS",[15,68626,68627,68628,68630],{},"If you do not define ",[87,68629,26706],{},", the directive has no visible effect.",[3087,68632,68634],{"id":68633},"_2-placing-the-css-rule-in-the-wrong-scope","2) Placing the CSS rule in the wrong scope",[15,68636,68637,68638,68640,68641,68643],{},"If the rule lives in another component's ",[87,68639,26714],{},", it may not affect the marked node.\nDefine it in global styles (for example, ",[87,68642,26723],{}," or root layout styles).",[3087,68645,68647],{"id":68646},"_3-hiding-too-much-ui","3) Hiding too much UI",[15,68649,68650,68651,68653],{},"Applying ",[87,68652,26486],{}," to the full wrapper can blank the screen during startup.\nIn complex views, use it only where flicker risk is real.",[3087,68655,68657],{"id":68656},"_4-expecting-it-to-fix-hydration-mismatches","4) Expecting it to fix hydration mismatches",[15,68659,68660,68662],{},[87,68661,26486],{}," does not fix differences between server HTML and client render.\nHydration mismatches must be fixed by aligning render logic between server and client.",[22,68664,63234],{"id":57925},[3087,68666,68668],{"id":68667},"_1-minimal-global-setup","1) Minimal global setup",[154,68670,68671],{"className":26554,"code":26752,"language":26557,"meta":163,"style":163},[87,68672,68673,68681,68691],{"__ignoreMap":163},[167,68674,68675,68677,68679],{"class":169,"line":170},[167,68676,26564],{"class":173},[167,68678,26486],{"class":181},[167,68680,26569],{"class":173},[167,68682,68683,68685,68687,68689],{"class":169,"line":188},[167,68684,26767],{"class":219},[167,68686,1108],{"class":173},[167,68688,26579],{"class":219},[167,68690,24044],{"class":173},[167,68692,68693],{"class":169,"line":205},[167,68694,276],{"class":173},[15,68696,68697,68698,68700],{},"With this rule, any node marked with ",[87,68699,26486],{}," remains hidden until mount.",[3087,68702,68704],{"id":68703},"_2-hero-with-reactive-headline","2) Hero with reactive headline",[154,68706,68709],{"className":156,"code":68707,"filename":3260,"highlights":68708,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst headline = ref(\"Learn Vue without friction\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-cloak class=\"hero\">\n    \u003Ch1>{{ headline }}\u003C\u002Fh1>\n    \u003Cp>Practical guides for frontend teams.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[294],[87,68710,68711,68727,68739,68743,68760,68768,68772,68780,68796,68808,68821,68830],{"__ignoreMap":163},[167,68712,68713,68715,68717,68719,68721,68723,68725],{"class":169,"line":170},[167,68714,174],{"class":173},[167,68716,178],{"class":177},[167,68718,182],{"class":181},[167,68720,1050],{"class":181},[167,68722,267],{"class":173},[167,68724,1055],{"class":201},[167,68726,185],{"class":173},[167,68728,68729,68731,68733,68735,68737],{"class":169,"line":188},[167,68730,192],{"class":191},[167,68732,195],{"class":173},[167,68734,198],{"class":191},[167,68736,24041],{"class":201},[167,68738,24044],{"class":173},[167,68740,68741],{"class":169,"line":205},[167,68742,209],{"emptyLinePlaceholder":208},[167,68744,68745,68747,68749,68751,68753,68755,68758],{"class":169,"line":160},[167,68746,216],{"class":191},[167,68748,26834],{"class":219},[167,68750,223],{"class":191},[167,68752,226],{"class":181},[167,68754,229],{"class":173},[167,68756,68757],{"class":201},"\"Learn Vue without friction\"",[167,68759,24169],{"class":173},[167,68761,68762,68764,68766],{"class":169,"line":238},[167,68763,282],{"class":173},[167,68765,178],{"class":177},[167,68767,185],{"class":173},[167,68769,68770],{"class":169,"line":243},[167,68771,209],{"emptyLinePlaceholder":208},[167,68773,68774,68776,68778],{"class":169,"line":261},[167,68775,174],{"class":173},[167,68777,299],{"class":177},[167,68779,185],{"class":173},[167,68781,68782,68784,68786,68788,68790,68792,68794],{"class":169,"line":273},[167,68783,307],{"class":173},[167,68785,10117],{"class":177},[167,68787,26875],{"class":181},[167,68789,1245],{"class":181},[167,68791,267],{"class":173},[167,68793,26882],{"class":201},[167,68795,185],{"class":173},[167,68797,68798,68800,68802,68804,68806],{"class":169,"line":279},[167,68799,1257],{"class":173},[167,68801,11],{"class":177},[167,68803,26893],{"class":173},[167,68805,11],{"class":177},[167,68807,185],{"class":173},[167,68809,68810,68812,68814,68817,68819],{"class":169,"line":289},[167,68811,1257],{"class":173},[167,68813,15],{"class":177},[167,68815,68816],{"class":173},">Practical guides for frontend teams.\u003C\u002F",[167,68818,15],{"class":177},[167,68820,185],{"class":173},[167,68822,68824,68826,68828],{"class":68823,"line":294},[169,213],[167,68825,504],{"class":173},[167,68827,10117],{"class":177},[167,68829,185],{"class":173},[167,68831,68832,68834,68836],{"class":169,"line":304},[167,68833,282],{"class":173},[167,68835,299],{"class":177},[167,68837,185],{"class":173},[154,68839,68842],{"className":156,"code":68840,"filename":3973,"highlights":68841,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      headline: \"Learn Vue without friction\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-cloak class=\"hero\">\n    \u003Ch1>{{ headline }}\u003C\u002Fh1>\n    \u003Cp>Practical guides for frontend teams.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[335],[87,68843,68844,68858,68866,68872,68878,68886,68890,68894,68898,68906,68910,68918,68934,68946,68958,68967],{"__ignoreMap":163},[167,68845,68846,68848,68850,68852,68854,68856],{"class":169,"line":170},[167,68847,174],{"class":173},[167,68849,178],{"class":177},[167,68851,1050],{"class":181},[167,68853,267],{"class":173},[167,68855,1055],{"class":201},[167,68857,185],{"class":173},[167,68859,68860,68862,68864],{"class":169,"line":188},[167,68861,608],{"class":191},[167,68863,3991],{"class":191},[167,68865,1905],{"class":173},[167,68867,68868,68870],{"class":169,"line":205},[167,68869,7176],{"class":181},[167,68871,763],{"class":173},[167,68873,68874,68876],{"class":169,"line":160},[167,68875,1937],{"class":191},[167,68877,1905],{"class":173},[167,68879,68880,68882,68884],{"class":169,"line":238},[167,68881,26971],{"class":173},[167,68883,68757],{"class":201},[167,68885,393],{"class":173},[167,68887,68888],{"class":169,"line":243},[167,68889,24370],{"class":173},[167,68891,68892],{"class":169,"line":261},[167,68893,398],{"class":173},[167,68895,68896],{"class":169,"line":273},[167,68897,24148],{"class":173},[167,68899,68900,68902,68904],{"class":169,"line":279},[167,68901,282],{"class":173},[167,68903,178],{"class":177},[167,68905,185],{"class":173},[167,68907,68908],{"class":169,"line":289},[167,68909,209],{"emptyLinePlaceholder":208},[167,68911,68912,68914,68916],{"class":169,"line":294},[167,68913,174],{"class":173},[167,68915,299],{"class":177},[167,68917,185],{"class":173},[167,68919,68920,68922,68924,68926,68928,68930,68932],{"class":169,"line":304},[167,68921,307],{"class":173},[167,68923,10117],{"class":177},[167,68925,26875],{"class":181},[167,68927,1245],{"class":181},[167,68929,267],{"class":173},[167,68931,26882],{"class":201},[167,68933,185],{"class":173},[167,68935,68936,68938,68940,68942,68944],{"class":169,"line":313},[167,68937,1257],{"class":173},[167,68939,11],{"class":177},[167,68941,26893],{"class":173},[167,68943,11],{"class":177},[167,68945,185],{"class":173},[167,68947,68948,68950,68952,68954,68956],{"class":169,"line":161},[167,68949,1257],{"class":173},[167,68951,15],{"class":177},[167,68953,68816],{"class":173},[167,68955,15],{"class":177},[167,68957,185],{"class":173},[167,68959,68961,68963,68965],{"class":68960,"line":335},[169,213],[167,68962,504],{"class":173},[167,68964,10117],{"class":177},[167,68966,185],{"class":173},[167,68968,68969,68971,68973],{"class":169,"line":341},[167,68970,282],{"class":173},[167,68972,299],{"class":177},[167,68974,185],{"class":173},[154,68976,68978],{"className":26554,"code":27067,"filename":26556,"highlights":68977,"language":26557,"meta":163,"style":163},[170,188,205],[87,68979,68980,68989,69000,69005,69009,69015,69039,69049,69061,69073],{"__ignoreMap":163},[167,68981,68983,68985,68987],{"class":68982,"line":170},[169,213],[167,68984,26564],{"class":173},[167,68986,26486],{"class":181},[167,68988,26569],{"class":173},[167,68990,68992,68994,68996,68998],{"class":68991,"line":188},[169,213],[167,68993,26767],{"class":219},[167,68995,1108],{"class":173},[167,68997,26579],{"class":219},[167,68999,24044],{"class":173},[167,69001,69003],{"class":69002,"line":205},[169,213],[167,69004,276],{"class":173},[167,69006,69007],{"class":169,"line":160},[167,69008,209],{"emptyLinePlaceholder":208},[167,69010,69011,69013],{"class":169,"line":238},[167,69012,27104],{"class":181},[167,69014,1905],{"class":173},[167,69016,69017,69019,69021,69023,69025,69027,69029,69031,69033,69035,69037],{"class":169,"line":243},[167,69018,27111],{"class":219},[167,69020,1108],{"class":173},[167,69022,27116],{"class":219},[167,69024,229],{"class":173},[167,69026,27121],{"class":219},[167,69028,27124],{"class":191},[167,69030,1025],{"class":173},[167,69032,26467],{"class":219},[167,69034,1025],{"class":173},[167,69036,5425],{"class":219},[167,69038,24169],{"class":173},[167,69040,69041,69043,69045,69047],{"class":169,"line":261},[167,69042,27139],{"class":219},[167,69044,1108],{"class":173},[167,69046,27144],{"class":219},[167,69048,24044],{"class":173},[167,69050,69051,69053,69055,69057,69059],{"class":169,"line":273},[167,69052,27151],{"class":219},[167,69054,1108],{"class":173},[167,69056,1853],{"class":219},[167,69058,27158],{"class":191},[167,69060,24044],{"class":173},[167,69062,69063,69065,69067,69069,69071],{"class":169,"line":279},[167,69064,27165],{"class":219},[167,69066,1108],{"class":173},[167,69068,27170],{"class":219},[167,69070,27173],{"class":191},[167,69072,24044],{"class":173},[167,69074,69075],{"class":169,"line":289},[167,69076,276],{"class":173},[3087,69078,69080],{"id":69079},"_3-progressive-enhancement-on-legacy-html","3) Progressive enhancement on legacy HTML",[15,69082,69083,69084,69086],{},"When you mount Vue into a specific section of a legacy page (for example, a login block or interactive widget), ",[87,69085,26486],{}," prevents raw markers from flashing during initial bootstrap.",[3087,69088,69090],{"id":69089},"_4-full-example-with-async-state","4) Full example with async state",[154,69092,69095],{"className":156,"code":69093,"filename":3260,"highlights":69094,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, ref } from \"vue\";\n\nconst user = ref\u003C{ name: string } | null>(null);\n\nonMounted(async () => {\n  await new Promise((resolve) => setTimeout(resolve, 350));\n  user.value = { name: \"Cristhian\" };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Caside v-cloak class=\"welcome-card\">\n    \u003Ch2>Dashboard\u003C\u002Fh2>\n    \u003Cp v-if=\"user\">Hi, {{ user.name }}\u003C\u002Fp>\n    \u003Cp v-else>Loading profile...\u003C\u002Fp>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[188,161],[87,69096,69097,69113,69126,69130,69160,69164,69178,69202,69214,69218,69226,69230,69238,69254,69268,69287,69302,69310],{"__ignoreMap":163},[167,69098,69099,69101,69103,69105,69107,69109,69111],{"class":169,"line":170},[167,69100,174],{"class":173},[167,69102,178],{"class":177},[167,69104,182],{"class":181},[167,69106,1050],{"class":181},[167,69108,267],{"class":173},[167,69110,1055],{"class":201},[167,69112,185],{"class":173},[167,69114,69116,69118,69120,69122,69124],{"class":69115,"line":188},[169,213],[167,69117,192],{"class":191},[167,69119,27221],{"class":173},[167,69121,198],{"class":191},[167,69123,24041],{"class":201},[167,69125,24044],{"class":173},[167,69127,69128],{"class":169,"line":205},[167,69129,209],{"emptyLinePlaceholder":208},[167,69131,69132,69134,69136,69138,69140,69142,69144,69146,69148,69150,69152,69154,69156,69158],{"class":169,"line":160},[167,69133,216],{"class":191},[167,69135,23476],{"class":219},[167,69137,223],{"class":191},[167,69139,226],{"class":181},[167,69141,1073],{"class":173},[167,69143,592],{"class":254},[167,69145,583],{"class":191},[167,69147,586],{"class":219},[167,69149,23409],{"class":173},[167,69151,11763],{"class":191},[167,69153,6567],{"class":219},[167,69155,6570],{"class":173},[167,69157,6573],{"class":219},[167,69159,24169],{"class":173},[167,69161,69162],{"class":169,"line":238},[167,69163,209],{"emptyLinePlaceholder":208},[167,69165,69166,69168,69170,69172,69174,69176],{"class":169,"line":243},[167,69167,6796],{"class":181},[167,69169,229],{"class":173},[167,69171,2523],{"class":191},[167,69173,1469],{"class":173},[167,69175,639],{"class":191},[167,69177,1905],{"class":173},[167,69179,69180,69182,69184,69186,69188,69190,69192,69194,69196,69198,69200],{"class":169,"line":261},[167,69181,2575],{"class":191},[167,69183,4224],{"class":191},[167,69185,23253],{"class":219},[167,69187,1918],{"class":173},[167,69189,23258],{"class":254},[167,69191,693],{"class":173},[167,69193,639],{"class":191},[167,69195,27298],{"class":181},[167,69197,27301],{"class":173},[167,69199,27304],{"class":219},[167,69201,27307],{"class":173},[167,69203,69204,69206,69208,69210,69212],{"class":169,"line":273},[167,69205,27312],{"class":173},[167,69207,267],{"class":191},[167,69209,27317],{"class":173},[167,69211,27320],{"class":201},[167,69213,25582],{"class":173},[167,69215,69216],{"class":169,"line":279},[167,69217,27327],{"class":173},[167,69219,69220,69222,69224],{"class":169,"line":289},[167,69221,282],{"class":173},[167,69223,178],{"class":177},[167,69225,185],{"class":173},[167,69227,69228],{"class":169,"line":294},[167,69229,209],{"emptyLinePlaceholder":208},[167,69231,69232,69234,69236],{"class":169,"line":304},[167,69233,174],{"class":173},[167,69235,299],{"class":177},[167,69237,185],{"class":173},[167,69239,69240,69242,69244,69246,69248,69250,69252],{"class":169,"line":313},[167,69241,307],{"class":173},[167,69243,27354],{"class":177},[167,69245,26875],{"class":181},[167,69247,1245],{"class":181},[167,69249,267],{"class":173},[167,69251,27363],{"class":201},[167,69253,185],{"class":173},[167,69255,69257,69259,69261,69264,69266],{"class":69256,"line":161},[169,213],[167,69258,1257],{"class":173},[167,69260,22],{"class":177},[167,69262,69263],{"class":173},">Dashboard\u003C\u002F",[167,69265,22],{"class":177},[167,69267,185],{"class":173},[167,69269,69270,69272,69274,69276,69278,69280,69283,69285],{"class":169,"line":335},[167,69271,1257],{"class":173},[167,69273,15],{"class":177},[167,69275,5694],{"class":181},[167,69277,267],{"class":173},[167,69279,27391],{"class":201},[167,69281,69282],{"class":173},">Hi, {{ user.name }}\u003C\u002F",[167,69284,15],{"class":177},[167,69286,185],{"class":173},[167,69288,69289,69291,69293,69295,69298,69300],{"class":169,"line":341},[167,69290,1257],{"class":173},[167,69292,15],{"class":177},[167,69294,7038],{"class":181},[167,69296,69297],{"class":173},">Loading profile...\u003C\u002F",[167,69299,15],{"class":177},[167,69301,185],{"class":173},[167,69303,69304,69306,69308],{"class":169,"line":489},[167,69305,504],{"class":173},[167,69307,27354],{"class":177},[167,69309,185],{"class":173},[167,69311,69312,69314,69316],{"class":169,"line":495},[167,69313,282],{"class":173},[167,69315,299],{"class":177},[167,69317,185],{"class":173},[154,69319,69322],{"className":156,"code":69320,"filename":3973,"highlights":69321,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: \"WelcomeCard\",\n  data() {\n    return {\n      user: null as null | { name: string },\n    };\n  },\n  async mounted() {\n    await new Promise((resolve) => setTimeout(resolve, 350));\n    this.user = { name: \"Cristhian\" };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Caside v-cloak class=\"welcome-card\">\n    \u003Ch2>Dashboard\u003C\u002Fh2>\n    \u003Cp v-if=\"user\">Hi, {{ user.name }}\u003C\u002Fp>\n    \u003Cp v-else>Loading profile...\u003C\u002Fp>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[161],[87,69323,69324,69338,69346,69354,69360,69366,69388,69392,69396,69404,69428,69442,69446,69450,69459,69463,69471,69487,69499,69517,69531,69539],{"__ignoreMap":163},[167,69325,69326,69328,69330,69332,69334,69336],{"class":169,"line":170},[167,69327,174],{"class":173},[167,69329,178],{"class":177},[167,69331,1050],{"class":181},[167,69333,267],{"class":173},[167,69335,1055],{"class":201},[167,69337,185],{"class":173},[167,69339,69340,69342,69344],{"class":169,"line":188},[167,69341,608],{"class":191},[167,69343,3991],{"class":191},[167,69345,1905],{"class":173},[167,69347,69348,69350,69352],{"class":169,"line":205},[167,69349,4398],{"class":173},[167,69351,27463],{"class":201},[167,69353,393],{"class":173},[167,69355,69356,69358],{"class":169,"line":160},[167,69357,7176],{"class":181},[167,69359,763],{"class":173},[167,69361,69362,69364],{"class":169,"line":238},[167,69363,1937],{"class":191},[167,69365,1905],{"class":173},[167,69367,69368,69370,69372,69374,69376,69378,69380,69382,69384,69386],{"class":169,"line":243},[167,69369,27482],{"class":173},[167,69371,6573],{"class":219},[167,69373,654],{"class":191},[167,69375,6567],{"class":219},[167,69377,659],{"class":191},[167,69379,577],{"class":173},[167,69381,592],{"class":254},[167,69383,583],{"class":191},[167,69385,586],{"class":219},[167,69387,1856],{"class":173},[167,69389,69390],{"class":169,"line":261},[167,69391,24370],{"class":173},[167,69393,69394],{"class":169,"line":273},[167,69395,398],{"class":173},[167,69397,69398,69400,69402],{"class":169,"line":279},[167,69399,7331],{"class":191},[167,69401,7412],{"class":181},[167,69403,763],{"class":173},[167,69405,69406,69408,69410,69412,69414,69416,69418,69420,69422,69424,69426],{"class":169,"line":289},[167,69407,6730],{"class":191},[167,69409,4224],{"class":191},[167,69411,23253],{"class":219},[167,69413,1918],{"class":173},[167,69415,23258],{"class":254},[167,69417,693],{"class":173},[167,69419,639],{"class":191},[167,69421,27298],{"class":181},[167,69423,27301],{"class":173},[167,69425,27304],{"class":219},[167,69427,27307],{"class":173},[167,69429,69430,69432,69434,69436,69438,69440],{"class":169,"line":294},[167,69431,879],{"class":219},[167,69433,744],{"class":173},[167,69435,267],{"class":191},[167,69437,27317],{"class":173},[167,69439,27320],{"class":201},[167,69441,25582],{"class":173},[167,69443,69444],{"class":169,"line":304},[167,69445,398],{"class":173},[167,69447,69448],{"class":169,"line":313},[167,69449,24148],{"class":173},[167,69451,69453,69455,69457],{"class":69452,"line":161},[169,213],[167,69454,282],{"class":173},[167,69456,178],{"class":177},[167,69458,185],{"class":173},[167,69460,69461],{"class":169,"line":335},[167,69462,209],{"emptyLinePlaceholder":208},[167,69464,69465,69467,69469],{"class":169,"line":341},[167,69466,174],{"class":173},[167,69468,299],{"class":177},[167,69470,185],{"class":173},[167,69472,69473,69475,69477,69479,69481,69483,69485],{"class":169,"line":489},[167,69474,307],{"class":173},[167,69476,27354],{"class":177},[167,69478,26875],{"class":181},[167,69480,1245],{"class":181},[167,69482,267],{"class":173},[167,69484,27363],{"class":201},[167,69486,185],{"class":173},[167,69488,69489,69491,69493,69495,69497],{"class":169,"line":495},[167,69490,1257],{"class":173},[167,69492,22],{"class":177},[167,69494,69263],{"class":173},[167,69496,22],{"class":177},[167,69498,185],{"class":173},[167,69500,69501,69503,69505,69507,69509,69511,69513,69515],{"class":169,"line":501},[167,69502,1257],{"class":173},[167,69504,15],{"class":177},[167,69506,5694],{"class":181},[167,69508,267],{"class":173},[167,69510,27391],{"class":201},[167,69512,69282],{"class":173},[167,69514,15],{"class":177},[167,69516,185],{"class":173},[167,69518,69519,69521,69523,69525,69527,69529],{"class":169,"line":512},[167,69520,1257],{"class":173},[167,69522,15],{"class":177},[167,69524,7038],{"class":181},[167,69526,69297],{"class":173},[167,69528,15],{"class":177},[167,69530,185],{"class":173},[167,69532,69533,69535,69537],{"class":169,"line":781},[167,69534,504],{"class":173},[167,69536,27354],{"class":177},[167,69538,185],{"class":173},[167,69540,69541,69543,69545],{"class":169,"line":786},[167,69542,282],{"class":173},[167,69544,299],{"class":177},[167,69546,185],{"class":173},[154,69548,69549],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},[87,69550,69551,69559,69569],{"__ignoreMap":163},[167,69552,69553,69555,69557],{"class":169,"line":170},[167,69554,26564],{"class":173},[167,69556,26486],{"class":181},[167,69558,26569],{"class":173},[167,69560,69561,69563,69565,69567],{"class":169,"line":188},[167,69562,26767],{"class":219},[167,69564,1108],{"class":173},[167,69566,26579],{"class":219},[167,69568,24044],{"class":173},[167,69570,69571],{"class":169,"line":205},[167,69572,276],{"class":173},[22,69574,60191],{"id":60190},[15,69576,69577,69579],{},[87,69578,26486],{}," is a visual finishing directive: it does not modify your logic or reactivity model, but it improves perceived first-render quality in contexts where templates can appear uncompiled.",[15,69581,69582],{},"Key points:",[33,69584,69585,69590,69593,69596],{},[36,69586,69587,69588,1679],{},"It requires a global CSS rule: ",[87,69589,26706],{},[36,69591,69592],{},"It prevents flashing of unprocessed interpolations.",[36,69594,69595],{},"It does not replace performance optimization or solve hydration mismatches.",[36,69597,69598],{},"It should be applied selectively and with context awareness (SPA vs SSR).",[924,69600,27715],{},{"title":163,"searchDepth":188,"depth":188,"links":69602},[69603,69604,69605,69606,69607,69608,69615,69621],{"id":62809,"depth":188,"text":62810},{"id":57680,"depth":188,"text":62839},{"id":68533,"depth":188,"text":68534},{"id":57774,"depth":188,"text":68573},{"id":57798,"depth":188,"text":68592},{"id":57819,"depth":188,"text":63002,"children":69609},[69610,69612,69613,69614],{"id":68620,"depth":205,"text":69611},"1) Using v-cloak without CSS",{"id":68633,"depth":205,"text":68634},{"id":68646,"depth":205,"text":68647},{"id":68656,"depth":205,"text":68657},{"id":57925,"depth":188,"text":63234,"children":69616},[69617,69618,69619,69620],{"id":68667,"depth":205,"text":68668},{"id":68703,"depth":205,"text":68704},{"id":69079,"depth":205,"text":69080},{"id":69089,"depth":205,"text":69090},{"id":60190,"depth":188,"text":60191},"Temporary cover image for the article about v-cloak in Vue","Learn how to use v-cloak in Vue 3 to prevent template flicker before mount, with Composition API and Options API, real-world use cases, common mistakes, and best practices.",{"updatedAt":27743,"coverCaption":65655,"author":946,"keywords":69625},[3258,26486,27745,27746,3260,3973],"\u002Fblog\u002Fdirectives-vue-v-cloak-guide.en",[69628],{"headline":69629,"author":69630,"datePublished":27743,"@type":961},"Vue v-cloak directive: prevent flicker before mount",{"name":946,"@type":959},{"title":68418,"description":69623},"blog\u002Fdirectives-vue-v-cloak-guide.en",[69634,69635,69636,69638],{"tag":60263,"color":26467},{"tag":27757,"color":27758},{"tag":69637,"color":9170},"Rendering",{"tag":65670,"color":5425},"Kf5pI7WVFhWeTfW1PqIvromZ6MG-djhL5X9GlIvIaZ0",{"id":26476,"title":26477,"body":69641,"cover":27738,"coverAlt":27739,"date":27740,"description":27741,"draft":940,"extension":941,"lab":942,"locale":943,"meta":70761,"navigation":208,"path":27747,"schemaOrg":70763,"seo":70766,"series":26460,"seriesDescription":26461,"seriesOrder":289,"seriesTitle":26462,"slug":942,"stem":27753,"tags":70767,"__hash__":27761},{"type":8,"value":69642,"toc":70741},[69643,69647,69655,69657,69659,69663,69667,69677,69679,69685,69689,69693,69719,69729,69737,69739,69743,69745,69755,69757,69765,69767,69771,69779,69781,69783,69793,69799,69801,69805,69809,69813,69819,69821,69825,69827,69831,69833,69835,69861,69867,69869,69999,70135,70237,70239,70243,70245,70465,70691,70717,70719,70723,70727,70739],[11,69644,26483,69645],{"id":26482},[87,69646,26486],{},[15,69648,69649,26491,69651,26495,69653,26499],{},[87,69650,26486],{},[3933,69652,26494],{},[87,69654,26498],{},[22,69656,26503],{"id":26502},[15,69658,26506],{},[15,69660,69661,26511],{},[87,69662,26486],{},[15,69664,69665],{},[3933,69666,26516],{},[33,69668,69669,69673,69675],{},[36,69670,26521,69671,26525],{},[87,69672,26524],{},[36,69674,26528],{},[36,69676,26531],{},[22,69678,6257],{"id":6256},[15,69680,69681,26538,69683,26541],{},[87,69682,26486],{},[87,69684,26486],{},[15,69686,69687],{},[3933,69688,26546],{},[3035,69690,69691],{},[36,69692,26551],{},[154,69694,69695],{"className":26554,"code":26555,"filename":26556,"language":26557,"meta":163,"style":163},[87,69696,69697,69705,69715],{"__ignoreMap":163},[167,69698,69699,69701,69703],{"class":169,"line":170},[167,69700,26564],{"class":173},[167,69702,26486],{"class":181},[167,69704,26569],{"class":173},[167,69706,69707,69709,69711,69713],{"class":169,"line":188},[167,69708,26574],{"class":219},[167,69710,1108],{"class":173},[167,69712,26579],{"class":219},[167,69714,24044],{"class":173},[167,69716,69717],{"class":169,"line":205},[167,69718,276],{"class":173},[3035,69720,69721,69725,69727],{"start":188},[36,69722,26590,69723,1679],{},[87,69724,26486],{},[36,69726,26595],{},[36,69728,26598],{},[5367,69730,69731],{},[15,69732,69733,26605,69735,4270],{},[87,69734,26486],{},[87,69736,26608],{},[22,69738,26612],{"id":26611},[15,69740,26615,69741,26619],{},[3933,69742,26618],{},[15,69744,26622],{},[33,69746,69747,69751,69753],{},[36,69748,69749,26629],{},[87,69750,26486],{},[36,69752,26632],{},[36,69754,26635],{},[15,69756,26638],{},[33,69758,69759,69761,69763],{},[36,69760,26643],{},[36,69762,26646],{},[36,69764,26649],{},[22,69766,6322],{"id":6321},[15,69768,1582,69769,13627],{},[87,69770,26486],{},[33,69772,69773,69775,69777],{},[36,69774,26660],{},[36,69776,26663],{},[36,69778,26666],{},[22,69780,6349],{"id":6348},[15,69782,6355],{},[33,69784,69785,69787,69789,69791],{},[36,69786,26675],{},[36,69788,26678],{},[36,69790,26681],{},[36,69792,26684],{},[5367,69794,69795],{},[15,69796,69797,26691],{},[87,69798,26486],{},[22,69800,3085],{"id":3084},[3087,69802,26697,69803,26700],{"id":26696},[87,69804,26486],{},[15,69806,26703,69807,26707],{},[87,69808,26706],{},[3087,69810,26711,69811],{"id":26710},[87,69812,26714],{},[15,69814,26717,69815,26720,69817,26724],{},[87,69816,26714],{},[87,69818,26723],{},[3087,69820,26728],{"id":26727},[15,69822,26731,69823,26734],{},[87,69824,26486],{},[3087,69826,26738],{"id":26737},[15,69828,69829,26743],{},[87,69830,26486],{},[22,69832,7997],{"id":7996},[3087,69834,26749],{"id":26748},[154,69836,69837],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},[87,69838,69839,69847,69857],{"__ignoreMap":163},[167,69840,69841,69843,69845],{"class":169,"line":170},[167,69842,26564],{"class":173},[167,69844,26486],{"class":181},[167,69846,26569],{"class":173},[167,69848,69849,69851,69853,69855],{"class":169,"line":188},[167,69850,26767],{"class":219},[167,69852,1108],{"class":173},[167,69854,26579],{"class":219},[167,69856,24044],{"class":173},[167,69858,69859],{"class":169,"line":205},[167,69860,276],{"class":173},[5367,69862,69863],{},[15,69864,26782,69865,26785],{},[87,69866,26486],{},[3087,69868,26789],{"id":26788},[154,69870,69872],{"className":156,"code":26792,"filename":3260,"highlights":69871,"language":162,"meta":163,"style":163},[273],[87,69873,69874,69890,69902,69906,69922,69930,69934,69942,69959,69971,69983,69991],{"__ignoreMap":163},[167,69875,69876,69878,69880,69882,69884,69886,69888],{"class":169,"line":170},[167,69877,174],{"class":173},[167,69879,178],{"class":177},[167,69881,182],{"class":181},[167,69883,1050],{"class":181},[167,69885,267],{"class":173},[167,69887,1055],{"class":201},[167,69889,185],{"class":173},[167,69891,69892,69894,69896,69898,69900],{"class":169,"line":188},[167,69893,192],{"class":191},[167,69895,195],{"class":173},[167,69897,198],{"class":191},[167,69899,24041],{"class":201},[167,69901,24044],{"class":173},[167,69903,69904],{"class":169,"line":205},[167,69905,209],{"emptyLinePlaceholder":208},[167,69907,69908,69910,69912,69914,69916,69918,69920],{"class":169,"line":160},[167,69909,216],{"class":191},[167,69911,26834],{"class":219},[167,69913,223],{"class":191},[167,69915,226],{"class":181},[167,69917,229],{"class":173},[167,69919,26843],{"class":201},[167,69921,24169],{"class":173},[167,69923,69924,69926,69928],{"class":169,"line":238},[167,69925,282],{"class":173},[167,69927,178],{"class":177},[167,69929,185],{"class":173},[167,69931,69932],{"class":169,"line":243},[167,69933,209],{"emptyLinePlaceholder":208},[167,69935,69936,69938,69940],{"class":169,"line":261},[167,69937,174],{"class":173},[167,69939,299],{"class":177},[167,69941,185],{"class":173},[167,69943,69945,69947,69949,69951,69953,69955,69957],{"class":69944,"line":273},[169,213],[167,69946,307],{"class":173},[167,69948,10117],{"class":177},[167,69950,26875],{"class":181},[167,69952,1245],{"class":181},[167,69954,267],{"class":173},[167,69956,26882],{"class":201},[167,69958,185],{"class":173},[167,69960,69961,69963,69965,69967,69969],{"class":169,"line":279},[167,69962,1257],{"class":173},[167,69964,11],{"class":177},[167,69966,26893],{"class":173},[167,69968,11],{"class":177},[167,69970,185],{"class":173},[167,69972,69973,69975,69977,69979,69981],{"class":169,"line":289},[167,69974,1257],{"class":173},[167,69976,15],{"class":177},[167,69978,26906],{"class":173},[167,69980,15],{"class":177},[167,69982,185],{"class":173},[167,69984,69985,69987,69989],{"class":169,"line":294},[167,69986,504],{"class":173},[167,69988,10117],{"class":177},[167,69990,185],{"class":173},[167,69992,69993,69995,69997],{"class":169,"line":304},[167,69994,282],{"class":173},[167,69996,299],{"class":177},[167,69998,185],{"class":173},[154,70000,70002],{"className":156,"code":26929,"filename":3973,"highlights":70001,"language":162,"meta":163,"style":163},[304],[87,70003,70004,70018,70026,70032,70038,70046,70050,70054,70058,70066,70070,70078,70095,70107,70119,70127],{"__ignoreMap":163},[167,70005,70006,70008,70010,70012,70014,70016],{"class":169,"line":170},[167,70007,174],{"class":173},[167,70009,178],{"class":177},[167,70011,1050],{"class":181},[167,70013,267],{"class":173},[167,70015,1055],{"class":201},[167,70017,185],{"class":173},[167,70019,70020,70022,70024],{"class":169,"line":188},[167,70021,608],{"class":191},[167,70023,3991],{"class":191},[167,70025,1905],{"class":173},[167,70027,70028,70030],{"class":169,"line":205},[167,70029,7176],{"class":181},[167,70031,763],{"class":173},[167,70033,70034,70036],{"class":169,"line":160},[167,70035,1937],{"class":191},[167,70037,1905],{"class":173},[167,70039,70040,70042,70044],{"class":169,"line":238},[167,70041,26971],{"class":173},[167,70043,26843],{"class":201},[167,70045,393],{"class":173},[167,70047,70048],{"class":169,"line":243},[167,70049,24370],{"class":173},[167,70051,70052],{"class":169,"line":261},[167,70053,398],{"class":173},[167,70055,70056],{"class":169,"line":273},[167,70057,24148],{"class":173},[167,70059,70060,70062,70064],{"class":169,"line":279},[167,70061,282],{"class":173},[167,70063,178],{"class":177},[167,70065,185],{"class":173},[167,70067,70068],{"class":169,"line":289},[167,70069,209],{"emptyLinePlaceholder":208},[167,70071,70072,70074,70076],{"class":169,"line":294},[167,70073,174],{"class":173},[167,70075,299],{"class":177},[167,70077,185],{"class":173},[167,70079,70081,70083,70085,70087,70089,70091,70093],{"class":70080,"line":304},[169,213],[167,70082,307],{"class":173},[167,70084,10117],{"class":177},[167,70086,26875],{"class":181},[167,70088,1245],{"class":181},[167,70090,267],{"class":173},[167,70092,26882],{"class":201},[167,70094,185],{"class":173},[167,70096,70097,70099,70101,70103,70105],{"class":169,"line":313},[167,70098,1257],{"class":173},[167,70100,11],{"class":177},[167,70102,26893],{"class":173},[167,70104,11],{"class":177},[167,70106,185],{"class":173},[167,70108,70109,70111,70113,70115,70117],{"class":169,"line":161},[167,70110,1257],{"class":173},[167,70112,15],{"class":177},[167,70114,26906],{"class":173},[167,70116,15],{"class":177},[167,70118,185],{"class":173},[167,70120,70121,70123,70125],{"class":169,"line":335},[167,70122,504],{"class":173},[167,70124,10117],{"class":177},[167,70126,185],{"class":173},[167,70128,70129,70131,70133],{"class":169,"line":341},[167,70130,282],{"class":173},[167,70132,299],{"class":177},[167,70134,185],{"class":173},[154,70136,70138],{"className":26554,"code":27067,"filename":26556,"highlights":70137,"language":26557,"meta":163,"style":163},[170,188,205],[87,70139,70140,70149,70160,70165,70169,70175,70199,70209,70221,70233],{"__ignoreMap":163},[167,70141,70143,70145,70147],{"class":70142,"line":170},[169,213],[167,70144,26564],{"class":173},[167,70146,26486],{"class":181},[167,70148,26569],{"class":173},[167,70150,70152,70154,70156,70158],{"class":70151,"line":188},[169,213],[167,70153,26767],{"class":219},[167,70155,1108],{"class":173},[167,70157,26579],{"class":219},[167,70159,24044],{"class":173},[167,70161,70163],{"class":70162,"line":205},[169,213],[167,70164,276],{"class":173},[167,70166,70167],{"class":169,"line":160},[167,70168,209],{"emptyLinePlaceholder":208},[167,70170,70171,70173],{"class":169,"line":238},[167,70172,27104],{"class":181},[167,70174,1905],{"class":173},[167,70176,70177,70179,70181,70183,70185,70187,70189,70191,70193,70195,70197],{"class":169,"line":243},[167,70178,27111],{"class":219},[167,70180,1108],{"class":173},[167,70182,27116],{"class":219},[167,70184,229],{"class":173},[167,70186,27121],{"class":219},[167,70188,27124],{"class":191},[167,70190,1025],{"class":173},[167,70192,26467],{"class":219},[167,70194,1025],{"class":173},[167,70196,5425],{"class":219},[167,70198,24169],{"class":173},[167,70200,70201,70203,70205,70207],{"class":169,"line":261},[167,70202,27139],{"class":219},[167,70204,1108],{"class":173},[167,70206,27144],{"class":219},[167,70208,24044],{"class":173},[167,70210,70211,70213,70215,70217,70219],{"class":169,"line":273},[167,70212,27151],{"class":219},[167,70214,1108],{"class":173},[167,70216,1853],{"class":219},[167,70218,27158],{"class":191},[167,70220,24044],{"class":173},[167,70222,70223,70225,70227,70229,70231],{"class":169,"line":279},[167,70224,27165],{"class":219},[167,70226,1108],{"class":173},[167,70228,27170],{"class":219},[167,70230,27173],{"class":191},[167,70232,24044],{"class":173},[167,70234,70235],{"class":169,"line":289},[167,70236,276],{"class":173},[3087,70238,27183],{"id":27182},[15,70240,27186,70241,27189],{},[87,70242,26486],{},[3087,70244,27193],{"id":27192},[154,70246,70247],{"className":156,"code":27196,"filename":3260,"language":162,"meta":163,"style":163},[87,70248,70249,70265,70277,70281,70311,70315,70329,70353,70365,70369,70377,70381,70389,70405,70417,70435,70449,70457],{"__ignoreMap":163},[167,70250,70251,70253,70255,70257,70259,70261,70263],{"class":169,"line":170},[167,70252,174],{"class":173},[167,70254,178],{"class":177},[167,70256,182],{"class":181},[167,70258,1050],{"class":181},[167,70260,267],{"class":173},[167,70262,1055],{"class":201},[167,70264,185],{"class":173},[167,70266,70267,70269,70271,70273,70275],{"class":169,"line":188},[167,70268,192],{"class":191},[167,70270,27221],{"class":173},[167,70272,198],{"class":191},[167,70274,24041],{"class":201},[167,70276,24044],{"class":173},[167,70278,70279],{"class":169,"line":205},[167,70280,209],{"emptyLinePlaceholder":208},[167,70282,70283,70285,70287,70289,70291,70293,70295,70297,70299,70301,70303,70305,70307,70309],{"class":169,"line":160},[167,70284,216],{"class":191},[167,70286,23476],{"class":219},[167,70288,223],{"class":191},[167,70290,226],{"class":181},[167,70292,1073],{"class":173},[167,70294,592],{"class":254},[167,70296,583],{"class":191},[167,70298,586],{"class":219},[167,70300,23409],{"class":173},[167,70302,11763],{"class":191},[167,70304,6567],{"class":219},[167,70306,6570],{"class":173},[167,70308,6573],{"class":219},[167,70310,24169],{"class":173},[167,70312,70313],{"class":169,"line":238},[167,70314,209],{"emptyLinePlaceholder":208},[167,70316,70317,70319,70321,70323,70325,70327],{"class":169,"line":243},[167,70318,6796],{"class":181},[167,70320,229],{"class":173},[167,70322,2523],{"class":191},[167,70324,1469],{"class":173},[167,70326,639],{"class":191},[167,70328,1905],{"class":173},[167,70330,70331,70333,70335,70337,70339,70341,70343,70345,70347,70349,70351],{"class":169,"line":261},[167,70332,2575],{"class":191},[167,70334,4224],{"class":191},[167,70336,23253],{"class":219},[167,70338,1918],{"class":173},[167,70340,23258],{"class":254},[167,70342,693],{"class":173},[167,70344,639],{"class":191},[167,70346,27298],{"class":181},[167,70348,27301],{"class":173},[167,70350,27304],{"class":219},[167,70352,27307],{"class":173},[167,70354,70355,70357,70359,70361,70363],{"class":169,"line":273},[167,70356,27312],{"class":173},[167,70358,267],{"class":191},[167,70360,27317],{"class":173},[167,70362,27320],{"class":201},[167,70364,25582],{"class":173},[167,70366,70367],{"class":169,"line":279},[167,70368,27327],{"class":173},[167,70370,70371,70373,70375],{"class":169,"line":289},[167,70372,282],{"class":173},[167,70374,178],{"class":177},[167,70376,185],{"class":173},[167,70378,70379],{"class":169,"line":294},[167,70380,209],{"emptyLinePlaceholder":208},[167,70382,70383,70385,70387],{"class":169,"line":304},[167,70384,174],{"class":173},[167,70386,299],{"class":177},[167,70388,185],{"class":173},[167,70390,70391,70393,70395,70397,70399,70401,70403],{"class":169,"line":313},[167,70392,307],{"class":173},[167,70394,27354],{"class":177},[167,70396,26875],{"class":181},[167,70398,1245],{"class":181},[167,70400,267],{"class":173},[167,70402,27363],{"class":201},[167,70404,185],{"class":173},[167,70406,70407,70409,70411,70413,70415],{"class":169,"line":161},[167,70408,1257],{"class":173},[167,70410,22],{"class":177},[167,70412,27374],{"class":173},[167,70414,22],{"class":177},[167,70416,185],{"class":173},[167,70418,70419,70421,70423,70425,70427,70429,70431,70433],{"class":169,"line":335},[167,70420,1257],{"class":173},[167,70422,15],{"class":177},[167,70424,5694],{"class":181},[167,70426,267],{"class":173},[167,70428,27391],{"class":201},[167,70430,27394],{"class":173},[167,70432,15],{"class":177},[167,70434,185],{"class":173},[167,70436,70437,70439,70441,70443,70445,70447],{"class":169,"line":341},[167,70438,1257],{"class":173},[167,70440,15],{"class":177},[167,70442,7038],{"class":181},[167,70444,27409],{"class":173},[167,70446,15],{"class":177},[167,70448,185],{"class":173},[167,70450,70451,70453,70455],{"class":169,"line":489},[167,70452,504],{"class":173},[167,70454,27354],{"class":177},[167,70456,185],{"class":173},[167,70458,70459,70461,70463],{"class":169,"line":495},[167,70460,282],{"class":173},[167,70462,299],{"class":177},[167,70464,185],{"class":173},[154,70466,70467],{"className":156,"code":27432,"filename":3973,"language":162,"meta":163,"style":163},[87,70468,70469,70483,70491,70499,70505,70511,70533,70537,70541,70549,70573,70587,70591,70595,70603,70607,70615,70631,70643,70661,70675,70683],{"__ignoreMap":163},[167,70470,70471,70473,70475,70477,70479,70481],{"class":169,"line":170},[167,70472,174],{"class":173},[167,70474,178],{"class":177},[167,70476,1050],{"class":181},[167,70478,267],{"class":173},[167,70480,1055],{"class":201},[167,70482,185],{"class":173},[167,70484,70485,70487,70489],{"class":169,"line":188},[167,70486,608],{"class":191},[167,70488,3991],{"class":191},[167,70490,1905],{"class":173},[167,70492,70493,70495,70497],{"class":169,"line":205},[167,70494,4398],{"class":173},[167,70496,27463],{"class":201},[167,70498,393],{"class":173},[167,70500,70501,70503],{"class":169,"line":160},[167,70502,7176],{"class":181},[167,70504,763],{"class":173},[167,70506,70507,70509],{"class":169,"line":238},[167,70508,1937],{"class":191},[167,70510,1905],{"class":173},[167,70512,70513,70515,70517,70519,70521,70523,70525,70527,70529,70531],{"class":169,"line":243},[167,70514,27482],{"class":173},[167,70516,6573],{"class":219},[167,70518,654],{"class":191},[167,70520,6567],{"class":219},[167,70522,659],{"class":191},[167,70524,577],{"class":173},[167,70526,592],{"class":254},[167,70528,583],{"class":191},[167,70530,586],{"class":219},[167,70532,1856],{"class":173},[167,70534,70535],{"class":169,"line":261},[167,70536,24370],{"class":173},[167,70538,70539],{"class":169,"line":273},[167,70540,398],{"class":173},[167,70542,70543,70545,70547],{"class":169,"line":279},[167,70544,7331],{"class":191},[167,70546,7412],{"class":181},[167,70548,763],{"class":173},[167,70550,70551,70553,70555,70557,70559,70561,70563,70565,70567,70569,70571],{"class":169,"line":289},[167,70552,6730],{"class":191},[167,70554,4224],{"class":191},[167,70556,23253],{"class":219},[167,70558,1918],{"class":173},[167,70560,23258],{"class":254},[167,70562,693],{"class":173},[167,70564,639],{"class":191},[167,70566,27298],{"class":181},[167,70568,27301],{"class":173},[167,70570,27304],{"class":219},[167,70572,27307],{"class":173},[167,70574,70575,70577,70579,70581,70583,70585],{"class":169,"line":294},[167,70576,879],{"class":219},[167,70578,744],{"class":173},[167,70580,267],{"class":191},[167,70582,27317],{"class":173},[167,70584,27320],{"class":201},[167,70586,25582],{"class":173},[167,70588,70589],{"class":169,"line":304},[167,70590,398],{"class":173},[167,70592,70593],{"class":169,"line":313},[167,70594,24148],{"class":173},[167,70596,70597,70599,70601],{"class":169,"line":161},[167,70598,282],{"class":173},[167,70600,178],{"class":177},[167,70602,185],{"class":173},[167,70604,70605],{"class":169,"line":335},[167,70606,209],{"emptyLinePlaceholder":208},[167,70608,70609,70611,70613],{"class":169,"line":341},[167,70610,174],{"class":173},[167,70612,299],{"class":177},[167,70614,185],{"class":173},[167,70616,70617,70619,70621,70623,70625,70627,70629],{"class":169,"line":489},[167,70618,307],{"class":173},[167,70620,27354],{"class":177},[167,70622,26875],{"class":181},[167,70624,1245],{"class":181},[167,70626,267],{"class":173},[167,70628,27363],{"class":201},[167,70630,185],{"class":173},[167,70632,70633,70635,70637,70639,70641],{"class":169,"line":495},[167,70634,1257],{"class":173},[167,70636,22],{"class":177},[167,70638,27374],{"class":173},[167,70640,22],{"class":177},[167,70642,185],{"class":173},[167,70644,70645,70647,70649,70651,70653,70655,70657,70659],{"class":169,"line":501},[167,70646,1257],{"class":173},[167,70648,15],{"class":177},[167,70650,5694],{"class":181},[167,70652,267],{"class":173},[167,70654,27391],{"class":201},[167,70656,27394],{"class":173},[167,70658,15],{"class":177},[167,70660,185],{"class":173},[167,70662,70663,70665,70667,70669,70671,70673],{"class":169,"line":512},[167,70664,1257],{"class":173},[167,70666,15],{"class":177},[167,70668,7038],{"class":181},[167,70670,27409],{"class":173},[167,70672,15],{"class":177},[167,70674,185],{"class":173},[167,70676,70677,70679,70681],{"class":169,"line":781},[167,70678,504],{"class":173},[167,70680,27354],{"class":177},[167,70682,185],{"class":173},[167,70684,70685,70687,70689],{"class":169,"line":786},[167,70686,282],{"class":173},[167,70688,299],{"class":177},[167,70690,185],{"class":173},[154,70692,70693],{"className":26554,"code":26752,"filename":26556,"language":26557,"meta":163,"style":163},[87,70694,70695,70703,70713],{"__ignoreMap":163},[167,70696,70697,70699,70701],{"class":169,"line":170},[167,70698,26564],{"class":173},[167,70700,26486],{"class":181},[167,70702,26569],{"class":173},[167,70704,70705,70707,70709,70711],{"class":169,"line":188},[167,70706,26767],{"class":219},[167,70708,1108],{"class":173},[167,70710,26579],{"class":219},[167,70712,24044],{"class":173},[167,70714,70715],{"class":169,"line":205},[167,70716,276],{"class":173},[22,70718,7678],{"id":7677},[15,70720,70721,27691],{},[87,70722,26486],{},[15,70724,70725],{},[3933,70726,27696],{},[33,70728,70729,70733,70735,70737],{},[36,70730,27701,70731,1679],{},[87,70732,26706],{},[36,70734,27706],{},[36,70736,27709],{},[36,70738,27712],{},[924,70740,27715],{},{"title":163,"searchDepth":188,"depth":188,"links":70742},[70743,70744,70745,70746,70747,70748,70754,70760],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257},{"id":26611,"depth":188,"text":26612},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":70749},[70750,70751,70752,70753],{"id":26696,"depth":205,"text":27726},{"id":26710,"depth":205,"text":27728},{"id":26727,"depth":205,"text":26728},{"id":26737,"depth":205,"text":26738},{"id":7996,"depth":188,"text":7997,"children":70755},[70756,70757,70758,70759],{"id":26748,"depth":205,"text":26749},{"id":26788,"depth":205,"text":26789},{"id":27182,"depth":205,"text":27183},{"id":27192,"depth":205,"text":27193},{"id":7677,"depth":188,"text":7678},{"updatedAt":27743,"coverCaption":23656,"author":946,"keywords":70762},[3258,26486,27745,27746,3260,3973],[70764],{"headline":27750,"author":70765,"datePublished":27743,"@type":961},{"name":946,"@type":959},{"title":26477,"description":27741},[70768,70769,70770,70771],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":9169,"color":9170},{"tag":5424,"color":5425},{"id":70773,"title":70774,"body":70775,"cover":46074,"coverAlt":73978,"date":46076,"description":73979,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":73980,"navigation":208,"path":73984,"schemaOrg":73985,"seo":73989,"series":26460,"seriesDescription":60258,"seriesOrder":205,"seriesTitle":60259,"slug":942,"stem":73990,"tags":73991,"__hash__":73997},"blog\u002Fblog\u002Fdirectives-vue-v-for-guide.en.md","Vue Directives: v-for",{"type":8,"value":70776,"toc":73942},[70777,70784,70789,70792,70804,70807,70809,70812,70829,70832,70843,70849,70852,70863,70865,70871,70895,70899,71013,71135,71139,71142,71343,71549,71555,71561,71564,71678,71800,71804,71932,72068,72074,72257,72446,72450,72456,72464,72718,72978,72984,73126,73284,73288,73493,73705,73712,73720,73772,73775,73783,73792,73854,73862,73869,73872,73879,73882,73886,73910,73914,73919,73922,73937,73940],[11,70778,70780,70781,70783],{"id":70779},"directive-v-for-in-vue-from-basic-to-advanced","Directive ",[87,70782,30726],{}," in Vue: from basic to advanced",[15,70785,70786,70788],{},[87,70787,30726],{}," is Vue's directive for rendering lists.\nIt looks simple, but using it correctly makes a huge difference in performance, UI stability, and code readability.",[15,70790,70791],{},"The key idea is:",[33,70793,70794,70799],{},[36,70795,70796,70798],{},[87,70797,30726],{}," describes repeated structure in the template.",[36,70800,70801,70803],{},[87,70802,42780],{}," tells Vue how to identify each node in a stable way.",[15,70805,70806],{},"If you master that pair, you avoid most dynamic-list bugs.",[22,70808,62810],{"id":62809},[15,70810,70811],{},"In real applications you always render lists:",[33,70813,70814,70817,70820,70823,70826],{},[36,70815,70816],{},"Tasks",[36,70818,70819],{},"Products",[36,70821,70822],{},"Comments",[36,70824,70825],{},"Notifications",[36,70827,70828],{},"Table rows",[15,70830,70831],{},"When the list changes (insert, remove, reorder), Vue needs to know which item is which.\nIf the key is unstable, you get problems like:",[33,70833,70834,70837,70840],{},[36,70835,70836],{},"Mixed internal state between rows",[36,70838,70839],{},"Weird transitions",[36,70841,70842],{},"Inputs \"jumping\" between elements",[22,70844,70846,70847],{"id":70845},"when-to-use-v-for","When to use ",[87,70848,30726],{},[15,70850,70851],{},"Use it when you need to:",[33,70853,70854,70857,70860],{},[36,70855,70856],{},"Render reactive arrays or objects",[36,70858,70859],{},"Repeat components with different data",[36,70861,70862],{},"Show nested structures (for example categories and products)",[22,70864,62980],{"id":62979},[15,70866,70867,70868,70870],{},"Avoid using ",[87,70869,30726],{}," for:",[33,70872,70873,70876,70886],{},[36,70874,70875],{},"Heavy filtering logic directly in the template",[36,70877,70878,70879,57920,70881,70883,70884],{},"Combining ",[87,70880,13496],{},[87,70882,30726],{}," on the same node when you can prefilter with ",[87,70885,1661],{},[36,70887,70888,70889,70891,70892,70894],{},"Using ",[87,70890,42871],{}," as ",[87,70893,7845],{}," in lists that can reorder",[22,70896,70898],{"id":70897},"basic-syntax","Basic syntax",[154,70900,70902],{"className":156,"code":42882,"filename":3260,"highlights":70901,"language":162,"meta":163,"style":163},[273],[87,70903,70904,70914,70924,70928,70952,70960,70964,70972,70993,70997,71005],{"__ignoreMap":163},[167,70905,70906,70908,70910,70912],{"class":169,"line":170},[167,70907,174],{"class":173},[167,70909,178],{"class":177},[167,70911,182],{"class":181},[167,70913,185],{"class":173},[167,70915,70916,70918,70920,70922],{"class":169,"line":188},[167,70917,192],{"class":191},[167,70919,195],{"class":173},[167,70921,198],{"class":191},[167,70923,202],{"class":201},[167,70925,70926],{"class":169,"line":205},[167,70927,209],{"emptyLinePlaceholder":208},[167,70929,70930,70932,70934,70936,70938,70940,70942,70944,70946,70948,70950],{"class":169,"line":160},[167,70931,216],{"class":191},[167,70933,42916],{"class":219},[167,70935,223],{"class":191},[167,70937,226],{"class":181},[167,70939,423],{"class":173},[167,70941,42925],{"class":201},[167,70943,1025],{"class":173},[167,70945,42930],{"class":201},[167,70947,1025],{"class":173},[167,70949,42935],{"class":201},[167,70951,429],{"class":173},[167,70953,70954,70956,70958],{"class":169,"line":238},[167,70955,282],{"class":173},[167,70957,178],{"class":177},[167,70959,185],{"class":173},[167,70961,70962],{"class":169,"line":243},[167,70963,209],{"emptyLinePlaceholder":208},[167,70965,70966,70968,70970],{"class":169,"line":261},[167,70967,174],{"class":173},[167,70969,299],{"class":177},[167,70971,185],{"class":173},[167,70973,70975,70977,70979,70981,70983,70985,70987,70989,70991],{"class":70974,"line":273},[169,213],[167,70976,307],{"class":173},[167,70978,36],{"class":177},[167,70980,18706],{"class":181},[167,70982,267],{"class":173},[167,70984,42971],{"class":201},[167,70986,10307],{"class":181},[167,70988,267],{"class":173},[167,70990,42978],{"class":201},[167,70992,185],{"class":173},[167,70994,70995],{"class":169,"line":279},[167,70996,42985],{"class":173},[167,70998,70999,71001,71003],{"class":169,"line":289},[167,71000,504],{"class":173},[167,71002,36],{"class":177},[167,71004,185],{"class":173},[167,71006,71007,71009,71011],{"class":169,"line":294},[167,71008,282],{"class":173},[167,71010,299],{"class":177},[167,71012,185],{"class":173},[154,71014,71016],{"className":156,"code":43004,"filename":3973,"highlights":71015,"language":162,"meta":163,"style":163},[304],[87,71017,71018,71026,71034,71040,71046,71062,71066,71070,71074,71082,71086,71094,71115,71119,71127],{"__ignoreMap":163},[167,71019,71020,71022,71024],{"class":169,"line":170},[167,71021,174],{"class":173},[167,71023,178],{"class":177},[167,71025,185],{"class":173},[167,71027,71028,71030,71032],{"class":169,"line":188},[167,71029,608],{"class":191},[167,71031,3991],{"class":191},[167,71033,1905],{"class":173},[167,71035,71036,71038],{"class":169,"line":205},[167,71037,7176],{"class":181},[167,71039,763],{"class":173},[167,71041,71042,71044],{"class":169,"line":160},[167,71043,1937],{"class":191},[167,71045,1905],{"class":173},[167,71047,71048,71050,71052,71054,71056,71058,71060],{"class":169,"line":238},[167,71049,43040],{"class":173},[167,71051,42925],{"class":201},[167,71053,1025],{"class":173},[167,71055,42930],{"class":201},[167,71057,1025],{"class":173},[167,71059,42935],{"class":201},[167,71061,43053],{"class":173},[167,71063,71064],{"class":169,"line":243},[167,71065,4049],{"class":173},[167,71067,71068],{"class":169,"line":261},[167,71069,3492],{"class":173},[167,71071,71072],{"class":169,"line":273},[167,71073,276],{"class":173},[167,71075,71076,71078,71080],{"class":169,"line":279},[167,71077,282],{"class":173},[167,71079,178],{"class":177},[167,71081,185],{"class":173},[167,71083,71084],{"class":169,"line":289},[167,71085,209],{"emptyLinePlaceholder":208},[167,71087,71088,71090,71092],{"class":169,"line":294},[167,71089,174],{"class":173},[167,71091,299],{"class":177},[167,71093,185],{"class":173},[167,71095,71097,71099,71101,71103,71105,71107,71109,71111,71113],{"class":71096,"line":304},[169,213],[167,71098,307],{"class":173},[167,71100,36],{"class":177},[167,71102,18706],{"class":181},[167,71104,267],{"class":173},[167,71106,42971],{"class":201},[167,71108,10307],{"class":181},[167,71110,267],{"class":173},[167,71112,42978],{"class":201},[167,71114,185],{"class":173},[167,71116,71117],{"class":169,"line":313},[167,71118,42985],{"class":173},[167,71120,71121,71123,71125],{"class":169,"line":161},[167,71122,504],{"class":173},[167,71124,36],{"class":177},[167,71126,185],{"class":173},[167,71128,71129,71131,71133],{"class":169,"line":335},[167,71130,282],{"class":173},[167,71132,299],{"class":177},[167,71134,185],{"class":173},[22,71136,71138],{"id":71137},"basic-example-todo-list","Basic example: todo list",[15,71140,71141],{},"This is the most common and correct pattern to start with.",[154,71143,71146],{"className":156,"code":71144,"filename":3260,"highlights":71145,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst todos = ref([\n  { id: 1, text: 'Learn v-for', done: true },\n  { id: 2, text: 'Practice stable keys', done: false },\n  { id: 3, text: 'Avoid index as key', done: false }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n      \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n        {{ todo.text }}\n      \u003C\u002Fspan>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,313],[87,71147,71148,71158,71168,71172,71185,71203,71221,71239,71244,71252,71256,71264,71272,71293,71307,71311,71319,71327,71335],{"__ignoreMap":163},[167,71149,71150,71152,71154,71156],{"class":169,"line":170},[167,71151,174],{"class":173},[167,71153,178],{"class":177},[167,71155,182],{"class":181},[167,71157,185],{"class":173},[167,71159,71160,71162,71164,71166],{"class":169,"line":188},[167,71161,192],{"class":191},[167,71163,195],{"class":173},[167,71165,198],{"class":191},[167,71167,202],{"class":201},[167,71169,71170],{"class":169,"line":205},[167,71171,209],{"emptyLinePlaceholder":208},[167,71173,71175,71177,71179,71181,71183],{"class":71174,"line":160},[169,213],[167,71176,216],{"class":191},[167,71178,43171],{"class":219},[167,71180,223],{"class":191},[167,71182,226],{"class":181},[167,71184,1827],{"class":173},[167,71186,71188,71190,71192,71194,71197,71199,71201],{"class":71187,"line":238},[169,213],[167,71189,1832],{"class":173},[167,71191,1835],{"class":219},[167,71193,15633],{"class":173},[167,71195,71196],{"class":201},"'Learn v-for'",[167,71198,8164],{"class":173},[167,71200,390],{"class":219},[167,71202,1856],{"class":173},[167,71204,71206,71208,71210,71212,71215,71217,71219],{"class":71205,"line":243},[169,213],[167,71207,1832],{"class":173},[167,71209,1853],{"class":219},[167,71211,15633],{"class":173},[167,71213,71214],{"class":201},"'Practice stable keys'",[167,71216,8164],{"class":173},[167,71218,3392],{"class":219},[167,71220,1856],{"class":173},[167,71222,71224,71226,71228,71230,71233,71235,71237],{"class":71223,"line":261},[169,213],[167,71225,1832],{"class":173},[167,71227,8203],{"class":219},[167,71229,15633],{"class":173},[167,71231,71232],{"class":201},"'Avoid index as key'",[167,71234,8164],{"class":173},[167,71236,3392],{"class":219},[167,71238,599],{"class":173},[167,71240,71242],{"class":71241,"line":273},[169,213],[167,71243,429],{"class":173},[167,71245,71246,71248,71250],{"class":169,"line":279},[167,71247,282],{"class":173},[167,71249,178],{"class":177},[167,71251,185],{"class":173},[167,71253,71254],{"class":169,"line":289},[167,71255,209],{"emptyLinePlaceholder":208},[167,71257,71258,71260,71262],{"class":169,"line":294},[167,71259,174],{"class":173},[167,71261,299],{"class":177},[167,71263,185],{"class":173},[167,71265,71266,71268,71270],{"class":169,"line":304},[167,71267,307],{"class":173},[167,71269,33],{"class":177},[167,71271,185],{"class":173},[167,71273,71275,71277,71279,71281,71283,71285,71287,71289,71291],{"class":71274,"line":313},[169,213],[167,71276,1257],{"class":173},[167,71278,36],{"class":177},[167,71280,18706],{"class":181},[167,71282,267],{"class":173},[167,71284,43278],{"class":201},[167,71286,10307],{"class":181},[167,71288,267],{"class":173},[167,71290,43285],{"class":201},[167,71292,185],{"class":173},[167,71294,71295,71297,71299,71301,71303,71305],{"class":169,"line":161},[167,71296,1268],{"class":173},[167,71298,167],{"class":177},[167,71300,39102],{"class":181},[167,71302,267],{"class":173},[167,71304,43300],{"class":201},[167,71306,185],{"class":173},[167,71308,71309],{"class":169,"line":335},[167,71310,43307],{"class":173},[167,71312,71313,71315,71317],{"class":169,"line":341},[167,71314,10170],{"class":173},[167,71316,167],{"class":177},[167,71318,185],{"class":173},[167,71320,71321,71323,71325],{"class":169,"line":489},[167,71322,1292],{"class":173},[167,71324,36],{"class":177},[167,71326,185],{"class":173},[167,71328,71329,71331,71333],{"class":169,"line":495},[167,71330,504],{"class":173},[167,71332,33],{"class":177},[167,71334,185],{"class":173},[167,71336,71337,71339,71341],{"class":169,"line":501},[167,71338,282],{"class":173},[167,71340,299],{"class":177},[167,71342,185],{"class":173},[154,71344,71347],{"className":156,"code":71345,"filename":3973,"highlights":71346,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      todos: [\n        { id: 1, text: 'Learn v-for', done: true },\n        { id: 2, text: 'Practice stable keys', done: false },\n        { id: 3, text: 'Avoid index as key', done: false }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n      \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n        {{ todo.text }}\n      \u003C\u002Fspan>\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[238,243,261,273,279,489],[87,71348,71349,71357,71365,71371,71377,71382,71399,71416,71433,71438,71442,71446,71450,71458,71462,71470,71478,71499,71513,71517,71525,71533,71541],{"__ignoreMap":163},[167,71350,71351,71353,71355],{"class":169,"line":170},[167,71352,174],{"class":173},[167,71354,178],{"class":177},[167,71356,185],{"class":173},[167,71358,71359,71361,71363],{"class":169,"line":188},[167,71360,608],{"class":191},[167,71362,3991],{"class":191},[167,71364,1905],{"class":173},[167,71366,71367,71369],{"class":169,"line":205},[167,71368,7176],{"class":181},[167,71370,763],{"class":173},[167,71372,71373,71375],{"class":169,"line":160},[167,71374,1937],{"class":191},[167,71376,1905],{"class":173},[167,71378,71380],{"class":71379,"line":238},[169,213],[167,71381,43379],{"class":173},[167,71383,71385,71387,71389,71391,71393,71395,71397],{"class":71384,"line":243},[169,213],[167,71386,8677],{"class":173},[167,71388,1835],{"class":219},[167,71390,15633],{"class":173},[167,71392,71196],{"class":201},[167,71394,8164],{"class":173},[167,71396,390],{"class":219},[167,71398,1856],{"class":173},[167,71400,71402,71404,71406,71408,71410,71412,71414],{"class":71401,"line":261},[169,213],[167,71403,8677],{"class":173},[167,71405,1853],{"class":219},[167,71407,15633],{"class":173},[167,71409,71214],{"class":201},[167,71411,8164],{"class":173},[167,71413,3392],{"class":219},[167,71415,1856],{"class":173},[167,71417,71419,71421,71423,71425,71427,71429,71431],{"class":71418,"line":273},[169,213],[167,71420,8677],{"class":173},[167,71422,8203],{"class":219},[167,71424,15633],{"class":173},[167,71426,71232],{"class":201},[167,71428,8164],{"class":173},[167,71430,3392],{"class":219},[167,71432,599],{"class":173},[167,71434,71436],{"class":71435,"line":279},[169,213],[167,71437,8738],{"class":173},[167,71439,71440],{"class":169,"line":289},[167,71441,4049],{"class":173},[167,71443,71444],{"class":169,"line":294},[167,71445,3492],{"class":173},[167,71447,71448],{"class":169,"line":304},[167,71449,276],{"class":173},[167,71451,71452,71454,71456],{"class":169,"line":313},[167,71453,282],{"class":173},[167,71455,178],{"class":177},[167,71457,185],{"class":173},[167,71459,71460],{"class":169,"line":161},[167,71461,209],{"emptyLinePlaceholder":208},[167,71463,71464,71466,71468],{"class":169,"line":335},[167,71465,174],{"class":173},[167,71467,299],{"class":177},[167,71469,185],{"class":173},[167,71471,71472,71474,71476],{"class":169,"line":341},[167,71473,307],{"class":173},[167,71475,33],{"class":177},[167,71477,185],{"class":173},[167,71479,71481,71483,71485,71487,71489,71491,71493,71495,71497],{"class":71480,"line":489},[169,213],[167,71482,1257],{"class":173},[167,71484,36],{"class":177},[167,71486,18706],{"class":181},[167,71488,267],{"class":173},[167,71490,43278],{"class":201},[167,71492,10307],{"class":181},[167,71494,267],{"class":173},[167,71496,43285],{"class":201},[167,71498,185],{"class":173},[167,71500,71501,71503,71505,71507,71509,71511],{"class":169,"line":495},[167,71502,1268],{"class":173},[167,71504,167],{"class":177},[167,71506,39102],{"class":181},[167,71508,267],{"class":173},[167,71510,43300],{"class":201},[167,71512,185],{"class":173},[167,71514,71515],{"class":169,"line":501},[167,71516,43307],{"class":173},[167,71518,71519,71521,71523],{"class":169,"line":512},[167,71520,10170],{"class":173},[167,71522,167],{"class":177},[167,71524,185],{"class":173},[167,71526,71527,71529,71531],{"class":169,"line":781},[167,71528,1292],{"class":173},[167,71530,36],{"class":177},[167,71532,185],{"class":173},[167,71534,71535,71537,71539],{"class":169,"line":786},[167,71536,504],{"class":173},[167,71538,33],{"class":177},[167,71540,185],{"class":173},[167,71542,71543,71545,71547],{"class":169,"line":2678},[167,71544,282],{"class":173},[167,71546,299],{"class":177},[167,71548,185],{"class":173},[22,71550,71552,71553],{"id":71551},"intermediate-level-index-objects-and-template-v-for","Intermediate level: index, objects, and ",[87,71554,43553],{},[3087,71556,71558,71559],{"id":71557},"_1-index-in-v-for","1) Index in ",[87,71560,30726],{},[15,71562,71563],{},"You can access the index when you actually need it:",[154,71565,71567],{"className":156,"code":43565,"filename":3260,"highlights":71566,"language":162,"meta":163,"style":163},[273],[87,71568,71569,71579,71589,71593,71617,71625,71629,71637,71658,71662,71670],{"__ignoreMap":163},[167,71570,71571,71573,71575,71577],{"class":169,"line":170},[167,71572,174],{"class":173},[167,71574,178],{"class":177},[167,71576,182],{"class":181},[167,71578,185],{"class":173},[167,71580,71581,71583,71585,71587],{"class":169,"line":188},[167,71582,192],{"class":191},[167,71584,195],{"class":173},[167,71586,198],{"class":191},[167,71588,202],{"class":201},[167,71590,71591],{"class":169,"line":205},[167,71592,209],{"emptyLinePlaceholder":208},[167,71594,71595,71597,71599,71601,71603,71605,71607,71609,71611,71613,71615],{"class":169,"line":160},[167,71596,216],{"class":191},[167,71598,16954],{"class":219},[167,71600,223],{"class":191},[167,71602,226],{"class":181},[167,71604,423],{"class":173},[167,71606,8172],{"class":201},[167,71608,1025],{"class":173},[167,71610,8194],{"class":201},[167,71612,1025],{"class":173},[167,71614,43615],{"class":201},[167,71616,429],{"class":173},[167,71618,71619,71621,71623],{"class":169,"line":238},[167,71620,282],{"class":173},[167,71622,178],{"class":177},[167,71624,185],{"class":173},[167,71626,71627],{"class":169,"line":243},[167,71628,209],{"emptyLinePlaceholder":208},[167,71630,71631,71633,71635],{"class":169,"line":261},[167,71632,174],{"class":173},[167,71634,299],{"class":177},[167,71636,185],{"class":173},[167,71638,71640,71642,71644,71646,71648,71650,71652,71654,71656],{"class":71639,"line":273},[169,213],[167,71641,307],{"class":173},[167,71643,15],{"class":177},[167,71645,18706],{"class":181},[167,71647,267],{"class":173},[167,71649,43651],{"class":201},[167,71651,10307],{"class":181},[167,71653,267],{"class":173},[167,71655,27391],{"class":201},[167,71657,185],{"class":173},[167,71659,71660],{"class":169,"line":279},[167,71661,43664],{"class":173},[167,71663,71664,71666,71668],{"class":169,"line":289},[167,71665,504],{"class":173},[167,71667,15],{"class":177},[167,71669,185],{"class":173},[167,71671,71672,71674,71676],{"class":169,"line":294},[167,71673,282],{"class":173},[167,71675,299],{"class":177},[167,71677,185],{"class":173},[154,71679,71681],{"className":156,"code":43683,"filename":3973,"highlights":71680,"language":162,"meta":163,"style":163},[304],[87,71682,71683,71691,71699,71705,71711,71727,71731,71735,71739,71747,71751,71759,71780,71784,71792],{"__ignoreMap":163},[167,71684,71685,71687,71689],{"class":169,"line":170},[167,71686,174],{"class":173},[167,71688,178],{"class":177},[167,71690,185],{"class":173},[167,71692,71693,71695,71697],{"class":169,"line":188},[167,71694,608],{"class":191},[167,71696,3991],{"class":191},[167,71698,1905],{"class":173},[167,71700,71701,71703],{"class":169,"line":205},[167,71702,7176],{"class":181},[167,71704,763],{"class":173},[167,71706,71707,71709],{"class":169,"line":160},[167,71708,1937],{"class":191},[167,71710,1905],{"class":173},[167,71712,71713,71715,71717,71719,71721,71723,71725],{"class":169,"line":238},[167,71714,43719],{"class":173},[167,71716,8172],{"class":201},[167,71718,1025],{"class":173},[167,71720,8194],{"class":201},[167,71722,1025],{"class":173},[167,71724,43615],{"class":201},[167,71726,43053],{"class":173},[167,71728,71729],{"class":169,"line":243},[167,71730,4049],{"class":173},[167,71732,71733],{"class":169,"line":261},[167,71734,3492],{"class":173},[167,71736,71737],{"class":169,"line":273},[167,71738,276],{"class":173},[167,71740,71741,71743,71745],{"class":169,"line":279},[167,71742,282],{"class":173},[167,71744,178],{"class":177},[167,71746,185],{"class":173},[167,71748,71749],{"class":169,"line":289},[167,71750,209],{"emptyLinePlaceholder":208},[167,71752,71753,71755,71757],{"class":169,"line":294},[167,71754,174],{"class":173},[167,71756,299],{"class":177},[167,71758,185],{"class":173},[167,71760,71762,71764,71766,71768,71770,71772,71774,71776,71778],{"class":71761,"line":304},[169,213],[167,71763,307],{"class":173},[167,71765,15],{"class":177},[167,71767,18706],{"class":181},[167,71769,267],{"class":173},[167,71771,43651],{"class":201},[167,71773,10307],{"class":181},[167,71775,267],{"class":173},[167,71777,27391],{"class":201},[167,71779,185],{"class":173},[167,71781,71782],{"class":169,"line":313},[167,71783,43664],{"class":173},[167,71785,71786,71788,71790],{"class":169,"line":161},[167,71787,504],{"class":173},[167,71789,15],{"class":177},[167,71791,185],{"class":173},[167,71793,71794,71796,71798],{"class":169,"line":335},[167,71795,282],{"class":173},[167,71797,299],{"class":177},[167,71799,185],{"class":173},[3087,71801,71803],{"id":71802},"_2-iterating-over-an-object","2) Iterating over an object",[154,71805,71807],{"className":156,"code":43811,"filename":3260,"highlights":71806,"language":162,"meta":163,"style":163},[304],[87,71808,71809,71819,71829,71833,71845,71853,71861,71867,71871,71879,71883,71891,71912,71916,71924],{"__ignoreMap":163},[167,71810,71811,71813,71815,71817],{"class":169,"line":170},[167,71812,174],{"class":173},[167,71814,178],{"class":177},[167,71816,182],{"class":181},[167,71818,185],{"class":173},[167,71820,71821,71823,71825,71827],{"class":169,"line":188},[167,71822,192],{"class":191},[167,71824,195],{"class":173},[167,71826,198],{"class":191},[167,71828,202],{"class":201},[167,71830,71831],{"class":169,"line":205},[167,71832,209],{"emptyLinePlaceholder":208},[167,71834,71835,71837,71839,71841,71843],{"class":169,"line":160},[167,71836,216],{"class":191},[167,71838,43845],{"class":219},[167,71840,223],{"class":191},[167,71842,226],{"class":181},[167,71844,372],{"class":173},[167,71846,71847,71849,71851],{"class":169,"line":238},[167,71848,4398],{"class":173},[167,71850,43858],{"class":201},[167,71852,393],{"class":173},[167,71854,71855,71857,71859],{"class":169,"line":243},[167,71856,43865],{"class":173},[167,71858,43868],{"class":201},[167,71860,393],{"class":173},[167,71862,71863,71865],{"class":169,"line":261},[167,71864,43875],{"class":173},[167,71866,43878],{"class":201},[167,71868,71869],{"class":169,"line":273},[167,71870,403],{"class":173},[167,71872,71873,71875,71877],{"class":169,"line":279},[167,71874,282],{"class":173},[167,71876,178],{"class":177},[167,71878,185],{"class":173},[167,71880,71881],{"class":169,"line":289},[167,71882,209],{"emptyLinePlaceholder":208},[167,71884,71885,71887,71889],{"class":169,"line":294},[167,71886,174],{"class":173},[167,71888,299],{"class":177},[167,71890,185],{"class":173},[167,71892,71894,71896,71898,71900,71902,71904,71906,71908,71910],{"class":71893,"line":304},[169,213],[167,71895,307],{"class":173},[167,71897,36],{"class":177},[167,71899,18706],{"class":181},[167,71901,267],{"class":173},[167,71903,43916],{"class":201},[167,71905,10307],{"class":181},[167,71907,267],{"class":173},[167,71909,43923],{"class":201},[167,71911,185],{"class":173},[167,71913,71914],{"class":169,"line":313},[167,71915,43930],{"class":173},[167,71917,71918,71920,71922],{"class":169,"line":161},[167,71919,504],{"class":173},[167,71921,36],{"class":177},[167,71923,185],{"class":173},[167,71925,71926,71928,71930],{"class":169,"line":335},[167,71927,282],{"class":173},[167,71929,299],{"class":177},[167,71931,185],{"class":173},[154,71933,71935],{"className":156,"code":43949,"filename":3973,"highlights":71934,"language":162,"meta":163,"style":163},[341],[87,71936,71937,71945,71953,71959,71965,71969,71977,71985,71991,71995,71999,72003,72007,72015,72019,72027,72048,72052,72060],{"__ignoreMap":163},[167,71938,71939,71941,71943],{"class":169,"line":170},[167,71940,174],{"class":173},[167,71942,178],{"class":177},[167,71944,185],{"class":173},[167,71946,71947,71949,71951],{"class":169,"line":188},[167,71948,608],{"class":191},[167,71950,3991],{"class":191},[167,71952,1905],{"class":173},[167,71954,71955,71957],{"class":169,"line":205},[167,71956,7176],{"class":181},[167,71958,763],{"class":173},[167,71960,71961,71963],{"class":169,"line":160},[167,71962,1937],{"class":191},[167,71964,1905],{"class":173},[167,71966,71967],{"class":169,"line":238},[167,71968,43985],{"class":173},[167,71970,71971,71973,71975],{"class":169,"line":243},[167,71972,43990],{"class":173},[167,71974,43858],{"class":201},[167,71976,393],{"class":173},[167,71978,71979,71981,71983],{"class":169,"line":261},[167,71980,43999],{"class":173},[167,71982,43868],{"class":201},[167,71984,393],{"class":173},[167,71986,71987,71989],{"class":169,"line":273},[167,71988,44008],{"class":173},[167,71990,43878],{"class":201},[167,71992,71993],{"class":169,"line":279},[167,71994,7287],{"class":173},[167,71996,71997],{"class":169,"line":289},[167,71998,4049],{"class":173},[167,72000,72001],{"class":169,"line":294},[167,72002,3492],{"class":173},[167,72004,72005],{"class":169,"line":304},[167,72006,276],{"class":173},[167,72008,72009,72011,72013],{"class":169,"line":313},[167,72010,282],{"class":173},[167,72012,178],{"class":177},[167,72014,185],{"class":173},[167,72016,72017],{"class":169,"line":161},[167,72018,209],{"emptyLinePlaceholder":208},[167,72020,72021,72023,72025],{"class":169,"line":335},[167,72022,174],{"class":173},[167,72024,299],{"class":177},[167,72026,185],{"class":173},[167,72028,72030,72032,72034,72036,72038,72040,72042,72044,72046],{"class":72029,"line":341},[169,213],[167,72031,307],{"class":173},[167,72033,36],{"class":177},[167,72035,18706],{"class":181},[167,72037,267],{"class":173},[167,72039,43916],{"class":201},[167,72041,10307],{"class":181},[167,72043,267],{"class":173},[167,72045,43923],{"class":201},[167,72047,185],{"class":173},[167,72049,72050],{"class":169,"line":489},[167,72051,43930],{"class":173},[167,72053,72054,72056,72058],{"class":169,"line":495},[167,72055,504],{"class":173},[167,72057,36],{"class":177},[167,72059,185],{"class":173},[167,72061,72062,72064,72066],{"class":169,"line":501},[167,72063,282],{"class":173},[167,72065,299],{"class":177},[167,72067,185],{"class":173},[3087,72069,72071,72072],{"id":72070},"_3-repeating-multiple-nodes-with-template","3) Repeating multiple nodes with ",[87,72073,299],{},[154,72075,72078],{"className":156,"code":72076,"filename":3260,"highlights":72077,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst items = ref([\n  { id: 1, title: 'Vue 3', description: 'Progressive framework' },\n  { id: 2, title: 'Pinia', description: 'Modern global state' }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n    \u003Ch3>{{ item.title }}\u003C\u002Fh3>\n    \u003Cp>{{ item.description }}\u003C\u002Fp>\n    \u003Chr \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002Ftemplate>\n",[294],[87,72079,72080,72090,72100,72104,72116,72133,72150,72154,72162,72166,72174,72209,72221,72233,72241,72249],{"__ignoreMap":163},[167,72081,72082,72084,72086,72088],{"class":169,"line":170},[167,72083,174],{"class":173},[167,72085,178],{"class":177},[167,72087,182],{"class":181},[167,72089,185],{"class":173},[167,72091,72092,72094,72096,72098],{"class":169,"line":188},[167,72093,192],{"class":191},[167,72095,195],{"class":173},[167,72097,198],{"class":191},[167,72099,202],{"class":201},[167,72101,72102],{"class":169,"line":205},[167,72103,209],{"emptyLinePlaceholder":208},[167,72105,72106,72108,72110,72112,72114],{"class":169,"line":160},[167,72107,216],{"class":191},[167,72109,1820],{"class":219},[167,72111,223],{"class":191},[167,72113,226],{"class":181},[167,72115,1827],{"class":173},[167,72117,72118,72120,72122,72124,72126,72128,72131],{"class":169,"line":238},[167,72119,1832],{"class":173},[167,72121,1835],{"class":219},[167,72123,3383],{"class":173},[167,72125,44146],{"class":201},[167,72127,44149],{"class":173},[167,72129,72130],{"class":201},"'Progressive framework'",[167,72132,1856],{"class":173},[167,72134,72135,72137,72139,72141,72143,72145,72148],{"class":169,"line":243},[167,72136,1832],{"class":173},[167,72138,1853],{"class":219},[167,72140,3383],{"class":173},[167,72142,44165],{"class":201},[167,72144,44149],{"class":173},[167,72146,72147],{"class":201},"'Modern global state'",[167,72149,599],{"class":173},[167,72151,72152],{"class":169,"line":261},[167,72153,429],{"class":173},[167,72155,72156,72158,72160],{"class":169,"line":273},[167,72157,282],{"class":173},[167,72159,178],{"class":177},[167,72161,185],{"class":173},[167,72163,72164],{"class":169,"line":279},[167,72165,209],{"emptyLinePlaceholder":208},[167,72167,72168,72170,72172],{"class":169,"line":289},[167,72169,174],{"class":173},[167,72171,299],{"class":177},[167,72173,185],{"class":173},[167,72175,72177,72179,72181,72183,72185,72187,72189,72191,72193,72195,72197,72199,72201,72203,72205,72207],{"class":72176,"line":294},[169,213],[167,72178,307],{"class":173},[167,72180,299],{"class":177},[167,72182,18706],{"class":191},[167,72184,267],{"class":173},[167,72186,5080],{"class":201},[167,72188,44212],{"class":173},[167,72190,44215],{"class":191},[167,72192,1820],{"class":173},[167,72194,5080],{"class":201},[167,72196,5312],{"class":173},[167,72198,7845],{"class":181},[167,72200,267],{"class":173},[167,72202,5080],{"class":201},[167,72204,44230],{"class":173},[167,72206,5080],{"class":201},[167,72208,185],{"class":173},[167,72210,72211,72213,72215,72217,72219],{"class":169,"line":304},[167,72212,1257],{"class":173},[167,72214,3087],{"class":177},[167,72216,44243],{"class":173},[167,72218,3087],{"class":177},[167,72220,185],{"class":173},[167,72222,72223,72225,72227,72229,72231],{"class":169,"line":313},[167,72224,1257],{"class":173},[167,72226,15],{"class":177},[167,72228,44256],{"class":173},[167,72230,15],{"class":177},[167,72232,185],{"class":173},[167,72234,72235,72237,72239],{"class":169,"line":161},[167,72236,1257],{"class":173},[167,72238,44267],{"class":177},[167,72240,5325],{"class":173},[167,72242,72243,72245,72247],{"class":169,"line":335},[167,72244,504],{"class":173},[167,72246,299],{"class":177},[167,72248,185],{"class":173},[167,72250,72251,72253,72255],{"class":169,"line":341},[167,72252,282],{"class":173},[167,72254,299],{"class":177},[167,72256,185],{"class":173},[154,72258,72261],{"className":156,"code":72259,"filename":3973,"highlights":72260,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      items: [\n        { id: 1, title: 'Vue 3', description: 'Progressive framework' },\n        { id: 2, title: 'Pinia', description: 'Modern global state' }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n    \u003Ch3>{{ item.title }}\u003C\u002Fh3>\n    \u003Cp>{{ item.description }}\u003C\u002Fp>\n    \u003Chr \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002Ftemplate>\n",[335],[87,72262,72263,72271,72279,72285,72291,72295,72311,72327,72331,72335,72339,72343,72351,72355,72363,72398,72410,72422,72430,72438],{"__ignoreMap":163},[167,72264,72265,72267,72269],{"class":169,"line":170},[167,72266,174],{"class":173},[167,72268,178],{"class":177},[167,72270,185],{"class":173},[167,72272,72273,72275,72277],{"class":169,"line":188},[167,72274,608],{"class":191},[167,72276,3991],{"class":191},[167,72278,1905],{"class":173},[167,72280,72281,72283],{"class":169,"line":205},[167,72282,7176],{"class":181},[167,72284,763],{"class":173},[167,72286,72287,72289],{"class":169,"line":160},[167,72288,1937],{"class":191},[167,72290,1905],{"class":173},[167,72292,72293],{"class":169,"line":238},[167,72294,44324],{"class":173},[167,72296,72297,72299,72301,72303,72305,72307,72309],{"class":169,"line":243},[167,72298,8677],{"class":173},[167,72300,1835],{"class":219},[167,72302,3383],{"class":173},[167,72304,44146],{"class":201},[167,72306,44149],{"class":173},[167,72308,72130],{"class":201},[167,72310,1856],{"class":173},[167,72312,72313,72315,72317,72319,72321,72323,72325],{"class":169,"line":261},[167,72314,8677],{"class":173},[167,72316,1853],{"class":219},[167,72318,3383],{"class":173},[167,72320,44165],{"class":201},[167,72322,44149],{"class":173},[167,72324,72147],{"class":201},[167,72326,599],{"class":173},[167,72328,72329],{"class":169,"line":273},[167,72330,8738],{"class":173},[167,72332,72333],{"class":169,"line":279},[167,72334,4049],{"class":173},[167,72336,72337],{"class":169,"line":289},[167,72338,3492],{"class":173},[167,72340,72341],{"class":169,"line":294},[167,72342,276],{"class":173},[167,72344,72345,72347,72349],{"class":169,"line":304},[167,72346,282],{"class":173},[167,72348,178],{"class":177},[167,72350,185],{"class":173},[167,72352,72353],{"class":169,"line":313},[167,72354,209],{"emptyLinePlaceholder":208},[167,72356,72357,72359,72361],{"class":169,"line":161},[167,72358,174],{"class":173},[167,72360,299],{"class":177},[167,72362,185],{"class":173},[167,72364,72366,72368,72370,72372,72374,72376,72378,72380,72382,72384,72386,72388,72390,72392,72394,72396],{"class":72365,"line":335},[169,213],[167,72367,307],{"class":173},[167,72369,299],{"class":177},[167,72371,18706],{"class":191},[167,72373,267],{"class":173},[167,72375,5080],{"class":201},[167,72377,44212],{"class":173},[167,72379,44215],{"class":191},[167,72381,1820],{"class":173},[167,72383,5080],{"class":201},[167,72385,5312],{"class":173},[167,72387,7845],{"class":181},[167,72389,267],{"class":173},[167,72391,5080],{"class":201},[167,72393,44230],{"class":173},[167,72395,5080],{"class":201},[167,72397,185],{"class":173},[167,72399,72400,72402,72404,72406,72408],{"class":169,"line":341},[167,72401,1257],{"class":173},[167,72403,3087],{"class":177},[167,72405,44243],{"class":173},[167,72407,3087],{"class":177},[167,72409,185],{"class":173},[167,72411,72412,72414,72416,72418,72420],{"class":169,"line":489},[167,72413,1257],{"class":173},[167,72415,15],{"class":177},[167,72417,44256],{"class":173},[167,72419,15],{"class":177},[167,72421,185],{"class":173},[167,72423,72424,72426,72428],{"class":169,"line":495},[167,72425,1257],{"class":173},[167,72427,44267],{"class":177},[167,72429,5325],{"class":173},[167,72431,72432,72434,72436],{"class":169,"line":501},[167,72433,504],{"class":173},[167,72435,299],{"class":177},[167,72437,185],{"class":173},[167,72439,72440,72442,72444],{"class":169,"line":512},[167,72441,282],{"class":173},[167,72443,299],{"class":177},[167,72445,185],{"class":173},[22,72447,72449],{"id":72448},"advanced-level-derived-lists-components-and-nesting","Advanced level: derived lists, components, and nesting",[3087,72451,72453,72454],{"id":72452},"_1-prefilter-and-sort-with-computed","1) Prefilter and sort with ",[87,72455,1661],{},[15,72457,72458,72459,72461,72462,1679],{},"Do not place heavy logic directly inside ",[87,72460,30726],{},".\nDerive the list first with ",[87,72463,1661],{},[154,72465,72467],{"className":156,"code":44496,"filename":3260,"highlights":72466,"language":162,"meta":163,"style":163},[289,294,304,313,161,335,501],[87,72468,72469,72479,72489,72493,72505,72525,72545,72565,72569,72573,72590,72597,72618,72627,72652,72657,72665,72669,72677,72698,72702,72710],{"__ignoreMap":163},[167,72470,72471,72473,72475,72477],{"class":169,"line":170},[167,72472,174],{"class":173},[167,72474,178],{"class":177},[167,72476,182],{"class":181},[167,72478,185],{"class":173},[167,72480,72481,72483,72485,72487],{"class":169,"line":188},[167,72482,192],{"class":191},[167,72484,1805],{"class":173},[167,72486,198],{"class":191},[167,72488,202],{"class":201},[167,72490,72491],{"class":169,"line":205},[167,72492,209],{"emptyLinePlaceholder":208},[167,72494,72495,72497,72499,72501,72503],{"class":169,"line":160},[167,72496,216],{"class":191},[167,72498,35434],{"class":219},[167,72500,223],{"class":191},[167,72502,226],{"class":181},[167,72504,1827],{"class":173},[167,72506,72507,72509,72511,72513,72515,72517,72519,72521,72523],{"class":169,"line":238},[167,72508,1832],{"class":173},[167,72510,1835],{"class":219},[167,72512,1838],{"class":173},[167,72514,44546],{"class":201},[167,72516,1844],{"class":173},[167,72518,44551],{"class":219},[167,72520,35459],{"class":173},[167,72522,44556],{"class":219},[167,72524,1856],{"class":173},[167,72526,72527,72529,72531,72533,72535,72537,72539,72541,72543],{"class":169,"line":243},[167,72528,1832],{"class":173},[167,72530,1853],{"class":219},[167,72532,1838],{"class":173},[167,72534,44569],{"class":201},[167,72536,1844],{"class":173},[167,72538,44574],{"class":219},[167,72540,35459],{"class":173},[167,72542,1960],{"class":219},[167,72544,1856],{"class":173},[167,72546,72547,72549,72551,72553,72555,72557,72559,72561,72563],{"class":169,"line":261},[167,72548,1832],{"class":173},[167,72550,8203],{"class":219},[167,72552,1838],{"class":173},[167,72554,44591],{"class":201},[167,72556,1844],{"class":173},[167,72558,44596],{"class":219},[167,72560,35459],{"class":173},[167,72562,44601],{"class":219},[167,72564,599],{"class":173},[167,72566,72567],{"class":169,"line":273},[167,72568,429],{"class":173},[167,72570,72571],{"class":169,"line":279},[167,72572,209],{"emptyLinePlaceholder":208},[167,72574,72576,72578,72580,72582,72584,72586,72588],{"class":72575,"line":289},[169,213],[167,72577,216],{"class":191},[167,72579,44619],{"class":219},[167,72581,223],{"class":191},[167,72583,1898],{"class":181},[167,72585,1493],{"class":173},[167,72587,639],{"class":191},[167,72589,1905],{"class":173},[167,72591,72593,72595],{"class":72592,"line":294},[169,213],[167,72594,1539],{"class":191},[167,72596,44637],{"class":173},[167,72598,72600,72602,72604,72606,72608,72610,72612,72614,72616],{"class":72599,"line":304},[169,213],[167,72601,44643],{"class":173},[167,72603,8252],{"class":181},[167,72605,229],{"class":173},[167,72607,6968],{"class":254},[167,72609,8259],{"class":191},[167,72611,44654],{"class":173},[167,72613,15863],{"class":191},[167,72615,44659],{"class":219},[167,72617,235],{"class":173},[167,72619,72621,72623,72625],{"class":72620,"line":313},[169,213],[167,72622,44643],{"class":173},[167,72624,44669],{"class":181},[167,72626,2917],{"class":173},[167,72628,72630,72632,72634,72636,72638,72640,72642,72644,72646,72648,72650],{"class":72629,"line":161},[169,213],[167,72631,44643],{"class":173},[167,72633,44679],{"class":181},[167,72635,1918],{"class":173},[167,72637,19092],{"class":254},[167,72639,1025],{"class":173},[167,72641,44688],{"class":254},[167,72643,693],{"class":173},[167,72645,639],{"class":191},[167,72647,44695],{"class":173},[167,72649,44698],{"class":191},[167,72651,44701],{"class":173},[167,72653,72655],{"class":72654,"line":335},[169,213],[167,72656,403],{"class":173},[167,72658,72659,72661,72663],{"class":169,"line":341},[167,72660,282],{"class":173},[167,72662,178],{"class":177},[167,72664,185],{"class":173},[167,72666,72667],{"class":169,"line":489},[167,72668,209],{"emptyLinePlaceholder":208},[167,72670,72671,72673,72675],{"class":169,"line":495},[167,72672,174],{"class":173},[167,72674,299],{"class":177},[167,72676,185],{"class":173},[167,72678,72680,72682,72684,72686,72688,72690,72692,72694,72696],{"class":72679,"line":501},[169,213],[167,72681,307],{"class":173},[167,72683,36],{"class":177},[167,72685,18706],{"class":181},[167,72687,267],{"class":173},[167,72689,44740],{"class":201},[167,72691,10307],{"class":181},[167,72693,267],{"class":173},[167,72695,44747],{"class":201},[167,72697,185],{"class":173},[167,72699,72700],{"class":169,"line":512},[167,72701,44754],{"class":173},[167,72703,72704,72706,72708],{"class":169,"line":781},[167,72705,504],{"class":173},[167,72707,36],{"class":177},[167,72709,185],{"class":173},[167,72711,72712,72714,72716],{"class":169,"line":786},[167,72713,282],{"class":173},[167,72715,299],{"class":177},[167,72717,185],{"class":173},[154,72719,72721],{"className":156,"code":44773,"filename":3973,"highlights":72720,"language":162,"meta":163,"style":163},[304,313,161,335,341,489,495,501,2692],[87,72722,72723,72731,72739,72745,72751,72755,72775,72795,72815,72819,72823,72827,72832,72839,72848,72869,72878,72903,72908,72913,72917,72925,72929,72937,72958,72962,72970],{"__ignoreMap":163},[167,72724,72725,72727,72729],{"class":169,"line":170},[167,72726,174],{"class":173},[167,72728,178],{"class":177},[167,72730,185],{"class":173},[167,72732,72733,72735,72737],{"class":169,"line":188},[167,72734,608],{"class":191},[167,72736,3991],{"class":191},[167,72738,1905],{"class":173},[167,72740,72741,72743],{"class":169,"line":205},[167,72742,7176],{"class":181},[167,72744,763],{"class":173},[167,72746,72747,72749],{"class":169,"line":160},[167,72748,1937],{"class":191},[167,72750,1905],{"class":173},[167,72752,72753],{"class":169,"line":238},[167,72754,36190],{"class":173},[167,72756,72757,72759,72761,72763,72765,72767,72769,72771,72773],{"class":169,"line":243},[167,72758,8677],{"class":173},[167,72760,1835],{"class":219},[167,72762,1838],{"class":173},[167,72764,44546],{"class":201},[167,72766,1844],{"class":173},[167,72768,44551],{"class":219},[167,72770,35459],{"class":173},[167,72772,44556],{"class":219},[167,72774,1856],{"class":173},[167,72776,72777,72779,72781,72783,72785,72787,72789,72791,72793],{"class":169,"line":261},[167,72778,8677],{"class":173},[167,72780,1853],{"class":219},[167,72782,1838],{"class":173},[167,72784,44569],{"class":201},[167,72786,1844],{"class":173},[167,72788,44574],{"class":219},[167,72790,35459],{"class":173},[167,72792,1960],{"class":219},[167,72794,1856],{"class":173},[167,72796,72797,72799,72801,72803,72805,72807,72809,72811,72813],{"class":169,"line":273},[167,72798,8677],{"class":173},[167,72800,8203],{"class":219},[167,72802,1838],{"class":173},[167,72804,44591],{"class":201},[167,72806,1844],{"class":173},[167,72808,44596],{"class":219},[167,72810,35459],{"class":173},[167,72812,44601],{"class":219},[167,72814,599],{"class":173},[167,72816,72817],{"class":169,"line":279},[167,72818,8738],{"class":173},[167,72820,72821],{"class":169,"line":289},[167,72822,4049],{"class":173},[167,72824,72825],{"class":169,"line":294},[167,72826,398],{"class":173},[167,72828,72830],{"class":72829,"line":304},[169,213],[167,72831,8755],{"class":173},[167,72833,72835,72837],{"class":72834,"line":313},[169,213],[167,72836,44891],{"class":181},[167,72838,763],{"class":173},[167,72840,72842,72844,72846],{"class":72841,"line":161},[169,213],[167,72843,8767],{"class":191},[167,72845,7351],{"class":219},[167,72847,44903],{"class":173},[167,72849,72851,72853,72855,72857,72859,72861,72863,72865,72867],{"class":72850,"line":335},[169,213],[167,72852,44909],{"class":173},[167,72854,8252],{"class":181},[167,72856,229],{"class":173},[167,72858,6968],{"class":254},[167,72860,8259],{"class":191},[167,72862,44654],{"class":173},[167,72864,15863],{"class":191},[167,72866,44659],{"class":219},[167,72868,235],{"class":173},[167,72870,72872,72874,72876],{"class":72871,"line":341},[169,213],[167,72873,44909],{"class":173},[167,72875,44669],{"class":181},[167,72877,2917],{"class":173},[167,72879,72881,72883,72885,72887,72889,72891,72893,72895,72897,72899,72901],{"class":72880,"line":489},[169,213],[167,72882,44909],{"class":173},[167,72884,44679],{"class":181},[167,72886,1918],{"class":173},[167,72888,19092],{"class":254},[167,72890,1025],{"class":173},[167,72892,44688],{"class":254},[167,72894,693],{"class":173},[167,72896,639],{"class":191},[167,72898,44695],{"class":173},[167,72900,44698],{"class":191},[167,72902,44701],{"class":173},[167,72904,72906],{"class":72905,"line":495},[169,213],[167,72907,4049],{"class":173},[167,72909,72911],{"class":72910,"line":501},[169,213],[167,72912,3492],{"class":173},[167,72914,72915],{"class":169,"line":512},[167,72916,276],{"class":173},[167,72918,72919,72921,72923],{"class":169,"line":781},[167,72920,282],{"class":173},[167,72922,178],{"class":177},[167,72924,185],{"class":173},[167,72926,72927],{"class":169,"line":786},[167,72928,209],{"emptyLinePlaceholder":208},[167,72930,72931,72933,72935],{"class":169,"line":2678},[167,72932,174],{"class":173},[167,72934,299],{"class":177},[167,72936,185],{"class":173},[167,72938,72940,72942,72944,72946,72948,72950,72952,72954,72956],{"class":72939,"line":2692},[169,213],[167,72941,307],{"class":173},[167,72943,36],{"class":177},[167,72945,18706],{"class":181},[167,72947,267],{"class":173},[167,72949,44740],{"class":201},[167,72951,10307],{"class":181},[167,72953,267],{"class":173},[167,72955,44747],{"class":201},[167,72957,185],{"class":173},[167,72959,72960],{"class":169,"line":3575},[167,72961,44754],{"class":173},[167,72963,72964,72966,72968],{"class":169,"line":5028},[167,72965,504],{"class":173},[167,72967,36],{"class":177},[167,72969,185],{"class":173},[167,72971,72972,72974,72976],{"class":169,"line":5037},[167,72973,282],{"class":173},[167,72975,299],{"class":177},[167,72977,185],{"class":173},[3087,72979,72981,72982],{"id":72980},"_2-rendering-components-with-v-for","2) Rendering components with ",[87,72983,30726],{},[154,72985,72987],{"className":156,"code":45043,"filename":3260,"highlights":72986,"language":162,"meta":163,"style":163},[304],[87,72988,72989,72999,73009,73019,73023,73035,73051,73067,73071,73079,73083,73091,73118],{"__ignoreMap":163},[167,72990,72991,72993,72995,72997],{"class":169,"line":170},[167,72992,174],{"class":173},[167,72994,178],{"class":177},[167,72996,182],{"class":181},[167,72998,185],{"class":173},[167,73000,73001,73003,73005,73007],{"class":169,"line":188},[167,73002,192],{"class":191},[167,73004,195],{"class":173},[167,73006,198],{"class":191},[167,73008,202],{"class":201},[167,73010,73011,73013,73015,73017],{"class":169,"line":205},[167,73012,192],{"class":191},[167,73014,45073],{"class":173},[167,73016,198],{"class":191},[167,73018,45078],{"class":201},[167,73020,73021],{"class":169,"line":160},[167,73022,209],{"emptyLinePlaceholder":208},[167,73024,73025,73027,73029,73031,73033],{"class":169,"line":238},[167,73026,216],{"class":191},[167,73028,16954],{"class":219},[167,73030,223],{"class":191},[167,73032,226],{"class":181},[167,73034,1827],{"class":173},[167,73036,73037,73039,73041,73043,73045,73047,73049],{"class":169,"line":243},[167,73038,1832],{"class":173},[167,73040,45101],{"class":201},[167,73042,1838],{"class":173},[167,73044,8172],{"class":201},[167,73046,33090],{"class":173},[167,73048,45110],{"class":201},[167,73050,1856],{"class":173},[167,73052,73053,73055,73057,73059,73061,73063,73065],{"class":169,"line":261},[167,73054,1832],{"class":173},[167,73056,45119],{"class":201},[167,73058,1838],{"class":173},[167,73060,8194],{"class":201},[167,73062,33090],{"class":173},[167,73064,45128],{"class":201},[167,73066,599],{"class":173},[167,73068,73069],{"class":169,"line":273},[167,73070,429],{"class":173},[167,73072,73073,73075,73077],{"class":169,"line":279},[167,73074,282],{"class":173},[167,73076,178],{"class":177},[167,73078,185],{"class":173},[167,73080,73081],{"class":169,"line":289},[167,73082,209],{"emptyLinePlaceholder":208},[167,73084,73085,73087,73089],{"class":169,"line":294},[167,73086,174],{"class":173},[167,73088,299],{"class":177},[167,73090,185],{"class":173},[167,73092,73094,73096,73098,73100,73102,73104,73106,73108,73110,73112,73114,73116],{"class":73093,"line":304},[169,213],[167,73095,307],{"class":173},[167,73097,5309],{"class":177},[167,73099,18706],{"class":181},[167,73101,267],{"class":173},[167,73103,18711],{"class":201},[167,73105,10307],{"class":181},[167,73107,267],{"class":173},[167,73109,18718],{"class":201},[167,73111,32945],{"class":181},[167,73113,267],{"class":173},[167,73115,27391],{"class":201},[167,73117,5325],{"class":173},[167,73119,73120,73122,73124],{"class":169,"line":313},[167,73121,282],{"class":173},[167,73123,299],{"class":177},[167,73125,185],{"class":173},[154,73127,73129],{"className":156,"code":45192,"filename":3973,"highlights":73128,"language":162,"meta":163,"style":163},[495],[87,73130,73131,73139,73149,73153,73161,73165,73171,73177,73181,73197,73213,73217,73221,73225,73229,73237,73241,73249,73276],{"__ignoreMap":163},[167,73132,73133,73135,73137],{"class":169,"line":170},[167,73134,174],{"class":173},[167,73136,178],{"class":177},[167,73138,185],{"class":173},[167,73140,73141,73143,73145,73147],{"class":169,"line":188},[167,73142,192],{"class":191},[167,73144,45073],{"class":173},[167,73146,198],{"class":191},[167,73148,45078],{"class":201},[167,73150,73151],{"class":169,"line":205},[167,73152,209],{"emptyLinePlaceholder":208},[167,73154,73155,73157,73159],{"class":169,"line":160},[167,73156,608],{"class":191},[167,73158,3991],{"class":191},[167,73160,1905],{"class":173},[167,73162,73163],{"class":169,"line":238},[167,73164,45230],{"class":173},[167,73166,73167,73169],{"class":169,"line":243},[167,73168,7176],{"class":181},[167,73170,763],{"class":173},[167,73172,73173,73175],{"class":169,"line":261},[167,73174,1937],{"class":191},[167,73176,1905],{"class":173},[167,73178,73179],{"class":169,"line":273},[167,73180,28752],{"class":173},[167,73182,73183,73185,73187,73189,73191,73193,73195],{"class":169,"line":279},[167,73184,8677],{"class":173},[167,73186,45101],{"class":201},[167,73188,1838],{"class":173},[167,73190,8172],{"class":201},[167,73192,33090],{"class":173},[167,73194,45110],{"class":201},[167,73196,1856],{"class":173},[167,73198,73199,73201,73203,73205,73207,73209,73211],{"class":169,"line":289},[167,73200,8677],{"class":173},[167,73202,45119],{"class":201},[167,73204,1838],{"class":173},[167,73206,8194],{"class":201},[167,73208,33090],{"class":173},[167,73210,45128],{"class":201},[167,73212,599],{"class":173},[167,73214,73215],{"class":169,"line":294},[167,73216,8738],{"class":173},[167,73218,73219],{"class":169,"line":304},[167,73220,4049],{"class":173},[167,73222,73223],{"class":169,"line":313},[167,73224,3492],{"class":173},[167,73226,73227],{"class":169,"line":161},[167,73228,276],{"class":173},[167,73230,73231,73233,73235],{"class":169,"line":335},[167,73232,282],{"class":173},[167,73234,178],{"class":177},[167,73236,185],{"class":173},[167,73238,73239],{"class":169,"line":341},[167,73240,209],{"emptyLinePlaceholder":208},[167,73242,73243,73245,73247],{"class":169,"line":489},[167,73244,174],{"class":173},[167,73246,299],{"class":177},[167,73248,185],{"class":173},[167,73250,73252,73254,73256,73258,73260,73262,73264,73266,73268,73270,73272,73274],{"class":73251,"line":495},[169,213],[167,73253,307],{"class":173},[167,73255,5309],{"class":177},[167,73257,18706],{"class":181},[167,73259,267],{"class":173},[167,73261,18711],{"class":201},[167,73263,10307],{"class":181},[167,73265,267],{"class":173},[167,73267,18718],{"class":201},[167,73269,32945],{"class":181},[167,73271,267],{"class":173},[167,73273,27391],{"class":201},[167,73275,5325],{"class":173},[167,73277,73278,73280,73282],{"class":169,"line":501},[167,73279,282],{"class":173},[167,73281,299],{"class":177},[167,73283,185],{"class":173},[3087,73285,73287],{"id":73286},"_3-nested-lists-categories-and-products","3) Nested lists (categories and products)",[154,73289,73292],{"className":156,"code":73290,"filename":3260,"highlights":73291,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst categories = ref([\n  {\n    id: 'c1',\n    name: 'Peripherals',\n    products: [\n      { id: 'p1', name: 'Mouse' },\n      { id: 'p2', name: 'Keyboard' }\n    ]\n  }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n    \u003Ch3>{{ category.name }}\u003C\u002Fh3>\n    \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n      {{ product.name }}\n    \u003C\u002Fli>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[489,501],[87,73293,73294,73304,73314,73318,73330,73334,73342,73351,73355,73367,73379,73383,73387,73391,73399,73403,73411,73432,73444,73465,73469,73477,73485],{"__ignoreMap":163},[167,73295,73296,73298,73300,73302],{"class":169,"line":170},[167,73297,174],{"class":173},[167,73299,178],{"class":177},[167,73301,182],{"class":181},[167,73303,185],{"class":173},[167,73305,73306,73308,73310,73312],{"class":169,"line":188},[167,73307,192],{"class":191},[167,73309,195],{"class":173},[167,73311,198],{"class":191},[167,73313,202],{"class":201},[167,73315,73316],{"class":169,"line":205},[167,73317,209],{"emptyLinePlaceholder":208},[167,73319,73320,73322,73324,73326,73328],{"class":169,"line":160},[167,73321,216],{"class":191},[167,73323,45390],{"class":219},[167,73325,223],{"class":191},[167,73327,226],{"class":181},[167,73329,1827],{"class":173},[167,73331,73332],{"class":169,"line":238},[167,73333,45401],{"class":173},[167,73335,73336,73338,73340],{"class":169,"line":243},[167,73337,45406],{"class":173},[167,73339,45409],{"class":201},[167,73341,393],{"class":173},[167,73343,73344,73346,73349],{"class":169,"line":261},[167,73345,45416],{"class":173},[167,73347,73348],{"class":201},"'Peripherals'",[167,73350,393],{"class":173},[167,73352,73353],{"class":169,"line":273},[167,73354,45426],{"class":173},[167,73356,73357,73359,73361,73363,73365],{"class":169,"line":279},[167,73358,45431],{"class":173},[167,73360,45434],{"class":201},[167,73362,1838],{"class":173},[167,73364,44569],{"class":201},[167,73366,1856],{"class":173},[167,73368,73369,73371,73373,73375,73377],{"class":169,"line":289},[167,73370,45431],{"class":173},[167,73372,45447],{"class":201},[167,73374,1838],{"class":173},[167,73376,44591],{"class":201},[167,73378,599],{"class":173},[167,73380,73381],{"class":169,"line":294},[167,73382,45459],{"class":173},[167,73384,73385],{"class":169,"line":304},[167,73386,3492],{"class":173},[167,73388,73389],{"class":169,"line":313},[167,73390,429],{"class":173},[167,73392,73393,73395,73397],{"class":169,"line":161},[167,73394,282],{"class":173},[167,73396,178],{"class":177},[167,73398,185],{"class":173},[167,73400,73401],{"class":169,"line":335},[167,73402,209],{"emptyLinePlaceholder":208},[167,73404,73405,73407,73409],{"class":169,"line":341},[167,73406,174],{"class":173},[167,73408,299],{"class":177},[167,73410,185],{"class":173},[167,73412,73414,73416,73418,73420,73422,73424,73426,73428,73430],{"class":73413,"line":489},[169,213],[167,73415,307],{"class":173},[167,73417,10117],{"class":177},[167,73419,18706],{"class":181},[167,73421,267],{"class":173},[167,73423,45501],{"class":201},[167,73425,10307],{"class":181},[167,73427,267],{"class":173},[167,73429,45508],{"class":201},[167,73431,185],{"class":173},[167,73433,73434,73436,73438,73440,73442],{"class":169,"line":495},[167,73435,1257],{"class":173},[167,73437,3087],{"class":177},[167,73439,45519],{"class":173},[167,73441,3087],{"class":177},[167,73443,185],{"class":173},[167,73445,73447,73449,73451,73453,73455,73457,73459,73461,73463],{"class":73446,"line":501},[169,213],[167,73448,1257],{"class":173},[167,73450,36],{"class":177},[167,73452,18706],{"class":181},[167,73454,267],{"class":173},[167,73456,45537],{"class":201},[167,73458,10307],{"class":181},[167,73460,267],{"class":173},[167,73462,44747],{"class":201},[167,73464,185],{"class":173},[167,73466,73467],{"class":169,"line":512},[167,73468,45550],{"class":173},[167,73470,73471,73473,73475],{"class":169,"line":781},[167,73472,1292],{"class":173},[167,73474,36],{"class":177},[167,73476,185],{"class":173},[167,73478,73479,73481,73483],{"class":169,"line":786},[167,73480,504],{"class":173},[167,73482,10117],{"class":177},[167,73484,185],{"class":173},[167,73486,73487,73489,73491],{"class":169,"line":2678},[167,73488,282],{"class":173},[167,73490,299],{"class":177},[167,73492,185],{"class":173},[154,73494,73497],{"className":156,"code":73495,"filename":3973,"highlights":73496,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      categories: [\n        {\n          id: 'c1',\n          name: 'Peripherals',\n          products: [\n            { id: 'p1', name: 'Mouse' },\n            { id: 'p2', name: 'Keyboard' }\n          ]\n        }\n      ]\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n    \u003Ch3>{{ category.name }}\u003C\u002Fh3>\n    \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n      {{ product.name }}\n    \u003C\u002Fli>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[781,2678],[87,73498,73499,73507,73515,73521,73527,73531,73535,73543,73551,73555,73567,73579,73583,73587,73591,73595,73599,73603,73611,73615,73623,73644,73656,73677,73681,73689,73697],{"__ignoreMap":163},[167,73500,73501,73503,73505],{"class":169,"line":170},[167,73502,174],{"class":173},[167,73504,178],{"class":177},[167,73506,185],{"class":173},[167,73508,73509,73511,73513],{"class":169,"line":188},[167,73510,608],{"class":191},[167,73512,3991],{"class":191},[167,73514,1905],{"class":173},[167,73516,73517,73519],{"class":169,"line":205},[167,73518,7176],{"class":181},[167,73520,763],{"class":173},[167,73522,73523,73525],{"class":169,"line":160},[167,73524,1937],{"class":191},[167,73526,1905],{"class":173},[167,73528,73529],{"class":169,"line":238},[167,73530,45613],{"class":173},[167,73532,73533],{"class":169,"line":243},[167,73534,45618],{"class":173},[167,73536,73537,73539,73541],{"class":169,"line":261},[167,73538,45623],{"class":173},[167,73540,45409],{"class":201},[167,73542,393],{"class":173},[167,73544,73545,73547,73549],{"class":169,"line":273},[167,73546,45632],{"class":173},[167,73548,73348],{"class":201},[167,73550,393],{"class":173},[167,73552,73553],{"class":169,"line":279},[167,73554,45641],{"class":173},[167,73556,73557,73559,73561,73563,73565],{"class":169,"line":289},[167,73558,45646],{"class":173},[167,73560,45434],{"class":201},[167,73562,1838],{"class":173},[167,73564,44569],{"class":201},[167,73566,1856],{"class":173},[167,73568,73569,73571,73573,73575,73577],{"class":169,"line":294},[167,73570,45646],{"class":173},[167,73572,45447],{"class":201},[167,73574,1838],{"class":173},[167,73576,44591],{"class":201},[167,73578,599],{"class":173},[167,73580,73581],{"class":169,"line":304},[167,73582,45671],{"class":173},[167,73584,73585],{"class":169,"line":313},[167,73586,14822],{"class":173},[167,73588,73589],{"class":169,"line":161},[167,73590,8738],{"class":173},[167,73592,73593],{"class":169,"line":335},[167,73594,4049],{"class":173},[167,73596,73597],{"class":169,"line":341},[167,73598,3492],{"class":173},[167,73600,73601],{"class":169,"line":489},[167,73602,276],{"class":173},[167,73604,73605,73607,73609],{"class":169,"line":495},[167,73606,282],{"class":173},[167,73608,178],{"class":177},[167,73610,185],{"class":173},[167,73612,73613],{"class":169,"line":501},[167,73614,209],{"emptyLinePlaceholder":208},[167,73616,73617,73619,73621],{"class":169,"line":512},[167,73618,174],{"class":173},[167,73620,299],{"class":177},[167,73622,185],{"class":173},[167,73624,73626,73628,73630,73632,73634,73636,73638,73640,73642],{"class":73625,"line":781},[169,213],[167,73627,307],{"class":173},[167,73629,10117],{"class":177},[167,73631,18706],{"class":181},[167,73633,267],{"class":173},[167,73635,45501],{"class":201},[167,73637,10307],{"class":181},[167,73639,267],{"class":173},[167,73641,45508],{"class":201},[167,73643,185],{"class":173},[167,73645,73646,73648,73650,73652,73654],{"class":169,"line":786},[167,73647,1257],{"class":173},[167,73649,3087],{"class":177},[167,73651,45519],{"class":173},[167,73653,3087],{"class":177},[167,73655,185],{"class":173},[167,73657,73659,73661,73663,73665,73667,73669,73671,73673,73675],{"class":73658,"line":2678},[169,213],[167,73660,1257],{"class":173},[167,73662,36],{"class":177},[167,73664,18706],{"class":181},[167,73666,267],{"class":173},[167,73668,45537],{"class":201},[167,73670,10307],{"class":181},[167,73672,267],{"class":173},[167,73674,44747],{"class":201},[167,73676,185],{"class":173},[167,73678,73679],{"class":169,"line":2692},[167,73680,45550],{"class":173},[167,73682,73683,73685,73687],{"class":169,"line":3575},[167,73684,1292],{"class":173},[167,73686,36],{"class":177},[167,73688,185],{"class":173},[167,73690,73691,73693,73695],{"class":169,"line":5028},[167,73692,504],{"class":173},[167,73694,10117],{"class":177},[167,73696,185],{"class":173},[167,73698,73699,73701,73703],{"class":169,"line":5037},[167,73700,282],{"class":173},[167,73702,299],{"class":177},[167,73704,185],{"class":173},[22,73706,73708,73709,73711],{"id":73707},"common-v-for-mistakes","Common ",[87,73710,30726],{}," mistakes",[3087,73713,68621,73715,70891,73717,73719],{"id":73714},"_1-using-index-as-key-in-mutable-lists",[87,73716,42871],{},[87,73718,7845],{}," in mutable lists",[154,73721,73723],{"className":156,"code":45810,"filename":63015,"highlights":73722,"language":162,"meta":163,"style":163},[170],[87,73724,73725,73760,73764],{"__ignoreMap":163},[167,73726,73728,73730,73732,73734,73736,73738,73740,73742,73744,73746,73748,73750,73752,73754,73756,73758],{"class":73727,"line":170},[169,213],[167,73729,174],{"class":173},[167,73731,36],{"class":177},[167,73733,18706],{"class":191},[167,73735,267],{"class":173},[167,73737,5080],{"class":201},[167,73739,45829],{"class":173},[167,73741,44215],{"class":191},[167,73743,1820],{"class":173},[167,73745,5080],{"class":201},[167,73747,5312],{"class":173},[167,73749,7845],{"class":181},[167,73751,267],{"class":173},[167,73753,5080],{"class":201},[167,73755,42871],{"class":173},[167,73757,5080],{"class":201},[167,73759,185],{"class":173},[167,73761,73762],{"class":169,"line":188},[167,73763,45854],{"class":173},[167,73765,73766,73768,73770],{"class":169,"line":205},[167,73767,282],{"class":173},[167,73769,36],{"class":177},[167,73771,185],{"class":173},[15,73773,73774],{},"This can break row state when reordering or inserting elements.",[5367,73776,73777],{},[15,73778,73779,73780,73782],{},"Use a stable key (",[87,73781,44230],{},") whenever possible.",[3087,73784,73786,73787,57920,73789,73791],{"id":73785},"_2-mixing-v-if-and-v-for-on-the-same-node","2) Mixing ",[87,73788,13496],{},[87,73790,30726],{}," on the same node",[154,73793,73795],{"className":156,"code":45885,"filename":63112,"highlights":73794,"language":162,"meta":163,"style":163},[170],[87,73796,73797,73842,73846],{"__ignoreMap":163},[167,73798,73800,73802,73804,73806,73808,73810,73812,73814,73816,73818,73820,73822,73824,73826,73828,73830,73832,73834,73836,73838,73840],{"class":73799,"line":170},[169,213],[167,73801,174],{"class":173},[167,73803,36],{"class":177},[167,73805,18706],{"class":191},[167,73807,267],{"class":173},[167,73809,5080],{"class":201},[167,73811,45904],{"class":173},[167,73813,44215],{"class":191},[167,73815,16954],{"class":173},[167,73817,5080],{"class":201},[167,73819,5694],{"class":191},[167,73821,267],{"class":173},[167,73823,5080],{"class":201},[167,73825,45919],{"class":173},[167,73827,5080],{"class":201},[167,73829,5312],{"class":173},[167,73831,7845],{"class":181},[167,73833,267],{"class":173},[167,73835,5080],{"class":201},[167,73837,5190],{"class":173},[167,73839,5080],{"class":201},[167,73841,185],{"class":173},[167,73843,73844],{"class":169,"line":188},[167,73845,45940],{"class":173},[167,73847,73848,73850,73852],{"class":169,"line":205},[167,73849,282],{"class":173},[167,73851,36],{"class":177},[167,73853,185],{"class":173},[5367,73855,73856],{},[15,73857,73858,73859,73861],{},"Build a filtered ",[87,73860,1661],{}," list and iterate over that.",[3087,73863,73865,73866,73868],{"id":73864},"_3-mutating-a-derived-computed-result-directly","3) Mutating a derived ",[87,73867,1661],{}," result directly",[15,73870,73871],{},"If you derive a sorted\u002Ffiltered list, do not mutate it directly.\nYour source of truth should remain the original state.",[3087,73873,73875,73876,73878],{"id":73874},"_4-duplicate-key-values","4) Duplicate ",[87,73877,7845],{}," values",[15,73880,73881],{},"If two elements share the same key, Vue cannot diff the list correctly.\nResult: inconsistent rendering and hard-to-debug UI behavior.",[22,73883,73885],{"id":73884},"quick-best-practices","Quick best practices",[33,73887,73888,73893,73898,73901,73907],{},[36,73889,73890,73891,1679],{},"Use stable ids for ",[87,73892,42780],{},[36,73894,73895,73896,1679],{},"Prefilter and sort using ",[87,73897,1661],{},[36,73899,73900],{},"Keep complex logic out of templates.",[36,73902,73903,73904,73906],{},"Keep ",[87,73905,30726],{}," blocks small and readable.",[36,73908,73909],{},"For very large lists, consider pagination or virtualization.",[22,73911,73913],{"id":73912},"conclusion","Conclusion",[15,73915,73916,73918],{},[87,73917,30726],{}," is not just about \"painting arrays\".\nIt is a core part of declarative rendering in Vue.",[15,73920,73921],{},"If you apply these rules:",[33,73923,73924,73929,73934],{},[36,73925,73926,73927],{},"Stable ",[87,73928,7845],{},[36,73930,73931,73932],{},"Derived lists with ",[87,73933,1661],{},[36,73935,73936],{},"Clean template structure",[15,73938,73939],{},"You will build components that are more predictable, performant, and easier to maintain.",[924,73941,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":73943},[73944,73945,73947,73948,73949,73950,73958,73965,73976,73977],{"id":62809,"depth":188,"text":62810},{"id":70845,"depth":188,"text":73946},"When to use v-for",{"id":62979,"depth":188,"text":62980},{"id":70897,"depth":188,"text":70898},{"id":71137,"depth":188,"text":71138},{"id":71551,"depth":188,"text":73951,"children":73952},"Intermediate level: index, objects, and template v-for",[73953,73955,73956],{"id":71557,"depth":205,"text":73954},"1) Index in v-for",{"id":71802,"depth":205,"text":71803},{"id":72070,"depth":205,"text":73957},"3) Repeating multiple nodes with template",{"id":72448,"depth":188,"text":72449,"children":73959},[73960,73962,73964],{"id":72452,"depth":205,"text":73961},"1) Prefilter and sort with computed",{"id":72980,"depth":205,"text":73963},"2) Rendering components with v-for",{"id":73286,"depth":205,"text":73287},{"id":73707,"depth":188,"text":73966,"children":73967},"Common v-for mistakes",[73968,73970,73972,73974],{"id":73714,"depth":205,"text":73969},"1) Using index as key in mutable lists",{"id":73785,"depth":205,"text":73971},"2) Mixing v-if and v-for on the same node",{"id":73864,"depth":205,"text":73973},"3) Mutating a derived computed result directly",{"id":73874,"depth":205,"text":73975},"4) Duplicate key values",{"id":73884,"depth":188,"text":73885},{"id":73912,"depth":188,"text":73913},"Temporary cover image for the Vue v-for article","Learn to master v-for in Vue with practical examples from basics to advanced patterns, proper key usage, common mistakes, and best practices in Composition API and Options API.",{"updatedAt":46079,"coverCaption":65655,"author":946,"keywords":73981},[3258,30726,73982,7845,3260,3973,73983],"lists","rendering","\u002Fblog\u002Fdirectives-vue-v-for-guide.en",[73986],{"headline":73987,"author":73988,"datePublished":46079,"@type":961},"Vue Directive v-for: complete guide from basic to advanced",{"name":946,"@type":959},{"title":70774,"description":73979},"blog\u002Fdirectives-vue-v-for-guide.en",[73992,73993,73995,73996],{"tag":60263,"color":26467},{"tag":73994,"color":3270},"Lists",{"tag":27757,"color":27758},{"tag":65670,"color":5425},"UFj_zyUjat0RaIxcb3eGzm3JGeelMhT3VErvynARU6U",{"id":42750,"title":42751,"body":73999,"cover":46074,"coverAlt":46075,"date":46076,"description":46077,"draft":940,"extension":941,"lab":942,"locale":943,"meta":77092,"navigation":208,"path":46082,"schemaOrg":77094,"seo":77097,"series":26460,"seriesDescription":26461,"seriesOrder":205,"seriesTitle":26462,"slug":942,"stem":46088,"tags":77098,"__hash__":46095},{"type":8,"value":74000,"toc":77067},[74001,74005,74009,74011,74021,74023,74025,74027,74039,74043,74051,74055,74057,74065,74067,74071,74089,74091,74205,74327,74329,74331,74528,74733,74737,74741,74743,74857,74979,74981,75109,75245,75249,75429,75617,75619,75623,75629,75883,76143,76147,76289,76447,76449,76652,76863,76867,76873,76925,76927,76933,76939,77001,77007,77011,77013,77017,77021,77023,77043,77045,77049,77051,77063,77065],[11,74002,42757,74003,42760],{"id":42756},[87,74004,30726],{},[15,74006,74007,42765],{},[87,74008,30726],{},[15,74010,42768],{},[33,74012,74013,74017],{},[36,74014,74015,42775],{},[87,74016,30726],{},[36,74018,74019,42781],{},[87,74020,42780],{},[15,74022,42784],{},[22,74024,26503],{"id":26502},[15,74026,42789],{},[33,74028,74029,74031,74033,74035,74037],{},[36,74030,42794],{},[36,74032,42797],{},[36,74034,42800],{},[36,74036,42803],{},[36,74038,42806],{},[15,74040,42809,74041,42812],{},[87,74042,7845],{},[33,74044,74045,74047,74049],{},[36,74046,42817],{},[36,74048,42820],{},[36,74050,42823],{},[22,74052,42827,74053],{"id":42826},[87,74054,30726],{},[15,74056,42832],{},[33,74058,74059,74061,74063],{},[36,74060,42837],{},[36,74062,42840],{},[36,74064,42843],{},[22,74066,6349],{"id":6348},[15,74068,42848,74069,42851],{},[87,74070,30726],{},[33,74072,74073,74075,74083],{},[36,74074,42856],{},[36,74076,42859,74077,1028,74079,42864,74081],{},[87,74078,13496],{},[87,74080,30726],{},[87,74082,1661],{},[36,74084,3180,74085,42872,74087,42875],{},[87,74086,42871],{},[87,74088,7845],{},[22,74090,42879],{"id":42878},[154,74092,74094],{"className":156,"code":42882,"filename":3260,"highlights":74093,"language":162,"meta":163,"style":163},[273],[87,74095,74096,74106,74116,74120,74144,74152,74156,74164,74185,74189,74197],{"__ignoreMap":163},[167,74097,74098,74100,74102,74104],{"class":169,"line":170},[167,74099,174],{"class":173},[167,74101,178],{"class":177},[167,74103,182],{"class":181},[167,74105,185],{"class":173},[167,74107,74108,74110,74112,74114],{"class":169,"line":188},[167,74109,192],{"class":191},[167,74111,195],{"class":173},[167,74113,198],{"class":191},[167,74115,202],{"class":201},[167,74117,74118],{"class":169,"line":205},[167,74119,209],{"emptyLinePlaceholder":208},[167,74121,74122,74124,74126,74128,74130,74132,74134,74136,74138,74140,74142],{"class":169,"line":160},[167,74123,216],{"class":191},[167,74125,42916],{"class":219},[167,74127,223],{"class":191},[167,74129,226],{"class":181},[167,74131,423],{"class":173},[167,74133,42925],{"class":201},[167,74135,1025],{"class":173},[167,74137,42930],{"class":201},[167,74139,1025],{"class":173},[167,74141,42935],{"class":201},[167,74143,429],{"class":173},[167,74145,74146,74148,74150],{"class":169,"line":238},[167,74147,282],{"class":173},[167,74149,178],{"class":177},[167,74151,185],{"class":173},[167,74153,74154],{"class":169,"line":243},[167,74155,209],{"emptyLinePlaceholder":208},[167,74157,74158,74160,74162],{"class":169,"line":261},[167,74159,174],{"class":173},[167,74161,299],{"class":177},[167,74163,185],{"class":173},[167,74165,74167,74169,74171,74173,74175,74177,74179,74181,74183],{"class":74166,"line":273},[169,213],[167,74168,307],{"class":173},[167,74170,36],{"class":177},[167,74172,18706],{"class":181},[167,74174,267],{"class":173},[167,74176,42971],{"class":201},[167,74178,10307],{"class":181},[167,74180,267],{"class":173},[167,74182,42978],{"class":201},[167,74184,185],{"class":173},[167,74186,74187],{"class":169,"line":279},[167,74188,42985],{"class":173},[167,74190,74191,74193,74195],{"class":169,"line":289},[167,74192,504],{"class":173},[167,74194,36],{"class":177},[167,74196,185],{"class":173},[167,74198,74199,74201,74203],{"class":169,"line":294},[167,74200,282],{"class":173},[167,74202,299],{"class":177},[167,74204,185],{"class":173},[154,74206,74208],{"className":156,"code":43004,"filename":3973,"highlights":74207,"language":162,"meta":163,"style":163},[304],[87,74209,74210,74218,74226,74232,74238,74254,74258,74262,74266,74274,74278,74286,74307,74311,74319],{"__ignoreMap":163},[167,74211,74212,74214,74216],{"class":169,"line":170},[167,74213,174],{"class":173},[167,74215,178],{"class":177},[167,74217,185],{"class":173},[167,74219,74220,74222,74224],{"class":169,"line":188},[167,74221,608],{"class":191},[167,74223,3991],{"class":191},[167,74225,1905],{"class":173},[167,74227,74228,74230],{"class":169,"line":205},[167,74229,7176],{"class":181},[167,74231,763],{"class":173},[167,74233,74234,74236],{"class":169,"line":160},[167,74235,1937],{"class":191},[167,74237,1905],{"class":173},[167,74239,74240,74242,74244,74246,74248,74250,74252],{"class":169,"line":238},[167,74241,43040],{"class":173},[167,74243,42925],{"class":201},[167,74245,1025],{"class":173},[167,74247,42930],{"class":201},[167,74249,1025],{"class":173},[167,74251,42935],{"class":201},[167,74253,43053],{"class":173},[167,74255,74256],{"class":169,"line":243},[167,74257,4049],{"class":173},[167,74259,74260],{"class":169,"line":261},[167,74261,3492],{"class":173},[167,74263,74264],{"class":169,"line":273},[167,74265,276],{"class":173},[167,74267,74268,74270,74272],{"class":169,"line":279},[167,74269,282],{"class":173},[167,74271,178],{"class":177},[167,74273,185],{"class":173},[167,74275,74276],{"class":169,"line":289},[167,74277,209],{"emptyLinePlaceholder":208},[167,74279,74280,74282,74284],{"class":169,"line":294},[167,74281,174],{"class":173},[167,74283,299],{"class":177},[167,74285,185],{"class":173},[167,74287,74289,74291,74293,74295,74297,74299,74301,74303,74305],{"class":74288,"line":304},[169,213],[167,74290,307],{"class":173},[167,74292,36],{"class":177},[167,74294,18706],{"class":181},[167,74296,267],{"class":173},[167,74298,42971],{"class":201},[167,74300,10307],{"class":181},[167,74302,267],{"class":173},[167,74304,42978],{"class":201},[167,74306,185],{"class":173},[167,74308,74309],{"class":169,"line":313},[167,74310,42985],{"class":173},[167,74312,74313,74315,74317],{"class":169,"line":161},[167,74314,504],{"class":173},[167,74316,36],{"class":177},[167,74318,185],{"class":173},[167,74320,74321,74323,74325],{"class":169,"line":335},[167,74322,282],{"class":173},[167,74324,299],{"class":177},[167,74326,185],{"class":173},[22,74328,43130],{"id":43129},[15,74330,43133],{},[154,74332,74334],{"className":156,"code":43136,"filename":3260,"highlights":74333,"language":162,"meta":163,"style":163},[160,238,243,261,273,313],[87,74335,74336,74346,74356,74360,74373,74390,74407,74424,74429,74437,74441,74449,74457,74478,74492,74496,74504,74512,74520],{"__ignoreMap":163},[167,74337,74338,74340,74342,74344],{"class":169,"line":170},[167,74339,174],{"class":173},[167,74341,178],{"class":177},[167,74343,182],{"class":181},[167,74345,185],{"class":173},[167,74347,74348,74350,74352,74354],{"class":169,"line":188},[167,74349,192],{"class":191},[167,74351,195],{"class":173},[167,74353,198],{"class":191},[167,74355,202],{"class":201},[167,74357,74358],{"class":169,"line":205},[167,74359,209],{"emptyLinePlaceholder":208},[167,74361,74363,74365,74367,74369,74371],{"class":74362,"line":160},[169,213],[167,74364,216],{"class":191},[167,74366,43171],{"class":219},[167,74368,223],{"class":191},[167,74370,226],{"class":181},[167,74372,1827],{"class":173},[167,74374,74376,74378,74380,74382,74384,74386,74388],{"class":74375,"line":238},[169,213],[167,74377,1832],{"class":173},[167,74379,1835],{"class":219},[167,74381,15633],{"class":173},[167,74383,43189],{"class":201},[167,74385,8164],{"class":173},[167,74387,390],{"class":219},[167,74389,1856],{"class":173},[167,74391,74393,74395,74397,74399,74401,74403,74405],{"class":74392,"line":243},[169,213],[167,74394,1832],{"class":173},[167,74396,1853],{"class":219},[167,74398,15633],{"class":173},[167,74400,43207],{"class":201},[167,74402,8164],{"class":173},[167,74404,3392],{"class":219},[167,74406,1856],{"class":173},[167,74408,74410,74412,74414,74416,74418,74420,74422],{"class":74409,"line":261},[169,213],[167,74411,1832],{"class":173},[167,74413,8203],{"class":219},[167,74415,15633],{"class":173},[167,74417,43225],{"class":201},[167,74419,8164],{"class":173},[167,74421,3392],{"class":219},[167,74423,599],{"class":173},[167,74425,74427],{"class":74426,"line":273},[169,213],[167,74428,429],{"class":173},[167,74430,74431,74433,74435],{"class":169,"line":279},[167,74432,282],{"class":173},[167,74434,178],{"class":177},[167,74436,185],{"class":173},[167,74438,74439],{"class":169,"line":289},[167,74440,209],{"emptyLinePlaceholder":208},[167,74442,74443,74445,74447],{"class":169,"line":294},[167,74444,174],{"class":173},[167,74446,299],{"class":177},[167,74448,185],{"class":173},[167,74450,74451,74453,74455],{"class":169,"line":304},[167,74452,307],{"class":173},[167,74454,33],{"class":177},[167,74456,185],{"class":173},[167,74458,74460,74462,74464,74466,74468,74470,74472,74474,74476],{"class":74459,"line":313},[169,213],[167,74461,1257],{"class":173},[167,74463,36],{"class":177},[167,74465,18706],{"class":181},[167,74467,267],{"class":173},[167,74469,43278],{"class":201},[167,74471,10307],{"class":181},[167,74473,267],{"class":173},[167,74475,43285],{"class":201},[167,74477,185],{"class":173},[167,74479,74480,74482,74484,74486,74488,74490],{"class":169,"line":161},[167,74481,1268],{"class":173},[167,74483,167],{"class":177},[167,74485,39102],{"class":181},[167,74487,267],{"class":173},[167,74489,43300],{"class":201},[167,74491,185],{"class":173},[167,74493,74494],{"class":169,"line":335},[167,74495,43307],{"class":173},[167,74497,74498,74500,74502],{"class":169,"line":341},[167,74499,10170],{"class":173},[167,74501,167],{"class":177},[167,74503,185],{"class":173},[167,74505,74506,74508,74510],{"class":169,"line":489},[167,74507,1292],{"class":173},[167,74509,36],{"class":177},[167,74511,185],{"class":173},[167,74513,74514,74516,74518],{"class":169,"line":495},[167,74515,504],{"class":173},[167,74517,33],{"class":177},[167,74519,185],{"class":173},[167,74521,74522,74524,74526],{"class":169,"line":501},[167,74523,282],{"class":173},[167,74525,299],{"class":177},[167,74527,185],{"class":173},[154,74529,74531],{"className":156,"code":43342,"filename":3973,"highlights":74530,"language":162,"meta":163,"style":163},[238,243,261,273,279,489],[87,74532,74533,74541,74549,74555,74561,74566,74583,74600,74617,74622,74626,74630,74634,74642,74646,74654,74662,74683,74697,74701,74709,74717,74725],{"__ignoreMap":163},[167,74534,74535,74537,74539],{"class":169,"line":170},[167,74536,174],{"class":173},[167,74538,178],{"class":177},[167,74540,185],{"class":173},[167,74542,74543,74545,74547],{"class":169,"line":188},[167,74544,608],{"class":191},[167,74546,3991],{"class":191},[167,74548,1905],{"class":173},[167,74550,74551,74553],{"class":169,"line":205},[167,74552,7176],{"class":181},[167,74554,763],{"class":173},[167,74556,74557,74559],{"class":169,"line":160},[167,74558,1937],{"class":191},[167,74560,1905],{"class":173},[167,74562,74564],{"class":74563,"line":238},[169,213],[167,74565,43379],{"class":173},[167,74567,74569,74571,74573,74575,74577,74579,74581],{"class":74568,"line":243},[169,213],[167,74570,8677],{"class":173},[167,74572,1835],{"class":219},[167,74574,15633],{"class":173},[167,74576,43189],{"class":201},[167,74578,8164],{"class":173},[167,74580,390],{"class":219},[167,74582,1856],{"class":173},[167,74584,74586,74588,74590,74592,74594,74596,74598],{"class":74585,"line":261},[169,213],[167,74587,8677],{"class":173},[167,74589,1853],{"class":219},[167,74591,15633],{"class":173},[167,74593,43207],{"class":201},[167,74595,8164],{"class":173},[167,74597,3392],{"class":219},[167,74599,1856],{"class":173},[167,74601,74603,74605,74607,74609,74611,74613,74615],{"class":74602,"line":273},[169,213],[167,74604,8677],{"class":173},[167,74606,8203],{"class":219},[167,74608,15633],{"class":173},[167,74610,43225],{"class":201},[167,74612,8164],{"class":173},[167,74614,3392],{"class":219},[167,74616,599],{"class":173},[167,74618,74620],{"class":74619,"line":279},[169,213],[167,74621,8738],{"class":173},[167,74623,74624],{"class":169,"line":289},[167,74625,4049],{"class":173},[167,74627,74628],{"class":169,"line":294},[167,74629,3492],{"class":173},[167,74631,74632],{"class":169,"line":304},[167,74633,276],{"class":173},[167,74635,74636,74638,74640],{"class":169,"line":313},[167,74637,282],{"class":173},[167,74639,178],{"class":177},[167,74641,185],{"class":173},[167,74643,74644],{"class":169,"line":161},[167,74645,209],{"emptyLinePlaceholder":208},[167,74647,74648,74650,74652],{"class":169,"line":335},[167,74649,174],{"class":173},[167,74651,299],{"class":177},[167,74653,185],{"class":173},[167,74655,74656,74658,74660],{"class":169,"line":341},[167,74657,307],{"class":173},[167,74659,33],{"class":177},[167,74661,185],{"class":173},[167,74663,74665,74667,74669,74671,74673,74675,74677,74679,74681],{"class":74664,"line":489},[169,213],[167,74666,1257],{"class":173},[167,74668,36],{"class":177},[167,74670,18706],{"class":181},[167,74672,267],{"class":173},[167,74674,43278],{"class":201},[167,74676,10307],{"class":181},[167,74678,267],{"class":173},[167,74680,43285],{"class":201},[167,74682,185],{"class":173},[167,74684,74685,74687,74689,74691,74693,74695],{"class":169,"line":495},[167,74686,1268],{"class":173},[167,74688,167],{"class":177},[167,74690,39102],{"class":181},[167,74692,267],{"class":173},[167,74694,43300],{"class":201},[167,74696,185],{"class":173},[167,74698,74699],{"class":169,"line":501},[167,74700,43307],{"class":173},[167,74702,74703,74705,74707],{"class":169,"line":512},[167,74704,10170],{"class":173},[167,74706,167],{"class":177},[167,74708,185],{"class":173},[167,74710,74711,74713,74715],{"class":169,"line":781},[167,74712,1292],{"class":173},[167,74714,36],{"class":177},[167,74716,185],{"class":173},[167,74718,74719,74721,74723],{"class":169,"line":786},[167,74720,504],{"class":173},[167,74722,33],{"class":177},[167,74724,185],{"class":173},[167,74726,74727,74729,74731],{"class":169,"line":2678},[167,74728,282],{"class":173},[167,74730,299],{"class":177},[167,74732,185],{"class":173},[22,74734,43550,74735],{"id":43549},[87,74736,43553],{},[3087,74738,43557,74739],{"id":43556},[87,74740,30726],{},[15,74742,43562],{},[154,74744,74746],{"className":156,"code":43565,"filename":3260,"highlights":74745,"language":162,"meta":163,"style":163},[273],[87,74747,74748,74758,74768,74772,74796,74804,74808,74816,74837,74841,74849],{"__ignoreMap":163},[167,74749,74750,74752,74754,74756],{"class":169,"line":170},[167,74751,174],{"class":173},[167,74753,178],{"class":177},[167,74755,182],{"class":181},[167,74757,185],{"class":173},[167,74759,74760,74762,74764,74766],{"class":169,"line":188},[167,74761,192],{"class":191},[167,74763,195],{"class":173},[167,74765,198],{"class":191},[167,74767,202],{"class":201},[167,74769,74770],{"class":169,"line":205},[167,74771,209],{"emptyLinePlaceholder":208},[167,74773,74774,74776,74778,74780,74782,74784,74786,74788,74790,74792,74794],{"class":169,"line":160},[167,74775,216],{"class":191},[167,74777,16954],{"class":219},[167,74779,223],{"class":191},[167,74781,226],{"class":181},[167,74783,423],{"class":173},[167,74785,8172],{"class":201},[167,74787,1025],{"class":173},[167,74789,8194],{"class":201},[167,74791,1025],{"class":173},[167,74793,43615],{"class":201},[167,74795,429],{"class":173},[167,74797,74798,74800,74802],{"class":169,"line":238},[167,74799,282],{"class":173},[167,74801,178],{"class":177},[167,74803,185],{"class":173},[167,74805,74806],{"class":169,"line":243},[167,74807,209],{"emptyLinePlaceholder":208},[167,74809,74810,74812,74814],{"class":169,"line":261},[167,74811,174],{"class":173},[167,74813,299],{"class":177},[167,74815,185],{"class":173},[167,74817,74819,74821,74823,74825,74827,74829,74831,74833,74835],{"class":74818,"line":273},[169,213],[167,74820,307],{"class":173},[167,74822,15],{"class":177},[167,74824,18706],{"class":181},[167,74826,267],{"class":173},[167,74828,43651],{"class":201},[167,74830,10307],{"class":181},[167,74832,267],{"class":173},[167,74834,27391],{"class":201},[167,74836,185],{"class":173},[167,74838,74839],{"class":169,"line":279},[167,74840,43664],{"class":173},[167,74842,74843,74845,74847],{"class":169,"line":289},[167,74844,504],{"class":173},[167,74846,15],{"class":177},[167,74848,185],{"class":173},[167,74850,74851,74853,74855],{"class":169,"line":294},[167,74852,282],{"class":173},[167,74854,299],{"class":177},[167,74856,185],{"class":173},[154,74858,74860],{"className":156,"code":43683,"filename":3973,"highlights":74859,"language":162,"meta":163,"style":163},[304],[87,74861,74862,74870,74878,74884,74890,74906,74910,74914,74918,74926,74930,74938,74959,74963,74971],{"__ignoreMap":163},[167,74863,74864,74866,74868],{"class":169,"line":170},[167,74865,174],{"class":173},[167,74867,178],{"class":177},[167,74869,185],{"class":173},[167,74871,74872,74874,74876],{"class":169,"line":188},[167,74873,608],{"class":191},[167,74875,3991],{"class":191},[167,74877,1905],{"class":173},[167,74879,74880,74882],{"class":169,"line":205},[167,74881,7176],{"class":181},[167,74883,763],{"class":173},[167,74885,74886,74888],{"class":169,"line":160},[167,74887,1937],{"class":191},[167,74889,1905],{"class":173},[167,74891,74892,74894,74896,74898,74900,74902,74904],{"class":169,"line":238},[167,74893,43719],{"class":173},[167,74895,8172],{"class":201},[167,74897,1025],{"class":173},[167,74899,8194],{"class":201},[167,74901,1025],{"class":173},[167,74903,43615],{"class":201},[167,74905,43053],{"class":173},[167,74907,74908],{"class":169,"line":243},[167,74909,4049],{"class":173},[167,74911,74912],{"class":169,"line":261},[167,74913,3492],{"class":173},[167,74915,74916],{"class":169,"line":273},[167,74917,276],{"class":173},[167,74919,74920,74922,74924],{"class":169,"line":279},[167,74921,282],{"class":173},[167,74923,178],{"class":177},[167,74925,185],{"class":173},[167,74927,74928],{"class":169,"line":289},[167,74929,209],{"emptyLinePlaceholder":208},[167,74931,74932,74934,74936],{"class":169,"line":294},[167,74933,174],{"class":173},[167,74935,299],{"class":177},[167,74937,185],{"class":173},[167,74939,74941,74943,74945,74947,74949,74951,74953,74955,74957],{"class":74940,"line":304},[169,213],[167,74942,307],{"class":173},[167,74944,15],{"class":177},[167,74946,18706],{"class":181},[167,74948,267],{"class":173},[167,74950,43651],{"class":201},[167,74952,10307],{"class":181},[167,74954,267],{"class":173},[167,74956,27391],{"class":201},[167,74958,185],{"class":173},[167,74960,74961],{"class":169,"line":313},[167,74962,43664],{"class":173},[167,74964,74965,74967,74969],{"class":169,"line":161},[167,74966,504],{"class":173},[167,74968,15],{"class":177},[167,74970,185],{"class":173},[167,74972,74973,74975,74977],{"class":169,"line":335},[167,74974,282],{"class":173},[167,74976,299],{"class":177},[167,74978,185],{"class":173},[3087,74980,43808],{"id":43807},[154,74982,74984],{"className":156,"code":43811,"filename":3260,"highlights":74983,"language":162,"meta":163,"style":163},[304],[87,74985,74986,74996,75006,75010,75022,75030,75038,75044,75048,75056,75060,75068,75089,75093,75101],{"__ignoreMap":163},[167,74987,74988,74990,74992,74994],{"class":169,"line":170},[167,74989,174],{"class":173},[167,74991,178],{"class":177},[167,74993,182],{"class":181},[167,74995,185],{"class":173},[167,74997,74998,75000,75002,75004],{"class":169,"line":188},[167,74999,192],{"class":191},[167,75001,195],{"class":173},[167,75003,198],{"class":191},[167,75005,202],{"class":201},[167,75007,75008],{"class":169,"line":205},[167,75009,209],{"emptyLinePlaceholder":208},[167,75011,75012,75014,75016,75018,75020],{"class":169,"line":160},[167,75013,216],{"class":191},[167,75015,43845],{"class":219},[167,75017,223],{"class":191},[167,75019,226],{"class":181},[167,75021,372],{"class":173},[167,75023,75024,75026,75028],{"class":169,"line":238},[167,75025,4398],{"class":173},[167,75027,43858],{"class":201},[167,75029,393],{"class":173},[167,75031,75032,75034,75036],{"class":169,"line":243},[167,75033,43865],{"class":173},[167,75035,43868],{"class":201},[167,75037,393],{"class":173},[167,75039,75040,75042],{"class":169,"line":261},[167,75041,43875],{"class":173},[167,75043,43878],{"class":201},[167,75045,75046],{"class":169,"line":273},[167,75047,403],{"class":173},[167,75049,75050,75052,75054],{"class":169,"line":279},[167,75051,282],{"class":173},[167,75053,178],{"class":177},[167,75055,185],{"class":173},[167,75057,75058],{"class":169,"line":289},[167,75059,209],{"emptyLinePlaceholder":208},[167,75061,75062,75064,75066],{"class":169,"line":294},[167,75063,174],{"class":173},[167,75065,299],{"class":177},[167,75067,185],{"class":173},[167,75069,75071,75073,75075,75077,75079,75081,75083,75085,75087],{"class":75070,"line":304},[169,213],[167,75072,307],{"class":173},[167,75074,36],{"class":177},[167,75076,18706],{"class":181},[167,75078,267],{"class":173},[167,75080,43916],{"class":201},[167,75082,10307],{"class":181},[167,75084,267],{"class":173},[167,75086,43923],{"class":201},[167,75088,185],{"class":173},[167,75090,75091],{"class":169,"line":313},[167,75092,43930],{"class":173},[167,75094,75095,75097,75099],{"class":169,"line":161},[167,75096,504],{"class":173},[167,75098,36],{"class":177},[167,75100,185],{"class":173},[167,75102,75103,75105,75107],{"class":169,"line":335},[167,75104,282],{"class":173},[167,75106,299],{"class":177},[167,75108,185],{"class":173},[154,75110,75112],{"className":156,"code":43949,"filename":3973,"highlights":75111,"language":162,"meta":163,"style":163},[341],[87,75113,75114,75122,75130,75136,75142,75146,75154,75162,75168,75172,75176,75180,75184,75192,75196,75204,75225,75229,75237],{"__ignoreMap":163},[167,75115,75116,75118,75120],{"class":169,"line":170},[167,75117,174],{"class":173},[167,75119,178],{"class":177},[167,75121,185],{"class":173},[167,75123,75124,75126,75128],{"class":169,"line":188},[167,75125,608],{"class":191},[167,75127,3991],{"class":191},[167,75129,1905],{"class":173},[167,75131,75132,75134],{"class":169,"line":205},[167,75133,7176],{"class":181},[167,75135,763],{"class":173},[167,75137,75138,75140],{"class":169,"line":160},[167,75139,1937],{"class":191},[167,75141,1905],{"class":173},[167,75143,75144],{"class":169,"line":238},[167,75145,43985],{"class":173},[167,75147,75148,75150,75152],{"class":169,"line":243},[167,75149,43990],{"class":173},[167,75151,43858],{"class":201},[167,75153,393],{"class":173},[167,75155,75156,75158,75160],{"class":169,"line":261},[167,75157,43999],{"class":173},[167,75159,43868],{"class":201},[167,75161,393],{"class":173},[167,75163,75164,75166],{"class":169,"line":273},[167,75165,44008],{"class":173},[167,75167,43878],{"class":201},[167,75169,75170],{"class":169,"line":279},[167,75171,7287],{"class":173},[167,75173,75174],{"class":169,"line":289},[167,75175,4049],{"class":173},[167,75177,75178],{"class":169,"line":294},[167,75179,3492],{"class":173},[167,75181,75182],{"class":169,"line":304},[167,75183,276],{"class":173},[167,75185,75186,75188,75190],{"class":169,"line":313},[167,75187,282],{"class":173},[167,75189,178],{"class":177},[167,75191,185],{"class":173},[167,75193,75194],{"class":169,"line":161},[167,75195,209],{"emptyLinePlaceholder":208},[167,75197,75198,75200,75202],{"class":169,"line":335},[167,75199,174],{"class":173},[167,75201,299],{"class":177},[167,75203,185],{"class":173},[167,75205,75207,75209,75211,75213,75215,75217,75219,75221,75223],{"class":75206,"line":341},[169,213],[167,75208,307],{"class":173},[167,75210,36],{"class":177},[167,75212,18706],{"class":181},[167,75214,267],{"class":173},[167,75216,43916],{"class":201},[167,75218,10307],{"class":181},[167,75220,267],{"class":173},[167,75222,43923],{"class":201},[167,75224,185],{"class":173},[167,75226,75227],{"class":169,"line":489},[167,75228,43930],{"class":173},[167,75230,75231,75233,75235],{"class":169,"line":495},[167,75232,504],{"class":173},[167,75234,36],{"class":177},[167,75236,185],{"class":173},[167,75238,75239,75241,75243],{"class":169,"line":501},[167,75240,282],{"class":173},[167,75242,299],{"class":177},[167,75244,185],{"class":173},[3087,75246,44091,75247],{"id":44090},[87,75248,299],{},[154,75250,75252],{"className":156,"code":44096,"filename":3260,"highlights":75251,"language":162,"meta":163,"style":163},[294],[87,75253,75254,75264,75274,75278,75290,75306,75322,75326,75334,75338,75346,75381,75393,75405,75413,75421],{"__ignoreMap":163},[167,75255,75256,75258,75260,75262],{"class":169,"line":170},[167,75257,174],{"class":173},[167,75259,178],{"class":177},[167,75261,182],{"class":181},[167,75263,185],{"class":173},[167,75265,75266,75268,75270,75272],{"class":169,"line":188},[167,75267,192],{"class":191},[167,75269,195],{"class":173},[167,75271,198],{"class":191},[167,75273,202],{"class":201},[167,75275,75276],{"class":169,"line":205},[167,75277,209],{"emptyLinePlaceholder":208},[167,75279,75280,75282,75284,75286,75288],{"class":169,"line":160},[167,75281,216],{"class":191},[167,75283,1820],{"class":219},[167,75285,223],{"class":191},[167,75287,226],{"class":181},[167,75289,1827],{"class":173},[167,75291,75292,75294,75296,75298,75300,75302,75304],{"class":169,"line":238},[167,75293,1832],{"class":173},[167,75295,1835],{"class":219},[167,75297,3383],{"class":173},[167,75299,44146],{"class":201},[167,75301,44149],{"class":173},[167,75303,44152],{"class":201},[167,75305,1856],{"class":173},[167,75307,75308,75310,75312,75314,75316,75318,75320],{"class":169,"line":243},[167,75309,1832],{"class":173},[167,75311,1853],{"class":219},[167,75313,3383],{"class":173},[167,75315,44165],{"class":201},[167,75317,44149],{"class":173},[167,75319,44170],{"class":201},[167,75321,599],{"class":173},[167,75323,75324],{"class":169,"line":261},[167,75325,429],{"class":173},[167,75327,75328,75330,75332],{"class":169,"line":273},[167,75329,282],{"class":173},[167,75331,178],{"class":177},[167,75333,185],{"class":173},[167,75335,75336],{"class":169,"line":279},[167,75337,209],{"emptyLinePlaceholder":208},[167,75339,75340,75342,75344],{"class":169,"line":289},[167,75341,174],{"class":173},[167,75343,299],{"class":177},[167,75345,185],{"class":173},[167,75347,75349,75351,75353,75355,75357,75359,75361,75363,75365,75367,75369,75371,75373,75375,75377,75379],{"class":75348,"line":294},[169,213],[167,75350,307],{"class":173},[167,75352,299],{"class":177},[167,75354,18706],{"class":191},[167,75356,267],{"class":173},[167,75358,5080],{"class":201},[167,75360,44212],{"class":173},[167,75362,44215],{"class":191},[167,75364,1820],{"class":173},[167,75366,5080],{"class":201},[167,75368,5312],{"class":173},[167,75370,7845],{"class":181},[167,75372,267],{"class":173},[167,75374,5080],{"class":201},[167,75376,44230],{"class":173},[167,75378,5080],{"class":201},[167,75380,185],{"class":173},[167,75382,75383,75385,75387,75389,75391],{"class":169,"line":304},[167,75384,1257],{"class":173},[167,75386,3087],{"class":177},[167,75388,44243],{"class":173},[167,75390,3087],{"class":177},[167,75392,185],{"class":173},[167,75394,75395,75397,75399,75401,75403],{"class":169,"line":313},[167,75396,1257],{"class":173},[167,75398,15],{"class":177},[167,75400,44256],{"class":173},[167,75402,15],{"class":177},[167,75404,185],{"class":173},[167,75406,75407,75409,75411],{"class":169,"line":161},[167,75408,1257],{"class":173},[167,75410,44267],{"class":177},[167,75412,5325],{"class":173},[167,75414,75415,75417,75419],{"class":169,"line":335},[167,75416,504],{"class":173},[167,75418,299],{"class":177},[167,75420,185],{"class":173},[167,75422,75423,75425,75427],{"class":169,"line":341},[167,75424,282],{"class":173},[167,75426,299],{"class":177},[167,75428,185],{"class":173},[154,75430,75432],{"className":156,"code":44288,"filename":3973,"highlights":75431,"language":162,"meta":163,"style":163},[335],[87,75433,75434,75442,75450,75456,75462,75466,75482,75498,75502,75506,75510,75514,75522,75526,75534,75569,75581,75593,75601,75609],{"__ignoreMap":163},[167,75435,75436,75438,75440],{"class":169,"line":170},[167,75437,174],{"class":173},[167,75439,178],{"class":177},[167,75441,185],{"class":173},[167,75443,75444,75446,75448],{"class":169,"line":188},[167,75445,608],{"class":191},[167,75447,3991],{"class":191},[167,75449,1905],{"class":173},[167,75451,75452,75454],{"class":169,"line":205},[167,75453,7176],{"class":181},[167,75455,763],{"class":173},[167,75457,75458,75460],{"class":169,"line":160},[167,75459,1937],{"class":191},[167,75461,1905],{"class":173},[167,75463,75464],{"class":169,"line":238},[167,75465,44324],{"class":173},[167,75467,75468,75470,75472,75474,75476,75478,75480],{"class":169,"line":243},[167,75469,8677],{"class":173},[167,75471,1835],{"class":219},[167,75473,3383],{"class":173},[167,75475,44146],{"class":201},[167,75477,44149],{"class":173},[167,75479,44152],{"class":201},[167,75481,1856],{"class":173},[167,75483,75484,75486,75488,75490,75492,75494,75496],{"class":169,"line":261},[167,75485,8677],{"class":173},[167,75487,1853],{"class":219},[167,75489,3383],{"class":173},[167,75491,44165],{"class":201},[167,75493,44149],{"class":173},[167,75495,44170],{"class":201},[167,75497,599],{"class":173},[167,75499,75500],{"class":169,"line":273},[167,75501,8738],{"class":173},[167,75503,75504],{"class":169,"line":279},[167,75505,4049],{"class":173},[167,75507,75508],{"class":169,"line":289},[167,75509,3492],{"class":173},[167,75511,75512],{"class":169,"line":294},[167,75513,276],{"class":173},[167,75515,75516,75518,75520],{"class":169,"line":304},[167,75517,282],{"class":173},[167,75519,178],{"class":177},[167,75521,185],{"class":173},[167,75523,75524],{"class":169,"line":313},[167,75525,209],{"emptyLinePlaceholder":208},[167,75527,75528,75530,75532],{"class":169,"line":161},[167,75529,174],{"class":173},[167,75531,299],{"class":177},[167,75533,185],{"class":173},[167,75535,75537,75539,75541,75543,75545,75547,75549,75551,75553,75555,75557,75559,75561,75563,75565,75567],{"class":75536,"line":335},[169,213],[167,75538,307],{"class":173},[167,75540,299],{"class":177},[167,75542,18706],{"class":191},[167,75544,267],{"class":173},[167,75546,5080],{"class":201},[167,75548,44212],{"class":173},[167,75550,44215],{"class":191},[167,75552,1820],{"class":173},[167,75554,5080],{"class":201},[167,75556,5312],{"class":173},[167,75558,7845],{"class":181},[167,75560,267],{"class":173},[167,75562,5080],{"class":201},[167,75564,44230],{"class":173},[167,75566,5080],{"class":201},[167,75568,185],{"class":173},[167,75570,75571,75573,75575,75577,75579],{"class":169,"line":341},[167,75572,1257],{"class":173},[167,75574,3087],{"class":177},[167,75576,44243],{"class":173},[167,75578,3087],{"class":177},[167,75580,185],{"class":173},[167,75582,75583,75585,75587,75589,75591],{"class":169,"line":489},[167,75584,1257],{"class":173},[167,75586,15],{"class":177},[167,75588,44256],{"class":173},[167,75590,15],{"class":177},[167,75592,185],{"class":173},[167,75594,75595,75597,75599],{"class":169,"line":495},[167,75596,1257],{"class":173},[167,75598,44267],{"class":177},[167,75600,5325],{"class":173},[167,75602,75603,75605,75607],{"class":169,"line":501},[167,75604,504],{"class":173},[167,75606,299],{"class":177},[167,75608,185],{"class":173},[167,75610,75611,75613,75615],{"class":169,"line":512},[167,75612,282],{"class":173},[167,75614,299],{"class":177},[167,75616,185],{"class":173},[22,75618,44479],{"id":44478},[3087,75620,44483,75621],{"id":44482},[87,75622,1661],{},[15,75624,44488,75625,44491,75627,1679],{},[87,75626,30726],{},[87,75628,1661],{},[154,75630,75632],{"className":156,"code":44496,"filename":3260,"highlights":75631,"language":162,"meta":163,"style":163},[289,294,304,313,161,335,501],[87,75633,75634,75644,75654,75658,75670,75690,75710,75730,75734,75738,75755,75762,75783,75792,75817,75822,75830,75834,75842,75863,75867,75875],{"__ignoreMap":163},[167,75635,75636,75638,75640,75642],{"class":169,"line":170},[167,75637,174],{"class":173},[167,75639,178],{"class":177},[167,75641,182],{"class":181},[167,75643,185],{"class":173},[167,75645,75646,75648,75650,75652],{"class":169,"line":188},[167,75647,192],{"class":191},[167,75649,1805],{"class":173},[167,75651,198],{"class":191},[167,75653,202],{"class":201},[167,75655,75656],{"class":169,"line":205},[167,75657,209],{"emptyLinePlaceholder":208},[167,75659,75660,75662,75664,75666,75668],{"class":169,"line":160},[167,75661,216],{"class":191},[167,75663,35434],{"class":219},[167,75665,223],{"class":191},[167,75667,226],{"class":181},[167,75669,1827],{"class":173},[167,75671,75672,75674,75676,75678,75680,75682,75684,75686,75688],{"class":169,"line":238},[167,75673,1832],{"class":173},[167,75675,1835],{"class":219},[167,75677,1838],{"class":173},[167,75679,44546],{"class":201},[167,75681,1844],{"class":173},[167,75683,44551],{"class":219},[167,75685,35459],{"class":173},[167,75687,44556],{"class":219},[167,75689,1856],{"class":173},[167,75691,75692,75694,75696,75698,75700,75702,75704,75706,75708],{"class":169,"line":243},[167,75693,1832],{"class":173},[167,75695,1853],{"class":219},[167,75697,1838],{"class":173},[167,75699,44569],{"class":201},[167,75701,1844],{"class":173},[167,75703,44574],{"class":219},[167,75705,35459],{"class":173},[167,75707,1960],{"class":219},[167,75709,1856],{"class":173},[167,75711,75712,75714,75716,75718,75720,75722,75724,75726,75728],{"class":169,"line":261},[167,75713,1832],{"class":173},[167,75715,8203],{"class":219},[167,75717,1838],{"class":173},[167,75719,44591],{"class":201},[167,75721,1844],{"class":173},[167,75723,44596],{"class":219},[167,75725,35459],{"class":173},[167,75727,44601],{"class":219},[167,75729,599],{"class":173},[167,75731,75732],{"class":169,"line":273},[167,75733,429],{"class":173},[167,75735,75736],{"class":169,"line":279},[167,75737,209],{"emptyLinePlaceholder":208},[167,75739,75741,75743,75745,75747,75749,75751,75753],{"class":75740,"line":289},[169,213],[167,75742,216],{"class":191},[167,75744,44619],{"class":219},[167,75746,223],{"class":191},[167,75748,1898],{"class":181},[167,75750,1493],{"class":173},[167,75752,639],{"class":191},[167,75754,1905],{"class":173},[167,75756,75758,75760],{"class":75757,"line":294},[169,213],[167,75759,1539],{"class":191},[167,75761,44637],{"class":173},[167,75763,75765,75767,75769,75771,75773,75775,75777,75779,75781],{"class":75764,"line":304},[169,213],[167,75766,44643],{"class":173},[167,75768,8252],{"class":181},[167,75770,229],{"class":173},[167,75772,6968],{"class":254},[167,75774,8259],{"class":191},[167,75776,44654],{"class":173},[167,75778,15863],{"class":191},[167,75780,44659],{"class":219},[167,75782,235],{"class":173},[167,75784,75786,75788,75790],{"class":75785,"line":313},[169,213],[167,75787,44643],{"class":173},[167,75789,44669],{"class":181},[167,75791,2917],{"class":173},[167,75793,75795,75797,75799,75801,75803,75805,75807,75809,75811,75813,75815],{"class":75794,"line":161},[169,213],[167,75796,44643],{"class":173},[167,75798,44679],{"class":181},[167,75800,1918],{"class":173},[167,75802,19092],{"class":254},[167,75804,1025],{"class":173},[167,75806,44688],{"class":254},[167,75808,693],{"class":173},[167,75810,639],{"class":191},[167,75812,44695],{"class":173},[167,75814,44698],{"class":191},[167,75816,44701],{"class":173},[167,75818,75820],{"class":75819,"line":335},[169,213],[167,75821,403],{"class":173},[167,75823,75824,75826,75828],{"class":169,"line":341},[167,75825,282],{"class":173},[167,75827,178],{"class":177},[167,75829,185],{"class":173},[167,75831,75832],{"class":169,"line":489},[167,75833,209],{"emptyLinePlaceholder":208},[167,75835,75836,75838,75840],{"class":169,"line":495},[167,75837,174],{"class":173},[167,75839,299],{"class":177},[167,75841,185],{"class":173},[167,75843,75845,75847,75849,75851,75853,75855,75857,75859,75861],{"class":75844,"line":501},[169,213],[167,75846,307],{"class":173},[167,75848,36],{"class":177},[167,75850,18706],{"class":181},[167,75852,267],{"class":173},[167,75854,44740],{"class":201},[167,75856,10307],{"class":181},[167,75858,267],{"class":173},[167,75860,44747],{"class":201},[167,75862,185],{"class":173},[167,75864,75865],{"class":169,"line":512},[167,75866,44754],{"class":173},[167,75868,75869,75871,75873],{"class":169,"line":781},[167,75870,504],{"class":173},[167,75872,36],{"class":177},[167,75874,185],{"class":173},[167,75876,75877,75879,75881],{"class":169,"line":786},[167,75878,282],{"class":173},[167,75880,299],{"class":177},[167,75882,185],{"class":173},[154,75884,75886],{"className":156,"code":44773,"filename":3973,"highlights":75885,"language":162,"meta":163,"style":163},[304,313,161,335,341,489,495,501,2692],[87,75887,75888,75896,75904,75910,75916,75920,75940,75960,75980,75984,75988,75992,75997,76004,76013,76034,76043,76068,76073,76078,76082,76090,76094,76102,76123,76127,76135],{"__ignoreMap":163},[167,75889,75890,75892,75894],{"class":169,"line":170},[167,75891,174],{"class":173},[167,75893,178],{"class":177},[167,75895,185],{"class":173},[167,75897,75898,75900,75902],{"class":169,"line":188},[167,75899,608],{"class":191},[167,75901,3991],{"class":191},[167,75903,1905],{"class":173},[167,75905,75906,75908],{"class":169,"line":205},[167,75907,7176],{"class":181},[167,75909,763],{"class":173},[167,75911,75912,75914],{"class":169,"line":160},[167,75913,1937],{"class":191},[167,75915,1905],{"class":173},[167,75917,75918],{"class":169,"line":238},[167,75919,36190],{"class":173},[167,75921,75922,75924,75926,75928,75930,75932,75934,75936,75938],{"class":169,"line":243},[167,75923,8677],{"class":173},[167,75925,1835],{"class":219},[167,75927,1838],{"class":173},[167,75929,44546],{"class":201},[167,75931,1844],{"class":173},[167,75933,44551],{"class":219},[167,75935,35459],{"class":173},[167,75937,44556],{"class":219},[167,75939,1856],{"class":173},[167,75941,75942,75944,75946,75948,75950,75952,75954,75956,75958],{"class":169,"line":261},[167,75943,8677],{"class":173},[167,75945,1853],{"class":219},[167,75947,1838],{"class":173},[167,75949,44569],{"class":201},[167,75951,1844],{"class":173},[167,75953,44574],{"class":219},[167,75955,35459],{"class":173},[167,75957,1960],{"class":219},[167,75959,1856],{"class":173},[167,75961,75962,75964,75966,75968,75970,75972,75974,75976,75978],{"class":169,"line":273},[167,75963,8677],{"class":173},[167,75965,8203],{"class":219},[167,75967,1838],{"class":173},[167,75969,44591],{"class":201},[167,75971,1844],{"class":173},[167,75973,44596],{"class":219},[167,75975,35459],{"class":173},[167,75977,44601],{"class":219},[167,75979,599],{"class":173},[167,75981,75982],{"class":169,"line":279},[167,75983,8738],{"class":173},[167,75985,75986],{"class":169,"line":289},[167,75987,4049],{"class":173},[167,75989,75990],{"class":169,"line":294},[167,75991,398],{"class":173},[167,75993,75995],{"class":75994,"line":304},[169,213],[167,75996,8755],{"class":173},[167,75998,76000,76002],{"class":75999,"line":313},[169,213],[167,76001,44891],{"class":181},[167,76003,763],{"class":173},[167,76005,76007,76009,76011],{"class":76006,"line":161},[169,213],[167,76008,8767],{"class":191},[167,76010,7351],{"class":219},[167,76012,44903],{"class":173},[167,76014,76016,76018,76020,76022,76024,76026,76028,76030,76032],{"class":76015,"line":335},[169,213],[167,76017,44909],{"class":173},[167,76019,8252],{"class":181},[167,76021,229],{"class":173},[167,76023,6968],{"class":254},[167,76025,8259],{"class":191},[167,76027,44654],{"class":173},[167,76029,15863],{"class":191},[167,76031,44659],{"class":219},[167,76033,235],{"class":173},[167,76035,76037,76039,76041],{"class":76036,"line":341},[169,213],[167,76038,44909],{"class":173},[167,76040,44669],{"class":181},[167,76042,2917],{"class":173},[167,76044,76046,76048,76050,76052,76054,76056,76058,76060,76062,76064,76066],{"class":76045,"line":489},[169,213],[167,76047,44909],{"class":173},[167,76049,44679],{"class":181},[167,76051,1918],{"class":173},[167,76053,19092],{"class":254},[167,76055,1025],{"class":173},[167,76057,44688],{"class":254},[167,76059,693],{"class":173},[167,76061,639],{"class":191},[167,76063,44695],{"class":173},[167,76065,44698],{"class":191},[167,76067,44701],{"class":173},[167,76069,76071],{"class":76070,"line":495},[169,213],[167,76072,4049],{"class":173},[167,76074,76076],{"class":76075,"line":501},[169,213],[167,76077,3492],{"class":173},[167,76079,76080],{"class":169,"line":512},[167,76081,276],{"class":173},[167,76083,76084,76086,76088],{"class":169,"line":781},[167,76085,282],{"class":173},[167,76087,178],{"class":177},[167,76089,185],{"class":173},[167,76091,76092],{"class":169,"line":786},[167,76093,209],{"emptyLinePlaceholder":208},[167,76095,76096,76098,76100],{"class":169,"line":2678},[167,76097,174],{"class":173},[167,76099,299],{"class":177},[167,76101,185],{"class":173},[167,76103,76105,76107,76109,76111,76113,76115,76117,76119,76121],{"class":76104,"line":2692},[169,213],[167,76106,307],{"class":173},[167,76108,36],{"class":177},[167,76110,18706],{"class":181},[167,76112,267],{"class":173},[167,76114,44740],{"class":201},[167,76116,10307],{"class":181},[167,76118,267],{"class":173},[167,76120,44747],{"class":201},[167,76122,185],{"class":173},[167,76124,76125],{"class":169,"line":3575},[167,76126,44754],{"class":173},[167,76128,76129,76131,76133],{"class":169,"line":5028},[167,76130,504],{"class":173},[167,76132,36],{"class":177},[167,76134,185],{"class":173},[167,76136,76137,76139,76141],{"class":169,"line":5037},[167,76138,282],{"class":173},[167,76140,299],{"class":177},[167,76142,185],{"class":173},[3087,76144,45038,76145],{"id":45037},[87,76146,30726],{},[154,76148,76150],{"className":156,"code":45043,"filename":3260,"highlights":76149,"language":162,"meta":163,"style":163},[304],[87,76151,76152,76162,76172,76182,76186,76198,76214,76230,76234,76242,76246,76254,76281],{"__ignoreMap":163},[167,76153,76154,76156,76158,76160],{"class":169,"line":170},[167,76155,174],{"class":173},[167,76157,178],{"class":177},[167,76159,182],{"class":181},[167,76161,185],{"class":173},[167,76163,76164,76166,76168,76170],{"class":169,"line":188},[167,76165,192],{"class":191},[167,76167,195],{"class":173},[167,76169,198],{"class":191},[167,76171,202],{"class":201},[167,76173,76174,76176,76178,76180],{"class":169,"line":205},[167,76175,192],{"class":191},[167,76177,45073],{"class":173},[167,76179,198],{"class":191},[167,76181,45078],{"class":201},[167,76183,76184],{"class":169,"line":160},[167,76185,209],{"emptyLinePlaceholder":208},[167,76187,76188,76190,76192,76194,76196],{"class":169,"line":238},[167,76189,216],{"class":191},[167,76191,16954],{"class":219},[167,76193,223],{"class":191},[167,76195,226],{"class":181},[167,76197,1827],{"class":173},[167,76199,76200,76202,76204,76206,76208,76210,76212],{"class":169,"line":243},[167,76201,1832],{"class":173},[167,76203,45101],{"class":201},[167,76205,1838],{"class":173},[167,76207,8172],{"class":201},[167,76209,33090],{"class":173},[167,76211,45110],{"class":201},[167,76213,1856],{"class":173},[167,76215,76216,76218,76220,76222,76224,76226,76228],{"class":169,"line":261},[167,76217,1832],{"class":173},[167,76219,45119],{"class":201},[167,76221,1838],{"class":173},[167,76223,8194],{"class":201},[167,76225,33090],{"class":173},[167,76227,45128],{"class":201},[167,76229,599],{"class":173},[167,76231,76232],{"class":169,"line":273},[167,76233,429],{"class":173},[167,76235,76236,76238,76240],{"class":169,"line":279},[167,76237,282],{"class":173},[167,76239,178],{"class":177},[167,76241,185],{"class":173},[167,76243,76244],{"class":169,"line":289},[167,76245,209],{"emptyLinePlaceholder":208},[167,76247,76248,76250,76252],{"class":169,"line":294},[167,76249,174],{"class":173},[167,76251,299],{"class":177},[167,76253,185],{"class":173},[167,76255,76257,76259,76261,76263,76265,76267,76269,76271,76273,76275,76277,76279],{"class":76256,"line":304},[169,213],[167,76258,307],{"class":173},[167,76260,5309],{"class":177},[167,76262,18706],{"class":181},[167,76264,267],{"class":173},[167,76266,18711],{"class":201},[167,76268,10307],{"class":181},[167,76270,267],{"class":173},[167,76272,18718],{"class":201},[167,76274,32945],{"class":181},[167,76276,267],{"class":173},[167,76278,27391],{"class":201},[167,76280,5325],{"class":173},[167,76282,76283,76285,76287],{"class":169,"line":313},[167,76284,282],{"class":173},[167,76286,299],{"class":177},[167,76288,185],{"class":173},[154,76290,76292],{"className":156,"code":45192,"filename":3973,"highlights":76291,"language":162,"meta":163,"style":163},[495],[87,76293,76294,76302,76312,76316,76324,76328,76334,76340,76344,76360,76376,76380,76384,76388,76392,76400,76404,76412,76439],{"__ignoreMap":163},[167,76295,76296,76298,76300],{"class":169,"line":170},[167,76297,174],{"class":173},[167,76299,178],{"class":177},[167,76301,185],{"class":173},[167,76303,76304,76306,76308,76310],{"class":169,"line":188},[167,76305,192],{"class":191},[167,76307,45073],{"class":173},[167,76309,198],{"class":191},[167,76311,45078],{"class":201},[167,76313,76314],{"class":169,"line":205},[167,76315,209],{"emptyLinePlaceholder":208},[167,76317,76318,76320,76322],{"class":169,"line":160},[167,76319,608],{"class":191},[167,76321,3991],{"class":191},[167,76323,1905],{"class":173},[167,76325,76326],{"class":169,"line":238},[167,76327,45230],{"class":173},[167,76329,76330,76332],{"class":169,"line":243},[167,76331,7176],{"class":181},[167,76333,763],{"class":173},[167,76335,76336,76338],{"class":169,"line":261},[167,76337,1937],{"class":191},[167,76339,1905],{"class":173},[167,76341,76342],{"class":169,"line":273},[167,76343,28752],{"class":173},[167,76345,76346,76348,76350,76352,76354,76356,76358],{"class":169,"line":279},[167,76347,8677],{"class":173},[167,76349,45101],{"class":201},[167,76351,1838],{"class":173},[167,76353,8172],{"class":201},[167,76355,33090],{"class":173},[167,76357,45110],{"class":201},[167,76359,1856],{"class":173},[167,76361,76362,76364,76366,76368,76370,76372,76374],{"class":169,"line":289},[167,76363,8677],{"class":173},[167,76365,45119],{"class":201},[167,76367,1838],{"class":173},[167,76369,8194],{"class":201},[167,76371,33090],{"class":173},[167,76373,45128],{"class":201},[167,76375,599],{"class":173},[167,76377,76378],{"class":169,"line":294},[167,76379,8738],{"class":173},[167,76381,76382],{"class":169,"line":304},[167,76383,4049],{"class":173},[167,76385,76386],{"class":169,"line":313},[167,76387,3492],{"class":173},[167,76389,76390],{"class":169,"line":161},[167,76391,276],{"class":173},[167,76393,76394,76396,76398],{"class":169,"line":335},[167,76395,282],{"class":173},[167,76397,178],{"class":177},[167,76399,185],{"class":173},[167,76401,76402],{"class":169,"line":341},[167,76403,209],{"emptyLinePlaceholder":208},[167,76405,76406,76408,76410],{"class":169,"line":489},[167,76407,174],{"class":173},[167,76409,299],{"class":177},[167,76411,185],{"class":173},[167,76413,76415,76417,76419,76421,76423,76425,76427,76429,76431,76433,76435,76437],{"class":76414,"line":495},[169,213],[167,76416,307],{"class":173},[167,76418,5309],{"class":177},[167,76420,18706],{"class":181},[167,76422,267],{"class":173},[167,76424,18711],{"class":201},[167,76426,10307],{"class":181},[167,76428,267],{"class":173},[167,76430,18718],{"class":201},[167,76432,32945],{"class":181},[167,76434,267],{"class":173},[167,76436,27391],{"class":201},[167,76438,5325],{"class":173},[167,76440,76441,76443,76445],{"class":169,"line":501},[167,76442,282],{"class":173},[167,76444,299],{"class":177},[167,76446,185],{"class":173},[3087,76448,45353],{"id":45352},[154,76450,76452],{"className":156,"code":45356,"filename":3260,"highlights":76451,"language":162,"meta":163,"style":163},[489,501],[87,76453,76454,76464,76474,76478,76490,76494,76502,76510,76514,76526,76538,76542,76546,76550,76558,76562,76570,76591,76603,76624,76628,76636,76644],{"__ignoreMap":163},[167,76455,76456,76458,76460,76462],{"class":169,"line":170},[167,76457,174],{"class":173},[167,76459,178],{"class":177},[167,76461,182],{"class":181},[167,76463,185],{"class":173},[167,76465,76466,76468,76470,76472],{"class":169,"line":188},[167,76467,192],{"class":191},[167,76469,195],{"class":173},[167,76471,198],{"class":191},[167,76473,202],{"class":201},[167,76475,76476],{"class":169,"line":205},[167,76477,209],{"emptyLinePlaceholder":208},[167,76479,76480,76482,76484,76486,76488],{"class":169,"line":160},[167,76481,216],{"class":191},[167,76483,45390],{"class":219},[167,76485,223],{"class":191},[167,76487,226],{"class":181},[167,76489,1827],{"class":173},[167,76491,76492],{"class":169,"line":238},[167,76493,45401],{"class":173},[167,76495,76496,76498,76500],{"class":169,"line":243},[167,76497,45406],{"class":173},[167,76499,45409],{"class":201},[167,76501,393],{"class":173},[167,76503,76504,76506,76508],{"class":169,"line":261},[167,76505,45416],{"class":173},[167,76507,45419],{"class":201},[167,76509,393],{"class":173},[167,76511,76512],{"class":169,"line":273},[167,76513,45426],{"class":173},[167,76515,76516,76518,76520,76522,76524],{"class":169,"line":279},[167,76517,45431],{"class":173},[167,76519,45434],{"class":201},[167,76521,1838],{"class":173},[167,76523,44569],{"class":201},[167,76525,1856],{"class":173},[167,76527,76528,76530,76532,76534,76536],{"class":169,"line":289},[167,76529,45431],{"class":173},[167,76531,45447],{"class":201},[167,76533,1838],{"class":173},[167,76535,45452],{"class":201},[167,76537,599],{"class":173},[167,76539,76540],{"class":169,"line":294},[167,76541,45459],{"class":173},[167,76543,76544],{"class":169,"line":304},[167,76545,3492],{"class":173},[167,76547,76548],{"class":169,"line":313},[167,76549,429],{"class":173},[167,76551,76552,76554,76556],{"class":169,"line":161},[167,76553,282],{"class":173},[167,76555,178],{"class":177},[167,76557,185],{"class":173},[167,76559,76560],{"class":169,"line":335},[167,76561,209],{"emptyLinePlaceholder":208},[167,76563,76564,76566,76568],{"class":169,"line":341},[167,76565,174],{"class":173},[167,76567,299],{"class":177},[167,76569,185],{"class":173},[167,76571,76573,76575,76577,76579,76581,76583,76585,76587,76589],{"class":76572,"line":489},[169,213],[167,76574,307],{"class":173},[167,76576,10117],{"class":177},[167,76578,18706],{"class":181},[167,76580,267],{"class":173},[167,76582,45501],{"class":201},[167,76584,10307],{"class":181},[167,76586,267],{"class":173},[167,76588,45508],{"class":201},[167,76590,185],{"class":173},[167,76592,76593,76595,76597,76599,76601],{"class":169,"line":495},[167,76594,1257],{"class":173},[167,76596,3087],{"class":177},[167,76598,45519],{"class":173},[167,76600,3087],{"class":177},[167,76602,185],{"class":173},[167,76604,76606,76608,76610,76612,76614,76616,76618,76620,76622],{"class":76605,"line":501},[169,213],[167,76607,1257],{"class":173},[167,76609,36],{"class":177},[167,76611,18706],{"class":181},[167,76613,267],{"class":173},[167,76615,45537],{"class":201},[167,76617,10307],{"class":181},[167,76619,267],{"class":173},[167,76621,44747],{"class":201},[167,76623,185],{"class":173},[167,76625,76626],{"class":169,"line":512},[167,76627,45550],{"class":173},[167,76629,76630,76632,76634],{"class":169,"line":781},[167,76631,1292],{"class":173},[167,76633,36],{"class":177},[167,76635,185],{"class":173},[167,76637,76638,76640,76642],{"class":169,"line":786},[167,76639,504],{"class":173},[167,76641,10117],{"class":177},[167,76643,185],{"class":173},[167,76645,76646,76648,76650],{"class":169,"line":2678},[167,76647,282],{"class":173},[167,76649,299],{"class":177},[167,76651,185],{"class":173},[154,76653,76655],{"className":156,"code":45577,"filename":3973,"highlights":76654,"language":162,"meta":163,"style":163},[781,2678],[87,76656,76657,76665,76673,76679,76685,76689,76693,76701,76709,76713,76725,76737,76741,76745,76749,76753,76757,76761,76769,76773,76781,76802,76814,76835,76839,76847,76855],{"__ignoreMap":163},[167,76658,76659,76661,76663],{"class":169,"line":170},[167,76660,174],{"class":173},[167,76662,178],{"class":177},[167,76664,185],{"class":173},[167,76666,76667,76669,76671],{"class":169,"line":188},[167,76668,608],{"class":191},[167,76670,3991],{"class":191},[167,76672,1905],{"class":173},[167,76674,76675,76677],{"class":169,"line":205},[167,76676,7176],{"class":181},[167,76678,763],{"class":173},[167,76680,76681,76683],{"class":169,"line":160},[167,76682,1937],{"class":191},[167,76684,1905],{"class":173},[167,76686,76687],{"class":169,"line":238},[167,76688,45613],{"class":173},[167,76690,76691],{"class":169,"line":243},[167,76692,45618],{"class":173},[167,76694,76695,76697,76699],{"class":169,"line":261},[167,76696,45623],{"class":173},[167,76698,45409],{"class":201},[167,76700,393],{"class":173},[167,76702,76703,76705,76707],{"class":169,"line":273},[167,76704,45632],{"class":173},[167,76706,45419],{"class":201},[167,76708,393],{"class":173},[167,76710,76711],{"class":169,"line":279},[167,76712,45641],{"class":173},[167,76714,76715,76717,76719,76721,76723],{"class":169,"line":289},[167,76716,45646],{"class":173},[167,76718,45434],{"class":201},[167,76720,1838],{"class":173},[167,76722,44569],{"class":201},[167,76724,1856],{"class":173},[167,76726,76727,76729,76731,76733,76735],{"class":169,"line":294},[167,76728,45646],{"class":173},[167,76730,45447],{"class":201},[167,76732,1838],{"class":173},[167,76734,45452],{"class":201},[167,76736,599],{"class":173},[167,76738,76739],{"class":169,"line":304},[167,76740,45671],{"class":173},[167,76742,76743],{"class":169,"line":313},[167,76744,14822],{"class":173},[167,76746,76747],{"class":169,"line":161},[167,76748,8738],{"class":173},[167,76750,76751],{"class":169,"line":335},[167,76752,4049],{"class":173},[167,76754,76755],{"class":169,"line":341},[167,76756,3492],{"class":173},[167,76758,76759],{"class":169,"line":489},[167,76760,276],{"class":173},[167,76762,76763,76765,76767],{"class":169,"line":495},[167,76764,282],{"class":173},[167,76766,178],{"class":177},[167,76768,185],{"class":173},[167,76770,76771],{"class":169,"line":501},[167,76772,209],{"emptyLinePlaceholder":208},[167,76774,76775,76777,76779],{"class":169,"line":512},[167,76776,174],{"class":173},[167,76778,299],{"class":177},[167,76780,185],{"class":173},[167,76782,76784,76786,76788,76790,76792,76794,76796,76798,76800],{"class":76783,"line":781},[169,213],[167,76785,307],{"class":173},[167,76787,10117],{"class":177},[167,76789,18706],{"class":181},[167,76791,267],{"class":173},[167,76793,45501],{"class":201},[167,76795,10307],{"class":181},[167,76797,267],{"class":173},[167,76799,45508],{"class":201},[167,76801,185],{"class":173},[167,76803,76804,76806,76808,76810,76812],{"class":169,"line":786},[167,76805,1257],{"class":173},[167,76807,3087],{"class":177},[167,76809,45519],{"class":173},[167,76811,3087],{"class":177},[167,76813,185],{"class":173},[167,76815,76817,76819,76821,76823,76825,76827,76829,76831,76833],{"class":76816,"line":2678},[169,213],[167,76818,1257],{"class":173},[167,76820,36],{"class":177},[167,76822,18706],{"class":181},[167,76824,267],{"class":173},[167,76826,45537],{"class":201},[167,76828,10307],{"class":181},[167,76830,267],{"class":173},[167,76832,44747],{"class":201},[167,76834,185],{"class":173},[167,76836,76837],{"class":169,"line":2692},[167,76838,45550],{"class":173},[167,76840,76841,76843,76845],{"class":169,"line":3575},[167,76842,1292],{"class":173},[167,76844,36],{"class":177},[167,76846,185],{"class":173},[167,76848,76849,76851,76853],{"class":169,"line":5028},[167,76850,504],{"class":173},[167,76852,10117],{"class":177},[167,76854,185],{"class":173},[167,76856,76857,76859,76861],{"class":169,"line":5037},[167,76858,282],{"class":173},[167,76860,299],{"class":177},[167,76862,185],{"class":173},[22,76864,45797,76865],{"id":45796},[87,76866,30726],{},[3087,76868,26697,76869,42872,76871,45807],{"id":45802},[87,76870,42871],{},[87,76872,7845],{},[154,76874,76876],{"className":156,"code":45810,"filename":39997,"highlights":76875,"language":162,"meta":163,"style":163},[170],[87,76877,76878,76913,76917],{"__ignoreMap":163},[167,76879,76881,76883,76885,76887,76889,76891,76893,76895,76897,76899,76901,76903,76905,76907,76909,76911],{"class":76880,"line":170},[169,213],[167,76882,174],{"class":173},[167,76884,36],{"class":177},[167,76886,18706],{"class":191},[167,76888,267],{"class":173},[167,76890,5080],{"class":201},[167,76892,45829],{"class":173},[167,76894,44215],{"class":191},[167,76896,1820],{"class":173},[167,76898,5080],{"class":201},[167,76900,5312],{"class":173},[167,76902,7845],{"class":181},[167,76904,267],{"class":173},[167,76906,5080],{"class":201},[167,76908,42871],{"class":173},[167,76910,5080],{"class":201},[167,76912,185],{"class":173},[167,76914,76915],{"class":169,"line":188},[167,76916,45854],{"class":173},[167,76918,76919,76921,76923],{"class":169,"line":205},[167,76920,282],{"class":173},[167,76922,36],{"class":177},[167,76924,185],{"class":173},[15,76926,45865],{},[5367,76928,76929],{},[15,76930,45870,76931,45873],{},[87,76932,44230],{},[3087,76934,45877,76935,1028,76937,45882],{"id":45876},[87,76936,13496],{},[87,76938,30726],{},[154,76940,76942],{"className":156,"code":45885,"filename":34162,"highlights":76941,"language":162,"meta":163,"style":163},[170],[87,76943,76944,76989,76993],{"__ignoreMap":163},[167,76945,76947,76949,76951,76953,76955,76957,76959,76961,76963,76965,76967,76969,76971,76973,76975,76977,76979,76981,76983,76985,76987],{"class":76946,"line":170},[169,213],[167,76948,174],{"class":173},[167,76950,36],{"class":177},[167,76952,18706],{"class":191},[167,76954,267],{"class":173},[167,76956,5080],{"class":201},[167,76958,45904],{"class":173},[167,76960,44215],{"class":191},[167,76962,16954],{"class":173},[167,76964,5080],{"class":201},[167,76966,5694],{"class":191},[167,76968,267],{"class":173},[167,76970,5080],{"class":201},[167,76972,45919],{"class":173},[167,76974,5080],{"class":201},[167,76976,5312],{"class":173},[167,76978,7845],{"class":181},[167,76980,267],{"class":173},[167,76982,5080],{"class":201},[167,76984,5190],{"class":173},[167,76986,5080],{"class":201},[167,76988,185],{"class":173},[167,76990,76991],{"class":169,"line":188},[167,76992,45940],{"class":173},[167,76994,76995,76997,76999],{"class":169,"line":205},[167,76996,282],{"class":173},[167,76998,36],{"class":177},[167,77000,185],{"class":173},[5367,77002,77003],{},[15,77004,45953,77005,45956],{},[87,77006,1661],{},[3087,77008,45960,77009],{"id":45959},[87,77010,1661],{},[15,77012,45965],{},[3087,77014,32604,77015,45971],{"id":45968},[87,77016,7845],{},[15,77018,45974,77019,45977],{},[87,77020,7845],{},[22,77022,45981],{"id":45980},[33,77024,77025,77031,77035,77037,77041],{},[36,77026,1582,77027,45988,77029,1679],{},[87,77028,580],{},[87,77030,42780],{},[36,77032,45993,77033,1679],{},[87,77034,1661],{},[36,77036,45998],{},[36,77038,46001,77039,46004],{},[87,77040,30726],{},[36,77042,46007],{},[22,77044,23574],{"id":23573},[15,77046,77047,46014],{},[87,77048,30726],{},[15,77050,46017],{},[33,77052,77053,77057,77061],{},[36,77054,77055,46024],{},[87,77056,7845],{},[36,77058,46027,77059],{},[87,77060,1661],{},[36,77062,46032],{},[15,77064,46035],{},[924,77066,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":77068},[77069,77070,77071,77072,77073,77074,77079,77084,77090,77091],{"id":26502,"depth":188,"text":26503},{"id":42826,"depth":188,"text":46042},{"id":6348,"depth":188,"text":6349},{"id":42878,"depth":188,"text":42879},{"id":43129,"depth":188,"text":43130},{"id":43549,"depth":188,"text":46047,"children":77075},[77076,77077,77078],{"id":43556,"depth":205,"text":46050},{"id":43807,"depth":205,"text":43808},{"id":44090,"depth":205,"text":46053},{"id":44478,"depth":188,"text":44479,"children":77080},[77081,77082,77083],{"id":44482,"depth":205,"text":46057},{"id":45037,"depth":205,"text":46059},{"id":45352,"depth":205,"text":45353},{"id":45796,"depth":188,"text":46062,"children":77085},[77086,77087,77088,77089],{"id":45802,"depth":205,"text":46065},{"id":45876,"depth":205,"text":46067},{"id":45959,"depth":205,"text":46069},{"id":45968,"depth":205,"text":46071},{"id":45980,"depth":188,"text":45981},{"id":23573,"depth":188,"text":23574},{"updatedAt":46079,"coverCaption":23656,"author":946,"keywords":77093},[3258,30726,46081,7845,3260,3973,16579],[77095],{"headline":46085,"author":77096,"datePublished":46079,"@type":961},{"name":946,"@type":959},{"title":42751,"description":46077},[77099,77100,77101,77102],{"tag":26466,"color":26467},{"tag":46092,"color":3270},{"tag":27757,"color":27758},{"tag":5424,"color":5425},{"id":77104,"title":77105,"body":77106,"cover":47938,"coverAlt":78889,"date":47940,"description":78890,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":78891,"navigation":208,"path":78894,"schemaOrg":78895,"seo":78899,"series":26460,"seriesDescription":60258,"seriesOrder":188,"seriesTitle":60259,"slug":942,"stem":78900,"tags":78901,"__hash__":78907},"blog\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en.md","Vue Directives: v-if, v-else, and v-show",{"type":8,"value":77107,"toc":78863},[77108,77118,77131,77157,77167,77171,77175,77191,77196,77207,77218,77225,77236,77239,77254,77258,77265,77269,77277,77289,77293,77328,77336,77339,77565,77803,77822,77828,77836,78017,78204,78208,78215,78226,78234,78243,78252,78478,78710,78712,78720,78722,78771,78783,78790,78804,78811,78824,78826,78853,78861],[11,77109,77111,1025,77113,57860,77115,77117],{"id":77110},"v-if-v-else-and-v-show-in-vue-when-to-use-each-one",[87,77112,13496],{},[87,77114,46108],{},[87,77116,13659],{}," in Vue: when to use each one",[15,77119,57723,77120,1025,77122,57860,77124,77126,77127,77130],{},[87,77121,13496],{},[87,77123,46108],{},[87,77125,13659],{}," directives are used to ",[3933,77128,77129],{},"show or hide content"," based on a reactive condition.\nThe key difference—the one that prevents subtle bugs and performance issues—is this:",[33,77132,77133,77145],{},[36,77134,77135,1108,77141,77144],{},[3933,77136,77137,11227,77139],{},[87,77138,13496],{},[87,77140,46108],{},[9295,77142,77143],{},"create or destroy"," DOM elements.",[36,77146,77147,1108,77151,77154,77155,1679],{},[3933,77148,77149],{},[87,77150,13659],{},[9295,77152,77153],{},"doesn't destroy anything","; it only toggles ",[87,77156,46152],{},[15,77158,77159,77160,1662,77163,77166],{},"If you think of it as ",[3933,77161,77162],{},"\"Does this exist?\"",[3933,77164,77165],{},"\"Is this visible?\"",", you're on the right track.",[22,77168,77170],{"id":77169},"what-each-one-does","What each one does",[3087,77172,77173],{"id":13496},[87,77174,13496],{},[15,77176,77177,77178,77181,77182,77184,77185,77187,77188,1679],{},"Renders the element ",[3933,77179,77180],{},"only if"," the condition is ",[87,77183,390],{},".\nIf it's ",[87,77186,3392],{},", the element ",[3933,77189,77190],{},"doesn't exist in the DOM",[15,77192,77193],{},[3933,77194,77195],{},"Useful when:",[33,77197,77198,77201,77204],{},[36,77199,77200],{},"The content is heavy (large components, lists, charts)",[36,77202,77203],{},"It shouldn't exist if the condition isn't met (UI permissions, sensitive flows)",[36,77205,77206],{},"It's shown infrequently or occasionally",[5367,77208,77209],{},[15,77210,77211,77213,77214,77217],{},[87,77212,13496],{}," has a higher cost when toggling, because it involves ",[3933,77215,77216],{},"mounting and unmounting"," the component tree.",[3087,77219,77221,57920,77223],{"id":77220},"v-else-and-v-else-if",[87,77222,46108],{},[87,77224,46221],{},[15,77226,77227,77228,77231,77232,63104,77234,1679],{},"Used ",[3933,77229,77230],{},"immediately after"," a ",[87,77233,13496],{},[87,77235,46221],{},[15,77237,77238],{},"Important rules:",[33,77240,77241,77248],{},[36,77242,77243,77244,77247],{},"They must be ",[3933,77245,77246],{},"adjacent"," (no intermediate nodes).",[36,77249,77250,77251,1679],{},"Vue interprets them as ",[3933,77252,77253],{},"a single conditional block",[3087,77255,77256],{"id":13659},[87,77257,13659],{},[15,77259,77260,77261,77264],{},"The element is ",[3933,77262,77263],{},"always rendered"," (exists in the DOM), but is shown or hidden with CSS.",[15,77266,77267],{},[3933,77268,77195],{},[33,77270,77271,77274],{},[36,77272,77273],{},"Visibility changes frequently (toggles, menus, panels)",[36,77275,77276],{},"You want to avoid the cost of mounting\u002Funmounting",[5367,77278,77279],{},[15,77280,77281,16903,77283,77288],{},[87,77282,13659],{},[3933,77284,77285,77286],{},"doesn't work with ",[87,77287,31997],{},", because it's not a real element.\nThe content remains in the DOM: focus, tab order, and accessibility can be affected if not managed properly.",[22,77290,77292],{"id":77291},"quick-summary-which-to-use","Quick summary: which to use",[33,77294,77295,77306,77319],{},[36,77296,62955,77297,77301,77302,77305],{},[3933,77298,77299],{},[87,77300,13496],{}," when the content ",[3933,77303,77304],{},"shouldn't exist"," if the condition isn't met.",[36,77307,62955,77308,77301,77312,77315,77316,1679],{},[3933,77309,77310],{},[87,77311,13659],{},[3933,77313,77314],{},"should only be hidden"," and the toggle will be ",[3933,77317,77318],{},"frequent",[36,77320,62955,77321,77325,77326,1679],{},[3933,77322,77323],{},[87,77324,46108],{}," for the immediate alternative case of a ",[87,77327,13496],{},[22,77329,77331,77332,33973,77334,6219],{"id":77330},"example-1-login-v-if-v-else","Example 1: Login (",[87,77333,13496],{},[87,77335,46108],{},[15,77337,77338],{},"When a person is authenticated, you show the panel; if not, a CTA to log in.",[154,77340,77342],{"className":156,"code":46338,"filename":3260,"highlights":77341,"language":162,"meta":163,"style":163},[261,341,781],[87,77343,77344,77354,77366,77370,77386,77390,77398,77409,77413,77421,77425,77433,77447,77451,77459,77463,77478,77490,77502,77510,77514,77525,77537,77549,77557],{"__ignoreMap":163},[167,77345,77346,77348,77350,77352],{"class":169,"line":170},[167,77347,174],{"class":173},[167,77349,178],{"class":177},[167,77351,182],{"class":181},[167,77353,185],{"class":173},[167,77355,77356,77358,77360,77362,77364],{"class":169,"line":188},[167,77357,192],{"class":191},[167,77359,195],{"class":173},[167,77361,198],{"class":191},[167,77363,24041],{"class":201},[167,77365,24044],{"class":173},[167,77367,77368],{"class":169,"line":205},[167,77369,209],{"emptyLinePlaceholder":208},[167,77371,77372,77374,77376,77378,77380,77382,77384],{"class":169,"line":160},[167,77373,216],{"class":191},[167,77375,46374],{"class":219},[167,77377,223],{"class":191},[167,77379,226],{"class":181},[167,77381,229],{"class":173},[167,77383,3392],{"class":219},[167,77385,24169],{"class":173},[167,77387,77388],{"class":169,"line":238},[167,77389,209],{"emptyLinePlaceholder":208},[167,77391,77392,77394,77396],{"class":169,"line":243},[167,77393,246],{"class":191},[167,77395,46395],{"class":181},[167,77397,763],{"class":173},[167,77399,77401,77403,77405,77407],{"class":77400,"line":261},[169,213],[167,77402,46403],{"class":173},[167,77404,267],{"class":191},[167,77406,5625],{"class":191},[167,77408,46410],{"class":173},[167,77410,77411],{"class":169,"line":273},[167,77412,276],{"class":173},[167,77414,77415,77417,77419],{"class":169,"line":279},[167,77416,282],{"class":173},[167,77418,178],{"class":177},[167,77420,185],{"class":173},[167,77422,77423],{"class":169,"line":289},[167,77424,209],{"emptyLinePlaceholder":208},[167,77426,77427,77429,77431],{"class":169,"line":294},[167,77428,174],{"class":173},[167,77430,299],{"class":177},[167,77432,185],{"class":173},[167,77434,77435,77437,77439,77441,77443,77445],{"class":169,"line":304},[167,77436,307],{"class":173},[167,77438,507],{"class":177},[167,77440,1182],{"class":181},[167,77442,267],{"class":173},[167,77444,46447],{"class":201},[167,77446,185],{"class":173},[167,77448,77449],{"class":169,"line":313},[167,77450,46454],{"class":173},[167,77452,77453,77455,77457],{"class":169,"line":161},[167,77454,504],{"class":173},[167,77456,507],{"class":177},[167,77458,185],{"class":173},[167,77460,77461],{"class":169,"line":335},[167,77462,209],{"emptyLinePlaceholder":208},[167,77464,77466,77468,77470,77472,77474,77476],{"class":77465,"line":341},[169,213],[167,77467,307],{"class":173},[167,77469,10117],{"class":177},[167,77471,5694],{"class":181},[167,77473,267],{"class":173},[167,77475,46480],{"class":201},[167,77477,185],{"class":173},[167,77479,77480,77482,77484,77486,77488],{"class":169,"line":489},[167,77481,1257],{"class":173},[167,77483,22],{"class":177},[167,77485,46491],{"class":173},[167,77487,22],{"class":177},[167,77489,185],{"class":173},[167,77491,77492,77494,77496,77498,77500],{"class":169,"line":495},[167,77493,1257],{"class":173},[167,77495,15],{"class":177},[167,77497,46504],{"class":173},[167,77499,15],{"class":177},[167,77501,185],{"class":173},[167,77503,77504,77506,77508],{"class":169,"line":501},[167,77505,504],{"class":173},[167,77507,10117],{"class":177},[167,77509,185],{"class":173},[167,77511,77512],{"class":169,"line":512},[167,77513,209],{"emptyLinePlaceholder":208},[167,77515,77517,77519,77521,77523],{"class":77516,"line":781},[169,213],[167,77518,307],{"class":173},[167,77520,10117],{"class":177},[167,77522,7038],{"class":181},[167,77524,185],{"class":173},[167,77526,77527,77529,77531,77533,77535],{"class":169,"line":786},[167,77528,1257],{"class":173},[167,77530,22],{"class":177},[167,77532,46540],{"class":173},[167,77534,22],{"class":177},[167,77536,185],{"class":173},[167,77538,77539,77541,77543,77545,77547],{"class":169,"line":2678},[167,77540,1257],{"class":173},[167,77542,15],{"class":177},[167,77544,46553],{"class":173},[167,77546,15],{"class":177},[167,77548,185],{"class":173},[167,77550,77551,77553,77555],{"class":169,"line":2692},[167,77552,504],{"class":173},[167,77554,10117],{"class":177},[167,77556,185],{"class":173},[167,77558,77559,77561,77563],{"class":169,"line":3575},[167,77560,282],{"class":173},[167,77562,299],{"class":177},[167,77564,185],{"class":173},[154,77566,77568],{"className":156,"code":46576,"filename":3973,"highlights":77567,"language":162,"meta":163,"style":163},[289,781,5028],[87,77569,77570,77578,77586,77592,77598,77606,77610,77614,77618,77624,77639,77643,77647,77651,77659,77663,77671,77685,77689,77697,77701,77716,77728,77740,77748,77752,77763,77775,77787,77795],{"__ignoreMap":163},[167,77571,77572,77574,77576],{"class":169,"line":170},[167,77573,174],{"class":173},[167,77575,178],{"class":177},[167,77577,185],{"class":173},[167,77579,77580,77582,77584],{"class":169,"line":188},[167,77581,608],{"class":191},[167,77583,3991],{"class":191},[167,77585,1905],{"class":173},[167,77587,77588,77590],{"class":169,"line":205},[167,77589,7176],{"class":181},[167,77591,763],{"class":173},[167,77593,77594,77596],{"class":169,"line":160},[167,77595,1937],{"class":191},[167,77597,1905],{"class":173},[167,77599,77600,77602,77604],{"class":169,"line":238},[167,77601,46612],{"class":173},[167,77603,3392],{"class":219},[167,77605,393],{"class":173},[167,77607,77608],{"class":169,"line":243},[167,77609,24370],{"class":173},[167,77611,77612],{"class":169,"line":261},[167,77613,398],{"class":173},[167,77615,77616],{"class":169,"line":273},[167,77617,4419],{"class":173},[167,77619,77620,77622],{"class":169,"line":279},[167,77621,46633],{"class":181},[167,77623,763],{"class":173},[167,77625,77627,77629,77631,77633,77635,77637],{"class":77626,"line":289},[169,213],[167,77628,741],{"class":219},[167,77630,46643],{"class":173},[167,77632,267],{"class":191},[167,77634,5625],{"class":191},[167,77636,4927],{"class":219},[167,77638,46652],{"class":173},[167,77640,77641],{"class":169,"line":294},[167,77642,755],{"class":173},[167,77644,77645],{"class":169,"line":304},[167,77646,398],{"class":173},[167,77648,77649],{"class":169,"line":313},[167,77650,24148],{"class":173},[167,77652,77653,77655,77657],{"class":169,"line":161},[167,77654,282],{"class":173},[167,77656,178],{"class":177},[167,77658,185],{"class":173},[167,77660,77661],{"class":169,"line":335},[167,77662,209],{"emptyLinePlaceholder":208},[167,77664,77665,77667,77669],{"class":169,"line":341},[167,77666,174],{"class":173},[167,77668,299],{"class":177},[167,77670,185],{"class":173},[167,77672,77673,77675,77677,77679,77681,77683],{"class":169,"line":489},[167,77674,307],{"class":173},[167,77676,507],{"class":177},[167,77678,1182],{"class":181},[167,77680,267],{"class":173},[167,77682,46447],{"class":201},[167,77684,185],{"class":173},[167,77686,77687],{"class":169,"line":495},[167,77688,46454],{"class":173},[167,77690,77691,77693,77695],{"class":169,"line":501},[167,77692,504],{"class":173},[167,77694,507],{"class":177},[167,77696,185],{"class":173},[167,77698,77699],{"class":169,"line":512},[167,77700,209],{"emptyLinePlaceholder":208},[167,77702,77704,77706,77708,77710,77712,77714],{"class":77703,"line":781},[169,213],[167,77705,307],{"class":173},[167,77707,10117],{"class":177},[167,77709,5694],{"class":181},[167,77711,267],{"class":173},[167,77713,46480],{"class":201},[167,77715,185],{"class":173},[167,77717,77718,77720,77722,77724,77726],{"class":169,"line":786},[167,77719,1257],{"class":173},[167,77721,22],{"class":177},[167,77723,46491],{"class":173},[167,77725,22],{"class":177},[167,77727,185],{"class":173},[167,77729,77730,77732,77734,77736,77738],{"class":169,"line":2678},[167,77731,1257],{"class":173},[167,77733,15],{"class":177},[167,77735,46504],{"class":173},[167,77737,15],{"class":177},[167,77739,185],{"class":173},[167,77741,77742,77744,77746],{"class":169,"line":2692},[167,77743,504],{"class":173},[167,77745,10117],{"class":177},[167,77747,185],{"class":173},[167,77749,77750],{"class":169,"line":3575},[167,77751,209],{"emptyLinePlaceholder":208},[167,77753,77755,77757,77759,77761],{"class":77754,"line":5028},[169,213],[167,77756,307],{"class":173},[167,77758,10117],{"class":177},[167,77760,7038],{"class":181},[167,77762,185],{"class":173},[167,77764,77765,77767,77769,77771,77773],{"class":169,"line":5037},[167,77766,1257],{"class":173},[167,77768,22],{"class":177},[167,77770,46540],{"class":173},[167,77772,22],{"class":177},[167,77774,185],{"class":173},[167,77776,77777,77779,77781,77783,77785],{"class":169,"line":5046},[167,77778,1257],{"class":173},[167,77780,15],{"class":177},[167,77782,46553],{"class":173},[167,77784,15],{"class":177},[167,77786,185],{"class":173},[167,77788,77789,77791,77793],{"class":169,"line":6756},[167,77790,504],{"class":173},[167,77792,10117],{"class":177},[167,77794,185],{"class":173},[167,77796,77797,77799,77801],{"class":169,"line":6778},[167,77798,282],{"class":173},[167,77800,299],{"class":177},[167,77802,185],{"class":173},[5367,77804,77805],{},[15,77806,57723,77807,77809,77810,77813,77814,77816,77817,77819,77820,1679],{},[87,77808,46823],{}," must go ",[3933,77811,77812],{},"right after"," the ",[87,77815,13496],{},".\nIf you insert a comment, a ",[87,77818,46833],{},", or another node in between, Vue stops associating it as an ",[87,77821,22570],{},[22,77823,77825,77826,6219],{"id":77824},"example-2-tabs-or-toggle-panel-v-show","Example 2: Tabs or toggle panel (",[87,77827,13659],{},[15,77829,77830,77831,77835],{},"A filter panel that the user opens and closes constantly. Here ",[3933,77832,77833],{},[87,77834,13659],{}," is ideal.",[154,77837,77839],{"className":156,"code":46853,"filename":3260,"highlights":77838,"language":162,"meta":163,"style":163},[160,304],[87,77840,77841,77851,77863,77867,77884,77892,77896,77904,77918,77922,77930,77934,77955,77967,77975,77989,77993,78001,78009],{"__ignoreMap":163},[167,77842,77843,77845,77847,77849],{"class":169,"line":170},[167,77844,174],{"class":173},[167,77846,178],{"class":177},[167,77848,182],{"class":181},[167,77850,185],{"class":173},[167,77852,77853,77855,77857,77859,77861],{"class":169,"line":188},[167,77854,192],{"class":191},[167,77856,195],{"class":173},[167,77858,198],{"class":191},[167,77860,24041],{"class":201},[167,77862,24044],{"class":173},[167,77864,77865],{"class":169,"line":205},[167,77866,209],{"emptyLinePlaceholder":208},[167,77868,77870,77872,77874,77876,77878,77880,77882],{"class":77869,"line":160},[169,213],[167,77871,216],{"class":191},[167,77873,5523],{"class":219},[167,77875,223],{"class":191},[167,77877,226],{"class":181},[167,77879,229],{"class":173},[167,77881,3392],{"class":219},[167,77883,24169],{"class":173},[167,77885,77886,77888,77890],{"class":169,"line":238},[167,77887,282],{"class":173},[167,77889,178],{"class":177},[167,77891,185],{"class":173},[167,77893,77894],{"class":169,"line":243},[167,77895,209],{"emptyLinePlaceholder":208},[167,77897,77898,77900,77902],{"class":169,"line":261},[167,77899,174],{"class":173},[167,77901,299],{"class":177},[167,77903,185],{"class":173},[167,77905,77906,77908,77910,77912,77914,77916],{"class":169,"line":273},[167,77907,307],{"class":173},[167,77909,507],{"class":177},[167,77911,1182],{"class":181},[167,77913,267],{"class":173},[167,77915,24592],{"class":201},[167,77917,185],{"class":173},[167,77919,77920],{"class":169,"line":279},[167,77921,46938],{"class":173},[167,77923,77924,77926,77928],{"class":169,"line":289},[167,77925,504],{"class":173},[167,77927,507],{"class":177},[167,77929,185],{"class":173},[167,77931,77932],{"class":169,"line":294},[167,77933,209],{"emptyLinePlaceholder":208},[167,77935,77937,77939,77941,77943,77945,77947,77949,77951,77953],{"class":77936,"line":304},[169,213],[167,77938,307],{"class":173},[167,77940,27354],{"class":177},[167,77942,46960],{"class":181},[167,77944,267],{"class":173},[167,77946,5699],{"class":201},[167,77948,1245],{"class":181},[167,77950,267],{"class":173},[167,77952,12383],{"class":201},[167,77954,185],{"class":173},[167,77956,77957,77959,77961,77963,77965],{"class":169,"line":313},[167,77958,1257],{"class":173},[167,77960,3087],{"class":177},[167,77962,46981],{"class":173},[167,77964,3087],{"class":177},[167,77966,185],{"class":173},[167,77968,77969,77971,77973],{"class":169,"line":161},[167,77970,1257],{"class":173},[167,77972,9875],{"class":177},[167,77974,185],{"class":173},[167,77976,77977,77979,77981,77983,77985,77987],{"class":169,"line":335},[167,77978,1268],{"class":173},[167,77980,2650],{"class":177},[167,77982,1174],{"class":181},[167,77984,267],{"class":173},[167,77986,35002],{"class":201},[167,77988,5325],{"class":173},[167,77990,77991],{"class":169,"line":341},[167,77992,47012],{"class":173},[167,77994,77995,77997,77999],{"class":169,"line":489},[167,77996,1292],{"class":173},[167,77998,9875],{"class":177},[167,78000,185],{"class":173},[167,78002,78003,78005,78007],{"class":169,"line":495},[167,78004,504],{"class":173},[167,78006,27354],{"class":177},[167,78008,185],{"class":173},[167,78010,78011,78013,78015],{"class":169,"line":501},[167,78012,282],{"class":173},[167,78014,299],{"class":177},[167,78016,185],{"class":173},[154,78018,78020],{"className":156,"code":47039,"filename":3973,"highlights":78019,"language":162,"meta":163,"style":163},[238,341],[87,78021,78022,78030,78038,78044,78050,78059,78063,78067,78071,78079,78083,78091,78105,78109,78117,78121,78142,78154,78162,78176,78180,78188,78196],{"__ignoreMap":163},[167,78023,78024,78026,78028],{"class":169,"line":170},[167,78025,174],{"class":173},[167,78027,178],{"class":177},[167,78029,185],{"class":173},[167,78031,78032,78034,78036],{"class":169,"line":188},[167,78033,608],{"class":191},[167,78035,3991],{"class":191},[167,78037,1905],{"class":173},[167,78039,78040,78042],{"class":169,"line":205},[167,78041,7176],{"class":181},[167,78043,763],{"class":173},[167,78045,78046,78048],{"class":169,"line":160},[167,78047,1937],{"class":191},[167,78049,1905],{"class":173},[167,78051,78053,78055,78057],{"class":78052,"line":238},[169,213],[167,78054,24722],{"class":173},[167,78056,3392],{"class":219},[167,78058,393],{"class":173},[167,78060,78061],{"class":169,"line":243},[167,78062,24370],{"class":173},[167,78064,78065],{"class":169,"line":261},[167,78066,398],{"class":173},[167,78068,78069],{"class":169,"line":273},[167,78070,24148],{"class":173},[167,78072,78073,78075,78077],{"class":169,"line":279},[167,78074,282],{"class":173},[167,78076,178],{"class":177},[167,78078,185],{"class":173},[167,78080,78081],{"class":169,"line":289},[167,78082,209],{"emptyLinePlaceholder":208},[167,78084,78085,78087,78089],{"class":169,"line":294},[167,78086,174],{"class":173},[167,78088,299],{"class":177},[167,78090,185],{"class":173},[167,78092,78093,78095,78097,78099,78101,78103],{"class":169,"line":304},[167,78094,307],{"class":173},[167,78096,507],{"class":177},[167,78098,1182],{"class":181},[167,78100,267],{"class":173},[167,78102,24592],{"class":201},[167,78104,185],{"class":173},[167,78106,78107],{"class":169,"line":313},[167,78108,46938],{"class":173},[167,78110,78111,78113,78115],{"class":169,"line":161},[167,78112,504],{"class":173},[167,78114,507],{"class":177},[167,78116,185],{"class":173},[167,78118,78119],{"class":169,"line":335},[167,78120,209],{"emptyLinePlaceholder":208},[167,78122,78124,78126,78128,78130,78132,78134,78136,78138,78140],{"class":78123,"line":341},[169,213],[167,78125,307],{"class":173},[167,78127,27354],{"class":177},[167,78129,46960],{"class":181},[167,78131,267],{"class":173},[167,78133,5699],{"class":201},[167,78135,1245],{"class":181},[167,78137,267],{"class":173},[167,78139,12383],{"class":201},[167,78141,185],{"class":173},[167,78143,78144,78146,78148,78150,78152],{"class":169,"line":489},[167,78145,1257],{"class":173},[167,78147,3087],{"class":177},[167,78149,46981],{"class":173},[167,78151,3087],{"class":177},[167,78153,185],{"class":173},[167,78155,78156,78158,78160],{"class":169,"line":495},[167,78157,1257],{"class":173},[167,78159,9875],{"class":177},[167,78161,185],{"class":173},[167,78163,78164,78166,78168,78170,78172,78174],{"class":169,"line":501},[167,78165,1268],{"class":173},[167,78167,2650],{"class":177},[167,78169,1174],{"class":181},[167,78171,267],{"class":173},[167,78173,35002],{"class":201},[167,78175,5325],{"class":173},[167,78177,78178],{"class":169,"line":512},[167,78179,47012],{"class":173},[167,78181,78182,78184,78186],{"class":169,"line":781},[167,78183,1292],{"class":173},[167,78185,9875],{"class":177},[167,78187,185],{"class":173},[167,78189,78190,78192,78194],{"class":169,"line":786},[167,78191,504],{"class":173},[167,78193,27354],{"class":177},[167,78195,185],{"class":173},[167,78197,78198,78200,78202],{"class":169,"line":2678},[167,78199,282],{"class":173},[167,78201,299],{"class":177},[167,78203,185],{"class":173},[3087,78205,78207],{"id":78206},"ux-and-accessibility-note","UX and accessibility note",[15,78209,78210,78211,78214],{},"Since the panel ",[3933,78212,78213],{},"still exists",", its interactive elements can:",[33,78216,78217,78220,78223],{},[36,78218,78219],{},"Preserve state",[36,78221,78222],{},"Preserve focus (sometimes desirable, sometimes not)",[36,78224,78225],{},"Remain accessible to screen readers if roles\u002FARIA aren't handled",[15,78227,78228,78229,78231,78232,1679],{},"If the content ",[3933,78230,77304],{}," at all, use ",[87,78233,13496],{},[22,78235,78237,78239,78240,78242],{"id":78236},"v-else-if-multiple-states-without-unnecessary-nested-ifs",[87,78238,46221],{},": multiple states (without unnecessary nested ",[87,78241,47264],{},"s)",[15,78244,78245,78246,1025,78248,57860,78250,1679],{},"A common pattern: ",[9295,78247,9346],{},[9295,78249,9352],{},[9295,78251,47275],{},[154,78253,78255],{"className":156,"code":47278,"filename":3260,"highlights":78254,"language":162,"meta":163,"style":163},[160,313,161,335,341],[87,78256,78257,78267,78279,78283,78302,78310,78314,78322,78340,78358,78376,78394,78398,78417,78436,78455,78470],{"__ignoreMap":163},[167,78258,78259,78261,78263,78265],{"class":169,"line":170},[167,78260,174],{"class":173},[167,78262,178],{"class":177},[167,78264,182],{"class":181},[167,78266,185],{"class":173},[167,78268,78269,78271,78273,78275,78277],{"class":169,"line":188},[167,78270,192],{"class":191},[167,78272,195],{"class":173},[167,78274,198],{"class":191},[167,78276,24041],{"class":201},[167,78278,24044],{"class":173},[167,78280,78281],{"class":169,"line":205},[167,78282,209],{"emptyLinePlaceholder":208},[167,78284,78286,78288,78290,78292,78294,78296,78298,78300],{"class":78285,"line":160},[169,213],[167,78287,216],{"class":191},[167,78289,11700],{"class":219},[167,78291,223],{"class":191},[167,78293,226],{"class":181},[167,78295,229],{"class":173},[167,78297,47323],{"class":201},[167,78299,47326],{"class":173},[167,78301,47329],{"class":18662},[167,78303,78304,78306,78308],{"class":169,"line":238},[167,78305,282],{"class":173},[167,78307,178],{"class":177},[167,78309,185],{"class":173},[167,78311,78312],{"class":169,"line":243},[167,78313,209],{"emptyLinePlaceholder":208},[167,78315,78316,78318,78320],{"class":169,"line":261},[167,78317,174],{"class":173},[167,78319,299],{"class":177},[167,78321,185],{"class":173},[167,78323,78324,78326,78328,78330,78332,78334,78336,78338],{"class":169,"line":273},[167,78325,307],{"class":173},[167,78327,507],{"class":177},[167,78329,1182],{"class":181},[167,78331,267],{"class":173},[167,78333,47362],{"class":201},[167,78335,47365],{"class":173},[167,78337,507],{"class":177},[167,78339,185],{"class":173},[167,78341,78342,78344,78346,78348,78350,78352,78354,78356],{"class":169,"line":279},[167,78343,307],{"class":173},[167,78345,507],{"class":177},[167,78347,1182],{"class":181},[167,78349,267],{"class":173},[167,78351,47382],{"class":201},[167,78353,47385],{"class":173},[167,78355,507],{"class":177},[167,78357,185],{"class":173},[167,78359,78360,78362,78364,78366,78368,78370,78372,78374],{"class":169,"line":289},[167,78361,307],{"class":173},[167,78363,507],{"class":177},[167,78365,1182],{"class":181},[167,78367,267],{"class":173},[167,78369,47402],{"class":201},[167,78371,47405],{"class":173},[167,78373,507],{"class":177},[167,78375,185],{"class":173},[167,78377,78378,78380,78382,78384,78386,78388,78390,78392],{"class":169,"line":294},[167,78379,307],{"class":173},[167,78381,507],{"class":177},[167,78383,1182],{"class":181},[167,78385,267],{"class":173},[167,78387,47422],{"class":201},[167,78389,47425],{"class":173},[167,78391,507],{"class":177},[167,78393,185],{"class":173},[167,78395,78396],{"class":169,"line":304},[167,78397,209],{"emptyLinePlaceholder":208},[167,78399,78401,78403,78405,78407,78409,78411,78413,78415],{"class":78400,"line":313},[169,213],[167,78402,307],{"class":173},[167,78404,15],{"class":177},[167,78406,5694],{"class":181},[167,78408,267],{"class":173},[167,78410,47447],{"class":201},[167,78412,47450],{"class":173},[167,78414,15],{"class":177},[167,78416,185],{"class":173},[167,78418,78420,78422,78424,78426,78428,78430,78432,78434],{"class":78419,"line":161},[169,213],[167,78421,307],{"class":173},[167,78423,15],{"class":177},[167,78425,6961],{"class":181},[167,78427,267],{"class":173},[167,78429,47468],{"class":201},[167,78431,47471],{"class":173},[167,78433,15],{"class":177},[167,78435,185],{"class":173},[167,78437,78439,78441,78443,78445,78447,78449,78451,78453],{"class":78438,"line":335},[169,213],[167,78440,307],{"class":173},[167,78442,15],{"class":177},[167,78444,6961],{"class":181},[167,78446,267],{"class":173},[167,78448,47489],{"class":201},[167,78450,47492],{"class":173},[167,78452,15],{"class":177},[167,78454,185],{"class":173},[167,78456,78458,78460,78462,78464,78466,78468],{"class":78457,"line":341},[169,213],[167,78459,307],{"class":173},[167,78461,15],{"class":177},[167,78463,7038],{"class":181},[167,78465,47508],{"class":173},[167,78467,15],{"class":177},[167,78469,185],{"class":173},[167,78471,78472,78474,78476],{"class":169,"line":489},[167,78473,282],{"class":173},[167,78475,299],{"class":177},[167,78477,185],{"class":173},[154,78479,78481],{"className":156,"code":47523,"filename":3973,"highlights":78480,"language":162,"meta":163,"style":163},[238,489,495,501,512],[87,78482,78483,78491,78499,78505,78511,78522,78526,78530,78534,78542,78546,78554,78572,78590,78608,78626,78630,78649,78668,78687,78702],{"__ignoreMap":163},[167,78484,78485,78487,78489],{"class":169,"line":170},[167,78486,174],{"class":173},[167,78488,178],{"class":177},[167,78490,185],{"class":173},[167,78492,78493,78495,78497],{"class":169,"line":188},[167,78494,608],{"class":191},[167,78496,3991],{"class":191},[167,78498,1905],{"class":173},[167,78500,78501,78503],{"class":169,"line":205},[167,78502,7176],{"class":181},[167,78504,763],{"class":173},[167,78506,78507,78509],{"class":169,"line":160},[167,78508,1937],{"class":191},[167,78510,1905],{"class":173},[167,78512,78514,78516,78518,78520],{"class":78513,"line":238},[169,213],[167,78515,12585],{"class":173},[167,78517,47323],{"class":201},[167,78519,1025],{"class":173},[167,78521,47329],{"class":18662},[167,78523,78524],{"class":169,"line":243},[167,78525,24370],{"class":173},[167,78527,78528],{"class":169,"line":261},[167,78529,398],{"class":173},[167,78531,78532],{"class":169,"line":273},[167,78533,24148],{"class":173},[167,78535,78536,78538,78540],{"class":169,"line":279},[167,78537,282],{"class":173},[167,78539,178],{"class":177},[167,78541,185],{"class":173},[167,78543,78544],{"class":169,"line":289},[167,78545,209],{"emptyLinePlaceholder":208},[167,78547,78548,78550,78552],{"class":169,"line":294},[167,78549,174],{"class":173},[167,78551,299],{"class":177},[167,78553,185],{"class":173},[167,78555,78556,78558,78560,78562,78564,78566,78568,78570],{"class":169,"line":304},[167,78557,307],{"class":173},[167,78559,507],{"class":177},[167,78561,1182],{"class":181},[167,78563,267],{"class":173},[167,78565,47362],{"class":201},[167,78567,47365],{"class":173},[167,78569,507],{"class":177},[167,78571,185],{"class":173},[167,78573,78574,78576,78578,78580,78582,78584,78586,78588],{"class":169,"line":313},[167,78575,307],{"class":173},[167,78577,507],{"class":177},[167,78579,1182],{"class":181},[167,78581,267],{"class":173},[167,78583,47382],{"class":201},[167,78585,47385],{"class":173},[167,78587,507],{"class":177},[167,78589,185],{"class":173},[167,78591,78592,78594,78596,78598,78600,78602,78604,78606],{"class":169,"line":161},[167,78593,307],{"class":173},[167,78595,507],{"class":177},[167,78597,1182],{"class":181},[167,78599,267],{"class":173},[167,78601,47402],{"class":201},[167,78603,47405],{"class":173},[167,78605,507],{"class":177},[167,78607,185],{"class":173},[167,78609,78610,78612,78614,78616,78618,78620,78622,78624],{"class":169,"line":335},[167,78611,307],{"class":173},[167,78613,507],{"class":177},[167,78615,1182],{"class":181},[167,78617,267],{"class":173},[167,78619,47422],{"class":201},[167,78621,47425],{"class":173},[167,78623,507],{"class":177},[167,78625,185],{"class":173},[167,78627,78628],{"class":169,"line":341},[167,78629,209],{"emptyLinePlaceholder":208},[167,78631,78633,78635,78637,78639,78641,78643,78645,78647],{"class":78632,"line":489},[169,213],[167,78634,307],{"class":173},[167,78636,15],{"class":177},[167,78638,5694],{"class":181},[167,78640,267],{"class":173},[167,78642,47447],{"class":201},[167,78644,47450],{"class":173},[167,78646,15],{"class":177},[167,78648,185],{"class":173},[167,78650,78652,78654,78656,78658,78660,78662,78664,78666],{"class":78651,"line":495},[169,213],[167,78653,307],{"class":173},[167,78655,15],{"class":177},[167,78657,6961],{"class":181},[167,78659,267],{"class":173},[167,78661,47468],{"class":201},[167,78663,47471],{"class":173},[167,78665,15],{"class":177},[167,78667,185],{"class":173},[167,78669,78671,78673,78675,78677,78679,78681,78683,78685],{"class":78670,"line":501},[169,213],[167,78672,307],{"class":173},[167,78674,15],{"class":177},[167,78676,6961],{"class":181},[167,78678,267],{"class":173},[167,78680,47489],{"class":201},[167,78682,47492],{"class":173},[167,78684,15],{"class":177},[167,78686,185],{"class":173},[167,78688,78690,78692,78694,78696,78698,78700],{"class":78689,"line":512},[169,213],[167,78691,307],{"class":173},[167,78693,15],{"class":177},[167,78695,7038],{"class":181},[167,78697,47508],{"class":173},[167,78699,15],{"class":177},[167,78701,185],{"class":173},[167,78703,78704,78706,78708],{"class":169,"line":781},[167,78705,282],{"class":173},[167,78707,299],{"class":177},[167,78709,185],{"class":173},[22,78711,63002],{"id":57819},[3087,78713,47759,78715,78717,78718],{"id":78714},"_1-v-else-separated-from-v-if",[87,78716,46108],{}," separated from ",[87,78719,13496],{},[15,78721,63012],{},[154,78723,78726],{"className":156,"code":78724,"filename":15284,"highlights":78725,"language":162,"meta":163,"style":163},"\u003Cdiv v-if=\"ok\">Ok\u003C\u002Fdiv>\n\u003C!-- comment or node -->\n\u003Cdiv v-else>Not ok\u003C\u002Fdiv>\n",[188],[87,78727,78728,78750,78756],{"__ignoreMap":163},[167,78729,78730,78732,78734,78736,78738,78740,78742,78744,78746,78748],{"class":169,"line":170},[167,78731,174],{"class":173},[167,78733,1242],{"class":177},[167,78735,5694],{"class":191},[167,78737,267],{"class":173},[167,78739,5080],{"class":201},[167,78741,47787],{"class":173},[167,78743,5080],{"class":201},[167,78745,47792],{"class":173},[167,78747,1242],{"class":177},[167,78749,185],{"class":173},[167,78751,78753],{"class":78752,"line":188},[169,213],[167,78754,78755],{"class":18662},"\u003C!-- comment or node -->\n",[167,78757,78758,78760,78762,78764,78767,78769],{"class":169,"line":205},[167,78759,174],{"class":173},[167,78761,1242],{"class":177},[167,78763,7038],{"class":191},[167,78765,78766],{"class":173},">Not ok\u003C\u002F",[167,78768,1242],{"class":177},[167,78770,185],{"class":173},[5367,78772,78773],{},[15,78774,57723,78775,77809,78777,78780,78781,1679],{},[87,78776,46108],{},[3933,78778,78779],{},"immediately"," after the ",[87,78782,13496],{},[3087,78784,78786,78787,78789],{"id":78785},"_2-using-v-show-for-content-that-shouldnt-exist","2) Using ",[87,78788,13659],{}," for content that shouldn't exist",[15,78791,78792,78793,78795,78796,1025,78798,78801,78802,1679],{},"If you hide something like an ",[9295,78794,47844],{}," with ",[87,78797,13659],{},[3933,78799,78800],{},"it's still in the DOM",".\nIt's not security; it's just presentation. Security goes in the backend, but in the UI at least use ",[87,78803,13496],{},[3087,78805,78807,78808,78810],{"id":78806},"_3-thinking-v-if-is-free","3) Thinking ",[87,78809,13496],{}," is \"free\"",[15,78812,78813,78814,78816,78817,78820,78821,78823],{},"Toggling ",[87,78815,13496],{}," many times involves ",[3933,78818,78819],{},"repeated mounting and unmounting",".\nIf the user will open and close something constantly, ",[87,78822,13659],{}," is usually a better option.",[22,78825,73913],{"id":73912},[33,78827,78828,78839,78846],{},[36,78829,78830,78834,78835,78838],{},[3933,78831,78832],{},[87,78833,13496],{},": controls the ",[3933,78836,78837],{},"real existence"," of the element.",[36,78840,78841,78845],{},[3933,78842,78843],{},[87,78844,47892],{},": alternative branches of the same conditional block.",[36,78847,78848,78852],{},[3933,78849,78850],{},[87,78851,13659],{},": hide\u002Fshow quickly with CSS, without destroying the DOM.",[5367,78854,78855],{},[15,78856,78857,78858],{},"A UI becomes clearer when you consciously decide:\n",[3933,78859,78860],{},"Do I want this to exist or just to be visible?",[924,78862,47911],{},{"title":163,"searchDepth":188,"depth":188,"links":78864},[78865,78871,78872,78874,78878,78880,78888],{"id":77169,"depth":188,"text":77170,"children":78866},[78867,78868,78870],{"id":13496,"depth":205,"text":13496},{"id":77220,"depth":205,"text":78869},"v-else and v-else-if",{"id":13659,"depth":205,"text":13659},{"id":77291,"depth":188,"text":77292},{"id":77330,"depth":188,"text":78873},"Example 1: Login (v-if + v-else)",{"id":77824,"depth":188,"text":78875,"children":78876},"Example 2: Tabs or toggle panel (v-show)",[78877],{"id":78206,"depth":205,"text":78207},{"id":78236,"depth":188,"text":78879},"v-else-if: multiple states (without unnecessary nested ifs)",{"id":57819,"depth":188,"text":63002,"children":78881},[78882,78884,78886],{"id":78714,"depth":205,"text":78883},"1) v-else separated from v-if",{"id":78785,"depth":205,"text":78885},"2) Using v-show for content that shouldn't exist",{"id":78806,"depth":205,"text":78887},"3) Thinking v-if is \"free\"",{"id":73912,"depth":188,"text":73913},"Conceptual illustration of conditional rendering in Vue.js","Learn how to use v-if, v-else, and v-show in Vue with clear examples, best practices, and key notes to correctly choose between conditional rendering and visibility.",{"updatedAt":47943,"coverCaption":78892,"author":946,"keywords":78893},"Conditional rendering in Vue.js illustrated by TODOvue",[3258,13496,46108,13659,47946,47947,3260,3973],"\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en",[78896],{"headline":78897,"author":78898,"datePublished":47943,"@type":961},"v-if, v-else, and v-show in Vue: when to use each one",{"name":946,"@type":959},{"title":77105,"description":78890},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en",[78902,78903,78905,78906],{"tag":60263,"color":26467},{"tag":78904,"color":47959},"Conditional Rendering",{"tag":27757,"color":27758},{"tag":65670,"color":5425},"bonHJEZKR8mgY6TlnDzH6GuTIBa7iVkuk37Bj00v7gA",{"id":46097,"title":46098,"body":78909,"cover":47938,"coverAlt":47939,"date":47940,"description":47941,"draft":940,"extension":941,"lab":942,"locale":943,"meta":80576,"navigation":208,"path":47948,"schemaOrg":80578,"seo":80581,"series":26460,"seriesDescription":26461,"seriesOrder":188,"seriesTitle":26462,"slug":942,"stem":47954,"tags":80582,"__hash__":47962},{"type":8,"value":78910,"toc":80557},[78911,78919,78929,78951,78957,78959,78963,78973,78977,78985,78993,78999,79007,79009,79019,79023,79027,79031,79037,79047,79049,79077,79083,79085,79311,79549,79563,79567,79573,79754,79941,79943,79947,79955,79961,79967,79975,80201,80433,80435,80441,80443,80489,80499,80503,80513,80517,80525,80527,80549,80555],[11,78912,78913,1025,78915,1028,78917,46111],{"id":46103},[87,78914,13496],{},[87,78916,46108],{},[87,78918,13659],{},[15,78920,46114,78921,1025,78923,1028,78925,46121,78927,46125],{},[87,78922,13496],{},[87,78924,46108],{},[87,78926,13659],{},[3933,78928,46124],{},[33,78930,78931,78941],{},[36,78932,78933,1108,78939,46139],{},[3933,78934,78935,11227,78937],{},[87,78936,13496],{},[87,78938,46108],{},[9295,78940,46138],{},[36,78942,78943,1108,78947,46149,78949,1679],{},[3933,78944,78945],{},[87,78946,13659],{},[9295,78948,46148],{},[87,78950,46152],{},[15,78952,46155,78953,1662,78955,46162],{},[3933,78954,46158],{},[3933,78956,46161],{},[22,78958,46166],{"id":46165},[3087,78960,78961],{"id":13496},[87,78962,13496],{},[15,78964,46173,78965,46177,78967,46180,78969,46183,78971,1679],{},[3933,78966,46176],{},[87,78968,390],{},[87,78970,3392],{},[3933,78972,46186],{},[15,78974,78975],{},[3933,78976,46191],{},[33,78978,78979,78981,78983],{},[36,78980,46196],{},[36,78982,46199],{},[36,78984,46202],{},[5367,78986,78987],{},[15,78988,78989,46209,78991,46213],{},[87,78990,13496],{},[3933,78992,46212],{},[3087,78994,78995,1028,78997],{"id":46216},[87,78996,46108],{},[87,78998,46221],{},[15,79000,46224,79001,46228,79003,90,79005,1679],{},[3933,79002,46227],{},[87,79004,13496],{},[87,79006,46221],{},[15,79008,46235],{},[33,79010,79011,79015],{},[36,79012,46240,79013,46244],{},[3933,79014,46243],{},[36,79016,46247,79017,1679],{},[3933,79018,46250],{},[3087,79020,79021],{"id":13659},[87,79022,13659],{},[15,79024,46257,79025,46261],{},[3933,79026,46260],{},[15,79028,79029],{},[3933,79030,46191],{},[33,79032,79033,79035],{},[36,79034,46270],{},[36,79036,46273],{},[5367,79038,79039],{},[15,79040,79041,16903,79043,46285],{},[87,79042,13659],{},[3933,79044,46282,79045],{},[87,79046,31997],{},[22,79048,46289],{"id":46288},[33,79050,79051,79059,79069],{},[36,79052,1582,79053,46298,79057,46302],{},[3933,79054,79055],{},[87,79056,13496],{},[3933,79058,46301],{},[36,79060,1582,79061,46298,79065,46312,79067,1679],{},[3933,79062,79063],{},[87,79064,13659],{},[3933,79066,46311],{},[3933,79068,46315],{},[36,79070,1582,79071,46322,79075,1679],{},[3933,79072,79073],{},[87,79074,46108],{},[87,79076,13496],{},[22,79078,46328,79079,33973,79081,6219],{"id":46327},[87,79080,13496],{},[87,79082,46108],{},[15,79084,46335],{},[154,79086,79088],{"className":156,"code":46338,"filename":3260,"highlights":79087,"language":162,"meta":163,"style":163},[261,341,781],[87,79089,79090,79100,79112,79116,79132,79136,79144,79155,79159,79167,79171,79179,79193,79197,79205,79209,79224,79236,79248,79256,79260,79271,79283,79295,79303],{"__ignoreMap":163},[167,79091,79092,79094,79096,79098],{"class":169,"line":170},[167,79093,174],{"class":173},[167,79095,178],{"class":177},[167,79097,182],{"class":181},[167,79099,185],{"class":173},[167,79101,79102,79104,79106,79108,79110],{"class":169,"line":188},[167,79103,192],{"class":191},[167,79105,195],{"class":173},[167,79107,198],{"class":191},[167,79109,24041],{"class":201},[167,79111,24044],{"class":173},[167,79113,79114],{"class":169,"line":205},[167,79115,209],{"emptyLinePlaceholder":208},[167,79117,79118,79120,79122,79124,79126,79128,79130],{"class":169,"line":160},[167,79119,216],{"class":191},[167,79121,46374],{"class":219},[167,79123,223],{"class":191},[167,79125,226],{"class":181},[167,79127,229],{"class":173},[167,79129,3392],{"class":219},[167,79131,24169],{"class":173},[167,79133,79134],{"class":169,"line":238},[167,79135,209],{"emptyLinePlaceholder":208},[167,79137,79138,79140,79142],{"class":169,"line":243},[167,79139,246],{"class":191},[167,79141,46395],{"class":181},[167,79143,763],{"class":173},[167,79145,79147,79149,79151,79153],{"class":79146,"line":261},[169,213],[167,79148,46403],{"class":173},[167,79150,267],{"class":191},[167,79152,5625],{"class":191},[167,79154,46410],{"class":173},[167,79156,79157],{"class":169,"line":273},[167,79158,276],{"class":173},[167,79160,79161,79163,79165],{"class":169,"line":279},[167,79162,282],{"class":173},[167,79164,178],{"class":177},[167,79166,185],{"class":173},[167,79168,79169],{"class":169,"line":289},[167,79170,209],{"emptyLinePlaceholder":208},[167,79172,79173,79175,79177],{"class":169,"line":294},[167,79174,174],{"class":173},[167,79176,299],{"class":177},[167,79178,185],{"class":173},[167,79180,79181,79183,79185,79187,79189,79191],{"class":169,"line":304},[167,79182,307],{"class":173},[167,79184,507],{"class":177},[167,79186,1182],{"class":181},[167,79188,267],{"class":173},[167,79190,46447],{"class":201},[167,79192,185],{"class":173},[167,79194,79195],{"class":169,"line":313},[167,79196,46454],{"class":173},[167,79198,79199,79201,79203],{"class":169,"line":161},[167,79200,504],{"class":173},[167,79202,507],{"class":177},[167,79204,185],{"class":173},[167,79206,79207],{"class":169,"line":335},[167,79208,209],{"emptyLinePlaceholder":208},[167,79210,79212,79214,79216,79218,79220,79222],{"class":79211,"line":341},[169,213],[167,79213,307],{"class":173},[167,79215,10117],{"class":177},[167,79217,5694],{"class":181},[167,79219,267],{"class":173},[167,79221,46480],{"class":201},[167,79223,185],{"class":173},[167,79225,79226,79228,79230,79232,79234],{"class":169,"line":489},[167,79227,1257],{"class":173},[167,79229,22],{"class":177},[167,79231,46491],{"class":173},[167,79233,22],{"class":177},[167,79235,185],{"class":173},[167,79237,79238,79240,79242,79244,79246],{"class":169,"line":495},[167,79239,1257],{"class":173},[167,79241,15],{"class":177},[167,79243,46504],{"class":173},[167,79245,15],{"class":177},[167,79247,185],{"class":173},[167,79249,79250,79252,79254],{"class":169,"line":501},[167,79251,504],{"class":173},[167,79253,10117],{"class":177},[167,79255,185],{"class":173},[167,79257,79258],{"class":169,"line":512},[167,79259,209],{"emptyLinePlaceholder":208},[167,79261,79263,79265,79267,79269],{"class":79262,"line":781},[169,213],[167,79264,307],{"class":173},[167,79266,10117],{"class":177},[167,79268,7038],{"class":181},[167,79270,185],{"class":173},[167,79272,79273,79275,79277,79279,79281],{"class":169,"line":786},[167,79274,1257],{"class":173},[167,79276,22],{"class":177},[167,79278,46540],{"class":173},[167,79280,22],{"class":177},[167,79282,185],{"class":173},[167,79284,79285,79287,79289,79291,79293],{"class":169,"line":2678},[167,79286,1257],{"class":173},[167,79288,15],{"class":177},[167,79290,46553],{"class":173},[167,79292,15],{"class":177},[167,79294,185],{"class":173},[167,79296,79297,79299,79301],{"class":169,"line":2692},[167,79298,504],{"class":173},[167,79300,10117],{"class":177},[167,79302,185],{"class":173},[167,79304,79305,79307,79309],{"class":169,"line":3575},[167,79306,282],{"class":173},[167,79308,299],{"class":177},[167,79310,185],{"class":173},[154,79312,79314],{"className":156,"code":46576,"filename":3973,"highlights":79313,"language":162,"meta":163,"style":163},[289,781,5028],[87,79315,79316,79324,79332,79338,79344,79352,79356,79360,79364,79370,79385,79389,79393,79397,79405,79409,79417,79431,79435,79443,79447,79462,79474,79486,79494,79498,79509,79521,79533,79541],{"__ignoreMap":163},[167,79317,79318,79320,79322],{"class":169,"line":170},[167,79319,174],{"class":173},[167,79321,178],{"class":177},[167,79323,185],{"class":173},[167,79325,79326,79328,79330],{"class":169,"line":188},[167,79327,608],{"class":191},[167,79329,3991],{"class":191},[167,79331,1905],{"class":173},[167,79333,79334,79336],{"class":169,"line":205},[167,79335,7176],{"class":181},[167,79337,763],{"class":173},[167,79339,79340,79342],{"class":169,"line":160},[167,79341,1937],{"class":191},[167,79343,1905],{"class":173},[167,79345,79346,79348,79350],{"class":169,"line":238},[167,79347,46612],{"class":173},[167,79349,3392],{"class":219},[167,79351,393],{"class":173},[167,79353,79354],{"class":169,"line":243},[167,79355,24370],{"class":173},[167,79357,79358],{"class":169,"line":261},[167,79359,398],{"class":173},[167,79361,79362],{"class":169,"line":273},[167,79363,4419],{"class":173},[167,79365,79366,79368],{"class":169,"line":279},[167,79367,46633],{"class":181},[167,79369,763],{"class":173},[167,79371,79373,79375,79377,79379,79381,79383],{"class":79372,"line":289},[169,213],[167,79374,741],{"class":219},[167,79376,46643],{"class":173},[167,79378,267],{"class":191},[167,79380,5625],{"class":191},[167,79382,4927],{"class":219},[167,79384,46652],{"class":173},[167,79386,79387],{"class":169,"line":294},[167,79388,755],{"class":173},[167,79390,79391],{"class":169,"line":304},[167,79392,398],{"class":173},[167,79394,79395],{"class":169,"line":313},[167,79396,24148],{"class":173},[167,79398,79399,79401,79403],{"class":169,"line":161},[167,79400,282],{"class":173},[167,79402,178],{"class":177},[167,79404,185],{"class":173},[167,79406,79407],{"class":169,"line":335},[167,79408,209],{"emptyLinePlaceholder":208},[167,79410,79411,79413,79415],{"class":169,"line":341},[167,79412,174],{"class":173},[167,79414,299],{"class":177},[167,79416,185],{"class":173},[167,79418,79419,79421,79423,79425,79427,79429],{"class":169,"line":489},[167,79420,307],{"class":173},[167,79422,507],{"class":177},[167,79424,1182],{"class":181},[167,79426,267],{"class":173},[167,79428,46447],{"class":201},[167,79430,185],{"class":173},[167,79432,79433],{"class":169,"line":495},[167,79434,46454],{"class":173},[167,79436,79437,79439,79441],{"class":169,"line":501},[167,79438,504],{"class":173},[167,79440,507],{"class":177},[167,79442,185],{"class":173},[167,79444,79445],{"class":169,"line":512},[167,79446,209],{"emptyLinePlaceholder":208},[167,79448,79450,79452,79454,79456,79458,79460],{"class":79449,"line":781},[169,213],[167,79451,307],{"class":173},[167,79453,10117],{"class":177},[167,79455,5694],{"class":181},[167,79457,267],{"class":173},[167,79459,46480],{"class":201},[167,79461,185],{"class":173},[167,79463,79464,79466,79468,79470,79472],{"class":169,"line":786},[167,79465,1257],{"class":173},[167,79467,22],{"class":177},[167,79469,46491],{"class":173},[167,79471,22],{"class":177},[167,79473,185],{"class":173},[167,79475,79476,79478,79480,79482,79484],{"class":169,"line":2678},[167,79477,1257],{"class":173},[167,79479,15],{"class":177},[167,79481,46504],{"class":173},[167,79483,15],{"class":177},[167,79485,185],{"class":173},[167,79487,79488,79490,79492],{"class":169,"line":2692},[167,79489,504],{"class":173},[167,79491,10117],{"class":177},[167,79493,185],{"class":173},[167,79495,79496],{"class":169,"line":3575},[167,79497,209],{"emptyLinePlaceholder":208},[167,79499,79501,79503,79505,79507],{"class":79500,"line":5028},[169,213],[167,79502,307],{"class":173},[167,79504,10117],{"class":177},[167,79506,7038],{"class":181},[167,79508,185],{"class":173},[167,79510,79511,79513,79515,79517,79519],{"class":169,"line":5037},[167,79512,1257],{"class":173},[167,79514,22],{"class":177},[167,79516,46540],{"class":173},[167,79518,22],{"class":177},[167,79520,185],{"class":173},[167,79522,79523,79525,79527,79529,79531],{"class":169,"line":5046},[167,79524,1257],{"class":173},[167,79526,15],{"class":177},[167,79528,46553],{"class":173},[167,79530,15],{"class":177},[167,79532,185],{"class":173},[167,79534,79535,79537,79539],{"class":169,"line":6756},[167,79536,504],{"class":173},[167,79538,10117],{"class":177},[167,79540,185],{"class":173},[167,79542,79543,79545,79547],{"class":169,"line":6778},[167,79544,282],{"class":173},[167,79546,299],{"class":177},[167,79548,185],{"class":173},[5367,79550,79551],{},[15,79552,23773,79553,46824,79555,22877,79557,46830,79559,46834,79561,1679],{},[87,79554,46823],{},[3933,79556,46827],{},[87,79558,13496],{},[87,79560,46833],{},[87,79562,22570],{},[22,79564,46840,79565,6219],{"id":46839},[87,79566,13659],{},[15,79568,46845,79569,46850],{},[3933,79570,79571],{},[87,79572,13659],{},[154,79574,79576],{"className":156,"code":46853,"filename":3260,"highlights":79575,"language":162,"meta":163,"style":163},[160,304],[87,79577,79578,79588,79600,79604,79621,79629,79633,79641,79655,79659,79667,79671,79692,79704,79712,79726,79730,79738,79746],{"__ignoreMap":163},[167,79579,79580,79582,79584,79586],{"class":169,"line":170},[167,79581,174],{"class":173},[167,79583,178],{"class":177},[167,79585,182],{"class":181},[167,79587,185],{"class":173},[167,79589,79590,79592,79594,79596,79598],{"class":169,"line":188},[167,79591,192],{"class":191},[167,79593,195],{"class":173},[167,79595,198],{"class":191},[167,79597,24041],{"class":201},[167,79599,24044],{"class":173},[167,79601,79602],{"class":169,"line":205},[167,79603,209],{"emptyLinePlaceholder":208},[167,79605,79607,79609,79611,79613,79615,79617,79619],{"class":79606,"line":160},[169,213],[167,79608,216],{"class":191},[167,79610,5523],{"class":219},[167,79612,223],{"class":191},[167,79614,226],{"class":181},[167,79616,229],{"class":173},[167,79618,3392],{"class":219},[167,79620,24169],{"class":173},[167,79622,79623,79625,79627],{"class":169,"line":238},[167,79624,282],{"class":173},[167,79626,178],{"class":177},[167,79628,185],{"class":173},[167,79630,79631],{"class":169,"line":243},[167,79632,209],{"emptyLinePlaceholder":208},[167,79634,79635,79637,79639],{"class":169,"line":261},[167,79636,174],{"class":173},[167,79638,299],{"class":177},[167,79640,185],{"class":173},[167,79642,79643,79645,79647,79649,79651,79653],{"class":169,"line":273},[167,79644,307],{"class":173},[167,79646,507],{"class":177},[167,79648,1182],{"class":181},[167,79650,267],{"class":173},[167,79652,24592],{"class":201},[167,79654,185],{"class":173},[167,79656,79657],{"class":169,"line":279},[167,79658,46938],{"class":173},[167,79660,79661,79663,79665],{"class":169,"line":289},[167,79662,504],{"class":173},[167,79664,507],{"class":177},[167,79666,185],{"class":173},[167,79668,79669],{"class":169,"line":294},[167,79670,209],{"emptyLinePlaceholder":208},[167,79672,79674,79676,79678,79680,79682,79684,79686,79688,79690],{"class":79673,"line":304},[169,213],[167,79675,307],{"class":173},[167,79677,27354],{"class":177},[167,79679,46960],{"class":181},[167,79681,267],{"class":173},[167,79683,5699],{"class":201},[167,79685,1245],{"class":181},[167,79687,267],{"class":173},[167,79689,12383],{"class":201},[167,79691,185],{"class":173},[167,79693,79694,79696,79698,79700,79702],{"class":169,"line":313},[167,79695,1257],{"class":173},[167,79697,3087],{"class":177},[167,79699,46981],{"class":173},[167,79701,3087],{"class":177},[167,79703,185],{"class":173},[167,79705,79706,79708,79710],{"class":169,"line":161},[167,79707,1257],{"class":173},[167,79709,9875],{"class":177},[167,79711,185],{"class":173},[167,79713,79714,79716,79718,79720,79722,79724],{"class":169,"line":335},[167,79715,1268],{"class":173},[167,79717,2650],{"class":177},[167,79719,1174],{"class":181},[167,79721,267],{"class":173},[167,79723,35002],{"class":201},[167,79725,5325],{"class":173},[167,79727,79728],{"class":169,"line":341},[167,79729,47012],{"class":173},[167,79731,79732,79734,79736],{"class":169,"line":489},[167,79733,1292],{"class":173},[167,79735,9875],{"class":177},[167,79737,185],{"class":173},[167,79739,79740,79742,79744],{"class":169,"line":495},[167,79741,504],{"class":173},[167,79743,27354],{"class":177},[167,79745,185],{"class":173},[167,79747,79748,79750,79752],{"class":169,"line":501},[167,79749,282],{"class":173},[167,79751,299],{"class":177},[167,79753,185],{"class":173},[154,79755,79757],{"className":156,"code":47039,"filename":3973,"highlights":79756,"language":162,"meta":163,"style":163},[238,341],[87,79758,79759,79767,79775,79781,79787,79796,79800,79804,79808,79816,79820,79828,79842,79846,79854,79858,79879,79891,79899,79913,79917,79925,79933],{"__ignoreMap":163},[167,79760,79761,79763,79765],{"class":169,"line":170},[167,79762,174],{"class":173},[167,79764,178],{"class":177},[167,79766,185],{"class":173},[167,79768,79769,79771,79773],{"class":169,"line":188},[167,79770,608],{"class":191},[167,79772,3991],{"class":191},[167,79774,1905],{"class":173},[167,79776,79777,79779],{"class":169,"line":205},[167,79778,7176],{"class":181},[167,79780,763],{"class":173},[167,79782,79783,79785],{"class":169,"line":160},[167,79784,1937],{"class":191},[167,79786,1905],{"class":173},[167,79788,79790,79792,79794],{"class":79789,"line":238},[169,213],[167,79791,24722],{"class":173},[167,79793,3392],{"class":219},[167,79795,393],{"class":173},[167,79797,79798],{"class":169,"line":243},[167,79799,24370],{"class":173},[167,79801,79802],{"class":169,"line":261},[167,79803,398],{"class":173},[167,79805,79806],{"class":169,"line":273},[167,79807,24148],{"class":173},[167,79809,79810,79812,79814],{"class":169,"line":279},[167,79811,282],{"class":173},[167,79813,178],{"class":177},[167,79815,185],{"class":173},[167,79817,79818],{"class":169,"line":289},[167,79819,209],{"emptyLinePlaceholder":208},[167,79821,79822,79824,79826],{"class":169,"line":294},[167,79823,174],{"class":173},[167,79825,299],{"class":177},[167,79827,185],{"class":173},[167,79829,79830,79832,79834,79836,79838,79840],{"class":169,"line":304},[167,79831,307],{"class":173},[167,79833,507],{"class":177},[167,79835,1182],{"class":181},[167,79837,267],{"class":173},[167,79839,24592],{"class":201},[167,79841,185],{"class":173},[167,79843,79844],{"class":169,"line":313},[167,79845,46938],{"class":173},[167,79847,79848,79850,79852],{"class":169,"line":161},[167,79849,504],{"class":173},[167,79851,507],{"class":177},[167,79853,185],{"class":173},[167,79855,79856],{"class":169,"line":335},[167,79857,209],{"emptyLinePlaceholder":208},[167,79859,79861,79863,79865,79867,79869,79871,79873,79875,79877],{"class":79860,"line":341},[169,213],[167,79862,307],{"class":173},[167,79864,27354],{"class":177},[167,79866,46960],{"class":181},[167,79868,267],{"class":173},[167,79870,5699],{"class":201},[167,79872,1245],{"class":181},[167,79874,267],{"class":173},[167,79876,12383],{"class":201},[167,79878,185],{"class":173},[167,79880,79881,79883,79885,79887,79889],{"class":169,"line":489},[167,79882,1257],{"class":173},[167,79884,3087],{"class":177},[167,79886,46981],{"class":173},[167,79888,3087],{"class":177},[167,79890,185],{"class":173},[167,79892,79893,79895,79897],{"class":169,"line":495},[167,79894,1257],{"class":173},[167,79896,9875],{"class":177},[167,79898,185],{"class":173},[167,79900,79901,79903,79905,79907,79909,79911],{"class":169,"line":501},[167,79902,1268],{"class":173},[167,79904,2650],{"class":177},[167,79906,1174],{"class":181},[167,79908,267],{"class":173},[167,79910,35002],{"class":201},[167,79912,5325],{"class":173},[167,79914,79915],{"class":169,"line":512},[167,79916,47012],{"class":173},[167,79918,79919,79921,79923],{"class":169,"line":781},[167,79920,1292],{"class":173},[167,79922,9875],{"class":177},[167,79924,185],{"class":173},[167,79926,79927,79929,79931],{"class":169,"line":786},[167,79928,504],{"class":173},[167,79930,27354],{"class":177},[167,79932,185],{"class":173},[167,79934,79935,79937,79939],{"class":169,"line":2678},[167,79936,282],{"class":173},[167,79938,299],{"class":177},[167,79940,185],{"class":173},[3087,79942,47228],{"id":47227},[15,79944,47231,79945,47235],{},[3933,79946,47234],{},[33,79948,79949,79951,79953],{},[36,79950,47240],{},[36,79952,47243],{},[36,79954,47246],{},[15,79956,47249,79957,47253,79959,1679],{},[3933,79958,47252],{},[87,79960,13496],{},[22,79962,79963,47261,79965,47265],{"id":47258},[87,79964,46221],{},[87,79966,47264],{},[15,79968,47268,79969,1025,79971,1028,79973,1679],{},[9295,79970,9346],{},[9295,79972,9352],{},[9295,79974,47275],{},[154,79976,79978],{"className":156,"code":47278,"filename":3260,"highlights":79977,"language":162,"meta":163,"style":163},[160,313,161,335,341],[87,79979,79980,79990,80002,80006,80025,80033,80037,80045,80063,80081,80099,80117,80121,80140,80159,80178,80193],{"__ignoreMap":163},[167,79981,79982,79984,79986,79988],{"class":169,"line":170},[167,79983,174],{"class":173},[167,79985,178],{"class":177},[167,79987,182],{"class":181},[167,79989,185],{"class":173},[167,79991,79992,79994,79996,79998,80000],{"class":169,"line":188},[167,79993,192],{"class":191},[167,79995,195],{"class":173},[167,79997,198],{"class":191},[167,79999,24041],{"class":201},[167,80001,24044],{"class":173},[167,80003,80004],{"class":169,"line":205},[167,80005,209],{"emptyLinePlaceholder":208},[167,80007,80009,80011,80013,80015,80017,80019,80021,80023],{"class":80008,"line":160},[169,213],[167,80010,216],{"class":191},[167,80012,11700],{"class":219},[167,80014,223],{"class":191},[167,80016,226],{"class":181},[167,80018,229],{"class":173},[167,80020,47323],{"class":201},[167,80022,47326],{"class":173},[167,80024,47329],{"class":18662},[167,80026,80027,80029,80031],{"class":169,"line":238},[167,80028,282],{"class":173},[167,80030,178],{"class":177},[167,80032,185],{"class":173},[167,80034,80035],{"class":169,"line":243},[167,80036,209],{"emptyLinePlaceholder":208},[167,80038,80039,80041,80043],{"class":169,"line":261},[167,80040,174],{"class":173},[167,80042,299],{"class":177},[167,80044,185],{"class":173},[167,80046,80047,80049,80051,80053,80055,80057,80059,80061],{"class":169,"line":273},[167,80048,307],{"class":173},[167,80050,507],{"class":177},[167,80052,1182],{"class":181},[167,80054,267],{"class":173},[167,80056,47362],{"class":201},[167,80058,47365],{"class":173},[167,80060,507],{"class":177},[167,80062,185],{"class":173},[167,80064,80065,80067,80069,80071,80073,80075,80077,80079],{"class":169,"line":279},[167,80066,307],{"class":173},[167,80068,507],{"class":177},[167,80070,1182],{"class":181},[167,80072,267],{"class":173},[167,80074,47382],{"class":201},[167,80076,47385],{"class":173},[167,80078,507],{"class":177},[167,80080,185],{"class":173},[167,80082,80083,80085,80087,80089,80091,80093,80095,80097],{"class":169,"line":289},[167,80084,307],{"class":173},[167,80086,507],{"class":177},[167,80088,1182],{"class":181},[167,80090,267],{"class":173},[167,80092,47402],{"class":201},[167,80094,47405],{"class":173},[167,80096,507],{"class":177},[167,80098,185],{"class":173},[167,80100,80101,80103,80105,80107,80109,80111,80113,80115],{"class":169,"line":294},[167,80102,307],{"class":173},[167,80104,507],{"class":177},[167,80106,1182],{"class":181},[167,80108,267],{"class":173},[167,80110,47422],{"class":201},[167,80112,47425],{"class":173},[167,80114,507],{"class":177},[167,80116,185],{"class":173},[167,80118,80119],{"class":169,"line":304},[167,80120,209],{"emptyLinePlaceholder":208},[167,80122,80124,80126,80128,80130,80132,80134,80136,80138],{"class":80123,"line":313},[169,213],[167,80125,307],{"class":173},[167,80127,15],{"class":177},[167,80129,5694],{"class":181},[167,80131,267],{"class":173},[167,80133,47447],{"class":201},[167,80135,47450],{"class":173},[167,80137,15],{"class":177},[167,80139,185],{"class":173},[167,80141,80143,80145,80147,80149,80151,80153,80155,80157],{"class":80142,"line":161},[169,213],[167,80144,307],{"class":173},[167,80146,15],{"class":177},[167,80148,6961],{"class":181},[167,80150,267],{"class":173},[167,80152,47468],{"class":201},[167,80154,47471],{"class":173},[167,80156,15],{"class":177},[167,80158,185],{"class":173},[167,80160,80162,80164,80166,80168,80170,80172,80174,80176],{"class":80161,"line":335},[169,213],[167,80163,307],{"class":173},[167,80165,15],{"class":177},[167,80167,6961],{"class":181},[167,80169,267],{"class":173},[167,80171,47489],{"class":201},[167,80173,47492],{"class":173},[167,80175,15],{"class":177},[167,80177,185],{"class":173},[167,80179,80181,80183,80185,80187,80189,80191],{"class":80180,"line":341},[169,213],[167,80182,307],{"class":173},[167,80184,15],{"class":177},[167,80186,7038],{"class":181},[167,80188,47508],{"class":173},[167,80190,15],{"class":177},[167,80192,185],{"class":173},[167,80194,80195,80197,80199],{"class":169,"line":489},[167,80196,282],{"class":173},[167,80198,299],{"class":177},[167,80200,185],{"class":173},[154,80202,80204],{"className":156,"code":47523,"filename":3973,"highlights":80203,"language":162,"meta":163,"style":163},[238,489,495,501,512],[87,80205,80206,80214,80222,80228,80234,80245,80249,80253,80257,80265,80269,80277,80295,80313,80331,80349,80353,80372,80391,80410,80425],{"__ignoreMap":163},[167,80207,80208,80210,80212],{"class":169,"line":170},[167,80209,174],{"class":173},[167,80211,178],{"class":177},[167,80213,185],{"class":173},[167,80215,80216,80218,80220],{"class":169,"line":188},[167,80217,608],{"class":191},[167,80219,3991],{"class":191},[167,80221,1905],{"class":173},[167,80223,80224,80226],{"class":169,"line":205},[167,80225,7176],{"class":181},[167,80227,763],{"class":173},[167,80229,80230,80232],{"class":169,"line":160},[167,80231,1937],{"class":191},[167,80233,1905],{"class":173},[167,80235,80237,80239,80241,80243],{"class":80236,"line":238},[169,213],[167,80238,12585],{"class":173},[167,80240,47323],{"class":201},[167,80242,1025],{"class":173},[167,80244,47329],{"class":18662},[167,80246,80247],{"class":169,"line":243},[167,80248,24370],{"class":173},[167,80250,80251],{"class":169,"line":261},[167,80252,398],{"class":173},[167,80254,80255],{"class":169,"line":273},[167,80256,24148],{"class":173},[167,80258,80259,80261,80263],{"class":169,"line":279},[167,80260,282],{"class":173},[167,80262,178],{"class":177},[167,80264,185],{"class":173},[167,80266,80267],{"class":169,"line":289},[167,80268,209],{"emptyLinePlaceholder":208},[167,80270,80271,80273,80275],{"class":169,"line":294},[167,80272,174],{"class":173},[167,80274,299],{"class":177},[167,80276,185],{"class":173},[167,80278,80279,80281,80283,80285,80287,80289,80291,80293],{"class":169,"line":304},[167,80280,307],{"class":173},[167,80282,507],{"class":177},[167,80284,1182],{"class":181},[167,80286,267],{"class":173},[167,80288,47362],{"class":201},[167,80290,47365],{"class":173},[167,80292,507],{"class":177},[167,80294,185],{"class":173},[167,80296,80297,80299,80301,80303,80305,80307,80309,80311],{"class":169,"line":313},[167,80298,307],{"class":173},[167,80300,507],{"class":177},[167,80302,1182],{"class":181},[167,80304,267],{"class":173},[167,80306,47382],{"class":201},[167,80308,47385],{"class":173},[167,80310,507],{"class":177},[167,80312,185],{"class":173},[167,80314,80315,80317,80319,80321,80323,80325,80327,80329],{"class":169,"line":161},[167,80316,307],{"class":173},[167,80318,507],{"class":177},[167,80320,1182],{"class":181},[167,80322,267],{"class":173},[167,80324,47402],{"class":201},[167,80326,47405],{"class":173},[167,80328,507],{"class":177},[167,80330,185],{"class":173},[167,80332,80333,80335,80337,80339,80341,80343,80345,80347],{"class":169,"line":335},[167,80334,307],{"class":173},[167,80336,507],{"class":177},[167,80338,1182],{"class":181},[167,80340,267],{"class":173},[167,80342,47422],{"class":201},[167,80344,47425],{"class":173},[167,80346,507],{"class":177},[167,80348,185],{"class":173},[167,80350,80351],{"class":169,"line":341},[167,80352,209],{"emptyLinePlaceholder":208},[167,80354,80356,80358,80360,80362,80364,80366,80368,80370],{"class":80355,"line":489},[169,213],[167,80357,307],{"class":173},[167,80359,15],{"class":177},[167,80361,5694],{"class":181},[167,80363,267],{"class":173},[167,80365,47447],{"class":201},[167,80367,47450],{"class":173},[167,80369,15],{"class":177},[167,80371,185],{"class":173},[167,80373,80375,80377,80379,80381,80383,80385,80387,80389],{"class":80374,"line":495},[169,213],[167,80376,307],{"class":173},[167,80378,15],{"class":177},[167,80380,6961],{"class":181},[167,80382,267],{"class":173},[167,80384,47468],{"class":201},[167,80386,47471],{"class":173},[167,80388,15],{"class":177},[167,80390,185],{"class":173},[167,80392,80394,80396,80398,80400,80402,80404,80406,80408],{"class":80393,"line":501},[169,213],[167,80395,307],{"class":173},[167,80397,15],{"class":177},[167,80399,6961],{"class":181},[167,80401,267],{"class":173},[167,80403,47489],{"class":201},[167,80405,47492],{"class":173},[167,80407,15],{"class":177},[167,80409,185],{"class":173},[167,80411,80413,80415,80417,80419,80421,80423],{"class":80412,"line":512},[169,213],[167,80414,307],{"class":173},[167,80416,15],{"class":177},[167,80418,7038],{"class":181},[167,80420,47508],{"class":173},[167,80422,15],{"class":177},[167,80424,185],{"class":173},[167,80426,80427,80429,80431],{"class":169,"line":781},[167,80428,282],{"class":173},[167,80430,299],{"class":177},[167,80432,185],{"class":173},[22,80434,3085],{"id":3084},[3087,80436,47759,80437,47762,80439],{"id":47758},[87,80438,46108],{},[87,80440,13496],{},[15,80442,30738],{},[154,80444,80446],{"className":156,"code":47769,"filename":15284,"highlights":80445,"language":162,"meta":163,"style":163},[188],[87,80447,80448,80470,80475],{"__ignoreMap":163},[167,80449,80450,80452,80454,80456,80458,80460,80462,80464,80466,80468],{"class":169,"line":170},[167,80451,174],{"class":173},[167,80453,1242],{"class":177},[167,80455,5694],{"class":191},[167,80457,267],{"class":173},[167,80459,5080],{"class":201},[167,80461,47787],{"class":173},[167,80463,5080],{"class":201},[167,80465,47792],{"class":173},[167,80467,1242],{"class":177},[167,80469,185],{"class":173},[167,80471,80473],{"class":80472,"line":188},[169,213],[167,80474,47802],{"class":18662},[167,80476,80477,80479,80481,80483,80485,80487],{"class":169,"line":205},[167,80478,174],{"class":173},[167,80480,1242],{"class":177},[167,80482,7038],{"class":191},[167,80484,47813],{"class":173},[167,80486,1242],{"class":177},[167,80488,185],{"class":173},[5367,80490,80491],{},[15,80492,23773,80493,46824,80495,47827,80497,1679],{},[87,80494,46108],{},[3933,80496,47826],{},[87,80498,13496],{},[3087,80500,18524,80501,47835],{"id":47832},[87,80502,13659],{},[15,80504,47838,80505,47841,80507,1025,80509,47848,80511,1679],{},[87,80506,13659],{},[9295,80508,47844],{},[3933,80510,47847],{},[87,80512,13496],{},[3087,80514,47854,80515,47857],{"id":47853},[87,80516,13496],{},[15,80518,47860,80519,47863,80521,47867,80523,47870],{},[87,80520,13496],{},[3933,80522,47866],{},[87,80524,13659],{},[22,80526,23574],{"id":23573},[33,80528,80529,80537,80543],{},[36,80530,80531,47881,80535,47885],{},[3933,80532,80533],{},[87,80534,13496],{},[3933,80536,47884],{},[36,80538,80539,47893],{},[3933,80540,80541],{},[87,80542,47892],{},[36,80544,80545,47900],{},[3933,80546,80547],{},[87,80548,13659],{},[5367,80550,80551],{},[15,80552,47905,80553],{},[3933,80554,47908],{},[924,80556,47911],{},{"title":163,"searchDepth":188,"depth":188,"links":80558},[80559,80564,80565,80566,80569,80570,80575],{"id":46165,"depth":188,"text":46166,"children":80560},[80561,80562,80563],{"id":13496,"depth":205,"text":13496},{"id":46216,"depth":205,"text":47918},{"id":13659,"depth":205,"text":13659},{"id":46288,"depth":188,"text":46289},{"id":46327,"depth":188,"text":47922},{"id":46839,"depth":188,"text":47924,"children":80567},[80568],{"id":47227,"depth":205,"text":47228},{"id":47258,"depth":188,"text":47928},{"id":3084,"depth":188,"text":3085,"children":80571},[80572,80573,80574],{"id":47758,"depth":205,"text":47932},{"id":47832,"depth":205,"text":47934},{"id":47853,"depth":205,"text":47936},{"id":23573,"depth":188,"text":23574},{"updatedAt":47943,"coverCaption":47944,"author":946,"keywords":80577},[3258,13496,46108,13659,47946,47947,3260,3973],[80579],{"headline":47951,"author":80580,"datePublished":47943,"@type":961},{"name":946,"@type":959},{"title":46098,"description":47941},[80583,80584,80585,80586],{"tag":26466,"color":26467},{"tag":47958,"color":47959},{"tag":27757,"color":27758},{"tag":5424,"color":5425},{"id":80588,"title":80589,"body":80590,"cover":36728,"coverAlt":83271,"date":36730,"description":83272,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":83273,"navigation":208,"path":83276,"schemaOrg":83277,"seo":83281,"series":26460,"seriesDescription":60258,"seriesOrder":243,"seriesTitle":60259,"slug":942,"stem":83282,"tags":83283,"__hash__":83289},"blog\u002Fblog\u002Fdirectives-vue-v-model-guide.en.md","Vue Directives: v-model",{"type":8,"value":80591,"toc":83246},[80592,80597,80602,80604,80610,80615,80631,80633,80638,80642,80658,80677,80681,80684,80705,80708,80722,80731,80733,80738,80741,80762,80764,80769,80786,80788,80792,80794,80852,80860,80865,80872,80874,80900,80907,80909,80932,80936,80939,80961,80965,80970,80972,80976,81100,81229,81235,81373,81508,81512,81636,81765,81769,81773,81781,81914,82467,82471,82478,82649,83202,83204,83209,83212,83214,83244],[11,80593,68424,80595],{"id":80594},"vue-directives-v-model",[87,80596,23865],{},[15,80598,80599,80601],{},[87,80600,23865],{}," reduces friction in forms by syncing UI and state with a single declaration. When used well, it makes your components more readable and consistent; when misused, it can hide confusing data flows and subtle bugs.",[22,80603,62810],{"id":62809},[15,80605,80606,80607,80609],{},"In real interfaces, much of the experience depends on forms and filters.\n",[87,80608,23865],{}," lets you declare synchronization between view and state without manually manipulating the DOM, keeping code more predictable and easier to maintain.",[15,80611,62833,80612,80614],{},[87,80613,23865],{},", you can:",[33,80616,80617,80625,80628],{},[36,80618,80619,80620,33973,80622,80624],{},"Avoid repetitive ",[87,80621,33972],{},[87,80623,33976],{}," boilerplate.",[36,80626,80627],{},"Keep what the user sees aligned with reactive state.",[36,80629,80630],{},"Standardize the API of reusable form components.",[22,80632,62839],{"id":57680},[15,80634,60217,80635,80637],{},[87,80636,23865],{}," is syntactic sugar to bind a value and listen for updates.",[3087,80639,80641],{"id":80640},"on-native-elements","On native elements",[33,80643,80644,80649],{},[36,80645,80646,80648],{},[87,80647,34000],{}," is equivalent to binding the value and listening to the related event.",[36,80650,80651,80652,1025,80654,1025,80656,7863],{},"Vue automatically adapts the prop and event based on the control type (",[87,80653,2650],{},[87,80655,34009],{},[87,80657,34012],{},[15,80659,80660,80661,80663,80664,33973,80666,80668,80669,80671,80672,80674,80675,1679],{},"For example, on ",[87,80662,34018],{},", it maps to ",[87,80665,33972],{},[87,80667,33976],{},".\nOn ",[87,80670,34027],{},", it binds ",[87,80673,34031],{}," and listens to ",[87,80676,34009],{},[3087,80678,80680],{"id":80679},"on-components","On components",[15,80682,80683],{},"In Vue 3:",[33,80685,80686,80692,80698],{},[36,80687,80688,80689,80691],{},"It uses the ",[87,80690,34049],{}," prop by default.",[36,80693,80694,80695,80697],{},"It expects the ",[87,80696,34055],{}," event.",[36,80699,80700,80701,1025,80703,1679],{},"You can use arguments for additional models: ",[87,80702,34061],{},[87,80704,34064],{},[15,80706,80707],{},"It also supports modifiers such as:",[33,80709,80710,80714,80718],{},[36,80711,80712],{},[87,80713,34074],{},[36,80715,80716],{},[87,80717,34079],{},[36,80719,80720],{},[87,80721,34084],{},[15,80723,80724,80725,80727,80728,80730],{},"Since Vue 3.3+, you can use ",[87,80726,34090],{}," in ",[87,80729,1008],{}," to simplify model contract definitions in components.",[22,80732,62952],{"id":62951},[15,80734,62955,80735,80737],{},[87,80736,23865],{}," when the primary goal is syncing input data with application state.",[15,80739,80740],{},"Typical cases:",[33,80742,80743,80746,80749,80759],{},[36,80744,80745],{},"Registration, login, or profile forms.",[36,80747,80748],{},"Real-time search filters.",[36,80750,80751,80752,1025,80754,1025,80756,80758],{},"Reusable UI components (",[87,80753,34117],{},[87,80755,34120],{},[87,80757,34123],{},") with a consistent contract.",[36,80760,80761],{},"Quick interface settings (switches, sliders, preferences).",[22,80763,62980],{"id":62979},[15,80765,80766,80767,68578],{},"Avoid ",[87,80768,23865],{},[33,80770,80771,80777,80780,80783],{},[36,80772,80773,80774,80776],{},"The data is read-only or derived (",[87,80775,1661],{}," without a setter).",[36,80778,80779],{},"You need strict traceability for every change due to complex domain rules.",[36,80781,80782],{},"Per-keystroke processing is expensive and requires an explicit pipeline (debounce, throttle, heavy validation).",[36,80784,80785],{},"You need to preserve an explicit business-event flow, not just UI events.",[22,80787,63002],{"id":57819},[3087,80789,80791],{"id":80790},"_1-mutating-props-directly-in-the-child","1) Mutating props directly in the child",[15,80793,63012],{},[154,80795,80797],{"className":156,"code":80796,"filename":63112,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ modelValue: string }>()\nprops.modelValue = \"new value\"\n\u003C\u002Fscript>\n",[87,80798,80799,80815,80835,80844],{"__ignoreMap":163},[167,80800,80801,80803,80805,80807,80809,80811,80813],{"class":169,"line":170},[167,80802,174],{"class":173},[167,80804,178],{"class":177},[167,80806,182],{"class":181},[167,80808,1050],{"class":181},[167,80810,267],{"class":173},[167,80812,1055],{"class":201},[167,80814,185],{"class":173},[167,80816,80817,80819,80821,80823,80825,80827,80829,80831,80833],{"class":169,"line":188},[167,80818,216],{"class":191},[167,80820,1065],{"class":219},[167,80822,223],{"class":191},[167,80824,1070],{"class":181},[167,80826,1073],{"class":173},[167,80828,34049],{"class":254},[167,80830,583],{"class":191},[167,80832,586],{"class":219},[167,80834,1083],{"class":173},[167,80836,80837,80839,80841],{"class":169,"line":205},[167,80838,34205],{"class":173},[167,80840,267],{"class":191},[167,80842,80843],{"class":201}," \"new value\"\n",[167,80845,80846,80848,80850],{"class":169,"line":160},[167,80847,282],{"class":173},[167,80849,178],{"class":177},[167,80851,185],{"class":173},[15,80853,80854,80855,80857,80858,1679],{},"Correct: emit ",[87,80856,34055],{}," or use ",[87,80859,34227],{},[5367,80861,80862],{},[15,80863,80864],{},"Props are read-only. Mutating them breaks one-way data flow.",[3087,80866,80868,80869,80871],{"id":80867},"_2-binding-v-model-to-non-writable-expressions","2) Binding ",[87,80870,23865],{}," to non-writable expressions",[15,80873,63012],{},[154,80875,80876],{"className":156,"code":34244,"filename":63112,"language":162,"meta":163,"style":163},[87,80877,80878],{"__ignoreMap":163},[167,80879,80880,80882,80884,80886,80888,80890,80892,80894,80896,80898],{"class":169,"line":170},[167,80881,174],{"class":173},[167,80883,2650],{"class":177},[167,80885,2653],{"class":181},[167,80887,267],{"class":173},[167,80889,5080],{"class":201},[167,80891,34261],{"class":173},[167,80893,34264],{"class":181},[167,80895,34267],{"class":173},[167,80897,5080],{"class":201},[167,80899,5325],{"class":173},[5367,80901,80902],{},[15,80903,80904,80906],{},[87,80905,23865],{}," requires a writable reference. A derived expression has no setter.",[15,80908,63046],{},[154,80910,80912],{"className":156,"code":34284,"filename":80911,"language":162,"meta":163,"style":163},"Recommended",[87,80913,80914],{"__ignoreMap":163},[167,80915,80916,80918,80920,80922,80924,80926,80928,80930],{"class":169,"line":170},[167,80917,174],{"class":173},[167,80919,2650],{"class":177},[167,80921,2653],{"class":181},[167,80923,267],{"class":173},[167,80925,5080],{"class":201},[167,80927,5205],{"class":173},[167,80929,5080],{"class":201},[167,80931,5325],{"class":173},[3087,80933,80935],{"id":80934},"_3-not-using-modifiers-where-they-add-value","3) Not using modifiers where they add value",[15,80937,80938],{},"Example:",[33,80940,80941,80946,80956],{},[36,80942,62813,80943,80945],{},[87,80944,34074],{},", you store unnecessary spaces.",[36,80947,62813,80948,80950,80951,80953,80954,1679],{},[87,80949,34079],{},", you receive a ",[87,80952,1111],{}," where you expected a ",[87,80955,13929],{},[36,80957,62813,80958,80960],{},[87,80959,34084],{},", updates happen on every keystroke when you only needed updates on blur.",[3087,80962,80964],{"id":80963},"_4-putting-too-much-logic-in-the-model-setter","4) Putting too much logic in the model setter",[15,80966,73903,80967,80969],{},[87,80968,23865],{}," flow simple and move complex rules into functions or composables.\nThe model should sync state; business logic should not live in the setter.",[11,80971,63234],{"id":57925},[22,80973,80975],{"id":80974},"_1-text-input-with-basic-sanitization","1) Text input with basic sanitization",[154,80977,80980],{"className":156,"code":80978,"filename":3260,"highlights":80979,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst fullName = ref(\"\");\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Full name\n    \u003Cinput v-model.trim=\"fullName\" type=\"text\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[289],[87,80981,80982,80998,81010,81014,81030,81038,81042,81050,81058,81063,81084,81092],{"__ignoreMap":163},[167,80983,80984,80986,80988,80990,80992,80994,80996],{"class":169,"line":170},[167,80985,174],{"class":173},[167,80987,178],{"class":177},[167,80989,182],{"class":181},[167,80991,1050],{"class":181},[167,80993,267],{"class":173},[167,80995,1055],{"class":201},[167,80997,185],{"class":173},[167,80999,81000,81002,81004,81006,81008],{"class":169,"line":188},[167,81001,192],{"class":191},[167,81003,195],{"class":173},[167,81005,198],{"class":191},[167,81007,24041],{"class":201},[167,81009,24044],{"class":173},[167,81011,81012],{"class":169,"line":205},[167,81013,209],{"emptyLinePlaceholder":208},[167,81015,81016,81018,81020,81022,81024,81026,81028],{"class":169,"line":160},[167,81017,216],{"class":191},[167,81019,2175],{"class":219},[167,81021,223],{"class":191},[167,81023,226],{"class":181},[167,81025,229],{"class":173},[167,81027,31161],{"class":201},[167,81029,24169],{"class":173},[167,81031,81032,81034,81036],{"class":169,"line":238},[167,81033,282],{"class":173},[167,81035,178],{"class":177},[167,81037,185],{"class":173},[167,81039,81040],{"class":169,"line":243},[167,81041,209],{"emptyLinePlaceholder":208},[167,81043,81044,81046,81048],{"class":169,"line":261},[167,81045,174],{"class":173},[167,81047,299],{"class":177},[167,81049,185],{"class":173},[167,81051,81052,81054,81056],{"class":169,"line":273},[167,81053,307],{"class":173},[167,81055,9875],{"class":177},[167,81057,185],{"class":173},[167,81059,81060],{"class":169,"line":279},[167,81061,81062],{"class":173},"    Full name\n",[167,81064,81066,81068,81070,81072,81074,81076,81078,81080,81082],{"class":81065,"line":289},[169,213],[167,81067,1257],{"class":173},[167,81069,2650],{"class":177},[167,81071,34447],{"class":181},[167,81073,267],{"class":173},[167,81075,34452],{"class":201},[167,81077,1174],{"class":181},[167,81079,267],{"class":173},[167,81081,34459],{"class":201},[167,81083,5325],{"class":173},[167,81085,81086,81088,81090],{"class":169,"line":294},[167,81087,504],{"class":173},[167,81089,9875],{"class":177},[167,81091,185],{"class":173},[167,81093,81094,81096,81098],{"class":169,"line":304},[167,81095,282],{"class":173},[167,81097,299],{"class":177},[167,81099,185],{"class":173},[154,81101,81104],{"className":156,"code":81102,"filename":3973,"highlights":81103,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      fullName: \"\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Full name\n    \u003Cinput v-model.trim=\"fullName\" type=\"text\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[161],[87,81105,81106,81120,81128,81134,81140,81148,81152,81156,81160,81168,81172,81180,81188,81192,81213,81221],{"__ignoreMap":163},[167,81107,81108,81110,81112,81114,81116,81118],{"class":169,"line":170},[167,81109,174],{"class":173},[167,81111,178],{"class":177},[167,81113,1050],{"class":181},[167,81115,267],{"class":173},[167,81117,1055],{"class":201},[167,81119,185],{"class":173},[167,81121,81122,81124,81126],{"class":169,"line":188},[167,81123,608],{"class":191},[167,81125,3991],{"class":191},[167,81127,1905],{"class":173},[167,81129,81130,81132],{"class":169,"line":205},[167,81131,7176],{"class":181},[167,81133,763],{"class":173},[167,81135,81136,81138],{"class":169,"line":160},[167,81137,1937],{"class":191},[167,81139,1905],{"class":173},[167,81141,81142,81144,81146],{"class":169,"line":238},[167,81143,34522],{"class":173},[167,81145,31161],{"class":201},[167,81147,393],{"class":173},[167,81149,81150],{"class":169,"line":243},[167,81151,24370],{"class":173},[167,81153,81154],{"class":169,"line":261},[167,81155,398],{"class":173},[167,81157,81158],{"class":169,"line":273},[167,81159,24148],{"class":173},[167,81161,81162,81164,81166],{"class":169,"line":279},[167,81163,282],{"class":173},[167,81165,178],{"class":177},[167,81167,185],{"class":173},[167,81169,81170],{"class":169,"line":289},[167,81171,209],{"emptyLinePlaceholder":208},[167,81173,81174,81176,81178],{"class":169,"line":294},[167,81175,174],{"class":173},[167,81177,299],{"class":177},[167,81179,185],{"class":173},[167,81181,81182,81184,81186],{"class":169,"line":304},[167,81183,307],{"class":173},[167,81185,9875],{"class":177},[167,81187,185],{"class":173},[167,81189,81190],{"class":169,"line":313},[167,81191,81062],{"class":173},[167,81193,81195,81197,81199,81201,81203,81205,81207,81209,81211],{"class":81194,"line":161},[169,213],[167,81196,1257],{"class":173},[167,81198,2650],{"class":177},[167,81200,34447],{"class":181},[167,81202,267],{"class":173},[167,81204,34452],{"class":201},[167,81206,1174],{"class":181},[167,81208,267],{"class":173},[167,81210,34459],{"class":201},[167,81212,5325],{"class":173},[167,81214,81215,81217,81219],{"class":169,"line":335},[167,81216,504],{"class":173},[167,81218,9875],{"class":177},[167,81220,185],{"class":173},[167,81222,81223,81225,81227],{"class":169,"line":341},[167,81224,282],{"class":173},[167,81226,299],{"class":177},[167,81228,185],{"class":173},[22,81230,81232,81233],{"id":81231},"_2-numeric-input-with-v-modelnumber","2) Numeric input with ",[87,81234,34614],{},[154,81236,81239],{"className":156,"code":81237,"filename":3260,"highlights":81238,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst age = ref\u003Cnumber | null>(null);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Age\n    \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[289],[87,81240,81241,81257,81269,81273,81297,81305,81309,81317,81325,81330,81357,81365],{"__ignoreMap":163},[167,81242,81243,81245,81247,81249,81251,81253,81255],{"class":169,"line":170},[167,81244,174],{"class":173},[167,81246,178],{"class":177},[167,81248,182],{"class":181},[167,81250,1050],{"class":181},[167,81252,267],{"class":173},[167,81254,1055],{"class":201},[167,81256,185],{"class":173},[167,81258,81259,81261,81263,81265,81267],{"class":169,"line":188},[167,81260,192],{"class":191},[167,81262,195],{"class":173},[167,81264,198],{"class":191},[167,81266,24041],{"class":201},[167,81268,24044],{"class":173},[167,81270,81271],{"class":169,"line":205},[167,81272,209],{"emptyLinePlaceholder":208},[167,81274,81275,81277,81279,81281,81283,81285,81287,81289,81291,81293,81295],{"class":169,"line":160},[167,81276,216],{"class":191},[167,81278,34659],{"class":219},[167,81280,223],{"class":191},[167,81282,226],{"class":181},[167,81284,174],{"class":173},[167,81286,13929],{"class":219},[167,81288,659],{"class":191},[167,81290,6567],{"class":219},[167,81292,6570],{"class":173},[167,81294,6573],{"class":219},[167,81296,24169],{"class":173},[167,81298,81299,81301,81303],{"class":169,"line":238},[167,81300,282],{"class":173},[167,81302,178],{"class":177},[167,81304,185],{"class":173},[167,81306,81307],{"class":169,"line":243},[167,81308,209],{"emptyLinePlaceholder":208},[167,81310,81311,81313,81315],{"class":169,"line":261},[167,81312,174],{"class":173},[167,81314,299],{"class":177},[167,81316,185],{"class":173},[167,81318,81319,81321,81323],{"class":169,"line":273},[167,81320,307],{"class":173},[167,81322,9875],{"class":177},[167,81324,185],{"class":173},[167,81326,81327],{"class":169,"line":279},[167,81328,81329],{"class":173},"    Age\n",[167,81331,81333,81335,81337,81339,81341,81343,81345,81347,81349,81351,81353,81355],{"class":81332,"line":289},[169,213],[167,81334,1257],{"class":173},[167,81336,2650],{"class":177},[167,81338,34720],{"class":181},[167,81340,267],{"class":173},[167,81342,34725],{"class":201},[167,81344,1174],{"class":181},[167,81346,267],{"class":173},[167,81348,34732],{"class":201},[167,81350,34735],{"class":181},[167,81352,267],{"class":173},[167,81354,34740],{"class":201},[167,81356,5325],{"class":173},[167,81358,81359,81361,81363],{"class":169,"line":294},[167,81360,504],{"class":173},[167,81362,9875],{"class":177},[167,81364,185],{"class":173},[167,81366,81367,81369,81371],{"class":169,"line":304},[167,81368,282],{"class":173},[167,81370,299],{"class":177},[167,81372,185],{"class":173},[154,81374,81377],{"className":156,"code":81375,"filename":3973,"highlights":81376,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      age: null,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    Age\n    \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[161],[87,81378,81379,81393,81401,81407,81413,81421,81425,81429,81433,81441,81445,81453,81461,81465,81492,81500],{"__ignoreMap":163},[167,81380,81381,81383,81385,81387,81389,81391],{"class":169,"line":170},[167,81382,174],{"class":173},[167,81384,178],{"class":177},[167,81386,1050],{"class":181},[167,81388,267],{"class":173},[167,81390,1055],{"class":201},[167,81392,185],{"class":173},[167,81394,81395,81397,81399],{"class":169,"line":188},[167,81396,608],{"class":191},[167,81398,3991],{"class":191},[167,81400,1905],{"class":173},[167,81402,81403,81405],{"class":169,"line":205},[167,81404,7176],{"class":181},[167,81406,763],{"class":173},[167,81408,81409,81411],{"class":169,"line":160},[167,81410,1937],{"class":191},[167,81412,1905],{"class":173},[167,81414,81415,81417,81419],{"class":169,"line":238},[167,81416,34803],{"class":173},[167,81418,6573],{"class":219},[167,81420,393],{"class":173},[167,81422,81423],{"class":169,"line":243},[167,81424,24370],{"class":173},[167,81426,81427],{"class":169,"line":261},[167,81428,398],{"class":173},[167,81430,81431],{"class":169,"line":273},[167,81432,24148],{"class":173},[167,81434,81435,81437,81439],{"class":169,"line":279},[167,81436,282],{"class":173},[167,81438,178],{"class":177},[167,81440,185],{"class":173},[167,81442,81443],{"class":169,"line":289},[167,81444,209],{"emptyLinePlaceholder":208},[167,81446,81447,81449,81451],{"class":169,"line":294},[167,81448,174],{"class":173},[167,81450,299],{"class":177},[167,81452,185],{"class":173},[167,81454,81455,81457,81459],{"class":169,"line":304},[167,81456,307],{"class":173},[167,81458,9875],{"class":177},[167,81460,185],{"class":173},[167,81462,81463],{"class":169,"line":313},[167,81464,81329],{"class":173},[167,81466,81468,81470,81472,81474,81476,81478,81480,81482,81484,81486,81488,81490],{"class":81467,"line":161},[169,213],[167,81469,1257],{"class":173},[167,81471,2650],{"class":177},[167,81473,34720],{"class":181},[167,81475,267],{"class":173},[167,81477,34725],{"class":201},[167,81479,1174],{"class":181},[167,81481,267],{"class":173},[167,81483,34732],{"class":201},[167,81485,34735],{"class":181},[167,81487,267],{"class":173},[167,81489,34740],{"class":201},[167,81491,5325],{"class":173},[167,81493,81494,81496,81498],{"class":169,"line":335},[167,81495,504],{"class":173},[167,81497,9875],{"class":177},[167,81499,185],{"class":173},[167,81501,81502,81504,81506],{"class":169,"line":341},[167,81503,282],{"class":173},[167,81505,299],{"class":177},[167,81507,185],{"class":173},[22,81509,81511],{"id":81510},"_3-checkbox-for-boolean-state","3) Checkbox for boolean state",[154,81513,81516],{"className":156,"code":81514,"filename":3260,"highlights":81515,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst acceptedTerms = ref(false);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" \u002F>\n    I accept terms and conditions\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[279],[87,81517,81518,81534,81546,81550,81566,81574,81578,81586,81594,81615,81620,81628],{"__ignoreMap":163},[167,81519,81520,81522,81524,81526,81528,81530,81532],{"class":169,"line":170},[167,81521,174],{"class":173},[167,81523,178],{"class":177},[167,81525,182],{"class":181},[167,81527,1050],{"class":181},[167,81529,267],{"class":173},[167,81531,1055],{"class":201},[167,81533,185],{"class":173},[167,81535,81536,81538,81540,81542,81544],{"class":169,"line":188},[167,81537,192],{"class":191},[167,81539,195],{"class":173},[167,81541,198],{"class":191},[167,81543,24041],{"class":201},[167,81545,24044],{"class":173},[167,81547,81548],{"class":169,"line":205},[167,81549,209],{"emptyLinePlaceholder":208},[167,81551,81552,81554,81556,81558,81560,81562,81564],{"class":169,"line":160},[167,81553,216],{"class":191},[167,81555,34943],{"class":219},[167,81557,223],{"class":191},[167,81559,226],{"class":181},[167,81561,229],{"class":173},[167,81563,3392],{"class":219},[167,81565,24169],{"class":173},[167,81567,81568,81570,81572],{"class":169,"line":238},[167,81569,282],{"class":173},[167,81571,178],{"class":177},[167,81573,185],{"class":173},[167,81575,81576],{"class":169,"line":243},[167,81577,209],{"emptyLinePlaceholder":208},[167,81579,81580,81582,81584],{"class":169,"line":261},[167,81581,174],{"class":173},[167,81583,299],{"class":177},[167,81585,185],{"class":173},[167,81587,81588,81590,81592],{"class":169,"line":273},[167,81589,307],{"class":173},[167,81591,9875],{"class":177},[167,81593,185],{"class":173},[167,81595,81597,81599,81601,81603,81605,81607,81609,81611,81613],{"class":81596,"line":279},[169,213],[167,81598,1257],{"class":173},[167,81600,2650],{"class":177},[167,81602,2653],{"class":181},[167,81604,267],{"class":173},[167,81606,34995],{"class":201},[167,81608,1174],{"class":181},[167,81610,267],{"class":173},[167,81612,35002],{"class":201},[167,81614,5325],{"class":173},[167,81616,81617],{"class":169,"line":289},[167,81618,81619],{"class":173},"    I accept terms and conditions\n",[167,81621,81622,81624,81626],{"class":169,"line":294},[167,81623,504],{"class":173},[167,81625,9875],{"class":177},[167,81627,185],{"class":173},[167,81629,81630,81632,81634],{"class":169,"line":304},[167,81631,282],{"class":173},[167,81633,299],{"class":177},[167,81635,185],{"class":173},[154,81637,81640],{"className":156,"code":81638,"filename":3973,"highlights":81639,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      acceptedTerms: false,\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel>\n    \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" \u002F>\n    I accept terms and conditions\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[313],[87,81641,81642,81656,81664,81670,81676,81684,81688,81692,81696,81704,81708,81716,81724,81745,81749,81757],{"__ignoreMap":163},[167,81643,81644,81646,81648,81650,81652,81654],{"class":169,"line":170},[167,81645,174],{"class":173},[167,81647,178],{"class":177},[167,81649,1050],{"class":181},[167,81651,267],{"class":173},[167,81653,1055],{"class":201},[167,81655,185],{"class":173},[167,81657,81658,81660,81662],{"class":169,"line":188},[167,81659,608],{"class":191},[167,81661,3991],{"class":191},[167,81663,1905],{"class":173},[167,81665,81666,81668],{"class":169,"line":205},[167,81667,7176],{"class":181},[167,81669,763],{"class":173},[167,81671,81672,81674],{"class":169,"line":160},[167,81673,1937],{"class":191},[167,81675,1905],{"class":173},[167,81677,81678,81680,81682],{"class":169,"line":238},[167,81679,35070],{"class":173},[167,81681,3392],{"class":219},[167,81683,393],{"class":173},[167,81685,81686],{"class":169,"line":243},[167,81687,24370],{"class":173},[167,81689,81690],{"class":169,"line":261},[167,81691,398],{"class":173},[167,81693,81694],{"class":169,"line":273},[167,81695,24148],{"class":173},[167,81697,81698,81700,81702],{"class":169,"line":279},[167,81699,282],{"class":173},[167,81701,178],{"class":177},[167,81703,185],{"class":173},[167,81705,81706],{"class":169,"line":289},[167,81707,209],{"emptyLinePlaceholder":208},[167,81709,81710,81712,81714],{"class":169,"line":294},[167,81711,174],{"class":173},[167,81713,299],{"class":177},[167,81715,185],{"class":173},[167,81717,81718,81720,81722],{"class":169,"line":304},[167,81719,307],{"class":173},[167,81721,9875],{"class":177},[167,81723,185],{"class":173},[167,81725,81727,81729,81731,81733,81735,81737,81739,81741,81743],{"class":81726,"line":313},[169,213],[167,81728,1257],{"class":173},[167,81730,2650],{"class":177},[167,81732,2653],{"class":181},[167,81734,267],{"class":173},[167,81736,34995],{"class":201},[167,81738,1174],{"class":181},[167,81740,267],{"class":173},[167,81742,35002],{"class":201},[167,81744,5325],{"class":173},[167,81746,81747],{"class":169,"line":161},[167,81748,81619],{"class":173},[167,81750,81751,81753,81755],{"class":169,"line":335},[167,81752,504],{"class":173},[167,81754,9875],{"class":177},[167,81756,185],{"class":173},[167,81758,81759,81761,81763],{"class":169,"line":341},[167,81760,282],{"class":173},[167,81762,299],{"class":177},[167,81764,185],{"class":173},[22,81766,81768],{"id":81767},"_4-full-examples","4) Full examples",[3087,81770,81772],{"id":81771},"composition-api-example","Composition API example",[15,81774,81775,81776,78795,81778,81780],{},"Reusable ",[87,81777,35166],{},[87,81779,34227],{}," + filter screen:",[154,81782,81785],{"className":156,"code":81783,"filename":35174,"highlights":81784,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst model = defineModel\u003Cstring>({ default: \"\" });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"field\">\n    Search\n    \u003Cinput\n      v-model.trim=\"model\"\n      type=\"text\"\n      placeholder=\"Type to filter...\"\n    \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[279],[87,81786,81787,81803,81823,81831,81835,81843,81857,81862,81868,81877,81885,81894,81898,81906],{"__ignoreMap":163},[167,81788,81789,81791,81793,81795,81797,81799,81801],{"class":169,"line":170},[167,81790,174],{"class":173},[167,81792,178],{"class":177},[167,81794,182],{"class":181},[167,81796,1050],{"class":181},[167,81798,267],{"class":173},[167,81800,1055],{"class":201},[167,81802,185],{"class":173},[167,81804,81805,81807,81809,81811,81813,81815,81817,81819,81821],{"class":169,"line":188},[167,81806,216],{"class":191},[167,81808,35200],{"class":219},[167,81810,223],{"class":191},[167,81812,35205],{"class":181},[167,81814,174],{"class":173},[167,81816,1111],{"class":219},[167,81818,35212],{"class":173},[167,81820,31161],{"class":201},[167,81822,35217],{"class":173},[167,81824,81825,81827,81829],{"class":169,"line":205},[167,81826,282],{"class":173},[167,81828,178],{"class":177},[167,81830,185],{"class":173},[167,81832,81833],{"class":169,"line":160},[167,81834,209],{"emptyLinePlaceholder":208},[167,81836,81837,81839,81841],{"class":169,"line":238},[167,81838,174],{"class":173},[167,81840,299],{"class":177},[167,81842,185],{"class":173},[167,81844,81845,81847,81849,81851,81853,81855],{"class":169,"line":243},[167,81846,307],{"class":173},[167,81848,9875],{"class":177},[167,81850,1245],{"class":181},[167,81852,267],{"class":173},[167,81854,35250],{"class":201},[167,81856,185],{"class":173},[167,81858,81859],{"class":169,"line":261},[167,81860,81861],{"class":173},"    Search\n",[167,81863,81864,81866],{"class":169,"line":273},[167,81865,1257],{"class":173},[167,81867,17481],{"class":177},[167,81869,81871,81873,81875],{"class":81870,"line":279},[169,213],[167,81872,35269],{"class":181},[167,81874,267],{"class":173},[167,81876,35274],{"class":201},[167,81878,81879,81881,81883],{"class":169,"line":289},[167,81880,3739],{"class":181},[167,81882,267],{"class":173},[167,81884,35283],{"class":201},[167,81886,81887,81889,81891],{"class":169,"line":294},[167,81888,17504],{"class":181},[167,81890,267],{"class":173},[167,81892,81893],{"class":201},"\"Type to filter...\"\n",[167,81895,81896],{"class":169,"line":304},[167,81897,35297],{"class":173},[167,81899,81900,81902,81904],{"class":169,"line":313},[167,81901,504],{"class":173},[167,81903,9875],{"class":177},[167,81905,185],{"class":173},[167,81907,81908,81910,81912],{"class":169,"line":161},[167,81909,282],{"class":173},[167,81911,299],{"class":177},[167,81913,185],{"class":173},[154,81915,81917],{"className":156,"code":81916,"filename":35317,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport SearchInput from \".\u002FSearchInput.vue\";\n\nconst query = ref(\"\");\nconst minPrice = ref\u003Cnumber | null>(null);\nconst onlyInStock = ref(false);\n\nconst products = ref([\n  { id: 1, name: \"Mechanical keyboard\", price: 89, stock: true },\n  { id: 2, name: \"Ergonomic mouse\", price: 45, stock: false },\n  { id: 3, name: '27\" monitor', price: 299, stock: true },\n]);\n\nconst filteredProducts = computed(() =>\n  products.value.filter((p) => {\n    const matchesQuery =\n      p.name.toLowerCase().includes(query.value.toLowerCase());\n    const matchesPrice =\n      minPrice.value == null || p.price >= minPrice.value;\n    const matchesStock = !onlyInStock.value || p.stock;\n\n    return matchesQuery && matchesPrice && matchesStock;\n  })\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Filters\u003C\u002Fh2>\n\n    \u003CSearchInput v-model=\"query\" \u002F>\n\n    \u003Clabel>\n      Minimum price\n      \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" \u002F>\n    \u003C\u002Flabel>\n\n    \u003Clabel>\n      \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" \u002F>\n      In stock only\n    \u003C\u002Flabel>\n\n    \u003Cul>\n      \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n        {{ item.name }} - ${{ item.price }}\n        \u003Cspan v-if=\"!item.stock\">(out of stock)\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,81918,81919,81935,81947,81959,81963,81979,82003,82019,82023,82035,82056,82077,82098,82102,82106,82120,82136,82144,82160,82168,82184,82200,82204,82218,82222,82226,82234,82238,82246,82254,82266,82270,82284,82288,82296,82301,82327,82335,82339,82347,82367,82372,82380,82384,82392,82412,82416,82435,82443,82451,82459],{"__ignoreMap":163},[167,81920,81921,81923,81925,81927,81929,81931,81933],{"class":169,"line":170},[167,81922,174],{"class":173},[167,81924,178],{"class":177},[167,81926,182],{"class":181},[167,81928,1050],{"class":181},[167,81930,267],{"class":173},[167,81932,1055],{"class":201},[167,81934,185],{"class":173},[167,81936,81937,81939,81941,81943,81945],{"class":169,"line":188},[167,81938,192],{"class":191},[167,81940,1805],{"class":173},[167,81942,198],{"class":191},[167,81944,24041],{"class":201},[167,81946,24044],{"class":173},[167,81948,81949,81951,81953,81955,81957],{"class":169,"line":205},[167,81950,192],{"class":191},[167,81952,35354],{"class":173},[167,81954,198],{"class":191},[167,81956,35359],{"class":201},[167,81958,24044],{"class":173},[167,81960,81961],{"class":169,"line":160},[167,81962,209],{"emptyLinePlaceholder":208},[167,81964,81965,81967,81969,81971,81973,81975,81977],{"class":169,"line":238},[167,81966,216],{"class":191},[167,81968,2448],{"class":219},[167,81970,223],{"class":191},[167,81972,226],{"class":181},[167,81974,229],{"class":173},[167,81976,31161],{"class":201},[167,81978,24169],{"class":173},[167,81980,81981,81983,81985,81987,81989,81991,81993,81995,81997,81999,82001],{"class":169,"line":243},[167,81982,216],{"class":191},[167,81984,35388],{"class":219},[167,81986,223],{"class":191},[167,81988,226],{"class":181},[167,81990,174],{"class":173},[167,81992,13929],{"class":219},[167,81994,659],{"class":191},[167,81996,6567],{"class":219},[167,81998,6570],{"class":173},[167,82000,6573],{"class":219},[167,82002,24169],{"class":173},[167,82004,82005,82007,82009,82011,82013,82015,82017],{"class":169,"line":261},[167,82006,216],{"class":191},[167,82008,35413],{"class":219},[167,82010,223],{"class":191},[167,82012,226],{"class":181},[167,82014,229],{"class":173},[167,82016,3392],{"class":219},[167,82018,24169],{"class":173},[167,82020,82021],{"class":169,"line":273},[167,82022,209],{"emptyLinePlaceholder":208},[167,82024,82025,82027,82029,82031,82033],{"class":169,"line":279},[167,82026,216],{"class":191},[167,82028,35434],{"class":219},[167,82030,223],{"class":191},[167,82032,226],{"class":181},[167,82034,1827],{"class":173},[167,82036,82037,82039,82041,82043,82046,82048,82050,82052,82054],{"class":169,"line":289},[167,82038,1832],{"class":173},[167,82040,1835],{"class":219},[167,82042,1838],{"class":173},[167,82044,82045],{"class":201},"\"Mechanical keyboard\"",[167,82047,1844],{"class":173},[167,82049,35456],{"class":219},[167,82051,35459],{"class":173},[167,82053,390],{"class":219},[167,82055,1856],{"class":173},[167,82057,82058,82060,82062,82064,82067,82069,82071,82073,82075],{"class":169,"line":294},[167,82059,1832],{"class":173},[167,82061,1853],{"class":219},[167,82063,1838],{"class":173},[167,82065,82066],{"class":201},"\"Ergonomic mouse\"",[167,82068,1844],{"class":173},[167,82070,35479],{"class":219},[167,82072,35459],{"class":173},[167,82074,3392],{"class":219},[167,82076,1856],{"class":173},[167,82078,82079,82081,82083,82085,82088,82090,82092,82094,82096],{"class":169,"line":304},[167,82080,1832],{"class":173},[167,82082,8203],{"class":219},[167,82084,1838],{"class":173},[167,82086,82087],{"class":201},"'27\" monitor'",[167,82089,1844],{"class":173},[167,82091,35501],{"class":219},[167,82093,35459],{"class":173},[167,82095,390],{"class":219},[167,82097,1856],{"class":173},[167,82099,82100],{"class":169,"line":313},[167,82101,28545],{"class":173},[167,82103,82104],{"class":169,"line":161},[167,82105,209],{"emptyLinePlaceholder":208},[167,82107,82108,82110,82112,82114,82116,82118],{"class":169,"line":335},[167,82109,216],{"class":191},[167,82111,35522],{"class":219},[167,82113,223],{"class":191},[167,82115,1898],{"class":181},[167,82117,1493],{"class":173},[167,82119,9717],{"class":191},[167,82121,82122,82124,82126,82128,82130,82132,82134],{"class":169,"line":341},[167,82123,35535],{"class":173},[167,82125,8252],{"class":181},[167,82127,1918],{"class":173},[167,82129,15],{"class":254},[167,82131,693],{"class":173},[167,82133,639],{"class":191},[167,82135,1905],{"class":173},[167,82137,82138,82140,82142],{"class":169,"line":489},[167,82139,8266],{"class":191},[167,82141,35554],{"class":219},[167,82143,35557],{"class":191},[167,82145,82146,82148,82150,82152,82154,82156,82158],{"class":169,"line":495},[167,82147,35562],{"class":173},[167,82149,2506],{"class":181},[167,82151,2503],{"class":173},[167,82153,8290],{"class":181},[167,82155,35571],{"class":173},[167,82157,2506],{"class":181},[167,82159,35576],{"class":173},[167,82161,82162,82164,82166],{"class":169,"line":501},[167,82163,8266],{"class":191},[167,82165,35583],{"class":219},[167,82167,35557],{"class":191},[167,82169,82170,82172,82174,82176,82178,82180,82182],{"class":169,"line":512},[167,82171,35590],{"class":173},[167,82173,35593],{"class":191},[167,82175,6567],{"class":219},[167,82177,35598],{"class":191},[167,82179,35601],{"class":173},[167,82181,1991],{"class":191},[167,82183,35606],{"class":173},[167,82185,82186,82188,82190,82192,82194,82196,82198],{"class":169,"line":781},[167,82187,8266],{"class":191},[167,82189,35613],{"class":219},[167,82191,223],{"class":191},[167,82193,5625],{"class":191},[167,82195,35620],{"class":173},[167,82197,4264],{"class":191},[167,82199,35625],{"class":173},[167,82201,82202],{"class":169,"line":786},[167,82203,209],{"emptyLinePlaceholder":208},[167,82205,82206,82208,82210,82212,82214,82216],{"class":169,"line":2678},[167,82207,1937],{"class":191},[167,82209,35636],{"class":173},[167,82211,8339],{"class":191},[167,82213,35641],{"class":173},[167,82215,8339],{"class":191},[167,82217,35646],{"class":173},[167,82219,82220],{"class":169,"line":2692},[167,82221,8347],{"class":173},[167,82223,82224],{"class":169,"line":3575},[167,82225,24169],{"class":173},[167,82227,82228,82230,82232],{"class":169,"line":5028},[167,82229,282],{"class":173},[167,82231,178],{"class":177},[167,82233,185],{"class":173},[167,82235,82236],{"class":169,"line":5037},[167,82237,209],{"emptyLinePlaceholder":208},[167,82239,82240,82242,82244],{"class":169,"line":5046},[167,82241,174],{"class":173},[167,82243,299],{"class":177},[167,82245,185],{"class":173},[167,82247,82248,82250,82252],{"class":169,"line":6756},[167,82249,307],{"class":173},[167,82251,10117],{"class":177},[167,82253,185],{"class":173},[167,82255,82256,82258,82260,82262,82264],{"class":169,"line":6778},[167,82257,1257],{"class":173},[167,82259,22],{"class":177},[167,82261,46981],{"class":173},[167,82263,22],{"class":177},[167,82265,185],{"class":173},[167,82267,82268],{"class":169,"line":6783},[167,82269,209],{"emptyLinePlaceholder":208},[167,82271,82272,82274,82276,82278,82280,82282],{"class":169,"line":6788},[167,82273,1257],{"class":173},[167,82275,35166],{"class":177},[167,82277,2653],{"class":181},[167,82279,267],{"class":173},[167,82281,2658],{"class":201},[167,82283,5325],{"class":173},[167,82285,82286],{"class":169,"line":6793},[167,82287,209],{"emptyLinePlaceholder":208},[167,82289,82290,82292,82294],{"class":169,"line":6809},[167,82291,1257],{"class":173},[167,82293,9875],{"class":177},[167,82295,185],{"class":173},[167,82297,82298],{"class":169,"line":6824},[167,82299,82300],{"class":173},"      Minimum price\n",[167,82302,82303,82305,82307,82309,82311,82313,82315,82317,82319,82321,82323,82325],{"class":169,"line":6829},[167,82304,1268],{"class":173},[167,82306,2650],{"class":177},[167,82308,34720],{"class":181},[167,82310,267],{"class":173},[167,82312,35743],{"class":201},[167,82314,1174],{"class":181},[167,82316,267],{"class":173},[167,82318,34732],{"class":201},[167,82320,34735],{"class":181},[167,82322,267],{"class":173},[167,82324,34740],{"class":201},[167,82326,5325],{"class":173},[167,82328,82329,82331,82333],{"class":169,"line":6836},[167,82330,1292],{"class":173},[167,82332,9875],{"class":177},[167,82334,185],{"class":173},[167,82336,82337],{"class":169,"line":6845},[167,82338,209],{"emptyLinePlaceholder":208},[167,82340,82341,82343,82345],{"class":169,"line":6854},[167,82342,1257],{"class":173},[167,82344,9875],{"class":177},[167,82346,185],{"class":173},[167,82348,82349,82351,82353,82355,82357,82359,82361,82363,82365],{"class":169,"line":6861},[167,82350,1268],{"class":173},[167,82352,2650],{"class":177},[167,82354,2653],{"class":181},[167,82356,267],{"class":173},[167,82358,35790],{"class":201},[167,82360,1174],{"class":181},[167,82362,267],{"class":173},[167,82364,35002],{"class":201},[167,82366,5325],{"class":173},[167,82368,82369],{"class":169,"line":6879},[167,82370,82371],{"class":173},"      In stock only\n",[167,82373,82374,82376,82378],{"class":169,"line":6884},[167,82375,1292],{"class":173},[167,82377,9875],{"class":177},[167,82379,185],{"class":173},[167,82381,82382],{"class":169,"line":6889},[167,82383,209],{"emptyLinePlaceholder":208},[167,82385,82386,82388,82390],{"class":169,"line":6898},[167,82387,1257],{"class":173},[167,82389,33],{"class":177},[167,82391,185],{"class":173},[167,82393,82394,82396,82398,82400,82402,82404,82406,82408,82410],{"class":169,"line":6903},[167,82395,1268],{"class":173},[167,82397,36],{"class":177},[167,82399,18706],{"class":181},[167,82401,267],{"class":173},[167,82403,35836],{"class":201},[167,82405,10307],{"class":181},[167,82407,267],{"class":173},[167,82409,35843],{"class":201},[167,82411,185],{"class":173},[167,82413,82414],{"class":169,"line":6912},[167,82415,35850],{"class":173},[167,82417,82418,82420,82422,82424,82426,82428,82431,82433],{"class":169,"line":6928},[167,82419,32516],{"class":173},[167,82421,167],{"class":177},[167,82423,5694],{"class":181},[167,82425,267],{"class":173},[167,82427,35863],{"class":201},[167,82429,82430],{"class":173},">(out of stock)\u003C\u002F",[167,82432,167],{"class":177},[167,82434,185],{"class":173},[167,82436,82437,82439,82441],{"class":169,"line":6949},[167,82438,10170],{"class":173},[167,82440,36],{"class":177},[167,82442,185],{"class":173},[167,82444,82445,82447,82449],{"class":169,"line":6954},[167,82446,1292],{"class":173},[167,82448,33],{"class":177},[167,82450,185],{"class":173},[167,82452,82453,82455,82457],{"class":169,"line":6975},[167,82454,504],{"class":173},[167,82456,10117],{"class":177},[167,82458,185],{"class":173},[167,82460,82461,82463,82465],{"class":169,"line":6989},[167,82462,282],{"class":173},[167,82464,299],{"class":177},[167,82466,185],{"class":173},[3087,82468,82470],{"id":82469},"options-api-example","Options API example",[15,82472,82473,82474,57920,82476,583],{},"Same behavior using ",[87,82475,34049],{},[87,82477,34055],{},[154,82479,82481],{"className":156,"code":82480,"filename":35174,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: \"SearchInput\",\n  props: {\n    modelValue: {\n      type: String,\n      default: \"\",\n    },\n  },\n  emits: [\"update:modelValue\"],\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Clabel class=\"field\">\n    Search\n    \u003Cinput\n      :value=\"modelValue\"\n      type=\"text\"\n      placeholder=\"Type to filter...\"\n      @input=\"$emit('update:modelValue', $event.target.value.trim())\"\n    \u002F>\n  \u003C\u002Flabel>\n\u003C\u002Ftemplate>\n",[87,82482,82483,82497,82505,82513,82517,82521,82525,82533,82537,82541,82549,82553,82561,82565,82573,82587,82591,82597,82605,82613,82621,82629,82633,82641],{"__ignoreMap":163},[167,82484,82485,82487,82489,82491,82493,82495],{"class":169,"line":170},[167,82486,174],{"class":173},[167,82488,178],{"class":177},[167,82490,1050],{"class":181},[167,82492,267],{"class":173},[167,82494,1055],{"class":201},[167,82496,185],{"class":173},[167,82498,82499,82501,82503],{"class":169,"line":188},[167,82500,608],{"class":191},[167,82502,3991],{"class":191},[167,82504,1905],{"class":173},[167,82506,82507,82509,82511],{"class":169,"line":205},[167,82508,4398],{"class":173},[167,82510,35945],{"class":201},[167,82512,393],{"class":173},[167,82514,82515],{"class":169,"line":160},[167,82516,3999],{"class":173},[167,82518,82519],{"class":169,"line":238},[167,82520,35956],{"class":173},[167,82522,82523],{"class":169,"line":243},[167,82524,4011],{"class":173},[167,82526,82527,82529,82531],{"class":169,"line":261},[167,82528,4041],{"class":173},[167,82530,31161],{"class":201},[167,82532,393],{"class":173},[167,82534,82535],{"class":169,"line":273},[167,82536,755],{"class":173},[167,82538,82539],{"class":169,"line":279},[167,82540,398],{"class":173},[167,82542,82543,82545,82547],{"class":169,"line":289},[167,82544,4409],{"class":173},[167,82546,35983],{"class":201},[167,82548,4414],{"class":173},[167,82550,82551],{"class":169,"line":294},[167,82552,24148],{"class":173},[167,82554,82555,82557,82559],{"class":169,"line":304},[167,82556,282],{"class":173},[167,82558,178],{"class":177},[167,82560,185],{"class":173},[167,82562,82563],{"class":169,"line":313},[167,82564,209],{"emptyLinePlaceholder":208},[167,82566,82567,82569,82571],{"class":169,"line":161},[167,82568,174],{"class":173},[167,82570,299],{"class":177},[167,82572,185],{"class":173},[167,82574,82575,82577,82579,82581,82583,82585],{"class":169,"line":335},[167,82576,307],{"class":173},[167,82578,9875],{"class":177},[167,82580,1245],{"class":181},[167,82582,267],{"class":173},[167,82584,35250],{"class":201},[167,82586,185],{"class":173},[167,82588,82589],{"class":169,"line":341},[167,82590,81861],{"class":173},[167,82592,82593,82595],{"class":169,"line":489},[167,82594,1257],{"class":173},[167,82596,17481],{"class":177},[167,82598,82599,82601,82603],{"class":169,"line":495},[167,82600,36038],{"class":181},[167,82602,267],{"class":173},[167,82604,36043],{"class":201},[167,82606,82607,82609,82611],{"class":169,"line":501},[167,82608,3739],{"class":181},[167,82610,267],{"class":173},[167,82612,35283],{"class":201},[167,82614,82615,82617,82619],{"class":169,"line":512},[167,82616,17504],{"class":181},[167,82618,267],{"class":173},[167,82620,81893],{"class":201},[167,82622,82623,82625,82627],{"class":169,"line":781},[167,82624,36064],{"class":181},[167,82626,267],{"class":173},[167,82628,36069],{"class":201},[167,82630,82631],{"class":169,"line":786},[167,82632,35297],{"class":173},[167,82634,82635,82637,82639],{"class":169,"line":2678},[167,82636,504],{"class":173},[167,82638,9875],{"class":177},[167,82640,185],{"class":173},[167,82642,82643,82645,82647],{"class":169,"line":2692},[167,82644,282],{"class":173},[167,82646,299],{"class":177},[167,82648,185],{"class":173},[154,82650,82652],{"className":156,"code":82651,"filename":35317,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport SearchInput from \".\u002FSearchInput.vue\";\n\nexport default {\n  name: \"ProductFilter\",\n  components: { SearchInput },\n  data() {\n    return {\n      query: \"\",\n      minPrice: null,\n      onlyInStock: false,\n      products: [\n        { id: 1, name: \"Mechanical keyboard\", price: 89, stock: true },\n        { id: 2, name: \"Ergonomic mouse\", price: 45, stock: false },\n        { id: 3, name: '27\" monitor', price: 299, stock: true },\n      ],\n    };\n  },\n  computed: {\n    filteredProducts() {\n      return this.products.filter((p) => {\n        const matchesQuery = p.name\n          .toLowerCase()\n          .includes(this.query.toLowerCase());\n        const matchesPrice =\n          this.minPrice == null || p.price >= Number(this.minPrice);\n        const matchesStock = !this.onlyInStock || p.stock;\n\n        return matchesQuery && matchesPrice && matchesStock;\n      });\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Filters\u003C\u002Fh2>\n\n    \u003CSearchInput v-model=\"query\" \u002F>\n\n    \u003Clabel>\n      Minimum price\n      \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" \u002F>\n    \u003C\u002Flabel>\n\n    \u003Clabel>\n      \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" \u002F>\n      In stock only\n    \u003C\u002Flabel>\n\n    \u003Cul>\n      \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n        {{ item.name }} - ${{ item.price }}\n        \u003Cspan v-if=\"!item.stock\">(out of stock)\u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,82653,82654,82668,82680,82684,82692,82700,82704,82710,82716,82724,82732,82740,82744,82764,82784,82804,82808,82812,82816,82820,82826,82846,82856,82864,82880,82888,82912,82930,82934,82948,82952,82956,82960,82964,82972,82976,82984,82992,83004,83008,83022,83026,83034,83038,83064,83072,83076,83084,83104,83108,83116,83120,83128,83148,83152,83170,83178,83186,83194],{"__ignoreMap":163},[167,82655,82656,82658,82660,82662,82664,82666],{"class":169,"line":170},[167,82657,174],{"class":173},[167,82659,178],{"class":177},[167,82661,1050],{"class":181},[167,82663,267],{"class":173},[167,82665,1055],{"class":201},[167,82667,185],{"class":173},[167,82669,82670,82672,82674,82676,82678],{"class":169,"line":188},[167,82671,192],{"class":191},[167,82673,35354],{"class":173},[167,82675,198],{"class":191},[167,82677,35359],{"class":201},[167,82679,24044],{"class":173},[167,82681,82682],{"class":169,"line":205},[167,82683,209],{"emptyLinePlaceholder":208},[167,82685,82686,82688,82690],{"class":169,"line":160},[167,82687,608],{"class":191},[167,82689,3991],{"class":191},[167,82691,1905],{"class":173},[167,82693,82694,82696,82698],{"class":169,"line":238},[167,82695,4398],{"class":173},[167,82697,36139],{"class":201},[167,82699,393],{"class":173},[167,82701,82702],{"class":169,"line":243},[167,82703,36146],{"class":173},[167,82705,82706,82708],{"class":169,"line":261},[167,82707,7176],{"class":181},[167,82709,763],{"class":173},[167,82711,82712,82714],{"class":169,"line":273},[167,82713,1937],{"class":191},[167,82715,1905],{"class":173},[167,82717,82718,82720,82722],{"class":169,"line":279},[167,82719,36163],{"class":173},[167,82721,31161],{"class":201},[167,82723,393],{"class":173},[167,82725,82726,82728,82730],{"class":169,"line":289},[167,82727,36172],{"class":173},[167,82729,6573],{"class":219},[167,82731,393],{"class":173},[167,82733,82734,82736,82738],{"class":169,"line":294},[167,82735,36181],{"class":173},[167,82737,3392],{"class":219},[167,82739,393],{"class":173},[167,82741,82742],{"class":169,"line":304},[167,82743,36190],{"class":173},[167,82745,82746,82748,82750,82752,82754,82756,82758,82760,82762],{"class":169,"line":313},[167,82747,8677],{"class":173},[167,82749,1835],{"class":219},[167,82751,1838],{"class":173},[167,82753,82045],{"class":201},[167,82755,1844],{"class":173},[167,82757,35456],{"class":219},[167,82759,35459],{"class":173},[167,82761,390],{"class":219},[167,82763,1856],{"class":173},[167,82765,82766,82768,82770,82772,82774,82776,82778,82780,82782],{"class":169,"line":161},[167,82767,8677],{"class":173},[167,82769,1853],{"class":219},[167,82771,1838],{"class":173},[167,82773,82066],{"class":201},[167,82775,1844],{"class":173},[167,82777,35479],{"class":219},[167,82779,35459],{"class":173},[167,82781,3392],{"class":219},[167,82783,1856],{"class":173},[167,82785,82786,82788,82790,82792,82794,82796,82798,82800,82802],{"class":169,"line":335},[167,82787,8677],{"class":173},[167,82789,8203],{"class":219},[167,82791,1838],{"class":173},[167,82793,82087],{"class":201},[167,82795,1844],{"class":173},[167,82797,35501],{"class":219},[167,82799,35459],{"class":173},[167,82801,390],{"class":219},[167,82803,1856],{"class":173},[167,82805,82806],{"class":169,"line":341},[167,82807,16114],{"class":173},[167,82809,82810],{"class":169,"line":489},[167,82811,24370],{"class":173},[167,82813,82814],{"class":169,"line":495},[167,82815,398],{"class":173},[167,82817,82818],{"class":169,"line":501},[167,82819,8755],{"class":173},[167,82821,82822,82824],{"class":169,"line":512},[167,82823,36271],{"class":181},[167,82825,763],{"class":173},[167,82827,82828,82830,82832,82834,82836,82838,82840,82842,82844],{"class":169,"line":781},[167,82829,8767],{"class":191},[167,82831,7351],{"class":219},[167,82833,36282],{"class":173},[167,82835,8252],{"class":181},[167,82837,1918],{"class":173},[167,82839,15],{"class":254},[167,82841,693],{"class":173},[167,82843,639],{"class":191},[167,82845,1905],{"class":173},[167,82847,82848,82850,82852,82854],{"class":169,"line":786},[167,82849,8787],{"class":191},[167,82851,35554],{"class":219},[167,82853,223],{"class":191},[167,82855,36305],{"class":173},[167,82857,82858,82860,82862],{"class":169,"line":2678},[167,82859,8798],{"class":173},[167,82861,2506],{"class":181},[167,82863,2917],{"class":173},[167,82865,82866,82868,82870,82872,82874,82876,82878],{"class":169,"line":2692},[167,82867,8798],{"class":173},[167,82869,8290],{"class":181},[167,82871,229],{"class":173},[167,82873,4927],{"class":219},[167,82875,36326],{"class":173},[167,82877,2506],{"class":181},[167,82879,35576],{"class":173},[167,82881,82882,82884,82886],{"class":169,"line":3575},[167,82883,8787],{"class":191},[167,82885,35583],{"class":219},[167,82887,35557],{"class":191},[167,82889,82890,82892,82894,82896,82898,82900,82902,82904,82906,82908,82910],{"class":169,"line":5028},[167,82891,36343],{"class":219},[167,82893,36346],{"class":173},[167,82895,35593],{"class":191},[167,82897,6567],{"class":219},[167,82899,35598],{"class":191},[167,82901,35601],{"class":173},[167,82903,1991],{"class":191},[167,82905,36359],{"class":181},[167,82907,229],{"class":173},[167,82909,4927],{"class":219},[167,82911,36366],{"class":173},[167,82913,82914,82916,82918,82920,82922,82924,82926,82928],{"class":169,"line":5037},[167,82915,8787],{"class":191},[167,82917,35613],{"class":219},[167,82919,223],{"class":191},[167,82921,5625],{"class":191},[167,82923,4927],{"class":219},[167,82925,36381],{"class":173},[167,82927,4264],{"class":191},[167,82929,35625],{"class":173},[167,82931,82932],{"class":169,"line":5046},[167,82933,209],{"emptyLinePlaceholder":208},[167,82935,82936,82938,82940,82942,82944,82946],{"class":169,"line":6756},[167,82937,8855],{"class":191},[167,82939,35636],{"class":173},[167,82941,8339],{"class":191},[167,82943,35641],{"class":173},[167,82945,8339],{"class":191},[167,82947,35646],{"class":173},[167,82949,82950],{"class":169,"line":6778},[167,82951,36408],{"class":173},[167,82953,82954],{"class":169,"line":6783},[167,82955,755],{"class":173},[167,82957,82958],{"class":169,"line":6788},[167,82959,398],{"class":173},[167,82961,82962],{"class":169,"line":6793},[167,82963,24148],{"class":173},[167,82965,82966,82968,82970],{"class":169,"line":6809},[167,82967,282],{"class":173},[167,82969,178],{"class":177},[167,82971,185],{"class":173},[167,82973,82974],{"class":169,"line":6824},[167,82975,209],{"emptyLinePlaceholder":208},[167,82977,82978,82980,82982],{"class":169,"line":6829},[167,82979,174],{"class":173},[167,82981,299],{"class":177},[167,82983,185],{"class":173},[167,82985,82986,82988,82990],{"class":169,"line":6836},[167,82987,307],{"class":173},[167,82989,10117],{"class":177},[167,82991,185],{"class":173},[167,82993,82994,82996,82998,83000,83002],{"class":169,"line":6845},[167,82995,1257],{"class":173},[167,82997,22],{"class":177},[167,82999,46981],{"class":173},[167,83001,22],{"class":177},[167,83003,185],{"class":173},[167,83005,83006],{"class":169,"line":6854},[167,83007,209],{"emptyLinePlaceholder":208},[167,83009,83010,83012,83014,83016,83018,83020],{"class":169,"line":6861},[167,83011,1257],{"class":173},[167,83013,35166],{"class":177},[167,83015,2653],{"class":181},[167,83017,267],{"class":173},[167,83019,2658],{"class":201},[167,83021,5325],{"class":173},[167,83023,83024],{"class":169,"line":6879},[167,83025,209],{"emptyLinePlaceholder":208},[167,83027,83028,83030,83032],{"class":169,"line":6884},[167,83029,1257],{"class":173},[167,83031,9875],{"class":177},[167,83033,185],{"class":173},[167,83035,83036],{"class":169,"line":6889},[167,83037,82300],{"class":173},[167,83039,83040,83042,83044,83046,83048,83050,83052,83054,83056,83058,83060,83062],{"class":169,"line":6898},[167,83041,1268],{"class":173},[167,83043,2650],{"class":177},[167,83045,34720],{"class":181},[167,83047,267],{"class":173},[167,83049,35743],{"class":201},[167,83051,1174],{"class":181},[167,83053,267],{"class":173},[167,83055,34732],{"class":201},[167,83057,34735],{"class":181},[167,83059,267],{"class":173},[167,83061,34740],{"class":201},[167,83063,5325],{"class":173},[167,83065,83066,83068,83070],{"class":169,"line":6903},[167,83067,1292],{"class":173},[167,83069,9875],{"class":177},[167,83071,185],{"class":173},[167,83073,83074],{"class":169,"line":6912},[167,83075,209],{"emptyLinePlaceholder":208},[167,83077,83078,83080,83082],{"class":169,"line":6928},[167,83079,1257],{"class":173},[167,83081,9875],{"class":177},[167,83083,185],{"class":173},[167,83085,83086,83088,83090,83092,83094,83096,83098,83100,83102],{"class":169,"line":6949},[167,83087,1268],{"class":173},[167,83089,2650],{"class":177},[167,83091,2653],{"class":181},[167,83093,267],{"class":173},[167,83095,35790],{"class":201},[167,83097,1174],{"class":181},[167,83099,267],{"class":173},[167,83101,35002],{"class":201},[167,83103,5325],{"class":173},[167,83105,83106],{"class":169,"line":6954},[167,83107,82371],{"class":173},[167,83109,83110,83112,83114],{"class":169,"line":6975},[167,83111,1292],{"class":173},[167,83113,9875],{"class":177},[167,83115,185],{"class":173},[167,83117,83118],{"class":169,"line":6989},[167,83119,209],{"emptyLinePlaceholder":208},[167,83121,83122,83124,83126],{"class":169,"line":7003},[167,83123,1257],{"class":173},[167,83125,33],{"class":177},[167,83127,185],{"class":173},[167,83129,83130,83132,83134,83136,83138,83140,83142,83144,83146],{"class":169,"line":7017},[167,83131,1268],{"class":173},[167,83133,36],{"class":177},[167,83135,18706],{"class":181},[167,83137,267],{"class":173},[167,83139,35836],{"class":201},[167,83141,10307],{"class":181},[167,83143,267],{"class":173},[167,83145,35843],{"class":201},[167,83147,185],{"class":173},[167,83149,83150],{"class":169,"line":7026},[167,83151,35850],{"class":173},[167,83153,83154,83156,83158,83160,83162,83164,83166,83168],{"class":169,"line":7031},[167,83155,32516],{"class":173},[167,83157,167],{"class":177},[167,83159,5694],{"class":181},[167,83161,267],{"class":173},[167,83163,35863],{"class":201},[167,83165,82430],{"class":173},[167,83167,167],{"class":177},[167,83169,185],{"class":173},[167,83171,83172,83174,83176],{"class":169,"line":7048},[167,83173,10170],{"class":173},[167,83175,36],{"class":177},[167,83177,185],{"class":173},[167,83179,83180,83182,83184],{"class":169,"line":7057},[167,83181,1292],{"class":173},[167,83183,33],{"class":177},[167,83185,185],{"class":173},[167,83187,83188,83190,83192],{"class":169,"line":7555},[167,83189,504],{"class":173},[167,83191,10117],{"class":177},[167,83193,185],{"class":173},[167,83195,83196,83198,83200],{"class":169,"line":7560},[167,83197,282],{"class":173},[167,83199,299],{"class":177},[167,83201,185],{"class":173},[22,83203,60191],{"id":60190},[15,83205,83206,83208],{},[87,83207,23865],{}," is the idiomatic way in Vue 3 to sync UI and state in forms and components.",[15,83210,83211],{},"Use it to reduce boilerplate and keep consistency, but avoid turning it into a shortcut for complex business logic.",[15,83213,69582],{},[33,83215,83216,83222,83231,83241],{},[36,83217,83218,83219,83221],{},"On native inputs, it simplifies ",[87,83220,33972],{}," + events.",[36,83223,83224,83225,11227,83227,80857,83229,1679],{},"On components, respect ",[87,83226,34049],{},[87,83228,34055],{},[87,83230,34227],{},[36,83232,83233,83234,1025,83236,1025,83238,83240],{},"Apply modifiers (",[87,83235,34074],{},[87,83237,34079],{},[87,83239,34084],{},") when they improve data quality or performance.",[36,83242,83243],{},"Keep data flow clear and explicit when the domain requires it.",[924,83245,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":83247},[83248,83249,83253,83254,83255,83262,83263,83265,83266,83270],{"id":62809,"depth":188,"text":62810},{"id":57680,"depth":188,"text":62839,"children":83250},[83251,83252],{"id":80640,"depth":205,"text":80641},{"id":80679,"depth":205,"text":80680},{"id":62951,"depth":188,"text":62952},{"id":62979,"depth":188,"text":62980},{"id":57819,"depth":188,"text":63002,"children":83256},[83257,83258,83260,83261],{"id":80790,"depth":205,"text":80791},{"id":80867,"depth":205,"text":83259},"2) Binding v-model to non-writable expressions",{"id":80934,"depth":205,"text":80935},{"id":80963,"depth":205,"text":80964},{"id":80974,"depth":188,"text":80975},{"id":81231,"depth":188,"text":83264},"2) Numeric input with v-model.number",{"id":81510,"depth":188,"text":81511},{"id":81767,"depth":188,"text":81768,"children":83267},[83268,83269],{"id":81771,"depth":205,"text":81772},{"id":82469,"depth":205,"text":82470},{"id":60190,"depth":188,"text":60191},"Temporary cover image for the article about v-model in Vue","Learn how to use v-model in Vue 3 for forms and custom components, with Composition API and Options API, real-world cases, common mistakes, and best practices.",{"updatedAt":36733,"coverCaption":65655,"author":946,"keywords":83274},[3258,23865,83275,36736,3260,3973],"forms","\u002Fblog\u002Fdirectives-vue-v-model-guide.en",[83278],{"headline":83279,"author":83280,"datePublished":36733,"@type":961},"Vue v-model directive: complete guide for forms and components",{"name":946,"@type":959},{"title":80589,"description":83272},"blog\u002Fdirectives-vue-v-model-guide.en",[83284,83285,83287,83288],{"tag":60263,"color":26467},{"tag":83286,"color":36748},"Forms",{"tag":60269,"color":3270},{"tag":65670,"color":5425},"uLZjrfCHAQykPqywL7eBldBK5SWJV2OW6O4HVH8Uau4",{"id":33938,"title":33939,"body":83291,"cover":36728,"coverAlt":36729,"date":36730,"description":36731,"draft":940,"extension":941,"lab":942,"locale":943,"meta":85860,"navigation":208,"path":36737,"schemaOrg":85862,"seo":85865,"series":26460,"seriesDescription":26461,"seriesOrder":243,"seriesTitle":26462,"slug":942,"stem":36743,"tags":85866,"__hash__":36751},{"type":8,"value":83292,"toc":85837},[83293,83297,83301,83303,83307,83311,83323,83325,83329,83331,83345,83359,83361,83363,83379,83381,83395,83401,83403,83407,83409,83425,83427,83431,83443,83445,83447,83449,83505,83511,83515,83519,83521,83547,83553,83555,83577,83579,83581,83599,83601,83605,83607,83609,83731,83859,83863,83999,84133,84135,84257,84385,84387,84389,84395,84525,85071,85073,85079,85249,85801,85803,85807,85809,85811,85835],[11,83294,26483,83295],{"id":33944},[87,83296,23865],{},[15,83298,83299,33951],{},[87,83300,23865],{},[22,83302,26503],{"id":26502},[15,83304,33956,83305,33959],{},[87,83306,23865],{},[15,83308,3810,83309,33964],{},[87,83310,23865],{},[33,83312,83313,83319,83321],{},[36,83314,33969,83315,33973,83317,1679],{},[87,83316,33972],{},[87,83318,33976],{},[36,83320,33979],{},[36,83322,33982],{},[22,83324,6257],{"id":6256},[15,83326,26413,83327,33989],{},[87,83328,23865],{},[3087,83330,33993],{"id":33992},[33,83332,83333,83337],{},[36,83334,83335,34001],{},[87,83336,34000],{},[36,83338,34004,83339,1025,83341,1025,83343,7863],{},[87,83340,2650],{},[87,83342,34009],{},[87,83344,34012],{},[15,83346,34015,83347,34019,83349,33973,83351,34024,83353,34028,83355,34032,83357,1679],{},[87,83348,34018],{},[87,83350,33972],{},[87,83352,33976],{},[87,83354,34027],{},[87,83356,34031],{},[87,83358,34009],{},[3087,83360,34038],{"id":34037},[15,83362,34041],{},[33,83364,83365,83369,83373],{},[36,83366,34046,83367,1679],{},[87,83368,34049],{},[36,83370,34052,83371,1679],{},[87,83372,34055],{},[36,83374,34058,83375,1025,83377,1679],{},[87,83376,34061],{},[87,83378,34064],{},[15,83380,34067],{},[33,83382,83383,83387,83391],{},[36,83384,83385],{},[87,83386,34074],{},[36,83388,83389],{},[87,83390,34079],{},[36,83392,83393],{},[87,83394,34084],{},[15,83396,34087,83397,34091,83399,34094],{},[87,83398,34090],{},[87,83400,1008],{},[22,83402,6322],{"id":6321},[15,83404,1582,83405,34101],{},[87,83406,23865],{},[15,83408,9308],{},[33,83410,83411,83413,83415,83423],{},[36,83412,34108],{},[36,83414,34111],{},[36,83416,34114,83417,1025,83419,1025,83421,34124],{},[87,83418,34117],{},[87,83420,34120],{},[87,83422,34123],{},[36,83424,34127],{},[22,83426,6349],{"id":6348},[15,83428,13622,83429,13627],{},[87,83430,23865],{},[33,83432,83433,83437,83439,83441],{},[36,83434,34138,83435,34141],{},[87,83436,1661],{},[36,83438,34144],{},[36,83440,34147],{},[36,83442,34150],{},[22,83444,3085],{"id":3084},[3087,83446,34156],{"id":34155},[15,83448,30738],{},[154,83450,83451],{"className":156,"code":34161,"filename":34162,"language":162,"meta":163,"style":163},[87,83452,83453,83469,83489,83497],{"__ignoreMap":163},[167,83454,83455,83457,83459,83461,83463,83465,83467],{"class":169,"line":170},[167,83456,174],{"class":173},[167,83458,178],{"class":177},[167,83460,182],{"class":181},[167,83462,1050],{"class":181},[167,83464,267],{"class":173},[167,83466,1055],{"class":201},[167,83468,185],{"class":173},[167,83470,83471,83473,83475,83477,83479,83481,83483,83485,83487],{"class":169,"line":188},[167,83472,216],{"class":191},[167,83474,1065],{"class":219},[167,83476,223],{"class":191},[167,83478,1070],{"class":181},[167,83480,1073],{"class":173},[167,83482,34049],{"class":254},[167,83484,583],{"class":191},[167,83486,586],{"class":219},[167,83488,1083],{"class":173},[167,83490,83491,83493,83495],{"class":169,"line":205},[167,83492,34205],{"class":173},[167,83494,267],{"class":191},[167,83496,34210],{"class":201},[167,83498,83499,83501,83503],{"class":169,"line":160},[167,83500,282],{"class":173},[167,83502,178],{"class":177},[167,83504,185],{"class":173},[15,83506,34221,83507,34224,83509,1679],{},[87,83508,34055],{},[87,83510,34227],{},[5367,83512,83513],{},[15,83514,34232],{},[3087,83516,34236,83517,34239],{"id":34235},[87,83518,23865],{},[15,83520,30738],{},[154,83522,83523],{"className":156,"code":34244,"filename":34162,"language":162,"meta":163,"style":163},[87,83524,83525],{"__ignoreMap":163},[167,83526,83527,83529,83531,83533,83535,83537,83539,83541,83543,83545],{"class":169,"line":170},[167,83528,174],{"class":173},[167,83530,2650],{"class":177},[167,83532,2653],{"class":181},[167,83534,267],{"class":173},[167,83536,5080],{"class":201},[167,83538,34261],{"class":173},[167,83540,34264],{"class":181},[167,83542,34267],{"class":173},[167,83544,5080],{"class":201},[167,83546,5325],{"class":173},[5367,83548,83549],{},[15,83550,83551,34278],{},[87,83552,23865],{},[15,83554,34281],{},[154,83556,83557],{"className":156,"code":34284,"filename":34285,"language":162,"meta":163,"style":163},[87,83558,83559],{"__ignoreMap":163},[167,83560,83561,83563,83565,83567,83569,83571,83573,83575],{"class":169,"line":170},[167,83562,174],{"class":173},[167,83564,2650],{"class":177},[167,83566,2653],{"class":181},[167,83568,267],{"class":173},[167,83570,5080],{"class":201},[167,83572,5205],{"class":173},[167,83574,5080],{"class":201},[167,83576,5325],{"class":173},[3087,83578,34309],{"id":34308},[15,83580,34312],{},[33,83582,83583,83587,83595],{},[36,83584,21844,83585,34319],{},[87,83586,34074],{},[36,83588,21844,83589,34324,83591,34327,83593,1679],{},[87,83590,34079],{},[87,83592,1111],{},[87,83594,13929],{},[36,83596,21844,83597,34334],{},[87,83598,34084],{},[3087,83600,34338],{"id":34337},[15,83602,34341,83603,34344],{},[87,83604,23865],{},[11,83606,7997],{"id":7996},[22,83608,34350],{"id":34349},[154,83610,83612],{"className":156,"code":34353,"filename":3260,"highlights":83611,"language":162,"meta":163,"style":163},[289],[87,83613,83614,83630,83642,83646,83662,83670,83674,83682,83690,83694,83715,83723],{"__ignoreMap":163},[167,83615,83616,83618,83620,83622,83624,83626,83628],{"class":169,"line":170},[167,83617,174],{"class":173},[167,83619,178],{"class":177},[167,83621,182],{"class":181},[167,83623,1050],{"class":181},[167,83625,267],{"class":173},[167,83627,1055],{"class":201},[167,83629,185],{"class":173},[167,83631,83632,83634,83636,83638,83640],{"class":169,"line":188},[167,83633,192],{"class":191},[167,83635,195],{"class":173},[167,83637,198],{"class":191},[167,83639,24041],{"class":201},[167,83641,24044],{"class":173},[167,83643,83644],{"class":169,"line":205},[167,83645,209],{"emptyLinePlaceholder":208},[167,83647,83648,83650,83652,83654,83656,83658,83660],{"class":169,"line":160},[167,83649,216],{"class":191},[167,83651,2175],{"class":219},[167,83653,223],{"class":191},[167,83655,226],{"class":181},[167,83657,229],{"class":173},[167,83659,31161],{"class":201},[167,83661,24169],{"class":173},[167,83663,83664,83666,83668],{"class":169,"line":238},[167,83665,282],{"class":173},[167,83667,178],{"class":177},[167,83669,185],{"class":173},[167,83671,83672],{"class":169,"line":243},[167,83673,209],{"emptyLinePlaceholder":208},[167,83675,83676,83678,83680],{"class":169,"line":261},[167,83677,174],{"class":173},[167,83679,299],{"class":177},[167,83681,185],{"class":173},[167,83683,83684,83686,83688],{"class":169,"line":273},[167,83685,307],{"class":173},[167,83687,9875],{"class":177},[167,83689,185],{"class":173},[167,83691,83692],{"class":169,"line":279},[167,83693,34437],{"class":173},[167,83695,83697,83699,83701,83703,83705,83707,83709,83711,83713],{"class":83696,"line":289},[169,213],[167,83698,1257],{"class":173},[167,83700,2650],{"class":177},[167,83702,34447],{"class":181},[167,83704,267],{"class":173},[167,83706,34452],{"class":201},[167,83708,1174],{"class":181},[167,83710,267],{"class":173},[167,83712,34459],{"class":201},[167,83714,5325],{"class":173},[167,83716,83717,83719,83721],{"class":169,"line":294},[167,83718,504],{"class":173},[167,83720,9875],{"class":177},[167,83722,185],{"class":173},[167,83724,83725,83727,83729],{"class":169,"line":304},[167,83726,282],{"class":173},[167,83728,299],{"class":177},[167,83730,185],{"class":173},[154,83732,83734],{"className":156,"code":34480,"filename":3973,"highlights":83733,"language":162,"meta":163,"style":163},[161],[87,83735,83736,83750,83758,83764,83770,83778,83782,83786,83790,83798,83802,83810,83818,83822,83843,83851],{"__ignoreMap":163},[167,83737,83738,83740,83742,83744,83746,83748],{"class":169,"line":170},[167,83739,174],{"class":173},[167,83741,178],{"class":177},[167,83743,1050],{"class":181},[167,83745,267],{"class":173},[167,83747,1055],{"class":201},[167,83749,185],{"class":173},[167,83751,83752,83754,83756],{"class":169,"line":188},[167,83753,608],{"class":191},[167,83755,3991],{"class":191},[167,83757,1905],{"class":173},[167,83759,83760,83762],{"class":169,"line":205},[167,83761,7176],{"class":181},[167,83763,763],{"class":173},[167,83765,83766,83768],{"class":169,"line":160},[167,83767,1937],{"class":191},[167,83769,1905],{"class":173},[167,83771,83772,83774,83776],{"class":169,"line":238},[167,83773,34522],{"class":173},[167,83775,31161],{"class":201},[167,83777,393],{"class":173},[167,83779,83780],{"class":169,"line":243},[167,83781,24370],{"class":173},[167,83783,83784],{"class":169,"line":261},[167,83785,398],{"class":173},[167,83787,83788],{"class":169,"line":273},[167,83789,24148],{"class":173},[167,83791,83792,83794,83796],{"class":169,"line":279},[167,83793,282],{"class":173},[167,83795,178],{"class":177},[167,83797,185],{"class":173},[167,83799,83800],{"class":169,"line":289},[167,83801,209],{"emptyLinePlaceholder":208},[167,83803,83804,83806,83808],{"class":169,"line":294},[167,83805,174],{"class":173},[167,83807,299],{"class":177},[167,83809,185],{"class":173},[167,83811,83812,83814,83816],{"class":169,"line":304},[167,83813,307],{"class":173},[167,83815,9875],{"class":177},[167,83817,185],{"class":173},[167,83819,83820],{"class":169,"line":313},[167,83821,34437],{"class":173},[167,83823,83825,83827,83829,83831,83833,83835,83837,83839,83841],{"class":83824,"line":161},[169,213],[167,83826,1257],{"class":173},[167,83828,2650],{"class":177},[167,83830,34447],{"class":181},[167,83832,267],{"class":173},[167,83834,34452],{"class":201},[167,83836,1174],{"class":181},[167,83838,267],{"class":173},[167,83840,34459],{"class":201},[167,83842,5325],{"class":173},[167,83844,83845,83847,83849],{"class":169,"line":335},[167,83846,504],{"class":173},[167,83848,9875],{"class":177},[167,83850,185],{"class":173},[167,83852,83853,83855,83857],{"class":169,"line":341},[167,83854,282],{"class":173},[167,83856,299],{"class":177},[167,83858,185],{"class":173},[22,83860,34611,83861],{"id":34610},[87,83862,34614],{},[154,83864,83866],{"className":156,"code":34617,"filename":3260,"highlights":83865,"language":162,"meta":163,"style":163},[289],[87,83867,83868,83884,83896,83900,83924,83932,83936,83944,83952,83956,83983,83991],{"__ignoreMap":163},[167,83869,83870,83872,83874,83876,83878,83880,83882],{"class":169,"line":170},[167,83871,174],{"class":173},[167,83873,178],{"class":177},[167,83875,182],{"class":181},[167,83877,1050],{"class":181},[167,83879,267],{"class":173},[167,83881,1055],{"class":201},[167,83883,185],{"class":173},[167,83885,83886,83888,83890,83892,83894],{"class":169,"line":188},[167,83887,192],{"class":191},[167,83889,195],{"class":173},[167,83891,198],{"class":191},[167,83893,24041],{"class":201},[167,83895,24044],{"class":173},[167,83897,83898],{"class":169,"line":205},[167,83899,209],{"emptyLinePlaceholder":208},[167,83901,83902,83904,83906,83908,83910,83912,83914,83916,83918,83920,83922],{"class":169,"line":160},[167,83903,216],{"class":191},[167,83905,34659],{"class":219},[167,83907,223],{"class":191},[167,83909,226],{"class":181},[167,83911,174],{"class":173},[167,83913,13929],{"class":219},[167,83915,659],{"class":191},[167,83917,6567],{"class":219},[167,83919,6570],{"class":173},[167,83921,6573],{"class":219},[167,83923,24169],{"class":173},[167,83925,83926,83928,83930],{"class":169,"line":238},[167,83927,282],{"class":173},[167,83929,178],{"class":177},[167,83931,185],{"class":173},[167,83933,83934],{"class":169,"line":243},[167,83935,209],{"emptyLinePlaceholder":208},[167,83937,83938,83940,83942],{"class":169,"line":261},[167,83939,174],{"class":173},[167,83941,299],{"class":177},[167,83943,185],{"class":173},[167,83945,83946,83948,83950],{"class":169,"line":273},[167,83947,307],{"class":173},[167,83949,9875],{"class":177},[167,83951,185],{"class":173},[167,83953,83954],{"class":169,"line":279},[167,83955,34710],{"class":173},[167,83957,83959,83961,83963,83965,83967,83969,83971,83973,83975,83977,83979,83981],{"class":83958,"line":289},[169,213],[167,83960,1257],{"class":173},[167,83962,2650],{"class":177},[167,83964,34720],{"class":181},[167,83966,267],{"class":173},[167,83968,34725],{"class":201},[167,83970,1174],{"class":181},[167,83972,267],{"class":173},[167,83974,34732],{"class":201},[167,83976,34735],{"class":181},[167,83978,267],{"class":173},[167,83980,34740],{"class":201},[167,83982,5325],{"class":173},[167,83984,83985,83987,83989],{"class":169,"line":294},[167,83986,504],{"class":173},[167,83988,9875],{"class":177},[167,83990,185],{"class":173},[167,83992,83993,83995,83997],{"class":169,"line":304},[167,83994,282],{"class":173},[167,83996,299],{"class":177},[167,83998,185],{"class":173},[154,84000,84002],{"className":156,"code":34761,"filename":3973,"highlights":84001,"language":162,"meta":163,"style":163},[161],[87,84003,84004,84018,84026,84032,84038,84046,84050,84054,84058,84066,84070,84078,84086,84090,84117,84125],{"__ignoreMap":163},[167,84005,84006,84008,84010,84012,84014,84016],{"class":169,"line":170},[167,84007,174],{"class":173},[167,84009,178],{"class":177},[167,84011,1050],{"class":181},[167,84013,267],{"class":173},[167,84015,1055],{"class":201},[167,84017,185],{"class":173},[167,84019,84020,84022,84024],{"class":169,"line":188},[167,84021,608],{"class":191},[167,84023,3991],{"class":191},[167,84025,1905],{"class":173},[167,84027,84028,84030],{"class":169,"line":205},[167,84029,7176],{"class":181},[167,84031,763],{"class":173},[167,84033,84034,84036],{"class":169,"line":160},[167,84035,1937],{"class":191},[167,84037,1905],{"class":173},[167,84039,84040,84042,84044],{"class":169,"line":238},[167,84041,34803],{"class":173},[167,84043,6573],{"class":219},[167,84045,393],{"class":173},[167,84047,84048],{"class":169,"line":243},[167,84049,24370],{"class":173},[167,84051,84052],{"class":169,"line":261},[167,84053,398],{"class":173},[167,84055,84056],{"class":169,"line":273},[167,84057,24148],{"class":173},[167,84059,84060,84062,84064],{"class":169,"line":279},[167,84061,282],{"class":173},[167,84063,178],{"class":177},[167,84065,185],{"class":173},[167,84067,84068],{"class":169,"line":289},[167,84069,209],{"emptyLinePlaceholder":208},[167,84071,84072,84074,84076],{"class":169,"line":294},[167,84073,174],{"class":173},[167,84075,299],{"class":177},[167,84077,185],{"class":173},[167,84079,84080,84082,84084],{"class":169,"line":304},[167,84081,307],{"class":173},[167,84083,9875],{"class":177},[167,84085,185],{"class":173},[167,84087,84088],{"class":169,"line":313},[167,84089,34710],{"class":173},[167,84091,84093,84095,84097,84099,84101,84103,84105,84107,84109,84111,84113,84115],{"class":84092,"line":161},[169,213],[167,84094,1257],{"class":173},[167,84096,2650],{"class":177},[167,84098,34720],{"class":181},[167,84100,267],{"class":173},[167,84102,34725],{"class":201},[167,84104,1174],{"class":181},[167,84106,267],{"class":173},[167,84108,34732],{"class":201},[167,84110,34735],{"class":181},[167,84112,267],{"class":173},[167,84114,34740],{"class":201},[167,84116,5325],{"class":173},[167,84118,84119,84121,84123],{"class":169,"line":335},[167,84120,504],{"class":173},[167,84122,9875],{"class":177},[167,84124,185],{"class":173},[167,84126,84127,84129,84131],{"class":169,"line":341},[167,84128,282],{"class":173},[167,84130,299],{"class":177},[167,84132,185],{"class":173},[22,84134,34898],{"id":34897},[154,84136,84138],{"className":156,"code":34901,"filename":3260,"highlights":84137,"language":162,"meta":163,"style":163},[279],[87,84139,84140,84156,84168,84172,84188,84196,84200,84208,84216,84237,84241,84249],{"__ignoreMap":163},[167,84141,84142,84144,84146,84148,84150,84152,84154],{"class":169,"line":170},[167,84143,174],{"class":173},[167,84145,178],{"class":177},[167,84147,182],{"class":181},[167,84149,1050],{"class":181},[167,84151,267],{"class":173},[167,84153,1055],{"class":201},[167,84155,185],{"class":173},[167,84157,84158,84160,84162,84164,84166],{"class":169,"line":188},[167,84159,192],{"class":191},[167,84161,195],{"class":173},[167,84163,198],{"class":191},[167,84165,24041],{"class":201},[167,84167,24044],{"class":173},[167,84169,84170],{"class":169,"line":205},[167,84171,209],{"emptyLinePlaceholder":208},[167,84173,84174,84176,84178,84180,84182,84184,84186],{"class":169,"line":160},[167,84175,216],{"class":191},[167,84177,34943],{"class":219},[167,84179,223],{"class":191},[167,84181,226],{"class":181},[167,84183,229],{"class":173},[167,84185,3392],{"class":219},[167,84187,24169],{"class":173},[167,84189,84190,84192,84194],{"class":169,"line":238},[167,84191,282],{"class":173},[167,84193,178],{"class":177},[167,84195,185],{"class":173},[167,84197,84198],{"class":169,"line":243},[167,84199,209],{"emptyLinePlaceholder":208},[167,84201,84202,84204,84206],{"class":169,"line":261},[167,84203,174],{"class":173},[167,84205,299],{"class":177},[167,84207,185],{"class":173},[167,84209,84210,84212,84214],{"class":169,"line":273},[167,84211,307],{"class":173},[167,84213,9875],{"class":177},[167,84215,185],{"class":173},[167,84217,84219,84221,84223,84225,84227,84229,84231,84233,84235],{"class":84218,"line":279},[169,213],[167,84220,1257],{"class":173},[167,84222,2650],{"class":177},[167,84224,2653],{"class":181},[167,84226,267],{"class":173},[167,84228,34995],{"class":201},[167,84230,1174],{"class":181},[167,84232,267],{"class":173},[167,84234,35002],{"class":201},[167,84236,5325],{"class":173},[167,84238,84239],{"class":169,"line":289},[167,84240,35009],{"class":173},[167,84242,84243,84245,84247],{"class":169,"line":294},[167,84244,504],{"class":173},[167,84246,9875],{"class":177},[167,84248,185],{"class":173},[167,84250,84251,84253,84255],{"class":169,"line":304},[167,84252,282],{"class":173},[167,84254,299],{"class":177},[167,84256,185],{"class":173},[154,84258,84260],{"className":156,"code":35028,"filename":3973,"highlights":84259,"language":162,"meta":163,"style":163},[313],[87,84261,84262,84276,84284,84290,84296,84304,84308,84312,84316,84324,84328,84336,84344,84365,84369,84377],{"__ignoreMap":163},[167,84263,84264,84266,84268,84270,84272,84274],{"class":169,"line":170},[167,84265,174],{"class":173},[167,84267,178],{"class":177},[167,84269,1050],{"class":181},[167,84271,267],{"class":173},[167,84273,1055],{"class":201},[167,84275,185],{"class":173},[167,84277,84278,84280,84282],{"class":169,"line":188},[167,84279,608],{"class":191},[167,84281,3991],{"class":191},[167,84283,1905],{"class":173},[167,84285,84286,84288],{"class":169,"line":205},[167,84287,7176],{"class":181},[167,84289,763],{"class":173},[167,84291,84292,84294],{"class":169,"line":160},[167,84293,1937],{"class":191},[167,84295,1905],{"class":173},[167,84297,84298,84300,84302],{"class":169,"line":238},[167,84299,35070],{"class":173},[167,84301,3392],{"class":219},[167,84303,393],{"class":173},[167,84305,84306],{"class":169,"line":243},[167,84307,24370],{"class":173},[167,84309,84310],{"class":169,"line":261},[167,84311,398],{"class":173},[167,84313,84314],{"class":169,"line":273},[167,84315,24148],{"class":173},[167,84317,84318,84320,84322],{"class":169,"line":279},[167,84319,282],{"class":173},[167,84321,178],{"class":177},[167,84323,185],{"class":173},[167,84325,84326],{"class":169,"line":289},[167,84327,209],{"emptyLinePlaceholder":208},[167,84329,84330,84332,84334],{"class":169,"line":294},[167,84331,174],{"class":173},[167,84333,299],{"class":177},[167,84335,185],{"class":173},[167,84337,84338,84340,84342],{"class":169,"line":304},[167,84339,307],{"class":173},[167,84341,9875],{"class":177},[167,84343,185],{"class":173},[167,84345,84347,84349,84351,84353,84355,84357,84359,84361,84363],{"class":84346,"line":313},[169,213],[167,84348,1257],{"class":173},[167,84350,2650],{"class":177},[167,84352,2653],{"class":181},[167,84354,267],{"class":173},[167,84356,34995],{"class":201},[167,84358,1174],{"class":181},[167,84360,267],{"class":173},[167,84362,35002],{"class":201},[167,84364,5325],{"class":173},[167,84366,84367],{"class":169,"line":161},[167,84368,35009],{"class":173},[167,84370,84371,84373,84375],{"class":169,"line":335},[167,84372,504],{"class":173},[167,84374,9875],{"class":177},[167,84376,185],{"class":173},[167,84378,84379,84381,84383],{"class":169,"line":341},[167,84380,282],{"class":173},[167,84382,299],{"class":177},[167,84384,185],{"class":173},[22,84386,35159],{"id":35158},[3087,84388,32692],{"id":32691},[15,84390,84391,35167,84393,35170],{},[87,84392,35166],{},[87,84394,34227],{},[154,84396,84398],{"className":156,"code":35173,"filename":35174,"highlights":84397,"language":162,"meta":163,"style":163},[279],[87,84399,84400,84416,84436,84444,84448,84456,84470,84474,84480,84489,84497,84505,84509,84517],{"__ignoreMap":163},[167,84401,84402,84404,84406,84408,84410,84412,84414],{"class":169,"line":170},[167,84403,174],{"class":173},[167,84405,178],{"class":177},[167,84407,182],{"class":181},[167,84409,1050],{"class":181},[167,84411,267],{"class":173},[167,84413,1055],{"class":201},[167,84415,185],{"class":173},[167,84417,84418,84420,84422,84424,84426,84428,84430,84432,84434],{"class":169,"line":188},[167,84419,216],{"class":191},[167,84421,35200],{"class":219},[167,84423,223],{"class":191},[167,84425,35205],{"class":181},[167,84427,174],{"class":173},[167,84429,1111],{"class":219},[167,84431,35212],{"class":173},[167,84433,31161],{"class":201},[167,84435,35217],{"class":173},[167,84437,84438,84440,84442],{"class":169,"line":205},[167,84439,282],{"class":173},[167,84441,178],{"class":177},[167,84443,185],{"class":173},[167,84445,84446],{"class":169,"line":160},[167,84447,209],{"emptyLinePlaceholder":208},[167,84449,84450,84452,84454],{"class":169,"line":238},[167,84451,174],{"class":173},[167,84453,299],{"class":177},[167,84455,185],{"class":173},[167,84457,84458,84460,84462,84464,84466,84468],{"class":169,"line":243},[167,84459,307],{"class":173},[167,84461,9875],{"class":177},[167,84463,1245],{"class":181},[167,84465,267],{"class":173},[167,84467,35250],{"class":201},[167,84469,185],{"class":173},[167,84471,84472],{"class":169,"line":261},[167,84473,35257],{"class":173},[167,84475,84476,84478],{"class":169,"line":273},[167,84477,1257],{"class":173},[167,84479,17481],{"class":177},[167,84481,84483,84485,84487],{"class":84482,"line":279},[169,213],[167,84484,35269],{"class":181},[167,84486,267],{"class":173},[167,84488,35274],{"class":201},[167,84490,84491,84493,84495],{"class":169,"line":289},[167,84492,3739],{"class":181},[167,84494,267],{"class":173},[167,84496,35283],{"class":201},[167,84498,84499,84501,84503],{"class":169,"line":294},[167,84500,17504],{"class":181},[167,84502,267],{"class":173},[167,84504,35292],{"class":201},[167,84506,84507],{"class":169,"line":304},[167,84508,35297],{"class":173},[167,84510,84511,84513,84515],{"class":169,"line":313},[167,84512,504],{"class":173},[167,84514,9875],{"class":177},[167,84516,185],{"class":173},[167,84518,84519,84521,84523],{"class":169,"line":161},[167,84520,282],{"class":173},[167,84522,299],{"class":177},[167,84524,185],{"class":173},[154,84526,84527],{"className":156,"code":35316,"filename":35317,"language":162,"meta":163,"style":163},[87,84528,84529,84545,84557,84569,84573,84589,84613,84629,84633,84645,84665,84685,84705,84709,84713,84727,84743,84751,84767,84775,84791,84807,84811,84825,84829,84833,84841,84845,84853,84861,84873,84877,84891,84895,84903,84907,84933,84941,84945,84953,84973,84977,84985,84989,84997,85017,85021,85039,85047,85055,85063],{"__ignoreMap":163},[167,84530,84531,84533,84535,84537,84539,84541,84543],{"class":169,"line":170},[167,84532,174],{"class":173},[167,84534,178],{"class":177},[167,84536,182],{"class":181},[167,84538,1050],{"class":181},[167,84540,267],{"class":173},[167,84542,1055],{"class":201},[167,84544,185],{"class":173},[167,84546,84547,84549,84551,84553,84555],{"class":169,"line":188},[167,84548,192],{"class":191},[167,84550,1805],{"class":173},[167,84552,198],{"class":191},[167,84554,24041],{"class":201},[167,84556,24044],{"class":173},[167,84558,84559,84561,84563,84565,84567],{"class":169,"line":205},[167,84560,192],{"class":191},[167,84562,35354],{"class":173},[167,84564,198],{"class":191},[167,84566,35359],{"class":201},[167,84568,24044],{"class":173},[167,84570,84571],{"class":169,"line":160},[167,84572,209],{"emptyLinePlaceholder":208},[167,84574,84575,84577,84579,84581,84583,84585,84587],{"class":169,"line":238},[167,84576,216],{"class":191},[167,84578,2448],{"class":219},[167,84580,223],{"class":191},[167,84582,226],{"class":181},[167,84584,229],{"class":173},[167,84586,31161],{"class":201},[167,84588,24169],{"class":173},[167,84590,84591,84593,84595,84597,84599,84601,84603,84605,84607,84609,84611],{"class":169,"line":243},[167,84592,216],{"class":191},[167,84594,35388],{"class":219},[167,84596,223],{"class":191},[167,84598,226],{"class":181},[167,84600,174],{"class":173},[167,84602,13929],{"class":219},[167,84604,659],{"class":191},[167,84606,6567],{"class":219},[167,84608,6570],{"class":173},[167,84610,6573],{"class":219},[167,84612,24169],{"class":173},[167,84614,84615,84617,84619,84621,84623,84625,84627],{"class":169,"line":261},[167,84616,216],{"class":191},[167,84618,35413],{"class":219},[167,84620,223],{"class":191},[167,84622,226],{"class":181},[167,84624,229],{"class":173},[167,84626,3392],{"class":219},[167,84628,24169],{"class":173},[167,84630,84631],{"class":169,"line":273},[167,84632,209],{"emptyLinePlaceholder":208},[167,84634,84635,84637,84639,84641,84643],{"class":169,"line":279},[167,84636,216],{"class":191},[167,84638,35434],{"class":219},[167,84640,223],{"class":191},[167,84642,226],{"class":181},[167,84644,1827],{"class":173},[167,84646,84647,84649,84651,84653,84655,84657,84659,84661,84663],{"class":169,"line":289},[167,84648,1832],{"class":173},[167,84650,1835],{"class":219},[167,84652,1838],{"class":173},[167,84654,35451],{"class":201},[167,84656,1844],{"class":173},[167,84658,35456],{"class":219},[167,84660,35459],{"class":173},[167,84662,390],{"class":219},[167,84664,1856],{"class":173},[167,84666,84667,84669,84671,84673,84675,84677,84679,84681,84683],{"class":169,"line":294},[167,84668,1832],{"class":173},[167,84670,1853],{"class":219},[167,84672,1838],{"class":173},[167,84674,35474],{"class":201},[167,84676,1844],{"class":173},[167,84678,35479],{"class":219},[167,84680,35459],{"class":173},[167,84682,3392],{"class":219},[167,84684,1856],{"class":173},[167,84686,84687,84689,84691,84693,84695,84697,84699,84701,84703],{"class":169,"line":304},[167,84688,1832],{"class":173},[167,84690,8203],{"class":219},[167,84692,1838],{"class":173},[167,84694,35496],{"class":201},[167,84696,1844],{"class":173},[167,84698,35501],{"class":219},[167,84700,35459],{"class":173},[167,84702,390],{"class":219},[167,84704,1856],{"class":173},[167,84706,84707],{"class":169,"line":313},[167,84708,28545],{"class":173},[167,84710,84711],{"class":169,"line":161},[167,84712,209],{"emptyLinePlaceholder":208},[167,84714,84715,84717,84719,84721,84723,84725],{"class":169,"line":335},[167,84716,216],{"class":191},[167,84718,35522],{"class":219},[167,84720,223],{"class":191},[167,84722,1898],{"class":181},[167,84724,1493],{"class":173},[167,84726,9717],{"class":191},[167,84728,84729,84731,84733,84735,84737,84739,84741],{"class":169,"line":341},[167,84730,35535],{"class":173},[167,84732,8252],{"class":181},[167,84734,1918],{"class":173},[167,84736,15],{"class":254},[167,84738,693],{"class":173},[167,84740,639],{"class":191},[167,84742,1905],{"class":173},[167,84744,84745,84747,84749],{"class":169,"line":489},[167,84746,8266],{"class":191},[167,84748,35554],{"class":219},[167,84750,35557],{"class":191},[167,84752,84753,84755,84757,84759,84761,84763,84765],{"class":169,"line":495},[167,84754,35562],{"class":173},[167,84756,2506],{"class":181},[167,84758,2503],{"class":173},[167,84760,8290],{"class":181},[167,84762,35571],{"class":173},[167,84764,2506],{"class":181},[167,84766,35576],{"class":173},[167,84768,84769,84771,84773],{"class":169,"line":501},[167,84770,8266],{"class":191},[167,84772,35583],{"class":219},[167,84774,35557],{"class":191},[167,84776,84777,84779,84781,84783,84785,84787,84789],{"class":169,"line":512},[167,84778,35590],{"class":173},[167,84780,35593],{"class":191},[167,84782,6567],{"class":219},[167,84784,35598],{"class":191},[167,84786,35601],{"class":173},[167,84788,1991],{"class":191},[167,84790,35606],{"class":173},[167,84792,84793,84795,84797,84799,84801,84803,84805],{"class":169,"line":781},[167,84794,8266],{"class":191},[167,84796,35613],{"class":219},[167,84798,223],{"class":191},[167,84800,5625],{"class":191},[167,84802,35620],{"class":173},[167,84804,4264],{"class":191},[167,84806,35625],{"class":173},[167,84808,84809],{"class":169,"line":786},[167,84810,209],{"emptyLinePlaceholder":208},[167,84812,84813,84815,84817,84819,84821,84823],{"class":169,"line":2678},[167,84814,1937],{"class":191},[167,84816,35636],{"class":173},[167,84818,8339],{"class":191},[167,84820,35641],{"class":173},[167,84822,8339],{"class":191},[167,84824,35646],{"class":173},[167,84826,84827],{"class":169,"line":2692},[167,84828,8347],{"class":173},[167,84830,84831],{"class":169,"line":3575},[167,84832,24169],{"class":173},[167,84834,84835,84837,84839],{"class":169,"line":5028},[167,84836,282],{"class":173},[167,84838,178],{"class":177},[167,84840,185],{"class":173},[167,84842,84843],{"class":169,"line":5037},[167,84844,209],{"emptyLinePlaceholder":208},[167,84846,84847,84849,84851],{"class":169,"line":5046},[167,84848,174],{"class":173},[167,84850,299],{"class":177},[167,84852,185],{"class":173},[167,84854,84855,84857,84859],{"class":169,"line":6756},[167,84856,307],{"class":173},[167,84858,10117],{"class":177},[167,84860,185],{"class":173},[167,84862,84863,84865,84867,84869,84871],{"class":169,"line":6778},[167,84864,1257],{"class":173},[167,84866,22],{"class":177},[167,84868,35691],{"class":173},[167,84870,22],{"class":177},[167,84872,185],{"class":173},[167,84874,84875],{"class":169,"line":6783},[167,84876,209],{"emptyLinePlaceholder":208},[167,84878,84879,84881,84883,84885,84887,84889],{"class":169,"line":6788},[167,84880,1257],{"class":173},[167,84882,35166],{"class":177},[167,84884,2653],{"class":181},[167,84886,267],{"class":173},[167,84888,2658],{"class":201},[167,84890,5325],{"class":173},[167,84892,84893],{"class":169,"line":6793},[167,84894,209],{"emptyLinePlaceholder":208},[167,84896,84897,84899,84901],{"class":169,"line":6809},[167,84898,1257],{"class":173},[167,84900,9875],{"class":177},[167,84902,185],{"class":173},[167,84904,84905],{"class":169,"line":6824},[167,84906,35730],{"class":173},[167,84908,84909,84911,84913,84915,84917,84919,84921,84923,84925,84927,84929,84931],{"class":169,"line":6829},[167,84910,1268],{"class":173},[167,84912,2650],{"class":177},[167,84914,34720],{"class":181},[167,84916,267],{"class":173},[167,84918,35743],{"class":201},[167,84920,1174],{"class":181},[167,84922,267],{"class":173},[167,84924,34732],{"class":201},[167,84926,34735],{"class":181},[167,84928,267],{"class":173},[167,84930,34740],{"class":201},[167,84932,5325],{"class":173},[167,84934,84935,84937,84939],{"class":169,"line":6836},[167,84936,1292],{"class":173},[167,84938,9875],{"class":177},[167,84940,185],{"class":173},[167,84942,84943],{"class":169,"line":6845},[167,84944,209],{"emptyLinePlaceholder":208},[167,84946,84947,84949,84951],{"class":169,"line":6854},[167,84948,1257],{"class":173},[167,84950,9875],{"class":177},[167,84952,185],{"class":173},[167,84954,84955,84957,84959,84961,84963,84965,84967,84969,84971],{"class":169,"line":6861},[167,84956,1268],{"class":173},[167,84958,2650],{"class":177},[167,84960,2653],{"class":181},[167,84962,267],{"class":173},[167,84964,35790],{"class":201},[167,84966,1174],{"class":181},[167,84968,267],{"class":173},[167,84970,35002],{"class":201},[167,84972,5325],{"class":173},[167,84974,84975],{"class":169,"line":6879},[167,84976,35803],{"class":173},[167,84978,84979,84981,84983],{"class":169,"line":6884},[167,84980,1292],{"class":173},[167,84982,9875],{"class":177},[167,84984,185],{"class":173},[167,84986,84987],{"class":169,"line":6889},[167,84988,209],{"emptyLinePlaceholder":208},[167,84990,84991,84993,84995],{"class":169,"line":6898},[167,84992,1257],{"class":173},[167,84994,33],{"class":177},[167,84996,185],{"class":173},[167,84998,84999,85001,85003,85005,85007,85009,85011,85013,85015],{"class":169,"line":6903},[167,85000,1268],{"class":173},[167,85002,36],{"class":177},[167,85004,18706],{"class":181},[167,85006,267],{"class":173},[167,85008,35836],{"class":201},[167,85010,10307],{"class":181},[167,85012,267],{"class":173},[167,85014,35843],{"class":201},[167,85016,185],{"class":173},[167,85018,85019],{"class":169,"line":6912},[167,85020,35850],{"class":173},[167,85022,85023,85025,85027,85029,85031,85033,85035,85037],{"class":169,"line":6928},[167,85024,32516],{"class":173},[167,85026,167],{"class":177},[167,85028,5694],{"class":181},[167,85030,267],{"class":173},[167,85032,35863],{"class":201},[167,85034,35866],{"class":173},[167,85036,167],{"class":177},[167,85038,185],{"class":173},[167,85040,85041,85043,85045],{"class":169,"line":6949},[167,85042,10170],{"class":173},[167,85044,36],{"class":177},[167,85046,185],{"class":173},[167,85048,85049,85051,85053],{"class":169,"line":6954},[167,85050,1292],{"class":173},[167,85052,33],{"class":177},[167,85054,185],{"class":173},[167,85056,85057,85059,85061],{"class":169,"line":6975},[167,85058,504],{"class":173},[167,85060,10117],{"class":177},[167,85062,185],{"class":173},[167,85064,85065,85067,85069],{"class":169,"line":6989},[167,85066,282],{"class":173},[167,85068,299],{"class":177},[167,85070,185],{"class":173},[3087,85072,33279],{"id":33278},[15,85074,35907,85075,1028,85077,583],{},[87,85076,34049],{},[87,85078,34055],{},[154,85080,85081],{"className":156,"code":35914,"filename":35174,"language":162,"meta":163,"style":163},[87,85082,85083,85097,85105,85113,85117,85121,85125,85133,85137,85141,85149,85153,85161,85165,85173,85187,85191,85197,85205,85213,85221,85229,85233,85241],{"__ignoreMap":163},[167,85084,85085,85087,85089,85091,85093,85095],{"class":169,"line":170},[167,85086,174],{"class":173},[167,85088,178],{"class":177},[167,85090,1050],{"class":181},[167,85092,267],{"class":173},[167,85094,1055],{"class":201},[167,85096,185],{"class":173},[167,85098,85099,85101,85103],{"class":169,"line":188},[167,85100,608],{"class":191},[167,85102,3991],{"class":191},[167,85104,1905],{"class":173},[167,85106,85107,85109,85111],{"class":169,"line":205},[167,85108,4398],{"class":173},[167,85110,35945],{"class":201},[167,85112,393],{"class":173},[167,85114,85115],{"class":169,"line":160},[167,85116,3999],{"class":173},[167,85118,85119],{"class":169,"line":238},[167,85120,35956],{"class":173},[167,85122,85123],{"class":169,"line":243},[167,85124,4011],{"class":173},[167,85126,85127,85129,85131],{"class":169,"line":261},[167,85128,4041],{"class":173},[167,85130,31161],{"class":201},[167,85132,393],{"class":173},[167,85134,85135],{"class":169,"line":273},[167,85136,755],{"class":173},[167,85138,85139],{"class":169,"line":279},[167,85140,398],{"class":173},[167,85142,85143,85145,85147],{"class":169,"line":289},[167,85144,4409],{"class":173},[167,85146,35983],{"class":201},[167,85148,4414],{"class":173},[167,85150,85151],{"class":169,"line":294},[167,85152,24148],{"class":173},[167,85154,85155,85157,85159],{"class":169,"line":304},[167,85156,282],{"class":173},[167,85158,178],{"class":177},[167,85160,185],{"class":173},[167,85162,85163],{"class":169,"line":313},[167,85164,209],{"emptyLinePlaceholder":208},[167,85166,85167,85169,85171],{"class":169,"line":161},[167,85168,174],{"class":173},[167,85170,299],{"class":177},[167,85172,185],{"class":173},[167,85174,85175,85177,85179,85181,85183,85185],{"class":169,"line":335},[167,85176,307],{"class":173},[167,85178,9875],{"class":177},[167,85180,1245],{"class":181},[167,85182,267],{"class":173},[167,85184,35250],{"class":201},[167,85186,185],{"class":173},[167,85188,85189],{"class":169,"line":341},[167,85190,35257],{"class":173},[167,85192,85193,85195],{"class":169,"line":489},[167,85194,1257],{"class":173},[167,85196,17481],{"class":177},[167,85198,85199,85201,85203],{"class":169,"line":495},[167,85200,36038],{"class":181},[167,85202,267],{"class":173},[167,85204,36043],{"class":201},[167,85206,85207,85209,85211],{"class":169,"line":501},[167,85208,3739],{"class":181},[167,85210,267],{"class":173},[167,85212,35283],{"class":201},[167,85214,85215,85217,85219],{"class":169,"line":512},[167,85216,17504],{"class":181},[167,85218,267],{"class":173},[167,85220,35292],{"class":201},[167,85222,85223,85225,85227],{"class":169,"line":781},[167,85224,36064],{"class":181},[167,85226,267],{"class":173},[167,85228,36069],{"class":201},[167,85230,85231],{"class":169,"line":786},[167,85232,35297],{"class":173},[167,85234,85235,85237,85239],{"class":169,"line":2678},[167,85236,504],{"class":173},[167,85238,9875],{"class":177},[167,85240,185],{"class":173},[167,85242,85243,85245,85247],{"class":169,"line":2692},[167,85244,282],{"class":173},[167,85246,299],{"class":177},[167,85248,185],{"class":173},[154,85250,85251],{"className":156,"code":36092,"filename":35317,"language":162,"meta":163,"style":163},[87,85252,85253,85267,85279,85283,85291,85299,85303,85309,85315,85323,85331,85339,85343,85363,85383,85403,85407,85411,85415,85419,85425,85445,85455,85463,85479,85487,85511,85529,85533,85547,85551,85555,85559,85563,85571,85575,85583,85591,85603,85607,85621,85625,85633,85637,85663,85671,85675,85683,85703,85707,85715,85719,85727,85747,85751,85769,85777,85785,85793],{"__ignoreMap":163},[167,85254,85255,85257,85259,85261,85263,85265],{"class":169,"line":170},[167,85256,174],{"class":173},[167,85258,178],{"class":177},[167,85260,1050],{"class":181},[167,85262,267],{"class":173},[167,85264,1055],{"class":201},[167,85266,185],{"class":173},[167,85268,85269,85271,85273,85275,85277],{"class":169,"line":188},[167,85270,192],{"class":191},[167,85272,35354],{"class":173},[167,85274,198],{"class":191},[167,85276,35359],{"class":201},[167,85278,24044],{"class":173},[167,85280,85281],{"class":169,"line":205},[167,85282,209],{"emptyLinePlaceholder":208},[167,85284,85285,85287,85289],{"class":169,"line":160},[167,85286,608],{"class":191},[167,85288,3991],{"class":191},[167,85290,1905],{"class":173},[167,85292,85293,85295,85297],{"class":169,"line":238},[167,85294,4398],{"class":173},[167,85296,36139],{"class":201},[167,85298,393],{"class":173},[167,85300,85301],{"class":169,"line":243},[167,85302,36146],{"class":173},[167,85304,85305,85307],{"class":169,"line":261},[167,85306,7176],{"class":181},[167,85308,763],{"class":173},[167,85310,85311,85313],{"class":169,"line":273},[167,85312,1937],{"class":191},[167,85314,1905],{"class":173},[167,85316,85317,85319,85321],{"class":169,"line":279},[167,85318,36163],{"class":173},[167,85320,31161],{"class":201},[167,85322,393],{"class":173},[167,85324,85325,85327,85329],{"class":169,"line":289},[167,85326,36172],{"class":173},[167,85328,6573],{"class":219},[167,85330,393],{"class":173},[167,85332,85333,85335,85337],{"class":169,"line":294},[167,85334,36181],{"class":173},[167,85336,3392],{"class":219},[167,85338,393],{"class":173},[167,85340,85341],{"class":169,"line":304},[167,85342,36190],{"class":173},[167,85344,85345,85347,85349,85351,85353,85355,85357,85359,85361],{"class":169,"line":313},[167,85346,8677],{"class":173},[167,85348,1835],{"class":219},[167,85350,1838],{"class":173},[167,85352,35451],{"class":201},[167,85354,1844],{"class":173},[167,85356,35456],{"class":219},[167,85358,35459],{"class":173},[167,85360,390],{"class":219},[167,85362,1856],{"class":173},[167,85364,85365,85367,85369,85371,85373,85375,85377,85379,85381],{"class":169,"line":161},[167,85366,8677],{"class":173},[167,85368,1853],{"class":219},[167,85370,1838],{"class":173},[167,85372,35474],{"class":201},[167,85374,1844],{"class":173},[167,85376,35479],{"class":219},[167,85378,35459],{"class":173},[167,85380,3392],{"class":219},[167,85382,1856],{"class":173},[167,85384,85385,85387,85389,85391,85393,85395,85397,85399,85401],{"class":169,"line":335},[167,85386,8677],{"class":173},[167,85388,8203],{"class":219},[167,85390,1838],{"class":173},[167,85392,35496],{"class":201},[167,85394,1844],{"class":173},[167,85396,35501],{"class":219},[167,85398,35459],{"class":173},[167,85400,390],{"class":219},[167,85402,1856],{"class":173},[167,85404,85405],{"class":169,"line":341},[167,85406,16114],{"class":173},[167,85408,85409],{"class":169,"line":489},[167,85410,24370],{"class":173},[167,85412,85413],{"class":169,"line":495},[167,85414,398],{"class":173},[167,85416,85417],{"class":169,"line":501},[167,85418,8755],{"class":173},[167,85420,85421,85423],{"class":169,"line":512},[167,85422,36271],{"class":181},[167,85424,763],{"class":173},[167,85426,85427,85429,85431,85433,85435,85437,85439,85441,85443],{"class":169,"line":781},[167,85428,8767],{"class":191},[167,85430,7351],{"class":219},[167,85432,36282],{"class":173},[167,85434,8252],{"class":181},[167,85436,1918],{"class":173},[167,85438,15],{"class":254},[167,85440,693],{"class":173},[167,85442,639],{"class":191},[167,85444,1905],{"class":173},[167,85446,85447,85449,85451,85453],{"class":169,"line":786},[167,85448,8787],{"class":191},[167,85450,35554],{"class":219},[167,85452,223],{"class":191},[167,85454,36305],{"class":173},[167,85456,85457,85459,85461],{"class":169,"line":2678},[167,85458,8798],{"class":173},[167,85460,2506],{"class":181},[167,85462,2917],{"class":173},[167,85464,85465,85467,85469,85471,85473,85475,85477],{"class":169,"line":2692},[167,85466,8798],{"class":173},[167,85468,8290],{"class":181},[167,85470,229],{"class":173},[167,85472,4927],{"class":219},[167,85474,36326],{"class":173},[167,85476,2506],{"class":181},[167,85478,35576],{"class":173},[167,85480,85481,85483,85485],{"class":169,"line":3575},[167,85482,8787],{"class":191},[167,85484,35583],{"class":219},[167,85486,35557],{"class":191},[167,85488,85489,85491,85493,85495,85497,85499,85501,85503,85505,85507,85509],{"class":169,"line":5028},[167,85490,36343],{"class":219},[167,85492,36346],{"class":173},[167,85494,35593],{"class":191},[167,85496,6567],{"class":219},[167,85498,35598],{"class":191},[167,85500,35601],{"class":173},[167,85502,1991],{"class":191},[167,85504,36359],{"class":181},[167,85506,229],{"class":173},[167,85508,4927],{"class":219},[167,85510,36366],{"class":173},[167,85512,85513,85515,85517,85519,85521,85523,85525,85527],{"class":169,"line":5037},[167,85514,8787],{"class":191},[167,85516,35613],{"class":219},[167,85518,223],{"class":191},[167,85520,5625],{"class":191},[167,85522,4927],{"class":219},[167,85524,36381],{"class":173},[167,85526,4264],{"class":191},[167,85528,35625],{"class":173},[167,85530,85531],{"class":169,"line":5046},[167,85532,209],{"emptyLinePlaceholder":208},[167,85534,85535,85537,85539,85541,85543,85545],{"class":169,"line":6756},[167,85536,8855],{"class":191},[167,85538,35636],{"class":173},[167,85540,8339],{"class":191},[167,85542,35641],{"class":173},[167,85544,8339],{"class":191},[167,85546,35646],{"class":173},[167,85548,85549],{"class":169,"line":6778},[167,85550,36408],{"class":173},[167,85552,85553],{"class":169,"line":6783},[167,85554,755],{"class":173},[167,85556,85557],{"class":169,"line":6788},[167,85558,398],{"class":173},[167,85560,85561],{"class":169,"line":6793},[167,85562,24148],{"class":173},[167,85564,85565,85567,85569],{"class":169,"line":6809},[167,85566,282],{"class":173},[167,85568,178],{"class":177},[167,85570,185],{"class":173},[167,85572,85573],{"class":169,"line":6824},[167,85574,209],{"emptyLinePlaceholder":208},[167,85576,85577,85579,85581],{"class":169,"line":6829},[167,85578,174],{"class":173},[167,85580,299],{"class":177},[167,85582,185],{"class":173},[167,85584,85585,85587,85589],{"class":169,"line":6836},[167,85586,307],{"class":173},[167,85588,10117],{"class":177},[167,85590,185],{"class":173},[167,85592,85593,85595,85597,85599,85601],{"class":169,"line":6845},[167,85594,1257],{"class":173},[167,85596,22],{"class":177},[167,85598,35691],{"class":173},[167,85600,22],{"class":177},[167,85602,185],{"class":173},[167,85604,85605],{"class":169,"line":6854},[167,85606,209],{"emptyLinePlaceholder":208},[167,85608,85609,85611,85613,85615,85617,85619],{"class":169,"line":6861},[167,85610,1257],{"class":173},[167,85612,35166],{"class":177},[167,85614,2653],{"class":181},[167,85616,267],{"class":173},[167,85618,2658],{"class":201},[167,85620,5325],{"class":173},[167,85622,85623],{"class":169,"line":6879},[167,85624,209],{"emptyLinePlaceholder":208},[167,85626,85627,85629,85631],{"class":169,"line":6884},[167,85628,1257],{"class":173},[167,85630,9875],{"class":177},[167,85632,185],{"class":173},[167,85634,85635],{"class":169,"line":6889},[167,85636,35730],{"class":173},[167,85638,85639,85641,85643,85645,85647,85649,85651,85653,85655,85657,85659,85661],{"class":169,"line":6898},[167,85640,1268],{"class":173},[167,85642,2650],{"class":177},[167,85644,34720],{"class":181},[167,85646,267],{"class":173},[167,85648,35743],{"class":201},[167,85650,1174],{"class":181},[167,85652,267],{"class":173},[167,85654,34732],{"class":201},[167,85656,34735],{"class":181},[167,85658,267],{"class":173},[167,85660,34740],{"class":201},[167,85662,5325],{"class":173},[167,85664,85665,85667,85669],{"class":169,"line":6903},[167,85666,1292],{"class":173},[167,85668,9875],{"class":177},[167,85670,185],{"class":173},[167,85672,85673],{"class":169,"line":6912},[167,85674,209],{"emptyLinePlaceholder":208},[167,85676,85677,85679,85681],{"class":169,"line":6928},[167,85678,1257],{"class":173},[167,85680,9875],{"class":177},[167,85682,185],{"class":173},[167,85684,85685,85687,85689,85691,85693,85695,85697,85699,85701],{"class":169,"line":6949},[167,85686,1268],{"class":173},[167,85688,2650],{"class":177},[167,85690,2653],{"class":181},[167,85692,267],{"class":173},[167,85694,35790],{"class":201},[167,85696,1174],{"class":181},[167,85698,267],{"class":173},[167,85700,35002],{"class":201},[167,85702,5325],{"class":173},[167,85704,85705],{"class":169,"line":6954},[167,85706,35803],{"class":173},[167,85708,85709,85711,85713],{"class":169,"line":6975},[167,85710,1292],{"class":173},[167,85712,9875],{"class":177},[167,85714,185],{"class":173},[167,85716,85717],{"class":169,"line":6989},[167,85718,209],{"emptyLinePlaceholder":208},[167,85720,85721,85723,85725],{"class":169,"line":7003},[167,85722,1257],{"class":173},[167,85724,33],{"class":177},[167,85726,185],{"class":173},[167,85728,85729,85731,85733,85735,85737,85739,85741,85743,85745],{"class":169,"line":7017},[167,85730,1268],{"class":173},[167,85732,36],{"class":177},[167,85734,18706],{"class":181},[167,85736,267],{"class":173},[167,85738,35836],{"class":201},[167,85740,10307],{"class":181},[167,85742,267],{"class":173},[167,85744,35843],{"class":201},[167,85746,185],{"class":173},[167,85748,85749],{"class":169,"line":7026},[167,85750,35850],{"class":173},[167,85752,85753,85755,85757,85759,85761,85763,85765,85767],{"class":169,"line":7031},[167,85754,32516],{"class":173},[167,85756,167],{"class":177},[167,85758,5694],{"class":181},[167,85760,267],{"class":173},[167,85762,35863],{"class":201},[167,85764,35866],{"class":173},[167,85766,167],{"class":177},[167,85768,185],{"class":173},[167,85770,85771,85773,85775],{"class":169,"line":7048},[167,85772,10170],{"class":173},[167,85774,36],{"class":177},[167,85776,185],{"class":173},[167,85778,85779,85781,85783],{"class":169,"line":7057},[167,85780,1292],{"class":173},[167,85782,33],{"class":177},[167,85784,185],{"class":173},[167,85786,85787,85789,85791],{"class":169,"line":7555},[167,85788,504],{"class":173},[167,85790,10117],{"class":177},[167,85792,185],{"class":173},[167,85794,85795,85797,85799],{"class":169,"line":7560},[167,85796,282],{"class":173},[167,85798,299],{"class":177},[167,85800,185],{"class":173},[22,85802,7678],{"id":7677},[15,85804,85805,36665],{},[87,85806,23865],{},[15,85808,36668],{},[15,85810,27696],{},[33,85812,85813,85817,85825,85833],{},[36,85814,36675,85815,36678],{},[87,85816,33972],{},[36,85818,36681,85819,11227,85821,34224,85823,1679],{},[87,85820,34049],{},[87,85822,34055],{},[87,85824,34227],{},[36,85826,36690,85827,1025,85829,1025,85831,36697],{},[87,85828,34074],{},[87,85830,34079],{},[87,85832,34084],{},[36,85834,36700],{},[924,85836,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":85838},[85839,85840,85844,85845,85846,85852,85853,85854,85855,85859],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257,"children":85841},[85842,85843],{"id":33992,"depth":205,"text":33993},{"id":34037,"depth":205,"text":34038},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":85847},[85848,85849,85850,85851],{"id":34155,"depth":205,"text":34156},{"id":34235,"depth":205,"text":36716},{"id":34308,"depth":205,"text":34309},{"id":34337,"depth":205,"text":34338},{"id":34349,"depth":188,"text":34350},{"id":34610,"depth":188,"text":36721},{"id":34897,"depth":188,"text":34898},{"id":35158,"depth":188,"text":35159,"children":85856},[85857,85858],{"id":32691,"depth":205,"text":32692},{"id":33278,"depth":205,"text":33279},{"id":7677,"depth":188,"text":7678},{"updatedAt":36733,"coverCaption":23656,"author":946,"keywords":85861},[3258,23865,36735,36736,3260,3973],[85863],{"headline":36740,"author":85864,"datePublished":36733,"@type":961},{"name":946,"@type":959},{"title":33939,"description":36731},[85867,85868,85869,85870],{"tag":26466,"color":26467},{"tag":36747,"color":36748},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":85872,"title":85873,"body":85874,"cover":39749,"coverAlt":88756,"date":39751,"description":88757,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":88758,"navigation":208,"path":88761,"schemaOrg":88762,"seo":88766,"series":26460,"seriesDescription":60258,"seriesOrder":238,"seriesTitle":60259,"slug":942,"stem":88767,"tags":88768,"__hash__":88773},"blog\u002Fblog\u002Fdirectives-vue-v-on-guide.en.md","Vue Directives: v-on",{"type":8,"value":85875,"toc":88733},[85876,85881,85889,85891,85898,85909,85916,85918,85921,85953,85955,85984,85989,86032,86034,86039,86042,86068,86070,86075,86088,86093,86095,86099,86101,86133,86140,86169,86176,86178,86202,86204,86232,86239,86243,86246,86306,86309,86339,86342,86349,86351,86377,86379,86405,86411,86413,86417,86518,86625,86631,86828,87037,87041,87175,87320,87324,87439,87569,87573,87576,87593,88171,88696,88698,88703,88706,88731],[11,85877,68424,85879],{"id":85878},"vue-directives-v-on",[87,85880,23871],{},[15,85882,85883,85885,85886,85888],{},[87,85884,23871],{}," connects DOM or component events to functions in your app.\nWhen the user clicks, types, or presses a key, ",[87,85887,23871],{}," triggers the logic you defined.",[22,85890,62810],{"id":62809},[15,85892,62813,85893,85895,85896,80614],{},[87,85894,23871],{},", an interface cannot respond to user interaction.\nWith ",[87,85897,23871],{},[33,85899,85900,85903,85906],{},[36,85901,85902],{},"Capture user actions without manually manipulating the DOM.",[36,85904,85905],{},"Keep interactions declarative and readable in the template.",[36,85907,85908],{},"Separate state, rendering, and behavior in a way that stays consistent with Vue.",[5367,85910,85911],{},[15,85912,85913,85915],{},[87,85914,23871],{}," is the foundation for buttons, forms, keyboard shortcuts, and event-based communication between components.",[22,85917,62839],{"id":57680},[15,85919,85920],{},"Long form:",[154,85922,85924],{"className":156,"code":85923,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cbutton v-on:click=\"increment\">Increase\u003C\u002Fbutton>\n",[87,85925,85926],{"__ignoreMap":163},[167,85927,85928,85930,85932,85934,85936,85938,85940,85942,85944,85946,85949,85951],{"class":169,"line":170},[167,85929,174],{"class":173},[167,85931,507],{"class":177},[167,85933,36816],{"class":181},[167,85935,583],{"class":173},[167,85937,36821],{"class":181},[167,85939,267],{"class":173},[167,85941,5080],{"class":201},[167,85943,36828],{"class":173},[167,85945,5080],{"class":201},[167,85947,85948],{"class":173},">Increase\u003C\u002F",[167,85950,507],{"class":177},[167,85952,185],{"class":173},[15,85954,62877],{},[154,85956,85958],{"className":156,"code":85957,"filename":15284,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"increment\">Increase\u003C\u002Fbutton>\n",[87,85959,85960],{"__ignoreMap":163},[167,85961,85962,85964,85966,85968,85970,85972,85974,85976,85978,85980,85982],{"class":169,"line":170},[167,85963,174],{"class":173},[167,85965,507],{"class":177},[167,85967,36854],{"class":173},[167,85969,36821],{"class":181},[167,85971,267],{"class":173},[167,85973,5080],{"class":201},[167,85975,36828],{"class":173},[167,85977,5080],{"class":201},[167,85979,85948],{"class":173},[167,85981,507],{"class":177},[167,85983,185],{"class":173},[15,85985,85986,85988],{},[87,85987,23871],{}," supports:",[33,85990,85991,86002,86009,86020],{},[36,85992,85993,85994,1025,85996,1025,85998,1025,86000,4270],{},"Native events (",[87,85995,36821],{},[87,85997,2650],{},[87,85999,36887],{},[87,86001,36890],{},[36,86003,86004,86005,1025,86007,4270],{},"Component-emitted events (",[87,86006,36896],{},[87,86008,36899],{},[36,86010,86011,86012,1025,86014,1025,86016,1025,86018,4270],{},"Event modifiers (",[87,86013,36905],{},[87,86015,36908],{},[87,86017,36911],{},[87,86019,36914],{},[36,86021,86022,86023,1025,86025,86027,86028,1025,86030,7863],{},"Keyboard modifiers (",[87,86024,36920],{},[87,86026,36923],{},", combinations with ",[87,86029,36927],{},[87,86031,36930],{},[22,86033,62952],{"id":62951},[15,86035,62955,86036,86038],{},[87,86037,23871],{}," whenever you need to react to user actions or component events.",[15,86040,86041],{},"Typical use cases:",[33,86043,86044,86049,86054,86059,86063],{},[36,86045,86046,86047,4270],{},"Action buttons (",[87,86048,36947],{},[36,86050,86051,86052,4270],{},"Forms (",[87,86053,36953],{},[36,86055,86056,86057,4270],{},"Real-time input handling (",[87,86058,36959],{},[36,86060,57653,86061,4270],{},[87,86062,36964],{},[36,86064,86065,86066,4270],{},"Custom events emitted by child components (",[87,86067,36970],{},[22,86069,62980],{"id":62979},[15,86071,80766,86072,86074],{},[87,86073,23871],{}," in these cases:",[33,86076,86077,86080,86085],{},[36,86078,86079],{},"When there is no real interaction and content is fully static.",[36,86081,86082,86083,1679],{},"When you are placing too much inline logic in the template; move it to functions or ",[87,86084,1661],{},[36,86086,86087],{},"When you are trying to \"solve\" security with frontend events: real validation must happen in the backend.",[5367,86089,86090],{},[15,86091,86092],{},"Also avoid chaining too many modifiers without clear intent, since that hurts maintainability.",[22,86094,63002],{"id":57819},[3087,86096,86098],{"id":86097},"_1-executing-the-function-instead-of-referencing-it","1) Executing the function instead of referencing it",[15,86100,63012],{},[154,86102,86104],{"className":156,"code":86103,"filename":63112,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"saveTask()\">Save\u003C\u002Fbutton>\n",[87,86105,86106],{"__ignoreMap":163},[167,86107,86108,86110,86112,86114,86116,86118,86120,86122,86124,86126,86129,86131],{"class":169,"line":170},[167,86109,174],{"class":173},[167,86111,507],{"class":177},[167,86113,36854],{"class":173},[167,86115,36821],{"class":181},[167,86117,267],{"class":173},[167,86119,5080],{"class":201},[167,86121,37025],{"class":181},[167,86123,34267],{"class":173},[167,86125,5080],{"class":201},[167,86127,86128],{"class":173},">Save\u003C\u002F",[167,86130,507],{"class":177},[167,86132,185],{"class":173},[15,86134,86135,86136,86139],{},"This is ",[3933,86137,86138],{},"valid",", but if you do not need arguments, this is usually cleaner:",[154,86141,86143],{"className":156,"code":86142,"filename":80911,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"saveTask\">Save\u003C\u002Fbutton>\n",[87,86144,86145],{"__ignoreMap":163},[167,86146,86147,86149,86151,86153,86155,86157,86159,86161,86163,86165,86167],{"class":169,"line":170},[167,86148,174],{"class":173},[167,86150,507],{"class":177},[167,86152,36854],{"class":173},[167,86154,36821],{"class":181},[167,86156,267],{"class":173},[167,86158,5080],{"class":201},[167,86160,37025],{"class":173},[167,86162,5080],{"class":201},[167,86164,86128],{"class":173},[167,86166,507],{"class":177},[167,86168,185],{"class":173},[3087,86170,86172,86173,86175],{"id":86171},"_2-forgetting-prevent-in-forms","2) Forgetting ",[87,86174,36905],{}," in forms",[15,86177,63012],{},[154,86179,86180],{"className":156,"code":37084,"filename":63112,"language":162,"meta":163,"style":163},[87,86181,86182],{"__ignoreMap":163},[167,86183,86184,86186,86188,86190,86192,86194,86196,86198,86200],{"class":169,"line":170},[167,86185,174],{"class":173},[167,86187,4305],{"class":177},[167,86189,36854],{"class":173},[167,86191,36887],{"class":181},[167,86193,267],{"class":173},[167,86195,5080],{"class":201},[167,86197,37103],{"class":173},[167,86199,5080],{"class":201},[167,86201,185],{"class":173},[15,86203,63046],{},[154,86205,86206],{"className":156,"code":37112,"filename":80911,"language":162,"meta":163,"style":163},[87,86207,86208],{"__ignoreMap":163},[167,86209,86210,86212,86214,86216,86218,86220,86222,86224,86226,86228,86230],{"class":169,"line":170},[167,86211,174],{"class":173},[167,86213,4305],{"class":177},[167,86215,36854],{"class":173},[167,86217,36887],{"class":181},[167,86219,1679],{"class":173},[167,86221,37129],{"class":181},[167,86223,267],{"class":173},[167,86225,5080],{"class":201},[167,86227,37103],{"class":173},[167,86229,5080],{"class":201},[167,86231,185],{"class":173},[5367,86233,86234],{},[15,86235,62813,86236,86238],{},[87,86237,36905],{},", the browser reloads the page by default.",[3087,86240,86242],{"id":86241},"_3-putting-too-much-logic-inside-the-template","3) Putting too much logic inside the template",[15,86244,86245],{},"Avoid:",[154,86247,86249],{"className":156,"code":86248,"filename":63112,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"isAdmin && canEdit && !isLocked ? publishNow() : showWarning()\">\n  Publish\n\u003C\u002Fbutton>\n",[87,86250,86251,86293,86298],{"__ignoreMap":163},[167,86252,86253,86255,86257,86259,86261,86263,86265,86267,86269,86271,86273,86275,86277,86279,86281,86283,86285,86287,86289,86291],{"class":169,"line":170},[167,86254,174],{"class":173},[167,86256,507],{"class":177},[167,86258,36854],{"class":173},[167,86260,36821],{"class":181},[167,86262,267],{"class":173},[167,86264,5080],{"class":201},[167,86266,37175],{"class":173},[167,86268,8339],{"class":191},[167,86270,37180],{"class":173},[167,86272,8339],{"class":191},[167,86274,5625],{"class":191},[167,86276,37187],{"class":173},[167,86278,8316],{"class":191},[167,86280,37192],{"class":181},[167,86282,14087],{"class":173},[167,86284,583],{"class":191},[167,86286,37199],{"class":181},[167,86288,34267],{"class":173},[167,86290,5080],{"class":201},[167,86292,185],{"class":173},[167,86294,86295],{"class":169,"line":188},[167,86296,86297],{"class":173},"  Publish\n",[167,86299,86300,86302,86304],{"class":169,"line":205},[167,86301,282],{"class":173},[167,86303,507],{"class":177},[167,86305,185],{"class":173},[15,86307,86308],{},"Better:",[154,86310,86312],{"className":156,"code":86311,"filename":80911,"language":162,"meta":163,"style":163},"\u003Cbutton @click=\"handlePublishClick\">Publish\u003C\u002Fbutton>\n",[87,86313,86314],{"__ignoreMap":163},[167,86315,86316,86318,86320,86322,86324,86326,86328,86330,86332,86335,86337],{"class":169,"line":170},[167,86317,174],{"class":173},[167,86319,507],{"class":177},[167,86321,36854],{"class":173},[167,86323,36821],{"class":181},[167,86325,267],{"class":173},[167,86327,5080],{"class":201},[167,86329,37243],{"class":173},[167,86331,5080],{"class":201},[167,86333,86334],{"class":173},">Publish\u003C\u002F",[167,86336,507],{"class":177},[167,86338,185],{"class":173},[15,86340,86341],{},"Then move the decision into a clear function in the script.",[3087,86343,86345,86346,86348],{"id":86344},"_4-using-event-without-declaring-it","4) Using ",[87,86347,4195],{}," without declaring it",[15,86350,63012],{},[154,86352,86353],{"className":156,"code":37267,"filename":63112,"language":162,"meta":163,"style":163},[87,86354,86355],{"__ignoreMap":163},[167,86356,86357,86359,86361,86363,86365,86367,86369,86371,86373,86375],{"class":169,"line":170},[167,86358,174],{"class":173},[167,86360,2650],{"class":177},[167,86362,36854],{"class":173},[167,86364,2650],{"class":181},[167,86366,267],{"class":173},[167,86368,5080],{"class":201},[167,86370,37286],{"class":181},[167,86372,37289],{"class":173},[167,86374,5080],{"class":201},[167,86376,5325],{"class":173},[15,86378,63046],{},[154,86380,86381],{"className":156,"code":37298,"filename":80911,"language":162,"meta":163,"style":163},[87,86382,86383],{"__ignoreMap":163},[167,86384,86385,86387,86389,86391,86393,86395,86397,86399,86401,86403],{"class":169,"line":170},[167,86386,174],{"class":173},[167,86388,2650],{"class":177},[167,86390,36854],{"class":173},[167,86392,2650],{"class":181},[167,86394,267],{"class":173},[167,86396,5080],{"class":201},[167,86398,37286],{"class":181},[167,86400,37319],{"class":173},[167,86402,5080],{"class":201},[167,86404,5325],{"class":173},[15,86406,86407,86408,86410],{},"Or better, type the event and read ",[87,86409,7839],{}," safely with TypeScript.",[22,86412,63234],{"id":57925},[3087,86414,86416],{"id":86415},"_1-simple-click-to-update-state","1) Simple click to update state",[154,86418,86420],{"className":156,"code":37338,"filename":3260,"highlights":86419,"language":162,"meta":163,"style":163},[160,273],[87,86421,86422,86438,86450,86454,86471,86479,86483,86491,86510],{"__ignoreMap":163},[167,86423,86424,86426,86428,86430,86432,86434,86436],{"class":169,"line":170},[167,86425,174],{"class":173},[167,86427,178],{"class":177},[167,86429,182],{"class":181},[167,86431,1050],{"class":181},[167,86433,267],{"class":173},[167,86435,1055],{"class":201},[167,86437,185],{"class":173},[167,86439,86440,86442,86444,86446,86448],{"class":169,"line":188},[167,86441,192],{"class":191},[167,86443,195],{"class":173},[167,86445,198],{"class":191},[167,86447,24041],{"class":201},[167,86449,24044],{"class":173},[167,86451,86452],{"class":169,"line":205},[167,86453,209],{"emptyLinePlaceholder":208},[167,86455,86457,86459,86461,86463,86465,86467,86469],{"class":86456,"line":160},[169,213],[167,86458,216],{"class":191},[167,86460,15325],{"class":219},[167,86462,223],{"class":191},[167,86464,226],{"class":181},[167,86466,229],{"class":173},[167,86468,1960],{"class":219},[167,86470,24169],{"class":173},[167,86472,86473,86475,86477],{"class":169,"line":238},[167,86474,282],{"class":173},[167,86476,178],{"class":177},[167,86478,185],{"class":173},[167,86480,86481],{"class":169,"line":243},[167,86482,209],{"emptyLinePlaceholder":208},[167,86484,86485,86487,86489],{"class":169,"line":261},[167,86486,174],{"class":173},[167,86488,299],{"class":177},[167,86490,185],{"class":173},[167,86492,86494,86496,86498,86500,86502,86504,86506,86508],{"class":86493,"line":273},[169,213],[167,86495,307],{"class":173},[167,86497,507],{"class":177},[167,86499,1182],{"class":181},[167,86501,267],{"class":173},[167,86503,18386],{"class":201},[167,86505,37426],{"class":173},[167,86507,507],{"class":177},[167,86509,185],{"class":173},[167,86511,86512,86514,86516],{"class":169,"line":279},[167,86513,282],{"class":173},[167,86515,299],{"class":177},[167,86517,185],{"class":173},[154,86519,86521],{"className":156,"code":37441,"filename":3973,"highlights":86520,"language":162,"meta":163,"style":163},[238,304],[87,86522,86523,86537,86545,86551,86557,86566,86570,86574,86578,86586,86590,86598,86617],{"__ignoreMap":163},[167,86524,86525,86527,86529,86531,86533,86535],{"class":169,"line":170},[167,86526,174],{"class":173},[167,86528,178],{"class":177},[167,86530,1050],{"class":181},[167,86532,267],{"class":173},[167,86534,1055],{"class":201},[167,86536,185],{"class":173},[167,86538,86539,86541,86543],{"class":169,"line":188},[167,86540,608],{"class":191},[167,86542,3991],{"class":191},[167,86544,1905],{"class":173},[167,86546,86547,86549],{"class":169,"line":205},[167,86548,7176],{"class":181},[167,86550,763],{"class":173},[167,86552,86553,86555],{"class":169,"line":160},[167,86554,1937],{"class":191},[167,86556,1905],{"class":173},[167,86558,86560,86562,86564],{"class":86559,"line":238},[169,213],[167,86561,37484],{"class":173},[167,86563,1960],{"class":219},[167,86565,393],{"class":173},[167,86567,86568],{"class":169,"line":243},[167,86569,24370],{"class":173},[167,86571,86572],{"class":169,"line":261},[167,86573,398],{"class":173},[167,86575,86576],{"class":169,"line":273},[167,86577,24148],{"class":173},[167,86579,86580,86582,86584],{"class":169,"line":279},[167,86581,282],{"class":173},[167,86583,178],{"class":177},[167,86585,185],{"class":173},[167,86587,86588],{"class":169,"line":289},[167,86589,209],{"emptyLinePlaceholder":208},[167,86591,86592,86594,86596],{"class":169,"line":294},[167,86593,174],{"class":173},[167,86595,299],{"class":177},[167,86597,185],{"class":173},[167,86599,86601,86603,86605,86607,86609,86611,86613,86615],{"class":86600,"line":304},[169,213],[167,86602,307],{"class":173},[167,86604,507],{"class":177},[167,86606,1182],{"class":181},[167,86608,267],{"class":173},[167,86610,18386],{"class":201},[167,86612,37426],{"class":173},[167,86614,507],{"class":177},[167,86616,185],{"class":173},[167,86618,86619,86621,86623],{"class":169,"line":313},[167,86620,282],{"class":173},[167,86622,299],{"class":177},[167,86624,185],{"class":173},[3087,86626,86628,86629],{"id":86627},"_2-form-submit-with-prevent","2) Form submit with ",[87,86630,36905],{},[154,86632,86635],{"className":156,"code":86633,"filename":3260,"highlights":86634,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst email = ref(\"\");\n\nfunction submitForm() {\n  if (!email.value.trim()) return;\n  console.log(\"Send:\", email.value);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submitForm\">\n    \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"you@email.com\" \u002F>\n    \u003Cbutton type=\"submit\">Send\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[313],[87,86636,86637,86653,86665,86669,86685,86689,86697,86715,86728,86732,86740,86744,86752,86767,86793,86812,86820],{"__ignoreMap":163},[167,86638,86639,86641,86643,86645,86647,86649,86651],{"class":169,"line":170},[167,86640,174],{"class":173},[167,86642,178],{"class":177},[167,86644,182],{"class":181},[167,86646,1050],{"class":181},[167,86648,267],{"class":173},[167,86650,1055],{"class":201},[167,86652,185],{"class":173},[167,86654,86655,86657,86659,86661,86663],{"class":169,"line":188},[167,86656,192],{"class":191},[167,86658,195],{"class":173},[167,86660,198],{"class":191},[167,86662,24041],{"class":201},[167,86664,24044],{"class":173},[167,86666,86667],{"class":169,"line":205},[167,86668,209],{"emptyLinePlaceholder":208},[167,86670,86671,86673,86675,86677,86679,86681,86683],{"class":169,"line":160},[167,86672,216],{"class":191},[167,86674,37598],{"class":219},[167,86676,223],{"class":191},[167,86678,226],{"class":181},[167,86680,229],{"class":173},[167,86682,31161],{"class":201},[167,86684,24169],{"class":173},[167,86686,86687],{"class":169,"line":238},[167,86688,209],{"emptyLinePlaceholder":208},[167,86690,86691,86693,86695],{"class":169,"line":243},[167,86692,246],{"class":191},[167,86694,37619],{"class":181},[167,86696,763],{"class":173},[167,86698,86699,86701,86703,86705,86707,86709,86711,86713],{"class":169,"line":261},[167,86700,2544],{"class":191},[167,86702,2526],{"class":173},[167,86704,6641],{"class":191},[167,86706,37632],{"class":173},[167,86708,2500],{"class":181},[167,86710,6689],{"class":173},[167,86712,24238],{"class":191},[167,86714,24044],{"class":173},[167,86716,86717,86719,86721,86723,86726],{"class":169,"line":273},[167,86718,2608],{"class":173},[167,86720,2611],{"class":181},[167,86722,229],{"class":173},[167,86724,86725],{"class":201},"\"Send:\"",[167,86727,37654],{"class":173},[167,86729,86730],{"class":169,"line":279},[167,86731,276],{"class":173},[167,86733,86734,86736,86738],{"class":169,"line":289},[167,86735,282],{"class":173},[167,86737,178],{"class":177},[167,86739,185],{"class":173},[167,86741,86742],{"class":169,"line":294},[167,86743,209],{"emptyLinePlaceholder":208},[167,86745,86746,86748,86750],{"class":169,"line":304},[167,86747,174],{"class":173},[167,86749,299],{"class":177},[167,86751,185],{"class":173},[167,86753,86755,86757,86759,86761,86763,86765],{"class":86754,"line":313},[169,213],[167,86756,307],{"class":173},[167,86758,4305],{"class":177},[167,86760,4308],{"class":181},[167,86762,267],{"class":173},[167,86764,37692],{"class":201},[167,86766,185],{"class":173},[167,86768,86769,86771,86773,86775,86777,86779,86781,86783,86785,86787,86789,86791],{"class":169,"line":161},[167,86770,1257],{"class":173},[167,86772,2650],{"class":177},[167,86774,2653],{"class":181},[167,86776,267],{"class":173},[167,86778,37707],{"class":201},[167,86780,1174],{"class":181},[167,86782,267],{"class":173},[167,86784,37707],{"class":201},[167,86786,2668],{"class":181},[167,86788,267],{"class":173},[167,86790,64536],{"class":201},[167,86792,5325],{"class":173},[167,86794,86795,86797,86799,86801,86803,86805,86808,86810],{"class":169,"line":335},[167,86796,1257],{"class":173},[167,86798,507],{"class":177},[167,86800,1174],{"class":181},[167,86802,267],{"class":173},[167,86804,4348],{"class":201},[167,86806,86807],{"class":173},">Send\u003C\u002F",[167,86809,507],{"class":177},[167,86811,185],{"class":173},[167,86813,86814,86816,86818],{"class":169,"line":341},[167,86815,504],{"class":173},[167,86817,4305],{"class":177},[167,86819,185],{"class":173},[167,86821,86822,86824,86826],{"class":169,"line":489},[167,86823,282],{"class":173},[167,86825,299],{"class":177},[167,86827,185],{"class":173},[154,86829,86832],{"className":156,"code":86830,"filename":3973,"highlights":86831,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      email: \"\",\n    };\n  },\n  methods: {\n    submitForm() {\n      if (!this.email.trim()) return;\n      console.log(\"Send:\", this.email);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"submitForm\">\n    \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"you@email.com\" \u002F>\n    \u003Cbutton type=\"submit\">Send\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[495],[87,86833,86834,86848,86856,86862,86868,86876,86880,86884,86888,86894,86914,86930,86934,86938,86942,86950,86954,86962,86977,87003,87021,87029],{"__ignoreMap":163},[167,86835,86836,86838,86840,86842,86844,86846],{"class":169,"line":170},[167,86837,174],{"class":173},[167,86839,178],{"class":177},[167,86841,1050],{"class":181},[167,86843,267],{"class":173},[167,86845,1055],{"class":201},[167,86847,185],{"class":173},[167,86849,86850,86852,86854],{"class":169,"line":188},[167,86851,608],{"class":191},[167,86853,3991],{"class":191},[167,86855,1905],{"class":173},[167,86857,86858,86860],{"class":169,"line":205},[167,86859,7176],{"class":181},[167,86861,763],{"class":173},[167,86863,86864,86866],{"class":169,"line":160},[167,86865,1937],{"class":191},[167,86867,1905],{"class":173},[167,86869,86870,86872,86874],{"class":169,"line":238},[167,86871,37802],{"class":173},[167,86873,31161],{"class":201},[167,86875,393],{"class":173},[167,86877,86878],{"class":169,"line":243},[167,86879,24370],{"class":173},[167,86881,86882],{"class":169,"line":261},[167,86883,398],{"class":173},[167,86885,86886],{"class":169,"line":273},[167,86887,4419],{"class":173},[167,86889,86890,86892],{"class":169,"line":279},[167,86891,37823],{"class":181},[167,86893,763],{"class":173},[167,86895,86896,86898,86900,86902,86904,86906,86908,86910,86912],{"class":169,"line":289},[167,86897,7261],{"class":191},[167,86899,2526],{"class":173},[167,86901,6641],{"class":191},[167,86903,4927],{"class":219},[167,86905,37838],{"class":173},[167,86907,2500],{"class":181},[167,86909,6689],{"class":173},[167,86911,24238],{"class":191},[167,86913,24044],{"class":173},[167,86915,86916,86918,86920,86922,86924,86926,86928],{"class":169,"line":294},[167,86917,20442],{"class":173},[167,86919,2611],{"class":181},[167,86921,229],{"class":173},[167,86923,86725],{"class":201},[167,86925,1025],{"class":173},[167,86927,4927],{"class":219},[167,86929,37863],{"class":173},[167,86931,86932],{"class":169,"line":304},[167,86933,755],{"class":173},[167,86935,86936],{"class":169,"line":313},[167,86937,398],{"class":173},[167,86939,86940],{"class":169,"line":161},[167,86941,24148],{"class":173},[167,86943,86944,86946,86948],{"class":169,"line":335},[167,86945,282],{"class":173},[167,86947,178],{"class":177},[167,86949,185],{"class":173},[167,86951,86952],{"class":169,"line":341},[167,86953,209],{"emptyLinePlaceholder":208},[167,86955,86956,86958,86960],{"class":169,"line":489},[167,86957,174],{"class":173},[167,86959,299],{"class":177},[167,86961,185],{"class":173},[167,86963,86965,86967,86969,86971,86973,86975],{"class":86964,"line":495},[169,213],[167,86966,307],{"class":173},[167,86968,4305],{"class":177},[167,86970,4308],{"class":181},[167,86972,267],{"class":173},[167,86974,37692],{"class":201},[167,86976,185],{"class":173},[167,86978,86979,86981,86983,86985,86987,86989,86991,86993,86995,86997,86999,87001],{"class":169,"line":501},[167,86980,1257],{"class":173},[167,86982,2650],{"class":177},[167,86984,2653],{"class":181},[167,86986,267],{"class":173},[167,86988,37707],{"class":201},[167,86990,1174],{"class":181},[167,86992,267],{"class":173},[167,86994,37707],{"class":201},[167,86996,2668],{"class":181},[167,86998,267],{"class":173},[167,87000,64536],{"class":201},[167,87002,5325],{"class":173},[167,87004,87005,87007,87009,87011,87013,87015,87017,87019],{"class":169,"line":512},[167,87006,1257],{"class":173},[167,87008,507],{"class":177},[167,87010,1174],{"class":181},[167,87012,267],{"class":173},[167,87014,4348],{"class":201},[167,87016,86807],{"class":173},[167,87018,507],{"class":177},[167,87020,185],{"class":173},[167,87022,87023,87025,87027],{"class":169,"line":781},[167,87024,504],{"class":173},[167,87026,4305],{"class":177},[167,87028,185],{"class":173},[167,87030,87031,87033,87035],{"class":169,"line":786},[167,87032,282],{"class":173},[167,87034,299],{"class":177},[167,87036,185],{"class":173},[3087,87038,87040],{"id":87039},"_3-keyboard-shortcut-with-modifiers","3) Keyboard shortcut with modifiers",[154,87042,87045],{"className":156,"code":87043,"filename":3260,"highlights":87044,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst note = ref(\"\");\n\nfunction saveDraft() {\n  console.log(\"Draft saved:\", note.value);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" \u002F>\n\u003C\u002Ftemplate>\n",[304],[87,87046,87047,87063,87075,87079,87095,87099,87107,87120,87124,87132,87136,87144,87167],{"__ignoreMap":163},[167,87048,87049,87051,87053,87055,87057,87059,87061],{"class":169,"line":170},[167,87050,174],{"class":173},[167,87052,178],{"class":177},[167,87054,182],{"class":181},[167,87056,1050],{"class":181},[167,87058,267],{"class":173},[167,87060,1055],{"class":201},[167,87062,185],{"class":173},[167,87064,87065,87067,87069,87071,87073],{"class":169,"line":188},[167,87066,192],{"class":191},[167,87068,195],{"class":173},[167,87070,198],{"class":191},[167,87072,24041],{"class":201},[167,87074,24044],{"class":173},[167,87076,87077],{"class":169,"line":205},[167,87078,209],{"emptyLinePlaceholder":208},[167,87080,87081,87083,87085,87087,87089,87091,87093],{"class":169,"line":160},[167,87082,216],{"class":191},[167,87084,38019],{"class":219},[167,87086,223],{"class":191},[167,87088,226],{"class":181},[167,87090,229],{"class":173},[167,87092,31161],{"class":201},[167,87094,24169],{"class":173},[167,87096,87097],{"class":169,"line":238},[167,87098,209],{"emptyLinePlaceholder":208},[167,87100,87101,87103,87105],{"class":169,"line":243},[167,87102,246],{"class":191},[167,87104,38040],{"class":181},[167,87106,763],{"class":173},[167,87108,87109,87111,87113,87115,87118],{"class":169,"line":261},[167,87110,2608],{"class":173},[167,87112,2611],{"class":181},[167,87114,229],{"class":173},[167,87116,87117],{"class":201},"\"Draft saved:\"",[167,87119,38056],{"class":173},[167,87121,87122],{"class":169,"line":273},[167,87123,276],{"class":173},[167,87125,87126,87128,87130],{"class":169,"line":279},[167,87127,282],{"class":173},[167,87129,178],{"class":177},[167,87131,185],{"class":173},[167,87133,87134],{"class":169,"line":289},[167,87135,209],{"emptyLinePlaceholder":208},[167,87137,87138,87140,87142],{"class":169,"line":294},[167,87139,174],{"class":173},[167,87141,299],{"class":177},[167,87143,185],{"class":173},[167,87145,87147,87149,87151,87153,87155,87157,87159,87161,87163,87165],{"class":87146,"line":304},[169,213],[167,87148,307],{"class":173},[167,87150,38088],{"class":177},[167,87152,2653],{"class":181},[167,87154,267],{"class":173},[167,87156,38095],{"class":201},[167,87158,38098],{"class":181},[167,87160,267],{"class":173},[167,87162,38103],{"class":201},[167,87164,31789],{"class":31788},[167,87166,185],{"class":173},[167,87168,87169,87171,87173],{"class":169,"line":313},[167,87170,282],{"class":173},[167,87172,299],{"class":177},[167,87174,185],{"class":173},[154,87176,87179],{"className":156,"code":87177,"filename":3973,"highlights":87178,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      note: \"\",\n    };\n  },\n  methods: {\n    saveDraft() {\n      console.log(\"Draft saved:\", this.note);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" \u002F>\n\u003C\u002Ftemplate>\n",[489],[87,87180,87181,87195,87203,87209,87215,87223,87227,87231,87235,87241,87257,87261,87265,87269,87277,87281,87289,87312],{"__ignoreMap":163},[167,87182,87183,87185,87187,87189,87191,87193],{"class":169,"line":170},[167,87184,174],{"class":173},[167,87186,178],{"class":177},[167,87188,1050],{"class":181},[167,87190,267],{"class":173},[167,87192,1055],{"class":201},[167,87194,185],{"class":173},[167,87196,87197,87199,87201],{"class":169,"line":188},[167,87198,608],{"class":191},[167,87200,3991],{"class":191},[167,87202,1905],{"class":173},[167,87204,87205,87207],{"class":169,"line":205},[167,87206,7176],{"class":181},[167,87208,763],{"class":173},[167,87210,87211,87213],{"class":169,"line":160},[167,87212,1937],{"class":191},[167,87214,1905],{"class":173},[167,87216,87217,87219,87221],{"class":169,"line":238},[167,87218,38160],{"class":173},[167,87220,31161],{"class":201},[167,87222,393],{"class":173},[167,87224,87225],{"class":169,"line":243},[167,87226,24370],{"class":173},[167,87228,87229],{"class":169,"line":261},[167,87230,398],{"class":173},[167,87232,87233],{"class":169,"line":273},[167,87234,4419],{"class":173},[167,87236,87237,87239],{"class":169,"line":279},[167,87238,38181],{"class":181},[167,87240,763],{"class":173},[167,87242,87243,87245,87247,87249,87251,87253,87255],{"class":169,"line":289},[167,87244,20442],{"class":173},[167,87246,2611],{"class":181},[167,87248,229],{"class":173},[167,87250,87117],{"class":201},[167,87252,1025],{"class":173},[167,87254,4927],{"class":219},[167,87256,38200],{"class":173},[167,87258,87259],{"class":169,"line":294},[167,87260,755],{"class":173},[167,87262,87263],{"class":169,"line":304},[167,87264,398],{"class":173},[167,87266,87267],{"class":169,"line":313},[167,87268,24148],{"class":173},[167,87270,87271,87273,87275],{"class":169,"line":161},[167,87272,282],{"class":173},[167,87274,178],{"class":177},[167,87276,185],{"class":173},[167,87278,87279],{"class":169,"line":335},[167,87280,209],{"emptyLinePlaceholder":208},[167,87282,87283,87285,87287],{"class":169,"line":341},[167,87284,174],{"class":173},[167,87286,299],{"class":177},[167,87288,185],{"class":173},[167,87290,87292,87294,87296,87298,87300,87302,87304,87306,87308,87310],{"class":87291,"line":489},[169,213],[167,87293,307],{"class":173},[167,87295,38088],{"class":177},[167,87297,2653],{"class":181},[167,87299,267],{"class":173},[167,87301,38095],{"class":201},[167,87303,38098],{"class":181},[167,87305,267],{"class":173},[167,87307,38103],{"class":201},[167,87309,31789],{"class":31788},[167,87311,185],{"class":173},[167,87313,87314,87316,87318],{"class":169,"line":495},[167,87315,282],{"class":173},[167,87317,299],{"class":177},[167,87319,185],{"class":173},[3087,87321,87323],{"id":87322},"_4-custom-event-from-a-child-component","4) Custom event from a child component",[154,87325,87328],{"className":156,"code":87326,"filename":3260,"highlights":87327,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport TaskForm from \".\u002FTaskForm.vue\";\n\nfunction handleSave(taskTitle: string) {\n  console.log(\"New task:\", taskTitle);\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskForm @save=\"handleSave\" \u002F>\n\u003C\u002Ftemplate>\n",[160,289],[87,87329,87330,87346,87358,87362,87379,87392,87396,87404,87408,87416,87431],{"__ignoreMap":163},[167,87331,87332,87334,87336,87338,87340,87342,87344],{"class":169,"line":170},[167,87333,174],{"class":173},[167,87335,178],{"class":177},[167,87337,182],{"class":181},[167,87339,1050],{"class":181},[167,87341,267],{"class":173},[167,87343,1055],{"class":201},[167,87345,185],{"class":173},[167,87347,87348,87350,87352,87354,87356],{"class":169,"line":188},[167,87349,192],{"class":191},[167,87351,38296],{"class":173},[167,87353,198],{"class":191},[167,87355,38301],{"class":201},[167,87357,24044],{"class":173},[167,87359,87360],{"class":169,"line":205},[167,87361,209],{"emptyLinePlaceholder":208},[167,87363,87365,87367,87369,87371,87373,87375,87377],{"class":87364,"line":160},[169,213],[167,87366,246],{"class":191},[167,87368,38315],{"class":181},[167,87370,229],{"class":173},[167,87372,38320],{"class":254},[167,87374,583],{"class":191},[167,87376,586],{"class":219},[167,87378,258],{"class":173},[167,87380,87381,87383,87385,87387,87390],{"class":169,"line":238},[167,87382,2608],{"class":173},[167,87384,2611],{"class":181},[167,87386,229],{"class":173},[167,87388,87389],{"class":201},"\"New task:\"",[167,87391,38340],{"class":173},[167,87393,87394],{"class":169,"line":243},[167,87395,276],{"class":173},[167,87397,87398,87400,87402],{"class":169,"line":261},[167,87399,282],{"class":173},[167,87401,178],{"class":177},[167,87403,185],{"class":173},[167,87405,87406],{"class":169,"line":273},[167,87407,209],{"emptyLinePlaceholder":208},[167,87409,87410,87412,87414],{"class":169,"line":279},[167,87411,174],{"class":173},[167,87413,299],{"class":177},[167,87415,185],{"class":173},[167,87417,87419,87421,87423,87425,87427,87429],{"class":87418,"line":289},[169,213],[167,87420,307],{"class":173},[167,87422,38372],{"class":177},[167,87424,38375],{"class":181},[167,87426,267],{"class":173},[167,87428,38380],{"class":201},[167,87430,5325],{"class":173},[167,87432,87433,87435,87437],{"class":169,"line":294},[167,87434,282],{"class":173},[167,87436,299],{"class":177},[167,87438,185],{"class":173},[154,87440,87443],{"className":156,"code":87441,"filename":3973,"highlights":87442,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport TaskForm from \".\u002FTaskForm.vue\";\n\nexport default {\n  components: { TaskForm },\n  methods: {\n    handleSave(taskTitle) {\n      console.log(\"New task:\", taskTitle);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskForm @save=\"handleSave\" \u002F>\n\u003C\u002Ftemplate>\n",[243,161],[87,87444,87445,87459,87471,87475,87483,87487,87492,87502,87514,87518,87522,87526,87534,87538,87547,87561],{"__ignoreMap":163},[167,87446,87447,87449,87451,87453,87455,87457],{"class":169,"line":170},[167,87448,174],{"class":173},[167,87450,178],{"class":177},[167,87452,1050],{"class":181},[167,87454,267],{"class":173},[167,87456,1055],{"class":201},[167,87458,185],{"class":173},[167,87460,87461,87463,87465,87467,87469],{"class":169,"line":188},[167,87462,192],{"class":191},[167,87464,38296],{"class":173},[167,87466,198],{"class":191},[167,87468,38301],{"class":201},[167,87470,24044],{"class":173},[167,87472,87473],{"class":169,"line":205},[167,87474,209],{"emptyLinePlaceholder":208},[167,87476,87477,87479,87481],{"class":169,"line":160},[167,87478,608],{"class":191},[167,87480,3991],{"class":191},[167,87482,1905],{"class":173},[167,87484,87485],{"class":169,"line":238},[167,87486,38439],{"class":173},[167,87488,87490],{"class":87489,"line":243},[169,213],[167,87491,4419],{"class":173},[167,87493,87494,87496,87498,87500],{"class":169,"line":261},[167,87495,38449],{"class":181},[167,87497,229],{"class":173},[167,87499,38320],{"class":254},[167,87501,258],{"class":173},[167,87503,87504,87506,87508,87510,87512],{"class":169,"line":273},[167,87505,20442],{"class":173},[167,87507,2611],{"class":181},[167,87509,229],{"class":173},[167,87511,87389],{"class":201},[167,87513,38340],{"class":173},[167,87515,87516],{"class":169,"line":279},[167,87517,755],{"class":173},[167,87519,87520],{"class":169,"line":289},[167,87521,398],{"class":173},[167,87523,87524],{"class":169,"line":294},[167,87525,24148],{"class":173},[167,87527,87528,87530,87532],{"class":169,"line":304},[167,87529,282],{"class":173},[167,87531,178],{"class":177},[167,87533,185],{"class":173},[167,87535,87536],{"class":169,"line":313},[167,87537,209],{"emptyLinePlaceholder":208},[167,87539,87541,87543,87545],{"class":87540,"line":161},[169,213],[167,87542,174],{"class":173},[167,87544,299],{"class":177},[167,87546,185],{"class":173},[167,87548,87549,87551,87553,87555,87557,87559],{"class":169,"line":335},[167,87550,307],{"class":173},[167,87552,38372],{"class":177},[167,87554,38375],{"class":181},[167,87556,267],{"class":173},[167,87558,38380],{"class":201},[167,87560,5325],{"class":173},[167,87562,87563,87565,87567],{"class":169,"line":341},[167,87564,282],{"class":173},[167,87566,299],{"class":177},[167,87568,185],{"class":173},[22,87570,87572],{"id":87571},"full-example","Full example",[15,87574,87575],{},"Task list component with:",[33,87577,87578,87583,87588],{},[36,87579,87580,87582],{},[87,87581,38534],{}," to create tasks.",[36,87584,87585,87587],{},[87,87586,30630],{}," to mark tasks as completed.",[36,87589,87590,87592],{},[87,87591,38545],{}," for quick submit.",[154,87594,87596],{"className":156,"code":87595,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = {\n  id: number;\n  title: string;\n  done: boolean;\n};\n\nconst draft = ref(\"\");\nconst tasks = ref\u003CTask[]>([]);\n\nconst remaining = computed(() => tasks.value.filter((task) => !task.done).length);\n\nfunction addTask() {\n  const title = draft.value.trim();\n  if (!title) return;\n\n  tasks.value.push({\n    id: Date.now(),\n    title,\n    done: false,\n  });\n  draft.value = \"\";\n}\n\nfunction toggleTask(id: number) {\n  const task = tasks.value.find((item) => item.id === id);\n  if (!task) return;\n  task.done = !task.done;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Tasks\u003C\u002Fh2>\n    \u003Cp>Remaining: {{ remaining }}\u003C\u002Fp>\n\n    \u003Cform @submit.prevent=\"addTask\">\n      \u003Cinput\n        v-model=\"draft\"\n        type=\"text\"\n        placeholder=\"Type a task and press Enter\"\n        @keydown.enter.prevent=\"addTask\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Add\u003C\u002Fbutton>\n    \u003C\u002Fform>\n\n    \u003Cul>\n      \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n        \u003Cbutton @click=\"toggleTask(task.id)\">\n          {{ task.done ? \"Reopen\" : \"Complete\" }}\n        \u003C\u002Fbutton>\n        \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n          {{ task.title }}\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,87597,87598,87614,87626,87630,87640,87650,87660,87670,87674,87678,87694,87710,87714,87748,87752,87760,87774,87788,87792,87800,87808,87812,87820,87824,87834,87838,87842,87858,87884,87898,87908,87912,87920,87924,87932,87940,87953,87966,87970,87984,87990,87998,88006,88015,88023,88027,88046,88054,88058,88066,88086,88100,88105,88113,88127,88131,88139,88147,88155,88163],{"__ignoreMap":163},[167,87599,87600,87602,87604,87606,87608,87610,87612],{"class":169,"line":170},[167,87601,174],{"class":173},[167,87603,178],{"class":177},[167,87605,182],{"class":181},[167,87607,1050],{"class":181},[167,87609,267],{"class":173},[167,87611,1055],{"class":201},[167,87613,185],{"class":173},[167,87615,87616,87618,87620,87622,87624],{"class":169,"line":188},[167,87617,192],{"class":191},[167,87619,1805],{"class":173},[167,87621,198],{"class":191},[167,87623,24041],{"class":201},[167,87625,24044],{"class":173},[167,87627,87628],{"class":169,"line":205},[167,87629,209],{"emptyLinePlaceholder":208},[167,87631,87632,87634,87636,87638],{"class":169,"line":160},[167,87633,569],{"class":191},[167,87635,11605],{"class":181},[167,87637,223],{"class":191},[167,87639,1905],{"class":173},[167,87641,87642,87644,87646,87648],{"class":169,"line":238},[167,87643,6505],{"class":254},[167,87645,583],{"class":191},[167,87647,8493],{"class":219},[167,87649,24044],{"class":173},[167,87651,87652,87654,87656,87658],{"class":169,"line":243},[167,87653,11622],{"class":254},[167,87655,583],{"class":191},[167,87657,586],{"class":219},[167,87659,24044],{"class":173},[167,87661,87662,87664,87666,87668],{"class":169,"line":261},[167,87663,11631],{"class":254},[167,87665,583],{"class":191},[167,87667,28416],{"class":219},[167,87669,24044],{"class":173},[167,87671,87672],{"class":169,"line":273},[167,87673,24148],{"class":173},[167,87675,87676],{"class":169,"line":279},[167,87677,209],{"emptyLinePlaceholder":208},[167,87679,87680,87682,87684,87686,87688,87690,87692],{"class":169,"line":289},[167,87681,216],{"class":191},[167,87683,38638],{"class":219},[167,87685,223],{"class":191},[167,87687,226],{"class":181},[167,87689,229],{"class":173},[167,87691,31161],{"class":201},[167,87693,24169],{"class":173},[167,87695,87696,87698,87700,87702,87704,87706,87708],{"class":169,"line":294},[167,87697,216],{"class":191},[167,87699,3368],{"class":219},[167,87701,223],{"class":191},[167,87703,226],{"class":181},[167,87705,174],{"class":173},[167,87707,11659],{"class":181},[167,87709,38665],{"class":173},[167,87711,87712],{"class":169,"line":304},[167,87713,209],{"emptyLinePlaceholder":208},[167,87715,87716,87718,87720,87722,87724,87726,87728,87730,87732,87734,87736,87738,87740,87742,87744,87746],{"class":169,"line":313},[167,87717,216],{"class":191},[167,87719,38676],{"class":219},[167,87721,223],{"class":191},[167,87723,1898],{"class":181},[167,87725,1493],{"class":173},[167,87727,639],{"class":191},[167,87729,3451],{"class":173},[167,87731,8252],{"class":181},[167,87733,1918],{"class":173},[167,87735,5075],{"class":254},[167,87737,693],{"class":173},[167,87739,639],{"class":191},[167,87741,5625],{"class":191},[167,87743,38701],{"class":173},[167,87745,15756],{"class":219},[167,87747,24169],{"class":173},[167,87749,87750],{"class":169,"line":161},[167,87751,209],{"emptyLinePlaceholder":208},[167,87753,87754,87756,87758],{"class":169,"line":335},[167,87755,246],{"class":191},[167,87757,38716],{"class":181},[167,87759,763],{"class":173},[167,87761,87762,87764,87766,87768,87770,87772],{"class":169,"line":341},[167,87763,1443],{"class":191},[167,87765,38725],{"class":219},[167,87767,223],{"class":191},[167,87769,38730],{"class":173},[167,87771,2500],{"class":181},[167,87773,25307],{"class":173},[167,87775,87776,87778,87780,87782,87784,87786],{"class":169,"line":489},[167,87777,2544],{"class":191},[167,87779,2526],{"class":173},[167,87781,6641],{"class":191},[167,87783,38745],{"class":173},[167,87785,24238],{"class":191},[167,87787,24044],{"class":173},[167,87789,87790],{"class":169,"line":495},[167,87791,209],{"emptyLinePlaceholder":208},[167,87793,87794,87796,87798],{"class":169,"line":501},[167,87795,38758],{"class":173},[167,87797,15723],{"class":181},[167,87799,372],{"class":173},[167,87801,87802,87804,87806],{"class":169,"line":512},[167,87803,15730],{"class":173},[167,87805,15733],{"class":181},[167,87807,15736],{"class":173},[167,87809,87810],{"class":169,"line":781},[167,87811,38775],{"class":173},[167,87813,87814,87816,87818],{"class":169,"line":786},[167,87815,38780],{"class":173},[167,87817,3392],{"class":219},[167,87819,393],{"class":173},[167,87821,87822],{"class":169,"line":2678},[167,87823,38789],{"class":173},[167,87825,87826,87828,87830,87832],{"class":169,"line":2692},[167,87827,38794],{"class":173},[167,87829,267],{"class":191},[167,87831,38799],{"class":201},[167,87833,24044],{"class":173},[167,87835,87836],{"class":169,"line":3575},[167,87837,276],{"class":173},[167,87839,87840],{"class":169,"line":5028},[167,87841,209],{"emptyLinePlaceholder":208},[167,87843,87844,87846,87848,87850,87852,87854,87856],{"class":169,"line":5037},[167,87845,246],{"class":191},[167,87847,8484],{"class":181},[167,87849,229],{"class":173},[167,87851,580],{"class":254},[167,87853,583],{"class":191},[167,87855,8493],{"class":219},[167,87857,258],{"class":173},[167,87859,87860,87862,87864,87866,87868,87870,87872,87874,87876,87878,87880,87882],{"class":169,"line":5046},[167,87861,1443],{"class":191},[167,87863,3446],{"class":219},[167,87865,223],{"class":191},[167,87867,3451],{"class":173},[167,87869,3454],{"class":181},[167,87871,1918],{"class":173},[167,87873,1926],{"class":254},[167,87875,693],{"class":173},[167,87877,639],{"class":191},[167,87879,3465],{"class":173},[167,87881,2550],{"class":191},[167,87883,38852],{"class":173},[167,87885,87886,87888,87890,87892,87894,87896],{"class":169,"line":6756},[167,87887,2544],{"class":191},[167,87889,2526],{"class":173},[167,87891,6641],{"class":191},[167,87893,8534],{"class":173},[167,87895,24238],{"class":191},[167,87897,24044],{"class":173},[167,87899,87900,87902,87904,87906],{"class":169,"line":6778},[167,87901,8545],{"class":173},[167,87903,267],{"class":191},[167,87905,5625],{"class":191},[167,87907,38877],{"class":173},[167,87909,87910],{"class":169,"line":6783},[167,87911,276],{"class":173},[167,87913,87914,87916,87918],{"class":169,"line":6788},[167,87915,282],{"class":173},[167,87917,178],{"class":177},[167,87919,185],{"class":173},[167,87921,87922],{"class":169,"line":6793},[167,87923,209],{"emptyLinePlaceholder":208},[167,87925,87926,87928,87930],{"class":169,"line":6809},[167,87927,174],{"class":173},[167,87929,299],{"class":177},[167,87931,185],{"class":173},[167,87933,87934,87936,87938],{"class":169,"line":6824},[167,87935,307],{"class":173},[167,87937,10117],{"class":177},[167,87939,185],{"class":173},[167,87941,87942,87944,87946,87949,87951],{"class":169,"line":6829},[167,87943,1257],{"class":173},[167,87945,22],{"class":177},[167,87947,87948],{"class":173},">Tasks\u003C\u002F",[167,87950,22],{"class":177},[167,87952,185],{"class":173},[167,87954,87955,87957,87959,87962,87964],{"class":169,"line":6836},[167,87956,1257],{"class":173},[167,87958,15],{"class":177},[167,87960,87961],{"class":173},">Remaining: {{ remaining }}\u003C\u002F",[167,87963,15],{"class":177},[167,87965,185],{"class":173},[167,87967,87968],{"class":169,"line":6845},[167,87969,209],{"emptyLinePlaceholder":208},[167,87971,87972,87974,87976,87978,87980,87982],{"class":169,"line":6854},[167,87973,1257],{"class":173},[167,87975,4305],{"class":177},[167,87977,4308],{"class":181},[167,87979,267],{"class":173},[167,87981,38952],{"class":201},[167,87983,185],{"class":173},[167,87985,87986,87988],{"class":169,"line":6861},[167,87987,1268],{"class":173},[167,87989,17481],{"class":177},[167,87991,87992,87994,87996],{"class":169,"line":6879},[167,87993,38965],{"class":181},[167,87995,267],{"class":173},[167,87997,38970],{"class":201},[167,87999,88000,88002,88004],{"class":169,"line":6884},[167,88001,38975],{"class":181},[167,88003,267],{"class":173},[167,88005,35283],{"class":201},[167,88007,88008,88010,88012],{"class":169,"line":6889},[167,88009,38984],{"class":181},[167,88011,267],{"class":173},[167,88013,88014],{"class":201},"\"Type a task and press Enter\"\n",[167,88016,88017,88019,88021],{"class":169,"line":6898},[167,88018,38994],{"class":181},[167,88020,267],{"class":173},[167,88022,38999],{"class":201},[167,88024,88025],{"class":169,"line":6903},[167,88026,39004],{"class":173},[167,88028,88029,88031,88033,88035,88037,88039,88042,88044],{"class":169,"line":6912},[167,88030,1268],{"class":173},[167,88032,507],{"class":177},[167,88034,1174],{"class":181},[167,88036,267],{"class":173},[167,88038,4348],{"class":201},[167,88040,88041],{"class":173},">Add\u003C\u002F",[167,88043,507],{"class":177},[167,88045,185],{"class":173},[167,88047,88048,88050,88052],{"class":169,"line":6928},[167,88049,1292],{"class":173},[167,88051,4305],{"class":177},[167,88053,185],{"class":173},[167,88055,88056],{"class":169,"line":6949},[167,88057,209],{"emptyLinePlaceholder":208},[167,88059,88060,88062,88064],{"class":169,"line":6954},[167,88061,1257],{"class":173},[167,88063,33],{"class":177},[167,88065,185],{"class":173},[167,88067,88068,88070,88072,88074,88076,88078,88080,88082,88084],{"class":169,"line":6975},[167,88069,1268],{"class":173},[167,88071,36],{"class":177},[167,88073,18706],{"class":181},[167,88075,267],{"class":173},[167,88077,39056],{"class":201},[167,88079,10307],{"class":181},[167,88081,267],{"class":173},[167,88083,39063],{"class":201},[167,88085,185],{"class":173},[167,88087,88088,88090,88092,88094,88096,88098],{"class":169,"line":6989},[167,88089,32516],{"class":173},[167,88091,507],{"class":177},[167,88093,1182],{"class":181},[167,88095,267],{"class":173},[167,88097,39078],{"class":201},[167,88099,185],{"class":173},[167,88101,88102],{"class":169,"line":7003},[167,88103,88104],{"class":173},"          {{ task.done ? \"Reopen\" : \"Complete\" }}\n",[167,88106,88107,88109,88111],{"class":169,"line":7017},[167,88108,32564],{"class":173},[167,88110,507],{"class":177},[167,88112,185],{"class":173},[167,88114,88115,88117,88119,88121,88123,88125],{"class":169,"line":7026},[167,88116,32516],{"class":173},[167,88118,167],{"class":177},[167,88120,39102],{"class":181},[167,88122,267],{"class":173},[167,88124,39107],{"class":201},[167,88126,185],{"class":173},[167,88128,88129],{"class":169,"line":7031},[167,88130,39114],{"class":173},[167,88132,88133,88135,88137],{"class":169,"line":7048},[167,88134,32564],{"class":173},[167,88136,167],{"class":177},[167,88138,185],{"class":173},[167,88140,88141,88143,88145],{"class":169,"line":7057},[167,88142,10170],{"class":173},[167,88144,36],{"class":177},[167,88146,185],{"class":173},[167,88148,88149,88151,88153],{"class":169,"line":7555},[167,88150,1292],{"class":173},[167,88152,33],{"class":177},[167,88154,185],{"class":173},[167,88156,88157,88159,88161],{"class":169,"line":7560},[167,88158,504],{"class":173},[167,88160,10117],{"class":177},[167,88162,185],{"class":173},[167,88164,88165,88167,88169],{"class":169,"line":7579},[167,88166,282],{"class":173},[167,88168,299],{"class":177},[167,88170,185],{"class":173},[154,88172,88174],{"className":156,"code":88173,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      draft: \"\",\n      tasks: [],\n    };\n  },\n  computed: {\n    remaining() {\n      return this.tasks.filter((task) => !task.done).length;\n    },\n  },\n  methods: {\n    addTask() {\n      const title = this.draft.trim();\n      if (!title) return;\n\n      this.tasks.push({\n        id: Date.now(),\n        title,\n        done: false,\n      });\n      this.draft = \"\";\n    },\n    toggleTask(id) {\n      const task = this.tasks.find((item) => item.id === id);\n      if (!task) return;\n      task.done = !task.done;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Tasks\u003C\u002Fh2>\n    \u003Cp>Remaining: {{ remaining }}\u003C\u002Fp>\n\n    \u003Cform @submit.prevent=\"addTask\">\n      \u003Cinput\n        v-model=\"draft\"\n        type=\"text\"\n        placeholder=\"Type a task and press Enter\"\n        @keydown.enter.prevent=\"addTask\"\n      \u002F>\n      \u003Cbutton type=\"submit\">Add\u003C\u002Fbutton>\n    \u003C\u002Fform>\n\n    \u003Cul>\n      \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n        \u003Cbutton @click=\"toggleTask(task.id)\">\n          {{ task.done ? \"Reopen\" : \"Complete\" }}\n        \u003C\u002Fbutton>\n        \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n          {{ task.title }}\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,88175,88176,88190,88198,88204,88210,88218,88222,88226,88230,88234,88240,88266,88270,88274,88278,88284,88300,88314,88318,88328,88336,88340,88348,88352,88364,88368,88378,88406,88420,88430,88434,88438,88442,88450,88454,88462,88470,88482,88494,88498,88512,88518,88526,88534,88542,88550,88554,88572,88580,88584,88592,88612,88626,88630,88638,88652,88656,88664,88672,88680,88688],{"__ignoreMap":163},[167,88177,88178,88180,88182,88184,88186,88188],{"class":169,"line":170},[167,88179,174],{"class":173},[167,88181,178],{"class":177},[167,88183,1050],{"class":181},[167,88185,267],{"class":173},[167,88187,1055],{"class":201},[167,88189,185],{"class":173},[167,88191,88192,88194,88196],{"class":169,"line":188},[167,88193,608],{"class":191},[167,88195,3991],{"class":191},[167,88197,1905],{"class":173},[167,88199,88200,88202],{"class":169,"line":205},[167,88201,7176],{"class":181},[167,88203,763],{"class":173},[167,88205,88206,88208],{"class":169,"line":160},[167,88207,1937],{"class":191},[167,88209,1905],{"class":173},[167,88211,88212,88214,88216],{"class":169,"line":238},[167,88213,39198],{"class":173},[167,88215,31161],{"class":201},[167,88217,393],{"class":173},[167,88219,88220],{"class":169,"line":243},[167,88221,12571],{"class":173},[167,88223,88224],{"class":169,"line":261},[167,88225,24370],{"class":173},[167,88227,88228],{"class":169,"line":273},[167,88229,398],{"class":173},[167,88231,88232],{"class":169,"line":279},[167,88233,8755],{"class":173},[167,88235,88236,88238],{"class":169,"line":289},[167,88237,39223],{"class":181},[167,88239,763],{"class":173},[167,88241,88242,88244,88246,88248,88250,88252,88254,88256,88258,88260,88262,88264],{"class":169,"line":294},[167,88243,8767],{"class":191},[167,88245,7351],{"class":219},[167,88247,8772],{"class":173},[167,88249,8252],{"class":181},[167,88251,1918],{"class":173},[167,88253,5075],{"class":254},[167,88255,693],{"class":173},[167,88257,639],{"class":191},[167,88259,5625],{"class":191},[167,88261,38701],{"class":173},[167,88263,15756],{"class":219},[167,88265,24044],{"class":173},[167,88267,88268],{"class":169,"line":304},[167,88269,755],{"class":173},[167,88271,88272],{"class":169,"line":313},[167,88273,398],{"class":173},[167,88275,88276],{"class":169,"line":161},[167,88277,4419],{"class":173},[167,88279,88280,88282],{"class":169,"line":335},[167,88281,39268],{"class":181},[167,88283,763],{"class":173},[167,88285,88286,88288,88290,88292,88294,88296,88298],{"class":169,"line":341},[167,88287,4435],{"class":191},[167,88289,38725],{"class":219},[167,88291,223],{"class":191},[167,88293,7351],{"class":219},[167,88295,39283],{"class":173},[167,88297,2500],{"class":181},[167,88299,25307],{"class":173},[167,88301,88302,88304,88306,88308,88310,88312],{"class":169,"line":489},[167,88303,7261],{"class":191},[167,88305,2526],{"class":173},[167,88307,6641],{"class":191},[167,88309,38745],{"class":173},[167,88311,24238],{"class":191},[167,88313,24044],{"class":173},[167,88315,88316],{"class":169,"line":495},[167,88317,209],{"emptyLinePlaceholder":208},[167,88319,88320,88322,88324,88326],{"class":169,"line":501},[167,88321,741],{"class":219},[167,88323,8772],{"class":173},[167,88325,15723],{"class":181},[167,88327,372],{"class":173},[167,88329,88330,88332,88334],{"class":169,"line":512},[167,88331,16160],{"class":173},[167,88333,15733],{"class":181},[167,88335,15736],{"class":173},[167,88337,88338],{"class":169,"line":781},[167,88339,39328],{"class":173},[167,88341,88342,88344,88346],{"class":169,"line":786},[167,88343,39333],{"class":173},[167,88345,3392],{"class":219},[167,88347,393],{"class":173},[167,88349,88350],{"class":169,"line":2678},[167,88351,36408],{"class":173},[167,88353,88354,88356,88358,88360,88362],{"class":169,"line":2692},[167,88355,741],{"class":219},[167,88357,39348],{"class":173},[167,88359,267],{"class":191},[167,88361,38799],{"class":201},[167,88363,24044],{"class":173},[167,88365,88366],{"class":169,"line":3575},[167,88367,755],{"class":173},[167,88369,88370,88372,88374,88376],{"class":169,"line":5028},[167,88371,9000],{"class":181},[167,88373,229],{"class":173},[167,88375,580],{"class":254},[167,88377,258],{"class":173},[167,88379,88380,88382,88384,88386,88388,88390,88392,88394,88396,88398,88400,88402,88404],{"class":169,"line":5037},[167,88381,4435],{"class":191},[167,88383,3446],{"class":219},[167,88385,223],{"class":191},[167,88387,7351],{"class":219},[167,88389,8772],{"class":173},[167,88391,3454],{"class":181},[167,88393,1918],{"class":173},[167,88395,1926],{"class":254},[167,88397,693],{"class":173},[167,88399,639],{"class":191},[167,88401,3465],{"class":173},[167,88403,2550],{"class":191},[167,88405,38852],{"class":173},[167,88407,88408,88410,88412,88414,88416,88418],{"class":169,"line":5046},[167,88409,7261],{"class":191},[167,88411,2526],{"class":173},[167,88413,6641],{"class":191},[167,88415,8534],{"class":173},[167,88417,24238],{"class":191},[167,88419,24044],{"class":173},[167,88421,88422,88424,88426,88428],{"class":169,"line":6756},[167,88423,9057],{"class":173},[167,88425,267],{"class":191},[167,88427,5625],{"class":191},[167,88429,38877],{"class":173},[167,88431,88432],{"class":169,"line":6778},[167,88433,755],{"class":173},[167,88435,88436],{"class":169,"line":6783},[167,88437,398],{"class":173},[167,88439,88440],{"class":169,"line":6788},[167,88441,24148],{"class":173},[167,88443,88444,88446,88448],{"class":169,"line":6793},[167,88445,282],{"class":173},[167,88447,178],{"class":177},[167,88449,185],{"class":173},[167,88451,88452],{"class":169,"line":6809},[167,88453,209],{"emptyLinePlaceholder":208},[167,88455,88456,88458,88460],{"class":169,"line":6824},[167,88457,174],{"class":173},[167,88459,299],{"class":177},[167,88461,185],{"class":173},[167,88463,88464,88466,88468],{"class":169,"line":6829},[167,88465,307],{"class":173},[167,88467,10117],{"class":177},[167,88469,185],{"class":173},[167,88471,88472,88474,88476,88478,88480],{"class":169,"line":6836},[167,88473,1257],{"class":173},[167,88475,22],{"class":177},[167,88477,87948],{"class":173},[167,88479,22],{"class":177},[167,88481,185],{"class":173},[167,88483,88484,88486,88488,88490,88492],{"class":169,"line":6845},[167,88485,1257],{"class":173},[167,88487,15],{"class":177},[167,88489,87961],{"class":173},[167,88491,15],{"class":177},[167,88493,185],{"class":173},[167,88495,88496],{"class":169,"line":6854},[167,88497,209],{"emptyLinePlaceholder":208},[167,88499,88500,88502,88504,88506,88508,88510],{"class":169,"line":6861},[167,88501,1257],{"class":173},[167,88503,4305],{"class":177},[167,88505,4308],{"class":181},[167,88507,267],{"class":173},[167,88509,38952],{"class":201},[167,88511,185],{"class":173},[167,88513,88514,88516],{"class":169,"line":6879},[167,88515,1268],{"class":173},[167,88517,17481],{"class":177},[167,88519,88520,88522,88524],{"class":169,"line":6884},[167,88521,38965],{"class":181},[167,88523,267],{"class":173},[167,88525,38970],{"class":201},[167,88527,88528,88530,88532],{"class":169,"line":6889},[167,88529,38975],{"class":181},[167,88531,267],{"class":173},[167,88533,35283],{"class":201},[167,88535,88536,88538,88540],{"class":169,"line":6898},[167,88537,38984],{"class":181},[167,88539,267],{"class":173},[167,88541,88014],{"class":201},[167,88543,88544,88546,88548],{"class":169,"line":6903},[167,88545,38994],{"class":181},[167,88547,267],{"class":173},[167,88549,38999],{"class":201},[167,88551,88552],{"class":169,"line":6912},[167,88553,39004],{"class":173},[167,88555,88556,88558,88560,88562,88564,88566,88568,88570],{"class":169,"line":6928},[167,88557,1268],{"class":173},[167,88559,507],{"class":177},[167,88561,1174],{"class":181},[167,88563,267],{"class":173},[167,88565,4348],{"class":201},[167,88567,88041],{"class":173},[167,88569,507],{"class":177},[167,88571,185],{"class":173},[167,88573,88574,88576,88578],{"class":169,"line":6949},[167,88575,1292],{"class":173},[167,88577,4305],{"class":177},[167,88579,185],{"class":173},[167,88581,88582],{"class":169,"line":6954},[167,88583,209],{"emptyLinePlaceholder":208},[167,88585,88586,88588,88590],{"class":169,"line":6975},[167,88587,1257],{"class":173},[167,88589,33],{"class":177},[167,88591,185],{"class":173},[167,88593,88594,88596,88598,88600,88602,88604,88606,88608,88610],{"class":169,"line":6989},[167,88595,1268],{"class":173},[167,88597,36],{"class":177},[167,88599,18706],{"class":181},[167,88601,267],{"class":173},[167,88603,39056],{"class":201},[167,88605,10307],{"class":181},[167,88607,267],{"class":173},[167,88609,39063],{"class":201},[167,88611,185],{"class":173},[167,88613,88614,88616,88618,88620,88622,88624],{"class":169,"line":7003},[167,88615,32516],{"class":173},[167,88617,507],{"class":177},[167,88619,1182],{"class":181},[167,88621,267],{"class":173},[167,88623,39078],{"class":201},[167,88625,185],{"class":173},[167,88627,88628],{"class":169,"line":7017},[167,88629,88104],{"class":173},[167,88631,88632,88634,88636],{"class":169,"line":7026},[167,88633,32564],{"class":173},[167,88635,507],{"class":177},[167,88637,185],{"class":173},[167,88639,88640,88642,88644,88646,88648,88650],{"class":169,"line":7031},[167,88641,32516],{"class":173},[167,88643,167],{"class":177},[167,88645,39102],{"class":181},[167,88647,267],{"class":173},[167,88649,39107],{"class":201},[167,88651,185],{"class":173},[167,88653,88654],{"class":169,"line":7048},[167,88655,39114],{"class":173},[167,88657,88658,88660,88662],{"class":169,"line":7057},[167,88659,32564],{"class":173},[167,88661,167],{"class":177},[167,88663,185],{"class":173},[167,88665,88666,88668,88670],{"class":169,"line":7555},[167,88667,10170],{"class":173},[167,88669,36],{"class":177},[167,88671,185],{"class":173},[167,88673,88674,88676,88678],{"class":169,"line":7560},[167,88675,1292],{"class":173},[167,88677,33],{"class":177},[167,88679,185],{"class":173},[167,88681,88682,88684,88686],{"class":169,"line":7579},[167,88683,504],{"class":173},[167,88685,10117],{"class":177},[167,88687,185],{"class":173},[167,88689,88690,88692,88694],{"class":169,"line":7592},[167,88691,282],{"class":173},[167,88693,299],{"class":177},[167,88695,185],{"class":173},[22,88697,60191],{"id":60190},[15,88699,88700,88702],{},[87,88701,23871],{}," is the directive that turns static templates into interactive interfaces.\nIf you use it with clear handlers and the right modifiers, you reduce bugs and improve readability.",[15,88704,88705],{},"Key points to remember:",[33,88707,88708,88715,88718,88728],{},[36,88709,62955,88710,88712,88713,1679],{},[87,88711,39703],{}," as shorthand for ",[87,88714,23871],{},[36,88716,88717],{},"Prefer script functions over complex inline expressions.",[36,88719,88720,88721,1025,88723,1025,88725,88727],{},"Use modifiers (",[87,88722,36905],{},[87,88724,36908],{},[87,88726,36911],{},") when needed.",[36,88729,88730],{},"Keep behavior consistent across Composition API and Options API for easier maintenance.",[924,88732,39725],{},{"title":163,"searchDepth":188,"depth":188,"links":88734},[88735,88736,88737,88738,88739,88747,88754,88755],{"id":62809,"depth":188,"text":62810},{"id":57680,"depth":188,"text":62839},{"id":62951,"depth":188,"text":62952},{"id":62979,"depth":188,"text":62980},{"id":57819,"depth":188,"text":63002,"children":88740},[88741,88742,88744,88745],{"id":86097,"depth":205,"text":86098},{"id":86171,"depth":205,"text":88743},"2) Forgetting .prevent in forms",{"id":86241,"depth":205,"text":86242},{"id":86344,"depth":205,"text":88746},"4) Using event without declaring it",{"id":57925,"depth":188,"text":63234,"children":88748},[88749,88750,88752,88753],{"id":86415,"depth":205,"text":86416},{"id":86627,"depth":205,"text":88751},"2) Form submit with .prevent",{"id":87039,"depth":205,"text":87040},{"id":87322,"depth":205,"text":87323},{"id":87571,"depth":188,"text":87572},{"id":60190,"depth":188,"text":60191},"Temporary cover image for the Vue v-on article","Learn how to use v-on in Vue with DOM events, modifiers, keyboard shortcuts, and best practices to keep components clear and maintainable.",{"updatedAt":39754,"coverCaption":65655,"author":946,"keywords":88759},[3258,23871,88760,39757,3260,3973],"events","\u002Fblog\u002Fdirectives-vue-v-on-guide.en",[88763],{"headline":88764,"author":88765,"datePublished":39754,"@type":961},"Vue v-on directive: practical guide to handling events",{"name":946,"@type":959},{"title":85873,"description":88757},"blog\u002Fdirectives-vue-v-on-guide.en",[88769,88770,88772],{"tag":60263,"color":26467},{"tag":88771,"color":1645},"Events",{"tag":65670,"color":5425},"6NNAbfSjJpuIDdqe4vOBuTowez_W0dYKeqWzU22o9xo",{"id":36753,"title":36754,"body":88775,"cover":39749,"coverAlt":39750,"date":39751,"description":39752,"draft":940,"extension":941,"lab":942,"locale":943,"meta":91561,"navigation":208,"path":39758,"schemaOrg":91563,"seo":91566,"series":26460,"seriesDescription":26461,"seriesOrder":238,"seriesTitle":26462,"slug":942,"stem":39764,"tags":91567,"__hash__":39769},{"type":8,"value":88776,"toc":91541},[88777,88781,88787,88789,88795,88803,88809,88811,88813,88843,88845,88873,88877,88915,88917,88921,88923,88945,88947,88951,88961,88965,88967,88969,88971,89001,89005,89033,89037,89039,89063,89065,89093,89099,89101,89103,89161,89163,89191,89193,89197,89199,89225,89227,89253,89257,89259,89261,89362,89469,89473,89667,89875,89877,90009,90153,90155,90268,90397,90399,90401,90415,90987,91511,91513,91517,91519,91539],[11,88778,26483,88779],{"id":36759},[87,88780,23871],{},[15,88782,88783,36766,88785,36769],{},[87,88784,23871],{},[87,88786,23871],{},[22,88788,26503],{"id":26502},[15,88790,21844,88791,36776,88793,36779],{},[87,88792,23871],{},[87,88794,23871],{},[33,88796,88797,88799,88801],{},[36,88798,36784],{},[36,88800,36787],{},[36,88802,36790],{},[5367,88804,88805],{},[15,88806,88807,36797],{},[87,88808,23871],{},[22,88810,30500],{"id":30499},[15,88812,36802],{},[154,88814,88815],{"className":156,"code":36805,"filename":15284,"language":162,"meta":163,"style":163},[87,88816,88817],{"__ignoreMap":163},[167,88818,88819,88821,88823,88825,88827,88829,88831,88833,88835,88837,88839,88841],{"class":169,"line":170},[167,88820,174],{"class":173},[167,88822,507],{"class":177},[167,88824,36816],{"class":181},[167,88826,583],{"class":173},[167,88828,36821],{"class":181},[167,88830,267],{"class":173},[167,88832,5080],{"class":201},[167,88834,36828],{"class":173},[167,88836,5080],{"class":201},[167,88838,36833],{"class":173},[167,88840,507],{"class":177},[167,88842,185],{"class":173},[15,88844,36840],{},[154,88846,88847],{"className":156,"code":36843,"filename":15284,"language":162,"meta":163,"style":163},[87,88848,88849],{"__ignoreMap":163},[167,88850,88851,88853,88855,88857,88859,88861,88863,88865,88867,88869,88871],{"class":169,"line":170},[167,88852,174],{"class":173},[167,88854,507],{"class":177},[167,88856,36854],{"class":173},[167,88858,36821],{"class":181},[167,88860,267],{"class":173},[167,88862,5080],{"class":201},[167,88864,36828],{"class":173},[167,88866,5080],{"class":201},[167,88868,36833],{"class":173},[167,88870,507],{"class":177},[167,88872,185],{"class":173},[15,88874,88875,36875],{},[87,88876,23871],{},[33,88878,88879,88889,88895,88905],{},[36,88880,36880,88881,1025,88883,1025,88885,1025,88887,4270],{},[87,88882,36821],{},[87,88884,2650],{},[87,88886,36887],{},[87,88888,36890],{},[36,88890,36893,88891,1025,88893,4270],{},[87,88892,36896],{},[87,88894,36899],{},[36,88896,36902,88897,1025,88899,1025,88901,1025,88903,4270],{},[87,88898,36905],{},[87,88900,36908],{},[87,88902,36911],{},[87,88904,36914],{},[36,88906,36917,88907,1025,88909,36924,88911,1025,88913,7863],{},[87,88908,36920],{},[87,88910,36923],{},[87,88912,36927],{},[87,88914,36930],{},[22,88916,6322],{"id":6321},[15,88918,1582,88919,36937],{},[87,88920,23871],{},[15,88922,9308],{},[33,88924,88925,88929,88933,88937,88941],{},[36,88926,36944,88927,4270],{},[87,88928,36947],{},[36,88930,36950,88931,4270],{},[87,88932,36953],{},[36,88934,36956,88935,4270],{},[87,88936,36959],{},[36,88938,23702,88939,4270],{},[87,88940,36964],{},[36,88942,36967,88943,4270],{},[87,88944,36970],{},[22,88946,6349],{"id":6348},[15,88948,13622,88949,36977],{},[87,88950,23871],{},[33,88952,88953,88955,88959],{},[36,88954,36982],{},[36,88956,36985,88957,1679],{},[87,88958,1661],{},[36,88960,36990],{},[5367,88962,88963],{},[15,88964,36995],{},[22,88966,3085],{"id":3084},[3087,88968,37001],{"id":37000},[15,88970,30738],{},[154,88972,88973],{"className":156,"code":37006,"filename":34162,"language":162,"meta":163,"style":163},[87,88974,88975],{"__ignoreMap":163},[167,88976,88977,88979,88981,88983,88985,88987,88989,88991,88993,88995,88997,88999],{"class":169,"line":170},[167,88978,174],{"class":173},[167,88980,507],{"class":177},[167,88982,36854],{"class":173},[167,88984,36821],{"class":181},[167,88986,267],{"class":173},[167,88988,5080],{"class":201},[167,88990,37025],{"class":181},[167,88992,34267],{"class":173},[167,88994,5080],{"class":201},[167,88996,37032],{"class":173},[167,88998,507],{"class":177},[167,89000,185],{"class":173},[15,89002,37039,89003,37043],{},[3933,89004,37042],{},[154,89006,89007],{"className":156,"code":37046,"filename":34285,"language":162,"meta":163,"style":163},[87,89008,89009],{"__ignoreMap":163},[167,89010,89011,89013,89015,89017,89019,89021,89023,89025,89027,89029,89031],{"class":169,"line":170},[167,89012,174],{"class":173},[167,89014,507],{"class":177},[167,89016,36854],{"class":173},[167,89018,36821],{"class":181},[167,89020,267],{"class":173},[167,89022,5080],{"class":201},[167,89024,37025],{"class":173},[167,89026,5080],{"class":201},[167,89028,37032],{"class":173},[167,89030,507],{"class":177},[167,89032,185],{"class":173},[3087,89034,37076,89035,37079],{"id":37075},[87,89036,36905],{},[15,89038,30738],{},[154,89040,89041],{"className":156,"code":37084,"filename":34162,"language":162,"meta":163,"style":163},[87,89042,89043],{"__ignoreMap":163},[167,89044,89045,89047,89049,89051,89053,89055,89057,89059,89061],{"class":169,"line":170},[167,89046,174],{"class":173},[167,89048,4305],{"class":177},[167,89050,36854],{"class":173},[167,89052,36887],{"class":181},[167,89054,267],{"class":173},[167,89056,5080],{"class":201},[167,89058,37103],{"class":173},[167,89060,5080],{"class":201},[167,89062,185],{"class":173},[15,89064,34281],{},[154,89066,89067],{"className":156,"code":37112,"filename":34285,"language":162,"meta":163,"style":163},[87,89068,89069],{"__ignoreMap":163},[167,89070,89071,89073,89075,89077,89079,89081,89083,89085,89087,89089,89091],{"class":169,"line":170},[167,89072,174],{"class":173},[167,89074,4305],{"class":177},[167,89076,36854],{"class":173},[167,89078,36887],{"class":181},[167,89080,1679],{"class":173},[167,89082,37129],{"class":181},[167,89084,267],{"class":173},[167,89086,5080],{"class":201},[167,89088,37103],{"class":173},[167,89090,5080],{"class":201},[167,89092,185],{"class":173},[5367,89094,89095],{},[15,89096,21844,89097,37146],{},[87,89098,36905],{},[3087,89100,37150],{"id":37149},[15,89102,37153],{},[154,89104,89105],{"className":156,"code":37156,"filename":34162,"language":162,"meta":163,"style":163},[87,89106,89107,89149,89153],{"__ignoreMap":163},[167,89108,89109,89111,89113,89115,89117,89119,89121,89123,89125,89127,89129,89131,89133,89135,89137,89139,89141,89143,89145,89147],{"class":169,"line":170},[167,89110,174],{"class":173},[167,89112,507],{"class":177},[167,89114,36854],{"class":173},[167,89116,36821],{"class":181},[167,89118,267],{"class":173},[167,89120,5080],{"class":201},[167,89122,37175],{"class":173},[167,89124,8339],{"class":191},[167,89126,37180],{"class":173},[167,89128,8339],{"class":191},[167,89130,5625],{"class":191},[167,89132,37187],{"class":173},[167,89134,8316],{"class":191},[167,89136,37192],{"class":181},[167,89138,14087],{"class":173},[167,89140,583],{"class":191},[167,89142,37199],{"class":181},[167,89144,34267],{"class":173},[167,89146,5080],{"class":201},[167,89148,185],{"class":173},[167,89150,89151],{"class":169,"line":188},[167,89152,37210],{"class":173},[167,89154,89155,89157,89159],{"class":169,"line":205},[167,89156,282],{"class":173},[167,89158,507],{"class":177},[167,89160,185],{"class":173},[15,89162,37221],{},[154,89164,89165],{"className":156,"code":37224,"filename":34285,"language":162,"meta":163,"style":163},[87,89166,89167],{"__ignoreMap":163},[167,89168,89169,89171,89173,89175,89177,89179,89181,89183,89185,89187,89189],{"class":169,"line":170},[167,89170,174],{"class":173},[167,89172,507],{"class":177},[167,89174,36854],{"class":173},[167,89176,36821],{"class":181},[167,89178,267],{"class":173},[167,89180,5080],{"class":201},[167,89182,37243],{"class":173},[167,89184,5080],{"class":201},[167,89186,37248],{"class":173},[167,89188,507],{"class":177},[167,89190,185],{"class":173},[15,89192,37255],{},[3087,89194,37259,89195,37262],{"id":37258},[87,89196,4195],{},[15,89198,30738],{},[154,89200,89201],{"className":156,"code":37267,"filename":34162,"language":162,"meta":163,"style":163},[87,89202,89203],{"__ignoreMap":163},[167,89204,89205,89207,89209,89211,89213,89215,89217,89219,89221,89223],{"class":169,"line":170},[167,89206,174],{"class":173},[167,89208,2650],{"class":177},[167,89210,36854],{"class":173},[167,89212,2650],{"class":181},[167,89214,267],{"class":173},[167,89216,5080],{"class":201},[167,89218,37286],{"class":181},[167,89220,37289],{"class":173},[167,89222,5080],{"class":201},[167,89224,5325],{"class":173},[15,89226,34281],{},[154,89228,89229],{"className":156,"code":37298,"filename":34285,"language":162,"meta":163,"style":163},[87,89230,89231],{"__ignoreMap":163},[167,89232,89233,89235,89237,89239,89241,89243,89245,89247,89249,89251],{"class":169,"line":170},[167,89234,174],{"class":173},[167,89236,2650],{"class":177},[167,89238,36854],{"class":173},[167,89240,2650],{"class":181},[167,89242,267],{"class":173},[167,89244,5080],{"class":201},[167,89246,37286],{"class":181},[167,89248,37319],{"class":173},[167,89250,5080],{"class":201},[167,89252,5325],{"class":173},[15,89254,37326,89255,37329],{},[87,89256,7839],{},[22,89258,7997],{"id":7996},[3087,89260,37335],{"id":37334},[154,89262,89264],{"className":156,"code":37338,"filename":3260,"highlights":89263,"language":162,"meta":163,"style":163},[160,273],[87,89265,89266,89282,89294,89298,89315,89323,89327,89335,89354],{"__ignoreMap":163},[167,89267,89268,89270,89272,89274,89276,89278,89280],{"class":169,"line":170},[167,89269,174],{"class":173},[167,89271,178],{"class":177},[167,89273,182],{"class":181},[167,89275,1050],{"class":181},[167,89277,267],{"class":173},[167,89279,1055],{"class":201},[167,89281,185],{"class":173},[167,89283,89284,89286,89288,89290,89292],{"class":169,"line":188},[167,89285,192],{"class":191},[167,89287,195],{"class":173},[167,89289,198],{"class":191},[167,89291,24041],{"class":201},[167,89293,24044],{"class":173},[167,89295,89296],{"class":169,"line":205},[167,89297,209],{"emptyLinePlaceholder":208},[167,89299,89301,89303,89305,89307,89309,89311,89313],{"class":89300,"line":160},[169,213],[167,89302,216],{"class":191},[167,89304,15325],{"class":219},[167,89306,223],{"class":191},[167,89308,226],{"class":181},[167,89310,229],{"class":173},[167,89312,1960],{"class":219},[167,89314,24169],{"class":173},[167,89316,89317,89319,89321],{"class":169,"line":238},[167,89318,282],{"class":173},[167,89320,178],{"class":177},[167,89322,185],{"class":173},[167,89324,89325],{"class":169,"line":243},[167,89326,209],{"emptyLinePlaceholder":208},[167,89328,89329,89331,89333],{"class":169,"line":261},[167,89330,174],{"class":173},[167,89332,299],{"class":177},[167,89334,185],{"class":173},[167,89336,89338,89340,89342,89344,89346,89348,89350,89352],{"class":89337,"line":273},[169,213],[167,89339,307],{"class":173},[167,89341,507],{"class":177},[167,89343,1182],{"class":181},[167,89345,267],{"class":173},[167,89347,18386],{"class":201},[167,89349,37426],{"class":173},[167,89351,507],{"class":177},[167,89353,185],{"class":173},[167,89355,89356,89358,89360],{"class":169,"line":279},[167,89357,282],{"class":173},[167,89359,299],{"class":177},[167,89361,185],{"class":173},[154,89363,89365],{"className":156,"code":37441,"filename":3973,"highlights":89364,"language":162,"meta":163,"style":163},[238,304],[87,89366,89367,89381,89389,89395,89401,89410,89414,89418,89422,89430,89434,89442,89461],{"__ignoreMap":163},[167,89368,89369,89371,89373,89375,89377,89379],{"class":169,"line":170},[167,89370,174],{"class":173},[167,89372,178],{"class":177},[167,89374,1050],{"class":181},[167,89376,267],{"class":173},[167,89378,1055],{"class":201},[167,89380,185],{"class":173},[167,89382,89383,89385,89387],{"class":169,"line":188},[167,89384,608],{"class":191},[167,89386,3991],{"class":191},[167,89388,1905],{"class":173},[167,89390,89391,89393],{"class":169,"line":205},[167,89392,7176],{"class":181},[167,89394,763],{"class":173},[167,89396,89397,89399],{"class":169,"line":160},[167,89398,1937],{"class":191},[167,89400,1905],{"class":173},[167,89402,89404,89406,89408],{"class":89403,"line":238},[169,213],[167,89405,37484],{"class":173},[167,89407,1960],{"class":219},[167,89409,393],{"class":173},[167,89411,89412],{"class":169,"line":243},[167,89413,24370],{"class":173},[167,89415,89416],{"class":169,"line":261},[167,89417,398],{"class":173},[167,89419,89420],{"class":169,"line":273},[167,89421,24148],{"class":173},[167,89423,89424,89426,89428],{"class":169,"line":279},[167,89425,282],{"class":173},[167,89427,178],{"class":177},[167,89429,185],{"class":173},[167,89431,89432],{"class":169,"line":289},[167,89433,209],{"emptyLinePlaceholder":208},[167,89435,89436,89438,89440],{"class":169,"line":294},[167,89437,174],{"class":173},[167,89439,299],{"class":177},[167,89441,185],{"class":173},[167,89443,89445,89447,89449,89451,89453,89455,89457,89459],{"class":89444,"line":304},[169,213],[167,89446,307],{"class":173},[167,89448,507],{"class":177},[167,89450,1182],{"class":181},[167,89452,267],{"class":173},[167,89454,18386],{"class":201},[167,89456,37426],{"class":173},[167,89458,507],{"class":177},[167,89460,185],{"class":173},[167,89462,89463,89465,89467],{"class":169,"line":313},[167,89464,282],{"class":173},[167,89466,299],{"class":177},[167,89468,185],{"class":173},[3087,89470,37551,89471],{"id":37550},[87,89472,36905],{},[154,89474,89476],{"className":156,"code":37556,"filename":3260,"highlights":89475,"language":162,"meta":163,"style":163},[313],[87,89477,89478,89494,89506,89510,89526,89530,89538,89556,89568,89572,89580,89584,89592,89607,89633,89651,89659],{"__ignoreMap":163},[167,89479,89480,89482,89484,89486,89488,89490,89492],{"class":169,"line":170},[167,89481,174],{"class":173},[167,89483,178],{"class":177},[167,89485,182],{"class":181},[167,89487,1050],{"class":181},[167,89489,267],{"class":173},[167,89491,1055],{"class":201},[167,89493,185],{"class":173},[167,89495,89496,89498,89500,89502,89504],{"class":169,"line":188},[167,89497,192],{"class":191},[167,89499,195],{"class":173},[167,89501,198],{"class":191},[167,89503,24041],{"class":201},[167,89505,24044],{"class":173},[167,89507,89508],{"class":169,"line":205},[167,89509,209],{"emptyLinePlaceholder":208},[167,89511,89512,89514,89516,89518,89520,89522,89524],{"class":169,"line":160},[167,89513,216],{"class":191},[167,89515,37598],{"class":219},[167,89517,223],{"class":191},[167,89519,226],{"class":181},[167,89521,229],{"class":173},[167,89523,31161],{"class":201},[167,89525,24169],{"class":173},[167,89527,89528],{"class":169,"line":238},[167,89529,209],{"emptyLinePlaceholder":208},[167,89531,89532,89534,89536],{"class":169,"line":243},[167,89533,246],{"class":191},[167,89535,37619],{"class":181},[167,89537,763],{"class":173},[167,89539,89540,89542,89544,89546,89548,89550,89552,89554],{"class":169,"line":261},[167,89541,2544],{"class":191},[167,89543,2526],{"class":173},[167,89545,6641],{"class":191},[167,89547,37632],{"class":173},[167,89549,2500],{"class":181},[167,89551,6689],{"class":173},[167,89553,24238],{"class":191},[167,89555,24044],{"class":173},[167,89557,89558,89560,89562,89564,89566],{"class":169,"line":273},[167,89559,2608],{"class":173},[167,89561,2611],{"class":181},[167,89563,229],{"class":173},[167,89565,37651],{"class":201},[167,89567,37654],{"class":173},[167,89569,89570],{"class":169,"line":279},[167,89571,276],{"class":173},[167,89573,89574,89576,89578],{"class":169,"line":289},[167,89575,282],{"class":173},[167,89577,178],{"class":177},[167,89579,185],{"class":173},[167,89581,89582],{"class":169,"line":294},[167,89583,209],{"emptyLinePlaceholder":208},[167,89585,89586,89588,89590],{"class":169,"line":304},[167,89587,174],{"class":173},[167,89589,299],{"class":177},[167,89591,185],{"class":173},[167,89593,89595,89597,89599,89601,89603,89605],{"class":89594,"line":313},[169,213],[167,89596,307],{"class":173},[167,89598,4305],{"class":177},[167,89600,4308],{"class":181},[167,89602,267],{"class":173},[167,89604,37692],{"class":201},[167,89606,185],{"class":173},[167,89608,89609,89611,89613,89615,89617,89619,89621,89623,89625,89627,89629,89631],{"class":169,"line":161},[167,89610,1257],{"class":173},[167,89612,2650],{"class":177},[167,89614,2653],{"class":181},[167,89616,267],{"class":173},[167,89618,37707],{"class":201},[167,89620,1174],{"class":181},[167,89622,267],{"class":173},[167,89624,37707],{"class":201},[167,89626,2668],{"class":181},[167,89628,267],{"class":173},[167,89630,37720],{"class":201},[167,89632,5325],{"class":173},[167,89634,89635,89637,89639,89641,89643,89645,89647,89649],{"class":169,"line":335},[167,89636,1257],{"class":173},[167,89638,507],{"class":177},[167,89640,1174],{"class":181},[167,89642,267],{"class":173},[167,89644,4348],{"class":201},[167,89646,37737],{"class":173},[167,89648,507],{"class":177},[167,89650,185],{"class":173},[167,89652,89653,89655,89657],{"class":169,"line":341},[167,89654,504],{"class":173},[167,89656,4305],{"class":177},[167,89658,185],{"class":173},[167,89660,89661,89663,89665],{"class":169,"line":489},[167,89662,282],{"class":173},[167,89664,299],{"class":177},[167,89666,185],{"class":173},[154,89668,89670],{"className":156,"code":37760,"filename":3973,"highlights":89669,"language":162,"meta":163,"style":163},[495],[87,89671,89672,89686,89694,89700,89706,89714,89718,89722,89726,89732,89752,89768,89772,89776,89780,89788,89792,89800,89815,89841,89859,89867],{"__ignoreMap":163},[167,89673,89674,89676,89678,89680,89682,89684],{"class":169,"line":170},[167,89675,174],{"class":173},[167,89677,178],{"class":177},[167,89679,1050],{"class":181},[167,89681,267],{"class":173},[167,89683,1055],{"class":201},[167,89685,185],{"class":173},[167,89687,89688,89690,89692],{"class":169,"line":188},[167,89689,608],{"class":191},[167,89691,3991],{"class":191},[167,89693,1905],{"class":173},[167,89695,89696,89698],{"class":169,"line":205},[167,89697,7176],{"class":181},[167,89699,763],{"class":173},[167,89701,89702,89704],{"class":169,"line":160},[167,89703,1937],{"class":191},[167,89705,1905],{"class":173},[167,89707,89708,89710,89712],{"class":169,"line":238},[167,89709,37802],{"class":173},[167,89711,31161],{"class":201},[167,89713,393],{"class":173},[167,89715,89716],{"class":169,"line":243},[167,89717,24370],{"class":173},[167,89719,89720],{"class":169,"line":261},[167,89721,398],{"class":173},[167,89723,89724],{"class":169,"line":273},[167,89725,4419],{"class":173},[167,89727,89728,89730],{"class":169,"line":279},[167,89729,37823],{"class":181},[167,89731,763],{"class":173},[167,89733,89734,89736,89738,89740,89742,89744,89746,89748,89750],{"class":169,"line":289},[167,89735,7261],{"class":191},[167,89737,2526],{"class":173},[167,89739,6641],{"class":191},[167,89741,4927],{"class":219},[167,89743,37838],{"class":173},[167,89745,2500],{"class":181},[167,89747,6689],{"class":173},[167,89749,24238],{"class":191},[167,89751,24044],{"class":173},[167,89753,89754,89756,89758,89760,89762,89764,89766],{"class":169,"line":294},[167,89755,20442],{"class":173},[167,89757,2611],{"class":181},[167,89759,229],{"class":173},[167,89761,37651],{"class":201},[167,89763,1025],{"class":173},[167,89765,4927],{"class":219},[167,89767,37863],{"class":173},[167,89769,89770],{"class":169,"line":304},[167,89771,755],{"class":173},[167,89773,89774],{"class":169,"line":313},[167,89775,398],{"class":173},[167,89777,89778],{"class":169,"line":161},[167,89779,24148],{"class":173},[167,89781,89782,89784,89786],{"class":169,"line":335},[167,89783,282],{"class":173},[167,89785,178],{"class":177},[167,89787,185],{"class":173},[167,89789,89790],{"class":169,"line":341},[167,89791,209],{"emptyLinePlaceholder":208},[167,89793,89794,89796,89798],{"class":169,"line":489},[167,89795,174],{"class":173},[167,89797,299],{"class":177},[167,89799,185],{"class":173},[167,89801,89803,89805,89807,89809,89811,89813],{"class":89802,"line":495},[169,213],[167,89804,307],{"class":173},[167,89806,4305],{"class":177},[167,89808,4308],{"class":181},[167,89810,267],{"class":173},[167,89812,37692],{"class":201},[167,89814,185],{"class":173},[167,89816,89817,89819,89821,89823,89825,89827,89829,89831,89833,89835,89837,89839],{"class":169,"line":501},[167,89818,1257],{"class":173},[167,89820,2650],{"class":177},[167,89822,2653],{"class":181},[167,89824,267],{"class":173},[167,89826,37707],{"class":201},[167,89828,1174],{"class":181},[167,89830,267],{"class":173},[167,89832,37707],{"class":201},[167,89834,2668],{"class":181},[167,89836,267],{"class":173},[167,89838,37720],{"class":201},[167,89840,5325],{"class":173},[167,89842,89843,89845,89847,89849,89851,89853,89855,89857],{"class":169,"line":512},[167,89844,1257],{"class":173},[167,89846,507],{"class":177},[167,89848,1174],{"class":181},[167,89850,267],{"class":173},[167,89852,4348],{"class":201},[167,89854,37737],{"class":173},[167,89856,507],{"class":177},[167,89858,185],{"class":173},[167,89860,89861,89863,89865],{"class":169,"line":781},[167,89862,504],{"class":173},[167,89864,4305],{"class":177},[167,89866,185],{"class":173},[167,89868,89869,89871,89873],{"class":169,"line":786},[167,89870,282],{"class":173},[167,89872,299],{"class":177},[167,89874,185],{"class":173},[3087,89876,37974],{"id":37973},[154,89878,89880],{"className":156,"code":37977,"filename":3260,"highlights":89879,"language":162,"meta":163,"style":163},[304],[87,89881,89882,89898,89910,89914,89930,89934,89942,89954,89958,89966,89970,89978,90001],{"__ignoreMap":163},[167,89883,89884,89886,89888,89890,89892,89894,89896],{"class":169,"line":170},[167,89885,174],{"class":173},[167,89887,178],{"class":177},[167,89889,182],{"class":181},[167,89891,1050],{"class":181},[167,89893,267],{"class":173},[167,89895,1055],{"class":201},[167,89897,185],{"class":173},[167,89899,89900,89902,89904,89906,89908],{"class":169,"line":188},[167,89901,192],{"class":191},[167,89903,195],{"class":173},[167,89905,198],{"class":191},[167,89907,24041],{"class":201},[167,89909,24044],{"class":173},[167,89911,89912],{"class":169,"line":205},[167,89913,209],{"emptyLinePlaceholder":208},[167,89915,89916,89918,89920,89922,89924,89926,89928],{"class":169,"line":160},[167,89917,216],{"class":191},[167,89919,38019],{"class":219},[167,89921,223],{"class":191},[167,89923,226],{"class":181},[167,89925,229],{"class":173},[167,89927,31161],{"class":201},[167,89929,24169],{"class":173},[167,89931,89932],{"class":169,"line":238},[167,89933,209],{"emptyLinePlaceholder":208},[167,89935,89936,89938,89940],{"class":169,"line":243},[167,89937,246],{"class":191},[167,89939,38040],{"class":181},[167,89941,763],{"class":173},[167,89943,89944,89946,89948,89950,89952],{"class":169,"line":261},[167,89945,2608],{"class":173},[167,89947,2611],{"class":181},[167,89949,229],{"class":173},[167,89951,38053],{"class":201},[167,89953,38056],{"class":173},[167,89955,89956],{"class":169,"line":273},[167,89957,276],{"class":173},[167,89959,89960,89962,89964],{"class":169,"line":279},[167,89961,282],{"class":173},[167,89963,178],{"class":177},[167,89965,185],{"class":173},[167,89967,89968],{"class":169,"line":289},[167,89969,209],{"emptyLinePlaceholder":208},[167,89971,89972,89974,89976],{"class":169,"line":294},[167,89973,174],{"class":173},[167,89975,299],{"class":177},[167,89977,185],{"class":173},[167,89979,89981,89983,89985,89987,89989,89991,89993,89995,89997,89999],{"class":89980,"line":304},[169,213],[167,89982,307],{"class":173},[167,89984,38088],{"class":177},[167,89986,2653],{"class":181},[167,89988,267],{"class":173},[167,89990,38095],{"class":201},[167,89992,38098],{"class":181},[167,89994,267],{"class":173},[167,89996,38103],{"class":201},[167,89998,31789],{"class":31788},[167,90000,185],{"class":173},[167,90002,90003,90005,90007],{"class":169,"line":313},[167,90004,282],{"class":173},[167,90006,299],{"class":177},[167,90008,185],{"class":173},[154,90010,90012],{"className":156,"code":38118,"filename":3973,"highlights":90011,"language":162,"meta":163,"style":163},[489],[87,90013,90014,90028,90036,90042,90048,90056,90060,90064,90068,90074,90090,90094,90098,90102,90110,90114,90122,90145],{"__ignoreMap":163},[167,90015,90016,90018,90020,90022,90024,90026],{"class":169,"line":170},[167,90017,174],{"class":173},[167,90019,178],{"class":177},[167,90021,1050],{"class":181},[167,90023,267],{"class":173},[167,90025,1055],{"class":201},[167,90027,185],{"class":173},[167,90029,90030,90032,90034],{"class":169,"line":188},[167,90031,608],{"class":191},[167,90033,3991],{"class":191},[167,90035,1905],{"class":173},[167,90037,90038,90040],{"class":169,"line":205},[167,90039,7176],{"class":181},[167,90041,763],{"class":173},[167,90043,90044,90046],{"class":169,"line":160},[167,90045,1937],{"class":191},[167,90047,1905],{"class":173},[167,90049,90050,90052,90054],{"class":169,"line":238},[167,90051,38160],{"class":173},[167,90053,31161],{"class":201},[167,90055,393],{"class":173},[167,90057,90058],{"class":169,"line":243},[167,90059,24370],{"class":173},[167,90061,90062],{"class":169,"line":261},[167,90063,398],{"class":173},[167,90065,90066],{"class":169,"line":273},[167,90067,4419],{"class":173},[167,90069,90070,90072],{"class":169,"line":279},[167,90071,38181],{"class":181},[167,90073,763],{"class":173},[167,90075,90076,90078,90080,90082,90084,90086,90088],{"class":169,"line":289},[167,90077,20442],{"class":173},[167,90079,2611],{"class":181},[167,90081,229],{"class":173},[167,90083,38053],{"class":201},[167,90085,1025],{"class":173},[167,90087,4927],{"class":219},[167,90089,38200],{"class":173},[167,90091,90092],{"class":169,"line":294},[167,90093,755],{"class":173},[167,90095,90096],{"class":169,"line":304},[167,90097,398],{"class":173},[167,90099,90100],{"class":169,"line":313},[167,90101,24148],{"class":173},[167,90103,90104,90106,90108],{"class":169,"line":161},[167,90105,282],{"class":173},[167,90107,178],{"class":177},[167,90109,185],{"class":173},[167,90111,90112],{"class":169,"line":335},[167,90113,209],{"emptyLinePlaceholder":208},[167,90115,90116,90118,90120],{"class":169,"line":341},[167,90117,174],{"class":173},[167,90119,299],{"class":177},[167,90121,185],{"class":173},[167,90123,90125,90127,90129,90131,90133,90135,90137,90139,90141,90143],{"class":90124,"line":489},[169,213],[167,90126,307],{"class":173},[167,90128,38088],{"class":177},[167,90130,2653],{"class":181},[167,90132,267],{"class":173},[167,90134,38095],{"class":201},[167,90136,38098],{"class":181},[167,90138,267],{"class":173},[167,90140,38103],{"class":201},[167,90142,31789],{"class":31788},[167,90144,185],{"class":173},[167,90146,90147,90149,90151],{"class":169,"line":495},[167,90148,282],{"class":173},[167,90150,299],{"class":177},[167,90152,185],{"class":173},[3087,90154,38267],{"id":38266},[154,90156,90158],{"className":156,"code":38270,"filename":3260,"highlights":90157,"language":162,"meta":163,"style":163},[160,289],[87,90159,90160,90176,90188,90192,90209,90221,90225,90233,90237,90245,90260],{"__ignoreMap":163},[167,90161,90162,90164,90166,90168,90170,90172,90174],{"class":169,"line":170},[167,90163,174],{"class":173},[167,90165,178],{"class":177},[167,90167,182],{"class":181},[167,90169,1050],{"class":181},[167,90171,267],{"class":173},[167,90173,1055],{"class":201},[167,90175,185],{"class":173},[167,90177,90178,90180,90182,90184,90186],{"class":169,"line":188},[167,90179,192],{"class":191},[167,90181,38296],{"class":173},[167,90183,198],{"class":191},[167,90185,38301],{"class":201},[167,90187,24044],{"class":173},[167,90189,90190],{"class":169,"line":205},[167,90191,209],{"emptyLinePlaceholder":208},[167,90193,90195,90197,90199,90201,90203,90205,90207],{"class":90194,"line":160},[169,213],[167,90196,246],{"class":191},[167,90198,38315],{"class":181},[167,90200,229],{"class":173},[167,90202,38320],{"class":254},[167,90204,583],{"class":191},[167,90206,586],{"class":219},[167,90208,258],{"class":173},[167,90210,90211,90213,90215,90217,90219],{"class":169,"line":238},[167,90212,2608],{"class":173},[167,90214,2611],{"class":181},[167,90216,229],{"class":173},[167,90218,38337],{"class":201},[167,90220,38340],{"class":173},[167,90222,90223],{"class":169,"line":243},[167,90224,276],{"class":173},[167,90226,90227,90229,90231],{"class":169,"line":261},[167,90228,282],{"class":173},[167,90230,178],{"class":177},[167,90232,185],{"class":173},[167,90234,90235],{"class":169,"line":273},[167,90236,209],{"emptyLinePlaceholder":208},[167,90238,90239,90241,90243],{"class":169,"line":279},[167,90240,174],{"class":173},[167,90242,299],{"class":177},[167,90244,185],{"class":173},[167,90246,90248,90250,90252,90254,90256,90258],{"class":90247,"line":289},[169,213],[167,90249,307],{"class":173},[167,90251,38372],{"class":177},[167,90253,38375],{"class":181},[167,90255,267],{"class":173},[167,90257,38380],{"class":201},[167,90259,5325],{"class":173},[167,90261,90262,90264,90266],{"class":169,"line":294},[167,90263,282],{"class":173},[167,90265,299],{"class":177},[167,90267,185],{"class":173},[154,90269,90271],{"className":156,"code":38393,"filename":3973,"highlights":90270,"language":162,"meta":163,"style":163},[243,161],[87,90272,90273,90287,90299,90303,90311,90315,90320,90330,90342,90346,90350,90354,90362,90366,90375,90389],{"__ignoreMap":163},[167,90274,90275,90277,90279,90281,90283,90285],{"class":169,"line":170},[167,90276,174],{"class":173},[167,90278,178],{"class":177},[167,90280,1050],{"class":181},[167,90282,267],{"class":173},[167,90284,1055],{"class":201},[167,90286,185],{"class":173},[167,90288,90289,90291,90293,90295,90297],{"class":169,"line":188},[167,90290,192],{"class":191},[167,90292,38296],{"class":173},[167,90294,198],{"class":191},[167,90296,38301],{"class":201},[167,90298,24044],{"class":173},[167,90300,90301],{"class":169,"line":205},[167,90302,209],{"emptyLinePlaceholder":208},[167,90304,90305,90307,90309],{"class":169,"line":160},[167,90306,608],{"class":191},[167,90308,3991],{"class":191},[167,90310,1905],{"class":173},[167,90312,90313],{"class":169,"line":238},[167,90314,38439],{"class":173},[167,90316,90318],{"class":90317,"line":243},[169,213],[167,90319,4419],{"class":173},[167,90321,90322,90324,90326,90328],{"class":169,"line":261},[167,90323,38449],{"class":181},[167,90325,229],{"class":173},[167,90327,38320],{"class":254},[167,90329,258],{"class":173},[167,90331,90332,90334,90336,90338,90340],{"class":169,"line":273},[167,90333,20442],{"class":173},[167,90335,2611],{"class":181},[167,90337,229],{"class":173},[167,90339,38337],{"class":201},[167,90341,38340],{"class":173},[167,90343,90344],{"class":169,"line":279},[167,90345,755],{"class":173},[167,90347,90348],{"class":169,"line":289},[167,90349,398],{"class":173},[167,90351,90352],{"class":169,"line":294},[167,90353,24148],{"class":173},[167,90355,90356,90358,90360],{"class":169,"line":304},[167,90357,282],{"class":173},[167,90359,178],{"class":177},[167,90361,185],{"class":173},[167,90363,90364],{"class":169,"line":313},[167,90365,209],{"emptyLinePlaceholder":208},[167,90367,90369,90371,90373],{"class":90368,"line":161},[169,213],[167,90370,174],{"class":173},[167,90372,299],{"class":177},[167,90374,185],{"class":173},[167,90376,90377,90379,90381,90383,90385,90387],{"class":169,"line":335},[167,90378,307],{"class":173},[167,90380,38372],{"class":177},[167,90382,38375],{"class":181},[167,90384,267],{"class":173},[167,90386,38380],{"class":201},[167,90388,5325],{"class":173},[167,90390,90391,90393,90395],{"class":169,"line":341},[167,90392,282],{"class":173},[167,90394,299],{"class":177},[167,90396,185],{"class":173},[22,90398,8027],{"id":8026},[15,90400,38527],{},[33,90402,90403,90407,90411],{},[36,90404,90405,38535],{},[87,90406,38534],{},[36,90408,90409,38540],{},[87,90410,30630],{},[36,90412,90413,38546],{},[87,90414,38545],{},[154,90416,90417],{"className":156,"code":38549,"filename":3260,"language":162,"meta":163,"style":163},[87,90418,90419,90435,90447,90451,90461,90471,90481,90491,90495,90499,90515,90531,90535,90569,90573,90581,90595,90609,90613,90621,90629,90633,90641,90645,90655,90659,90663,90679,90705,90719,90729,90733,90741,90745,90753,90761,90773,90785,90789,90803,90809,90817,90825,90833,90841,90845,90863,90871,90875,90883,90903,90917,90921,90929,90943,90947,90955,90963,90971,90979],{"__ignoreMap":163},[167,90420,90421,90423,90425,90427,90429,90431,90433],{"class":169,"line":170},[167,90422,174],{"class":173},[167,90424,178],{"class":177},[167,90426,182],{"class":181},[167,90428,1050],{"class":181},[167,90430,267],{"class":173},[167,90432,1055],{"class":201},[167,90434,185],{"class":173},[167,90436,90437,90439,90441,90443,90445],{"class":169,"line":188},[167,90438,192],{"class":191},[167,90440,1805],{"class":173},[167,90442,198],{"class":191},[167,90444,24041],{"class":201},[167,90446,24044],{"class":173},[167,90448,90449],{"class":169,"line":205},[167,90450,209],{"emptyLinePlaceholder":208},[167,90452,90453,90455,90457,90459],{"class":169,"line":160},[167,90454,569],{"class":191},[167,90456,11605],{"class":181},[167,90458,223],{"class":191},[167,90460,1905],{"class":173},[167,90462,90463,90465,90467,90469],{"class":169,"line":238},[167,90464,6505],{"class":254},[167,90466,583],{"class":191},[167,90468,8493],{"class":219},[167,90470,24044],{"class":173},[167,90472,90473,90475,90477,90479],{"class":169,"line":243},[167,90474,11622],{"class":254},[167,90476,583],{"class":191},[167,90478,586],{"class":219},[167,90480,24044],{"class":173},[167,90482,90483,90485,90487,90489],{"class":169,"line":261},[167,90484,11631],{"class":254},[167,90486,583],{"class":191},[167,90488,28416],{"class":219},[167,90490,24044],{"class":173},[167,90492,90493],{"class":169,"line":273},[167,90494,24148],{"class":173},[167,90496,90497],{"class":169,"line":279},[167,90498,209],{"emptyLinePlaceholder":208},[167,90500,90501,90503,90505,90507,90509,90511,90513],{"class":169,"line":289},[167,90502,216],{"class":191},[167,90504,38638],{"class":219},[167,90506,223],{"class":191},[167,90508,226],{"class":181},[167,90510,229],{"class":173},[167,90512,31161],{"class":201},[167,90514,24169],{"class":173},[167,90516,90517,90519,90521,90523,90525,90527,90529],{"class":169,"line":294},[167,90518,216],{"class":191},[167,90520,3368],{"class":219},[167,90522,223],{"class":191},[167,90524,226],{"class":181},[167,90526,174],{"class":173},[167,90528,11659],{"class":181},[167,90530,38665],{"class":173},[167,90532,90533],{"class":169,"line":304},[167,90534,209],{"emptyLinePlaceholder":208},[167,90536,90537,90539,90541,90543,90545,90547,90549,90551,90553,90555,90557,90559,90561,90563,90565,90567],{"class":169,"line":313},[167,90538,216],{"class":191},[167,90540,38676],{"class":219},[167,90542,223],{"class":191},[167,90544,1898],{"class":181},[167,90546,1493],{"class":173},[167,90548,639],{"class":191},[167,90550,3451],{"class":173},[167,90552,8252],{"class":181},[167,90554,1918],{"class":173},[167,90556,5075],{"class":254},[167,90558,693],{"class":173},[167,90560,639],{"class":191},[167,90562,5625],{"class":191},[167,90564,38701],{"class":173},[167,90566,15756],{"class":219},[167,90568,24169],{"class":173},[167,90570,90571],{"class":169,"line":161},[167,90572,209],{"emptyLinePlaceholder":208},[167,90574,90575,90577,90579],{"class":169,"line":335},[167,90576,246],{"class":191},[167,90578,38716],{"class":181},[167,90580,763],{"class":173},[167,90582,90583,90585,90587,90589,90591,90593],{"class":169,"line":341},[167,90584,1443],{"class":191},[167,90586,38725],{"class":219},[167,90588,223],{"class":191},[167,90590,38730],{"class":173},[167,90592,2500],{"class":181},[167,90594,25307],{"class":173},[167,90596,90597,90599,90601,90603,90605,90607],{"class":169,"line":489},[167,90598,2544],{"class":191},[167,90600,2526],{"class":173},[167,90602,6641],{"class":191},[167,90604,38745],{"class":173},[167,90606,24238],{"class":191},[167,90608,24044],{"class":173},[167,90610,90611],{"class":169,"line":495},[167,90612,209],{"emptyLinePlaceholder":208},[167,90614,90615,90617,90619],{"class":169,"line":501},[167,90616,38758],{"class":173},[167,90618,15723],{"class":181},[167,90620,372],{"class":173},[167,90622,90623,90625,90627],{"class":169,"line":512},[167,90624,15730],{"class":173},[167,90626,15733],{"class":181},[167,90628,15736],{"class":173},[167,90630,90631],{"class":169,"line":781},[167,90632,38775],{"class":173},[167,90634,90635,90637,90639],{"class":169,"line":786},[167,90636,38780],{"class":173},[167,90638,3392],{"class":219},[167,90640,393],{"class":173},[167,90642,90643],{"class":169,"line":2678},[167,90644,38789],{"class":173},[167,90646,90647,90649,90651,90653],{"class":169,"line":2692},[167,90648,38794],{"class":173},[167,90650,267],{"class":191},[167,90652,38799],{"class":201},[167,90654,24044],{"class":173},[167,90656,90657],{"class":169,"line":3575},[167,90658,276],{"class":173},[167,90660,90661],{"class":169,"line":5028},[167,90662,209],{"emptyLinePlaceholder":208},[167,90664,90665,90667,90669,90671,90673,90675,90677],{"class":169,"line":5037},[167,90666,246],{"class":191},[167,90668,8484],{"class":181},[167,90670,229],{"class":173},[167,90672,580],{"class":254},[167,90674,583],{"class":191},[167,90676,8493],{"class":219},[167,90678,258],{"class":173},[167,90680,90681,90683,90685,90687,90689,90691,90693,90695,90697,90699,90701,90703],{"class":169,"line":5046},[167,90682,1443],{"class":191},[167,90684,3446],{"class":219},[167,90686,223],{"class":191},[167,90688,3451],{"class":173},[167,90690,3454],{"class":181},[167,90692,1918],{"class":173},[167,90694,1926],{"class":254},[167,90696,693],{"class":173},[167,90698,639],{"class":191},[167,90700,3465],{"class":173},[167,90702,2550],{"class":191},[167,90704,38852],{"class":173},[167,90706,90707,90709,90711,90713,90715,90717],{"class":169,"line":6756},[167,90708,2544],{"class":191},[167,90710,2526],{"class":173},[167,90712,6641],{"class":191},[167,90714,8534],{"class":173},[167,90716,24238],{"class":191},[167,90718,24044],{"class":173},[167,90720,90721,90723,90725,90727],{"class":169,"line":6778},[167,90722,8545],{"class":173},[167,90724,267],{"class":191},[167,90726,5625],{"class":191},[167,90728,38877],{"class":173},[167,90730,90731],{"class":169,"line":6783},[167,90732,276],{"class":173},[167,90734,90735,90737,90739],{"class":169,"line":6788},[167,90736,282],{"class":173},[167,90738,178],{"class":177},[167,90740,185],{"class":173},[167,90742,90743],{"class":169,"line":6793},[167,90744,209],{"emptyLinePlaceholder":208},[167,90746,90747,90749,90751],{"class":169,"line":6809},[167,90748,174],{"class":173},[167,90750,299],{"class":177},[167,90752,185],{"class":173},[167,90754,90755,90757,90759],{"class":169,"line":6824},[167,90756,307],{"class":173},[167,90758,10117],{"class":177},[167,90760,185],{"class":173},[167,90762,90763,90765,90767,90769,90771],{"class":169,"line":6829},[167,90764,1257],{"class":173},[167,90766,22],{"class":177},[167,90768,38918],{"class":173},[167,90770,22],{"class":177},[167,90772,185],{"class":173},[167,90774,90775,90777,90779,90781,90783],{"class":169,"line":6836},[167,90776,1257],{"class":173},[167,90778,15],{"class":177},[167,90780,38931],{"class":173},[167,90782,15],{"class":177},[167,90784,185],{"class":173},[167,90786,90787],{"class":169,"line":6845},[167,90788,209],{"emptyLinePlaceholder":208},[167,90790,90791,90793,90795,90797,90799,90801],{"class":169,"line":6854},[167,90792,1257],{"class":173},[167,90794,4305],{"class":177},[167,90796,4308],{"class":181},[167,90798,267],{"class":173},[167,90800,38952],{"class":201},[167,90802,185],{"class":173},[167,90804,90805,90807],{"class":169,"line":6861},[167,90806,1268],{"class":173},[167,90808,17481],{"class":177},[167,90810,90811,90813,90815],{"class":169,"line":6879},[167,90812,38965],{"class":181},[167,90814,267],{"class":173},[167,90816,38970],{"class":201},[167,90818,90819,90821,90823],{"class":169,"line":6884},[167,90820,38975],{"class":181},[167,90822,267],{"class":173},[167,90824,35283],{"class":201},[167,90826,90827,90829,90831],{"class":169,"line":6889},[167,90828,38984],{"class":181},[167,90830,267],{"class":173},[167,90832,38989],{"class":201},[167,90834,90835,90837,90839],{"class":169,"line":6898},[167,90836,38994],{"class":181},[167,90838,267],{"class":173},[167,90840,38999],{"class":201},[167,90842,90843],{"class":169,"line":6903},[167,90844,39004],{"class":173},[167,90846,90847,90849,90851,90853,90855,90857,90859,90861],{"class":169,"line":6912},[167,90848,1268],{"class":173},[167,90850,507],{"class":177},[167,90852,1174],{"class":181},[167,90854,267],{"class":173},[167,90856,4348],{"class":201},[167,90858,39019],{"class":173},[167,90860,507],{"class":177},[167,90862,185],{"class":173},[167,90864,90865,90867,90869],{"class":169,"line":6928},[167,90866,1292],{"class":173},[167,90868,4305],{"class":177},[167,90870,185],{"class":173},[167,90872,90873],{"class":169,"line":6949},[167,90874,209],{"emptyLinePlaceholder":208},[167,90876,90877,90879,90881],{"class":169,"line":6954},[167,90878,1257],{"class":173},[167,90880,33],{"class":177},[167,90882,185],{"class":173},[167,90884,90885,90887,90889,90891,90893,90895,90897,90899,90901],{"class":169,"line":6975},[167,90886,1268],{"class":173},[167,90888,36],{"class":177},[167,90890,18706],{"class":181},[167,90892,267],{"class":173},[167,90894,39056],{"class":201},[167,90896,10307],{"class":181},[167,90898,267],{"class":173},[167,90900,39063],{"class":201},[167,90902,185],{"class":173},[167,90904,90905,90907,90909,90911,90913,90915],{"class":169,"line":6989},[167,90906,32516],{"class":173},[167,90908,507],{"class":177},[167,90910,1182],{"class":181},[167,90912,267],{"class":173},[167,90914,39078],{"class":201},[167,90916,185],{"class":173},[167,90918,90919],{"class":169,"line":7003},[167,90920,39085],{"class":173},[167,90922,90923,90925,90927],{"class":169,"line":7017},[167,90924,32564],{"class":173},[167,90926,507],{"class":177},[167,90928,185],{"class":173},[167,90930,90931,90933,90935,90937,90939,90941],{"class":169,"line":7026},[167,90932,32516],{"class":173},[167,90934,167],{"class":177},[167,90936,39102],{"class":181},[167,90938,267],{"class":173},[167,90940,39107],{"class":201},[167,90942,185],{"class":173},[167,90944,90945],{"class":169,"line":7031},[167,90946,39114],{"class":173},[167,90948,90949,90951,90953],{"class":169,"line":7048},[167,90950,32564],{"class":173},[167,90952,167],{"class":177},[167,90954,185],{"class":173},[167,90956,90957,90959,90961],{"class":169,"line":7057},[167,90958,10170],{"class":173},[167,90960,36],{"class":177},[167,90962,185],{"class":173},[167,90964,90965,90967,90969],{"class":169,"line":7555},[167,90966,1292],{"class":173},[167,90968,33],{"class":177},[167,90970,185],{"class":173},[167,90972,90973,90975,90977],{"class":169,"line":7560},[167,90974,504],{"class":173},[167,90976,10117],{"class":177},[167,90978,185],{"class":173},[167,90980,90981,90983,90985],{"class":169,"line":7579},[167,90982,282],{"class":173},[167,90984,299],{"class":177},[167,90986,185],{"class":173},[154,90988,90989],{"className":156,"code":39157,"filename":3973,"language":162,"meta":163,"style":163},[87,90990,90991,91005,91013,91019,91025,91033,91037,91041,91045,91049,91055,91081,91085,91089,91093,91099,91115,91129,91133,91143,91151,91155,91163,91167,91179,91183,91193,91221,91235,91245,91249,91253,91257,91265,91269,91277,91285,91297,91309,91313,91327,91333,91341,91349,91357,91365,91369,91387,91395,91399,91407,91427,91441,91445,91453,91467,91471,91479,91487,91495,91503],{"__ignoreMap":163},[167,90992,90993,90995,90997,90999,91001,91003],{"class":169,"line":170},[167,90994,174],{"class":173},[167,90996,178],{"class":177},[167,90998,1050],{"class":181},[167,91000,267],{"class":173},[167,91002,1055],{"class":201},[167,91004,185],{"class":173},[167,91006,91007,91009,91011],{"class":169,"line":188},[167,91008,608],{"class":191},[167,91010,3991],{"class":191},[167,91012,1905],{"class":173},[167,91014,91015,91017],{"class":169,"line":205},[167,91016,7176],{"class":181},[167,91018,763],{"class":173},[167,91020,91021,91023],{"class":169,"line":160},[167,91022,1937],{"class":191},[167,91024,1905],{"class":173},[167,91026,91027,91029,91031],{"class":169,"line":238},[167,91028,39198],{"class":173},[167,91030,31161],{"class":201},[167,91032,393],{"class":173},[167,91034,91035],{"class":169,"line":243},[167,91036,12571],{"class":173},[167,91038,91039],{"class":169,"line":261},[167,91040,24370],{"class":173},[167,91042,91043],{"class":169,"line":273},[167,91044,398],{"class":173},[167,91046,91047],{"class":169,"line":279},[167,91048,8755],{"class":173},[167,91050,91051,91053],{"class":169,"line":289},[167,91052,39223],{"class":181},[167,91054,763],{"class":173},[167,91056,91057,91059,91061,91063,91065,91067,91069,91071,91073,91075,91077,91079],{"class":169,"line":294},[167,91058,8767],{"class":191},[167,91060,7351],{"class":219},[167,91062,8772],{"class":173},[167,91064,8252],{"class":181},[167,91066,1918],{"class":173},[167,91068,5075],{"class":254},[167,91070,693],{"class":173},[167,91072,639],{"class":191},[167,91074,5625],{"class":191},[167,91076,38701],{"class":173},[167,91078,15756],{"class":219},[167,91080,24044],{"class":173},[167,91082,91083],{"class":169,"line":304},[167,91084,755],{"class":173},[167,91086,91087],{"class":169,"line":313},[167,91088,398],{"class":173},[167,91090,91091],{"class":169,"line":161},[167,91092,4419],{"class":173},[167,91094,91095,91097],{"class":169,"line":335},[167,91096,39268],{"class":181},[167,91098,763],{"class":173},[167,91100,91101,91103,91105,91107,91109,91111,91113],{"class":169,"line":341},[167,91102,4435],{"class":191},[167,91104,38725],{"class":219},[167,91106,223],{"class":191},[167,91108,7351],{"class":219},[167,91110,39283],{"class":173},[167,91112,2500],{"class":181},[167,91114,25307],{"class":173},[167,91116,91117,91119,91121,91123,91125,91127],{"class":169,"line":489},[167,91118,7261],{"class":191},[167,91120,2526],{"class":173},[167,91122,6641],{"class":191},[167,91124,38745],{"class":173},[167,91126,24238],{"class":191},[167,91128,24044],{"class":173},[167,91130,91131],{"class":169,"line":495},[167,91132,209],{"emptyLinePlaceholder":208},[167,91134,91135,91137,91139,91141],{"class":169,"line":501},[167,91136,741],{"class":219},[167,91138,8772],{"class":173},[167,91140,15723],{"class":181},[167,91142,372],{"class":173},[167,91144,91145,91147,91149],{"class":169,"line":512},[167,91146,16160],{"class":173},[167,91148,15733],{"class":181},[167,91150,15736],{"class":173},[167,91152,91153],{"class":169,"line":781},[167,91154,39328],{"class":173},[167,91156,91157,91159,91161],{"class":169,"line":786},[167,91158,39333],{"class":173},[167,91160,3392],{"class":219},[167,91162,393],{"class":173},[167,91164,91165],{"class":169,"line":2678},[167,91166,36408],{"class":173},[167,91168,91169,91171,91173,91175,91177],{"class":169,"line":2692},[167,91170,741],{"class":219},[167,91172,39348],{"class":173},[167,91174,267],{"class":191},[167,91176,38799],{"class":201},[167,91178,24044],{"class":173},[167,91180,91181],{"class":169,"line":3575},[167,91182,755],{"class":173},[167,91184,91185,91187,91189,91191],{"class":169,"line":5028},[167,91186,9000],{"class":181},[167,91188,229],{"class":173},[167,91190,580],{"class":254},[167,91192,258],{"class":173},[167,91194,91195,91197,91199,91201,91203,91205,91207,91209,91211,91213,91215,91217,91219],{"class":169,"line":5037},[167,91196,4435],{"class":191},[167,91198,3446],{"class":219},[167,91200,223],{"class":191},[167,91202,7351],{"class":219},[167,91204,8772],{"class":173},[167,91206,3454],{"class":181},[167,91208,1918],{"class":173},[167,91210,1926],{"class":254},[167,91212,693],{"class":173},[167,91214,639],{"class":191},[167,91216,3465],{"class":173},[167,91218,2550],{"class":191},[167,91220,38852],{"class":173},[167,91222,91223,91225,91227,91229,91231,91233],{"class":169,"line":5046},[167,91224,7261],{"class":191},[167,91226,2526],{"class":173},[167,91228,6641],{"class":191},[167,91230,8534],{"class":173},[167,91232,24238],{"class":191},[167,91234,24044],{"class":173},[167,91236,91237,91239,91241,91243],{"class":169,"line":6756},[167,91238,9057],{"class":173},[167,91240,267],{"class":191},[167,91242,5625],{"class":191},[167,91244,38877],{"class":173},[167,91246,91247],{"class":169,"line":6778},[167,91248,755],{"class":173},[167,91250,91251],{"class":169,"line":6783},[167,91252,398],{"class":173},[167,91254,91255],{"class":169,"line":6788},[167,91256,24148],{"class":173},[167,91258,91259,91261,91263],{"class":169,"line":6793},[167,91260,282],{"class":173},[167,91262,178],{"class":177},[167,91264,185],{"class":173},[167,91266,91267],{"class":169,"line":6809},[167,91268,209],{"emptyLinePlaceholder":208},[167,91270,91271,91273,91275],{"class":169,"line":6824},[167,91272,174],{"class":173},[167,91274,299],{"class":177},[167,91276,185],{"class":173},[167,91278,91279,91281,91283],{"class":169,"line":6829},[167,91280,307],{"class":173},[167,91282,10117],{"class":177},[167,91284,185],{"class":173},[167,91286,91287,91289,91291,91293,91295],{"class":169,"line":6836},[167,91288,1257],{"class":173},[167,91290,22],{"class":177},[167,91292,38918],{"class":173},[167,91294,22],{"class":177},[167,91296,185],{"class":173},[167,91298,91299,91301,91303,91305,91307],{"class":169,"line":6845},[167,91300,1257],{"class":173},[167,91302,15],{"class":177},[167,91304,38931],{"class":173},[167,91306,15],{"class":177},[167,91308,185],{"class":173},[167,91310,91311],{"class":169,"line":6854},[167,91312,209],{"emptyLinePlaceholder":208},[167,91314,91315,91317,91319,91321,91323,91325],{"class":169,"line":6861},[167,91316,1257],{"class":173},[167,91318,4305],{"class":177},[167,91320,4308],{"class":181},[167,91322,267],{"class":173},[167,91324,38952],{"class":201},[167,91326,185],{"class":173},[167,91328,91329,91331],{"class":169,"line":6879},[167,91330,1268],{"class":173},[167,91332,17481],{"class":177},[167,91334,91335,91337,91339],{"class":169,"line":6884},[167,91336,38965],{"class":181},[167,91338,267],{"class":173},[167,91340,38970],{"class":201},[167,91342,91343,91345,91347],{"class":169,"line":6889},[167,91344,38975],{"class":181},[167,91346,267],{"class":173},[167,91348,35283],{"class":201},[167,91350,91351,91353,91355],{"class":169,"line":6898},[167,91352,38984],{"class":181},[167,91354,267],{"class":173},[167,91356,38989],{"class":201},[167,91358,91359,91361,91363],{"class":169,"line":6903},[167,91360,38994],{"class":181},[167,91362,267],{"class":173},[167,91364,38999],{"class":201},[167,91366,91367],{"class":169,"line":6912},[167,91368,39004],{"class":173},[167,91370,91371,91373,91375,91377,91379,91381,91383,91385],{"class":169,"line":6928},[167,91372,1268],{"class":173},[167,91374,507],{"class":177},[167,91376,1174],{"class":181},[167,91378,267],{"class":173},[167,91380,4348],{"class":201},[167,91382,39019],{"class":173},[167,91384,507],{"class":177},[167,91386,185],{"class":173},[167,91388,91389,91391,91393],{"class":169,"line":6949},[167,91390,1292],{"class":173},[167,91392,4305],{"class":177},[167,91394,185],{"class":173},[167,91396,91397],{"class":169,"line":6954},[167,91398,209],{"emptyLinePlaceholder":208},[167,91400,91401,91403,91405],{"class":169,"line":6975},[167,91402,1257],{"class":173},[167,91404,33],{"class":177},[167,91406,185],{"class":173},[167,91408,91409,91411,91413,91415,91417,91419,91421,91423,91425],{"class":169,"line":6989},[167,91410,1268],{"class":173},[167,91412,36],{"class":177},[167,91414,18706],{"class":181},[167,91416,267],{"class":173},[167,91418,39056],{"class":201},[167,91420,10307],{"class":181},[167,91422,267],{"class":173},[167,91424,39063],{"class":201},[167,91426,185],{"class":173},[167,91428,91429,91431,91433,91435,91437,91439],{"class":169,"line":7003},[167,91430,32516],{"class":173},[167,91432,507],{"class":177},[167,91434,1182],{"class":181},[167,91436,267],{"class":173},[167,91438,39078],{"class":201},[167,91440,185],{"class":173},[167,91442,91443],{"class":169,"line":7017},[167,91444,39085],{"class":173},[167,91446,91447,91449,91451],{"class":169,"line":7026},[167,91448,32564],{"class":173},[167,91450,507],{"class":177},[167,91452,185],{"class":173},[167,91454,91455,91457,91459,91461,91463,91465],{"class":169,"line":7031},[167,91456,32516],{"class":173},[167,91458,167],{"class":177},[167,91460,39102],{"class":181},[167,91462,267],{"class":173},[167,91464,39107],{"class":201},[167,91466,185],{"class":173},[167,91468,91469],{"class":169,"line":7048},[167,91470,39114],{"class":173},[167,91472,91473,91475,91477],{"class":169,"line":7057},[167,91474,32564],{"class":173},[167,91476,167],{"class":177},[167,91478,185],{"class":173},[167,91480,91481,91483,91485],{"class":169,"line":7555},[167,91482,10170],{"class":173},[167,91484,36],{"class":177},[167,91486,185],{"class":173},[167,91488,91489,91491,91493],{"class":169,"line":7560},[167,91490,1292],{"class":173},[167,91492,33],{"class":177},[167,91494,185],{"class":173},[167,91496,91497,91499,91501],{"class":169,"line":7579},[167,91498,504],{"class":173},[167,91500,10117],{"class":177},[167,91502,185],{"class":173},[167,91504,91505,91507,91509],{"class":169,"line":7592},[167,91506,282],{"class":173},[167,91508,299],{"class":177},[167,91510,185],{"class":173},[22,91512,7678],{"id":7677},[15,91514,91515,39693],{},[87,91516,23871],{},[15,91518,39696],{},[33,91520,91521,91527,91529,91537],{},[36,91522,1582,91523,39704,91525,1679],{},[87,91524,39703],{},[87,91526,23871],{},[36,91528,39709],{},[36,91530,39712,91531,1025,91533,1025,91535,39719],{},[87,91532,36905],{},[87,91534,36908],{},[87,91536,36911],{},[36,91538,39722],{},[924,91540,39725],{},{"title":163,"searchDepth":188,"depth":188,"links":91542},[91543,91544,91545,91546,91547,91553,91559,91560],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":91548},[91549,91550,91551,91552],{"id":37000,"depth":205,"text":37001},{"id":37075,"depth":205,"text":39736},{"id":37149,"depth":205,"text":37150},{"id":37258,"depth":205,"text":39739},{"id":7996,"depth":188,"text":7997,"children":91554},[91555,91556,91557,91558],{"id":37334,"depth":205,"text":37335},{"id":37550,"depth":205,"text":39744},{"id":37973,"depth":205,"text":37974},{"id":38266,"depth":205,"text":38267},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},{"updatedAt":39754,"coverCaption":23656,"author":946,"keywords":91562},[3258,23871,39756,39757,3260,3973],[91564],{"headline":39761,"author":91565,"datePublished":39754,"@type":961},{"name":946,"@type":959},{"title":36754,"description":39752},[91568,91569,91570],{"tag":26466,"color":26467},{"tag":1644,"color":1645},{"tag":5424,"color":5425},{"id":91572,"title":91573,"body":91574,"cover":30402,"coverAlt":94122,"date":30404,"description":94123,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":94124,"navigation":208,"path":94127,"schemaOrg":94128,"seo":94132,"series":26460,"seriesDescription":60258,"seriesOrder":279,"seriesTitle":60259,"slug":942,"stem":94133,"tags":94134,"__hash__":94141},"blog\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en.md","Vue Directives: v-once \u002F v-memo \u002F v-pre",{"type":8,"value":91575,"toc":94092},[91576,91585,91594,91596,91599,91602,91619,91622,91624,91628,91631,91634,91638,91645,91653,91657,91667,91670,91672,91675,91695,91698,91712,91714,91717,91735,91738,91742,91759,91762,91779,91781,91788,91794,91803,91810,91813,91818,91825,91830,91838,91842,91845,91850,91852,91858,91988,92116,92127,92133,92457,92726,92741,92747,92841,92957,92961,92972,93544,94059,94061,94070,94087,94090],[11,91577,68424,91579,11227,91581,11227,91583],{"id":91578},"vue-directives-v-once-v-memo-v-pre",[87,91580,27772],{},[87,91582,27775],{},[87,91584,27778],{},[15,91586,91587,1025,91589,57860,91591,91593],{},[87,91588,27772],{},[87,91590,27775],{},[87,91592,27778],{}," are directives focused on rendering performance and compile\u002Frender control. They are not meant to be added everywhere, but in specific scenarios they reduce unnecessary work and avoid costly re-renders.",[22,91595,57636],{"id":57635},[15,91597,91598],{},"In large apps, many performance issues do not come from one heavy operation, but from thousands of small renders that happen repeatedly without need.",[15,91600,91601],{},"These directives let you:",[33,91603,91604,91609,91614],{},[36,91605,91606,91607,4270],{},"Freeze static fragments (",[87,91608,27772],{},[36,91610,91611,91612,4270],{},"Reuse subtrees when key dependencies do not change (",[87,91613,27775],{},[36,91615,91616,91617,4270],{},"Skip expression compilation for literal content (",[87,91618,27778],{},[15,91620,91621],{},"When used intentionally, they improve smoothness without hurting readability.",[22,91623,57681],{"id":57680},[3087,91625,91626],{"id":27772},[87,91627,27772],{},[15,91629,91630],{},"Renders a node only once. On later updates, Vue reuses the result and does not evaluate it again.",[15,91632,91633],{},"Ideal for truly immutable content (build version, fixed legal text, environment metadata, etc.).",[3087,91635,91636],{"id":27775},[87,91637,27775],{},[15,91639,91640,91641,91644],{},"Memoizes (caches) a template subtree based on a ",[3933,91642,91643],{},"dependency array",". If no dependency changes, Vue skips patching that subtree.",[15,91646,91647,91648,91650,91651,1679],{},"Useful when part of the template is expensive and depends on a few stable signals. Important note: ",[87,91649,27775],{}," exists since Vue ",[3933,91652,27855],{},[3087,91654,91655],{"id":27778},[87,91656,27778],{},[15,91658,91659,91660,91663,91664,91666],{},"Tells Vue to ",[3933,91661,91662],{},"not compile"," that block. Interpolations like ",[87,91665,26498],{}," are rendered as literal text.",[15,91668,91669],{},"It is perfect for code samples or snippets where you want to display Vue syntax without evaluating it.",[22,91671,57775],{"id":57774},[15,91673,91674],{},"Use these directives when you have a concrete, measurable reason:",[33,91676,91677,91682,91690],{},[36,91678,91679,91681],{},[87,91680,27772],{},": static blocks that should not react to updates.",[36,91683,91684,91686,91687,1679],{},[87,91685,27775],{},": complex lists\u002Fcards with high render cost when you know the ",[3933,91688,91689],{},"exact dependencies",[36,91691,91692,91694],{},[87,91693,27778],{},": docs, tutorials, or demos where you want to show moustaches literally.",[15,91696,91697],{},"Real cases:",[33,91699,91700,91706,91709],{},[36,91701,91702,91703,91705],{},"A dashboard with dense cards that only change by ",[87,91704,580],{}," and specific status flags.",[36,91707,91708],{},"An onboarding screen with fully static sections.",[36,91710,91711],{},"In-app documentation views that show raw Vue syntax.",[22,91713,57799],{"id":57798},[15,91715,91716],{},"Avoid them when you are only trying to \"optimize for the sake of optimizing\":",[33,91718,91719,91725,91730],{},[36,91720,91721,91722,91724],{},"Do not use ",[87,91723,27772],{}," for data that should update later.",[36,91726,91721,91727,91729],{},[87,91728,27775],{}," without understanding dependencies; it can hide expected updates.",[36,91731,91721,91732,91734],{},[87,91733,27778],{}," in blocks that still need bindings or events.",[15,91736,91737],{},"If you have not identified a real render issue, measure first with Vue Devtools before adding template complexity.",[22,91739,91741],{"id":91740},"comparison","Comparison",[33,91743,91744,91749,91754],{},[36,91745,91746,91748],{},[87,91747,27772],{},": permanently frozen after first render.",[36,91750,91751,91753],{},[87,91752,27775],{},": conditionally frozen based on dependencies.",[36,91755,91756,91758],{},[87,91757,27778],{},": no template compilation; literal output.",[15,91760,91761],{},"Quick rule:",[33,91763,91764,91769,91774],{},[36,91765,91766,91767,1679],{},"You want \"never update this again\": ",[87,91768,27772],{},[36,91770,91771,91772,1679],{},"You want \"update only if X dependencies change\": ",[87,91773,27775],{},[36,91775,91776,91777,1679],{},"You want \"show template without interpreting it\": ",[87,91778,27778],{},[22,91780,57820],{"id":57819},[3087,91782,91784,91785,91787],{"id":91783},"_1-applying-v-once-to-data-that-can-change","1) Applying ",[87,91786,27772],{}," to data that can change",[15,91789,91790,91791,91793],{},"If the source changes but the node has ",[87,91792,27772],{},", the UI will become stale.",[15,91795,91796,91799,91800,91802],{},[3933,91797,91798],{},"Fix:"," limit ",[87,91801,27772],{}," to strictly immutable content.",[3087,91804,91806,91807,91809],{"id":91805},"_2-defining-v-memo-dependencies-incorrectly","2) Defining ",[87,91808,27775],{}," dependencies incorrectly",[15,91811,91812],{},"If you miss a relevant dependency, Vue may reuse an old subtree.\nIf you include too many dependencies, you lose the optimization benefit.",[15,91814,91815,91817],{},[3933,91816,91798],{}," declare only signals that affect rendered HTML (and make sure you include all required ones).",[3087,91819,91821,91822,91824],{"id":91820},"_3-expecting-v-pre-to-process-directives-or-interpolations","3) Expecting ",[87,91823,27778],{}," to process directives or interpolations",[15,91826,62833,91827,91829],{},[87,91828,27778],{},", Vue does not interpret anything inside the block (neither moustaches nor nested directives).",[15,91831,91832,91834,91835,91837],{},[3933,91833,91798],{}," use ",[87,91836,27778],{}," only for literal output\u002Fdocumentation.",[3087,91839,91841],{"id":91840},"_4-using-them-without-validating-impact","4) Using them without validating impact",[15,91843,91844],{},"Adding these directives indiscriminately can increase complexity without real performance gain.",[15,91846,91847,91849],{},[3933,91848,91798],{}," profile first and optimize only where cost is measurable.",[22,91851,57926],{"id":57925},[3087,91853,91855,91856],{"id":91854},"_1-static-block-with-v-once","1) Static block with ",[87,91857,27772],{},[154,91859,91861],{"className":156,"code":28058,"filename":3260,"highlights":91860,"language":162,"meta":163,"style":163},[294],[87,91862,91863,91879,91891,91895,91911,91923,91931,91935,91943,91961,91965,91980],{"__ignoreMap":163},[167,91864,91865,91867,91869,91871,91873,91875,91877],{"class":169,"line":170},[167,91866,174],{"class":173},[167,91868,178],{"class":177},[167,91870,182],{"class":181},[167,91872,1050],{"class":181},[167,91874,267],{"class":173},[167,91876,1055],{"class":201},[167,91878,185],{"class":173},[167,91880,91881,91883,91885,91887,91889],{"class":169,"line":188},[167,91882,192],{"class":191},[167,91884,195],{"class":173},[167,91886,198],{"class":191},[167,91888,24041],{"class":201},[167,91890,24044],{"class":173},[167,91892,91893],{"class":169,"line":205},[167,91894,209],{"emptyLinePlaceholder":208},[167,91896,91897,91899,91901,91903,91905,91907,91909],{"class":169,"line":160},[167,91898,216],{"class":191},[167,91900,28100],{"class":219},[167,91902,223],{"class":191},[167,91904,226],{"class":181},[167,91906,229],{"class":173},[167,91908,1960],{"class":219},[167,91910,24169],{"class":173},[167,91912,91913,91915,91917,91919,91921],{"class":169,"line":238},[167,91914,216],{"class":191},[167,91916,28117],{"class":219},[167,91918,223],{"class":191},[167,91920,28122],{"class":201},[167,91922,24044],{"class":173},[167,91924,91925,91927,91929],{"class":169,"line":243},[167,91926,282],{"class":173},[167,91928,178],{"class":177},[167,91930,185],{"class":173},[167,91932,91933],{"class":169,"line":261},[167,91934,209],{"emptyLinePlaceholder":208},[167,91936,91937,91939,91941],{"class":169,"line":273},[167,91938,174],{"class":173},[167,91940,299],{"class":177},[167,91942,185],{"class":173},[167,91944,91945,91947,91949,91951,91953,91955,91957,91959],{"class":169,"line":279},[167,91946,307],{"class":173},[167,91948,507],{"class":177},[167,91950,1182],{"class":181},[167,91952,267],{"class":173},[167,91954,28157],{"class":201},[167,91956,28160],{"class":173},[167,91958,507],{"class":177},[167,91960,185],{"class":173},[167,91962,91963],{"class":169,"line":289},[167,91964,209],{"emptyLinePlaceholder":208},[167,91966,91968,91970,91972,91974,91976,91978],{"class":91967,"line":294},[169,213],[167,91969,307],{"class":173},[167,91971,15],{"class":177},[167,91973,28178],{"class":181},[167,91975,28181],{"class":173},[167,91977,15],{"class":177},[167,91979,185],{"class":173},[167,91981,91982,91984,91986],{"class":169,"line":304},[167,91983,282],{"class":173},[167,91985,299],{"class":177},[167,91987,185],{"class":173},[154,91989,91991],{"className":156,"code":28196,"filename":3973,"highlights":91990,"language":162,"meta":163,"style":163},[161],[87,91992,91993,92007,92015,92021,92027,92035,92043,92047,92051,92055,92063,92067,92075,92093,92108],{"__ignoreMap":163},[167,91994,91995,91997,91999,92001,92003,92005],{"class":169,"line":170},[167,91996,174],{"class":173},[167,91998,178],{"class":177},[167,92000,1050],{"class":181},[167,92002,267],{"class":173},[167,92004,1055],{"class":201},[167,92006,185],{"class":173},[167,92008,92009,92011,92013],{"class":169,"line":188},[167,92010,608],{"class":191},[167,92012,3991],{"class":191},[167,92014,1905],{"class":173},[167,92016,92017,92019],{"class":169,"line":205},[167,92018,7176],{"class":181},[167,92020,763],{"class":173},[167,92022,92023,92025],{"class":169,"line":160},[167,92024,1937],{"class":191},[167,92026,1905],{"class":173},[167,92028,92029,92031,92033],{"class":169,"line":238},[167,92030,28238],{"class":173},[167,92032,1960],{"class":219},[167,92034,393],{"class":173},[167,92036,92037,92039,92041],{"class":169,"line":243},[167,92038,28247],{"class":173},[167,92040,28250],{"class":201},[167,92042,393],{"class":173},[167,92044,92045],{"class":169,"line":261},[167,92046,24370],{"class":173},[167,92048,92049],{"class":169,"line":273},[167,92050,398],{"class":173},[167,92052,92053],{"class":169,"line":279},[167,92054,24148],{"class":173},[167,92056,92057,92059,92061],{"class":169,"line":289},[167,92058,282],{"class":173},[167,92060,178],{"class":177},[167,92062,185],{"class":173},[167,92064,92065],{"class":169,"line":294},[167,92066,209],{"emptyLinePlaceholder":208},[167,92068,92069,92071,92073],{"class":169,"line":304},[167,92070,174],{"class":173},[167,92072,299],{"class":177},[167,92074,185],{"class":173},[167,92076,92077,92079,92081,92083,92085,92087,92089,92091],{"class":169,"line":313},[167,92078,307],{"class":173},[167,92080,507],{"class":177},[167,92082,1182],{"class":181},[167,92084,267],{"class":173},[167,92086,28157],{"class":201},[167,92088,28160],{"class":173},[167,92090,507],{"class":177},[167,92092,185],{"class":173},[167,92094,92096,92098,92100,92102,92104,92106],{"class":92095,"line":161},[169,213],[167,92097,307],{"class":173},[167,92099,15],{"class":177},[167,92101,28178],{"class":181},[167,92103,28181],{"class":173},[167,92105,15],{"class":177},[167,92107,185],{"class":173},[167,92109,92110,92112,92114],{"class":169,"line":335},[167,92111,282],{"class":173},[167,92113,299],{"class":177},[167,92115,185],{"class":173},[5367,92117,92118],{},[15,92119,92120,92121,92123,92124,92126],{},"Note: this assumes ",[87,92122,28333],{}," is immutable. If it might change in your app (for example from an async call), ",[87,92125,27772],{}," is not appropriate.",[3087,92128,92130,92131],{"id":92129},"_2-heavy-segment-with-v-memo","2) Heavy segment with ",[87,92132,27775],{},[154,92134,92137],{"className":156,"code":92135,"filename":3260,"highlights":92136,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\ntype UserCard = { id: number; name: string; isOnline: boolean; score: number };\n\nconst selectedId = ref\u003Cnumber | null>(null);\nconst users = ref\u003CUserCard[]>([\n  { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n  { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n  { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-for=\"user in users\"\n    :key=\"user.id\"\n    v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n    class=\"card\"\n  >\n    \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n    \u003Cp>Score: {{ user.score }}\u003C\u002Fp>\n    \u003Cp>{{ user.isOnline ? \"Online\" : \"Offline\" }}\u003C\u002Fp>\n    \u003Cbutton @click=\"selectedId = user.id\">Select\u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[495],[87,92138,92139,92155,92167,92171,92213,92217,92241,92257,92277,92297,92317,92321,92329,92333,92341,92347,92355,92363,92372,92380,92384,92396,92409,92422,92441,92449],{"__ignoreMap":163},[167,92140,92141,92143,92145,92147,92149,92151,92153],{"class":169,"line":170},[167,92142,174],{"class":173},[167,92144,178],{"class":177},[167,92146,182],{"class":181},[167,92148,1050],{"class":181},[167,92150,267],{"class":173},[167,92152,1055],{"class":201},[167,92154,185],{"class":173},[167,92156,92157,92159,92161,92163,92165],{"class":169,"line":188},[167,92158,192],{"class":191},[167,92160,195],{"class":173},[167,92162,198],{"class":191},[167,92164,24041],{"class":201},[167,92166,24044],{"class":173},[167,92168,92169],{"class":169,"line":205},[167,92170,209],{"emptyLinePlaceholder":208},[167,92172,92173,92175,92177,92179,92181,92183,92185,92187,92189,92191,92193,92195,92197,92199,92201,92203,92205,92207,92209,92211],{"class":169,"line":160},[167,92174,569],{"class":191},[167,92176,28388],{"class":181},[167,92178,223],{"class":191},[167,92180,577],{"class":173},[167,92182,580],{"class":254},[167,92184,583],{"class":191},[167,92186,8493],{"class":219},[167,92188,589],{"class":173},[167,92190,592],{"class":254},[167,92192,583],{"class":191},[167,92194,586],{"class":219},[167,92196,589],{"class":173},[167,92198,28411],{"class":254},[167,92200,583],{"class":191},[167,92202,28416],{"class":219},[167,92204,589],{"class":173},[167,92206,28421],{"class":254},[167,92208,583],{"class":191},[167,92210,8493],{"class":219},[167,92212,25582],{"class":173},[167,92214,92215],{"class":169,"line":238},[167,92216,209],{"emptyLinePlaceholder":208},[167,92218,92219,92221,92223,92225,92227,92229,92231,92233,92235,92237,92239],{"class":169,"line":243},[167,92220,216],{"class":191},[167,92222,28438],{"class":219},[167,92224,223],{"class":191},[167,92226,226],{"class":181},[167,92228,174],{"class":173},[167,92230,13929],{"class":219},[167,92232,659],{"class":191},[167,92234,6567],{"class":219},[167,92236,6570],{"class":173},[167,92238,6573],{"class":219},[167,92240,24169],{"class":173},[167,92242,92243,92245,92247,92249,92251,92253,92255],{"class":169,"line":261},[167,92244,216],{"class":191},[167,92246,16954],{"class":219},[167,92248,223],{"class":191},[167,92250,226],{"class":181},[167,92252,174],{"class":173},[167,92254,5309],{"class":181},[167,92256,28473],{"class":173},[167,92258,92259,92261,92263,92265,92267,92269,92271,92273,92275],{"class":169,"line":273},[167,92260,1832],{"class":173},[167,92262,1835],{"class":219},[167,92264,1838],{"class":173},[167,92266,23487],{"class":201},[167,92268,28486],{"class":173},[167,92270,390],{"class":219},[167,92272,28491],{"class":173},[167,92274,28494],{"class":219},[167,92276,1856],{"class":173},[167,92278,92279,92281,92283,92285,92287,92289,92291,92293,92295],{"class":169,"line":279},[167,92280,1832],{"class":173},[167,92282,1853],{"class":219},[167,92284,1838],{"class":173},[167,92286,28507],{"class":201},[167,92288,28486],{"class":173},[167,92290,3392],{"class":219},[167,92292,28491],{"class":173},[167,92294,28516],{"class":219},[167,92296,1856],{"class":173},[167,92298,92299,92301,92303,92305,92307,92309,92311,92313,92315],{"class":169,"line":289},[167,92300,1832],{"class":173},[167,92302,8203],{"class":219},[167,92304,1838],{"class":173},[167,92306,28529],{"class":201},[167,92308,28486],{"class":173},[167,92310,390],{"class":219},[167,92312,28491],{"class":173},[167,92314,28538],{"class":219},[167,92316,1856],{"class":173},[167,92318,92319],{"class":169,"line":294},[167,92320,28545],{"class":173},[167,92322,92323,92325,92327],{"class":169,"line":304},[167,92324,282],{"class":173},[167,92326,178],{"class":177},[167,92328,185],{"class":173},[167,92330,92331],{"class":169,"line":313},[167,92332,209],{"emptyLinePlaceholder":208},[167,92334,92335,92337,92339],{"class":169,"line":161},[167,92336,174],{"class":173},[167,92338,299],{"class":177},[167,92340,185],{"class":173},[167,92342,92343,92345],{"class":169,"line":335},[167,92344,307],{"class":173},[167,92346,28572],{"class":177},[167,92348,92349,92351,92353],{"class":169,"line":341},[167,92350,3530],{"class":181},[167,92352,267],{"class":173},[167,92354,28581],{"class":201},[167,92356,92357,92359,92361],{"class":169,"line":489},[167,92358,3541],{"class":181},[167,92360,267],{"class":173},[167,92362,28590],{"class":201},[167,92364,92366,92368,92370],{"class":92365,"line":495},[169,213],[167,92367,28596],{"class":181},[167,92369,267],{"class":173},[167,92371,28601],{"class":201},[167,92373,92374,92376,92378],{"class":169,"line":501},[167,92375,28606],{"class":181},[167,92377,267],{"class":173},[167,92379,28611],{"class":201},[167,92381,92382],{"class":169,"line":512},[167,92383,492],{"class":173},[167,92385,92386,92388,92390,92392,92394],{"class":169,"line":781},[167,92387,1257],{"class":173},[167,92389,3087],{"class":177},[167,92391,28624],{"class":173},[167,92393,3087],{"class":177},[167,92395,185],{"class":173},[167,92397,92398,92400,92402,92405,92407],{"class":169,"line":786},[167,92399,1257],{"class":173},[167,92401,15],{"class":177},[167,92403,92404],{"class":173},">Score: {{ user.score }}\u003C\u002F",[167,92406,15],{"class":177},[167,92408,185],{"class":173},[167,92410,92411,92413,92415,92418,92420],{"class":169,"line":2678},[167,92412,1257],{"class":173},[167,92414,15],{"class":177},[167,92416,92417],{"class":173},">{{ user.isOnline ? \"Online\" : \"Offline\" }}\u003C\u002F",[167,92419,15],{"class":177},[167,92421,185],{"class":173},[167,92423,92424,92426,92428,92430,92432,92434,92437,92439],{"class":169,"line":2692},[167,92425,1257],{"class":173},[167,92427,507],{"class":177},[167,92429,1182],{"class":181},[167,92431,267],{"class":173},[167,92433,28667],{"class":201},[167,92435,92436],{"class":173},">Select\u003C\u002F",[167,92438,507],{"class":177},[167,92440,185],{"class":173},[167,92442,92443,92445,92447],{"class":169,"line":3575},[167,92444,504],{"class":173},[167,92446,3696],{"class":177},[167,92448,185],{"class":173},[167,92450,92451,92453,92455],{"class":169,"line":5028},[167,92452,282],{"class":173},[167,92454,299],{"class":177},[167,92456,185],{"class":173},[154,92458,92461],{"className":156,"code":92459,"filename":3973,"highlights":92460,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      selectedId: null as number | null,\n      users: [\n        { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n        { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n        { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n      ],\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle\n    v-for=\"user in users\"\n    :key=\"user.id\"\n    v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n    class=\"card\"\n  >\n    \u003Ch3>{{ user.name }}\u003C\u002Fh3>\n    \u003Cp>Score: {{ user.score }}\u003C\u002Fp>\n    \u003Cp>{{ user.isOnline ? \"Online\" : \"Offline\" }}\u003C\u002Fp>\n    \u003Cbutton @click=\"selectedId = user.id\">Select\u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[512],[87,92462,92463,92477,92485,92491,92497,92513,92517,92537,92557,92577,92581,92585,92589,92593,92601,92605,92613,92619,92627,92635,92644,92652,92656,92668,92680,92692,92710,92718],{"__ignoreMap":163},[167,92464,92465,92467,92469,92471,92473,92475],{"class":169,"line":170},[167,92466,174],{"class":173},[167,92468,178],{"class":177},[167,92470,1050],{"class":181},[167,92472,267],{"class":173},[167,92474,1055],{"class":201},[167,92476,185],{"class":173},[167,92478,92479,92481,92483],{"class":169,"line":188},[167,92480,608],{"class":191},[167,92482,3991],{"class":191},[167,92484,1905],{"class":173},[167,92486,92487,92489],{"class":169,"line":205},[167,92488,7176],{"class":181},[167,92490,763],{"class":173},[167,92492,92493,92495],{"class":169,"line":160},[167,92494,1937],{"class":191},[167,92496,1905],{"class":173},[167,92498,92499,92501,92503,92505,92507,92509,92511],{"class":169,"line":238},[167,92500,28735],{"class":173},[167,92502,6573],{"class":219},[167,92504,654],{"class":191},[167,92506,8493],{"class":219},[167,92508,659],{"class":191},[167,92510,6567],{"class":219},[167,92512,393],{"class":173},[167,92514,92515],{"class":169,"line":243},[167,92516,28752],{"class":173},[167,92518,92519,92521,92523,92525,92527,92529,92531,92533,92535],{"class":169,"line":261},[167,92520,8677],{"class":173},[167,92522,1835],{"class":219},[167,92524,1838],{"class":173},[167,92526,23487],{"class":201},[167,92528,28486],{"class":173},[167,92530,390],{"class":219},[167,92532,28491],{"class":173},[167,92534,28494],{"class":219},[167,92536,1856],{"class":173},[167,92538,92539,92541,92543,92545,92547,92549,92551,92553,92555],{"class":169,"line":273},[167,92540,8677],{"class":173},[167,92542,1853],{"class":219},[167,92544,1838],{"class":173},[167,92546,28507],{"class":201},[167,92548,28486],{"class":173},[167,92550,3392],{"class":219},[167,92552,28491],{"class":173},[167,92554,28516],{"class":219},[167,92556,1856],{"class":173},[167,92558,92559,92561,92563,92565,92567,92569,92571,92573,92575],{"class":169,"line":279},[167,92560,8677],{"class":173},[167,92562,8203],{"class":219},[167,92564,1838],{"class":173},[167,92566,28529],{"class":201},[167,92568,28486],{"class":173},[167,92570,390],{"class":219},[167,92572,28491],{"class":173},[167,92574,28538],{"class":219},[167,92576,1856],{"class":173},[167,92578,92579],{"class":169,"line":289},[167,92580,16114],{"class":173},[167,92582,92583],{"class":169,"line":294},[167,92584,24370],{"class":173},[167,92586,92587],{"class":169,"line":304},[167,92588,398],{"class":173},[167,92590,92591],{"class":169,"line":313},[167,92592,24148],{"class":173},[167,92594,92595,92597,92599],{"class":169,"line":161},[167,92596,282],{"class":173},[167,92598,178],{"class":177},[167,92600,185],{"class":173},[167,92602,92603],{"class":169,"line":335},[167,92604,209],{"emptyLinePlaceholder":208},[167,92606,92607,92609,92611],{"class":169,"line":341},[167,92608,174],{"class":173},[167,92610,299],{"class":177},[167,92612,185],{"class":173},[167,92614,92615,92617],{"class":169,"line":489},[167,92616,307],{"class":173},[167,92618,28572],{"class":177},[167,92620,92621,92623,92625],{"class":169,"line":495},[167,92622,3530],{"class":181},[167,92624,267],{"class":173},[167,92626,28581],{"class":201},[167,92628,92629,92631,92633],{"class":169,"line":501},[167,92630,3541],{"class":181},[167,92632,267],{"class":173},[167,92634,28590],{"class":201},[167,92636,92638,92640,92642],{"class":92637,"line":512},[169,213],[167,92639,28596],{"class":181},[167,92641,267],{"class":173},[167,92643,28601],{"class":201},[167,92645,92646,92648,92650],{"class":169,"line":781},[167,92647,28606],{"class":181},[167,92649,267],{"class":173},[167,92651,28611],{"class":201},[167,92653,92654],{"class":169,"line":786},[167,92655,492],{"class":173},[167,92657,92658,92660,92662,92664,92666],{"class":169,"line":2678},[167,92659,1257],{"class":173},[167,92661,3087],{"class":177},[167,92663,28624],{"class":173},[167,92665,3087],{"class":177},[167,92667,185],{"class":173},[167,92669,92670,92672,92674,92676,92678],{"class":169,"line":2692},[167,92671,1257],{"class":173},[167,92673,15],{"class":177},[167,92675,92404],{"class":173},[167,92677,15],{"class":177},[167,92679,185],{"class":173},[167,92681,92682,92684,92686,92688,92690],{"class":169,"line":3575},[167,92683,1257],{"class":173},[167,92685,15],{"class":177},[167,92687,92417],{"class":173},[167,92689,15],{"class":177},[167,92691,185],{"class":173},[167,92693,92694,92696,92698,92700,92702,92704,92706,92708],{"class":169,"line":5028},[167,92695,1257],{"class":173},[167,92697,507],{"class":177},[167,92699,1182],{"class":181},[167,92701,267],{"class":173},[167,92703,28667],{"class":201},[167,92705,92436],{"class":173},[167,92707,507],{"class":177},[167,92709,185],{"class":173},[167,92711,92712,92714,92716],{"class":169,"line":5037},[167,92713,504],{"class":173},[167,92715,3696],{"class":177},[167,92717,185],{"class":173},[167,92719,92720,92722,92724],{"class":169,"line":5046},[167,92721,282],{"class":173},[167,92723,299],{"class":177},[167,92725,185],{"class":173},[5367,92727,92728],{},[15,92729,92730,92731,92733,92734,92737,92738,92740],{},"Important: the ",[87,92732,27775],{}," array must include ",[3933,92735,92736],{},"everything"," that affects HTML. If ",[87,92739,28976],{}," can change, it should also be in dependencies (otherwise the DOM can show stale score values).",[3087,92742,92744,92745],{"id":92743},"_3-literal-block-with-v-pre","3) Literal block with ",[87,92746,27778],{},[154,92748,92751],{"className":156,"code":92749,"filename":3260,"highlights":92750,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nconst message = \"This should not render inside the v-pre block\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C\u002Fp>\n\n  \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n",[273],[87,92752,92753,92769,92782,92790,92794,92802,92814,92818,92833],{"__ignoreMap":163},[167,92754,92755,92757,92759,92761,92763,92765,92767],{"class":169,"line":170},[167,92756,174],{"class":173},[167,92758,178],{"class":177},[167,92760,182],{"class":181},[167,92762,1050],{"class":181},[167,92764,267],{"class":173},[167,92766,1055],{"class":201},[167,92768,185],{"class":173},[167,92770,92771,92773,92775,92777,92780],{"class":169,"line":188},[167,92772,216],{"class":191},[167,92774,29012],{"class":219},[167,92776,223],{"class":191},[167,92778,92779],{"class":201}," \"This should not render inside the v-pre block\"",[167,92781,24044],{"class":173},[167,92783,92784,92786,92788],{"class":169,"line":205},[167,92785,282],{"class":173},[167,92787,178],{"class":177},[167,92789,185],{"class":173},[167,92791,92792],{"class":169,"line":160},[167,92793,209],{"emptyLinePlaceholder":208},[167,92795,92796,92798,92800],{"class":169,"line":238},[167,92797,174],{"class":173},[167,92799,299],{"class":177},[167,92801,185],{"class":173},[167,92803,92804,92806,92808,92810,92812],{"class":169,"line":243},[167,92805,307],{"class":173},[167,92807,15],{"class":177},[167,92809,29048],{"class":173},[167,92811,15],{"class":177},[167,92813,185],{"class":173},[167,92815,92816],{"class":169,"line":261},[167,92817,209],{"emptyLinePlaceholder":208},[167,92819,92821,92823,92825,92827,92829,92831],{"class":92820,"line":273},[169,213],[167,92822,307],{"class":173},[167,92824,154],{"class":177},[167,92826,29066],{"class":181},[167,92828,29069],{"class":173},[167,92830,154],{"class":177},[167,92832,185],{"class":173},[167,92834,92835,92837,92839],{"class":169,"line":279},[167,92836,282],{"class":173},[167,92838,299],{"class":177},[167,92840,185],{"class":173},[154,92842,92845],{"className":156,"code":92843,"filename":3973,"highlights":92844,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      message: \"This should not render inside the v-pre block\",\n    };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C\u002Fp>\n  \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C\u002Fpre>\n\u003C\u002Ftemplate>\n",[313],[87,92846,92847,92861,92869,92875,92881,92890,92894,92898,92902,92910,92914,92922,92934,92949],{"__ignoreMap":163},[167,92848,92849,92851,92853,92855,92857,92859],{"class":169,"line":170},[167,92850,174],{"class":173},[167,92852,178],{"class":177},[167,92854,1050],{"class":181},[167,92856,267],{"class":173},[167,92858,1055],{"class":201},[167,92860,185],{"class":173},[167,92862,92863,92865,92867],{"class":169,"line":188},[167,92864,608],{"class":191},[167,92866,3991],{"class":191},[167,92868,1905],{"class":173},[167,92870,92871,92873],{"class":169,"line":205},[167,92872,7176],{"class":181},[167,92874,763],{"class":173},[167,92876,92877,92879],{"class":169,"line":160},[167,92878,1937],{"class":191},[167,92880,1905],{"class":173},[167,92882,92883,92885,92888],{"class":169,"line":238},[167,92884,29126],{"class":173},[167,92886,92887],{"class":201},"\"This should not render inside the v-pre block\"",[167,92889,393],{"class":173},[167,92891,92892],{"class":169,"line":243},[167,92893,24370],{"class":173},[167,92895,92896],{"class":169,"line":261},[167,92897,398],{"class":173},[167,92899,92900],{"class":169,"line":273},[167,92901,24148],{"class":173},[167,92903,92904,92906,92908],{"class":169,"line":279},[167,92905,282],{"class":173},[167,92907,178],{"class":177},[167,92909,185],{"class":173},[167,92911,92912],{"class":169,"line":289},[167,92913,209],{"emptyLinePlaceholder":208},[167,92915,92916,92918,92920],{"class":169,"line":294},[167,92917,174],{"class":173},[167,92919,299],{"class":177},[167,92921,185],{"class":173},[167,92923,92924,92926,92928,92930,92932],{"class":169,"line":304},[167,92925,307],{"class":173},[167,92927,15],{"class":177},[167,92929,29048],{"class":173},[167,92931,15],{"class":177},[167,92933,185],{"class":173},[167,92935,92937,92939,92941,92943,92945,92947],{"class":92936,"line":313},[169,213],[167,92938,307],{"class":173},[167,92940,154],{"class":177},[167,92942,29066],{"class":181},[167,92944,29069],{"class":173},[167,92946,154],{"class":177},[167,92948,185],{"class":173},[167,92950,92951,92953,92955],{"class":169,"line":161},[167,92952,282],{"class":173},[167,92954,299],{"class":177},[167,92956,185],{"class":173},[3087,92958,92960],{"id":92959},"_4-complete-example","4) Complete example",[15,92962,92963,92964,92966,92967,92969,92970,29214],{},"A list component with a static header (",[87,92965,27772],{},"), memoized cards (",[87,92968,27775],{},"), and a literal snippet (",[87,92971,27778],{},[154,92973,92975],{"className":156,"code":92974,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = { id: number; title: string; done: boolean; owner: string };\n\nconst selectedOwner = ref\u003C\"all\" | string>(\"all\");\nconst tasks = ref\u003CTask[]>([\n  { id: 1, title: \"Set up CI\", done: true, owner: \"Ana\" },\n  { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n  { id: 3, title: \"Update docs\", done: false, owner: \"Ana\" },\n]);\n\nconst owners = computed(() => [\"all\", ...new Set(tasks.value.map((t) => t.owner))]);\nconst visibleTasks = computed(() =>\n  selectedOwner.value === \"all\"\n    ? tasks.value\n    : tasks.value.filter((t) => t.owner === selectedOwner.value)\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cheader v-once>\n    \u003Ch2>Sprint task board\u003C\u002Fh2>\n    \u003Cp>Static institutional content\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Clabel>\n    Filter by owner\n    \u003Cselect v-model=\"selectedOwner\">\n      \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Flabel>\n\n  \u003Csection\n    v-for=\"task in visibleTasks\"\n    :key=\"task.id\"\n    v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n    class=\"task-card\"\n  >\n    \u003Ch3>{{ task.title }}\u003C\u002Fh3>\n    \u003Cp>Owner: {{ task.owner }}\u003C\u002Fp>\n    \u003Cp>Status: {{ task.done ? \"Done\" : \"Pending\" }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Caside>\n    \u003Ch4>Snippet for docs\u003C\u002Fh4>\n    \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C\u002Fcode>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,92976,92977,92993,93005,93009,93051,93055,93079,93095,93116,93136,93157,93161,93165,93203,93217,93225,93231,93253,93257,93265,93269,93277,93287,93300,93313,93321,93325,93333,93338,93352,93382,93390,93398,93402,93408,93416,93424,93432,93440,93444,93456,93468,93481,93489,93493,93501,93514,93528,93536],{"__ignoreMap":163},[167,92978,92979,92981,92983,92985,92987,92989,92991],{"class":169,"line":170},[167,92980,174],{"class":173},[167,92982,178],{"class":177},[167,92984,182],{"class":181},[167,92986,1050],{"class":181},[167,92988,267],{"class":173},[167,92990,1055],{"class":201},[167,92992,185],{"class":173},[167,92994,92995,92997,92999,93001,93003],{"class":169,"line":188},[167,92996,192],{"class":191},[167,92998,1805],{"class":173},[167,93000,198],{"class":191},[167,93002,24041],{"class":201},[167,93004,24044],{"class":173},[167,93006,93007],{"class":169,"line":205},[167,93008,209],{"emptyLinePlaceholder":208},[167,93010,93011,93013,93015,93017,93019,93021,93023,93025,93027,93029,93031,93033,93035,93037,93039,93041,93043,93045,93047,93049],{"class":169,"line":160},[167,93012,569],{"class":191},[167,93014,11605],{"class":181},[167,93016,223],{"class":191},[167,93018,577],{"class":173},[167,93020,580],{"class":254},[167,93022,583],{"class":191},[167,93024,8493],{"class":219},[167,93026,589],{"class":173},[167,93028,29272],{"class":254},[167,93030,583],{"class":191},[167,93032,586],{"class":219},[167,93034,589],{"class":173},[167,93036,29281],{"class":254},[167,93038,583],{"class":191},[167,93040,28416],{"class":219},[167,93042,589],{"class":173},[167,93044,29290],{"class":254},[167,93046,583],{"class":191},[167,93048,586],{"class":219},[167,93050,25582],{"class":173},[167,93052,93053],{"class":169,"line":238},[167,93054,209],{"emptyLinePlaceholder":208},[167,93056,93057,93059,93061,93063,93065,93067,93069,93071,93073,93075,93077],{"class":169,"line":243},[167,93058,216],{"class":191},[167,93060,29307],{"class":219},[167,93062,223],{"class":191},[167,93064,226],{"class":181},[167,93066,174],{"class":173},[167,93068,29316],{"class":201},[167,93070,659],{"class":191},[167,93072,586],{"class":219},[167,93074,6570],{"class":173},[167,93076,29316],{"class":201},[167,93078,24169],{"class":173},[167,93080,93081,93083,93085,93087,93089,93091,93093],{"class":169,"line":261},[167,93082,216],{"class":191},[167,93084,3368],{"class":219},[167,93086,223],{"class":191},[167,93088,226],{"class":181},[167,93090,174],{"class":173},[167,93092,11659],{"class":181},[167,93094,28473],{"class":173},[167,93096,93097,93099,93101,93103,93106,93108,93110,93112,93114],{"class":169,"line":273},[167,93098,1832],{"class":173},[167,93100,1835],{"class":219},[167,93102,3383],{"class":173},[167,93104,93105],{"class":201},"\"Set up CI\"",[167,93107,8164],{"class":173},[167,93109,390],{"class":219},[167,93111,8169],{"class":173},[167,93113,23487],{"class":201},[167,93115,1856],{"class":173},[167,93117,93118,93120,93122,93124,93126,93128,93130,93132,93134],{"class":169,"line":279},[167,93119,1832],{"class":173},[167,93121,1853],{"class":219},[167,93123,3383],{"class":173},[167,93125,29374],{"class":201},[167,93127,8164],{"class":173},[167,93129,3392],{"class":219},[167,93131,8169],{"class":173},[167,93133,28507],{"class":201},[167,93135,1856],{"class":173},[167,93137,93138,93140,93142,93144,93147,93149,93151,93153,93155],{"class":169,"line":289},[167,93139,1832],{"class":173},[167,93141,8203],{"class":219},[167,93143,3383],{"class":173},[167,93145,93146],{"class":201},"\"Update docs\"",[167,93148,8164],{"class":173},[167,93150,3392],{"class":219},[167,93152,8169],{"class":173},[167,93154,23487],{"class":201},[167,93156,1856],{"class":173},[167,93158,93159],{"class":169,"line":294},[167,93160,28545],{"class":173},[167,93162,93163],{"class":169,"line":304},[167,93164,209],{"emptyLinePlaceholder":208},[167,93166,93167,93169,93171,93173,93175,93177,93179,93181,93183,93185,93187,93189,93191,93193,93195,93197,93199,93201],{"class":169,"line":313},[167,93168,216],{"class":191},[167,93170,29420],{"class":219},[167,93172,223],{"class":191},[167,93174,1898],{"class":181},[167,93176,1493],{"class":173},[167,93178,639],{"class":191},[167,93180,1103],{"class":173},[167,93182,29316],{"class":201},[167,93184,1025],{"class":173},[167,93186,29437],{"class":191},[167,93188,22324],{"class":181},[167,93190,29442],{"class":173},[167,93192,9844],{"class":181},[167,93194,1918],{"class":173},[167,93196,29449],{"class":254},[167,93198,693],{"class":173},[167,93200,639],{"class":191},[167,93202,29456],{"class":173},[167,93204,93205,93207,93209,93211,93213,93215],{"class":169,"line":161},[167,93206,216],{"class":191},[167,93208,8233],{"class":219},[167,93210,223],{"class":191},[167,93212,1898],{"class":181},[167,93214,1493],{"class":173},[167,93216,9717],{"class":191},[167,93218,93219,93221,93223],{"class":169,"line":335},[167,93220,29475],{"class":173},[167,93222,2550],{"class":191},[167,93224,29480],{"class":201},[167,93226,93227,93229],{"class":169,"line":341},[167,93228,29485],{"class":191},[167,93230,11892],{"class":173},[167,93232,93233,93235,93237,93239,93241,93243,93245,93247,93249,93251],{"class":169,"line":489},[167,93234,29492],{"class":191},[167,93236,3451],{"class":173},[167,93238,8252],{"class":181},[167,93240,1918],{"class":173},[167,93242,29449],{"class":254},[167,93244,693],{"class":173},[167,93246,639],{"class":191},[167,93248,29507],{"class":173},[167,93250,2550],{"class":191},[167,93252,29512],{"class":173},[167,93254,93255],{"class":169,"line":495},[167,93256,24169],{"class":173},[167,93258,93259,93261,93263],{"class":169,"line":501},[167,93260,282],{"class":173},[167,93262,178],{"class":177},[167,93264,185],{"class":173},[167,93266,93267],{"class":169,"line":512},[167,93268,209],{"emptyLinePlaceholder":208},[167,93270,93271,93273,93275],{"class":169,"line":781},[167,93272,174],{"class":173},[167,93274,299],{"class":177},[167,93276,185],{"class":173},[167,93278,93279,93281,93283,93285],{"class":169,"line":786},[167,93280,307],{"class":173},[167,93282,1260],{"class":177},[167,93284,28178],{"class":181},[167,93286,185],{"class":173},[167,93288,93289,93291,93293,93296,93298],{"class":169,"line":2678},[167,93290,1257],{"class":173},[167,93292,22],{"class":177},[167,93294,93295],{"class":173},">Sprint task board\u003C\u002F",[167,93297,22],{"class":177},[167,93299,185],{"class":173},[167,93301,93302,93304,93306,93309,93311],{"class":169,"line":2692},[167,93303,1257],{"class":173},[167,93305,15],{"class":177},[167,93307,93308],{"class":173},">Static institutional content\u003C\u002F",[167,93310,15],{"class":177},[167,93312,185],{"class":173},[167,93314,93315,93317,93319],{"class":169,"line":3575},[167,93316,504],{"class":173},[167,93318,1260],{"class":177},[167,93320,185],{"class":173},[167,93322,93323],{"class":169,"line":5028},[167,93324,209],{"emptyLinePlaceholder":208},[167,93326,93327,93329,93331],{"class":169,"line":5037},[167,93328,307],{"class":173},[167,93330,9875],{"class":177},[167,93332,185],{"class":173},[167,93334,93335],{"class":169,"line":5046},[167,93336,93337],{"class":173},"    Filter by owner\n",[167,93339,93340,93342,93344,93346,93348,93350],{"class":169,"line":6756},[167,93341,1257],{"class":173},[167,93343,1098],{"class":177},[167,93345,2653],{"class":181},[167,93347,267],{"class":173},[167,93349,29610],{"class":201},[167,93351,185],{"class":173},[167,93353,93354,93356,93358,93360,93362,93364,93366,93368,93370,93372,93374,93376,93378,93380],{"class":169,"line":6778},[167,93355,1268],{"class":173},[167,93357,29619],{"class":177},[167,93359,18706],{"class":181},[167,93361,267],{"class":173},[167,93363,29626],{"class":201},[167,93365,10307],{"class":181},[167,93367,267],{"class":173},[167,93369,29633],{"class":201},[167,93371,29636],{"class":181},[167,93373,267],{"class":173},[167,93375,29633],{"class":201},[167,93377,29643],{"class":173},[167,93379,29619],{"class":177},[167,93381,185],{"class":173},[167,93383,93384,93386,93388],{"class":169,"line":6783},[167,93385,1292],{"class":173},[167,93387,1098],{"class":177},[167,93389,185],{"class":173},[167,93391,93392,93394,93396],{"class":169,"line":6788},[167,93393,504],{"class":173},[167,93395,9875],{"class":177},[167,93397,185],{"class":173},[167,93399,93400],{"class":169,"line":6793},[167,93401,209],{"emptyLinePlaceholder":208},[167,93403,93404,93406],{"class":169,"line":6809},[167,93405,307],{"class":173},[167,93407,29674],{"class":177},[167,93409,93410,93412,93414],{"class":169,"line":6824},[167,93411,3530],{"class":181},[167,93413,267],{"class":173},[167,93415,12482],{"class":201},[167,93417,93418,93420,93422],{"class":169,"line":6829},[167,93419,3541],{"class":181},[167,93421,267],{"class":173},[167,93423,3546],{"class":201},[167,93425,93426,93428,93430],{"class":169,"line":6836},[167,93427,28596],{"class":181},[167,93429,267],{"class":173},[167,93431,29699],{"class":201},[167,93433,93434,93436,93438],{"class":169,"line":6845},[167,93435,28606],{"class":181},[167,93437,267],{"class":173},[167,93439,29708],{"class":201},[167,93441,93442],{"class":169,"line":6854},[167,93443,492],{"class":173},[167,93445,93446,93448,93450,93452,93454],{"class":169,"line":6861},[167,93447,1257],{"class":173},[167,93449,3087],{"class":177},[167,93451,4979],{"class":173},[167,93453,3087],{"class":177},[167,93455,185],{"class":173},[167,93457,93458,93460,93462,93464,93466],{"class":169,"line":6879},[167,93459,1257],{"class":173},[167,93461,15],{"class":177},[167,93463,29733],{"class":173},[167,93465,15],{"class":177},[167,93467,185],{"class":173},[167,93469,93470,93472,93474,93477,93479],{"class":169,"line":6884},[167,93471,1257],{"class":173},[167,93473,15],{"class":177},[167,93475,93476],{"class":173},">Status: {{ task.done ? \"Done\" : \"Pending\" }}\u003C\u002F",[167,93478,15],{"class":177},[167,93480,185],{"class":173},[167,93482,93483,93485,93487],{"class":169,"line":6889},[167,93484,504],{"class":173},[167,93486,10117],{"class":177},[167,93488,185],{"class":173},[167,93490,93491],{"class":169,"line":6898},[167,93492,209],{"emptyLinePlaceholder":208},[167,93494,93495,93497,93499],{"class":169,"line":6903},[167,93496,307],{"class":173},[167,93498,27354],{"class":177},[167,93500,185],{"class":173},[167,93502,93503,93505,93507,93510,93512],{"class":169,"line":6912},[167,93504,1257],{"class":173},[167,93506,29777],{"class":177},[167,93508,93509],{"class":173},">Snippet for docs\u003C\u002F",[167,93511,29777],{"class":177},[167,93513,185],{"class":173},[167,93515,93516,93518,93520,93522,93524,93526],{"class":169,"line":6928},[167,93517,1257],{"class":173},[167,93519,87],{"class":177},[167,93521,29066],{"class":181},[167,93523,29795],{"class":173},[167,93525,87],{"class":177},[167,93527,185],{"class":173},[167,93529,93530,93532,93534],{"class":169,"line":6949},[167,93531,504],{"class":173},[167,93533,27354],{"class":177},[167,93535,185],{"class":173},[167,93537,93538,93540,93542],{"class":169,"line":6954},[167,93539,282],{"class":173},[167,93541,299],{"class":177},[167,93543,185],{"class":173},[154,93545,93547],{"className":156,"code":93546,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  data() {\n    return {\n      selectedOwner: \"all\",\n      tasks: [\n        { id: 1, title: \"Set up CI\", done: true, owner: \"Ana\" },\n        { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n        { id: 3, title: \"Update docs\", done: false, owner: \"Ana\" },\n      ],\n    };\n  },\n  computed: {\n    owners() {\n      return [\"all\", ...new Set(this.tasks.map((t) => t.owner))];\n    },\n    visibleTasks() {\n      return this.selectedOwner === \"all\"\n        ? this.tasks\n        : this.tasks.filter((t) => t.owner === this.selectedOwner);\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cheader v-once>\n    \u003Ch2>Sprint task board\u003C\u002Fh2>\n    \u003Cp>Static institutional content\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Clabel>\n    Filter by owner\n    \u003Cselect v-model=\"selectedOwner\">\n      \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C\u002Foption>\n    \u003C\u002Fselect>\n  \u003C\u002Flabel>\n\n  \u003Csection\n    v-for=\"task in visibleTasks\"\n    :key=\"task.id\"\n    v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n    class=\"task-card\"\n  >\n    \u003Ch3>{{ task.title }}\u003C\u002Fh3>\n    \u003Cp>Owner: {{ task.owner }}\u003C\u002Fp>\n    \u003Cp>Status: {{ task.done ? \"Done\" : \"Pending\" }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\n  \u003Caside>\n    \u003Ch4>Snippet for docs\u003C\u002Fh4>\n    \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C\u002Fcode>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n",[87,93548,93549,93563,93571,93577,93583,93591,93595,93615,93635,93655,93659,93663,93667,93671,93677,93709,93713,93719,93731,93739,93765,93769,93773,93777,93785,93789,93797,93807,93819,93831,93839,93843,93851,93855,93869,93899,93907,93915,93919,93925,93933,93941,93949,93957,93961,93973,93985,93997,94005,94009,94017,94029,94043,94051],{"__ignoreMap":163},[167,93550,93551,93553,93555,93557,93559,93561],{"class":169,"line":170},[167,93552,174],{"class":173},[167,93554,178],{"class":177},[167,93556,1050],{"class":181},[167,93558,267],{"class":173},[167,93560,1055],{"class":201},[167,93562,185],{"class":173},[167,93564,93565,93567,93569],{"class":169,"line":188},[167,93566,608],{"class":191},[167,93568,3991],{"class":191},[167,93570,1905],{"class":173},[167,93572,93573,93575],{"class":169,"line":205},[167,93574,7176],{"class":181},[167,93576,763],{"class":173},[167,93578,93579,93581],{"class":169,"line":160},[167,93580,1937],{"class":191},[167,93582,1905],{"class":173},[167,93584,93585,93587,93589],{"class":169,"line":238},[167,93586,29859],{"class":173},[167,93588,29316],{"class":201},[167,93590,393],{"class":173},[167,93592,93593],{"class":169,"line":243},[167,93594,8672],{"class":173},[167,93596,93597,93599,93601,93603,93605,93607,93609,93611,93613],{"class":169,"line":261},[167,93598,8677],{"class":173},[167,93600,1835],{"class":219},[167,93602,3383],{"class":173},[167,93604,93105],{"class":201},[167,93606,8164],{"class":173},[167,93608,390],{"class":219},[167,93610,8169],{"class":173},[167,93612,23487],{"class":201},[167,93614,1856],{"class":173},[167,93616,93617,93619,93621,93623,93625,93627,93629,93631,93633],{"class":169,"line":273},[167,93618,8677],{"class":173},[167,93620,1853],{"class":219},[167,93622,3383],{"class":173},[167,93624,29374],{"class":201},[167,93626,8164],{"class":173},[167,93628,3392],{"class":219},[167,93630,8169],{"class":173},[167,93632,28507],{"class":201},[167,93634,1856],{"class":173},[167,93636,93637,93639,93641,93643,93645,93647,93649,93651,93653],{"class":169,"line":279},[167,93638,8677],{"class":173},[167,93640,8203],{"class":219},[167,93642,3383],{"class":173},[167,93644,93146],{"class":201},[167,93646,8164],{"class":173},[167,93648,3392],{"class":219},[167,93650,8169],{"class":173},[167,93652,23487],{"class":201},[167,93654,1856],{"class":173},[167,93656,93657],{"class":169,"line":289},[167,93658,16114],{"class":173},[167,93660,93661],{"class":169,"line":294},[167,93662,24370],{"class":173},[167,93664,93665],{"class":169,"line":304},[167,93666,398],{"class":173},[167,93668,93669],{"class":169,"line":313},[167,93670,8755],{"class":173},[167,93672,93673,93675],{"class":169,"line":161},[167,93674,29948],{"class":181},[167,93676,763],{"class":173},[167,93678,93679,93681,93683,93685,93687,93689,93691,93693,93695,93697,93699,93701,93703,93705,93707],{"class":169,"line":335},[167,93680,8767],{"class":191},[167,93682,1103],{"class":173},[167,93684,29316],{"class":201},[167,93686,1025],{"class":173},[167,93688,29437],{"class":191},[167,93690,22324],{"class":181},[167,93692,229],{"class":173},[167,93694,4927],{"class":219},[167,93696,8772],{"class":173},[167,93698,9844],{"class":181},[167,93700,1918],{"class":173},[167,93702,29449],{"class":254},[167,93704,693],{"class":173},[167,93706,639],{"class":191},[167,93708,29983],{"class":173},[167,93710,93711],{"class":169,"line":341},[167,93712,755],{"class":173},[167,93714,93715,93717],{"class":169,"line":489},[167,93716,8760],{"class":181},[167,93718,763],{"class":173},[167,93720,93721,93723,93725,93727,93729],{"class":169,"line":495},[167,93722,8767],{"class":191},[167,93724,7351],{"class":219},[167,93726,30002],{"class":173},[167,93728,2550],{"class":191},[167,93730,29480],{"class":201},[167,93732,93733,93735,93737],{"class":169,"line":501},[167,93734,30011],{"class":191},[167,93736,7351],{"class":219},[167,93738,12732],{"class":173},[167,93740,93741,93743,93745,93747,93749,93751,93753,93755,93757,93759,93761,93763],{"class":169,"line":512},[167,93742,30020],{"class":191},[167,93744,7351],{"class":219},[167,93746,8772],{"class":173},[167,93748,8252],{"class":181},[167,93750,1918],{"class":173},[167,93752,29449],{"class":254},[167,93754,693],{"class":173},[167,93756,639],{"class":191},[167,93758,29507],{"class":173},[167,93760,2550],{"class":191},[167,93762,7351],{"class":219},[167,93764,30043],{"class":173},[167,93766,93767],{"class":169,"line":781},[167,93768,755],{"class":173},[167,93770,93771],{"class":169,"line":786},[167,93772,398],{"class":173},[167,93774,93775],{"class":169,"line":2678},[167,93776,24148],{"class":173},[167,93778,93779,93781,93783],{"class":169,"line":2692},[167,93780,282],{"class":173},[167,93782,178],{"class":177},[167,93784,185],{"class":173},[167,93786,93787],{"class":169,"line":3575},[167,93788,209],{"emptyLinePlaceholder":208},[167,93790,93791,93793,93795],{"class":169,"line":5028},[167,93792,174],{"class":173},[167,93794,299],{"class":177},[167,93796,185],{"class":173},[167,93798,93799,93801,93803,93805],{"class":169,"line":5037},[167,93800,307],{"class":173},[167,93802,1260],{"class":177},[167,93804,28178],{"class":181},[167,93806,185],{"class":173},[167,93808,93809,93811,93813,93815,93817],{"class":169,"line":5046},[167,93810,1257],{"class":173},[167,93812,22],{"class":177},[167,93814,93295],{"class":173},[167,93816,22],{"class":177},[167,93818,185],{"class":173},[167,93820,93821,93823,93825,93827,93829],{"class":169,"line":6756},[167,93822,1257],{"class":173},[167,93824,15],{"class":177},[167,93826,93308],{"class":173},[167,93828,15],{"class":177},[167,93830,185],{"class":173},[167,93832,93833,93835,93837],{"class":169,"line":6778},[167,93834,504],{"class":173},[167,93836,1260],{"class":177},[167,93838,185],{"class":173},[167,93840,93841],{"class":169,"line":6783},[167,93842,209],{"emptyLinePlaceholder":208},[167,93844,93845,93847,93849],{"class":169,"line":6788},[167,93846,307],{"class":173},[167,93848,9875],{"class":177},[167,93850,185],{"class":173},[167,93852,93853],{"class":169,"line":6793},[167,93854,93337],{"class":173},[167,93856,93857,93859,93861,93863,93865,93867],{"class":169,"line":6809},[167,93858,1257],{"class":173},[167,93860,1098],{"class":177},[167,93862,2653],{"class":181},[167,93864,267],{"class":173},[167,93866,29610],{"class":201},[167,93868,185],{"class":173},[167,93870,93871,93873,93875,93877,93879,93881,93883,93885,93887,93889,93891,93893,93895,93897],{"class":169,"line":6824},[167,93872,1268],{"class":173},[167,93874,29619],{"class":177},[167,93876,18706],{"class":181},[167,93878,267],{"class":173},[167,93880,29626],{"class":201},[167,93882,10307],{"class":181},[167,93884,267],{"class":173},[167,93886,29633],{"class":201},[167,93888,29636],{"class":181},[167,93890,267],{"class":173},[167,93892,29633],{"class":201},[167,93894,29643],{"class":173},[167,93896,29619],{"class":177},[167,93898,185],{"class":173},[167,93900,93901,93903,93905],{"class":169,"line":6829},[167,93902,1292],{"class":173},[167,93904,1098],{"class":177},[167,93906,185],{"class":173},[167,93908,93909,93911,93913],{"class":169,"line":6836},[167,93910,504],{"class":173},[167,93912,9875],{"class":177},[167,93914,185],{"class":173},[167,93916,93917],{"class":169,"line":6845},[167,93918,209],{"emptyLinePlaceholder":208},[167,93920,93921,93923],{"class":169,"line":6854},[167,93922,307],{"class":173},[167,93924,29674],{"class":177},[167,93926,93927,93929,93931],{"class":169,"line":6861},[167,93928,3530],{"class":181},[167,93930,267],{"class":173},[167,93932,12482],{"class":201},[167,93934,93935,93937,93939],{"class":169,"line":6879},[167,93936,3541],{"class":181},[167,93938,267],{"class":173},[167,93940,3546],{"class":201},[167,93942,93943,93945,93947],{"class":169,"line":6884},[167,93944,28596],{"class":181},[167,93946,267],{"class":173},[167,93948,29699],{"class":201},[167,93950,93951,93953,93955],{"class":169,"line":6889},[167,93952,28606],{"class":181},[167,93954,267],{"class":173},[167,93956,29708],{"class":201},[167,93958,93959],{"class":169,"line":6898},[167,93960,492],{"class":173},[167,93962,93963,93965,93967,93969,93971],{"class":169,"line":6903},[167,93964,1257],{"class":173},[167,93966,3087],{"class":177},[167,93968,4979],{"class":173},[167,93970,3087],{"class":177},[167,93972,185],{"class":173},[167,93974,93975,93977,93979,93981,93983],{"class":169,"line":6912},[167,93976,1257],{"class":173},[167,93978,15],{"class":177},[167,93980,29733],{"class":173},[167,93982,15],{"class":177},[167,93984,185],{"class":173},[167,93986,93987,93989,93991,93993,93995],{"class":169,"line":6928},[167,93988,1257],{"class":173},[167,93990,15],{"class":177},[167,93992,93476],{"class":173},[167,93994,15],{"class":177},[167,93996,185],{"class":173},[167,93998,93999,94001,94003],{"class":169,"line":6949},[167,94000,504],{"class":173},[167,94002,10117],{"class":177},[167,94004,185],{"class":173},[167,94006,94007],{"class":169,"line":6954},[167,94008,209],{"emptyLinePlaceholder":208},[167,94010,94011,94013,94015],{"class":169,"line":6975},[167,94012,307],{"class":173},[167,94014,27354],{"class":177},[167,94016,185],{"class":173},[167,94018,94019,94021,94023,94025,94027],{"class":169,"line":6989},[167,94020,1257],{"class":173},[167,94022,29777],{"class":177},[167,94024,93509],{"class":173},[167,94026,29777],{"class":177},[167,94028,185],{"class":173},[167,94030,94031,94033,94035,94037,94039,94041],{"class":169,"line":7003},[167,94032,1257],{"class":173},[167,94034,87],{"class":177},[167,94036,29066],{"class":181},[167,94038,29795],{"class":173},[167,94040,87],{"class":177},[167,94042,185],{"class":173},[167,94044,94045,94047,94049],{"class":169,"line":7017},[167,94046,504],{"class":173},[167,94048,27354],{"class":177},[167,94050,185],{"class":173},[167,94052,94053,94055,94057],{"class":169,"line":7026},[167,94054,282],{"class":173},[167,94056,299],{"class":177},[167,94058,185],{"class":173},[22,94060,60191],{"id":60190},[15,94062,94063,1025,94065,57860,94067,94069],{},[87,94064,27772],{},[87,94066,27775],{},[87,94068,27778],{}," are precision tools:",[33,94071,94072,94077,94082],{},[36,94073,94074,94076],{},[87,94075,27772],{}," to freeze immutable content.",[36,94078,94079,94081],{},[87,94080,27775],{}," to skip renders when key dependencies do not change.",[36,94083,94084,94086],{},[87,94085,27778],{}," to display literal template syntax without compilation.",[15,94088,94089],{},"The key is not using them everywhere, but applying them where render cost is real and expected behavior is explicit.",[924,94091,30371],{},{"title":163,"searchDepth":188,"depth":188,"links":94093},[94094,94095,94100,94101,94102,94103,94112,94121],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681,"children":94096},[94097,94098,94099],{"id":27772,"depth":205,"text":27772},{"id":27775,"depth":205,"text":27775},{"id":27778,"depth":205,"text":27778},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":91740,"depth":188,"text":91741},{"id":57819,"depth":188,"text":57820,"children":94104},[94105,94107,94109,94111],{"id":91783,"depth":205,"text":94106},"1) Applying v-once to data that can change",{"id":91805,"depth":205,"text":94108},"2) Defining v-memo dependencies incorrectly",{"id":91820,"depth":205,"text":94110},"3) Expecting v-pre to process directives or interpolations",{"id":91840,"depth":205,"text":91841},{"id":57925,"depth":188,"text":57926,"children":94113},[94114,94116,94118,94120],{"id":91854,"depth":205,"text":94115},"1) Static block with v-once",{"id":92129,"depth":205,"text":94117},"2) Heavy segment with v-memo",{"id":92743,"depth":205,"text":94119},"3) Literal block with v-pre",{"id":92959,"depth":205,"text":92960},{"id":60190,"depth":188,"text":60191},"Temporary cover image for the article about v-once, v-memo, and v-pre in Vue","Learn when to use v-once, v-memo, and v-pre in Vue 3 to optimize rendering, avoid unnecessary work, and keep components clear.",{"updatedAt":30407,"coverCaption":65655,"author":946,"keywords":94125},[3258,27772,27775,27778,94126],"render optimization","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en",[94129],{"headline":94130,"author":94131,"datePublished":30407,"@type":961},"Vue Directives: v-once, v-memo, and v-pre for efficient rendering",{"name":946,"@type":959},{"title":91573,"description":94123},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en",[94135,94136,94138,94139,94140],{"tag":60263,"color":26467},{"tag":94137,"color":3274},"Performance",{"tag":69637,"color":9170},{"tag":60269,"color":3270},{"tag":60271,"color":7731},"Hj5fbf6Q8rLBJrcGxfKq2EkiWbvWu2XgRjCqZs1Cjq4",{"id":27763,"title":27764,"body":94143,"cover":30402,"coverAlt":30403,"date":30404,"description":30405,"draft":940,"extension":941,"lab":942,"locale":943,"meta":96579,"navigation":208,"path":30410,"schemaOrg":96581,"seo":96584,"series":26460,"seriesDescription":26461,"seriesOrder":279,"seriesTitle":26462,"slug":942,"stem":30416,"tags":96585,"__hash__":30423},{"type":8,"value":94144,"toc":96555},[94145,94153,94163,94165,94167,94169,94183,94185,94187,94191,94193,94195,94199,94205,94211,94215,94221,94223,94225,94227,94243,94245,94255,94257,94259,94273,94275,94277,94291,94293,94307,94309,94313,94317,94323,94327,94329,94333,94337,94341,94347,94349,94351,94355,94357,94361,94491,94619,94627,94631,94951,95219,95229,95233,95325,95439,95441,95449,96013,96527,96529,96537,96551,96553],[11,94146,26483,94147,11227,94149,11227,94151],{"id":27769},[87,94148,27772],{},[87,94150,27775],{},[87,94152,27778],{},[15,94154,94155,1025,94157,1028,94159,27787,94161,27791],{},[87,94156,27772],{},[87,94158,27775],{},[87,94160,27778],{},[9295,94162,27790],{},[22,94164,26503],{"id":26502},[15,94166,27796],{},[15,94168,27799],{},[33,94170,94171,94175,94179],{},[36,94172,27804,94173,4270],{},[87,94174,27772],{},[36,94176,27809,94177,4270],{},[87,94178,27775],{},[36,94180,27814,94181,4270],{},[87,94182,27778],{},[15,94184,27819],{},[22,94186,6257],{"id":6256},[3087,94188,94189],{"id":27772},[87,94190,27772],{},[15,94192,27828],{},[15,94194,27831],{},[3087,94196,94197],{"id":27775},[87,94198,27775],{},[15,94200,27838,94201,27842,94203,27846],{},[3933,94202,27841],{},[9295,94204,27845],{},[15,94206,27849,94207,27852,94209,1679],{},[87,94208,27775],{},[3933,94210,27855],{},[3087,94212,94213],{"id":27778},[87,94214,27778],{},[15,94216,27862,94217,27866,94219,27869],{},[3933,94218,27865],{},[87,94220,26498],{},[15,94222,27872],{},[22,94224,6322],{"id":6321},[15,94226,27877],{},[33,94228,94229,94233,94239],{},[36,94230,94231,27884],{},[87,94232,27772],{},[36,94234,94235,27889,94237,1679],{},[87,94236,27775],{},[3933,94238,27892],{},[36,94240,94241,27897],{},[87,94242,27778],{},[15,94244,27900],{},[33,94246,94247,94251,94253],{},[36,94248,27905,94249,27908],{},[87,94250,580],{},[36,94252,27911],{},[36,94254,27914],{},[22,94256,6349],{"id":6348},[15,94258,27919],{},[33,94260,94261,94265,94269],{},[36,94262,2095,94263,27926],{},[87,94264,27772],{},[36,94266,2095,94267,27931],{},[87,94268,27775],{},[36,94270,2095,94271,27936],{},[87,94272,27778],{},[15,94274,27939],{},[22,94276,11371],{"id":11370},[33,94278,94279,94283,94287],{},[36,94280,94281,27948],{},[87,94282,27772],{},[36,94284,94285,27953],{},[87,94286,27775],{},[36,94288,94289,27958],{},[87,94290,27778],{},[15,94292,27961],{},[33,94294,94295,94299,94303],{},[36,94296,27966,94297,1679],{},[87,94298,27772],{},[36,94300,27971,94301,1679],{},[87,94302,27775],{},[36,94304,27976,94305,1679],{},[87,94306,27778],{},[22,94308,3085],{"id":3084},[3087,94310,27984,94311,27987],{"id":27983},[87,94312,27772],{},[15,94314,27990,94315,27993],{},[87,94316,27772],{},[15,94318,94319,27999,94321,28002],{},[3933,94320,27998],{},[87,94322,27772],{},[3087,94324,28006,94325],{"id":28005},[87,94326,27775],{},[15,94328,28011],{},[15,94330,94331,28016],{},[3933,94332,27998],{},[3087,94334,28020,94335,28023],{"id":28019},[87,94336,27778],{},[15,94338,3810,94339,28028],{},[87,94340,27778],{},[15,94342,94343,22922,94345,28035],{},[3933,94344,27998],{},[87,94346,27778],{},[3087,94348,28039],{"id":28038},[15,94350,28042],{},[15,94352,94353,28047],{},[3933,94354,27998],{},[22,94356,7997],{"id":7996},[3087,94358,28053,94359],{"id":28052},[87,94360,27772],{},[154,94362,94364],{"className":156,"code":28058,"filename":3260,"highlights":94363,"language":162,"meta":163,"style":163},[294],[87,94365,94366,94382,94394,94398,94414,94426,94434,94438,94446,94464,94468,94483],{"__ignoreMap":163},[167,94367,94368,94370,94372,94374,94376,94378,94380],{"class":169,"line":170},[167,94369,174],{"class":173},[167,94371,178],{"class":177},[167,94373,182],{"class":181},[167,94375,1050],{"class":181},[167,94377,267],{"class":173},[167,94379,1055],{"class":201},[167,94381,185],{"class":173},[167,94383,94384,94386,94388,94390,94392],{"class":169,"line":188},[167,94385,192],{"class":191},[167,94387,195],{"class":173},[167,94389,198],{"class":191},[167,94391,24041],{"class":201},[167,94393,24044],{"class":173},[167,94395,94396],{"class":169,"line":205},[167,94397,209],{"emptyLinePlaceholder":208},[167,94399,94400,94402,94404,94406,94408,94410,94412],{"class":169,"line":160},[167,94401,216],{"class":191},[167,94403,28100],{"class":219},[167,94405,223],{"class":191},[167,94407,226],{"class":181},[167,94409,229],{"class":173},[167,94411,1960],{"class":219},[167,94413,24169],{"class":173},[167,94415,94416,94418,94420,94422,94424],{"class":169,"line":238},[167,94417,216],{"class":191},[167,94419,28117],{"class":219},[167,94421,223],{"class":191},[167,94423,28122],{"class":201},[167,94425,24044],{"class":173},[167,94427,94428,94430,94432],{"class":169,"line":243},[167,94429,282],{"class":173},[167,94431,178],{"class":177},[167,94433,185],{"class":173},[167,94435,94436],{"class":169,"line":261},[167,94437,209],{"emptyLinePlaceholder":208},[167,94439,94440,94442,94444],{"class":169,"line":273},[167,94441,174],{"class":173},[167,94443,299],{"class":177},[167,94445,185],{"class":173},[167,94447,94448,94450,94452,94454,94456,94458,94460,94462],{"class":169,"line":279},[167,94449,307],{"class":173},[167,94451,507],{"class":177},[167,94453,1182],{"class":181},[167,94455,267],{"class":173},[167,94457,28157],{"class":201},[167,94459,28160],{"class":173},[167,94461,507],{"class":177},[167,94463,185],{"class":173},[167,94465,94466],{"class":169,"line":289},[167,94467,209],{"emptyLinePlaceholder":208},[167,94469,94471,94473,94475,94477,94479,94481],{"class":94470,"line":294},[169,213],[167,94472,307],{"class":173},[167,94474,15],{"class":177},[167,94476,28178],{"class":181},[167,94478,28181],{"class":173},[167,94480,15],{"class":177},[167,94482,185],{"class":173},[167,94484,94485,94487,94489],{"class":169,"line":304},[167,94486,282],{"class":173},[167,94488,299],{"class":177},[167,94490,185],{"class":173},[154,94492,94494],{"className":156,"code":28196,"filename":3973,"highlights":94493,"language":162,"meta":163,"style":163},[161],[87,94495,94496,94510,94518,94524,94530,94538,94546,94550,94554,94558,94566,94570,94578,94596,94611],{"__ignoreMap":163},[167,94497,94498,94500,94502,94504,94506,94508],{"class":169,"line":170},[167,94499,174],{"class":173},[167,94501,178],{"class":177},[167,94503,1050],{"class":181},[167,94505,267],{"class":173},[167,94507,1055],{"class":201},[167,94509,185],{"class":173},[167,94511,94512,94514,94516],{"class":169,"line":188},[167,94513,608],{"class":191},[167,94515,3991],{"class":191},[167,94517,1905],{"class":173},[167,94519,94520,94522],{"class":169,"line":205},[167,94521,7176],{"class":181},[167,94523,763],{"class":173},[167,94525,94526,94528],{"class":169,"line":160},[167,94527,1937],{"class":191},[167,94529,1905],{"class":173},[167,94531,94532,94534,94536],{"class":169,"line":238},[167,94533,28238],{"class":173},[167,94535,1960],{"class":219},[167,94537,393],{"class":173},[167,94539,94540,94542,94544],{"class":169,"line":243},[167,94541,28247],{"class":173},[167,94543,28250],{"class":201},[167,94545,393],{"class":173},[167,94547,94548],{"class":169,"line":261},[167,94549,24370],{"class":173},[167,94551,94552],{"class":169,"line":273},[167,94553,398],{"class":173},[167,94555,94556],{"class":169,"line":279},[167,94557,24148],{"class":173},[167,94559,94560,94562,94564],{"class":169,"line":289},[167,94561,282],{"class":173},[167,94563,178],{"class":177},[167,94565,185],{"class":173},[167,94567,94568],{"class":169,"line":294},[167,94569,209],{"emptyLinePlaceholder":208},[167,94571,94572,94574,94576],{"class":169,"line":304},[167,94573,174],{"class":173},[167,94575,299],{"class":177},[167,94577,185],{"class":173},[167,94579,94580,94582,94584,94586,94588,94590,94592,94594],{"class":169,"line":313},[167,94581,307],{"class":173},[167,94583,507],{"class":177},[167,94585,1182],{"class":181},[167,94587,267],{"class":173},[167,94589,28157],{"class":201},[167,94591,28160],{"class":173},[167,94593,507],{"class":177},[167,94595,185],{"class":173},[167,94597,94599,94601,94603,94605,94607,94609],{"class":94598,"line":161},[169,213],[167,94600,307],{"class":173},[167,94602,15],{"class":177},[167,94604,28178],{"class":181},[167,94606,28181],{"class":173},[167,94608,15],{"class":177},[167,94610,185],{"class":173},[167,94612,94613,94615,94617],{"class":169,"line":335},[167,94614,282],{"class":173},[167,94616,299],{"class":177},[167,94618,185],{"class":173},[5367,94620,94621],{},[15,94622,28330,94623,28334,94625,28337],{},[87,94624,28333],{},[87,94626,27772],{},[3087,94628,28341,94629],{"id":28340},[87,94630,27775],{},[154,94632,94634],{"className":156,"code":28346,"filename":3260,"highlights":94633,"language":162,"meta":163,"style":163},[495],[87,94635,94636,94652,94664,94668,94710,94714,94738,94754,94774,94794,94814,94818,94826,94830,94838,94844,94852,94860,94869,94877,94881,94893,94905,94917,94935,94943],{"__ignoreMap":163},[167,94637,94638,94640,94642,94644,94646,94648,94650],{"class":169,"line":170},[167,94639,174],{"class":173},[167,94641,178],{"class":177},[167,94643,182],{"class":181},[167,94645,1050],{"class":181},[167,94647,267],{"class":173},[167,94649,1055],{"class":201},[167,94651,185],{"class":173},[167,94653,94654,94656,94658,94660,94662],{"class":169,"line":188},[167,94655,192],{"class":191},[167,94657,195],{"class":173},[167,94659,198],{"class":191},[167,94661,24041],{"class":201},[167,94663,24044],{"class":173},[167,94665,94666],{"class":169,"line":205},[167,94667,209],{"emptyLinePlaceholder":208},[167,94669,94670,94672,94674,94676,94678,94680,94682,94684,94686,94688,94690,94692,94694,94696,94698,94700,94702,94704,94706,94708],{"class":169,"line":160},[167,94671,569],{"class":191},[167,94673,28388],{"class":181},[167,94675,223],{"class":191},[167,94677,577],{"class":173},[167,94679,580],{"class":254},[167,94681,583],{"class":191},[167,94683,8493],{"class":219},[167,94685,589],{"class":173},[167,94687,592],{"class":254},[167,94689,583],{"class":191},[167,94691,586],{"class":219},[167,94693,589],{"class":173},[167,94695,28411],{"class":254},[167,94697,583],{"class":191},[167,94699,28416],{"class":219},[167,94701,589],{"class":173},[167,94703,28421],{"class":254},[167,94705,583],{"class":191},[167,94707,8493],{"class":219},[167,94709,25582],{"class":173},[167,94711,94712],{"class":169,"line":238},[167,94713,209],{"emptyLinePlaceholder":208},[167,94715,94716,94718,94720,94722,94724,94726,94728,94730,94732,94734,94736],{"class":169,"line":243},[167,94717,216],{"class":191},[167,94719,28438],{"class":219},[167,94721,223],{"class":191},[167,94723,226],{"class":181},[167,94725,174],{"class":173},[167,94727,13929],{"class":219},[167,94729,659],{"class":191},[167,94731,6567],{"class":219},[167,94733,6570],{"class":173},[167,94735,6573],{"class":219},[167,94737,24169],{"class":173},[167,94739,94740,94742,94744,94746,94748,94750,94752],{"class":169,"line":261},[167,94741,216],{"class":191},[167,94743,16954],{"class":219},[167,94745,223],{"class":191},[167,94747,226],{"class":181},[167,94749,174],{"class":173},[167,94751,5309],{"class":181},[167,94753,28473],{"class":173},[167,94755,94756,94758,94760,94762,94764,94766,94768,94770,94772],{"class":169,"line":273},[167,94757,1832],{"class":173},[167,94759,1835],{"class":219},[167,94761,1838],{"class":173},[167,94763,23487],{"class":201},[167,94765,28486],{"class":173},[167,94767,390],{"class":219},[167,94769,28491],{"class":173},[167,94771,28494],{"class":219},[167,94773,1856],{"class":173},[167,94775,94776,94778,94780,94782,94784,94786,94788,94790,94792],{"class":169,"line":279},[167,94777,1832],{"class":173},[167,94779,1853],{"class":219},[167,94781,1838],{"class":173},[167,94783,28507],{"class":201},[167,94785,28486],{"class":173},[167,94787,3392],{"class":219},[167,94789,28491],{"class":173},[167,94791,28516],{"class":219},[167,94793,1856],{"class":173},[167,94795,94796,94798,94800,94802,94804,94806,94808,94810,94812],{"class":169,"line":289},[167,94797,1832],{"class":173},[167,94799,8203],{"class":219},[167,94801,1838],{"class":173},[167,94803,28529],{"class":201},[167,94805,28486],{"class":173},[167,94807,390],{"class":219},[167,94809,28491],{"class":173},[167,94811,28538],{"class":219},[167,94813,1856],{"class":173},[167,94815,94816],{"class":169,"line":294},[167,94817,28545],{"class":173},[167,94819,94820,94822,94824],{"class":169,"line":304},[167,94821,282],{"class":173},[167,94823,178],{"class":177},[167,94825,185],{"class":173},[167,94827,94828],{"class":169,"line":313},[167,94829,209],{"emptyLinePlaceholder":208},[167,94831,94832,94834,94836],{"class":169,"line":161},[167,94833,174],{"class":173},[167,94835,299],{"class":177},[167,94837,185],{"class":173},[167,94839,94840,94842],{"class":169,"line":335},[167,94841,307],{"class":173},[167,94843,28572],{"class":177},[167,94845,94846,94848,94850],{"class":169,"line":341},[167,94847,3530],{"class":181},[167,94849,267],{"class":173},[167,94851,28581],{"class":201},[167,94853,94854,94856,94858],{"class":169,"line":489},[167,94855,3541],{"class":181},[167,94857,267],{"class":173},[167,94859,28590],{"class":201},[167,94861,94863,94865,94867],{"class":94862,"line":495},[169,213],[167,94864,28596],{"class":181},[167,94866,267],{"class":173},[167,94868,28601],{"class":201},[167,94870,94871,94873,94875],{"class":169,"line":501},[167,94872,28606],{"class":181},[167,94874,267],{"class":173},[167,94876,28611],{"class":201},[167,94878,94879],{"class":169,"line":512},[167,94880,492],{"class":173},[167,94882,94883,94885,94887,94889,94891],{"class":169,"line":781},[167,94884,1257],{"class":173},[167,94886,3087],{"class":177},[167,94888,28624],{"class":173},[167,94890,3087],{"class":177},[167,94892,185],{"class":173},[167,94894,94895,94897,94899,94901,94903],{"class":169,"line":786},[167,94896,1257],{"class":173},[167,94898,15],{"class":177},[167,94900,28637],{"class":173},[167,94902,15],{"class":177},[167,94904,185],{"class":173},[167,94906,94907,94909,94911,94913,94915],{"class":169,"line":2678},[167,94908,1257],{"class":173},[167,94910,15],{"class":177},[167,94912,28650],{"class":173},[167,94914,15],{"class":177},[167,94916,185],{"class":173},[167,94918,94919,94921,94923,94925,94927,94929,94931,94933],{"class":169,"line":2692},[167,94920,1257],{"class":173},[167,94922,507],{"class":177},[167,94924,1182],{"class":181},[167,94926,267],{"class":173},[167,94928,28667],{"class":201},[167,94930,28670],{"class":173},[167,94932,507],{"class":177},[167,94934,185],{"class":173},[167,94936,94937,94939,94941],{"class":169,"line":3575},[167,94938,504],{"class":173},[167,94940,3696],{"class":177},[167,94942,185],{"class":173},[167,94944,94945,94947,94949],{"class":169,"line":5028},[167,94946,282],{"class":173},[167,94948,299],{"class":177},[167,94950,185],{"class":173},[154,94952,94954],{"className":156,"code":28693,"filename":3973,"highlights":94953,"language":162,"meta":163,"style":163},[512],[87,94955,94956,94970,94978,94984,94990,95006,95010,95030,95050,95070,95074,95078,95082,95086,95094,95098,95106,95112,95120,95128,95137,95145,95149,95161,95173,95185,95203,95211],{"__ignoreMap":163},[167,94957,94958,94960,94962,94964,94966,94968],{"class":169,"line":170},[167,94959,174],{"class":173},[167,94961,178],{"class":177},[167,94963,1050],{"class":181},[167,94965,267],{"class":173},[167,94967,1055],{"class":201},[167,94969,185],{"class":173},[167,94971,94972,94974,94976],{"class":169,"line":188},[167,94973,608],{"class":191},[167,94975,3991],{"class":191},[167,94977,1905],{"class":173},[167,94979,94980,94982],{"class":169,"line":205},[167,94981,7176],{"class":181},[167,94983,763],{"class":173},[167,94985,94986,94988],{"class":169,"line":160},[167,94987,1937],{"class":191},[167,94989,1905],{"class":173},[167,94991,94992,94994,94996,94998,95000,95002,95004],{"class":169,"line":238},[167,94993,28735],{"class":173},[167,94995,6573],{"class":219},[167,94997,654],{"class":191},[167,94999,8493],{"class":219},[167,95001,659],{"class":191},[167,95003,6567],{"class":219},[167,95005,393],{"class":173},[167,95007,95008],{"class":169,"line":243},[167,95009,28752],{"class":173},[167,95011,95012,95014,95016,95018,95020,95022,95024,95026,95028],{"class":169,"line":261},[167,95013,8677],{"class":173},[167,95015,1835],{"class":219},[167,95017,1838],{"class":173},[167,95019,23487],{"class":201},[167,95021,28486],{"class":173},[167,95023,390],{"class":219},[167,95025,28491],{"class":173},[167,95027,28494],{"class":219},[167,95029,1856],{"class":173},[167,95031,95032,95034,95036,95038,95040,95042,95044,95046,95048],{"class":169,"line":273},[167,95033,8677],{"class":173},[167,95035,1853],{"class":219},[167,95037,1838],{"class":173},[167,95039,28507],{"class":201},[167,95041,28486],{"class":173},[167,95043,3392],{"class":219},[167,95045,28491],{"class":173},[167,95047,28516],{"class":219},[167,95049,1856],{"class":173},[167,95051,95052,95054,95056,95058,95060,95062,95064,95066,95068],{"class":169,"line":279},[167,95053,8677],{"class":173},[167,95055,8203],{"class":219},[167,95057,1838],{"class":173},[167,95059,28529],{"class":201},[167,95061,28486],{"class":173},[167,95063,390],{"class":219},[167,95065,28491],{"class":173},[167,95067,28538],{"class":219},[167,95069,1856],{"class":173},[167,95071,95072],{"class":169,"line":289},[167,95073,16114],{"class":173},[167,95075,95076],{"class":169,"line":294},[167,95077,24370],{"class":173},[167,95079,95080],{"class":169,"line":304},[167,95081,398],{"class":173},[167,95083,95084],{"class":169,"line":313},[167,95085,24148],{"class":173},[167,95087,95088,95090,95092],{"class":169,"line":161},[167,95089,282],{"class":173},[167,95091,178],{"class":177},[167,95093,185],{"class":173},[167,95095,95096],{"class":169,"line":335},[167,95097,209],{"emptyLinePlaceholder":208},[167,95099,95100,95102,95104],{"class":169,"line":341},[167,95101,174],{"class":173},[167,95103,299],{"class":177},[167,95105,185],{"class":173},[167,95107,95108,95110],{"class":169,"line":489},[167,95109,307],{"class":173},[167,95111,28572],{"class":177},[167,95113,95114,95116,95118],{"class":169,"line":495},[167,95115,3530],{"class":181},[167,95117,267],{"class":173},[167,95119,28581],{"class":201},[167,95121,95122,95124,95126],{"class":169,"line":501},[167,95123,3541],{"class":181},[167,95125,267],{"class":173},[167,95127,28590],{"class":201},[167,95129,95131,95133,95135],{"class":95130,"line":512},[169,213],[167,95132,28596],{"class":181},[167,95134,267],{"class":173},[167,95136,28601],{"class":201},[167,95138,95139,95141,95143],{"class":169,"line":781},[167,95140,28606],{"class":181},[167,95142,267],{"class":173},[167,95144,28611],{"class":201},[167,95146,95147],{"class":169,"line":786},[167,95148,492],{"class":173},[167,95150,95151,95153,95155,95157,95159],{"class":169,"line":2678},[167,95152,1257],{"class":173},[167,95154,3087],{"class":177},[167,95156,28624],{"class":173},[167,95158,3087],{"class":177},[167,95160,185],{"class":173},[167,95162,95163,95165,95167,95169,95171],{"class":169,"line":2692},[167,95164,1257],{"class":173},[167,95166,15],{"class":177},[167,95168,28637],{"class":173},[167,95170,15],{"class":177},[167,95172,185],{"class":173},[167,95174,95175,95177,95179,95181,95183],{"class":169,"line":3575},[167,95176,1257],{"class":173},[167,95178,15],{"class":177},[167,95180,28650],{"class":173},[167,95182,15],{"class":177},[167,95184,185],{"class":173},[167,95186,95187,95189,95191,95193,95195,95197,95199,95201],{"class":169,"line":5028},[167,95188,1257],{"class":173},[167,95190,507],{"class":177},[167,95192,1182],{"class":181},[167,95194,267],{"class":173},[167,95196,28667],{"class":201},[167,95198,28670],{"class":173},[167,95200,507],{"class":177},[167,95202,185],{"class":173},[167,95204,95205,95207,95209],{"class":169,"line":5037},[167,95206,504],{"class":173},[167,95208,3696],{"class":177},[167,95210,185],{"class":173},[167,95212,95213,95215,95217],{"class":169,"line":5046},[167,95214,282],{"class":173},[167,95216,299],{"class":177},[167,95218,185],{"class":173},[5367,95220,95221],{},[15,95222,28966,95223,28969,95225,28973,95227,28977],{},[87,95224,27775],{},[3933,95226,28972],{},[87,95228,28976],{},[3087,95230,28981,95231],{"id":28980},[87,95232,27778],{},[154,95234,95236],{"className":156,"code":28986,"filename":3260,"highlights":95235,"language":162,"meta":163,"style":163},[273],[87,95237,95238,95254,95266,95274,95278,95286,95298,95302,95317],{"__ignoreMap":163},[167,95239,95240,95242,95244,95246,95248,95250,95252],{"class":169,"line":170},[167,95241,174],{"class":173},[167,95243,178],{"class":177},[167,95245,182],{"class":181},[167,95247,1050],{"class":181},[167,95249,267],{"class":173},[167,95251,1055],{"class":201},[167,95253,185],{"class":173},[167,95255,95256,95258,95260,95262,95264],{"class":169,"line":188},[167,95257,216],{"class":191},[167,95259,29012],{"class":219},[167,95261,223],{"class":191},[167,95263,29017],{"class":201},[167,95265,24044],{"class":173},[167,95267,95268,95270,95272],{"class":169,"line":205},[167,95269,282],{"class":173},[167,95271,178],{"class":177},[167,95273,185],{"class":173},[167,95275,95276],{"class":169,"line":160},[167,95277,209],{"emptyLinePlaceholder":208},[167,95279,95280,95282,95284],{"class":169,"line":238},[167,95281,174],{"class":173},[167,95283,299],{"class":177},[167,95285,185],{"class":173},[167,95287,95288,95290,95292,95294,95296],{"class":169,"line":243},[167,95289,307],{"class":173},[167,95291,15],{"class":177},[167,95293,29048],{"class":173},[167,95295,15],{"class":177},[167,95297,185],{"class":173},[167,95299,95300],{"class":169,"line":261},[167,95301,209],{"emptyLinePlaceholder":208},[167,95303,95305,95307,95309,95311,95313,95315],{"class":95304,"line":273},[169,213],[167,95306,307],{"class":173},[167,95308,154],{"class":177},[167,95310,29066],{"class":181},[167,95312,29069],{"class":173},[167,95314,154],{"class":177},[167,95316,185],{"class":173},[167,95318,95319,95321,95323],{"class":169,"line":279},[167,95320,282],{"class":173},[167,95322,299],{"class":177},[167,95324,185],{"class":173},[154,95326,95328],{"className":156,"code":29084,"filename":3973,"highlights":95327,"language":162,"meta":163,"style":163},[313],[87,95329,95330,95344,95352,95358,95364,95372,95376,95380,95384,95392,95396,95404,95416,95431],{"__ignoreMap":163},[167,95331,95332,95334,95336,95338,95340,95342],{"class":169,"line":170},[167,95333,174],{"class":173},[167,95335,178],{"class":177},[167,95337,1050],{"class":181},[167,95339,267],{"class":173},[167,95341,1055],{"class":201},[167,95343,185],{"class":173},[167,95345,95346,95348,95350],{"class":169,"line":188},[167,95347,608],{"class":191},[167,95349,3991],{"class":191},[167,95351,1905],{"class":173},[167,95353,95354,95356],{"class":169,"line":205},[167,95355,7176],{"class":181},[167,95357,763],{"class":173},[167,95359,95360,95362],{"class":169,"line":160},[167,95361,1937],{"class":191},[167,95363,1905],{"class":173},[167,95365,95366,95368,95370],{"class":169,"line":238},[167,95367,29126],{"class":173},[167,95369,29129],{"class":201},[167,95371,393],{"class":173},[167,95373,95374],{"class":169,"line":243},[167,95375,24370],{"class":173},[167,95377,95378],{"class":169,"line":261},[167,95379,398],{"class":173},[167,95381,95382],{"class":169,"line":273},[167,95383,24148],{"class":173},[167,95385,95386,95388,95390],{"class":169,"line":279},[167,95387,282],{"class":173},[167,95389,178],{"class":177},[167,95391,185],{"class":173},[167,95393,95394],{"class":169,"line":289},[167,95395,209],{"emptyLinePlaceholder":208},[167,95397,95398,95400,95402],{"class":169,"line":294},[167,95399,174],{"class":173},[167,95401,299],{"class":177},[167,95403,185],{"class":173},[167,95405,95406,95408,95410,95412,95414],{"class":169,"line":304},[167,95407,307],{"class":173},[167,95409,15],{"class":177},[167,95411,29048],{"class":173},[167,95413,15],{"class":177},[167,95415,185],{"class":173},[167,95417,95419,95421,95423,95425,95427,95429],{"class":95418,"line":313},[169,213],[167,95420,307],{"class":173},[167,95422,154],{"class":177},[167,95424,29066],{"class":181},[167,95426,29069],{"class":173},[167,95428,154],{"class":177},[167,95430,185],{"class":173},[167,95432,95433,95435,95437],{"class":169,"line":161},[167,95434,282],{"class":173},[167,95436,299],{"class":177},[167,95438,185],{"class":173},[3087,95440,29202],{"id":29201},[15,95442,29205,95443,29208,95445,29211,95447,29214],{},[87,95444,27772],{},[87,95446,27775],{},[87,95448,27778],{},[154,95450,95451],{"className":156,"code":29217,"filename":3260,"language":162,"meta":163,"style":163},[87,95452,95453,95469,95481,95485,95527,95531,95555,95571,95591,95611,95631,95635,95639,95677,95691,95699,95705,95727,95731,95739,95743,95751,95761,95773,95785,95793,95797,95805,95809,95823,95853,95861,95869,95873,95879,95887,95895,95903,95911,95915,95927,95939,95951,95959,95963,95971,95983,95997,96005],{"__ignoreMap":163},[167,95454,95455,95457,95459,95461,95463,95465,95467],{"class":169,"line":170},[167,95456,174],{"class":173},[167,95458,178],{"class":177},[167,95460,182],{"class":181},[167,95462,1050],{"class":181},[167,95464,267],{"class":173},[167,95466,1055],{"class":201},[167,95468,185],{"class":173},[167,95470,95471,95473,95475,95477,95479],{"class":169,"line":188},[167,95472,192],{"class":191},[167,95474,1805],{"class":173},[167,95476,198],{"class":191},[167,95478,24041],{"class":201},[167,95480,24044],{"class":173},[167,95482,95483],{"class":169,"line":205},[167,95484,209],{"emptyLinePlaceholder":208},[167,95486,95487,95489,95491,95493,95495,95497,95499,95501,95503,95505,95507,95509,95511,95513,95515,95517,95519,95521,95523,95525],{"class":169,"line":160},[167,95488,569],{"class":191},[167,95490,11605],{"class":181},[167,95492,223],{"class":191},[167,95494,577],{"class":173},[167,95496,580],{"class":254},[167,95498,583],{"class":191},[167,95500,8493],{"class":219},[167,95502,589],{"class":173},[167,95504,29272],{"class":254},[167,95506,583],{"class":191},[167,95508,586],{"class":219},[167,95510,589],{"class":173},[167,95512,29281],{"class":254},[167,95514,583],{"class":191},[167,95516,28416],{"class":219},[167,95518,589],{"class":173},[167,95520,29290],{"class":254},[167,95522,583],{"class":191},[167,95524,586],{"class":219},[167,95526,25582],{"class":173},[167,95528,95529],{"class":169,"line":238},[167,95530,209],{"emptyLinePlaceholder":208},[167,95532,95533,95535,95537,95539,95541,95543,95545,95547,95549,95551,95553],{"class":169,"line":243},[167,95534,216],{"class":191},[167,95536,29307],{"class":219},[167,95538,223],{"class":191},[167,95540,226],{"class":181},[167,95542,174],{"class":173},[167,95544,29316],{"class":201},[167,95546,659],{"class":191},[167,95548,586],{"class":219},[167,95550,6570],{"class":173},[167,95552,29316],{"class":201},[167,95554,24169],{"class":173},[167,95556,95557,95559,95561,95563,95565,95567,95569],{"class":169,"line":261},[167,95558,216],{"class":191},[167,95560,3368],{"class":219},[167,95562,223],{"class":191},[167,95564,226],{"class":181},[167,95566,174],{"class":173},[167,95568,11659],{"class":181},[167,95570,28473],{"class":173},[167,95572,95573,95575,95577,95579,95581,95583,95585,95587,95589],{"class":169,"line":273},[167,95574,1832],{"class":173},[167,95576,1835],{"class":219},[167,95578,3383],{"class":173},[167,95580,29353],{"class":201},[167,95582,8164],{"class":173},[167,95584,390],{"class":219},[167,95586,8169],{"class":173},[167,95588,23487],{"class":201},[167,95590,1856],{"class":173},[167,95592,95593,95595,95597,95599,95601,95603,95605,95607,95609],{"class":169,"line":279},[167,95594,1832],{"class":173},[167,95596,1853],{"class":219},[167,95598,3383],{"class":173},[167,95600,29374],{"class":201},[167,95602,8164],{"class":173},[167,95604,3392],{"class":219},[167,95606,8169],{"class":173},[167,95608,28507],{"class":201},[167,95610,1856],{"class":173},[167,95612,95613,95615,95617,95619,95621,95623,95625,95627,95629],{"class":169,"line":289},[167,95614,1832],{"class":173},[167,95616,8203],{"class":219},[167,95618,3383],{"class":173},[167,95620,29395],{"class":201},[167,95622,8164],{"class":173},[167,95624,3392],{"class":219},[167,95626,8169],{"class":173},[167,95628,23487],{"class":201},[167,95630,1856],{"class":173},[167,95632,95633],{"class":169,"line":294},[167,95634,28545],{"class":173},[167,95636,95637],{"class":169,"line":304},[167,95638,209],{"emptyLinePlaceholder":208},[167,95640,95641,95643,95645,95647,95649,95651,95653,95655,95657,95659,95661,95663,95665,95667,95669,95671,95673,95675],{"class":169,"line":313},[167,95642,216],{"class":191},[167,95644,29420],{"class":219},[167,95646,223],{"class":191},[167,95648,1898],{"class":181},[167,95650,1493],{"class":173},[167,95652,639],{"class":191},[167,95654,1103],{"class":173},[167,95656,29316],{"class":201},[167,95658,1025],{"class":173},[167,95660,29437],{"class":191},[167,95662,22324],{"class":181},[167,95664,29442],{"class":173},[167,95666,9844],{"class":181},[167,95668,1918],{"class":173},[167,95670,29449],{"class":254},[167,95672,693],{"class":173},[167,95674,639],{"class":191},[167,95676,29456],{"class":173},[167,95678,95679,95681,95683,95685,95687,95689],{"class":169,"line":161},[167,95680,216],{"class":191},[167,95682,8233],{"class":219},[167,95684,223],{"class":191},[167,95686,1898],{"class":181},[167,95688,1493],{"class":173},[167,95690,9717],{"class":191},[167,95692,95693,95695,95697],{"class":169,"line":335},[167,95694,29475],{"class":173},[167,95696,2550],{"class":191},[167,95698,29480],{"class":201},[167,95700,95701,95703],{"class":169,"line":341},[167,95702,29485],{"class":191},[167,95704,11892],{"class":173},[167,95706,95707,95709,95711,95713,95715,95717,95719,95721,95723,95725],{"class":169,"line":489},[167,95708,29492],{"class":191},[167,95710,3451],{"class":173},[167,95712,8252],{"class":181},[167,95714,1918],{"class":173},[167,95716,29449],{"class":254},[167,95718,693],{"class":173},[167,95720,639],{"class":191},[167,95722,29507],{"class":173},[167,95724,2550],{"class":191},[167,95726,29512],{"class":173},[167,95728,95729],{"class":169,"line":495},[167,95730,24169],{"class":173},[167,95732,95733,95735,95737],{"class":169,"line":501},[167,95734,282],{"class":173},[167,95736,178],{"class":177},[167,95738,185],{"class":173},[167,95740,95741],{"class":169,"line":512},[167,95742,209],{"emptyLinePlaceholder":208},[167,95744,95745,95747,95749],{"class":169,"line":781},[167,95746,174],{"class":173},[167,95748,299],{"class":177},[167,95750,185],{"class":173},[167,95752,95753,95755,95757,95759],{"class":169,"line":786},[167,95754,307],{"class":173},[167,95756,1260],{"class":177},[167,95758,28178],{"class":181},[167,95760,185],{"class":173},[167,95762,95763,95765,95767,95769,95771],{"class":169,"line":2678},[167,95764,1257],{"class":173},[167,95766,22],{"class":177},[167,95768,29555],{"class":173},[167,95770,22],{"class":177},[167,95772,185],{"class":173},[167,95774,95775,95777,95779,95781,95783],{"class":169,"line":2692},[167,95776,1257],{"class":173},[167,95778,15],{"class":177},[167,95780,29568],{"class":173},[167,95782,15],{"class":177},[167,95784,185],{"class":173},[167,95786,95787,95789,95791],{"class":169,"line":3575},[167,95788,504],{"class":173},[167,95790,1260],{"class":177},[167,95792,185],{"class":173},[167,95794,95795],{"class":169,"line":5028},[167,95796,209],{"emptyLinePlaceholder":208},[167,95798,95799,95801,95803],{"class":169,"line":5037},[167,95800,307],{"class":173},[167,95802,9875],{"class":177},[167,95804,185],{"class":173},[167,95806,95807],{"class":169,"line":5046},[167,95808,29597],{"class":173},[167,95810,95811,95813,95815,95817,95819,95821],{"class":169,"line":6756},[167,95812,1257],{"class":173},[167,95814,1098],{"class":177},[167,95816,2653],{"class":181},[167,95818,267],{"class":173},[167,95820,29610],{"class":201},[167,95822,185],{"class":173},[167,95824,95825,95827,95829,95831,95833,95835,95837,95839,95841,95843,95845,95847,95849,95851],{"class":169,"line":6778},[167,95826,1268],{"class":173},[167,95828,29619],{"class":177},[167,95830,18706],{"class":181},[167,95832,267],{"class":173},[167,95834,29626],{"class":201},[167,95836,10307],{"class":181},[167,95838,267],{"class":173},[167,95840,29633],{"class":201},[167,95842,29636],{"class":181},[167,95844,267],{"class":173},[167,95846,29633],{"class":201},[167,95848,29643],{"class":173},[167,95850,29619],{"class":177},[167,95852,185],{"class":173},[167,95854,95855,95857,95859],{"class":169,"line":6783},[167,95856,1292],{"class":173},[167,95858,1098],{"class":177},[167,95860,185],{"class":173},[167,95862,95863,95865,95867],{"class":169,"line":6788},[167,95864,504],{"class":173},[167,95866,9875],{"class":177},[167,95868,185],{"class":173},[167,95870,95871],{"class":169,"line":6793},[167,95872,209],{"emptyLinePlaceholder":208},[167,95874,95875,95877],{"class":169,"line":6809},[167,95876,307],{"class":173},[167,95878,29674],{"class":177},[167,95880,95881,95883,95885],{"class":169,"line":6824},[167,95882,3530],{"class":181},[167,95884,267],{"class":173},[167,95886,12482],{"class":201},[167,95888,95889,95891,95893],{"class":169,"line":6829},[167,95890,3541],{"class":181},[167,95892,267],{"class":173},[167,95894,3546],{"class":201},[167,95896,95897,95899,95901],{"class":169,"line":6836},[167,95898,28596],{"class":181},[167,95900,267],{"class":173},[167,95902,29699],{"class":201},[167,95904,95905,95907,95909],{"class":169,"line":6845},[167,95906,28606],{"class":181},[167,95908,267],{"class":173},[167,95910,29708],{"class":201},[167,95912,95913],{"class":169,"line":6854},[167,95914,492],{"class":173},[167,95916,95917,95919,95921,95923,95925],{"class":169,"line":6861},[167,95918,1257],{"class":173},[167,95920,3087],{"class":177},[167,95922,4979],{"class":173},[167,95924,3087],{"class":177},[167,95926,185],{"class":173},[167,95928,95929,95931,95933,95935,95937],{"class":169,"line":6879},[167,95930,1257],{"class":173},[167,95932,15],{"class":177},[167,95934,29733],{"class":173},[167,95936,15],{"class":177},[167,95938,185],{"class":173},[167,95940,95941,95943,95945,95947,95949],{"class":169,"line":6884},[167,95942,1257],{"class":173},[167,95944,15],{"class":177},[167,95946,29746],{"class":173},[167,95948,15],{"class":177},[167,95950,185],{"class":173},[167,95952,95953,95955,95957],{"class":169,"line":6889},[167,95954,504],{"class":173},[167,95956,10117],{"class":177},[167,95958,185],{"class":173},[167,95960,95961],{"class":169,"line":6898},[167,95962,209],{"emptyLinePlaceholder":208},[167,95964,95965,95967,95969],{"class":169,"line":6903},[167,95966,307],{"class":173},[167,95968,27354],{"class":177},[167,95970,185],{"class":173},[167,95972,95973,95975,95977,95979,95981],{"class":169,"line":6912},[167,95974,1257],{"class":173},[167,95976,29777],{"class":177},[167,95978,29780],{"class":173},[167,95980,29777],{"class":177},[167,95982,185],{"class":173},[167,95984,95985,95987,95989,95991,95993,95995],{"class":169,"line":6928},[167,95986,1257],{"class":173},[167,95988,87],{"class":177},[167,95990,29066],{"class":181},[167,95992,29795],{"class":173},[167,95994,87],{"class":177},[167,95996,185],{"class":173},[167,95998,95999,96001,96003],{"class":169,"line":6949},[167,96000,504],{"class":173},[167,96002,27354],{"class":177},[167,96004,185],{"class":173},[167,96006,96007,96009,96011],{"class":169,"line":6954},[167,96008,282],{"class":173},[167,96010,299],{"class":177},[167,96012,185],{"class":173},[154,96014,96015],{"className":156,"code":29818,"filename":3973,"language":162,"meta":163,"style":163},[87,96016,96017,96031,96039,96045,96051,96059,96063,96083,96103,96123,96127,96131,96135,96139,96145,96177,96181,96187,96199,96207,96233,96237,96241,96245,96253,96257,96265,96275,96287,96299,96307,96311,96319,96323,96337,96367,96375,96383,96387,96393,96401,96409,96417,96425,96429,96441,96453,96465,96473,96477,96485,96497,96511,96519],{"__ignoreMap":163},[167,96018,96019,96021,96023,96025,96027,96029],{"class":169,"line":170},[167,96020,174],{"class":173},[167,96022,178],{"class":177},[167,96024,1050],{"class":181},[167,96026,267],{"class":173},[167,96028,1055],{"class":201},[167,96030,185],{"class":173},[167,96032,96033,96035,96037],{"class":169,"line":188},[167,96034,608],{"class":191},[167,96036,3991],{"class":191},[167,96038,1905],{"class":173},[167,96040,96041,96043],{"class":169,"line":205},[167,96042,7176],{"class":181},[167,96044,763],{"class":173},[167,96046,96047,96049],{"class":169,"line":160},[167,96048,1937],{"class":191},[167,96050,1905],{"class":173},[167,96052,96053,96055,96057],{"class":169,"line":238},[167,96054,29859],{"class":173},[167,96056,29316],{"class":201},[167,96058,393],{"class":173},[167,96060,96061],{"class":169,"line":243},[167,96062,8672],{"class":173},[167,96064,96065,96067,96069,96071,96073,96075,96077,96079,96081],{"class":169,"line":261},[167,96066,8677],{"class":173},[167,96068,1835],{"class":219},[167,96070,3383],{"class":173},[167,96072,29353],{"class":201},[167,96074,8164],{"class":173},[167,96076,390],{"class":219},[167,96078,8169],{"class":173},[167,96080,23487],{"class":201},[167,96082,1856],{"class":173},[167,96084,96085,96087,96089,96091,96093,96095,96097,96099,96101],{"class":169,"line":273},[167,96086,8677],{"class":173},[167,96088,1853],{"class":219},[167,96090,3383],{"class":173},[167,96092,29374],{"class":201},[167,96094,8164],{"class":173},[167,96096,3392],{"class":219},[167,96098,8169],{"class":173},[167,96100,28507],{"class":201},[167,96102,1856],{"class":173},[167,96104,96105,96107,96109,96111,96113,96115,96117,96119,96121],{"class":169,"line":279},[167,96106,8677],{"class":173},[167,96108,8203],{"class":219},[167,96110,3383],{"class":173},[167,96112,29395],{"class":201},[167,96114,8164],{"class":173},[167,96116,3392],{"class":219},[167,96118,8169],{"class":173},[167,96120,23487],{"class":201},[167,96122,1856],{"class":173},[167,96124,96125],{"class":169,"line":289},[167,96126,16114],{"class":173},[167,96128,96129],{"class":169,"line":294},[167,96130,24370],{"class":173},[167,96132,96133],{"class":169,"line":304},[167,96134,398],{"class":173},[167,96136,96137],{"class":169,"line":313},[167,96138,8755],{"class":173},[167,96140,96141,96143],{"class":169,"line":161},[167,96142,29948],{"class":181},[167,96144,763],{"class":173},[167,96146,96147,96149,96151,96153,96155,96157,96159,96161,96163,96165,96167,96169,96171,96173,96175],{"class":169,"line":335},[167,96148,8767],{"class":191},[167,96150,1103],{"class":173},[167,96152,29316],{"class":201},[167,96154,1025],{"class":173},[167,96156,29437],{"class":191},[167,96158,22324],{"class":181},[167,96160,229],{"class":173},[167,96162,4927],{"class":219},[167,96164,8772],{"class":173},[167,96166,9844],{"class":181},[167,96168,1918],{"class":173},[167,96170,29449],{"class":254},[167,96172,693],{"class":173},[167,96174,639],{"class":191},[167,96176,29983],{"class":173},[167,96178,96179],{"class":169,"line":341},[167,96180,755],{"class":173},[167,96182,96183,96185],{"class":169,"line":489},[167,96184,8760],{"class":181},[167,96186,763],{"class":173},[167,96188,96189,96191,96193,96195,96197],{"class":169,"line":495},[167,96190,8767],{"class":191},[167,96192,7351],{"class":219},[167,96194,30002],{"class":173},[167,96196,2550],{"class":191},[167,96198,29480],{"class":201},[167,96200,96201,96203,96205],{"class":169,"line":501},[167,96202,30011],{"class":191},[167,96204,7351],{"class":219},[167,96206,12732],{"class":173},[167,96208,96209,96211,96213,96215,96217,96219,96221,96223,96225,96227,96229,96231],{"class":169,"line":512},[167,96210,30020],{"class":191},[167,96212,7351],{"class":219},[167,96214,8772],{"class":173},[167,96216,8252],{"class":181},[167,96218,1918],{"class":173},[167,96220,29449],{"class":254},[167,96222,693],{"class":173},[167,96224,639],{"class":191},[167,96226,29507],{"class":173},[167,96228,2550],{"class":191},[167,96230,7351],{"class":219},[167,96232,30043],{"class":173},[167,96234,96235],{"class":169,"line":781},[167,96236,755],{"class":173},[167,96238,96239],{"class":169,"line":786},[167,96240,398],{"class":173},[167,96242,96243],{"class":169,"line":2678},[167,96244,24148],{"class":173},[167,96246,96247,96249,96251],{"class":169,"line":2692},[167,96248,282],{"class":173},[167,96250,178],{"class":177},[167,96252,185],{"class":173},[167,96254,96255],{"class":169,"line":3575},[167,96256,209],{"emptyLinePlaceholder":208},[167,96258,96259,96261,96263],{"class":169,"line":5028},[167,96260,174],{"class":173},[167,96262,299],{"class":177},[167,96264,185],{"class":173},[167,96266,96267,96269,96271,96273],{"class":169,"line":5037},[167,96268,307],{"class":173},[167,96270,1260],{"class":177},[167,96272,28178],{"class":181},[167,96274,185],{"class":173},[167,96276,96277,96279,96281,96283,96285],{"class":169,"line":5046},[167,96278,1257],{"class":173},[167,96280,22],{"class":177},[167,96282,29555],{"class":173},[167,96284,22],{"class":177},[167,96286,185],{"class":173},[167,96288,96289,96291,96293,96295,96297],{"class":169,"line":6756},[167,96290,1257],{"class":173},[167,96292,15],{"class":177},[167,96294,29568],{"class":173},[167,96296,15],{"class":177},[167,96298,185],{"class":173},[167,96300,96301,96303,96305],{"class":169,"line":6778},[167,96302,504],{"class":173},[167,96304,1260],{"class":177},[167,96306,185],{"class":173},[167,96308,96309],{"class":169,"line":6783},[167,96310,209],{"emptyLinePlaceholder":208},[167,96312,96313,96315,96317],{"class":169,"line":6788},[167,96314,307],{"class":173},[167,96316,9875],{"class":177},[167,96318,185],{"class":173},[167,96320,96321],{"class":169,"line":6793},[167,96322,29597],{"class":173},[167,96324,96325,96327,96329,96331,96333,96335],{"class":169,"line":6809},[167,96326,1257],{"class":173},[167,96328,1098],{"class":177},[167,96330,2653],{"class":181},[167,96332,267],{"class":173},[167,96334,29610],{"class":201},[167,96336,185],{"class":173},[167,96338,96339,96341,96343,96345,96347,96349,96351,96353,96355,96357,96359,96361,96363,96365],{"class":169,"line":6824},[167,96340,1268],{"class":173},[167,96342,29619],{"class":177},[167,96344,18706],{"class":181},[167,96346,267],{"class":173},[167,96348,29626],{"class":201},[167,96350,10307],{"class":181},[167,96352,267],{"class":173},[167,96354,29633],{"class":201},[167,96356,29636],{"class":181},[167,96358,267],{"class":173},[167,96360,29633],{"class":201},[167,96362,29643],{"class":173},[167,96364,29619],{"class":177},[167,96366,185],{"class":173},[167,96368,96369,96371,96373],{"class":169,"line":6829},[167,96370,1292],{"class":173},[167,96372,1098],{"class":177},[167,96374,185],{"class":173},[167,96376,96377,96379,96381],{"class":169,"line":6836},[167,96378,504],{"class":173},[167,96380,9875],{"class":177},[167,96382,185],{"class":173},[167,96384,96385],{"class":169,"line":6845},[167,96386,209],{"emptyLinePlaceholder":208},[167,96388,96389,96391],{"class":169,"line":6854},[167,96390,307],{"class":173},[167,96392,29674],{"class":177},[167,96394,96395,96397,96399],{"class":169,"line":6861},[167,96396,3530],{"class":181},[167,96398,267],{"class":173},[167,96400,12482],{"class":201},[167,96402,96403,96405,96407],{"class":169,"line":6879},[167,96404,3541],{"class":181},[167,96406,267],{"class":173},[167,96408,3546],{"class":201},[167,96410,96411,96413,96415],{"class":169,"line":6884},[167,96412,28596],{"class":181},[167,96414,267],{"class":173},[167,96416,29699],{"class":201},[167,96418,96419,96421,96423],{"class":169,"line":6889},[167,96420,28606],{"class":181},[167,96422,267],{"class":173},[167,96424,29708],{"class":201},[167,96426,96427],{"class":169,"line":6898},[167,96428,492],{"class":173},[167,96430,96431,96433,96435,96437,96439],{"class":169,"line":6903},[167,96432,1257],{"class":173},[167,96434,3087],{"class":177},[167,96436,4979],{"class":173},[167,96438,3087],{"class":177},[167,96440,185],{"class":173},[167,96442,96443,96445,96447,96449,96451],{"class":169,"line":6912},[167,96444,1257],{"class":173},[167,96446,15],{"class":177},[167,96448,29733],{"class":173},[167,96450,15],{"class":177},[167,96452,185],{"class":173},[167,96454,96455,96457,96459,96461,96463],{"class":169,"line":6928},[167,96456,1257],{"class":173},[167,96458,15],{"class":177},[167,96460,29746],{"class":173},[167,96462,15],{"class":177},[167,96464,185],{"class":173},[167,96466,96467,96469,96471],{"class":169,"line":6949},[167,96468,504],{"class":173},[167,96470,10117],{"class":177},[167,96472,185],{"class":173},[167,96474,96475],{"class":169,"line":6954},[167,96476,209],{"emptyLinePlaceholder":208},[167,96478,96479,96481,96483],{"class":169,"line":6975},[167,96480,307],{"class":173},[167,96482,27354],{"class":177},[167,96484,185],{"class":173},[167,96486,96487,96489,96491,96493,96495],{"class":169,"line":6989},[167,96488,1257],{"class":173},[167,96490,29777],{"class":177},[167,96492,29780],{"class":173},[167,96494,29777],{"class":177},[167,96496,185],{"class":173},[167,96498,96499,96501,96503,96505,96507,96509],{"class":169,"line":7003},[167,96500,1257],{"class":173},[167,96502,87],{"class":177},[167,96504,29066],{"class":181},[167,96506,29795],{"class":173},[167,96508,87],{"class":177},[167,96510,185],{"class":173},[167,96512,96513,96515,96517],{"class":169,"line":7017},[167,96514,504],{"class":173},[167,96516,27354],{"class":177},[167,96518,185],{"class":173},[167,96520,96521,96523,96525],{"class":169,"line":7026},[167,96522,282],{"class":173},[167,96524,299],{"class":177},[167,96526,185],{"class":173},[22,96528,7678],{"id":7677},[15,96530,96531,1025,96533,1028,96535,30348],{},[87,96532,27772],{},[87,96534,27775],{},[87,96536,27778],{},[33,96538,96539,96543,96547],{},[36,96540,96541,30355],{},[87,96542,27772],{},[36,96544,96545,30360],{},[87,96546,27775],{},[36,96548,96549,30365],{},[87,96550,27778],{},[15,96552,30368],{},[924,96554,30371],{},{"title":163,"searchDepth":188,"depth":188,"links":96556},[96557,96558,96563,96564,96565,96566,96572,96578],{"id":26502,"depth":188,"text":26503},{"id":6256,"depth":188,"text":6257,"children":96559},[96560,96561,96562],{"id":27772,"depth":205,"text":27772},{"id":27775,"depth":205,"text":27775},{"id":27778,"depth":205,"text":27778},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":11370,"depth":188,"text":11371},{"id":3084,"depth":188,"text":3085,"children":96567},[96568,96569,96570,96571],{"id":27983,"depth":205,"text":30386},{"id":28005,"depth":205,"text":30388},{"id":28019,"depth":205,"text":30390},{"id":28038,"depth":205,"text":28039},{"id":7996,"depth":188,"text":7997,"children":96573},[96574,96575,96576,96577],{"id":28052,"depth":205,"text":30395},{"id":28340,"depth":205,"text":30397},{"id":28980,"depth":205,"text":30399},{"id":29201,"depth":205,"text":29202},{"id":7677,"depth":188,"text":7678},{"updatedAt":30407,"coverCaption":23656,"author":946,"keywords":96580},[3258,27772,27775,27778,30409],[96582],{"headline":30413,"author":96583,"datePublished":30407,"@type":961},{"name":946,"@type":959},{"title":27764,"description":30405},[96586,96587,96588,96589,96590],{"tag":26466,"color":26467},{"tag":3273,"color":3274},{"tag":9169,"color":9170},{"tag":3269,"color":3270},{"tag":7730,"color":7731},{"id":96592,"title":96593,"body":96594,"cover":33914,"coverAlt":98728,"date":33916,"description":98729,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":98730,"navigation":208,"path":98734,"schemaOrg":98735,"seo":98739,"series":26460,"seriesDescription":60258,"seriesOrder":261,"seriesTitle":60259,"slug":942,"stem":98740,"tags":98741,"__hash__":98747},"blog\u002Fblog\u002Fdirectives-vue-v-slot-guide.en.md","Vue Directives: v-slot",{"type":8,"value":96595,"toc":98707},[96596,96601,96606,96609,96611,96614,96625,96632,96634,96640,96694,96760,96763,96786,96789,96808,96816,96818,96822,96839,96841,96843,96854,96859,96861,96869,96874,96885,96920,96958,96962,96968,97015,97018,97022,97025,97028,97045,97050,97054,97057,97060,97086,97088,97092,97167,97171,97315,97319,97450,97456,97459,97531,97536,97539,97542,97857,98097,98100,98103,98422,98677,98679,98705],[11,96597,68424,96599],{"id":96598},"vue-directives-v-slot",[87,96600,31708],{},[15,96602,96603,96605],{},[87,96604,31708],{}," lets you decide, from the parent component, what content will be rendered inside specific areas defined by the child component.\nIn simple terms: the child defines \"slots,\" and the parent decides what to place in them.",[15,96607,96608],{},"It is one of the most powerful tools in Vue 3 for building reusable components without losing control over rendering.",[22,96610,62810],{"id":62809},[15,96612,96613],{},"Without slots, many components become rigid:",[33,96615,96616,96619,96622],{},[36,96617,96618],{},"With hardcoded text and buttons inside the child.",[36,96620,96621],{},"With too many props to cover very specific cases.",[36,96623,96624],{},"Hard to reuse across different screens.",[5367,96626,96627],{},[15,96628,62833,96629,96631],{},[87,96630,31708],{},", you can design base components (cards, modals, tables, layouts) that adapt to different contexts without duplicating logic or sacrificing clarity.",[22,96633,62839],{"id":57680},[15,96635,96636,96637,96639],{},"A child component defines ",[87,96638,31747],{},", and the parent injects content:",[154,96641,96643],{"className":156,"code":31751,"filename":31752,"highlights":96642,"language":162,"meta":163,"style":163},[205],[87,96644,96645,96653,96667,96678,96686],{"__ignoreMap":163},[167,96646,96647,96649,96651],{"class":169,"line":170},[167,96648,174],{"class":173},[167,96650,299],{"class":177},[167,96652,185],{"class":173},[167,96654,96655,96657,96659,96661,96663,96665],{"class":169,"line":188},[167,96656,307],{"class":173},[167,96658,10117],{"class":177},[167,96660,1245],{"class":181},[167,96662,267],{"class":173},[167,96664,31776],{"class":201},[167,96666,185],{"class":173},[167,96668,96670,96672,96674,96676],{"class":96669,"line":205},[169,213],[167,96671,1257],{"class":173},[167,96673,1271],{"class":177},[167,96675,31789],{"class":31788},[167,96677,185],{"class":173},[167,96679,96680,96682,96684],{"class":169,"line":160},[167,96681,504],{"class":173},[167,96683,10117],{"class":177},[167,96685,185],{"class":173},[167,96687,96688,96690,96692],{"class":169,"line":238},[167,96689,282],{"class":173},[167,96691,299],{"class":177},[167,96693,185],{"class":173},[154,96695,96698],{"className":156,"code":96696,"filename":15284,"highlights":96697,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CBaseCard>\n    \u003Ch2>Dynamic title\u003C\u002Fh2>\n    \u003Cp>Custom content from the parent.\u003C\u002Fp>\n  \u003C\u002FBaseCard>\n\u003C\u002Ftemplate>\n",[188,238],[87,96699,96700,96708,96717,96730,96743,96752],{"__ignoreMap":163},[167,96701,96702,96704,96706],{"class":169,"line":170},[167,96703,174],{"class":173},[167,96705,299],{"class":177},[167,96707,185],{"class":173},[167,96709,96711,96713,96715],{"class":96710,"line":188},[169,213],[167,96712,307],{"class":173},[167,96714,31829],{"class":177},[167,96716,185],{"class":173},[167,96718,96719,96721,96723,96726,96728],{"class":169,"line":205},[167,96720,1257],{"class":173},[167,96722,22],{"class":177},[167,96724,96725],{"class":173},">Dynamic title\u003C\u002F",[167,96727,22],{"class":177},[167,96729,185],{"class":173},[167,96731,96732,96734,96736,96739,96741],{"class":169,"line":160},[167,96733,1257],{"class":173},[167,96735,15],{"class":177},[167,96737,96738],{"class":173},">Custom content from the parent.\u003C\u002F",[167,96740,15],{"class":177},[167,96742,185],{"class":173},[167,96744,96746,96748,96750],{"class":96745,"line":238},[169,213],[167,96747,504],{"class":173},[167,96749,31829],{"class":177},[167,96751,185],{"class":173},[167,96753,96754,96756,96758],{"class":169,"line":243},[167,96755,282],{"class":173},[167,96757,299],{"class":177},[167,96759,185],{"class":173},[15,96761,96762],{},"Types of slots:",[33,96764,96765,96772,96779],{},[36,96766,96767,1108,96770],{},[3933,96768,96769],{},"Default slot",[87,96771,31747],{},[36,96773,96774,1108,96777],{},[3933,96775,96776],{},"Named slots",[87,96778,31894],{},[36,96780,96781,1108,96784],{},[3933,96782,96783],{},"Slots with props (scoped slots)",[87,96785,31902],{},[15,96787,96788],{},"Common parent syntax:",[33,96790,96791,96796,96803],{},[36,96792,96793,96795],{},[87,96794,31912],{}," for the default slot.",[36,96797,96798,1025,96800,96802],{},[87,96799,31918],{},[87,96801,31921],{},", etc. for named slots.",[36,96804,96805,96807],{},[87,96806,31927],{}," to receive props from the child.",[5367,96809,96810],{},[15,96811,96812,65593,96814,1679],{},[87,96813,31935],{},[87,96815,31939],{},[22,96817,62952],{"id":62951},[15,96819,62955,96820,68578],{},[87,96821,31708],{},[33,96823,96824,96827,96832],{},[36,96825,96826],{},"You have a structural component (card, modal, layout) whose content changes by view.",[36,96828,96829,96830,4270],{},"You need to expose child-internal data to the parent for custom rendering (",[87,96831,31956],{},[36,96833,96834,96835,1025,96837,31966],{},"You want a flexible API without multiplying boolean props like ",[87,96836,31962],{},[87,96838,31965],{},[22,96840,62980],{"id":62979},[15,96842,62983],{},[33,96844,96845,96848,96851],{},[36,96846,96847],{},"The component has fully fixed structure and content.",[36,96849,96850],{},"You are using slots to hide logic that should live in composables or the store.",[36,96852,96853],{},"The template becomes too complex because of deeply nested slots.",[5367,96855,96856],{},[15,96857,96858],{},"In these cases, less flexibility usually means better maintainability.",[22,96860,63002],{"id":57819},[3087,96862,68621,96864,96866,96867],{"id":96863},"_1-using-v-slot-on-an-element-that-is-not-a-component-or-template",[87,96865,31708],{}," on an element that is not a component or ",[87,96868,31997],{},[15,96870,96871,96873],{},[87,96872,31708],{}," can only be used on:",[33,96875,96876,96879],{},[36,96877,96878],{},"A component.",[36,96880,96881,96882,96884],{},"A ",[87,96883,31997],{}," wrapping content for a specific slot.",[154,96886,96890],{"className":156,"code":96887,"filename":96888,"highlights":96889,"language":162,"meta":163,"style":163},"\u003Cdiv v-slot:header>\n  Title\n\u003C\u002Fdiv>\n","Incorrect.vue",[170],[87,96891,96892,96907,96912],{"__ignoreMap":163},[167,96893,96895,96897,96899,96901,96903,96905],{"class":96894,"line":170},[169,213],[167,96896,174],{"class":173},[167,96898,1242],{"class":177},[167,96900,32029],{"class":181},[167,96902,583],{"class":173},[167,96904,1260],{"class":181},[167,96906,185],{"class":173},[167,96908,96909],{"class":169,"line":188},[167,96910,96911],{"class":173},"  Title\n",[167,96913,96914,96916,96918],{"class":169,"line":205},[167,96915,282],{"class":173},[167,96917,1242],{"class":177},[167,96919,185],{"class":173},[154,96921,96925],{"className":156,"code":96922,"filename":96923,"highlights":96924,"language":162,"meta":163,"style":163},"\u003CBaseCard>\n  \u003Ctemplate #header>\n    Title\n  \u003C\u002Ftemplate>\n\u003C\u002FBaseCard>\n","Correct.vue",[188,160],[87,96926,96927,96935,96940,96945,96950],{"__ignoreMap":163},[167,96928,96929,96931,96933],{"class":169,"line":170},[167,96930,174],{"class":173},[167,96932,31829],{"class":177},[167,96934,185],{"class":173},[167,96936,96938],{"class":96937,"line":188},[169,213],[167,96939,32069],{"class":173},[167,96941,96942],{"class":169,"line":205},[167,96943,96944],{"class":173},"    Title\n",[167,96946,96948],{"class":96947,"line":160},[169,213],[167,96949,32080],{"class":173},[167,96951,96952,96954,96956],{"class":169,"line":238},[167,96953,282],{"class":173},[167,96955,31829],{"class":177},[167,96957,185],{"class":173},[3087,96959,96961],{"id":96960},"_2-not-destructuring-scoped-slot-props","2) Not destructuring scoped slot props",[15,96963,96964,96965,96967],{},"If the child exposes ",[87,96966,32098],{},", the parent should capture that object correctly:",[154,96969,96971],{"className":156,"code":32102,"filename":32103,"highlights":96970,"language":162,"meta":163,"style":163},[170,188],[87,96972,96973,96994,96999,97003,97007],{"__ignoreMap":163},[167,96974,96976,96978,96980,96982,96984,96986,96988,96990,96992],{"class":96975,"line":170},[169,213],[167,96977,174],{"class":173},[167,96979,32114],{"class":177},[167,96981,5312],{"class":173},[167,96983,32119],{"class":181},[167,96985,267],{"class":173},[167,96987,5080],{"class":201},[167,96989,32126],{"class":173},[167,96991,5080],{"class":201},[167,96993,185],{"class":173},[167,96995,96997],{"class":96996,"line":188},[169,213],[167,96998,32136],{"class":173},[167,97000,97001],{"class":169,"line":205},[167,97002,32141],{"class":173},[167,97004,97005],{"class":169,"line":160},[167,97006,32080],{"class":173},[167,97008,97009,97011,97013],{"class":169,"line":238},[167,97010,282],{"class":173},[167,97012,32114],{"class":177},[167,97014,185],{"class":173},[15,97016,97017],{},"If you do not destructure properly, you lose explicit access to slot props.",[3087,97019,97021],{"id":97020},"_3-turning-slots-into-visual-prop-drilling","3) Turning slots into \"visual prop drilling\"",[15,97023,97024],{},"When everything goes through slots and almost nothing through well-defined props or events, the component API becomes confusing.",[15,97026,97027],{},"Practical rule:",[33,97029,97030,97035,97040],{},[36,97031,97032,97034],{},[3933,97033,32172],{}," -> configuration.",[36,97036,97037,97039],{},[3933,97038,1647],{}," -> structure\u002Fcontent.",[36,97041,97042,97044],{},[3933,97043,32183],{}," -> events.",[5367,97046,97047],{},[15,97048,97049],{},"Separating responsibilities keeps the API clear and predictable.",[3087,97051,97053],{"id":97052},"_4-not-defining-fallback-content-in-the-child","4) Not defining fallback content in the child",[15,97055,97056],{},"If the parent does not provide slot content, you may end up with an unexpected empty space.",[15,97058,97059],{},"Whenever it makes sense, define default content:",[154,97061,97063],{"className":156,"code":97062,"filename":31752,"language":162,"meta":163,"style":163},"\u003Cslot>\n  Default fallback\n\u003C\u002Fslot>\n",[87,97064,97065,97073,97078],{"__ignoreMap":163},[167,97066,97067,97069,97071],{"class":169,"line":170},[167,97068,174],{"class":173},[167,97070,1271],{"class":177},[167,97072,185],{"class":173},[167,97074,97075],{"class":169,"line":188},[167,97076,97077],{"class":173},"  Default fallback\n",[167,97079,97080,97082,97084],{"class":169,"line":205},[167,97081,282],{"class":173},[167,97083,1271],{"class":177},[167,97085,185],{"class":173},[22,97087,63234],{"id":57925},[3087,97089,97091],{"id":97090},"_1-default-slot-with-fallback","1) Default slot with fallback",[154,97093,97096],{"className":156,"code":97094,"filename":31752,"highlights":97095,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Carticle class=\"card\">\n    \u003Cslot>\n      \u003Cp>Default card content.\u003C\u002Fp>\n    \u003C\u002Fslot>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[205,238],[87,97097,97098,97106,97120,97129,97142,97151,97159],{"__ignoreMap":163},[167,97099,97100,97102,97104],{"class":169,"line":170},[167,97101,174],{"class":173},[167,97103,299],{"class":177},[167,97105,185],{"class":173},[167,97107,97108,97110,97112,97114,97116,97118],{"class":169,"line":188},[167,97109,307],{"class":173},[167,97111,3696],{"class":177},[167,97113,1245],{"class":181},[167,97115,267],{"class":173},[167,97117,31776],{"class":201},[167,97119,185],{"class":173},[167,97121,97123,97125,97127],{"class":97122,"line":205},[169,213],[167,97124,1257],{"class":173},[167,97126,1271],{"class":177},[167,97128,185],{"class":173},[167,97130,97131,97133,97135,97138,97140],{"class":169,"line":160},[167,97132,1268],{"class":173},[167,97134,15],{"class":177},[167,97136,97137],{"class":173},">Default card content.\u003C\u002F",[167,97139,15],{"class":177},[167,97141,185],{"class":173},[167,97143,97145,97147,97149],{"class":97144,"line":238},[169,213],[167,97146,1292],{"class":173},[167,97148,1271],{"class":177},[167,97150,185],{"class":173},[167,97152,97153,97155,97157],{"class":169,"line":243},[167,97154,504],{"class":173},[167,97156,3696],{"class":177},[167,97158,185],{"class":173},[167,97160,97161,97163,97165],{"class":169,"line":261},[167,97162,282],{"class":173},[167,97164,299],{"class":177},[167,97166,185],{"class":173},[3087,97168,97170],{"id":97169},"_2-named-slots-to-structure-a-layout","2) Named slots to structure a layout",[154,97172,97174],{"className":156,"code":32313,"filename":1224,"highlights":97173,"language":162,"meta":163,"style":163},[160,273,304],[87,97175,97176,97184,97198,97206,97223,97231,97235,97243,97254,97262,97266,97274,97291,97299,97307],{"__ignoreMap":163},[167,97177,97178,97180,97182],{"class":169,"line":170},[167,97179,174],{"class":173},[167,97181,299],{"class":177},[167,97183,185],{"class":173},[167,97185,97186,97188,97190,97192,97194,97196],{"class":169,"line":188},[167,97187,307],{"class":173},[167,97189,10117],{"class":177},[167,97191,1245],{"class":181},[167,97193,267],{"class":173},[167,97195,1250],{"class":201},[167,97197,185],{"class":173},[167,97199,97200,97202,97204],{"class":169,"line":205},[167,97201,1257],{"class":173},[167,97203,1260],{"class":177},[167,97205,185],{"class":173},[167,97207,97209,97211,97213,97215,97217,97219,97221],{"class":97208,"line":160},[169,213],[167,97210,1268],{"class":173},[167,97212,1271],{"class":177},[167,97214,1274],{"class":181},[167,97216,267],{"class":173},[167,97218,1279],{"class":201},[167,97220,31789],{"class":31788},[167,97222,185],{"class":173},[167,97224,97225,97227,97229],{"class":169,"line":238},[167,97226,1292],{"class":173},[167,97228,1260],{"class":177},[167,97230,185],{"class":173},[167,97232,97233],{"class":169,"line":243},[167,97234,209],{"emptyLinePlaceholder":208},[167,97236,97237,97239,97241],{"class":169,"line":261},[167,97238,1257],{"class":173},[167,97240,1304],{"class":177},[167,97242,185],{"class":173},[167,97244,97246,97248,97250,97252],{"class":97245,"line":273},[169,213],[167,97247,1268],{"class":173},[167,97249,1271],{"class":177},[167,97251,31789],{"class":31788},[167,97253,185],{"class":173},[167,97255,97256,97258,97260],{"class":169,"line":279},[167,97257,1292],{"class":173},[167,97259,1304],{"class":177},[167,97261,185],{"class":173},[167,97263,97264],{"class":169,"line":289},[167,97265,209],{"emptyLinePlaceholder":208},[167,97267,97268,97270,97272],{"class":169,"line":294},[167,97269,1257],{"class":173},[167,97271,1334],{"class":177},[167,97273,185],{"class":173},[167,97275,97277,97279,97281,97283,97285,97287,97289],{"class":97276,"line":304},[169,213],[167,97278,1268],{"class":173},[167,97280,1271],{"class":177},[167,97282,1274],{"class":181},[167,97284,267],{"class":173},[167,97286,1349],{"class":201},[167,97288,31789],{"class":31788},[167,97290,185],{"class":173},[167,97292,97293,97295,97297],{"class":169,"line":313},[167,97294,1292],{"class":173},[167,97296,1334],{"class":177},[167,97298,185],{"class":173},[167,97300,97301,97303,97305],{"class":169,"line":161},[167,97302,504],{"class":173},[167,97304,10117],{"class":177},[167,97306,185],{"class":173},[167,97308,97309,97311,97313],{"class":169,"line":335},[167,97310,282],{"class":173},[167,97312,299],{"class":177},[167,97314,185],{"class":173},[3087,97316,97318],{"id":97317},"_3-scoped-slot-to-customize-table-rows","3) Scoped slot to customize table rows",[154,97320,97322],{"className":156,"code":32462,"filename":32103,"highlights":97321,"language":162,"meta":163,"style":163},[243,273],[87,97323,97324,97332,97340,97348,97368,97376,97397,97401,97410,97418,97426,97434,97442],{"__ignoreMap":163},[167,97325,97326,97328,97330],{"class":169,"line":170},[167,97327,174],{"class":173},[167,97329,299],{"class":177},[167,97331,185],{"class":173},[167,97333,97334,97336,97338],{"class":169,"line":188},[167,97335,307],{"class":173},[167,97337,56],{"class":177},[167,97339,185],{"class":173},[167,97341,97342,97344,97346],{"class":169,"line":205},[167,97343,1257],{"class":173},[167,97345,75],{"class":177},[167,97347,185],{"class":173},[167,97349,97350,97352,97354,97356,97358,97360,97362,97364,97366],{"class":169,"line":160},[167,97351,1268],{"class":173},[167,97353,62],{"class":177},[167,97355,18706],{"class":181},[167,97357,267],{"class":173},[167,97359,32502],{"class":201},[167,97361,10307],{"class":181},[167,97363,267],{"class":173},[167,97365,32509],{"class":201},[167,97367,185],{"class":173},[167,97369,97370,97372,97374],{"class":169,"line":238},[167,97371,32516],{"class":173},[167,97373,80],{"class":177},[167,97375,185],{"class":173},[167,97377,97379,97381,97383,97385,97387,97389,97391,97393,97395],{"class":97378,"line":243},[169,213],[167,97380,32526],{"class":173},[167,97382,1271],{"class":177},[167,97384,1274],{"class":181},[167,97386,267],{"class":173},[167,97388,32535],{"class":201},[167,97390,32538],{"class":181},[167,97392,267],{"class":173},[167,97394,32535],{"class":201},[167,97396,185],{"class":173},[167,97398,97399],{"class":169,"line":261},[167,97400,32549],{"class":173},[167,97402,97404,97406,97408],{"class":97403,"line":273},[169,213],[167,97405,32555],{"class":173},[167,97407,1271],{"class":177},[167,97409,185],{"class":173},[167,97411,97412,97414,97416],{"class":169,"line":279},[167,97413,32564],{"class":173},[167,97415,80],{"class":177},[167,97417,185],{"class":173},[167,97419,97420,97422,97424],{"class":169,"line":289},[167,97421,10170],{"class":173},[167,97423,62],{"class":177},[167,97425,185],{"class":173},[167,97427,97428,97430,97432],{"class":169,"line":294},[167,97429,1292],{"class":173},[167,97431,75],{"class":177},[167,97433,185],{"class":173},[167,97435,97436,97438,97440],{"class":169,"line":304},[167,97437,504],{"class":173},[167,97439,56],{"class":177},[167,97441,185],{"class":173},[167,97443,97444,97446,97448],{"class":169,"line":313},[167,97445,282],{"class":173},[167,97447,299],{"class":177},[167,97449,185],{"class":173},[3087,97451,32604,97453,97455],{"id":97452},"_4-v-slot-with-a-dynamic-argument",[87,97454,31708],{}," with a dynamic argument",[15,97457,97458],{},"Vue supports dynamic arguments using the same syntax as other dynamic directives:",[154,97460,97464],{"className":156,"code":97461,"filename":97462,"highlights":97463,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CWidgetShell>\n    \u003Ctemplate v-slot:[activeZone]>\n      \u003Cp>This block is injected into a dynamic area.\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n  \u003C\u002FWidgetShell>\n\u003C\u002Ftemplate>\n","Parent.vue",[205],[87,97465,97466,97474,97482,97494,97507,97515,97523],{"__ignoreMap":163},[167,97467,97468,97470,97472],{"class":169,"line":170},[167,97469,174],{"class":173},[167,97471,299],{"class":177},[167,97473,185],{"class":173},[167,97475,97476,97478,97480],{"class":169,"line":188},[167,97477,307],{"class":173},[167,97479,32632],{"class":177},[167,97481,185],{"class":173},[167,97483,97485,97487,97489,97491],{"class":97484,"line":205},[169,213],[167,97486,1257],{"class":173},[167,97488,299],{"class":177},[167,97490,32029],{"class":181},[167,97492,97493],{"class":173},":[activeZone]>\n",[167,97495,97496,97498,97500,97503,97505],{"class":169,"line":160},[167,97497,1268],{"class":173},[167,97499,15],{"class":177},[167,97501,97502],{"class":173},">This block is injected into a dynamic area.\u003C\u002F",[167,97504,15],{"class":177},[167,97506,185],{"class":173},[167,97508,97509,97511,97513],{"class":169,"line":238},[167,97510,1292],{"class":173},[167,97512,299],{"class":177},[167,97514,185],{"class":173},[167,97516,97517,97519,97521],{"class":169,"line":243},[167,97518,504],{"class":173},[167,97520,32632],{"class":177},[167,97522,185],{"class":173},[167,97524,97525,97527,97529],{"class":169,"line":261},[167,97526,282],{"class":173},[167,97528,299],{"class":177},[167,97530,185],{"class":173},[5367,97532,97533],{},[15,97534,97535],{},"Use it with moderation. If you have too many dynamic areas, your component API likely needs simplification.",[11,97537,97538],{"id":81771},"Composition API Example",[15,97540,97541],{},"The child exposes a base table, and the parent decides how to render the actions cell.",[154,97543,97545],{"className":156,"code":97544,"filename":32103,"language":162,"meta":163,"style":163},"\u003Cscript setup>\ndefineProps({\n  rows: {\n    type: Array,\n    required: true,\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctable class=\"min-w-full border-collapse\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth class=\"text-left\">Name\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Role\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Actions\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n        \u003Ctd>{{ user.name }}\u003C\u002Ftd>\n        \u003Ctd>{{ user.role }}\u003C\u002Ftd>\n        \u003Ctd>\n          \u003Cslot name=\"actions\" :user=\"user\">\n            \u003Cbutton type=\"button\">View profile\u003C\u002Fbutton>\n          \u003C\u002Fslot>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Ftemplate>\n",[87,97546,97547,97557,97563,97567,97571,97579,97583,97587,97595,97599,97607,97621,97629,97637,97656,97675,97694,97702,97710,97718,97738,97750,97762,97770,97790,97809,97817,97825,97833,97841,97849],{"__ignoreMap":163},[167,97548,97549,97551,97553,97555],{"class":169,"line":170},[167,97550,174],{"class":173},[167,97552,178],{"class":177},[167,97554,182],{"class":181},[167,97556,185],{"class":173},[167,97558,97559,97561],{"class":169,"line":188},[167,97560,369],{"class":181},[167,97562,372],{"class":173},[167,97564,97565],{"class":169,"line":205},[167,97566,32721],{"class":173},[167,97568,97569],{"class":169,"line":160},[167,97570,32726],{"class":173},[167,97572,97573,97575,97577],{"class":169,"line":238},[167,97574,387],{"class":173},[167,97576,390],{"class":219},[167,97578,393],{"class":173},[167,97580,97581],{"class":169,"line":243},[167,97582,398],{"class":173},[167,97584,97585],{"class":169,"line":261},[167,97586,27327],{"class":173},[167,97588,97589,97591,97593],{"class":169,"line":273},[167,97590,282],{"class":173},[167,97592,178],{"class":177},[167,97594,185],{"class":173},[167,97596,97597],{"class":169,"line":279},[167,97598,209],{"emptyLinePlaceholder":208},[167,97600,97601,97603,97605],{"class":169,"line":289},[167,97602,174],{"class":173},[167,97604,299],{"class":177},[167,97606,185],{"class":173},[167,97608,97609,97611,97613,97615,97617,97619],{"class":169,"line":294},[167,97610,307],{"class":173},[167,97612,56],{"class":177},[167,97614,1245],{"class":181},[167,97616,267],{"class":173},[167,97618,32775],{"class":201},[167,97620,185],{"class":173},[167,97622,97623,97625,97627],{"class":169,"line":304},[167,97624,1257],{"class":173},[167,97626,59],{"class":177},[167,97628,185],{"class":173},[167,97630,97631,97633,97635],{"class":169,"line":313},[167,97632,1268],{"class":173},[167,97634,62],{"class":177},[167,97636,185],{"class":173},[167,97638,97639,97641,97643,97645,97647,97649,97652,97654],{"class":169,"line":161},[167,97640,32516],{"class":173},[167,97642,65],{"class":177},[167,97644,1245],{"class":181},[167,97646,267],{"class":173},[167,97648,32806],{"class":201},[167,97650,97651],{"class":173},">Name\u003C\u002F",[167,97653,65],{"class":177},[167,97655,185],{"class":173},[167,97657,97658,97660,97662,97664,97666,97668,97671,97673],{"class":169,"line":335},[167,97659,32516],{"class":173},[167,97661,65],{"class":177},[167,97663,1245],{"class":181},[167,97665,267],{"class":173},[167,97667,32806],{"class":201},[167,97669,97670],{"class":173},">Role\u003C\u002F",[167,97672,65],{"class":177},[167,97674,185],{"class":173},[167,97676,97677,97679,97681,97683,97685,97687,97690,97692],{"class":169,"line":341},[167,97678,32516],{"class":173},[167,97680,65],{"class":177},[167,97682,1245],{"class":181},[167,97684,267],{"class":173},[167,97686,32806],{"class":201},[167,97688,97689],{"class":173},">Actions\u003C\u002F",[167,97691,65],{"class":177},[167,97693,185],{"class":173},[167,97695,97696,97698,97700],{"class":169,"line":489},[167,97697,10170],{"class":173},[167,97699,62],{"class":177},[167,97701,185],{"class":173},[167,97703,97704,97706,97708],{"class":169,"line":495},[167,97705,1292],{"class":173},[167,97707,59],{"class":177},[167,97709,185],{"class":173},[167,97711,97712,97714,97716],{"class":169,"line":501},[167,97713,1257],{"class":173},[167,97715,75],{"class":177},[167,97717,185],{"class":173},[167,97719,97720,97722,97724,97726,97728,97730,97732,97734,97736],{"class":169,"line":512},[167,97721,1268],{"class":173},[167,97723,62],{"class":177},[167,97725,18706],{"class":181},[167,97727,267],{"class":173},[167,97729,32888],{"class":201},[167,97731,10307],{"class":181},[167,97733,267],{"class":173},[167,97735,18718],{"class":201},[167,97737,185],{"class":173},[167,97739,97740,97742,97744,97746,97748],{"class":169,"line":781},[167,97741,32516],{"class":173},[167,97743,80],{"class":177},[167,97745,28624],{"class":173},[167,97747,80],{"class":177},[167,97749,185],{"class":173},[167,97751,97752,97754,97756,97758,97760],{"class":169,"line":786},[167,97753,32516],{"class":173},[167,97755,80],{"class":177},[167,97757,32917],{"class":173},[167,97759,80],{"class":177},[167,97761,185],{"class":173},[167,97763,97764,97766,97768],{"class":169,"line":2678},[167,97765,32516],{"class":173},[167,97767,80],{"class":177},[167,97769,185],{"class":173},[167,97771,97772,97774,97776,97778,97780,97782,97784,97786,97788],{"class":169,"line":2692},[167,97773,32526],{"class":173},[167,97775,1271],{"class":177},[167,97777,1274],{"class":181},[167,97779,267],{"class":173},[167,97781,32942],{"class":201},[167,97783,32945],{"class":181},[167,97785,267],{"class":173},[167,97787,27391],{"class":201},[167,97789,185],{"class":173},[167,97791,97792,97794,97796,97798,97800,97802,97805,97807],{"class":169,"line":3575},[167,97793,32956],{"class":173},[167,97795,507],{"class":177},[167,97797,1174],{"class":181},[167,97799,267],{"class":173},[167,97801,1179],{"class":201},[167,97803,97804],{"class":173},">View profile\u003C\u002F",[167,97806,507],{"class":177},[167,97808,185],{"class":173},[167,97810,97811,97813,97815],{"class":169,"line":5028},[167,97812,32555],{"class":173},[167,97814,1271],{"class":177},[167,97816,185],{"class":173},[167,97818,97819,97821,97823],{"class":169,"line":5037},[167,97820,32564],{"class":173},[167,97822,80],{"class":177},[167,97824,185],{"class":173},[167,97826,97827,97829,97831],{"class":169,"line":5046},[167,97828,10170],{"class":173},[167,97830,62],{"class":177},[167,97832,185],{"class":173},[167,97834,97835,97837,97839],{"class":169,"line":6756},[167,97836,1292],{"class":173},[167,97838,75],{"class":177},[167,97840,185],{"class":173},[167,97842,97843,97845,97847],{"class":169,"line":6778},[167,97844,504],{"class":173},[167,97846,56],{"class":177},[167,97848,185],{"class":173},[167,97850,97851,97853,97855],{"class":169,"line":6783},[167,97852,282],{"class":173},[167,97854,299],{"class":177},[167,97856,185],{"class":173},[154,97858,97860],{"className":156,"code":97859,"filename":33023,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from \"vue\";\nimport DataTable from \".\u002FDataTable.vue\";\n\nconst users = ref([\n  { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n  { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n]);\n\nfunction toggleStatus(user) {\n  user.active = !user.active;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDataTable :rows=\"users\">\n    \u003Ctemplate #actions=\"{ user }\">\n      \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n        {{ user.active ? \"Deactivate\" : \"Activate\" }}\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDataTable>\n\u003C\u002Ftemplate>\n",[87,97861,97862,97872,97884,97896,97900,97912,97932,97952,97956,97960,97972,97982,97986,97994,97998,98006,98020,98040,98060,98065,98073,98081,98089],{"__ignoreMap":163},[167,97863,97864,97866,97868,97870],{"class":169,"line":170},[167,97865,174],{"class":173},[167,97867,178],{"class":177},[167,97869,182],{"class":181},[167,97871,185],{"class":173},[167,97873,97874,97876,97878,97880,97882],{"class":169,"line":188},[167,97875,192],{"class":191},[167,97877,195],{"class":173},[167,97879,198],{"class":191},[167,97881,24041],{"class":201},[167,97883,24044],{"class":173},[167,97885,97886,97888,97890,97892,97894],{"class":169,"line":205},[167,97887,192],{"class":191},[167,97889,33054],{"class":173},[167,97891,198],{"class":191},[167,97893,33059],{"class":201},[167,97895,24044],{"class":173},[167,97897,97898],{"class":169,"line":160},[167,97899,209],{"emptyLinePlaceholder":208},[167,97901,97902,97904,97906,97908,97910],{"class":169,"line":238},[167,97903,216],{"class":191},[167,97905,16954],{"class":219},[167,97907,223],{"class":191},[167,97909,226],{"class":181},[167,97911,1827],{"class":173},[167,97913,97914,97916,97918,97920,97922,97924,97926,97928,97930],{"class":169,"line":243},[167,97915,1832],{"class":173},[167,97917,1835],{"class":219},[167,97919,1838],{"class":173},[167,97921,23487],{"class":201},[167,97923,33090],{"class":173},[167,97925,33093],{"class":201},[167,97927,33096],{"class":173},[167,97929,390],{"class":219},[167,97931,1856],{"class":173},[167,97933,97934,97936,97938,97940,97942,97944,97946,97948,97950],{"class":169,"line":261},[167,97935,1832],{"class":173},[167,97937,1853],{"class":219},[167,97939,1838],{"class":173},[167,97941,28507],{"class":201},[167,97943,33090],{"class":173},[167,97945,33115],{"class":201},[167,97947,33096],{"class":173},[167,97949,3392],{"class":219},[167,97951,1856],{"class":173},[167,97953,97954],{"class":169,"line":273},[167,97955,28545],{"class":173},[167,97957,97958],{"class":169,"line":279},[167,97959,209],{"emptyLinePlaceholder":208},[167,97961,97962,97964,97966,97968,97970],{"class":169,"line":289},[167,97963,246],{"class":191},[167,97965,33136],{"class":181},[167,97967,229],{"class":173},[167,97969,729],{"class":254},[167,97971,258],{"class":173},[167,97973,97974,97976,97978,97980],{"class":169,"line":294},[167,97975,33147],{"class":173},[167,97977,267],{"class":191},[167,97979,5625],{"class":191},[167,97981,33154],{"class":173},[167,97983,97984],{"class":169,"line":304},[167,97985,276],{"class":173},[167,97987,97988,97990,97992],{"class":169,"line":313},[167,97989,282],{"class":173},[167,97991,178],{"class":177},[167,97993,185],{"class":173},[167,97995,97996],{"class":169,"line":161},[167,97997,209],{"emptyLinePlaceholder":208},[167,97999,98000,98002,98004],{"class":169,"line":335},[167,98001,174],{"class":173},[167,98003,299],{"class":177},[167,98005,185],{"class":173},[167,98007,98008,98010,98012,98014,98016,98018],{"class":169,"line":341},[167,98009,307],{"class":173},[167,98011,32114],{"class":177},[167,98013,33187],{"class":181},[167,98015,267],{"class":173},[167,98017,33192],{"class":201},[167,98019,185],{"class":173},[167,98021,98022,98024,98026,98028,98030,98032,98034,98036,98038],{"class":169,"line":489},[167,98023,1257],{"class":173},[167,98025,299],{"class":177},[167,98027,33203],{"class":173},[167,98029,33206],{"class":181},[167,98031,267],{"class":173},[167,98033,5080],{"class":201},[167,98035,33213],{"class":173},[167,98037,5080],{"class":201},[167,98039,185],{"class":173},[167,98041,98042,98044,98046,98048,98050,98052,98054,98056,98058],{"class":169,"line":495},[167,98043,1268],{"class":173},[167,98045,507],{"class":177},[167,98047,1174],{"class":181},[167,98049,267],{"class":173},[167,98051,1179],{"class":201},[167,98053,1182],{"class":181},[167,98055,267],{"class":173},[167,98057,33236],{"class":201},[167,98059,185],{"class":173},[167,98061,98062],{"class":169,"line":501},[167,98063,98064],{"class":173},"        {{ user.active ? \"Deactivate\" : \"Activate\" }}\n",[167,98066,98067,98069,98071],{"class":169,"line":512},[167,98068,10170],{"class":173},[167,98070,507],{"class":177},[167,98072,185],{"class":173},[167,98074,98075,98077,98079],{"class":169,"line":781},[167,98076,1292],{"class":173},[167,98078,299],{"class":177},[167,98080,185],{"class":173},[167,98082,98083,98085,98087],{"class":169,"line":786},[167,98084,504],{"class":173},[167,98086,32114],{"class":177},[167,98088,185],{"class":173},[167,98090,98091,98093,98095],{"class":169,"line":2678},[167,98092,282],{"class":173},[167,98094,299],{"class":177},[167,98096,185],{"class":173},[11,98098,98099],{"id":82469},"Options API Example",[15,98101,98102],{},"The same behavior, now using Options API to keep conceptual equivalence.",[154,98104,98106],{"className":156,"code":98105,"filename":32103,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  props: {\n    rows: {\n      type: Array,\n      required: true,\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ctable class=\"min-w-full border-collapse\">\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth class=\"text-left\">Name\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Role\u003C\u002Fth>\n        \u003Cth class=\"text-left\">Actions\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n      \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n        \u003Ctd>{{ user.name }}\u003C\u002Ftd>\n        \u003Ctd>{{ user.role }}\u003C\u002Ftd>\n        \u003Ctd>\n          \u003Cslot name=\"actions\" :user=\"user\">\n            \u003Cbutton type=\"button\">View profile\u003C\u002Fbutton>\n          \u003C\u002Fslot>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Ftemplate>\n",[87,98107,98108,98116,98124,98128,98132,98136,98144,98148,98152,98156,98164,98168,98176,98190,98198,98206,98224,98242,98260,98268,98276,98284,98304,98316,98328,98336,98356,98374,98382,98390,98398,98406,98414],{"__ignoreMap":163},[167,98109,98110,98112,98114],{"class":169,"line":170},[167,98111,174],{"class":173},[167,98113,178],{"class":177},[167,98115,185],{"class":173},[167,98117,98118,98120,98122],{"class":169,"line":188},[167,98119,608],{"class":191},[167,98121,3991],{"class":191},[167,98123,1905],{"class":173},[167,98125,98126],{"class":169,"line":205},[167,98127,3999],{"class":173},[167,98129,98130],{"class":169,"line":160},[167,98131,33312],{"class":173},[167,98133,98134],{"class":169,"line":238},[167,98135,33317],{"class":173},[167,98137,98138,98140,98142],{"class":169,"line":243},[167,98139,4017],{"class":173},[167,98141,390],{"class":219},[167,98143,393],{"class":173},[167,98145,98146],{"class":169,"line":261},[167,98147,755],{"class":173},[167,98149,98150],{"class":169,"line":273},[167,98151,398],{"class":173},[167,98153,98154],{"class":169,"line":279},[167,98155,24148],{"class":173},[167,98157,98158,98160,98162],{"class":169,"line":289},[167,98159,282],{"class":173},[167,98161,178],{"class":177},[167,98163,185],{"class":173},[167,98165,98166],{"class":169,"line":294},[167,98167,209],{"emptyLinePlaceholder":208},[167,98169,98170,98172,98174],{"class":169,"line":304},[167,98171,174],{"class":173},[167,98173,299],{"class":177},[167,98175,185],{"class":173},[167,98177,98178,98180,98182,98184,98186,98188],{"class":169,"line":313},[167,98179,307],{"class":173},[167,98181,56],{"class":177},[167,98183,1245],{"class":181},[167,98185,267],{"class":173},[167,98187,32775],{"class":201},[167,98189,185],{"class":173},[167,98191,98192,98194,98196],{"class":169,"line":161},[167,98193,1257],{"class":173},[167,98195,59],{"class":177},[167,98197,185],{"class":173},[167,98199,98200,98202,98204],{"class":169,"line":335},[167,98201,1268],{"class":173},[167,98203,62],{"class":177},[167,98205,185],{"class":173},[167,98207,98208,98210,98212,98214,98216,98218,98220,98222],{"class":169,"line":341},[167,98209,32516],{"class":173},[167,98211,65],{"class":177},[167,98213,1245],{"class":181},[167,98215,267],{"class":173},[167,98217,32806],{"class":201},[167,98219,97651],{"class":173},[167,98221,65],{"class":177},[167,98223,185],{"class":173},[167,98225,98226,98228,98230,98232,98234,98236,98238,98240],{"class":169,"line":489},[167,98227,32516],{"class":173},[167,98229,65],{"class":177},[167,98231,1245],{"class":181},[167,98233,267],{"class":173},[167,98235,32806],{"class":201},[167,98237,97670],{"class":173},[167,98239,65],{"class":177},[167,98241,185],{"class":173},[167,98243,98244,98246,98248,98250,98252,98254,98256,98258],{"class":169,"line":495},[167,98245,32516],{"class":173},[167,98247,65],{"class":177},[167,98249,1245],{"class":181},[167,98251,267],{"class":173},[167,98253,32806],{"class":201},[167,98255,97689],{"class":173},[167,98257,65],{"class":177},[167,98259,185],{"class":173},[167,98261,98262,98264,98266],{"class":169,"line":501},[167,98263,10170],{"class":173},[167,98265,62],{"class":177},[167,98267,185],{"class":173},[167,98269,98270,98272,98274],{"class":169,"line":512},[167,98271,1292],{"class":173},[167,98273,59],{"class":177},[167,98275,185],{"class":173},[167,98277,98278,98280,98282],{"class":169,"line":781},[167,98279,1257],{"class":173},[167,98281,75],{"class":177},[167,98283,185],{"class":173},[167,98285,98286,98288,98290,98292,98294,98296,98298,98300,98302],{"class":169,"line":786},[167,98287,1268],{"class":173},[167,98289,62],{"class":177},[167,98291,18706],{"class":181},[167,98293,267],{"class":173},[167,98295,32888],{"class":201},[167,98297,10307],{"class":181},[167,98299,267],{"class":173},[167,98301,18718],{"class":201},[167,98303,185],{"class":173},[167,98305,98306,98308,98310,98312,98314],{"class":169,"line":2678},[167,98307,32516],{"class":173},[167,98309,80],{"class":177},[167,98311,28624],{"class":173},[167,98313,80],{"class":177},[167,98315,185],{"class":173},[167,98317,98318,98320,98322,98324,98326],{"class":169,"line":2692},[167,98319,32516],{"class":173},[167,98321,80],{"class":177},[167,98323,32917],{"class":173},[167,98325,80],{"class":177},[167,98327,185],{"class":173},[167,98329,98330,98332,98334],{"class":169,"line":3575},[167,98331,32516],{"class":173},[167,98333,80],{"class":177},[167,98335,185],{"class":173},[167,98337,98338,98340,98342,98344,98346,98348,98350,98352,98354],{"class":169,"line":5028},[167,98339,32526],{"class":173},[167,98341,1271],{"class":177},[167,98343,1274],{"class":181},[167,98345,267],{"class":173},[167,98347,32942],{"class":201},[167,98349,32945],{"class":181},[167,98351,267],{"class":173},[167,98353,27391],{"class":201},[167,98355,185],{"class":173},[167,98357,98358,98360,98362,98364,98366,98368,98370,98372],{"class":169,"line":5037},[167,98359,32956],{"class":173},[167,98361,507],{"class":177},[167,98363,1174],{"class":181},[167,98365,267],{"class":173},[167,98367,1179],{"class":201},[167,98369,97804],{"class":173},[167,98371,507],{"class":177},[167,98373,185],{"class":173},[167,98375,98376,98378,98380],{"class":169,"line":5046},[167,98377,32555],{"class":173},[167,98379,1271],{"class":177},[167,98381,185],{"class":173},[167,98383,98384,98386,98388],{"class":169,"line":6756},[167,98385,32564],{"class":173},[167,98387,80],{"class":177},[167,98389,185],{"class":173},[167,98391,98392,98394,98396],{"class":169,"line":6778},[167,98393,10170],{"class":173},[167,98395,62],{"class":177},[167,98397,185],{"class":173},[167,98399,98400,98402,98404],{"class":169,"line":6783},[167,98401,1292],{"class":173},[167,98403,75],{"class":177},[167,98405,185],{"class":173},[167,98407,98408,98410,98412],{"class":169,"line":6788},[167,98409,504],{"class":173},[167,98411,56],{"class":177},[167,98413,185],{"class":173},[167,98415,98416,98418,98420],{"class":169,"line":6793},[167,98417,282],{"class":173},[167,98419,299],{"class":177},[167,98421,185],{"class":173},[154,98423,98425],{"className":156,"code":98424,"filename":33023,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport DataTable from \".\u002FDataTable.vue\";\n\nexport default {\n  components: { DataTable },\n  data() {\n    return {\n      users: [\n        { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n        { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n      ],\n    };\n  },\n  methods: {\n    toggleStatus(user) {\n      user.active = !user.active;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDataTable :rows=\"users\">\n    \u003Ctemplate #actions=\"{ user }\">\n      \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n        {{ user.active ? \"Deactivate\" : \"Activate\" }}\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDataTable>\n\u003C\u002Ftemplate>\n",[87,98426,98427,98435,98447,98451,98459,98463,98469,98475,98479,98499,98519,98523,98527,98531,98535,98545,98555,98559,98563,98567,98575,98579,98587,98601,98621,98641,98645,98653,98661,98669],{"__ignoreMap":163},[167,98428,98429,98431,98433],{"class":169,"line":170},[167,98430,174],{"class":173},[167,98432,178],{"class":177},[167,98434,185],{"class":173},[167,98436,98437,98439,98441,98443,98445],{"class":169,"line":188},[167,98438,192],{"class":191},[167,98440,33054],{"class":173},[167,98442,198],{"class":191},[167,98444,33059],{"class":201},[167,98446,24044],{"class":173},[167,98448,98449],{"class":169,"line":205},[167,98450,209],{"emptyLinePlaceholder":208},[167,98452,98453,98455,98457],{"class":169,"line":160},[167,98454,608],{"class":191},[167,98456,3991],{"class":191},[167,98458,1905],{"class":173},[167,98460,98461],{"class":169,"line":238},[167,98462,33645],{"class":173},[167,98464,98465,98467],{"class":169,"line":243},[167,98466,7176],{"class":181},[167,98468,763],{"class":173},[167,98470,98471,98473],{"class":169,"line":261},[167,98472,1937],{"class":191},[167,98474,1905],{"class":173},[167,98476,98477],{"class":169,"line":273},[167,98478,28752],{"class":173},[167,98480,98481,98483,98485,98487,98489,98491,98493,98495,98497],{"class":169,"line":279},[167,98482,8677],{"class":173},[167,98484,1835],{"class":219},[167,98486,1838],{"class":173},[167,98488,23487],{"class":201},[167,98490,33090],{"class":173},[167,98492,33093],{"class":201},[167,98494,33096],{"class":173},[167,98496,390],{"class":219},[167,98498,1856],{"class":173},[167,98500,98501,98503,98505,98507,98509,98511,98513,98515,98517],{"class":169,"line":289},[167,98502,8677],{"class":173},[167,98504,1853],{"class":219},[167,98506,1838],{"class":173},[167,98508,28507],{"class":201},[167,98510,33090],{"class":173},[167,98512,33115],{"class":201},[167,98514,33096],{"class":173},[167,98516,3392],{"class":219},[167,98518,1856],{"class":173},[167,98520,98521],{"class":169,"line":294},[167,98522,16114],{"class":173},[167,98524,98525],{"class":169,"line":304},[167,98526,24370],{"class":173},[167,98528,98529],{"class":169,"line":313},[167,98530,398],{"class":173},[167,98532,98533],{"class":169,"line":161},[167,98534,4419],{"class":173},[167,98536,98537,98539,98541,98543],{"class":169,"line":335},[167,98538,33722],{"class":181},[167,98540,229],{"class":173},[167,98542,729],{"class":254},[167,98544,258],{"class":173},[167,98546,98547,98549,98551,98553],{"class":169,"line":341},[167,98548,33733],{"class":173},[167,98550,267],{"class":191},[167,98552,5625],{"class":191},[167,98554,33154],{"class":173},[167,98556,98557],{"class":169,"line":489},[167,98558,755],{"class":173},[167,98560,98561],{"class":169,"line":495},[167,98562,398],{"class":173},[167,98564,98565],{"class":169,"line":501},[167,98566,24148],{"class":173},[167,98568,98569,98571,98573],{"class":169,"line":512},[167,98570,282],{"class":173},[167,98572,178],{"class":177},[167,98574,185],{"class":173},[167,98576,98577],{"class":169,"line":781},[167,98578,209],{"emptyLinePlaceholder":208},[167,98580,98581,98583,98585],{"class":169,"line":786},[167,98582,174],{"class":173},[167,98584,299],{"class":177},[167,98586,185],{"class":173},[167,98588,98589,98591,98593,98595,98597,98599],{"class":169,"line":2678},[167,98590,307],{"class":173},[167,98592,32114],{"class":177},[167,98594,33187],{"class":181},[167,98596,267],{"class":173},[167,98598,33192],{"class":201},[167,98600,185],{"class":173},[167,98602,98603,98605,98607,98609,98611,98613,98615,98617,98619],{"class":169,"line":2692},[167,98604,1257],{"class":173},[167,98606,299],{"class":177},[167,98608,33203],{"class":173},[167,98610,33206],{"class":181},[167,98612,267],{"class":173},[167,98614,5080],{"class":201},[167,98616,33213],{"class":173},[167,98618,5080],{"class":201},[167,98620,185],{"class":173},[167,98622,98623,98625,98627,98629,98631,98633,98635,98637,98639],{"class":169,"line":3575},[167,98624,1268],{"class":173},[167,98626,507],{"class":177},[167,98628,1174],{"class":181},[167,98630,267],{"class":173},[167,98632,1179],{"class":201},[167,98634,1182],{"class":181},[167,98636,267],{"class":173},[167,98638,33236],{"class":201},[167,98640,185],{"class":173},[167,98642,98643],{"class":169,"line":5028},[167,98644,98064],{"class":173},[167,98646,98647,98649,98651],{"class":169,"line":5037},[167,98648,10170],{"class":173},[167,98650,507],{"class":177},[167,98652,185],{"class":173},[167,98654,98655,98657,98659],{"class":169,"line":5046},[167,98656,1292],{"class":173},[167,98658,299],{"class":177},[167,98660,185],{"class":173},[167,98662,98663,98665,98667],{"class":169,"line":6756},[167,98664,504],{"class":173},[167,98666,32114],{"class":177},[167,98668,185],{"class":173},[167,98670,98671,98673,98675],{"class":169,"line":6778},[167,98672,282],{"class":173},[167,98674,299],{"class":177},[167,98676,185],{"class":173},[22,98678,60191],{"id":60190},[33,98680,98681,98686,98689,98696,98699,98702],{},[36,98682,98683,98685],{},[87,98684,31708],{}," turns rigid components into reusable and expressive building blocks.",[36,98687,98688],{},"Use the default slot for primary content.",[36,98690,98691,98692,1025,98694,7863],{},"Use named slots for structure (",[87,98693,1260],{},[87,98695,1334],{},[36,98697,98698],{},"Use scoped slots when the child needs to share data and the parent controls rendering.",[36,98700,98701],{},"Define fallback content when it makes sense to avoid empty gaps.",[36,98703,98704],{},"Keep your API clear: props for configuration, slots for content, and emits for events.",[924,98706,33892],{},{"title":163,"searchDepth":188,"depth":188,"links":98708},[98709,98710,98711,98712,98713,98720,98727],{"id":62809,"depth":188,"text":62810},{"id":57680,"depth":188,"text":62839},{"id":62951,"depth":188,"text":62952},{"id":62979,"depth":188,"text":62980},{"id":57819,"depth":188,"text":63002,"children":98714},[98715,98717,98718,98719],{"id":96863,"depth":205,"text":98716},"1) Using v-slot on an element that is not a component or \u003Ctemplate>",{"id":96960,"depth":205,"text":96961},{"id":97020,"depth":205,"text":97021},{"id":97052,"depth":205,"text":97053},{"id":57925,"depth":188,"text":63234,"children":98721},[98722,98723,98724,98725],{"id":97090,"depth":205,"text":97091},{"id":97169,"depth":205,"text":97170},{"id":97317,"depth":205,"text":97318},{"id":97452,"depth":205,"text":98726},"4) v-slot with a dynamic argument",{"id":60190,"depth":188,"text":60191},"Cover image for the Vue Directives: v-slot article","Learn to master v-slot in Vue 3: default slots, named slots, and scoped slots, with clear examples in Composition API and Options API.",{"updatedAt":33919,"coverCaption":98731,"author":946,"keywords":98732},"Use v-slot to build more flexible and reusable components.",[3258,31708,33922,31956,98733,3260,3973],"reusable components","\u002Fblog\u002Fdirectives-vue-v-slot-guide.en",[98736],{"headline":98737,"author":98738,"datePublished":33919,"@type":961},"Vue Directives: v-slot with clear and practical examples",{"name":946,"@type":959},{"title":96593,"description":98729},"blog\u002Fdirectives-vue-v-slot-guide.en",[98742,98743,98744,98746],{"tag":60263,"color":26467},{"tag":1647,"color":1648},{"tag":98745,"color":1639},"Components",{"tag":60271,"color":7731},"bpGFw5Kv-DUZFXKYxYUPbQ1r9-YjesJZbWQG6CsKKsE",{"id":31699,"title":31700,"body":98749,"cover":33914,"coverAlt":33915,"date":33916,"description":33917,"draft":940,"extension":941,"lab":942,"locale":943,"meta":100787,"navigation":208,"path":33924,"schemaOrg":100789,"seo":100792,"series":26460,"seriesDescription":26461,"seriesOrder":261,"seriesTitle":26462,"slug":942,"stem":33930,"tags":100793,"__hash__":33936},{"type":8,"value":98750,"toc":100768},[98751,98755,98759,98761,98763,98765,98773,98779,98781,98785,98839,98902,98904,98924,98926,98942,98950,98952,98956,98970,98972,98974,98982,98986,98988,98994,98998,99006,99038,99073,99075,99079,99126,99128,99130,99132,99134,99148,99152,99154,99156,99158,99182,99184,99186,99259,99261,99405,99407,99538,99542,99544,99612,99616,99618,99620,99930,100168,100170,100172,100490,100744,100746,100766],[11,98752,26483,98753],{"id":31705},[87,98754,31708],{},[15,98756,98757,31713],{},[87,98758,31708],{},[15,98760,31716],{},[22,98762,26503],{"id":26502},[15,98764,31721],{},[33,98766,98767,98769,98771],{},[36,98768,31726],{},[36,98770,31729],{},[36,98772,31732],{},[5367,98774,98775],{},[15,98776,3810,98777,31739],{},[87,98778,31708],{},[22,98780,30500],{"id":30499},[15,98782,31744,98783,31748],{},[87,98784,31747],{},[154,98786,98788],{"className":156,"code":31751,"filename":31752,"highlights":98787,"language":162,"meta":163,"style":163},[205],[87,98789,98790,98798,98812,98823,98831],{"__ignoreMap":163},[167,98791,98792,98794,98796],{"class":169,"line":170},[167,98793,174],{"class":173},[167,98795,299],{"class":177},[167,98797,185],{"class":173},[167,98799,98800,98802,98804,98806,98808,98810],{"class":169,"line":188},[167,98801,307],{"class":173},[167,98803,10117],{"class":177},[167,98805,1245],{"class":181},[167,98807,267],{"class":173},[167,98809,31776],{"class":201},[167,98811,185],{"class":173},[167,98813,98815,98817,98819,98821],{"class":98814,"line":205},[169,213],[167,98816,1257],{"class":173},[167,98818,1271],{"class":177},[167,98820,31789],{"class":31788},[167,98822,185],{"class":173},[167,98824,98825,98827,98829],{"class":169,"line":160},[167,98826,504],{"class":173},[167,98828,10117],{"class":177},[167,98830,185],{"class":173},[167,98832,98833,98835,98837],{"class":169,"line":238},[167,98834,282],{"class":173},[167,98836,299],{"class":177},[167,98838,185],{"class":173},[154,98840,98842],{"className":156,"code":31810,"filename":15284,"highlights":98841,"language":162,"meta":163,"style":163},[188,238],[87,98843,98844,98852,98861,98873,98885,98894],{"__ignoreMap":163},[167,98845,98846,98848,98850],{"class":169,"line":170},[167,98847,174],{"class":173},[167,98849,299],{"class":177},[167,98851,185],{"class":173},[167,98853,98855,98857,98859],{"class":98854,"line":188},[169,213],[167,98856,307],{"class":173},[167,98858,31829],{"class":177},[167,98860,185],{"class":173},[167,98862,98863,98865,98867,98869,98871],{"class":169,"line":205},[167,98864,1257],{"class":173},[167,98866,22],{"class":177},[167,98868,31840],{"class":173},[167,98870,22],{"class":177},[167,98872,185],{"class":173},[167,98874,98875,98877,98879,98881,98883],{"class":169,"line":160},[167,98876,1257],{"class":173},[167,98878,15],{"class":177},[167,98880,31853],{"class":173},[167,98882,15],{"class":177},[167,98884,185],{"class":173},[167,98886,98888,98890,98892],{"class":98887,"line":238},[169,213],[167,98889,504],{"class":173},[167,98891,31829],{"class":177},[167,98893,185],{"class":173},[167,98895,98896,98898,98900],{"class":169,"line":243},[167,98897,282],{"class":173},[167,98899,299],{"class":177},[167,98901,185],{"class":173},[15,98903,31877],{},[33,98905,98906,98912,98918],{},[36,98907,98908,1108,98910],{},[3933,98909,31884],{},[87,98911,31747],{},[36,98913,98914,1108,98916],{},[3933,98915,31891],{},[87,98917,31894],{},[36,98919,98920,1108,98922],{},[3933,98921,31899],{},[87,98923,31902],{},[15,98925,31905],{},[33,98927,98928,98932,98938],{},[36,98929,98930,31913],{},[87,98931,31912],{},[36,98933,98934,1025,98936,31922],{},[87,98935,31918],{},[87,98937,31921],{},[36,98939,98940,31928],{},[87,98941,31927],{},[5367,98943,98944],{},[15,98945,98946,31936,98948,1679],{},[87,98947,31935],{},[87,98949,31939],{},[22,98951,6322],{"id":6321},[15,98953,1582,98954,13627],{},[87,98955,31708],{},[33,98957,98958,98960,98964],{},[36,98959,31950],{},[36,98961,31953,98962,4270],{},[87,98963,31956],{},[36,98965,31959,98966,1025,98968,31966],{},[87,98967,31962],{},[87,98969,31965],{},[22,98971,6349],{"id":6348},[15,98973,6355],{},[33,98975,98976,98978,98980],{},[36,98977,31975],{},[36,98979,31978],{},[36,98981,31981],{},[5367,98983,98984],{},[15,98985,31986],{},[22,98987,3085],{"id":3084},[3087,98989,26697,98990,31994,98992],{"id":31991},[87,98991,31708],{},[87,98993,31997],{},[15,98995,98996,32002],{},[87,98997,31708],{},[33,98999,99000,99002],{},[36,99001,32007],{},[36,99003,7915,99004,32012],{},[87,99005,31997],{},[154,99007,99009],{"className":156,"code":32015,"filename":32016,"highlights":99008,"language":162,"meta":163,"style":163},[170],[87,99010,99011,99026,99030],{"__ignoreMap":163},[167,99012,99014,99016,99018,99020,99022,99024],{"class":99013,"line":170},[169,213],[167,99015,174],{"class":173},[167,99017,1242],{"class":177},[167,99019,32029],{"class":181},[167,99021,583],{"class":173},[167,99023,1260],{"class":181},[167,99025,185],{"class":173},[167,99027,99028],{"class":169,"line":188},[167,99029,32040],{"class":173},[167,99031,99032,99034,99036],{"class":169,"line":205},[167,99033,282],{"class":173},[167,99035,1242],{"class":177},[167,99037,185],{"class":173},[154,99039,99041],{"className":156,"code":32051,"filename":32052,"highlights":99040,"language":162,"meta":163,"style":163},[188,160],[87,99042,99043,99051,99056,99060,99065],{"__ignoreMap":163},[167,99044,99045,99047,99049],{"class":169,"line":170},[167,99046,174],{"class":173},[167,99048,31829],{"class":177},[167,99050,185],{"class":173},[167,99052,99054],{"class":99053,"line":188},[169,213],[167,99055,32069],{"class":173},[167,99057,99058],{"class":169,"line":205},[167,99059,32074],{"class":173},[167,99061,99063],{"class":99062,"line":160},[169,213],[167,99064,32080],{"class":173},[167,99066,99067,99069,99071],{"class":169,"line":238},[167,99068,282],{"class":173},[167,99070,31829],{"class":177},[167,99072,185],{"class":173},[3087,99074,32092],{"id":32091},[15,99076,32095,99077,32099],{},[87,99078,32098],{},[154,99080,99082],{"className":156,"code":32102,"filename":32103,"highlights":99081,"language":162,"meta":163,"style":163},[170,188],[87,99083,99084,99105,99110,99114,99118],{"__ignoreMap":163},[167,99085,99087,99089,99091,99093,99095,99097,99099,99101,99103],{"class":99086,"line":170},[169,213],[167,99088,174],{"class":173},[167,99090,32114],{"class":177},[167,99092,5312],{"class":173},[167,99094,32119],{"class":181},[167,99096,267],{"class":173},[167,99098,5080],{"class":201},[167,99100,32126],{"class":173},[167,99102,5080],{"class":201},[167,99104,185],{"class":173},[167,99106,99108],{"class":99107,"line":188},[169,213],[167,99109,32136],{"class":173},[167,99111,99112],{"class":169,"line":205},[167,99113,32141],{"class":173},[167,99115,99116],{"class":169,"line":160},[167,99117,32080],{"class":173},[167,99119,99120,99122,99124],{"class":169,"line":238},[167,99121,282],{"class":173},[167,99123,32114],{"class":177},[167,99125,185],{"class":173},[15,99127,32156],{},[3087,99129,32160],{"id":32159},[15,99131,32163],{},[15,99133,31629],{},[33,99135,99136,99140,99144],{},[36,99137,99138,32173],{},[3933,99139,32172],{},[36,99141,99142,32178],{},[3933,99143,1647],{},[36,99145,99146,32184],{},[3933,99147,32183],{},[5367,99149,99150],{},[15,99151,32189],{},[3087,99153,32193],{"id":32192},[15,99155,32196],{},[15,99157,32199],{},[154,99159,99160],{"className":156,"code":32202,"filename":31752,"language":162,"meta":163,"style":163},[87,99161,99162,99170,99174],{"__ignoreMap":163},[167,99163,99164,99166,99168],{"class":169,"line":170},[167,99165,174],{"class":173},[167,99167,1271],{"class":177},[167,99169,185],{"class":173},[167,99171,99172],{"class":169,"line":188},[167,99173,32217],{"class":173},[167,99175,99176,99178,99180],{"class":169,"line":205},[167,99177,282],{"class":173},[167,99179,1271],{"class":177},[167,99181,185],{"class":173},[22,99183,7997],{"id":7996},[3087,99185,32231],{"id":32230},[154,99187,99189],{"className":156,"code":32234,"filename":31752,"highlights":99188,"language":162,"meta":163,"style":163},[205,238],[87,99190,99191,99199,99213,99222,99234,99243,99251],{"__ignoreMap":163},[167,99192,99193,99195,99197],{"class":169,"line":170},[167,99194,174],{"class":173},[167,99196,299],{"class":177},[167,99198,185],{"class":173},[167,99200,99201,99203,99205,99207,99209,99211],{"class":169,"line":188},[167,99202,307],{"class":173},[167,99204,3696],{"class":177},[167,99206,1245],{"class":181},[167,99208,267],{"class":173},[167,99210,31776],{"class":201},[167,99212,185],{"class":173},[167,99214,99216,99218,99220],{"class":99215,"line":205},[169,213],[167,99217,1257],{"class":173},[167,99219,1271],{"class":177},[167,99221,185],{"class":173},[167,99223,99224,99226,99228,99230,99232],{"class":169,"line":160},[167,99225,1268],{"class":173},[167,99227,15],{"class":177},[167,99229,32277],{"class":173},[167,99231,15],{"class":177},[167,99233,185],{"class":173},[167,99235,99237,99239,99241],{"class":99236,"line":238},[169,213],[167,99238,1292],{"class":173},[167,99240,1271],{"class":177},[167,99242,185],{"class":173},[167,99244,99245,99247,99249],{"class":169,"line":243},[167,99246,504],{"class":173},[167,99248,3696],{"class":177},[167,99250,185],{"class":173},[167,99252,99253,99255,99257],{"class":169,"line":261},[167,99254,282],{"class":173},[167,99256,299],{"class":177},[167,99258,185],{"class":173},[3087,99260,32310],{"id":32309},[154,99262,99264],{"className":156,"code":32313,"filename":1224,"highlights":99263,"language":162,"meta":163,"style":163},[160,273,304],[87,99265,99266,99274,99288,99296,99313,99321,99325,99333,99344,99352,99356,99364,99381,99389,99397],{"__ignoreMap":163},[167,99267,99268,99270,99272],{"class":169,"line":170},[167,99269,174],{"class":173},[167,99271,299],{"class":177},[167,99273,185],{"class":173},[167,99275,99276,99278,99280,99282,99284,99286],{"class":169,"line":188},[167,99277,307],{"class":173},[167,99279,10117],{"class":177},[167,99281,1245],{"class":181},[167,99283,267],{"class":173},[167,99285,1250],{"class":201},[167,99287,185],{"class":173},[167,99289,99290,99292,99294],{"class":169,"line":205},[167,99291,1257],{"class":173},[167,99293,1260],{"class":177},[167,99295,185],{"class":173},[167,99297,99299,99301,99303,99305,99307,99309,99311],{"class":99298,"line":160},[169,213],[167,99300,1268],{"class":173},[167,99302,1271],{"class":177},[167,99304,1274],{"class":181},[167,99306,267],{"class":173},[167,99308,1279],{"class":201},[167,99310,31789],{"class":31788},[167,99312,185],{"class":173},[167,99314,99315,99317,99319],{"class":169,"line":238},[167,99316,1292],{"class":173},[167,99318,1260],{"class":177},[167,99320,185],{"class":173},[167,99322,99323],{"class":169,"line":243},[167,99324,209],{"emptyLinePlaceholder":208},[167,99326,99327,99329,99331],{"class":169,"line":261},[167,99328,1257],{"class":173},[167,99330,1304],{"class":177},[167,99332,185],{"class":173},[167,99334,99336,99338,99340,99342],{"class":99335,"line":273},[169,213],[167,99337,1268],{"class":173},[167,99339,1271],{"class":177},[167,99341,31789],{"class":31788},[167,99343,185],{"class":173},[167,99345,99346,99348,99350],{"class":169,"line":279},[167,99347,1292],{"class":173},[167,99349,1304],{"class":177},[167,99351,185],{"class":173},[167,99353,99354],{"class":169,"line":289},[167,99355,209],{"emptyLinePlaceholder":208},[167,99357,99358,99360,99362],{"class":169,"line":294},[167,99359,1257],{"class":173},[167,99361,1334],{"class":177},[167,99363,185],{"class":173},[167,99365,99367,99369,99371,99373,99375,99377,99379],{"class":99366,"line":304},[169,213],[167,99368,1268],{"class":173},[167,99370,1271],{"class":177},[167,99372,1274],{"class":181},[167,99374,267],{"class":173},[167,99376,1349],{"class":201},[167,99378,31789],{"class":31788},[167,99380,185],{"class":173},[167,99382,99383,99385,99387],{"class":169,"line":313},[167,99384,1292],{"class":173},[167,99386,1334],{"class":177},[167,99388,185],{"class":173},[167,99390,99391,99393,99395],{"class":169,"line":161},[167,99392,504],{"class":173},[167,99394,10117],{"class":177},[167,99396,185],{"class":173},[167,99398,99399,99401,99403],{"class":169,"line":335},[167,99400,282],{"class":173},[167,99402,299],{"class":177},[167,99404,185],{"class":173},[3087,99406,32459],{"id":32458},[154,99408,99410],{"className":156,"code":32462,"filename":32103,"highlights":99409,"language":162,"meta":163,"style":163},[243,273],[87,99411,99412,99420,99428,99436,99456,99464,99485,99489,99498,99506,99514,99522,99530],{"__ignoreMap":163},[167,99413,99414,99416,99418],{"class":169,"line":170},[167,99415,174],{"class":173},[167,99417,299],{"class":177},[167,99419,185],{"class":173},[167,99421,99422,99424,99426],{"class":169,"line":188},[167,99423,307],{"class":173},[167,99425,56],{"class":177},[167,99427,185],{"class":173},[167,99429,99430,99432,99434],{"class":169,"line":205},[167,99431,1257],{"class":173},[167,99433,75],{"class":177},[167,99435,185],{"class":173},[167,99437,99438,99440,99442,99444,99446,99448,99450,99452,99454],{"class":169,"line":160},[167,99439,1268],{"class":173},[167,99441,62],{"class":177},[167,99443,18706],{"class":181},[167,99445,267],{"class":173},[167,99447,32502],{"class":201},[167,99449,10307],{"class":181},[167,99451,267],{"class":173},[167,99453,32509],{"class":201},[167,99455,185],{"class":173},[167,99457,99458,99460,99462],{"class":169,"line":238},[167,99459,32516],{"class":173},[167,99461,80],{"class":177},[167,99463,185],{"class":173},[167,99465,99467,99469,99471,99473,99475,99477,99479,99481,99483],{"class":99466,"line":243},[169,213],[167,99468,32526],{"class":173},[167,99470,1271],{"class":177},[167,99472,1274],{"class":181},[167,99474,267],{"class":173},[167,99476,32535],{"class":201},[167,99478,32538],{"class":181},[167,99480,267],{"class":173},[167,99482,32535],{"class":201},[167,99484,185],{"class":173},[167,99486,99487],{"class":169,"line":261},[167,99488,32549],{"class":173},[167,99490,99492,99494,99496],{"class":99491,"line":273},[169,213],[167,99493,32555],{"class":173},[167,99495,1271],{"class":177},[167,99497,185],{"class":173},[167,99499,99500,99502,99504],{"class":169,"line":279},[167,99501,32564],{"class":173},[167,99503,80],{"class":177},[167,99505,185],{"class":173},[167,99507,99508,99510,99512],{"class":169,"line":289},[167,99509,10170],{"class":173},[167,99511,62],{"class":177},[167,99513,185],{"class":173},[167,99515,99516,99518,99520],{"class":169,"line":294},[167,99517,1292],{"class":173},[167,99519,75],{"class":177},[167,99521,185],{"class":173},[167,99523,99524,99526,99528],{"class":169,"line":304},[167,99525,504],{"class":173},[167,99527,56],{"class":177},[167,99529,185],{"class":173},[167,99531,99532,99534,99536],{"class":169,"line":313},[167,99533,282],{"class":173},[167,99535,299],{"class":177},[167,99537,185],{"class":173},[3087,99539,32604,99540,32607],{"id":32603},[87,99541,31708],{},[15,99543,32610],{},[154,99545,99547],{"className":156,"code":32613,"filename":32614,"highlights":99546,"language":162,"meta":163,"style":163},[205],[87,99548,99549,99557,99565,99576,99588,99596,99604],{"__ignoreMap":163},[167,99550,99551,99553,99555],{"class":169,"line":170},[167,99552,174],{"class":173},[167,99554,299],{"class":177},[167,99556,185],{"class":173},[167,99558,99559,99561,99563],{"class":169,"line":188},[167,99560,307],{"class":173},[167,99562,32632],{"class":177},[167,99564,185],{"class":173},[167,99566,99568,99570,99572,99574],{"class":99567,"line":205},[169,213],[167,99569,1257],{"class":173},[167,99571,299],{"class":177},[167,99573,32029],{"class":181},[167,99575,32646],{"class":173},[167,99577,99578,99580,99582,99584,99586],{"class":169,"line":160},[167,99579,1268],{"class":173},[167,99581,15],{"class":177},[167,99583,32655],{"class":173},[167,99585,15],{"class":177},[167,99587,185],{"class":173},[167,99589,99590,99592,99594],{"class":169,"line":238},[167,99591,1292],{"class":173},[167,99593,299],{"class":177},[167,99595,185],{"class":173},[167,99597,99598,99600,99602],{"class":169,"line":243},[167,99599,504],{"class":173},[167,99601,32632],{"class":177},[167,99603,185],{"class":173},[167,99605,99606,99608,99610],{"class":169,"line":261},[167,99607,282],{"class":173},[167,99609,299],{"class":177},[167,99611,185],{"class":173},[5367,99613,99614],{},[15,99615,32688],{},[11,99617,32692],{"id":32691},[15,99619,32695],{},[154,99621,99622],{"className":156,"code":32698,"filename":32103,"language":162,"meta":163,"style":163},[87,99623,99624,99634,99640,99644,99648,99656,99660,99664,99672,99676,99684,99698,99706,99714,99732,99750,99768,99776,99784,99792,99812,99824,99836,99844,99864,99882,99890,99898,99906,99914,99922],{"__ignoreMap":163},[167,99625,99626,99628,99630,99632],{"class":169,"line":170},[167,99627,174],{"class":173},[167,99629,178],{"class":177},[167,99631,182],{"class":181},[167,99633,185],{"class":173},[167,99635,99636,99638],{"class":169,"line":188},[167,99637,369],{"class":181},[167,99639,372],{"class":173},[167,99641,99642],{"class":169,"line":205},[167,99643,32721],{"class":173},[167,99645,99646],{"class":169,"line":160},[167,99647,32726],{"class":173},[167,99649,99650,99652,99654],{"class":169,"line":238},[167,99651,387],{"class":173},[167,99653,390],{"class":219},[167,99655,393],{"class":173},[167,99657,99658],{"class":169,"line":243},[167,99659,398],{"class":173},[167,99661,99662],{"class":169,"line":261},[167,99663,27327],{"class":173},[167,99665,99666,99668,99670],{"class":169,"line":273},[167,99667,282],{"class":173},[167,99669,178],{"class":177},[167,99671,185],{"class":173},[167,99673,99674],{"class":169,"line":279},[167,99675,209],{"emptyLinePlaceholder":208},[167,99677,99678,99680,99682],{"class":169,"line":289},[167,99679,174],{"class":173},[167,99681,299],{"class":177},[167,99683,185],{"class":173},[167,99685,99686,99688,99690,99692,99694,99696],{"class":169,"line":294},[167,99687,307],{"class":173},[167,99689,56],{"class":177},[167,99691,1245],{"class":181},[167,99693,267],{"class":173},[167,99695,32775],{"class":201},[167,99697,185],{"class":173},[167,99699,99700,99702,99704],{"class":169,"line":304},[167,99701,1257],{"class":173},[167,99703,59],{"class":177},[167,99705,185],{"class":173},[167,99707,99708,99710,99712],{"class":169,"line":313},[167,99709,1268],{"class":173},[167,99711,62],{"class":177},[167,99713,185],{"class":173},[167,99715,99716,99718,99720,99722,99724,99726,99728,99730],{"class":169,"line":161},[167,99717,32516],{"class":173},[167,99719,65],{"class":177},[167,99721,1245],{"class":181},[167,99723,267],{"class":173},[167,99725,32806],{"class":201},[167,99727,32809],{"class":173},[167,99729,65],{"class":177},[167,99731,185],{"class":173},[167,99733,99734,99736,99738,99740,99742,99744,99746,99748],{"class":169,"line":335},[167,99735,32516],{"class":173},[167,99737,65],{"class":177},[167,99739,1245],{"class":181},[167,99741,267],{"class":173},[167,99743,32806],{"class":201},[167,99745,32828],{"class":173},[167,99747,65],{"class":177},[167,99749,185],{"class":173},[167,99751,99752,99754,99756,99758,99760,99762,99764,99766],{"class":169,"line":341},[167,99753,32516],{"class":173},[167,99755,65],{"class":177},[167,99757,1245],{"class":181},[167,99759,267],{"class":173},[167,99761,32806],{"class":201},[167,99763,32847],{"class":173},[167,99765,65],{"class":177},[167,99767,185],{"class":173},[167,99769,99770,99772,99774],{"class":169,"line":489},[167,99771,10170],{"class":173},[167,99773,62],{"class":177},[167,99775,185],{"class":173},[167,99777,99778,99780,99782],{"class":169,"line":495},[167,99779,1292],{"class":173},[167,99781,59],{"class":177},[167,99783,185],{"class":173},[167,99785,99786,99788,99790],{"class":169,"line":501},[167,99787,1257],{"class":173},[167,99789,75],{"class":177},[167,99791,185],{"class":173},[167,99793,99794,99796,99798,99800,99802,99804,99806,99808,99810],{"class":169,"line":512},[167,99795,1268],{"class":173},[167,99797,62],{"class":177},[167,99799,18706],{"class":181},[167,99801,267],{"class":173},[167,99803,32888],{"class":201},[167,99805,10307],{"class":181},[167,99807,267],{"class":173},[167,99809,18718],{"class":201},[167,99811,185],{"class":173},[167,99813,99814,99816,99818,99820,99822],{"class":169,"line":781},[167,99815,32516],{"class":173},[167,99817,80],{"class":177},[167,99819,28624],{"class":173},[167,99821,80],{"class":177},[167,99823,185],{"class":173},[167,99825,99826,99828,99830,99832,99834],{"class":169,"line":786},[167,99827,32516],{"class":173},[167,99829,80],{"class":177},[167,99831,32917],{"class":173},[167,99833,80],{"class":177},[167,99835,185],{"class":173},[167,99837,99838,99840,99842],{"class":169,"line":2678},[167,99839,32516],{"class":173},[167,99841,80],{"class":177},[167,99843,185],{"class":173},[167,99845,99846,99848,99850,99852,99854,99856,99858,99860,99862],{"class":169,"line":2692},[167,99847,32526],{"class":173},[167,99849,1271],{"class":177},[167,99851,1274],{"class":181},[167,99853,267],{"class":173},[167,99855,32942],{"class":201},[167,99857,32945],{"class":181},[167,99859,267],{"class":173},[167,99861,27391],{"class":201},[167,99863,185],{"class":173},[167,99865,99866,99868,99870,99872,99874,99876,99878,99880],{"class":169,"line":3575},[167,99867,32956],{"class":173},[167,99869,507],{"class":177},[167,99871,1174],{"class":181},[167,99873,267],{"class":173},[167,99875,1179],{"class":201},[167,99877,32967],{"class":173},[167,99879,507],{"class":177},[167,99881,185],{"class":173},[167,99883,99884,99886,99888],{"class":169,"line":5028},[167,99885,32555],{"class":173},[167,99887,1271],{"class":177},[167,99889,185],{"class":173},[167,99891,99892,99894,99896],{"class":169,"line":5037},[167,99893,32564],{"class":173},[167,99895,80],{"class":177},[167,99897,185],{"class":173},[167,99899,99900,99902,99904],{"class":169,"line":5046},[167,99901,10170],{"class":173},[167,99903,62],{"class":177},[167,99905,185],{"class":173},[167,99907,99908,99910,99912],{"class":169,"line":6756},[167,99909,1292],{"class":173},[167,99911,75],{"class":177},[167,99913,185],{"class":173},[167,99915,99916,99918,99920],{"class":169,"line":6778},[167,99917,504],{"class":173},[167,99919,56],{"class":177},[167,99921,185],{"class":173},[167,99923,99924,99926,99928],{"class":169,"line":6783},[167,99925,282],{"class":173},[167,99927,299],{"class":177},[167,99929,185],{"class":173},[154,99931,99932],{"className":156,"code":33022,"filename":33023,"language":162,"meta":163,"style":163},[87,99933,99934,99944,99956,99968,99972,99984,100004,100024,100028,100032,100044,100054,100058,100066,100070,100078,100092,100112,100132,100136,100144,100152,100160],{"__ignoreMap":163},[167,99935,99936,99938,99940,99942],{"class":169,"line":170},[167,99937,174],{"class":173},[167,99939,178],{"class":177},[167,99941,182],{"class":181},[167,99943,185],{"class":173},[167,99945,99946,99948,99950,99952,99954],{"class":169,"line":188},[167,99947,192],{"class":191},[167,99949,195],{"class":173},[167,99951,198],{"class":191},[167,99953,24041],{"class":201},[167,99955,24044],{"class":173},[167,99957,99958,99960,99962,99964,99966],{"class":169,"line":205},[167,99959,192],{"class":191},[167,99961,33054],{"class":173},[167,99963,198],{"class":191},[167,99965,33059],{"class":201},[167,99967,24044],{"class":173},[167,99969,99970],{"class":169,"line":160},[167,99971,209],{"emptyLinePlaceholder":208},[167,99973,99974,99976,99978,99980,99982],{"class":169,"line":238},[167,99975,216],{"class":191},[167,99977,16954],{"class":219},[167,99979,223],{"class":191},[167,99981,226],{"class":181},[167,99983,1827],{"class":173},[167,99985,99986,99988,99990,99992,99994,99996,99998,100000,100002],{"class":169,"line":243},[167,99987,1832],{"class":173},[167,99989,1835],{"class":219},[167,99991,1838],{"class":173},[167,99993,23487],{"class":201},[167,99995,33090],{"class":173},[167,99997,33093],{"class":201},[167,99999,33096],{"class":173},[167,100001,390],{"class":219},[167,100003,1856],{"class":173},[167,100005,100006,100008,100010,100012,100014,100016,100018,100020,100022],{"class":169,"line":261},[167,100007,1832],{"class":173},[167,100009,1853],{"class":219},[167,100011,1838],{"class":173},[167,100013,28507],{"class":201},[167,100015,33090],{"class":173},[167,100017,33115],{"class":201},[167,100019,33096],{"class":173},[167,100021,3392],{"class":219},[167,100023,1856],{"class":173},[167,100025,100026],{"class":169,"line":273},[167,100027,28545],{"class":173},[167,100029,100030],{"class":169,"line":279},[167,100031,209],{"emptyLinePlaceholder":208},[167,100033,100034,100036,100038,100040,100042],{"class":169,"line":289},[167,100035,246],{"class":191},[167,100037,33136],{"class":181},[167,100039,229],{"class":173},[167,100041,729],{"class":254},[167,100043,258],{"class":173},[167,100045,100046,100048,100050,100052],{"class":169,"line":294},[167,100047,33147],{"class":173},[167,100049,267],{"class":191},[167,100051,5625],{"class":191},[167,100053,33154],{"class":173},[167,100055,100056],{"class":169,"line":304},[167,100057,276],{"class":173},[167,100059,100060,100062,100064],{"class":169,"line":313},[167,100061,282],{"class":173},[167,100063,178],{"class":177},[167,100065,185],{"class":173},[167,100067,100068],{"class":169,"line":161},[167,100069,209],{"emptyLinePlaceholder":208},[167,100071,100072,100074,100076],{"class":169,"line":335},[167,100073,174],{"class":173},[167,100075,299],{"class":177},[167,100077,185],{"class":173},[167,100079,100080,100082,100084,100086,100088,100090],{"class":169,"line":341},[167,100081,307],{"class":173},[167,100083,32114],{"class":177},[167,100085,33187],{"class":181},[167,100087,267],{"class":173},[167,100089,33192],{"class":201},[167,100091,185],{"class":173},[167,100093,100094,100096,100098,100100,100102,100104,100106,100108,100110],{"class":169,"line":489},[167,100095,1257],{"class":173},[167,100097,299],{"class":177},[167,100099,33203],{"class":173},[167,100101,33206],{"class":181},[167,100103,267],{"class":173},[167,100105,5080],{"class":201},[167,100107,33213],{"class":173},[167,100109,5080],{"class":201},[167,100111,185],{"class":173},[167,100113,100114,100116,100118,100120,100122,100124,100126,100128,100130],{"class":169,"line":495},[167,100115,1268],{"class":173},[167,100117,507],{"class":177},[167,100119,1174],{"class":181},[167,100121,267],{"class":173},[167,100123,1179],{"class":201},[167,100125,1182],{"class":181},[167,100127,267],{"class":173},[167,100129,33236],{"class":201},[167,100131,185],{"class":173},[167,100133,100134],{"class":169,"line":501},[167,100135,33243],{"class":173},[167,100137,100138,100140,100142],{"class":169,"line":512},[167,100139,10170],{"class":173},[167,100141,507],{"class":177},[167,100143,185],{"class":173},[167,100145,100146,100148,100150],{"class":169,"line":781},[167,100147,1292],{"class":173},[167,100149,299],{"class":177},[167,100151,185],{"class":173},[167,100153,100154,100156,100158],{"class":169,"line":786},[167,100155,504],{"class":173},[167,100157,32114],{"class":177},[167,100159,185],{"class":173},[167,100161,100162,100164,100166],{"class":169,"line":2678},[167,100163,282],{"class":173},[167,100165,299],{"class":177},[167,100167,185],{"class":173},[11,100169,33279],{"id":33278},[15,100171,33282],{},[154,100173,100174],{"className":156,"code":33285,"filename":32103,"language":162,"meta":163,"style":163},[87,100175,100176,100184,100192,100196,100200,100204,100212,100216,100220,100224,100232,100236,100244,100258,100266,100274,100292,100310,100328,100336,100344,100352,100372,100384,100396,100404,100424,100442,100450,100458,100466,100474,100482],{"__ignoreMap":163},[167,100177,100178,100180,100182],{"class":169,"line":170},[167,100179,174],{"class":173},[167,100181,178],{"class":177},[167,100183,185],{"class":173},[167,100185,100186,100188,100190],{"class":169,"line":188},[167,100187,608],{"class":191},[167,100189,3991],{"class":191},[167,100191,1905],{"class":173},[167,100193,100194],{"class":169,"line":205},[167,100195,3999],{"class":173},[167,100197,100198],{"class":169,"line":160},[167,100199,33312],{"class":173},[167,100201,100202],{"class":169,"line":238},[167,100203,33317],{"class":173},[167,100205,100206,100208,100210],{"class":169,"line":243},[167,100207,4017],{"class":173},[167,100209,390],{"class":219},[167,100211,393],{"class":173},[167,100213,100214],{"class":169,"line":261},[167,100215,755],{"class":173},[167,100217,100218],{"class":169,"line":273},[167,100219,398],{"class":173},[167,100221,100222],{"class":169,"line":279},[167,100223,24148],{"class":173},[167,100225,100226,100228,100230],{"class":169,"line":289},[167,100227,282],{"class":173},[167,100229,178],{"class":177},[167,100231,185],{"class":173},[167,100233,100234],{"class":169,"line":294},[167,100235,209],{"emptyLinePlaceholder":208},[167,100237,100238,100240,100242],{"class":169,"line":304},[167,100239,174],{"class":173},[167,100241,299],{"class":177},[167,100243,185],{"class":173},[167,100245,100246,100248,100250,100252,100254,100256],{"class":169,"line":313},[167,100247,307],{"class":173},[167,100249,56],{"class":177},[167,100251,1245],{"class":181},[167,100253,267],{"class":173},[167,100255,32775],{"class":201},[167,100257,185],{"class":173},[167,100259,100260,100262,100264],{"class":169,"line":161},[167,100261,1257],{"class":173},[167,100263,59],{"class":177},[167,100265,185],{"class":173},[167,100267,100268,100270,100272],{"class":169,"line":335},[167,100269,1268],{"class":173},[167,100271,62],{"class":177},[167,100273,185],{"class":173},[167,100275,100276,100278,100280,100282,100284,100286,100288,100290],{"class":169,"line":341},[167,100277,32516],{"class":173},[167,100279,65],{"class":177},[167,100281,1245],{"class":181},[167,100283,267],{"class":173},[167,100285,32806],{"class":201},[167,100287,32809],{"class":173},[167,100289,65],{"class":177},[167,100291,185],{"class":173},[167,100293,100294,100296,100298,100300,100302,100304,100306,100308],{"class":169,"line":489},[167,100295,32516],{"class":173},[167,100297,65],{"class":177},[167,100299,1245],{"class":181},[167,100301,267],{"class":173},[167,100303,32806],{"class":201},[167,100305,32828],{"class":173},[167,100307,65],{"class":177},[167,100309,185],{"class":173},[167,100311,100312,100314,100316,100318,100320,100322,100324,100326],{"class":169,"line":495},[167,100313,32516],{"class":173},[167,100315,65],{"class":177},[167,100317,1245],{"class":181},[167,100319,267],{"class":173},[167,100321,32806],{"class":201},[167,100323,32847],{"class":173},[167,100325,65],{"class":177},[167,100327,185],{"class":173},[167,100329,100330,100332,100334],{"class":169,"line":501},[167,100331,10170],{"class":173},[167,100333,62],{"class":177},[167,100335,185],{"class":173},[167,100337,100338,100340,100342],{"class":169,"line":512},[167,100339,1292],{"class":173},[167,100341,59],{"class":177},[167,100343,185],{"class":173},[167,100345,100346,100348,100350],{"class":169,"line":781},[167,100347,1257],{"class":173},[167,100349,75],{"class":177},[167,100351,185],{"class":173},[167,100353,100354,100356,100358,100360,100362,100364,100366,100368,100370],{"class":169,"line":786},[167,100355,1268],{"class":173},[167,100357,62],{"class":177},[167,100359,18706],{"class":181},[167,100361,267],{"class":173},[167,100363,32888],{"class":201},[167,100365,10307],{"class":181},[167,100367,267],{"class":173},[167,100369,18718],{"class":201},[167,100371,185],{"class":173},[167,100373,100374,100376,100378,100380,100382],{"class":169,"line":2678},[167,100375,32516],{"class":173},[167,100377,80],{"class":177},[167,100379,28624],{"class":173},[167,100381,80],{"class":177},[167,100383,185],{"class":173},[167,100385,100386,100388,100390,100392,100394],{"class":169,"line":2692},[167,100387,32516],{"class":173},[167,100389,80],{"class":177},[167,100391,32917],{"class":173},[167,100393,80],{"class":177},[167,100395,185],{"class":173},[167,100397,100398,100400,100402],{"class":169,"line":3575},[167,100399,32516],{"class":173},[167,100401,80],{"class":177},[167,100403,185],{"class":173},[167,100405,100406,100408,100410,100412,100414,100416,100418,100420,100422],{"class":169,"line":5028},[167,100407,32526],{"class":173},[167,100409,1271],{"class":177},[167,100411,1274],{"class":181},[167,100413,267],{"class":173},[167,100415,32942],{"class":201},[167,100417,32945],{"class":181},[167,100419,267],{"class":173},[167,100421,27391],{"class":201},[167,100423,185],{"class":173},[167,100425,100426,100428,100430,100432,100434,100436,100438,100440],{"class":169,"line":5037},[167,100427,32956],{"class":173},[167,100429,507],{"class":177},[167,100431,1174],{"class":181},[167,100433,267],{"class":173},[167,100435,1179],{"class":201},[167,100437,32967],{"class":173},[167,100439,507],{"class":177},[167,100441,185],{"class":173},[167,100443,100444,100446,100448],{"class":169,"line":5046},[167,100445,32555],{"class":173},[167,100447,1271],{"class":177},[167,100449,185],{"class":173},[167,100451,100452,100454,100456],{"class":169,"line":6756},[167,100453,32564],{"class":173},[167,100455,80],{"class":177},[167,100457,185],{"class":173},[167,100459,100460,100462,100464],{"class":169,"line":6778},[167,100461,10170],{"class":173},[167,100463,62],{"class":177},[167,100465,185],{"class":173},[167,100467,100468,100470,100472],{"class":169,"line":6783},[167,100469,1292],{"class":173},[167,100471,75],{"class":177},[167,100473,185],{"class":173},[167,100475,100476,100478,100480],{"class":169,"line":6788},[167,100477,504],{"class":173},[167,100479,56],{"class":177},[167,100481,185],{"class":173},[167,100483,100484,100486,100488],{"class":169,"line":6793},[167,100485,282],{"class":173},[167,100487,299],{"class":177},[167,100489,185],{"class":173},[154,100491,100492],{"className":156,"code":33606,"filename":33023,"language":162,"meta":163,"style":163},[87,100493,100494,100502,100514,100518,100526,100530,100536,100542,100546,100566,100586,100590,100594,100598,100602,100612,100622,100626,100630,100634,100642,100646,100654,100668,100688,100708,100712,100720,100728,100736],{"__ignoreMap":163},[167,100495,100496,100498,100500],{"class":169,"line":170},[167,100497,174],{"class":173},[167,100499,178],{"class":177},[167,100501,185],{"class":173},[167,100503,100504,100506,100508,100510,100512],{"class":169,"line":188},[167,100505,192],{"class":191},[167,100507,33054],{"class":173},[167,100509,198],{"class":191},[167,100511,33059],{"class":201},[167,100513,24044],{"class":173},[167,100515,100516],{"class":169,"line":205},[167,100517,209],{"emptyLinePlaceholder":208},[167,100519,100520,100522,100524],{"class":169,"line":160},[167,100521,608],{"class":191},[167,100523,3991],{"class":191},[167,100525,1905],{"class":173},[167,100527,100528],{"class":169,"line":238},[167,100529,33645],{"class":173},[167,100531,100532,100534],{"class":169,"line":243},[167,100533,7176],{"class":181},[167,100535,763],{"class":173},[167,100537,100538,100540],{"class":169,"line":261},[167,100539,1937],{"class":191},[167,100541,1905],{"class":173},[167,100543,100544],{"class":169,"line":273},[167,100545,28752],{"class":173},[167,100547,100548,100550,100552,100554,100556,100558,100560,100562,100564],{"class":169,"line":279},[167,100549,8677],{"class":173},[167,100551,1835],{"class":219},[167,100553,1838],{"class":173},[167,100555,23487],{"class":201},[167,100557,33090],{"class":173},[167,100559,33093],{"class":201},[167,100561,33096],{"class":173},[167,100563,390],{"class":219},[167,100565,1856],{"class":173},[167,100567,100568,100570,100572,100574,100576,100578,100580,100582,100584],{"class":169,"line":289},[167,100569,8677],{"class":173},[167,100571,1853],{"class":219},[167,100573,1838],{"class":173},[167,100575,28507],{"class":201},[167,100577,33090],{"class":173},[167,100579,33115],{"class":201},[167,100581,33096],{"class":173},[167,100583,3392],{"class":219},[167,100585,1856],{"class":173},[167,100587,100588],{"class":169,"line":294},[167,100589,16114],{"class":173},[167,100591,100592],{"class":169,"line":304},[167,100593,24370],{"class":173},[167,100595,100596],{"class":169,"line":313},[167,100597,398],{"class":173},[167,100599,100600],{"class":169,"line":161},[167,100601,4419],{"class":173},[167,100603,100604,100606,100608,100610],{"class":169,"line":335},[167,100605,33722],{"class":181},[167,100607,229],{"class":173},[167,100609,729],{"class":254},[167,100611,258],{"class":173},[167,100613,100614,100616,100618,100620],{"class":169,"line":341},[167,100615,33733],{"class":173},[167,100617,267],{"class":191},[167,100619,5625],{"class":191},[167,100621,33154],{"class":173},[167,100623,100624],{"class":169,"line":489},[167,100625,755],{"class":173},[167,100627,100628],{"class":169,"line":495},[167,100629,398],{"class":173},[167,100631,100632],{"class":169,"line":501},[167,100633,24148],{"class":173},[167,100635,100636,100638,100640],{"class":169,"line":512},[167,100637,282],{"class":173},[167,100639,178],{"class":177},[167,100641,185],{"class":173},[167,100643,100644],{"class":169,"line":781},[167,100645,209],{"emptyLinePlaceholder":208},[167,100647,100648,100650,100652],{"class":169,"line":786},[167,100649,174],{"class":173},[167,100651,299],{"class":177},[167,100653,185],{"class":173},[167,100655,100656,100658,100660,100662,100664,100666],{"class":169,"line":2678},[167,100657,307],{"class":173},[167,100659,32114],{"class":177},[167,100661,33187],{"class":181},[167,100663,267],{"class":173},[167,100665,33192],{"class":201},[167,100667,185],{"class":173},[167,100669,100670,100672,100674,100676,100678,100680,100682,100684,100686],{"class":169,"line":2692},[167,100671,1257],{"class":173},[167,100673,299],{"class":177},[167,100675,33203],{"class":173},[167,100677,33206],{"class":181},[167,100679,267],{"class":173},[167,100681,5080],{"class":201},[167,100683,33213],{"class":173},[167,100685,5080],{"class":201},[167,100687,185],{"class":173},[167,100689,100690,100692,100694,100696,100698,100700,100702,100704,100706],{"class":169,"line":3575},[167,100691,1268],{"class":173},[167,100693,507],{"class":177},[167,100695,1174],{"class":181},[167,100697,267],{"class":173},[167,100699,1179],{"class":201},[167,100701,1182],{"class":181},[167,100703,267],{"class":173},[167,100705,33236],{"class":201},[167,100707,185],{"class":173},[167,100709,100710],{"class":169,"line":5028},[167,100711,33243],{"class":173},[167,100713,100714,100716,100718],{"class":169,"line":5037},[167,100715,10170],{"class":173},[167,100717,507],{"class":177},[167,100719,185],{"class":173},[167,100721,100722,100724,100726],{"class":169,"line":5046},[167,100723,1292],{"class":173},[167,100725,299],{"class":177},[167,100727,185],{"class":173},[167,100729,100730,100732,100734],{"class":169,"line":6756},[167,100731,504],{"class":173},[167,100733,32114],{"class":177},[167,100735,185],{"class":173},[167,100737,100738,100740,100742],{"class":169,"line":6778},[167,100739,282],{"class":173},[167,100741,299],{"class":177},[167,100743,185],{"class":173},[22,100745,7678],{"id":7677},[33,100747,100748,100752,100754,100760,100762,100764],{},[36,100749,100750,33870],{},[87,100751,31708],{},[36,100753,33873],{},[36,100755,33876,100756,1025,100758,7863],{},[87,100757,1260],{},[87,100759,1334],{},[36,100761,33883],{},[36,100763,33886],{},[36,100765,33889],{},[924,100767,33892],{},{"title":163,"searchDepth":188,"depth":188,"links":100769},[100770,100771,100772,100773,100774,100780,100786],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":100775},[100776,100777,100778,100779],{"id":31991,"depth":205,"text":33902},{"id":32091,"depth":205,"text":32092},{"id":32159,"depth":205,"text":32160},{"id":32192,"depth":205,"text":32193},{"id":7996,"depth":188,"text":7997,"children":100781},[100782,100783,100784,100785],{"id":32230,"depth":205,"text":32231},{"id":32309,"depth":205,"text":32310},{"id":32458,"depth":205,"text":32459},{"id":32603,"depth":205,"text":33912},{"id":7677,"depth":188,"text":7678},{"updatedAt":33919,"coverCaption":33920,"author":946,"keywords":100788},[3258,31708,33922,31956,33923,3260,3973],[100790],{"headline":33927,"author":100791,"datePublished":33919,"@type":961},{"name":946,"@type":959},{"title":31700,"description":33917},[100794,100795,100796,100797],{"tag":26466,"color":26467},{"tag":1647,"color":1648},{"tag":1625,"color":1639},{"tag":7730,"color":7731},{"id":100799,"title":100800,"body":100801,"cover":31677,"coverAlt":101989,"date":31679,"description":101990,"draft":940,"extension":941,"lab":942,"locale":942,"meta":101991,"navigation":208,"path":101994,"schemaOrg":101995,"seo":101998,"series":26460,"seriesDescription":60258,"seriesOrder":273,"seriesTitle":60259,"slug":942,"stem":101999,"tags":102000,"__hash__":102005},"blog\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.en.md","Vue Directives: v-text and v-html",{"type":8,"value":100802,"toc":101951},[100803,100810,100817,100834,100839,100841,100849,100863,100868,100870,100874,100880,100906,100909,100925,100933,100937,100943,100969,100972,100995,100997,101002,101021,101026,101045,101047,101052,101057,101062,101079,101081,101087,101089,101115,101129,101136,101139,101155,101167,101174,101183,101187,101190,101192,101198,101230,101237,101269,101273,101333,101335,101624,101626,101906,101908,101936,101949],[11,100804,68424,100806,1662,100808],{"id":100805},"vue-directives-v-text-vs-v-html",[87,100807,30434],{},[87,100809,30437],{},[15,100811,62803,100812,57920,100814,100816],{},[87,100813,30434],{},[87,100815,30437],{}," let you render dynamic content in the DOM, but they do not do the same thing and they do not carry the same risk level.",[33,100818,100819,100827],{},[36,100820,100821,100823,100824,1679],{},[87,100822,30434],{}," inserts ",[3933,100825,100826],{},"plain text",[36,100828,100829,100823,100831,1679],{},[87,100830,30437],{},[3933,100832,100833],{},"HTML interpreted by the browser",[5367,100835,100836],{},[15,100837,100838],{},"Understanding this difference is key to avoiding UI bugs and, more importantly, security vulnerabilities like XSS.",[22,100840,57636],{"id":57635},[15,100842,100843,100844,57920,100846,100848],{},"In real projects, content often comes from APIs, CMS platforms, or even user forms. Choosing the wrong directive between ",[87,100845,30434],{},[87,100847,30437],{}," can cause:",[33,100850,100851,100854,100857,100860],{},[36,100852,100853],{},"Broken layouts due to unexpected tags.",[36,100855,100856],{},"Exposure to XSS attacks.",[36,100858,100859],{},"Duplicated sanitization logic across multiple components.",[36,100861,100862],{},"Visual inconsistencies that are hard to debug.",[5367,100864,100865],{},[15,100866,100867],{},"Making the right decision early improves security, maintainability, and code consistency.",[22,100869,57681],{"id":57680},[3087,100871,100872],{"id":30434},[87,100873,30434],{},[15,100875,100876,100877,100879],{},"Renders the value as node text content (",[87,100878,30510],{},").\nIf the value includes HTML tags, they are displayed as literal text and not interpreted.",[154,100881,100882],{"className":156,"code":30514,"filename":15284,"language":162,"meta":163,"style":163},[87,100883,100884],{"__ignoreMap":163},[167,100885,100886,100888,100890,100892,100894,100896,100898,100900,100902,100904],{"class":169,"line":170},[167,100887,174],{"class":173},[167,100889,15],{"class":177},[167,100891,30525],{"class":181},[167,100893,267],{"class":173},[167,100895,5080],{"class":201},[167,100897,30532],{"class":173},[167,100899,5080],{"class":201},[167,100901,1282],{"class":173},[167,100903,15],{"class":177},[167,100905,185],{"class":173},[15,100907,100908],{},"It is equivalent to standard interpolation:",[154,100910,100911],{"className":156,"code":30546,"filename":15284,"language":162,"meta":163,"style":163},[87,100912,100913],{"__ignoreMap":163},[167,100914,100915,100917,100919,100921,100923],{"class":169,"line":170},[167,100916,174],{"class":173},[167,100918,15],{"class":177},[167,100920,29048],{"class":173},[167,100922,15],{"class":177},[167,100924,185],{"class":173},[5367,100926,100927],{},[15,100928,100929,100930,100932],{},"In practice, interpolation (",[87,100931,30568],{},") is usually the most common and readable way to render dynamic text.",[3087,100934,100935],{"id":30437},[87,100936,30437],{},[15,100938,100939,100940,100942],{},"Renders the value as HTML inside the node (",[87,100941,30579],{},").\nIf the string contains tags, the browser parses them as part of the DOM.",[154,100944,100945],{"className":156,"code":30583,"filename":15284,"language":162,"meta":163,"style":163},[87,100946,100947],{"__ignoreMap":163},[167,100948,100949,100951,100953,100955,100957,100959,100961,100963,100965,100967],{"class":169,"line":170},[167,100950,174],{"class":173},[167,100952,1242],{"class":177},[167,100954,30594],{"class":181},[167,100956,267],{"class":173},[167,100958,5080],{"class":201},[167,100960,30601],{"class":173},[167,100962,5080],{"class":201},[167,100964,1282],{"class":173},[167,100966,1242],{"class":177},[167,100968,185],{"class":173},[15,100970,100971],{},"Important considerations:",[33,100973,100974,100982,100989,100992],{},[36,100975,100976,16903,100978,100981],{},[87,100977,30437],{},[3933,100979,100980],{},"does not compile Vue templates"," inside injected content.",[36,100983,100984,100985,1025,100987,7863],{},"It does not bind directives (",[87,100986,13496],{},[87,100988,30630],{},[36,100990,100991],{},"It should not be used with untrusted content.",[36,100993,100994],{},"Injected content is outside the Vue template compiler scope.",[22,100996,57775],{"id":57774},[3087,100998,62955,101000,68578],{"id":100999},"use-v-text-when",[87,101001,30434],{},[33,101003,101004,101007,101015,101018],{},[36,101005,101006],{},"You render simple, safe dynamic text.",[36,101008,101009,101010,63104,101012,101014],{},"Content can include ",[87,101011,174],{},[87,101013,15863],{}," and you need those characters shown literally.",[36,101016,101017],{},"You do not need rich formatting.",[36,101019,101020],{},"You want the safest default option.",[3087,101022,62955,101024,68578],{"id":101023},"use-v-html-when",[87,101025,30437],{},[33,101027,101028,101031,101034,101042],{},[36,101029,101030],{},"You render previously sanitized HTML.",[36,101032,101033],{},"Content comes from a controlled CMS or trusted backend.",[36,101035,101036,101037,1025,101039,101041],{},"You need rich formatting (",[87,101038,30683],{},[87,101040,30686],{},", lists, links, etc.).",[36,101043,101044],{},"A clear, centralized sanitization strategy exists.",[22,101046,57799],{"id":57798},[3087,101048,80766,101050,68578],{"id":101049},"avoid-v-text-when",[87,101051,30434],{},[33,101053,101054],{},[36,101055,101056],{},"You need actual rich HTML formatting.",[3087,101058,80766,101060,68578],{"id":101059},"avoid-v-html-when",[87,101061,30437],{},[33,101063,101064,101067,101070,101073],{},[36,101065,101066],{},"Content comes directly from user input without sanitization.",[36,101068,101069],{},"You do not have a centralized sanitization strategy.",[36,101071,101072],{},"The same result can be achieved with explicit components (safer and easier to maintain).",[36,101074,101075,101076,101078],{},"You can model structure as data and render it with ",[87,101077,30726],{}," and components instead of injecting raw HTML.",[22,101080,57820],{"id":57819},[3087,101082,68621,101084,101086],{"id":101083},"_1-using-v-html-with-untrusted-content",[87,101085,30437],{}," with untrusted content",[15,101088,63012],{},[154,101090,101091],{"className":156,"code":30741,"filename":15284,"language":162,"meta":163,"style":163},[87,101092,101093],{"__ignoreMap":163},[167,101094,101095,101097,101099,101101,101103,101105,101107,101109,101111,101113],{"class":169,"line":170},[167,101096,174],{"class":173},[167,101098,1242],{"class":177},[167,101100,30594],{"class":181},[167,101102,267],{"class":173},[167,101104,5080],{"class":201},[167,101106,30758],{"class":173},[167,101108,5080],{"class":201},[167,101110,1282],{"class":173},[167,101112,1242],{"class":177},[167,101114,185],{"class":173},[15,101116,101117,101118,101120,101121,101123,101124,1025,101126,101128],{},"If ",[87,101119,30758],{}," is not sanitized, it can inject ",[87,101122,30774],{},", dangerous attributes (",[87,101125,30778],{},[87,101127,30781],{},"), or malicious URLs.",[3087,101130,101132,101133,101135],{"id":101131},"_2-expecting-v-html-to-process-vue-directives","2) Expecting ",[87,101134,30437],{}," to process Vue directives",[15,101137,101138],{},"This does not work:",[154,101140,101142],{"className":2879,"code":101141,"filename":25323,"language":2882,"meta":163,"style":163},"const html = '\u003Cbutton @click=\"save\">Save\u003C\u002Fbutton>'\n",[87,101143,101144],{"__ignoreMap":163},[167,101145,101146,101148,101150,101152],{"class":169,"line":170},[167,101147,216],{"class":191},[167,101149,30804],{"class":219},[167,101151,223],{"class":191},[167,101153,101154],{"class":201}," '\u003Cbutton @click=\"save\">Save\u003C\u002Fbutton>'\n",[5367,101156,101157],{},[15,101158,101159,101160,101162,101163,101166],{},"Directives inside a string injected with ",[87,101161,30437],{}," are ",[3933,101164,101165],{},"not compiled or bound"," to the component context.",[3087,101168,101170,101171,101173],{"id":101169},"_3-using-v-html-for-flexibility","3) Using ",[87,101172,30437],{}," for “flexibility”",[15,101175,101176,101177,101179,101180,101182],{},"If you only need text, use interpolation (",[87,101178,30568],{},") or ",[87,101181,30434],{},".\nIt is simpler, more readable, and safer.",[3087,101184,101186],{"id":101185},"_4-repeating-sanitization-in-every-component","4) Repeating sanitization in every component",[15,101188,101189],{},"Sanitization should live in a centralized function, composable, or utility.\nDuplicating it in each view increases inconsistency and error risk.",[22,101191,57926],{"id":57925},[3087,101193,101195,101196,6219],{"id":101194},"_1-safe-dynamic-message-v-text","1) Safe dynamic message (",[87,101197,30434],{},[154,101199,101200],{"className":156,"code":30854,"filename":15284,"language":162,"meta":163,"style":163},[87,101201,101202],{"__ignoreMap":163},[167,101203,101204,101206,101208,101210,101212,101214,101216,101218,101220,101222,101224,101226,101228],{"class":169,"line":170},[167,101205,174],{"class":173},[167,101207,15],{"class":177},[167,101209,1245],{"class":181},[167,101211,267],{"class":173},[167,101213,30869],{"class":201},[167,101215,30525],{"class":181},[167,101217,267],{"class":173},[167,101219,5080],{"class":201},[167,101221,30878],{"class":173},[167,101223,5080],{"class":201},[167,101225,1282],{"class":173},[167,101227,15],{"class":177},[167,101229,185],{"class":173},[3087,101231,101233,101234,101236],{"id":101232},"_2-rich-description-from-a-cms-v-html-prior-sanitization","2) Rich description from a CMS (",[87,101235,30437],{}," + prior sanitization)",[154,101238,101239],{"className":156,"code":30896,"filename":15284,"language":162,"meta":163,"style":163},[87,101240,101241],{"__ignoreMap":163},[167,101242,101243,101245,101247,101249,101251,101253,101255,101257,101259,101261,101263,101265,101267],{"class":169,"line":170},[167,101244,174],{"class":173},[167,101246,3696],{"class":177},[167,101248,1245],{"class":181},[167,101250,267],{"class":173},[167,101252,30911],{"class":201},[167,101254,30594],{"class":181},[167,101256,267],{"class":173},[167,101258,5080],{"class":201},[167,101260,30920],{"class":173},[167,101262,5080],{"class":201},[167,101264,1282],{"class":173},[167,101266,3696],{"class":177},[167,101268,185],{"class":173},[3087,101270,101272],{"id":101271},"_3-fallback-between-allowed-html-and-plain-text","3) Fallback between allowed HTML and plain text",[154,101274,101275],{"className":156,"code":30935,"filename":15284,"language":162,"meta":163,"style":163},[87,101276,101277,101309],{"__ignoreMap":163},[167,101278,101279,101281,101283,101285,101287,101289,101291,101293,101295,101297,101299,101301,101303,101305,101307],{"class":169,"line":170},[167,101280,174],{"class":173},[167,101282,1242],{"class":177},[167,101284,5694],{"class":191},[167,101286,267],{"class":173},[167,101288,5080],{"class":201},[167,101290,30952],{"class":173},[167,101292,5080],{"class":201},[167,101294,30594],{"class":181},[167,101296,267],{"class":173},[167,101298,5080],{"class":201},[167,101300,30920],{"class":173},[167,101302,5080],{"class":201},[167,101304,1282],{"class":173},[167,101306,1242],{"class":177},[167,101308,185],{"class":173},[167,101310,101311,101313,101315,101317,101319,101321,101323,101325,101327,101329,101331],{"class":169,"line":188},[167,101312,174],{"class":173},[167,101314,15],{"class":177},[167,101316,7038],{"class":191},[167,101318,30525],{"class":181},[167,101320,267],{"class":173},[167,101322,5080],{"class":201},[167,101324,30987],{"class":173},[167,101326,5080],{"class":201},[167,101328,1282],{"class":173},[167,101330,15],{"class":177},[167,101332,185],{"class":173},[22,101334,97538],{"id":81771},[154,101336,101338],{"className":156,"code":101337,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nconst allowRichText = ref(true);\nconst rawFromCms = ref(\"\u003Ch3>Updates\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> improves DX.\u003C\u002Fp>\");\nconst plainFallback = ref(\"Updates: Vue 3 improves DX.\");\n\nfunction sanitizeHtml(input: string) {\n  \u002F\u002F Placeholder: in production, use a robust library such as DOMPurify.\n  return input.replace(\u002F\u003Cscript.*?>.*?\u003C\\\u002Fscript>\u002Fgi, \"\");\n}\n\nconst safeHtml = computed(() => sanitizeHtml(rawFromCms.value));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Editorial content\u003C\u002Fh2>\n\n    \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C\u002Fdiv>\n    \u003Cp v-else v-text=\"plainFallback\">\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,101339,101340,101356,101368,101372,101388,101405,101422,101426,101442,101447,101487,101491,101495,101513,101521,101525,101533,101541,101554,101558,101588,101608,101616],{"__ignoreMap":163},[167,101341,101342,101344,101346,101348,101350,101352,101354],{"class":169,"line":170},[167,101343,174],{"class":173},[167,101345,178],{"class":177},[167,101347,182],{"class":181},[167,101349,1050],{"class":181},[167,101351,267],{"class":173},[167,101353,1055],{"class":201},[167,101355,185],{"class":173},[167,101357,101358,101360,101362,101364,101366],{"class":169,"line":188},[167,101359,192],{"class":191},[167,101361,1805],{"class":173},[167,101363,198],{"class":191},[167,101365,24041],{"class":201},[167,101367,24044],{"class":173},[167,101369,101370],{"class":169,"line":205},[167,101371,209],{"emptyLinePlaceholder":208},[167,101373,101374,101376,101378,101380,101382,101384,101386],{"class":169,"line":160},[167,101375,216],{"class":191},[167,101377,31041],{"class":219},[167,101379,223],{"class":191},[167,101381,226],{"class":181},[167,101383,229],{"class":173},[167,101385,390],{"class":219},[167,101387,24169],{"class":173},[167,101389,101390,101392,101394,101396,101398,101400,101403],{"class":169,"line":238},[167,101391,216],{"class":191},[167,101393,31058],{"class":219},[167,101395,223],{"class":191},[167,101397,226],{"class":181},[167,101399,229],{"class":173},[167,101401,101402],{"class":201},"\"\u003Ch3>Updates\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> improves DX.\u003C\u002Fp>\"",[167,101404,24169],{"class":173},[167,101406,101407,101409,101411,101413,101415,101417,101420],{"class":169,"line":243},[167,101408,216],{"class":191},[167,101410,31076],{"class":219},[167,101412,223],{"class":191},[167,101414,226],{"class":181},[167,101416,229],{"class":173},[167,101418,101419],{"class":201},"\"Updates: Vue 3 improves DX.\"",[167,101421,24169],{"class":173},[167,101423,101424],{"class":169,"line":261},[167,101425,209],{"emptyLinePlaceholder":208},[167,101427,101428,101430,101432,101434,101436,101438,101440],{"class":169,"line":273},[167,101429,246],{"class":191},[167,101431,31098],{"class":181},[167,101433,229],{"class":173},[167,101435,2650],{"class":254},[167,101437,583],{"class":191},[167,101439,586],{"class":219},[167,101441,258],{"class":173},[167,101443,101444],{"class":169,"line":279},[167,101445,101446],{"class":18662},"  \u002F\u002F Placeholder: in production, use a robust library such as DOMPurify.\n",[167,101448,101449,101451,101453,101455,101457,101459,101461,101463,101465,101467,101469,101471,101473,101475,101477,101479,101481,101483,101485],{"class":169,"line":289},[167,101450,1539],{"class":191},[167,101452,31120],{"class":173},[167,101454,31123],{"class":181},[167,101456,229],{"class":173},[167,101458,21857],{"class":201},[167,101460,31131],{"class":31130},[167,101462,1679],{"class":219},[167,101464,31136],{"class":191},[167,101466,15863],{"class":31130},[167,101468,1679],{"class":219},[167,101470,31136],{"class":191},[167,101472,174],{"class":31130},[167,101474,31148],{"class":31147},[167,101476,31151],{"class":31130},[167,101478,21857],{"class":201},[167,101480,31156],{"class":191},[167,101482,1025],{"class":173},[167,101484,31161],{"class":201},[167,101486,24169],{"class":173},[167,101488,101489],{"class":169,"line":294},[167,101490,276],{"class":173},[167,101492,101493],{"class":169,"line":304},[167,101494,209],{"emptyLinePlaceholder":208},[167,101496,101497,101499,101501,101503,101505,101507,101509,101511],{"class":169,"line":313},[167,101498,216],{"class":191},[167,101500,31178],{"class":219},[167,101502,223],{"class":191},[167,101504,1898],{"class":181},[167,101506,1493],{"class":173},[167,101508,639],{"class":191},[167,101510,31098],{"class":181},[167,101512,31191],{"class":173},[167,101514,101515,101517,101519],{"class":169,"line":161},[167,101516,282],{"class":173},[167,101518,178],{"class":177},[167,101520,185],{"class":173},[167,101522,101523],{"class":169,"line":335},[167,101524,209],{"emptyLinePlaceholder":208},[167,101526,101527,101529,101531],{"class":169,"line":341},[167,101528,174],{"class":173},[167,101530,299],{"class":177},[167,101532,185],{"class":173},[167,101534,101535,101537,101539],{"class":169,"line":489},[167,101536,307],{"class":173},[167,101538,10117],{"class":177},[167,101540,185],{"class":173},[167,101542,101543,101545,101547,101550,101552],{"class":169,"line":495},[167,101544,1257],{"class":173},[167,101546,22],{"class":177},[167,101548,101549],{"class":173},">Editorial content\u003C\u002F",[167,101551,22],{"class":177},[167,101553,185],{"class":173},[167,101555,101556],{"class":169,"line":501},[167,101557,209],{"emptyLinePlaceholder":208},[167,101559,101560,101562,101564,101566,101568,101570,101572,101574,101576,101578,101580,101582,101584,101586],{"class":169,"line":512},[167,101561,1257],{"class":173},[167,101563,1242],{"class":177},[167,101565,5694],{"class":181},[167,101567,267],{"class":173},[167,101569,31249],{"class":201},[167,101571,1245],{"class":181},[167,101573,267],{"class":173},[167,101575,30911],{"class":201},[167,101577,30594],{"class":181},[167,101579,267],{"class":173},[167,101581,31262],{"class":201},[167,101583,1282],{"class":173},[167,101585,1242],{"class":177},[167,101587,185],{"class":173},[167,101589,101590,101592,101594,101596,101598,101600,101602,101604,101606],{"class":169,"line":781},[167,101591,1257],{"class":173},[167,101593,15],{"class":177},[167,101595,7038],{"class":181},[167,101597,30525],{"class":181},[167,101599,267],{"class":173},[167,101601,31283],{"class":201},[167,101603,1282],{"class":173},[167,101605,15],{"class":177},[167,101607,185],{"class":173},[167,101609,101610,101612,101614],{"class":169,"line":786},[167,101611,504],{"class":173},[167,101613,10117],{"class":177},[167,101615,185],{"class":173},[167,101617,101618,101620,101622],{"class":169,"line":2678},[167,101619,282],{"class":173},[167,101621,299],{"class":177},[167,101623,185],{"class":173},[22,101625,98099],{"id":82469},[154,101627,101629],{"className":156,"code":101628,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      allowRichText: true,\n      rawFromCms: \"\u003Ch3>Updates\u003C\u002Fh3>\u003Cp>\u003Cstrong>Vue 3\u003C\u002Fstrong> improves DX.\u003C\u002Fp>\",\n      plainFallback: \"Updates: Vue 3 improves DX.\",\n    };\n  },\n  computed: {\n    safeHtml() {\n      return this.sanitizeHtml(this.rawFromCms);\n    },\n  },\n  methods: {\n    sanitizeHtml(input) {\n      \u002F\u002F Placeholder: in production, use a robust library such as DOMPurify.\n      return input.replace(\u002F\u003Cscript.*?>.*?\u003C\\\u002Fscript>\u002Fgi, \"\");\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection>\n    \u003Ch2>Editorial content\u003C\u002Fh2>\n\n    \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C\u002Fdiv>\n    \u003Cp v-else v-text=\"plainFallback\">\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,101630,101631,101639,101647,101653,101659,101667,101675,101683,101687,101691,101695,101701,101717,101721,101725,101729,101739,101744,101784,101788,101792,101796,101804,101808,101816,101824,101836,101840,101870,101890,101898],{"__ignoreMap":163},[167,101632,101633,101635,101637],{"class":169,"line":170},[167,101634,174],{"class":173},[167,101636,178],{"class":177},[167,101638,185],{"class":173},[167,101640,101641,101643,101645],{"class":169,"line":188},[167,101642,608],{"class":191},[167,101644,3991],{"class":191},[167,101646,1905],{"class":173},[167,101648,101649,101651],{"class":169,"line":205},[167,101650,7176],{"class":181},[167,101652,763],{"class":173},[167,101654,101655,101657],{"class":169,"line":160},[167,101656,1937],{"class":191},[167,101658,1905],{"class":173},[167,101660,101661,101663,101665],{"class":169,"line":238},[167,101662,31343],{"class":173},[167,101664,390],{"class":219},[167,101666,393],{"class":173},[167,101668,101669,101671,101673],{"class":169,"line":243},[167,101670,31352],{"class":173},[167,101672,101402],{"class":201},[167,101674,393],{"class":173},[167,101676,101677,101679,101681],{"class":169,"line":261},[167,101678,31361],{"class":173},[167,101680,101419],{"class":201},[167,101682,393],{"class":173},[167,101684,101685],{"class":169,"line":273},[167,101686,24370],{"class":173},[167,101688,101689],{"class":169,"line":279},[167,101690,398],{"class":173},[167,101692,101693],{"class":169,"line":289},[167,101694,8755],{"class":173},[167,101696,101697,101699],{"class":169,"line":294},[167,101698,31382],{"class":181},[167,101700,763],{"class":173},[167,101702,101703,101705,101707,101709,101711,101713,101715],{"class":169,"line":304},[167,101704,8767],{"class":191},[167,101706,7351],{"class":219},[167,101708,1679],{"class":173},[167,101710,31395],{"class":181},[167,101712,229],{"class":173},[167,101714,4927],{"class":219},[167,101716,31402],{"class":173},[167,101718,101719],{"class":169,"line":313},[167,101720,755],{"class":173},[167,101722,101723],{"class":169,"line":161},[167,101724,398],{"class":173},[167,101726,101727],{"class":169,"line":335},[167,101728,4419],{"class":173},[167,101730,101731,101733,101735,101737],{"class":169,"line":341},[167,101732,31419],{"class":181},[167,101734,229],{"class":173},[167,101736,2650],{"class":254},[167,101738,258],{"class":173},[167,101740,101741],{"class":169,"line":489},[167,101742,101743],{"class":18662},"      \u002F\u002F Placeholder: in production, use a robust library such as DOMPurify.\n",[167,101745,101746,101748,101750,101752,101754,101756,101758,101760,101762,101764,101766,101768,101770,101772,101774,101776,101778,101780,101782],{"class":169,"line":495},[167,101747,8767],{"class":191},[167,101749,31120],{"class":173},[167,101751,31123],{"class":181},[167,101753,229],{"class":173},[167,101755,21857],{"class":201},[167,101757,31131],{"class":31130},[167,101759,1679],{"class":219},[167,101761,31136],{"class":191},[167,101763,15863],{"class":31130},[167,101765,1679],{"class":219},[167,101767,31136],{"class":191},[167,101769,174],{"class":31130},[167,101771,31148],{"class":31147},[167,101773,31151],{"class":31130},[167,101775,21857],{"class":201},[167,101777,31156],{"class":191},[167,101779,1025],{"class":173},[167,101781,31161],{"class":201},[167,101783,24169],{"class":173},[167,101785,101786],{"class":169,"line":501},[167,101787,755],{"class":173},[167,101789,101790],{"class":169,"line":512},[167,101791,398],{"class":173},[167,101793,101794],{"class":169,"line":781},[167,101795,24148],{"class":173},[167,101797,101798,101800,101802],{"class":169,"line":786},[167,101799,282],{"class":173},[167,101801,178],{"class":177},[167,101803,185],{"class":173},[167,101805,101806],{"class":169,"line":2678},[167,101807,209],{"emptyLinePlaceholder":208},[167,101809,101810,101812,101814],{"class":169,"line":2692},[167,101811,174],{"class":173},[167,101813,299],{"class":177},[167,101815,185],{"class":173},[167,101817,101818,101820,101822],{"class":169,"line":3575},[167,101819,307],{"class":173},[167,101821,10117],{"class":177},[167,101823,185],{"class":173},[167,101825,101826,101828,101830,101832,101834],{"class":169,"line":5028},[167,101827,1257],{"class":173},[167,101829,22],{"class":177},[167,101831,101549],{"class":173},[167,101833,22],{"class":177},[167,101835,185],{"class":173},[167,101837,101838],{"class":169,"line":5037},[167,101839,209],{"emptyLinePlaceholder":208},[167,101841,101842,101844,101846,101848,101850,101852,101854,101856,101858,101860,101862,101864,101866,101868],{"class":169,"line":5046},[167,101843,1257],{"class":173},[167,101845,1242],{"class":177},[167,101847,5694],{"class":181},[167,101849,267],{"class":173},[167,101851,31249],{"class":201},[167,101853,1245],{"class":181},[167,101855,267],{"class":173},[167,101857,30911],{"class":201},[167,101859,30594],{"class":181},[167,101861,267],{"class":173},[167,101863,31262],{"class":201},[167,101865,1282],{"class":173},[167,101867,1242],{"class":177},[167,101869,185],{"class":173},[167,101871,101872,101874,101876,101878,101880,101882,101884,101886,101888],{"class":169,"line":6756},[167,101873,1257],{"class":173},[167,101875,15],{"class":177},[167,101877,7038],{"class":181},[167,101879,30525],{"class":181},[167,101881,267],{"class":173},[167,101883,31283],{"class":201},[167,101885,1282],{"class":173},[167,101887,15],{"class":177},[167,101889,185],{"class":173},[167,101891,101892,101894,101896],{"class":169,"line":6778},[167,101893,504],{"class":173},[167,101895,10117],{"class":177},[167,101897,185],{"class":173},[167,101899,101900,101902,101904],{"class":169,"line":6783},[167,101901,282],{"class":173},[167,101903,299],{"class":177},[167,101905,185],{"class":173},[22,101907,60191],{"id":60190},[33,101909,101910,101915,101923,101928,101933],{},[36,101911,101912,101914],{},[87,101913,30434],{}," is for plain text and is the default option when you do not need HTML.",[36,101916,101917,101918,101920,101921,1679],{},"Interpolation (",[87,101919,30568],{},") is often more idiomatic than ",[87,101922,30434],{},[36,101924,101925,101927],{},[87,101926,30437],{}," should only be used with trusted or previously sanitized content.",[36,101929,101930,101932],{},[87,101931,30437],{}," does not compile or bind Vue directives.",[36,101934,101935],{},"Centralize sanitization in a clear layer (utility\u002Fcomposable).",[5367,101937,101938],{},[15,101939,101940,101942,101943,101945,101946,101948],{},[3933,101941,97027],{}," if in doubt, start with interpolation or ",[87,101944,30434],{},", and use ",[87,101947,30437],{}," only when the use case explicitly requires it.",[924,101950,31639],{},{"title":163,"searchDepth":188,"depth":188,"links":101952},[101953,101954,101958,101964,101970,101979,101986,101987,101988],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681,"children":101955},[101956,101957],{"id":30434,"depth":205,"text":30434},{"id":30437,"depth":205,"text":30437},{"id":57774,"depth":188,"text":57775,"children":101959},[101960,101962],{"id":100999,"depth":205,"text":101961},"Use v-text when:",{"id":101023,"depth":205,"text":101963},"Use v-html when:",{"id":57798,"depth":188,"text":57799,"children":101965},[101966,101968],{"id":101049,"depth":205,"text":101967},"Avoid v-text when:",{"id":101059,"depth":205,"text":101969},"Avoid v-html when:",{"id":57819,"depth":188,"text":57820,"children":101971},[101972,101974,101976,101978],{"id":101083,"depth":205,"text":101973},"1) Using v-html with untrusted content",{"id":101131,"depth":205,"text":101975},"2) Expecting v-html to process Vue directives",{"id":101169,"depth":205,"text":101977},"3) Using v-html for “flexibility”",{"id":101185,"depth":205,"text":101186},{"id":57925,"depth":188,"text":57926,"children":101980},[101981,101983,101985],{"id":101194,"depth":205,"text":101982},"1) Safe dynamic message (v-text)",{"id":101232,"depth":205,"text":101984},"2) Rich description from a CMS (v-html + prior sanitization)",{"id":101271,"depth":205,"text":101272},{"id":81771,"depth":188,"text":97538},{"id":82469,"depth":188,"text":98099},{"id":60190,"depth":188,"text":60191},"Example of v-text and v-html usage in Vue.js","Learn when to use v-text and v-html in Vue, key differences, security risks, common mistakes, and recommended patterns with Composition API and Options API examples.",{"updatedAt":31682,"coverCaption":101992,"keywords":101993},"Learn to use v-text and v-html safely and effectively in your Vue projects",[3258,30434,30437,31685,73983,3260,3973],"\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.en",[101996],{"headline":100800,"author":101997,"datePublished":31682,"@type":961},{"name":946,"@type":959},{"title":100800,"description":101990},"blog\u002Fdirectives-vue-v-text-v-html-guide.en",[102001,102002,102003,102004],{"tag":60263,"color":26467},{"tag":27757,"color":27758},{"tag":69637,"color":9170},{"tag":65670,"color":5425},"yJ0I84sIINMrCqyUm2OeYmKCDocgvpf933S_GU-SkCs",{"id":30425,"title":30426,"body":102007,"cover":31677,"coverAlt":31678,"date":31679,"description":31680,"draft":940,"extension":941,"lab":942,"locale":942,"meta":103089,"navigation":208,"path":31686,"schemaOrg":103091,"seo":103094,"series":26460,"seriesDescription":26461,"seriesOrder":273,"seriesTitle":26462,"slug":942,"stem":31691,"tags":103095,"__hash__":31697},{"type":8,"value":102008,"toc":103061},[102009,102015,102021,102035,102039,102041,102047,102057,102061,102063,102067,102071,102097,102099,102115,102121,102125,102129,102155,102157,102175,102177,102181,102195,102199,102213,102215,102219,102223,102227,102239,102241,102245,102247,102273,102283,102287,102289,102303,102311,102315,102321,102323,102325,102327,102331,102363,102367,102399,102401,102461,102463,102747,103025,103027,103049,103059],[11,102010,26483,102011,1662,102013],{"id":30431},[87,102012,30434],{},[87,102014,30437],{},[15,102016,30440,102017,1028,102019,30445],{},[87,102018,30434],{},[87,102020,30437],{},[33,102022,102023,102029],{},[36,102024,102025,30452,102027,1679],{},[87,102026,30434],{},[3933,102028,30455],{},[36,102030,102031,30452,102033,1679],{},[87,102032,30437],{},[3933,102034,30462],{},[5367,102036,102037],{},[15,102038,30467],{},[22,102040,26503],{"id":26502},[15,102042,30472,102043,1028,102045,30477],{},[87,102044,30434],{},[87,102046,30437],{},[33,102048,102049,102051,102053,102055],{},[36,102050,30482],{},[36,102052,30485],{},[36,102054,30488],{},[36,102056,30491],{},[5367,102058,102059],{},[15,102060,30496],{},[22,102062,30500],{"id":30499},[3087,102064,102065],{"id":30434},[87,102066,30434],{},[15,102068,30507,102069,30511],{},[87,102070,30510],{},[154,102072,102073],{"className":156,"code":30514,"filename":15284,"language":162,"meta":163,"style":163},[87,102074,102075],{"__ignoreMap":163},[167,102076,102077,102079,102081,102083,102085,102087,102089,102091,102093,102095],{"class":169,"line":170},[167,102078,174],{"class":173},[167,102080,15],{"class":177},[167,102082,30525],{"class":181},[167,102084,267],{"class":173},[167,102086,5080],{"class":201},[167,102088,30532],{"class":173},[167,102090,5080],{"class":201},[167,102092,1282],{"class":173},[167,102094,15],{"class":177},[167,102096,185],{"class":173},[15,102098,30543],{},[154,102100,102101],{"className":156,"code":30546,"filename":15284,"language":162,"meta":163,"style":163},[87,102102,102103],{"__ignoreMap":163},[167,102104,102105,102107,102109,102111,102113],{"class":169,"line":170},[167,102106,174],{"class":173},[167,102108,15],{"class":177},[167,102110,29048],{"class":173},[167,102112,15],{"class":177},[167,102114,185],{"class":173},[5367,102116,102117],{},[15,102118,30565,102119,30569],{},[87,102120,30568],{},[3087,102122,102123],{"id":30437},[87,102124,30437],{},[15,102126,30576,102127,30580],{},[87,102128,30579],{},[154,102130,102131],{"className":156,"code":30583,"filename":15284,"language":162,"meta":163,"style":163},[87,102132,102133],{"__ignoreMap":163},[167,102134,102135,102137,102139,102141,102143,102145,102147,102149,102151,102153],{"class":169,"line":170},[167,102136,174],{"class":173},[167,102138,1242],{"class":177},[167,102140,30594],{"class":181},[167,102142,267],{"class":173},[167,102144,5080],{"class":201},[167,102146,30601],{"class":173},[167,102148,5080],{"class":201},[167,102150,1282],{"class":173},[167,102152,1242],{"class":177},[167,102154,185],{"class":173},[15,102156,30612],{},[33,102158,102159,102165,102171,102173],{},[36,102160,102161,16903,102163,30622],{},[87,102162,30437],{},[3933,102164,30621],{},[36,102166,30625,102167,1025,102169,7863],{},[87,102168,13496],{},[87,102170,30630],{},[36,102172,30633],{},[36,102174,30636],{},[22,102176,30640],{"id":30639},[3087,102178,1582,102179,13627],{"id":30643},[87,102180,30434],{},[33,102182,102183,102185,102191,102193],{},[36,102184,30650],{},[36,102186,30653,102187,90,102189,30658],{},[87,102188,174],{},[87,102190,15863],{},[36,102192,30661],{},[36,102194,30664],{},[3087,102196,1582,102197,13627],{"id":30667},[87,102198,30437],{},[33,102200,102201,102203,102205,102211],{},[36,102202,30674],{},[36,102204,30677],{},[36,102206,30680,102207,1025,102209,30687],{},[87,102208,30683],{},[87,102210,30686],{},[36,102212,30690],{},[22,102214,30694],{"id":30693},[3087,102216,13622,102217,13627],{"id":30697},[87,102218,30434],{},[33,102220,102221],{},[36,102222,30704],{},[3087,102224,13622,102225,13627],{"id":30707},[87,102226,30437],{},[33,102228,102229,102231,102233,102235],{},[36,102230,30714],{},[36,102232,30717],{},[36,102234,30720],{},[36,102236,30723,102237,30727],{},[87,102238,30726],{},[22,102240,3085],{"id":3084},[3087,102242,26697,102243,30735],{"id":30732},[87,102244,30437],{},[15,102246,30738],{},[154,102248,102249],{"className":156,"code":30741,"filename":15284,"language":162,"meta":163,"style":163},[87,102250,102251],{"__ignoreMap":163},[167,102252,102253,102255,102257,102259,102261,102263,102265,102267,102269,102271],{"class":169,"line":170},[167,102254,174],{"class":173},[167,102256,1242],{"class":177},[167,102258,30594],{"class":181},[167,102260,267],{"class":173},[167,102262,5080],{"class":201},[167,102264,30758],{"class":173},[167,102266,5080],{"class":201},[167,102268,1282],{"class":173},[167,102270,1242],{"class":177},[167,102272,185],{"class":173},[15,102274,3172,102275,30771,102277,30775,102279,1025,102281,30782],{},[87,102276,30758],{},[87,102278,30774],{},[87,102280,30778],{},[87,102282,30781],{},[3087,102284,30786,102285,30789],{"id":30785},[87,102286,30437],{},[15,102288,30792],{},[154,102290,102291],{"className":2879,"code":30795,"filename":25323,"language":2882,"meta":163,"style":163},[87,102292,102293],{"__ignoreMap":163},[167,102294,102295,102297,102299,102301],{"class":169,"line":170},[167,102296,216],{"class":191},[167,102298,30804],{"class":219},[167,102300,223],{"class":191},[167,102302,30809],{"class":201},[5367,102304,102305],{},[15,102306,30814,102307,16903,102309,30820],{},[87,102308,30437],{},[3933,102310,30819],{},[3087,102312,30824,102313,30827],{"id":30823},[87,102314,30437],{},[15,102316,30830,102317,30833,102319,30836],{},[87,102318,30568],{},[87,102320,30434],{},[3087,102322,30840],{"id":30839},[15,102324,30843],{},[22,102326,7997],{"id":7996},[3087,102328,30849,102329,6219],{"id":30848},[87,102330,30434],{},[154,102332,102333],{"className":156,"code":30854,"filename":15284,"language":162,"meta":163,"style":163},[87,102334,102335],{"__ignoreMap":163},[167,102336,102337,102339,102341,102343,102345,102347,102349,102351,102353,102355,102357,102359,102361],{"class":169,"line":170},[167,102338,174],{"class":173},[167,102340,15],{"class":177},[167,102342,1245],{"class":181},[167,102344,267],{"class":173},[167,102346,30869],{"class":201},[167,102348,30525],{"class":181},[167,102350,267],{"class":173},[167,102352,5080],{"class":201},[167,102354,30878],{"class":173},[167,102356,5080],{"class":201},[167,102358,1282],{"class":173},[167,102360,15],{"class":177},[167,102362,185],{"class":173},[3087,102364,30890,102365,30893],{"id":30889},[87,102366,30437],{},[154,102368,102369],{"className":156,"code":30896,"filename":15284,"language":162,"meta":163,"style":163},[87,102370,102371],{"__ignoreMap":163},[167,102372,102373,102375,102377,102379,102381,102383,102385,102387,102389,102391,102393,102395,102397],{"class":169,"line":170},[167,102374,174],{"class":173},[167,102376,3696],{"class":177},[167,102378,1245],{"class":181},[167,102380,267],{"class":173},[167,102382,30911],{"class":201},[167,102384,30594],{"class":181},[167,102386,267],{"class":173},[167,102388,5080],{"class":201},[167,102390,30920],{"class":173},[167,102392,5080],{"class":201},[167,102394,1282],{"class":173},[167,102396,3696],{"class":177},[167,102398,185],{"class":173},[3087,102400,30932],{"id":30931},[154,102402,102403],{"className":156,"code":30935,"filename":15284,"language":162,"meta":163,"style":163},[87,102404,102405,102437],{"__ignoreMap":163},[167,102406,102407,102409,102411,102413,102415,102417,102419,102421,102423,102425,102427,102429,102431,102433,102435],{"class":169,"line":170},[167,102408,174],{"class":173},[167,102410,1242],{"class":177},[167,102412,5694],{"class":191},[167,102414,267],{"class":173},[167,102416,5080],{"class":201},[167,102418,30952],{"class":173},[167,102420,5080],{"class":201},[167,102422,30594],{"class":181},[167,102424,267],{"class":173},[167,102426,5080],{"class":201},[167,102428,30920],{"class":173},[167,102430,5080],{"class":201},[167,102432,1282],{"class":173},[167,102434,1242],{"class":177},[167,102436,185],{"class":173},[167,102438,102439,102441,102443,102445,102447,102449,102451,102453,102455,102457,102459],{"class":169,"line":188},[167,102440,174],{"class":173},[167,102442,15],{"class":177},[167,102444,7038],{"class":191},[167,102446,30525],{"class":181},[167,102448,267],{"class":173},[167,102450,5080],{"class":201},[167,102452,30987],{"class":173},[167,102454,5080],{"class":201},[167,102456,1282],{"class":173},[167,102458,15],{"class":177},[167,102460,185],{"class":173},[22,102462,8027],{"id":8026},[154,102464,102465],{"className":156,"code":31000,"filename":3260,"language":162,"meta":163,"style":163},[87,102466,102467,102483,102495,102499,102515,102531,102547,102551,102567,102571,102611,102615,102619,102637,102645,102649,102657,102665,102677,102681,102711,102731,102739],{"__ignoreMap":163},[167,102468,102469,102471,102473,102475,102477,102479,102481],{"class":169,"line":170},[167,102470,174],{"class":173},[167,102472,178],{"class":177},[167,102474,182],{"class":181},[167,102476,1050],{"class":181},[167,102478,267],{"class":173},[167,102480,1055],{"class":201},[167,102482,185],{"class":173},[167,102484,102485,102487,102489,102491,102493],{"class":169,"line":188},[167,102486,192],{"class":191},[167,102488,1805],{"class":173},[167,102490,198],{"class":191},[167,102492,24041],{"class":201},[167,102494,24044],{"class":173},[167,102496,102497],{"class":169,"line":205},[167,102498,209],{"emptyLinePlaceholder":208},[167,102500,102501,102503,102505,102507,102509,102511,102513],{"class":169,"line":160},[167,102502,216],{"class":191},[167,102504,31041],{"class":219},[167,102506,223],{"class":191},[167,102508,226],{"class":181},[167,102510,229],{"class":173},[167,102512,390],{"class":219},[167,102514,24169],{"class":173},[167,102516,102517,102519,102521,102523,102525,102527,102529],{"class":169,"line":238},[167,102518,216],{"class":191},[167,102520,31058],{"class":219},[167,102522,223],{"class":191},[167,102524,226],{"class":181},[167,102526,229],{"class":173},[167,102528,31067],{"class":201},[167,102530,24169],{"class":173},[167,102532,102533,102535,102537,102539,102541,102543,102545],{"class":169,"line":243},[167,102534,216],{"class":191},[167,102536,31076],{"class":219},[167,102538,223],{"class":191},[167,102540,226],{"class":181},[167,102542,229],{"class":173},[167,102544,31085],{"class":201},[167,102546,24169],{"class":173},[167,102548,102549],{"class":169,"line":261},[167,102550,209],{"emptyLinePlaceholder":208},[167,102552,102553,102555,102557,102559,102561,102563,102565],{"class":169,"line":273},[167,102554,246],{"class":191},[167,102556,31098],{"class":181},[167,102558,229],{"class":173},[167,102560,2650],{"class":254},[167,102562,583],{"class":191},[167,102564,586],{"class":219},[167,102566,258],{"class":173},[167,102568,102569],{"class":169,"line":279},[167,102570,31113],{"class":18662},[167,102572,102573,102575,102577,102579,102581,102583,102585,102587,102589,102591,102593,102595,102597,102599,102601,102603,102605,102607,102609],{"class":169,"line":289},[167,102574,1539],{"class":191},[167,102576,31120],{"class":173},[167,102578,31123],{"class":181},[167,102580,229],{"class":173},[167,102582,21857],{"class":201},[167,102584,31131],{"class":31130},[167,102586,1679],{"class":219},[167,102588,31136],{"class":191},[167,102590,15863],{"class":31130},[167,102592,1679],{"class":219},[167,102594,31136],{"class":191},[167,102596,174],{"class":31130},[167,102598,31148],{"class":31147},[167,102600,31151],{"class":31130},[167,102602,21857],{"class":201},[167,102604,31156],{"class":191},[167,102606,1025],{"class":173},[167,102608,31161],{"class":201},[167,102610,24169],{"class":173},[167,102612,102613],{"class":169,"line":294},[167,102614,276],{"class":173},[167,102616,102617],{"class":169,"line":304},[167,102618,209],{"emptyLinePlaceholder":208},[167,102620,102621,102623,102625,102627,102629,102631,102633,102635],{"class":169,"line":313},[167,102622,216],{"class":191},[167,102624,31178],{"class":219},[167,102626,223],{"class":191},[167,102628,1898],{"class":181},[167,102630,1493],{"class":173},[167,102632,639],{"class":191},[167,102634,31098],{"class":181},[167,102636,31191],{"class":173},[167,102638,102639,102641,102643],{"class":169,"line":161},[167,102640,282],{"class":173},[167,102642,178],{"class":177},[167,102644,185],{"class":173},[167,102646,102647],{"class":169,"line":335},[167,102648,209],{"emptyLinePlaceholder":208},[167,102650,102651,102653,102655],{"class":169,"line":341},[167,102652,174],{"class":173},[167,102654,299],{"class":177},[167,102656,185],{"class":173},[167,102658,102659,102661,102663],{"class":169,"line":489},[167,102660,307],{"class":173},[167,102662,10117],{"class":177},[167,102664,185],{"class":173},[167,102666,102667,102669,102671,102673,102675],{"class":169,"line":495},[167,102668,1257],{"class":173},[167,102670,22],{"class":177},[167,102672,31228],{"class":173},[167,102674,22],{"class":177},[167,102676,185],{"class":173},[167,102678,102679],{"class":169,"line":501},[167,102680,209],{"emptyLinePlaceholder":208},[167,102682,102683,102685,102687,102689,102691,102693,102695,102697,102699,102701,102703,102705,102707,102709],{"class":169,"line":512},[167,102684,1257],{"class":173},[167,102686,1242],{"class":177},[167,102688,5694],{"class":181},[167,102690,267],{"class":173},[167,102692,31249],{"class":201},[167,102694,1245],{"class":181},[167,102696,267],{"class":173},[167,102698,30911],{"class":201},[167,102700,30594],{"class":181},[167,102702,267],{"class":173},[167,102704,31262],{"class":201},[167,102706,1282],{"class":173},[167,102708,1242],{"class":177},[167,102710,185],{"class":173},[167,102712,102713,102715,102717,102719,102721,102723,102725,102727,102729],{"class":169,"line":781},[167,102714,1257],{"class":173},[167,102716,15],{"class":177},[167,102718,7038],{"class":181},[167,102720,30525],{"class":181},[167,102722,267],{"class":173},[167,102724,31283],{"class":201},[167,102726,1282],{"class":173},[167,102728,15],{"class":177},[167,102730,185],{"class":173},[167,102732,102733,102735,102737],{"class":169,"line":786},[167,102734,504],{"class":173},[167,102736,10117],{"class":177},[167,102738,185],{"class":173},[167,102740,102741,102743,102745],{"class":169,"line":2678},[167,102742,282],{"class":173},[167,102744,299],{"class":177},[167,102746,185],{"class":173},[154,102748,102749],{"className":156,"code":31308,"filename":3973,"language":162,"meta":163,"style":163},[87,102750,102751,102759,102767,102773,102779,102787,102795,102803,102807,102811,102815,102821,102837,102841,102845,102849,102859,102863,102903,102907,102911,102915,102923,102927,102935,102943,102955,102959,102989,103009,103017],{"__ignoreMap":163},[167,102752,102753,102755,102757],{"class":169,"line":170},[167,102754,174],{"class":173},[167,102756,178],{"class":177},[167,102758,185],{"class":173},[167,102760,102761,102763,102765],{"class":169,"line":188},[167,102762,608],{"class":191},[167,102764,3991],{"class":191},[167,102766,1905],{"class":173},[167,102768,102769,102771],{"class":169,"line":205},[167,102770,7176],{"class":181},[167,102772,763],{"class":173},[167,102774,102775,102777],{"class":169,"line":160},[167,102776,1937],{"class":191},[167,102778,1905],{"class":173},[167,102780,102781,102783,102785],{"class":169,"line":238},[167,102782,31343],{"class":173},[167,102784,390],{"class":219},[167,102786,393],{"class":173},[167,102788,102789,102791,102793],{"class":169,"line":243},[167,102790,31352],{"class":173},[167,102792,31067],{"class":201},[167,102794,393],{"class":173},[167,102796,102797,102799,102801],{"class":169,"line":261},[167,102798,31361],{"class":173},[167,102800,31085],{"class":201},[167,102802,393],{"class":173},[167,102804,102805],{"class":169,"line":273},[167,102806,24370],{"class":173},[167,102808,102809],{"class":169,"line":279},[167,102810,398],{"class":173},[167,102812,102813],{"class":169,"line":289},[167,102814,8755],{"class":173},[167,102816,102817,102819],{"class":169,"line":294},[167,102818,31382],{"class":181},[167,102820,763],{"class":173},[167,102822,102823,102825,102827,102829,102831,102833,102835],{"class":169,"line":304},[167,102824,8767],{"class":191},[167,102826,7351],{"class":219},[167,102828,1679],{"class":173},[167,102830,31395],{"class":181},[167,102832,229],{"class":173},[167,102834,4927],{"class":219},[167,102836,31402],{"class":173},[167,102838,102839],{"class":169,"line":313},[167,102840,755],{"class":173},[167,102842,102843],{"class":169,"line":161},[167,102844,398],{"class":173},[167,102846,102847],{"class":169,"line":335},[167,102848,4419],{"class":173},[167,102850,102851,102853,102855,102857],{"class":169,"line":341},[167,102852,31419],{"class":181},[167,102854,229],{"class":173},[167,102856,2650],{"class":254},[167,102858,258],{"class":173},[167,102860,102861],{"class":169,"line":489},[167,102862,31430],{"class":18662},[167,102864,102865,102867,102869,102871,102873,102875,102877,102879,102881,102883,102885,102887,102889,102891,102893,102895,102897,102899,102901],{"class":169,"line":495},[167,102866,8767],{"class":191},[167,102868,31120],{"class":173},[167,102870,31123],{"class":181},[167,102872,229],{"class":173},[167,102874,21857],{"class":201},[167,102876,31131],{"class":31130},[167,102878,1679],{"class":219},[167,102880,31136],{"class":191},[167,102882,15863],{"class":31130},[167,102884,1679],{"class":219},[167,102886,31136],{"class":191},[167,102888,174],{"class":31130},[167,102890,31148],{"class":31147},[167,102892,31151],{"class":31130},[167,102894,21857],{"class":201},[167,102896,31156],{"class":191},[167,102898,1025],{"class":173},[167,102900,31161],{"class":201},[167,102902,24169],{"class":173},[167,102904,102905],{"class":169,"line":501},[167,102906,755],{"class":173},[167,102908,102909],{"class":169,"line":512},[167,102910,398],{"class":173},[167,102912,102913],{"class":169,"line":781},[167,102914,24148],{"class":173},[167,102916,102917,102919,102921],{"class":169,"line":786},[167,102918,282],{"class":173},[167,102920,178],{"class":177},[167,102922,185],{"class":173},[167,102924,102925],{"class":169,"line":2678},[167,102926,209],{"emptyLinePlaceholder":208},[167,102928,102929,102931,102933],{"class":169,"line":2692},[167,102930,174],{"class":173},[167,102932,299],{"class":177},[167,102934,185],{"class":173},[167,102936,102937,102939,102941],{"class":169,"line":3575},[167,102938,307],{"class":173},[167,102940,10117],{"class":177},[167,102942,185],{"class":173},[167,102944,102945,102947,102949,102951,102953],{"class":169,"line":5028},[167,102946,1257],{"class":173},[167,102948,22],{"class":177},[167,102950,31228],{"class":173},[167,102952,22],{"class":177},[167,102954,185],{"class":173},[167,102956,102957],{"class":169,"line":5037},[167,102958,209],{"emptyLinePlaceholder":208},[167,102960,102961,102963,102965,102967,102969,102971,102973,102975,102977,102979,102981,102983,102985,102987],{"class":169,"line":5046},[167,102962,1257],{"class":173},[167,102964,1242],{"class":177},[167,102966,5694],{"class":181},[167,102968,267],{"class":173},[167,102970,31249],{"class":201},[167,102972,1245],{"class":181},[167,102974,267],{"class":173},[167,102976,30911],{"class":201},[167,102978,30594],{"class":181},[167,102980,267],{"class":173},[167,102982,31262],{"class":201},[167,102984,1282],{"class":173},[167,102986,1242],{"class":177},[167,102988,185],{"class":173},[167,102990,102991,102993,102995,102997,102999,103001,103003,103005,103007],{"class":169,"line":6756},[167,102992,1257],{"class":173},[167,102994,15],{"class":177},[167,102996,7038],{"class":181},[167,102998,30525],{"class":181},[167,103000,267],{"class":173},[167,103002,31283],{"class":201},[167,103004,1282],{"class":173},[167,103006,15],{"class":177},[167,103008,185],{"class":173},[167,103010,103011,103013,103015],{"class":169,"line":6778},[167,103012,504],{"class":173},[167,103014,10117],{"class":177},[167,103016,185],{"class":173},[167,103018,103019,103021,103023],{"class":169,"line":6783},[167,103020,282],{"class":173},[167,103022,299],{"class":177},[167,103024,185],{"class":173},[22,103026,7678],{"id":7677},[33,103028,103029,103033,103039,103043,103047],{},[36,103030,103031,31601],{},[87,103032,30434],{},[36,103034,31604,103035,31607,103037,1679],{},[87,103036,30568],{},[87,103038,30434],{},[36,103040,103041,31614],{},[87,103042,30437],{},[36,103044,103045,31619],{},[87,103046,30437],{},[36,103048,31622],{},[5367,103050,103051],{},[15,103052,103053,31630,103055,31633,103057,31636],{},[3933,103054,31629],{},[87,103056,30434],{},[87,103058,30437],{},[924,103060,31639],{},{"title":163,"searchDepth":188,"depth":188,"links":103062},[103063,103064,103068,103072,103076,103082,103087,103088],{"id":26502,"depth":188,"text":26503},{"id":30499,"depth":188,"text":30500,"children":103065},[103066,103067],{"id":30434,"depth":205,"text":30434},{"id":30437,"depth":205,"text":30437},{"id":30639,"depth":188,"text":30640,"children":103069},[103070,103071],{"id":30643,"depth":205,"text":31650},{"id":30667,"depth":205,"text":31652},{"id":30693,"depth":188,"text":30694,"children":103073},[103074,103075],{"id":30697,"depth":205,"text":31656},{"id":30707,"depth":205,"text":31658},{"id":3084,"depth":188,"text":3085,"children":103077},[103078,103079,103080,103081],{"id":30732,"depth":205,"text":31662},{"id":30785,"depth":205,"text":31664},{"id":30823,"depth":205,"text":31666},{"id":30839,"depth":205,"text":30840},{"id":7996,"depth":188,"text":7997,"children":103083},[103084,103085,103086],{"id":30848,"depth":205,"text":31671},{"id":30889,"depth":205,"text":31673},{"id":30931,"depth":205,"text":30932},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},{"updatedAt":31682,"coverCaption":31683,"keywords":103090},[3258,30434,30437,31685,16579,3260,3973],[103092],{"headline":30426,"author":103093,"datePublished":31682,"@type":961},{"name":946,"@type":959},{"title":30426,"description":31680},[103096,103097,103098,103099],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":9169,"color":9170},{"tag":5424,"color":5425},{"id":103101,"title":103102,"body":103103,"cover":56776,"coverAlt":103260,"date":56778,"description":103261,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":103262,"navigation":208,"path":103264,"schemaOrg":103265,"seo":103268,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":103269,"tags":103270,"__hash__":103275},"blog\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en.md","History and Evolution of Vue.js: The Progressive Framework",{"type":8,"value":103104,"toc":103251},[103105,103109,103115,103119,103125,103131,103135,103142,103175,103184,103188,103192,103204,103208,103211,103235,103239],[11,103106,103108],{"id":103107},"vuejs-the-evolution-of-the-progressive-framework","Vue.js: The Evolution of the Progressive Framework",[15,103110,103111,103112,103114],{},"From its humble beginning as a side project at Google to becoming one of the pillars of modern web development, ",[3933,103113,3258],{}," has maintained a unique philosophy: to be the framework that grows with you. In this article, we'll explore how its history and technical design have redefined the developer experience (DX).",[22,103116,103118],{"id":103117},"the-origin-evan-yous-vision","The Origin: Evan You's Vision",[15,103120,103121,103122,103124],{},"Vue's history begins in 2013, within the offices of Google Creative Lab. ",[3933,103123,56624],{},", working with AngularJS, felt he could extract the best from that world (data binding) and combine it with a much lighter and less restrictive structure.",[15,103126,59009,103127,103130],{},[3933,103128,103129],{},"February 2014",", version 1.0 was officially released. Unlike its competitors, Vue was not born under the wing of a large corporation (like React with Facebook or Angular with Google), but as an independent project driven by the community and direct feedback from developers.",[22,103132,103134],{"id":103133},"the-philosophy-of-the-progressive-framework","The Philosophy of the \"Progressive Framework\"",[15,103136,103137,103138,103141],{},"What does it really mean for Vue to be ",[3933,103139,103140],{},"progressive","? Unlike monolithic frameworks, Vue is divided into layers that you can adopt according to your needs:",[3035,103143,103144,103149,103154,103161,103168],{},[36,103145,103146,103148],{},[3933,103147,56653],{}," You can use it just to handle the DOM.",[36,103150,103151,103153],{},[3933,103152,56659],{}," To create modular interfaces.",[36,103155,103156,103158,103159,1679],{},[3933,103157,56665],{}," Through ",[9295,103160,56669],{},[36,103162,103163,103158,103165,103167],{},[3933,103164,56674],{},[9295,103166,950],{}," (formerly Vuex).",[36,103169,103170,103172,103173,1679],{},[3933,103171,56682],{}," Currently optimized by ",[9295,103174,55634],{},[15,103176,103177,103178,103180,103181,103183],{},"This scalability allows a developer to integrate Vue into a legacy page through a simple ",[87,103179,1008],{}," from CDN, or build a complex ",[3933,103182,56694],{}," with millions of users.",[22,103185,103187],{"id":103186},"technical-evolution-from-v1-to-v3","Technical Evolution: From V1 to V3",[3087,103189,103191],{"id":103190},"vue-2-the-consolidation","Vue 2: The Consolidation",[15,103193,103194,103195,103197,103198,103200,103201,103203],{},"Released in 2016, it introduced the ",[3933,103196,56709],{},", drastically improving performance. It was the era where the ecosystem exploded, popularizing ",[3933,103199,56713],{}," and the use of ",[87,103202,54148],{}," for its reactivity system.",[3087,103205,103207],{"id":103206},"vue-3-the-great-leap-one-piece","Vue 3: The Great Leap (One Piece)",[15,103209,103210],{},"In September 2020, Vue 3 brought a complete rewrite of the core. The key changes were:",[33,103212,103213,103223,103229],{},[36,103214,103215,103217,103218,103220,103221,4270],{},[3933,103216,56731],{}," A superior alternative to the ",[9295,103219,3973],{}," for organizing complex component logic and improving code reusability (",[9295,103222,1629],{},[36,103224,103225,103228],{},[3933,103226,103227],{},"Proxy-based Reactivity:"," Overcoming Vue 2's limitations, allowing native detection of changes in new properties and arrays.",[36,103230,103231,103234],{},[3933,103232,103233],{},"First-class TypeScript Support:"," The framework is now written in TS, facilitating static typing.",[22,103236,103238],{"id":103237},"the-future-and-current-ecosystem","The Future and Current Ecosystem",[15,103240,103241,103242,103244,103245,103247,103248,103250],{},"Today, Vue is not just a library; it's a performance standard thanks to ",[3933,103243,55634],{},", the bundling engine created by the Vue team itself that has revolutionized the industry. With the rise of ",[3933,103246,56762],{}," for SSR (Server Side Rendering) applications and the official transition to ",[3933,103249,950],{}," as the state manager, the ecosystem is more robust and mature than ever.",{"title":163,"searchDepth":188,"depth":188,"links":103252},[103253,103254,103255,103259],{"id":103117,"depth":188,"text":103118},{"id":103133,"depth":188,"text":103134},{"id":103186,"depth":188,"text":103187,"children":103256},[103257,103258],{"id":103190,"depth":205,"text":103191},{"id":103206,"depth":205,"text":103207},{"id":103237,"depth":188,"text":103238},"Vue.js logo with source code background","From its beginnings as a side project at Google to becoming one of the pillars of modern web development, we explore the evolution and philosophy of Vue.js.",{"updatedAt":54736,"coverCaption":103263},"Exploring the evolution of Vue.js from its beginnings to the present","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en",[103266],{"headline":103102,"author":103267,"datePublished":56786,"@type":961},{"name":946,"@type":959},{"title":103102,"description":103261},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.en",[103271,103273],{"tag":103272,"color":54752},"History",{"tag":103274,"color":55617},"Ecosystem","86Hf4-SvaPOgGH9d6AXakQYnxfqwNUiVvGtH6uVqOgA",{"id":56601,"title":56602,"body":103277,"cover":56776,"coverAlt":56777,"date":56778,"description":56779,"draft":940,"extension":941,"lab":942,"locale":943,"meta":103390,"navigation":208,"path":56782,"schemaOrg":103391,"seo":103394,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":56788,"tags":103395,"__hash__":56792},{"type":8,"value":103278,"toc":103381},[103279,103281,103285,103287,103293,103297,103299,103303,103331,103337,103339,103341,103349,103351,103353,103371,103373],[11,103280,56608],{"id":56607},[15,103282,56611,103283,56614],{},[3933,103284,3258],{},[22,103286,56618],{"id":56617},[15,103288,56621,103289,56625,103291,56629],{},[3933,103290,56624],{},[9295,103292,56628],{},[15,103294,6304,103295,56635],{},[3933,103296,56634],{},[22,103298,56639],{"id":56638},[15,103300,56642,103301,56646],{},[3933,103302,56645],{},[3035,103304,103305,103309,103313,103319,103325],{},[36,103306,103307,56654],{},[3933,103308,56653],{},[36,103310,103311,56660],{},[3933,103312,56659],{},[36,103314,103315,56666,103317,1679],{},[3933,103316,56665],{},[9295,103318,56669],{},[36,103320,103321,56666,103323,56677],{},[3933,103322,56674],{},[9295,103324,950],{},[36,103326,103327,56683,103329,1679],{},[3933,103328,56682],{},[9295,103330,55634],{},[15,103332,56688,103333,56691,103335,56695],{},[87,103334,1008],{},[3933,103336,56694],{},[22,103338,56699],{"id":56698},[3087,103340,56703],{"id":56702},[15,103342,56706,103343,56710,103345,56714,103347,56717],{},[3933,103344,56709],{},[3933,103346,56713],{},[87,103348,54148],{},[3087,103350,56721],{"id":56720},[15,103352,56724],{},[33,103354,103355,103363,103367],{},[36,103356,103357,56732,103359,56735,103361,4270],{},[3933,103358,56731],{},[9295,103360,3973],{},[9295,103362,1629],{},[36,103364,103365,56743],{},[3933,103366,56742],{},[36,103368,103369,56749],{},[3933,103370,56748],{},[22,103372,56753],{"id":56752},[15,103374,56756,103375,56759,103377,56763,103379,56766],{},[3933,103376,55634],{},[3933,103378,56762],{},[3933,103380,950],{},{"title":163,"searchDepth":188,"depth":188,"links":103382},[103383,103384,103385,103389],{"id":56617,"depth":188,"text":56618},{"id":56638,"depth":188,"text":56639},{"id":56698,"depth":188,"text":56699,"children":103386},[103387,103388],{"id":56702,"depth":205,"text":56703},{"id":56720,"depth":205,"text":56721},{"id":56752,"depth":188,"text":56753},{"updatedAt":54736,"coverCaption":56781},[103392],{"headline":56602,"author":103393,"datePublished":56786,"@type":961},{"name":946,"@type":959},{"title":56602,"description":56779},[103396,103397],{"tag":54751,"color":54752},{"tag":55616,"color":55617},{"id":103399,"title":103400,"body":103401,"cover":52115,"coverAlt":103400,"date":52116,"description":104114,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":104115,"navigation":208,"path":104121,"schemaOrg":104122,"seo":104125,"series":963,"seriesDescription":104126,"seriesOrder":238,"seriesTitle":104127,"slug":942,"stem":104128,"tags":104129,"__hash__":104137},"blog\u002Fblog\u002Fmastering-renderless-components-vue-3.en.md","Advanced Patterns in Vue 3: The Power of Renderless Components",{"type":8,"value":103402,"toc":104103},[103403,103407,103417,103421,103426,103433,103437,103449,103453,103456,103598,103743,103749,103857,103863,103881,103959,103962,103964,103972,104051,104061,104065,104088,104092,104101],[11,103404,103406],{"id":103405},"the-renderless-pattern-in-vue-3-architecture-and-separation-of-concerns","The Renderless Pattern in Vue 3: Architecture and Separation of Concerns",[15,103408,103409,103410,103413,103414,103416],{},"In the Vue 3 ecosystem, code reuse has evolved significantly thanks to the Composition API. However, a recurring challenge still remains: ",[3933,103411,103412],{},"How do you share complex UI logic without enforcing a specific design or HTML structure?"," That’s where the ",[3933,103415,51371],{}," pattern becomes an essential tool for software architecture.",[22,103418,103420],{"id":103419},"what-is-a-renderless-component","What is a Renderless Component?",[15,103422,96881,103423,103425],{},[9295,103424,51382],{}," component (one that doesn’t render) is a component that doesn’t generate any markup or CSS of its own. Its only responsibility is to encapsulate state and behavioral logic and expose that data to the parent component. The parent, in turn, decides exactly which DOM elements to use and how to style them.",[15,103427,103428,103429,103432],{},"This pattern is the backbone of ",[3933,103430,103431],{},"“Headless UI” libraries",", allowing a component’s logic—such as managing a modal, a dropdown, or a form—to be universal, while the design stays 100% customizable.",[22,103434,103436],{"id":103435},"the-engine-scoped-slots","The Engine: Scoped Slots",[15,103438,103439,103440,103442,103443,103445,103446,103448],{},"This pattern is implemented using ",[3933,103441,51400],{},". Unlike a regular ",[9295,103444,1271],{},", a ",[9295,103447,51407],{}," allows the child component to send data “up” to the parent’s template at runtime.",[3087,103450,103452],{"id":103451},"practical-example-a-visibility-controller","Practical Example: A Visibility Controller",[15,103454,103455],{},"Imagine a component that manages an “open\u002Fclosed” state—something essential in menus and modals.",[154,103457,103460],{"className":156,"code":103458,"filename":51419,"highlights":103459,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n  import { ref } from 'vue';\n\n  const isOpen = ref(false);\n  const toggle = () => {\n    isOpen.value = !isOpen.value;\n  };\n\n  \u002F\u002F Expose the state and method to the slot\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C\u002Fslot>\n\u003C\u002Ftemplate>\n",[160,238,243,261,313],[87,103461,103462,103472,103484,103488,103505,103520,103531,103536,103540,103545,103553,103557,103565,103590],{"__ignoreMap":163},[167,103463,103464,103466,103468,103470],{"class":169,"line":170},[167,103465,174],{"class":173},[167,103467,178],{"class":177},[167,103469,182],{"class":181},[167,103471,185],{"class":173},[167,103473,103474,103476,103478,103480,103482],{"class":169,"line":188},[167,103475,51437],{"class":191},[167,103477,195],{"class":173},[167,103479,198],{"class":191},[167,103481,51444],{"class":201},[167,103483,24044],{"class":173},[167,103485,103486],{"class":169,"line":205},[167,103487,209],{"emptyLinePlaceholder":208},[167,103489,103491,103493,103495,103497,103499,103501,103503],{"class":103490,"line":160},[169,213],[167,103492,1443],{"class":191},[167,103494,5523],{"class":219},[167,103496,223],{"class":191},[167,103498,226],{"class":181},[167,103500,229],{"class":173},[167,103502,3392],{"class":219},[167,103504,24169],{"class":173},[167,103506,103508,103510,103512,103514,103516,103518],{"class":103507,"line":238},[169,213],[167,103509,1443],{"class":191},[167,103511,5608],{"class":181},[167,103513,223],{"class":191},[167,103515,1469],{"class":173},[167,103517,639],{"class":191},[167,103519,1905],{"class":173},[167,103521,103523,103525,103527,103529],{"class":103522,"line":243},[169,213],[167,103524,51488],{"class":173},[167,103526,267],{"class":191},[167,103528,5625],{"class":191},[167,103530,51495],{"class":173},[167,103532,103534],{"class":103533,"line":261},[169,213],[167,103535,51501],{"class":173},[167,103537,103538],{"class":169,"line":273},[167,103539,209],{"emptyLinePlaceholder":208},[167,103541,103542],{"class":169,"line":279},[167,103543,103544],{"class":18662},"  \u002F\u002F Expose the state and method to the slot\n",[167,103546,103547,103549,103551],{"class":169,"line":289},[167,103548,282],{"class":173},[167,103550,178],{"class":177},[167,103552,185],{"class":173},[167,103554,103555],{"class":169,"line":294},[167,103556,209],{"emptyLinePlaceholder":208},[167,103558,103559,103561,103563],{"class":169,"line":304},[167,103560,174],{"class":173},[167,103562,299],{"class":177},[167,103564,185],{"class":173},[167,103566,103568,103570,103572,103574,103576,103578,103580,103582,103584,103586,103588],{"class":103567,"line":313},[169,213],[167,103569,307],{"class":173},[167,103571,1271],{"class":177},[167,103573,51540],{"class":181},[167,103575,267],{"class":173},[167,103577,5699],{"class":201},[167,103579,51547],{"class":181},[167,103581,267],{"class":173},[167,103583,5665],{"class":201},[167,103585,1282],{"class":173},[167,103587,1271],{"class":177},[167,103589,185],{"class":173},[167,103591,103592,103594,103596],{"class":169,"line":161},[167,103593,282],{"class":173},[167,103595,299],{"class":177},[167,103597,185],{"class":173},[154,103599,103602],{"className":156,"code":103600,"filename":51569,"highlights":103601,"language":162,"meta":163,"style":163},"\u003Cscript>\n  export default {\n    data() {\n      return {\n        isOpen: false\n      };\n    },\n    methods: {\n      toggle() {\n        this.isOpen = !this.isOpen;\n      }\n    }\n  };\n  \u002F\u002F Expose the state and method to the slot\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C\u002Fslot>\n\u003C\u002Ftemplate>\n",[238,279,289,294,495],[87,103603,103604,103612,103620,103626,103632,103639,103643,103647,103651,103658,103673,103678,103682,103686,103690,103698,103702,103710,103735],{"__ignoreMap":163},[167,103605,103606,103608,103610],{"class":169,"line":170},[167,103607,174],{"class":173},[167,103609,178],{"class":177},[167,103611,185],{"class":173},[167,103613,103614,103616,103618],{"class":169,"line":188},[167,103615,51585],{"class":191},[167,103617,3991],{"class":191},[167,103619,1905],{"class":173},[167,103621,103622,103624],{"class":169,"line":205},[167,103623,51594],{"class":181},[167,103625,763],{"class":173},[167,103627,103628,103630],{"class":169,"line":160},[167,103629,8767],{"class":191},[167,103631,1905],{"class":173},[167,103633,103635,103637],{"class":103634,"line":238},[169,213],[167,103636,51608],{"class":173},[167,103638,8093],{"class":219},[167,103640,103641],{"class":169,"line":243},[167,103642,42349],{"class":173},[167,103644,103645],{"class":169,"line":261},[167,103646,755],{"class":173},[167,103648,103649],{"class":169,"line":273},[167,103650,51623],{"class":173},[167,103652,103654,103656],{"class":103653,"line":279},[169,213],[167,103655,51629],{"class":181},[167,103657,763],{"class":173},[167,103659,103661,103663,103665,103667,103669,103671],{"class":103660,"line":289},[169,213],[167,103662,14773],{"class":219},[167,103664,51639],{"class":173},[167,103666,267],{"class":191},[167,103668,5625],{"class":191},[167,103670,4927],{"class":219},[167,103672,51648],{"class":173},[167,103674,103676],{"class":103675,"line":294},[169,213],[167,103677,7287],{"class":173},[167,103679,103680],{"class":169,"line":304},[167,103681,4049],{"class":173},[167,103683,103684],{"class":169,"line":313},[167,103685,51501],{"class":173},[167,103687,103688],{"class":169,"line":161},[167,103689,103544],{"class":18662},[167,103691,103692,103694,103696],{"class":169,"line":335},[167,103693,282],{"class":173},[167,103695,178],{"class":177},[167,103697,185],{"class":173},[167,103699,103700],{"class":169,"line":341},[167,103701,209],{"emptyLinePlaceholder":208},[167,103703,103704,103706,103708],{"class":169,"line":489},[167,103705,174],{"class":173},[167,103707,299],{"class":177},[167,103709,185],{"class":173},[167,103711,103713,103715,103717,103719,103721,103723,103725,103727,103729,103731,103733],{"class":103712,"line":495},[169,213],[167,103714,307],{"class":173},[167,103716,1271],{"class":177},[167,103718,51540],{"class":181},[167,103720,267],{"class":173},[167,103722,5699],{"class":201},[167,103724,51547],{"class":181},[167,103726,267],{"class":173},[167,103728,5665],{"class":201},[167,103730,1282],{"class":173},[167,103732,1271],{"class":177},[167,103734,185],{"class":173},[167,103736,103737,103739,103741],{"class":169,"line":501},[167,103738,282],{"class":173},[167,103740,299],{"class":177},[167,103742,185],{"class":173},[15,103744,103745,103748],{},[3933,103746,103747],{},"Implementation in the Parent","\nWhen consuming this component, you get complete creative freedom:",[154,103750,103753],{"className":156,"code":103751,"filename":51728,"highlights":103752,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003CLogicToggle v-slot=\"{ isOpen, toggle }\">\n    \u003Cbutton @click=\"toggle\">\n      {{ isOpen ? 'Close Menu' : 'Open Menu' }}\n    \u003C\u002Fbutton>\n    \u003Cdiv v-if=\"isOpen\" class=\"custom-dropdown\">\n      Dynamic content goes here\n    \u003C\u002Fdiv>\n  \u003C\u002FLogicToggle>\n\u003C\u002Ftemplate>\n",[188,205,160,243],[87,103754,103755,103763,103778,103793,103799,103807,103828,103833,103841,103849],{"__ignoreMap":163},[167,103756,103757,103759,103761],{"class":169,"line":170},[167,103758,174],{"class":173},[167,103760,299],{"class":177},[167,103762,185],{"class":173},[167,103764,103766,103768,103770,103772,103774,103776],{"class":103765,"line":188},[169,213],[167,103767,307],{"class":173},[167,103769,51747],{"class":177},[167,103771,32029],{"class":181},[167,103773,267],{"class":173},[167,103775,51754],{"class":201},[167,103777,185],{"class":173},[167,103779,103781,103783,103785,103787,103789,103791],{"class":103780,"line":205},[169,213],[167,103782,1257],{"class":173},[167,103784,507],{"class":177},[167,103786,1182],{"class":181},[167,103788,267],{"class":173},[167,103790,5665],{"class":201},[167,103792,185],{"class":173},[167,103794,103796],{"class":103795,"line":160},[169,213],[167,103797,103798],{"class":173},"      {{ isOpen ? 'Close Menu' : 'Open Menu' }}\n",[167,103800,103801,103803,103805],{"class":169,"line":238},[167,103802,1292],{"class":173},[167,103804,507],{"class":177},[167,103806,185],{"class":173},[167,103808,103810,103812,103814,103816,103818,103820,103822,103824,103826],{"class":103809,"line":243},[169,213],[167,103811,1257],{"class":173},[167,103813,1242],{"class":177},[167,103815,5694],{"class":181},[167,103817,267],{"class":173},[167,103819,5699],{"class":201},[167,103821,1245],{"class":181},[167,103823,267],{"class":173},[167,103825,51805],{"class":201},[167,103827,185],{"class":173},[167,103829,103830],{"class":169,"line":261},[167,103831,103832],{"class":173},"      Dynamic content goes here\n",[167,103834,103835,103837,103839],{"class":169,"line":273},[167,103836,1292],{"class":173},[167,103838,1242],{"class":177},[167,103840,185],{"class":173},[167,103842,103843,103845,103847],{"class":169,"line":279},[167,103844,504],{"class":173},[167,103846,51747],{"class":177},[167,103848,185],{"class":173},[167,103850,103851,103853,103855],{"class":169,"line":289},[167,103852,282],{"class":173},[167,103854,299],{"class":177},[167,103856,185],{"class":173},[22,103858,103860,103861,6219],{"id":103859},"senior-optimization-render-functions-h","Senior Optimization: Render Functions (",[87,103862,51843],{},[15,103864,103865,103866,103868,103869,103871,103872,2526,103874,103876,103877,103880],{},"To reach a production-grade level—especially in libraries distributed via NPM—it’s recommended to avoid the ",[87,103867,31997],{}," block. By using a ",[87,103870,51852],{}," function and the ",[87,103873,51843],{},[9295,103875,51858],{},") method, we eliminate ",[3933,103878,103879],{},"template compilation overhead"," and avoid creating unnecessary extra DOM nodes.",[154,103882,103885],{"className":51866,"code":103883,"filename":51868,"highlights":103884,"language":51870,"meta":163,"style":163},"import { ref, h } from 'vue';\n\nexport default {\n  setup(props, { slots }) {\n    const isOpen = ref(false);\n    const toggle = () => (isOpen.value = !isOpen.value);\n\n    return () => {\n      \u002F\u002F Return the default slot while passing the state\n      return slots.default ? slots.default({\n        isOpen: isOpen.value,\n        toggle\n      }) : null;\n    };\n  }\n};\n",[160,238,243,289,294,304,313],[87,103886,103887,103891,103895,103899,103904,103909,103914,103918,103922,103927,103932,103937,103942,103947,103951,103955],{"__ignoreMap":163},[167,103888,103889],{"class":169,"line":170},[167,103890,51877],{},[167,103892,103893],{"class":169,"line":188},[167,103894,209],{"emptyLinePlaceholder":208},[167,103896,103897],{"class":169,"line":205},[167,103898,51886],{},[167,103900,103902],{"class":103901,"line":160},[169,213],[167,103903,51892],{},[167,103905,103907],{"class":103906,"line":238},[169,213],[167,103908,51898],{},[167,103910,103912],{"class":103911,"line":243},[169,213],[167,103913,51904],{},[167,103915,103916],{"class":169,"line":261},[167,103917,209],{"emptyLinePlaceholder":208},[167,103919,103920],{"class":169,"line":273},[167,103921,51913],{},[167,103923,103924],{"class":169,"line":279},[167,103925,103926],{},"      \u002F\u002F Return the default slot while passing the state\n",[167,103928,103930],{"class":103929,"line":289},[169,213],[167,103931,51924],{},[167,103933,103935],{"class":103934,"line":294},[169,213],[167,103936,51930],{},[167,103938,103940],{"class":103939,"line":304},[169,213],[167,103941,51936],{},[167,103943,103945],{"class":103944,"line":313},[169,213],[167,103946,51942],{},[167,103948,103949],{"class":169,"line":161},[167,103950,24370],{},[167,103952,103953],{"class":169,"line":335},[167,103954,3492],{},[167,103956,103957],{"class":169,"line":341},[167,103958,24148],{},[15,103960,103961],{},"This approach lets the component behave as a pure data “relay”, keeping the Virtual DOM clean and efficient.",[22,103963,51961],{"id":51960},[15,103965,103966,103967,2526,103969,103971],{},"A common question is why not simply use a ",[9295,103968,51967],{},[87,103970,5735],{},"). The right choice depends on the context:",[56,103973,103974,103985],{},[59,103975,103976],{},[62,103977,103978,103981,103983],{},[65,103979,103980],{},"Feature",[65,103982,954],{},[65,103984,51371],{},[75,103986,103987,104000,104013,104026,104038],{},[62,103988,103989,103994,103997],{},[80,103990,103991],{},[3933,103992,103993],{},"Encapsulation",[80,103995,103996],{},"Pure JavaScript logic.",[80,103998,103999],{},"Logic tied to the component lifecycle.",[62,104001,104002,104007,104010],{},[80,104003,104004],{},[3933,104005,104006],{},"Template",[80,104008,104009],{},"Imported in the script.",[80,104011,104012],{},"Declared declaratively in the template.",[62,104014,104015,104020,104023],{},[80,104016,104017],{},[3933,104018,104019],{},"Scope",[80,104021,104022],{},"Ideal for global\u002Fbusiness logic.",[80,104024,104025],{},"Ideal for UI patterns (accessibility, events).",[62,104027,104028,104032,104035],{},[80,104029,104030],{},[3933,104031,1647],{},[80,104033,104034],{},"No access to slots.",[80,104036,104037],{},"Can orchestrate multiple subcomponents.",[62,104039,104040,104045,104048],{},[80,104041,104042],{},[3933,104043,104044],{},"Learning curve",[80,104046,104047],{},"Requires understanding pure reactivity.",[80,104049,104050],{},"More intuitive for template-oriented developers.",[15,104052,104053,104055,104056,104058,104059,4270],{},[9295,104054,51371],{}," shine when the logic needs to interact with the lifecycle (like ",[87,104057,6796],{},") or when you want to create a component hierarchy that shares implicit state (",[9295,104060,52060],{},[22,104062,104064],{"id":104063},"competitive-advantages-of-the-pattern","Competitive Advantages of the Pattern",[3035,104066,104067,104076,104082],{},[36,104068,104069,104072,104073,104075],{},[3933,104070,104071],{},"Maintainability:"," If the validation logic changes, you only modify the ",[9295,104074,51382],{}," component. The UI remains intact.",[36,104077,104078,104081],{},[3933,104079,104080],{},"Testability:"," Makes it easier to unit test state logic without dealing with CSS selectors or style collisions.",[36,104083,104084,104087],{},[3933,104085,104086],{},"Extensibility:"," Enables multiple visual versions of the same functionality without duplicating core logic.",[22,104089,104091],{"id":104090},"final-thoughts","Final Thoughts",[15,104093,104094,104095,104097,104098,104100],{},"While this pattern offers unmatched flexibility, it should be used thoughtfully. In very large templates, excessive use of ",[87,104096,31708],{}," can make code harder to read. However, for building design systems and component libraries, ",[3933,104099,51371],{}," are the gold standard in Vue 3 architecture.",[924,104102,52103],{},{"title":163,"searchDepth":188,"depth":188,"links":104104},[104105,104106,104109,104111,104112,104113],{"id":103419,"depth":188,"text":103420},{"id":103435,"depth":188,"text":103436,"children":104107},[104108],{"id":103451,"depth":205,"text":103452},{"id":103859,"depth":188,"text":104110},"Senior Optimization: Render Functions (h)",{"id":51960,"depth":188,"text":51961},{"id":104063,"depth":188,"text":104064},{"id":104090,"depth":188,"text":104091},"Discover how Renderless Components in Vue 3 can improve code reuse and the separation of logic and presentation in your applications.",{"updatedAt":945,"coverCaption":104116,"author":946,"keywords":104117},"Featured image representing the Renderless Components concept in Vue 3.",[951,51371,104118,104119,104120],"Code Reuse","Design Patterns","Frontend Development","\u002Fblog\u002Fmastering-renderless-components-vue-3.en",[104123],{"headline":103400,"author":104124,"datePublished":52127,"@type":961},{"name":946,"@type":959},{"title":103400,"description":104114},"A practical series for designing maintainable Vue 3 applications through clear component communication, reusable logic, scoped dependencies, and intentional state management.","Vue 3 Application Architecture","blog\u002Fmastering-renderless-components-vue-3.en",[104130,104131,104132,104133,104134,104135],{"tag":60267,"color":971},{"tag":104119,"color":52133},{"tag":98745,"color":1639},{"tag":60269,"color":3270},{"tag":60271,"color":7731},{"tag":104136,"color":974},"Best Practices","qGlDdtQOF8gO_Wm956KACJvdCpR5gS70nFJkqaynUAA",{"id":51354,"title":51355,"body":104139,"cover":52115,"coverAlt":51355,"date":52116,"description":52117,"draft":940,"extension":941,"lab":942,"locale":943,"meta":104778,"navigation":208,"path":52123,"schemaOrg":104780,"seo":104783,"series":963,"seriesDescription":964,"seriesOrder":238,"seriesTitle":965,"slug":942,"stem":52129,"tags":104784,"__hash__":52138},{"type":8,"value":104140,"toc":104768},[104141,104143,104149,104151,104155,104159,104161,104169,104171,104173,104313,104457,104461,104566,104570,104582,104658,104660,104662,104668,104732,104740,104742,104758,104760,104766],[11,104142,51361],{"id":51360},[15,104144,51364,104145,51368,104147,51372],{},[3933,104146,51367],{},[3933,104148,51371],{},[22,104150,51376],{"id":51375},[15,104152,51379,104153,51383],{},[9295,104154,51382],{},[15,104156,51386,104157,51390],{},[3933,104158,51389],{},[22,104160,51394],{"id":51393},[15,104162,51397,104163,51401,104165,51404,104167,51408],{},[3933,104164,51400],{},[9295,104166,1271],{},[9295,104168,51407],{},[3087,104170,51412],{"id":51411},[15,104172,51415],{},[154,104174,104176],{"className":156,"code":51418,"filename":51419,"highlights":104175,"language":162,"meta":163,"style":163},[160,238,243,261,313],[87,104177,104178,104188,104200,104204,104221,104236,104247,104252,104256,104260,104268,104272,104280,104305],{"__ignoreMap":163},[167,104179,104180,104182,104184,104186],{"class":169,"line":170},[167,104181,174],{"class":173},[167,104183,178],{"class":177},[167,104185,182],{"class":181},[167,104187,185],{"class":173},[167,104189,104190,104192,104194,104196,104198],{"class":169,"line":188},[167,104191,51437],{"class":191},[167,104193,195],{"class":173},[167,104195,198],{"class":191},[167,104197,51444],{"class":201},[167,104199,24044],{"class":173},[167,104201,104202],{"class":169,"line":205},[167,104203,209],{"emptyLinePlaceholder":208},[167,104205,104207,104209,104211,104213,104215,104217,104219],{"class":104206,"line":160},[169,213],[167,104208,1443],{"class":191},[167,104210,5523],{"class":219},[167,104212,223],{"class":191},[167,104214,226],{"class":181},[167,104216,229],{"class":173},[167,104218,3392],{"class":219},[167,104220,24169],{"class":173},[167,104222,104224,104226,104228,104230,104232,104234],{"class":104223,"line":238},[169,213],[167,104225,1443],{"class":191},[167,104227,5608],{"class":181},[167,104229,223],{"class":191},[167,104231,1469],{"class":173},[167,104233,639],{"class":191},[167,104235,1905],{"class":173},[167,104237,104239,104241,104243,104245],{"class":104238,"line":243},[169,213],[167,104240,51488],{"class":173},[167,104242,267],{"class":191},[167,104244,5625],{"class":191},[167,104246,51495],{"class":173},[167,104248,104250],{"class":104249,"line":261},[169,213],[167,104251,51501],{"class":173},[167,104253,104254],{"class":169,"line":273},[167,104255,209],{"emptyLinePlaceholder":208},[167,104257,104258],{"class":169,"line":279},[167,104259,51510],{"class":18662},[167,104261,104262,104264,104266],{"class":169,"line":289},[167,104263,282],{"class":173},[167,104265,178],{"class":177},[167,104267,185],{"class":173},[167,104269,104270],{"class":169,"line":294},[167,104271,209],{"emptyLinePlaceholder":208},[167,104273,104274,104276,104278],{"class":169,"line":304},[167,104275,174],{"class":173},[167,104277,299],{"class":177},[167,104279,185],{"class":173},[167,104281,104283,104285,104287,104289,104291,104293,104295,104297,104299,104301,104303],{"class":104282,"line":313},[169,213],[167,104284,307],{"class":173},[167,104286,1271],{"class":177},[167,104288,51540],{"class":181},[167,104290,267],{"class":173},[167,104292,5699],{"class":201},[167,104294,51547],{"class":181},[167,104296,267],{"class":173},[167,104298,5665],{"class":201},[167,104300,1282],{"class":173},[167,104302,1271],{"class":177},[167,104304,185],{"class":173},[167,104306,104307,104309,104311],{"class":169,"line":161},[167,104308,282],{"class":173},[167,104310,299],{"class":177},[167,104312,185],{"class":173},[154,104314,104316],{"className":156,"code":51568,"filename":51569,"highlights":104315,"language":162,"meta":163,"style":163},[238,279,289,294,495],[87,104317,104318,104326,104334,104340,104346,104353,104357,104361,104365,104372,104387,104392,104396,104400,104404,104412,104416,104424,104449],{"__ignoreMap":163},[167,104319,104320,104322,104324],{"class":169,"line":170},[167,104321,174],{"class":173},[167,104323,178],{"class":177},[167,104325,185],{"class":173},[167,104327,104328,104330,104332],{"class":169,"line":188},[167,104329,51585],{"class":191},[167,104331,3991],{"class":191},[167,104333,1905],{"class":173},[167,104335,104336,104338],{"class":169,"line":205},[167,104337,51594],{"class":181},[167,104339,763],{"class":173},[167,104341,104342,104344],{"class":169,"line":160},[167,104343,8767],{"class":191},[167,104345,1905],{"class":173},[167,104347,104349,104351],{"class":104348,"line":238},[169,213],[167,104350,51608],{"class":173},[167,104352,8093],{"class":219},[167,104354,104355],{"class":169,"line":243},[167,104356,42349],{"class":173},[167,104358,104359],{"class":169,"line":261},[167,104360,755],{"class":173},[167,104362,104363],{"class":169,"line":273},[167,104364,51623],{"class":173},[167,104366,104368,104370],{"class":104367,"line":279},[169,213],[167,104369,51629],{"class":181},[167,104371,763],{"class":173},[167,104373,104375,104377,104379,104381,104383,104385],{"class":104374,"line":289},[169,213],[167,104376,14773],{"class":219},[167,104378,51639],{"class":173},[167,104380,267],{"class":191},[167,104382,5625],{"class":191},[167,104384,4927],{"class":219},[167,104386,51648],{"class":173},[167,104388,104390],{"class":104389,"line":294},[169,213],[167,104391,7287],{"class":173},[167,104393,104394],{"class":169,"line":304},[167,104395,4049],{"class":173},[167,104397,104398],{"class":169,"line":313},[167,104399,51501],{"class":173},[167,104401,104402],{"class":169,"line":161},[167,104403,51510],{"class":18662},[167,104405,104406,104408,104410],{"class":169,"line":335},[167,104407,282],{"class":173},[167,104409,178],{"class":177},[167,104411,185],{"class":173},[167,104413,104414],{"class":169,"line":341},[167,104415,209],{"emptyLinePlaceholder":208},[167,104417,104418,104420,104422],{"class":169,"line":489},[167,104419,174],{"class":173},[167,104421,299],{"class":177},[167,104423,185],{"class":173},[167,104425,104427,104429,104431,104433,104435,104437,104439,104441,104443,104445,104447],{"class":104426,"line":495},[169,213],[167,104428,307],{"class":173},[167,104430,1271],{"class":177},[167,104432,51540],{"class":181},[167,104434,267],{"class":173},[167,104436,5699],{"class":201},[167,104438,51547],{"class":181},[167,104440,267],{"class":173},[167,104442,5665],{"class":201},[167,104444,1282],{"class":173},[167,104446,1271],{"class":177},[167,104448,185],{"class":173},[167,104450,104451,104453,104455],{"class":169,"line":501},[167,104452,282],{"class":173},[167,104454,299],{"class":177},[167,104456,185],{"class":173},[15,104458,104459,51724],{},[3933,104460,51723],{},[154,104462,104464],{"className":156,"code":51727,"filename":51728,"highlights":104463,"language":162,"meta":163,"style":163},[188,205,160,243],[87,104465,104466,104474,104489,104504,104509,104517,104538,104542,104550,104558],{"__ignoreMap":163},[167,104467,104468,104470,104472],{"class":169,"line":170},[167,104469,174],{"class":173},[167,104471,299],{"class":177},[167,104473,185],{"class":173},[167,104475,104477,104479,104481,104483,104485,104487],{"class":104476,"line":188},[169,213],[167,104478,307],{"class":173},[167,104480,51747],{"class":177},[167,104482,32029],{"class":181},[167,104484,267],{"class":173},[167,104486,51754],{"class":201},[167,104488,185],{"class":173},[167,104490,104492,104494,104496,104498,104500,104502],{"class":104491,"line":205},[169,213],[167,104493,1257],{"class":173},[167,104495,507],{"class":177},[167,104497,1182],{"class":181},[167,104499,267],{"class":173},[167,104501,5665],{"class":201},[167,104503,185],{"class":173},[167,104505,104507],{"class":104506,"line":160},[169,213],[167,104508,51777],{"class":173},[167,104510,104511,104513,104515],{"class":169,"line":238},[167,104512,1292],{"class":173},[167,104514,507],{"class":177},[167,104516,185],{"class":173},[167,104518,104520,104522,104524,104526,104528,104530,104532,104534,104536],{"class":104519,"line":243},[169,213],[167,104521,1257],{"class":173},[167,104523,1242],{"class":177},[167,104525,5694],{"class":181},[167,104527,267],{"class":173},[167,104529,5699],{"class":201},[167,104531,1245],{"class":181},[167,104533,267],{"class":173},[167,104535,51805],{"class":201},[167,104537,185],{"class":173},[167,104539,104540],{"class":169,"line":261},[167,104541,51812],{"class":173},[167,104543,104544,104546,104548],{"class":169,"line":273},[167,104545,1292],{"class":173},[167,104547,1242],{"class":177},[167,104549,185],{"class":173},[167,104551,104552,104554,104556],{"class":169,"line":279},[167,104553,504],{"class":173},[167,104555,51747],{"class":177},[167,104557,185],{"class":173},[167,104559,104560,104562,104564],{"class":169,"line":289},[167,104561,282],{"class":173},[167,104563,299],{"class":177},[167,104565,185],{"class":173},[22,104567,51840,104568,6219],{"id":51839},[87,104569,51843],{},[15,104571,51846,104572,51849,104574,51853,104576,2526,104578,51859,104580,51863],{},[87,104573,31997],{},[87,104575,51852],{},[87,104577,51843],{},[9295,104579,51858],{},[3933,104581,51862],{},[154,104583,104585],{"className":51866,"code":51867,"filename":51868,"highlights":104584,"language":51870,"meta":163,"style":163},[160,238,243,289,294,304,313],[87,104586,104587,104591,104595,104599,104604,104609,104614,104618,104622,104626,104631,104636,104641,104646,104650,104654],{"__ignoreMap":163},[167,104588,104589],{"class":169,"line":170},[167,104590,51877],{},[167,104592,104593],{"class":169,"line":188},[167,104594,209],{"emptyLinePlaceholder":208},[167,104596,104597],{"class":169,"line":205},[167,104598,51886],{},[167,104600,104602],{"class":104601,"line":160},[169,213],[167,104603,51892],{},[167,104605,104607],{"class":104606,"line":238},[169,213],[167,104608,51898],{},[167,104610,104612],{"class":104611,"line":243},[169,213],[167,104613,51904],{},[167,104615,104616],{"class":169,"line":261},[167,104617,209],{"emptyLinePlaceholder":208},[167,104619,104620],{"class":169,"line":273},[167,104621,51913],{},[167,104623,104624],{"class":169,"line":279},[167,104625,51918],{},[167,104627,104629],{"class":104628,"line":289},[169,213],[167,104630,51924],{},[167,104632,104634],{"class":104633,"line":294},[169,213],[167,104635,51930],{},[167,104637,104639],{"class":104638,"line":304},[169,213],[167,104640,51936],{},[167,104642,104644],{"class":104643,"line":313},[169,213],[167,104645,51942],{},[167,104647,104648],{"class":169,"line":161},[167,104649,24370],{},[167,104651,104652],{"class":169,"line":335},[167,104653,3492],{},[167,104655,104656],{"class":169,"line":341},[167,104657,24148],{},[15,104659,51957],{},[22,104661,51961],{"id":51960},[15,104663,51964,104664,2526,104666,51970],{},[9295,104665,51967],{},[87,104667,5735],{},[56,104669,104670,104680],{},[59,104671,104672],{},[62,104673,104674,104676,104678],{},[65,104675,51979],{},[65,104677,954],{},[65,104679,51371],{},[75,104681,104682,104692,104702,104712,104722],{},[62,104683,104684,104688,104690],{},[80,104685,104686],{},[3933,104687,51992],{},[80,104689,51995],{},[80,104691,51998],{},[62,104693,104694,104698,104700],{},[80,104695,104696],{},[3933,104697,52005],{},[80,104699,52008],{},[80,104701,52011],{},[62,104703,104704,104708,104710],{},[80,104705,104706],{},[3933,104707,52018],{},[80,104709,52021],{},[80,104711,52024],{},[62,104713,104714,104718,104720],{},[80,104715,104716],{},[3933,104717,1647],{},[80,104719,52033],{},[80,104721,52036],{},[62,104723,104724,104728,104730],{},[80,104725,104726],{},[3933,104727,52043],{},[80,104729,52046],{},[80,104731,52049],{},[15,104733,3304,104734,52054,104736,52057,104738,4270],{},[9295,104735,51371],{},[87,104737,6796],{},[9295,104739,52060],{},[22,104741,52064],{"id":52063},[3035,104743,104744,104750,104754],{},[36,104745,104746,52072,104748,52075],{},[3933,104747,52071],{},[9295,104749,51382],{},[36,104751,104752,52081],{},[3933,104753,52080],{},[36,104755,104756,52087],{},[3933,104757,52086],{},[22,104759,52091],{"id":52090},[15,104761,52094,104762,52097,104764,52100],{},[87,104763,31708],{},[3933,104765,51371],{},[924,104767,52103],{},{"title":163,"searchDepth":188,"depth":188,"links":104769},[104770,104771,104774,104775,104776,104777],{"id":51375,"depth":188,"text":51376},{"id":51393,"depth":188,"text":51394,"children":104772},[104773],{"id":51411,"depth":205,"text":51412},{"id":51839,"depth":188,"text":52111},{"id":51960,"depth":188,"text":51961},{"id":52063,"depth":188,"text":52064},{"id":52090,"depth":188,"text":52091},{"updatedAt":945,"coverCaption":52119,"author":946,"keywords":104779},[951,51371,52121,52122,51337],[104781],{"headline":51355,"author":104782,"datePublished":52127,"@type":961},{"name":946,"@type":959},{"title":51355,"description":52117},[104785,104786,104787,104788,104789,104790],{"tag":953,"color":971},{"tag":52122,"color":52133},{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":7730,"color":7731},{"tag":973,"color":974},{"id":104792,"title":104793,"body":104794,"cover":936,"coverAlt":105546,"date":938,"description":105547,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":105548,"navigation":208,"path":105552,"schemaOrg":105553,"seo":105556,"series":963,"seriesDescription":104126,"seriesOrder":243,"seriesTitle":104127,"slug":942,"stem":105557,"tags":105558,"__hash__":105564},"blog\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en.md","Pinia in Vue 3: When to Use Global State and When Not To",{"type":8,"value":104795,"toc":105537},[104796,104799,104802,104805,104809,104812,104815,104829,104832,104836,104911,104914,104918,104921,104924,105053,105193,105196,105200,105206,105212,105412,105420,105423,105427,105433,105509,105515,105519,105522,105525,105529,105532,105535],[11,104797,104793],{"id":104798},"pinia-in-vue-3-when-to-use-global-state-and-when-not-to",[15,104800,104801],{},"Pinia does not make an application scalable on its own. A poorly chosen store can hide who owns a piece of data and turn a simple component relationship into a global dependency.",[15,104803,104804],{},"The decision starts before choosing a tool: identify who consumes the state, who changes it, and how long it needs to live. With those criteria, Pinia becomes a useful boundary when the scope is truly global.",[22,104806,104808],{"id":104807},"before-choosing-pinia-define-the-scope-of-state","Before choosing Pinia: define the scope of state",[15,104810,104811],{},"Every component instance already has its own reactive state. Shared state matters when multiple components or views depend on the same data, or when different actions need to coordinate its changes.",[15,104813,104814],{},"Before creating a store, ask:",[33,104816,104817,104820,104823,104826],{},[36,104818,104819],{},"Does a single component own this data?",[36,104821,104822],{},"Do only the components of one screen or subtree coordinate it?",[36,104824,104825],{},"Does it need to survive navigation?",[36,104827,104828],{},"Does changing it represent a recognizable business operation?",[15,104830,104831],{},"Pinia follows from those answers; it is not the starting point.",[22,104833,104835],{"id":104834},"decision-map-local-subtree-or-global","Decision map: local, subtree, or global",[56,104837,104838,104851],{},[59,104839,104840],{},[62,104841,104842,104845,104848],{},[65,104843,104844],{},"Situation",[65,104846,104847],{},"Recommended scope",[65,104849,104850],{},"Example",[75,104852,104853,104868,104879,104890,104901],{},[62,104854,104855,104858,104865],{},[80,104856,104857],{},"A component's visual control",[80,104859,104860,104861,63104,104863],{},"Local state with ",[87,104862,89],{},[87,104864,93],{},[80,104866,104867],{},"Opening a modal on one page",[62,104869,104870,104873,104876],{},[80,104871,104872],{},"Several descendants of one screen",[80,104874,104875],{},"Common ancestor with props and events",[80,104877,104878],{},"Catalog filters",[62,104880,104881,104884,104887],{},[80,104882,104883],{},"Reusable behavior per instance",[80,104885,104886],{},"Composable with local state per use",[80,104888,104889],{},"Search logic",[62,104891,104892,104895,104898],{},[80,104893,104894],{},"Data and logic across components or pages",[80,104896,104897],{},"Pinia store",[80,104899,104900],{},"Session across navigation",[62,104902,104903,104906,104908],{},[80,104904,104905],{},"A process that continues between routes",[80,104907,104897],{},[80,104909,104910],{},"Multi-page checkout",[15,104912,104913],{},"A composable centralizes reusable behavior, but it does not make its state global automatically. Decide separately whether every use needs its own instance or the application requires one shared source.",[22,104915,104917],{"id":104916},"when-props-and-events-are-clearer-than-a-store","When props and events are clearer than a store",[15,104919,104920],{},"In a parent-child relationship, props and events keep the flow explicit: the parent provides data and the child communicates an intention. The child should not mutate a prop.",[15,104922,104923],{},"Here, the filters belong to the catalog screen. The ancestor keeps the state and the child control requests the change; no other route needs to know about it.",[154,104925,104927],{"className":156,"code":157,"filename":158,"highlights":104926,"language":162,"meta":163,"style":163},[160,161],[87,104928,104929,104939,104949,104953,104970,104974,104986,104994,104998,105006,105010,105018,105024,105032,105041,105045],{"__ignoreMap":163},[167,104930,104931,104933,104935,104937],{"class":169,"line":170},[167,104932,174],{"class":173},[167,104934,178],{"class":177},[167,104936,182],{"class":181},[167,104938,185],{"class":173},[167,104940,104941,104943,104945,104947],{"class":169,"line":188},[167,104942,192],{"class":191},[167,104944,195],{"class":173},[167,104946,198],{"class":191},[167,104948,202],{"class":201},[167,104950,104951],{"class":169,"line":205},[167,104952,209],{"emptyLinePlaceholder":208},[167,104954,104956,104958,104960,104962,104964,104966,104968],{"class":104955,"line":160},[169,213],[167,104957,216],{"class":191},[167,104959,220],{"class":219},[167,104961,223],{"class":191},[167,104963,226],{"class":181},[167,104965,229],{"class":173},[167,104967,232],{"class":201},[167,104969,235],{"class":173},[167,104971,104972],{"class":169,"line":238},[167,104973,209],{"emptyLinePlaceholder":208},[167,104975,104976,104978,104980,104982,104984],{"class":169,"line":243},[167,104977,246],{"class":191},[167,104979,249],{"class":181},[167,104981,229],{"class":173},[167,104983,255],{"class":254},[167,104985,258],{"class":173},[167,104987,104988,104990,104992],{"class":169,"line":261},[167,104989,264],{"class":173},[167,104991,267],{"class":191},[167,104993,270],{"class":173},[167,104995,104996],{"class":169,"line":273},[167,104997,276],{"class":173},[167,104999,105000,105002,105004],{"class":169,"line":279},[167,105001,282],{"class":173},[167,105003,178],{"class":177},[167,105005,185],{"class":173},[167,105007,105008],{"class":169,"line":289},[167,105009,209],{"emptyLinePlaceholder":208},[167,105011,105012,105014,105016],{"class":169,"line":294},[167,105013,174],{"class":173},[167,105015,299],{"class":177},[167,105017,185],{"class":173},[167,105019,105020,105022],{"class":169,"line":304},[167,105021,307],{"class":173},[167,105023,310],{"class":177},[167,105025,105026,105028,105030],{"class":169,"line":313},[167,105027,316],{"class":181},[167,105029,267],{"class":173},[167,105031,321],{"class":201},[167,105033,105035,105037,105039],{"class":105034,"line":161},[169,213],[167,105036,327],{"class":181},[167,105038,267],{"class":173},[167,105040,332],{"class":201},[167,105042,105043],{"class":169,"line":335},[167,105044,338],{"class":173},[167,105046,105047,105049,105051],{"class":169,"line":341},[167,105048,282],{"class":173},[167,105050,299],{"class":177},[167,105052,185],{"class":173},[154,105054,105056],{"className":156,"code":350,"filename":351,"highlights":105055,"language":162,"meta":163,"style":163},[279],[87,105057,105058,105068,105074,105078,105082,105090,105094,105098,105102,105119,105127,105131,105139,105145,105153,105161,105169,105173,105177,105185],{"__ignoreMap":163},[167,105059,105060,105062,105064,105066],{"class":169,"line":170},[167,105061,174],{"class":173},[167,105063,178],{"class":177},[167,105065,182],{"class":181},[167,105067,185],{"class":173},[167,105069,105070,105072],{"class":169,"line":188},[167,105071,369],{"class":181},[167,105073,372],{"class":173},[167,105075,105076],{"class":169,"line":205},[167,105077,377],{"class":173},[167,105079,105080],{"class":169,"line":160},[167,105081,382],{"class":173},[167,105083,105084,105086,105088],{"class":169,"line":238},[167,105085,387],{"class":173},[167,105087,390],{"class":219},[167,105089,393],{"class":173},[167,105091,105092],{"class":169,"line":243},[167,105093,398],{"class":173},[167,105095,105096],{"class":169,"line":261},[167,105097,403],{"class":173},[167,105099,105100],{"class":169,"line":273},[167,105101,209],{"emptyLinePlaceholder":208},[167,105103,105105,105107,105109,105111,105113,105115,105117],{"class":105104,"line":279},[169,213],[167,105106,216],{"class":191},[167,105108,415],{"class":219},[167,105110,223],{"class":191},[167,105112,420],{"class":181},[167,105114,423],{"class":173},[167,105116,426],{"class":201},[167,105118,429],{"class":173},[167,105120,105121,105123,105125],{"class":169,"line":289},[167,105122,282],{"class":173},[167,105124,178],{"class":177},[167,105126,185],{"class":173},[167,105128,105129],{"class":169,"line":294},[167,105130,209],{"emptyLinePlaceholder":208},[167,105132,105133,105135,105137],{"class":169,"line":304},[167,105134,174],{"class":173},[167,105136,299],{"class":177},[167,105138,185],{"class":173},[167,105140,105141,105143],{"class":169,"line":313},[167,105142,307],{"class":173},[167,105144,456],{"class":177},[167,105146,105147,105149,105151],{"class":169,"line":161},[167,105148,461],{"class":181},[167,105150,267],{"class":173},[167,105152,466],{"class":201},[167,105154,105155,105157,105159],{"class":169,"line":335},[167,105156,471],{"class":181},[167,105158,267],{"class":173},[167,105160,476],{"class":201},[167,105162,105163,105165,105167],{"class":169,"line":341},[167,105164,481],{"class":181},[167,105166,267],{"class":173},[167,105168,486],{"class":201},[167,105170,105171],{"class":169,"line":489},[167,105172,492],{"class":173},[167,105174,105175],{"class":169,"line":495},[167,105176,498],{"class":173},[167,105178,105179,105181,105183],{"class":169,"line":501},[167,105180,504],{"class":173},[167,105182,507],{"class":177},[167,105184,185],{"class":173},[167,105186,105187,105189,105191],{"class":169,"line":512},[167,105188,282],{"class":173},[167,105190,299],{"class":177},[167,105192,185],{"class":173},[15,105194,105195],{},"The parent declares the true owner of the state, and the child emits an intention without changing the prop. If too many intermediate levels make the tree uncomfortable, revisit the design and the scope: prop drilling is a signal to evaluate alternatives, not an automatic order to globalize.",[22,105197,105199],{"id":105198},"when-pinia-earns-its-place","When Pinia earns its place",[15,105201,105202,105203,105205],{},"A Pinia store organizes state and business logic outside the component tree through ",[87,105204,531],{},", getters, and actions. It fits when multiple parts of the application need the same source of truth, such as a session shown in navigation and protected pages, or a complex form that continues across pages.",[15,105207,105208,105209,105211],{},"A small store should have one specific responsibility. In an Option Store, declare every property in ",[87,105210,538],{},"; do not add them later.",[154,105213,105215],{"className":542,"code":543,"filename":544,"highlights":105214,"language":546,"meta":163,"style":163},[243,261,273,294,335,341,489],[87,105216,105217,105227,105231,105257,105261,105279,105290,105307,105312,105316,105320,105341,105345,105349,105353,105368,105379,105384,105390,105400,105404,105408],{"__ignoreMap":163},[167,105218,105219,105221,105223,105225],{"class":169,"line":170},[167,105220,192],{"class":191},[167,105222,555],{"class":173},[167,105224,198],{"class":191},[167,105226,560],{"class":201},[167,105228,105229],{"class":169,"line":188},[167,105230,209],{"emptyLinePlaceholder":208},[167,105232,105233,105235,105237,105239,105241,105243,105245,105247,105249,105251,105253,105255],{"class":169,"line":205},[167,105234,569],{"class":191},[167,105236,572],{"class":181},[167,105238,223],{"class":191},[167,105240,577],{"class":173},[167,105242,580],{"class":254},[167,105244,583],{"class":191},[167,105246,586],{"class":219},[167,105248,589],{"class":173},[167,105250,592],{"class":254},[167,105252,583],{"class":191},[167,105254,586],{"class":219},[167,105256,599],{"class":173},[167,105258,105259],{"class":169,"line":160},[167,105260,209],{"emptyLinePlaceholder":208},[167,105262,105263,105265,105267,105269,105271,105273,105275,105277],{"class":169,"line":238},[167,105264,608],{"class":191},[167,105266,611],{"class":191},[167,105268,614],{"class":219},[167,105270,223],{"class":191},[167,105272,619],{"class":181},[167,105274,229],{"class":173},[167,105276,624],{"class":201},[167,105278,627],{"class":173},[167,105280,105282,105284,105286,105288],{"class":105281,"line":243},[169,213],[167,105283,633],{"class":181},[167,105285,636],{"class":173},[167,105287,639],{"class":191},[167,105289,642],{"class":173},[167,105291,105293,105295,105297,105299,105301,105303,105305],{"class":105292,"line":261},[169,213],[167,105294,648],{"class":173},[167,105296,651],{"class":219},[167,105298,654],{"class":191},[167,105300,572],{"class":181},[167,105302,659],{"class":191},[167,105304,662],{"class":219},[167,105306,393],{"class":173},[167,105308,105310],{"class":105309,"line":273},[169,213],[167,105311,670],{"class":173},[167,105313,105314],{"class":169,"line":279},[167,105315,209],{"emptyLinePlaceholder":208},[167,105317,105318],{"class":169,"line":289},[167,105319,679],{"class":173},[167,105321,105323,105325,105327,105329,105331,105333,105335,105337,105339],{"class":105322,"line":294},[169,213],[167,105324,685],{"class":181},[167,105326,688],{"class":173},[167,105328,531],{"class":254},[167,105330,693],{"class":173},[167,105332,639],{"class":191},[167,105334,698],{"class":173},[167,105336,701],{"class":191},[167,105338,662],{"class":219},[167,105340,393],{"class":173},[167,105342,105343],{"class":169,"line":304},[167,105344,398],{"class":173},[167,105346,105347],{"class":169,"line":313},[167,105348,209],{"emptyLinePlaceholder":208},[167,105350,105351],{"class":169,"line":161},[167,105352,718],{"class":173},[167,105354,105356,105358,105360,105362,105364,105366],{"class":105355,"line":335},[169,213],[167,105357,724],{"class":181},[167,105359,229],{"class":173},[167,105361,729],{"class":254},[167,105363,583],{"class":191},[167,105365,572],{"class":181},[167,105367,258],{"class":173},[167,105369,105371,105373,105375,105377],{"class":105370,"line":341},[169,213],[167,105372,741],{"class":219},[167,105374,744],{"class":173},[167,105376,267],{"class":191},[167,105378,749],{"class":173},[167,105380,105382],{"class":105381,"line":489},[169,213],[167,105383,755],{"class":173},[167,105385,105386,105388],{"class":169,"line":495},[167,105387,760],{"class":181},[167,105389,763],{"class":173},[167,105391,105392,105394,105396,105398],{"class":169,"line":501},[167,105393,741],{"class":219},[167,105395,744],{"class":173},[167,105397,267],{"class":191},[167,105399,774],{"class":219},[167,105401,105402],{"class":169,"line":512},[167,105403,755],{"class":173},[167,105405,105406],{"class":169,"line":781},[167,105407,398],{"class":173},[167,105409,105410],{"class":169,"line":786},[167,105411,403],{"class":173},[15,105413,105414,105416,105417,105419],{},[87,105415,729],{}," is stored state and ",[87,105418,796],{}," is derived state, so it is not duplicated as mutable data. Actions name session operations and make it easier to locate why shared state changes. This does not mean an action alone prevents every direct mutation: clarity comes from establishing and respecting that boundary.",[15,105421,105422],{},"Do not use this store for the visibility of a tooltip or a modal that exists on only one page. That detail belongs to the component or, at most, its screen.",[22,105424,105426],{"id":105425},"simple-shared-state-and-composables-alternatives-with-boundaries","Simple shared state and composables: alternatives with boundaries",[15,105428,105429,105430,105432],{},"For a simple SPA case, Vue lets you share a ",[87,105431,93],{}," object imported by several components. The important boundary is mutation: if every consumer can write any property, the design loses traceability.",[154,105434,105436],{"className":542,"code":813,"filename":814,"highlights":105435,"language":546,"meta":163,"style":163},[238,243,261],[87,105437,105438,105448,105452,105466,105474,105489,105500,105505],{"__ignoreMap":163},[167,105439,105440,105442,105444,105446],{"class":169,"line":170},[167,105441,192],{"class":191},[167,105443,824],{"class":173},[167,105445,198],{"class":191},[167,105447,202],{"class":201},[167,105449,105450],{"class":169,"line":188},[167,105451,209],{"emptyLinePlaceholder":208},[167,105453,105454,105456,105458,105460,105462,105464],{"class":169,"line":205},[167,105455,608],{"class":191},[167,105457,611],{"class":191},[167,105459,841],{"class":219},[167,105461,223],{"class":191},[167,105463,846],{"class":181},[167,105465,372],{"class":173},[167,105467,105468,105470,105472],{"class":169,"line":160},[167,105469,853],{"class":173},[167,105471,232],{"class":201},[167,105473,393],{"class":173},[167,105475,105477,105479,105481,105483,105485,105487],{"class":105476,"line":238},[169,213],[167,105478,863],{"class":181},[167,105480,229],{"class":173},[167,105482,255],{"class":254},[167,105484,583],{"class":191},[167,105486,586],{"class":219},[167,105488,258],{"class":173},[167,105490,105492,105494,105496,105498],{"class":105491,"line":243},[169,213],[167,105493,879],{"class":219},[167,105495,882],{"class":173},[167,105497,267],{"class":191},[167,105499,270],{"class":173},[167,105501,105503],{"class":105502,"line":261},[169,213],[167,105504,398],{"class":173},[167,105506,105507],{"class":169,"line":273},[167,105508,403],{"class":173},[15,105510,105511,105512,105514],{},"Centralizing the change in ",[87,105513,901],{}," communicates which operation is happening. Consider Pinia when the state grows or you need collaboration conventions, DevTools integration, HMR, or a more robust SSR boundary.",[22,105516,105518],{"id":105517},"ssr-do-not-share-state-between-requests","SSR: do not share state between requests",[15,105520,105521],{},"In server-side rendering, a reactive singleton created at module scope can share state between requests. Isolation must respect each application instance.",[15,105523,105524],{},"Pinia works with the corresponding Pinia instance. If you use a store outside a component, do it when that instance is available and use the one associated with the current application. This is an isolation rule, not a framework-specific recipe.",[22,105526,105528],{"id":105527},"common-mistakes-and-a-practical-rule","Common mistakes and a practical rule",[15,105530,105531],{},"Avoid globalizing every reactive variable, replacing props and events in a simple parent-child relationship, storing ephemeral visual details from one page in a store, allowing shared mutations without an operation with clear intent, and creating a manual singleton for SSR.",[15,105533,105534],{},"The practical rule is to start with the smallest scope that honestly represents who owns the data. Expand it when consumers, cross-page lifetime, or coordination logic demand it. Pinia adds value when it makes a real global boundary explicit.",[924,105536,926],{},{"title":163,"searchDepth":188,"depth":188,"links":105538},[105539,105540,105541,105542,105543,105544,105545],{"id":104807,"depth":188,"text":104808},{"id":104834,"depth":188,"text":104835},{"id":104916,"depth":188,"text":104917},{"id":105198,"depth":188,"text":105199},{"id":105425,"depth":188,"text":105426},{"id":105517,"depth":188,"text":105518},{"id":105527,"depth":188,"text":105528},"Decision diagram for choosing between local state, props and events, composables, or Pinia in Vue 3.","Learn how to decide whether data belongs in a component, a subtree, or a Pinia store based on its consumers, lifetime, and shared logic.",{"updatedAt":945,"author":946,"coverCaption":105549,"keywords":105550},"Visual reference for deciding the scope of state in Vue 3.",[949,950,951,105551,60267,954],"State Management","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en",[105554],{"headline":104793,"author":105555,"datePublished":960,"@type":961},{"name":946,"@type":959},{"title":104793,"description":105547},"blog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.en",[105559,105560,105561,105562,105563],{"tag":105551,"color":969},{"tag":60267,"color":971},{"tag":104136,"color":974},{"tag":954,"color":976},{"tag":978,"color":979},"UewqiLTUycHX3tO-n_BB7cm5btgrQ5mc7oo806mgnC4",{"id":5,"title":6,"body":105566,"cover":936,"coverAlt":937,"date":938,"description":939,"draft":940,"extension":941,"lab":942,"locale":943,"meta":106258,"navigation":208,"path":955,"schemaOrg":106260,"seo":106263,"series":963,"seriesDescription":964,"seriesOrder":243,"seriesTitle":965,"slug":942,"stem":966,"tags":106264,"__hash__":980},{"type":8,"value":105567,"toc":106249},[105568,105570,105572,105574,105576,105578,105580,105590,105592,105594,105652,105654,105656,105658,105660,105789,105929,105931,105933,105937,105941,106141,106147,106149,106151,106155,106231,106235,106237,106239,106241,106243,106245,106247],[11,105569,6],{"id":13},[15,105571,17],{},[15,105573,20],{},[22,105575,25],{"id":24},[15,105577,28],{},[15,105579,31],{},[33,105581,105582,105584,105586,105588],{},[36,105583,38],{},[36,105585,41],{},[36,105587,44],{},[36,105589,47],{},[15,105591,50],{},[22,105593,54],{"id":53},[56,105595,105596,105606],{},[59,105597,105598],{},[62,105599,105600,105602,105604],{},[65,105601,67],{},[65,105603,70],{},[65,105605,73],{},[75,105607,105608,105620,105628,105636,105644],{},[62,105609,105610,105612,105618],{},[80,105611,82],{},[80,105613,85,105614,90,105616],{},[87,105615,89],{},[87,105617,93],{},[80,105619,96],{},[62,105621,105622,105624,105626],{},[80,105623,101],{},[80,105625,104],{},[80,105627,107],{},[62,105629,105630,105632,105634],{},[80,105631,112],{},[80,105633,115],{},[80,105635,118],{},[62,105637,105638,105640,105642],{},[80,105639,123],{},[80,105641,126],{},[80,105643,129],{},[62,105645,105646,105648,105650],{},[80,105647,134],{},[80,105649,126],{},[80,105651,139],{},[15,105653,142],{},[22,105655,146],{"id":145},[15,105657,149],{},[15,105659,152],{},[154,105661,105663],{"className":156,"code":157,"filename":158,"highlights":105662,"language":162,"meta":163,"style":163},[160,161],[87,105664,105665,105675,105685,105689,105706,105710,105722,105730,105734,105742,105746,105754,105760,105768,105777,105781],{"__ignoreMap":163},[167,105666,105667,105669,105671,105673],{"class":169,"line":170},[167,105668,174],{"class":173},[167,105670,178],{"class":177},[167,105672,182],{"class":181},[167,105674,185],{"class":173},[167,105676,105677,105679,105681,105683],{"class":169,"line":188},[167,105678,192],{"class":191},[167,105680,195],{"class":173},[167,105682,198],{"class":191},[167,105684,202],{"class":201},[167,105686,105687],{"class":169,"line":205},[167,105688,209],{"emptyLinePlaceholder":208},[167,105690,105692,105694,105696,105698,105700,105702,105704],{"class":105691,"line":160},[169,213],[167,105693,216],{"class":191},[167,105695,220],{"class":219},[167,105697,223],{"class":191},[167,105699,226],{"class":181},[167,105701,229],{"class":173},[167,105703,232],{"class":201},[167,105705,235],{"class":173},[167,105707,105708],{"class":169,"line":238},[167,105709,209],{"emptyLinePlaceholder":208},[167,105711,105712,105714,105716,105718,105720],{"class":169,"line":243},[167,105713,246],{"class":191},[167,105715,249],{"class":181},[167,105717,229],{"class":173},[167,105719,255],{"class":254},[167,105721,258],{"class":173},[167,105723,105724,105726,105728],{"class":169,"line":261},[167,105725,264],{"class":173},[167,105727,267],{"class":191},[167,105729,270],{"class":173},[167,105731,105732],{"class":169,"line":273},[167,105733,276],{"class":173},[167,105735,105736,105738,105740],{"class":169,"line":279},[167,105737,282],{"class":173},[167,105739,178],{"class":177},[167,105741,185],{"class":173},[167,105743,105744],{"class":169,"line":289},[167,105745,209],{"emptyLinePlaceholder":208},[167,105747,105748,105750,105752],{"class":169,"line":294},[167,105749,174],{"class":173},[167,105751,299],{"class":177},[167,105753,185],{"class":173},[167,105755,105756,105758],{"class":169,"line":304},[167,105757,307],{"class":173},[167,105759,310],{"class":177},[167,105761,105762,105764,105766],{"class":169,"line":313},[167,105763,316],{"class":181},[167,105765,267],{"class":173},[167,105767,321],{"class":201},[167,105769,105771,105773,105775],{"class":105770,"line":161},[169,213],[167,105772,327],{"class":181},[167,105774,267],{"class":173},[167,105776,332],{"class":201},[167,105778,105779],{"class":169,"line":335},[167,105780,338],{"class":173},[167,105782,105783,105785,105787],{"class":169,"line":341},[167,105784,282],{"class":173},[167,105786,299],{"class":177},[167,105788,185],{"class":173},[154,105790,105792],{"className":156,"code":350,"filename":351,"highlights":105791,"language":162,"meta":163,"style":163},[279],[87,105793,105794,105804,105810,105814,105818,105826,105830,105834,105838,105855,105863,105867,105875,105881,105889,105897,105905,105909,105913,105921],{"__ignoreMap":163},[167,105795,105796,105798,105800,105802],{"class":169,"line":170},[167,105797,174],{"class":173},[167,105799,178],{"class":177},[167,105801,182],{"class":181},[167,105803,185],{"class":173},[167,105805,105806,105808],{"class":169,"line":188},[167,105807,369],{"class":181},[167,105809,372],{"class":173},[167,105811,105812],{"class":169,"line":205},[167,105813,377],{"class":173},[167,105815,105816],{"class":169,"line":160},[167,105817,382],{"class":173},[167,105819,105820,105822,105824],{"class":169,"line":238},[167,105821,387],{"class":173},[167,105823,390],{"class":219},[167,105825,393],{"class":173},[167,105827,105828],{"class":169,"line":243},[167,105829,398],{"class":173},[167,105831,105832],{"class":169,"line":261},[167,105833,403],{"class":173},[167,105835,105836],{"class":169,"line":273},[167,105837,209],{"emptyLinePlaceholder":208},[167,105839,105841,105843,105845,105847,105849,105851,105853],{"class":105840,"line":279},[169,213],[167,105842,216],{"class":191},[167,105844,415],{"class":219},[167,105846,223],{"class":191},[167,105848,420],{"class":181},[167,105850,423],{"class":173},[167,105852,426],{"class":201},[167,105854,429],{"class":173},[167,105856,105857,105859,105861],{"class":169,"line":289},[167,105858,282],{"class":173},[167,105860,178],{"class":177},[167,105862,185],{"class":173},[167,105864,105865],{"class":169,"line":294},[167,105866,209],{"emptyLinePlaceholder":208},[167,105868,105869,105871,105873],{"class":169,"line":304},[167,105870,174],{"class":173},[167,105872,299],{"class":177},[167,105874,185],{"class":173},[167,105876,105877,105879],{"class":169,"line":313},[167,105878,307],{"class":173},[167,105880,456],{"class":177},[167,105882,105883,105885,105887],{"class":169,"line":161},[167,105884,461],{"class":181},[167,105886,267],{"class":173},[167,105888,466],{"class":201},[167,105890,105891,105893,105895],{"class":169,"line":335},[167,105892,471],{"class":181},[167,105894,267],{"class":173},[167,105896,476],{"class":201},[167,105898,105899,105901,105903],{"class":169,"line":341},[167,105900,481],{"class":181},[167,105902,267],{"class":173},[167,105904,486],{"class":201},[167,105906,105907],{"class":169,"line":489},[167,105908,492],{"class":173},[167,105910,105911],{"class":169,"line":495},[167,105912,498],{"class":173},[167,105914,105915,105917,105919],{"class":169,"line":501},[167,105916,504],{"class":173},[167,105918,507],{"class":177},[167,105920,185],{"class":173},[167,105922,105923,105925,105927],{"class":169,"line":512},[167,105924,282],{"class":173},[167,105926,299],{"class":177},[167,105928,185],{"class":173},[15,105930,521],{},[22,105932,525],{"id":524},[15,105934,528,105935,532],{},[87,105936,531],{},[15,105938,535,105939,539],{},[87,105940,538],{},[154,105942,105944],{"className":542,"code":543,"filename":544,"highlights":105943,"language":546,"meta":163,"style":163},[243,261,273,294,335,341,489],[87,105945,105946,105956,105960,105986,105990,106008,106019,106036,106041,106045,106049,106070,106074,106078,106082,106097,106108,106113,106119,106129,106133,106137],{"__ignoreMap":163},[167,105947,105948,105950,105952,105954],{"class":169,"line":170},[167,105949,192],{"class":191},[167,105951,555],{"class":173},[167,105953,198],{"class":191},[167,105955,560],{"class":201},[167,105957,105958],{"class":169,"line":188},[167,105959,209],{"emptyLinePlaceholder":208},[167,105961,105962,105964,105966,105968,105970,105972,105974,105976,105978,105980,105982,105984],{"class":169,"line":205},[167,105963,569],{"class":191},[167,105965,572],{"class":181},[167,105967,223],{"class":191},[167,105969,577],{"class":173},[167,105971,580],{"class":254},[167,105973,583],{"class":191},[167,105975,586],{"class":219},[167,105977,589],{"class":173},[167,105979,592],{"class":254},[167,105981,583],{"class":191},[167,105983,586],{"class":219},[167,105985,599],{"class":173},[167,105987,105988],{"class":169,"line":160},[167,105989,209],{"emptyLinePlaceholder":208},[167,105991,105992,105994,105996,105998,106000,106002,106004,106006],{"class":169,"line":238},[167,105993,608],{"class":191},[167,105995,611],{"class":191},[167,105997,614],{"class":219},[167,105999,223],{"class":191},[167,106001,619],{"class":181},[167,106003,229],{"class":173},[167,106005,624],{"class":201},[167,106007,627],{"class":173},[167,106009,106011,106013,106015,106017],{"class":106010,"line":243},[169,213],[167,106012,633],{"class":181},[167,106014,636],{"class":173},[167,106016,639],{"class":191},[167,106018,642],{"class":173},[167,106020,106022,106024,106026,106028,106030,106032,106034],{"class":106021,"line":261},[169,213],[167,106023,648],{"class":173},[167,106025,651],{"class":219},[167,106027,654],{"class":191},[167,106029,572],{"class":181},[167,106031,659],{"class":191},[167,106033,662],{"class":219},[167,106035,393],{"class":173},[167,106037,106039],{"class":106038,"line":273},[169,213],[167,106040,670],{"class":173},[167,106042,106043],{"class":169,"line":279},[167,106044,209],{"emptyLinePlaceholder":208},[167,106046,106047],{"class":169,"line":289},[167,106048,679],{"class":173},[167,106050,106052,106054,106056,106058,106060,106062,106064,106066,106068],{"class":106051,"line":294},[169,213],[167,106053,685],{"class":181},[167,106055,688],{"class":173},[167,106057,531],{"class":254},[167,106059,693],{"class":173},[167,106061,639],{"class":191},[167,106063,698],{"class":173},[167,106065,701],{"class":191},[167,106067,662],{"class":219},[167,106069,393],{"class":173},[167,106071,106072],{"class":169,"line":304},[167,106073,398],{"class":173},[167,106075,106076],{"class":169,"line":313},[167,106077,209],{"emptyLinePlaceholder":208},[167,106079,106080],{"class":169,"line":161},[167,106081,718],{"class":173},[167,106083,106085,106087,106089,106091,106093,106095],{"class":106084,"line":335},[169,213],[167,106086,724],{"class":181},[167,106088,229],{"class":173},[167,106090,729],{"class":254},[167,106092,583],{"class":191},[167,106094,572],{"class":181},[167,106096,258],{"class":173},[167,106098,106100,106102,106104,106106],{"class":106099,"line":341},[169,213],[167,106101,741],{"class":219},[167,106103,744],{"class":173},[167,106105,267],{"class":191},[167,106107,749],{"class":173},[167,106109,106111],{"class":106110,"line":489},[169,213],[167,106112,755],{"class":173},[167,106114,106115,106117],{"class":169,"line":495},[167,106116,760],{"class":181},[167,106118,763],{"class":173},[167,106120,106121,106123,106125,106127],{"class":169,"line":501},[167,106122,741],{"class":219},[167,106124,744],{"class":173},[167,106126,267],{"class":191},[167,106128,774],{"class":219},[167,106130,106131],{"class":169,"line":512},[167,106132,755],{"class":173},[167,106134,106135],{"class":169,"line":781},[167,106136,398],{"class":173},[167,106138,106139],{"class":169,"line":786},[167,106140,403],{"class":173},[15,106142,106143,793,106145,797],{},[87,106144,729],{},[87,106146,796],{},[15,106148,800],{},[22,106150,804],{"id":803},[15,106152,807,106153,810],{},[87,106154,93],{},[154,106156,106158],{"className":542,"code":813,"filename":814,"highlights":106157,"language":546,"meta":163,"style":163},[238,243,261],[87,106159,106160,106170,106174,106188,106196,106211,106222,106227],{"__ignoreMap":163},[167,106161,106162,106164,106166,106168],{"class":169,"line":170},[167,106163,192],{"class":191},[167,106165,824],{"class":173},[167,106167,198],{"class":191},[167,106169,202],{"class":201},[167,106171,106172],{"class":169,"line":188},[167,106173,209],{"emptyLinePlaceholder":208},[167,106175,106176,106178,106180,106182,106184,106186],{"class":169,"line":205},[167,106177,608],{"class":191},[167,106179,611],{"class":191},[167,106181,841],{"class":219},[167,106183,223],{"class":191},[167,106185,846],{"class":181},[167,106187,372],{"class":173},[167,106189,106190,106192,106194],{"class":169,"line":160},[167,106191,853],{"class":173},[167,106193,232],{"class":201},[167,106195,393],{"class":173},[167,106197,106199,106201,106203,106205,106207,106209],{"class":106198,"line":238},[169,213],[167,106200,863],{"class":181},[167,106202,229],{"class":173},[167,106204,255],{"class":254},[167,106206,583],{"class":191},[167,106208,586],{"class":219},[167,106210,258],{"class":173},[167,106212,106214,106216,106218,106220],{"class":106213,"line":243},[169,213],[167,106215,879],{"class":219},[167,106217,882],{"class":173},[167,106219,267],{"class":191},[167,106221,270],{"class":173},[167,106223,106225],{"class":106224,"line":261},[169,213],[167,106226,398],{"class":173},[167,106228,106229],{"class":169,"line":273},[167,106230,403],{"class":173},[15,106232,898,106233,902],{},[87,106234,901],{},[22,106236,906],{"id":905},[15,106238,909],{},[15,106240,912],{},[22,106242,916],{"id":915},[15,106244,919],{},[15,106246,922],{},[924,106248,926],{},{"title":163,"searchDepth":188,"depth":188,"links":106250},[106251,106252,106253,106254,106255,106256,106257],{"id":24,"depth":188,"text":25},{"id":53,"depth":188,"text":54},{"id":145,"depth":188,"text":146},{"id":524,"depth":188,"text":525},{"id":803,"depth":188,"text":804},{"id":905,"depth":188,"text":906},{"id":915,"depth":188,"text":916},{"updatedAt":945,"author":946,"coverCaption":947,"keywords":106259},[949,950,951,952,953,954],[106261],{"headline":6,"author":106262,"datePublished":960,"@type":961},{"name":946,"@type":959},{"title":6,"description":939},[106265,106266,106267,106268,106269],{"tag":952,"color":969},{"tag":953,"color":971},{"tag":973,"color":974},{"tag":954,"color":976},{"tag":978,"color":979},{"id":106271,"title":106272,"body":106273,"cover":56581,"coverAlt":107189,"date":56583,"description":107190,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":107191,"navigation":208,"path":107193,"schemaOrg":107194,"seo":107197,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":107198,"tags":107199,"__hash__":107203},"blog\u002Fblog\u002Fsetting-up-vue-with-vite.en.md","How to create your first project with Vue using Vite?",{"type":8,"value":106274,"toc":107177},[106275,106279,106285,106289,106292,106327,106331,106337,106347,106351,106354,106370,106385,106400,106415,106426,106430,106433,106453,106457,106460,106463,106474,106477,106487,106497,106507,106517,106523,106527,106530,106542,106552,106562,106574,106580,106584,106587,106624,106628,106634,106888,107139,107143,107175],[11,106276,106278],{"id":106277},"guide-creating-your-first-project-with-vue-and-vite","Guide: Creating your first project with Vue and Vite",[15,106280,106281,106282,106284],{},"In this guide you will learn how to set up a modern development environment. ",[3933,106283,55634],{}," is a tool that replaces the old Vue CLI, offering almost instant loading speed during development.",[22,106286,106288],{"id":106287},"solution-overview","Solution Overview",[15,106290,106291],{},"To complete this project, we will follow these steps:",[3035,106293,106294,106300,106309,106315,106321],{},[36,106295,106296,106299],{},[3933,106297,106298],{},"Preparation",": Verification of necessary tools (Node.js).",[36,106301,106302,106305,106306,106308],{},[3933,106303,106304],{},"Scaffolding",": Using the ",[87,106307,55659],{}," command to generate the structure.",[36,106310,106311,106314],{},[3933,106312,106313],{},"Installation",": Setting up project dependencies.",[36,106316,106317,106320],{},[3933,106318,106319],{},"Execution",": Launching the local development server.",[36,106322,106323,106326],{},[3933,106324,106325],{},"Exploration",": Brief explanation of the generated file structure.",[22,106328,106330],{"id":106329},"prerequisites","Prerequisites",[15,106332,106333,106334,106336],{},"Before you start, make sure you have ",[3933,106335,55688],{}," installed (version 18 or higher). You can verify this by opening a terminal and typing:",[154,106338,106339],{"className":55362,"code":55692,"filename":55365,"language":55365,"meta":163,"style":163},[87,106340,106341],{"__ignoreMap":163},[167,106342,106343,106345],{"class":169,"line":170},[167,106344,55699],{"class":181},[167,106346,55702],{"class":219},[22,106348,106350],{"id":106349},"step-1-initialize-the-project","Step 1: Initialize the project",[15,106352,106353],{},"Open your terminal in the folder where you want to save your project and run the following command:",[154,106355,106357],{"className":55362,"code":106356,"filename":55364,"language":55365,"meta":163,"style":163},"npm create vite@latest my-first-vue-project\n",[87,106358,106359],{"__ignoreMap":163},[167,106360,106361,106363,106365,106367],{"class":169,"line":170},[167,106362,55364],{"class":181},[167,106364,55721],{"class":201},[167,106366,55724],{"class":201},[167,106368,106369],{"class":201}," my-first-vue-project\n",[154,106371,106373],{"className":55362,"code":106372,"filename":55381,"language":55365,"meta":163,"style":163},"pnpm create vite my-first-vue-project\n",[87,106374,106375],{"__ignoreMap":163},[167,106376,106377,106379,106381,106383],{"class":169,"line":170},[167,106378,55381],{"class":181},[167,106380,55721],{"class":201},[167,106382,55741],{"class":201},[167,106384,106369],{"class":201},[154,106386,106388],{"className":55362,"code":106387,"filename":55396,"language":55365,"meta":163,"style":163},"yarn create vite my-first-vue-project\n",[87,106389,106390],{"__ignoreMap":163},[167,106391,106392,106394,106396,106398],{"class":169,"line":170},[167,106393,55396],{"class":181},[167,106395,55721],{"class":201},[167,106397,55741],{"class":201},[167,106399,106369],{"class":201},[154,106401,106403],{"className":55362,"code":106402,"filename":55410,"language":55365,"meta":163,"style":163},"bun create vite my-first-vue-project\n",[87,106404,106405],{"__ignoreMap":163},[167,106406,106407,106409,106411,106413],{"class":169,"line":170},[167,106408,55410],{"class":181},[167,106410,55721],{"class":201},[167,106412,55741],{"class":201},[167,106414,106369],{"class":201},[5367,106416,106417],{},[15,106418,106419,16903,106422,106425],{},[3933,106420,106421],{},"Note:",[87,106423,106424],{},"my-first-vue-project"," is the name of the folder that will be created. You can change it to whatever you prefer.",[22,106427,106429],{"id":106428},"step-2-wizard-configuration","Step 2: Wizard Configuration",[15,106431,106432],{},"Once you run the command, the terminal will ask you some interactive questions. Follow these options for a standard project:",[3035,106434,106435,106442],{},[36,106436,106437,106439,106440,1679],{},[3933,106438,55797],{}," Use the keyboard arrows to select ",[87,106441,26494],{},[36,106443,106444,106446,106447,106449,106450,106452],{},[3933,106445,55805],{}," Select ",[87,106448,55809],{}," (or ",[87,106451,55813],{}," if you prefer strong typing, but for beginners we recommend JavaScript).",[22,106454,106456],{"id":106455},"step-3-installing-dependencies","Step 3: Installing dependencies",[15,106458,106459],{},"Vite creates the file structure, but doesn't install the libraries automatically to save time. You need to enter the folder and install them manually:",[15,106461,106462],{},"Enter the project folder",[154,106464,106466],{"className":55362,"code":106465,"filename":55365,"language":55365,"meta":163,"style":163},"cd my-first-vue-project\n",[87,106467,106468],{"__ignoreMap":163},[167,106469,106470,106472],{"class":169,"line":170},[167,106471,55834],{"class":219},[167,106473,106369],{"class":201},[15,106475,106476],{},"Install all the necessary libraries",[154,106478,106479],{"className":55362,"code":55842,"filename":55364,"language":55365,"meta":163,"style":163},[87,106480,106481],{"__ignoreMap":163},[167,106482,106483,106485],{"class":169,"line":170},[167,106484,55364],{"class":181},[167,106486,55851],{"class":201},[154,106488,106489],{"className":55362,"code":55854,"filename":55381,"language":55365,"meta":163,"style":163},[87,106490,106491],{"__ignoreMap":163},[167,106492,106493,106495],{"class":169,"line":170},[167,106494,55381],{"class":181},[167,106496,55851],{"class":201},[154,106498,106499],{"className":55362,"code":55865,"filename":55396,"language":55365,"meta":163,"style":163},[87,106500,106501],{"__ignoreMap":163},[167,106502,106503,106505],{"class":169,"line":170},[167,106504,55396],{"class":181},[167,106506,55851],{"class":201},[154,106508,106509],{"className":55362,"code":55876,"filename":55410,"language":55365,"meta":163,"style":163},[87,106510,106511],{"__ignoreMap":163},[167,106512,106513,106515],{"class":169,"line":170},[167,106514,55410],{"class":181},[167,106516,55851],{"class":201},[15,106518,106519,106520,106522],{},"This process will create the ",[87,106521,55890],{}," folder, which contains all the code needed for Vue to work.",[22,106524,106526],{"id":106525},"step-4-run-the-development-server","Step 4: Run the development server",[15,106528,106529],{},"You're ready! Now start the server to see your application in the browser:",[154,106531,106532],{"className":55362,"code":55901,"filename":55364,"language":55365,"meta":163,"style":163},[87,106533,106534],{"__ignoreMap":163},[167,106535,106536,106538,106540],{"class":169,"line":170},[167,106537,55364],{"class":181},[167,106539,55910],{"class":201},[167,106541,55913],{"class":201},[154,106543,106544],{"className":55362,"code":55916,"filename":55381,"language":55365,"meta":163,"style":163},[87,106545,106546],{"__ignoreMap":163},[167,106547,106548,106550],{"class":169,"line":170},[167,106549,55381],{"class":181},[167,106551,55913],{"class":201},[154,106553,106554],{"className":55362,"code":55927,"filename":55396,"language":55365,"meta":163,"style":163},[87,106555,106556],{"__ignoreMap":163},[167,106557,106558,106560],{"class":169,"line":170},[167,106559,55396],{"class":181},[167,106561,55913],{"class":201},[154,106563,106564],{"className":55362,"code":55938,"filename":55410,"language":55365,"meta":163,"style":163},[87,106565,106566],{"__ignoreMap":163},[167,106567,106568,106570,106572],{"class":169,"line":170},[167,106569,55410],{"class":181},[167,106571,55910],{"class":201},[167,106573,55913],{"class":201},[15,106575,106576,106577,106579],{},"The terminal will show you a URL (usually ",[87,106578,55954],{},"). Open that link in your browser and you'll see the Vue welcome page.",[22,106581,106583],{"id":106582},"step-5-project-structure","Step 5: Project structure",[15,106585,106586],{},"Here's a description of the most important files you'll see in your code editor:",[33,106588,106589,106596,106603,106610,106617],{},[36,106590,106591,106595],{},[3933,106592,106593],{},[87,106594,55971],{},": The main entry point. Vite uses it to mount the application.",[36,106597,106598,106602],{},[3933,106599,106600],{},[87,106601,55979],{},": The JavaScript file that initializes the Vue instance and connects it with the HTML.",[36,106604,106605,106609],{},[3933,106606,106607],{},[87,106608,55987],{},": The root component of your application. Everything you write here will be displayed on screen.",[36,106611,106612,106616],{},[3933,106613,106614],{},[87,106615,55995],{},": Folder where you'll save your own reusable components.",[36,106618,106619,106623],{},[3933,106620,106621],{},[87,106622,55435],{},": Vite configuration file.",[22,106625,106627],{"id":106626},"example-of-a-basic-component","Example of a basic component",[15,106629,106630,106631,106633],{},"To start programming, you can open the ",[87,106632,55987],{}," file and replace its content with this simple code to understand how reactivity works:",[154,106635,106637],{"className":156,"code":106636,"filename":3260,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ message }}\u003C\u002Fh1>\n    \u003Cbutton @click=\"increment\">Counter: {{ counter }}\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue';\n\n\u002F\u002F Define a reactive variable\nconst message = \"Hello from my app with Vite!\";\nconst counter = ref(0);\n\n\u002F\u002F Function to change the state\nconst increment = () => {\n  counter.value++;\n};\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\nh1 {\n  color: #42b983;\n}\nbutton {\n  padding: 10px 20px;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[87,106638,106639,106647,106655,106667,106686,106694,106702,106706,106716,106728,106732,106737,106750,106766,106770,106775,106789,106798,106802,106810,106814,106824,106830,106840,106844,106850,106866,106876,106880],{"__ignoreMap":163},[167,106640,106641,106643,106645],{"class":169,"line":170},[167,106642,174],{"class":173},[167,106644,299],{"class":177},[167,106646,185],{"class":173},[167,106648,106649,106651,106653],{"class":169,"line":188},[167,106650,307],{"class":173},[167,106652,1242],{"class":177},[167,106654,185],{"class":173},[167,106656,106657,106659,106661,106663,106665],{"class":169,"line":205},[167,106658,1257],{"class":173},[167,106660,11],{"class":177},[167,106662,29048],{"class":173},[167,106664,11],{"class":177},[167,106666,185],{"class":173},[167,106668,106669,106671,106673,106675,106677,106679,106682,106684],{"class":169,"line":160},[167,106670,1257],{"class":173},[167,106672,507],{"class":177},[167,106674,1182],{"class":181},[167,106676,267],{"class":173},[167,106678,49442],{"class":201},[167,106680,106681],{"class":173},">Counter: {{ counter }}\u003C\u002F",[167,106683,507],{"class":177},[167,106685,185],{"class":173},[167,106687,106688,106690,106692],{"class":169,"line":238},[167,106689,504],{"class":173},[167,106691,1242],{"class":177},[167,106693,185],{"class":173},[167,106695,106696,106698,106700],{"class":169,"line":243},[167,106697,282],{"class":173},[167,106699,299],{"class":177},[167,106701,185],{"class":173},[167,106703,106704],{"class":169,"line":261},[167,106705,209],{"emptyLinePlaceholder":208},[167,106707,106708,106710,106712,106714],{"class":169,"line":273},[167,106709,174],{"class":173},[167,106711,178],{"class":177},[167,106713,182],{"class":181},[167,106715,185],{"class":173},[167,106717,106718,106720,106722,106724,106726],{"class":169,"line":279},[167,106719,192],{"class":191},[167,106721,195],{"class":173},[167,106723,198],{"class":191},[167,106725,51444],{"class":201},[167,106727,24044],{"class":173},[167,106729,106730],{"class":169,"line":289},[167,106731,209],{"emptyLinePlaceholder":208},[167,106733,106734],{"class":169,"line":294},[167,106735,106736],{"class":18662},"\u002F\u002F Define a reactive variable\n",[167,106738,106739,106741,106743,106745,106748],{"class":169,"line":304},[167,106740,216],{"class":191},[167,106742,29012],{"class":219},[167,106744,223],{"class":191},[167,106746,106747],{"class":201}," \"Hello from my app with Vite!\"",[167,106749,24044],{"class":173},[167,106751,106752,106754,106756,106758,106760,106762,106764],{"class":169,"line":313},[167,106753,216],{"class":191},[167,106755,28100],{"class":219},[167,106757,223],{"class":191},[167,106759,226],{"class":181},[167,106761,229],{"class":173},[167,106763,1960],{"class":219},[167,106765,24169],{"class":173},[167,106767,106768],{"class":169,"line":161},[167,106769,209],{"emptyLinePlaceholder":208},[167,106771,106772],{"class":169,"line":335},[167,106773,106774],{"class":18662},"\u002F\u002F Function to change the state\n",[167,106776,106777,106779,106781,106783,106785,106787],{"class":169,"line":341},[167,106778,216],{"class":191},[167,106780,49389],{"class":181},[167,106782,223],{"class":191},[167,106784,1469],{"class":173},[167,106786,639],{"class":191},[167,106788,1905],{"class":173},[167,106790,106791,106794,106796],{"class":169,"line":489},[167,106792,106793],{"class":173},"  counter.value",[167,106795,54500],{"class":191},[167,106797,24044],{"class":173},[167,106799,106800],{"class":169,"line":495},[167,106801,24148],{"class":173},[167,106803,106804,106806,106808],{"class":169,"line":501},[167,106805,282],{"class":173},[167,106807,178],{"class":177},[167,106809,185],{"class":173},[167,106811,106812],{"class":169,"line":512},[167,106813,209],{"emptyLinePlaceholder":208},[167,106815,106816,106818,106820,106822],{"class":169,"line":781},[167,106817,174],{"class":173},[167,106819,924],{"class":177},[167,106821,56205],{"class":181},[167,106823,185],{"class":173},[167,106825,106826,106828],{"class":169,"line":786},[167,106827,11],{"class":177},[167,106829,1905],{"class":173},[167,106831,106832,106834,106836,106838],{"class":169,"line":2678},[167,106833,27139],{"class":219},[167,106835,1108],{"class":173},[167,106837,56222],{"class":219},[167,106839,24044],{"class":173},[167,106841,106842],{"class":169,"line":2692},[167,106843,276],{"class":173},[167,106845,106846,106848],{"class":169,"line":3575},[167,106847,507],{"class":177},[167,106849,1905],{"class":173},[167,106851,106852,106854,106856,106858,106860,106862,106864],{"class":169,"line":5028},[167,106853,27151],{"class":219},[167,106855,1108],{"class":173},[167,106857,56243],{"class":219},[167,106859,27173],{"class":191},[167,106861,56248],{"class":219},[167,106863,27173],{"class":191},[167,106865,24044],{"class":173},[167,106867,106868,106870,106872,106874],{"class":169,"line":5037},[167,106869,56257],{"class":219},[167,106871,1108],{"class":173},[167,106873,56262],{"class":219},[167,106875,24044],{"class":173},[167,106877,106878],{"class":169,"line":5046},[167,106879,276],{"class":173},[167,106881,106882,106884,106886],{"class":169,"line":6756},[167,106883,282],{"class":173},[167,106885,924],{"class":177},[167,106887,185],{"class":173},[154,106889,106891],{"className":156,"code":106890,"filename":3973,"language":162,"meta":163,"style":163},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>{{ message }}\u003C\u002Fh1>\n    \u003Cbutton @click=\"increment\">Counter: {{ counter }}\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      message: 'Hello from my app with Vite!',\n      counter: 0,\n    };\n  },\n  methods: {\n    increment() {\n      this.counter++;\n    },\n  },\n};\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\nh1 {\n  color: #42b983;\n}\nbutton {\n  padding: 10px 20px;\n  cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[87,106892,106893,106901,106909,106921,106939,106947,106955,106959,106967,106975,106983,106989,106995,107004,107012,107016,107020,107024,107030,107041,107045,107049,107053,107061,107065,107075,107081,107091,107095,107101,107117,107127,107131],{"__ignoreMap":163},[167,106894,106895,106897,106899],{"class":169,"line":170},[167,106896,174],{"class":173},[167,106898,299],{"class":177},[167,106900,185],{"class":173},[167,106902,106903,106905,106907],{"class":169,"line":188},[167,106904,307],{"class":173},[167,106906,1242],{"class":177},[167,106908,185],{"class":173},[167,106910,106911,106913,106915,106917,106919],{"class":169,"line":205},[167,106912,1257],{"class":173},[167,106914,11],{"class":177},[167,106916,29048],{"class":173},[167,106918,11],{"class":177},[167,106920,185],{"class":173},[167,106922,106923,106925,106927,106929,106931,106933,106935,106937],{"class":169,"line":160},[167,106924,1257],{"class":173},[167,106926,507],{"class":177},[167,106928,1182],{"class":181},[167,106930,267],{"class":173},[167,106932,49442],{"class":201},[167,106934,106681],{"class":173},[167,106936,507],{"class":177},[167,106938,185],{"class":173},[167,106940,106941,106943,106945],{"class":169,"line":238},[167,106942,504],{"class":173},[167,106944,1242],{"class":177},[167,106946,185],{"class":173},[167,106948,106949,106951,106953],{"class":169,"line":243},[167,106950,282],{"class":173},[167,106952,299],{"class":177},[167,106954,185],{"class":173},[167,106956,106957],{"class":169,"line":261},[167,106958,209],{"emptyLinePlaceholder":208},[167,106960,106961,106963,106965],{"class":169,"line":273},[167,106962,174],{"class":173},[167,106964,178],{"class":177},[167,106966,185],{"class":173},[167,106968,106969,106971,106973],{"class":169,"line":279},[167,106970,608],{"class":191},[167,106972,3991],{"class":191},[167,106974,1905],{"class":173},[167,106976,106977,106979,106981],{"class":169,"line":289},[167,106978,4398],{"class":173},[167,106980,56370],{"class":201},[167,106982,393],{"class":173},[167,106984,106985,106987],{"class":169,"line":294},[167,106986,7176],{"class":181},[167,106988,763],{"class":173},[167,106990,106991,106993],{"class":169,"line":304},[167,106992,1937],{"class":191},[167,106994,1905],{"class":173},[167,106996,106997,106999,107002],{"class":169,"line":313},[167,106998,29126],{"class":173},[167,107000,107001],{"class":201},"'Hello from my app with Vite!'",[167,107003,393],{"class":173},[167,107005,107006,107008,107010],{"class":169,"line":161},[167,107007,28238],{"class":173},[167,107009,1960],{"class":219},[167,107011,393],{"class":173},[167,107013,107014],{"class":169,"line":335},[167,107015,24370],{"class":173},[167,107017,107018],{"class":169,"line":341},[167,107019,398],{"class":173},[167,107021,107022],{"class":169,"line":489},[167,107023,4419],{"class":173},[167,107025,107026,107028],{"class":169,"line":495},[167,107027,49514],{"class":181},[167,107029,763],{"class":173},[167,107031,107032,107034,107037,107039],{"class":169,"line":501},[167,107033,741],{"class":219},[167,107035,107036],{"class":173},".counter",[167,107038,54500],{"class":191},[167,107040,24044],{"class":173},[167,107042,107043],{"class":169,"line":512},[167,107044,755],{"class":173},[167,107046,107047],{"class":169,"line":781},[167,107048,398],{"class":173},[167,107050,107051],{"class":169,"line":786},[167,107052,24148],{"class":173},[167,107054,107055,107057,107059],{"class":169,"line":2678},[167,107056,282],{"class":173},[167,107058,178],{"class":177},[167,107060,185],{"class":173},[167,107062,107063],{"class":169,"line":2692},[167,107064,209],{"emptyLinePlaceholder":208},[167,107066,107067,107069,107071,107073],{"class":169,"line":3575},[167,107068,174],{"class":173},[167,107070,924],{"class":177},[167,107072,56205],{"class":181},[167,107074,185],{"class":173},[167,107076,107077,107079],{"class":169,"line":5028},[167,107078,11],{"class":177},[167,107080,1905],{"class":173},[167,107082,107083,107085,107087,107089],{"class":169,"line":5037},[167,107084,27139],{"class":219},[167,107086,1108],{"class":173},[167,107088,56222],{"class":219},[167,107090,24044],{"class":173},[167,107092,107093],{"class":169,"line":5046},[167,107094,276],{"class":173},[167,107096,107097,107099],{"class":169,"line":6756},[167,107098,507],{"class":177},[167,107100,1905],{"class":173},[167,107102,107103,107105,107107,107109,107111,107113,107115],{"class":169,"line":6778},[167,107104,27151],{"class":219},[167,107106,1108],{"class":173},[167,107108,56243],{"class":219},[167,107110,27173],{"class":191},[167,107112,56248],{"class":219},[167,107114,27173],{"class":191},[167,107116,24044],{"class":173},[167,107118,107119,107121,107123,107125],{"class":169,"line":6783},[167,107120,56257],{"class":219},[167,107122,1108],{"class":173},[167,107124,56262],{"class":219},[167,107126,24044],{"class":173},[167,107128,107129],{"class":169,"line":6788},[167,107130,276],{"class":173},[167,107132,107133,107135,107137],{"class":169,"line":6793},[167,107134,282],{"class":173},[167,107136,924],{"class":177},[167,107138,185],{"class":173},[3087,107140,107142],{"id":107141},"code-explanation","Code explanation:",[33,107144,107145,107155,107165],{},[36,107146,107147,107151,107152,107154],{},[3933,107148,107149],{},[87,107150,31997],{},": Contains the HTML. We use ",[87,107153,30568],{}," to display variables.",[36,107156,107157,107161,107162,107164],{},[3933,107158,107159],{},[87,107160,1008],{},": This is the modern way to write logic in Vue 3. We use ",[87,107163,2085],{}," so that Vue knows that when the value changes, it should update the screen.",[36,107166,107167,107171,107172,107174],{},[3933,107168,107169],{},[87,107170,26714],{},": This is where the CSS goes, and the ",[87,107173,56564],{}," attribute ensures that the styles only affect this component.",[924,107176,56568],{},{"title":163,"searchDepth":188,"depth":188,"links":107178},[107179,107180,107181,107182,107183,107184,107185,107186],{"id":106287,"depth":188,"text":106288},{"id":106329,"depth":188,"text":106330},{"id":106349,"depth":188,"text":106350},{"id":106428,"depth":188,"text":106429},{"id":106455,"depth":188,"text":106456},{"id":106525,"depth":188,"text":106526},{"id":106582,"depth":188,"text":106583},{"id":106626,"depth":188,"text":106627,"children":107187},[107188],{"id":107141,"depth":205,"text":107142},"Vue.js logo with Vite logo in the background","A step-by-step guide to setting up a modern development environment with Vue.js and Vite.",{"updatedAt":54736,"coverCaption":107192},"Set up your development environment with Vue and Vite in minutes","\u002Fblog\u002Fsetting-up-vue-with-vite.en",[107195],{"headline":106272,"author":107196,"datePublished":56591,"@type":961},{"name":946,"@type":959},{"title":106272,"description":107190},"blog\u002Fsetting-up-vue-with-vite.en",[107200,107201,107202],{"tag":55634,"color":56596},{"tag":103274,"color":55617},{"tag":65670,"color":5425},"O3zEzO8jD44RxaG_Jmwd3f-_von7aOGhiQAtx-EIhp4",{"id":55621,"title":55622,"body":107205,"cover":56581,"coverAlt":56582,"date":56583,"description":56584,"draft":940,"extension":941,"lab":942,"locale":943,"meta":108037,"navigation":208,"path":56587,"schemaOrg":108038,"seo":108041,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":56593,"tags":108042,"__hash__":56599},{"type":8,"value":107206,"toc":108025},[107207,107209,107213,107215,107217,107241,107243,107247,107257,107259,107261,107275,107289,107303,107317,107325,107327,107329,107345,107347,107349,107351,107361,107363,107373,107383,107393,107403,107407,107409,107411,107423,107433,107443,107455,107459,107461,107463,107495,107497,107501,107749,107995,107997,108023],[11,107208,55628],{"id":55627},[15,107210,55631,107211,55635],{},[3933,107212,55634],{},[22,107214,55639],{"id":55638},[15,107216,55642],{},[3035,107218,107219,107223,107229,107233,107237],{},[36,107220,107221,55650],{},[3933,107222,55649],{},[36,107224,107225,55656,107227,55660],{},[3933,107226,55655],{},[87,107228,55659],{},[36,107230,107231,55666],{},[3933,107232,55665],{},[36,107234,107235,55672],{},[3933,107236,55671],{},[36,107238,107239,55678],{},[3933,107240,55677],{},[22,107242,55682],{"id":55681},[15,107244,55685,107245,55689],{},[3933,107246,55688],{},[154,107248,107249],{"className":55362,"code":55692,"filename":55365,"language":55365,"meta":163,"style":163},[87,107250,107251],{"__ignoreMap":163},[167,107252,107253,107255],{"class":169,"line":170},[167,107254,55699],{"class":181},[167,107256,55702],{"class":219},[22,107258,55706],{"id":55705},[15,107260,55709],{},[154,107262,107263],{"className":55362,"code":55712,"filename":55364,"language":55365,"meta":163,"style":163},[87,107264,107265],{"__ignoreMap":163},[167,107266,107267,107269,107271,107273],{"class":169,"line":170},[167,107268,55364],{"class":181},[167,107270,55721],{"class":201},[167,107272,55724],{"class":201},[167,107274,55727],{"class":201},[154,107276,107277],{"className":55362,"code":55730,"filename":55381,"language":55365,"meta":163,"style":163},[87,107278,107279],{"__ignoreMap":163},[167,107280,107281,107283,107285,107287],{"class":169,"line":170},[167,107282,55381],{"class":181},[167,107284,55721],{"class":201},[167,107286,55741],{"class":201},[167,107288,55727],{"class":201},[154,107290,107291],{"className":55362,"code":55746,"filename":55396,"language":55365,"meta":163,"style":163},[87,107292,107293],{"__ignoreMap":163},[167,107294,107295,107297,107299,107301],{"class":169,"line":170},[167,107296,55396],{"class":181},[167,107298,55721],{"class":201},[167,107300,55741],{"class":201},[167,107302,55727],{"class":201},[154,107304,107305],{"className":55362,"code":55761,"filename":55410,"language":55365,"meta":163,"style":163},[87,107306,107307],{"__ignoreMap":163},[167,107308,107309,107311,107313,107315],{"class":169,"line":170},[167,107310,55410],{"class":181},[167,107312,55721],{"class":201},[167,107314,55741],{"class":201},[167,107316,55727],{"class":201},[5367,107318,107319],{},[15,107320,107321,16903,107323,55783],{},[3933,107322,53853],{},[87,107324,55782],{},[22,107326,55787],{"id":55786},[15,107328,55790],{},[3035,107330,107331,107337],{},[36,107332,107333,55798,107335,1679],{},[3933,107334,55797],{},[87,107336,26494],{},[36,107338,107339,55806,107341,55810,107343,55814],{},[3933,107340,55805],{},[87,107342,55809],{},[87,107344,55813],{},[22,107346,55818],{"id":55817},[15,107348,55821],{},[15,107350,55824],{},[154,107352,107353],{"className":55362,"code":55827,"filename":55365,"language":55365,"meta":163,"style":163},[87,107354,107355],{"__ignoreMap":163},[167,107356,107357,107359],{"class":169,"line":170},[167,107358,55834],{"class":219},[167,107360,55727],{"class":201},[15,107362,55839],{},[154,107364,107365],{"className":55362,"code":55842,"filename":55364,"language":55365,"meta":163,"style":163},[87,107366,107367],{"__ignoreMap":163},[167,107368,107369,107371],{"class":169,"line":170},[167,107370,55364],{"class":181},[167,107372,55851],{"class":201},[154,107374,107375],{"className":55362,"code":55854,"filename":55381,"language":55365,"meta":163,"style":163},[87,107376,107377],{"__ignoreMap":163},[167,107378,107379,107381],{"class":169,"line":170},[167,107380,55381],{"class":181},[167,107382,55851],{"class":201},[154,107384,107385],{"className":55362,"code":55865,"filename":55396,"language":55365,"meta":163,"style":163},[87,107386,107387],{"__ignoreMap":163},[167,107388,107389,107391],{"class":169,"line":170},[167,107390,55396],{"class":181},[167,107392,55851],{"class":201},[154,107394,107395],{"className":55362,"code":55876,"filename":55410,"language":55365,"meta":163,"style":163},[87,107396,107397],{"__ignoreMap":163},[167,107398,107399,107401],{"class":169,"line":170},[167,107400,55410],{"class":181},[167,107402,55851],{"class":201},[15,107404,55887,107405,55891],{},[87,107406,55890],{},[22,107408,55895],{"id":55894},[15,107410,55898],{},[154,107412,107413],{"className":55362,"code":55901,"filename":55364,"language":55365,"meta":163,"style":163},[87,107414,107415],{"__ignoreMap":163},[167,107416,107417,107419,107421],{"class":169,"line":170},[167,107418,55364],{"class":181},[167,107420,55910],{"class":201},[167,107422,55913],{"class":201},[154,107424,107425],{"className":55362,"code":55916,"filename":55381,"language":55365,"meta":163,"style":163},[87,107426,107427],{"__ignoreMap":163},[167,107428,107429,107431],{"class":169,"line":170},[167,107430,55381],{"class":181},[167,107432,55913],{"class":201},[154,107434,107435],{"className":55362,"code":55927,"filename":55396,"language":55365,"meta":163,"style":163},[87,107436,107437],{"__ignoreMap":163},[167,107438,107439,107441],{"class":169,"line":170},[167,107440,55396],{"class":181},[167,107442,55913],{"class":201},[154,107444,107445],{"className":55362,"code":55938,"filename":55410,"language":55365,"meta":163,"style":163},[87,107446,107447],{"__ignoreMap":163},[167,107448,107449,107451,107453],{"class":169,"line":170},[167,107450,55410],{"class":181},[167,107452,55910],{"class":201},[167,107454,55913],{"class":201},[15,107456,55951,107457,55955],{},[87,107458,55954],{},[22,107460,55959],{"id":55958},[15,107462,55962],{},[33,107464,107465,107471,107477,107483,107489],{},[36,107466,107467,55972],{},[3933,107468,107469],{},[87,107470,55971],{},[36,107472,107473,55980],{},[3933,107474,107475],{},[87,107476,55979],{},[36,107478,107479,55988],{},[3933,107480,107481],{},[87,107482,55987],{},[36,107484,107485,55996],{},[3933,107486,107487],{},[87,107488,55995],{},[36,107490,107491,56003],{},[3933,107492,107493],{},[87,107494,55435],{},[22,107496,56007],{"id":56006},[15,107498,56010,107499,56013],{},[87,107500,55987],{},[154,107502,107503],{"className":156,"code":56016,"filename":3260,"language":162,"meta":163,"style":163},[87,107504,107505,107513,107521,107533,107551,107559,107567,107571,107581,107593,107597,107601,107613,107629,107633,107637,107651,107659,107663,107671,107675,107685,107691,107701,107705,107711,107727,107737,107741],{"__ignoreMap":163},[167,107506,107507,107509,107511],{"class":169,"line":170},[167,107508,174],{"class":173},[167,107510,299],{"class":177},[167,107512,185],{"class":173},[167,107514,107515,107517,107519],{"class":169,"line":188},[167,107516,307],{"class":173},[167,107518,1242],{"class":177},[167,107520,185],{"class":173},[167,107522,107523,107525,107527,107529,107531],{"class":169,"line":205},[167,107524,1257],{"class":173},[167,107526,11],{"class":177},[167,107528,56043],{"class":173},[167,107530,11],{"class":177},[167,107532,185],{"class":173},[167,107534,107535,107537,107539,107541,107543,107545,107547,107549],{"class":169,"line":160},[167,107536,1257],{"class":173},[167,107538,507],{"class":177},[167,107540,1182],{"class":181},[167,107542,267],{"class":173},[167,107544,54539],{"class":201},[167,107546,56062],{"class":173},[167,107548,507],{"class":177},[167,107550,185],{"class":173},[167,107552,107553,107555,107557],{"class":169,"line":238},[167,107554,504],{"class":173},[167,107556,1242],{"class":177},[167,107558,185],{"class":173},[167,107560,107561,107563,107565],{"class":169,"line":243},[167,107562,282],{"class":173},[167,107564,299],{"class":177},[167,107566,185],{"class":173},[167,107568,107569],{"class":169,"line":261},[167,107570,209],{"emptyLinePlaceholder":208},[167,107572,107573,107575,107577,107579],{"class":169,"line":273},[167,107574,174],{"class":173},[167,107576,178],{"class":177},[167,107578,182],{"class":181},[167,107580,185],{"class":173},[167,107582,107583,107585,107587,107589,107591],{"class":169,"line":279},[167,107584,192],{"class":191},[167,107586,195],{"class":173},[167,107588,198],{"class":191},[167,107590,51444],{"class":201},[167,107592,24044],{"class":173},[167,107594,107595],{"class":169,"line":289},[167,107596,209],{"emptyLinePlaceholder":208},[167,107598,107599],{"class":169,"line":294},[167,107600,56117],{"class":18662},[167,107602,107603,107605,107607,107609,107611],{"class":169,"line":304},[167,107604,216],{"class":191},[167,107606,56124],{"class":219},[167,107608,223],{"class":191},[167,107610,56129],{"class":201},[167,107612,24044],{"class":173},[167,107614,107615,107617,107619,107621,107623,107625,107627],{"class":169,"line":313},[167,107616,216],{"class":191},[167,107618,56138],{"class":219},[167,107620,223],{"class":191},[167,107622,226],{"class":181},[167,107624,229],{"class":173},[167,107626,1960],{"class":219},[167,107628,24169],{"class":173},[167,107630,107631],{"class":169,"line":161},[167,107632,209],{"emptyLinePlaceholder":208},[167,107634,107635],{"class":169,"line":335},[167,107636,56157],{"class":18662},[167,107638,107639,107641,107643,107645,107647,107649],{"class":169,"line":341},[167,107640,216],{"class":191},[167,107642,54484],{"class":181},[167,107644,223],{"class":191},[167,107646,1469],{"class":173},[167,107648,639],{"class":191},[167,107650,1905],{"class":173},[167,107652,107653,107655,107657],{"class":169,"line":489},[167,107654,56176],{"class":173},[167,107656,54500],{"class":191},[167,107658,24044],{"class":173},[167,107660,107661],{"class":169,"line":495},[167,107662,24148],{"class":173},[167,107664,107665,107667,107669],{"class":169,"line":501},[167,107666,282],{"class":173},[167,107668,178],{"class":177},[167,107670,185],{"class":173},[167,107672,107673],{"class":169,"line":512},[167,107674,209],{"emptyLinePlaceholder":208},[167,107676,107677,107679,107681,107683],{"class":169,"line":781},[167,107678,174],{"class":173},[167,107680,924],{"class":177},[167,107682,56205],{"class":181},[167,107684,185],{"class":173},[167,107686,107687,107689],{"class":169,"line":786},[167,107688,11],{"class":177},[167,107690,1905],{"class":173},[167,107692,107693,107695,107697,107699],{"class":169,"line":2678},[167,107694,27139],{"class":219},[167,107696,1108],{"class":173},[167,107698,56222],{"class":219},[167,107700,24044],{"class":173},[167,107702,107703],{"class":169,"line":2692},[167,107704,276],{"class":173},[167,107706,107707,107709],{"class":169,"line":3575},[167,107708,507],{"class":177},[167,107710,1905],{"class":173},[167,107712,107713,107715,107717,107719,107721,107723,107725],{"class":169,"line":5028},[167,107714,27151],{"class":219},[167,107716,1108],{"class":173},[167,107718,56243],{"class":219},[167,107720,27173],{"class":191},[167,107722,56248],{"class":219},[167,107724,27173],{"class":191},[167,107726,24044],{"class":173},[167,107728,107729,107731,107733,107735],{"class":169,"line":5037},[167,107730,56257],{"class":219},[167,107732,1108],{"class":173},[167,107734,56262],{"class":219},[167,107736,24044],{"class":173},[167,107738,107739],{"class":169,"line":5046},[167,107740,276],{"class":173},[167,107742,107743,107745,107747],{"class":169,"line":6756},[167,107744,282],{"class":173},[167,107746,924],{"class":177},[167,107748,185],{"class":173},[154,107750,107751],{"className":156,"code":56279,"filename":3973,"language":162,"meta":163,"style":163},[87,107752,107753,107761,107769,107781,107799,107807,107815,107819,107827,107835,107843,107849,107855,107863,107869,107873,107877,107881,107887,107897,107901,107905,107909,107917,107921,107931,107937,107947,107951,107957,107973,107983,107987],{"__ignoreMap":163},[167,107754,107755,107757,107759],{"class":169,"line":170},[167,107756,174],{"class":173},[167,107758,299],{"class":177},[167,107760,185],{"class":173},[167,107762,107763,107765,107767],{"class":169,"line":188},[167,107764,307],{"class":173},[167,107766,1242],{"class":177},[167,107768,185],{"class":173},[167,107770,107771,107773,107775,107777,107779],{"class":169,"line":205},[167,107772,1257],{"class":173},[167,107774,11],{"class":177},[167,107776,56043],{"class":173},[167,107778,11],{"class":177},[167,107780,185],{"class":173},[167,107782,107783,107785,107787,107789,107791,107793,107795,107797],{"class":169,"line":160},[167,107784,1257],{"class":173},[167,107786,507],{"class":177},[167,107788,1182],{"class":181},[167,107790,267],{"class":173},[167,107792,54539],{"class":201},[167,107794,56062],{"class":173},[167,107796,507],{"class":177},[167,107798,185],{"class":173},[167,107800,107801,107803,107805],{"class":169,"line":238},[167,107802,504],{"class":173},[167,107804,1242],{"class":177},[167,107806,185],{"class":173},[167,107808,107809,107811,107813],{"class":169,"line":243},[167,107810,282],{"class":173},[167,107812,299],{"class":177},[167,107814,185],{"class":173},[167,107816,107817],{"class":169,"line":261},[167,107818,209],{"emptyLinePlaceholder":208},[167,107820,107821,107823,107825],{"class":169,"line":273},[167,107822,174],{"class":173},[167,107824,178],{"class":177},[167,107826,185],{"class":173},[167,107828,107829,107831,107833],{"class":169,"line":279},[167,107830,608],{"class":191},[167,107832,3991],{"class":191},[167,107834,1905],{"class":173},[167,107836,107837,107839,107841],{"class":169,"line":289},[167,107838,4398],{"class":173},[167,107840,56370],{"class":201},[167,107842,393],{"class":173},[167,107844,107845,107847],{"class":169,"line":294},[167,107846,7176],{"class":181},[167,107848,763],{"class":173},[167,107850,107851,107853],{"class":169,"line":304},[167,107852,1937],{"class":191},[167,107854,1905],{"class":173},[167,107856,107857,107859,107861],{"class":169,"line":313},[167,107858,56389],{"class":173},[167,107860,56392],{"class":201},[167,107862,393],{"class":173},[167,107864,107865,107867],{"class":169,"line":161},[167,107866,56399],{"class":173},[167,107868,10681],{"class":219},[167,107870,107871],{"class":169,"line":335},[167,107872,24370],{"class":173},[167,107874,107875],{"class":169,"line":341},[167,107876,398],{"class":173},[167,107878,107879],{"class":169,"line":489},[167,107880,4419],{"class":173},[167,107882,107883,107885],{"class":169,"line":495},[167,107884,54621],{"class":181},[167,107886,763],{"class":173},[167,107888,107889,107891,107893,107895],{"class":169,"line":501},[167,107890,741],{"class":219},[167,107892,56426],{"class":173},[167,107894,54500],{"class":191},[167,107896,24044],{"class":173},[167,107898,107899],{"class":169,"line":512},[167,107900,4049],{"class":173},[167,107902,107903],{"class":169,"line":781},[167,107904,3492],{"class":173},[167,107906,107907],{"class":169,"line":786},[167,107908,24148],{"class":173},[167,107910,107911,107913,107915],{"class":169,"line":2678},[167,107912,282],{"class":173},[167,107914,178],{"class":177},[167,107916,185],{"class":173},[167,107918,107919],{"class":169,"line":2692},[167,107920,209],{"emptyLinePlaceholder":208},[167,107922,107923,107925,107927,107929],{"class":169,"line":3575},[167,107924,174],{"class":173},[167,107926,924],{"class":177},[167,107928,56205],{"class":181},[167,107930,185],{"class":173},[167,107932,107933,107935],{"class":169,"line":5028},[167,107934,11],{"class":177},[167,107936,1905],{"class":173},[167,107938,107939,107941,107943,107945],{"class":169,"line":5037},[167,107940,27139],{"class":219},[167,107942,1108],{"class":173},[167,107944,56222],{"class":219},[167,107946,24044],{"class":173},[167,107948,107949],{"class":169,"line":5046},[167,107950,276],{"class":173},[167,107952,107953,107955],{"class":169,"line":6756},[167,107954,507],{"class":177},[167,107956,1905],{"class":173},[167,107958,107959,107961,107963,107965,107967,107969,107971],{"class":169,"line":6778},[167,107960,27151],{"class":219},[167,107962,1108],{"class":173},[167,107964,56243],{"class":219},[167,107966,27173],{"class":191},[167,107968,56248],{"class":219},[167,107970,27173],{"class":191},[167,107972,24044],{"class":173},[167,107974,107975,107977,107979,107981],{"class":169,"line":6783},[167,107976,56257],{"class":219},[167,107978,1108],{"class":173},[167,107980,56262],{"class":219},[167,107982,24044],{"class":173},[167,107984,107985],{"class":169,"line":6788},[167,107986,276],{"class":173},[167,107988,107989,107991,107993],{"class":169,"line":6793},[167,107990,282],{"class":173},[167,107992,924],{"class":177},[167,107994,185],{"class":173},[3087,107996,56532],{"id":56531},[33,107998,107999,108007,108015],{},[36,108000,108001,56541,108005,56544],{},[3933,108002,108003],{},[87,108004,31997],{},[87,108006,30568],{},[36,108008,108009,56551,108013,56554],{},[3933,108010,108011],{},[87,108012,1008],{},[87,108014,2085],{},[36,108016,108017,56561,108021,56565],{},[3933,108018,108019],{},[87,108020,26714],{},[87,108022,56564],{},[924,108024,56568],{},{"title":163,"searchDepth":188,"depth":188,"links":108026},[108027,108028,108029,108030,108031,108032,108033,108034],{"id":55638,"depth":188,"text":55639},{"id":55681,"depth":188,"text":55682},{"id":55705,"depth":188,"text":55706},{"id":55786,"depth":188,"text":55787},{"id":55817,"depth":188,"text":55818},{"id":55894,"depth":188,"text":55895},{"id":55958,"depth":188,"text":55959},{"id":56006,"depth":188,"text":56007,"children":108035},[108036],{"id":56531,"depth":205,"text":56532},{"updatedAt":54736,"coverCaption":56586},[108039],{"headline":55622,"author":108040,"datePublished":56591,"@type":961},{"name":946,"@type":959},{"title":55622,"description":56584},[108043,108044,108045],{"tag":55634,"color":56596},{"tag":55616,"color":55617},{"tag":5424,"color":5425},{"id":108047,"title":108048,"body":108049,"cover":1618,"coverAlt":108614,"date":1620,"description":108615,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":108616,"navigation":208,"path":108622,"schemaOrg":108623,"seo":108626,"series":963,"seriesDescription":104126,"seriesOrder":170,"seriesTitle":104127,"slug":942,"stem":108627,"tags":108628,"__hash__":108635},"blog\u002Fblog\u002Fvue-3-component-architecture.en.md","Vue 3 Component Architecture: Communication, Reuse, and Dependencies",{"type":8,"value":108050,"toc":108606},[108051,108054,108057,108063,108067,108073,108076,108080,108083,108093,108248,108251,108255,108258,108401,108404,108416,108420,108423,108545,108548,108551,108555,108560,108563,108567,108598,108604],[11,108052,108048],{"id":108053},"vue-3-component-architecture-communication-reuse-and-dependencies",[15,108055,108056],{},"When a component grows, the difficult part is usually not the syntax. It is deciding where data belongs, how pieces communicate, and which logic deserves to be reused. A useful architecture separates visual structure, inputs, events, content, and dependencies without creating unnecessary abstractions.",[15,108058,108059,108060,108062],{},"In Vue 3, you can think of components as a hierarchy connected through explicit contracts. Props carry data down, events communicate intentions up, slots enable visual composition, composables extract logic, and ",[87,108061,997],{}," handles deep dependencies.",[22,108064,108066],{"id":108065},"a-mental-model-components-as-a-tree-of-responsibilities","A mental model: components as a tree of responsibilities",[15,108068,108069,108070,108072],{},"Components encapsulate independent, reusable pieces organized as a tree. Each use of a component creates an independent instance with its own state. In a Single-File Component using ",[87,108071,1008],{},", imported components are automatically available in the template.",[15,108074,108075],{},"Start with one clear responsibility. A component can coordinate other components, but it should not casually accumulate presentation, data fetching, validation, and cross-cutting configuration.",[22,108077,108079],{"id":108078},"explicit-communication-props-and-events","Explicit communication: props and events",[15,108081,108082],{},"Props represent inputs. Declare them explicitly so the contract is visible and Vue can validate types and warn during development when a value does not follow the declared rules. Treat props as input data: the child should not mutate them directly.",[15,108084,108085,108086,1025,108088,57920,108090,108092],{},"Custom events let a child communicate an intention to its parent. In ",[87,108087,1008],{},[87,108089,369],{},[87,108091,1031],{}," make that contract visible:",[154,108094,108096],{"className":156,"code":1035,"filename":1036,"highlights":108095,"language":162,"meta":163,"style":163},[188,243],[87,108097,108098,108114,108135,108161,108165,108173,108184,108188,108196,108200,108208,108228,108232,108240],{"__ignoreMap":163},[167,108099,108100,108102,108104,108106,108108,108110,108112],{"class":169,"line":170},[167,108101,174],{"class":173},[167,108103,178],{"class":177},[167,108105,182],{"class":181},[167,108107,1050],{"class":181},[167,108109,267],{"class":173},[167,108111,1055],{"class":201},[167,108113,185],{"class":173},[167,108115,108117,108119,108121,108123,108125,108127,108129,108131,108133],{"class":108116,"line":188},[169,213],[167,108118,216],{"class":191},[167,108120,1065],{"class":219},[167,108122,223],{"class":191},[167,108124,1070],{"class":181},[167,108126,1073],{"class":173},[167,108128,1076],{"class":254},[167,108130,583],{"class":191},[167,108132,586],{"class":219},[167,108134,1083],{"class":173},[167,108136,108137,108139,108141,108143,108145,108147,108149,108151,108153,108155,108157,108159],{"class":169,"line":205},[167,108138,216],{"class":191},[167,108140,415],{"class":219},[167,108142,223],{"class":191},[167,108144,420],{"class":181},[167,108146,1073],{"class":173},[167,108148,1098],{"class":254},[167,108150,583],{"class":191},[167,108152,1103],{"class":173},[167,108154,1076],{"class":181},[167,108156,1108],{"class":173},[167,108158,1111],{"class":219},[167,108160,1114],{"class":173},[167,108162,108163],{"class":169,"line":160},[167,108164,209],{"emptyLinePlaceholder":208},[167,108166,108167,108169,108171],{"class":169,"line":238},[167,108168,246],{"class":191},[167,108170,1125],{"class":181},[167,108172,763],{"class":173},[167,108174,108176,108178,108180,108182],{"class":108175,"line":243},[169,213],[167,108177,1133],{"class":181},[167,108179,229],{"class":173},[167,108181,1138],{"class":201},[167,108183,1141],{"class":173},[167,108185,108186],{"class":169,"line":261},[167,108187,276],{"class":173},[167,108189,108190,108192,108194],{"class":169,"line":273},[167,108191,282],{"class":173},[167,108193,178],{"class":177},[167,108195,185],{"class":173},[167,108197,108198],{"class":169,"line":279},[167,108199,209],{"emptyLinePlaceholder":208},[167,108201,108202,108204,108206],{"class":169,"line":289},[167,108203,174],{"class":173},[167,108205,299],{"class":177},[167,108207,185],{"class":173},[167,108209,108210,108212,108214,108216,108218,108220,108222,108224,108226],{"class":169,"line":294},[167,108211,307],{"class":173},[167,108213,507],{"class":177},[167,108215,1174],{"class":181},[167,108217,267],{"class":173},[167,108219,1179],{"class":201},[167,108221,1182],{"class":181},[167,108223,267],{"class":173},[167,108225,1187],{"class":201},[167,108227,185],{"class":173},[167,108229,108230],{"class":169,"line":304},[167,108231,1194],{"class":173},[167,108233,108234,108236,108238],{"class":169,"line":313},[167,108235,504],{"class":173},[167,108237,507],{"class":177},[167,108239,185],{"class":173},[167,108241,108242,108244,108246],{"class":169,"line":161},[167,108243,282],{"class":173},[167,108245,299],{"class":177},[167,108247,185],{"class":173},[15,108249,108250],{},"The highlighted lines declare the input and communicate the change. If the parent needs to update a value, the child emits the event and the parent decides how to change its state.",[22,108252,108254],{"id":108253},"visual-composition-with-slots-and-fallthrough-attributes","Visual composition with slots and fallthrough attributes",[15,108256,108257],{},"Use slots when the main variation is content or visual structure. The parent provides template fragments, and the child defines where they render:",[154,108259,108261],{"className":156,"code":1223,"filename":1224,"highlights":108260,"language":162,"meta":163,"style":163},[160,238,243,261],[87,108262,108263,108271,108285,108293,108312,108321,108330,108343,108351,108359,108377,108385,108393],{"__ignoreMap":163},[167,108264,108265,108267,108269],{"class":169,"line":170},[167,108266,174],{"class":173},[167,108268,299],{"class":177},[167,108270,185],{"class":173},[167,108272,108273,108275,108277,108279,108281,108283],{"class":169,"line":188},[167,108274,307],{"class":173},[167,108276,1242],{"class":177},[167,108278,1245],{"class":181},[167,108280,267],{"class":173},[167,108282,1250],{"class":201},[167,108284,185],{"class":173},[167,108286,108287,108289,108291],{"class":169,"line":205},[167,108288,1257],{"class":173},[167,108290,1260],{"class":177},[167,108292,185],{"class":173},[167,108294,108296,108298,108300,108302,108304,108306,108308,108310],{"class":108295,"line":160},[169,213],[167,108297,1268],{"class":173},[167,108299,1271],{"class":177},[167,108301,1274],{"class":181},[167,108303,267],{"class":173},[167,108305,1279],{"class":201},[167,108307,1282],{"class":173},[167,108309,1271],{"class":177},[167,108311,185],{"class":173},[167,108313,108315,108317,108319],{"class":108314,"line":238},[169,213],[167,108316,1292],{"class":173},[167,108318,1260],{"class":177},[167,108320,185],{"class":173},[167,108322,108324,108326,108328],{"class":108323,"line":243},[169,213],[167,108325,1257],{"class":173},[167,108327,1304],{"class":177},[167,108329,185],{"class":173},[167,108331,108333,108335,108337,108339,108341],{"class":108332,"line":261},[169,213],[167,108334,1268],{"class":173},[167,108336,1271],{"class":177},[167,108338,1282],{"class":173},[167,108340,1271],{"class":177},[167,108342,185],{"class":173},[167,108344,108345,108347,108349],{"class":169,"line":273},[167,108346,1292],{"class":173},[167,108348,1304],{"class":177},[167,108350,185],{"class":173},[167,108352,108353,108355,108357],{"class":169,"line":279},[167,108354,1257],{"class":173},[167,108356,1334],{"class":177},[167,108358,185],{"class":173},[167,108360,108361,108363,108365,108367,108369,108371,108373,108375],{"class":169,"line":289},[167,108362,1268],{"class":173},[167,108364,1271],{"class":177},[167,108366,1274],{"class":181},[167,108368,267],{"class":173},[167,108370,1349],{"class":201},[167,108372,1282],{"class":173},[167,108374,1271],{"class":177},[167,108376,185],{"class":173},[167,108378,108379,108381,108383],{"class":169,"line":294},[167,108380,1292],{"class":173},[167,108382,1334],{"class":177},[167,108384,185],{"class":173},[167,108386,108387,108389,108391],{"class":169,"line":304},[167,108388,504],{"class":173},[167,108390,1242],{"class":177},[167,108392,185],{"class":173},[167,108394,108395,108397,108399],{"class":169,"line":313},[167,108396,282],{"class":173},[167,108398,299],{"class":177},[167,108400,185],{"class":173},[15,108402,108403],{},"Named slots distribute content across multiple regions. A scoped slot lets the child expose data to content provided by the parent. That content keeps the parent’s scope; it does not automatically gain access to the child’s private state.",[15,108405,108406,108407,108409,108410,108412,108413,108415],{},"Attributes and listeners that are not declared as props or emits can fall through to the root element. If the component has multiple root nodes, automatic fallthrough does not exist: explicitly bind ",[87,108408,1388],{}," to the appropriate element when needed. If you disable ",[87,108411,1392],{},", remember to bind ",[87,108414,1388],{}," intentionally.",[22,108417,108419],{"id":108418},"separate-logic-and-presentation-with-composables","Separate logic and presentation with composables",[15,108421,108422],{},"A composable is a Composition API-based function that encapsulates and reuses stateful logic. It is a good option when several components need the same logic but do not share a visual structure.",[154,108424,108426],{"className":542,"code":1406,"filename":1407,"highlights":108425,"language":546,"meta":163,"style":163},[160,238,243,261,273],[87,108427,108428,108438,108442,108452,108469,108488,108493,108512,108531,108535,108541],{"__ignoreMap":163},[167,108429,108430,108432,108434,108436],{"class":169,"line":170},[167,108431,192],{"class":191},[167,108433,1417],{"class":173},[167,108435,198],{"class":191},[167,108437,202],{"class":201},[167,108439,108440],{"class":169,"line":188},[167,108441,209],{"emptyLinePlaceholder":208},[167,108443,108444,108446,108448,108450],{"class":169,"line":205},[167,108445,608],{"class":191},[167,108447,1432],{"class":191},[167,108449,1435],{"class":181},[167,108451,763],{"class":173},[167,108453,108455,108457,108459,108461,108463,108465,108467],{"class":108454,"line":160},[169,213],[167,108456,1443],{"class":191},[167,108458,1446],{"class":219},[167,108460,223],{"class":191},[167,108462,226],{"class":181},[167,108464,229],{"class":173},[167,108466,390],{"class":219},[167,108468,235],{"class":173},[167,108470,108472,108474,108476,108478,108480,108482,108484,108486],{"class":108471,"line":238},[169,213],[167,108473,1443],{"class":191},[167,108475,1464],{"class":181},[167,108477,223],{"class":191},[167,108479,1469],{"class":173},[167,108481,639],{"class":191},[167,108483,1474],{"class":173},[167,108485,267],{"class":191},[167,108487,1479],{"class":173},[167,108489,108491],{"class":108490,"line":243},[169,213],[167,108492,209],{"emptyLinePlaceholder":208},[167,108494,108496,108498,108500,108502,108504,108506,108508,108510],{"class":108495,"line":261},[169,213],[167,108497,1490],{"class":181},[167,108499,1493],{"class":173},[167,108501,639],{"class":191},[167,108503,1498],{"class":173},[167,108505,1501],{"class":181},[167,108507,229],{"class":173},[167,108509,1506],{"class":201},[167,108511,1509],{"class":173},[167,108513,108515,108517,108519,108521,108523,108525,108527,108529],{"class":108514,"line":273},[169,213],[167,108516,1515],{"class":181},[167,108518,1493],{"class":173},[167,108520,639],{"class":191},[167,108522,1498],{"class":173},[167,108524,1524],{"class":181},[167,108526,229],{"class":173},[167,108528,1506],{"class":201},[167,108530,1509],{"class":173},[167,108532,108533],{"class":169,"line":279},[167,108534,209],{"emptyLinePlaceholder":208},[167,108536,108537,108539],{"class":169,"line":289},[167,108538,1539],{"class":191},[167,108540,1542],{"class":173},[167,108542,108543],{"class":169,"line":294},[167,108544,276],{"class":173},[15,108546,108547],{},"Cleaning up the listener is part of the composable’s contract. Vue recommends composables over mixins because the origin of properties is clearer, there is less risk of name collisions, and implicit communication is reduced.",[15,108549,108550],{},"Use a component when logic and presentation form a reusable unit. Use a composable when you want to reuse logic without imposing a visual interface.",[22,108552,108554],{"id":108553},"provideinject-for-deep-dependencies","Provide\u002Finject for deep dependencies",[15,108556,108557,108559],{},[87,108558,997],{}," avoids passing props through every intermediate level when a dependency belongs to a deep context, such as a theme or form configuration. The closest provided dependency can override one defined higher in the tree.",[15,108561,108562],{},"This mechanism should not automatically become a replacement for shared application state. Document the key, contract, and lifecycle of the dependency so the relationship remains understandable.",[22,108564,108566],{"id":108565},"decision-criteria-and-common-mistakes","Decision criteria and common mistakes",[33,108568,108569,108572,108575,108578,108583,108586,108589,108592,108595],{},[36,108570,108571],{},"Use props and events for direct parent-child contracts.",[36,108573,108574],{},"Use slots when the variation is content or visual structure.",[36,108576,108577],{},"Use composables for reusable logic without shared visual structure.",[36,108579,62955,108580,108582],{},[87,108581,997],{}," for deep dependencies or contextual configuration.",[36,108584,108585],{},"Do not move complex visual content through events when a slot expresses the composition better.",[36,108587,108588],{},"Do not mutate props directly in the child.",[36,108590,108591],{},"Do not rely on automatic attribute fallthrough in components with multiple roots.",[36,108593,108594],{},"Do not choose a renderless component when a composable solves the pure logic more directly.",[36,108596,108597],{},"Do not present mixins or a global event bus inherited from Vue 2 as the primary strategy for new code.",[15,108599,108600,108601,108603],{},"The central decision is to choose the smallest mechanism that represents the relationship: data with props, intent with events, visual composition with slots, logic with composables, and deep dependencies with ",[87,108602,997],{},". This separation keeps contracts visible and makes it easier to evolve each component without dragging unrelated responsibilities along.",[924,108605,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":108607},[108608,108609,108610,108611,108612,108613],{"id":108065,"depth":188,"text":108066},{"id":108078,"depth":188,"text":108079},{"id":108253,"depth":188,"text":108254},{"id":108418,"depth":188,"text":108419},{"id":108553,"depth":188,"text":108554},{"id":108565,"depth":188,"text":108566},"Vue.js guide to architecture and reusable components","Learn when to use props, events, slots, fallthrough attributes, composables, and provide\u002Finject to design clear and maintainable Vue 3 components.",{"updatedAt":945,"author":946,"coverCaption":108617,"keywords":108618},"Official Vue.js reference for components",[98745,108619,108620,108621,1629,997],"Vue 3 component architecture","props and events","slots in Vue 3","\u002Fblog\u002Fvue-3-component-architecture.en",[108624],{"headline":108048,"author":108625,"datePublished":1634,"@type":961},{"name":946,"@type":959},{"title":108048,"description":108615},"blog\u002Fvue-3-component-architecture.en",[108629,108630,108631,108632,108633,108634],{"tag":98745,"color":1639},{"tag":60267,"color":971},{"tag":104136,"color":974},{"tag":954,"color":976},{"tag":88771,"color":1645},{"tag":1647,"color":1648},"y5iAKBYhJvT9hq0nPkRWhtFAHH_TP_2h4lxa9wTXpXU",{"id":982,"title":983,"body":108637,"cover":1618,"coverAlt":1619,"date":1620,"description":1621,"draft":940,"extension":941,"lab":942,"locale":943,"meta":109157,"navigation":208,"path":1630,"schemaOrg":109159,"seo":109162,"series":963,"seriesDescription":964,"seriesOrder":170,"seriesTitle":965,"slug":942,"stem":1636,"tags":109163,"__hash__":1649},{"type":8,"value":108638,"toc":109149},[108639,108641,108643,108647,108649,108653,108655,108657,108659,108667,108822,108824,108826,108828,108971,108973,108981,108983,108985,109107,109109,109111,109113,109117,109119,109121,109143,109147],[11,108640,983],{"id":988},[15,108642,991],{},[15,108644,994,108645,998],{},[87,108646,997],{},[22,108648,1002],{"id":1001},[15,108650,1005,108651,1009],{},[87,108652,1008],{},[15,108654,1012],{},[22,108656,1016],{"id":1015},[15,108658,1019],{},[15,108660,1022,108661,1025,108663,1028,108665,1032],{},[87,108662,1008],{},[87,108664,369],{},[87,108666,1031],{},[154,108668,108670],{"className":156,"code":1035,"filename":1036,"highlights":108669,"language":162,"meta":163,"style":163},[188,243],[87,108671,108672,108688,108709,108735,108739,108747,108758,108762,108770,108774,108782,108802,108806,108814],{"__ignoreMap":163},[167,108673,108674,108676,108678,108680,108682,108684,108686],{"class":169,"line":170},[167,108675,174],{"class":173},[167,108677,178],{"class":177},[167,108679,182],{"class":181},[167,108681,1050],{"class":181},[167,108683,267],{"class":173},[167,108685,1055],{"class":201},[167,108687,185],{"class":173},[167,108689,108691,108693,108695,108697,108699,108701,108703,108705,108707],{"class":108690,"line":188},[169,213],[167,108692,216],{"class":191},[167,108694,1065],{"class":219},[167,108696,223],{"class":191},[167,108698,1070],{"class":181},[167,108700,1073],{"class":173},[167,108702,1076],{"class":254},[167,108704,583],{"class":191},[167,108706,586],{"class":219},[167,108708,1083],{"class":173},[167,108710,108711,108713,108715,108717,108719,108721,108723,108725,108727,108729,108731,108733],{"class":169,"line":205},[167,108712,216],{"class":191},[167,108714,415],{"class":219},[167,108716,223],{"class":191},[167,108718,420],{"class":181},[167,108720,1073],{"class":173},[167,108722,1098],{"class":254},[167,108724,583],{"class":191},[167,108726,1103],{"class":173},[167,108728,1076],{"class":181},[167,108730,1108],{"class":173},[167,108732,1111],{"class":219},[167,108734,1114],{"class":173},[167,108736,108737],{"class":169,"line":160},[167,108738,209],{"emptyLinePlaceholder":208},[167,108740,108741,108743,108745],{"class":169,"line":238},[167,108742,246],{"class":191},[167,108744,1125],{"class":181},[167,108746,763],{"class":173},[167,108748,108750,108752,108754,108756],{"class":108749,"line":243},[169,213],[167,108751,1133],{"class":181},[167,108753,229],{"class":173},[167,108755,1138],{"class":201},[167,108757,1141],{"class":173},[167,108759,108760],{"class":169,"line":261},[167,108761,276],{"class":173},[167,108763,108764,108766,108768],{"class":169,"line":273},[167,108765,282],{"class":173},[167,108767,178],{"class":177},[167,108769,185],{"class":173},[167,108771,108772],{"class":169,"line":279},[167,108773,209],{"emptyLinePlaceholder":208},[167,108775,108776,108778,108780],{"class":169,"line":289},[167,108777,174],{"class":173},[167,108779,299],{"class":177},[167,108781,185],{"class":173},[167,108783,108784,108786,108788,108790,108792,108794,108796,108798,108800],{"class":169,"line":294},[167,108785,307],{"class":173},[167,108787,507],{"class":177},[167,108789,1174],{"class":181},[167,108791,267],{"class":173},[167,108793,1179],{"class":201},[167,108795,1182],{"class":181},[167,108797,267],{"class":173},[167,108799,1187],{"class":201},[167,108801,185],{"class":173},[167,108803,108804],{"class":169,"line":304},[167,108805,1194],{"class":173},[167,108807,108808,108810,108812],{"class":169,"line":313},[167,108809,504],{"class":173},[167,108811,507],{"class":177},[167,108813,185],{"class":173},[167,108815,108816,108818,108820],{"class":169,"line":161},[167,108817,282],{"class":173},[167,108819,299],{"class":177},[167,108821,185],{"class":173},[15,108823,1213],{},[22,108825,1217],{"id":1216},[15,108827,1220],{},[154,108829,108831],{"className":156,"code":1223,"filename":1224,"highlights":108830,"language":162,"meta":163,"style":163},[160,238,243,261],[87,108832,108833,108841,108855,108863,108882,108891,108900,108913,108921,108929,108947,108955,108963],{"__ignoreMap":163},[167,108834,108835,108837,108839],{"class":169,"line":170},[167,108836,174],{"class":173},[167,108838,299],{"class":177},[167,108840,185],{"class":173},[167,108842,108843,108845,108847,108849,108851,108853],{"class":169,"line":188},[167,108844,307],{"class":173},[167,108846,1242],{"class":177},[167,108848,1245],{"class":181},[167,108850,267],{"class":173},[167,108852,1250],{"class":201},[167,108854,185],{"class":173},[167,108856,108857,108859,108861],{"class":169,"line":205},[167,108858,1257],{"class":173},[167,108860,1260],{"class":177},[167,108862,185],{"class":173},[167,108864,108866,108868,108870,108872,108874,108876,108878,108880],{"class":108865,"line":160},[169,213],[167,108867,1268],{"class":173},[167,108869,1271],{"class":177},[167,108871,1274],{"class":181},[167,108873,267],{"class":173},[167,108875,1279],{"class":201},[167,108877,1282],{"class":173},[167,108879,1271],{"class":177},[167,108881,185],{"class":173},[167,108883,108885,108887,108889],{"class":108884,"line":238},[169,213],[167,108886,1292],{"class":173},[167,108888,1260],{"class":177},[167,108890,185],{"class":173},[167,108892,108894,108896,108898],{"class":108893,"line":243},[169,213],[167,108895,1257],{"class":173},[167,108897,1304],{"class":177},[167,108899,185],{"class":173},[167,108901,108903,108905,108907,108909,108911],{"class":108902,"line":261},[169,213],[167,108904,1268],{"class":173},[167,108906,1271],{"class":177},[167,108908,1282],{"class":173},[167,108910,1271],{"class":177},[167,108912,185],{"class":173},[167,108914,108915,108917,108919],{"class":169,"line":273},[167,108916,1292],{"class":173},[167,108918,1304],{"class":177},[167,108920,185],{"class":173},[167,108922,108923,108925,108927],{"class":169,"line":279},[167,108924,1257],{"class":173},[167,108926,1334],{"class":177},[167,108928,185],{"class":173},[167,108930,108931,108933,108935,108937,108939,108941,108943,108945],{"class":169,"line":289},[167,108932,1268],{"class":173},[167,108934,1271],{"class":177},[167,108936,1274],{"class":181},[167,108938,267],{"class":173},[167,108940,1349],{"class":201},[167,108942,1282],{"class":173},[167,108944,1271],{"class":177},[167,108946,185],{"class":173},[167,108948,108949,108951,108953],{"class":169,"line":294},[167,108950,1292],{"class":173},[167,108952,1334],{"class":177},[167,108954,185],{"class":173},[167,108956,108957,108959,108961],{"class":169,"line":304},[167,108958,504],{"class":173},[167,108960,1242],{"class":177},[167,108962,185],{"class":173},[167,108964,108965,108967,108969],{"class":169,"line":313},[167,108966,282],{"class":173},[167,108968,299],{"class":177},[167,108970,185],{"class":173},[15,108972,1382],{},[15,108974,1385,108975,1389,108977,1393,108979,1396],{},[87,108976,1388],{},[87,108978,1392],{},[87,108980,1388],{},[22,108982,1400],{"id":1399},[15,108984,1403],{},[154,108986,108988],{"className":542,"code":1406,"filename":1407,"highlights":108987,"language":546,"meta":163,"style":163},[160,238,243,261,273],[87,108989,108990,109000,109004,109014,109031,109050,109055,109074,109093,109097,109103],{"__ignoreMap":163},[167,108991,108992,108994,108996,108998],{"class":169,"line":170},[167,108993,192],{"class":191},[167,108995,1417],{"class":173},[167,108997,198],{"class":191},[167,108999,202],{"class":201},[167,109001,109002],{"class":169,"line":188},[167,109003,209],{"emptyLinePlaceholder":208},[167,109005,109006,109008,109010,109012],{"class":169,"line":205},[167,109007,608],{"class":191},[167,109009,1432],{"class":191},[167,109011,1435],{"class":181},[167,109013,763],{"class":173},[167,109015,109017,109019,109021,109023,109025,109027,109029],{"class":109016,"line":160},[169,213],[167,109018,1443],{"class":191},[167,109020,1446],{"class":219},[167,109022,223],{"class":191},[167,109024,226],{"class":181},[167,109026,229],{"class":173},[167,109028,390],{"class":219},[167,109030,235],{"class":173},[167,109032,109034,109036,109038,109040,109042,109044,109046,109048],{"class":109033,"line":238},[169,213],[167,109035,1443],{"class":191},[167,109037,1464],{"class":181},[167,109039,223],{"class":191},[167,109041,1469],{"class":173},[167,109043,639],{"class":191},[167,109045,1474],{"class":173},[167,109047,267],{"class":191},[167,109049,1479],{"class":173},[167,109051,109053],{"class":109052,"line":243},[169,213],[167,109054,209],{"emptyLinePlaceholder":208},[167,109056,109058,109060,109062,109064,109066,109068,109070,109072],{"class":109057,"line":261},[169,213],[167,109059,1490],{"class":181},[167,109061,1493],{"class":173},[167,109063,639],{"class":191},[167,109065,1498],{"class":173},[167,109067,1501],{"class":181},[167,109069,229],{"class":173},[167,109071,1506],{"class":201},[167,109073,1509],{"class":173},[167,109075,109077,109079,109081,109083,109085,109087,109089,109091],{"class":109076,"line":273},[169,213],[167,109078,1515],{"class":181},[167,109080,1493],{"class":173},[167,109082,639],{"class":191},[167,109084,1498],{"class":173},[167,109086,1524],{"class":181},[167,109088,229],{"class":173},[167,109090,1506],{"class":201},[167,109092,1509],{"class":173},[167,109094,109095],{"class":169,"line":279},[167,109096,209],{"emptyLinePlaceholder":208},[167,109098,109099,109101],{"class":169,"line":289},[167,109100,1539],{"class":191},[167,109102,1542],{"class":173},[167,109104,109105],{"class":169,"line":294},[167,109106,276],{"class":173},[15,109108,1549],{},[15,109110,1552],{},[22,109112,1556],{"id":1555},[15,109114,109115,1561],{},[87,109116,997],{},[15,109118,1564],{},[22,109120,1568],{"id":1567},[33,109122,109123,109125,109127,109129,109133,109135,109137,109139,109141],{},[36,109124,1573],{},[36,109126,1576],{},[36,109128,1579],{},[36,109130,1582,109131,1585],{},[87,109132,997],{},[36,109134,1588],{},[36,109136,1591],{},[36,109138,1594],{},[36,109140,1597],{},[36,109142,1600],{},[15,109144,1603,109145,1606],{},[87,109146,997],{},[924,109148,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":109150},[109151,109152,109153,109154,109155,109156],{"id":1001,"depth":188,"text":1002},{"id":1015,"depth":188,"text":1016},{"id":1216,"depth":188,"text":1217},{"id":1399,"depth":188,"text":1400},{"id":1555,"depth":188,"text":1556},{"id":1567,"depth":188,"text":1568},{"updatedAt":945,"author":946,"coverCaption":1623,"keywords":109158},[1625,1626,1627,1628,1629,997],[109160],{"headline":983,"author":109161,"datePublished":1634,"@type":961},{"name":946,"@type":959},{"title":983,"description":1621},[109164,109165,109166,109167,109168,109169],{"tag":1625,"color":1639},{"tag":953,"color":971},{"tag":973,"color":974},{"tag":954,"color":976},{"tag":1644,"color":1645},{"tag":1647,"color":1648},{"id":109171,"title":109172,"body":109173,"cover":6176,"coverAlt":109876,"date":6178,"description":109877,"draft":940,"extension":941,"lab":109878,"locale":60249,"meta":109888,"navigation":208,"path":109892,"schemaOrg":109893,"seo":109896,"series":963,"seriesDescription":104126,"seriesOrder":205,"seriesTitle":104127,"slug":942,"stem":109897,"tags":109898,"__hash__":109903},"blog\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.en.md","Composables in Vue 3: How to Extract Reusable Logic Without Overcomplicating It",{"type":8,"value":109174,"toc":109866},[109175,109178,109181,109190,109193,109197,109200,109203,109217,109220,109224,109227,109449,109452,109455,109461,109464,109638,109641,109767,109770,109774,109777,109780,109802,109805,109809,109812,109815,109818,109820,109831,109837,109843,109846,109850,109853,109858,109861,109864],[11,109176,109172],{"id":109177},"composables-in-vue-3-how-to-extract-reusable-logic-without-overcomplicating-it",[15,109179,109180],{},"There is a pretty clear sign that a component is asking for help: you start copying the same logic into two, three, or four different places.",[15,109182,109183,109184,109186,109187,109189],{},"First it was a menu that opens and closes. Then a modal. Then a side panel. Each one has its own ",[87,109185,2085],{},", its own function to open, its own function to close, and an almost identical ",[87,109188,5446],{},". Nothing explodes at first, but the code starts to feel repetitive, as if every component is solving the same tiny problem alone.",[15,109191,109192],{},"That is where composables come in.",[22,109194,109196],{"id":109195},"what-a-composable-is-without-making-it-weird","What a composable is, without making it weird",[15,109198,109199],{},"A composable is a function that encapsulates reusable logic with Vue's Composition API.",[15,109201,109202],{},"That is it. It does not need a heavier definition.",[15,109204,109205,109206,63104,109208,109210,109211,109213,109214,109216],{},"It can hold state with ",[87,109207,89],{},[87,109209,93],{},", create derived values with ",[87,109212,5471],{},", listen to changes with ",[87,109215,5475],{},", or connect to browser APIs. The point is to give that logic a clear home so several components can use it without copy and paste.",[15,109218,109219],{},"If a component should focus on rendering the interface, a composable can take care of part of the logic behind it.",[22,109221,109223],{"id":109222},"the-problem-repeated-logic-inside-the-component","The problem: repeated logic inside the component",[15,109225,109226],{},"Imagine a small menu:",[154,109228,109230],{"className":156,"code":109229,"filename":5490,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n\nconst open = () => {\n  isOpen.value = true\n}\n\nconst close = () => {\n  isOpen.value = false\n}\n\nconst toggle = () => {\n  isOpen.value = !isOpen.value\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"toggle\">\n    {{ isOpen ? 'Close menu' : 'Open menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"isOpen\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[87,109231,109232,109242,109252,109256,109272,109276,109290,109298,109302,109306,109320,109328,109332,109336,109350,109360,109364,109372,109376,109384,109398,109403,109411,109415,109429,109433,109441],{"__ignoreMap":163},[167,109233,109234,109236,109238,109240],{"class":169,"line":170},[167,109235,174],{"class":173},[167,109237,178],{"class":177},[167,109239,182],{"class":181},[167,109241,185],{"class":173},[167,109243,109244,109246,109248,109250],{"class":169,"line":188},[167,109245,192],{"class":191},[167,109247,195],{"class":173},[167,109249,198],{"class":191},[167,109251,202],{"class":201},[167,109253,109254],{"class":169,"line":205},[167,109255,209],{"emptyLinePlaceholder":208},[167,109257,109258,109260,109262,109264,109266,109268,109270],{"class":169,"line":160},[167,109259,216],{"class":191},[167,109261,5523],{"class":219},[167,109263,223],{"class":191},[167,109265,226],{"class":181},[167,109267,229],{"class":173},[167,109269,3392],{"class":219},[167,109271,235],{"class":173},[167,109273,109274],{"class":169,"line":238},[167,109275,209],{"emptyLinePlaceholder":208},[167,109277,109278,109280,109282,109284,109286,109288],{"class":169,"line":243},[167,109279,216],{"class":191},[167,109281,5544],{"class":181},[167,109283,223],{"class":191},[167,109285,1469],{"class":173},[167,109287,639],{"class":191},[167,109289,1905],{"class":173},[167,109291,109292,109294,109296],{"class":169,"line":261},[167,109293,5557],{"class":173},[167,109295,267],{"class":191},[167,109297,3487],{"class":219},[167,109299,109300],{"class":169,"line":273},[167,109301,276],{"class":173},[167,109303,109304],{"class":169,"line":279},[167,109305,209],{"emptyLinePlaceholder":208},[167,109307,109308,109310,109312,109314,109316,109318],{"class":169,"line":289},[167,109309,216],{"class":191},[167,109311,5576],{"class":181},[167,109313,223],{"class":191},[167,109315,1469],{"class":173},[167,109317,639],{"class":191},[167,109319,1905],{"class":173},[167,109321,109322,109324,109326],{"class":169,"line":294},[167,109323,5557],{"class":173},[167,109325,267],{"class":191},[167,109327,5593],{"class":219},[167,109329,109330],{"class":169,"line":304},[167,109331,276],{"class":173},[167,109333,109334],{"class":169,"line":313},[167,109335,209],{"emptyLinePlaceholder":208},[167,109337,109338,109340,109342,109344,109346,109348],{"class":169,"line":161},[167,109339,216],{"class":191},[167,109341,5608],{"class":181},[167,109343,223],{"class":191},[167,109345,1469],{"class":173},[167,109347,639],{"class":191},[167,109349,1905],{"class":173},[167,109351,109352,109354,109356,109358],{"class":169,"line":335},[167,109353,5557],{"class":173},[167,109355,267],{"class":191},[167,109357,5625],{"class":191},[167,109359,5628],{"class":173},[167,109361,109362],{"class":169,"line":341},[167,109363,276],{"class":173},[167,109365,109366,109368,109370],{"class":169,"line":489},[167,109367,282],{"class":173},[167,109369,178],{"class":177},[167,109371,185],{"class":173},[167,109373,109374],{"class":169,"line":495},[167,109375,209],{"emptyLinePlaceholder":208},[167,109377,109378,109380,109382],{"class":169,"line":501},[167,109379,174],{"class":173},[167,109381,299],{"class":177},[167,109383,185],{"class":173},[167,109385,109386,109388,109390,109392,109394,109396],{"class":169,"line":512},[167,109387,307],{"class":173},[167,109389,507],{"class":177},[167,109391,1182],{"class":181},[167,109393,267],{"class":173},[167,109395,5665],{"class":201},[167,109397,185],{"class":173},[167,109399,109400],{"class":169,"line":781},[167,109401,109402],{"class":173},"    {{ isOpen ? 'Close menu' : 'Open menu' }}\n",[167,109404,109405,109407,109409],{"class":169,"line":786},[167,109406,504],{"class":173},[167,109408,507],{"class":177},[167,109410,185],{"class":173},[167,109412,109413],{"class":169,"line":2678},[167,109414,209],{"emptyLinePlaceholder":208},[167,109416,109417,109419,109421,109423,109425,109427],{"class":169,"line":2692},[167,109418,307],{"class":173},[167,109420,5691],{"class":177},[167,109422,5694],{"class":181},[167,109424,267],{"class":173},[167,109426,5699],{"class":201},[167,109428,185],{"class":173},[167,109430,109431],{"class":169,"line":3575},[167,109432,5706],{"class":173},[167,109434,109435,109437,109439],{"class":169,"line":5028},[167,109436,504],{"class":173},[167,109438,5691],{"class":177},[167,109440,185],{"class":173},[167,109442,109443,109445,109447],{"class":169,"line":5037},[167,109444,282],{"class":173},[167,109446,299],{"class":177},[167,109448,185],{"class":173},[15,109450,109451],{},"This code is fine. You do not need to extract everything the moment a function appears. The problem starts when the same idea shows up in a modal, an accordion, an expandable card, and a filter panel.",[15,109453,109454],{},"At that point, you are no longer writing menu logic. You are writing a small reusable rule: something can be active or inactive, and you need to open it, close it, or toggle it.",[22,109456,109458,109459],{"id":109457},"the-after-extracting-usetoggle","The after: extracting ",[87,109460,5735],{},[15,109462,109463],{},"We can move that logic into a composable:",[154,109465,109466],{"className":2879,"code":5741,"filename":5742,"language":2882,"meta":163,"style":163},[87,109467,109468,109478,109482,109500,109512,109516,109530,109538,109542,109546,109560,109568,109572,109576,109590,109600,109604,109608,109614,109618,109622,109626,109630,109634],{"__ignoreMap":163},[167,109469,109470,109472,109474,109476],{"class":169,"line":170},[167,109471,192],{"class":191},[167,109473,195],{"class":173},[167,109475,198],{"class":191},[167,109477,202],{"class":201},[167,109479,109480],{"class":169,"line":188},[167,109481,209],{"emptyLinePlaceholder":208},[167,109483,109484,109486,109488,109490,109492,109494,109496,109498],{"class":169,"line":205},[167,109485,608],{"class":191},[167,109487,1432],{"class":191},[167,109489,5767],{"class":181},[167,109491,229],{"class":173},[167,109493,5772],{"class":254},[167,109495,223],{"class":191},[167,109497,5777],{"class":219},[167,109499,258],{"class":173},[167,109501,109502,109504,109506,109508,109510],{"class":169,"line":160},[167,109503,1443],{"class":191},[167,109505,5786],{"class":219},[167,109507,223],{"class":191},[167,109509,226],{"class":181},[167,109511,5793],{"class":173},[167,109513,109514],{"class":169,"line":238},[167,109515,209],{"emptyLinePlaceholder":208},[167,109517,109518,109520,109522,109524,109526,109528],{"class":169,"line":243},[167,109519,1443],{"class":191},[167,109521,5544],{"class":181},[167,109523,223],{"class":191},[167,109525,1469],{"class":173},[167,109527,639],{"class":191},[167,109529,1905],{"class":173},[167,109531,109532,109534,109536],{"class":169,"line":261},[167,109533,5816],{"class":173},[167,109535,267],{"class":191},[167,109537,3487],{"class":219},[167,109539,109540],{"class":169,"line":273},[167,109541,3492],{"class":173},[167,109543,109544],{"class":169,"line":279},[167,109545,209],{"emptyLinePlaceholder":208},[167,109547,109548,109550,109552,109554,109556,109558],{"class":169,"line":289},[167,109549,1443],{"class":191},[167,109551,5576],{"class":181},[167,109553,223],{"class":191},[167,109555,1469],{"class":173},[167,109557,639],{"class":191},[167,109559,1905],{"class":173},[167,109561,109562,109564,109566],{"class":169,"line":294},[167,109563,5816],{"class":173},[167,109565,267],{"class":191},[167,109567,5593],{"class":219},[167,109569,109570],{"class":169,"line":304},[167,109571,3492],{"class":173},[167,109573,109574],{"class":169,"line":313},[167,109575,209],{"emptyLinePlaceholder":208},[167,109577,109578,109580,109582,109584,109586,109588],{"class":169,"line":161},[167,109579,1443],{"class":191},[167,109581,5608],{"class":181},[167,109583,223],{"class":191},[167,109585,1469],{"class":173},[167,109587,639],{"class":191},[167,109589,1905],{"class":173},[167,109591,109592,109594,109596,109598],{"class":169,"line":335},[167,109593,5816],{"class":173},[167,109595,267],{"class":191},[167,109597,5625],{"class":191},[167,109599,5883],{"class":173},[167,109601,109602],{"class":169,"line":341},[167,109603,3492],{"class":173},[167,109605,109606],{"class":169,"line":489},[167,109607,209],{"emptyLinePlaceholder":208},[167,109609,109610,109612],{"class":169,"line":495},[167,109611,1539],{"class":191},[167,109613,1905],{"class":173},[167,109615,109616],{"class":169,"line":501},[167,109617,5902],{"class":173},[167,109619,109620],{"class":169,"line":512},[167,109621,5907],{"class":173},[167,109623,109624],{"class":169,"line":781},[167,109625,5912],{"class":173},[167,109627,109628],{"class":169,"line":786},[167,109629,5917],{"class":173},[167,109631,109632],{"class":169,"line":2678},[167,109633,3492],{"class":173},[167,109635,109636],{"class":169,"line":2692},[167,109637,276],{"class":173},[15,109639,109640],{},"And now the component is more focused:",[154,109642,109644],{"className":156,"code":109643,"filename":5490,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { useToggle } from '@\u002Fcomposables\u002FuseToggle'\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Close menu' : 'Open menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n",[87,109645,109646,109656,109666,109670,109682,109690,109694,109702,109716,109721,109729,109733,109747,109751,109759],{"__ignoreMap":163},[167,109647,109648,109650,109652,109654],{"class":169,"line":170},[167,109649,174],{"class":173},[167,109651,178],{"class":177},[167,109653,182],{"class":181},[167,109655,185],{"class":173},[167,109657,109658,109660,109662,109664],{"class":169,"line":188},[167,109659,192],{"class":191},[167,109661,5950],{"class":173},[167,109663,198],{"class":191},[167,109665,5955],{"class":201},[167,109667,109668],{"class":169,"line":205},[167,109669,209],{"emptyLinePlaceholder":208},[167,109671,109672,109674,109676,109678,109680],{"class":169,"line":160},[167,109673,216],{"class":191},[167,109675,5966],{"class":219},[167,109677,223],{"class":191},[167,109679,5767],{"class":181},[167,109681,2917],{"class":173},[167,109683,109684,109686,109688],{"class":169,"line":238},[167,109685,282],{"class":173},[167,109687,178],{"class":177},[167,109689,185],{"class":173},[167,109691,109692],{"class":169,"line":243},[167,109693,209],{"emptyLinePlaceholder":208},[167,109695,109696,109698,109700],{"class":169,"line":261},[167,109697,174],{"class":173},[167,109699,299],{"class":177},[167,109701,185],{"class":173},[167,109703,109704,109706,109708,109710,109712,109714],{"class":169,"line":273},[167,109705,307],{"class":173},[167,109707,507],{"class":177},[167,109709,1182],{"class":181},[167,109711,267],{"class":173},[167,109713,6005],{"class":201},[167,109715,185],{"class":173},[167,109717,109718],{"class":169,"line":279},[167,109719,109720],{"class":173},"    {{ menu.isActive ? 'Close menu' : 'Open menu' }}\n",[167,109722,109723,109725,109727],{"class":169,"line":289},[167,109724,504],{"class":173},[167,109726,507],{"class":177},[167,109728,185],{"class":173},[167,109730,109731],{"class":169,"line":294},[167,109732,209],{"emptyLinePlaceholder":208},[167,109734,109735,109737,109739,109741,109743,109745],{"class":169,"line":304},[167,109736,307],{"class":173},[167,109738,5691],{"class":177},[167,109740,5694],{"class":181},[167,109742,267],{"class":173},[167,109744,6037],{"class":201},[167,109746,185],{"class":173},[167,109748,109749],{"class":169,"line":313},[167,109750,5706],{"class":173},[167,109752,109753,109755,109757],{"class":169,"line":161},[167,109754,504],{"class":173},[167,109756,5691],{"class":177},[167,109758,185],{"class":173},[167,109760,109761,109763,109765],{"class":169,"line":335},[167,109762,282],{"class":173},[167,109764,299],{"class":177},[167,109766,185],{"class":173},[15,109768,109769],{},"The component still makes sense. Actually, it makes more sense: there is a menu, and that menu can be toggled. The mechanics are no longer in the way.",[22,109771,109773],{"id":109772},"when-creating-a-composable-is-worth-it","When creating a composable is worth it",[15,109775,109776],{},"A composable is useful when it extracts a real intention, not just a few lines of code.",[15,109778,109779],{},"It is usually worth it when:",[33,109781,109782,109785,109788,109791],{},[36,109783,109784],{},"The same logic appears in more than one component.",[36,109786,109787],{},"The component is carrying too many responsibilities.",[36,109789,109790],{},"You want to reason about one piece of behavior separately.",[36,109792,109793,109794,1025,109796,1025,109798,1025,109800,1679],{},"The logic has a clear name: ",[87,109795,5735],{},[87,109797,6091],{},[87,109799,6094],{},[87,109801,6097],{},[15,109803,109804],{},"The name matters. If you can name it naturally, there is probably a reusable idea there.",[22,109806,109808],{"id":109807},"when-you-do-not-need-one","When you do not need one",[15,109810,109811],{},"Not everything needs to become a composable.",[15,109813,109814],{},"If a bit of logic only lives in one component and reads well there, leave it there. Extracting too early can also make code harder to follow. You end up jumping between files to understand something that used to take twenty seconds to read.",[15,109816,109817],{},"A good composable removes noise. An unnecessary one just moves the noise somewhere else.",[22,109819,63002],{"id":57819},[15,109821,109822,109823,1025,109825,109827,109828,109830],{},"The first one is using names that are too vague. ",[87,109824,6121],{},[87,109826,6124],{},", or ",[87,109829,6127],{}," do not say much. If the name does not explain the intention, the file becomes a drawer for random things.",[15,109832,109833,109834,109836],{},"The second one is putting too much logic into the same composable. ",[87,109835,6134],{}," may feel convenient at first, but soon it will be harder to maintain than the original component.",[15,109838,109839,109840,109842],{},"The third one is hiding side effects. If a composable makes a request, writes to ",[87,109841,2398],{},", or registers global events, that should be clear from its name or from how it is used.",[15,109844,109845],{},"The fourth one is returning too many things. If a composable returns fifteen properties, you may not have found the right boundary yet.",[22,109847,109849],{"id":109848},"a-practical-rule","A practical rule",[15,109851,109852],{},"Before creating a composable, ask yourself:",[5367,109854,109855],{},[15,109856,109857],{},"Am I extracting an idea, or am I just moving code?",[15,109859,109860],{},"If you are extracting an idea, go for it. If you are only moving code to make the component look shorter, wait a bit.",[15,109862,109863],{},"Composables are not there to show off. They are there to help the code breathe, to let components talk about the interface, and to give repeated logic a home of its own.",[924,109865,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":109867},[109868,109869,109870,109872,109873,109874,109875],{"id":109195,"depth":188,"text":109196},{"id":109222,"depth":188,"text":109223},{"id":109457,"depth":188,"text":109871},"The after: extracting useToggle",{"id":109772,"depth":188,"text":109773},{"id":109807,"depth":188,"text":109808},{"id":57819,"depth":188,"text":63002},{"id":109848,"depth":188,"text":109849},"Screen showing code in a development environment","Learn what composables are in Vue 3, when they are worth using, and how to extract reusable logic with a clear useToggle example.",{"title":109879,"goal":109880,"tasks":109881,"starterCode":109886,"solutionHint":109887},"Create your first composable: useToggle","Extract a small, repeatable bit of logic for opening, closing, and toggling a boolean state from any component.",[109882,109883,109884,109885],"Create a useToggle.js or useToggle.ts file.","Use ref() to store the active or inactive state.","Expose the open(), close(), and toggle() functions.","Use the composable from a component with a button.","\u003Cscript setup>\nimport { ref } from 'vue'\n\nfunction useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Close menu' : 'Open menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","If the component no longer needs to know how the state changes, only when to use it, the composable is doing its job.",{"updatedAt":945,"coverCaption":109889,"author":946,"keywords":109890},"Reusable code in Vue 3 by TODOvue",[3258,951,954,3260,5735,109891],"reusable logic","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.en",[109894],{"headline":109172,"author":109895,"datePublished":6198,"@type":961},{"name":946,"@type":959},{"title":109172,"description":109877},"blog\u002Fvue-3-composables-extract-reusable-logic.en",[109899,109900,109901,109902],{"tag":954,"color":976},{"tag":98745,"color":1639},{"tag":104136,"color":974},{"tag":65670,"color":5425},"_xB-VUklmuqVsS7YFm685mXIKX7EAJTdSwOJ8dJRCpo",{"id":5428,"title":5429,"body":109905,"cover":6176,"coverAlt":6177,"date":6178,"description":6179,"draft":940,"extension":941,"lab":110550,"locale":943,"meta":110552,"navigation":208,"path":6194,"schemaOrg":110554,"seo":110557,"series":963,"seriesDescription":964,"seriesOrder":205,"seriesTitle":965,"slug":942,"stem":6200,"tags":110558,"__hash__":6206},{"type":8,"value":109906,"toc":110541},[109907,109909,109911,109917,109919,109921,109923,109925,109935,109937,109939,109941,110161,110163,110165,110169,110171,110345,110347,110471,110473,110475,110477,110479,110497,110499,110501,110503,110505,110507,110509,110517,110521,110525,110527,110529,110531,110535,110537,110539],[11,109908,5429],{"id":5434},[15,109910,5437],{},[15,109912,5440,109913,5443,109915,5447],{},[87,109914,2085],{},[87,109916,5446],{},[15,109918,5450],{},[22,109920,5454],{"id":5453},[15,109922,5457],{},[15,109924,5460],{},[15,109926,5463,109927,90,109929,5468,109931,5472,109933,5476],{},[87,109928,89],{},[87,109930,93],{},[87,109932,5471],{},[87,109934,5475],{},[15,109936,5479],{},[22,109938,5483],{"id":5482},[15,109940,5486],{},[154,109942,109943],{"className":156,"code":5489,"filename":5490,"language":162,"meta":163,"style":163},[87,109944,109945,109955,109965,109969,109985,109989,110003,110011,110015,110019,110033,110041,110045,110049,110063,110073,110077,110085,110089,110097,110111,110115,110123,110127,110141,110145,110153],{"__ignoreMap":163},[167,109946,109947,109949,109951,109953],{"class":169,"line":170},[167,109948,174],{"class":173},[167,109950,178],{"class":177},[167,109952,182],{"class":181},[167,109954,185],{"class":173},[167,109956,109957,109959,109961,109963],{"class":169,"line":188},[167,109958,192],{"class":191},[167,109960,195],{"class":173},[167,109962,198],{"class":191},[167,109964,202],{"class":201},[167,109966,109967],{"class":169,"line":205},[167,109968,209],{"emptyLinePlaceholder":208},[167,109970,109971,109973,109975,109977,109979,109981,109983],{"class":169,"line":160},[167,109972,216],{"class":191},[167,109974,5523],{"class":219},[167,109976,223],{"class":191},[167,109978,226],{"class":181},[167,109980,229],{"class":173},[167,109982,3392],{"class":219},[167,109984,235],{"class":173},[167,109986,109987],{"class":169,"line":238},[167,109988,209],{"emptyLinePlaceholder":208},[167,109990,109991,109993,109995,109997,109999,110001],{"class":169,"line":243},[167,109992,216],{"class":191},[167,109994,5544],{"class":181},[167,109996,223],{"class":191},[167,109998,1469],{"class":173},[167,110000,639],{"class":191},[167,110002,1905],{"class":173},[167,110004,110005,110007,110009],{"class":169,"line":261},[167,110006,5557],{"class":173},[167,110008,267],{"class":191},[167,110010,3487],{"class":219},[167,110012,110013],{"class":169,"line":273},[167,110014,276],{"class":173},[167,110016,110017],{"class":169,"line":279},[167,110018,209],{"emptyLinePlaceholder":208},[167,110020,110021,110023,110025,110027,110029,110031],{"class":169,"line":289},[167,110022,216],{"class":191},[167,110024,5576],{"class":181},[167,110026,223],{"class":191},[167,110028,1469],{"class":173},[167,110030,639],{"class":191},[167,110032,1905],{"class":173},[167,110034,110035,110037,110039],{"class":169,"line":294},[167,110036,5557],{"class":173},[167,110038,267],{"class":191},[167,110040,5593],{"class":219},[167,110042,110043],{"class":169,"line":304},[167,110044,276],{"class":173},[167,110046,110047],{"class":169,"line":313},[167,110048,209],{"emptyLinePlaceholder":208},[167,110050,110051,110053,110055,110057,110059,110061],{"class":169,"line":161},[167,110052,216],{"class":191},[167,110054,5608],{"class":181},[167,110056,223],{"class":191},[167,110058,1469],{"class":173},[167,110060,639],{"class":191},[167,110062,1905],{"class":173},[167,110064,110065,110067,110069,110071],{"class":169,"line":335},[167,110066,5557],{"class":173},[167,110068,267],{"class":191},[167,110070,5625],{"class":191},[167,110072,5628],{"class":173},[167,110074,110075],{"class":169,"line":341},[167,110076,276],{"class":173},[167,110078,110079,110081,110083],{"class":169,"line":489},[167,110080,282],{"class":173},[167,110082,178],{"class":177},[167,110084,185],{"class":173},[167,110086,110087],{"class":169,"line":495},[167,110088,209],{"emptyLinePlaceholder":208},[167,110090,110091,110093,110095],{"class":169,"line":501},[167,110092,174],{"class":173},[167,110094,299],{"class":177},[167,110096,185],{"class":173},[167,110098,110099,110101,110103,110105,110107,110109],{"class":169,"line":512},[167,110100,307],{"class":173},[167,110102,507],{"class":177},[167,110104,1182],{"class":181},[167,110106,267],{"class":173},[167,110108,5665],{"class":201},[167,110110,185],{"class":173},[167,110112,110113],{"class":169,"line":781},[167,110114,5672],{"class":173},[167,110116,110117,110119,110121],{"class":169,"line":786},[167,110118,504],{"class":173},[167,110120,507],{"class":177},[167,110122,185],{"class":173},[167,110124,110125],{"class":169,"line":2678},[167,110126,209],{"emptyLinePlaceholder":208},[167,110128,110129,110131,110133,110135,110137,110139],{"class":169,"line":2692},[167,110130,307],{"class":173},[167,110132,5691],{"class":177},[167,110134,5694],{"class":181},[167,110136,267],{"class":173},[167,110138,5699],{"class":201},[167,110140,185],{"class":173},[167,110142,110143],{"class":169,"line":3575},[167,110144,5706],{"class":173},[167,110146,110147,110149,110151],{"class":169,"line":5028},[167,110148,504],{"class":173},[167,110150,5691],{"class":177},[167,110152,185],{"class":173},[167,110154,110155,110157,110159],{"class":169,"line":5037},[167,110156,282],{"class":173},[167,110158,299],{"class":177},[167,110160,185],{"class":173},[15,110162,5725],{},[15,110164,5728],{},[22,110166,5732,110167],{"id":5731},[87,110168,5735],{},[15,110170,5738],{},[154,110172,110173],{"className":2879,"code":5741,"filename":5742,"language":2882,"meta":163,"style":163},[87,110174,110175,110185,110189,110207,110219,110223,110237,110245,110249,110253,110267,110275,110279,110283,110297,110307,110311,110315,110321,110325,110329,110333,110337,110341],{"__ignoreMap":163},[167,110176,110177,110179,110181,110183],{"class":169,"line":170},[167,110178,192],{"class":191},[167,110180,195],{"class":173},[167,110182,198],{"class":191},[167,110184,202],{"class":201},[167,110186,110187],{"class":169,"line":188},[167,110188,209],{"emptyLinePlaceholder":208},[167,110190,110191,110193,110195,110197,110199,110201,110203,110205],{"class":169,"line":205},[167,110192,608],{"class":191},[167,110194,1432],{"class":191},[167,110196,5767],{"class":181},[167,110198,229],{"class":173},[167,110200,5772],{"class":254},[167,110202,223],{"class":191},[167,110204,5777],{"class":219},[167,110206,258],{"class":173},[167,110208,110209,110211,110213,110215,110217],{"class":169,"line":160},[167,110210,1443],{"class":191},[167,110212,5786],{"class":219},[167,110214,223],{"class":191},[167,110216,226],{"class":181},[167,110218,5793],{"class":173},[167,110220,110221],{"class":169,"line":238},[167,110222,209],{"emptyLinePlaceholder":208},[167,110224,110225,110227,110229,110231,110233,110235],{"class":169,"line":243},[167,110226,1443],{"class":191},[167,110228,5544],{"class":181},[167,110230,223],{"class":191},[167,110232,1469],{"class":173},[167,110234,639],{"class":191},[167,110236,1905],{"class":173},[167,110238,110239,110241,110243],{"class":169,"line":261},[167,110240,5816],{"class":173},[167,110242,267],{"class":191},[167,110244,3487],{"class":219},[167,110246,110247],{"class":169,"line":273},[167,110248,3492],{"class":173},[167,110250,110251],{"class":169,"line":279},[167,110252,209],{"emptyLinePlaceholder":208},[167,110254,110255,110257,110259,110261,110263,110265],{"class":169,"line":289},[167,110256,1443],{"class":191},[167,110258,5576],{"class":181},[167,110260,223],{"class":191},[167,110262,1469],{"class":173},[167,110264,639],{"class":191},[167,110266,1905],{"class":173},[167,110268,110269,110271,110273],{"class":169,"line":294},[167,110270,5816],{"class":173},[167,110272,267],{"class":191},[167,110274,5593],{"class":219},[167,110276,110277],{"class":169,"line":304},[167,110278,3492],{"class":173},[167,110280,110281],{"class":169,"line":313},[167,110282,209],{"emptyLinePlaceholder":208},[167,110284,110285,110287,110289,110291,110293,110295],{"class":169,"line":161},[167,110286,1443],{"class":191},[167,110288,5608],{"class":181},[167,110290,223],{"class":191},[167,110292,1469],{"class":173},[167,110294,639],{"class":191},[167,110296,1905],{"class":173},[167,110298,110299,110301,110303,110305],{"class":169,"line":335},[167,110300,5816],{"class":173},[167,110302,267],{"class":191},[167,110304,5625],{"class":191},[167,110306,5883],{"class":173},[167,110308,110309],{"class":169,"line":341},[167,110310,3492],{"class":173},[167,110312,110313],{"class":169,"line":489},[167,110314,209],{"emptyLinePlaceholder":208},[167,110316,110317,110319],{"class":169,"line":495},[167,110318,1539],{"class":191},[167,110320,1905],{"class":173},[167,110322,110323],{"class":169,"line":501},[167,110324,5902],{"class":173},[167,110326,110327],{"class":169,"line":512},[167,110328,5907],{"class":173},[167,110330,110331],{"class":169,"line":781},[167,110332,5912],{"class":173},[167,110334,110335],{"class":169,"line":786},[167,110336,5917],{"class":173},[167,110338,110339],{"class":169,"line":2678},[167,110340,3492],{"class":173},[167,110342,110343],{"class":169,"line":2692},[167,110344,276],{"class":173},[15,110346,5928],{},[154,110348,110349],{"className":156,"code":5931,"filename":5490,"language":162,"meta":163,"style":163},[87,110350,110351,110361,110371,110375,110387,110395,110399,110407,110421,110425,110433,110437,110451,110455,110463],{"__ignoreMap":163},[167,110352,110353,110355,110357,110359],{"class":169,"line":170},[167,110354,174],{"class":173},[167,110356,178],{"class":177},[167,110358,182],{"class":181},[167,110360,185],{"class":173},[167,110362,110363,110365,110367,110369],{"class":169,"line":188},[167,110364,192],{"class":191},[167,110366,5950],{"class":173},[167,110368,198],{"class":191},[167,110370,5955],{"class":201},[167,110372,110373],{"class":169,"line":205},[167,110374,209],{"emptyLinePlaceholder":208},[167,110376,110377,110379,110381,110383,110385],{"class":169,"line":160},[167,110378,216],{"class":191},[167,110380,5966],{"class":219},[167,110382,223],{"class":191},[167,110384,5767],{"class":181},[167,110386,2917],{"class":173},[167,110388,110389,110391,110393],{"class":169,"line":238},[167,110390,282],{"class":173},[167,110392,178],{"class":177},[167,110394,185],{"class":173},[167,110396,110397],{"class":169,"line":243},[167,110398,209],{"emptyLinePlaceholder":208},[167,110400,110401,110403,110405],{"class":169,"line":261},[167,110402,174],{"class":173},[167,110404,299],{"class":177},[167,110406,185],{"class":173},[167,110408,110409,110411,110413,110415,110417,110419],{"class":169,"line":273},[167,110410,307],{"class":173},[167,110412,507],{"class":177},[167,110414,1182],{"class":181},[167,110416,267],{"class":173},[167,110418,6005],{"class":201},[167,110420,185],{"class":173},[167,110422,110423],{"class":169,"line":279},[167,110424,6012],{"class":173},[167,110426,110427,110429,110431],{"class":169,"line":289},[167,110428,504],{"class":173},[167,110430,507],{"class":177},[167,110432,185],{"class":173},[167,110434,110435],{"class":169,"line":294},[167,110436,209],{"emptyLinePlaceholder":208},[167,110438,110439,110441,110443,110445,110447,110449],{"class":169,"line":304},[167,110440,307],{"class":173},[167,110442,5691],{"class":177},[167,110444,5694],{"class":181},[167,110446,267],{"class":173},[167,110448,6037],{"class":201},[167,110450,185],{"class":173},[167,110452,110453],{"class":169,"line":313},[167,110454,5706],{"class":173},[167,110456,110457,110459,110461],{"class":169,"line":161},[167,110458,504],{"class":173},[167,110460,5691],{"class":177},[167,110462,185],{"class":173},[167,110464,110465,110467,110469],{"class":169,"line":335},[167,110466,282],{"class":173},[167,110468,299],{"class":177},[167,110470,185],{"class":173},[15,110472,6062],{},[22,110474,6066],{"id":6065},[15,110476,6069],{},[15,110478,6072],{},[33,110480,110481,110483,110485,110487],{},[36,110482,6077],{},[36,110484,6080],{},[36,110486,6083],{},[36,110488,6086,110489,1025,110491,1025,110493,1025,110495,1679],{},[87,110490,5735],{},[87,110492,6091],{},[87,110494,6094],{},[87,110496,6097],{},[15,110498,6100],{},[22,110500,6104],{"id":6103},[15,110502,6107],{},[15,110504,6110],{},[15,110506,6113],{},[22,110508,3085],{"id":3084},[15,110510,6118,110511,1025,110513,90,110515,6128],{},[87,110512,6121],{},[87,110514,6124],{},[87,110516,6127],{},[15,110518,6131,110519,6135],{},[87,110520,6134],{},[15,110522,6138,110523,6141],{},[87,110524,2398],{},[15,110526,6144],{},[22,110528,6148],{"id":6147},[15,110530,6151],{},[5367,110532,110533],{},[15,110534,6156],{},[15,110536,6159],{},[15,110538,6162],{},[924,110540,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":110542},[110543,110544,110545,110546,110547,110548,110549],{"id":5453,"depth":188,"text":5454},{"id":5482,"depth":188,"text":5483},{"id":5731,"depth":188,"text":6171},{"id":6065,"depth":188,"text":6066},{"id":6103,"depth":188,"text":6104},{"id":3084,"depth":188,"text":3085},{"id":6147,"depth":188,"text":6148},{"title":6181,"goal":6182,"tasks":110551,"starterCode":6188,"solutionHint":6189},[6184,6185,6186,6187],{"updatedAt":945,"coverCaption":6191,"author":946,"keywords":110553},[3258,951,954,3260,5735,6193],[110555],{"headline":5429,"author":110556,"datePublished":6198,"@type":961},{"name":946,"@type":959},{"title":5429,"description":6179},[110559,110560,110561,110562],{"tag":954,"color":976},{"tag":1625,"color":1639},{"tag":973,"color":974},{"tag":5424,"color":5425},{"id":110564,"title":110565,"body":110566,"cover":5395,"coverAlt":110565,"date":5396,"description":112537,"draft":940,"extension":941,"lab":112538,"locale":60249,"meta":112548,"navigation":208,"path":112552,"schemaOrg":112553,"seo":112556,"series":963,"seriesDescription":104126,"seriesOrder":188,"seriesTitle":104127,"slug":942,"stem":112557,"tags":112558,"__hash__":112564},"blog\u002Fblog\u002Fvue-3-props-emits-component-communication.en.md","Props and Emits in Vue 3: Component Communication",{"type":8,"value":110567,"toc":112525},[110568,110571,110574,110577,110589,110592,110596,110599,110834,110837,110840,111038,111041,111047,111054,111201,111349,111352,111355,111361,111364,111573,111791,111794,111798,111801,111804,111894,111897,111900,112013,112230,112233,112277,112281,112284,112287,112309,112317,112321,112324,112327,112439,112445,112469,112472,112476,112479,112493,112499,112502,112506,112509,112514,112517,112520,112523],[11,110569,110565],{"id":110570},"props-and-emits-in-vue-3-component-communication",[15,110572,110573],{},"Once an application starts to split into components, a simple question appears: how do those components share information?",[15,110575,110576],{},"In Vue, the basic answer usually looks like this:",[33,110578,110579,110584],{},[36,110580,110581,110583],{},[87,110582,3300],{}," pass data from a parent component down to a child component.",[36,110585,110586,110588],{},[87,110587,3307],{}," let a child component notify the parent that something happened.",[15,110590,110591],{},"That flow may look small, but it gives a lot of order to an interface. The parent keeps the important state. The child receives what it needs to render and emits events when something happens that the parent should know about.",[22,110593,110595],{"id":110594},"the-usual-flow-data-down-events-up","The usual flow: data down, events up",[15,110597,110598],{},"Imagine a task list. The parent component owns the full array:",[154,110600,110603],{"className":156,"code":110601,"filename":3322,"highlights":110602,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport TaskCard from '.\u002FTaskCard.vue'\n\nconst tasks = ref([\n  { id: 1, title: 'Read the props guide', completed: false },\n  { id: 2, title: 'Create a small component', completed: false }\n])\n\nconst completeTask = (taskId) => {\n  const task = tasks.value.find((item) => item.id === taskId)\n  if (task) {\n    task.completed = true\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTaskCard\n    v-for=\"task in tasks\"\n    :key=\"task.id\"\n    :task=\"task\"\n    @complete=\"completeTask\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[501,512,781,786,2678],[87,110604,110605,110615,110625,110635,110639,110651,110668,110685,110689,110693,110711,110737,110743,110751,110755,110759,110767,110771,110779,110786,110795,110804,110813,110822,110826],{"__ignoreMap":163},[167,110606,110607,110609,110611,110613],{"class":169,"line":170},[167,110608,174],{"class":173},[167,110610,178],{"class":177},[167,110612,182],{"class":181},[167,110614,185],{"class":173},[167,110616,110617,110619,110621,110623],{"class":169,"line":188},[167,110618,192],{"class":191},[167,110620,195],{"class":173},[167,110622,198],{"class":191},[167,110624,202],{"class":201},[167,110626,110627,110629,110631,110633],{"class":169,"line":205},[167,110628,192],{"class":191},[167,110630,3352],{"class":173},[167,110632,198],{"class":191},[167,110634,3357],{"class":201},[167,110636,110637],{"class":169,"line":160},[167,110638,209],{"emptyLinePlaceholder":208},[167,110640,110641,110643,110645,110647,110649],{"class":169,"line":238},[167,110642,216],{"class":191},[167,110644,3368],{"class":219},[167,110646,223],{"class":191},[167,110648,226],{"class":181},[167,110650,1827],{"class":173},[167,110652,110653,110655,110657,110659,110662,110664,110666],{"class":169,"line":243},[167,110654,1832],{"class":173},[167,110656,1835],{"class":219},[167,110658,3383],{"class":173},[167,110660,110661],{"class":201},"'Read the props guide'",[167,110663,3389],{"class":173},[167,110665,3392],{"class":219},[167,110667,1856],{"class":173},[167,110669,110670,110672,110674,110676,110679,110681,110683],{"class":169,"line":261},[167,110671,1832],{"class":173},[167,110673,1853],{"class":219},[167,110675,3383],{"class":173},[167,110677,110678],{"class":201},"'Create a small component'",[167,110680,3389],{"class":173},[167,110682,3392],{"class":219},[167,110684,599],{"class":173},[167,110686,110687],{"class":169,"line":273},[167,110688,429],{"class":173},[167,110690,110691],{"class":169,"line":279},[167,110692,209],{"emptyLinePlaceholder":208},[167,110694,110695,110697,110699,110701,110703,110705,110707,110709],{"class":169,"line":289},[167,110696,216],{"class":191},[167,110698,3426],{"class":181},[167,110700,223],{"class":191},[167,110702,2526],{"class":173},[167,110704,3433],{"class":254},[167,110706,693],{"class":173},[167,110708,639],{"class":191},[167,110710,1905],{"class":173},[167,110712,110713,110715,110717,110719,110721,110723,110725,110727,110729,110731,110733,110735],{"class":169,"line":294},[167,110714,1443],{"class":191},[167,110716,3446],{"class":219},[167,110718,223],{"class":191},[167,110720,3451],{"class":173},[167,110722,3454],{"class":181},[167,110724,1918],{"class":173},[167,110726,1926],{"class":254},[167,110728,693],{"class":173},[167,110730,639],{"class":191},[167,110732,3465],{"class":173},[167,110734,2550],{"class":191},[167,110736,3470],{"class":173},[167,110738,110739,110741],{"class":169,"line":304},[167,110740,2544],{"class":191},[167,110742,3477],{"class":173},[167,110744,110745,110747,110749],{"class":169,"line":313},[167,110746,3482],{"class":173},[167,110748,267],{"class":191},[167,110750,3487],{"class":219},[167,110752,110753],{"class":169,"line":161},[167,110754,3492],{"class":173},[167,110756,110757],{"class":169,"line":335},[167,110758,276],{"class":173},[167,110760,110761,110763,110765],{"class":169,"line":341},[167,110762,282],{"class":173},[167,110764,178],{"class":177},[167,110766,185],{"class":173},[167,110768,110769],{"class":169,"line":489},[167,110770,209],{"emptyLinePlaceholder":208},[167,110772,110773,110775,110777],{"class":169,"line":495},[167,110774,174],{"class":173},[167,110776,299],{"class":177},[167,110778,185],{"class":173},[167,110780,110782,110784],{"class":110781,"line":501},[169,213],[167,110783,307],{"class":173},[167,110785,3524],{"class":177},[167,110787,110789,110791,110793],{"class":110788,"line":512},[169,213],[167,110790,3530],{"class":181},[167,110792,267],{"class":173},[167,110794,3535],{"class":201},[167,110796,110798,110800,110802],{"class":110797,"line":781},[169,213],[167,110799,3541],{"class":181},[167,110801,267],{"class":173},[167,110803,3546],{"class":201},[167,110805,110807,110809,110811],{"class":110806,"line":786},[169,213],[167,110808,3552],{"class":181},[167,110810,267],{"class":173},[167,110812,3557],{"class":201},[167,110814,110816,110818,110820],{"class":110815,"line":2678},[169,213],[167,110817,3563],{"class":181},[167,110819,267],{"class":173},[167,110821,3568],{"class":201},[167,110823,110824],{"class":169,"line":2692},[167,110825,338],{"class":173},[167,110827,110828,110830,110832],{"class":169,"line":3575},[167,110829,282],{"class":173},[167,110831,299],{"class":177},[167,110833,185],{"class":173},[15,110835,110836],{},"The parent knows the list, knows how to update it, and decides what to do when a task changes.",[15,110838,110839],{},"The child component only needs to display one task and notify the parent when the user clicks:",[154,110841,110844],{"className":156,"code":110842,"filename":3591,"highlights":110843,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completed' : 'Pending' }}\u003C\u002Fp>\n\n    \u003Cbutton\n      type=\"button\"\n      :disabled=\"props.task.completed\"\n      @click=\"emit('complete', props.task.id)\"\n    >\n      Mark as complete\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[188,205,160,238,243,261,279,512],[87,110845,110846,110856,110869,110874,110879,110886,110891,110896,110900,110917,110925,110929,110937,110945,110957,110970,110974,110980,110988,110996,111005,111009,111014,111022,111030],{"__ignoreMap":163},[167,110847,110848,110850,110852,110854],{"class":169,"line":170},[167,110849,174],{"class":173},[167,110851,178],{"class":177},[167,110853,182],{"class":181},[167,110855,185],{"class":173},[167,110857,110859,110861,110863,110865,110867],{"class":110858,"line":188},[169,213],[167,110860,216],{"class":191},[167,110862,1065],{"class":219},[167,110864,223],{"class":191},[167,110866,1070],{"class":181},[167,110868,372],{"class":173},[167,110870,110872],{"class":110871,"line":205},[169,213],[167,110873,3623],{"class":173},[167,110875,110877],{"class":110876,"line":160},[169,213],[167,110878,3629],{"class":173},[167,110880,110882,110884],{"class":110881,"line":238},[169,213],[167,110883,387],{"class":173},[167,110885,3637],{"class":219},[167,110887,110889],{"class":110888,"line":243},[169,213],[167,110890,3492],{"class":173},[167,110892,110894],{"class":110893,"line":261},[169,213],[167,110895,403],{"class":173},[167,110897,110898],{"class":169,"line":273},[167,110899,209],{"emptyLinePlaceholder":208},[167,110901,110903,110905,110907,110909,110911,110913,110915],{"class":110902,"line":279},[169,213],[167,110904,216],{"class":191},[167,110906,415],{"class":219},[167,110908,223],{"class":191},[167,110910,420],{"class":181},[167,110912,423],{"class":173},[167,110914,3667],{"class":201},[167,110916,429],{"class":173},[167,110918,110919,110921,110923],{"class":169,"line":289},[167,110920,282],{"class":173},[167,110922,178],{"class":177},[167,110924,185],{"class":173},[167,110926,110927],{"class":169,"line":294},[167,110928,209],{"emptyLinePlaceholder":208},[167,110930,110931,110933,110935],{"class":169,"line":304},[167,110932,174],{"class":173},[167,110934,299],{"class":177},[167,110936,185],{"class":173},[167,110938,110939,110941,110943],{"class":169,"line":313},[167,110940,307],{"class":173},[167,110942,3696],{"class":177},[167,110944,185],{"class":173},[167,110946,110947,110949,110951,110953,110955],{"class":169,"line":161},[167,110948,1257],{"class":173},[167,110950,22],{"class":177},[167,110952,3707],{"class":173},[167,110954,22],{"class":177},[167,110956,185],{"class":173},[167,110958,110959,110961,110963,110966,110968],{"class":169,"line":335},[167,110960,1257],{"class":173},[167,110962,15],{"class":177},[167,110964,110965],{"class":173},">{{ props.task.completed ? 'Completed' : 'Pending' }}\u003C\u002F",[167,110967,15],{"class":177},[167,110969,185],{"class":173},[167,110971,110972],{"class":169,"line":341},[167,110973,209],{"emptyLinePlaceholder":208},[167,110975,110976,110978],{"class":169,"line":489},[167,110977,1257],{"class":173},[167,110979,456],{"class":177},[167,110981,110982,110984,110986],{"class":169,"line":495},[167,110983,3739],{"class":181},[167,110985,267],{"class":173},[167,110987,466],{"class":201},[167,110989,110990,110992,110994],{"class":169,"line":501},[167,110991,3748],{"class":181},[167,110993,267],{"class":173},[167,110995,3753],{"class":201},[167,110997,110999,111001,111003],{"class":110998,"line":512},[169,213],[167,111000,3759],{"class":181},[167,111002,267],{"class":173},[167,111004,3764],{"class":201},[167,111006,111007],{"class":169,"line":781},[167,111008,3769],{"class":173},[167,111010,111011],{"class":169,"line":786},[167,111012,111013],{"class":173},"      Mark as complete\n",[167,111015,111016,111018,111020],{"class":169,"line":2678},[167,111017,1292],{"class":173},[167,111019,507],{"class":177},[167,111021,185],{"class":173},[167,111023,111024,111026,111028],{"class":169,"line":2692},[167,111025,504],{"class":173},[167,111027,3696],{"class":177},[167,111029,185],{"class":173},[167,111031,111032,111034,111036],{"class":169,"line":3575},[167,111033,282],{"class":173},[167,111035,299],{"class":177},[167,111037,185],{"class":173},[15,111039,111040],{},"This pattern keeps a healthy separation: the child does not need to know how the full list is stored. It only says, \"this task should be completed.\"",[22,111042,111044,111046],{"id":111043},"defineprops-what-the-component-needs-to-receive",[87,111045,369],{},": what the component needs to receive",[15,111048,62833,111049,111051,111052,1679],{},[87,111050,1008],{},", props are declared with ",[87,111053,3816],{},[154,111055,111058],{"className":156,"code":111056,"filename":3260,"highlights":111057,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst props = defineProps({\n  name: {\n    type: String,\n    required: true\n  },\n  role: {\n    type: String,\n    default: 'Member'\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cstrong>{{ props.name }}\u003C\u002Fstrong>\n    \u003Cspan>{{ props.role }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[188,205,160,238,243,261,273,279,289,294],[87,111059,111060,111070,111083,111088,111093,111100,111105,111110,111115,111123,111128,111133,111141,111145,111153,111161,111173,111185,111193],{"__ignoreMap":163},[167,111061,111062,111064,111066,111068],{"class":169,"line":170},[167,111063,174],{"class":173},[167,111065,178],{"class":177},[167,111067,182],{"class":181},[167,111069,185],{"class":173},[167,111071,111073,111075,111077,111079,111081],{"class":111072,"line":188},[169,213],[167,111074,216],{"class":191},[167,111076,1065],{"class":219},[167,111078,223],{"class":191},[167,111080,1070],{"class":181},[167,111082,372],{"class":173},[167,111084,111086],{"class":111085,"line":205},[169,213],[167,111087,3851],{"class":173},[167,111089,111091],{"class":111090,"line":160},[169,213],[167,111092,382],{"class":173},[167,111094,111096,111098],{"class":111095,"line":238},[169,213],[167,111097,387],{"class":173},[167,111099,3637],{"class":219},[167,111101,111103],{"class":111102,"line":243},[169,213],[167,111104,398],{"class":173},[167,111106,111108],{"class":111107,"line":261},[169,213],[167,111109,3874],{"class":173},[167,111111,111113],{"class":111112,"line":273},[169,213],[167,111114,382],{"class":173},[167,111116,111118,111120],{"class":111117,"line":279},[169,213],[167,111119,3885],{"class":173},[167,111121,111122],{"class":201},"'Member'\n",[167,111124,111126],{"class":111125,"line":289},[169,213],[167,111127,3492],{"class":173},[167,111129,111131],{"class":111130,"line":294},[169,213],[167,111132,403],{"class":173},[167,111134,111135,111137,111139],{"class":169,"line":304},[167,111136,282],{"class":173},[167,111138,178],{"class":177},[167,111140,185],{"class":173},[167,111142,111143],{"class":169,"line":313},[167,111144,209],{"emptyLinePlaceholder":208},[167,111146,111147,111149,111151],{"class":169,"line":161},[167,111148,174],{"class":173},[167,111150,299],{"class":177},[167,111152,185],{"class":173},[167,111154,111155,111157,111159],{"class":169,"line":335},[167,111156,307],{"class":173},[167,111158,1242],{"class":177},[167,111160,185],{"class":173},[167,111162,111163,111165,111167,111169,111171],{"class":169,"line":341},[167,111164,1257],{"class":173},[167,111166,3933],{"class":177},[167,111168,3936],{"class":173},[167,111170,3933],{"class":177},[167,111172,185],{"class":173},[167,111174,111175,111177,111179,111181,111183],{"class":169,"line":489},[167,111176,1257],{"class":173},[167,111178,167],{"class":177},[167,111180,3949],{"class":173},[167,111182,167],{"class":177},[167,111184,185],{"class":173},[167,111186,111187,111189,111191],{"class":169,"line":495},[167,111188,504],{"class":173},[167,111190,1242],{"class":177},[167,111192,185],{"class":173},[167,111194,111195,111197,111199],{"class":169,"line":501},[167,111196,282],{"class":173},[167,111198,299],{"class":177},[167,111200,185],{"class":173},[154,111202,111205],{"className":156,"code":111203,"filename":3973,"highlights":111204,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  props: {\n    name: {\n      type: String,\n      required: true\n    },\n    role: {\n      type: String,\n      default: 'Member'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cstrong>{{ name }}\u003C\u002Fstrong>\n    \u003Cspan>{{ role }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[205,160,238,243,261,273,279,289,294,304],[87,111206,111207,111215,111223,111228,111233,111238,111245,111250,111255,111260,111267,111272,111277,111281,111289,111293,111301,111309,111321,111333,111341],{"__ignoreMap":163},[167,111208,111209,111211,111213],{"class":169,"line":170},[167,111210,174],{"class":173},[167,111212,178],{"class":177},[167,111214,185],{"class":173},[167,111216,111217,111219,111221],{"class":169,"line":188},[167,111218,608],{"class":191},[167,111220,3991],{"class":191},[167,111222,1905],{"class":173},[167,111224,111226],{"class":111225,"line":205},[169,213],[167,111227,3999],{"class":173},[167,111229,111231],{"class":111230,"line":160},[169,213],[167,111232,4005],{"class":173},[167,111234,111236],{"class":111235,"line":238},[169,213],[167,111237,4011],{"class":173},[167,111239,111241,111243],{"class":111240,"line":243},[169,213],[167,111242,4017],{"class":173},[167,111244,3637],{"class":219},[167,111246,111248],{"class":111247,"line":261},[169,213],[167,111249,755],{"class":173},[167,111251,111253],{"class":111252,"line":273},[169,213],[167,111254,4030],{"class":173},[167,111256,111258],{"class":111257,"line":279},[169,213],[167,111259,4011],{"class":173},[167,111261,111263,111265],{"class":111262,"line":289},[169,213],[167,111264,4041],{"class":173},[167,111266,111122],{"class":201},[167,111268,111270],{"class":111269,"line":294},[169,213],[167,111271,4049],{"class":173},[167,111273,111275],{"class":111274,"line":304},[169,213],[167,111276,3492],{"class":173},[167,111278,111279],{"class":169,"line":313},[167,111280,276],{"class":173},[167,111282,111283,111285,111287],{"class":169,"line":161},[167,111284,282],{"class":173},[167,111286,178],{"class":177},[167,111288,185],{"class":173},[167,111290,111291],{"class":169,"line":335},[167,111292,209],{"emptyLinePlaceholder":208},[167,111294,111295,111297,111299],{"class":169,"line":341},[167,111296,174],{"class":173},[167,111298,299],{"class":177},[167,111300,185],{"class":173},[167,111302,111303,111305,111307],{"class":169,"line":489},[167,111304,307],{"class":173},[167,111306,1242],{"class":177},[167,111308,185],{"class":173},[167,111310,111311,111313,111315,111317,111319],{"class":169,"line":495},[167,111312,1257],{"class":173},[167,111314,3933],{"class":177},[167,111316,4095],{"class":173},[167,111318,3933],{"class":177},[167,111320,185],{"class":173},[167,111322,111323,111325,111327,111329,111331],{"class":169,"line":501},[167,111324,1257],{"class":173},[167,111326,167],{"class":177},[167,111328,4108],{"class":173},[167,111330,167],{"class":177},[167,111332,185],{"class":173},[167,111334,111335,111337,111339],{"class":169,"line":512},[167,111336,504],{"class":173},[167,111338,1242],{"class":177},[167,111340,185],{"class":173},[167,111342,111343,111345,111347],{"class":169,"line":781},[167,111344,282],{"class":173},[167,111346,299],{"class":177},[167,111348,185],{"class":173},[15,111350,111351],{},"A prop should answer a concrete question: what data does this component need in order to render?",[15,111353,111354],{},"If the component needs a name, a URL, an active state, or a small list, that is probably a prop. If it needs to modify shared state, save data, or coordinate several pieces, you may no longer be dealing with a simple prop.",[22,111356,111358,111360],{"id":111357},"defineemits-what-the-component-can-communicate",[87,111359,1031],{},": what the component can communicate",[15,111362,111363],{},"Emits describe events that a child component can fire.",[154,111365,111368],{"className":156,"code":111366,"filename":3260,"highlights":111367,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nconst emit = defineEmits(['search'])\n\nconst handleSubmit = (event) => {\n  const form = event.currentTarget\n  const query = new FormData(form).get('query')\n\n  emit('search', String(query || '').trim())\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"handleSubmit\">\n    \u003Cinput name=\"query\" type=\"search\">\n    \u003Cbutton type=\"submit\">Search\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[188,273],[87,111369,111370,111380,111397,111401,111419,111429,111451,111455,111480,111484,111492,111496,111504,111518,111538,111557,111565],{"__ignoreMap":163},[167,111371,111372,111374,111376,111378],{"class":169,"line":170},[167,111373,174],{"class":173},[167,111375,178],{"class":177},[167,111377,182],{"class":181},[167,111379,185],{"class":173},[167,111381,111383,111385,111387,111389,111391,111393,111395],{"class":111382,"line":188},[169,213],[167,111384,216],{"class":191},[167,111386,415],{"class":219},[167,111388,223],{"class":191},[167,111390,420],{"class":181},[167,111392,423],{"class":173},[167,111394,4175],{"class":201},[167,111396,429],{"class":173},[167,111398,111399],{"class":169,"line":205},[167,111400,209],{"emptyLinePlaceholder":208},[167,111402,111403,111405,111407,111409,111411,111413,111415,111417],{"class":169,"line":160},[167,111404,216],{"class":191},[167,111406,4188],{"class":181},[167,111408,223],{"class":191},[167,111410,2526],{"class":173},[167,111412,4195],{"class":254},[167,111414,693],{"class":173},[167,111416,639],{"class":191},[167,111418,1905],{"class":173},[167,111420,111421,111423,111425,111427],{"class":169,"line":238},[167,111422,1443],{"class":191},[167,111424,4208],{"class":219},[167,111426,223],{"class":191},[167,111428,4213],{"class":173},[167,111430,111431,111433,111435,111437,111439,111441,111443,111445,111447,111449],{"class":169,"line":243},[167,111432,1443],{"class":191},[167,111434,2448],{"class":219},[167,111436,223],{"class":191},[167,111438,4224],{"class":191},[167,111440,4227],{"class":181},[167,111442,4230],{"class":173},[167,111444,4233],{"class":181},[167,111446,229],{"class":173},[167,111448,4238],{"class":201},[167,111450,235],{"class":173},[167,111452,111453],{"class":169,"line":261},[167,111454,209],{"emptyLinePlaceholder":208},[167,111456,111458,111460,111462,111464,111466,111468,111470,111472,111474,111476,111478],{"class":111457,"line":273},[169,213],[167,111459,1133],{"class":181},[167,111461,229],{"class":173},[167,111463,4175],{"class":201},[167,111465,1025],{"class":173},[167,111467,4258],{"class":181},[167,111469,4261],{"class":173},[167,111471,4264],{"class":191},[167,111473,4267],{"class":201},[167,111475,4270],{"class":173},[167,111477,2500],{"class":181},[167,111479,2509],{"class":173},[167,111481,111482],{"class":169,"line":279},[167,111483,276],{"class":173},[167,111485,111486,111488,111490],{"class":169,"line":289},[167,111487,282],{"class":173},[167,111489,178],{"class":177},[167,111491,185],{"class":173},[167,111493,111494],{"class":169,"line":294},[167,111495,209],{"emptyLinePlaceholder":208},[167,111497,111498,111500,111502],{"class":169,"line":304},[167,111499,174],{"class":173},[167,111501,299],{"class":177},[167,111503,185],{"class":173},[167,111505,111506,111508,111510,111512,111514,111516],{"class":169,"line":313},[167,111507,307],{"class":173},[167,111509,4305],{"class":177},[167,111511,4308],{"class":181},[167,111513,267],{"class":173},[167,111515,4313],{"class":201},[167,111517,185],{"class":173},[167,111519,111520,111522,111524,111526,111528,111530,111532,111534,111536],{"class":169,"line":161},[167,111521,1257],{"class":173},[167,111523,2650],{"class":177},[167,111525,1274],{"class":181},[167,111527,267],{"class":173},[167,111529,2658],{"class":201},[167,111531,1174],{"class":181},[167,111533,267],{"class":173},[167,111535,2665],{"class":201},[167,111537,185],{"class":173},[167,111539,111540,111542,111544,111546,111548,111550,111553,111555],{"class":169,"line":335},[167,111541,1257],{"class":173},[167,111543,507],{"class":177},[167,111545,1174],{"class":181},[167,111547,267],{"class":173},[167,111549,4348],{"class":201},[167,111551,111552],{"class":173},">Search\u003C\u002F",[167,111554,507],{"class":177},[167,111556,185],{"class":173},[167,111558,111559,111561,111563],{"class":169,"line":341},[167,111560,504],{"class":173},[167,111562,4305],{"class":177},[167,111564,185],{"class":173},[167,111566,111567,111569,111571],{"class":169,"line":489},[167,111568,282],{"class":173},[167,111570,299],{"class":177},[167,111572,185],{"class":173},[154,111574,111577],{"className":156,"code":111575,"filename":3973,"highlights":111576,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: 'SearchBox',\n  emits: ['search'],\n  methods: {\n    handleSubmit(event) {\n      const form = event.currentTarget\n      const query = new FormData(form).get('query')\n\n      this.$emit('search', String(query || '').trim())\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent=\"handleSubmit\">\n    \u003Cinput name=\"query\" type=\"search\">\n    \u003Cbutton type=\"submit\">Search\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n",[160,289],[87,111578,111579,111587,111595,111603,111612,111616,111626,111636,111658,111662,111691,111695,111699,111703,111711,111715,111723,111737,111757,111775,111783],{"__ignoreMap":163},[167,111580,111581,111583,111585],{"class":169,"line":170},[167,111582,174],{"class":173},[167,111584,178],{"class":177},[167,111586,185],{"class":173},[167,111588,111589,111591,111593],{"class":169,"line":188},[167,111590,608],{"class":191},[167,111592,3991],{"class":191},[167,111594,1905],{"class":173},[167,111596,111597,111599,111601],{"class":169,"line":205},[167,111598,4398],{"class":173},[167,111600,4401],{"class":201},[167,111602,393],{"class":173},[167,111604,111606,111608,111610],{"class":111605,"line":160},[169,213],[167,111607,4409],{"class":173},[167,111609,4175],{"class":201},[167,111611,4414],{"class":173},[167,111613,111614],{"class":169,"line":238},[167,111615,4419],{"class":173},[167,111617,111618,111620,111622,111624],{"class":169,"line":243},[167,111619,4424],{"class":181},[167,111621,229],{"class":173},[167,111623,4195],{"class":254},[167,111625,258],{"class":173},[167,111627,111628,111630,111632,111634],{"class":169,"line":261},[167,111629,4435],{"class":191},[167,111631,4208],{"class":219},[167,111633,223],{"class":191},[167,111635,4213],{"class":173},[167,111637,111638,111640,111642,111644,111646,111648,111650,111652,111654,111656],{"class":169,"line":273},[167,111639,4435],{"class":191},[167,111641,2448],{"class":219},[167,111643,223],{"class":191},[167,111645,4224],{"class":191},[167,111647,4227],{"class":181},[167,111649,4230],{"class":173},[167,111651,4233],{"class":181},[167,111653,229],{"class":173},[167,111655,4238],{"class":201},[167,111657,235],{"class":173},[167,111659,111660],{"class":169,"line":279},[167,111661,209],{"emptyLinePlaceholder":208},[167,111663,111665,111667,111669,111671,111673,111675,111677,111679,111681,111683,111685,111687,111689],{"class":111664,"line":289},[169,213],[167,111666,741],{"class":219},[167,111668,1679],{"class":173},[167,111670,4477],{"class":181},[167,111672,229],{"class":173},[167,111674,4175],{"class":201},[167,111676,1025],{"class":173},[167,111678,4258],{"class":181},[167,111680,4261],{"class":173},[167,111682,4264],{"class":191},[167,111684,4267],{"class":201},[167,111686,4270],{"class":173},[167,111688,2500],{"class":181},[167,111690,2509],{"class":173},[167,111692,111693],{"class":169,"line":294},[167,111694,4049],{"class":173},[167,111696,111697],{"class":169,"line":304},[167,111698,3492],{"class":173},[167,111700,111701],{"class":169,"line":313},[167,111702,276],{"class":173},[167,111704,111705,111707,111709],{"class":169,"line":161},[167,111706,282],{"class":173},[167,111708,178],{"class":177},[167,111710,185],{"class":173},[167,111712,111713],{"class":169,"line":335},[167,111714,209],{"emptyLinePlaceholder":208},[167,111716,111717,111719,111721],{"class":169,"line":341},[167,111718,174],{"class":173},[167,111720,299],{"class":177},[167,111722,185],{"class":173},[167,111724,111725,111727,111729,111731,111733,111735],{"class":169,"line":489},[167,111726,307],{"class":173},[167,111728,4305],{"class":177},[167,111730,4308],{"class":181},[167,111732,267],{"class":173},[167,111734,4313],{"class":201},[167,111736,185],{"class":173},[167,111738,111739,111741,111743,111745,111747,111749,111751,111753,111755],{"class":169,"line":495},[167,111740,1257],{"class":173},[167,111742,2650],{"class":177},[167,111744,1274],{"class":181},[167,111746,267],{"class":173},[167,111748,2658],{"class":201},[167,111750,1174],{"class":181},[167,111752,267],{"class":173},[167,111754,2665],{"class":201},[167,111756,185],{"class":173},[167,111758,111759,111761,111763,111765,111767,111769,111771,111773],{"class":169,"line":501},[167,111760,1257],{"class":173},[167,111762,507],{"class":177},[167,111764,1174],{"class":181},[167,111766,267],{"class":173},[167,111768,4348],{"class":201},[167,111770,111552],{"class":173},[167,111772,507],{"class":177},[167,111774,185],{"class":173},[167,111776,111777,111779,111781],{"class":169,"line":512},[167,111778,504],{"class":173},[167,111780,4305],{"class":177},[167,111782,185],{"class":173},[167,111784,111785,111787,111789],{"class":169,"line":781},[167,111786,282],{"class":173},[167,111788,299],{"class":177},[167,111790,185],{"class":173},[15,111792,111793],{},"The component does not decide what to do with the search. The parent might call an API, update the URL, or filter a local list. The child only communicates the event with the data the parent needs.",[22,111795,111797],{"id":111796},"do-not-mutate-props-directly","Do not mutate props directly",[15,111799,111800],{},"One important rule: a child component should not mutate a prop it receives.",[15,111802,111803],{},"This is tempting:",[154,111805,111807],{"className":156,"code":4613,"filename":3260,"highlights":111806,"language":162,"meta":163,"style":163},[279,289,294],[87,111808,111809,111819,111831,111835,111839,111845,111849,111853,111857,111872,111881,111886],{"__ignoreMap":163},[167,111810,111811,111813,111815,111817],{"class":169,"line":170},[167,111812,174],{"class":173},[167,111814,178],{"class":177},[167,111816,182],{"class":181},[167,111818,185],{"class":173},[167,111820,111821,111823,111825,111827,111829],{"class":169,"line":188},[167,111822,216],{"class":191},[167,111824,1065],{"class":219},[167,111826,223],{"class":191},[167,111828,1070],{"class":181},[167,111830,372],{"class":173},[167,111832,111833],{"class":169,"line":205},[167,111834,3623],{"class":173},[167,111836,111837],{"class":169,"line":160},[167,111838,3629],{"class":173},[167,111840,111841,111843],{"class":169,"line":238},[167,111842,387],{"class":173},[167,111844,3637],{"class":219},[167,111846,111847],{"class":169,"line":243},[167,111848,3492],{"class":173},[167,111850,111851],{"class":169,"line":261},[167,111852,403],{"class":173},[167,111854,111855],{"class":169,"line":273},[167,111856,209],{"emptyLinePlaceholder":208},[167,111858,111860,111862,111864,111866,111868,111870],{"class":111859,"line":279},[169,213],[167,111861,216],{"class":191},[167,111863,4672],{"class":181},[167,111865,223],{"class":191},[167,111867,1469],{"class":173},[167,111869,639],{"class":191},[167,111871,1905],{"class":173},[167,111873,111875,111877,111879],{"class":111874,"line":289},[169,213],[167,111876,4686],{"class":173},[167,111878,267],{"class":191},[167,111880,3487],{"class":219},[167,111882,111884],{"class":111883,"line":294},[169,213],[167,111885,276],{"class":173},[167,111887,111888,111890,111892],{"class":169,"line":304},[167,111889,282],{"class":173},[167,111891,178],{"class":177},[167,111893,185],{"class":173},[15,111895,111896],{},"With objects, it may look like it works, but the design becomes harder to follow. The parent stops being the clear place where state changes, and the child starts having too much control over something it does not own.",[15,111898,111899],{},"A cleaner version is to emit the intention:",[154,111901,111903],{"className":156,"code":4712,"filename":3260,"highlights":111902,"language":162,"meta":163,"style":163},[279,294,304,313],[87,111904,111905,111915,111927,111931,111935,111941,111945,111949,111953,111970,111974,111989,112000,112005],{"__ignoreMap":163},[167,111906,111907,111909,111911,111913],{"class":169,"line":170},[167,111908,174],{"class":173},[167,111910,178],{"class":177},[167,111912,182],{"class":181},[167,111914,185],{"class":173},[167,111916,111917,111919,111921,111923,111925],{"class":169,"line":188},[167,111918,216],{"class":191},[167,111920,1065],{"class":219},[167,111922,223],{"class":191},[167,111924,1070],{"class":181},[167,111926,372],{"class":173},[167,111928,111929],{"class":169,"line":205},[167,111930,3623],{"class":173},[167,111932,111933],{"class":169,"line":160},[167,111934,3629],{"class":173},[167,111936,111937,111939],{"class":169,"line":238},[167,111938,387],{"class":173},[167,111940,3637],{"class":219},[167,111942,111943],{"class":169,"line":243},[167,111944,3492],{"class":173},[167,111946,111947],{"class":169,"line":261},[167,111948,403],{"class":173},[167,111950,111951],{"class":169,"line":273},[167,111952,209],{"emptyLinePlaceholder":208},[167,111954,111956,111958,111960,111962,111964,111966,111968],{"class":111955,"line":279},[169,213],[167,111957,216],{"class":191},[167,111959,415],{"class":219},[167,111961,223],{"class":191},[167,111963,420],{"class":181},[167,111965,423],{"class":173},[167,111967,3667],{"class":201},[167,111969,429],{"class":173},[167,111971,111972],{"class":169,"line":289},[167,111973,209],{"emptyLinePlaceholder":208},[167,111975,111977,111979,111981,111983,111985,111987],{"class":111976,"line":294},[169,213],[167,111978,216],{"class":191},[167,111980,4672],{"class":181},[167,111982,223],{"class":191},[167,111984,1469],{"class":173},[167,111986,639],{"class":191},[167,111988,1905],{"class":173},[167,111990,111992,111994,111996,111998],{"class":111991,"line":304},[169,213],[167,111993,1133],{"class":181},[167,111995,229],{"class":173},[167,111997,3667],{"class":201},[167,111999,4811],{"class":173},[167,112001,112003],{"class":112002,"line":313},[169,213],[167,112004,276],{"class":173},[167,112006,112007,112009,112011],{"class":169,"line":161},[167,112008,282],{"class":173},[167,112010,178],{"class":177},[167,112012,185],{"class":173},[154,112014,112017],{"className":156,"code":112015,"filename":3973,"highlights":112016,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  name: 'TaskCard',\n  props: {\n    task: {\n      type: Object,\n      required: true\n    }\n  },\n  emits: ['complete'],\n  methods: {\n    complete() {\n      this.$emit('complete', this.task.id)\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ task.completed ? 'Completed' : 'Pending' }}\u003C\u002Fp>\n\n    \u003Cbutton type=\"button\" @click=\"complete\">\n      Mark as complete\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[160,238,243,261,273,279,289,313],[87,112018,112019,112027,112035,112043,112048,112053,112058,112065,112070,112075,112084,112088,112094,112113,112117,112121,112125,112133,112137,112145,112153,112165,112178,112182,112202,112206,112214,112222],{"__ignoreMap":163},[167,112020,112021,112023,112025],{"class":169,"line":170},[167,112022,174],{"class":173},[167,112024,178],{"class":177},[167,112026,185],{"class":173},[167,112028,112029,112031,112033],{"class":169,"line":188},[167,112030,608],{"class":191},[167,112032,3991],{"class":191},[167,112034,1905],{"class":173},[167,112036,112037,112039,112041],{"class":169,"line":205},[167,112038,4398],{"class":173},[167,112040,4853],{"class":201},[167,112042,393],{"class":173},[167,112044,112046],{"class":112045,"line":160},[169,213],[167,112047,3999],{"class":173},[167,112049,112051],{"class":112050,"line":238},[169,213],[167,112052,4866],{"class":173},[167,112054,112056],{"class":112055,"line":243},[169,213],[167,112057,4872],{"class":173},[167,112059,112061,112063],{"class":112060,"line":261},[169,213],[167,112062,4017],{"class":173},[167,112064,3637],{"class":219},[167,112066,112068],{"class":112067,"line":273},[169,213],[167,112069,4049],{"class":173},[167,112071,112073],{"class":112072,"line":279},[169,213],[167,112074,398],{"class":173},[167,112076,112078,112080,112082],{"class":112077,"line":289},[169,213],[167,112079,4409],{"class":173},[167,112081,3667],{"class":201},[167,112083,4414],{"class":173},[167,112085,112086],{"class":169,"line":294},[167,112087,4419],{"class":173},[167,112089,112090,112092],{"class":169,"line":304},[167,112091,4907],{"class":181},[167,112093,763],{"class":173},[167,112095,112097,112099,112101,112103,112105,112107,112109,112111],{"class":112096,"line":313},[169,213],[167,112098,741],{"class":219},[167,112100,1679],{"class":173},[167,112102,4477],{"class":181},[167,112104,229],{"class":173},[167,112106,3667],{"class":201},[167,112108,1025],{"class":173},[167,112110,4927],{"class":219},[167,112112,4930],{"class":173},[167,112114,112115],{"class":169,"line":161},[167,112116,4049],{"class":173},[167,112118,112119],{"class":169,"line":335},[167,112120,3492],{"class":173},[167,112122,112123],{"class":169,"line":341},[167,112124,276],{"class":173},[167,112126,112127,112129,112131],{"class":169,"line":489},[167,112128,282],{"class":173},[167,112130,178],{"class":177},[167,112132,185],{"class":173},[167,112134,112135],{"class":169,"line":495},[167,112136,209],{"emptyLinePlaceholder":208},[167,112138,112139,112141,112143],{"class":169,"line":501},[167,112140,174],{"class":173},[167,112142,299],{"class":177},[167,112144,185],{"class":173},[167,112146,112147,112149,112151],{"class":169,"line":512},[167,112148,307],{"class":173},[167,112150,3696],{"class":177},[167,112152,185],{"class":173},[167,112154,112155,112157,112159,112161,112163],{"class":169,"line":781},[167,112156,1257],{"class":173},[167,112158,22],{"class":177},[167,112160,4979],{"class":173},[167,112162,22],{"class":177},[167,112164,185],{"class":173},[167,112166,112167,112169,112171,112174,112176],{"class":169,"line":786},[167,112168,1257],{"class":173},[167,112170,15],{"class":177},[167,112172,112173],{"class":173},">{{ task.completed ? 'Completed' : 'Pending' }}\u003C\u002F",[167,112175,15],{"class":177},[167,112177,185],{"class":173},[167,112179,112180],{"class":169,"line":2678},[167,112181,209],{"emptyLinePlaceholder":208},[167,112183,112184,112186,112188,112190,112192,112194,112196,112198,112200],{"class":169,"line":2692},[167,112185,1257],{"class":173},[167,112187,507],{"class":177},[167,112189,1174],{"class":181},[167,112191,267],{"class":173},[167,112193,1179],{"class":201},[167,112195,1182],{"class":181},[167,112197,267],{"class":173},[167,112199,5019],{"class":201},[167,112201,185],{"class":173},[167,112203,112204],{"class":169,"line":3575},[167,112205,111013],{"class":173},[167,112207,112208,112210,112212],{"class":169,"line":5028},[167,112209,1292],{"class":173},[167,112211,507],{"class":177},[167,112213,185],{"class":173},[167,112215,112216,112218,112220],{"class":169,"line":5037},[167,112217,504],{"class":173},[167,112219,3696],{"class":177},[167,112221,185],{"class":173},[167,112223,112224,112226,112228],{"class":169,"line":5046},[167,112225,282],{"class":173},[167,112227,299],{"class":177},[167,112229,185],{"class":173},[15,112231,112232],{},"The parent receives the event and makes the change:",[154,112234,112236],{"className":156,"code":5058,"filename":3322,"highlights":112235,"language":162,"meta":163,"style":163},[205],[87,112237,112238,112244,112258,112273],{"__ignoreMap":163},[167,112239,112240,112242],{"class":169,"line":170},[167,112241,174],{"class":173},[167,112243,3524],{"class":177},[167,112245,112246,112248,112250,112252,112254,112256],{"class":169,"line":188},[167,112247,5072],{"class":173},[167,112249,5075],{"class":181},[167,112251,267],{"class":173},[167,112253,5080],{"class":201},[167,112255,5075],{"class":173},[167,112257,5085],{"class":201},[167,112259,112261,112263,112265,112267,112269,112271],{"class":112260,"line":205},[169,213],[167,112262,5091],{"class":173},[167,112264,5094],{"class":181},[167,112266,267],{"class":173},[167,112268,5080],{"class":201},[167,112270,5101],{"class":173},[167,112272,5085],{"class":201},[167,112274,112275],{"class":169,"line":160},[167,112276,5108],{"class":173},[22,112278,112280],{"id":112279},"name-events-by-intention","Name events by intention",[15,112282,112283],{},"A good event name says what happened, not how the parent should react.",[15,112285,112286],{},"For example:",[33,112288,112289,112293,112297,112301,112305],{},[36,112290,112291],{},[87,112292,5125],{},[36,112294,112295],{},[87,112296,5130],{},[36,112298,112299],{},[87,112300,5135],{},[36,112302,112303],{},[87,112304,5140],{},[36,112306,112307],{},[87,112308,5145],{},[15,112310,112311,112312,63104,112314,112316],{},"Avoid names that are too coupled to the parent, like ",[87,112313,5151],{},[87,112315,5154],{},". The child should not know that much about what the parent will do next.",[22,112318,112320],{"id":112319},"small-props-clear-events","Small props, clear events",[15,112322,112323],{},"The problem is not usually using props. The problem appears when a component receives too many loose props and emits events that are hard to follow.",[15,112325,112326],{},"If you see something like this:",[154,112328,112329],{"className":156,"code":5168,"language":162,"meta":163,"style":163},[87,112330,112331,112337,112351,112365,112379,112393,112407,112421,112435],{"__ignoreMap":163},[167,112332,112333,112335],{"class":169,"line":170},[167,112334,174],{"class":173},[167,112336,5177],{"class":177},[167,112338,112339,112341,112343,112345,112347,112349],{"class":169,"line":188},[167,112340,5072],{"class":173},[167,112342,580],{"class":181},[167,112344,267],{"class":173},[167,112346,5080],{"class":201},[167,112348,5190],{"class":173},[167,112350,5085],{"class":201},[167,112352,112353,112355,112357,112359,112361,112363],{"class":169,"line":205},[167,112354,5072],{"class":173},[167,112356,592],{"class":181},[167,112358,267],{"class":173},[167,112360,5080],{"class":201},[167,112362,5205],{"class":173},[167,112364,5085],{"class":201},[167,112366,112367,112369,112371,112373,112375,112377],{"class":169,"line":160},[167,112368,5072],{"class":173},[167,112370,5214],{"class":181},[167,112372,267],{"class":173},[167,112374,5080],{"class":201},[167,112376,5221],{"class":173},[167,112378,5085],{"class":201},[167,112380,112381,112383,112385,112387,112389,112391],{"class":169,"line":238},[167,112382,5072],{"class":173},[167,112384,5230],{"class":181},[167,112386,267],{"class":173},[167,112388,5080],{"class":201},[167,112390,5237],{"class":173},[167,112392,5085],{"class":201},[167,112394,112395,112397,112399,112401,112403,112405],{"class":169,"line":243},[167,112396,5072],{"class":173},[167,112398,5246],{"class":181},[167,112400,267],{"class":173},[167,112402,5080],{"class":201},[167,112404,5253],{"class":173},[167,112406,5085],{"class":201},[167,112408,112409,112411,112413,112415,112417,112419],{"class":169,"line":261},[167,112410,5072],{"class":173},[167,112412,5262],{"class":181},[167,112414,267],{"class":173},[167,112416,5080],{"class":201},[167,112418,5269],{"class":173},[167,112420,5085],{"class":201},[167,112422,112423,112425,112427,112429,112431,112433],{"class":169,"line":273},[167,112424,5072],{"class":173},[167,112426,5278],{"class":181},[167,112428,267],{"class":173},[167,112430,5080],{"class":201},[167,112432,5285],{"class":173},[167,112434,5085],{"class":201},[167,112436,112437],{"class":169,"line":279},[167,112438,5108],{"class":173},[15,112440,112441,112442,112444],{},"maybe the component should receive a full ",[87,112443,729],{}," object instead:",[154,112446,112447],{"className":156,"code":5300,"language":162,"meta":163,"style":163},[87,112448,112449],{"__ignoreMap":163},[167,112450,112451,112453,112455,112457,112459,112461,112463,112465,112467],{"class":169,"line":170},[167,112452,174],{"class":173},[167,112454,5309],{"class":177},[167,112456,5312],{"class":173},[167,112458,729],{"class":181},[167,112460,267],{"class":173},[167,112462,5080],{"class":201},[167,112464,729],{"class":173},[167,112466,5080],{"class":201},[167,112468,5325],{"class":173},[15,112470,112471],{},"Not always. If the component only needs two fields, passing specific props can be more explicit. But when all props represent the same entity, grouping them can make the template clearer.",[22,112473,112475],{"id":112474},"when-to-use-props-and-emits","When to use props and emits",[15,112477,112478],{},"Props and emits are a good fit when:",[33,112480,112481,112484,112487,112490],{},[36,112482,112483],{},"There is a direct parent-child relationship.",[36,112485,112486],{},"The state naturally belongs in the parent.",[36,112488,112489],{},"The child only needs to display data and notify interactions.",[36,112491,112492],{},"You want the flow to be easy to read from the template.",[15,112494,112495,112496,112498],{},"If you start passing the same prop through five levels, you probably need another tool. That may be a good moment to look at ",[87,112497,997],{},", a shared composable, or a state solution like Pinia.",[15,112500,112501],{},"But do not jump to those options too early. For many components, props and emits are enough.",[22,112503,112505],{"id":112504},"a-simple-way-to-think-about-it","A simple way to think about it",[15,112507,112508],{},"Before connecting two components, ask:",[5367,112510,112511],{},[15,112512,112513],{},"Does this component need to receive data, or does it need to notify that something happened?",[15,112515,112516],{},"If it needs to receive data, use a prop.",[15,112518,112519],{},"If it needs to notify something, use an emit.",[15,112521,112522],{},"That distinction keeps the code predictable. Data goes down, events go up, and each component keeps a clear responsibility.",[924,112524,926],{},{"title":163,"searchDepth":188,"depth":188,"links":112526},[112527,112528,112530,112532,112533,112534,112535,112536],{"id":110594,"depth":188,"text":110595},{"id":111043,"depth":188,"text":112529},"defineProps: what the component needs to receive",{"id":111357,"depth":188,"text":112531},"defineEmits: what the component can communicate",{"id":111796,"depth":188,"text":111797},{"id":112279,"depth":188,"text":112280},{"id":112319,"depth":188,"text":112320},{"id":112474,"depth":188,"text":112475},{"id":112504,"depth":188,"text":112505},"Learn how to use props and emits in Vue 3 to pass data down to child components and communicate events back to parent components.",{"title":112539,"goal":112540,"tasks":112541,"starterCode":112546,"solutionHint":112547},"Create a task card with props and emits","Build a small component that receives a task through props and tells the parent when the user wants to mark it as complete.",[112542,112543,112544,112545],"Create a TaskCard.vue component.","Receive a task prop with title and completed fields.","Show the task state in the template.","Emit a complete event when the user clicks the button.","\u003C!-- TaskCard.vue -->\n\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completed' : 'Pending' }}\u003C\u002Fp>\n\n    \u003Cbutton @click=\"emit('complete', props.task.id)\">\n      Mark as complete\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","The child component does not need to change the list directly. It only communicates the intention; the parent decides how to update the state.",{"updatedAt":945,"coverCaption":112549,"author":946,"keywords":112550},"Component communication in Vue 3 by TODOvue",[3258,951,3300,3307,112551,369,1031],"components","\u002Fblog\u002Fvue-3-props-emits-component-communication.en",[112554],{"headline":110565,"author":112555,"datePublished":5416,"@type":961},{"name":946,"@type":959},{"title":110565,"description":112537},"blog\u002Fvue-3-props-emits-component-communication.en",[112559,112560,112561,112563],{"tag":98745,"color":1639},{"tag":88771,"color":1645},{"tag":112562,"color":3277},"Guides",{"tag":65670,"color":5425},"xd-XnN-bfGNjRmj3S-QUHtt09X5ATaKvCfIzQfx0Pg8",{"id":3280,"title":3281,"body":112566,"cover":5395,"coverAlt":3281,"date":5396,"description":5397,"draft":940,"extension":941,"lab":114463,"locale":943,"meta":114465,"navigation":208,"path":5412,"schemaOrg":114467,"seo":114470,"series":963,"seriesDescription":964,"seriesOrder":188,"seriesTitle":965,"slug":942,"stem":5418,"tags":114471,"__hash__":5426},{"type":8,"value":112567,"toc":114453},[112568,112570,112572,112574,112584,112586,112588,112590,112822,112824,112826,113021,113023,113027,113033,113178,113325,113327,113329,113333,113335,113542,113759,113761,113763,113765,113767,113857,113859,113861,113974,114189,114191,114235,114237,114239,114241,114263,114269,114271,114273,114275,114387,114391,114415,114417,114419,114421,114431,114435,114437,114439,114441,114445,114447,114449,114451],[11,112569,3281],{"id":3286},[15,112571,3289],{},[15,112573,3292],{},[33,112575,112576,112580],{},[36,112577,3297,112578,3301],{},[87,112579,3300],{},[36,112581,3304,112582,3308],{},[87,112583,3307],{},[15,112585,3311],{},[22,112587,3315],{"id":3314},[15,112589,3318],{},[154,112591,112593],{"className":156,"code":3321,"filename":3322,"highlights":112592,"language":162,"meta":163,"style":163},[501,512,781,786,2678],[87,112594,112595,112605,112615,112625,112629,112641,112657,112673,112677,112681,112699,112725,112731,112739,112743,112747,112755,112759,112767,112774,112783,112792,112801,112810,112814],{"__ignoreMap":163},[167,112596,112597,112599,112601,112603],{"class":169,"line":170},[167,112598,174],{"class":173},[167,112600,178],{"class":177},[167,112602,182],{"class":181},[167,112604,185],{"class":173},[167,112606,112607,112609,112611,112613],{"class":169,"line":188},[167,112608,192],{"class":191},[167,112610,195],{"class":173},[167,112612,198],{"class":191},[167,112614,202],{"class":201},[167,112616,112617,112619,112621,112623],{"class":169,"line":205},[167,112618,192],{"class":191},[167,112620,3352],{"class":173},[167,112622,198],{"class":191},[167,112624,3357],{"class":201},[167,112626,112627],{"class":169,"line":160},[167,112628,209],{"emptyLinePlaceholder":208},[167,112630,112631,112633,112635,112637,112639],{"class":169,"line":238},[167,112632,216],{"class":191},[167,112634,3368],{"class":219},[167,112636,223],{"class":191},[167,112638,226],{"class":181},[167,112640,1827],{"class":173},[167,112642,112643,112645,112647,112649,112651,112653,112655],{"class":169,"line":243},[167,112644,1832],{"class":173},[167,112646,1835],{"class":219},[167,112648,3383],{"class":173},[167,112650,3386],{"class":201},[167,112652,3389],{"class":173},[167,112654,3392],{"class":219},[167,112656,1856],{"class":173},[167,112658,112659,112661,112663,112665,112667,112669,112671],{"class":169,"line":261},[167,112660,1832],{"class":173},[167,112662,1853],{"class":219},[167,112664,3383],{"class":173},[167,112666,3405],{"class":201},[167,112668,3389],{"class":173},[167,112670,3392],{"class":219},[167,112672,599],{"class":173},[167,112674,112675],{"class":169,"line":273},[167,112676,429],{"class":173},[167,112678,112679],{"class":169,"line":279},[167,112680,209],{"emptyLinePlaceholder":208},[167,112682,112683,112685,112687,112689,112691,112693,112695,112697],{"class":169,"line":289},[167,112684,216],{"class":191},[167,112686,3426],{"class":181},[167,112688,223],{"class":191},[167,112690,2526],{"class":173},[167,112692,3433],{"class":254},[167,112694,693],{"class":173},[167,112696,639],{"class":191},[167,112698,1905],{"class":173},[167,112700,112701,112703,112705,112707,112709,112711,112713,112715,112717,112719,112721,112723],{"class":169,"line":294},[167,112702,1443],{"class":191},[167,112704,3446],{"class":219},[167,112706,223],{"class":191},[167,112708,3451],{"class":173},[167,112710,3454],{"class":181},[167,112712,1918],{"class":173},[167,112714,1926],{"class":254},[167,112716,693],{"class":173},[167,112718,639],{"class":191},[167,112720,3465],{"class":173},[167,112722,2550],{"class":191},[167,112724,3470],{"class":173},[167,112726,112727,112729],{"class":169,"line":304},[167,112728,2544],{"class":191},[167,112730,3477],{"class":173},[167,112732,112733,112735,112737],{"class":169,"line":313},[167,112734,3482],{"class":173},[167,112736,267],{"class":191},[167,112738,3487],{"class":219},[167,112740,112741],{"class":169,"line":161},[167,112742,3492],{"class":173},[167,112744,112745],{"class":169,"line":335},[167,112746,276],{"class":173},[167,112748,112749,112751,112753],{"class":169,"line":341},[167,112750,282],{"class":173},[167,112752,178],{"class":177},[167,112754,185],{"class":173},[167,112756,112757],{"class":169,"line":489},[167,112758,209],{"emptyLinePlaceholder":208},[167,112760,112761,112763,112765],{"class":169,"line":495},[167,112762,174],{"class":173},[167,112764,299],{"class":177},[167,112766,185],{"class":173},[167,112768,112770,112772],{"class":112769,"line":501},[169,213],[167,112771,307],{"class":173},[167,112773,3524],{"class":177},[167,112775,112777,112779,112781],{"class":112776,"line":512},[169,213],[167,112778,3530],{"class":181},[167,112780,267],{"class":173},[167,112782,3535],{"class":201},[167,112784,112786,112788,112790],{"class":112785,"line":781},[169,213],[167,112787,3541],{"class":181},[167,112789,267],{"class":173},[167,112791,3546],{"class":201},[167,112793,112795,112797,112799],{"class":112794,"line":786},[169,213],[167,112796,3552],{"class":181},[167,112798,267],{"class":173},[167,112800,3557],{"class":201},[167,112802,112804,112806,112808],{"class":112803,"line":2678},[169,213],[167,112805,3563],{"class":181},[167,112807,267],{"class":173},[167,112809,3568],{"class":201},[167,112811,112812],{"class":169,"line":2692},[167,112813,338],{"class":173},[167,112815,112816,112818,112820],{"class":169,"line":3575},[167,112817,282],{"class":173},[167,112819,299],{"class":177},[167,112821,185],{"class":173},[15,112823,3584],{},[15,112825,3587],{},[154,112827,112829],{"className":156,"code":3590,"filename":3591,"highlights":112828,"language":162,"meta":163,"style":163},[188,205,160,238,243,261,279,512],[87,112830,112831,112841,112854,112859,112864,112871,112876,112881,112885,112902,112910,112914,112922,112930,112942,112954,112958,112964,112972,112980,112989,112993,112997,113005,113013],{"__ignoreMap":163},[167,112832,112833,112835,112837,112839],{"class":169,"line":170},[167,112834,174],{"class":173},[167,112836,178],{"class":177},[167,112838,182],{"class":181},[167,112840,185],{"class":173},[167,112842,112844,112846,112848,112850,112852],{"class":112843,"line":188},[169,213],[167,112845,216],{"class":191},[167,112847,1065],{"class":219},[167,112849,223],{"class":191},[167,112851,1070],{"class":181},[167,112853,372],{"class":173},[167,112855,112857],{"class":112856,"line":205},[169,213],[167,112858,3623],{"class":173},[167,112860,112862],{"class":112861,"line":160},[169,213],[167,112863,3629],{"class":173},[167,112865,112867,112869],{"class":112866,"line":238},[169,213],[167,112868,387],{"class":173},[167,112870,3637],{"class":219},[167,112872,112874],{"class":112873,"line":243},[169,213],[167,112875,3492],{"class":173},[167,112877,112879],{"class":112878,"line":261},[169,213],[167,112880,403],{"class":173},[167,112882,112883],{"class":169,"line":273},[167,112884,209],{"emptyLinePlaceholder":208},[167,112886,112888,112890,112892,112894,112896,112898,112900],{"class":112887,"line":279},[169,213],[167,112889,216],{"class":191},[167,112891,415],{"class":219},[167,112893,223],{"class":191},[167,112895,420],{"class":181},[167,112897,423],{"class":173},[167,112899,3667],{"class":201},[167,112901,429],{"class":173},[167,112903,112904,112906,112908],{"class":169,"line":289},[167,112905,282],{"class":173},[167,112907,178],{"class":177},[167,112909,185],{"class":173},[167,112911,112912],{"class":169,"line":294},[167,112913,209],{"emptyLinePlaceholder":208},[167,112915,112916,112918,112920],{"class":169,"line":304},[167,112917,174],{"class":173},[167,112919,299],{"class":177},[167,112921,185],{"class":173},[167,112923,112924,112926,112928],{"class":169,"line":313},[167,112925,307],{"class":173},[167,112927,3696],{"class":177},[167,112929,185],{"class":173},[167,112931,112932,112934,112936,112938,112940],{"class":169,"line":161},[167,112933,1257],{"class":173},[167,112935,22],{"class":177},[167,112937,3707],{"class":173},[167,112939,22],{"class":177},[167,112941,185],{"class":173},[167,112943,112944,112946,112948,112950,112952],{"class":169,"line":335},[167,112945,1257],{"class":173},[167,112947,15],{"class":177},[167,112949,3720],{"class":173},[167,112951,15],{"class":177},[167,112953,185],{"class":173},[167,112955,112956],{"class":169,"line":341},[167,112957,209],{"emptyLinePlaceholder":208},[167,112959,112960,112962],{"class":169,"line":489},[167,112961,1257],{"class":173},[167,112963,456],{"class":177},[167,112965,112966,112968,112970],{"class":169,"line":495},[167,112967,3739],{"class":181},[167,112969,267],{"class":173},[167,112971,466],{"class":201},[167,112973,112974,112976,112978],{"class":169,"line":501},[167,112975,3748],{"class":181},[167,112977,267],{"class":173},[167,112979,3753],{"class":201},[167,112981,112983,112985,112987],{"class":112982,"line":512},[169,213],[167,112984,3759],{"class":181},[167,112986,267],{"class":173},[167,112988,3764],{"class":201},[167,112990,112991],{"class":169,"line":781},[167,112992,3769],{"class":173},[167,112994,112995],{"class":169,"line":786},[167,112996,3774],{"class":173},[167,112998,112999,113001,113003],{"class":169,"line":2678},[167,113000,1292],{"class":173},[167,113002,507],{"class":177},[167,113004,185],{"class":173},[167,113006,113007,113009,113011],{"class":169,"line":2692},[167,113008,504],{"class":173},[167,113010,3696],{"class":177},[167,113012,185],{"class":173},[167,113014,113015,113017,113019],{"class":169,"line":3575},[167,113016,282],{"class":173},[167,113018,299],{"class":177},[167,113020,185],{"class":173},[15,113022,3801],{},[22,113024,113025,3807],{"id":3804},[87,113026,369],{},[15,113028,3810,113029,3813,113031,1679],{},[87,113030,1008],{},[87,113032,3816],{},[154,113034,113036],{"className":156,"code":3819,"filename":3260,"highlights":113035,"language":162,"meta":163,"style":163},[188,205,160,238,243,261,273,279,289,294],[87,113037,113038,113048,113061,113066,113071,113078,113083,113088,113093,113100,113105,113110,113118,113122,113130,113138,113150,113162,113170],{"__ignoreMap":163},[167,113039,113040,113042,113044,113046],{"class":169,"line":170},[167,113041,174],{"class":173},[167,113043,178],{"class":177},[167,113045,182],{"class":181},[167,113047,185],{"class":173},[167,113049,113051,113053,113055,113057,113059],{"class":113050,"line":188},[169,213],[167,113052,216],{"class":191},[167,113054,1065],{"class":219},[167,113056,223],{"class":191},[167,113058,1070],{"class":181},[167,113060,372],{"class":173},[167,113062,113064],{"class":113063,"line":205},[169,213],[167,113065,3851],{"class":173},[167,113067,113069],{"class":113068,"line":160},[169,213],[167,113070,382],{"class":173},[167,113072,113074,113076],{"class":113073,"line":238},[169,213],[167,113075,387],{"class":173},[167,113077,3637],{"class":219},[167,113079,113081],{"class":113080,"line":243},[169,213],[167,113082,398],{"class":173},[167,113084,113086],{"class":113085,"line":261},[169,213],[167,113087,3874],{"class":173},[167,113089,113091],{"class":113090,"line":273},[169,213],[167,113092,382],{"class":173},[167,113094,113096,113098],{"class":113095,"line":279},[169,213],[167,113097,3885],{"class":173},[167,113099,3888],{"class":201},[167,113101,113103],{"class":113102,"line":289},[169,213],[167,113104,3492],{"class":173},[167,113106,113108],{"class":113107,"line":294},[169,213],[167,113109,403],{"class":173},[167,113111,113112,113114,113116],{"class":169,"line":304},[167,113113,282],{"class":173},[167,113115,178],{"class":177},[167,113117,185],{"class":173},[167,113119,113120],{"class":169,"line":313},[167,113121,209],{"emptyLinePlaceholder":208},[167,113123,113124,113126,113128],{"class":169,"line":161},[167,113125,174],{"class":173},[167,113127,299],{"class":177},[167,113129,185],{"class":173},[167,113131,113132,113134,113136],{"class":169,"line":335},[167,113133,307],{"class":173},[167,113135,1242],{"class":177},[167,113137,185],{"class":173},[167,113139,113140,113142,113144,113146,113148],{"class":169,"line":341},[167,113141,1257],{"class":173},[167,113143,3933],{"class":177},[167,113145,3936],{"class":173},[167,113147,3933],{"class":177},[167,113149,185],{"class":173},[167,113151,113152,113154,113156,113158,113160],{"class":169,"line":489},[167,113153,1257],{"class":173},[167,113155,167],{"class":177},[167,113157,3949],{"class":173},[167,113159,167],{"class":177},[167,113161,185],{"class":173},[167,113163,113164,113166,113168],{"class":169,"line":495},[167,113165,504],{"class":173},[167,113167,1242],{"class":177},[167,113169,185],{"class":173},[167,113171,113172,113174,113176],{"class":169,"line":501},[167,113173,282],{"class":173},[167,113175,299],{"class":177},[167,113177,185],{"class":173},[154,113179,113181],{"className":156,"code":3972,"filename":3973,"highlights":113180,"language":162,"meta":163,"style":163},[205,160,238,243,261,273,279,289,294,304],[87,113182,113183,113191,113199,113204,113209,113214,113221,113226,113231,113236,113243,113248,113253,113257,113265,113269,113277,113285,113297,113309,113317],{"__ignoreMap":163},[167,113184,113185,113187,113189],{"class":169,"line":170},[167,113186,174],{"class":173},[167,113188,178],{"class":177},[167,113190,185],{"class":173},[167,113192,113193,113195,113197],{"class":169,"line":188},[167,113194,608],{"class":191},[167,113196,3991],{"class":191},[167,113198,1905],{"class":173},[167,113200,113202],{"class":113201,"line":205},[169,213],[167,113203,3999],{"class":173},[167,113205,113207],{"class":113206,"line":160},[169,213],[167,113208,4005],{"class":173},[167,113210,113212],{"class":113211,"line":238},[169,213],[167,113213,4011],{"class":173},[167,113215,113217,113219],{"class":113216,"line":243},[169,213],[167,113218,4017],{"class":173},[167,113220,3637],{"class":219},[167,113222,113224],{"class":113223,"line":261},[169,213],[167,113225,755],{"class":173},[167,113227,113229],{"class":113228,"line":273},[169,213],[167,113230,4030],{"class":173},[167,113232,113234],{"class":113233,"line":279},[169,213],[167,113235,4011],{"class":173},[167,113237,113239,113241],{"class":113238,"line":289},[169,213],[167,113240,4041],{"class":173},[167,113242,3888],{"class":201},[167,113244,113246],{"class":113245,"line":294},[169,213],[167,113247,4049],{"class":173},[167,113249,113251],{"class":113250,"line":304},[169,213],[167,113252,3492],{"class":173},[167,113254,113255],{"class":169,"line":313},[167,113256,276],{"class":173},[167,113258,113259,113261,113263],{"class":169,"line":161},[167,113260,282],{"class":173},[167,113262,178],{"class":177},[167,113264,185],{"class":173},[167,113266,113267],{"class":169,"line":335},[167,113268,209],{"emptyLinePlaceholder":208},[167,113270,113271,113273,113275],{"class":169,"line":341},[167,113272,174],{"class":173},[167,113274,299],{"class":177},[167,113276,185],{"class":173},[167,113278,113279,113281,113283],{"class":169,"line":489},[167,113280,307],{"class":173},[167,113282,1242],{"class":177},[167,113284,185],{"class":173},[167,113286,113287,113289,113291,113293,113295],{"class":169,"line":495},[167,113288,1257],{"class":173},[167,113290,3933],{"class":177},[167,113292,4095],{"class":173},[167,113294,3933],{"class":177},[167,113296,185],{"class":173},[167,113298,113299,113301,113303,113305,113307],{"class":169,"line":501},[167,113300,1257],{"class":173},[167,113302,167],{"class":177},[167,113304,4108],{"class":173},[167,113306,167],{"class":177},[167,113308,185],{"class":173},[167,113310,113311,113313,113315],{"class":169,"line":512},[167,113312,504],{"class":173},[167,113314,1242],{"class":177},[167,113316,185],{"class":173},[167,113318,113319,113321,113323],{"class":169,"line":781},[167,113320,282],{"class":173},[167,113322,299],{"class":177},[167,113324,185],{"class":173},[15,113326,4131],{},[15,113328,4134],{},[22,113330,113331,4140],{"id":4137},[87,113332,1031],{},[15,113334,4143],{},[154,113336,113338],{"className":156,"code":4146,"filename":3260,"highlights":113337,"language":162,"meta":163,"style":163},[188,273],[87,113339,113340,113350,113367,113371,113389,113399,113421,113425,113450,113454,113462,113466,113474,113488,113508,113526,113534],{"__ignoreMap":163},[167,113341,113342,113344,113346,113348],{"class":169,"line":170},[167,113343,174],{"class":173},[167,113345,178],{"class":177},[167,113347,182],{"class":181},[167,113349,185],{"class":173},[167,113351,113353,113355,113357,113359,113361,113363,113365],{"class":113352,"line":188},[169,213],[167,113354,216],{"class":191},[167,113356,415],{"class":219},[167,113358,223],{"class":191},[167,113360,420],{"class":181},[167,113362,423],{"class":173},[167,113364,4175],{"class":201},[167,113366,429],{"class":173},[167,113368,113369],{"class":169,"line":205},[167,113370,209],{"emptyLinePlaceholder":208},[167,113372,113373,113375,113377,113379,113381,113383,113385,113387],{"class":169,"line":160},[167,113374,216],{"class":191},[167,113376,4188],{"class":181},[167,113378,223],{"class":191},[167,113380,2526],{"class":173},[167,113382,4195],{"class":254},[167,113384,693],{"class":173},[167,113386,639],{"class":191},[167,113388,1905],{"class":173},[167,113390,113391,113393,113395,113397],{"class":169,"line":238},[167,113392,1443],{"class":191},[167,113394,4208],{"class":219},[167,113396,223],{"class":191},[167,113398,4213],{"class":173},[167,113400,113401,113403,113405,113407,113409,113411,113413,113415,113417,113419],{"class":169,"line":243},[167,113402,1443],{"class":191},[167,113404,2448],{"class":219},[167,113406,223],{"class":191},[167,113408,4224],{"class":191},[167,113410,4227],{"class":181},[167,113412,4230],{"class":173},[167,113414,4233],{"class":181},[167,113416,229],{"class":173},[167,113418,4238],{"class":201},[167,113420,235],{"class":173},[167,113422,113423],{"class":169,"line":261},[167,113424,209],{"emptyLinePlaceholder":208},[167,113426,113428,113430,113432,113434,113436,113438,113440,113442,113444,113446,113448],{"class":113427,"line":273},[169,213],[167,113429,1133],{"class":181},[167,113431,229],{"class":173},[167,113433,4175],{"class":201},[167,113435,1025],{"class":173},[167,113437,4258],{"class":181},[167,113439,4261],{"class":173},[167,113441,4264],{"class":191},[167,113443,4267],{"class":201},[167,113445,4270],{"class":173},[167,113447,2500],{"class":181},[167,113449,2509],{"class":173},[167,113451,113452],{"class":169,"line":279},[167,113453,276],{"class":173},[167,113455,113456,113458,113460],{"class":169,"line":289},[167,113457,282],{"class":173},[167,113459,178],{"class":177},[167,113461,185],{"class":173},[167,113463,113464],{"class":169,"line":294},[167,113465,209],{"emptyLinePlaceholder":208},[167,113467,113468,113470,113472],{"class":169,"line":304},[167,113469,174],{"class":173},[167,113471,299],{"class":177},[167,113473,185],{"class":173},[167,113475,113476,113478,113480,113482,113484,113486],{"class":169,"line":313},[167,113477,307],{"class":173},[167,113479,4305],{"class":177},[167,113481,4308],{"class":181},[167,113483,267],{"class":173},[167,113485,4313],{"class":201},[167,113487,185],{"class":173},[167,113489,113490,113492,113494,113496,113498,113500,113502,113504,113506],{"class":169,"line":161},[167,113491,1257],{"class":173},[167,113493,2650],{"class":177},[167,113495,1274],{"class":181},[167,113497,267],{"class":173},[167,113499,2658],{"class":201},[167,113501,1174],{"class":181},[167,113503,267],{"class":173},[167,113505,2665],{"class":201},[167,113507,185],{"class":173},[167,113509,113510,113512,113514,113516,113518,113520,113522,113524],{"class":169,"line":335},[167,113511,1257],{"class":173},[167,113513,507],{"class":177},[167,113515,1174],{"class":181},[167,113517,267],{"class":173},[167,113519,4348],{"class":201},[167,113521,4351],{"class":173},[167,113523,507],{"class":177},[167,113525,185],{"class":173},[167,113527,113528,113530,113532],{"class":169,"line":341},[167,113529,504],{"class":173},[167,113531,4305],{"class":177},[167,113533,185],{"class":173},[167,113535,113536,113538,113540],{"class":169,"line":489},[167,113537,282],{"class":173},[167,113539,299],{"class":177},[167,113541,185],{"class":173},[154,113543,113545],{"className":156,"code":4374,"filename":3973,"highlights":113544,"language":162,"meta":163,"style":163},[160,289],[87,113546,113547,113555,113563,113571,113580,113584,113594,113604,113626,113630,113659,113663,113667,113671,113679,113683,113691,113705,113725,113743,113751],{"__ignoreMap":163},[167,113548,113549,113551,113553],{"class":169,"line":170},[167,113550,174],{"class":173},[167,113552,178],{"class":177},[167,113554,185],{"class":173},[167,113556,113557,113559,113561],{"class":169,"line":188},[167,113558,608],{"class":191},[167,113560,3991],{"class":191},[167,113562,1905],{"class":173},[167,113564,113565,113567,113569],{"class":169,"line":205},[167,113566,4398],{"class":173},[167,113568,4401],{"class":201},[167,113570,393],{"class":173},[167,113572,113574,113576,113578],{"class":113573,"line":160},[169,213],[167,113575,4409],{"class":173},[167,113577,4175],{"class":201},[167,113579,4414],{"class":173},[167,113581,113582],{"class":169,"line":238},[167,113583,4419],{"class":173},[167,113585,113586,113588,113590,113592],{"class":169,"line":243},[167,113587,4424],{"class":181},[167,113589,229],{"class":173},[167,113591,4195],{"class":254},[167,113593,258],{"class":173},[167,113595,113596,113598,113600,113602],{"class":169,"line":261},[167,113597,4435],{"class":191},[167,113599,4208],{"class":219},[167,113601,223],{"class":191},[167,113603,4213],{"class":173},[167,113605,113606,113608,113610,113612,113614,113616,113618,113620,113622,113624],{"class":169,"line":273},[167,113607,4435],{"class":191},[167,113609,2448],{"class":219},[167,113611,223],{"class":191},[167,113613,4224],{"class":191},[167,113615,4227],{"class":181},[167,113617,4230],{"class":173},[167,113619,4233],{"class":181},[167,113621,229],{"class":173},[167,113623,4238],{"class":201},[167,113625,235],{"class":173},[167,113627,113628],{"class":169,"line":279},[167,113629,209],{"emptyLinePlaceholder":208},[167,113631,113633,113635,113637,113639,113641,113643,113645,113647,113649,113651,113653,113655,113657],{"class":113632,"line":289},[169,213],[167,113634,741],{"class":219},[167,113636,1679],{"class":173},[167,113638,4477],{"class":181},[167,113640,229],{"class":173},[167,113642,4175],{"class":201},[167,113644,1025],{"class":173},[167,113646,4258],{"class":181},[167,113648,4261],{"class":173},[167,113650,4264],{"class":191},[167,113652,4267],{"class":201},[167,113654,4270],{"class":173},[167,113656,2500],{"class":181},[167,113658,2509],{"class":173},[167,113660,113661],{"class":169,"line":294},[167,113662,4049],{"class":173},[167,113664,113665],{"class":169,"line":304},[167,113666,3492],{"class":173},[167,113668,113669],{"class":169,"line":313},[167,113670,276],{"class":173},[167,113672,113673,113675,113677],{"class":169,"line":161},[167,113674,282],{"class":173},[167,113676,178],{"class":177},[167,113678,185],{"class":173},[167,113680,113681],{"class":169,"line":335},[167,113682,209],{"emptyLinePlaceholder":208},[167,113684,113685,113687,113689],{"class":169,"line":341},[167,113686,174],{"class":173},[167,113688,299],{"class":177},[167,113690,185],{"class":173},[167,113692,113693,113695,113697,113699,113701,113703],{"class":169,"line":489},[167,113694,307],{"class":173},[167,113696,4305],{"class":177},[167,113698,4308],{"class":181},[167,113700,267],{"class":173},[167,113702,4313],{"class":201},[167,113704,185],{"class":173},[167,113706,113707,113709,113711,113713,113715,113717,113719,113721,113723],{"class":169,"line":495},[167,113708,1257],{"class":173},[167,113710,2650],{"class":177},[167,113712,1274],{"class":181},[167,113714,267],{"class":173},[167,113716,2658],{"class":201},[167,113718,1174],{"class":181},[167,113720,267],{"class":173},[167,113722,2665],{"class":201},[167,113724,185],{"class":173},[167,113726,113727,113729,113731,113733,113735,113737,113739,113741],{"class":169,"line":501},[167,113728,1257],{"class":173},[167,113730,507],{"class":177},[167,113732,1174],{"class":181},[167,113734,267],{"class":173},[167,113736,4348],{"class":201},[167,113738,4351],{"class":173},[167,113740,507],{"class":177},[167,113742,185],{"class":173},[167,113744,113745,113747,113749],{"class":169,"line":512},[167,113746,504],{"class":173},[167,113748,4305],{"class":177},[167,113750,185],{"class":173},[167,113752,113753,113755,113757],{"class":169,"line":781},[167,113754,282],{"class":173},[167,113756,299],{"class":177},[167,113758,185],{"class":173},[15,113760,4600],{},[22,113762,4604],{"id":4603},[15,113764,4607],{},[15,113766,4610],{},[154,113768,113770],{"className":156,"code":4613,"filename":3260,"highlights":113769,"language":162,"meta":163,"style":163},[279,289,294],[87,113771,113772,113782,113794,113798,113802,113808,113812,113816,113820,113835,113844,113849],{"__ignoreMap":163},[167,113773,113774,113776,113778,113780],{"class":169,"line":170},[167,113775,174],{"class":173},[167,113777,178],{"class":177},[167,113779,182],{"class":181},[167,113781,185],{"class":173},[167,113783,113784,113786,113788,113790,113792],{"class":169,"line":188},[167,113785,216],{"class":191},[167,113787,1065],{"class":219},[167,113789,223],{"class":191},[167,113791,1070],{"class":181},[167,113793,372],{"class":173},[167,113795,113796],{"class":169,"line":205},[167,113797,3623],{"class":173},[167,113799,113800],{"class":169,"line":160},[167,113801,3629],{"class":173},[167,113803,113804,113806],{"class":169,"line":238},[167,113805,387],{"class":173},[167,113807,3637],{"class":219},[167,113809,113810],{"class":169,"line":243},[167,113811,3492],{"class":173},[167,113813,113814],{"class":169,"line":261},[167,113815,403],{"class":173},[167,113817,113818],{"class":169,"line":273},[167,113819,209],{"emptyLinePlaceholder":208},[167,113821,113823,113825,113827,113829,113831,113833],{"class":113822,"line":279},[169,213],[167,113824,216],{"class":191},[167,113826,4672],{"class":181},[167,113828,223],{"class":191},[167,113830,1469],{"class":173},[167,113832,639],{"class":191},[167,113834,1905],{"class":173},[167,113836,113838,113840,113842],{"class":113837,"line":289},[169,213],[167,113839,4686],{"class":173},[167,113841,267],{"class":191},[167,113843,3487],{"class":219},[167,113845,113847],{"class":113846,"line":294},[169,213],[167,113848,276],{"class":173},[167,113850,113851,113853,113855],{"class":169,"line":304},[167,113852,282],{"class":173},[167,113854,178],{"class":177},[167,113856,185],{"class":173},[15,113858,4706],{},[15,113860,4709],{},[154,113862,113864],{"className":156,"code":4712,"filename":3260,"highlights":113863,"language":162,"meta":163,"style":163},[279,294,304,313],[87,113865,113866,113876,113888,113892,113896,113902,113906,113910,113914,113931,113935,113950,113961,113966],{"__ignoreMap":163},[167,113867,113868,113870,113872,113874],{"class":169,"line":170},[167,113869,174],{"class":173},[167,113871,178],{"class":177},[167,113873,182],{"class":181},[167,113875,185],{"class":173},[167,113877,113878,113880,113882,113884,113886],{"class":169,"line":188},[167,113879,216],{"class":191},[167,113881,1065],{"class":219},[167,113883,223],{"class":191},[167,113885,1070],{"class":181},[167,113887,372],{"class":173},[167,113889,113890],{"class":169,"line":205},[167,113891,3623],{"class":173},[167,113893,113894],{"class":169,"line":160},[167,113895,3629],{"class":173},[167,113897,113898,113900],{"class":169,"line":238},[167,113899,387],{"class":173},[167,113901,3637],{"class":219},[167,113903,113904],{"class":169,"line":243},[167,113905,3492],{"class":173},[167,113907,113908],{"class":169,"line":261},[167,113909,403],{"class":173},[167,113911,113912],{"class":169,"line":273},[167,113913,209],{"emptyLinePlaceholder":208},[167,113915,113917,113919,113921,113923,113925,113927,113929],{"class":113916,"line":279},[169,213],[167,113918,216],{"class":191},[167,113920,415],{"class":219},[167,113922,223],{"class":191},[167,113924,420],{"class":181},[167,113926,423],{"class":173},[167,113928,3667],{"class":201},[167,113930,429],{"class":173},[167,113932,113933],{"class":169,"line":289},[167,113934,209],{"emptyLinePlaceholder":208},[167,113936,113938,113940,113942,113944,113946,113948],{"class":113937,"line":294},[169,213],[167,113939,216],{"class":191},[167,113941,4672],{"class":181},[167,113943,223],{"class":191},[167,113945,1469],{"class":173},[167,113947,639],{"class":191},[167,113949,1905],{"class":173},[167,113951,113953,113955,113957,113959],{"class":113952,"line":304},[169,213],[167,113954,1133],{"class":181},[167,113956,229],{"class":173},[167,113958,3667],{"class":201},[167,113960,4811],{"class":173},[167,113962,113964],{"class":113963,"line":313},[169,213],[167,113965,276],{"class":173},[167,113967,113968,113970,113972],{"class":169,"line":161},[167,113969,282],{"class":173},[167,113971,178],{"class":177},[167,113973,185],{"class":173},[154,113975,113977],{"className":156,"code":4827,"filename":3973,"highlights":113976,"language":162,"meta":163,"style":163},[160,238,243,261,273,279,289,313],[87,113978,113979,113987,113995,114003,114008,114013,114018,114025,114030,114035,114044,114048,114054,114073,114077,114081,114085,114093,114097,114105,114113,114125,114137,114141,114161,114165,114173,114181],{"__ignoreMap":163},[167,113980,113981,113983,113985],{"class":169,"line":170},[167,113982,174],{"class":173},[167,113984,178],{"class":177},[167,113986,185],{"class":173},[167,113988,113989,113991,113993],{"class":169,"line":188},[167,113990,608],{"class":191},[167,113992,3991],{"class":191},[167,113994,1905],{"class":173},[167,113996,113997,113999,114001],{"class":169,"line":205},[167,113998,4398],{"class":173},[167,114000,4853],{"class":201},[167,114002,393],{"class":173},[167,114004,114006],{"class":114005,"line":160},[169,213],[167,114007,3999],{"class":173},[167,114009,114011],{"class":114010,"line":238},[169,213],[167,114012,4866],{"class":173},[167,114014,114016],{"class":114015,"line":243},[169,213],[167,114017,4872],{"class":173},[167,114019,114021,114023],{"class":114020,"line":261},[169,213],[167,114022,4017],{"class":173},[167,114024,3637],{"class":219},[167,114026,114028],{"class":114027,"line":273},[169,213],[167,114029,4049],{"class":173},[167,114031,114033],{"class":114032,"line":279},[169,213],[167,114034,398],{"class":173},[167,114036,114038,114040,114042],{"class":114037,"line":289},[169,213],[167,114039,4409],{"class":173},[167,114041,3667],{"class":201},[167,114043,4414],{"class":173},[167,114045,114046],{"class":169,"line":294},[167,114047,4419],{"class":173},[167,114049,114050,114052],{"class":169,"line":304},[167,114051,4907],{"class":181},[167,114053,763],{"class":173},[167,114055,114057,114059,114061,114063,114065,114067,114069,114071],{"class":114056,"line":313},[169,213],[167,114058,741],{"class":219},[167,114060,1679],{"class":173},[167,114062,4477],{"class":181},[167,114064,229],{"class":173},[167,114066,3667],{"class":201},[167,114068,1025],{"class":173},[167,114070,4927],{"class":219},[167,114072,4930],{"class":173},[167,114074,114075],{"class":169,"line":161},[167,114076,4049],{"class":173},[167,114078,114079],{"class":169,"line":335},[167,114080,3492],{"class":173},[167,114082,114083],{"class":169,"line":341},[167,114084,276],{"class":173},[167,114086,114087,114089,114091],{"class":169,"line":489},[167,114088,282],{"class":173},[167,114090,178],{"class":177},[167,114092,185],{"class":173},[167,114094,114095],{"class":169,"line":495},[167,114096,209],{"emptyLinePlaceholder":208},[167,114098,114099,114101,114103],{"class":169,"line":501},[167,114100,174],{"class":173},[167,114102,299],{"class":177},[167,114104,185],{"class":173},[167,114106,114107,114109,114111],{"class":169,"line":512},[167,114108,307],{"class":173},[167,114110,3696],{"class":177},[167,114112,185],{"class":173},[167,114114,114115,114117,114119,114121,114123],{"class":169,"line":781},[167,114116,1257],{"class":173},[167,114118,22],{"class":177},[167,114120,4979],{"class":173},[167,114122,22],{"class":177},[167,114124,185],{"class":173},[167,114126,114127,114129,114131,114133,114135],{"class":169,"line":786},[167,114128,1257],{"class":173},[167,114130,15],{"class":177},[167,114132,4992],{"class":173},[167,114134,15],{"class":177},[167,114136,185],{"class":173},[167,114138,114139],{"class":169,"line":2678},[167,114140,209],{"emptyLinePlaceholder":208},[167,114142,114143,114145,114147,114149,114151,114153,114155,114157,114159],{"class":169,"line":2692},[167,114144,1257],{"class":173},[167,114146,507],{"class":177},[167,114148,1174],{"class":181},[167,114150,267],{"class":173},[167,114152,1179],{"class":201},[167,114154,1182],{"class":181},[167,114156,267],{"class":173},[167,114158,5019],{"class":201},[167,114160,185],{"class":173},[167,114162,114163],{"class":169,"line":3575},[167,114164,3774],{"class":173},[167,114166,114167,114169,114171],{"class":169,"line":5028},[167,114168,1292],{"class":173},[167,114170,507],{"class":177},[167,114172,185],{"class":173},[167,114174,114175,114177,114179],{"class":169,"line":5037},[167,114176,504],{"class":173},[167,114178,3696],{"class":177},[167,114180,185],{"class":173},[167,114182,114183,114185,114187],{"class":169,"line":5046},[167,114184,282],{"class":173},[167,114186,299],{"class":177},[167,114188,185],{"class":173},[15,114190,5055],{},[154,114192,114194],{"className":156,"code":5058,"filename":3322,"highlights":114193,"language":162,"meta":163,"style":163},[205],[87,114195,114196,114202,114216,114231],{"__ignoreMap":163},[167,114197,114198,114200],{"class":169,"line":170},[167,114199,174],{"class":173},[167,114201,3524],{"class":177},[167,114203,114204,114206,114208,114210,114212,114214],{"class":169,"line":188},[167,114205,5072],{"class":173},[167,114207,5075],{"class":181},[167,114209,267],{"class":173},[167,114211,5080],{"class":201},[167,114213,5075],{"class":173},[167,114215,5085],{"class":201},[167,114217,114219,114221,114223,114225,114227,114229],{"class":114218,"line":205},[169,213],[167,114220,5091],{"class":173},[167,114222,5094],{"class":181},[167,114224,267],{"class":173},[167,114226,5080],{"class":201},[167,114228,5101],{"class":173},[167,114230,5085],{"class":201},[167,114232,114233],{"class":169,"line":160},[167,114234,5108],{"class":173},[22,114236,5112],{"id":5111},[15,114238,5115],{},[15,114240,5118],{},[33,114242,114243,114247,114251,114255,114259],{},[36,114244,114245],{},[87,114246,5125],{},[36,114248,114249],{},[87,114250,5130],{},[36,114252,114253],{},[87,114254,5135],{},[36,114256,114257],{},[87,114258,5140],{},[36,114260,114261],{},[87,114262,5145],{},[15,114264,5148,114265,90,114267,5155],{},[87,114266,5151],{},[87,114268,5154],{},[22,114270,5159],{"id":5158},[15,114272,5162],{},[15,114274,5165],{},[154,114276,114277],{"className":156,"code":5168,"language":162,"meta":163,"style":163},[87,114278,114279,114285,114299,114313,114327,114341,114355,114369,114383],{"__ignoreMap":163},[167,114280,114281,114283],{"class":169,"line":170},[167,114282,174],{"class":173},[167,114284,5177],{"class":177},[167,114286,114287,114289,114291,114293,114295,114297],{"class":169,"line":188},[167,114288,5072],{"class":173},[167,114290,580],{"class":181},[167,114292,267],{"class":173},[167,114294,5080],{"class":201},[167,114296,5190],{"class":173},[167,114298,5085],{"class":201},[167,114300,114301,114303,114305,114307,114309,114311],{"class":169,"line":205},[167,114302,5072],{"class":173},[167,114304,592],{"class":181},[167,114306,267],{"class":173},[167,114308,5080],{"class":201},[167,114310,5205],{"class":173},[167,114312,5085],{"class":201},[167,114314,114315,114317,114319,114321,114323,114325],{"class":169,"line":160},[167,114316,5072],{"class":173},[167,114318,5214],{"class":181},[167,114320,267],{"class":173},[167,114322,5080],{"class":201},[167,114324,5221],{"class":173},[167,114326,5085],{"class":201},[167,114328,114329,114331,114333,114335,114337,114339],{"class":169,"line":238},[167,114330,5072],{"class":173},[167,114332,5230],{"class":181},[167,114334,267],{"class":173},[167,114336,5080],{"class":201},[167,114338,5237],{"class":173},[167,114340,5085],{"class":201},[167,114342,114343,114345,114347,114349,114351,114353],{"class":169,"line":243},[167,114344,5072],{"class":173},[167,114346,5246],{"class":181},[167,114348,267],{"class":173},[167,114350,5080],{"class":201},[167,114352,5253],{"class":173},[167,114354,5085],{"class":201},[167,114356,114357,114359,114361,114363,114365,114367],{"class":169,"line":261},[167,114358,5072],{"class":173},[167,114360,5262],{"class":181},[167,114362,267],{"class":173},[167,114364,5080],{"class":201},[167,114366,5269],{"class":173},[167,114368,5085],{"class":201},[167,114370,114371,114373,114375,114377,114379,114381],{"class":169,"line":273},[167,114372,5072],{"class":173},[167,114374,5278],{"class":181},[167,114376,267],{"class":173},[167,114378,5080],{"class":201},[167,114380,5285],{"class":173},[167,114382,5085],{"class":201},[167,114384,114385],{"class":169,"line":279},[167,114386,5108],{"class":173},[15,114388,5294,114389,5297],{},[87,114390,729],{},[154,114392,114393],{"className":156,"code":5300,"language":162,"meta":163,"style":163},[87,114394,114395],{"__ignoreMap":163},[167,114396,114397,114399,114401,114403,114405,114407,114409,114411,114413],{"class":169,"line":170},[167,114398,174],{"class":173},[167,114400,5309],{"class":177},[167,114402,5312],{"class":173},[167,114404,729],{"class":181},[167,114406,267],{"class":173},[167,114408,5080],{"class":201},[167,114410,729],{"class":173},[167,114412,5080],{"class":201},[167,114414,5325],{"class":173},[15,114416,5328],{},[22,114418,5332],{"id":5331},[15,114420,5335],{},[33,114422,114423,114425,114427,114429],{},[36,114424,5340],{},[36,114426,5343],{},[36,114428,5346],{},[36,114430,5349],{},[15,114432,5352,114433,5355],{},[87,114434,997],{},[15,114436,5358],{},[22,114438,5362],{"id":5361},[15,114440,5365],{},[5367,114442,114443],{},[15,114444,5371],{},[15,114446,5374],{},[15,114448,5377],{},[15,114450,5380],{},[924,114452,926],{},{"title":163,"searchDepth":188,"depth":188,"links":114454},[114455,114456,114457,114458,114459,114460,114461,114462],{"id":3314,"depth":188,"text":3315},{"id":3804,"depth":188,"text":5387},{"id":4137,"depth":188,"text":5389},{"id":4603,"depth":188,"text":4604},{"id":5111,"depth":188,"text":5112},{"id":5158,"depth":188,"text":5159},{"id":5331,"depth":188,"text":5332},{"id":5361,"depth":188,"text":5362},{"title":5399,"goal":5400,"tasks":114464,"starterCode":5406,"solutionHint":5407},[5402,5403,5404,5405],{"updatedAt":945,"coverCaption":5409,"author":946,"keywords":114466},[3258,951,3300,3307,5411,369,1031],[114468],{"headline":3281,"author":114469,"datePublished":5416,"@type":961},{"name":946,"@type":959},{"title":3281,"description":5397},[114472,114473,114474,114475],{"tag":1625,"color":1639},{"tag":1644,"color":1645},{"tag":3276,"color":3277},{"tag":5424,"color":5425},{"id":114477,"title":114478,"body":114479,"cover":23651,"coverAlt":116312,"date":23652,"description":116313,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":116314,"navigation":208,"path":116318,"schemaOrg":116319,"seo":116322,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":116323,"tags":116324,"__hash__":116329},"blog\u002Fblog\u002Fvue-3-reactivity-internals.en.md","How Vue 3 Reactivity Works Internally",{"type":8,"value":114480,"toc":116284},[114481,114484,114496,114500,114506,114517,114520,114527,114531,114535,114543,114551,114557,114561,114564,114585,114613,114616,114629,114635,114640,114643,114682,114687,114691,114699,114713,115506,115588,115592,115637,115640,115644,115652,115669,115693,115699,115704,115707,115827,115830,115844,115852,115857,115879,115882,115895,115899,115902,115913,115916,116054,116057,116059,116063,116101,116103,116115,116119,116127,116133,116141,116192,116195,116206,116210,116213,116236,116238,116241,116252,116255,116277,116282],[11,114482,114478],{"id":114483},"how-vue-3-reactivity-works-internally",[15,114485,114486,114487,1025,114489,1025,114491,1025,114493,114495],{},"Vue 3 introduced a fully redesigned reactivity system compared to Vue 2, based on Proxy and a dynamic dependency graph. While the public API (",[87,114488,2085],{},[87,114490,18243],{},[87,114492,1661],{},[87,114494,1665],{},") looks simple, the internal behavior follows a model carefully optimized for granularity, performance, and predictability. Understanding this model is not optional in large applications: it is the difference between debugging symptoms and solving root causes.",[22,114497,114499],{"id":114498},"introduction-based-on-a-real-problem","Introduction Based on a Real Problem",[15,114501,114502,114503,114505],{},"In teams already using Vue 3 in production, the most expensive questions are usually not \"how to use ",[87,114504,2085],{},"\", but these:",[33,114507,114508,114511,114514],{},[36,114509,114510],{},"How does Vue know exactly what to update and what not to touch?",[36,114512,114513],{},"Why does a valid state change sometimes fail to re-render?",[36,114515,114516],{},"Why does a screen sometimes re-render too much and become slow?",[15,114518,114519],{},"The answer is not in a single API call. It is in the internal engine: how Vue records dependencies while reading state and how it decides which effects to run when state is written.",[15,114521,114522,114523,57920,114525,1679],{},"When this mental model is unclear, debugging is guesswork. When it is clear, you can reason precisely about root cause, render cost, and the behavior of ",[87,114524,1661],{},[87,114526,1668],{},[22,114528,114530],{"id":114529},"simplified-mental-model","Simplified Mental Model",[3087,114532,114534],{"id":114533},"dependency-tracking-in-one-sentence","Dependency tracking in one sentence",[15,114536,114537,114538,1025,114540,114542],{},"Every time an active effect (render, ",[87,114539,1661],{},[87,114541,1668],{},") reads a reactive property, Vue records a relationship:",[154,114544,114545],{"className":21684,"code":21685,"filename":21686,"language":21687,"meta":163,"style":163},[87,114546,114547],{"__ignoreMap":163},[167,114548,114549],{"class":169,"line":170},[167,114550,21685],{},[15,114552,114553,114554,114556],{},"Then, if ",[87,114555,21699],{}," changes, Vue only notifies effects subscribed to that key.",[3087,114558,114560],{"id":114559},"internal-structure-weakmap-map-set","Internal structure: WeakMap -> Map -> Set",[15,114562,114563],{},"A simplified model of dependency storage:",[33,114565,114566,114573,114580],{},[36,114567,114568,114570,114571,4270],{},[87,114569,21714],{},": index by reactive object (",[87,114572,7839],{},[36,114574,114575,114577,114578,4270],{},[87,114576,21722],{},": index by property inside that object (",[87,114579,7845],{},[36,114581,114582,114584],{},[87,114583,21730],{},": effects that depend on that property.",[154,114586,114587],{"className":21684,"code":21734,"filename":21735,"language":21687,"meta":163,"style":163},[87,114588,114589,114593,114597,114601,114605,114609],{"__ignoreMap":163},[167,114590,114591],{"class":169,"line":170},[167,114592,21742],{},[167,114594,114595],{"class":169,"line":188},[167,114596,21747],{},[167,114598,114599],{"class":169,"line":205},[167,114600,21752],{},[167,114602,114603],{"class":169,"line":160},[167,114604,21757],{},[167,114606,114607],{"class":169,"line":238},[167,114608,21762],{},[167,114610,114611],{"class":169,"line":243},[167,114612,21767],{},[15,114614,114615],{},"This structure enables:",[33,114617,114618,114623,114626],{},[36,114619,114620,114621,4270],{},"Avoiding memory leaks (thanks to ",[87,114622,21714],{},[36,114624,114625],{},"Property-level granularity.",[36,114627,114628],{},"Running only the effects that are actually needed.",[3087,114630,114632,114634],{"id":114631},"activeeffect-the-critical-piece",[87,114633,21789],{},": the critical piece",[15,114636,114637,114638,1679],{},"Vue keeps a temporary global reference to the effect currently executing: ",[87,114639,21789],{},[15,114641,114642],{},"Flow:",[3035,114644,114645,114652,114660,114673],{},[36,114646,114647,114649,114650,1679],{},[87,114648,21806],{}," starts -> ",[87,114651,21810],{},[36,114653,114654,114655,114657,114658,1679],{},"Inside ",[87,114656,21815],{},", a reactive read runs ",[87,114659,21819],{},[36,114661,114662,114664,114665,114667,114668,114670,114671,1679],{},[87,114663,21824],{}," associates ",[87,114666,21789],{}," with the ",[87,114669,21730],{}," for ",[87,114672,21699],{},[36,114674,114675,114676,114678,114679,114681],{},"When ",[87,114677,21815],{}," ends, ",[87,114680,21789],{}," is restored to the previous one (nested effect stack).",[15,114683,62813,114684,114686],{},[87,114685,21789],{},", there is no tracking.",[22,114688,114690],{"id":114689},"mini-implementation-from-scratch-in-plain-javascript","Mini Implementation from Scratch in Plain JavaScript",[15,114692,114693,114694,21857,114696,114698],{},"The real implementation is more complex (operation types, collection handlers for ",[87,114695,21722],{},[87,114697,21730],{},", internal flags, etc.), but this model reproduces the essential pieces:",[33,114700,114701,114705,114709],{},[36,114702,114703],{},[87,114704,21819],{},[36,114706,114707],{},[87,114708,21871],{},[36,114710,114711],{},[87,114712,21806],{},[154,114714,114716],{"className":2879,"code":114715,"filename":21879,"language":2882,"meta":163,"style":163},"\u002F\u002F Global dependency graph.\nconst bucket = new WeakMap()\n\n\u002F\u002F Active effect and stack for nested effects.\nlet activeEffect = null\nconst effectStack = []\n\nfunction cleanup(effectFn) {\n  for (const deps of effectFn.deps) {\n    deps.delete(effectFn)\n  }\n  effectFn.deps.length = 0\n}\n\nfunction effect(fn, options = {}) {\n  const effectFn = () => {\n    cleanup(effectFn)\n    activeEffect = effectFn\n    effectStack.push(effectFn)\n    const result = fn()\n    effectStack.pop()\n    activeEffect = effectStack[effectStack.length - 1] ?? null\n    return result\n  }\n\n  effectFn.deps = []\n  effectFn.options = options\n\n  if (!options.lazy) {\n    effectFn()\n  }\n\n  return effectFn\n}\n\nfunction track(target, key) {\n  if (!activeEffect) return\n\n  let depsMap = bucket.get(target)\n  if (!depsMap) {\n    depsMap = new Map()\n    bucket.set(target, depsMap)\n  }\n\n  let deps = depsMap.get(key)\n  if (!deps) {\n    deps = new Set()\n    depsMap.set(key, deps)\n  }\n\n  if (!deps.has(activeEffect)) {\n    deps.add(activeEffect)\n    activeEffect.deps.push(deps)\n  }\n}\n\nfunction trigger(target, key) {\n  const depsMap = bucket.get(target)\n  if (!depsMap) return\n\n  const deps = depsMap.get(key)\n  if (!deps) return\n\n  const effectsToRun = new Set()\n  deps.forEach((effectFn) => {\n    if (effectFn !== activeEffect) effectsToRun.add(effectFn)\n  })\n\n  effectsToRun.forEach((effectFn) => {\n    if (effectFn.options.scheduler) {\n      effectFn.options.scheduler(effectFn)\n    } else {\n      effectFn()\n    }\n  })\n}\n\nfunction reactive(obj) {\n  return new Proxy(obj, {\n    get(target, key, receiver) {\n      track(target, key)\n      return Reflect.get(target, key, receiver)\n    },\n    set(target, key, value, receiver) {\n      const oldValue = target[key]\n      const result = Reflect.set(target, key, value, receiver)\n      if (!Object.is(oldValue, value)) {\n        trigger(target, key)\n      }\n      return result\n    }\n  })\n}\n",[87,114717,114718,114723,114737,114741,114746,114756,114766,114770,114782,114796,114804,114808,114818,114822,114826,114844,114858,114864,114872,114880,114892,114900,114920,114926,114930,114934,114942,114950,114954,114964,114970,114974,114978,114984,114988,114992,115008,115020,115024,115038,115048,115060,115068,115072,115076,115090,115100,115112,115120,115124,115128,115142,115150,115158,115162,115166,115170,115186,115200,115212,115216,115230,115242,115246,115260,115276,115290,115294,115298,115314,115320,115328,115336,115342,115346,115350,115354,115358,115370,115380,115398,115404,115414,115418,115440,115450,115464,115478,115484,115488,115494,115498,115502],{"__ignoreMap":163},[167,114719,114720],{"class":169,"line":170},[167,114721,114722],{"class":18662},"\u002F\u002F Global dependency graph.\n",[167,114724,114725,114727,114729,114731,114733,114735],{"class":169,"line":188},[167,114726,216],{"class":191},[167,114728,21893],{"class":219},[167,114730,223],{"class":191},[167,114732,4224],{"class":191},[167,114734,21900],{"class":181},[167,114736,2917],{"class":173},[167,114738,114739],{"class":169,"line":205},[167,114740,209],{"emptyLinePlaceholder":208},[167,114742,114743],{"class":169,"line":160},[167,114744,114745],{"class":18662},"\u002F\u002F Active effect and stack for nested effects.\n",[167,114747,114748,114750,114752,114754],{"class":169,"line":238},[167,114749,13948],{"class":191},[167,114751,21918],{"class":173},[167,114753,267],{"class":191},[167,114755,12146],{"class":219},[167,114757,114758,114760,114762,114764],{"class":169,"line":243},[167,114759,216],{"class":191},[167,114761,21929],{"class":219},[167,114763,223],{"class":191},[167,114765,21934],{"class":173},[167,114767,114768],{"class":169,"line":261},[167,114769,209],{"emptyLinePlaceholder":208},[167,114771,114772,114774,114776,114778,114780],{"class":169,"line":273},[167,114773,246],{"class":191},[167,114775,21945],{"class":181},[167,114777,229],{"class":173},[167,114779,21950],{"class":254},[167,114781,258],{"class":173},[167,114783,114784,114786,114788,114790,114792,114794],{"class":169,"line":279},[167,114785,21957],{"class":191},[167,114787,2526],{"class":173},[167,114789,216],{"class":191},[167,114791,21964],{"class":219},[167,114793,21967],{"class":191},[167,114795,21970],{"class":173},[167,114797,114798,114800,114802],{"class":169,"line":289},[167,114799,21975],{"class":173},[167,114801,7862],{"class":181},[167,114803,21980],{"class":173},[167,114805,114806],{"class":169,"line":294},[167,114807,3492],{"class":173},[167,114809,114810,114812,114814,114816],{"class":169,"line":304},[167,114811,21989],{"class":173},[167,114813,15756],{"class":219},[167,114815,223],{"class":191},[167,114817,15802],{"class":219},[167,114819,114820],{"class":169,"line":313},[167,114821,276],{"class":173},[167,114823,114824],{"class":169,"line":161},[167,114825,209],{"emptyLinePlaceholder":208},[167,114827,114828,114830,114832,114834,114836,114838,114840,114842],{"class":169,"line":335},[167,114829,246],{"class":191},[167,114831,22010],{"class":181},[167,114833,229],{"class":173},[167,114835,21815],{"class":254},[167,114837,1025],{"class":173},[167,114839,22019],{"class":254},[167,114841,223],{"class":191},[167,114843,22024],{"class":173},[167,114845,114846,114848,114850,114852,114854,114856],{"class":169,"line":341},[167,114847,1443],{"class":191},[167,114849,22031],{"class":181},[167,114851,223],{"class":191},[167,114853,1469],{"class":173},[167,114855,639],{"class":191},[167,114857,1905],{"class":173},[167,114859,114860,114862],{"class":169,"line":489},[167,114861,22044],{"class":181},[167,114863,21980],{"class":173},[167,114865,114866,114868,114870],{"class":169,"line":495},[167,114867,22051],{"class":173},[167,114869,267],{"class":191},[167,114871,22056],{"class":173},[167,114873,114874,114876,114878],{"class":169,"line":501},[167,114875,22061],{"class":173},[167,114877,15723],{"class":181},[167,114879,21980],{"class":173},[167,114881,114882,114884,114886,114888,114890],{"class":169,"line":512},[167,114883,8266],{"class":191},[167,114885,22072],{"class":219},[167,114887,223],{"class":191},[167,114889,22077],{"class":181},[167,114891,2917],{"class":173},[167,114893,114894,114896,114898],{"class":169,"line":781},[167,114895,22061],{"class":173},[167,114897,22086],{"class":181},[167,114899,2917],{"class":173},[167,114901,114902,114904,114906,114908,114910,114912,114914,114916,114918],{"class":169,"line":786},[167,114903,22051],{"class":173},[167,114905,267],{"class":191},[167,114907,22097],{"class":173},[167,114909,15756],{"class":219},[167,114911,22102],{"class":191},[167,114913,15762],{"class":219},[167,114915,22107],{"class":173},[167,114917,15799],{"class":191},[167,114919,12146],{"class":219},[167,114921,114922,114924],{"class":169,"line":2678},[167,114923,1937],{"class":191},[167,114925,22118],{"class":173},[167,114927,114928],{"class":169,"line":2692},[167,114929,3492],{"class":173},[167,114931,114932],{"class":169,"line":3575},[167,114933,209],{"emptyLinePlaceholder":208},[167,114935,114936,114938,114940],{"class":169,"line":5028},[167,114937,22131],{"class":173},[167,114939,267],{"class":191},[167,114941,21934],{"class":173},[167,114943,114944,114946,114948],{"class":169,"line":5037},[167,114945,22140],{"class":173},[167,114947,267],{"class":191},[167,114949,22145],{"class":173},[167,114951,114952],{"class":169,"line":5046},[167,114953,209],{"emptyLinePlaceholder":208},[167,114955,114956,114958,114960,114962],{"class":169,"line":6756},[167,114957,2544],{"class":191},[167,114959,2526],{"class":173},[167,114961,6641],{"class":191},[167,114963,22160],{"class":173},[167,114965,114966,114968],{"class":169,"line":6778},[167,114967,22165],{"class":181},[167,114969,2917],{"class":173},[167,114971,114972],{"class":169,"line":6783},[167,114973,3492],{"class":173},[167,114975,114976],{"class":169,"line":6788},[167,114977,209],{"emptyLinePlaceholder":208},[167,114979,114980,114982],{"class":169,"line":6793},[167,114981,1539],{"class":191},[167,114983,22056],{"class":173},[167,114985,114986],{"class":169,"line":6809},[167,114987,276],{"class":173},[167,114989,114990],{"class":169,"line":6824},[167,114991,209],{"emptyLinePlaceholder":208},[167,114993,114994,114996,114998,115000,115002,115004,115006],{"class":169,"line":6829},[167,114995,246],{"class":191},[167,114997,22196],{"class":181},[167,114999,229],{"class":173},[167,115001,7839],{"class":254},[167,115003,1025],{"class":173},[167,115005,7845],{"class":254},[167,115007,258],{"class":173},[167,115009,115010,115012,115014,115016,115018],{"class":169,"line":6836},[167,115011,2544],{"class":191},[167,115013,2526],{"class":173},[167,115015,6641],{"class":191},[167,115017,22217],{"class":173},[167,115019,2556],{"class":191},[167,115021,115022],{"class":169,"line":6845},[167,115023,209],{"emptyLinePlaceholder":208},[167,115025,115026,115028,115030,115032,115034,115036],{"class":169,"line":6854},[167,115027,22228],{"class":191},[167,115029,22231],{"class":173},[167,115031,267],{"class":191},[167,115033,22236],{"class":173},[167,115035,4233],{"class":181},[167,115037,22241],{"class":173},[167,115039,115040,115042,115044,115046],{"class":169,"line":6861},[167,115041,2544],{"class":191},[167,115043,2526],{"class":173},[167,115045,6641],{"class":191},[167,115047,22252],{"class":173},[167,115049,115050,115052,115054,115056,115058],{"class":169,"line":6879},[167,115051,22257],{"class":173},[167,115053,267],{"class":191},[167,115055,4224],{"class":191},[167,115057,22264],{"class":181},[167,115059,2917],{"class":173},[167,115061,115062,115064,115066],{"class":169,"line":6884},[167,115063,22271],{"class":173},[167,115065,7856],{"class":181},[167,115067,22276],{"class":173},[167,115069,115070],{"class":169,"line":6889},[167,115071,3492],{"class":173},[167,115073,115074],{"class":169,"line":6898},[167,115075,209],{"emptyLinePlaceholder":208},[167,115077,115078,115080,115082,115084,115086,115088],{"class":169,"line":6903},[167,115079,22228],{"class":191},[167,115081,22291],{"class":173},[167,115083,267],{"class":191},[167,115085,22296],{"class":173},[167,115087,4233],{"class":181},[167,115089,22301],{"class":173},[167,115091,115092,115094,115096,115098],{"class":169,"line":6912},[167,115093,2544],{"class":191},[167,115095,2526],{"class":173},[167,115097,6641],{"class":191},[167,115099,22312],{"class":173},[167,115101,115102,115104,115106,115108,115110],{"class":169,"line":6928},[167,115103,22317],{"class":173},[167,115105,267],{"class":191},[167,115107,4224],{"class":191},[167,115109,22324],{"class":181},[167,115111,2917],{"class":173},[167,115113,115114,115116,115118],{"class":169,"line":6949},[167,115115,22331],{"class":173},[167,115117,7856],{"class":181},[167,115119,22336],{"class":173},[167,115121,115122],{"class":169,"line":6954},[167,115123,3492],{"class":173},[167,115125,115126],{"class":169,"line":6975},[167,115127,209],{"emptyLinePlaceholder":208},[167,115129,115130,115132,115134,115136,115138,115140],{"class":169,"line":6989},[167,115131,2544],{"class":191},[167,115133,2526],{"class":173},[167,115135,6641],{"class":191},[167,115137,22355],{"class":173},[167,115139,22358],{"class":181},[167,115141,22361],{"class":173},[167,115143,115144,115146,115148],{"class":169,"line":7003},[167,115145,21975],{"class":173},[167,115147,7859],{"class":181},[167,115149,22370],{"class":173},[167,115151,115152,115154,115156],{"class":169,"line":7017},[167,115153,22375],{"class":173},[167,115155,15723],{"class":181},[167,115157,22380],{"class":173},[167,115159,115160],{"class":169,"line":7026},[167,115161,3492],{"class":173},[167,115163,115164],{"class":169,"line":7031},[167,115165,276],{"class":173},[167,115167,115168],{"class":169,"line":7048},[167,115169,209],{"emptyLinePlaceholder":208},[167,115171,115172,115174,115176,115178,115180,115182,115184],{"class":169,"line":7057},[167,115173,246],{"class":191},[167,115175,22399],{"class":181},[167,115177,229],{"class":173},[167,115179,7839],{"class":254},[167,115181,1025],{"class":173},[167,115183,7845],{"class":254},[167,115185,258],{"class":173},[167,115187,115188,115190,115192,115194,115196,115198],{"class":169,"line":7555},[167,115189,1443],{"class":191},[167,115191,22416],{"class":219},[167,115193,223],{"class":191},[167,115195,22236],{"class":173},[167,115197,4233],{"class":181},[167,115199,22241],{"class":173},[167,115201,115202,115204,115206,115208,115210],{"class":169,"line":7560},[167,115203,2544],{"class":191},[167,115205,2526],{"class":173},[167,115207,6641],{"class":191},[167,115209,22435],{"class":173},[167,115211,2556],{"class":191},[167,115213,115214],{"class":169,"line":7579},[167,115215,209],{"emptyLinePlaceholder":208},[167,115217,115218,115220,115222,115224,115226,115228],{"class":169,"line":7592},[167,115219,1443],{"class":191},[167,115221,21964],{"class":219},[167,115223,223],{"class":191},[167,115225,22296],{"class":173},[167,115227,4233],{"class":181},[167,115229,22301],{"class":173},[167,115231,115232,115234,115236,115238,115240],{"class":169,"line":7605},[167,115233,2544],{"class":191},[167,115235,2526],{"class":173},[167,115237,6641],{"class":191},[167,115239,22466],{"class":173},[167,115241,2556],{"class":191},[167,115243,115244],{"class":169,"line":7618},[167,115245,209],{"emptyLinePlaceholder":208},[167,115247,115248,115250,115252,115254,115256,115258],{"class":169,"line":7627},[167,115249,1443],{"class":191},[167,115251,22479],{"class":219},[167,115253,223],{"class":191},[167,115255,4224],{"class":191},[167,115257,22324],{"class":181},[167,115259,2917],{"class":173},[167,115261,115262,115264,115266,115268,115270,115272,115274],{"class":169,"line":7632},[167,115263,22492],{"class":173},[167,115265,22495],{"class":181},[167,115267,1918],{"class":173},[167,115269,21950],{"class":254},[167,115271,693],{"class":173},[167,115273,639],{"class":191},[167,115275,1905],{"class":173},[167,115277,115278,115280,115282,115284,115286,115288],{"class":169,"line":7647},[167,115279,7419],{"class":191},[167,115281,22512],{"class":173},[167,115283,701],{"class":191},[167,115285,22517],{"class":173},[167,115287,7859],{"class":181},[167,115289,21980],{"class":173},[167,115291,115292],{"class":169,"line":7656},[167,115293,8347],{"class":173},[167,115295,115296],{"class":169,"line":10073},[167,115297,209],{"emptyLinePlaceholder":208},[167,115299,115300,115302,115304,115306,115308,115310,115312],{"class":169,"line":10084},[167,115301,22534],{"class":173},[167,115303,22495],{"class":181},[167,115305,1918],{"class":173},[167,115307,21950],{"class":254},[167,115309,693],{"class":173},[167,115311,639],{"class":191},[167,115313,1905],{"class":173},[167,115315,115316,115318],{"class":169,"line":10089},[167,115317,7419],{"class":191},[167,115319,22553],{"class":173},[167,115321,115322,115324,115326],{"class":169,"line":10098},[167,115323,22558],{"class":173},[167,115325,22561],{"class":181},[167,115327,21980],{"class":173},[167,115329,115330,115332,115334],{"class":169,"line":10103},[167,115331,7363],{"class":173},[167,115333,22570],{"class":191},[167,115335,1905],{"class":173},[167,115337,115338,115340],{"class":169,"line":10112},[167,115339,22577],{"class":181},[167,115341,2917],{"class":173},[167,115343,115344],{"class":169,"line":10129},[167,115345,4049],{"class":173},[167,115347,115348],{"class":169,"line":10138},[167,115349,8347],{"class":173},[167,115351,115352],{"class":169,"line":10152},[167,115353,276],{"class":173},[167,115355,115356],{"class":169,"line":10161},[167,115357,209],{"emptyLinePlaceholder":208},[167,115359,115360,115362,115364,115366,115368],{"class":169,"line":10167},[167,115361,246],{"class":191},[167,115363,846],{"class":181},[167,115365,229],{"class":173},[167,115367,22606],{"class":254},[167,115369,258],{"class":173},[167,115371,115372,115374,115376,115378],{"class":169,"line":10177},[167,115373,1539],{"class":191},[167,115375,4224],{"class":191},[167,115377,22617],{"class":181},[167,115379,22620],{"class":173},[167,115381,115382,115384,115386,115388,115390,115392,115394,115396],{"class":169,"line":10186},[167,115383,22625],{"class":181},[167,115385,229],{"class":173},[167,115387,7839],{"class":254},[167,115389,1025],{"class":173},[167,115391,7845],{"class":254},[167,115393,1025],{"class":173},[167,115395,22638],{"class":254},[167,115397,258],{"class":173},[167,115399,115400,115402],{"class":169,"line":10191},[167,115401,22645],{"class":181},[167,115403,22648],{"class":173},[167,115405,115406,115408,115410,115412],{"class":169,"line":10214},[167,115407,8767],{"class":191},[167,115409,22655],{"class":173},[167,115411,4233],{"class":181},[167,115413,22660],{"class":173},[167,115415,115416],{"class":169,"line":10228},[167,115417,755],{"class":173},[167,115419,115420,115422,115424,115426,115428,115430,115432,115434,115436,115438],{"class":169,"line":10241},[167,115421,22669],{"class":181},[167,115423,229],{"class":173},[167,115425,7839],{"class":254},[167,115427,1025],{"class":173},[167,115429,7845],{"class":254},[167,115431,1025],{"class":173},[167,115433,2219],{"class":254},[167,115435,1025],{"class":173},[167,115437,22638],{"class":254},[167,115439,258],{"class":173},[167,115441,115442,115444,115446,115448],{"class":169,"line":10256},[167,115443,4435],{"class":191},[167,115445,22694],{"class":219},[167,115447,223],{"class":191},[167,115449,22699],{"class":173},[167,115451,115452,115454,115456,115458,115460,115462],{"class":169,"line":10283},[167,115453,4435],{"class":191},[167,115455,22072],{"class":219},[167,115457,223],{"class":191},[167,115459,22655],{"class":173},[167,115461,7856],{"class":181},[167,115463,22714],{"class":173},[167,115465,115466,115468,115470,115472,115474,115476],{"class":169,"line":10292},[167,115467,7261],{"class":191},[167,115469,2526],{"class":173},[167,115471,6641],{"class":191},[167,115473,22725],{"class":173},[167,115475,22728],{"class":181},[167,115477,22731],{"class":173},[167,115479,115480,115482],{"class":169,"line":10297},[167,115481,22736],{"class":181},[167,115483,22648],{"class":173},[167,115485,115486],{"class":169,"line":10317},[167,115487,7287],{"class":173},[167,115489,115490,115492],{"class":169,"line":10326},[167,115491,8767],{"class":191},[167,115493,22118],{"class":173},[167,115495,115496],{"class":169,"line":10981},[167,115497,4049],{"class":173},[167,115499,115500],{"class":169,"line":10994},[167,115501,8347],{"class":173},[167,115503,115504],{"class":169,"line":11007},[167,115505,276],{"class":173},[154,115507,115508],{"className":2879,"code":22763,"filename":22764,"language":2882,"meta":163,"style":163},[87,115509,115510,115530,115534,115544,115566,115570,115574,115580],{"__ignoreMap":163},[167,115511,115512,115514,115516,115518,115520,115522,115524,115526,115528],{"class":169,"line":170},[167,115513,216],{"class":191},[167,115515,22773],{"class":219},[167,115517,223],{"class":191},[167,115519,846],{"class":181},[167,115521,22780],{"class":173},[167,115523,1960],{"class":219},[167,115525,22785],{"class":173},[167,115527,390],{"class":219},[167,115529,2242],{"class":173},[167,115531,115532],{"class":169,"line":188},[167,115533,209],{"emptyLinePlaceholder":208},[167,115535,115536,115538,115540,115542],{"class":169,"line":205},[167,115537,22798],{"class":181},[167,115539,1493],{"class":173},[167,115541,639],{"class":191},[167,115543,1905],{"class":173},[167,115545,115546,115548,115550,115552,115554,115556,115558,115560,115562,115564],{"class":169,"line":160},[167,115547,2608],{"class":173},[167,115549,2611],{"class":181},[167,115551,229],{"class":173},[167,115553,22815],{"class":201},[167,115555,22818],{"class":173},[167,115557,8316],{"class":191},[167,115559,22823],{"class":173},[167,115561,583],{"class":191},[167,115563,22828],{"class":201},[167,115565,235],{"class":173},[167,115567,115568],{"class":169,"line":238},[167,115569,403],{"class":173},[167,115571,115572],{"class":169,"line":243},[167,115573,209],{"emptyLinePlaceholder":208},[167,115575,115576,115578],{"class":169,"line":261},[167,115577,22843],{"class":173},[167,115579,3126],{"class":191},[167,115581,115582,115584,115586],{"class":169,"line":273},[167,115583,22850],{"class":173},[167,115585,267],{"class":191},[167,115587,5593],{"class":219},[3087,115589,115591],{"id":115590},"step-by-step-of-what-happens","Step by step of what happens",[3035,115593,115594,115599,115612,115620,115629],{},[36,115595,115596,115598],{},[87,115597,22798],{}," runs the render function and marks it as active.",[36,115600,115601,115602,57920,115604,115606,115607,115609,115610,1679],{},"Reading ",[87,115603,22871],{},[87,115605,22843],{}," makes the Proxy ",[87,115608,4233],{}," trap call ",[87,115611,21824],{},[36,115613,115614,115616,115617,1679],{},[87,115615,21824],{}," stores dependencies in ",[87,115618,115619],{},"WeakMap -> Map -> Set",[36,115621,115622,115623,115606,115625,115609,115627,1679],{},"Changing ",[87,115624,22843],{},[87,115626,7856],{},[87,115628,22901],{},[36,115630,115631,115633,115634,115636],{},[87,115632,22901],{}," looks up the ",[87,115635,21730],{}," for that key and re-runs only dependent effects.",[15,115638,115639],{},"This pattern is exactly the core of Vue 3 reactivity.",[22,115641,115643],{"id":115642},"connection-to-real-vue","Connection to Real Vue",[3087,115645,115647,115649,115650],{"id":115646},"reactive-uses-proxy",[87,115648,18243],{}," uses ",[87,115651,22880],{},[15,115653,115654,115656,115657,115659,115660,1025,115662,1025,115664,1025,115666,115668],{},[87,115655,18243],{}," does not \"magically transform\" values. It creates a ",[87,115658,22880],{}," that intercepts operations (",[87,115661,4233],{},[87,115663,7856],{},[87,115665,22358],{},[87,115667,22941],{},", iteration, etc.).",[33,115670,115671,115676,115681],{},[36,115672,115673,115675],{},[87,115674,4233],{}," performs tracking.",[36,115677,115678,115680],{},[87,115679,7856],{}," performs triggering.",[36,115682,115683,115684,1025,115686,1025,115688,1025,115690,115692],{},"Arrays and collections (",[87,115685,21722],{},[87,115687,21730],{},[87,115689,21714],{},[87,115691,22966],{},") have specialized handlers.",[3087,115694,115696,115698],{"id":115695},"ref-wraps-primitives",[87,115697,2085],{}," wraps primitives",[15,115700,115701,115702,1679],{},"Since a primitive cannot be proxied by property, Vue uses a wrapper object with getter\u002Fsetter on ",[87,115703,22979],{},[15,115705,115706],{},"Conceptual simplification:",[154,115708,115709],{"className":2879,"code":22985,"filename":22986,"language":2882,"meta":163,"style":163},[87,115710,115711,115723,115733,115741,115751,115757,115761,115773,115787,115795,115805,115809,115813,115817,115823],{"__ignoreMap":163},[167,115712,115713,115715,115717,115719,115721],{"class":169,"line":170},[167,115714,246],{"class":191},[167,115716,226],{"class":181},[167,115718,229],{"class":173},[167,115720,22999],{"class":254},[167,115722,258],{"class":173},[167,115724,115725,115727,115729,115731],{"class":169,"line":188},[167,115726,1443],{"class":191},[167,115728,23008],{"class":219},[167,115730,223],{"class":191},[167,115732,1905],{"class":173},[167,115734,115735,115737,115739],{"class":169,"line":205},[167,115736,22625],{"class":191},[167,115738,23019],{"class":181},[167,115740,763],{"class":173},[167,115742,115743,115745,115747,115749],{"class":169,"line":160},[167,115744,22645],{"class":181},[167,115746,23028],{"class":173},[167,115748,23031],{"class":201},[167,115750,235],{"class":173},[167,115752,115753,115755],{"class":169,"line":238},[167,115754,8767],{"class":191},[167,115756,23040],{"class":173},[167,115758,115759],{"class":169,"line":243},[167,115760,755],{"class":173},[167,115762,115763,115765,115767,115769,115771],{"class":169,"line":261},[167,115764,22669],{"class":191},[167,115766,23019],{"class":181},[167,115768,229],{"class":173},[167,115770,7868],{"class":254},[167,115772,258],{"class":173},[167,115774,115775,115777,115779,115781,115783,115785],{"class":169,"line":273},[167,115776,7261],{"class":191},[167,115778,2526],{"class":173},[167,115780,6641],{"class":191},[167,115782,22725],{"class":173},[167,115784,22728],{"class":181},[167,115786,23071],{"class":173},[167,115788,115789,115791,115793],{"class":169,"line":279},[167,115790,23076],{"class":173},[167,115792,267],{"class":191},[167,115794,23081],{"class":173},[167,115796,115797,115799,115801,115803],{"class":169,"line":289},[167,115798,22736],{"class":181},[167,115800,23028],{"class":173},[167,115802,23031],{"class":201},[167,115804,235],{"class":173},[167,115806,115807],{"class":169,"line":294},[167,115808,7287],{"class":173},[167,115810,115811],{"class":169,"line":304},[167,115812,4049],{"class":173},[167,115814,115815],{"class":169,"line":313},[167,115816,3492],{"class":173},[167,115818,115819,115821],{"class":169,"line":161},[167,115820,1539],{"class":191},[167,115822,23110],{"class":173},[167,115824,115825],{"class":169,"line":335},[167,115826,276],{"class":173},[15,115828,115829],{},"In real Vue:",[33,115831,115832,115838],{},[36,115833,115834,115835,115837],{},"Objects passed to ",[87,115836,2085],{}," are internally converted to reactive values.",[36,115839,115840,115841,115843],{},"In templates, ",[87,115842,22979],{}," is automatically unwrapped.",[3087,115845,115847,115849,115850],{"id":115846},"computed-is-built-on-top-of-effect",[87,115848,1661],{}," is built on top of ",[87,115851,22798],{},[15,115853,115854,115856],{},[87,115855,1661],{}," is implemented with a lazy effect:",[3035,115858,115859,115865,115868,115871],{},[36,115860,115861,115862,115864],{},"It is not evaluated until ",[87,115863,22979],{}," is read.",[36,115866,115867],{},"It caches the result.",[36,115869,115870],{},"It gets invalidated when an internal dependency changes.",[36,115872,115873,115874,21857,115876,115878],{},"It exposes its own ",[87,115875,21824],{},[87,115877,22901],{}," for consumers depending on that computed.",[15,115880,115881],{},"Internally, it combines:",[33,115883,115884,115887,115892],{},[36,115885,115886],{},"A lazy effect",[36,115888,96881,115889,115891],{},[87,115890,23185],{}," flag",[36,115893,115894],{},"A scheduler that invalidates instead of recalculating immediately",[3087,115896,115898],{"id":115897},"scheduler-and-batching","Scheduler and batching",[15,115900,115901],{},"Vue avoids redundant work within the same tick:",[3035,115903,115904,115907,115910],{},[36,115905,115906],{},"Instead of running every effect immediately, it can enqueue jobs.",[36,115908,115909],{},"It deduplicates repeated jobs.",[36,115911,115912],{},"It flushes in a microtask.",[15,115914,115915],{},"Conceptual mini scheduler:",[154,115917,115918],{"className":2879,"code":23212,"filename":23213,"language":2882,"meta":163,"style":163},[87,115919,115920,115934,115944,115960,115964,115976,115984,115992,116000,116012,116030,116038,116046,116050],{"__ignoreMap":163},[167,115921,115922,115924,115926,115928,115930,115932],{"class":169,"line":170},[167,115923,216],{"class":191},[167,115925,23222],{"class":219},[167,115927,223],{"class":191},[167,115929,4224],{"class":191},[167,115931,22324],{"class":181},[167,115933,2917],{"class":173},[167,115935,115936,115938,115940,115942],{"class":169,"line":188},[167,115937,13948],{"class":191},[167,115939,23237],{"class":173},[167,115941,267],{"class":191},[167,115943,5593],{"class":219},[167,115945,115946,115948,115950,115952,115954,115956,115958],{"class":169,"line":205},[167,115947,216],{"class":191},[167,115949,23248],{"class":219},[167,115951,223],{"class":191},[167,115953,23253],{"class":219},[167,115955,1679],{"class":173},[167,115957,23258],{"class":181},[167,115959,2917],{"class":173},[167,115961,115962],{"class":169,"line":160},[167,115963,209],{"emptyLinePlaceholder":208},[167,115965,115966,115968,115970,115972,115974],{"class":169,"line":238},[167,115967,246],{"class":191},[167,115969,23271],{"class":181},[167,115971,229],{"class":173},[167,115973,23276],{"class":254},[167,115975,258],{"class":173},[167,115977,115978,115980,115982],{"class":169,"line":243},[167,115979,23283],{"class":173},[167,115981,7859],{"class":181},[167,115983,23288],{"class":173},[167,115985,115986,115988,115990],{"class":169,"line":261},[167,115987,2544],{"class":191},[167,115989,23295],{"class":173},[167,115991,2556],{"class":191},[167,115993,115994,115996,115998],{"class":169,"line":273},[167,115995,23302],{"class":173},[167,115997,267],{"class":191},[167,115999,3487],{"class":219},[167,116001,116002,116004,116006,116008,116010],{"class":169,"line":279},[167,116003,23311],{"class":173},[167,116005,18179],{"class":181},[167,116007,1493],{"class":173},[167,116009,639],{"class":191},[167,116011,1905],{"class":173},[167,116013,116014,116016,116018,116020,116022,116024,116026,116028],{"class":169,"line":289},[167,116015,23324],{"class":173},[167,116017,22495],{"class":181},[167,116019,1918],{"class":173},[167,116021,23331],{"class":254},[167,116023,693],{"class":173},[167,116025,639],{"class":191},[167,116027,23338],{"class":181},[167,116029,2509],{"class":173},[167,116031,116032,116034,116036],{"class":169,"line":294},[167,116033,23324],{"class":173},[167,116035,23347],{"class":181},[167,116037,2917],{"class":173},[167,116039,116040,116042,116044],{"class":169,"line":304},[167,116041,23354],{"class":173},[167,116043,267],{"class":191},[167,116045,5593],{"class":219},[167,116047,116048],{"class":169,"line":313},[167,116049,8347],{"class":173},[167,116051,116052],{"class":169,"line":161},[167,116053,276],{"class":173},[15,116055,116056],{},"This is why 10 synchronous mutations can produce one final render.",[22,116058,57820],{"id":57819},[3087,116060,116062],{"id":116061},"destructuring-breaks-reactivity","Destructuring breaks reactivity",[154,116064,116066],{"className":2879,"code":116065,"filename":23379,"language":2882,"meta":163,"style":163},"const state = reactive({ count: 0 })\nconst { count } = state \u002F\u002F count is no longer linked\n",[87,116067,116068,116084],{"__ignoreMap":163},[167,116069,116070,116072,116074,116076,116078,116080,116082],{"class":169,"line":170},[167,116071,216],{"class":191},[167,116073,22773],{"class":219},[167,116075,223],{"class":191},[167,116077,846],{"class":181},[167,116079,22780],{"class":173},[167,116081,1960],{"class":219},[167,116083,2242],{"class":173},[167,116085,116086,116088,116090,116092,116094,116096,116098],{"class":169,"line":188},[167,116087,216],{"class":191},[167,116089,577],{"class":173},[167,116091,23406],{"class":219},[167,116093,23409],{"class":173},[167,116095,267],{"class":191},[167,116097,23414],{"class":173},[167,116099,116100],{"class":18662},"\u002F\u002F count is no longer linked\n",[15,116102,91798],{},[33,116104,116105,116109],{},[36,116106,62955,116107],{},[87,116108,23427],{},[36,116110,116111,116112,116114],{},"Or access ",[87,116113,22843],{}," directly.",[3087,116116,116118],{"id":116117},"mutations-outside-the-proxy","Mutations outside the proxy",[15,116120,116121,116122,116124,116125,1679],{},"If you mutate a raw reference outside the ",[87,116123,22880],{},", Vue cannot trigger updates.\nAny reactive read\u002Fwrite must go through the proxy or ",[87,116126,22979],{},[3087,116128,116129,1662,116131],{"id":23450},[87,116130,23453],{},[87,116132,2085],{},[15,116134,116135,116137,116138,116140],{},[87,116136,23453],{}," only tracks replacement of ",[87,116139,22979],{},", not deep mutations.",[154,116142,116144],{"className":2879,"code":116143,"filename":23467,"language":2882,"meta":163,"style":163},"const user = shallowRef({ name: \"Ana\" })\nuser.value.name = \"Eva\" \u002F\u002F does not trigger by itself\nuser.value = { ...user.value, name: \"Eva\" } \u002F\u002F does trigger\n",[87,116145,116146,116162,116173],{"__ignoreMap":163},[167,116147,116148,116150,116152,116154,116156,116158,116160],{"class":169,"line":170},[167,116149,216],{"class":191},[167,116151,23476],{"class":219},[167,116153,223],{"class":191},[167,116155,23481],{"class":181},[167,116157,23484],{"class":173},[167,116159,23487],{"class":201},[167,116161,2242],{"class":173},[167,116163,116164,116166,116168,116170],{"class":169,"line":188},[167,116165,23494],{"class":173},[167,116167,267],{"class":191},[167,116169,23499],{"class":201},[167,116171,116172],{"class":18662}," \u002F\u002F does not trigger by itself\n",[167,116174,116175,116177,116179,116181,116183,116185,116187,116189],{"class":169,"line":205},[167,116176,23507],{"class":173},[167,116178,267],{"class":191},[167,116180,577],{"class":173},[167,116182,23514],{"class":191},[167,116184,23517],{"class":173},[167,116186,23520],{"class":201},[167,116188,23409],{"class":173},[167,116190,116191],{"class":18662},"\u002F\u002F does trigger\n",[15,116193,116194],{},"It is useful when:",[33,116196,116197,116200,116203],{},[36,116198,116199],{},"You handle large structures",[36,116201,116202],{},"You integrate external libraries",[36,116204,116205],{},"You want explicit control over invalidation timing",[3087,116207,116209],{"id":116208},"effects-running-more-than-expected","Effects running more than expected",[15,116211,116212],{},"Typical causes:",[33,116214,116215,116220,116225,116233],{},[36,116216,116217,116218],{},"Reading too many sources inside a single ",[87,116219,1668],{},[36,116221,116222,116223],{},"Returning new objects every time in ",[87,116224,1661],{},[36,116226,70888,116227,116229,116230,116232],{},[87,116228,1668],{}," where ",[87,116231,1661],{}," is enough",[36,116234,116235],{},"Mutating state inside an effect without isolating dependencies",[22,116237,73913],{"id":73912},[15,116239,116240],{},"When you understand Vue 3 internals, your UI architecture changes:",[33,116242,116243,116246,116249],{},[36,116244,116245],{},"You move from trial-and-error to dependency-driven diagnosis",[36,116247,116248],{},"You distinguish tracking problems from rendering problems",[36,116250,116251],{},"You shape state to reduce render frequency and computational cost",[15,116253,116254],{},"In large applications, that directly impacts:",[33,116256,116257,116260,116263],{},[36,116258,116259],{},"Stable performance under load",[36,116261,116262],{},"Fewer intermittent synchronization bugs",[36,116264,116265,116266,1025,116268,1025,116270,1025,116272,1025,116274,116276],{},"Better decisions around ",[87,116267,2085],{},[87,116269,18243],{},[87,116271,23453],{},[87,116273,1661],{},[87,116275,1665],{},", and scheduling",[5367,116278,116279],{},[15,116280,116281],{},"Vue 3 reactivity is not magic. It is a well-designed dependency graph plus an efficient scheduler. Understanding it gives you more predictable, more performant, and easier-to-debug code.",[924,116283,23621],{},{"title":163,"searchDepth":188,"depth":188,"links":116285},[116286,116287,116293,116296,116305,116311],{"id":114498,"depth":188,"text":114499},{"id":114529,"depth":188,"text":114530,"children":116288},[116289,116290,116291],{"id":114533,"depth":205,"text":114534},{"id":114559,"depth":205,"text":114560},{"id":114631,"depth":205,"text":116292},"activeEffect: the critical piece",{"id":114689,"depth":188,"text":114690,"children":116294},[116295],{"id":115590,"depth":205,"text":115591},{"id":115642,"depth":188,"text":115643,"children":116297},[116298,116300,116302,116304],{"id":115646,"depth":205,"text":116299},"reactive uses Proxy",{"id":115695,"depth":205,"text":116301},"ref wraps primitives",{"id":115846,"depth":205,"text":116303},"computed is built on top of effect",{"id":115897,"depth":205,"text":115898},{"id":57819,"depth":188,"text":57820,"children":116306},[116307,116308,116309,116310],{"id":116061,"depth":205,"text":116062},{"id":116117,"depth":205,"text":116118},{"id":23450,"depth":205,"text":23648},{"id":116208,"depth":205,"text":116209},{"id":73912,"depth":188,"text":73913},"How Vue 3 reactivity works internally","Technical breakdown of Vue 3's reactivity engine: dependency tracking, WeakMap->Map->Set structure, activeEffect, scheduler, batching, and real architecture pitfalls.",{"updatedAt":23655,"coverCaption":116315,"author":946,"keywords":116316},"Temporary cover: replace with final TODOvue artwork",[951,116317,23658,22561,23659,1661],"reactivity","\u002Fblog\u002Fvue-3-reactivity-internals.en",[116320],{"headline":114478,"author":116321,"datePublished":23655,"@type":961},{"name":946,"@type":959},{"title":114478,"description":116313},"blog\u002Fvue-3-reactivity-internals.en",[116325,116326,116327,116328],{"tag":60269,"color":3270},{"tag":60267,"color":971},{"tag":94137,"color":3274},{"tag":60271,"color":7731},"AYiuIfytskMFk2R5imzaBjUQdJKGSKIiIw2-4vvtdPI",{"id":21615,"title":21616,"body":116331,"cover":23651,"coverAlt":21616,"date":23652,"description":23653,"draft":940,"extension":941,"lab":942,"locale":943,"meta":118027,"navigation":208,"path":23660,"schemaOrg":118029,"seo":118032,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":23665,"tags":118033,"__hash__":23671},{"type":8,"value":116332,"toc":118003},[116333,116335,116345,116347,116351,116359,116361,116367,116369,116371,116377,116385,116389,116391,116393,116411,116439,116441,116451,116455,116459,116461,116491,116495,116497,116503,116517,117307,117389,117391,117429,117431,117433,117439,117453,117473,117477,117481,117483,117603,117605,117615,117621,117627,117643,117645,117657,117659,117661,117669,117671,117809,117811,117813,117815,117851,117853,117863,117865,117873,117879,117885,117933,117935,117943,117945,117947,117965,117967,117969,117977,117979,117997,118001],[11,116334,21616],{"id":21621},[15,116336,21624,116337,1025,116339,1025,116341,1025,116343,21633],{},[87,116338,2085],{},[87,116340,18243],{},[87,116342,1661],{},[87,116344,1665],{},[22,116346,21637],{"id":21636},[15,116348,21640,116349,21643],{},[87,116350,2085],{},[33,116352,116353,116355,116357],{},[36,116354,21648],{},[36,116356,21651],{},[36,116358,21654],{},[15,116360,21657],{},[15,116362,21660,116363,90,116365,21665],{},[87,116364,1661],{},[87,116366,1668],{},[22,116368,21669],{"id":21668},[3087,116370,21673],{"id":21672},[15,116372,21676,116373,1025,116375,21681],{},[87,116374,1661],{},[87,116376,1668],{},[154,116378,116379],{"className":21684,"code":21685,"filename":21686,"language":21687,"meta":163,"style":163},[87,116380,116381],{"__ignoreMap":163},[167,116382,116383],{"class":169,"line":170},[167,116384,21685],{},[15,116386,21696,116387,21700],{},[87,116388,21699],{},[3087,116390,21704],{"id":21703},[15,116392,21707],{},[33,116394,116395,116401,116407],{},[36,116396,116397,21715,116399,4270],{},[87,116398,21714],{},[87,116400,7839],{},[36,116402,116403,21723,116405,4270],{},[87,116404,21722],{},[87,116406,7845],{},[36,116408,116409,21731],{},[87,116410,21730],{},[154,116412,116413],{"className":21684,"code":21734,"filename":21735,"language":21687,"meta":163,"style":163},[87,116414,116415,116419,116423,116427,116431,116435],{"__ignoreMap":163},[167,116416,116417],{"class":169,"line":170},[167,116418,21742],{},[167,116420,116421],{"class":169,"line":188},[167,116422,21747],{},[167,116424,116425],{"class":169,"line":205},[167,116426,21752],{},[167,116428,116429],{"class":169,"line":160},[167,116430,21757],{},[167,116432,116433],{"class":169,"line":238},[167,116434,21762],{},[167,116436,116437],{"class":169,"line":243},[167,116438,21767],{},[15,116440,21770],{},[33,116442,116443,116447,116449],{},[36,116444,21775,116445,4270],{},[87,116446,21714],{},[36,116448,21780],{},[36,116450,21783],{},[3087,116452,116453,21790],{"id":21786},[87,116454,21789],{},[15,116456,21793,116457,1679],{},[87,116458,21789],{},[15,116460,21798],{},[3035,116462,116463,116469,116475,116485],{},[36,116464,21803,116465,21807,116467,1679],{},[87,116466,21806],{},[87,116468,21810],{},[36,116470,18229,116471,21816,116473,1679],{},[87,116472,21815],{},[87,116474,21819],{},[36,116476,116477,21825,116479,21828,116481,21831,116483,1679],{},[87,116478,21824],{},[87,116480,21789],{},[87,116482,21730],{},[87,116484,21699],{},[36,116486,21836,116487,1025,116489,21841],{},[87,116488,21815],{},[87,116490,21789],{},[15,116492,21844,116493,21847],{},[87,116494,21789],{},[22,116496,21851],{"id":21850},[15,116498,21854,116499,21857,116501,21860],{},[87,116500,21722],{},[87,116502,21730],{},[33,116504,116505,116509,116513],{},[36,116506,116507],{},[87,116508,21819],{},[36,116510,116511],{},[87,116512,21871],{},[36,116514,116515],{},[87,116516,21806],{},[154,116518,116519],{"className":2879,"code":21878,"filename":21879,"language":2882,"meta":163,"style":163},[87,116520,116521,116525,116539,116543,116547,116557,116567,116571,116583,116597,116605,116609,116619,116623,116627,116645,116659,116665,116673,116681,116693,116701,116721,116727,116731,116735,116743,116751,116755,116765,116771,116775,116779,116785,116789,116793,116809,116821,116825,116839,116849,116861,116869,116873,116877,116891,116901,116913,116921,116925,116929,116943,116951,116959,116963,116967,116971,116987,117001,117013,117017,117031,117043,117047,117061,117077,117091,117095,117099,117115,117121,117129,117137,117143,117147,117151,117155,117159,117171,117181,117199,117205,117215,117219,117241,117251,117265,117279,117285,117289,117295,117299,117303],{"__ignoreMap":163},[167,116522,116523],{"class":169,"line":170},[167,116524,21886],{"class":18662},[167,116526,116527,116529,116531,116533,116535,116537],{"class":169,"line":188},[167,116528,216],{"class":191},[167,116530,21893],{"class":219},[167,116532,223],{"class":191},[167,116534,4224],{"class":191},[167,116536,21900],{"class":181},[167,116538,2917],{"class":173},[167,116540,116541],{"class":169,"line":205},[167,116542,209],{"emptyLinePlaceholder":208},[167,116544,116545],{"class":169,"line":160},[167,116546,21911],{"class":18662},[167,116548,116549,116551,116553,116555],{"class":169,"line":238},[167,116550,13948],{"class":191},[167,116552,21918],{"class":173},[167,116554,267],{"class":191},[167,116556,12146],{"class":219},[167,116558,116559,116561,116563,116565],{"class":169,"line":243},[167,116560,216],{"class":191},[167,116562,21929],{"class":219},[167,116564,223],{"class":191},[167,116566,21934],{"class":173},[167,116568,116569],{"class":169,"line":261},[167,116570,209],{"emptyLinePlaceholder":208},[167,116572,116573,116575,116577,116579,116581],{"class":169,"line":273},[167,116574,246],{"class":191},[167,116576,21945],{"class":181},[167,116578,229],{"class":173},[167,116580,21950],{"class":254},[167,116582,258],{"class":173},[167,116584,116585,116587,116589,116591,116593,116595],{"class":169,"line":279},[167,116586,21957],{"class":191},[167,116588,2526],{"class":173},[167,116590,216],{"class":191},[167,116592,21964],{"class":219},[167,116594,21967],{"class":191},[167,116596,21970],{"class":173},[167,116598,116599,116601,116603],{"class":169,"line":289},[167,116600,21975],{"class":173},[167,116602,7862],{"class":181},[167,116604,21980],{"class":173},[167,116606,116607],{"class":169,"line":294},[167,116608,3492],{"class":173},[167,116610,116611,116613,116615,116617],{"class":169,"line":304},[167,116612,21989],{"class":173},[167,116614,15756],{"class":219},[167,116616,223],{"class":191},[167,116618,15802],{"class":219},[167,116620,116621],{"class":169,"line":313},[167,116622,276],{"class":173},[167,116624,116625],{"class":169,"line":161},[167,116626,209],{"emptyLinePlaceholder":208},[167,116628,116629,116631,116633,116635,116637,116639,116641,116643],{"class":169,"line":335},[167,116630,246],{"class":191},[167,116632,22010],{"class":181},[167,116634,229],{"class":173},[167,116636,21815],{"class":254},[167,116638,1025],{"class":173},[167,116640,22019],{"class":254},[167,116642,223],{"class":191},[167,116644,22024],{"class":173},[167,116646,116647,116649,116651,116653,116655,116657],{"class":169,"line":341},[167,116648,1443],{"class":191},[167,116650,22031],{"class":181},[167,116652,223],{"class":191},[167,116654,1469],{"class":173},[167,116656,639],{"class":191},[167,116658,1905],{"class":173},[167,116660,116661,116663],{"class":169,"line":489},[167,116662,22044],{"class":181},[167,116664,21980],{"class":173},[167,116666,116667,116669,116671],{"class":169,"line":495},[167,116668,22051],{"class":173},[167,116670,267],{"class":191},[167,116672,22056],{"class":173},[167,116674,116675,116677,116679],{"class":169,"line":501},[167,116676,22061],{"class":173},[167,116678,15723],{"class":181},[167,116680,21980],{"class":173},[167,116682,116683,116685,116687,116689,116691],{"class":169,"line":512},[167,116684,8266],{"class":191},[167,116686,22072],{"class":219},[167,116688,223],{"class":191},[167,116690,22077],{"class":181},[167,116692,2917],{"class":173},[167,116694,116695,116697,116699],{"class":169,"line":781},[167,116696,22061],{"class":173},[167,116698,22086],{"class":181},[167,116700,2917],{"class":173},[167,116702,116703,116705,116707,116709,116711,116713,116715,116717,116719],{"class":169,"line":786},[167,116704,22051],{"class":173},[167,116706,267],{"class":191},[167,116708,22097],{"class":173},[167,116710,15756],{"class":219},[167,116712,22102],{"class":191},[167,116714,15762],{"class":219},[167,116716,22107],{"class":173},[167,116718,15799],{"class":191},[167,116720,12146],{"class":219},[167,116722,116723,116725],{"class":169,"line":2678},[167,116724,1937],{"class":191},[167,116726,22118],{"class":173},[167,116728,116729],{"class":169,"line":2692},[167,116730,3492],{"class":173},[167,116732,116733],{"class":169,"line":3575},[167,116734,209],{"emptyLinePlaceholder":208},[167,116736,116737,116739,116741],{"class":169,"line":5028},[167,116738,22131],{"class":173},[167,116740,267],{"class":191},[167,116742,21934],{"class":173},[167,116744,116745,116747,116749],{"class":169,"line":5037},[167,116746,22140],{"class":173},[167,116748,267],{"class":191},[167,116750,22145],{"class":173},[167,116752,116753],{"class":169,"line":5046},[167,116754,209],{"emptyLinePlaceholder":208},[167,116756,116757,116759,116761,116763],{"class":169,"line":6756},[167,116758,2544],{"class":191},[167,116760,2526],{"class":173},[167,116762,6641],{"class":191},[167,116764,22160],{"class":173},[167,116766,116767,116769],{"class":169,"line":6778},[167,116768,22165],{"class":181},[167,116770,2917],{"class":173},[167,116772,116773],{"class":169,"line":6783},[167,116774,3492],{"class":173},[167,116776,116777],{"class":169,"line":6788},[167,116778,209],{"emptyLinePlaceholder":208},[167,116780,116781,116783],{"class":169,"line":6793},[167,116782,1539],{"class":191},[167,116784,22056],{"class":173},[167,116786,116787],{"class":169,"line":6809},[167,116788,276],{"class":173},[167,116790,116791],{"class":169,"line":6824},[167,116792,209],{"emptyLinePlaceholder":208},[167,116794,116795,116797,116799,116801,116803,116805,116807],{"class":169,"line":6829},[167,116796,246],{"class":191},[167,116798,22196],{"class":181},[167,116800,229],{"class":173},[167,116802,7839],{"class":254},[167,116804,1025],{"class":173},[167,116806,7845],{"class":254},[167,116808,258],{"class":173},[167,116810,116811,116813,116815,116817,116819],{"class":169,"line":6836},[167,116812,2544],{"class":191},[167,116814,2526],{"class":173},[167,116816,6641],{"class":191},[167,116818,22217],{"class":173},[167,116820,2556],{"class":191},[167,116822,116823],{"class":169,"line":6845},[167,116824,209],{"emptyLinePlaceholder":208},[167,116826,116827,116829,116831,116833,116835,116837],{"class":169,"line":6854},[167,116828,22228],{"class":191},[167,116830,22231],{"class":173},[167,116832,267],{"class":191},[167,116834,22236],{"class":173},[167,116836,4233],{"class":181},[167,116838,22241],{"class":173},[167,116840,116841,116843,116845,116847],{"class":169,"line":6861},[167,116842,2544],{"class":191},[167,116844,2526],{"class":173},[167,116846,6641],{"class":191},[167,116848,22252],{"class":173},[167,116850,116851,116853,116855,116857,116859],{"class":169,"line":6879},[167,116852,22257],{"class":173},[167,116854,267],{"class":191},[167,116856,4224],{"class":191},[167,116858,22264],{"class":181},[167,116860,2917],{"class":173},[167,116862,116863,116865,116867],{"class":169,"line":6884},[167,116864,22271],{"class":173},[167,116866,7856],{"class":181},[167,116868,22276],{"class":173},[167,116870,116871],{"class":169,"line":6889},[167,116872,3492],{"class":173},[167,116874,116875],{"class":169,"line":6898},[167,116876,209],{"emptyLinePlaceholder":208},[167,116878,116879,116881,116883,116885,116887,116889],{"class":169,"line":6903},[167,116880,22228],{"class":191},[167,116882,22291],{"class":173},[167,116884,267],{"class":191},[167,116886,22296],{"class":173},[167,116888,4233],{"class":181},[167,116890,22301],{"class":173},[167,116892,116893,116895,116897,116899],{"class":169,"line":6912},[167,116894,2544],{"class":191},[167,116896,2526],{"class":173},[167,116898,6641],{"class":191},[167,116900,22312],{"class":173},[167,116902,116903,116905,116907,116909,116911],{"class":169,"line":6928},[167,116904,22317],{"class":173},[167,116906,267],{"class":191},[167,116908,4224],{"class":191},[167,116910,22324],{"class":181},[167,116912,2917],{"class":173},[167,116914,116915,116917,116919],{"class":169,"line":6949},[167,116916,22331],{"class":173},[167,116918,7856],{"class":181},[167,116920,22336],{"class":173},[167,116922,116923],{"class":169,"line":6954},[167,116924,3492],{"class":173},[167,116926,116927],{"class":169,"line":6975},[167,116928,209],{"emptyLinePlaceholder":208},[167,116930,116931,116933,116935,116937,116939,116941],{"class":169,"line":6989},[167,116932,2544],{"class":191},[167,116934,2526],{"class":173},[167,116936,6641],{"class":191},[167,116938,22355],{"class":173},[167,116940,22358],{"class":181},[167,116942,22361],{"class":173},[167,116944,116945,116947,116949],{"class":169,"line":7003},[167,116946,21975],{"class":173},[167,116948,7859],{"class":181},[167,116950,22370],{"class":173},[167,116952,116953,116955,116957],{"class":169,"line":7017},[167,116954,22375],{"class":173},[167,116956,15723],{"class":181},[167,116958,22380],{"class":173},[167,116960,116961],{"class":169,"line":7026},[167,116962,3492],{"class":173},[167,116964,116965],{"class":169,"line":7031},[167,116966,276],{"class":173},[167,116968,116969],{"class":169,"line":7048},[167,116970,209],{"emptyLinePlaceholder":208},[167,116972,116973,116975,116977,116979,116981,116983,116985],{"class":169,"line":7057},[167,116974,246],{"class":191},[167,116976,22399],{"class":181},[167,116978,229],{"class":173},[167,116980,7839],{"class":254},[167,116982,1025],{"class":173},[167,116984,7845],{"class":254},[167,116986,258],{"class":173},[167,116988,116989,116991,116993,116995,116997,116999],{"class":169,"line":7555},[167,116990,1443],{"class":191},[167,116992,22416],{"class":219},[167,116994,223],{"class":191},[167,116996,22236],{"class":173},[167,116998,4233],{"class":181},[167,117000,22241],{"class":173},[167,117002,117003,117005,117007,117009,117011],{"class":169,"line":7560},[167,117004,2544],{"class":191},[167,117006,2526],{"class":173},[167,117008,6641],{"class":191},[167,117010,22435],{"class":173},[167,117012,2556],{"class":191},[167,117014,117015],{"class":169,"line":7579},[167,117016,209],{"emptyLinePlaceholder":208},[167,117018,117019,117021,117023,117025,117027,117029],{"class":169,"line":7592},[167,117020,1443],{"class":191},[167,117022,21964],{"class":219},[167,117024,223],{"class":191},[167,117026,22296],{"class":173},[167,117028,4233],{"class":181},[167,117030,22301],{"class":173},[167,117032,117033,117035,117037,117039,117041],{"class":169,"line":7605},[167,117034,2544],{"class":191},[167,117036,2526],{"class":173},[167,117038,6641],{"class":191},[167,117040,22466],{"class":173},[167,117042,2556],{"class":191},[167,117044,117045],{"class":169,"line":7618},[167,117046,209],{"emptyLinePlaceholder":208},[167,117048,117049,117051,117053,117055,117057,117059],{"class":169,"line":7627},[167,117050,1443],{"class":191},[167,117052,22479],{"class":219},[167,117054,223],{"class":191},[167,117056,4224],{"class":191},[167,117058,22324],{"class":181},[167,117060,2917],{"class":173},[167,117062,117063,117065,117067,117069,117071,117073,117075],{"class":169,"line":7632},[167,117064,22492],{"class":173},[167,117066,22495],{"class":181},[167,117068,1918],{"class":173},[167,117070,21950],{"class":254},[167,117072,693],{"class":173},[167,117074,639],{"class":191},[167,117076,1905],{"class":173},[167,117078,117079,117081,117083,117085,117087,117089],{"class":169,"line":7647},[167,117080,7419],{"class":191},[167,117082,22512],{"class":173},[167,117084,701],{"class":191},[167,117086,22517],{"class":173},[167,117088,7859],{"class":181},[167,117090,21980],{"class":173},[167,117092,117093],{"class":169,"line":7656},[167,117094,8347],{"class":173},[167,117096,117097],{"class":169,"line":10073},[167,117098,209],{"emptyLinePlaceholder":208},[167,117100,117101,117103,117105,117107,117109,117111,117113],{"class":169,"line":10084},[167,117102,22534],{"class":173},[167,117104,22495],{"class":181},[167,117106,1918],{"class":173},[167,117108,21950],{"class":254},[167,117110,693],{"class":173},[167,117112,639],{"class":191},[167,117114,1905],{"class":173},[167,117116,117117,117119],{"class":169,"line":10089},[167,117118,7419],{"class":191},[167,117120,22553],{"class":173},[167,117122,117123,117125,117127],{"class":169,"line":10098},[167,117124,22558],{"class":173},[167,117126,22561],{"class":181},[167,117128,21980],{"class":173},[167,117130,117131,117133,117135],{"class":169,"line":10103},[167,117132,7363],{"class":173},[167,117134,22570],{"class":191},[167,117136,1905],{"class":173},[167,117138,117139,117141],{"class":169,"line":10112},[167,117140,22577],{"class":181},[167,117142,2917],{"class":173},[167,117144,117145],{"class":169,"line":10129},[167,117146,4049],{"class":173},[167,117148,117149],{"class":169,"line":10138},[167,117150,8347],{"class":173},[167,117152,117153],{"class":169,"line":10152},[167,117154,276],{"class":173},[167,117156,117157],{"class":169,"line":10161},[167,117158,209],{"emptyLinePlaceholder":208},[167,117160,117161,117163,117165,117167,117169],{"class":169,"line":10167},[167,117162,246],{"class":191},[167,117164,846],{"class":181},[167,117166,229],{"class":173},[167,117168,22606],{"class":254},[167,117170,258],{"class":173},[167,117172,117173,117175,117177,117179],{"class":169,"line":10177},[167,117174,1539],{"class":191},[167,117176,4224],{"class":191},[167,117178,22617],{"class":181},[167,117180,22620],{"class":173},[167,117182,117183,117185,117187,117189,117191,117193,117195,117197],{"class":169,"line":10186},[167,117184,22625],{"class":181},[167,117186,229],{"class":173},[167,117188,7839],{"class":254},[167,117190,1025],{"class":173},[167,117192,7845],{"class":254},[167,117194,1025],{"class":173},[167,117196,22638],{"class":254},[167,117198,258],{"class":173},[167,117200,117201,117203],{"class":169,"line":10191},[167,117202,22645],{"class":181},[167,117204,22648],{"class":173},[167,117206,117207,117209,117211,117213],{"class":169,"line":10214},[167,117208,8767],{"class":191},[167,117210,22655],{"class":173},[167,117212,4233],{"class":181},[167,117214,22660],{"class":173},[167,117216,117217],{"class":169,"line":10228},[167,117218,755],{"class":173},[167,117220,117221,117223,117225,117227,117229,117231,117233,117235,117237,117239],{"class":169,"line":10241},[167,117222,22669],{"class":181},[167,117224,229],{"class":173},[167,117226,7839],{"class":254},[167,117228,1025],{"class":173},[167,117230,7845],{"class":254},[167,117232,1025],{"class":173},[167,117234,2219],{"class":254},[167,117236,1025],{"class":173},[167,117238,22638],{"class":254},[167,117240,258],{"class":173},[167,117242,117243,117245,117247,117249],{"class":169,"line":10256},[167,117244,4435],{"class":191},[167,117246,22694],{"class":219},[167,117248,223],{"class":191},[167,117250,22699],{"class":173},[167,117252,117253,117255,117257,117259,117261,117263],{"class":169,"line":10283},[167,117254,4435],{"class":191},[167,117256,22072],{"class":219},[167,117258,223],{"class":191},[167,117260,22655],{"class":173},[167,117262,7856],{"class":181},[167,117264,22714],{"class":173},[167,117266,117267,117269,117271,117273,117275,117277],{"class":169,"line":10292},[167,117268,7261],{"class":191},[167,117270,2526],{"class":173},[167,117272,6641],{"class":191},[167,117274,22725],{"class":173},[167,117276,22728],{"class":181},[167,117278,22731],{"class":173},[167,117280,117281,117283],{"class":169,"line":10297},[167,117282,22736],{"class":181},[167,117284,22648],{"class":173},[167,117286,117287],{"class":169,"line":10317},[167,117288,7287],{"class":173},[167,117290,117291,117293],{"class":169,"line":10326},[167,117292,8767],{"class":191},[167,117294,22118],{"class":173},[167,117296,117297],{"class":169,"line":10981},[167,117298,4049],{"class":173},[167,117300,117301],{"class":169,"line":10994},[167,117302,8347],{"class":173},[167,117304,117305],{"class":169,"line":11007},[167,117306,276],{"class":173},[154,117308,117309],{"className":2879,"code":22763,"filename":22764,"language":2882,"meta":163,"style":163},[87,117310,117311,117331,117335,117345,117367,117371,117375,117381],{"__ignoreMap":163},[167,117312,117313,117315,117317,117319,117321,117323,117325,117327,117329],{"class":169,"line":170},[167,117314,216],{"class":191},[167,117316,22773],{"class":219},[167,117318,223],{"class":191},[167,117320,846],{"class":181},[167,117322,22780],{"class":173},[167,117324,1960],{"class":219},[167,117326,22785],{"class":173},[167,117328,390],{"class":219},[167,117330,2242],{"class":173},[167,117332,117333],{"class":169,"line":188},[167,117334,209],{"emptyLinePlaceholder":208},[167,117336,117337,117339,117341,117343],{"class":169,"line":205},[167,117338,22798],{"class":181},[167,117340,1493],{"class":173},[167,117342,639],{"class":191},[167,117344,1905],{"class":173},[167,117346,117347,117349,117351,117353,117355,117357,117359,117361,117363,117365],{"class":169,"line":160},[167,117348,2608],{"class":173},[167,117350,2611],{"class":181},[167,117352,229],{"class":173},[167,117354,22815],{"class":201},[167,117356,22818],{"class":173},[167,117358,8316],{"class":191},[167,117360,22823],{"class":173},[167,117362,583],{"class":191},[167,117364,22828],{"class":201},[167,117366,235],{"class":173},[167,117368,117369],{"class":169,"line":238},[167,117370,403],{"class":173},[167,117372,117373],{"class":169,"line":243},[167,117374,209],{"emptyLinePlaceholder":208},[167,117376,117377,117379],{"class":169,"line":261},[167,117378,22843],{"class":173},[167,117380,3126],{"class":191},[167,117382,117383,117385,117387],{"class":169,"line":273},[167,117384,22850],{"class":173},[167,117386,267],{"class":191},[167,117388,5593],{"class":219},[3087,117390,22858],{"id":22857},[3035,117392,117393,117397,117409,117415,117423],{},[36,117394,117395,22865],{},[87,117396,22798],{},[36,117398,22868,117399,1028,117401,22874,117403,22877,117405,22881,117407,1679],{},[87,117400,22871],{},[87,117402,22843],{},[87,117404,4233],{},[87,117406,22880],{},[87,117408,21824],{},[36,117410,117411,22888,117413,1679],{},[87,117412,21824],{},[87,117414,22891],{},[36,117416,22894,117417,22874,117419,22881,117421,1679],{},[87,117418,22843],{},[87,117420,7856],{},[87,117422,22901],{},[36,117424,117425,22906,117427,22909],{},[87,117426,22901],{},[87,117428,21730],{},[15,117430,22912],{},[22,117432,22916],{"id":22915},[3087,117434,117435,22922,117437],{"id":22919},[87,117436,18243],{},[87,117438,22880],{},[15,117440,117441,22929,117443,22932,117445,1025,117447,1025,117449,1025,117451,22942],{},[87,117442,18243],{},[87,117444,22880],{},[87,117446,4233],{},[87,117448,7856],{},[87,117450,22358],{},[87,117452,22941],{},[33,117454,117455,117459,117463],{},[36,117456,6304,117457,22949],{},[87,117458,4233],{},[36,117460,6304,117461,22954],{},[87,117462,7856],{},[36,117464,22957,117465,1025,117467,1025,117469,1025,117471,22967],{},[87,117466,21722],{},[87,117468,21730],{},[87,117470,21714],{},[87,117472,22966],{},[3087,117474,117475,22973],{"id":22970},[87,117476,2085],{},[15,117478,22976,117479,1679],{},[87,117480,22979],{},[15,117482,22982],{},[154,117484,117485],{"className":2879,"code":22985,"filename":22986,"language":2882,"meta":163,"style":163},[87,117486,117487,117499,117509,117517,117527,117533,117537,117549,117563,117571,117581,117585,117589,117593,117599],{"__ignoreMap":163},[167,117488,117489,117491,117493,117495,117497],{"class":169,"line":170},[167,117490,246],{"class":191},[167,117492,226],{"class":181},[167,117494,229],{"class":173},[167,117496,22999],{"class":254},[167,117498,258],{"class":173},[167,117500,117501,117503,117505,117507],{"class":169,"line":188},[167,117502,1443],{"class":191},[167,117504,23008],{"class":219},[167,117506,223],{"class":191},[167,117508,1905],{"class":173},[167,117510,117511,117513,117515],{"class":169,"line":205},[167,117512,22625],{"class":191},[167,117514,23019],{"class":181},[167,117516,763],{"class":173},[167,117518,117519,117521,117523,117525],{"class":169,"line":160},[167,117520,22645],{"class":181},[167,117522,23028],{"class":173},[167,117524,23031],{"class":201},[167,117526,235],{"class":173},[167,117528,117529,117531],{"class":169,"line":238},[167,117530,8767],{"class":191},[167,117532,23040],{"class":173},[167,117534,117535],{"class":169,"line":243},[167,117536,755],{"class":173},[167,117538,117539,117541,117543,117545,117547],{"class":169,"line":261},[167,117540,22669],{"class":191},[167,117542,23019],{"class":181},[167,117544,229],{"class":173},[167,117546,7868],{"class":254},[167,117548,258],{"class":173},[167,117550,117551,117553,117555,117557,117559,117561],{"class":169,"line":273},[167,117552,7261],{"class":191},[167,117554,2526],{"class":173},[167,117556,6641],{"class":191},[167,117558,22725],{"class":173},[167,117560,22728],{"class":181},[167,117562,23071],{"class":173},[167,117564,117565,117567,117569],{"class":169,"line":279},[167,117566,23076],{"class":173},[167,117568,267],{"class":191},[167,117570,23081],{"class":173},[167,117572,117573,117575,117577,117579],{"class":169,"line":289},[167,117574,22736],{"class":181},[167,117576,23028],{"class":173},[167,117578,23031],{"class":201},[167,117580,235],{"class":173},[167,117582,117583],{"class":169,"line":294},[167,117584,7287],{"class":173},[167,117586,117587],{"class":169,"line":304},[167,117588,4049],{"class":173},[167,117590,117591],{"class":169,"line":313},[167,117592,3492],{"class":173},[167,117594,117595,117597],{"class":169,"line":161},[167,117596,1539],{"class":191},[167,117598,23110],{"class":173},[167,117600,117601],{"class":169,"line":335},[167,117602,276],{"class":173},[15,117604,23117],{},[33,117606,117607,117611],{},[36,117608,23122,117609,23125],{},[87,117610,2085],{},[36,117612,23128,117613,23131],{},[87,117614,22979],{},[3087,117616,117617,23137,117619],{"id":23134},[87,117618,1661],{},[87,117620,22798],{},[15,117622,117623,23144,117625,23147],{},[87,117624,1661],{},[87,117626,22798],{},[3035,117628,117629,117633,117635,117637],{},[36,117630,23152,117631,1679],{},[87,117632,22979],{},[36,117634,23157],{},[36,117636,23160],{},[36,117638,23163,117639,21857,117641,23168],{},[87,117640,21824],{},[87,117642,22901],{},[15,117644,23171],{},[33,117646,117647,117651,117655],{},[36,117648,23176,117649],{},[87,117650,23179],{},[36,117652,23182,117653],{},[87,117654,23185],{},[36,117656,23188],{},[3087,117658,23192],{"id":23191},[15,117660,23195],{},[3035,117662,117663,117665,117667],{},[36,117664,23200],{},[36,117666,23203],{},[36,117668,23206],{},[15,117670,23209],{},[154,117672,117673],{"className":2879,"code":23212,"filename":23213,"language":2882,"meta":163,"style":163},[87,117674,117675,117689,117699,117715,117719,117731,117739,117747,117755,117767,117785,117793,117801,117805],{"__ignoreMap":163},[167,117676,117677,117679,117681,117683,117685,117687],{"class":169,"line":170},[167,117678,216],{"class":191},[167,117680,23222],{"class":219},[167,117682,223],{"class":191},[167,117684,4224],{"class":191},[167,117686,22324],{"class":181},[167,117688,2917],{"class":173},[167,117690,117691,117693,117695,117697],{"class":169,"line":188},[167,117692,13948],{"class":191},[167,117694,23237],{"class":173},[167,117696,267],{"class":191},[167,117698,5593],{"class":219},[167,117700,117701,117703,117705,117707,117709,117711,117713],{"class":169,"line":205},[167,117702,216],{"class":191},[167,117704,23248],{"class":219},[167,117706,223],{"class":191},[167,117708,23253],{"class":219},[167,117710,1679],{"class":173},[167,117712,23258],{"class":181},[167,117714,2917],{"class":173},[167,117716,117717],{"class":169,"line":160},[167,117718,209],{"emptyLinePlaceholder":208},[167,117720,117721,117723,117725,117727,117729],{"class":169,"line":238},[167,117722,246],{"class":191},[167,117724,23271],{"class":181},[167,117726,229],{"class":173},[167,117728,23276],{"class":254},[167,117730,258],{"class":173},[167,117732,117733,117735,117737],{"class":169,"line":243},[167,117734,23283],{"class":173},[167,117736,7859],{"class":181},[167,117738,23288],{"class":173},[167,117740,117741,117743,117745],{"class":169,"line":261},[167,117742,2544],{"class":191},[167,117744,23295],{"class":173},[167,117746,2556],{"class":191},[167,117748,117749,117751,117753],{"class":169,"line":273},[167,117750,23302],{"class":173},[167,117752,267],{"class":191},[167,117754,3487],{"class":219},[167,117756,117757,117759,117761,117763,117765],{"class":169,"line":279},[167,117758,23311],{"class":173},[167,117760,18179],{"class":181},[167,117762,1493],{"class":173},[167,117764,639],{"class":191},[167,117766,1905],{"class":173},[167,117768,117769,117771,117773,117775,117777,117779,117781,117783],{"class":169,"line":289},[167,117770,23324],{"class":173},[167,117772,22495],{"class":181},[167,117774,1918],{"class":173},[167,117776,23331],{"class":254},[167,117778,693],{"class":173},[167,117780,639],{"class":191},[167,117782,23338],{"class":181},[167,117784,2509],{"class":173},[167,117786,117787,117789,117791],{"class":169,"line":294},[167,117788,23324],{"class":173},[167,117790,23347],{"class":181},[167,117792,2917],{"class":173},[167,117794,117795,117797,117799],{"class":169,"line":304},[167,117796,23354],{"class":173},[167,117798,267],{"class":191},[167,117800,5593],{"class":219},[167,117802,117803],{"class":169,"line":313},[167,117804,8347],{"class":173},[167,117806,117807],{"class":169,"line":161},[167,117808,276],{"class":173},[15,117810,23369],{},[22,117812,3085],{"id":3084},[3087,117814,23375],{"id":23374},[154,117816,117817],{"className":2879,"code":23378,"filename":23379,"language":2882,"meta":163,"style":163},[87,117818,117819,117835],{"__ignoreMap":163},[167,117820,117821,117823,117825,117827,117829,117831,117833],{"class":169,"line":170},[167,117822,216],{"class":191},[167,117824,22773],{"class":219},[167,117826,223],{"class":191},[167,117828,846],{"class":181},[167,117830,22780],{"class":173},[167,117832,1960],{"class":219},[167,117834,2242],{"class":173},[167,117836,117837,117839,117841,117843,117845,117847,117849],{"class":169,"line":188},[167,117838,216],{"class":191},[167,117840,577],{"class":173},[167,117842,23406],{"class":219},[167,117844,23409],{"class":173},[167,117846,267],{"class":191},[167,117848,23414],{"class":173},[167,117850,23417],{"class":18662},[15,117852,23420],{},[33,117854,117855,117859],{},[36,117856,3180,117857],{},[87,117858,23427],{},[36,117860,23430,117861,1679],{},[87,117862,22843],{},[3087,117864,23436],{"id":23435},[15,117866,23439,117867,23442,117869,23445,117871,1679],{},[87,117868,22880],{},[87,117870,22901],{},[87,117872,22979],{},[3087,117874,117875,1662,117877],{"id":23450},[87,117876,23453],{},[87,117878,2085],{},[15,117880,117881,23460,117883,23463],{},[87,117882,23453],{},[87,117884,22979],{},[154,117886,117887],{"className":2879,"code":23466,"filename":23467,"language":2882,"meta":163,"style":163},[87,117888,117889,117905,117915],{"__ignoreMap":163},[167,117890,117891,117893,117895,117897,117899,117901,117903],{"class":169,"line":170},[167,117892,216],{"class":191},[167,117894,23476],{"class":219},[167,117896,223],{"class":191},[167,117898,23481],{"class":181},[167,117900,23484],{"class":173},[167,117902,23487],{"class":201},[167,117904,2242],{"class":173},[167,117906,117907,117909,117911,117913],{"class":169,"line":188},[167,117908,23494],{"class":173},[167,117910,267],{"class":191},[167,117912,23499],{"class":201},[167,117914,23502],{"class":18662},[167,117916,117917,117919,117921,117923,117925,117927,117929,117931],{"class":169,"line":205},[167,117918,23507],{"class":173},[167,117920,267],{"class":191},[167,117922,577],{"class":173},[167,117924,23514],{"class":191},[167,117926,23517],{"class":173},[167,117928,23520],{"class":201},[167,117930,23409],{"class":173},[167,117932,23525],{"class":18662},[15,117934,23528],{},[33,117936,117937,117939,117941],{},[36,117938,23533],{},[36,117940,23536],{},[36,117942,23539],{},[3087,117944,23543],{"id":23542},[15,117946,23546],{},[33,117948,117949,117953,117957,117963],{},[36,117950,23551,117951,23554],{},[87,117952,1668],{},[36,117954,23557,117955,23554],{},[87,117956,1661],{},[36,117958,3180,117959,23564,117961,23567],{},[87,117960,1668],{},[87,117962,1661],{},[36,117964,23570],{},[22,117966,23574],{"id":23573},[15,117968,23577],{},[33,117970,117971,117973,117975],{},[36,117972,23582],{},[36,117974,23585],{},[36,117976,23588],{},[15,117978,23591],{},[33,117980,117981,117983,117985],{},[36,117982,23596],{},[36,117984,23599],{},[36,117986,23602,117987,1025,117989,1025,117991,1025,117993,1025,117995,23613],{},[87,117988,2085],{},[87,117990,18243],{},[87,117992,23453],{},[87,117994,1661],{},[87,117996,1665],{},[5367,117998,117999],{},[15,118000,23618],{},[924,118002,23621],{},{"title":163,"searchDepth":188,"depth":188,"links":118004},[118005,118006,118011,118014,118020,118026],{"id":21636,"depth":188,"text":21637},{"id":21668,"depth":188,"text":21669,"children":118007},[118008,118009,118010],{"id":21672,"depth":205,"text":21673},{"id":21703,"depth":205,"text":21704},{"id":21786,"depth":205,"text":23630},{"id":21850,"depth":188,"text":21851,"children":118012},[118013],{"id":22857,"depth":205,"text":22858},{"id":22915,"depth":188,"text":22916,"children":118015},[118016,118017,118018,118019],{"id":22919,"depth":205,"text":23637},{"id":22970,"depth":205,"text":23639},{"id":23134,"depth":205,"text":23641},{"id":23191,"depth":205,"text":23192},{"id":3084,"depth":188,"text":3085,"children":118021},[118022,118023,118024,118025],{"id":23374,"depth":205,"text":23375},{"id":23435,"depth":205,"text":23436},{"id":23450,"depth":205,"text":23648},{"id":23542,"depth":205,"text":23543},{"id":23573,"depth":188,"text":23574},{"updatedAt":23655,"coverCaption":23656,"author":946,"keywords":118028},[951,3259,23658,22561,23659,1661],[118030],{"headline":21616,"author":118031,"datePublished":23655,"@type":961},{"name":946,"@type":959},{"title":21616,"description":23653},[118034,118035,118036,118037],{"tag":3269,"color":3270},{"tag":953,"color":971},{"tag":3273,"color":3274},{"tag":7730,"color":7731},{"id":118039,"title":118040,"body":118041,"cover":55594,"coverAlt":118825,"date":55596,"description":118826,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":118827,"navigation":208,"path":118830,"schemaOrg":118831,"seo":118834,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":118835,"tags":118836,"__hash__":118842},"blog\u002Fblog\u002Fvue-beta-vapor-mode-revealed.en.md","Vue 3.6 Beta: The Vapor Mode Revolution and the New Reactivity Engine",{"type":8,"value":118042,"toc":118804},[118043,118046,118056,118061,118065,118075,118079,118086,118089,118130,118138,118145,118151,118155,118164,118171,118177,118200,118205,118232,118236,118239,118243,118331,118340,118344,118357,118361,118364,118508,118514,118518,118607,118611,118614,118618,118630,118642,118654,118666,118670,118676,118748,118752,118758,118790,118792,118802],[11,118044,118040],{"id":118045},"vue-36-beta-the-vapor-mode-revolution-and-the-new-reactivity-engine",[15,118047,118048,118049,118052,118053,118055],{},"The Vue ecosystem has reached a turning point with the release of ",[3933,118050,118051],{},"version 3.6.0-beta.1",".\nThis update is not an incremental step; it's a deep re-engineering that prepares Vue for a future where the ",[3933,118054,54770],{}," is no longer the absolute protagonist.",[15,118057,118058,118059,1679],{},"In this article, we break down the two pillars of this beta: the arrival of \"Feature Parity\" in Vapor Mode and the new signals engine inspired by ",[87,118060,54777],{},[22,118062,118064],{"id":118063},"vapor-mode-achieving-feature-parity","Vapor Mode: Achieving \"Feature Parity\"",[15,118066,118067,118068,118070,118071,118074],{},"Until recently, ",[3933,118069,54787],{}," was a promising but limited experiment.\nWith version 3.6, the core team announces that ",[3933,118072,118073],{},"Feature Parity"," has been achieved.",[3087,118076,118078],{"id":118077},"what-does-feature-parity-mean-exactly","What does \"Feature Parity\" mean exactly?",[15,118080,118081,118082,118085],{},"In software development, this term means that a new implementation (in this case, the Vapor compiler) is now capable of doing ",[3933,118083,118084],{},"exactly the same"," as the original implementation (the standard VDOM compiler).",[15,118087,118088],{},"For us developers, this means that Vapor is no longer just for \"simple components\". It now supports:",[33,118090,118091,118104,118118],{},[36,118092,118093,118096,118097,1025,118099,118101,118102,1679],{},[3933,118094,118095],{},"Full control directives:"," Complex handling of ",[87,118098,13496],{},[87,118100,30726],{}," (with optimized node movement algorithms), and ",[87,118103,23865],{},[36,118105,118106,118109,118110,118112,118113,118115,118116,1679],{},[3933,118107,118108],{},"Component Architecture:"," Support for ",[9295,118111,51400],{},", dynamic components (",[87,118114,54832],{},"), and ",[87,118117,13446],{},[36,118119,118120,118123,118124,118126,118127,118129],{},[3933,118121,118122],{},"Built-in features:"," Native support for ",[87,118125,54844],{}," and the ",[87,118128,54848],{}," system.",[5367,118131,118132],{},[15,118133,118134,118137],{},[3933,118135,118136],{},"In summary:"," Feature parity allows a complex production component to be compiled in Vapor mode without losing any Vue feature, while gaining unprecedented execution speed.",[22,118139,118141,118142,118144],{"id":118140},"refactoring-vuereactivity-the-alien-effect","Refactoring ",[87,118143,54863],{},": The \"Alien\" Effect",[15,118146,118147,118148,118150],{},"The big technical surprise in Vue 3.6 is the integration of ",[3933,118149,54777],{}," concepts (an ultra-fast signals library created by Johnson Chu, a core team member) into Vue's core.",[3087,118152,118154],{"id":118153},"why-change-the-signals-engine","Why change the signals' engine?",[15,118156,118157,118158,118160,118161,118163],{},"Vue 3's reactivity system based on ",[87,118159,22880],{}," was excellent, but it suffered in two areas: memory usage and dependency cleanup.\nThe adoption of the ",[87,118162,54777],{}," model solves this by changing the internal data structure.",[29777,118165,118167,118168,118170],{"id":118166},"the-technical-change-from-set-to-linked-lists","The technical change: From ",[87,118169,21730],{}," to Linked Lists",[15,118172,118173,118174,118176],{},"Traditionally, Vue stored \"subscribers\" (the effects that must execute when data changes) in ",[87,118175,21730],{}," objects.",[33,118178,118179,118190],{},[36,118180,118181,118184,118185,118187,118188,1679],{},[3933,118182,118183],{},"The Problem:"," Creating thousands of ",[87,118186,21730],{}," objects consumes a lot of memory and stresses the ",[9295,118189,54909],{},[36,118191,118192,118195,118196,118199],{},[3933,118193,118194],{},"The Solution:"," The new engine uses a ",[3933,118197,118198],{},"Doubly Linked List",". Subscriptions connect to each other like links in a chain.",[15,118201,118202],{},[3933,118203,118204],{},"The real benefits are impressive:",[3035,118206,118207,118217,118223],{},[36,118208,118209,118212,118213,118216],{},[3933,118210,118211],{},"Memory Reduction:"," Up to ",[3933,118214,118215],{},"14% - 20% less consumption"," in applications with high state density.",[36,118218,118219,118222],{},[3933,118220,118221],{},"O(1) Operations:"," Adding or removing a reactive subscription now has a constant cost, regardless of how many dependencies exist.",[36,118224,118225,118228,118229,118231],{},[3933,118226,118227],{},"Smart Computed:"," The cleanup algorithm has been refined, preventing ",[87,118230,1661],{}," properties from being unnecessarily recalculated when dependencies haven't actually changed.",[22,118233,118235],{"id":118234},"comparison-vnode-vs-vapor-mode","Comparison: VNode vs. Vapor Mode",[15,118237,118238],{},"To understand why this is a revolution, let's compare what happens \"under the hood\" with a basic component.",[3087,118240,118242],{"id":118241},"source-code","Source Code",[154,118244,118246],{"className":156,"code":118245,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Counter: {{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,118247,118248,118258,118268,118284,118292,118296,118304,118323],{"__ignoreMap":163},[167,118249,118250,118252,118254,118256],{"class":169,"line":170},[167,118251,174],{"class":173},[167,118253,178],{"class":177},[167,118255,182],{"class":181},[167,118257,185],{"class":173},[167,118259,118260,118262,118264,118266],{"class":169,"line":188},[167,118261,192],{"class":191},[167,118263,195],{"class":173},[167,118265,198],{"class":191},[167,118267,202],{"class":201},[167,118269,118270,118272,118274,118276,118278,118280,118282],{"class":169,"line":205},[167,118271,216],{"class":191},[167,118273,15325],{"class":219},[167,118275,223],{"class":191},[167,118277,226],{"class":181},[167,118279,229],{"class":173},[167,118281,1960],{"class":219},[167,118283,235],{"class":173},[167,118285,118286,118288,118290],{"class":169,"line":160},[167,118287,282],{"class":173},[167,118289,178],{"class":177},[167,118291,185],{"class":173},[167,118293,118294],{"class":169,"line":238},[167,118295,209],{"emptyLinePlaceholder":208},[167,118297,118298,118300,118302],{"class":169,"line":243},[167,118299,174],{"class":173},[167,118301,299],{"class":177},[167,118303,185],{"class":173},[167,118305,118306,118308,118310,118312,118314,118316,118319,118321],{"class":169,"line":261},[167,118307,307],{"class":173},[167,118309,507],{"class":177},[167,118311,1182],{"class":181},[167,118313,267],{"class":173},[167,118315,18386],{"class":201},[167,118317,118318],{"class":173},">Counter: {{ count }}\u003C\u002F",[167,118320,507],{"class":177},[167,118322,185],{"class":173},[167,118324,118325,118327,118329],{"class":169,"line":273},[167,118326,282],{"class":173},[167,118328,299],{"class":177},[167,118330,185],{"class":173},[154,118332,118334],{"className":156,"code":118333,"filename":3973,"language":162,"meta":163,"style":163},"\u002F\u002F Vapor Mode is exclusive to the Composition API. There is no support available for the Options API.\n",[87,118335,118336],{"__ignoreMap":163},[167,118337,118338],{"class":169,"line":170},[167,118339,118333],{"class":173},[3087,118341,118343],{"id":118342},"the-traditional-approach-virtual-dom","The traditional approach (Virtual DOM)",[15,118345,118346,118347,118349,118350,118353,118354,118356],{},"Vue creates a JavaScript object (VNode) that represents the button. When ",[87,118348,23406],{}," changes, Vue creates a ",[3933,118351,118352],{},"new"," VNode, compares both (",[9295,118355,55075],{},"), and decides which part of the real DOM to update. This happens in milliseconds, but has a CPU and memory cost.",[3087,118358,118360],{"id":118359},"the-vapor-approach-straight-to-the-point","The Vapor approach (Straight to the point)",[15,118362,118363],{},"The Vapor compiler generates code that \"points\" directly to the button's text node.",[154,118365,118367],{"className":51866,"code":118366,"filename":55087,"language":51870,"meta":163,"style":163},"import { delegateEvents, t, setInterpolation, renderEffect } from '@vue\u002Fruntime-vapor'\n\nconst t0 = t('\u003Cbutton>\u003C\u002Fbutton>') \u002F\u002F Static template\n\nexport function render(_ctx) {\n  const el0 = t0() \n  delegateEvents(el0, 'click', () => _ctx.count++)\n  \n  \u002F\u002F No tree comparison. There's a direct \"link\".\n  renderEffect(() => {\n    setInterpolation(el0, () => `Counter: ${_ctx.count}`)\n  })\n  \n  return el0\n}\n",[87,118368,118369,118379,118383,118402,118406,118420,118432,118450,118454,118459,118469,118490,118494,118498,118504],{"__ignoreMap":163},[167,118370,118371,118373,118375,118377],{"class":169,"line":170},[167,118372,192],{"class":191},[167,118374,55096],{"class":173},[167,118376,198],{"class":191},[167,118378,55101],{"class":201},[167,118380,118381],{"class":169,"line":188},[167,118382,209],{"emptyLinePlaceholder":208},[167,118384,118385,118387,118389,118391,118393,118395,118397,118399],{"class":169,"line":205},[167,118386,216],{"class":191},[167,118388,55112],{"class":219},[167,118390,223],{"class":191},[167,118392,55117],{"class":181},[167,118394,229],{"class":173},[167,118396,55122],{"class":201},[167,118398,693],{"class":173},[167,118400,118401],{"class":18662},"\u002F\u002F Static template\n",[167,118403,118404],{"class":169,"line":160},[167,118405,209],{"emptyLinePlaceholder":208},[167,118407,118408,118410,118412,118414,118416,118418],{"class":169,"line":238},[167,118409,608],{"class":191},[167,118411,1432],{"class":191},[167,118413,55140],{"class":181},[167,118415,229],{"class":173},[167,118417,55145],{"class":254},[167,118419,258],{"class":173},[167,118421,118422,118424,118426,118428,118430],{"class":169,"line":243},[167,118423,1443],{"class":191},[167,118425,55154],{"class":219},[167,118427,223],{"class":191},[167,118429,55112],{"class":181},[167,118431,55161],{"class":173},[167,118433,118434,118436,118438,118440,118442,118444,118446,118448],{"class":169,"line":261},[167,118435,55166],{"class":181},[167,118437,55169],{"class":173},[167,118439,55172],{"class":201},[167,118441,55175],{"class":173},[167,118443,639],{"class":191},[167,118445,55180],{"class":173},[167,118447,54500],{"class":191},[167,118449,235],{"class":173},[167,118451,118452],{"class":169,"line":273},[167,118453,48367],{"class":173},[167,118455,118456],{"class":169,"line":279},[167,118457,118458],{"class":18662},"  \u002F\u002F No tree comparison. There's a direct \"link\".\n",[167,118460,118461,118463,118465,118467],{"class":169,"line":289},[167,118462,55198],{"class":181},[167,118464,1493],{"class":173},[167,118466,639],{"class":191},[167,118468,1905],{"class":173},[167,118470,118471,118473,118475,118477,118480,118482,118484,118486,118488],{"class":169,"line":294},[167,118472,55209],{"class":181},[167,118474,55212],{"class":173},[167,118476,639],{"class":191},[167,118478,118479],{"class":201}," `Counter: ${",[167,118481,55145],{"class":173},[167,118483,1679],{"class":201},[167,118485,23406],{"class":173},[167,118487,2360],{"class":201},[167,118489,235],{"class":173},[167,118491,118492],{"class":169,"line":304},[167,118493,8347],{"class":173},[167,118495,118496],{"class":169,"line":313},[167,118497,48367],{"class":173},[167,118499,118500,118502],{"class":169,"line":161},[167,118501,1539],{"class":191},[167,118503,55242],{"class":173},[167,118505,118506],{"class":169,"line":335},[167,118507,276],{"class":173},[15,118509,118510,118513],{},[3933,118511,118512],{},"Result:"," Zero Virtual DOM, zero comparison algorithms, only direct DOM manipulation with maximum efficiency.",[22,118515,118517],{"id":118516},"performance-and-capabilities-table","Performance and Capabilities Table",[56,118519,118520,118530],{},[59,118521,118522],{},[62,118523,118524,118526,118528],{},[65,118525,103980],{},[65,118527,55267],{},[65,118529,55270],{},[75,118531,118532,118546,118562,118577,118592],{},[62,118533,118534,118539,118541],{},[80,118535,118536],{},[3933,118537,118538],{},"Internal Structure",[80,118540,54770],{},[80,118542,118543],{},[3933,118544,118545],{},"VDOM-less (Direct)",[62,118547,118548,118553,118558],{},[80,118549,118550],{},[3933,118551,118552],{},"Signals Engine",[80,118554,118555,118556],{},"Based on ",[87,118557,21730],{},[80,118559,118560],{},[3933,118561,118198],{},[62,118563,118564,118569,118572],{},[80,118565,118566],{},[3933,118567,118568],{},"Memory Consumption",[80,118570,118571],{},"Standard baseline",[80,118573,118574],{},[3933,118575,118576],{},"~14% lower",[62,118578,118579,118584,118587],{},[80,118580,118581],{},[3933,118582,118583],{},"Interoperability",[80,118585,118586],{},"Complete",[80,118588,118589,118590,6219],{},"High (via ",[87,118591,55333],{},[62,118593,118594,118599,118602],{},[80,118595,118596],{},[3933,118597,118598],{},"Recommended for",[80,118600,118601],{},"General apps, massive SSR",[80,118603,118604],{},[3933,118605,118606],{},"IoT Devices, Heavy Dashboards, Web Components",[22,118608,118610],{"id":118609},"how-to-get-started","How to Get Started?",[15,118612,118613],{},"To experiment with these improvements, you need to use the beta version and configure your Vite environment to recognize Vapor mode.",[3087,118615,118617],{"id":118616},"step-1-installation","Step 1: Installation",[154,118619,118620],{"className":55362,"code":55363,"filename":55364,"language":55365,"meta":163,"style":163},[87,118621,118622],{"__ignoreMap":163},[167,118623,118624,118626,118628],{"class":169,"line":170},[167,118625,55364],{"class":181},[167,118627,55374],{"class":201},[167,118629,55377],{"class":201},[154,118631,118632],{"className":55362,"code":55380,"filename":55381,"language":55365,"meta":163,"style":163},[87,118633,118634],{"__ignoreMap":163},[167,118635,118636,118638,118640],{"class":169,"line":170},[167,118637,55381],{"class":181},[167,118639,55390],{"class":201},[167,118641,55377],{"class":201},[154,118643,118644],{"className":55362,"code":55395,"filename":55396,"language":55365,"meta":163,"style":163},[87,118645,118646],{"__ignoreMap":163},[167,118647,118648,118650,118652],{"class":169,"line":170},[167,118649,55396],{"class":181},[167,118651,55390],{"class":201},[167,118653,55377],{"class":201},[154,118655,118656],{"className":55362,"code":55409,"filename":55410,"language":55365,"meta":163,"style":163},[87,118657,118658],{"__ignoreMap":163},[167,118659,118660,118662,118664],{"class":169,"line":170},[167,118661,55410],{"class":181},[167,118663,55390],{"class":201},[167,118665,55377],{"class":201},[3087,118667,118669],{"id":118668},"step-2-vite-configuration","Step 2: Vite Configuration",[15,118671,118672,118673,118675],{},"Enable support for ",[87,118674,55430],{}," files (the recommended convention for differentiating components):",[154,118677,118680],{"className":51866,"code":118678,"filename":55435,"highlights":118679,"language":51870,"meta":163,"style":163},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      vapor: true \u002F\u002F Enable the Vapor compiler\n    })\n  ]\n})\n",[261],[87,118681,118682,118692,118702,118706,118716,118720,118726,118736,118740,118744],{"__ignoreMap":163},[167,118683,118684,118686,118688,118690],{"class":169,"line":170},[167,118685,192],{"class":191},[167,118687,55445],{"class":173},[167,118689,198],{"class":191},[167,118691,55450],{"class":201},[167,118693,118694,118696,118698,118700],{"class":169,"line":188},[167,118695,192],{"class":191},[167,118697,55457],{"class":173},[167,118699,198],{"class":191},[167,118701,55462],{"class":201},[167,118703,118704],{"class":169,"line":205},[167,118705,209],{"emptyLinePlaceholder":208},[167,118707,118708,118710,118712,118714],{"class":169,"line":160},[167,118709,608],{"class":191},[167,118711,3991],{"class":191},[167,118713,55475],{"class":181},[167,118715,372],{"class":173},[167,118717,118718],{"class":169,"line":238},[167,118719,55482],{"class":173},[167,118721,118722,118724],{"class":169,"line":243},[167,118723,55487],{"class":181},[167,118725,372],{"class":173},[167,118727,118729,118731,118733],{"class":118728,"line":261},[169,213],[167,118730,55495],{"class":173},[167,118732,390],{"class":219},[167,118734,118735],{"class":18662}," \u002F\u002F Enable the Vapor compiler\n",[167,118737,118738],{"class":169,"line":273},[167,118739,8926],{"class":173},[167,118741,118742],{"class":169,"line":279},[167,118743,55509],{"class":173},[167,118745,118746],{"class":169,"line":289},[167,118747,403],{"class":173},[3087,118749,118751],{"id":118750},"step-3-using-components","Step 3: Using Components",[15,118753,118754,118755,118757],{},"You can mix standard and Vapor components. To force a component to use the new engine, use the ",[87,118756,55430],{}," extension or define the script block:",[154,118759,118762],{"className":156,"code":118760,"filename":55527,"highlights":118761,"language":162,"meta":163,"style":163},"\u003Cscript setup vapor>\n\u002F\u002F This component will compile without Virtual DOM\n\u003C\u002Fscript>\n",[170],[87,118763,118764,118777,118782],{"__ignoreMap":163},[167,118765,118767,118769,118771,118773,118775],{"class":118766,"line":170},[169,213],[167,118768,174],{"class":173},[167,118770,178],{"class":177},[167,118772,182],{"class":181},[167,118774,55542],{"class":181},[167,118776,185],{"class":173},[167,118778,118779],{"class":169,"line":188},[167,118780,118781],{"class":18662},"\u002F\u002F This component will compile without Virtual DOM\n",[167,118783,118784,118786,118788],{"class":169,"line":205},[167,118785,282],{"class":173},[167,118787,178],{"class":177},[167,118789,185],{"class":173},[22,118791,73913],{"id":73912},[15,118793,118794,118795,118798,118799,118801],{},"Vue 3.6 is not just an update; it's a clear message to the community: ",[3933,118796,118797],{},"Vue can be as fast and lightweight as any other framework, without sacrificing its beloved syntax."," By integrating the efficiency of ",[87,118800,54777],{}," and achieving functional parity with Vapor, Vue positions itself as the most flexible and powerful framework for the next decade of web development.",[924,118803,55572],{},{"title":163,"searchDepth":188,"depth":188,"links":118805},[118806,118809,118813,118818,118819,118824],{"id":118063,"depth":188,"text":118064,"children":118807},[118808],{"id":118077,"depth":205,"text":118078},{"id":118140,"depth":188,"text":118810,"children":118811},"Refactoring @vue\u002Freactivity: The \"Alien\" Effect",[118812],{"id":118153,"depth":205,"text":118154},{"id":118234,"depth":188,"text":118235,"children":118814},[118815,118816,118817],{"id":118241,"depth":205,"text":118242},{"id":118342,"depth":205,"text":118343},{"id":118359,"depth":205,"text":118360},{"id":118516,"depth":188,"text":118517},{"id":118609,"depth":188,"text":118610,"children":118820},[118821,118822,118823],{"id":118616,"depth":205,"text":118617},{"id":118668,"depth":205,"text":118669},{"id":118750,"depth":205,"text":118751},{"id":73912,"depth":188,"text":73913},"Vue.js logo on a source code background","Explore the new features of Vue 3.6 Beta, including Vapor Mode and the alien-signals integration for more efficient reactivity.",{"updatedAt":54736,"coverCaption":118828,"author":946,"keywords":118829},"Discover the innovations in Vue 3.6 Beta: Vapor Mode and a revamped reactivity engine","vue 3.6, vapor mode, alien-signals, reactivity, javascript, framework, frontend, beta","\u002Fblog\u002Fvue-beta-vapor-mode-revealed.en",[118832],{"headline":118040,"author":118833,"datePublished":55605,"@type":961},{"name":946,"@type":959},{"title":118040,"description":118826},"blog\u002Fvue-beta-vapor-mode-revealed.en",[118837,118838,118839,118840,118841],{"tag":55610,"color":55611},{"tag":54787,"color":55613},{"tag":60269,"color":3270},{"tag":103274,"color":55617},{"tag":60271,"color":7731},"Dg-ES6Mlw7OuQae9KUklZZ8DPH6hdjGUKpeIEIKJLCQ",{"id":54755,"title":54742,"body":118844,"cover":55594,"coverAlt":55595,"date":55596,"description":55597,"draft":940,"extension":941,"lab":942,"locale":943,"meta":119504,"navigation":208,"path":55601,"schemaOrg":119505,"seo":119508,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":55607,"tags":119509,"__hash__":55619},{"type":8,"value":118845,"toc":119484},[118846,118848,118854,118858,118860,118866,118868,118872,118874,118904,118910,118914,118918,118920,118926,118930,118934,118950,118954,118972,118974,118976,118978,119064,119072,119074,119082,119084,119086,119226,119230,119232,119308,119310,119312,119314,119326,119338,119350,119362,119364,119368,119438,119440,119444,119474,119476,119482],[11,118847,54742],{"id":54760},[15,118849,54763,118850,54767,118852,54771],{},[3933,118851,54766],{},[3933,118853,54770],{},[15,118855,54774,118856,1679],{},[87,118857,54777],{},[22,118859,54781],{"id":54780},[15,118861,54784,118862,54788,118864,1679],{},[3933,118863,54787],{},[3933,118865,54791],{},[3087,118867,54795],{"id":54794},[15,118869,54798,118870,54802],{},[3933,118871,54801],{},[15,118873,54805],{},[33,118875,118876,118886,118896],{},[36,118877,118878,54813,118880,1025,118882,54818,118884,1679],{},[3933,118879,54812],{},[87,118881,13496],{},[87,118883,30726],{},[87,118885,23865],{},[36,118887,118888,54826,118890,54829,118892,54833,118894,1679],{},[3933,118889,54825],{},[9295,118891,51400],{},[87,118893,54832],{},[87,118895,13446],{},[36,118897,118898,54841,118900,54845,118902,1679],{},[3933,118899,54840],{},[87,118901,54844],{},[87,118903,54848],{},[5367,118905,118906],{},[15,118907,118908,54856],{},[3933,118909,54855],{},[22,118911,54860,118912,54864],{"id":54859},[87,118913,54863],{},[15,118915,54867,118916,54870],{},[3933,118917,54777],{},[3087,118919,54874],{"id":54873},[15,118921,54877,118922,54880,118924,54883],{},[87,118923,22880],{},[87,118925,54777],{},[29777,118927,54887,118928,54890],{"id":54886},[87,118929,21730],{},[15,118931,54893,118932,1679],{},[87,118933,21730],{},[33,118935,118936,118944],{},[36,118937,118938,54903,118940,54906,118942,4270],{},[3933,118939,54902],{},[87,118941,21730],{},[9295,118943,54909],{},[36,118945,118946,54915,118948,54919],{},[3933,118947,54914],{},[3933,118949,54918],{},[15,118951,118952],{},[3933,118953,54924],{},[3035,118955,118956,118962,118966],{},[36,118957,118958,54932,118960,54936],{},[3933,118959,54931],{},[3933,118961,54935],{},[36,118963,118964,54942],{},[3933,118965,54941],{},[36,118967,118968,54948,118970,54951],{},[3933,118969,54947],{},[87,118971,1661],{},[22,118973,54955],{"id":54954},[15,118975,54958],{},[3087,118977,54962],{"id":54961},[154,118979,118980],{"className":156,"code":54965,"filename":3260,"language":162,"meta":163,"style":163},[87,118981,118982,118992,119002,119018,119026,119030,119038,119056],{"__ignoreMap":163},[167,118983,118984,118986,118988,118990],{"class":169,"line":170},[167,118985,174],{"class":173},[167,118987,178],{"class":177},[167,118989,182],{"class":181},[167,118991,185],{"class":173},[167,118993,118994,118996,118998,119000],{"class":169,"line":188},[167,118995,192],{"class":191},[167,118997,195],{"class":173},[167,118999,198],{"class":191},[167,119001,202],{"class":201},[167,119003,119004,119006,119008,119010,119012,119014,119016],{"class":169,"line":205},[167,119005,216],{"class":191},[167,119007,15325],{"class":219},[167,119009,223],{"class":191},[167,119011,226],{"class":181},[167,119013,229],{"class":173},[167,119015,1960],{"class":219},[167,119017,235],{"class":173},[167,119019,119020,119022,119024],{"class":169,"line":160},[167,119021,282],{"class":173},[167,119023,178],{"class":177},[167,119025,185],{"class":173},[167,119027,119028],{"class":169,"line":238},[167,119029,209],{"emptyLinePlaceholder":208},[167,119031,119032,119034,119036],{"class":169,"line":243},[167,119033,174],{"class":173},[167,119035,299],{"class":177},[167,119037,185],{"class":173},[167,119039,119040,119042,119044,119046,119048,119050,119052,119054],{"class":169,"line":261},[167,119041,307],{"class":173},[167,119043,507],{"class":177},[167,119045,1182],{"class":181},[167,119047,267],{"class":173},[167,119049,18386],{"class":201},[167,119051,55038],{"class":173},[167,119053,507],{"class":177},[167,119055,185],{"class":173},[167,119057,119058,119060,119062],{"class":169,"line":273},[167,119059,282],{"class":173},[167,119061,299],{"class":177},[167,119063,185],{"class":173},[154,119065,119066],{"className":156,"code":55053,"filename":3973,"language":162,"meta":163,"style":163},[87,119067,119068],{"__ignoreMap":163},[167,119069,119070],{"class":169,"line":170},[167,119071,55053],{"class":173},[3087,119073,55063],{"id":55062},[15,119075,55066,119076,55069,119078,55072,119080,55076],{},[87,119077,23406],{},[3933,119079,52753],{},[9295,119081,55075],{},[3087,119083,55080],{"id":55079},[15,119085,55083],{},[154,119087,119088],{"className":51866,"code":55086,"filename":55087,"language":51870,"meta":163,"style":163},[87,119089,119090,119100,119104,119122,119126,119140,119152,119170,119174,119178,119188,119208,119212,119216,119222],{"__ignoreMap":163},[167,119091,119092,119094,119096,119098],{"class":169,"line":170},[167,119093,192],{"class":191},[167,119095,55096],{"class":173},[167,119097,198],{"class":191},[167,119099,55101],{"class":201},[167,119101,119102],{"class":169,"line":188},[167,119103,209],{"emptyLinePlaceholder":208},[167,119105,119106,119108,119110,119112,119114,119116,119118,119120],{"class":169,"line":205},[167,119107,216],{"class":191},[167,119109,55112],{"class":219},[167,119111,223],{"class":191},[167,119113,55117],{"class":181},[167,119115,229],{"class":173},[167,119117,55122],{"class":201},[167,119119,693],{"class":173},[167,119121,55127],{"class":18662},[167,119123,119124],{"class":169,"line":160},[167,119125,209],{"emptyLinePlaceholder":208},[167,119127,119128,119130,119132,119134,119136,119138],{"class":169,"line":238},[167,119129,608],{"class":191},[167,119131,1432],{"class":191},[167,119133,55140],{"class":181},[167,119135,229],{"class":173},[167,119137,55145],{"class":254},[167,119139,258],{"class":173},[167,119141,119142,119144,119146,119148,119150],{"class":169,"line":243},[167,119143,1443],{"class":191},[167,119145,55154],{"class":219},[167,119147,223],{"class":191},[167,119149,55112],{"class":181},[167,119151,55161],{"class":173},[167,119153,119154,119156,119158,119160,119162,119164,119166,119168],{"class":169,"line":261},[167,119155,55166],{"class":181},[167,119157,55169],{"class":173},[167,119159,55172],{"class":201},[167,119161,55175],{"class":173},[167,119163,639],{"class":191},[167,119165,55180],{"class":173},[167,119167,54500],{"class":191},[167,119169,235],{"class":173},[167,119171,119172],{"class":169,"line":273},[167,119173,48367],{"class":173},[167,119175,119176],{"class":169,"line":279},[167,119177,55193],{"class":18662},[167,119179,119180,119182,119184,119186],{"class":169,"line":289},[167,119181,55198],{"class":181},[167,119183,1493],{"class":173},[167,119185,639],{"class":191},[167,119187,1905],{"class":173},[167,119189,119190,119192,119194,119196,119198,119200,119202,119204,119206],{"class":169,"line":294},[167,119191,55209],{"class":181},[167,119193,55212],{"class":173},[167,119195,639],{"class":191},[167,119197,55217],{"class":201},[167,119199,55145],{"class":173},[167,119201,1679],{"class":201},[167,119203,23406],{"class":173},[167,119205,2360],{"class":201},[167,119207,235],{"class":173},[167,119209,119210],{"class":169,"line":304},[167,119211,8347],{"class":173},[167,119213,119214],{"class":169,"line":313},[167,119215,48367],{"class":173},[167,119217,119218,119220],{"class":169,"line":161},[167,119219,1539],{"class":191},[167,119221,55242],{"class":173},[167,119223,119224],{"class":169,"line":335},[167,119225,276],{"class":173},[15,119227,119228,55252],{},[3933,119229,55251],{},[22,119231,55256],{"id":55255},[56,119233,119234,119244],{},[59,119235,119236],{},[62,119237,119238,119240,119242],{},[65,119239,51979],{},[65,119241,55267],{},[65,119243,55270],{},[75,119245,119246,119258,119272,119284,119296],{},[62,119247,119248,119252,119254],{},[80,119249,119250],{},[3933,119251,55279],{},[80,119253,54770],{},[80,119255,119256],{},[3933,119257,55286],{},[62,119259,119260,119264,119268],{},[80,119261,119262],{},[3933,119263,55293],{},[80,119265,55296,119266],{},[87,119267,21730],{},[80,119269,119270],{},[3933,119271,54918],{},[62,119273,119274,119278,119280],{},[80,119275,119276],{},[3933,119277,55309],{},[80,119279,55312],{},[80,119281,119282],{},[3933,119283,55317],{},[62,119285,119286,119290,119292],{},[80,119287,119288],{},[3933,119289,55324],{},[80,119291,55327],{},[80,119293,55330,119294,6219],{},[87,119295,55333],{},[62,119297,119298,119302,119304],{},[80,119299,119300],{},[3933,119301,55340],{},[80,119303,55343],{},[80,119305,119306],{},[3933,119307,55348],{},[22,119309,55352],{"id":55351},[15,119311,55355],{},[3087,119313,55359],{"id":55358},[154,119315,119316],{"className":55362,"code":55363,"filename":55364,"language":55365,"meta":163,"style":163},[87,119317,119318],{"__ignoreMap":163},[167,119319,119320,119322,119324],{"class":169,"line":170},[167,119321,55364],{"class":181},[167,119323,55374],{"class":201},[167,119325,55377],{"class":201},[154,119327,119328],{"className":55362,"code":55380,"filename":55381,"language":55365,"meta":163,"style":163},[87,119329,119330],{"__ignoreMap":163},[167,119331,119332,119334,119336],{"class":169,"line":170},[167,119333,55381],{"class":181},[167,119335,55390],{"class":201},[167,119337,55377],{"class":201},[154,119339,119340],{"className":55362,"code":55395,"filename":55396,"language":55365,"meta":163,"style":163},[87,119341,119342],{"__ignoreMap":163},[167,119343,119344,119346,119348],{"class":169,"line":170},[167,119345,55396],{"class":181},[167,119347,55390],{"class":201},[167,119349,55377],{"class":201},[154,119351,119352],{"className":55362,"code":55409,"filename":55410,"language":55365,"meta":163,"style":163},[87,119353,119354],{"__ignoreMap":163},[167,119355,119356,119358,119360],{"class":169,"line":170},[167,119357,55410],{"class":181},[167,119359,55390],{"class":201},[167,119361,55377],{"class":201},[3087,119363,55424],{"id":55423},[15,119365,55427,119366,55431],{},[87,119367,55430],{},[154,119369,119371],{"className":51866,"code":55434,"filename":55435,"highlights":119370,"language":51870,"meta":163,"style":163},[261],[87,119372,119373,119383,119393,119397,119407,119411,119417,119426,119430,119434],{"__ignoreMap":163},[167,119374,119375,119377,119379,119381],{"class":169,"line":170},[167,119376,192],{"class":191},[167,119378,55445],{"class":173},[167,119380,198],{"class":191},[167,119382,55450],{"class":201},[167,119384,119385,119387,119389,119391],{"class":169,"line":188},[167,119386,192],{"class":191},[167,119388,55457],{"class":173},[167,119390,198],{"class":191},[167,119392,55462],{"class":201},[167,119394,119395],{"class":169,"line":205},[167,119396,209],{"emptyLinePlaceholder":208},[167,119398,119399,119401,119403,119405],{"class":169,"line":160},[167,119400,608],{"class":191},[167,119402,3991],{"class":191},[167,119404,55475],{"class":181},[167,119406,372],{"class":173},[167,119408,119409],{"class":169,"line":238},[167,119410,55482],{"class":173},[167,119412,119413,119415],{"class":169,"line":243},[167,119414,55487],{"class":181},[167,119416,372],{"class":173},[167,119418,119420,119422,119424],{"class":119419,"line":261},[169,213],[167,119421,55495],{"class":173},[167,119423,390],{"class":219},[167,119425,55500],{"class":18662},[167,119427,119428],{"class":169,"line":273},[167,119429,8926],{"class":173},[167,119431,119432],{"class":169,"line":279},[167,119433,55509],{"class":173},[167,119435,119436],{"class":169,"line":289},[167,119437,403],{"class":173},[3087,119439,55517],{"id":55516},[15,119441,55520,119442,55523],{},[87,119443,55430],{},[154,119445,119447],{"className":156,"code":55526,"filename":55527,"highlights":119446,"language":162,"meta":163,"style":163},[170],[87,119448,119449,119462,119466],{"__ignoreMap":163},[167,119450,119452,119454,119456,119458,119460],{"class":119451,"line":170},[169,213],[167,119453,174],{"class":173},[167,119455,178],{"class":177},[167,119457,182],{"class":181},[167,119459,55542],{"class":181},[167,119461,185],{"class":173},[167,119463,119464],{"class":169,"line":188},[167,119465,55549],{"class":18662},[167,119467,119468,119470,119472],{"class":169,"line":205},[167,119469,282],{"class":173},[167,119471,178],{"class":177},[167,119473,185],{"class":173},[22,119475,23574],{"id":23573},[15,119477,55562,119478,55566,119480,55569],{},[3933,119479,55565],{},[87,119481,54777],{},[924,119483,55572],{},{"title":163,"searchDepth":188,"depth":188,"links":119485},[119486,119489,119492,119497,119498,119503],{"id":54780,"depth":188,"text":54781,"children":119487},[119488],{"id":54794,"depth":205,"text":54795},{"id":54859,"depth":188,"text":55579,"children":119490},[119491],{"id":54873,"depth":205,"text":54874},{"id":54954,"depth":188,"text":54955,"children":119493},[119494,119495,119496],{"id":54961,"depth":205,"text":54962},{"id":55062,"depth":205,"text":55063},{"id":55079,"depth":205,"text":55080},{"id":55255,"depth":188,"text":55256},{"id":55351,"depth":188,"text":55352,"children":119499},[119500,119501,119502],{"id":55358,"depth":205,"text":55359},{"id":55423,"depth":205,"text":55424},{"id":55516,"depth":205,"text":55517},{"id":23573,"depth":188,"text":23574},{"updatedAt":54736,"coverCaption":55599,"author":946,"keywords":55600},[119506],{"headline":54742,"author":119507,"datePublished":55605,"@type":961},{"name":946,"@type":959},{"title":54742,"description":55597},[119510,119511,119512,119513,119514],{"tag":55610,"color":55611},{"tag":54787,"color":55613},{"tag":3269,"color":3270},{"tag":55616,"color":55617},{"tag":7730,"color":7731},{"id":119516,"title":119517,"body":119518,"cover":3240,"coverAlt":120959,"date":3242,"description":120960,"draft":940,"extension":941,"lab":120961,"locale":60249,"meta":120971,"navigation":208,"path":120974,"schemaOrg":120975,"seo":120978,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":120979,"tags":120980,"__hash__":120985},"blog\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.en.md","Vue computed vs watch vs watchEffect: When to Use Each One",{"type":8,"value":119519,"toc":120937},[119520,119530,119539,119542,119545,119548,119552,119557,119562,119567,119628,119635,119638,119641,119875,119882,119888,119902,119913,119919,119922,120052,120058,120063,120169,120174,120180,120183,120186,120205,120208,120462,120470,120473,120479,120484,120487,120604,120612,120615,120621,120626,120629,120667,120673,120711,120717,120759,120762,120766,120769,120774,120778,120783,120787,120792,120796,120801,120806,120811,120816,120818,120824,120827,120865,120871,120875,120878,120892,120897,120903,120908,120913,120917,120922,120927,120932,120935],[11,119521,1658,119523,1662,119525,1662,119527,119529],{"id":119522},"vue-computed-vs-watch-vs-watcheffect-when-to-use-each-one",[87,119524,1661],{},[87,119526,1665],{},[87,119528,1668],{},": When to Use Each One",[15,119531,119532,119533,1025,119535,57860,119537,1679],{},"Vue gives you three tools that often appear in the same conversation: ",[87,119534,1661],{},[87,119536,1665],{},[87,119538,1668],{},[15,119540,119541],{},"They all react to state, but they do not solve the same problem.",[15,119543,119544],{},"If you mix them up, components start to feel unpredictable. Values update from too many places, API calls fire more often than expected, and logic that should be simple becomes hard to debug. If you choose the right tool, the code almost explains itself.",[15,119546,119547],{},"This guide is a practical decision map.",[22,119549,119551],{"id":119550},"the-short-version","The short version",[15,119553,62955,119554,119556],{},[87,119555,1661],{}," when you need a value.",[15,119558,62955,119559,119561],{},[87,119560,1665],{}," when you need to do something because a specific value changed.",[15,119563,62955,119564,119566],{},[87,119565,1668],{}," when the effect should automatically track everything it reads.",[56,119568,119569,119585],{},[59,119570,119571],{},[62,119572,119573,119576,119579,119582],{},[65,119574,119575],{},"Tool",[65,119577,119578],{},"Best for",[65,119580,119581],{},"Should return a value?",[65,119583,119584],{},"Should cause side effects?",[75,119586,119587,119601,119614],{},[62,119588,119589,119593,119596,119599],{},[80,119590,119591],{},[87,119592,1661],{},[80,119594,119595],{},"Derived state",[80,119597,119598],{},"Yes",[80,119600,1742],{},[62,119602,119603,119607,119610,119612],{},[80,119604,119605],{},[87,119606,1665],{},[80,119608,119609],{},"Explicit reactions",[80,119611,1742],{},[80,119613,119598],{},[62,119615,119616,119620,119623,119625],{},[80,119617,119618],{},[87,119619,1668],{},[80,119621,119622],{},"Auto-tracked effects",[80,119624,1742],{},[80,119626,119627],{},"Yes, carefully",[22,119629,119631,119632,119634],{"id":119630},"start-with-computed-when-you-need-derived-state","Start with ",[87,119633,1661],{}," when you need derived state",[15,119636,119637],{},"A computed value answers the question: \"What value can I derive from existing state?\"",[15,119639,119640],{},"For example, imagine a cart summary:",[154,119642,119644],{"className":156,"code":119643,"filename":1786,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst items = ref([\n  { id: 1, name: 'Vue stickers', price: 6, quantity: 2 },\n  { id: 2, name: 'Nuxt notebook', price: 14, quantity: 1 }\n])\n\nconst subtotal = computed(() => {\n  return items.value.reduce((total, item) => {\n    return total + item.price * item.quantity\n  }, 0)\n})\n\nconst hasFreeShipping = computed(() => subtotal.value >= 30)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Subtotal: {{ subtotal }}\u003C\u002Fp>\n  \u003Cp>{{ hasFreeShipping ? 'Free shipping unlocked' : 'Shipping is calculated at checkout' }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[87,119645,119646,119656,119666,119670,119682,119703,119724,119728,119732,119748,119770,119784,119792,119796,119800,119822,119830,119834,119842,119854,119867],{"__ignoreMap":163},[167,119647,119648,119650,119652,119654],{"class":169,"line":170},[167,119649,174],{"class":173},[167,119651,178],{"class":177},[167,119653,182],{"class":181},[167,119655,185],{"class":173},[167,119657,119658,119660,119662,119664],{"class":169,"line":188},[167,119659,192],{"class":191},[167,119661,1805],{"class":173},[167,119663,198],{"class":191},[167,119665,202],{"class":201},[167,119667,119668],{"class":169,"line":205},[167,119669,209],{"emptyLinePlaceholder":208},[167,119671,119672,119674,119676,119678,119680],{"class":169,"line":160},[167,119673,216],{"class":191},[167,119675,1820],{"class":219},[167,119677,223],{"class":191},[167,119679,226],{"class":181},[167,119681,1827],{"class":173},[167,119683,119684,119686,119688,119690,119693,119695,119697,119699,119701],{"class":169,"line":238},[167,119685,1832],{"class":173},[167,119687,1835],{"class":219},[167,119689,1838],{"class":173},[167,119691,119692],{"class":201},"'Vue stickers'",[167,119694,1844],{"class":173},[167,119696,1847],{"class":219},[167,119698,1850],{"class":173},[167,119700,1853],{"class":219},[167,119702,1856],{"class":173},[167,119704,119705,119707,119709,119711,119714,119716,119718,119720,119722],{"class":169,"line":243},[167,119706,1832],{"class":173},[167,119708,1853],{"class":219},[167,119710,1838],{"class":173},[167,119712,119713],{"class":201},"'Nuxt notebook'",[167,119715,1844],{"class":173},[167,119717,1872],{"class":219},[167,119719,1850],{"class":173},[167,119721,1835],{"class":219},[167,119723,599],{"class":173},[167,119725,119726],{"class":169,"line":261},[167,119727,429],{"class":173},[167,119729,119730],{"class":169,"line":273},[167,119731,209],{"emptyLinePlaceholder":208},[167,119733,119734,119736,119738,119740,119742,119744,119746],{"class":169,"line":279},[167,119735,216],{"class":191},[167,119737,1893],{"class":219},[167,119739,223],{"class":191},[167,119741,1898],{"class":181},[167,119743,1493],{"class":173},[167,119745,639],{"class":191},[167,119747,1905],{"class":173},[167,119749,119750,119752,119754,119756,119758,119760,119762,119764,119766,119768],{"class":169,"line":289},[167,119751,1539],{"class":191},[167,119753,1912],{"class":173},[167,119755,1915],{"class":181},[167,119757,1918],{"class":173},[167,119759,1921],{"class":254},[167,119761,1025],{"class":173},[167,119763,1926],{"class":254},[167,119765,693],{"class":173},[167,119767,639],{"class":191},[167,119769,1905],{"class":173},[167,119771,119772,119774,119776,119778,119780,119782],{"class":169,"line":294},[167,119773,1937],{"class":191},[167,119775,1940],{"class":173},[167,119777,1943],{"class":191},[167,119779,1946],{"class":173},[167,119781,1949],{"class":191},[167,119783,1952],{"class":173},[167,119785,119786,119788,119790],{"class":169,"line":304},[167,119787,1957],{"class":173},[167,119789,1960],{"class":219},[167,119791,235],{"class":173},[167,119793,119794],{"class":169,"line":313},[167,119795,403],{"class":173},[167,119797,119798],{"class":169,"line":161},[167,119799,209],{"emptyLinePlaceholder":208},[167,119801,119802,119804,119806,119808,119810,119812,119814,119816,119818,119820],{"class":169,"line":335},[167,119803,216],{"class":191},[167,119805,1977],{"class":219},[167,119807,223],{"class":191},[167,119809,1898],{"class":181},[167,119811,1493],{"class":173},[167,119813,639],{"class":191},[167,119815,1988],{"class":173},[167,119817,1991],{"class":191},[167,119819,1994],{"class":219},[167,119821,235],{"class":173},[167,119823,119824,119826,119828],{"class":169,"line":341},[167,119825,282],{"class":173},[167,119827,178],{"class":177},[167,119829,185],{"class":173},[167,119831,119832],{"class":169,"line":489},[167,119833,209],{"emptyLinePlaceholder":208},[167,119835,119836,119838,119840],{"class":169,"line":495},[167,119837,174],{"class":173},[167,119839,299],{"class":177},[167,119841,185],{"class":173},[167,119843,119844,119846,119848,119850,119852],{"class":169,"line":501},[167,119845,307],{"class":173},[167,119847,15],{"class":177},[167,119849,2025],{"class":173},[167,119851,15],{"class":177},[167,119853,185],{"class":173},[167,119855,119856,119858,119860,119863,119865],{"class":169,"line":512},[167,119857,307],{"class":173},[167,119859,15],{"class":177},[167,119861,119862],{"class":173},">{{ hasFreeShipping ? 'Free shipping unlocked' : 'Shipping is calculated at checkout' }}\u003C\u002F",[167,119864,15],{"class":177},[167,119866,185],{"class":173},[167,119868,119869,119871,119873],{"class":169,"line":781},[167,119870,282],{"class":173},[167,119872,299],{"class":177},[167,119874,185],{"class":173},[15,119876,119877,119879,119880,1679],{},[87,119878,2055],{}," is not a second source of truth. It is a value derived from ",[87,119881,2059],{},[15,119883,119884,119885,119887],{},"That is exactly where ",[87,119886,1661],{}," shines:",[33,119889,119890,119893,119896,119899],{},[36,119891,119892],{},"It is cached.",[36,119894,119895],{},"It updates when its dependencies change.",[36,119897,119898],{},"It keeps templates readable.",[36,119900,119901],{},"It avoids duplicating state.",[15,119903,119904,119905,119907,119908,119910,119911,1679],{},"If you are tempted to create a ",[87,119906,2085],{}," and manually keep it in sync with another ",[87,119909,2085],{},", pause. Most of the time, that synced value should be a ",[87,119912,1661],{},[22,119914,91721,119916,119918],{"id":119915},"do-not-use-watch-to-create-a-derived-value",[87,119917,1665],{}," to create a derived value",[15,119920,119921],{},"This is a common mistake:",[154,119923,119924],{"className":156,"code":2104,"filename":2105,"language":162,"meta":163,"style":163},[87,119925,119926,119936,119946,119950,119966,119982,119998,120002,120012,120036,120044],{"__ignoreMap":163},[167,119927,119928,119930,119932,119934],{"class":169,"line":170},[167,119929,174],{"class":173},[167,119931,178],{"class":177},[167,119933,182],{"class":181},[167,119935,185],{"class":173},[167,119937,119938,119940,119942,119944],{"class":169,"line":188},[167,119939,192],{"class":191},[167,119941,2124],{"class":173},[167,119943,198],{"class":191},[167,119945,202],{"class":201},[167,119947,119948],{"class":169,"line":205},[167,119949,209],{"emptyLinePlaceholder":208},[167,119951,119952,119954,119956,119958,119960,119962,119964],{"class":169,"line":160},[167,119953,216],{"class":191},[167,119955,2139],{"class":219},[167,119957,223],{"class":191},[167,119959,226],{"class":181},[167,119961,229],{"class":173},[167,119963,2148],{"class":201},[167,119965,235],{"class":173},[167,119967,119968,119970,119972,119974,119976,119978,119980],{"class":169,"line":238},[167,119969,216],{"class":191},[167,119971,2157],{"class":219},[167,119973,223],{"class":191},[167,119975,226],{"class":181},[167,119977,229],{"class":173},[167,119979,2166],{"class":201},[167,119981,235],{"class":173},[167,119983,119984,119986,119988,119990,119992,119994,119996],{"class":169,"line":243},[167,119985,216],{"class":191},[167,119987,2175],{"class":219},[167,119989,223],{"class":191},[167,119991,226],{"class":181},[167,119993,229],{"class":173},[167,119995,2184],{"class":201},[167,119997,235],{"class":173},[167,119999,120000],{"class":169,"line":261},[167,120001,209],{"emptyLinePlaceholder":208},[167,120003,120004,120006,120008,120010],{"class":169,"line":273},[167,120005,1665],{"class":181},[167,120007,2197],{"class":173},[167,120009,639],{"class":191},[167,120011,1905],{"class":173},[167,120013,120014,120016,120018,120020,120022,120024,120026,120028,120030,120032,120034],{"class":169,"line":279},[167,120015,2206],{"class":173},[167,120017,267],{"class":191},[167,120019,2211],{"class":201},[167,120021,2214],{"class":173},[167,120023,1679],{"class":201},[167,120025,2219],{"class":173},[167,120027,2222],{"class":201},[167,120029,2225],{"class":173},[167,120031,1679],{"class":201},[167,120033,2219],{"class":173},[167,120035,2232],{"class":201},[167,120037,120038,120040,120042],{"class":169,"line":289},[167,120039,2237],{"class":173},[167,120041,390],{"class":219},[167,120043,2242],{"class":173},[167,120045,120046,120048,120050],{"class":169,"line":294},[167,120047,282],{"class":173},[167,120049,178],{"class":177},[167,120051,185],{"class":173},[15,120053,120054,120055,120057],{},"It works, but it makes the component harder than it needs to be. Now ",[87,120056,2256],{}," is a writable piece of state that must stay synchronized forever.",[15,120059,62955,120060,120062],{},[87,120061,1661],{}," instead:",[154,120064,120065],{"className":156,"code":2264,"filename":2265,"language":162,"meta":163,"style":163},[87,120066,120067,120077,120087,120091,120107,120123,120127,120161],{"__ignoreMap":163},[167,120068,120069,120071,120073,120075],{"class":169,"line":170},[167,120070,174],{"class":173},[167,120072,178],{"class":177},[167,120074,182],{"class":181},[167,120076,185],{"class":173},[167,120078,120079,120081,120083,120085],{"class":169,"line":188},[167,120080,192],{"class":191},[167,120082,1805],{"class":173},[167,120084,198],{"class":191},[167,120086,202],{"class":201},[167,120088,120089],{"class":169,"line":205},[167,120090,209],{"emptyLinePlaceholder":208},[167,120092,120093,120095,120097,120099,120101,120103,120105],{"class":169,"line":160},[167,120094,216],{"class":191},[167,120096,2139],{"class":219},[167,120098,223],{"class":191},[167,120100,226],{"class":181},[167,120102,229],{"class":173},[167,120104,2148],{"class":201},[167,120106,235],{"class":173},[167,120108,120109,120111,120113,120115,120117,120119,120121],{"class":169,"line":238},[167,120110,216],{"class":191},[167,120112,2157],{"class":219},[167,120114,223],{"class":191},[167,120116,226],{"class":181},[167,120118,229],{"class":173},[167,120120,2166],{"class":201},[167,120122,235],{"class":173},[167,120124,120125],{"class":169,"line":243},[167,120126,209],{"emptyLinePlaceholder":208},[167,120128,120129,120131,120133,120135,120137,120139,120141,120143,120145,120147,120149,120151,120153,120155,120157,120159],{"class":169,"line":261},[167,120130,216],{"class":191},[167,120132,2175],{"class":219},[167,120134,223],{"class":191},[167,120136,1898],{"class":181},[167,120138,1493],{"class":173},[167,120140,639],{"class":191},[167,120142,2211],{"class":201},[167,120144,2214],{"class":173},[167,120146,1679],{"class":201},[167,120148,2219],{"class":173},[167,120150,2222],{"class":201},[167,120152,2225],{"class":173},[167,120154,1679],{"class":201},[167,120156,2219],{"class":173},[167,120158,2360],{"class":201},[167,120160,235],{"class":173},[167,120162,120163,120165,120167],{"class":169,"line":273},[167,120164,282],{"class":173},[167,120166,178],{"class":177},[167,120168,185],{"class":173},[15,120170,120171,120172,1679],{},"The rule is simple: if the result can be calculated from reactive state, prefer ",[87,120173,1661],{},[22,120175,62955,120177,120179],{"id":120176},"use-watch-for-explicit-side-effects",[87,120178,1665],{}," for explicit side effects",[15,120181,120182],{},"A watcher answers a different question: \"When this specific thing changes, what should happen?\"",[15,120184,120185],{},"That \"happen\" is usually a side effect:",[33,120187,120188,120191,120196,120199,120202],{},[36,120189,120190],{},"Fetch data.",[36,120192,120193,120194,1679],{},"Write to ",[87,120195,2398],{},[36,120197,120198],{},"Reset pagination.",[36,120200,120201],{},"Sync a query string.",[36,120203,120204],{},"Call a browser API.",[15,120206,120207],{},"Here is a search example:",[154,120209,120211],{"className":156,"code":120210,"filename":2414,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, async (value, previousValue) => {\n  if (value === previousValue) return\n\n  page.value = 1\n  await fetchResults(value)\n})\n\nasync function fetchResults(value) {\n  console.log('Fetching results for:', value)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" type=\"search\" placeholder=\"Search\">\n  \u003Cp>Page: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[87,120212,120213,120223,120233,120237,120253,120269,120273,120297,120301,120323,120335,120339,120347,120355,120359,120363,120377,120390,120394,120402,120406,120414,120441,120454],{"__ignoreMap":163},[167,120214,120215,120217,120219,120221],{"class":169,"line":170},[167,120216,174],{"class":173},[167,120218,178],{"class":177},[167,120220,182],{"class":181},[167,120222,185],{"class":173},[167,120224,120225,120227,120229,120231],{"class":169,"line":188},[167,120226,192],{"class":191},[167,120228,2433],{"class":173},[167,120230,198],{"class":191},[167,120232,202],{"class":201},[167,120234,120235],{"class":169,"line":205},[167,120236,209],{"emptyLinePlaceholder":208},[167,120238,120239,120241,120243,120245,120247,120249,120251],{"class":169,"line":160},[167,120240,216],{"class":191},[167,120242,2448],{"class":219},[167,120244,223],{"class":191},[167,120246,226],{"class":181},[167,120248,229],{"class":173},[167,120250,2184],{"class":201},[167,120252,235],{"class":173},[167,120254,120255,120257,120259,120261,120263,120265,120267],{"class":169,"line":238},[167,120256,216],{"class":191},[167,120258,2465],{"class":219},[167,120260,223],{"class":191},[167,120262,226],{"class":181},[167,120264,229],{"class":173},[167,120266,1835],{"class":219},[167,120268,235],{"class":173},[167,120270,120271],{"class":169,"line":243},[167,120272,209],{"emptyLinePlaceholder":208},[167,120274,120275,120277,120279,120281,120283,120285,120287,120289,120291,120293,120295],{"class":169,"line":261},[167,120276,216],{"class":191},[167,120278,2486],{"class":219},[167,120280,223],{"class":191},[167,120282,1898],{"class":181},[167,120284,1493],{"class":173},[167,120286,639],{"class":191},[167,120288,2497],{"class":173},[167,120290,2500],{"class":181},[167,120292,2503],{"class":173},[167,120294,2506],{"class":181},[167,120296,2509],{"class":173},[167,120298,120299],{"class":169,"line":273},[167,120300,209],{"emptyLinePlaceholder":208},[167,120302,120303,120305,120307,120309,120311,120313,120315,120317,120319,120321],{"class":169,"line":279},[167,120304,1665],{"class":181},[167,120306,2520],{"class":173},[167,120308,2523],{"class":191},[167,120310,2526],{"class":173},[167,120312,2219],{"class":254},[167,120314,1025],{"class":173},[167,120316,2533],{"class":254},[167,120318,693],{"class":173},[167,120320,639],{"class":191},[167,120322,1905],{"class":173},[167,120324,120325,120327,120329,120331,120333],{"class":169,"line":289},[167,120326,2544],{"class":191},[167,120328,2547],{"class":173},[167,120330,2550],{"class":191},[167,120332,2553],{"class":173},[167,120334,2556],{"class":191},[167,120336,120337],{"class":169,"line":294},[167,120338,209],{"emptyLinePlaceholder":208},[167,120340,120341,120343,120345],{"class":169,"line":304},[167,120342,2565],{"class":173},[167,120344,267],{"class":191},[167,120346,2570],{"class":219},[167,120348,120349,120351,120353],{"class":169,"line":313},[167,120350,2575],{"class":191},[167,120352,2578],{"class":181},[167,120354,2581],{"class":173},[167,120356,120357],{"class":169,"line":161},[167,120358,403],{"class":173},[167,120360,120361],{"class":169,"line":335},[167,120362,209],{"emptyLinePlaceholder":208},[167,120364,120365,120367,120369,120371,120373,120375],{"class":169,"line":341},[167,120366,2523],{"class":191},[167,120368,1432],{"class":191},[167,120370,2578],{"class":181},[167,120372,229],{"class":173},[167,120374,2219],{"class":254},[167,120376,258],{"class":173},[167,120378,120379,120381,120383,120385,120388],{"class":169,"line":489},[167,120380,2608],{"class":173},[167,120382,2611],{"class":181},[167,120384,229],{"class":173},[167,120386,120387],{"class":201},"'Fetching results for:'",[167,120389,2619],{"class":173},[167,120391,120392],{"class":169,"line":495},[167,120393,276],{"class":173},[167,120395,120396,120398,120400],{"class":169,"line":501},[167,120397,282],{"class":173},[167,120399,178],{"class":177},[167,120401,185],{"class":173},[167,120403,120404],{"class":169,"line":512},[167,120405,209],{"emptyLinePlaceholder":208},[167,120407,120408,120410,120412],{"class":169,"line":781},[167,120409,174],{"class":173},[167,120411,299],{"class":177},[167,120413,185],{"class":173},[167,120415,120416,120418,120420,120422,120424,120426,120428,120430,120432,120434,120436,120439],{"class":169,"line":786},[167,120417,307],{"class":173},[167,120419,2650],{"class":177},[167,120421,2653],{"class":181},[167,120423,267],{"class":173},[167,120425,2658],{"class":201},[167,120427,1174],{"class":181},[167,120429,267],{"class":173},[167,120431,2665],{"class":201},[167,120433,2668],{"class":181},[167,120435,267],{"class":173},[167,120437,120438],{"class":201},"\"Search\"",[167,120440,185],{"class":173},[167,120442,120443,120445,120447,120450,120452],{"class":169,"line":2678},[167,120444,307],{"class":173},[167,120446,15],{"class":177},[167,120448,120449],{"class":173},">Page: {{ page }}\u003C\u002F",[167,120451,15],{"class":177},[167,120453,185],{"class":173},[167,120455,120456,120458,120460],{"class":169,"line":2692},[167,120457,282],{"class":173},[167,120459,299],{"class":177},[167,120461,185],{"class":173},[15,120463,120464,120465,120467,120468,1679],{},"This is a good use of ",[87,120466,1665],{}," because the source is explicit: ",[87,120469,2707],{},[15,120471,120472],{},"You can read the code and know exactly why the fetch happens.",[22,120474,62955,120476,120478],{"id":120475},"use-watcheffect-for-automatic-tracking",[87,120477,1668],{}," for automatic tracking",[15,120480,120481,120483],{},[87,120482,1668],{}," runs immediately and tracks every reactive value read during its execution.",[15,120485,120486],{},"That makes it convenient when the dependency list is obvious from the body:",[154,120488,120490],{"className":156,"code":120489,"filename":2728,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, watchEffect } from 'vue'\n\nconst userId = ref(1)\nconst locale = ref('en')\n\nwatchEffect(() => {\n  console.log(`Load user ${userId.value} using locale ${locale.value}`)\n})\n\u003C\u002Fscript>\n",[87,120491,120492,120502,120512,120516,120532,120548,120552,120562,120592,120596],{"__ignoreMap":163},[167,120493,120494,120496,120498,120500],{"class":169,"line":170},[167,120495,174],{"class":173},[167,120497,178],{"class":177},[167,120499,182],{"class":181},[167,120501,185],{"class":173},[167,120503,120504,120506,120508,120510],{"class":169,"line":188},[167,120505,192],{"class":191},[167,120507,2747],{"class":173},[167,120509,198],{"class":191},[167,120511,202],{"class":201},[167,120513,120514],{"class":169,"line":205},[167,120515,209],{"emptyLinePlaceholder":208},[167,120517,120518,120520,120522,120524,120526,120528,120530],{"class":169,"line":160},[167,120519,216],{"class":191},[167,120521,2762],{"class":219},[167,120523,223],{"class":191},[167,120525,226],{"class":181},[167,120527,229],{"class":173},[167,120529,1835],{"class":219},[167,120531,235],{"class":173},[167,120533,120534,120536,120538,120540,120542,120544,120546],{"class":169,"line":238},[167,120535,216],{"class":191},[167,120537,2779],{"class":219},[167,120539,223],{"class":191},[167,120541,226],{"class":181},[167,120543,229],{"class":173},[167,120545,53291],{"class":201},[167,120547,235],{"class":173},[167,120549,120550],{"class":169,"line":243},[167,120551,209],{"emptyLinePlaceholder":208},[167,120553,120554,120556,120558,120560],{"class":169,"line":261},[167,120555,1668],{"class":181},[167,120557,1493],{"class":173},[167,120559,639],{"class":191},[167,120561,1905],{"class":173},[167,120563,120564,120566,120568,120570,120573,120575,120577,120579,120582,120584,120586,120588,120590],{"class":169,"line":273},[167,120565,2608],{"class":173},[167,120567,2611],{"class":181},[167,120569,229],{"class":173},[167,120571,120572],{"class":201},"`Load user ${",[167,120574,2818],{"class":173},[167,120576,1679],{"class":201},[167,120578,2219],{"class":173},[167,120580,120581],{"class":201},"} using locale ${",[167,120583,2828],{"class":173},[167,120585,1679],{"class":201},[167,120587,2219],{"class":173},[167,120589,2360],{"class":201},[167,120591,235],{"class":173},[167,120593,120594],{"class":169,"line":279},[167,120595,403],{"class":173},[167,120597,120598,120600,120602],{"class":169,"line":289},[167,120599,282],{"class":173},[167,120601,178],{"class":177},[167,120603,185],{"class":173},[15,120605,120606,120607,57920,120609,120611],{},"The effect reads ",[87,120608,2854],{},[87,120610,2857],{},", so Vue tracks both. When either changes, the effect runs again.",[15,120613,120614],{},"This is expressive, but it also requires discipline. If you read more reactive values later, you also add more dependencies. Sometimes that is exactly what you want. Sometimes it turns into a surprise.",[22,120616,120618,120619],{"id":120617},"be-careful-with-async-watcheffect","Be careful with async ",[87,120620,1668],{},[15,120622,120623,120625],{},[87,120624,1668],{}," only tracks reactive reads that happen during its synchronous execution.",[15,120627,120628],{},"This part is tracked:",[154,120630,120631],{"className":2879,"code":2880,"filename":2881,"language":2882,"meta":163,"style":163},[87,120632,120633,120647,120655,120663],{"__ignoreMap":163},[167,120634,120635,120637,120639,120641,120643,120645],{"class":169,"line":170},[167,120636,1668],{"class":181},[167,120638,229],{"class":173},[167,120640,2523],{"class":191},[167,120642,1469],{"class":173},[167,120644,639],{"class":191},[167,120646,1905],{"class":173},[167,120648,120649,120651,120653],{"class":169,"line":188},[167,120650,2608],{"class":173},[167,120652,2611],{"class":181},[167,120654,2907],{"class":173},[167,120656,120657,120659,120661],{"class":169,"line":205},[167,120658,2575],{"class":191},[167,120660,2914],{"class":181},[167,120662,2917],{"class":173},[167,120664,120665],{"class":169,"line":160},[167,120666,403],{"class":173},[15,120668,120669,120670,120672],{},"But reactive reads after ",[87,120671,2927],{}," are easier to misunderstand:",[154,120674,120675],{"className":2879,"code":2931,"filename":2932,"language":2882,"meta":163,"style":163},[87,120676,120677,120691,120699,120707],{"__ignoreMap":163},[167,120678,120679,120681,120683,120685,120687,120689],{"class":169,"line":170},[167,120680,1668],{"class":181},[167,120682,229],{"class":173},[167,120684,2523],{"class":191},[167,120686,1469],{"class":173},[167,120688,639],{"class":191},[167,120690,1905],{"class":173},[167,120692,120693,120695,120697],{"class":169,"line":188},[167,120694,2575],{"class":191},[167,120696,2914],{"class":181},[167,120698,2917],{"class":173},[167,120700,120701,120703,120705],{"class":169,"line":205},[167,120702,2608],{"class":173},[167,120704,2611],{"class":181},[167,120706,2907],{"class":173},[167,120708,120709],{"class":169,"line":160},[167,120710,403],{"class":173},[15,120712,120713,120714,120716],{},"If an async effect depends on a specific source, ",[87,120715,1665],{}," is usually clearer:",[154,120718,120719],{"className":2879,"code":2977,"filename":2978,"language":2882,"meta":163,"style":163},[87,120720,120721,120739,120751],{"__ignoreMap":163},[167,120722,120723,120725,120727,120729,120731,120733,120735,120737],{"class":169,"line":170},[167,120724,1665],{"class":181},[167,120726,2987],{"class":173},[167,120728,2523],{"class":191},[167,120730,2526],{"class":173},[167,120732,580],{"class":254},[167,120734,693],{"class":173},[167,120736,639],{"class":191},[167,120738,1905],{"class":173},[167,120740,120741,120743,120745,120747,120749],{"class":169,"line":188},[167,120742,3004],{"class":173},[167,120744,267],{"class":191},[167,120746,3009],{"class":191},[167,120748,3012],{"class":181},[167,120750,3015],{"class":173},[167,120752,120753,120755,120757],{"class":169,"line":205},[167,120754,2237],{"class":173},[167,120756,390],{"class":219},[167,120758,2242],{"class":173},[15,120760,120761],{},"The dependency is explicit. Future readers do not need to inspect the body to know what triggers the request.",[22,120763,120765],{"id":120764},"a-practical-decision-tree","A practical decision tree",[15,120767,120768],{},"Ask these questions in order:",[3035,120770,120771],{},[36,120772,120773],{},"Do I need a value for the template or another calculation?",[15,120775,62955,120776,1679],{},[87,120777,1661],{},[3035,120779,120780],{"start":188},[36,120781,120782],{},"Do I need to run code because one specific source changed?",[15,120784,62955,120785,1679],{},[87,120786,1665],{},[3035,120788,120789],{"start":205},[36,120790,120791],{},"Do I need an effect that naturally depends on everything it reads?",[15,120793,62955,120794,1679],{},[87,120795,1668],{},[3035,120797,120798],{"start":160},[36,120799,120800],{},"Am I writing to another ref just to keep it synchronized?",[15,120802,120803,120804,1679],{},"You probably want ",[87,120805,1661],{},[3035,120807,120808],{"start":238},[36,120809,120810],{},"Is the effect making a request, touching storage, or coordinating with something outside Vue?",[15,120812,120803,120813,120815],{},[87,120814,1665],{},", unless auto-tracking is truly the point.",[22,120817,63002],{"id":57819},[3087,120819,120821,120822],{"id":120820},"mutating-state-inside-computed","Mutating state inside ",[87,120823,1661],{},[15,120825,120826],{},"A computed getter should not change state.",[154,120828,120829],{"className":2879,"code":3098,"filename":3099,"language":2882,"meta":163,"style":163},[87,120830,120831,120847,120853,120861],{"__ignoreMap":163},[167,120832,120833,120835,120837,120839,120841,120843,120845],{"class":169,"line":170},[167,120834,216],{"class":191},[167,120836,3108],{"class":219},[167,120838,223],{"class":191},[167,120840,1898],{"class":181},[167,120842,1493],{"class":173},[167,120844,639],{"class":191},[167,120846,1905],{"class":173},[167,120848,120849,120851],{"class":169,"line":188},[167,120850,3123],{"class":173},[167,120852,3126],{"class":191},[167,120854,120855,120857,120859],{"class":169,"line":205},[167,120856,1539],{"class":191},[167,120858,1912],{"class":173},[167,120860,3135],{"class":219},[167,120862,120863],{"class":169,"line":160},[167,120864,403],{"class":173},[15,120866,120867,120868,120870],{},"That makes a value calculation behave like an effect. Keep ",[87,120869,1661],{}," pure.",[3087,120872,120874],{"id":120873},"watching-too-much","Watching too much",[15,120876,120877],{},"Deep watchers can be useful, but they are easy to overuse.",[154,120879,120880],{"className":2879,"code":3155,"filename":3156,"language":2882,"meta":163,"style":163},[87,120881,120882],{"__ignoreMap":163},[167,120883,120884,120886,120888,120890],{"class":169,"line":170},[167,120885,1665],{"class":181},[167,120887,3165],{"class":173},[167,120889,390],{"class":219},[167,120891,2242],{"class":173},[15,120893,101117,120894,120896],{},[87,120895,3175],{}," is large, this can become expensive or too broad. Prefer watching the specific field that matters when you can.",[3087,120898,70888,120900,120902],{"id":120899},"using-watcheffect-when-you-need-control",[87,120901,1668],{}," when you need control",[15,120904,120905,120907],{},[87,120906,1668],{}," is wonderful for compact effects, but less ideal when the trigger matters.",[15,120909,120910,120911,1679],{},"If you need to say \"run this only when the selected id changes\", say that with ",[87,120912,1665],{},[22,120914,120916],{"id":120915},"final-rule","Final rule",[15,120918,120919,120920,1679],{},"If it describes data, use ",[87,120921,1661],{},[15,120923,120924,120925,1679],{},"If it responds to a change, use ",[87,120926,1665],{},[15,120928,120929,120930,1679],{},"If it should track what it reads, use ",[87,120931,1668],{},[15,120933,120934],{},"That tiny distinction prevents a surprising amount of reactive chaos.",[924,120936,926],{},{"title":163,"searchDepth":188,"depth":188,"links":120938},[120939,120940,120942,120944,120946,120948,120950,120951,120958],{"id":119550,"depth":188,"text":119551},{"id":119630,"depth":188,"text":120941},"Start with computed when you need derived state",{"id":119915,"depth":188,"text":120943},"Do not use watch to create a derived value",{"id":120176,"depth":188,"text":120945},"Use watch for explicit side effects",{"id":120475,"depth":188,"text":120947},"Use watchEffect for automatic tracking",{"id":120617,"depth":188,"text":120949},"Be careful with async watchEffect",{"id":120764,"depth":188,"text":120765},{"id":57819,"depth":188,"text":63002,"children":120952},[120953,120955,120956],{"id":120820,"depth":205,"text":120954},"Mutating state inside computed",{"id":120873,"depth":205,"text":120874},{"id":120899,"depth":205,"text":120957},"Using watchEffect when you need control",{"id":120915,"depth":188,"text":120916},"Vue reactivity concepts represented as connected data flows","Learn the practical difference between computed, watch, and watchEffect in Vue 3, with examples, mistakes to avoid, and a decision guide for real components.",{"title":120962,"goal":120963,"tasks":120964,"starterCode":120969,"solutionHint":120970},"Choose the right reactive tool","Practice using computed for derived state, watch for explicit side effects, and watchEffect for automatic dependency tracking.",[120965,120966,120967,120968],"Create a search input stored in a ref.","Use computed to normalize the query.","Use watch to trigger a fetch-like function only when the normalized query changes.","Use watchEffect to log every reactive value read inside the effect, then explain why it runs.","\u003Cscript setup>\nimport { computed, ref, watch, watchEffect } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, (value) => {\n  page.value = 1\n  console.log('Fetch results for:', value)\n})\n\nwatchEffect(() => {\n  console.log('Current search state:', normalizedQuery.value, page.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" placeholder=\"Search articles\">\n  \u003Cp>Normalized query: {{ normalizedQuery }}\u003C\u002Fp>\n  \u003Cp>Page: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","The computed value derives data without causing side effects. The watch reacts to one explicit source. The watchEffect reruns whenever anything it reads changes.",{"updatedAt":3255,"coverCaption":120972,"author":946,"keywords":120973},"Computed values, watchers, and effects in Vue 3 by TODOvue",[3258,951,1661,1665,1668,116317,3260],"\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.en",[120976],{"headline":119517,"author":120977,"datePublished":3255,"@type":961},{"name":946,"@type":959},{"title":119517,"description":120960},"blog\u002Fvue-computed-watch-watcheffect-guide.en",[120981,120982,120983,120984],{"tag":60269,"color":3270},{"tag":104136,"color":974},{"tag":94137,"color":3274},{"tag":112562,"color":3277},"__kyNX9YNAzQk7q9uwPE1YODxHGAwEil6jGRkbQFb58",{"id":1651,"title":1652,"body":120987,"cover":3240,"coverAlt":3241,"date":3242,"description":3243,"draft":940,"extension":941,"lab":122310,"locale":943,"meta":122312,"navigation":208,"path":3261,"schemaOrg":122314,"seo":122317,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":3266,"tags":122318,"__hash__":3278},{"type":8,"value":120988,"toc":122295},[120989,120997,121005,121007,121009,121011,121013,121017,121021,121025,121077,121081,121083,121085,121315,121321,121325,121335,121343,121347,121349,121479,121483,121487,121593,121597,121601,121603,121605,121619,121621,121871,121877,121879,121883,121887,121889,122003,122009,122011,122015,122019,122021,122059,122063,122101,122105,122147,122149,122151,122153,122157,122161,122165,122169,122173,122177,122181,122185,122189,122193,122195,122199,122201,122239,122243,122245,122247,122261,122265,122269,122273,122277,122279,122283,122287,122291,122293],[11,120990,1658,120991,1662,120993,1662,120995,1669],{"id":1657},[87,120992,1661],{},[87,120994,1665],{},[87,120996,1668],{},[15,120998,1672,120999,1025,121001,1028,121003,1679],{},[87,121000,1661],{},[87,121002,1665],{},[87,121004,1668],{},[15,121006,1682],{},[15,121008,1685],{},[15,121010,1688],{},[22,121012,1692],{"id":1691},[15,121014,1582,121015,1697],{},[87,121016,1661],{},[15,121018,1582,121019,1702],{},[87,121020,1665],{},[15,121022,1582,121023,1707],{},[87,121024,1668],{},[56,121026,121027,121039],{},[59,121028,121029],{},[62,121030,121031,121033,121035,121037],{},[65,121032,1716],{},[65,121034,1719],{},[65,121036,1722],{},[65,121038,1725],{},[75,121040,121041,121053,121065],{},[62,121042,121043,121047,121049,121051],{},[80,121044,121045],{},[87,121046,1661],{},[80,121048,1736],{},[80,121050,1739],{},[80,121052,1742],{},[62,121054,121055,121059,121061,121063],{},[80,121056,121057],{},[87,121058,1665],{},[80,121060,1751],{},[80,121062,1742],{},[80,121064,1739],{},[62,121066,121067,121071,121073,121075],{},[80,121068,121069],{},[87,121070,1668],{},[80,121072,1764],{},[80,121074,1742],{},[80,121076,1769],{},[22,121078,1773,121079,1776],{"id":1772},[87,121080,1661],{},[15,121082,1779],{},[15,121084,1782],{},[154,121086,121087],{"className":156,"code":1785,"filename":1786,"language":162,"meta":163,"style":163},[87,121088,121089,121099,121109,121113,121125,121145,121165,121169,121173,121189,121211,121225,121233,121237,121241,121263,121271,121275,121283,121295,121307],{"__ignoreMap":163},[167,121090,121091,121093,121095,121097],{"class":169,"line":170},[167,121092,174],{"class":173},[167,121094,178],{"class":177},[167,121096,182],{"class":181},[167,121098,185],{"class":173},[167,121100,121101,121103,121105,121107],{"class":169,"line":188},[167,121102,192],{"class":191},[167,121104,1805],{"class":173},[167,121106,198],{"class":191},[167,121108,202],{"class":201},[167,121110,121111],{"class":169,"line":205},[167,121112,209],{"emptyLinePlaceholder":208},[167,121114,121115,121117,121119,121121,121123],{"class":169,"line":160},[167,121116,216],{"class":191},[167,121118,1820],{"class":219},[167,121120,223],{"class":191},[167,121122,226],{"class":181},[167,121124,1827],{"class":173},[167,121126,121127,121129,121131,121133,121135,121137,121139,121141,121143],{"class":169,"line":238},[167,121128,1832],{"class":173},[167,121130,1835],{"class":219},[167,121132,1838],{"class":173},[167,121134,1841],{"class":201},[167,121136,1844],{"class":173},[167,121138,1847],{"class":219},[167,121140,1850],{"class":173},[167,121142,1853],{"class":219},[167,121144,1856],{"class":173},[167,121146,121147,121149,121151,121153,121155,121157,121159,121161,121163],{"class":169,"line":243},[167,121148,1832],{"class":173},[167,121150,1853],{"class":219},[167,121152,1838],{"class":173},[167,121154,1867],{"class":201},[167,121156,1844],{"class":173},[167,121158,1872],{"class":219},[167,121160,1850],{"class":173},[167,121162,1835],{"class":219},[167,121164,599],{"class":173},[167,121166,121167],{"class":169,"line":261},[167,121168,429],{"class":173},[167,121170,121171],{"class":169,"line":273},[167,121172,209],{"emptyLinePlaceholder":208},[167,121174,121175,121177,121179,121181,121183,121185,121187],{"class":169,"line":279},[167,121176,216],{"class":191},[167,121178,1893],{"class":219},[167,121180,223],{"class":191},[167,121182,1898],{"class":181},[167,121184,1493],{"class":173},[167,121186,639],{"class":191},[167,121188,1905],{"class":173},[167,121190,121191,121193,121195,121197,121199,121201,121203,121205,121207,121209],{"class":169,"line":289},[167,121192,1539],{"class":191},[167,121194,1912],{"class":173},[167,121196,1915],{"class":181},[167,121198,1918],{"class":173},[167,121200,1921],{"class":254},[167,121202,1025],{"class":173},[167,121204,1926],{"class":254},[167,121206,693],{"class":173},[167,121208,639],{"class":191},[167,121210,1905],{"class":173},[167,121212,121213,121215,121217,121219,121221,121223],{"class":169,"line":294},[167,121214,1937],{"class":191},[167,121216,1940],{"class":173},[167,121218,1943],{"class":191},[167,121220,1946],{"class":173},[167,121222,1949],{"class":191},[167,121224,1952],{"class":173},[167,121226,121227,121229,121231],{"class":169,"line":304},[167,121228,1957],{"class":173},[167,121230,1960],{"class":219},[167,121232,235],{"class":173},[167,121234,121235],{"class":169,"line":313},[167,121236,403],{"class":173},[167,121238,121239],{"class":169,"line":161},[167,121240,209],{"emptyLinePlaceholder":208},[167,121242,121243,121245,121247,121249,121251,121253,121255,121257,121259,121261],{"class":169,"line":335},[167,121244,216],{"class":191},[167,121246,1977],{"class":219},[167,121248,223],{"class":191},[167,121250,1898],{"class":181},[167,121252,1493],{"class":173},[167,121254,639],{"class":191},[167,121256,1988],{"class":173},[167,121258,1991],{"class":191},[167,121260,1994],{"class":219},[167,121262,235],{"class":173},[167,121264,121265,121267,121269],{"class":169,"line":341},[167,121266,282],{"class":173},[167,121268,178],{"class":177},[167,121270,185],{"class":173},[167,121272,121273],{"class":169,"line":489},[167,121274,209],{"emptyLinePlaceholder":208},[167,121276,121277,121279,121281],{"class":169,"line":495},[167,121278,174],{"class":173},[167,121280,299],{"class":177},[167,121282,185],{"class":173},[167,121284,121285,121287,121289,121291,121293],{"class":169,"line":501},[167,121286,307],{"class":173},[167,121288,15],{"class":177},[167,121290,2025],{"class":173},[167,121292,15],{"class":177},[167,121294,185],{"class":173},[167,121296,121297,121299,121301,121303,121305],{"class":169,"line":512},[167,121298,307],{"class":173},[167,121300,15],{"class":177},[167,121302,2038],{"class":173},[167,121304,15],{"class":177},[167,121306,185],{"class":173},[167,121308,121309,121311,121313],{"class":169,"line":781},[167,121310,282],{"class":173},[167,121312,299],{"class":177},[167,121314,185],{"class":173},[15,121316,121317,2056,121319,1679],{},[87,121318,2055],{},[87,121320,2059],{},[15,121322,2062,121323,2065],{},[87,121324,1661],{},[33,121326,121327,121329,121331,121333],{},[36,121328,2070],{},[36,121330,2073],{},[36,121332,2076],{},[36,121334,2079],{},[15,121336,2082,121337,2086,121339,2089,121341,1679],{},[87,121338,2085],{},[87,121340,2085],{},[87,121342,1661],{},[22,121344,2095,121345,2098],{"id":2094},[87,121346,1665],{},[15,121348,2101],{},[154,121350,121351],{"className":156,"code":2104,"filename":2105,"language":162,"meta":163,"style":163},[87,121352,121353,121363,121373,121377,121393,121409,121425,121429,121439,121463,121471],{"__ignoreMap":163},[167,121354,121355,121357,121359,121361],{"class":169,"line":170},[167,121356,174],{"class":173},[167,121358,178],{"class":177},[167,121360,182],{"class":181},[167,121362,185],{"class":173},[167,121364,121365,121367,121369,121371],{"class":169,"line":188},[167,121366,192],{"class":191},[167,121368,2124],{"class":173},[167,121370,198],{"class":191},[167,121372,202],{"class":201},[167,121374,121375],{"class":169,"line":205},[167,121376,209],{"emptyLinePlaceholder":208},[167,121378,121379,121381,121383,121385,121387,121389,121391],{"class":169,"line":160},[167,121380,216],{"class":191},[167,121382,2139],{"class":219},[167,121384,223],{"class":191},[167,121386,226],{"class":181},[167,121388,229],{"class":173},[167,121390,2148],{"class":201},[167,121392,235],{"class":173},[167,121394,121395,121397,121399,121401,121403,121405,121407],{"class":169,"line":238},[167,121396,216],{"class":191},[167,121398,2157],{"class":219},[167,121400,223],{"class":191},[167,121402,226],{"class":181},[167,121404,229],{"class":173},[167,121406,2166],{"class":201},[167,121408,235],{"class":173},[167,121410,121411,121413,121415,121417,121419,121421,121423],{"class":169,"line":243},[167,121412,216],{"class":191},[167,121414,2175],{"class":219},[167,121416,223],{"class":191},[167,121418,226],{"class":181},[167,121420,229],{"class":173},[167,121422,2184],{"class":201},[167,121424,235],{"class":173},[167,121426,121427],{"class":169,"line":261},[167,121428,209],{"emptyLinePlaceholder":208},[167,121430,121431,121433,121435,121437],{"class":169,"line":273},[167,121432,1665],{"class":181},[167,121434,2197],{"class":173},[167,121436,639],{"class":191},[167,121438,1905],{"class":173},[167,121440,121441,121443,121445,121447,121449,121451,121453,121455,121457,121459,121461],{"class":169,"line":279},[167,121442,2206],{"class":173},[167,121444,267],{"class":191},[167,121446,2211],{"class":201},[167,121448,2214],{"class":173},[167,121450,1679],{"class":201},[167,121452,2219],{"class":173},[167,121454,2222],{"class":201},[167,121456,2225],{"class":173},[167,121458,1679],{"class":201},[167,121460,2219],{"class":173},[167,121462,2232],{"class":201},[167,121464,121465,121467,121469],{"class":169,"line":289},[167,121466,2237],{"class":173},[167,121468,390],{"class":219},[167,121470,2242],{"class":173},[167,121472,121473,121475,121477],{"class":169,"line":294},[167,121474,282],{"class":173},[167,121476,178],{"class":177},[167,121478,185],{"class":173},[15,121480,2253,121481,2257],{},[87,121482,2256],{},[15,121484,1582,121485,583],{},[87,121486,1661],{},[154,121488,121489],{"className":156,"code":2264,"filename":2265,"language":162,"meta":163,"style":163},[87,121490,121491,121501,121511,121515,121531,121547,121551,121585],{"__ignoreMap":163},[167,121492,121493,121495,121497,121499],{"class":169,"line":170},[167,121494,174],{"class":173},[167,121496,178],{"class":177},[167,121498,182],{"class":181},[167,121500,185],{"class":173},[167,121502,121503,121505,121507,121509],{"class":169,"line":188},[167,121504,192],{"class":191},[167,121506,1805],{"class":173},[167,121508,198],{"class":191},[167,121510,202],{"class":201},[167,121512,121513],{"class":169,"line":205},[167,121514,209],{"emptyLinePlaceholder":208},[167,121516,121517,121519,121521,121523,121525,121527,121529],{"class":169,"line":160},[167,121518,216],{"class":191},[167,121520,2139],{"class":219},[167,121522,223],{"class":191},[167,121524,226],{"class":181},[167,121526,229],{"class":173},[167,121528,2148],{"class":201},[167,121530,235],{"class":173},[167,121532,121533,121535,121537,121539,121541,121543,121545],{"class":169,"line":238},[167,121534,216],{"class":191},[167,121536,2157],{"class":219},[167,121538,223],{"class":191},[167,121540,226],{"class":181},[167,121542,229],{"class":173},[167,121544,2166],{"class":201},[167,121546,235],{"class":173},[167,121548,121549],{"class":169,"line":243},[167,121550,209],{"emptyLinePlaceholder":208},[167,121552,121553,121555,121557,121559,121561,121563,121565,121567,121569,121571,121573,121575,121577,121579,121581,121583],{"class":169,"line":261},[167,121554,216],{"class":191},[167,121556,2175],{"class":219},[167,121558,223],{"class":191},[167,121560,1898],{"class":181},[167,121562,1493],{"class":173},[167,121564,639],{"class":191},[167,121566,2211],{"class":201},[167,121568,2214],{"class":173},[167,121570,1679],{"class":201},[167,121572,2219],{"class":173},[167,121574,2222],{"class":201},[167,121576,2225],{"class":173},[167,121578,1679],{"class":201},[167,121580,2219],{"class":173},[167,121582,2360],{"class":201},[167,121584,235],{"class":173},[167,121586,121587,121589,121591],{"class":169,"line":273},[167,121588,282],{"class":173},[167,121590,178],{"class":177},[167,121592,185],{"class":173},[15,121594,2373,121595,1679],{},[87,121596,1661],{},[22,121598,1582,121599,2381],{"id":2378},[87,121600,1665],{},[15,121602,2384],{},[15,121604,2387],{},[33,121606,121607,121609,121613,121615,121617],{},[36,121608,2392],{},[36,121610,2395,121611,1679],{},[87,121612,2398],{},[36,121614,2401],{},[36,121616,2404],{},[36,121618,2407],{},[15,121620,2410],{},[154,121622,121623],{"className":156,"code":2413,"filename":2414,"language":162,"meta":163,"style":163},[87,121624,121625,121635,121645,121649,121665,121681,121685,121709,121713,121735,121747,121751,121759,121767,121771,121775,121789,121801,121805,121813,121817,121825,121851,121863],{"__ignoreMap":163},[167,121626,121627,121629,121631,121633],{"class":169,"line":170},[167,121628,174],{"class":173},[167,121630,178],{"class":177},[167,121632,182],{"class":181},[167,121634,185],{"class":173},[167,121636,121637,121639,121641,121643],{"class":169,"line":188},[167,121638,192],{"class":191},[167,121640,2433],{"class":173},[167,121642,198],{"class":191},[167,121644,202],{"class":201},[167,121646,121647],{"class":169,"line":205},[167,121648,209],{"emptyLinePlaceholder":208},[167,121650,121651,121653,121655,121657,121659,121661,121663],{"class":169,"line":160},[167,121652,216],{"class":191},[167,121654,2448],{"class":219},[167,121656,223],{"class":191},[167,121658,226],{"class":181},[167,121660,229],{"class":173},[167,121662,2184],{"class":201},[167,121664,235],{"class":173},[167,121666,121667,121669,121671,121673,121675,121677,121679],{"class":169,"line":238},[167,121668,216],{"class":191},[167,121670,2465],{"class":219},[167,121672,223],{"class":191},[167,121674,226],{"class":181},[167,121676,229],{"class":173},[167,121678,1835],{"class":219},[167,121680,235],{"class":173},[167,121682,121683],{"class":169,"line":243},[167,121684,209],{"emptyLinePlaceholder":208},[167,121686,121687,121689,121691,121693,121695,121697,121699,121701,121703,121705,121707],{"class":169,"line":261},[167,121688,216],{"class":191},[167,121690,2486],{"class":219},[167,121692,223],{"class":191},[167,121694,1898],{"class":181},[167,121696,1493],{"class":173},[167,121698,639],{"class":191},[167,121700,2497],{"class":173},[167,121702,2500],{"class":181},[167,121704,2503],{"class":173},[167,121706,2506],{"class":181},[167,121708,2509],{"class":173},[167,121710,121711],{"class":169,"line":273},[167,121712,209],{"emptyLinePlaceholder":208},[167,121714,121715,121717,121719,121721,121723,121725,121727,121729,121731,121733],{"class":169,"line":279},[167,121716,1665],{"class":181},[167,121718,2520],{"class":173},[167,121720,2523],{"class":191},[167,121722,2526],{"class":173},[167,121724,2219],{"class":254},[167,121726,1025],{"class":173},[167,121728,2533],{"class":254},[167,121730,693],{"class":173},[167,121732,639],{"class":191},[167,121734,1905],{"class":173},[167,121736,121737,121739,121741,121743,121745],{"class":169,"line":289},[167,121738,2544],{"class":191},[167,121740,2547],{"class":173},[167,121742,2550],{"class":191},[167,121744,2553],{"class":173},[167,121746,2556],{"class":191},[167,121748,121749],{"class":169,"line":294},[167,121750,209],{"emptyLinePlaceholder":208},[167,121752,121753,121755,121757],{"class":169,"line":304},[167,121754,2565],{"class":173},[167,121756,267],{"class":191},[167,121758,2570],{"class":219},[167,121760,121761,121763,121765],{"class":169,"line":313},[167,121762,2575],{"class":191},[167,121764,2578],{"class":181},[167,121766,2581],{"class":173},[167,121768,121769],{"class":169,"line":161},[167,121770,403],{"class":173},[167,121772,121773],{"class":169,"line":335},[167,121774,209],{"emptyLinePlaceholder":208},[167,121776,121777,121779,121781,121783,121785,121787],{"class":169,"line":341},[167,121778,2523],{"class":191},[167,121780,1432],{"class":191},[167,121782,2578],{"class":181},[167,121784,229],{"class":173},[167,121786,2219],{"class":254},[167,121788,258],{"class":173},[167,121790,121791,121793,121795,121797,121799],{"class":169,"line":489},[167,121792,2608],{"class":173},[167,121794,2611],{"class":181},[167,121796,229],{"class":173},[167,121798,2616],{"class":201},[167,121800,2619],{"class":173},[167,121802,121803],{"class":169,"line":495},[167,121804,276],{"class":173},[167,121806,121807,121809,121811],{"class":169,"line":501},[167,121808,282],{"class":173},[167,121810,178],{"class":177},[167,121812,185],{"class":173},[167,121814,121815],{"class":169,"line":512},[167,121816,209],{"emptyLinePlaceholder":208},[167,121818,121819,121821,121823],{"class":169,"line":781},[167,121820,174],{"class":173},[167,121822,299],{"class":177},[167,121824,185],{"class":173},[167,121826,121827,121829,121831,121833,121835,121837,121839,121841,121843,121845,121847,121849],{"class":169,"line":786},[167,121828,307],{"class":173},[167,121830,2650],{"class":177},[167,121832,2653],{"class":181},[167,121834,267],{"class":173},[167,121836,2658],{"class":201},[167,121838,1174],{"class":181},[167,121840,267],{"class":173},[167,121842,2665],{"class":201},[167,121844,2668],{"class":181},[167,121846,267],{"class":173},[167,121848,2673],{"class":201},[167,121850,185],{"class":173},[167,121852,121853,121855,121857,121859,121861],{"class":169,"line":2678},[167,121854,307],{"class":173},[167,121856,15],{"class":177},[167,121858,2685],{"class":173},[167,121860,15],{"class":177},[167,121862,185],{"class":173},[167,121864,121865,121867,121869],{"class":169,"line":2692},[167,121866,282],{"class":173},[167,121868,299],{"class":177},[167,121870,185],{"class":173},[15,121872,2701,121873,2704,121875,1679],{},[87,121874,1665],{},[87,121876,2707],{},[15,121878,2710],{},[22,121880,1582,121881,2716],{"id":2713},[87,121882,1668],{},[15,121884,121885,2721],{},[87,121886,1668],{},[15,121888,2724],{},[154,121890,121891],{"className":156,"code":2727,"filename":2728,"language":162,"meta":163,"style":163},[87,121892,121893,121903,121913,121917,121933,121949,121953,121963,121991,121995],{"__ignoreMap":163},[167,121894,121895,121897,121899,121901],{"class":169,"line":170},[167,121896,174],{"class":173},[167,121898,178],{"class":177},[167,121900,182],{"class":181},[167,121902,185],{"class":173},[167,121904,121905,121907,121909,121911],{"class":169,"line":188},[167,121906,192],{"class":191},[167,121908,2747],{"class":173},[167,121910,198],{"class":191},[167,121912,202],{"class":201},[167,121914,121915],{"class":169,"line":205},[167,121916,209],{"emptyLinePlaceholder":208},[167,121918,121919,121921,121923,121925,121927,121929,121931],{"class":169,"line":160},[167,121920,216],{"class":191},[167,121922,2762],{"class":219},[167,121924,223],{"class":191},[167,121926,226],{"class":181},[167,121928,229],{"class":173},[167,121930,1835],{"class":219},[167,121932,235],{"class":173},[167,121934,121935,121937,121939,121941,121943,121945,121947],{"class":169,"line":238},[167,121936,216],{"class":191},[167,121938,2779],{"class":219},[167,121940,223],{"class":191},[167,121942,226],{"class":181},[167,121944,229],{"class":173},[167,121946,2788],{"class":201},[167,121948,235],{"class":173},[167,121950,121951],{"class":169,"line":243},[167,121952,209],{"emptyLinePlaceholder":208},[167,121954,121955,121957,121959,121961],{"class":169,"line":261},[167,121956,1668],{"class":181},[167,121958,1493],{"class":173},[167,121960,639],{"class":191},[167,121962,1905],{"class":173},[167,121964,121965,121967,121969,121971,121973,121975,121977,121979,121981,121983,121985,121987,121989],{"class":169,"line":273},[167,121966,2608],{"class":173},[167,121968,2611],{"class":181},[167,121970,229],{"class":173},[167,121972,2815],{"class":201},[167,121974,2818],{"class":173},[167,121976,1679],{"class":201},[167,121978,2219],{"class":173},[167,121980,2825],{"class":201},[167,121982,2828],{"class":173},[167,121984,1679],{"class":201},[167,121986,2219],{"class":173},[167,121988,2360],{"class":201},[167,121990,235],{"class":173},[167,121992,121993],{"class":169,"line":279},[167,121994,403],{"class":173},[167,121996,121997,121999,122001],{"class":169,"line":289},[167,121998,282],{"class":173},[167,122000,178],{"class":177},[167,122002,185],{"class":173},[15,122004,2851,122005,1028,122007,2858],{},[87,122006,2854],{},[87,122008,2857],{},[15,122010,2861],{},[22,122012,2865,122013,2868],{"id":2864},[87,122014,1668],{},[15,122016,122017,2873],{},[87,122018,1668],{},[15,122020,2876],{},[154,122022,122023],{"className":2879,"code":2880,"filename":2881,"language":2882,"meta":163,"style":163},[87,122024,122025,122039,122047,122055],{"__ignoreMap":163},[167,122026,122027,122029,122031,122033,122035,122037],{"class":169,"line":170},[167,122028,1668],{"class":181},[167,122030,229],{"class":173},[167,122032,2523],{"class":191},[167,122034,1469],{"class":173},[167,122036,639],{"class":191},[167,122038,1905],{"class":173},[167,122040,122041,122043,122045],{"class":169,"line":188},[167,122042,2608],{"class":173},[167,122044,2611],{"class":181},[167,122046,2907],{"class":173},[167,122048,122049,122051,122053],{"class":169,"line":205},[167,122050,2575],{"class":191},[167,122052,2914],{"class":181},[167,122054,2917],{"class":173},[167,122056,122057],{"class":169,"line":160},[167,122058,403],{"class":173},[15,122060,2924,122061,2928],{},[87,122062,2927],{},[154,122064,122065],{"className":2879,"code":2931,"filename":2932,"language":2882,"meta":163,"style":163},[87,122066,122067,122081,122089,122097],{"__ignoreMap":163},[167,122068,122069,122071,122073,122075,122077,122079],{"class":169,"line":170},[167,122070,1668],{"class":181},[167,122072,229],{"class":173},[167,122074,2523],{"class":191},[167,122076,1469],{"class":173},[167,122078,639],{"class":191},[167,122080,1905],{"class":173},[167,122082,122083,122085,122087],{"class":169,"line":188},[167,122084,2575],{"class":191},[167,122086,2914],{"class":181},[167,122088,2917],{"class":173},[167,122090,122091,122093,122095],{"class":169,"line":205},[167,122092,2608],{"class":173},[167,122094,2611],{"class":181},[167,122096,2907],{"class":173},[167,122098,122099],{"class":169,"line":160},[167,122100,403],{"class":173},[15,122102,2971,122103,2974],{},[87,122104,1665],{},[154,122106,122107],{"className":2879,"code":2977,"filename":2978,"language":2882,"meta":163,"style":163},[87,122108,122109,122127,122139],{"__ignoreMap":163},[167,122110,122111,122113,122115,122117,122119,122121,122123,122125],{"class":169,"line":170},[167,122112,1665],{"class":181},[167,122114,2987],{"class":173},[167,122116,2523],{"class":191},[167,122118,2526],{"class":173},[167,122120,580],{"class":254},[167,122122,693],{"class":173},[167,122124,639],{"class":191},[167,122126,1905],{"class":173},[167,122128,122129,122131,122133,122135,122137],{"class":169,"line":188},[167,122130,3004],{"class":173},[167,122132,267],{"class":191},[167,122134,3009],{"class":191},[167,122136,3012],{"class":181},[167,122138,3015],{"class":173},[167,122140,122141,122143,122145],{"class":169,"line":205},[167,122142,2237],{"class":173},[167,122144,390],{"class":219},[167,122146,2242],{"class":173},[15,122148,3026],{},[22,122150,3030],{"id":3029},[15,122152,3033],{},[3035,122154,122155],{},[36,122156,3039],{},[15,122158,1582,122159,1679],{},[87,122160,1661],{},[3035,122162,122163],{"start":188},[36,122164,3048],{},[15,122166,1582,122167,1679],{},[87,122168,1665],{},[3035,122170,122171],{"start":205},[36,122172,3057],{},[15,122174,1582,122175,1679],{},[87,122176,1668],{},[3035,122178,122179],{"start":160},[36,122180,3066],{},[15,122182,3069,122183,1679],{},[87,122184,1661],{},[3035,122186,122187],{"start":238},[36,122188,3076],{},[15,122190,3069,122191,3081],{},[87,122192,1665],{},[22,122194,3085],{"id":3084},[3087,122196,3090,122197],{"id":3089},[87,122198,1661],{},[15,122200,3095],{},[154,122202,122203],{"className":2879,"code":3098,"filename":3099,"language":2882,"meta":163,"style":163},[87,122204,122205,122221,122227,122235],{"__ignoreMap":163},[167,122206,122207,122209,122211,122213,122215,122217,122219],{"class":169,"line":170},[167,122208,216],{"class":191},[167,122210,3108],{"class":219},[167,122212,223],{"class":191},[167,122214,1898],{"class":181},[167,122216,1493],{"class":173},[167,122218,639],{"class":191},[167,122220,1905],{"class":173},[167,122222,122223,122225],{"class":169,"line":188},[167,122224,3123],{"class":173},[167,122226,3126],{"class":191},[167,122228,122229,122231,122233],{"class":169,"line":205},[167,122230,1539],{"class":191},[167,122232,1912],{"class":173},[167,122234,3135],{"class":219},[167,122236,122237],{"class":169,"line":160},[167,122238,403],{"class":173},[15,122240,3142,122241,3145],{},[87,122242,1661],{},[3087,122244,3149],{"id":3148},[15,122246,3152],{},[154,122248,122249],{"className":2879,"code":3155,"filename":3156,"language":2882,"meta":163,"style":163},[87,122250,122251],{"__ignoreMap":163},[167,122252,122253,122255,122257,122259],{"class":169,"line":170},[167,122254,1665],{"class":181},[167,122256,3165],{"class":173},[167,122258,390],{"class":219},[167,122260,2242],{"class":173},[15,122262,3172,122263,3176],{},[87,122264,3175],{},[3087,122266,3180,122267,3183],{"id":3179},[87,122268,1668],{},[15,122270,122271,3188],{},[87,122272,1668],{},[15,122274,3191,122275,1679],{},[87,122276,1665],{},[22,122278,3197],{"id":3196},[15,122280,3200,122281,1679],{},[87,122282,1661],{},[15,122284,3205,122285,1679],{},[87,122286,1665],{},[15,122288,3210,122289,1679],{},[87,122290,1668],{},[15,122292,3215],{},[924,122294,926],{},{"title":163,"searchDepth":188,"depth":188,"links":122296},[122297,122298,122299,122300,122301,122302,122303,122304,122309],{"id":1691,"depth":188,"text":1692},{"id":1772,"depth":188,"text":3222},{"id":2094,"depth":188,"text":3224},{"id":2378,"depth":188,"text":3226},{"id":2713,"depth":188,"text":3228},{"id":2864,"depth":188,"text":3230},{"id":3029,"depth":188,"text":3030},{"id":3084,"depth":188,"text":3085,"children":122305},[122306,122307,122308],{"id":3089,"depth":205,"text":3235},{"id":3148,"depth":205,"text":3149},{"id":3179,"depth":205,"text":3238},{"id":3196,"depth":188,"text":3197},{"title":3245,"goal":3246,"tasks":122311,"starterCode":3252,"solutionHint":3253},[3248,3249,3250,3251],{"updatedAt":3255,"coverCaption":3256,"author":946,"keywords":122313},[3258,951,1661,1665,1668,3259,3260],[122315],{"headline":1652,"author":122316,"datePublished":3255,"@type":961},{"name":946,"@type":959},{"title":1652,"description":3243},[122319,122320,122321,122322],{"tag":3269,"color":3270},{"tag":973,"color":974},{"tag":3273,"color":3274},{"tag":3276,"color":3277},{"id":122324,"title":122325,"body":122326,"cover":51331,"coverAlt":122325,"date":51332,"description":125636,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":125637,"navigation":208,"path":125640,"schemaOrg":125641,"seo":125644,"series":26460,"seriesDescription":60258,"seriesOrder":170,"seriesTitle":60259,"slug":942,"stem":125645,"tags":125646,"__hash__":125653},"blog\u002Fblog\u002Fvue-directives-overview.en.md","Vue Directives: An Overview",{"type":8,"value":122327,"toc":125618},[122328,122332,122346,122357,122361,122364,122417,122425,122435,122438,122449,122559,122673,122677,122686,122688,122696,122790,122889,122893,122896,122899,122910,123042,123182,123190,123194,123197,123203,123208,123304,123412,123416,123423,123426,123436,123545,123658,123666,123670,123673,123791,123930,123942,123946,123949,124043,124143,124146,124150,124153,124247,124347,124355,124359,124362,124507,124663,124670,124674,124681,124790,124903,124906,124910,124913,125041,125157,125164,125168,125171,125239,125312,125315,125319,125322,125390,125463,125466,125470,125473,125553,125585,125588,125590,125596,125599,125609,125616],[11,122329,122331],{"id":122330},"vue-3-directives-a-complete-guide-to-understanding-them-properly","Vue 3 directives: a complete guide to understanding them properly",[15,122333,122334,122335,122338,122339,122341,122342,122345],{},"Vue directives are ",[3933,122336,122337],{},"special attributes"," that let you apply reactive logic directly to the DOM.\nThey all start with ",[87,122340,47981],{}," and exist to ",[3933,122343,122344],{},"reduce imperative code"," and make templates more expressive and declarative.",[15,122347,122348,122349,122352,122353,122356],{},"This post is a ",[3933,122350,122351],{},"high-level map",": it doesn’t go extremely deep, but it makes it clear ",[3933,122354,122355],{},"what each directive does, when to use it, and what problem it solves",".\nEach one will later have its own dedicated article.",[22,122358,122360],{"id":122359},"series-map","Series map",[15,122362,122363],{},"If you want to go deeper into each directive, here is the full path for this series:",[33,122365,122366,122371,122376,122382,122387,122392,122397,122402,122407,122412],{},[36,122367,122368],{},[19092,122369,77105],{"href":122370},"\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.en\u002F",[36,122372,122373],{},[19092,122374,70774],{"href":122375},"\u002Fblog\u002Fdirectives-vue-v-for-guide.en\u002F",[36,122377,122378],{},[19092,122379,122381],{"href":122380},"\u002Fblog\u002Fdirectives-vue-v-bind-guide.en\u002F","Vue Directives: v-bind",[36,122383,122384],{},[19092,122385,80589],{"href":122386},"\u002Fblog\u002Fdirectives-vue-v-model-guide.en\u002F",[36,122388,122389],{},[19092,122390,85873],{"href":122391},"\u002Fblog\u002Fdirectives-vue-v-on-guide.en\u002F",[36,122393,122394],{},[19092,122395,100800],{"href":122396},"\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.en\u002F",[36,122398,122399],{},[19092,122400,96593],{"href":122401},"\u002Fblog\u002Fdirectives-vue-v-slot-guide.en\u002F",[36,122403,122404],{},[19092,122405,91573],{"href":122406},"\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en\u002F",[36,122408,122409],{},[19092,122410,68418],{"href":122411},"\u002Fblog\u002Fdirectives-vue-v-cloak-guide.en\u002F",[36,122413,122414],{},[19092,122415,57626],{"href":122416},"\u002Fblog\u002Fdirectives-vue-custom-directives-guide.en\u002F",[22,122418,122419,1025,122421,1025,122423],{"id":48057},[87,122420,13496],{},[87,122422,46221],{},[87,122424,46108],{},[15,122426,122427,122428,122431,122432,1679],{},"They’re used to ",[3933,122429,122430],{},"render or remove elements from the DOM"," based on a reactive condition.\nIf the condition is false, the element ",[3933,122433,122434],{},"doesn’t exist in the DOM",[15,122436,122437],{},"Use it when:",[33,122439,122440,122443,122446],{},[36,122441,122442],{},"The content is heavy",[36,122444,122445],{},"It shouldn’t always exist",[36,122447,122448],{},"It depends on permissions or critical states",[154,122450,122453],{"className":156,"code":122451,"filename":3260,"highlights":122452,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst isLogged = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"isLogged\">Welcome\u003C\u002Fp>\n  \u003Cp v-else>You’re not logged in\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273,279],[87,122454,122455,122465,122475,122479,122495,122503,122507,122515,122535,122551],{"__ignoreMap":163},[167,122456,122457,122459,122461,122463],{"class":169,"line":170},[167,122458,174],{"class":173},[167,122460,178],{"class":177},[167,122462,182],{"class":181},[167,122464,185],{"class":173},[167,122466,122467,122469,122471,122473],{"class":169,"line":188},[167,122468,192],{"class":191},[167,122470,195],{"class":173},[167,122472,198],{"class":191},[167,122474,202],{"class":201},[167,122476,122477],{"class":169,"line":205},[167,122478,209],{"emptyLinePlaceholder":208},[167,122480,122481,122483,122485,122487,122489,122491,122493],{"class":169,"line":160},[167,122482,216],{"class":191},[167,122484,48123],{"class":219},[167,122486,223],{"class":191},[167,122488,226],{"class":181},[167,122490,229],{"class":173},[167,122492,390],{"class":219},[167,122494,235],{"class":173},[167,122496,122497,122499,122501],{"class":169,"line":238},[167,122498,282],{"class":173},[167,122500,178],{"class":177},[167,122502,185],{"class":173},[167,122504,122505],{"class":169,"line":243},[167,122506,209],{"emptyLinePlaceholder":208},[167,122508,122509,122511,122513],{"class":169,"line":261},[167,122510,174],{"class":173},[167,122512,299],{"class":177},[167,122514,185],{"class":173},[167,122516,122518,122520,122522,122524,122526,122528,122531,122533],{"class":122517,"line":273},[169,213],[167,122519,307],{"class":173},[167,122521,15],{"class":177},[167,122523,5694],{"class":181},[167,122525,267],{"class":173},[167,122527,48167],{"class":201},[167,122529,122530],{"class":173},">Welcome\u003C\u002F",[167,122532,15],{"class":177},[167,122534,185],{"class":173},[167,122536,122538,122540,122542,122544,122547,122549],{"class":122537,"line":279},[169,213],[167,122539,307],{"class":173},[167,122541,15],{"class":177},[167,122543,7038],{"class":181},[167,122545,122546],{"class":173},">You’re not logged in\u003C\u002F",[167,122548,15],{"class":177},[167,122550,185],{"class":173},[167,122552,122553,122555,122557],{"class":169,"line":289},[167,122554,282],{"class":173},[167,122556,299],{"class":177},[167,122558,185],{"class":173},[154,122560,122563],{"className":156,"code":122561,"filename":3973,"highlights":122562,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isLogged: true\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"isLogged\">Welcome\u003C\u002Fp>\n  \u003Cp v-else>You’re not logged in\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304,313],[87,122564,122565,122573,122581,122587,122593,122599,122603,122607,122611,122619,122623,122631,122650,122665],{"__ignoreMap":163},[167,122566,122567,122569,122571],{"class":169,"line":170},[167,122568,174],{"class":173},[167,122570,178],{"class":177},[167,122572,185],{"class":173},[167,122574,122575,122577,122579],{"class":169,"line":188},[167,122576,608],{"class":191},[167,122578,3991],{"class":191},[167,122580,1905],{"class":173},[167,122582,122583,122585],{"class":169,"line":205},[167,122584,7176],{"class":181},[167,122586,763],{"class":173},[167,122588,122589,122591],{"class":169,"line":160},[167,122590,1937],{"class":191},[167,122592,1905],{"class":173},[167,122594,122595,122597],{"class":169,"line":238},[167,122596,48237],{"class":173},[167,122598,3637],{"class":219},[167,122600,122601],{"class":169,"line":243},[167,122602,4049],{"class":173},[167,122604,122605],{"class":169,"line":261},[167,122606,3492],{"class":173},[167,122608,122609],{"class":169,"line":273},[167,122610,276],{"class":173},[167,122612,122613,122615,122617],{"class":169,"line":279},[167,122614,282],{"class":173},[167,122616,178],{"class":177},[167,122618,185],{"class":173},[167,122620,122621],{"class":169,"line":289},[167,122622,209],{"emptyLinePlaceholder":208},[167,122624,122625,122627,122629],{"class":169,"line":294},[167,122626,174],{"class":173},[167,122628,299],{"class":177},[167,122630,185],{"class":173},[167,122632,122634,122636,122638,122640,122642,122644,122646,122648],{"class":122633,"line":304},[169,213],[167,122635,307],{"class":173},[167,122637,15],{"class":177},[167,122639,5694],{"class":181},[167,122641,267],{"class":173},[167,122643,48167],{"class":201},[167,122645,122530],{"class":173},[167,122647,15],{"class":177},[167,122649,185],{"class":173},[167,122651,122653,122655,122657,122659,122661,122663],{"class":122652,"line":313},[169,213],[167,122654,307],{"class":173},[167,122656,15],{"class":177},[167,122658,7038],{"class":181},[167,122660,122546],{"class":173},[167,122662,15],{"class":177},[167,122664,185],{"class":173},[167,122666,122667,122669,122671],{"class":169,"line":161},[167,122668,282],{"class":173},[167,122670,299],{"class":177},[167,122672,185],{"class":173},[22,122674,122675],{"id":13659},[87,122676,13659],{},[15,122678,122679,122680,122682,122683,1679],{},"It controls visibility using CSS (",[87,122681,46152],{},"), but ",[3933,122684,122685],{},"the element always exists in the DOM",[15,122687,122437],{},[33,122689,122690,122693],{},[36,122691,122692],{},"The element is shown and hidden frequently",[36,122694,122695],{},"You don’t want to pay the cost of mounting and unmounting the node",[154,122697,122700],{"className":156,"code":122698,"filename":3260,"highlights":122699,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n  \nconst isVisible = ref(true)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-show=\"isVisible\">Visible content\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273],[87,122701,122702,122712,122722,122726,122742,122750,122754,122762,122782],{"__ignoreMap":163},[167,122703,122704,122706,122708,122710],{"class":169,"line":170},[167,122705,174],{"class":173},[167,122707,178],{"class":177},[167,122709,182],{"class":181},[167,122711,185],{"class":173},[167,122713,122714,122716,122718,122720],{"class":169,"line":188},[167,122715,192],{"class":191},[167,122717,195],{"class":173},[167,122719,198],{"class":191},[167,122721,202],{"class":201},[167,122723,122724],{"class":169,"line":205},[167,122725,48367],{"class":173},[167,122727,122728,122730,122732,122734,122736,122738,122740],{"class":169,"line":160},[167,122729,216],{"class":191},[167,122731,48374],{"class":219},[167,122733,223],{"class":191},[167,122735,226],{"class":181},[167,122737,229],{"class":173},[167,122739,390],{"class":219},[167,122741,235],{"class":173},[167,122743,122744,122746,122748],{"class":169,"line":238},[167,122745,282],{"class":173},[167,122747,178],{"class":177},[167,122749,185],{"class":173},[167,122751,122752],{"class":169,"line":243},[167,122753,209],{"emptyLinePlaceholder":208},[167,122755,122756,122758,122760],{"class":169,"line":261},[167,122757,174],{"class":173},[167,122759,299],{"class":177},[167,122761,185],{"class":173},[167,122763,122765,122767,122769,122771,122773,122775,122778,122780],{"class":122764,"line":273},[169,213],[167,122766,307],{"class":173},[167,122768,15],{"class":177},[167,122770,46960],{"class":181},[167,122772,267],{"class":173},[167,122774,48418],{"class":201},[167,122776,122777],{"class":173},">Visible content\u003C\u002F",[167,122779,15],{"class":177},[167,122781,185],{"class":173},[167,122783,122784,122786,122788],{"class":169,"line":279},[167,122785,282],{"class":173},[167,122787,299],{"class":177},[167,122789,185],{"class":173},[154,122791,122794],{"className":156,"code":122792,"filename":3973,"highlights":122793,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      isVisible: true\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-show=\"isVisible\">Visible content\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304],[87,122795,122796,122804,122812,122818,122824,122830,122834,122838,122842,122850,122854,122862,122881],{"__ignoreMap":163},[167,122797,122798,122800,122802],{"class":169,"line":170},[167,122799,174],{"class":173},[167,122801,178],{"class":177},[167,122803,185],{"class":173},[167,122805,122806,122808,122810],{"class":169,"line":188},[167,122807,608],{"class":191},[167,122809,3991],{"class":191},[167,122811,1905],{"class":173},[167,122813,122814,122816],{"class":169,"line":205},[167,122815,7176],{"class":181},[167,122817,763],{"class":173},[167,122819,122820,122822],{"class":169,"line":160},[167,122821,1937],{"class":191},[167,122823,1905],{"class":173},[167,122825,122826,122828],{"class":169,"line":238},[167,122827,48472],{"class":173},[167,122829,3637],{"class":219},[167,122831,122832],{"class":169,"line":243},[167,122833,4049],{"class":173},[167,122835,122836],{"class":169,"line":261},[167,122837,3492],{"class":173},[167,122839,122840],{"class":169,"line":273},[167,122841,276],{"class":173},[167,122843,122844,122846,122848],{"class":169,"line":279},[167,122845,282],{"class":173},[167,122847,178],{"class":177},[167,122849,185],{"class":173},[167,122851,122852],{"class":169,"line":289},[167,122853,209],{"emptyLinePlaceholder":208},[167,122855,122856,122858,122860],{"class":169,"line":294},[167,122857,174],{"class":173},[167,122859,299],{"class":177},[167,122861,185],{"class":173},[167,122863,122865,122867,122869,122871,122873,122875,122877,122879],{"class":122864,"line":304},[169,213],[167,122866,307],{"class":173},[167,122868,15],{"class":177},[167,122870,46960],{"class":181},[167,122872,267],{"class":173},[167,122874,48418],{"class":201},[167,122876,122777],{"class":173},[167,122878,15],{"class":177},[167,122880,185],{"class":173},[167,122882,122883,122885,122887],{"class":169,"line":313},[167,122884,282],{"class":173},[167,122886,299],{"class":177},[167,122888,185],{"class":173},[22,122890,122891],{"id":30726},[87,122892,30726],{},[15,122894,122895],{},"It lets you render lists from reactive arrays or objects.",[15,122897,122898],{},"Mental key:",[5367,122900,122901],{},[15,122902,122903,122905,122906,122909],{},[87,122904,30726],{}," describes ",[3933,122907,122908],{},"structure",", not logic.",[154,122911,122913],{"className":156,"code":48557,"filename":3260,"highlights":122912,"language":162,"meta":163,"style":163},[294,304,313],[87,122914,122915,122925,122935,122939,122951,122963,122975,122979,122987,122991,122999,123020,123025,123034],{"__ignoreMap":163},[167,122916,122917,122919,122921,122923],{"class":169,"line":170},[167,122918,174],{"class":173},[167,122920,178],{"class":177},[167,122922,182],{"class":181},[167,122924,185],{"class":173},[167,122926,122927,122929,122931,122933],{"class":169,"line":188},[167,122928,192],{"class":191},[167,122930,195],{"class":173},[167,122932,198],{"class":191},[167,122934,202],{"class":201},[167,122936,122937],{"class":169,"line":205},[167,122938,48367],{"class":173},[167,122940,122941,122943,122945,122947,122949],{"class":169,"line":160},[167,122942,216],{"class":191},[167,122944,1820],{"class":219},[167,122946,223],{"class":191},[167,122948,226],{"class":181},[167,122950,1827],{"class":173},[167,122952,122953,122955,122957,122959,122961],{"class":169,"line":238},[167,122954,1832],{"class":173},[167,122956,1835],{"class":219},[167,122958,1838],{"class":173},[167,122960,42925],{"class":201},[167,122962,1856],{"class":173},[167,122964,122965,122967,122969,122971,122973],{"class":169,"line":243},[167,122966,1832],{"class":173},[167,122968,1853],{"class":219},[167,122970,1838],{"class":173},[167,122972,42930],{"class":201},[167,122974,599],{"class":173},[167,122976,122977],{"class":169,"line":261},[167,122978,429],{"class":173},[167,122980,122981,122983,122985],{"class":169,"line":273},[167,122982,282],{"class":173},[167,122984,178],{"class":177},[167,122986,185],{"class":173},[167,122988,122989],{"class":169,"line":279},[167,122990,209],{"emptyLinePlaceholder":208},[167,122992,122993,122995,122997],{"class":169,"line":289},[167,122994,174],{"class":173},[167,122996,299],{"class":177},[167,122998,185],{"class":173},[167,123000,123002,123004,123006,123008,123010,123012,123014,123016,123018],{"class":123001,"line":294},[169,213],[167,123003,307],{"class":173},[167,123005,36],{"class":177},[167,123007,18706],{"class":181},[167,123009,267],{"class":173},[167,123011,48658],{"class":201},[167,123013,10307],{"class":181},[167,123015,267],{"class":173},[167,123017,35843],{"class":201},[167,123019,185],{"class":173},[167,123021,123023],{"class":123022,"line":304},[169,213],[167,123024,48672],{"class":173},[167,123026,123028,123030,123032],{"class":123027,"line":313},[169,213],[167,123029,504],{"class":173},[167,123031,36],{"class":177},[167,123033,185],{"class":173},[167,123035,123036,123038,123040],{"class":169,"line":161},[167,123037,282],{"class":173},[167,123039,299],{"class":177},[167,123041,185],{"class":173},[154,123043,123045],{"className":156,"code":48692,"filename":3973,"highlights":123044,"language":162,"meta":163,"style":163},[335,341,489],[87,123046,123047,123055,123063,123069,123075,123079,123091,123103,123107,123111,123115,123119,123127,123131,123139,123160,123165,123174],{"__ignoreMap":163},[167,123048,123049,123051,123053],{"class":169,"line":170},[167,123050,174],{"class":173},[167,123052,178],{"class":177},[167,123054,185],{"class":173},[167,123056,123057,123059,123061],{"class":169,"line":188},[167,123058,608],{"class":191},[167,123060,3991],{"class":191},[167,123062,1905],{"class":173},[167,123064,123065,123067],{"class":169,"line":205},[167,123066,7176],{"class":181},[167,123068,763],{"class":173},[167,123070,123071,123073],{"class":169,"line":160},[167,123072,1937],{"class":191},[167,123074,1905],{"class":173},[167,123076,123077],{"class":169,"line":238},[167,123078,44324],{"class":173},[167,123080,123081,123083,123085,123087,123089],{"class":169,"line":243},[167,123082,8677],{"class":173},[167,123084,1835],{"class":219},[167,123086,1838],{"class":173},[167,123088,42925],{"class":201},[167,123090,1856],{"class":173},[167,123092,123093,123095,123097,123099,123101],{"class":169,"line":261},[167,123094,8677],{"class":173},[167,123096,1853],{"class":219},[167,123098,1838],{"class":173},[167,123100,42930],{"class":201},[167,123102,599],{"class":173},[167,123104,123105],{"class":169,"line":273},[167,123106,8738],{"class":173},[167,123108,123109],{"class":169,"line":279},[167,123110,4049],{"class":173},[167,123112,123113],{"class":169,"line":289},[167,123114,3492],{"class":173},[167,123116,123117],{"class":169,"line":294},[167,123118,276],{"class":173},[167,123120,123121,123123,123125],{"class":169,"line":304},[167,123122,282],{"class":173},[167,123124,178],{"class":177},[167,123126,185],{"class":173},[167,123128,123129],{"class":169,"line":313},[167,123130,209],{"emptyLinePlaceholder":208},[167,123132,123133,123135,123137],{"class":169,"line":161},[167,123134,174],{"class":173},[167,123136,299],{"class":177},[167,123138,185],{"class":173},[167,123140,123142,123144,123146,123148,123150,123152,123154,123156,123158],{"class":123141,"line":335},[169,213],[167,123143,307],{"class":173},[167,123145,36],{"class":177},[167,123147,18706],{"class":181},[167,123149,267],{"class":173},[167,123151,48658],{"class":201},[167,123153,10307],{"class":181},[167,123155,267],{"class":173},[167,123157,35843],{"class":201},[167,123159,185],{"class":173},[167,123161,123163],{"class":123162,"line":341},[169,213],[167,123164,48672],{"class":173},[167,123166,123168,123170,123172],{"class":123167,"line":489},[169,213],[167,123169,504],{"class":173},[167,123171,36],{"class":177},[167,123173,185],{"class":173},[167,123175,123176,123178,123180],{"class":169,"line":495},[167,123177,282],{"class":173},[167,123179,299],{"class":177},[167,123181,185],{"class":173},[15,123183,123184,16903,123186,123189],{},[87,123185,7845],{},[3933,123187,123188],{},"is not optional",". It never was.\nIt’s essential so Vue can properly optimize rendering.",[22,123191,123192],{"id":23868},[87,123193,23868],{},[15,123195,123196],{},"It dynamically binds HTML attributes or component props.",[15,123198,123199,123200,123202],{},"Think of ",[87,123201,23868],{}," like:",[5367,123204,123205],{},[15,123206,123207],{},"“This attribute depends on state”",[154,123209,123212],{"className":156,"code":123210,"filename":3260,"highlights":123211,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst imageUrl = ref('https:\u002F\u002Fexample.com\u002Fimage.jpg')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg v-bind:src=\"imageUrl\" alt=\"Dynamic image\" \u002F>\n\u003C\u002Ftemplate>\n",[273],[87,123213,123214,123224,123234,123238,123254,123262,123266,123274,123296],{"__ignoreMap":163},[167,123215,123216,123218,123220,123222],{"class":169,"line":170},[167,123217,174],{"class":173},[167,123219,178],{"class":177},[167,123221,182],{"class":181},[167,123223,185],{"class":173},[167,123225,123226,123228,123230,123232],{"class":169,"line":188},[167,123227,192],{"class":191},[167,123229,195],{"class":173},[167,123231,198],{"class":191},[167,123233,202],{"class":201},[167,123235,123236],{"class":169,"line":205},[167,123237,209],{"emptyLinePlaceholder":208},[167,123239,123240,123242,123244,123246,123248,123250,123252],{"class":169,"line":160},[167,123241,216],{"class":191},[167,123243,48892],{"class":219},[167,123245,223],{"class":191},[167,123247,226],{"class":181},[167,123249,229],{"class":173},[167,123251,48901],{"class":201},[167,123253,235],{"class":173},[167,123255,123256,123258,123260],{"class":169,"line":238},[167,123257,282],{"class":173},[167,123259,178],{"class":177},[167,123261,185],{"class":173},[167,123263,123264],{"class":169,"line":243},[167,123265,209],{"emptyLinePlaceholder":208},[167,123267,123268,123270,123272],{"class":169,"line":261},[167,123269,174],{"class":173},[167,123271,299],{"class":177},[167,123273,185],{"class":173},[167,123275,123277,123279,123281,123283,123285,123287,123289,123291,123294],{"class":123276,"line":273},[169,213],[167,123278,307],{"class":173},[167,123280,40006],{"class":177},[167,123282,48933],{"class":181},[167,123284,267],{"class":173},[167,123286,48938],{"class":201},[167,123288,48941],{"class":181},[167,123290,267],{"class":173},[167,123292,123293],{"class":201},"\"Dynamic image\"",[167,123295,5325],{"class":173},[167,123297,123298,123300,123302],{"class":169,"line":279},[167,123299,282],{"class":173},[167,123301,299],{"class":177},[167,123303,185],{"class":173},[154,123305,123307],{"className":156,"code":48959,"filename":3973,"highlights":123306,"language":162,"meta":163,"style":163},[313],[87,123308,123309,123317,123325,123331,123337,123345,123351,123355,123359,123363,123371,123375,123383,123404],{"__ignoreMap":163},[167,123310,123311,123313,123315],{"class":169,"line":170},[167,123312,174],{"class":173},[167,123314,178],{"class":177},[167,123316,185],{"class":173},[167,123318,123319,123321,123323],{"class":169,"line":188},[167,123320,608],{"class":191},[167,123322,3991],{"class":191},[167,123324,1905],{"class":173},[167,123326,123327,123329],{"class":169,"line":205},[167,123328,7176],{"class":181},[167,123330,763],{"class":173},[167,123332,123333,123335],{"class":169,"line":160},[167,123334,1937],{"class":191},[167,123336,1905],{"class":173},[167,123338,123339,123341,123343],{"class":169,"line":238},[167,123340,48995],{"class":173},[167,123342,48998],{"class":201},[167,123344,393],{"class":173},[167,123346,123347,123349],{"class":169,"line":243},[167,123348,49005],{"class":173},[167,123350,49008],{"class":201},[167,123352,123353],{"class":169,"line":261},[167,123354,4049],{"class":173},[167,123356,123357],{"class":169,"line":273},[167,123358,3492],{"class":173},[167,123360,123361],{"class":169,"line":279},[167,123362,276],{"class":173},[167,123364,123365,123367,123369],{"class":169,"line":289},[167,123366,282],{"class":173},[167,123368,178],{"class":177},[167,123370,185],{"class":173},[167,123372,123373],{"class":169,"line":294},[167,123374,209],{"emptyLinePlaceholder":208},[167,123376,123377,123379,123381],{"class":169,"line":304},[167,123378,174],{"class":173},[167,123380,299],{"class":177},[167,123382,185],{"class":173},[167,123384,123386,123388,123390,123392,123394,123396,123398,123400,123402],{"class":123385,"line":313},[169,213],[167,123387,307],{"class":173},[167,123389,40006],{"class":177},[167,123391,49050],{"class":181},[167,123393,267],{"class":173},[167,123395,48938],{"class":201},[167,123397,49057],{"class":181},[167,123399,267],{"class":173},[167,123401,49062],{"class":201},[167,123403,5325],{"class":173},[167,123405,123406,123408,123410],{"class":169,"line":161},[167,123407,282],{"class":173},[167,123409,299],{"class":177},[167,123411,185],{"class":173},[22,123413,123414],{"id":23865},[87,123415,23865],{},[15,123417,123418,123419,123422],{},"It creates ",[3933,123420,123421],{},"two-way synchronization"," between state and an input or component.",[15,123424,123425],{},"It’s ideal for:",[33,123427,123428,123430,123433],{},[36,123429,83286],{},[36,123431,123432],{},"Controlled inputs",[36,123434,123435],{},"Reusable components",[154,123437,123440],{"className":156,"code":123438,"filename":3260,"highlights":123439,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst username = ref('')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"username\" placeholder=\"Enter your username\" \u002F>\n  \u003Cp>Hello, {{ username }}!\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[273],[87,123441,123442,123452,123462,123466,123482,123490,123494,123502,123524,123537],{"__ignoreMap":163},[167,123443,123444,123446,123448,123450],{"class":169,"line":170},[167,123445,174],{"class":173},[167,123447,178],{"class":177},[167,123449,182],{"class":181},[167,123451,185],{"class":173},[167,123453,123454,123456,123458,123460],{"class":169,"line":188},[167,123455,192],{"class":191},[167,123457,195],{"class":173},[167,123459,198],{"class":191},[167,123461,202],{"class":201},[167,123463,123464],{"class":169,"line":205},[167,123465,209],{"emptyLinePlaceholder":208},[167,123467,123468,123470,123472,123474,123476,123478,123480],{"class":169,"line":160},[167,123469,216],{"class":191},[167,123471,49133],{"class":219},[167,123473,223],{"class":191},[167,123475,226],{"class":181},[167,123477,229],{"class":173},[167,123479,2184],{"class":201},[167,123481,235],{"class":173},[167,123483,123484,123486,123488],{"class":169,"line":238},[167,123485,282],{"class":173},[167,123487,178],{"class":177},[167,123489,185],{"class":173},[167,123491,123492],{"class":169,"line":243},[167,123493,209],{"emptyLinePlaceholder":208},[167,123495,123496,123498,123500],{"class":169,"line":261},[167,123497,174],{"class":173},[167,123499,299],{"class":177},[167,123501,185],{"class":173},[167,123503,123505,123507,123509,123511,123513,123515,123517,123519,123522],{"class":123504,"line":273},[169,213],[167,123506,307],{"class":173},[167,123508,2650],{"class":177},[167,123510,2653],{"class":181},[167,123512,267],{"class":173},[167,123514,49177],{"class":201},[167,123516,2668],{"class":181},[167,123518,267],{"class":173},[167,123520,123521],{"class":201},"\"Enter your username\"",[167,123523,5325],{"class":173},[167,123525,123526,123528,123530,123533,123535],{"class":169,"line":279},[167,123527,307],{"class":173},[167,123529,15],{"class":177},[167,123531,123532],{"class":173},">Hello, {{ username }}!\u003C\u002F",[167,123534,15],{"class":177},[167,123536,185],{"class":173},[167,123538,123539,123541,123543],{"class":169,"line":289},[167,123540,282],{"class":173},[167,123542,299],{"class":177},[167,123544,185],{"class":173},[154,123546,123549],{"className":156,"code":123547,"filename":3973,"highlights":123548,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      username: ''\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"username\" placeholder=\"Enter your username\" \u002F>\n  \u003Cp>Hello, {{ username }}!\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[304],[87,123550,123551,123559,123567,123573,123579,123585,123589,123593,123597,123605,123609,123617,123638,123650],{"__ignoreMap":163},[167,123552,123553,123555,123557],{"class":169,"line":170},[167,123554,174],{"class":173},[167,123556,178],{"class":177},[167,123558,185],{"class":173},[167,123560,123561,123563,123565],{"class":169,"line":188},[167,123562,608],{"class":191},[167,123564,3991],{"class":191},[167,123566,1905],{"class":173},[167,123568,123569,123571],{"class":169,"line":205},[167,123570,7176],{"class":181},[167,123572,763],{"class":173},[167,123574,123575,123577],{"class":169,"line":160},[167,123576,1937],{"class":191},[167,123578,1905],{"class":173},[167,123580,123581,123583],{"class":169,"line":238},[167,123582,49246],{"class":173},[167,123584,7209],{"class":201},[167,123586,123587],{"class":169,"line":243},[167,123588,4049],{"class":173},[167,123590,123591],{"class":169,"line":261},[167,123592,3492],{"class":173},[167,123594,123595],{"class":169,"line":273},[167,123596,276],{"class":173},[167,123598,123599,123601,123603],{"class":169,"line":279},[167,123600,282],{"class":173},[167,123602,178],{"class":177},[167,123604,185],{"class":173},[167,123606,123607],{"class":169,"line":289},[167,123608,209],{"emptyLinePlaceholder":208},[167,123610,123611,123613,123615],{"class":169,"line":294},[167,123612,174],{"class":173},[167,123614,299],{"class":177},[167,123616,185],{"class":173},[167,123618,123620,123622,123624,123626,123628,123630,123632,123634,123636],{"class":123619,"line":304},[169,213],[167,123621,307],{"class":173},[167,123623,2650],{"class":177},[167,123625,2653],{"class":181},[167,123627,267],{"class":173},[167,123629,49177],{"class":201},[167,123631,2668],{"class":181},[167,123633,267],{"class":173},[167,123635,123521],{"class":201},[167,123637,5325],{"class":173},[167,123639,123640,123642,123644,123646,123648],{"class":169,"line":313},[167,123641,307],{"class":173},[167,123643,15],{"class":177},[167,123645,123532],{"class":173},[167,123647,15],{"class":177},[167,123649,185],{"class":173},[167,123651,123652,123654,123656],{"class":169,"line":161},[167,123653,282],{"class":173},[167,123655,299],{"class":177},[167,123657,185],{"class":173},[15,123659,123660,123661,33973,123663,123665],{},"Internally, it combines props and events (",[87,123662,34049],{},[87,123664,34055],{},").\nIt’s not magic, but it definitely feels like it.",[22,123667,123668],{"id":23871},[87,123669,23871],{},[15,123671,123672],{},"It listens to DOM events and runs reactive logic.",[154,123674,123677],{"className":156,"code":123675,"filename":3260,"highlights":123676,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\nconst increment = () => {\n  count.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton v-on:click=\"increment\">You’ve clicked {{ count }} times\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[294],[87,123678,123679,123689,123699,123703,123719,123733,123739,123743,123751,123755,123763,123783],{"__ignoreMap":163},[167,123680,123681,123683,123685,123687],{"class":169,"line":170},[167,123682,174],{"class":173},[167,123684,178],{"class":177},[167,123686,182],{"class":181},[167,123688,185],{"class":173},[167,123690,123691,123693,123695,123697],{"class":169,"line":188},[167,123692,192],{"class":191},[167,123694,195],{"class":173},[167,123696,198],{"class":191},[167,123698,202],{"class":201},[167,123700,123701],{"class":169,"line":205},[167,123702,209],{"emptyLinePlaceholder":208},[167,123704,123705,123707,123709,123711,123713,123715,123717],{"class":169,"line":160},[167,123706,216],{"class":191},[167,123708,15325],{"class":219},[167,123710,223],{"class":191},[167,123712,226],{"class":181},[167,123714,229],{"class":173},[167,123716,1960],{"class":219},[167,123718,235],{"class":173},[167,123720,123721,123723,123725,123727,123729,123731],{"class":169,"line":238},[167,123722,216],{"class":191},[167,123724,49389],{"class":181},[167,123726,223],{"class":191},[167,123728,1469],{"class":173},[167,123730,639],{"class":191},[167,123732,1905],{"class":173},[167,123734,123735,123737],{"class":169,"line":243},[167,123736,15356],{"class":173},[167,123738,3126],{"class":191},[167,123740,123741],{"class":169,"line":261},[167,123742,276],{"class":173},[167,123744,123745,123747,123749],{"class":169,"line":273},[167,123746,282],{"class":173},[167,123748,178],{"class":177},[167,123750,185],{"class":173},[167,123752,123753],{"class":169,"line":279},[167,123754,209],{"emptyLinePlaceholder":208},[167,123756,123757,123759,123761],{"class":169,"line":289},[167,123758,174],{"class":173},[167,123760,299],{"class":177},[167,123762,185],{"class":173},[167,123764,123766,123768,123770,123772,123774,123776,123779,123781],{"class":123765,"line":294},[169,213],[167,123767,307],{"class":173},[167,123769,507],{"class":177},[167,123771,49437],{"class":181},[167,123773,267],{"class":173},[167,123775,49442],{"class":201},[167,123777,123778],{"class":173},">You’ve clicked {{ count }} times\u003C\u002F",[167,123780,507],{"class":177},[167,123782,185],{"class":173},[167,123784,123785,123787,123789],{"class":169,"line":304},[167,123786,282],{"class":173},[167,123788,299],{"class":177},[167,123790,185],{"class":173},[154,123792,123795],{"className":156,"code":123793,"filename":3973,"highlights":123794,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      count: 0\n    }\n  },\n  methods: {\n    increment() {\n      this.count++\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton v-on:click=\"increment\">Click me\u003C\u002Fbutton>\n  \u003Cp>You’ve clicked {{ count }} times.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[489],[87,123796,123797,123805,123813,123819,123825,123831,123835,123839,123843,123849,123857,123861,123865,123869,123877,123881,123889,123909,123922],{"__ignoreMap":163},[167,123798,123799,123801,123803],{"class":169,"line":170},[167,123800,174],{"class":173},[167,123802,178],{"class":177},[167,123804,185],{"class":173},[167,123806,123807,123809,123811],{"class":169,"line":188},[167,123808,608],{"class":191},[167,123810,3991],{"class":191},[167,123812,1905],{"class":173},[167,123814,123815,123817],{"class":169,"line":205},[167,123816,7176],{"class":181},[167,123818,763],{"class":173},[167,123820,123821,123823],{"class":169,"line":160},[167,123822,1937],{"class":191},[167,123824,1905],{"class":173},[167,123826,123827,123829],{"class":169,"line":238},[167,123828,37484],{"class":173},[167,123830,10681],{"class":219},[167,123832,123833],{"class":169,"line":243},[167,123834,4049],{"class":173},[167,123836,123837],{"class":169,"line":261},[167,123838,398],{"class":173},[167,123840,123841],{"class":169,"line":273},[167,123842,4419],{"class":173},[167,123844,123845,123847],{"class":169,"line":279},[167,123846,49514],{"class":181},[167,123848,763],{"class":173},[167,123850,123851,123853,123855],{"class":169,"line":289},[167,123852,741],{"class":219},[167,123854,49523],{"class":173},[167,123856,3126],{"class":191},[167,123858,123859],{"class":169,"line":294},[167,123860,4049],{"class":173},[167,123862,123863],{"class":169,"line":304},[167,123864,3492],{"class":173},[167,123866,123867],{"class":169,"line":313},[167,123868,276],{"class":173},[167,123870,123871,123873,123875],{"class":169,"line":161},[167,123872,282],{"class":173},[167,123874,178],{"class":177},[167,123876,185],{"class":173},[167,123878,123879],{"class":169,"line":335},[167,123880,209],{"emptyLinePlaceholder":208},[167,123882,123883,123885,123887],{"class":169,"line":341},[167,123884,174],{"class":173},[167,123886,299],{"class":177},[167,123888,185],{"class":173},[167,123890,123892,123894,123896,123898,123900,123902,123905,123907],{"class":123891,"line":489},[169,213],[167,123893,307],{"class":173},[167,123895,507],{"class":177},[167,123897,49437],{"class":181},[167,123899,267],{"class":173},[167,123901,49442],{"class":201},[167,123903,123904],{"class":173},">Click me\u003C\u002F",[167,123906,507],{"class":177},[167,123908,185],{"class":173},[167,123910,123911,123913,123915,123918,123920],{"class":169,"line":495},[167,123912,307],{"class":173},[167,123914,15],{"class":177},[167,123916,123917],{"class":173},">You’ve clicked {{ count }} times.\u003C\u002F",[167,123919,15],{"class":177},[167,123921,185],{"class":173},[167,123923,123924,123926,123928],{"class":169,"line":501},[167,123925,282],{"class":173},[167,123927,299],{"class":177},[167,123929,185],{"class":173},[15,123931,123932,123933,2526,123935,1025,123937,1025,123939,123941],{},"It supports ",[3933,123934,23919],{},[87,123936,36908],{},[87,123938,36905],{},[87,123940,36911],{},", etc.) that avoid unnecessary code.",[22,123943,123944],{"id":30434},[87,123945,30434],{},[15,123947,123948],{},"It inserts plain text into an element, replacing its content.",[154,123950,123953],{"className":156,"code":123951,"filename":3260,"highlights":123952,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst message = ref('Hello World')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-text=\"message\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[273],[87,123954,123955,123965,123975,123979,123996,124004,124008,124016,124035],{"__ignoreMap":163},[167,123956,123957,123959,123961,123963],{"class":169,"line":170},[167,123958,174],{"class":173},[167,123960,178],{"class":177},[167,123962,182],{"class":181},[167,123964,185],{"class":173},[167,123966,123967,123969,123971,123973],{"class":169,"line":188},[167,123968,192],{"class":191},[167,123970,195],{"class":173},[167,123972,198],{"class":191},[167,123974,202],{"class":201},[167,123976,123977],{"class":169,"line":205},[167,123978,209],{"emptyLinePlaceholder":208},[167,123980,123981,123983,123985,123987,123989,123991,123994],{"class":169,"line":160},[167,123982,216],{"class":191},[167,123984,29012],{"class":219},[167,123986,223],{"class":191},[167,123988,226],{"class":181},[167,123990,229],{"class":173},[167,123992,123993],{"class":201},"'Hello World'",[167,123995,235],{"class":173},[167,123997,123998,124000,124002],{"class":169,"line":238},[167,123999,282],{"class":173},[167,124001,178],{"class":177},[167,124003,185],{"class":173},[167,124005,124006],{"class":169,"line":243},[167,124007,209],{"emptyLinePlaceholder":208},[167,124009,124010,124012,124014],{"class":169,"line":261},[167,124011,174],{"class":173},[167,124013,299],{"class":177},[167,124015,185],{"class":173},[167,124017,124019,124021,124023,124025,124027,124029,124031,124033],{"class":124018,"line":273},[169,213],[167,124020,307],{"class":173},[167,124022,1242],{"class":177},[167,124024,30525],{"class":181},[167,124026,267],{"class":173},[167,124028,49699],{"class":201},[167,124030,1282],{"class":173},[167,124032,1242],{"class":177},[167,124034,185],{"class":173},[167,124036,124037,124039,124041],{"class":169,"line":279},[167,124038,282],{"class":173},[167,124040,299],{"class":177},[167,124042,185],{"class":173},[154,124044,124047],{"className":156,"code":124045,"filename":3973,"highlights":124046,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      message: 'Hello Vue'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-text=\"message\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,124048,124049,124057,124065,124071,124077,124084,124088,124092,124096,124104,124108,124116,124135],{"__ignoreMap":163},[167,124050,124051,124053,124055],{"class":169,"line":170},[167,124052,174],{"class":173},[167,124054,178],{"class":177},[167,124056,185],{"class":173},[167,124058,124059,124061,124063],{"class":169,"line":188},[167,124060,608],{"class":191},[167,124062,3991],{"class":191},[167,124064,1905],{"class":173},[167,124066,124067,124069],{"class":169,"line":205},[167,124068,7176],{"class":181},[167,124070,763],{"class":173},[167,124072,124073,124075],{"class":169,"line":160},[167,124074,1937],{"class":191},[167,124076,1905],{"class":173},[167,124078,124079,124081],{"class":169,"line":238},[167,124080,29126],{"class":173},[167,124082,124083],{"class":201},"'Hello Vue'\n",[167,124085,124086],{"class":169,"line":243},[167,124087,4049],{"class":173},[167,124089,124090],{"class":169,"line":261},[167,124091,3492],{"class":173},[167,124093,124094],{"class":169,"line":273},[167,124095,276],{"class":173},[167,124097,124098,124100,124102],{"class":169,"line":279},[167,124099,282],{"class":173},[167,124101,178],{"class":177},[167,124103,185],{"class":173},[167,124105,124106],{"class":169,"line":289},[167,124107,209],{"emptyLinePlaceholder":208},[167,124109,124110,124112,124114],{"class":169,"line":294},[167,124111,174],{"class":173},[167,124113,299],{"class":177},[167,124115,185],{"class":173},[167,124117,124119,124121,124123,124125,124127,124129,124131,124133],{"class":124118,"line":304},[169,213],[167,124120,307],{"class":173},[167,124122,1242],{"class":177},[167,124124,30525],{"class":181},[167,124126,267],{"class":173},[167,124128,49699],{"class":201},[167,124130,1282],{"class":173},[167,124132,1242],{"class":177},[167,124134,185],{"class":173},[167,124136,124137,124139,124141],{"class":169,"line":313},[167,124138,282],{"class":173},[167,124140,299],{"class":177},[167,124142,185],{"class":173},[15,124144,124145],{},"It’s not used much, but it exists for very specific cases where you don’t want interpolations.",[22,124147,124148],{"id":30437},[87,124149,30437],{},[15,124151,124152],{},"It inserts unescaped HTML.",[154,124154,124157],{"className":156,"code":124155,"filename":3260,"highlights":124156,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst rawHtml = ref('\u003Cstrong>Bold text\u003C\u002Fstrong>')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-html=\"rawHtml\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[273],[87,124158,124159,124169,124179,124183,124200,124208,124212,124220,124239],{"__ignoreMap":163},[167,124160,124161,124163,124165,124167],{"class":169,"line":170},[167,124162,174],{"class":173},[167,124164,178],{"class":177},[167,124166,182],{"class":181},[167,124168,185],{"class":173},[167,124170,124171,124173,124175,124177],{"class":169,"line":188},[167,124172,192],{"class":191},[167,124174,195],{"class":173},[167,124176,198],{"class":191},[167,124178,202],{"class":201},[167,124180,124181],{"class":169,"line":205},[167,124182,209],{"emptyLinePlaceholder":208},[167,124184,124185,124187,124189,124191,124193,124195,124198],{"class":169,"line":160},[167,124186,216],{"class":191},[167,124188,49860],{"class":219},[167,124190,223],{"class":191},[167,124192,226],{"class":181},[167,124194,229],{"class":173},[167,124196,124197],{"class":201},"'\u003Cstrong>Bold text\u003C\u002Fstrong>'",[167,124199,235],{"class":173},[167,124201,124202,124204,124206],{"class":169,"line":238},[167,124203,282],{"class":173},[167,124205,178],{"class":177},[167,124207,185],{"class":173},[167,124209,124210],{"class":169,"line":243},[167,124211,209],{"emptyLinePlaceholder":208},[167,124213,124214,124216,124218],{"class":169,"line":261},[167,124215,174],{"class":173},[167,124217,299],{"class":177},[167,124219,185],{"class":173},[167,124221,124223,124225,124227,124229,124231,124233,124235,124237],{"class":124222,"line":273},[169,213],[167,124224,307],{"class":173},[167,124226,1242],{"class":177},[167,124228,30594],{"class":181},[167,124230,267],{"class":173},[167,124232,49905],{"class":201},[167,124234,1282],{"class":173},[167,124236,1242],{"class":177},[167,124238,185],{"class":173},[167,124240,124241,124243,124245],{"class":169,"line":279},[167,124242,282],{"class":173},[167,124244,299],{"class":177},[167,124246,185],{"class":173},[154,124248,124251],{"className":156,"code":124249,"filename":3973,"highlights":124250,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      rawHtml: '\u003Cstrong>Dynamic HTML\u003C\u002Fstrong>'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-html=\"rawHtml\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,124252,124253,124261,124269,124275,124281,124288,124292,124296,124300,124308,124312,124320,124339],{"__ignoreMap":163},[167,124254,124255,124257,124259],{"class":169,"line":170},[167,124256,174],{"class":173},[167,124258,178],{"class":177},[167,124260,185],{"class":173},[167,124262,124263,124265,124267],{"class":169,"line":188},[167,124264,608],{"class":191},[167,124266,3991],{"class":191},[167,124268,1905],{"class":173},[167,124270,124271,124273],{"class":169,"line":205},[167,124272,7176],{"class":181},[167,124274,763],{"class":173},[167,124276,124277,124279],{"class":169,"line":160},[167,124278,1937],{"class":191},[167,124280,1905],{"class":173},[167,124282,124283,124285],{"class":169,"line":238},[167,124284,49958],{"class":173},[167,124286,124287],{"class":201},"'\u003Cstrong>Dynamic HTML\u003C\u002Fstrong>'\n",[167,124289,124290],{"class":169,"line":243},[167,124291,4049],{"class":173},[167,124293,124294],{"class":169,"line":261},[167,124295,3492],{"class":173},[167,124297,124298],{"class":169,"line":273},[167,124299,276],{"class":173},[167,124301,124302,124304,124306],{"class":169,"line":279},[167,124303,282],{"class":173},[167,124305,178],{"class":177},[167,124307,185],{"class":173},[167,124309,124310],{"class":169,"line":289},[167,124311,209],{"emptyLinePlaceholder":208},[167,124313,124314,124316,124318],{"class":169,"line":294},[167,124315,174],{"class":173},[167,124317,299],{"class":177},[167,124319,185],{"class":173},[167,124321,124323,124325,124327,124329,124331,124333,124335,124337],{"class":124322,"line":304},[169,213],[167,124324,307],{"class":173},[167,124326,1242],{"class":177},[167,124328,30594],{"class":181},[167,124330,267],{"class":173},[167,124332,49905],{"class":201},[167,124334,1282],{"class":173},[167,124336,1242],{"class":177},[167,124338,185],{"class":173},[167,124340,124341,124343,124345],{"class":169,"line":313},[167,124342,282],{"class":173},[167,124344,299],{"class":177},[167,124346,185],{"class":173},[5367,124348,124349],{},[15,124350,50025,124351,124354],{},[3933,124352,124353],{},"Never use it with untrusted content",".\nIt’s a direct door to XSS if you don’t know exactly what you’re rendering.",[22,124356,124357],{"id":31708},[87,124358,31708],{},[15,124360,124361],{},"It lets you define dynamic content inside components via slots.",[154,124363,124366],{"className":156,"code":124364,"filename":3260,"highlights":124365,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMyCard>\n    \u003Ctemplate v-slot:header>\n      \u003Ch1>Custom Header\u003C\u002Fh1>\n    \u003C\u002Ftemplate>\n    \u003Cp>Card body content.\u003C\u002Fp>\n    \u003Ctemplate v-slot:footer>\n      \u003Cbutton>Action\u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FMyCard>\n\u003C\u002Ftemplate>\n",[243,289],[87,124367,124368,124378,124386,124390,124398,124406,124421,124434,124442,124455,124470,124483,124491,124499],{"__ignoreMap":163},[167,124369,124370,124372,124374,124376],{"class":169,"line":170},[167,124371,174],{"class":173},[167,124373,178],{"class":177},[167,124375,182],{"class":181},[167,124377,185],{"class":173},[167,124379,124380,124382,124384],{"class":169,"line":188},[167,124381,282],{"class":173},[167,124383,178],{"class":177},[167,124385,185],{"class":173},[167,124387,124388],{"class":169,"line":205},[167,124389,209],{"emptyLinePlaceholder":208},[167,124391,124392,124394,124396],{"class":169,"line":160},[167,124393,174],{"class":173},[167,124395,299],{"class":177},[167,124397,185],{"class":173},[167,124399,124400,124402,124404],{"class":169,"line":238},[167,124401,307],{"class":173},[167,124403,50079],{"class":177},[167,124405,185],{"class":173},[167,124407,124409,124411,124413,124415,124417,124419],{"class":124408,"line":243},[169,213],[167,124410,1257],{"class":173},[167,124412,299],{"class":177},[167,124414,32029],{"class":181},[167,124416,583],{"class":173},[167,124418,1260],{"class":181},[167,124420,185],{"class":173},[167,124422,124423,124425,124427,124430,124432],{"class":169,"line":261},[167,124424,1268],{"class":173},[167,124426,11],{"class":177},[167,124428,124429],{"class":173},">Custom Header\u003C\u002F",[167,124431,11],{"class":177},[167,124433,185],{"class":173},[167,124435,124436,124438,124440],{"class":169,"line":273},[167,124437,1292],{"class":173},[167,124439,299],{"class":177},[167,124441,185],{"class":173},[167,124443,124444,124446,124448,124451,124453],{"class":169,"line":279},[167,124445,1257],{"class":173},[167,124447,15],{"class":177},[167,124449,124450],{"class":173},">Card body content.\u003C\u002F",[167,124452,15],{"class":177},[167,124454,185],{"class":173},[167,124456,124458,124460,124462,124464,124466,124468],{"class":124457,"line":289},[169,213],[167,124459,1257],{"class":173},[167,124461,299],{"class":177},[167,124463,32029],{"class":181},[167,124465,583],{"class":173},[167,124467,1334],{"class":181},[167,124469,185],{"class":173},[167,124471,124472,124474,124476,124479,124481],{"class":169,"line":294},[167,124473,1268],{"class":173},[167,124475,507],{"class":177},[167,124477,124478],{"class":173},">Action\u003C\u002F",[167,124480,507],{"class":177},[167,124482,185],{"class":173},[167,124484,124485,124487,124489],{"class":169,"line":304},[167,124486,1292],{"class":173},[167,124488,299],{"class":177},[167,124490,185],{"class":173},[167,124492,124493,124495,124497],{"class":169,"line":313},[167,124494,504],{"class":173},[167,124496,50079],{"class":177},[167,124498,185],{"class":173},[167,124500,124501,124503,124505],{"class":169,"line":161},[167,124502,282],{"class":173},[167,124504,299],{"class":177},[167,124506,185],{"class":173},[154,124508,124511],{"className":156,"code":124509,"filename":3973,"highlights":124510,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  components: { MyCard }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMyCard>\n    \u003Ctemplate v-slot:header>\n      \u003Ch1>Custom Header\u003C\u002Fh1>\n    \u003C\u002Ftemplate>\n    \u003Cp>Card body content.\u003C\u002Fp>\n    \u003Ctemplate v-slot:footer>\n      \u003Cbutton>Action\u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FMyCard>\n\u003C\u002Ftemplate>\n",[279,313],[87,124512,124513,124521,124529,124533,124537,124545,124549,124557,124565,124580,124592,124600,124612,124627,124639,124647,124655],{"__ignoreMap":163},[167,124514,124515,124517,124519],{"class":169,"line":170},[167,124516,174],{"class":173},[167,124518,178],{"class":177},[167,124520,185],{"class":173},[167,124522,124523,124525,124527],{"class":169,"line":188},[167,124524,608],{"class":191},[167,124526,3991],{"class":191},[167,124528,1905],{"class":173},[167,124530,124531],{"class":169,"line":205},[167,124532,50209],{"class":173},[167,124534,124535],{"class":169,"line":160},[167,124536,276],{"class":173},[167,124538,124539,124541,124543],{"class":169,"line":238},[167,124540,282],{"class":173},[167,124542,178],{"class":177},[167,124544,185],{"class":173},[167,124546,124547],{"class":169,"line":243},[167,124548,209],{"emptyLinePlaceholder":208},[167,124550,124551,124553,124555],{"class":169,"line":261},[167,124552,174],{"class":173},[167,124554,299],{"class":177},[167,124556,185],{"class":173},[167,124558,124559,124561,124563],{"class":169,"line":273},[167,124560,307],{"class":173},[167,124562,50079],{"class":177},[167,124564,185],{"class":173},[167,124566,124568,124570,124572,124574,124576,124578],{"class":124567,"line":279},[169,213],[167,124569,1257],{"class":173},[167,124571,299],{"class":177},[167,124573,32029],{"class":181},[167,124575,583],{"class":173},[167,124577,1260],{"class":181},[167,124579,185],{"class":173},[167,124581,124582,124584,124586,124588,124590],{"class":169,"line":289},[167,124583,1268],{"class":173},[167,124585,11],{"class":177},[167,124587,124429],{"class":173},[167,124589,11],{"class":177},[167,124591,185],{"class":173},[167,124593,124594,124596,124598],{"class":169,"line":294},[167,124595,1292],{"class":173},[167,124597,299],{"class":177},[167,124599,185],{"class":173},[167,124601,124602,124604,124606,124608,124610],{"class":169,"line":304},[167,124603,1257],{"class":173},[167,124605,15],{"class":177},[167,124607,124450],{"class":173},[167,124609,15],{"class":177},[167,124611,185],{"class":173},[167,124613,124615,124617,124619,124621,124623,124625],{"class":124614,"line":313},[169,213],[167,124616,1257],{"class":173},[167,124618,299],{"class":177},[167,124620,32029],{"class":181},[167,124622,583],{"class":173},[167,124624,1334],{"class":181},[167,124626,185],{"class":173},[167,124628,124629,124631,124633,124635,124637],{"class":169,"line":161},[167,124630,1268],{"class":173},[167,124632,507],{"class":177},[167,124634,124478],{"class":173},[167,124636,507],{"class":177},[167,124638,185],{"class":173},[167,124640,124641,124643,124645],{"class":169,"line":335},[167,124642,1292],{"class":173},[167,124644,299],{"class":177},[167,124646,185],{"class":173},[167,124648,124649,124651,124653],{"class":169,"line":341},[167,124650,504],{"class":173},[167,124652,50079],{"class":177},[167,124654,185],{"class":173},[167,124656,124657,124659,124661],{"class":169,"line":489},[167,124658,282],{"class":173},[167,124660,299],{"class":177},[167,124662,185],{"class":173},[15,124664,124665,124666,124669],{},"It’s key for building ",[3933,124667,124668],{},"flexible, composable, reusable"," components.",[22,124671,124672],{"id":27772},[87,124673,27772],{},[15,124675,124676,124677,124680],{},"It renders content ",[3933,124678,124679],{},"only once"," and excludes it from the reactive system.",[154,124682,124685],{"className":156,"code":124683,"filename":3260,"highlights":124684,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n  \nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-once>This text won’t change: {{ count }}\u003C\u002Fp>\n  \u003Cbutton @click=\"count++\">Increment\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[273],[87,124686,124687,124697,124707,124711,124727,124735,124739,124747,124763,124782],{"__ignoreMap":163},[167,124688,124689,124691,124693,124695],{"class":169,"line":170},[167,124690,174],{"class":173},[167,124692,178],{"class":177},[167,124694,182],{"class":181},[167,124696,185],{"class":173},[167,124698,124699,124701,124703,124705],{"class":169,"line":188},[167,124700,192],{"class":191},[167,124702,195],{"class":173},[167,124704,198],{"class":191},[167,124706,202],{"class":201},[167,124708,124709],{"class":169,"line":205},[167,124710,48367],{"class":173},[167,124712,124713,124715,124717,124719,124721,124723,124725],{"class":169,"line":160},[167,124714,216],{"class":191},[167,124716,15325],{"class":219},[167,124718,223],{"class":191},[167,124720,226],{"class":181},[167,124722,229],{"class":173},[167,124724,1960],{"class":219},[167,124726,235],{"class":173},[167,124728,124729,124731,124733],{"class":169,"line":238},[167,124730,282],{"class":173},[167,124732,178],{"class":177},[167,124734,185],{"class":173},[167,124736,124737],{"class":169,"line":243},[167,124738,209],{"emptyLinePlaceholder":208},[167,124740,124741,124743,124745],{"class":169,"line":261},[167,124742,174],{"class":173},[167,124744,299],{"class":177},[167,124746,185],{"class":173},[167,124748,124750,124752,124754,124756,124759,124761],{"class":124749,"line":273},[169,213],[167,124751,307],{"class":173},[167,124753,15],{"class":177},[167,124755,28178],{"class":181},[167,124757,124758],{"class":173},">This text won’t change: {{ count }}\u003C\u002F",[167,124760,15],{"class":177},[167,124762,185],{"class":173},[167,124764,124765,124767,124769,124771,124773,124775,124778,124780],{"class":169,"line":279},[167,124766,307],{"class":173},[167,124768,507],{"class":177},[167,124770,1182],{"class":181},[167,124772,267],{"class":173},[167,124774,18386],{"class":201},[167,124776,124777],{"class":173},">Increment\u003C\u002F",[167,124779,507],{"class":177},[167,124781,185],{"class":173},[167,124783,124784,124786,124788],{"class":169,"line":289},[167,124785,282],{"class":173},[167,124787,299],{"class":177},[167,124789,185],{"class":173},[154,124791,124794],{"className":156,"code":124792,"filename":3973,"highlights":124793,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      count: 0\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp v-once>This text won’t change: {{ count }}\u003C\u002Fp>\n  \u003Cbutton @click=\"count++\">Increment\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[304],[87,124795,124796,124804,124812,124818,124824,124830,124834,124838,124842,124850,124854,124862,124877,124895],{"__ignoreMap":163},[167,124797,124798,124800,124802],{"class":169,"line":170},[167,124799,174],{"class":173},[167,124801,178],{"class":177},[167,124803,185],{"class":173},[167,124805,124806,124808,124810],{"class":169,"line":188},[167,124807,608],{"class":191},[167,124809,3991],{"class":191},[167,124811,1905],{"class":173},[167,124813,124814,124816],{"class":169,"line":205},[167,124815,7176],{"class":181},[167,124817,763],{"class":173},[167,124819,124820,124822],{"class":169,"line":160},[167,124821,1937],{"class":191},[167,124823,1905],{"class":173},[167,124825,124826,124828],{"class":169,"line":238},[167,124827,37484],{"class":173},[167,124829,10681],{"class":219},[167,124831,124832],{"class":169,"line":243},[167,124833,4049],{"class":173},[167,124835,124836],{"class":169,"line":261},[167,124837,3492],{"class":173},[167,124839,124840],{"class":169,"line":273},[167,124841,276],{"class":173},[167,124843,124844,124846,124848],{"class":169,"line":279},[167,124845,282],{"class":173},[167,124847,178],{"class":177},[167,124849,185],{"class":173},[167,124851,124852],{"class":169,"line":289},[167,124853,209],{"emptyLinePlaceholder":208},[167,124855,124856,124858,124860],{"class":169,"line":294},[167,124857,174],{"class":173},[167,124859,299],{"class":177},[167,124861,185],{"class":173},[167,124863,124865,124867,124869,124871,124873,124875],{"class":124864,"line":304},[169,213],[167,124866,307],{"class":173},[167,124868,15],{"class":177},[167,124870,28178],{"class":181},[167,124872,124758],{"class":173},[167,124874,15],{"class":177},[167,124876,185],{"class":173},[167,124878,124879,124881,124883,124885,124887,124889,124891,124893],{"class":169,"line":313},[167,124880,307],{"class":173},[167,124882,507],{"class":177},[167,124884,1182],{"class":181},[167,124886,267],{"class":173},[167,124888,18386],{"class":201},[167,124890,124777],{"class":173},[167,124892,507],{"class":177},[167,124894,185],{"class":173},[167,124896,124897,124899,124901],{"class":169,"line":161},[167,124898,282],{"class":173},[167,124900,299],{"class":177},[167,124902,185],{"class":173},[15,124904,124905],{},"Useful when content should never update, even if state changes.",[22,124907,124908],{"id":27775},[87,124909,27775],{},[15,124911,124912],{},"It prevents unnecessary re-renders when dependencies don’t change.",[154,124914,124917],{"className":156,"code":124915,"filename":3260,"highlights":124916,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[count]\">\n    \u003Cp>This block only re-renders if 'count' changes: {{ count }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n  \u003Cbutton @click=\"count++\">Increment\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[273],[87,124918,124919,124929,124939,124943,124959,124967,124971,124979,124994,125007,125015,125033],{"__ignoreMap":163},[167,124920,124921,124923,124925,124927],{"class":169,"line":170},[167,124922,174],{"class":173},[167,124924,178],{"class":177},[167,124926,182],{"class":181},[167,124928,185],{"class":173},[167,124930,124931,124933,124935,124937],{"class":169,"line":188},[167,124932,192],{"class":191},[167,124934,195],{"class":173},[167,124936,198],{"class":191},[167,124938,202],{"class":201},[167,124940,124941],{"class":169,"line":205},[167,124942,209],{"emptyLinePlaceholder":208},[167,124944,124945,124947,124949,124951,124953,124955,124957],{"class":169,"line":160},[167,124946,216],{"class":191},[167,124948,15325],{"class":219},[167,124950,223],{"class":191},[167,124952,226],{"class":181},[167,124954,229],{"class":173},[167,124956,1960],{"class":219},[167,124958,235],{"class":173},[167,124960,124961,124963,124965],{"class":169,"line":238},[167,124962,282],{"class":173},[167,124964,178],{"class":177},[167,124966,185],{"class":173},[167,124968,124969],{"class":169,"line":243},[167,124970,209],{"emptyLinePlaceholder":208},[167,124972,124973,124975,124977],{"class":169,"line":261},[167,124974,174],{"class":173},[167,124976,299],{"class":177},[167,124978,185],{"class":173},[167,124980,124982,124984,124986,124988,124990,124992],{"class":124981,"line":273},[169,213],[167,124983,307],{"class":173},[167,124985,1242],{"class":177},[167,124987,50664],{"class":181},[167,124989,267],{"class":173},[167,124991,50669],{"class":201},[167,124993,185],{"class":173},[167,124995,124996,124998,125000,125003,125005],{"class":169,"line":279},[167,124997,1257],{"class":173},[167,124999,15],{"class":177},[167,125001,125002],{"class":173},">This block only re-renders if 'count' changes: {{ count }}\u003C\u002F",[167,125004,15],{"class":177},[167,125006,185],{"class":173},[167,125008,125009,125011,125013],{"class":169,"line":289},[167,125010,504],{"class":173},[167,125012,1242],{"class":177},[167,125014,185],{"class":173},[167,125016,125017,125019,125021,125023,125025,125027,125029,125031],{"class":169,"line":294},[167,125018,307],{"class":173},[167,125020,507],{"class":177},[167,125022,1182],{"class":181},[167,125024,267],{"class":173},[167,125026,18386],{"class":201},[167,125028,124777],{"class":173},[167,125030,507],{"class":177},[167,125032,185],{"class":173},[167,125034,125035,125037,125039],{"class":169,"line":304},[167,125036,282],{"class":173},[167,125038,299],{"class":177},[167,125040,185],{"class":173},[154,125042,125045],{"className":156,"code":125043,"filename":3973,"highlights":125044,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      value: 10\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-memo=\"[value]\">\n    \u003Cp>The value is: {{ value }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[304],[87,125046,125047,125055,125063,125069,125075,125081,125085,125089,125093,125101,125105,125113,125128,125141,125149],{"__ignoreMap":163},[167,125048,125049,125051,125053],{"class":169,"line":170},[167,125050,174],{"class":173},[167,125052,178],{"class":177},[167,125054,185],{"class":173},[167,125056,125057,125059,125061],{"class":169,"line":188},[167,125058,608],{"class":191},[167,125060,3991],{"class":191},[167,125062,1905],{"class":173},[167,125064,125065,125067],{"class":169,"line":205},[167,125066,7176],{"class":181},[167,125068,763],{"class":173},[167,125070,125071,125073],{"class":169,"line":160},[167,125072,1937],{"class":191},[167,125074,1905],{"class":173},[167,125076,125077,125079],{"class":169,"line":238},[167,125078,50757],{"class":173},[167,125080,50760],{"class":219},[167,125082,125083],{"class":169,"line":243},[167,125084,4049],{"class":173},[167,125086,125087],{"class":169,"line":261},[167,125088,3492],{"class":173},[167,125090,125091],{"class":169,"line":273},[167,125092,276],{"class":173},[167,125094,125095,125097,125099],{"class":169,"line":279},[167,125096,282],{"class":173},[167,125098,178],{"class":177},[167,125100,185],{"class":173},[167,125102,125103],{"class":169,"line":289},[167,125104,209],{"emptyLinePlaceholder":208},[167,125106,125107,125109,125111],{"class":169,"line":294},[167,125108,174],{"class":173},[167,125110,299],{"class":177},[167,125112,185],{"class":173},[167,125114,125116,125118,125120,125122,125124,125126],{"class":125115,"line":304},[169,213],[167,125117,307],{"class":173},[167,125119,1242],{"class":177},[167,125121,50664],{"class":181},[167,125123,267],{"class":173},[167,125125,50806],{"class":201},[167,125127,185],{"class":173},[167,125129,125130,125132,125134,125137,125139],{"class":169,"line":313},[167,125131,1257],{"class":173},[167,125133,15],{"class":177},[167,125135,125136],{"class":173},">The value is: {{ value }}\u003C\u002F",[167,125138,15],{"class":177},[167,125140,185],{"class":173},[167,125142,125143,125145,125147],{"class":169,"line":161},[167,125144,504],{"class":173},[167,125146,1242],{"class":177},[167,125148,185],{"class":173},[167,125150,125151,125153,125155],{"class":169,"line":335},[167,125152,282],{"class":173},[167,125154,299],{"class":177},[167,125156,185],{"class":173},[15,125158,125159,125160,125163],{},"It’s an ",[3933,125161,125162],{},"advanced optimization",".\nIt’s not meant to be used “just because”, but in real bottlenecks.",[22,125165,125166],{"id":27778},[87,125167,27778],{},[15,125169,125170],{},"It prevents Vue from compiling the node’s content.",[154,125172,125175],{"className":156,"code":125173,"filename":3260,"highlights":125174,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-pre>\n    {{ this_will_not_be_evaluated }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[238],[87,125176,125177,125187,125195,125199,125207,125218,125223,125231],{"__ignoreMap":163},[167,125178,125179,125181,125183,125185],{"class":169,"line":170},[167,125180,174],{"class":173},[167,125182,178],{"class":177},[167,125184,182],{"class":181},[167,125186,185],{"class":173},[167,125188,125189,125191,125193],{"class":169,"line":188},[167,125190,282],{"class":173},[167,125192,178],{"class":177},[167,125194,185],{"class":173},[167,125196,125197],{"class":169,"line":205},[167,125198,209],{"emptyLinePlaceholder":208},[167,125200,125201,125203,125205],{"class":169,"line":160},[167,125202,174],{"class":173},[167,125204,299],{"class":177},[167,125206,185],{"class":173},[167,125208,125210,125212,125214,125216],{"class":125209,"line":238},[169,213],[167,125211,307],{"class":173},[167,125213,1242],{"class":177},[167,125215,29066],{"class":181},[167,125217,185],{"class":173},[167,125219,125220],{"class":169,"line":243},[167,125221,125222],{"class":173},"    {{ this_will_not_be_evaluated }}\n",[167,125224,125225,125227,125229],{"class":169,"line":261},[167,125226,504],{"class":173},[167,125228,1242],{"class":177},[167,125230,185],{"class":173},[167,125232,125233,125235,125237],{"class":169,"line":273},[167,125234,282],{"class":173},[167,125236,299],{"class":177},[167,125238,185],{"class":173},[154,125240,125243],{"className":156,"code":125241,"filename":3973,"highlights":125242,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-pre>\n    {{ this_will_not_be_evaluated }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[243],[87,125244,125245,125253,125261,125269,125273,125281,125292,125296,125304],{"__ignoreMap":163},[167,125246,125247,125249,125251],{"class":169,"line":170},[167,125248,174],{"class":173},[167,125250,178],{"class":177},[167,125252,185],{"class":173},[167,125254,125255,125257,125259],{"class":169,"line":188},[167,125256,608],{"class":191},[167,125258,3991],{"class":191},[167,125260,50942],{"class":173},[167,125262,125263,125265,125267],{"class":169,"line":205},[167,125264,282],{"class":173},[167,125266,178],{"class":177},[167,125268,185],{"class":173},[167,125270,125271],{"class":169,"line":160},[167,125272,209],{"emptyLinePlaceholder":208},[167,125274,125275,125277,125279],{"class":169,"line":238},[167,125276,174],{"class":173},[167,125278,299],{"class":177},[167,125280,185],{"class":173},[167,125282,125284,125286,125288,125290],{"class":125283,"line":243},[169,213],[167,125285,307],{"class":173},[167,125287,1242],{"class":177},[167,125289,29066],{"class":181},[167,125291,185],{"class":173},[167,125293,125294],{"class":169,"line":261},[167,125295,125222],{"class":173},[167,125297,125298,125300,125302],{"class":169,"line":273},[167,125299,504],{"class":173},[167,125301,1242],{"class":177},[167,125303,185],{"class":173},[167,125305,125306,125308,125310],{"class":169,"line":279},[167,125307,282],{"class":173},[167,125309,299],{"class":177},[167,125311,185],{"class":173},[15,125313,125314],{},"Perfect for showing snippets, literal examples, or demo templates.",[22,125316,125317],{"id":26486},[87,125318,26486],{},[15,125320,125321],{},"It hides the template until Vue finishes mounting the app.",[154,125323,125326],{"className":156,"code":125324,"filename":3260,"highlights":125325,"language":162,"meta":163,"style":163},"\u003Cscript setup>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-cloak>\n    {{ message }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[238],[87,125327,125328,125338,125346,125350,125358,125369,125374,125382],{"__ignoreMap":163},[167,125329,125330,125332,125334,125336],{"class":169,"line":170},[167,125331,174],{"class":173},[167,125333,178],{"class":177},[167,125335,182],{"class":181},[167,125337,185],{"class":173},[167,125339,125340,125342,125344],{"class":169,"line":188},[167,125341,282],{"class":173},[167,125343,178],{"class":177},[167,125345,185],{"class":173},[167,125347,125348],{"class":169,"line":205},[167,125349,209],{"emptyLinePlaceholder":208},[167,125351,125352,125354,125356],{"class":169,"line":160},[167,125353,174],{"class":173},[167,125355,299],{"class":177},[167,125357,185],{"class":173},[167,125359,125361,125363,125365,125367],{"class":125360,"line":238},[169,213],[167,125362,307],{"class":173},[167,125364,1242],{"class":177},[167,125366,26875],{"class":181},[167,125368,185],{"class":173},[167,125370,125371],{"class":169,"line":243},[167,125372,125373],{"class":173},"    {{ message }}\n",[167,125375,125376,125378,125380],{"class":169,"line":261},[167,125377,504],{"class":173},[167,125379,1242],{"class":177},[167,125381,185],{"class":173},[167,125383,125384,125386,125388],{"class":169,"line":273},[167,125385,282],{"class":173},[167,125387,299],{"class":177},[167,125389,185],{"class":173},[154,125391,125394],{"className":156,"code":125392,"filename":3973,"highlights":125393,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-cloak>\n    {{ message }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[243],[87,125395,125396,125404,125412,125420,125424,125432,125443,125447,125455],{"__ignoreMap":163},[167,125397,125398,125400,125402],{"class":169,"line":170},[167,125399,174],{"class":173},[167,125401,178],{"class":177},[167,125403,185],{"class":173},[167,125405,125406,125408,125410],{"class":169,"line":188},[167,125407,608],{"class":191},[167,125409,3991],{"class":191},[167,125411,50942],{"class":173},[167,125413,125414,125416,125418],{"class":169,"line":205},[167,125415,282],{"class":173},[167,125417,178],{"class":177},[167,125419,185],{"class":173},[167,125421,125422],{"class":169,"line":160},[167,125423,209],{"emptyLinePlaceholder":208},[167,125425,125426,125428,125430],{"class":169,"line":238},[167,125427,174],{"class":173},[167,125429,299],{"class":177},[167,125431,185],{"class":173},[167,125433,125435,125437,125439,125441],{"class":125434,"line":243},[169,213],[167,125436,307],{"class":173},[167,125438,1242],{"class":177},[167,125440,26875],{"class":181},[167,125442,185],{"class":173},[167,125444,125445],{"class":169,"line":261},[167,125446,125373],{"class":173},[167,125448,125449,125451,125453],{"class":169,"line":273},[167,125450,504],{"class":173},[167,125452,1242],{"class":177},[167,125454,185],{"class":173},[167,125456,125457,125459,125461],{"class":169,"line":279},[167,125458,282],{"class":173},[167,125460,299],{"class":177},[167,125462,185],{"class":173},[15,125464,125465],{},"It prevents the initial flash in client-rendered apps.",[22,125467,125469],{"id":125468},"custom-directives","Custom directives",[15,125471,125472],{},"They let you extend Vue to directly manipulate the DOM when there’s no more declarative option.",[154,125474,125476],{"className":2879,"code":51156,"filename":25323,"highlights":125475,"language":2882,"meta":163,"style":163},[160,238,243,261,273],[87,125477,125478,125488,125498,125510,125523,125534,125543,125548],{"__ignoreMap":163},[167,125479,125480,125482,125484,125486],{"class":169,"line":170},[167,125481,192],{"class":191},[167,125483,51166],{"class":173},[167,125485,198],{"class":191},[167,125487,202],{"class":201},[167,125489,125490,125492,125494,125496],{"class":169,"line":188},[167,125491,192],{"class":191},[167,125493,51177],{"class":173},[167,125495,198],{"class":191},[167,125497,51182],{"class":201},[167,125499,125500,125502,125504,125506,125508],{"class":169,"line":205},[167,125501,216],{"class":191},[167,125503,51189],{"class":219},[167,125505,223],{"class":191},[167,125507,51194],{"class":181},[167,125509,51197],{"class":173},[167,125511,125513,125515,125517,125519,125521],{"class":125512,"line":160},[169,213],[167,125514,51203],{"class":173},[167,125516,51206],{"class":181},[167,125518,229],{"class":173},[167,125520,51211],{"class":201},[167,125522,627],{"class":173},[167,125524,125526,125528,125530,125532],{"class":125525,"line":238},[169,213],[167,125527,12749],{"class":181},[167,125529,229],{"class":173},[167,125531,24211],{"class":254},[167,125533,258],{"class":173},[167,125535,125537,125539,125541],{"class":125536,"line":243},[169,213],[167,125538,51230],{"class":173},[167,125540,17408],{"class":181},[167,125542,2917],{"class":173},[167,125544,125546],{"class":125545,"line":261},[169,213],[167,125547,3492],{"class":173},[167,125549,125551],{"class":125550,"line":273},[169,213],[167,125552,403],{"class":173},[154,125554,125556],{"className":156,"code":51247,"filename":15284,"highlights":125555,"language":162,"meta":163,"style":163},[188],[87,125557,125558,125566,125577],{"__ignoreMap":163},[167,125559,125560,125562,125564],{"class":169,"line":170},[167,125561,174],{"class":173},[167,125563,299],{"class":177},[167,125565,185],{"class":173},[167,125567,125569,125571,125573,125575],{"class":125568,"line":188},[169,213],[167,125570,307],{"class":173},[167,125572,2650],{"class":177},[167,125574,51268],{"class":181},[167,125576,5325],{"class":173},[167,125578,125579,125581,125583],{"class":169,"line":205},[167,125580,282],{"class":173},[167,125582,299],{"class":177},[167,125584,185],{"class":173},[15,125586,125587],{},"They’re powerful, but they must be used carefully:\nif you abuse them, you’re probably breaking Vue’s mental model.",[22,125589,73913],{"id":73912},[15,125591,125592,125593,1679],{},"Directives aren’t just fancy syntax.\nThey’re ",[3933,125594,125595],{},"clear contracts between state and the DOM",[15,125597,125598],{},"This article is the starting point.\nEach directive will have its own individual post, with:",[33,125600,125601,125604,125606],{},[36,125602,125603],{},"Real-world cases",[36,125605,63002],{},[36,125607,125608],{},"Good and bad practices",[15,125610,125611,125612,125615],{},"This map already helps you ",[3933,125613,125614],{},"read Vue code with good judgment",".\nThe rest is depth, not confusion.",[924,125617,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":125619},[125620,125621,125622,125623,125624,125625,125626,125627,125628,125629,125630,125631,125632,125633,125634,125635],{"id":122359,"depth":188,"text":122360},{"id":48057,"depth":188,"text":51316},{"id":13659,"depth":188,"text":13659},{"id":30726,"depth":188,"text":30726},{"id":23868,"depth":188,"text":23868},{"id":23865,"depth":188,"text":23865},{"id":23871,"depth":188,"text":23871},{"id":30434,"depth":188,"text":30434},{"id":30437,"depth":188,"text":30437},{"id":31708,"depth":188,"text":31708},{"id":27772,"depth":188,"text":27772},{"id":27775,"depth":188,"text":27775},{"id":27778,"depth":188,"text":27778},{"id":26486,"depth":188,"text":26486},{"id":125468,"depth":188,"text":125469},{"id":73912,"depth":188,"text":73913},"Explore Vue.js’ essential directives, their syntax, and common use cases.",{"updatedAt":33919,"readingTime":243,"coverCaption":125638,"author":946,"keywords":125639},"Cover image representing directives in Vue.js.",[3258,60263,104120,104136],"\u002Fblog\u002Fvue-directives-overview.en",[125642],{"headline":122325,"author":125643,"datePublished":51342,"@type":961},{"name":946,"@type":959},{"title":122325,"description":125636},"blog\u002Fvue-directives-overview.en",[125647,125648,125649,125650,125651,125652],{"tag":60263,"color":26467},{"tag":27757,"color":27758},{"tag":78904,"color":47959},{"tag":73994,"color":3270},{"tag":60269,"color":3270},{"tag":65670,"color":5425},"SErVeBGYMzT6QY0BoDyse1mTac-I06e1Wx4_y-qB4pQ",{"id":47964,"title":47965,"body":125655,"cover":51331,"coverAlt":47965,"date":51332,"description":51333,"draft":940,"extension":941,"lab":942,"locale":943,"meta":128825,"navigation":208,"path":51338,"schemaOrg":128827,"seo":128830,"series":26460,"seriesDescription":26461,"seriesOrder":170,"seriesTitle":26462,"slug":942,"stem":51344,"tags":128831,"__hash__":51352},{"type":8,"value":125656,"toc":128807},[125657,125659,125667,125673,125675,125677,125719,125727,125733,125735,125743,125850,125963,125967,125973,125975,125981,126073,126171,126175,126177,126179,126187,126319,126459,126465,126469,126471,126475,126479,126573,126681,126685,126689,126691,126699,126805,126917,126923,126927,126929,127045,127181,127191,127195,127197,127289,127387,127389,127393,127395,127487,127585,127591,127595,127597,127738,127893,127897,127901,127905,128011,128123,128125,128129,128131,128257,128371,128375,128379,128381,128447,128519,128521,128525,128527,128593,128665,128667,128669,128671,128751,128783,128785,128787,128791,128793,128801,128805],[11,125658,47971],{"id":47970},[15,125660,47974,125661,47978,125663,47982,125665,47986],{},[3933,125662,47977],{},[87,125664,47981],{},[3933,125666,47985],{},[15,125668,47989,125669,47993,125671,47997],{},[3933,125670,47992],{},[3933,125672,47996],{},[22,125674,19083],{"id":19082},[15,125676,48002],{},[33,125678,125679,125683,125687,125691,125695,125699,125703,125707,125711,125715],{},[36,125680,125681],{},[19092,125682,46098],{"href":48009},[36,125684,125685],{},[19092,125686,42751],{"href":48014},[36,125688,125689],{},[19092,125690,39772],{"href":48019},[36,125692,125693],{},[19092,125694,33939],{"href":48024},[36,125696,125697],{},[19092,125698,36754],{"href":48029},[36,125700,125701],{},[19092,125702,30426],{"href":48034},[36,125704,125705],{},[19092,125706,31700],{"href":48039},[36,125708,125709],{},[19092,125710,27764],{"href":48044},[36,125712,125713],{},[19092,125714,26477],{"href":48049},[36,125716,125717],{},[19092,125718,23674],{"href":48054},[22,125720,125721,1025,125723,1025,125725],{"id":48057},[87,125722,13496],{},[87,125724,46221],{},[87,125726,46108],{},[15,125728,48066,125729,48070,125731,1679],{},[3933,125730,48069],{},[3933,125732,46186],{},[15,125734,48075],{},[33,125736,125737,125739,125741],{},[36,125738,48080],{},[36,125740,48083],{},[36,125742,48086],{},[154,125744,125746],{"className":156,"code":48089,"filename":3260,"highlights":125745,"language":162,"meta":163,"style":163},[273,279],[87,125747,125748,125758,125768,125772,125788,125796,125800,125808,125827,125842],{"__ignoreMap":163},[167,125749,125750,125752,125754,125756],{"class":169,"line":170},[167,125751,174],{"class":173},[167,125753,178],{"class":177},[167,125755,182],{"class":181},[167,125757,185],{"class":173},[167,125759,125760,125762,125764,125766],{"class":169,"line":188},[167,125761,192],{"class":191},[167,125763,195],{"class":173},[167,125765,198],{"class":191},[167,125767,202],{"class":201},[167,125769,125770],{"class":169,"line":205},[167,125771,209],{"emptyLinePlaceholder":208},[167,125773,125774,125776,125778,125780,125782,125784,125786],{"class":169,"line":160},[167,125775,216],{"class":191},[167,125777,48123],{"class":219},[167,125779,223],{"class":191},[167,125781,226],{"class":181},[167,125783,229],{"class":173},[167,125785,390],{"class":219},[167,125787,235],{"class":173},[167,125789,125790,125792,125794],{"class":169,"line":238},[167,125791,282],{"class":173},[167,125793,178],{"class":177},[167,125795,185],{"class":173},[167,125797,125798],{"class":169,"line":243},[167,125799,209],{"emptyLinePlaceholder":208},[167,125801,125802,125804,125806],{"class":169,"line":261},[167,125803,174],{"class":173},[167,125805,299],{"class":177},[167,125807,185],{"class":173},[167,125809,125811,125813,125815,125817,125819,125821,125823,125825],{"class":125810,"line":273},[169,213],[167,125812,307],{"class":173},[167,125814,15],{"class":177},[167,125816,5694],{"class":181},[167,125818,267],{"class":173},[167,125820,48167],{"class":201},[167,125822,48170],{"class":173},[167,125824,15],{"class":177},[167,125826,185],{"class":173},[167,125828,125830,125832,125834,125836,125838,125840],{"class":125829,"line":279},[169,213],[167,125831,307],{"class":173},[167,125833,15],{"class":177},[167,125835,7038],{"class":181},[167,125837,48186],{"class":173},[167,125839,15],{"class":177},[167,125841,185],{"class":173},[167,125843,125844,125846,125848],{"class":169,"line":289},[167,125845,282],{"class":173},[167,125847,299],{"class":177},[167,125849,185],{"class":173},[154,125851,125853],{"className":156,"code":48201,"filename":3973,"highlights":125852,"language":162,"meta":163,"style":163},[304,313],[87,125854,125855,125863,125871,125877,125883,125889,125893,125897,125901,125909,125913,125921,125940,125955],{"__ignoreMap":163},[167,125856,125857,125859,125861],{"class":169,"line":170},[167,125858,174],{"class":173},[167,125860,178],{"class":177},[167,125862,185],{"class":173},[167,125864,125865,125867,125869],{"class":169,"line":188},[167,125866,608],{"class":191},[167,125868,3991],{"class":191},[167,125870,1905],{"class":173},[167,125872,125873,125875],{"class":169,"line":205},[167,125874,7176],{"class":181},[167,125876,763],{"class":173},[167,125878,125879,125881],{"class":169,"line":160},[167,125880,1937],{"class":191},[167,125882,1905],{"class":173},[167,125884,125885,125887],{"class":169,"line":238},[167,125886,48237],{"class":173},[167,125888,3637],{"class":219},[167,125890,125891],{"class":169,"line":243},[167,125892,4049],{"class":173},[167,125894,125895],{"class":169,"line":261},[167,125896,3492],{"class":173},[167,125898,125899],{"class":169,"line":273},[167,125900,276],{"class":173},[167,125902,125903,125905,125907],{"class":169,"line":279},[167,125904,282],{"class":173},[167,125906,178],{"class":177},[167,125908,185],{"class":173},[167,125910,125911],{"class":169,"line":289},[167,125912,209],{"emptyLinePlaceholder":208},[167,125914,125915,125917,125919],{"class":169,"line":294},[167,125916,174],{"class":173},[167,125918,299],{"class":177},[167,125920,185],{"class":173},[167,125922,125924,125926,125928,125930,125932,125934,125936,125938],{"class":125923,"line":304},[169,213],[167,125925,307],{"class":173},[167,125927,15],{"class":177},[167,125929,5694],{"class":181},[167,125931,267],{"class":173},[167,125933,48167],{"class":201},[167,125935,48170],{"class":173},[167,125937,15],{"class":177},[167,125939,185],{"class":173},[167,125941,125943,125945,125947,125949,125951,125953],{"class":125942,"line":313},[169,213],[167,125944,307],{"class":173},[167,125946,15],{"class":177},[167,125948,7038],{"class":181},[167,125950,48186],{"class":173},[167,125952,15],{"class":177},[167,125954,185],{"class":173},[167,125956,125957,125959,125961],{"class":169,"line":161},[167,125958,282],{"class":173},[167,125960,299],{"class":177},[167,125962,185],{"class":173},[22,125964,125965],{"id":13659},[87,125966,13659],{},[15,125968,48320,125969,48323,125971,1679],{},[87,125970,46152],{},[3933,125972,48326],{},[15,125974,48075],{},[33,125976,125977,125979],{},[36,125978,48333],{},[36,125980,48336],{},[154,125982,125984],{"className":156,"code":48339,"filename":3260,"highlights":125983,"language":162,"meta":163,"style":163},[273],[87,125985,125986,125996,126006,126010,126026,126034,126038,126046,126065],{"__ignoreMap":163},[167,125987,125988,125990,125992,125994],{"class":169,"line":170},[167,125989,174],{"class":173},[167,125991,178],{"class":177},[167,125993,182],{"class":181},[167,125995,185],{"class":173},[167,125997,125998,126000,126002,126004],{"class":169,"line":188},[167,125999,192],{"class":191},[167,126001,195],{"class":173},[167,126003,198],{"class":191},[167,126005,202],{"class":201},[167,126007,126008],{"class":169,"line":205},[167,126009,48367],{"class":173},[167,126011,126012,126014,126016,126018,126020,126022,126024],{"class":169,"line":160},[167,126013,216],{"class":191},[167,126015,48374],{"class":219},[167,126017,223],{"class":191},[167,126019,226],{"class":181},[167,126021,229],{"class":173},[167,126023,390],{"class":219},[167,126025,235],{"class":173},[167,126027,126028,126030,126032],{"class":169,"line":238},[167,126029,282],{"class":173},[167,126031,178],{"class":177},[167,126033,185],{"class":173},[167,126035,126036],{"class":169,"line":243},[167,126037,209],{"emptyLinePlaceholder":208},[167,126039,126040,126042,126044],{"class":169,"line":261},[167,126041,174],{"class":173},[167,126043,299],{"class":177},[167,126045,185],{"class":173},[167,126047,126049,126051,126053,126055,126057,126059,126061,126063],{"class":126048,"line":273},[169,213],[167,126050,307],{"class":173},[167,126052,15],{"class":177},[167,126054,46960],{"class":181},[167,126056,267],{"class":173},[167,126058,48418],{"class":201},[167,126060,48421],{"class":173},[167,126062,15],{"class":177},[167,126064,185],{"class":173},[167,126066,126067,126069,126071],{"class":169,"line":279},[167,126068,282],{"class":173},[167,126070,299],{"class":177},[167,126072,185],{"class":173},[154,126074,126076],{"className":156,"code":48436,"filename":3973,"highlights":126075,"language":162,"meta":163,"style":163},[304],[87,126077,126078,126086,126094,126100,126106,126112,126116,126120,126124,126132,126136,126144,126163],{"__ignoreMap":163},[167,126079,126080,126082,126084],{"class":169,"line":170},[167,126081,174],{"class":173},[167,126083,178],{"class":177},[167,126085,185],{"class":173},[167,126087,126088,126090,126092],{"class":169,"line":188},[167,126089,608],{"class":191},[167,126091,3991],{"class":191},[167,126093,1905],{"class":173},[167,126095,126096,126098],{"class":169,"line":205},[167,126097,7176],{"class":181},[167,126099,763],{"class":173},[167,126101,126102,126104],{"class":169,"line":160},[167,126103,1937],{"class":191},[167,126105,1905],{"class":173},[167,126107,126108,126110],{"class":169,"line":238},[167,126109,48472],{"class":173},[167,126111,3637],{"class":219},[167,126113,126114],{"class":169,"line":243},[167,126115,4049],{"class":173},[167,126117,126118],{"class":169,"line":261},[167,126119,3492],{"class":173},[167,126121,126122],{"class":169,"line":273},[167,126123,276],{"class":173},[167,126125,126126,126128,126130],{"class":169,"line":279},[167,126127,282],{"class":173},[167,126129,178],{"class":177},[167,126131,185],{"class":173},[167,126133,126134],{"class":169,"line":289},[167,126135,209],{"emptyLinePlaceholder":208},[167,126137,126138,126140,126142],{"class":169,"line":294},[167,126139,174],{"class":173},[167,126141,299],{"class":177},[167,126143,185],{"class":173},[167,126145,126147,126149,126151,126153,126155,126157,126159,126161],{"class":126146,"line":304},[169,213],[167,126148,307],{"class":173},[167,126150,15],{"class":177},[167,126152,46960],{"class":181},[167,126154,267],{"class":173},[167,126156,48418],{"class":201},[167,126158,48421],{"class":173},[167,126160,15],{"class":177},[167,126162,185],{"class":173},[167,126164,126165,126167,126169],{"class":169,"line":313},[167,126166,282],{"class":173},[167,126168,299],{"class":177},[167,126170,185],{"class":173},[22,126172,126173],{"id":30726},[87,126174,30726],{},[15,126176,48540],{},[15,126178,48543],{},[5367,126180,126181],{},[15,126182,126183,48550,126185,48554],{},[87,126184,30726],{},[3933,126186,48553],{},[154,126188,126190],{"className":156,"code":48557,"filename":3260,"highlights":126189,"language":162,"meta":163,"style":163},[294,304,313],[87,126191,126192,126202,126212,126216,126228,126240,126252,126256,126264,126268,126276,126297,126302,126311],{"__ignoreMap":163},[167,126193,126194,126196,126198,126200],{"class":169,"line":170},[167,126195,174],{"class":173},[167,126197,178],{"class":177},[167,126199,182],{"class":181},[167,126201,185],{"class":173},[167,126203,126204,126206,126208,126210],{"class":169,"line":188},[167,126205,192],{"class":191},[167,126207,195],{"class":173},[167,126209,198],{"class":191},[167,126211,202],{"class":201},[167,126213,126214],{"class":169,"line":205},[167,126215,48367],{"class":173},[167,126217,126218,126220,126222,126224,126226],{"class":169,"line":160},[167,126219,216],{"class":191},[167,126221,1820],{"class":219},[167,126223,223],{"class":191},[167,126225,226],{"class":181},[167,126227,1827],{"class":173},[167,126229,126230,126232,126234,126236,126238],{"class":169,"line":238},[167,126231,1832],{"class":173},[167,126233,1835],{"class":219},[167,126235,1838],{"class":173},[167,126237,42925],{"class":201},[167,126239,1856],{"class":173},[167,126241,126242,126244,126246,126248,126250],{"class":169,"line":243},[167,126243,1832],{"class":173},[167,126245,1853],{"class":219},[167,126247,1838],{"class":173},[167,126249,42930],{"class":201},[167,126251,599],{"class":173},[167,126253,126254],{"class":169,"line":261},[167,126255,429],{"class":173},[167,126257,126258,126260,126262],{"class":169,"line":273},[167,126259,282],{"class":173},[167,126261,178],{"class":177},[167,126263,185],{"class":173},[167,126265,126266],{"class":169,"line":279},[167,126267,209],{"emptyLinePlaceholder":208},[167,126269,126270,126272,126274],{"class":169,"line":289},[167,126271,174],{"class":173},[167,126273,299],{"class":177},[167,126275,185],{"class":173},[167,126277,126279,126281,126283,126285,126287,126289,126291,126293,126295],{"class":126278,"line":294},[169,213],[167,126280,307],{"class":173},[167,126282,36],{"class":177},[167,126284,18706],{"class":181},[167,126286,267],{"class":173},[167,126288,48658],{"class":201},[167,126290,10307],{"class":181},[167,126292,267],{"class":173},[167,126294,35843],{"class":201},[167,126296,185],{"class":173},[167,126298,126300],{"class":126299,"line":304},[169,213],[167,126301,48672],{"class":173},[167,126303,126305,126307,126309],{"class":126304,"line":313},[169,213],[167,126306,504],{"class":173},[167,126308,36],{"class":177},[167,126310,185],{"class":173},[167,126312,126313,126315,126317],{"class":169,"line":161},[167,126314,282],{"class":173},[167,126316,299],{"class":177},[167,126318,185],{"class":173},[154,126320,126322],{"className":156,"code":48692,"filename":3973,"highlights":126321,"language":162,"meta":163,"style":163},[335,341,489],[87,126323,126324,126332,126340,126346,126352,126356,126368,126380,126384,126388,126392,126396,126404,126408,126416,126437,126442,126451],{"__ignoreMap":163},[167,126325,126326,126328,126330],{"class":169,"line":170},[167,126327,174],{"class":173},[167,126329,178],{"class":177},[167,126331,185],{"class":173},[167,126333,126334,126336,126338],{"class":169,"line":188},[167,126335,608],{"class":191},[167,126337,3991],{"class":191},[167,126339,1905],{"class":173},[167,126341,126342,126344],{"class":169,"line":205},[167,126343,7176],{"class":181},[167,126345,763],{"class":173},[167,126347,126348,126350],{"class":169,"line":160},[167,126349,1937],{"class":191},[167,126351,1905],{"class":173},[167,126353,126354],{"class":169,"line":238},[167,126355,44324],{"class":173},[167,126357,126358,126360,126362,126364,126366],{"class":169,"line":243},[167,126359,8677],{"class":173},[167,126361,1835],{"class":219},[167,126363,1838],{"class":173},[167,126365,42925],{"class":201},[167,126367,1856],{"class":173},[167,126369,126370,126372,126374,126376,126378],{"class":169,"line":261},[167,126371,8677],{"class":173},[167,126373,1853],{"class":219},[167,126375,1838],{"class":173},[167,126377,42930],{"class":201},[167,126379,599],{"class":173},[167,126381,126382],{"class":169,"line":273},[167,126383,8738],{"class":173},[167,126385,126386],{"class":169,"line":279},[167,126387,4049],{"class":173},[167,126389,126390],{"class":169,"line":289},[167,126391,3492],{"class":173},[167,126393,126394],{"class":169,"line":294},[167,126395,276],{"class":173},[167,126397,126398,126400,126402],{"class":169,"line":304},[167,126399,282],{"class":173},[167,126401,178],{"class":177},[167,126403,185],{"class":173},[167,126405,126406],{"class":169,"line":313},[167,126407,209],{"emptyLinePlaceholder":208},[167,126409,126410,126412,126414],{"class":169,"line":161},[167,126411,174],{"class":173},[167,126413,299],{"class":177},[167,126415,185],{"class":173},[167,126417,126419,126421,126423,126425,126427,126429,126431,126433,126435],{"class":126418,"line":335},[169,213],[167,126420,307],{"class":173},[167,126422,36],{"class":177},[167,126424,18706],{"class":181},[167,126426,267],{"class":173},[167,126428,48658],{"class":201},[167,126430,10307],{"class":181},[167,126432,267],{"class":173},[167,126434,35843],{"class":201},[167,126436,185],{"class":173},[167,126438,126440],{"class":126439,"line":341},[169,213],[167,126441,48672],{"class":173},[167,126443,126445,126447,126449],{"class":126444,"line":489},[169,213],[167,126446,504],{"class":173},[167,126448,36],{"class":177},[167,126450,185],{"class":173},[167,126452,126453,126455,126457],{"class":169,"line":495},[167,126454,282],{"class":173},[167,126456,299],{"class":177},[167,126458,185],{"class":173},[15,126460,126461,16903,126463,48838],{},[87,126462,7845],{},[3933,126464,48837],{},[22,126466,126467],{"id":23868},[87,126468,23868],{},[15,126470,48845],{},[15,126472,13788,126473,48850],{},[87,126474,23868],{},[5367,126476,126477],{},[15,126478,48855],{},[154,126480,126482],{"className":156,"code":48858,"filename":3260,"highlights":126481,"language":162,"meta":163,"style":163},[273],[87,126483,126484,126494,126504,126508,126524,126532,126536,126544,126565],{"__ignoreMap":163},[167,126485,126486,126488,126490,126492],{"class":169,"line":170},[167,126487,174],{"class":173},[167,126489,178],{"class":177},[167,126491,182],{"class":181},[167,126493,185],{"class":173},[167,126495,126496,126498,126500,126502],{"class":169,"line":188},[167,126497,192],{"class":191},[167,126499,195],{"class":173},[167,126501,198],{"class":191},[167,126503,202],{"class":201},[167,126505,126506],{"class":169,"line":205},[167,126507,209],{"emptyLinePlaceholder":208},[167,126509,126510,126512,126514,126516,126518,126520,126522],{"class":169,"line":160},[167,126511,216],{"class":191},[167,126513,48892],{"class":219},[167,126515,223],{"class":191},[167,126517,226],{"class":181},[167,126519,229],{"class":173},[167,126521,48901],{"class":201},[167,126523,235],{"class":173},[167,126525,126526,126528,126530],{"class":169,"line":238},[167,126527,282],{"class":173},[167,126529,178],{"class":177},[167,126531,185],{"class":173},[167,126533,126534],{"class":169,"line":243},[167,126535,209],{"emptyLinePlaceholder":208},[167,126537,126538,126540,126542],{"class":169,"line":261},[167,126539,174],{"class":173},[167,126541,299],{"class":177},[167,126543,185],{"class":173},[167,126545,126547,126549,126551,126553,126555,126557,126559,126561,126563],{"class":126546,"line":273},[169,213],[167,126548,307],{"class":173},[167,126550,40006],{"class":177},[167,126552,48933],{"class":181},[167,126554,267],{"class":173},[167,126556,48938],{"class":201},[167,126558,48941],{"class":181},[167,126560,267],{"class":173},[167,126562,48946],{"class":201},[167,126564,5325],{"class":173},[167,126566,126567,126569,126571],{"class":169,"line":279},[167,126568,282],{"class":173},[167,126570,299],{"class":177},[167,126572,185],{"class":173},[154,126574,126576],{"className":156,"code":48959,"filename":3973,"highlights":126575,"language":162,"meta":163,"style":163},[313],[87,126577,126578,126586,126594,126600,126606,126614,126620,126624,126628,126632,126640,126644,126652,126673],{"__ignoreMap":163},[167,126579,126580,126582,126584],{"class":169,"line":170},[167,126581,174],{"class":173},[167,126583,178],{"class":177},[167,126585,185],{"class":173},[167,126587,126588,126590,126592],{"class":169,"line":188},[167,126589,608],{"class":191},[167,126591,3991],{"class":191},[167,126593,1905],{"class":173},[167,126595,126596,126598],{"class":169,"line":205},[167,126597,7176],{"class":181},[167,126599,763],{"class":173},[167,126601,126602,126604],{"class":169,"line":160},[167,126603,1937],{"class":191},[167,126605,1905],{"class":173},[167,126607,126608,126610,126612],{"class":169,"line":238},[167,126609,48995],{"class":173},[167,126611,48998],{"class":201},[167,126613,393],{"class":173},[167,126615,126616,126618],{"class":169,"line":243},[167,126617,49005],{"class":173},[167,126619,49008],{"class":201},[167,126621,126622],{"class":169,"line":261},[167,126623,4049],{"class":173},[167,126625,126626],{"class":169,"line":273},[167,126627,3492],{"class":173},[167,126629,126630],{"class":169,"line":279},[167,126631,276],{"class":173},[167,126633,126634,126636,126638],{"class":169,"line":289},[167,126635,282],{"class":173},[167,126637,178],{"class":177},[167,126639,185],{"class":173},[167,126641,126642],{"class":169,"line":294},[167,126643,209],{"emptyLinePlaceholder":208},[167,126645,126646,126648,126650],{"class":169,"line":304},[167,126647,174],{"class":173},[167,126649,299],{"class":177},[167,126651,185],{"class":173},[167,126653,126655,126657,126659,126661,126663,126665,126667,126669,126671],{"class":126654,"line":313},[169,213],[167,126656,307],{"class":173},[167,126658,40006],{"class":177},[167,126660,49050],{"class":181},[167,126662,267],{"class":173},[167,126664,48938],{"class":201},[167,126666,49057],{"class":181},[167,126668,267],{"class":173},[167,126670,49062],{"class":201},[167,126672,5325],{"class":173},[167,126674,126675,126677,126679],{"class":169,"line":161},[167,126676,282],{"class":173},[167,126678,299],{"class":177},[167,126680,185],{"class":173},[22,126682,126683],{"id":23865},[87,126684,23865],{},[15,126686,49079,126687,49083],{},[3933,126688,49082],{},[15,126690,49086],{},[33,126692,126693,126695,126697],{},[36,126694,36747],{},[36,126696,49093],{},[36,126698,49096],{},[154,126700,126702],{"className":156,"code":49099,"filename":3260,"highlights":126701,"language":162,"meta":163,"style":163},[273],[87,126703,126704,126714,126724,126728,126744,126752,126756,126764,126785,126797],{"__ignoreMap":163},[167,126705,126706,126708,126710,126712],{"class":169,"line":170},[167,126707,174],{"class":173},[167,126709,178],{"class":177},[167,126711,182],{"class":181},[167,126713,185],{"class":173},[167,126715,126716,126718,126720,126722],{"class":169,"line":188},[167,126717,192],{"class":191},[167,126719,195],{"class":173},[167,126721,198],{"class":191},[167,126723,202],{"class":201},[167,126725,126726],{"class":169,"line":205},[167,126727,209],{"emptyLinePlaceholder":208},[167,126729,126730,126732,126734,126736,126738,126740,126742],{"class":169,"line":160},[167,126731,216],{"class":191},[167,126733,49133],{"class":219},[167,126735,223],{"class":191},[167,126737,226],{"class":181},[167,126739,229],{"class":173},[167,126741,2184],{"class":201},[167,126743,235],{"class":173},[167,126745,126746,126748,126750],{"class":169,"line":238},[167,126747,282],{"class":173},[167,126749,178],{"class":177},[167,126751,185],{"class":173},[167,126753,126754],{"class":169,"line":243},[167,126755,209],{"emptyLinePlaceholder":208},[167,126757,126758,126760,126762],{"class":169,"line":261},[167,126759,174],{"class":173},[167,126761,299],{"class":177},[167,126763,185],{"class":173},[167,126765,126767,126769,126771,126773,126775,126777,126779,126781,126783],{"class":126766,"line":273},[169,213],[167,126768,307],{"class":173},[167,126770,2650],{"class":177},[167,126772,2653],{"class":181},[167,126774,267],{"class":173},[167,126776,49177],{"class":201},[167,126778,2668],{"class":181},[167,126780,267],{"class":173},[167,126782,49184],{"class":201},[167,126784,5325],{"class":173},[167,126786,126787,126789,126791,126793,126795],{"class":169,"line":279},[167,126788,307],{"class":173},[167,126790,15],{"class":177},[167,126792,49195],{"class":173},[167,126794,15],{"class":177},[167,126796,185],{"class":173},[167,126798,126799,126801,126803],{"class":169,"line":289},[167,126800,282],{"class":173},[167,126802,299],{"class":177},[167,126804,185],{"class":173},[154,126806,126808],{"className":156,"code":49210,"filename":3973,"highlights":126807,"language":162,"meta":163,"style":163},[304],[87,126809,126810,126818,126826,126832,126838,126844,126848,126852,126856,126864,126868,126876,126897,126909],{"__ignoreMap":163},[167,126811,126812,126814,126816],{"class":169,"line":170},[167,126813,174],{"class":173},[167,126815,178],{"class":177},[167,126817,185],{"class":173},[167,126819,126820,126822,126824],{"class":169,"line":188},[167,126821,608],{"class":191},[167,126823,3991],{"class":191},[167,126825,1905],{"class":173},[167,126827,126828,126830],{"class":169,"line":205},[167,126829,7176],{"class":181},[167,126831,763],{"class":173},[167,126833,126834,126836],{"class":169,"line":160},[167,126835,1937],{"class":191},[167,126837,1905],{"class":173},[167,126839,126840,126842],{"class":169,"line":238},[167,126841,49246],{"class":173},[167,126843,7209],{"class":201},[167,126845,126846],{"class":169,"line":243},[167,126847,4049],{"class":173},[167,126849,126850],{"class":169,"line":261},[167,126851,3492],{"class":173},[167,126853,126854],{"class":169,"line":273},[167,126855,276],{"class":173},[167,126857,126858,126860,126862],{"class":169,"line":279},[167,126859,282],{"class":173},[167,126861,178],{"class":177},[167,126863,185],{"class":173},[167,126865,126866],{"class":169,"line":289},[167,126867,209],{"emptyLinePlaceholder":208},[167,126869,126870,126872,126874],{"class":169,"line":294},[167,126871,174],{"class":173},[167,126873,299],{"class":177},[167,126875,185],{"class":173},[167,126877,126879,126881,126883,126885,126887,126889,126891,126893,126895],{"class":126878,"line":304},[169,213],[167,126880,307],{"class":173},[167,126882,2650],{"class":177},[167,126884,2653],{"class":181},[167,126886,267],{"class":173},[167,126888,49177],{"class":201},[167,126890,2668],{"class":181},[167,126892,267],{"class":173},[167,126894,49184],{"class":201},[167,126896,5325],{"class":173},[167,126898,126899,126901,126903,126905,126907],{"class":169,"line":313},[167,126900,307],{"class":173},[167,126902,15],{"class":177},[167,126904,49195],{"class":173},[167,126906,15],{"class":177},[167,126908,185],{"class":173},[167,126910,126911,126913,126915],{"class":169,"line":161},[167,126912,282],{"class":173},[167,126914,299],{"class":177},[167,126916,185],{"class":173},[15,126918,49324,126919,33973,126921,49329],{},[87,126920,34049],{},[87,126922,34055],{},[22,126924,126925],{"id":23871},[87,126926,23871],{},[15,126928,49336],{},[154,126930,126932],{"className":156,"code":49339,"filename":3260,"highlights":126931,"language":162,"meta":163,"style":163},[294],[87,126933,126934,126944,126954,126958,126974,126988,126994,126998,127006,127010,127018,127037],{"__ignoreMap":163},[167,126935,126936,126938,126940,126942],{"class":169,"line":170},[167,126937,174],{"class":173},[167,126939,178],{"class":177},[167,126941,182],{"class":181},[167,126943,185],{"class":173},[167,126945,126946,126948,126950,126952],{"class":169,"line":188},[167,126947,192],{"class":191},[167,126949,195],{"class":173},[167,126951,198],{"class":191},[167,126953,202],{"class":201},[167,126955,126956],{"class":169,"line":205},[167,126957,209],{"emptyLinePlaceholder":208},[167,126959,126960,126962,126964,126966,126968,126970,126972],{"class":169,"line":160},[167,126961,216],{"class":191},[167,126963,15325],{"class":219},[167,126965,223],{"class":191},[167,126967,226],{"class":181},[167,126969,229],{"class":173},[167,126971,1960],{"class":219},[167,126973,235],{"class":173},[167,126975,126976,126978,126980,126982,126984,126986],{"class":169,"line":238},[167,126977,216],{"class":191},[167,126979,49389],{"class":181},[167,126981,223],{"class":191},[167,126983,1469],{"class":173},[167,126985,639],{"class":191},[167,126987,1905],{"class":173},[167,126989,126990,126992],{"class":169,"line":243},[167,126991,15356],{"class":173},[167,126993,3126],{"class":191},[167,126995,126996],{"class":169,"line":261},[167,126997,276],{"class":173},[167,126999,127000,127002,127004],{"class":169,"line":273},[167,127001,282],{"class":173},[167,127003,178],{"class":177},[167,127005,185],{"class":173},[167,127007,127008],{"class":169,"line":279},[167,127009,209],{"emptyLinePlaceholder":208},[167,127011,127012,127014,127016],{"class":169,"line":289},[167,127013,174],{"class":173},[167,127015,299],{"class":177},[167,127017,185],{"class":173},[167,127019,127021,127023,127025,127027,127029,127031,127033,127035],{"class":127020,"line":294},[169,213],[167,127022,307],{"class":173},[167,127024,507],{"class":177},[167,127026,49437],{"class":181},[167,127028,267],{"class":173},[167,127030,49442],{"class":201},[167,127032,49445],{"class":173},[167,127034,507],{"class":177},[167,127036,185],{"class":173},[167,127038,127039,127041,127043],{"class":169,"line":304},[167,127040,282],{"class":173},[167,127042,299],{"class":177},[167,127044,185],{"class":173},[154,127046,127048],{"className":156,"code":49460,"filename":3973,"highlights":127047,"language":162,"meta":163,"style":163},[489],[87,127049,127050,127058,127066,127072,127078,127084,127088,127092,127096,127102,127110,127114,127118,127122,127130,127134,127142,127161,127173],{"__ignoreMap":163},[167,127051,127052,127054,127056],{"class":169,"line":170},[167,127053,174],{"class":173},[167,127055,178],{"class":177},[167,127057,185],{"class":173},[167,127059,127060,127062,127064],{"class":169,"line":188},[167,127061,608],{"class":191},[167,127063,3991],{"class":191},[167,127065,1905],{"class":173},[167,127067,127068,127070],{"class":169,"line":205},[167,127069,7176],{"class":181},[167,127071,763],{"class":173},[167,127073,127074,127076],{"class":169,"line":160},[167,127075,1937],{"class":191},[167,127077,1905],{"class":173},[167,127079,127080,127082],{"class":169,"line":238},[167,127081,37484],{"class":173},[167,127083,10681],{"class":219},[167,127085,127086],{"class":169,"line":243},[167,127087,4049],{"class":173},[167,127089,127090],{"class":169,"line":261},[167,127091,398],{"class":173},[167,127093,127094],{"class":169,"line":273},[167,127095,4419],{"class":173},[167,127097,127098,127100],{"class":169,"line":279},[167,127099,49514],{"class":181},[167,127101,763],{"class":173},[167,127103,127104,127106,127108],{"class":169,"line":289},[167,127105,741],{"class":219},[167,127107,49523],{"class":173},[167,127109,3126],{"class":191},[167,127111,127112],{"class":169,"line":294},[167,127113,4049],{"class":173},[167,127115,127116],{"class":169,"line":304},[167,127117,3492],{"class":173},[167,127119,127120],{"class":169,"line":313},[167,127121,276],{"class":173},[167,127123,127124,127126,127128],{"class":169,"line":161},[167,127125,282],{"class":173},[167,127127,178],{"class":177},[167,127129,185],{"class":173},[167,127131,127132],{"class":169,"line":335},[167,127133,209],{"emptyLinePlaceholder":208},[167,127135,127136,127138,127140],{"class":169,"line":341},[167,127137,174],{"class":173},[167,127139,299],{"class":177},[167,127141,185],{"class":173},[167,127143,127145,127147,127149,127151,127153,127155,127157,127159],{"class":127144,"line":489},[169,213],[167,127146,307],{"class":173},[167,127148,507],{"class":177},[167,127150,49437],{"class":181},[167,127152,267],{"class":173},[167,127154,49442],{"class":201},[167,127156,49573],{"class":173},[167,127158,507],{"class":177},[167,127160,185],{"class":173},[167,127162,127163,127165,127167,127169,127171],{"class":169,"line":495},[167,127164,307],{"class":173},[167,127166,15],{"class":177},[167,127168,49586],{"class":173},[167,127170,15],{"class":177},[167,127172,185],{"class":173},[167,127174,127175,127177,127179],{"class":169,"line":501},[167,127176,282],{"class":173},[167,127178,299],{"class":177},[167,127180,185],{"class":173},[15,127182,49601,127183,2526,127185,1025,127187,1025,127189,49611],{},[3933,127184,49604],{},[87,127186,36908],{},[87,127188,36905],{},[87,127190,36911],{},[22,127192,127193],{"id":30434},[87,127194,30434],{},[15,127196,49618],{},[154,127198,127200],{"className":156,"code":49621,"filename":3260,"highlights":127199,"language":162,"meta":163,"style":163},[273],[87,127201,127202,127212,127222,127226,127242,127250,127254,127262,127281],{"__ignoreMap":163},[167,127203,127204,127206,127208,127210],{"class":169,"line":170},[167,127205,174],{"class":173},[167,127207,178],{"class":177},[167,127209,182],{"class":181},[167,127211,185],{"class":173},[167,127213,127214,127216,127218,127220],{"class":169,"line":188},[167,127215,192],{"class":191},[167,127217,195],{"class":173},[167,127219,198],{"class":191},[167,127221,202],{"class":201},[167,127223,127224],{"class":169,"line":205},[167,127225,209],{"emptyLinePlaceholder":208},[167,127227,127228,127230,127232,127234,127236,127238,127240],{"class":169,"line":160},[167,127229,216],{"class":191},[167,127231,29012],{"class":219},[167,127233,223],{"class":191},[167,127235,226],{"class":181},[167,127237,229],{"class":173},[167,127239,49663],{"class":201},[167,127241,235],{"class":173},[167,127243,127244,127246,127248],{"class":169,"line":238},[167,127245,282],{"class":173},[167,127247,178],{"class":177},[167,127249,185],{"class":173},[167,127251,127252],{"class":169,"line":243},[167,127253,209],{"emptyLinePlaceholder":208},[167,127255,127256,127258,127260],{"class":169,"line":261},[167,127257,174],{"class":173},[167,127259,299],{"class":177},[167,127261,185],{"class":173},[167,127263,127265,127267,127269,127271,127273,127275,127277,127279],{"class":127264,"line":273},[169,213],[167,127266,307],{"class":173},[167,127268,1242],{"class":177},[167,127270,30525],{"class":181},[167,127272,267],{"class":173},[167,127274,49699],{"class":201},[167,127276,1282],{"class":173},[167,127278,1242],{"class":177},[167,127280,185],{"class":173},[167,127282,127283,127285,127287],{"class":169,"line":279},[167,127284,282],{"class":173},[167,127286,299],{"class":177},[167,127288,185],{"class":173},[154,127290,127292],{"className":156,"code":49716,"filename":3973,"highlights":127291,"language":162,"meta":163,"style":163},[304],[87,127293,127294,127302,127310,127316,127322,127328,127332,127336,127340,127348,127352,127360,127379],{"__ignoreMap":163},[167,127295,127296,127298,127300],{"class":169,"line":170},[167,127297,174],{"class":173},[167,127299,178],{"class":177},[167,127301,185],{"class":173},[167,127303,127304,127306,127308],{"class":169,"line":188},[167,127305,608],{"class":191},[167,127307,3991],{"class":191},[167,127309,1905],{"class":173},[167,127311,127312,127314],{"class":169,"line":205},[167,127313,7176],{"class":181},[167,127315,763],{"class":173},[167,127317,127318,127320],{"class":169,"line":160},[167,127319,1937],{"class":191},[167,127321,1905],{"class":173},[167,127323,127324,127326],{"class":169,"line":238},[167,127325,29126],{"class":173},[167,127327,49754],{"class":201},[167,127329,127330],{"class":169,"line":243},[167,127331,4049],{"class":173},[167,127333,127334],{"class":169,"line":261},[167,127335,3492],{"class":173},[167,127337,127338],{"class":169,"line":273},[167,127339,276],{"class":173},[167,127341,127342,127344,127346],{"class":169,"line":279},[167,127343,282],{"class":173},[167,127345,178],{"class":177},[167,127347,185],{"class":173},[167,127349,127350],{"class":169,"line":289},[167,127351,209],{"emptyLinePlaceholder":208},[167,127353,127354,127356,127358],{"class":169,"line":294},[167,127355,174],{"class":173},[167,127357,299],{"class":177},[167,127359,185],{"class":173},[167,127361,127363,127365,127367,127369,127371,127373,127375,127377],{"class":127362,"line":304},[169,213],[167,127364,307],{"class":173},[167,127366,1242],{"class":177},[167,127368,30525],{"class":181},[167,127370,267],{"class":173},[167,127372,49699],{"class":201},[167,127374,1282],{"class":173},[167,127376,1242],{"class":177},[167,127378,185],{"class":173},[167,127380,127381,127383,127385],{"class":169,"line":313},[167,127382,282],{"class":173},[167,127384,299],{"class":177},[167,127386,185],{"class":173},[15,127388,49816],{},[22,127390,127391],{"id":30437},[87,127392,30437],{},[15,127394,49823],{},[154,127396,127398],{"className":156,"code":49826,"filename":3260,"highlights":127397,"language":162,"meta":163,"style":163},[273],[87,127399,127400,127410,127420,127424,127440,127448,127452,127460,127479],{"__ignoreMap":163},[167,127401,127402,127404,127406,127408],{"class":169,"line":170},[167,127403,174],{"class":173},[167,127405,178],{"class":177},[167,127407,182],{"class":181},[167,127409,185],{"class":173},[167,127411,127412,127414,127416,127418],{"class":169,"line":188},[167,127413,192],{"class":191},[167,127415,195],{"class":173},[167,127417,198],{"class":191},[167,127419,202],{"class":201},[167,127421,127422],{"class":169,"line":205},[167,127423,209],{"emptyLinePlaceholder":208},[167,127425,127426,127428,127430,127432,127434,127436,127438],{"class":169,"line":160},[167,127427,216],{"class":191},[167,127429,49860],{"class":219},[167,127431,223],{"class":191},[167,127433,226],{"class":181},[167,127435,229],{"class":173},[167,127437,49869],{"class":201},[167,127439,235],{"class":173},[167,127441,127442,127444,127446],{"class":169,"line":238},[167,127443,282],{"class":173},[167,127445,178],{"class":177},[167,127447,185],{"class":173},[167,127449,127450],{"class":169,"line":243},[167,127451,209],{"emptyLinePlaceholder":208},[167,127453,127454,127456,127458],{"class":169,"line":261},[167,127455,174],{"class":173},[167,127457,299],{"class":177},[167,127459,185],{"class":173},[167,127461,127463,127465,127467,127469,127471,127473,127475,127477],{"class":127462,"line":273},[169,213],[167,127464,307],{"class":173},[167,127466,1242],{"class":177},[167,127468,30594],{"class":181},[167,127470,267],{"class":173},[167,127472,49905],{"class":201},[167,127474,1282],{"class":173},[167,127476,1242],{"class":177},[167,127478,185],{"class":173},[167,127480,127481,127483,127485],{"class":169,"line":279},[167,127482,282],{"class":173},[167,127484,299],{"class":177},[167,127486,185],{"class":173},[154,127488,127490],{"className":156,"code":49922,"filename":3973,"highlights":127489,"language":162,"meta":163,"style":163},[304],[87,127491,127492,127500,127508,127514,127520,127526,127530,127534,127538,127546,127550,127558,127577],{"__ignoreMap":163},[167,127493,127494,127496,127498],{"class":169,"line":170},[167,127495,174],{"class":173},[167,127497,178],{"class":177},[167,127499,185],{"class":173},[167,127501,127502,127504,127506],{"class":169,"line":188},[167,127503,608],{"class":191},[167,127505,3991],{"class":191},[167,127507,1905],{"class":173},[167,127509,127510,127512],{"class":169,"line":205},[167,127511,7176],{"class":181},[167,127513,763],{"class":173},[167,127515,127516,127518],{"class":169,"line":160},[167,127517,1937],{"class":191},[167,127519,1905],{"class":173},[167,127521,127522,127524],{"class":169,"line":238},[167,127523,49958],{"class":173},[167,127525,49961],{"class":201},[167,127527,127528],{"class":169,"line":243},[167,127529,4049],{"class":173},[167,127531,127532],{"class":169,"line":261},[167,127533,3492],{"class":173},[167,127535,127536],{"class":169,"line":273},[167,127537,276],{"class":173},[167,127539,127540,127542,127544],{"class":169,"line":279},[167,127541,282],{"class":173},[167,127543,178],{"class":177},[167,127545,185],{"class":173},[167,127547,127548],{"class":169,"line":289},[167,127549,209],{"emptyLinePlaceholder":208},[167,127551,127552,127554,127556],{"class":169,"line":294},[167,127553,174],{"class":173},[167,127555,299],{"class":177},[167,127557,185],{"class":173},[167,127559,127561,127563,127565,127567,127569,127571,127573,127575],{"class":127560,"line":304},[169,213],[167,127562,307],{"class":173},[167,127564,1242],{"class":177},[167,127566,30594],{"class":181},[167,127568,267],{"class":173},[167,127570,49905],{"class":201},[167,127572,1282],{"class":173},[167,127574,1242],{"class":177},[167,127576,185],{"class":173},[167,127578,127579,127581,127583],{"class":169,"line":313},[167,127580,282],{"class":173},[167,127582,299],{"class":177},[167,127584,185],{"class":173},[5367,127586,127587],{},[15,127588,50025,127589,50029],{},[3933,127590,50028],{},[22,127592,127593],{"id":31708},[87,127594,31708],{},[15,127596,50036],{},[154,127598,127600],{"className":156,"code":50039,"filename":3260,"highlights":127599,"language":162,"meta":163,"style":163},[243,289],[87,127601,127602,127612,127620,127624,127632,127640,127655,127667,127675,127687,127702,127714,127722,127730],{"__ignoreMap":163},[167,127603,127604,127606,127608,127610],{"class":169,"line":170},[167,127605,174],{"class":173},[167,127607,178],{"class":177},[167,127609,182],{"class":181},[167,127611,185],{"class":173},[167,127613,127614,127616,127618],{"class":169,"line":188},[167,127615,282],{"class":173},[167,127617,178],{"class":177},[167,127619,185],{"class":173},[167,127621,127622],{"class":169,"line":205},[167,127623,209],{"emptyLinePlaceholder":208},[167,127625,127626,127628,127630],{"class":169,"line":160},[167,127627,174],{"class":173},[167,127629,299],{"class":177},[167,127631,185],{"class":173},[167,127633,127634,127636,127638],{"class":169,"line":238},[167,127635,307],{"class":173},[167,127637,50079],{"class":177},[167,127639,185],{"class":173},[167,127641,127643,127645,127647,127649,127651,127653],{"class":127642,"line":243},[169,213],[167,127644,1257],{"class":173},[167,127646,299],{"class":177},[167,127648,32029],{"class":181},[167,127650,583],{"class":173},[167,127652,1260],{"class":181},[167,127654,185],{"class":173},[167,127656,127657,127659,127661,127663,127665],{"class":169,"line":261},[167,127658,1268],{"class":173},[167,127660,11],{"class":177},[167,127662,50105],{"class":173},[167,127664,11],{"class":177},[167,127666,185],{"class":173},[167,127668,127669,127671,127673],{"class":169,"line":273},[167,127670,1292],{"class":173},[167,127672,299],{"class":177},[167,127674,185],{"class":173},[167,127676,127677,127679,127681,127683,127685],{"class":169,"line":279},[167,127678,1257],{"class":173},[167,127680,15],{"class":177},[167,127682,50126],{"class":173},[167,127684,15],{"class":177},[167,127686,185],{"class":173},[167,127688,127690,127692,127694,127696,127698,127700],{"class":127689,"line":289},[169,213],[167,127691,1257],{"class":173},[167,127693,299],{"class":177},[167,127695,32029],{"class":181},[167,127697,583],{"class":173},[167,127699,1334],{"class":181},[167,127701,185],{"class":173},[167,127703,127704,127706,127708,127710,127712],{"class":169,"line":294},[167,127705,1268],{"class":173},[167,127707,507],{"class":177},[167,127709,50154],{"class":173},[167,127711,507],{"class":177},[167,127713,185],{"class":173},[167,127715,127716,127718,127720],{"class":169,"line":304},[167,127717,1292],{"class":173},[167,127719,299],{"class":177},[167,127721,185],{"class":173},[167,127723,127724,127726,127728],{"class":169,"line":313},[167,127725,504],{"class":173},[167,127727,50079],{"class":177},[167,127729,185],{"class":173},[167,127731,127732,127734,127736],{"class":169,"line":161},[167,127733,282],{"class":173},[167,127735,299],{"class":177},[167,127737,185],{"class":173},[154,127739,127741],{"className":156,"code":50185,"filename":3973,"highlights":127740,"language":162,"meta":163,"style":163},[279,313],[87,127742,127743,127751,127759,127763,127767,127775,127779,127787,127795,127810,127822,127830,127842,127857,127869,127877,127885],{"__ignoreMap":163},[167,127744,127745,127747,127749],{"class":169,"line":170},[167,127746,174],{"class":173},[167,127748,178],{"class":177},[167,127750,185],{"class":173},[167,127752,127753,127755,127757],{"class":169,"line":188},[167,127754,608],{"class":191},[167,127756,3991],{"class":191},[167,127758,1905],{"class":173},[167,127760,127761],{"class":169,"line":205},[167,127762,50209],{"class":173},[167,127764,127765],{"class":169,"line":160},[167,127766,276],{"class":173},[167,127768,127769,127771,127773],{"class":169,"line":238},[167,127770,282],{"class":173},[167,127772,178],{"class":177},[167,127774,185],{"class":173},[167,127776,127777],{"class":169,"line":243},[167,127778,209],{"emptyLinePlaceholder":208},[167,127780,127781,127783,127785],{"class":169,"line":261},[167,127782,174],{"class":173},[167,127784,299],{"class":177},[167,127786,185],{"class":173},[167,127788,127789,127791,127793],{"class":169,"line":273},[167,127790,307],{"class":173},[167,127792,50079],{"class":177},[167,127794,185],{"class":173},[167,127796,127798,127800,127802,127804,127806,127808],{"class":127797,"line":279},[169,213],[167,127799,1257],{"class":173},[167,127801,299],{"class":177},[167,127803,32029],{"class":181},[167,127805,583],{"class":173},[167,127807,1260],{"class":181},[167,127809,185],{"class":173},[167,127811,127812,127814,127816,127818,127820],{"class":169,"line":289},[167,127813,1268],{"class":173},[167,127815,11],{"class":177},[167,127817,50105],{"class":173},[167,127819,11],{"class":177},[167,127821,185],{"class":173},[167,127823,127824,127826,127828],{"class":169,"line":294},[167,127825,1292],{"class":173},[167,127827,299],{"class":177},[167,127829,185],{"class":173},[167,127831,127832,127834,127836,127838,127840],{"class":169,"line":304},[167,127833,1257],{"class":173},[167,127835,15],{"class":177},[167,127837,50126],{"class":173},[167,127839,15],{"class":177},[167,127841,185],{"class":173},[167,127843,127845,127847,127849,127851,127853,127855],{"class":127844,"line":313},[169,213],[167,127846,1257],{"class":173},[167,127848,299],{"class":177},[167,127850,32029],{"class":181},[167,127852,583],{"class":173},[167,127854,1334],{"class":181},[167,127856,185],{"class":173},[167,127858,127859,127861,127863,127865,127867],{"class":169,"line":161},[167,127860,1268],{"class":173},[167,127862,507],{"class":177},[167,127864,50154],{"class":173},[167,127866,507],{"class":177},[167,127868,185],{"class":173},[167,127870,127871,127873,127875],{"class":169,"line":335},[167,127872,1292],{"class":173},[167,127874,299],{"class":177},[167,127876,185],{"class":173},[167,127878,127879,127881,127883],{"class":169,"line":341},[167,127880,504],{"class":173},[167,127882,50079],{"class":177},[167,127884,185],{"class":173},[167,127886,127887,127889,127891],{"class":169,"line":489},[167,127888,282],{"class":173},[167,127890,299],{"class":177},[167,127892,185],{"class":173},[15,127894,50342,127895,1679],{},[3933,127896,50345],{},[22,127898,127899],{"id":27772},[87,127900,27772],{},[15,127902,50352,127903,50356],{},[3933,127904,50355],{},[154,127906,127908],{"className":156,"code":50359,"filename":3260,"highlights":127907,"language":162,"meta":163,"style":163},[273],[87,127909,127910,127920,127930,127934,127950,127958,127962,127970,127985,128003],{"__ignoreMap":163},[167,127911,127912,127914,127916,127918],{"class":169,"line":170},[167,127913,174],{"class":173},[167,127915,178],{"class":177},[167,127917,182],{"class":181},[167,127919,185],{"class":173},[167,127921,127922,127924,127926,127928],{"class":169,"line":188},[167,127923,192],{"class":191},[167,127925,195],{"class":173},[167,127927,198],{"class":191},[167,127929,202],{"class":201},[167,127931,127932],{"class":169,"line":205},[167,127933,48367],{"class":173},[167,127935,127936,127938,127940,127942,127944,127946,127948],{"class":169,"line":160},[167,127937,216],{"class":191},[167,127939,15325],{"class":219},[167,127941,223],{"class":191},[167,127943,226],{"class":181},[167,127945,229],{"class":173},[167,127947,1960],{"class":219},[167,127949,235],{"class":173},[167,127951,127952,127954,127956],{"class":169,"line":238},[167,127953,282],{"class":173},[167,127955,178],{"class":177},[167,127957,185],{"class":173},[167,127959,127960],{"class":169,"line":243},[167,127961,209],{"emptyLinePlaceholder":208},[167,127963,127964,127966,127968],{"class":169,"line":261},[167,127965,174],{"class":173},[167,127967,299],{"class":177},[167,127969,185],{"class":173},[167,127971,127973,127975,127977,127979,127981,127983],{"class":127972,"line":273},[169,213],[167,127974,307],{"class":173},[167,127976,15],{"class":177},[167,127978,28178],{"class":181},[167,127980,50434],{"class":173},[167,127982,15],{"class":177},[167,127984,185],{"class":173},[167,127986,127987,127989,127991,127993,127995,127997,127999,128001],{"class":169,"line":279},[167,127988,307],{"class":173},[167,127990,507],{"class":177},[167,127992,1182],{"class":181},[167,127994,267],{"class":173},[167,127996,18386],{"class":201},[167,127998,50453],{"class":173},[167,128000,507],{"class":177},[167,128002,185],{"class":173},[167,128004,128005,128007,128009],{"class":169,"line":289},[167,128006,282],{"class":173},[167,128008,299],{"class":177},[167,128010,185],{"class":173},[154,128012,128014],{"className":156,"code":50468,"filename":3973,"highlights":128013,"language":162,"meta":163,"style":163},[304],[87,128015,128016,128024,128032,128038,128044,128050,128054,128058,128062,128070,128074,128082,128097,128115],{"__ignoreMap":163},[167,128017,128018,128020,128022],{"class":169,"line":170},[167,128019,174],{"class":173},[167,128021,178],{"class":177},[167,128023,185],{"class":173},[167,128025,128026,128028,128030],{"class":169,"line":188},[167,128027,608],{"class":191},[167,128029,3991],{"class":191},[167,128031,1905],{"class":173},[167,128033,128034,128036],{"class":169,"line":205},[167,128035,7176],{"class":181},[167,128037,763],{"class":173},[167,128039,128040,128042],{"class":169,"line":160},[167,128041,1937],{"class":191},[167,128043,1905],{"class":173},[167,128045,128046,128048],{"class":169,"line":238},[167,128047,37484],{"class":173},[167,128049,10681],{"class":219},[167,128051,128052],{"class":169,"line":243},[167,128053,4049],{"class":173},[167,128055,128056],{"class":169,"line":261},[167,128057,3492],{"class":173},[167,128059,128060],{"class":169,"line":273},[167,128061,276],{"class":173},[167,128063,128064,128066,128068],{"class":169,"line":279},[167,128065,282],{"class":173},[167,128067,178],{"class":177},[167,128069,185],{"class":173},[167,128071,128072],{"class":169,"line":289},[167,128073,209],{"emptyLinePlaceholder":208},[167,128075,128076,128078,128080],{"class":169,"line":294},[167,128077,174],{"class":173},[167,128079,299],{"class":177},[167,128081,185],{"class":173},[167,128083,128085,128087,128089,128091,128093,128095],{"class":128084,"line":304},[169,213],[167,128086,307],{"class":173},[167,128088,15],{"class":177},[167,128090,28178],{"class":181},[167,128092,50434],{"class":173},[167,128094,15],{"class":177},[167,128096,185],{"class":173},[167,128098,128099,128101,128103,128105,128107,128109,128111,128113],{"class":169,"line":313},[167,128100,307],{"class":173},[167,128102,507],{"class":177},[167,128104,1182],{"class":181},[167,128106,267],{"class":173},[167,128108,18386],{"class":201},[167,128110,50453],{"class":173},[167,128112,507],{"class":177},[167,128114,185],{"class":173},[167,128116,128117,128119,128121],{"class":169,"line":161},[167,128118,282],{"class":173},[167,128120,299],{"class":177},[167,128122,185],{"class":173},[15,128124,50581],{},[22,128126,128127],{"id":27775},[87,128128,27775],{},[15,128130,50588],{},[154,128132,128134],{"className":156,"code":50591,"filename":3260,"highlights":128133,"language":162,"meta":163,"style":163},[273],[87,128135,128136,128146,128156,128160,128176,128184,128188,128196,128211,128223,128231,128249],{"__ignoreMap":163},[167,128137,128138,128140,128142,128144],{"class":169,"line":170},[167,128139,174],{"class":173},[167,128141,178],{"class":177},[167,128143,182],{"class":181},[167,128145,185],{"class":173},[167,128147,128148,128150,128152,128154],{"class":169,"line":188},[167,128149,192],{"class":191},[167,128151,195],{"class":173},[167,128153,198],{"class":191},[167,128155,202],{"class":201},[167,128157,128158],{"class":169,"line":205},[167,128159,209],{"emptyLinePlaceholder":208},[167,128161,128162,128164,128166,128168,128170,128172,128174],{"class":169,"line":160},[167,128163,216],{"class":191},[167,128165,15325],{"class":219},[167,128167,223],{"class":191},[167,128169,226],{"class":181},[167,128171,229],{"class":173},[167,128173,1960],{"class":219},[167,128175,235],{"class":173},[167,128177,128178,128180,128182],{"class":169,"line":238},[167,128179,282],{"class":173},[167,128181,178],{"class":177},[167,128183,185],{"class":173},[167,128185,128186],{"class":169,"line":243},[167,128187,209],{"emptyLinePlaceholder":208},[167,128189,128190,128192,128194],{"class":169,"line":261},[167,128191,174],{"class":173},[167,128193,299],{"class":177},[167,128195,185],{"class":173},[167,128197,128199,128201,128203,128205,128207,128209],{"class":128198,"line":273},[169,213],[167,128200,307],{"class":173},[167,128202,1242],{"class":177},[167,128204,50664],{"class":181},[167,128206,267],{"class":173},[167,128208,50669],{"class":201},[167,128210,185],{"class":173},[167,128212,128213,128215,128217,128219,128221],{"class":169,"line":279},[167,128214,1257],{"class":173},[167,128216,15],{"class":177},[167,128218,50680],{"class":173},[167,128220,15],{"class":177},[167,128222,185],{"class":173},[167,128224,128225,128227,128229],{"class":169,"line":289},[167,128226,504],{"class":173},[167,128228,1242],{"class":177},[167,128230,185],{"class":173},[167,128232,128233,128235,128237,128239,128241,128243,128245,128247],{"class":169,"line":294},[167,128234,307],{"class":173},[167,128236,507],{"class":177},[167,128238,1182],{"class":181},[167,128240,267],{"class":173},[167,128242,18386],{"class":201},[167,128244,50453],{"class":173},[167,128246,507],{"class":177},[167,128248,185],{"class":173},[167,128250,128251,128253,128255],{"class":169,"line":304},[167,128252,282],{"class":173},[167,128254,299],{"class":177},[167,128256,185],{"class":173},[154,128258,128260],{"className":156,"code":50721,"filename":3973,"highlights":128259,"language":162,"meta":163,"style":163},[304],[87,128261,128262,128270,128278,128284,128290,128296,128300,128304,128308,128316,128320,128328,128343,128355,128363],{"__ignoreMap":163},[167,128263,128264,128266,128268],{"class":169,"line":170},[167,128265,174],{"class":173},[167,128267,178],{"class":177},[167,128269,185],{"class":173},[167,128271,128272,128274,128276],{"class":169,"line":188},[167,128273,608],{"class":191},[167,128275,3991],{"class":191},[167,128277,1905],{"class":173},[167,128279,128280,128282],{"class":169,"line":205},[167,128281,7176],{"class":181},[167,128283,763],{"class":173},[167,128285,128286,128288],{"class":169,"line":160},[167,128287,1937],{"class":191},[167,128289,1905],{"class":173},[167,128291,128292,128294],{"class":169,"line":238},[167,128293,50757],{"class":173},[167,128295,50760],{"class":219},[167,128297,128298],{"class":169,"line":243},[167,128299,4049],{"class":173},[167,128301,128302],{"class":169,"line":261},[167,128303,3492],{"class":173},[167,128305,128306],{"class":169,"line":273},[167,128307,276],{"class":173},[167,128309,128310,128312,128314],{"class":169,"line":279},[167,128311,282],{"class":173},[167,128313,178],{"class":177},[167,128315,185],{"class":173},[167,128317,128318],{"class":169,"line":289},[167,128319,209],{"emptyLinePlaceholder":208},[167,128321,128322,128324,128326],{"class":169,"line":294},[167,128323,174],{"class":173},[167,128325,299],{"class":177},[167,128327,185],{"class":173},[167,128329,128331,128333,128335,128337,128339,128341],{"class":128330,"line":304},[169,213],[167,128332,307],{"class":173},[167,128334,1242],{"class":177},[167,128336,50664],{"class":181},[167,128338,267],{"class":173},[167,128340,50806],{"class":201},[167,128342,185],{"class":173},[167,128344,128345,128347,128349,128351,128353],{"class":169,"line":313},[167,128346,1257],{"class":173},[167,128348,15],{"class":177},[167,128350,50817],{"class":173},[167,128352,15],{"class":177},[167,128354,185],{"class":173},[167,128356,128357,128359,128361],{"class":169,"line":161},[167,128358,504],{"class":173},[167,128360,1242],{"class":177},[167,128362,185],{"class":173},[167,128364,128365,128367,128369],{"class":169,"line":335},[167,128366,282],{"class":173},[167,128368,299],{"class":177},[167,128370,185],{"class":173},[15,128372,50840,128373,50844],{},[3933,128374,50843],{},[22,128376,128377],{"id":27778},[87,128378,27778],{},[15,128380,50851],{},[154,128382,128384],{"className":156,"code":50854,"filename":3260,"highlights":128383,"language":162,"meta":163,"style":163},[238],[87,128385,128386,128396,128404,128408,128416,128427,128431,128439],{"__ignoreMap":163},[167,128387,128388,128390,128392,128394],{"class":169,"line":170},[167,128389,174],{"class":173},[167,128391,178],{"class":177},[167,128393,182],{"class":181},[167,128395,185],{"class":173},[167,128397,128398,128400,128402],{"class":169,"line":188},[167,128399,282],{"class":173},[167,128401,178],{"class":177},[167,128403,185],{"class":173},[167,128405,128406],{"class":169,"line":205},[167,128407,209],{"emptyLinePlaceholder":208},[167,128409,128410,128412,128414],{"class":169,"line":160},[167,128411,174],{"class":173},[167,128413,299],{"class":177},[167,128415,185],{"class":173},[167,128417,128419,128421,128423,128425],{"class":128418,"line":238},[169,213],[167,128420,307],{"class":173},[167,128422,1242],{"class":177},[167,128424,29066],{"class":181},[167,128426,185],{"class":173},[167,128428,128429],{"class":169,"line":243},[167,128430,50903],{"class":173},[167,128432,128433,128435,128437],{"class":169,"line":261},[167,128434,504],{"class":173},[167,128436,1242],{"class":177},[167,128438,185],{"class":173},[167,128440,128441,128443,128445],{"class":169,"line":273},[167,128442,282],{"class":173},[167,128444,299],{"class":177},[167,128446,185],{"class":173},[154,128448,128450],{"className":156,"code":50922,"filename":3973,"highlights":128449,"language":162,"meta":163,"style":163},[243],[87,128451,128452,128460,128468,128476,128480,128488,128499,128503,128511],{"__ignoreMap":163},[167,128453,128454,128456,128458],{"class":169,"line":170},[167,128455,174],{"class":173},[167,128457,178],{"class":177},[167,128459,185],{"class":173},[167,128461,128462,128464,128466],{"class":169,"line":188},[167,128463,608],{"class":191},[167,128465,3991],{"class":191},[167,128467,50942],{"class":173},[167,128469,128470,128472,128474],{"class":169,"line":205},[167,128471,282],{"class":173},[167,128473,178],{"class":177},[167,128475,185],{"class":173},[167,128477,128478],{"class":169,"line":160},[167,128479,209],{"emptyLinePlaceholder":208},[167,128481,128482,128484,128486],{"class":169,"line":238},[167,128483,174],{"class":173},[167,128485,299],{"class":177},[167,128487,185],{"class":173},[167,128489,128491,128493,128495,128497],{"class":128490,"line":243},[169,213],[167,128492,307],{"class":173},[167,128494,1242],{"class":177},[167,128496,29066],{"class":181},[167,128498,185],{"class":173},[167,128500,128501],{"class":169,"line":261},[167,128502,50903],{"class":173},[167,128504,128505,128507,128509],{"class":169,"line":273},[167,128506,504],{"class":173},[167,128508,1242],{"class":177},[167,128510,185],{"class":173},[167,128512,128513,128515,128517],{"class":169,"line":279},[167,128514,282],{"class":173},[167,128516,299],{"class":177},[167,128518,185],{"class":173},[15,128520,50996],{},[22,128522,128523],{"id":26486},[87,128524,26486],{},[15,128526,51003],{},[154,128528,128530],{"className":156,"code":51006,"filename":3260,"highlights":128529,"language":162,"meta":163,"style":163},[238],[87,128531,128532,128542,128550,128554,128562,128573,128577,128585],{"__ignoreMap":163},[167,128533,128534,128536,128538,128540],{"class":169,"line":170},[167,128535,174],{"class":173},[167,128537,178],{"class":177},[167,128539,182],{"class":181},[167,128541,185],{"class":173},[167,128543,128544,128546,128548],{"class":169,"line":188},[167,128545,282],{"class":173},[167,128547,178],{"class":177},[167,128549,185],{"class":173},[167,128551,128552],{"class":169,"line":205},[167,128553,209],{"emptyLinePlaceholder":208},[167,128555,128556,128558,128560],{"class":169,"line":160},[167,128557,174],{"class":173},[167,128559,299],{"class":177},[167,128561,185],{"class":173},[167,128563,128565,128567,128569,128571],{"class":128564,"line":238},[169,213],[167,128566,307],{"class":173},[167,128568,1242],{"class":177},[167,128570,26875],{"class":181},[167,128572,185],{"class":173},[167,128574,128575],{"class":169,"line":243},[167,128576,51055],{"class":173},[167,128578,128579,128581,128583],{"class":169,"line":261},[167,128580,504],{"class":173},[167,128582,1242],{"class":177},[167,128584,185],{"class":173},[167,128586,128587,128589,128591],{"class":169,"line":273},[167,128588,282],{"class":173},[167,128590,299],{"class":177},[167,128592,185],{"class":173},[154,128594,128596],{"className":156,"code":51074,"filename":3973,"highlights":128595,"language":162,"meta":163,"style":163},[243],[87,128597,128598,128606,128614,128622,128626,128634,128645,128649,128657],{"__ignoreMap":163},[167,128599,128600,128602,128604],{"class":169,"line":170},[167,128601,174],{"class":173},[167,128603,178],{"class":177},[167,128605,185],{"class":173},[167,128607,128608,128610,128612],{"class":169,"line":188},[167,128609,608],{"class":191},[167,128611,3991],{"class":191},[167,128613,50942],{"class":173},[167,128615,128616,128618,128620],{"class":169,"line":205},[167,128617,282],{"class":173},[167,128619,178],{"class":177},[167,128621,185],{"class":173},[167,128623,128624],{"class":169,"line":160},[167,128625,209],{"emptyLinePlaceholder":208},[167,128627,128628,128630,128632],{"class":169,"line":238},[167,128629,174],{"class":173},[167,128631,299],{"class":177},[167,128633,185],{"class":173},[167,128635,128637,128639,128641,128643],{"class":128636,"line":243},[169,213],[167,128638,307],{"class":173},[167,128640,1242],{"class":177},[167,128642,26875],{"class":181},[167,128644,185],{"class":173},[167,128646,128647],{"class":169,"line":261},[167,128648,51055],{"class":173},[167,128650,128651,128653,128655],{"class":169,"line":273},[167,128652,504],{"class":173},[167,128654,1242],{"class":177},[167,128656,185],{"class":173},[167,128658,128659,128661,128663],{"class":169,"line":279},[167,128660,282],{"class":173},[167,128662,299],{"class":177},[167,128664,185],{"class":173},[15,128666,51147],{},[22,128668,9244],{"id":51150},[15,128670,51153],{},[154,128672,128674],{"className":2879,"code":51156,"filename":25323,"highlights":128673,"language":2882,"meta":163,"style":163},[160,238,243,261,273],[87,128675,128676,128686,128696,128708,128721,128732,128741,128746],{"__ignoreMap":163},[167,128677,128678,128680,128682,128684],{"class":169,"line":170},[167,128679,192],{"class":191},[167,128681,51166],{"class":173},[167,128683,198],{"class":191},[167,128685,202],{"class":201},[167,128687,128688,128690,128692,128694],{"class":169,"line":188},[167,128689,192],{"class":191},[167,128691,51177],{"class":173},[167,128693,198],{"class":191},[167,128695,51182],{"class":201},[167,128697,128698,128700,128702,128704,128706],{"class":169,"line":205},[167,128699,216],{"class":191},[167,128701,51189],{"class":219},[167,128703,223],{"class":191},[167,128705,51194],{"class":181},[167,128707,51197],{"class":173},[167,128709,128711,128713,128715,128717,128719],{"class":128710,"line":160},[169,213],[167,128712,51203],{"class":173},[167,128714,51206],{"class":181},[167,128716,229],{"class":173},[167,128718,51211],{"class":201},[167,128720,627],{"class":173},[167,128722,128724,128726,128728,128730],{"class":128723,"line":238},[169,213],[167,128725,12749],{"class":181},[167,128727,229],{"class":173},[167,128729,24211],{"class":254},[167,128731,258],{"class":173},[167,128733,128735,128737,128739],{"class":128734,"line":243},[169,213],[167,128736,51230],{"class":173},[167,128738,17408],{"class":181},[167,128740,2917],{"class":173},[167,128742,128744],{"class":128743,"line":261},[169,213],[167,128745,3492],{"class":173},[167,128747,128749],{"class":128748,"line":273},[169,213],[167,128750,403],{"class":173},[154,128752,128754],{"className":156,"code":51247,"filename":15284,"highlights":128753,"language":162,"meta":163,"style":163},[188],[87,128755,128756,128764,128775],{"__ignoreMap":163},[167,128757,128758,128760,128762],{"class":169,"line":170},[167,128759,174],{"class":173},[167,128761,299],{"class":177},[167,128763,185],{"class":173},[167,128765,128767,128769,128771,128773],{"class":128766,"line":188},[169,213],[167,128768,307],{"class":173},[167,128770,2650],{"class":177},[167,128772,51268],{"class":181},[167,128774,5325],{"class":173},[167,128776,128777,128779,128781],{"class":169,"line":205},[167,128778,282],{"class":173},[167,128780,299],{"class":177},[167,128782,185],{"class":173},[15,128784,51281],{},[22,128786,23574],{"id":23573},[15,128788,51286,128789,1679],{},[3933,128790,51289],{},[15,128792,51292],{},[33,128794,128795,128797,128799],{},[36,128796,51297],{},[36,128798,3085],{},[36,128800,51302],{},[15,128802,51305,128803,51309],{},[3933,128804,51308],{},[924,128806,6165],{},{"title":163,"searchDepth":188,"depth":188,"links":128808},[128809,128810,128811,128812,128813,128814,128815,128816,128817,128818,128819,128820,128821,128822,128823,128824],{"id":19082,"depth":188,"text":19083},{"id":48057,"depth":188,"text":51316},{"id":13659,"depth":188,"text":13659},{"id":30726,"depth":188,"text":30726},{"id":23868,"depth":188,"text":23868},{"id":23865,"depth":188,"text":23865},{"id":23871,"depth":188,"text":23871},{"id":30434,"depth":188,"text":30434},{"id":30437,"depth":188,"text":30437},{"id":31708,"depth":188,"text":31708},{"id":27772,"depth":188,"text":27772},{"id":27775,"depth":188,"text":27775},{"id":27778,"depth":188,"text":27778},{"id":26486,"depth":188,"text":26486},{"id":51150,"depth":188,"text":9244},{"id":23573,"depth":188,"text":23574},{"updatedAt":33919,"readingTime":243,"coverCaption":51335,"author":946,"keywords":128826},[3258,26466,51337,973],[128828],{"headline":47965,"author":128829,"datePublished":51342,"@type":961},{"name":946,"@type":959},{"title":47965,"description":51333},[128832,128833,128834,128835,128836,128837],{"tag":26466,"color":26467},{"tag":27757,"color":27758},{"tag":47958,"color":47959},{"tag":46092,"color":3270},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":128839,"title":128840,"body":128841,"cover":18980,"coverAlt":129930,"date":18982,"description":129931,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":129932,"navigation":208,"path":129935,"schemaOrg":129936,"seo":129939,"series":7718,"seriesDescription":129940,"seriesOrder":188,"seriesTitle":129941,"slug":942,"stem":129942,"tags":129943,"__hash__":129949},"blog\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en.md","Vue Lifecycle: creation phase (beforeCreate, created, setup)",{"type":8,"value":128842,"toc":129910},[128843,128853,128859,128866,128875,128879,128885,128902,128918,128921,128944,128950,128958,128961,128975,128982,128988,129048,129054,129066,129069,129080,129186,129192,129200,129205,129225,129234,129374,129384,129445,129449,129458,129467,129470,129480,129486,129498,129502,129509,129513,129520,129702,129872,129876,129908],[11,128844,128846,128847,1025,128849,1025,128851,6219],{"id":128845},"vue-lifecycle-creation-phase-beforecreate-created-setup","Vue lifecycle: creation phase (",[87,128848,17862],{},[87,128850,17865],{},[87,128852,16667],{},[15,128854,128855,128856],{},"When you start writing a Vue component, one of the most common questions is: ",[3933,128857,128858],{},"where should I put the initial logic?",[15,128860,128861,128862,63104,128864,1679],{},"The answer mostly depends on whether you are working with ",[3933,128863,3973],{},[3933,128865,3260],{},[15,128867,57723,128868,128871,128872,1679],{},[3933,128869,128870],{},"creation phase"," is when Vue builds the component instance, initializes its reactivity system, and prepares internal state. At this stage, the component is still ",[3933,128873,128874],{},"not mounted in the DOM",[22,128876,128878],{"id":128877},"what-happens-in-this-phase","What happens in this phase",[15,128880,128881,128882,128884],{},"In practical terms, the classic lifecycle order with ",[3933,128883,3973],{}," is:",[3035,128886,128887,128891,128895],{},[36,128888,128889],{},[87,128890,17862],{},[36,128892,128893],{},[87,128894,17865],{},[36,128896,128897,128898,11227,128900,6219],{},"mount (",[87,128899,16604],{},[87,128901,6393],{},[15,128903,62833,128904,128906,128907,128909,128910,128913,128914,57920,128916,1679],{},[3933,128905,3260],{},", the entry point is ",[87,128908,9238],{},", which runs ",[3933,128911,128912],{},"before Options API lifecycle hooks",", including ",[87,128915,17862],{},[87,128917,17865],{},[15,128919,128920],{},"If you want one quick takeaway:",[33,128922,128923,128930,128937],{},[36,128924,128925,128929],{},[3933,128926,128927],{},[87,128928,17862],{}," -> extremely early point; rarely needed today.",[36,128931,128932,128936],{},[3933,128933,128934],{},[87,128935,17865],{}," -> reactive state is available in Options API.",[36,128938,128939,128943],{},[3933,128940,128941],{},[87,128942,16667],{}," -> main starting point in Composition API.",[22,128945,128947,128949],{"id":128946},"beforecreate-where-it-appears-and-why-it-is-rarely-used",[87,128948,17862],{},": where it appears and why it is rarely used",[15,128951,128952,128954,128955,1679],{},[87,128953,17862],{}," runs ",[3933,128956,128957],{},"before Vue finishes initializing reactive state and instance options",[15,128959,128960],{},"At this point:",[33,128962,128963,128967,128971],{},[36,128964,128965],{},[87,128966,17983],{},[36,128968,128969],{},[87,128970,1661],{},[36,128972,128973],{},[87,128974,17992],{},[15,128976,128977,128978,128981],{},"Are still ",[3933,128979,128980],{},"not initialized",", so instance access is very limited.",[15,128983,128984,128985,1679],{},"For that reason, in modern Vue 3 projects this hook is rarely used. In most cases it only appears in ",[3933,128986,128987],{},"legacy code or very specific plugin\u002Fframework-extension scenarios",[154,128989,128992],{"className":156,"code":128990,"filename":15284,"highlights":128991,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeCreate() {\n    console.log('The component is starting')\n  }\n}\n\u003C\u002Fscript>\n",[205,160,238],[87,128993,128994,129002,129010,129017,129031,129036,129040],{"__ignoreMap":163},[167,128995,128996,128998,129000],{"class":169,"line":170},[167,128997,174],{"class":173},[167,128999,178],{"class":177},[167,129001,185],{"class":173},[167,129003,129004,129006,129008],{"class":169,"line":188},[167,129005,608],{"class":191},[167,129007,3991],{"class":191},[167,129009,1905],{"class":173},[167,129011,129013,129015],{"class":129012,"line":205},[169,213],[167,129014,18033],{"class":181},[167,129016,763],{"class":173},[167,129018,129020,129022,129024,129026,129029],{"class":129019,"line":160},[169,213],[167,129021,8894],{"class":173},[167,129023,2611],{"class":181},[167,129025,229],{"class":173},[167,129027,129028],{"class":201},"'The component is starting'",[167,129030,235],{"class":173},[167,129032,129034],{"class":129033,"line":238},[169,213],[167,129035,3492],{"class":173},[167,129037,129038],{"class":169,"line":243},[167,129039,276],{"class":173},[167,129041,129042,129044,129046],{"class":169,"line":261},[167,129043,282],{"class":173},[167,129045,178],{"class":177},[167,129047,185],{"class":173},[22,129049,129051,129053],{"id":129050},"created-the-practical-point-in-options-api",[87,129052,17865],{},": the practical point in Options API",[15,129055,59009,129056,129058,129059,129062,129063,1679],{},[87,129057,17865],{},", the component instance is already initialized in terms of ",[3933,129060,129061],{},"reactive state and methods",", even though the ",[3933,129064,129065],{},"DOM has not been rendered yet",[15,129067,129068],{},"That makes it a good place to:",[33,129070,129071,129074,129077],{},[36,129072,129073],{},"Initialize state derived from configuration.",[36,129075,129076],{},"Load data early.",[36,129078,129079],{},"Prepare timers or listeners that do not depend on the DOM.",[154,129081,129083],{"className":156,"code":18102,"filename":15284,"highlights":129082,"language":162,"meta":163,"style":163},[273,279,289],[87,129084,129085,129093,129101,129107,129113,129117,129121,129125,129134,129169,129174,129178],{"__ignoreMap":163},[167,129086,129087,129089,129091],{"class":169,"line":170},[167,129088,174],{"class":173},[167,129090,178],{"class":177},[167,129092,185],{"class":173},[167,129094,129095,129097,129099],{"class":169,"line":188},[167,129096,608],{"class":191},[167,129098,3991],{"class":191},[167,129100,1905],{"class":173},[167,129102,129103,129105],{"class":169,"line":205},[167,129104,7176],{"class":181},[167,129106,763],{"class":173},[167,129108,129109,129111],{"class":169,"line":160},[167,129110,1937],{"class":191},[167,129112,1905],{"class":173},[167,129114,129115],{"class":169,"line":238},[167,129116,18138],{"class":173},[167,129118,129119],{"class":169,"line":243},[167,129120,4049],{"class":173},[167,129122,129123],{"class":169,"line":261},[167,129124,398],{"class":173},[167,129126,129128,129130,129132],{"class":129127,"line":273},[169,213],[167,129129,7331],{"class":191},[167,129131,18154],{"class":181},[167,129133,763],{"class":173},[167,129135,129137,129139,129141,129143,129145,129147,129149,129151,129153,129155,129157,129159,129161,129163,129165,129167],{"class":129136,"line":279},[169,213],[167,129138,879],{"class":219},[167,129140,18164],{"class":173},[167,129142,267],{"class":191},[167,129144,3009],{"class":191},[167,129146,6621],{"class":181},[167,129148,229],{"class":173},[167,129150,16994],{"class":201},[167,129152,4270],{"class":173},[167,129154,18179],{"class":181},[167,129156,1918],{"class":173},[167,129158,18184],{"class":254},[167,129160,693],{"class":173},[167,129162,639],{"class":191},[167,129164,18191],{"class":173},[167,129166,6686],{"class":181},[167,129168,2509],{"class":173},[167,129170,129172],{"class":129171,"line":289},[169,213],[167,129173,3492],{"class":173},[167,129175,129176],{"class":169,"line":294},[167,129177,276],{"class":173},[167,129179,129180,129182,129184],{"class":169,"line":304},[167,129181,282],{"class":173},[167,129183,178],{"class":177},[167,129185,185],{"class":173},[22,129187,129189,129191],{"id":129188},"setup-the-natural-start-in-vue-3",[87,129190,16667],{},": the natural start in Vue 3",[15,129193,129194,129195,1025,129197,129199],{},"When you use ",[3933,129196,3260],{},[87,129198,9238],{}," is the real entry point of the component.",[15,129201,114654,129202,129204],{},[87,129203,16667],{}," you define:",[33,129206,129207,129211,129215,129219,129223],{},[36,129208,129209],{},[87,129210,2085],{},[36,129212,129213],{},[87,129214,18243],{},[36,129216,129217],{},[87,129218,1661],{},[36,129220,129221],{},[87,129222,1665],{},[36,129224,1629],{},[15,129226,129227,129228,128954,129230,129233],{},"Also, ",[87,129229,16667],{},[3933,129231,129232],{},"before the component is mounted",", so it is the right place to prepare all state needed for first render.",[154,129235,129238],{"className":156,"code":129236,"filename":15284,"highlights":129237,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, computed } from 'vue'\n\nconst count = ref(0)\nconst double = computed(() => count.value * 2)\n\nconsole.log('setup executed')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">\n    count: {{ count }} \u002F double: {{ double }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[261],[87,129239,129240,129250,129260,129264,129280,129302,129306,129320,129328,129332,129340,129354,129358,129366],{"__ignoreMap":163},[167,129241,129242,129244,129246,129248],{"class":169,"line":170},[167,129243,174],{"class":173},[167,129245,178],{"class":177},[167,129247,182],{"class":181},[167,129249,185],{"class":173},[167,129251,129252,129254,129256,129258],{"class":169,"line":188},[167,129253,192],{"class":191},[167,129255,18285],{"class":173},[167,129257,198],{"class":191},[167,129259,202],{"class":201},[167,129261,129262],{"class":169,"line":205},[167,129263,209],{"emptyLinePlaceholder":208},[167,129265,129266,129268,129270,129272,129274,129276,129278],{"class":169,"line":160},[167,129267,216],{"class":191},[167,129269,15325],{"class":219},[167,129271,223],{"class":191},[167,129273,226],{"class":181},[167,129275,229],{"class":173},[167,129277,1960],{"class":219},[167,129279,235],{"class":173},[167,129281,129282,129284,129286,129288,129290,129292,129294,129296,129298,129300],{"class":169,"line":238},[167,129283,216],{"class":191},[167,129285,18316],{"class":219},[167,129287,223],{"class":191},[167,129289,1898],{"class":181},[167,129291,1493],{"class":173},[167,129293,639],{"class":191},[167,129295,18327],{"class":173},[167,129297,1949],{"class":191},[167,129299,18332],{"class":219},[167,129301,235],{"class":173},[167,129303,129304],{"class":169,"line":243},[167,129305,209],{"emptyLinePlaceholder":208},[167,129307,129309,129311,129313,129315,129318],{"class":129308,"line":261},[169,213],[167,129310,18344],{"class":173},[167,129312,2611],{"class":181},[167,129314,229],{"class":173},[167,129316,129317],{"class":201},"'setup executed'",[167,129319,235],{"class":173},[167,129321,129322,129324,129326],{"class":169,"line":273},[167,129323,282],{"class":173},[167,129325,178],{"class":177},[167,129327,185],{"class":173},[167,129329,129330],{"class":169,"line":279},[167,129331,209],{"emptyLinePlaceholder":208},[167,129333,129334,129336,129338],{"class":169,"line":289},[167,129335,174],{"class":173},[167,129337,299],{"class":177},[167,129339,185],{"class":173},[167,129341,129342,129344,129346,129348,129350,129352],{"class":169,"line":294},[167,129343,307],{"class":173},[167,129345,507],{"class":177},[167,129347,1182],{"class":181},[167,129349,267],{"class":173},[167,129351,18386],{"class":201},[167,129353,185],{"class":173},[167,129355,129356],{"class":169,"line":304},[167,129357,18393],{"class":173},[167,129359,129360,129362,129364],{"class":169,"line":313},[167,129361,504],{"class":173},[167,129363,507],{"class":177},[167,129365,185],{"class":173},[167,129367,129368,129370,129372],{"class":169,"line":161},[167,129369,282],{"class":173},[167,129371,299],{"class":177},[167,129373,185],{"class":173},[22,129375,129377,129378,1662,129380,1662,129382],{"id":129376},"quick-comparison-beforecreate-vs-created-vs-setup","Quick comparison: ",[87,129379,17862],{},[87,129381,17865],{},[87,129383,16667],{},[56,129385,129386,129401],{},[59,129387,129388],{},[62,129389,129390,129393,129395,129398],{},[65,129391,129392],{},"Point",[65,129394,18431],{},[65,129396,129397],{},"What is already available",[65,129399,129400],{},"When to choose it",[75,129402,129403,129417,129431],{},[62,129404,129405,129409,129411,129414],{},[80,129406,129407],{},[87,129408,17862],{},[80,129410,18448],{},[80,129412,129413],{},"Instance in very early startup",[80,129415,129416],{},"Very specific cases or legacy code",[62,129418,129419,129423,129425,129428],{},[80,129420,129421],{},[87,129422,17865],{},[80,129424,18448],{},[80,129426,129427],{},"State and methods available, no DOM",[80,129429,129430],{},"Data init or logic that does not use DOM",[62,129432,129433,129437,129439,129442],{},[80,129434,129435],{},[87,129436,16667],{},[80,129438,18477],{},[80,129440,129441],{},"Reactivity and composables from the start",[80,129443,129444],{},"Main option in modern Vue 3",[22,129446,129448],{"id":129447},"common-recurring-mistakes","Common recurring mistakes",[3087,129450,129452,129453,129455,129456],{"id":129451},"_1-trying-to-manipulate-the-dom-in-created-or-early-setup","1) Trying to manipulate the DOM in ",[87,129454,17865],{}," or early ",[87,129457,16667],{},[15,129459,129460,129461,129463,129464,129466],{},"Neither ",[87,129462,17865],{}," nor the beginning of ",[87,129465,16667],{}," guarantees a mounted DOM.",[15,129468,129469],{},"If you need real DOM elements, use:",[33,129471,129472,129476],{},[36,129473,129474,18515],{},[87,129475,6393],{},[36,129477,129478,18520],{},[87,129479,6796],{},[3087,129481,78786,129483,129485],{"id":129482},"_2-using-beforecreate-out-of-habit",[87,129484,17862],{}," out of habit",[15,129487,129488,129489,129492,129493,129495,129496,18540],{},"Many old Vue examples use it, but in Vue 3 it ",[3933,129490,129491],{},"rarely provides real value"," compared with ",[87,129494,16667],{}," (Composition API) or ",[87,129497,17865],{},[3087,129499,129501],{"id":129500},"_3-mixing-options-api-and-composition-api-mentally","3) Mixing Options API and Composition API mentally",[15,129503,129504,129505,129508],{},"Vue allows both APIs in the same project, but inside each component it is better to ",[3933,129506,129507],{},"keep one clear primary entry point",". Otherwise, initialization logic gets duplicated easily.",[22,129510,129512],{"id":129511},"an-equivalent-example-in-both-styles","An equivalent example in both styles",[15,129514,129515,129516,129519],{},"Let us say we want to ",[3933,129517,129518],{},"load users when the component is created",", without relying on the DOM.",[154,129521,129523],{"className":156,"code":129522,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst users = ref([])\n\nasync function loadUsers() {\n  users.value = await fetch('\u002Fapi\u002Fusers').then((r) => r.json())\n}\n\n\u002F\u002F Runs during setup (creation phase)\nloadUsers()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"user in users\" :key=\"user.id\">\n      {{ user.name }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[87,129524,129525,129535,129545,129549,129561,129565,129575,129607,129611,129615,129620,129626,129634,129638,129646,129654,129674,129678,129686,129694],{"__ignoreMap":163},[167,129526,129527,129529,129531,129533],{"class":169,"line":170},[167,129528,174],{"class":173},[167,129530,178],{"class":177},[167,129532,182],{"class":181},[167,129534,185],{"class":173},[167,129536,129537,129539,129541,129543],{"class":169,"line":188},[167,129538,192],{"class":191},[167,129540,195],{"class":173},[167,129542,198],{"class":191},[167,129544,202],{"class":201},[167,129546,129547],{"class":169,"line":205},[167,129548,209],{"emptyLinePlaceholder":208},[167,129550,129551,129553,129555,129557,129559],{"class":169,"line":160},[167,129552,216],{"class":191},[167,129554,16954],{"class":219},[167,129556,223],{"class":191},[167,129558,226],{"class":181},[167,129560,16961],{"class":173},[167,129562,129563],{"class":169,"line":238},[167,129564,209],{"emptyLinePlaceholder":208},[167,129566,129567,129569,129571,129573],{"class":169,"line":243},[167,129568,2523],{"class":191},[167,129570,1432],{"class":191},[167,129572,16974],{"class":181},[167,129574,763],{"class":173},[167,129576,129577,129579,129581,129583,129585,129587,129589,129591,129593,129595,129597,129599,129601,129603,129605],{"class":169,"line":261},[167,129578,17001],{"class":173},[167,129580,267],{"class":191},[167,129582,3009],{"class":191},[167,129584,6621],{"class":181},[167,129586,229],{"class":173},[167,129588,16994],{"class":201},[167,129590,4270],{"class":173},[167,129592,18179],{"class":181},[167,129594,1918],{"class":173},[167,129596,18184],{"class":254},[167,129598,693],{"class":173},[167,129600,639],{"class":191},[167,129602,18191],{"class":173},[167,129604,6686],{"class":181},[167,129606,2509],{"class":173},[167,129608,129609],{"class":169,"line":273},[167,129610,276],{"class":173},[167,129612,129613],{"class":169,"line":279},[167,129614,209],{"emptyLinePlaceholder":208},[167,129616,129617],{"class":169,"line":289},[167,129618,129619],{"class":18662},"\u002F\u002F Runs during setup (creation phase)\n",[167,129621,129622,129624],{"class":169,"line":294},[167,129623,17025],{"class":181},[167,129625,2917],{"class":173},[167,129627,129628,129630,129632],{"class":169,"line":304},[167,129629,282],{"class":173},[167,129631,178],{"class":177},[167,129633,185],{"class":173},[167,129635,129636],{"class":169,"line":313},[167,129637,209],{"emptyLinePlaceholder":208},[167,129639,129640,129642,129644],{"class":169,"line":161},[167,129641,174],{"class":173},[167,129643,299],{"class":177},[167,129645,185],{"class":173},[167,129647,129648,129650,129652],{"class":169,"line":335},[167,129649,307],{"class":173},[167,129651,33],{"class":177},[167,129653,185],{"class":173},[167,129655,129656,129658,129660,129662,129664,129666,129668,129670,129672],{"class":169,"line":341},[167,129657,1257],{"class":173},[167,129659,36],{"class":177},[167,129661,18706],{"class":181},[167,129663,267],{"class":173},[167,129665,18711],{"class":201},[167,129667,10307],{"class":181},[167,129669,267],{"class":173},[167,129671,18718],{"class":201},[167,129673,185],{"class":173},[167,129675,129676],{"class":169,"line":489},[167,129677,18725],{"class":173},[167,129679,129680,129682,129684],{"class":169,"line":495},[167,129681,1292],{"class":173},[167,129683,36],{"class":177},[167,129685,185],{"class":173},[167,129687,129688,129690,129692],{"class":169,"line":501},[167,129689,504],{"class":173},[167,129691,33],{"class":177},[167,129693,185],{"class":173},[167,129695,129696,129698,129700],{"class":169,"line":512},[167,129697,282],{"class":173},[167,129699,299],{"class":177},[167,129701,185],{"class":173},[154,129703,129704],{"className":156,"code":18752,"filename":3973,"language":162,"meta":163,"style":163},[87,129705,129706,129714,129722,129728,129734,129738,129742,129746,129754,129788,129792,129796,129804,129808,129816,129824,129844,129848,129856,129864],{"__ignoreMap":163},[167,129707,129708,129710,129712],{"class":169,"line":170},[167,129709,174],{"class":173},[167,129711,178],{"class":177},[167,129713,185],{"class":173},[167,129715,129716,129718,129720],{"class":169,"line":188},[167,129717,608],{"class":191},[167,129719,3991],{"class":191},[167,129721,1905],{"class":173},[167,129723,129724,129726],{"class":169,"line":205},[167,129725,7176],{"class":181},[167,129727,763],{"class":173},[167,129729,129730,129732],{"class":169,"line":160},[167,129731,1937],{"class":191},[167,129733,1905],{"class":173},[167,129735,129736],{"class":169,"line":238},[167,129737,18138],{"class":173},[167,129739,129740],{"class":169,"line":243},[167,129741,4049],{"class":173},[167,129743,129744],{"class":169,"line":261},[167,129745,398],{"class":173},[167,129747,129748,129750,129752],{"class":169,"line":273},[167,129749,7331],{"class":191},[167,129751,18154],{"class":181},[167,129753,763],{"class":173},[167,129755,129756,129758,129760,129762,129764,129766,129768,129770,129772,129774,129776,129778,129780,129782,129784,129786],{"class":169,"line":279},[167,129757,879],{"class":219},[167,129759,18164],{"class":173},[167,129761,267],{"class":191},[167,129763,3009],{"class":191},[167,129765,6621],{"class":181},[167,129767,229],{"class":173},[167,129769,16994],{"class":201},[167,129771,4270],{"class":173},[167,129773,18179],{"class":181},[167,129775,1918],{"class":173},[167,129777,18184],{"class":254},[167,129779,693],{"class":173},[167,129781,639],{"class":191},[167,129783,18191],{"class":173},[167,129785,6686],{"class":181},[167,129787,2509],{"class":173},[167,129789,129790],{"class":169,"line":289},[167,129791,3492],{"class":173},[167,129793,129794],{"class":169,"line":294},[167,129795,276],{"class":173},[167,129797,129798,129800,129802],{"class":169,"line":304},[167,129799,282],{"class":173},[167,129801,178],{"class":177},[167,129803,185],{"class":173},[167,129805,129806],{"class":169,"line":313},[167,129807,209],{"emptyLinePlaceholder":208},[167,129809,129810,129812,129814],{"class":169,"line":161},[167,129811,174],{"class":173},[167,129813,299],{"class":177},[167,129815,185],{"class":173},[167,129817,129818,129820,129822],{"class":169,"line":335},[167,129819,307],{"class":173},[167,129821,33],{"class":177},[167,129823,185],{"class":173},[167,129825,129826,129828,129830,129832,129834,129836,129838,129840,129842],{"class":169,"line":341},[167,129827,1257],{"class":173},[167,129829,36],{"class":177},[167,129831,18706],{"class":181},[167,129833,267],{"class":173},[167,129835,18711],{"class":201},[167,129837,10307],{"class":181},[167,129839,267],{"class":173},[167,129841,18718],{"class":201},[167,129843,185],{"class":173},[167,129845,129846],{"class":169,"line":489},[167,129847,18725],{"class":173},[167,129849,129850,129852,129854],{"class":169,"line":495},[167,129851,1292],{"class":173},[167,129853,36],{"class":177},[167,129855,185],{"class":173},[167,129857,129858,129860,129862],{"class":169,"line":501},[167,129859,504],{"class":173},[167,129861,33],{"class":177},[167,129863,185],{"class":173},[167,129865,129866,129868,129870],{"class":169,"line":512},[167,129867,282],{"class":173},[167,129869,299],{"class":177},[167,129871,185],{"class":173},[22,129873,129875],{"id":129874},"closing-notes","Closing notes",[33,129877,129878,129887,129899],{},[36,129879,129880,129881,129886],{},"In modern Vue 3 components, ",[3933,129882,129883,129885],{},[87,129884,16667],{}," is usually the clearest and most consistent entry point"," for initial state and logic.",[36,129888,129889,129890,129892,129893,129898],{},"If you are working on ",[3933,129891,3973],{}," components, ",[3933,129894,129895,129897],{},[87,129896,17865],{}," is still fully valid"," for initialization that does not depend on the DOM.",[36,129900,129901,129902,129907],{},"Meanwhile, ",[3933,129903,129904,129906],{},[87,129905,17862],{}," is mostly a historical hook"," in most current projects.",[924,129909,18959],{},{"title":163,"searchDepth":188,"depth":188,"links":129911},[129912,129913,129915,129917,129919,129921,129928,129929],{"id":128877,"depth":188,"text":128878},{"id":128946,"depth":188,"text":129914},"beforeCreate: where it appears and why it is rarely used",{"id":129050,"depth":188,"text":129916},"created: the practical point in Options API",{"id":129188,"depth":188,"text":129918},"setup: the natural start in Vue 3",{"id":129376,"depth":188,"text":129920},"Quick comparison: beforeCreate vs created vs setup",{"id":129447,"depth":188,"text":129448,"children":129922},[129923,129925,129927],{"id":129451,"depth":205,"text":129924},"1) Trying to manipulate the DOM in created or early setup",{"id":129482,"depth":205,"text":129926},"2) Using beforeCreate out of habit",{"id":129500,"depth":205,"text":129501},{"id":129511,"depth":188,"text":129512},{"id":129874,"depth":188,"text":129875},"Illustration of a Vue component lifecycle highlighting the creation phase with beforeCreate, created, and setup","What really happens during a Vue component's creation phase and how to choose between beforeCreate, created, and setup.",{"updatedAt":18985,"coverCaption":129933,"author":946,"keywords":129934},"This image shows a Vue component lifecycle, focusing on the creation phase where beforeCreate, created, and setup run.",[3258,17862,17865,16667,3260],"\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en",[129937],{"headline":128840,"author":129938,"datePublished":18985,"@type":961},{"name":946,"@type":959},{"title":128840,"description":129931},"A practical series to master every Vue lifecycle hook, from basics to advanced use cases.","Vue Lifecycle Hooks","blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en",[129944,129946,129947,129948],{"tag":129945,"color":7725},"Lifecycle",{"tag":98745,"color":1639},{"tag":60269,"color":3270},{"tag":65670,"color":5425},"dUV2wP3u1LZ381SU2p4pQSgkCSheWpFn-xFGjg7O4dw",{"id":17852,"title":17853,"body":129951,"cover":18980,"coverAlt":18981,"date":18982,"description":18983,"draft":940,"extension":941,"lab":942,"locale":943,"meta":130931,"navigation":208,"path":18988,"schemaOrg":130933,"seo":130936,"series":7718,"seriesDescription":7719,"seriesOrder":188,"seriesTitle":7720,"slug":942,"stem":18993,"tags":130937,"__hash__":18999},{"type":8,"value":129952,"toc":130917},[129953,129961,129965,129971,129977,129979,129983,129999,130011,130013,130033,130037,130043,130045,130059,130063,130067,130125,130129,130137,130139,130147,130253,130257,130263,130267,130287,130293,130431,130439,130491,130493,130499,130505,130507,130517,130521,130529,130531,130535,130537,130541,130721,130891,130893,130915],[11,129954,17859,129955,1025,129957,1025,129959,6219],{"id":17858},[87,129956,17862],{},[87,129958,17865],{},[87,129960,16667],{},[15,129962,17870,129963],{},[3933,129964,17873],{},[15,129966,17876,129967,17879,129969,1679],{},[3933,129968,3973],{},[3933,129970,3260],{},[15,129972,17884,129973,17888,129975,1679],{},[3933,129974,17887],{},[3933,129976,17891],{},[22,129978,17895],{"id":17894},[15,129980,17898,129981,17901],{},[3933,129982,3973],{},[3035,129984,129985,129989,129993],{},[36,129986,129987],{},[87,129988,17862],{},[36,129990,129991],{},[87,129992,17865],{},[36,129994,17914,129995,11227,129997,6219],{},[87,129996,16604],{},[87,129998,6393],{},[15,130000,3810,130001,17923,130003,17926,130005,17930,130007,1028,130009,1679],{},[3933,130002,3260],{},[87,130004,9238],{},[3933,130006,17929],{},[87,130008,17862],{},[87,130010,17865],{},[15,130012,17937],{},[33,130014,130015,130021,130027],{},[36,130016,130017,17946],{},[3933,130018,130019],{},[87,130020,17862],{},[36,130022,130023,17953],{},[3933,130024,130025],{},[87,130026,17865],{},[36,130028,130029,17960],{},[3933,130030,130031],{},[87,130032,16667],{},[22,130034,130035,17966],{"id":17963},[87,130036,17862],{},[15,130038,130039,15250,130041,1679],{},[87,130040,17862],{},[3933,130042,17973],{},[15,130044,17976],{},[33,130046,130047,130051,130055],{},[36,130048,130049],{},[87,130050,17983],{},[36,130052,130053],{},[87,130054,1661],{},[36,130056,130057],{},[87,130058,17992],{},[15,130060,17995,130061,17999],{},[3933,130062,17998],{},[15,130064,18002,130065,1679],{},[3933,130066,18005],{},[154,130068,130070],{"className":156,"code":18008,"filename":15284,"highlights":130069,"language":162,"meta":163,"style":163},[205,160,238],[87,130071,130072,130080,130088,130095,130108,130113,130117],{"__ignoreMap":163},[167,130073,130074,130076,130078],{"class":169,"line":170},[167,130075,174],{"class":173},[167,130077,178],{"class":177},[167,130079,185],{"class":173},[167,130081,130082,130084,130086],{"class":169,"line":188},[167,130083,608],{"class":191},[167,130085,3991],{"class":191},[167,130087,1905],{"class":173},[167,130089,130091,130093],{"class":130090,"line":205},[169,213],[167,130092,18033],{"class":181},[167,130094,763],{"class":173},[167,130096,130098,130100,130102,130104,130106],{"class":130097,"line":160},[169,213],[167,130099,8894],{"class":173},[167,130101,2611],{"class":181},[167,130103,229],{"class":173},[167,130105,18047],{"class":201},[167,130107,235],{"class":173},[167,130109,130111],{"class":130110,"line":238},[169,213],[167,130112,3492],{"class":173},[167,130114,130115],{"class":169,"line":243},[167,130116,276],{"class":173},[167,130118,130119,130121,130123],{"class":169,"line":261},[167,130120,282],{"class":173},[167,130122,178],{"class":177},[167,130124,185],{"class":173},[22,130126,130127,18072],{"id":18069},[87,130128,17865],{},[15,130130,18075,130131,18078,130133,18082,130135,1679],{},[87,130132,17865],{},[3933,130134,18081],{},[3933,130136,18085],{},[15,130138,18088],{},[33,130140,130141,130143,130145],{},[36,130142,18093],{},[36,130144,18096],{},[36,130146,18099],{},[154,130148,130150],{"className":156,"code":18102,"filename":15284,"highlights":130149,"language":162,"meta":163,"style":163},[273,279,289],[87,130151,130152,130160,130168,130174,130180,130184,130188,130192,130201,130236,130241,130245],{"__ignoreMap":163},[167,130153,130154,130156,130158],{"class":169,"line":170},[167,130155,174],{"class":173},[167,130157,178],{"class":177},[167,130159,185],{"class":173},[167,130161,130162,130164,130166],{"class":169,"line":188},[167,130163,608],{"class":191},[167,130165,3991],{"class":191},[167,130167,1905],{"class":173},[167,130169,130170,130172],{"class":169,"line":205},[167,130171,7176],{"class":181},[167,130173,763],{"class":173},[167,130175,130176,130178],{"class":169,"line":160},[167,130177,1937],{"class":191},[167,130179,1905],{"class":173},[167,130181,130182],{"class":169,"line":238},[167,130183,18138],{"class":173},[167,130185,130186],{"class":169,"line":243},[167,130187,4049],{"class":173},[167,130189,130190],{"class":169,"line":261},[167,130191,398],{"class":173},[167,130193,130195,130197,130199],{"class":130194,"line":273},[169,213],[167,130196,7331],{"class":191},[167,130198,18154],{"class":181},[167,130200,763],{"class":173},[167,130202,130204,130206,130208,130210,130212,130214,130216,130218,130220,130222,130224,130226,130228,130230,130232,130234],{"class":130203,"line":279},[169,213],[167,130205,879],{"class":219},[167,130207,18164],{"class":173},[167,130209,267],{"class":191},[167,130211,3009],{"class":191},[167,130213,6621],{"class":181},[167,130215,229],{"class":173},[167,130217,16994],{"class":201},[167,130219,4270],{"class":173},[167,130221,18179],{"class":181},[167,130223,1918],{"class":173},[167,130225,18184],{"class":254},[167,130227,693],{"class":173},[167,130229,639],{"class":191},[167,130231,18191],{"class":173},[167,130233,6686],{"class":181},[167,130235,2509],{"class":173},[167,130237,130239],{"class":130238,"line":289},[169,213],[167,130240,3492],{"class":173},[167,130242,130243],{"class":169,"line":294},[167,130244,276],{"class":173},[167,130246,130247,130249,130251],{"class":169,"line":304},[167,130248,282],{"class":173},[167,130250,178],{"class":177},[167,130252,185],{"class":173},[22,130254,130255,18218],{"id":18215},[87,130256,16667],{},[15,130258,18221,130259,1025,130261,18226],{},[3933,130260,3260],{},[87,130262,9238],{},[15,130264,18229,130265,18232],{},[87,130266,16667],{},[33,130268,130269,130273,130277,130281,130285],{},[36,130270,130271],{},[87,130272,2085],{},[36,130274,130275],{},[87,130276,18243],{},[36,130278,130279],{},[87,130280,1661],{},[36,130282,130283],{},[87,130284,1665],{},[36,130286,1629],{},[15,130288,18256,130289,15250,130291,18262],{},[87,130290,16667],{},[3933,130292,18261],{},[154,130294,130296],{"className":156,"code":18265,"filename":15284,"highlights":130295,"language":162,"meta":163,"style":163},[261],[87,130297,130298,130308,130318,130322,130338,130360,130364,130377,130385,130389,130397,130411,130415,130423],{"__ignoreMap":163},[167,130299,130300,130302,130304,130306],{"class":169,"line":170},[167,130301,174],{"class":173},[167,130303,178],{"class":177},[167,130305,182],{"class":181},[167,130307,185],{"class":173},[167,130309,130310,130312,130314,130316],{"class":169,"line":188},[167,130311,192],{"class":191},[167,130313,18285],{"class":173},[167,130315,198],{"class":191},[167,130317,202],{"class":201},[167,130319,130320],{"class":169,"line":205},[167,130321,209],{"emptyLinePlaceholder":208},[167,130323,130324,130326,130328,130330,130332,130334,130336],{"class":169,"line":160},[167,130325,216],{"class":191},[167,130327,15325],{"class":219},[167,130329,223],{"class":191},[167,130331,226],{"class":181},[167,130333,229],{"class":173},[167,130335,1960],{"class":219},[167,130337,235],{"class":173},[167,130339,130340,130342,130344,130346,130348,130350,130352,130354,130356,130358],{"class":169,"line":238},[167,130341,216],{"class":191},[167,130343,18316],{"class":219},[167,130345,223],{"class":191},[167,130347,1898],{"class":181},[167,130349,1493],{"class":173},[167,130351,639],{"class":191},[167,130353,18327],{"class":173},[167,130355,1949],{"class":191},[167,130357,18332],{"class":219},[167,130359,235],{"class":173},[167,130361,130362],{"class":169,"line":243},[167,130363,209],{"emptyLinePlaceholder":208},[167,130365,130367,130369,130371,130373,130375],{"class":130366,"line":261},[169,213],[167,130368,18344],{"class":173},[167,130370,2611],{"class":181},[167,130372,229],{"class":173},[167,130374,18351],{"class":201},[167,130376,235],{"class":173},[167,130378,130379,130381,130383],{"class":169,"line":273},[167,130380,282],{"class":173},[167,130382,178],{"class":177},[167,130384,185],{"class":173},[167,130386,130387],{"class":169,"line":279},[167,130388,209],{"emptyLinePlaceholder":208},[167,130390,130391,130393,130395],{"class":169,"line":289},[167,130392,174],{"class":173},[167,130394,299],{"class":177},[167,130396,185],{"class":173},[167,130398,130399,130401,130403,130405,130407,130409],{"class":169,"line":294},[167,130400,307],{"class":173},[167,130402,507],{"class":177},[167,130404,1182],{"class":181},[167,130406,267],{"class":173},[167,130408,18386],{"class":201},[167,130410,185],{"class":173},[167,130412,130413],{"class":169,"line":304},[167,130414,18393],{"class":173},[167,130416,130417,130419,130421],{"class":169,"line":313},[167,130418,504],{"class":173},[167,130420,507],{"class":177},[167,130422,185],{"class":173},[167,130424,130425,130427,130429],{"class":169,"line":161},[167,130426,282],{"class":173},[167,130428,299],{"class":177},[167,130430,185],{"class":173},[22,130432,18413,130433,1662,130435,1662,130437],{"id":18412},[87,130434,17862],{},[87,130436,17865],{},[87,130438,16667],{},[56,130440,130441,130453],{},[59,130442,130443],{},[62,130444,130445,130447,130449,130451],{},[65,130446,18428],{},[65,130448,18431],{},[65,130450,18434],{},[65,130452,18437],{},[75,130454,130455,130467,130479],{},[62,130456,130457,130461,130463,130465],{},[80,130458,130459],{},[87,130460,17862],{},[80,130462,18448],{},[80,130464,18451],{},[80,130466,18454],{},[62,130468,130469,130473,130475,130477],{},[80,130470,130471],{},[87,130472,17865],{},[80,130474,18448],{},[80,130476,18465],{},[80,130478,18468],{},[62,130480,130481,130485,130487,130489],{},[80,130482,130483],{},[87,130484,16667],{},[80,130486,18477],{},[80,130488,18480],{},[80,130490,18483],{},[22,130492,18487],{"id":18486},[3087,130494,18491,130495,18494,130497],{"id":18490},[87,130496,17865],{},[87,130498,16667],{},[15,130500,18499,130501,18502,130503,18505],{},[87,130502,17865],{},[87,130504,16667],{},[15,130506,18508],{},[33,130508,130509,130513],{},[36,130510,130511,18515],{},[87,130512,6393],{},[36,130514,130515,18520],{},[87,130516,6796],{},[3087,130518,18524,130519,18527],{"id":18523},[87,130520,17862],{},[15,130522,18530,130523,18534,130525,18537,130527,18540],{},[3933,130524,18533],{},[87,130526,16667],{},[87,130528,17865],{},[3087,130530,18544],{"id":18543},[15,130532,18547,130533,18551],{},[3933,130534,18550],{},[22,130536,18555],{"id":18554},[15,130538,18558,130539,18562],{},[3933,130540,18561],{},[154,130542,130543],{"className":156,"code":18565,"filename":3260,"language":162,"meta":163,"style":163},[87,130544,130545,130555,130565,130569,130581,130585,130595,130627,130631,130635,130639,130645,130653,130657,130665,130673,130693,130697,130705,130713],{"__ignoreMap":163},[167,130546,130547,130549,130551,130553],{"class":169,"line":170},[167,130548,174],{"class":173},[167,130550,178],{"class":177},[167,130552,182],{"class":181},[167,130554,185],{"class":173},[167,130556,130557,130559,130561,130563],{"class":169,"line":188},[167,130558,192],{"class":191},[167,130560,195],{"class":173},[167,130562,198],{"class":191},[167,130564,202],{"class":201},[167,130566,130567],{"class":169,"line":205},[167,130568,209],{"emptyLinePlaceholder":208},[167,130570,130571,130573,130575,130577,130579],{"class":169,"line":160},[167,130572,216],{"class":191},[167,130574,16954],{"class":219},[167,130576,223],{"class":191},[167,130578,226],{"class":181},[167,130580,16961],{"class":173},[167,130582,130583],{"class":169,"line":238},[167,130584,209],{"emptyLinePlaceholder":208},[167,130586,130587,130589,130591,130593],{"class":169,"line":243},[167,130588,2523],{"class":191},[167,130590,1432],{"class":191},[167,130592,16974],{"class":181},[167,130594,763],{"class":173},[167,130596,130597,130599,130601,130603,130605,130607,130609,130611,130613,130615,130617,130619,130621,130623,130625],{"class":169,"line":261},[167,130598,17001],{"class":173},[167,130600,267],{"class":191},[167,130602,3009],{"class":191},[167,130604,6621],{"class":181},[167,130606,229],{"class":173},[167,130608,16994],{"class":201},[167,130610,4270],{"class":173},[167,130612,18179],{"class":181},[167,130614,1918],{"class":173},[167,130616,18184],{"class":254},[167,130618,693],{"class":173},[167,130620,639],{"class":191},[167,130622,18191],{"class":173},[167,130624,6686],{"class":181},[167,130626,2509],{"class":173},[167,130628,130629],{"class":169,"line":273},[167,130630,276],{"class":173},[167,130632,130633],{"class":169,"line":279},[167,130634,209],{"emptyLinePlaceholder":208},[167,130636,130637],{"class":169,"line":289},[167,130638,18663],{"class":18662},[167,130640,130641,130643],{"class":169,"line":294},[167,130642,17025],{"class":181},[167,130644,2917],{"class":173},[167,130646,130647,130649,130651],{"class":169,"line":304},[167,130648,282],{"class":173},[167,130650,178],{"class":177},[167,130652,185],{"class":173},[167,130654,130655],{"class":169,"line":313},[167,130656,209],{"emptyLinePlaceholder":208},[167,130658,130659,130661,130663],{"class":169,"line":161},[167,130660,174],{"class":173},[167,130662,299],{"class":177},[167,130664,185],{"class":173},[167,130666,130667,130669,130671],{"class":169,"line":335},[167,130668,307],{"class":173},[167,130670,33],{"class":177},[167,130672,185],{"class":173},[167,130674,130675,130677,130679,130681,130683,130685,130687,130689,130691],{"class":169,"line":341},[167,130676,1257],{"class":173},[167,130678,36],{"class":177},[167,130680,18706],{"class":181},[167,130682,267],{"class":173},[167,130684,18711],{"class":201},[167,130686,10307],{"class":181},[167,130688,267],{"class":173},[167,130690,18718],{"class":201},[167,130692,185],{"class":173},[167,130694,130695],{"class":169,"line":489},[167,130696,18725],{"class":173},[167,130698,130699,130701,130703],{"class":169,"line":495},[167,130700,1292],{"class":173},[167,130702,36],{"class":177},[167,130704,185],{"class":173},[167,130706,130707,130709,130711],{"class":169,"line":501},[167,130708,504],{"class":173},[167,130710,33],{"class":177},[167,130712,185],{"class":173},[167,130714,130715,130717,130719],{"class":169,"line":512},[167,130716,282],{"class":173},[167,130718,299],{"class":177},[167,130720,185],{"class":173},[154,130722,130723],{"className":156,"code":18752,"filename":3973,"language":162,"meta":163,"style":163},[87,130724,130725,130733,130741,130747,130753,130757,130761,130765,130773,130807,130811,130815,130823,130827,130835,130843,130863,130867,130875,130883],{"__ignoreMap":163},[167,130726,130727,130729,130731],{"class":169,"line":170},[167,130728,174],{"class":173},[167,130730,178],{"class":177},[167,130732,185],{"class":173},[167,130734,130735,130737,130739],{"class":169,"line":188},[167,130736,608],{"class":191},[167,130738,3991],{"class":191},[167,130740,1905],{"class":173},[167,130742,130743,130745],{"class":169,"line":205},[167,130744,7176],{"class":181},[167,130746,763],{"class":173},[167,130748,130749,130751],{"class":169,"line":160},[167,130750,1937],{"class":191},[167,130752,1905],{"class":173},[167,130754,130755],{"class":169,"line":238},[167,130756,18138],{"class":173},[167,130758,130759],{"class":169,"line":243},[167,130760,4049],{"class":173},[167,130762,130763],{"class":169,"line":261},[167,130764,398],{"class":173},[167,130766,130767,130769,130771],{"class":169,"line":273},[167,130768,7331],{"class":191},[167,130770,18154],{"class":181},[167,130772,763],{"class":173},[167,130774,130775,130777,130779,130781,130783,130785,130787,130789,130791,130793,130795,130797,130799,130801,130803,130805],{"class":169,"line":279},[167,130776,879],{"class":219},[167,130778,18164],{"class":173},[167,130780,267],{"class":191},[167,130782,3009],{"class":191},[167,130784,6621],{"class":181},[167,130786,229],{"class":173},[167,130788,16994],{"class":201},[167,130790,4270],{"class":173},[167,130792,18179],{"class":181},[167,130794,1918],{"class":173},[167,130796,18184],{"class":254},[167,130798,693],{"class":173},[167,130800,639],{"class":191},[167,130802,18191],{"class":173},[167,130804,6686],{"class":181},[167,130806,2509],{"class":173},[167,130808,130809],{"class":169,"line":289},[167,130810,3492],{"class":173},[167,130812,130813],{"class":169,"line":294},[167,130814,276],{"class":173},[167,130816,130817,130819,130821],{"class":169,"line":304},[167,130818,282],{"class":173},[167,130820,178],{"class":177},[167,130822,185],{"class":173},[167,130824,130825],{"class":169,"line":313},[167,130826,209],{"emptyLinePlaceholder":208},[167,130828,130829,130831,130833],{"class":169,"line":161},[167,130830,174],{"class":173},[167,130832,299],{"class":177},[167,130834,185],{"class":173},[167,130836,130837,130839,130841],{"class":169,"line":335},[167,130838,307],{"class":173},[167,130840,33],{"class":177},[167,130842,185],{"class":173},[167,130844,130845,130847,130849,130851,130853,130855,130857,130859,130861],{"class":169,"line":341},[167,130846,1257],{"class":173},[167,130848,36],{"class":177},[167,130850,18706],{"class":181},[167,130852,267],{"class":173},[167,130854,18711],{"class":201},[167,130856,10307],{"class":181},[167,130858,267],{"class":173},[167,130860,18718],{"class":201},[167,130862,185],{"class":173},[167,130864,130865],{"class":169,"line":489},[167,130866,18725],{"class":173},[167,130868,130869,130871,130873],{"class":169,"line":495},[167,130870,1292],{"class":173},[167,130872,36],{"class":177},[167,130874,185],{"class":173},[167,130876,130877,130879,130881],{"class":169,"line":501},[167,130878,504],{"class":173},[167,130880,33],{"class":177},[167,130882,185],{"class":173},[167,130884,130885,130887,130889],{"class":169,"line":512},[167,130886,282],{"class":173},[167,130888,299],{"class":177},[167,130890,185],{"class":173},[22,130892,18924],{"id":18923},[33,130894,130895,130901,130909],{},[36,130896,18929,130897,18935],{},[3933,130898,130899,18934],{},[87,130900,16667],{},[36,130902,18938,130903,18941,130905,18947],{},[3933,130904,3973],{},[3933,130906,130907,18946],{},[87,130908,17865],{},[36,130910,18950,130911,18956],{},[3933,130912,130913,18955],{},[87,130914,17862],{},[924,130916,18959],{},{"title":163,"searchDepth":188,"depth":188,"links":130918},[130919,130920,130921,130922,130923,130924,130929,130930],{"id":17894,"depth":188,"text":17895},{"id":17963,"depth":188,"text":18964},{"id":18069,"depth":188,"text":18966},{"id":18215,"depth":188,"text":18968},{"id":18412,"depth":188,"text":18970},{"id":18486,"depth":188,"text":18487,"children":130925},[130926,130927,130928],{"id":18490,"depth":205,"text":18974},{"id":18523,"depth":205,"text":18976},{"id":18543,"depth":205,"text":18544},{"id":18554,"depth":188,"text":18555},{"id":18923,"depth":188,"text":18924},{"updatedAt":18985,"coverCaption":18986,"author":946,"keywords":130932},[3258,17862,17865,16667,3260],[130934],{"headline":17853,"author":130935,"datePublished":18985,"@type":961},{"name":946,"@type":959},{"title":17853,"description":18983},[130938,130939,130940,130941],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":130943,"title":130944,"body":130945,"cover":11119,"coverAlt":132722,"date":11121,"description":132723,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":132724,"navigation":208,"path":132728,"schemaOrg":132729,"seo":132732,"series":7718,"seriesDescription":129940,"seriesOrder":261,"seriesTitle":129941,"slug":942,"stem":132733,"tags":132734,"__hash__":132740},"blog\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.en.md","Vue Lifecycle: error handling with errorCaptured",{"type":8,"value":130946,"toc":132702},[130947,130953,130956,130962,130964,130967,130973,130975,130987,130990,131011,131014,131031,131034,131050,131053,131055,131060,131062,131076,131082,131084,131089,131091,131114,131119,131121,131125,131128,131131,131138,131144,131147,131151,131154,131157,131161,131167,131169,131173,131176,131180,131183,131187,131190,131193,131981,132682,132685,132690,132692,132697,132700],[11,130948,130950,130951],{"id":130949},"vue-lifecycle-error-handling-with-errorcaptured","Vue Lifecycle: error handling with ",[87,130952,9185],{},[15,130954,130955],{},"Errors in the UI rarely announce themselves. A widget stops rendering, a third-party dependency throws an exception, or a child view fails during an update, and suddenly the user is left with a blank block or an incomplete screen.",[15,130957,130958,130959,130961],{},"That is where ",[87,130960,9185],{}," becomes valuable. It does not prevent errors from happening, but it does let you contain them in the right place, log useful context, and offer a graceful way out without compromising the entire UI.",[22,130963,57636],{"id":57635},[15,130965,130966],{},"As an application grows, not every component deserves the same level of trust. Some pieces are stable, while others are more fragile: external library integrations, complex widgets, panels that depend on changing data, or components that are still evolving.",[15,130968,130969,130970,130972],{},"If failures propagate without control, the impact is often disproportionate. An error in a secondary card can end up affecting an entire screen. ",[87,130971,9185],{}," gives you a way to set boundaries: this block may fail, but the rest of the page should keep working.",[22,130974,57681],{"id":57680},[15,130976,130977,130979,130980,130982,130983,130986],{},[87,130978,9185],{}," is an Options API hook, and ",[87,130981,9215],{}," is its Composition API equivalent. Both let you intercept errors that happen in ",[3933,130984,130985],{},"descendant components"," of the current component.",[15,130988,130989],{},"That includes errors triggered in common parts of Vue's execution flow, such as:",[33,130991,130992,130995,130997,131000,131004,131006,131008],{},[36,130993,130994],{},"Render functions and template rendering",[36,130996,9230],{},[36,130998,130999],{},"Lifecycle hooks",[36,131001,131002],{},[87,131003,9238],{},[36,131005,9241],{},[36,131007,125469],{},[36,131009,131010],{},"Transition hooks",[15,131012,131013],{},"The hook receives three arguments:",[33,131015,131016,131021,131026],{},[36,131017,131018,131020],{},[87,131019,9257],{},": the captured error",[36,131022,131023,131025],{},[87,131024,9263],{},": the component instance that threw the error",[36,131027,131028,131030],{},[87,131029,9269],{},": a hint about where the error happened, for example during render or inside an event handler",[15,131032,131033],{},"There are two important details to keep in mind:",[33,131035,131036,131039],{},[36,131037,131038],{},"It only captures errors from child components and deeper descendants. It does not intercept errors from the same component where it is declared.",[36,131040,131041,131042,131044,131045,131047,131048,1679],{},"If it returns ",[87,131043,3392],{},", it stops the error from propagating to higher ",[87,131046,9185],{}," hooks and to ",[87,131049,9290],{},[15,131051,131052],{},"In practice, it behaves like a local error boundary. The usual pattern is to use it for three things at once: log the error, show a fallback, and keep one isolated failure from taking down the rest of the interface.",[22,131054,57775],{"id":57774},[15,131056,131057,131059],{},[87,131058,9185],{}," fits well when you need to isolate failures in a specific part of the UI.",[15,131061,80740],{},[33,131063,131064,131067,131070,131073],{},[36,131065,131066],{},"A dashboard with independent widgets where one card can fail without breaking the entire view.",[36,131068,131069],{},"An editor, chart, or third-party component that is safer to wrap behind a fallback.",[36,131071,131072],{},"An admin area where some modules are conditionally loaded and should not compromise the main navigation.",[36,131074,131075],{},"A layout with reusable blocks where you want to centralize logging and show useful feedback to the user.",[15,131077,131078,131079,131081],{},"Practical rule: if a child component can fail and you want to contain the impact, ",[87,131080,9185],{}," is a strong fit.",[22,131083,57799],{"id":57798},[15,131085,131086,131088],{},[87,131087,9185],{}," should not be treated as a universal solution.",[15,131090,62983],{},[33,131092,131093,131102,131108,131111],{},[36,131094,131095,131096,1025,131098,1025,131100,4270],{},"The problem is an expected business error. In that case, it is usually better modeled as state (",[87,131097,9346],{},[87,131099,9349],{},[87,131101,9352],{},[36,131103,131104,131105,131107],{},"You only need to handle one specific operation. A ",[87,131106,9358],{}," is often clearer.",[36,131109,131110],{},"It is being used to hide errors without logging them or addressing the root cause.",[36,131112,131113],{},"Recovery depends on restarting the entire view. That usually means the boundary is placed at the wrong level.",[15,131115,131116,131118],{},[87,131117,9185],{}," does not replace an error-handling strategy. It complements one.",[22,131120,57820],{"id":57819},[3087,131122,131124],{"id":131123},"_1-expecting-it-to-catch-errors-from-the-same-component","1. Expecting it to catch errors from the same component",[15,131126,131127],{},"This hook is designed for descendants. If the error happens in the same component where the hook is declared, it will not be intercepted.",[15,131129,131130],{},"The fix is to move the boundary one level up or wrap the fragile part in a child component.",[3087,131132,131134,131135,131137],{"id":131133},"_2-returning-false-all-the-time","2. Returning ",[87,131136,3392],{}," all the time",[15,131139,131140,131141,131143],{},"Returning ",[87,131142,3392],{}," stops propagation. That can be useful if the error has already been handled, but doing it by default can block your global monitoring.",[15,131145,131146],{},"Return it only when the component has actually absorbed the error and logged what matters.",[3087,131148,131150],{"id":131149},"_3-showing-a-fallback-without-offering-a-way-out","3. Showing a fallback without offering a way out",[15,131152,131153],{},"A message like \"something went wrong\" is not enough if the user cannot do anything next.",[15,131155,131156],{},"Whenever it makes sense, add actions such as retry, reload, or a way back to a valid state.",[3087,131158,131160],{"id":131159},"_4-using-it-to-hide-fragile-code","4. Using it to hide fragile code",[15,131162,131163,131164,131166],{},"If a component fails frequently, ",[87,131165,9185],{}," should not become the long-term solution. It helps reduce impact, not normalize structural issues.",[22,131168,57926],{"id":57925},[3087,131170,131172],{"id":131171},"dashboard-with-independent-cards","Dashboard with independent cards",[15,131174,131175],{},"If one card fails, you can replace only that block and keep the rest of the dashboard functional.",[3087,131177,131179],{"id":131178},"third-party-components","Third-party components",[15,131181,131182],{},"Some libraries do not fail in a controlled way. Wrapping them in a boundary helps prevent them from breaking the entire view.",[3087,131184,131186],{"id":131185},"optional-modules","Optional modules",[15,131188,131189],{},"In complex admin panels, some modules are not critical. It is better to degrade that section without affecting the main navigation.",[22,131191,131192],{"id":87571},"Full Example",[154,131194,131196],{"className":156,"code":131195,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, defineComponent, h, onErrorCaptured, ref } from 'vue'\n\nconst hasError = ref(false)\nconst errorMessage = ref('')\nconst errorSource = ref('')\nconst retryKey = ref(0)\n\nconst RiskyStatsPanel = defineComponent({\n  name: 'RiskyStatsPanel',\n  setup() {\n    const shouldFail = ref(false)\n\n    const stats = computed(() => {\n      if (shouldFail.value) {\n        throw new Error('The dashboard metrics could not be calculated.')\n      }\n\n      return [\n        { label: 'Pending', value: 14 },\n        { label: 'Completed', value: 29 },\n        { label: 'Blocked', value: 3 }\n      ]\n    })\n\n    return () =>\n      h('section', { class: 'stats-panel' }, [\n        h('h3', 'Task summary'),\n        h(\n          'button',\n          {\n            type: 'button',\n            onClick: () => {\n              shouldFail.value = true\n            }\n          },\n          'Simulate widget failure'\n        ),\n        h(\n          'ul',\n          stats.value.map(stat =>\n            h('li', { key: stat.label }, `${stat.label}: ${stat.value}`)\n          )\n        )\n      ])\n  }\n})\n\nonErrorCaptured((error, instance, info) => {\n  hasError.value = true\n  errorMessage.value =\n    error instanceof Error ? error.message : 'An unexpected error occurred.'\n  errorSource.value = info\n\n  console.error('Widget captured by the dashboard boundary', {\n    error,\n    component: instance?.type,\n    info\n  })\n\n  return false\n})\n\nfunction retry() {\n  hasError.value = false\n  errorMessage.value = ''\n  errorSource.value = ''\n  retryKey.value += 1\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dashboard-card\">\n    \u003Cheader>\n      \u003Ch2>Dashboard status\u003C\u002Fh2>\n      \u003Cp>If one widget fails, the rest of the screen can keep working.\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cdiv v-if=\"hasError\" class=\"error-box\">\n      \u003Cstrong>This block could not be rendered.\u003C\u002Fstrong>\n      \u003Cp>{{ errorMessage }}\u003C\u002Fp>\n      \u003Csmall>Source: {{ errorSource }}\u003C\u002Fsmall>\n      \u003Cbutton type=\"button\" @click=\"retry\">Retry\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003CRiskyStatsPanel v-else :key=\"retryKey\" \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,131197,131198,131214,131224,131228,131244,131260,131276,131292,131296,131308,131316,131322,131338,131342,131358,131364,131379,131383,131387,131393,131406,131419,131432,131436,131440,131444,131452,131466,131481,131487,131493,131497,131505,131515,131523,131527,131531,131536,131540,131546,131552,131564,131594,131598,131602,131606,131610,131614,131618,131640,131648,131654,131671,131679,131683,131696,131700,131704,131708,131712,131716,131722,131726,131730,131738,131746,131754,131762,131770,131774,131782,131786,131794,131808,131816,131829,131842,131850,131854,131874,131887,131899,131912,131937,131945,131949,131965,131973],{"__ignoreMap":163},[167,131199,131200,131202,131204,131206,131208,131210,131212],{"class":169,"line":170},[167,131201,174],{"class":173},[167,131203,178],{"class":177},[167,131205,182],{"class":181},[167,131207,1050],{"class":181},[167,131209,267],{"class":173},[167,131211,1055],{"class":201},[167,131213,185],{"class":173},[167,131215,131216,131218,131220,131222],{"class":169,"line":188},[167,131217,192],{"class":191},[167,131219,9471],{"class":173},[167,131221,198],{"class":191},[167,131223,202],{"class":201},[167,131225,131226],{"class":169,"line":205},[167,131227,209],{"emptyLinePlaceholder":208},[167,131229,131230,131232,131234,131236,131238,131240,131242],{"class":169,"line":160},[167,131231,216],{"class":191},[167,131233,9486],{"class":219},[167,131235,223],{"class":191},[167,131237,226],{"class":181},[167,131239,229],{"class":173},[167,131241,3392],{"class":219},[167,131243,235],{"class":173},[167,131245,131246,131248,131250,131252,131254,131256,131258],{"class":169,"line":238},[167,131247,216],{"class":191},[167,131249,6582],{"class":219},[167,131251,223],{"class":191},[167,131253,226],{"class":181},[167,131255,229],{"class":173},[167,131257,2184],{"class":201},[167,131259,235],{"class":173},[167,131261,131262,131264,131266,131268,131270,131272,131274],{"class":169,"line":243},[167,131263,216],{"class":191},[167,131265,9519],{"class":219},[167,131267,223],{"class":191},[167,131269,226],{"class":181},[167,131271,229],{"class":173},[167,131273,2184],{"class":201},[167,131275,235],{"class":173},[167,131277,131278,131280,131282,131284,131286,131288,131290],{"class":169,"line":261},[167,131279,216],{"class":191},[167,131281,9536],{"class":219},[167,131283,223],{"class":191},[167,131285,226],{"class":181},[167,131287,229],{"class":173},[167,131289,1960],{"class":219},[167,131291,235],{"class":173},[167,131293,131294],{"class":169,"line":273},[167,131295,209],{"emptyLinePlaceholder":208},[167,131297,131298,131300,131302,131304,131306],{"class":169,"line":279},[167,131299,216],{"class":191},[167,131301,9557],{"class":219},[167,131303,223],{"class":191},[167,131305,7156],{"class":181},[167,131307,372],{"class":173},[167,131309,131310,131312,131314],{"class":169,"line":289},[167,131311,4398],{"class":173},[167,131313,9570],{"class":201},[167,131315,393],{"class":173},[167,131317,131318,131320],{"class":169,"line":294},[167,131319,9577],{"class":181},[167,131321,763],{"class":173},[167,131323,131324,131326,131328,131330,131332,131334,131336],{"class":169,"line":304},[167,131325,8266],{"class":191},[167,131327,9586],{"class":219},[167,131329,223],{"class":191},[167,131331,226],{"class":181},[167,131333,229],{"class":173},[167,131335,3392],{"class":219},[167,131337,235],{"class":173},[167,131339,131340],{"class":169,"line":313},[167,131341,209],{"emptyLinePlaceholder":208},[167,131343,131344,131346,131348,131350,131352,131354,131356],{"class":169,"line":161},[167,131345,8266],{"class":191},[167,131347,9607],{"class":219},[167,131349,223],{"class":191},[167,131351,1898],{"class":181},[167,131353,1493],{"class":173},[167,131355,639],{"class":191},[167,131357,1905],{"class":173},[167,131359,131360,131362],{"class":169,"line":335},[167,131361,7261],{"class":191},[167,131363,9624],{"class":173},[167,131365,131366,131368,131370,131372,131374,131377],{"class":169,"line":341},[167,131367,7272],{"class":191},[167,131369,4224],{"class":191},[167,131371,6654],{"class":181},[167,131373,229],{"class":173},[167,131375,131376],{"class":201},"'The dashboard metrics could not be calculated.'",[167,131378,235],{"class":173},[167,131380,131381],{"class":169,"line":489},[167,131382,7287],{"class":173},[167,131384,131385],{"class":169,"line":495},[167,131386,209],{"emptyLinePlaceholder":208},[167,131388,131389,131391],{"class":169,"line":501},[167,131390,8767],{"class":191},[167,131392,9654],{"class":173},[167,131394,131395,131397,131400,131402,131404],{"class":169,"line":512},[167,131396,9659],{"class":173},[167,131398,131399],{"class":201},"'Pending'",[167,131401,9665],{"class":173},[167,131403,1872],{"class":219},[167,131405,1856],{"class":173},[167,131407,131408,131410,131413,131415,131417],{"class":169,"line":781},[167,131409,9659],{"class":173},[167,131411,131412],{"class":201},"'Completed'",[167,131414,9665],{"class":173},[167,131416,9681],{"class":219},[167,131418,1856],{"class":173},[167,131420,131421,131423,131426,131428,131430],{"class":169,"line":786},[167,131422,9659],{"class":173},[167,131424,131425],{"class":201},"'Blocked'",[167,131427,9665],{"class":173},[167,131429,8203],{"class":219},[167,131431,599],{"class":173},[167,131433,131434],{"class":169,"line":2678},[167,131435,8738],{"class":173},[167,131437,131438],{"class":169,"line":2692},[167,131439,8926],{"class":173},[167,131441,131442],{"class":169,"line":3575},[167,131443,209],{"emptyLinePlaceholder":208},[167,131445,131446,131448,131450],{"class":169,"line":5028},[167,131447,1937],{"class":191},[167,131449,1469],{"class":173},[167,131451,9717],{"class":191},[167,131453,131454,131456,131458,131460,131462,131464],{"class":169,"line":5037},[167,131455,9722],{"class":181},[167,131457,229],{"class":173},[167,131459,9727],{"class":201},[167,131461,9730],{"class":173},[167,131463,9733],{"class":201},[167,131465,9736],{"class":173},[167,131467,131468,131470,131472,131474,131476,131479],{"class":169,"line":5046},[167,131469,9741],{"class":181},[167,131471,229],{"class":173},[167,131473,9746],{"class":201},[167,131475,1025],{"class":173},[167,131477,131478],{"class":201},"'Task summary'",[167,131480,9754],{"class":173},[167,131482,131483,131485],{"class":169,"line":6756},[167,131484,9741],{"class":181},[167,131486,9761],{"class":173},[167,131488,131489,131491],{"class":169,"line":6778},[167,131490,9766],{"class":201},[167,131492,393],{"class":173},[167,131494,131495],{"class":169,"line":6783},[167,131496,9773],{"class":173},[167,131498,131499,131501,131503],{"class":169,"line":6788},[167,131500,9778],{"class":173},[167,131502,9781],{"class":201},[167,131504,393],{"class":173},[167,131506,131507,131509,131511,131513],{"class":169,"line":6793},[167,131508,9788],{"class":181},[167,131510,636],{"class":173},[167,131512,639],{"class":191},[167,131514,1905],{"class":173},[167,131516,131517,131519,131521],{"class":169,"line":6809},[167,131518,9799],{"class":173},[167,131520,267],{"class":191},[167,131522,3487],{"class":219},[167,131524,131525],{"class":169,"line":6824},[167,131526,9808],{"class":173},[167,131528,131529],{"class":169,"line":6829},[167,131530,9813],{"class":173},[167,131532,131533],{"class":169,"line":6836},[167,131534,131535],{"class":201},"          'Simulate widget failure'\n",[167,131537,131538],{"class":169,"line":6845},[167,131539,9823],{"class":173},[167,131541,131542,131544],{"class":169,"line":6854},[167,131543,9741],{"class":181},[167,131545,9761],{"class":173},[167,131547,131548,131550],{"class":169,"line":6861},[167,131549,9834],{"class":201},[167,131551,393],{"class":173},[167,131553,131554,131556,131558,131560,131562],{"class":169,"line":6879},[167,131555,9841],{"class":173},[167,131557,9844],{"class":181},[167,131559,229],{"class":173},[167,131561,9849],{"class":254},[167,131563,9852],{"class":191},[167,131565,131566,131568,131570,131572,131574,131576,131578,131580,131582,131584,131586,131588,131590,131592],{"class":169,"line":6884},[167,131567,9857],{"class":181},[167,131569,229],{"class":173},[167,131571,9862],{"class":201},[167,131573,9865],{"class":173},[167,131575,9868],{"class":201},[167,131577,9849],{"class":173},[167,131579,1679],{"class":201},[167,131581,9875],{"class":173},[167,131583,9878],{"class":201},[167,131585,9849],{"class":173},[167,131587,1679],{"class":201},[167,131589,2219],{"class":173},[167,131591,2360],{"class":201},[167,131593,235],{"class":173},[167,131595,131596],{"class":169,"line":6889},[167,131597,9893],{"class":173},[167,131599,131600],{"class":169,"line":6898},[167,131601,9898],{"class":173},[167,131603,131604],{"class":169,"line":6903},[167,131605,9903],{"class":173},[167,131607,131608],{"class":169,"line":6912},[167,131609,3492],{"class":173},[167,131611,131612],{"class":169,"line":6928},[167,131613,403],{"class":173},[167,131615,131616],{"class":169,"line":6949},[167,131617,209],{"emptyLinePlaceholder":208},[167,131619,131620,131622,131624,131626,131628,131630,131632,131634,131636,131638],{"class":169,"line":6954},[167,131621,9920],{"class":181},[167,131623,1918],{"class":173},[167,131625,9352],{"class":254},[167,131627,1025],{"class":173},[167,131629,9263],{"class":254},[167,131631,1025],{"class":173},[167,131633,9269],{"class":254},[167,131635,693],{"class":173},[167,131637,639],{"class":191},[167,131639,1905],{"class":173},[167,131641,131642,131644,131646],{"class":169,"line":6975},[167,131643,9943],{"class":173},[167,131645,267],{"class":191},[167,131647,3487],{"class":219},[167,131649,131650,131652],{"class":169,"line":6989},[167,131651,9952],{"class":173},[167,131653,6753],{"class":191},[167,131655,131656,131658,131660,131662,131664,131666,131668],{"class":169,"line":7003},[167,131657,9959],{"class":173},[167,131659,6762],{"class":191},[167,131661,6654],{"class":181},[167,131663,6767],{"class":191},[167,131665,6770],{"class":173},[167,131667,583],{"class":191},[167,131669,131670],{"class":201}," 'An unexpected error occurred.'\n",[167,131672,131673,131675,131677],{"class":169,"line":7017},[167,131674,9977],{"class":173},[167,131676,267],{"class":191},[167,131678,9982],{"class":173},[167,131680,131681],{"class":169,"line":7026},[167,131682,209],{"emptyLinePlaceholder":208},[167,131684,131685,131687,131689,131691,131694],{"class":169,"line":7031},[167,131686,2608],{"class":173},[167,131688,9352],{"class":181},[167,131690,229],{"class":173},[167,131692,131693],{"class":201},"'Widget captured by the dashboard boundary'",[167,131695,627],{"class":173},[167,131697,131698],{"class":169,"line":7048},[167,131699,10004],{"class":173},[167,131701,131702],{"class":169,"line":7057},[167,131703,10009],{"class":173},[167,131705,131706],{"class":169,"line":7555},[167,131707,10014],{"class":173},[167,131709,131710],{"class":169,"line":7560},[167,131711,8347],{"class":173},[167,131713,131714],{"class":169,"line":7579},[167,131715,209],{"emptyLinePlaceholder":208},[167,131717,131718,131720],{"class":169,"line":7592},[167,131719,1539],{"class":191},[167,131721,5593],{"class":219},[167,131723,131724],{"class":169,"line":7605},[167,131725,403],{"class":173},[167,131727,131728],{"class":169,"line":7618},[167,131729,209],{"emptyLinePlaceholder":208},[167,131731,131732,131734,131736],{"class":169,"line":7627},[167,131733,246],{"class":191},[167,131735,10043],{"class":181},[167,131737,763],{"class":173},[167,131739,131740,131742,131744],{"class":169,"line":7632},[167,131741,9943],{"class":173},[167,131743,267],{"class":191},[167,131745,5593],{"class":219},[167,131747,131748,131750,131752],{"class":169,"line":7647},[167,131749,9952],{"class":173},[167,131751,267],{"class":191},[167,131753,10062],{"class":201},[167,131755,131756,131758,131760],{"class":169,"line":7656},[167,131757,9977],{"class":173},[167,131759,267],{"class":191},[167,131761,10062],{"class":201},[167,131763,131764,131766,131768],{"class":169,"line":10073},[167,131765,10076],{"class":173},[167,131767,10079],{"class":191},[167,131769,2570],{"class":219},[167,131771,131772],{"class":169,"line":10084},[167,131773,276],{"class":173},[167,131775,131776,131778,131780],{"class":169,"line":10089},[167,131777,282],{"class":173},[167,131779,178],{"class":177},[167,131781,185],{"class":173},[167,131783,131784],{"class":169,"line":10098},[167,131785,209],{"emptyLinePlaceholder":208},[167,131787,131788,131790,131792],{"class":169,"line":10103},[167,131789,174],{"class":173},[167,131791,299],{"class":177},[167,131793,185],{"class":173},[167,131795,131796,131798,131800,131802,131804,131806],{"class":169,"line":10112},[167,131797,307],{"class":173},[167,131799,10117],{"class":177},[167,131801,1245],{"class":181},[167,131803,267],{"class":173},[167,131805,10124],{"class":201},[167,131807,185],{"class":173},[167,131809,131810,131812,131814],{"class":169,"line":10129},[167,131811,1257],{"class":173},[167,131813,1260],{"class":177},[167,131815,185],{"class":173},[167,131817,131818,131820,131822,131825,131827],{"class":169,"line":10138},[167,131819,1268],{"class":173},[167,131821,22],{"class":177},[167,131823,131824],{"class":173},">Dashboard status\u003C\u002F",[167,131826,22],{"class":177},[167,131828,185],{"class":173},[167,131830,131831,131833,131835,131838,131840],{"class":169,"line":10152},[167,131832,1268],{"class":173},[167,131834,15],{"class":177},[167,131836,131837],{"class":173},">If one widget fails, the rest of the screen can keep working.\u003C\u002F",[167,131839,15],{"class":177},[167,131841,185],{"class":173},[167,131843,131844,131846,131848],{"class":169,"line":10161},[167,131845,1292],{"class":173},[167,131847,1260],{"class":177},[167,131849,185],{"class":173},[167,131851,131852],{"class":169,"line":10167},[167,131853,209],{"emptyLinePlaceholder":208},[167,131855,131856,131858,131860,131862,131864,131866,131868,131870,131872],{"class":169,"line":10177},[167,131857,1257],{"class":173},[167,131859,1242],{"class":177},[167,131861,5694],{"class":181},[167,131863,267],{"class":173},[167,131865,10202],{"class":201},[167,131867,1245],{"class":181},[167,131869,267],{"class":173},[167,131871,10209],{"class":201},[167,131873,185],{"class":173},[167,131875,131876,131878,131880,131883,131885],{"class":169,"line":10186},[167,131877,1268],{"class":173},[167,131879,3933],{"class":177},[167,131881,131882],{"class":173},">This block could not be rendered.\u003C\u002F",[167,131884,3933],{"class":177},[167,131886,185],{"class":173},[167,131888,131889,131891,131893,131895,131897],{"class":169,"line":10191},[167,131890,1268],{"class":173},[167,131892,15],{"class":177},[167,131894,6942],{"class":173},[167,131896,15],{"class":177},[167,131898,185],{"class":173},[167,131900,131901,131903,131905,131908,131910],{"class":169,"line":10214},[167,131902,1268],{"class":173},[167,131904,10246],{"class":177},[167,131906,131907],{"class":173},">Source: {{ errorSource }}\u003C\u002F",[167,131909,10246],{"class":177},[167,131911,185],{"class":173},[167,131913,131914,131916,131918,131920,131922,131924,131926,131928,131930,131933,131935],{"class":169,"line":10228},[167,131915,1268],{"class":173},[167,131917,507],{"class":177},[167,131919,1174],{"class":181},[167,131921,267],{"class":173},[167,131923,1179],{"class":201},[167,131925,1182],{"class":181},[167,131927,267],{"class":173},[167,131929,10273],{"class":201},[167,131931,131932],{"class":173},">Retry\u003C\u002F",[167,131934,507],{"class":177},[167,131936,185],{"class":173},[167,131938,131939,131941,131943],{"class":169,"line":10241},[167,131940,1292],{"class":173},[167,131942,1242],{"class":177},[167,131944,185],{"class":173},[167,131946,131947],{"class":169,"line":10256},[167,131948,209],{"emptyLinePlaceholder":208},[167,131950,131951,131953,131955,131957,131959,131961,131963],{"class":169,"line":10283},[167,131952,1257],{"class":173},[167,131954,10302],{"class":177},[167,131956,7038],{"class":181},[167,131958,10307],{"class":181},[167,131960,267],{"class":173},[167,131962,10312],{"class":201},[167,131964,5325],{"class":173},[167,131966,131967,131969,131971],{"class":169,"line":10292},[167,131968,504],{"class":173},[167,131970,10117],{"class":177},[167,131972,185],{"class":173},[167,131974,131975,131977,131979],{"class":169,"line":10297},[167,131976,282],{"class":173},[167,131978,299],{"class":177},[167,131980,185],{"class":173},[154,131982,131984],{"className":156,"code":131983,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nconst RiskyStatsPanel = {\n  name: 'RiskyStatsPanel',\n  data() {\n    return {\n      shouldFail: false\n    }\n  },\n  computed: {\n    stats() {\n      if (this.shouldFail) {\n        throw new Error('The dashboard metrics could not be calculated.')\n      }\n\n      return [\n        { label: 'Pending', value: 14 },\n        { label: 'Completed', value: 29 },\n        { label: 'Blocked', value: 3 }\n      ]\n    }\n  },\n  template: `\n    \u003Csection class=\"stats-panel\">\n      \u003Ch3>Task summary\u003C\u002Fh3>\n      \u003Cbutton\n        type=\"button\"\n        @click=\"shouldFail = true\"\n      >\n        Simulate widget failure\n      \u003C\u002Fbutton>\n\n      \u003Cul>\n        \u003Cli\n          v-for=\"stat in stats\"\n          :key=\"stat.label\"\n        >\n          {{ stat.label }}: {{ stat.value }}\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fsection>\n  `\n}\n\nexport default {\n  name: 'DashboardErrorBoundary',\n  components: {\n    RiskyStatsPanel\n  },\n  data() {\n    return {\n      hasError: false,\n      errorMessage: '',\n      errorSource: '',\n      retryKey: 0\n    }\n  },\n  errorCaptured(error, instance, info) {\n    this.hasError = true\n    this.errorMessage =\n      error instanceof Error ? error.message : 'An unexpected error occurred.'\n    this.errorSource = info\n\n    console.error('Widget captured by the dashboard boundary', {\n      error,\n      component: instance?.type,\n      info\n    })\n\n    return false\n  },\n  methods: {\n    retry() {\n      this.hasError = false\n      this.errorMessage = ''\n      this.errorSource = ''\n      this.retryKey += 1\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"dashboard-card\">\n    \u003Cheader>\n      \u003Ch2>Dashboard status\u003C\u002Fh2>\n      \u003Cp>If one widget fails, the rest of the screen can keep working.\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cdiv v-if=\"hasError\" class=\"error-box\">\n      \u003Cstrong>This block could not be rendered.\u003C\u002Fstrong>\n      \u003Cp>{{ errorMessage }}\u003C\u002Fp>\n      \u003Csmall>Source: {{ errorSource }}\u003C\u002Fsmall>\n      \u003Cbutton type=\"button\" @click=\"retry\">Retry\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003CRiskyStatsPanel v-else :key=\"retryKey\" \u002F>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,131985,131986,132000,132010,132018,132024,132030,132036,132040,132044,132048,132054,132064,132078,132082,132086,132092,132104,132116,132128,132132,132136,132140,132146,132150,132155,132159,132163,132167,132171,132176,132180,132184,132188,132192,132196,132200,132204,132208,132212,132216,132220,132224,132228,132232,132240,132248,132252,132256,132260,132266,132272,132280,132288,132296,132302,132306,132310,132328,132338,132346,132362,132372,132376,132388,132392,132396,132400,132404,132408,132414,132418,132422,132428,132438,132448,132458,132468,132472,132476,132480,132488,132492,132500,132514,132522,132534,132546,132554,132558,132578,132590,132602,132614,132638,132646,132650,132666,132674],{"__ignoreMap":163},[167,131987,131988,131990,131992,131994,131996,131998],{"class":169,"line":170},[167,131989,174],{"class":173},[167,131991,178],{"class":177},[167,131993,1050],{"class":181},[167,131995,267],{"class":173},[167,131997,1055],{"class":201},[167,131999,185],{"class":173},[167,132001,132002,132004,132006,132008],{"class":169,"line":188},[167,132003,216],{"class":191},[167,132005,9557],{"class":219},[167,132007,223],{"class":191},[167,132009,1905],{"class":173},[167,132011,132012,132014,132016],{"class":169,"line":205},[167,132013,4398],{"class":173},[167,132015,9570],{"class":201},[167,132017,393],{"class":173},[167,132019,132020,132022],{"class":169,"line":160},[167,132021,7176],{"class":181},[167,132023,763],{"class":173},[167,132025,132026,132028],{"class":169,"line":238},[167,132027,1937],{"class":191},[167,132029,1905],{"class":173},[167,132031,132032,132034],{"class":169,"line":243},[167,132033,10386],{"class":173},[167,132035,8093],{"class":219},[167,132037,132038],{"class":169,"line":261},[167,132039,4049],{"class":173},[167,132041,132042],{"class":169,"line":273},[167,132043,398],{"class":173},[167,132045,132046],{"class":169,"line":279},[167,132047,8755],{"class":173},[167,132049,132050,132052],{"class":169,"line":289},[167,132051,10405],{"class":181},[167,132053,763],{"class":173},[167,132055,132056,132058,132060,132062],{"class":169,"line":294},[167,132057,7261],{"class":191},[167,132059,2526],{"class":173},[167,132061,4927],{"class":219},[167,132063,10418],{"class":173},[167,132065,132066,132068,132070,132072,132074,132076],{"class":169,"line":304},[167,132067,7272],{"class":191},[167,132069,4224],{"class":191},[167,132071,6654],{"class":181},[167,132073,229],{"class":173},[167,132075,131376],{"class":201},[167,132077,235],{"class":173},[167,132079,132080],{"class":169,"line":313},[167,132081,7287],{"class":173},[167,132083,132084],{"class":169,"line":161},[167,132085,209],{"emptyLinePlaceholder":208},[167,132087,132088,132090],{"class":169,"line":335},[167,132089,8767],{"class":191},[167,132091,9654],{"class":173},[167,132093,132094,132096,132098,132100,132102],{"class":169,"line":341},[167,132095,9659],{"class":173},[167,132097,131399],{"class":201},[167,132099,9665],{"class":173},[167,132101,1872],{"class":219},[167,132103,1856],{"class":173},[167,132105,132106,132108,132110,132112,132114],{"class":169,"line":489},[167,132107,9659],{"class":173},[167,132109,131412],{"class":201},[167,132111,9665],{"class":173},[167,132113,9681],{"class":219},[167,132115,1856],{"class":173},[167,132117,132118,132120,132122,132124,132126],{"class":169,"line":495},[167,132119,9659],{"class":173},[167,132121,131425],{"class":201},[167,132123,9665],{"class":173},[167,132125,8203],{"class":219},[167,132127,599],{"class":173},[167,132129,132130],{"class":169,"line":501},[167,132131,8738],{"class":173},[167,132133,132134],{"class":169,"line":512},[167,132135,4049],{"class":173},[167,132137,132138],{"class":169,"line":781},[167,132139,398],{"class":173},[167,132141,132142,132144],{"class":169,"line":786},[167,132143,10499],{"class":173},[167,132145,10502],{"class":201},[167,132147,132148],{"class":169,"line":2678},[167,132149,10507],{"class":201},[167,132151,132152],{"class":169,"line":2692},[167,132153,132154],{"class":201},"      \u003Ch3>Task summary\u003C\u002Fh3>\n",[167,132156,132157],{"class":169,"line":3575},[167,132158,10517],{"class":201},[167,132160,132161],{"class":169,"line":5028},[167,132162,10522],{"class":201},[167,132164,132165],{"class":169,"line":5037},[167,132166,10527],{"class":201},[167,132168,132169],{"class":169,"line":5046},[167,132170,10532],{"class":201},[167,132172,132173],{"class":169,"line":6756},[167,132174,132175],{"class":201},"        Simulate widget failure\n",[167,132177,132178],{"class":169,"line":6778},[167,132179,10542],{"class":201},[167,132181,132182],{"class":169,"line":6783},[167,132183,209],{"emptyLinePlaceholder":208},[167,132185,132186],{"class":169,"line":6788},[167,132187,10551],{"class":201},[167,132189,132190],{"class":169,"line":6793},[167,132191,10556],{"class":201},[167,132193,132194],{"class":169,"line":6809},[167,132195,10561],{"class":201},[167,132197,132198],{"class":169,"line":6824},[167,132199,10566],{"class":201},[167,132201,132202],{"class":169,"line":6829},[167,132203,10571],{"class":201},[167,132205,132206],{"class":169,"line":6836},[167,132207,10576],{"class":201},[167,132209,132210],{"class":169,"line":6845},[167,132211,10581],{"class":201},[167,132213,132214],{"class":169,"line":6854},[167,132215,10586],{"class":201},[167,132217,132218],{"class":169,"line":6861},[167,132219,10591],{"class":201},[167,132221,132222],{"class":169,"line":6879},[167,132223,10596],{"class":201},[167,132225,132226],{"class":169,"line":6884},[167,132227,276],{"class":173},[167,132229,132230],{"class":169,"line":6889},[167,132231,209],{"emptyLinePlaceholder":208},[167,132233,132234,132236,132238],{"class":169,"line":6898},[167,132235,608],{"class":191},[167,132237,3991],{"class":191},[167,132239,1905],{"class":173},[167,132241,132242,132244,132246],{"class":169,"line":6903},[167,132243,4398],{"class":173},[167,132245,10619],{"class":201},[167,132247,393],{"class":173},[167,132249,132250],{"class":169,"line":6912},[167,132251,10626],{"class":173},[167,132253,132254],{"class":169,"line":6928},[167,132255,10631],{"class":173},[167,132257,132258],{"class":169,"line":6949},[167,132259,398],{"class":173},[167,132261,132262,132264],{"class":169,"line":6954},[167,132263,7176],{"class":181},[167,132265,763],{"class":173},[167,132267,132268,132270],{"class":169,"line":6975},[167,132269,1937],{"class":191},[167,132271,1905],{"class":173},[167,132273,132274,132276,132278],{"class":169,"line":6989},[167,132275,10652],{"class":173},[167,132277,3392],{"class":219},[167,132279,393],{"class":173},[167,132281,132282,132284,132286],{"class":169,"line":7003},[167,132283,7206],{"class":173},[167,132285,2184],{"class":201},[167,132287,393],{"class":173},[167,132289,132290,132292,132294],{"class":169,"line":7017},[167,132291,10669],{"class":173},[167,132293,2184],{"class":201},[167,132295,393],{"class":173},[167,132297,132298,132300],{"class":169,"line":7026},[167,132299,10678],{"class":173},[167,132301,10681],{"class":219},[167,132303,132304],{"class":169,"line":7031},[167,132305,4049],{"class":173},[167,132307,132308],{"class":169,"line":7048},[167,132309,398],{"class":173},[167,132311,132312,132314,132316,132318,132320,132322,132324,132326],{"class":169,"line":7057},[167,132313,10694],{"class":181},[167,132315,229],{"class":173},[167,132317,9352],{"class":254},[167,132319,1025],{"class":173},[167,132321,9263],{"class":254},[167,132323,1025],{"class":173},[167,132325,9269],{"class":254},[167,132327,258],{"class":173},[167,132329,132330,132332,132334,132336],{"class":169,"line":7555},[167,132331,879],{"class":219},[167,132333,10715],{"class":173},[167,132335,267],{"class":191},[167,132337,3487],{"class":219},[167,132339,132340,132342,132344],{"class":169,"line":7560},[167,132341,879],{"class":219},[167,132343,7374],{"class":173},[167,132345,6753],{"class":191},[167,132347,132348,132350,132352,132354,132356,132358,132360],{"class":169,"line":7579},[167,132349,6759],{"class":173},[167,132351,6762],{"class":191},[167,132353,6654],{"class":181},[167,132355,6767],{"class":191},[167,132357,6770],{"class":173},[167,132359,583],{"class":191},[167,132361,131670],{"class":201},[167,132363,132364,132366,132368,132370],{"class":169,"line":7592},[167,132365,879],{"class":219},[167,132367,10750],{"class":173},[167,132369,267],{"class":191},[167,132371,9982],{"class":173},[167,132373,132374],{"class":169,"line":7605},[167,132375,209],{"emptyLinePlaceholder":208},[167,132377,132378,132380,132382,132384,132386],{"class":169,"line":7618},[167,132379,8894],{"class":173},[167,132381,9352],{"class":181},[167,132383,229],{"class":173},[167,132385,131693],{"class":201},[167,132387,627],{"class":173},[167,132389,132390],{"class":169,"line":7627},[167,132391,10775],{"class":173},[167,132393,132394],{"class":169,"line":7632},[167,132395,10780],{"class":173},[167,132397,132398],{"class":169,"line":7647},[167,132399,10785],{"class":173},[167,132401,132402],{"class":169,"line":7656},[167,132403,8926],{"class":173},[167,132405,132406],{"class":169,"line":10073},[167,132407,209],{"emptyLinePlaceholder":208},[167,132409,132410,132412],{"class":169,"line":10084},[167,132411,1937],{"class":191},[167,132413,5593],{"class":219},[167,132415,132416],{"class":169,"line":10089},[167,132417,398],{"class":173},[167,132419,132420],{"class":169,"line":10098},[167,132421,4419],{"class":173},[167,132423,132424,132426],{"class":169,"line":10103},[167,132425,10812],{"class":181},[167,132427,763],{"class":173},[167,132429,132430,132432,132434,132436],{"class":169,"line":10112},[167,132431,741],{"class":219},[167,132433,10715],{"class":173},[167,132435,267],{"class":191},[167,132437,5593],{"class":219},[167,132439,132440,132442,132444,132446],{"class":169,"line":10129},[167,132441,741],{"class":219},[167,132443,7374],{"class":173},[167,132445,267],{"class":191},[167,132447,10062],{"class":201},[167,132449,132450,132452,132454,132456],{"class":169,"line":10138},[167,132451,741],{"class":219},[167,132453,10750],{"class":173},[167,132455,267],{"class":191},[167,132457,10062],{"class":201},[167,132459,132460,132462,132464,132466],{"class":169,"line":10152},[167,132461,741],{"class":219},[167,132463,10851],{"class":173},[167,132465,10079],{"class":191},[167,132467,2570],{"class":219},[167,132469,132470],{"class":169,"line":10161},[167,132471,4049],{"class":173},[167,132473,132474],{"class":169,"line":10167},[167,132475,3492],{"class":173},[167,132477,132478],{"class":169,"line":10177},[167,132479,276],{"class":173},[167,132481,132482,132484,132486],{"class":169,"line":10186},[167,132483,282],{"class":173},[167,132485,178],{"class":177},[167,132487,185],{"class":173},[167,132489,132490],{"class":169,"line":10191},[167,132491,209],{"emptyLinePlaceholder":208},[167,132493,132494,132496,132498],{"class":169,"line":10214},[167,132495,174],{"class":173},[167,132497,299],{"class":177},[167,132499,185],{"class":173},[167,132501,132502,132504,132506,132508,132510,132512],{"class":169,"line":10228},[167,132503,307],{"class":173},[167,132505,10117],{"class":177},[167,132507,1245],{"class":181},[167,132509,267],{"class":173},[167,132511,10124],{"class":201},[167,132513,185],{"class":173},[167,132515,132516,132518,132520],{"class":169,"line":10241},[167,132517,1257],{"class":173},[167,132519,1260],{"class":177},[167,132521,185],{"class":173},[167,132523,132524,132526,132528,132530,132532],{"class":169,"line":10256},[167,132525,1268],{"class":173},[167,132527,22],{"class":177},[167,132529,131824],{"class":173},[167,132531,22],{"class":177},[167,132533,185],{"class":173},[167,132535,132536,132538,132540,132542,132544],{"class":169,"line":10283},[167,132537,1268],{"class":173},[167,132539,15],{"class":177},[167,132541,131837],{"class":173},[167,132543,15],{"class":177},[167,132545,185],{"class":173},[167,132547,132548,132550,132552],{"class":169,"line":10292},[167,132549,1292],{"class":173},[167,132551,1260],{"class":177},[167,132553,185],{"class":173},[167,132555,132556],{"class":169,"line":10297},[167,132557,209],{"emptyLinePlaceholder":208},[167,132559,132560,132562,132564,132566,132568,132570,132572,132574,132576],{"class":169,"line":10317},[167,132561,1257],{"class":173},[167,132563,1242],{"class":177},[167,132565,5694],{"class":181},[167,132567,267],{"class":173},[167,132569,10202],{"class":201},[167,132571,1245],{"class":181},[167,132573,267],{"class":173},[167,132575,10209],{"class":201},[167,132577,185],{"class":173},[167,132579,132580,132582,132584,132586,132588],{"class":169,"line":10326},[167,132581,1268],{"class":173},[167,132583,3933],{"class":177},[167,132585,131882],{"class":173},[167,132587,3933],{"class":177},[167,132589,185],{"class":173},[167,132591,132592,132594,132596,132598,132600],{"class":169,"line":10981},[167,132593,1268],{"class":173},[167,132595,15],{"class":177},[167,132597,6942],{"class":173},[167,132599,15],{"class":177},[167,132601,185],{"class":173},[167,132603,132604,132606,132608,132610,132612],{"class":169,"line":10994},[167,132605,1268],{"class":173},[167,132607,10246],{"class":177},[167,132609,131907],{"class":173},[167,132611,10246],{"class":177},[167,132613,185],{"class":173},[167,132615,132616,132618,132620,132622,132624,132626,132628,132630,132632,132634,132636],{"class":169,"line":11007},[167,132617,1268],{"class":173},[167,132619,507],{"class":177},[167,132621,1174],{"class":181},[167,132623,267],{"class":173},[167,132625,1179],{"class":201},[167,132627,1182],{"class":181},[167,132629,267],{"class":173},[167,132631,10273],{"class":201},[167,132633,131932],{"class":173},[167,132635,507],{"class":177},[167,132637,185],{"class":173},[167,132639,132640,132642,132644],{"class":169,"line":11032},[167,132641,1292],{"class":173},[167,132643,1242],{"class":177},[167,132645,185],{"class":173},[167,132647,132648],{"class":169,"line":11041},[167,132649,209],{"emptyLinePlaceholder":208},[167,132651,132652,132654,132656,132658,132660,132662,132664],{"class":169,"line":11046},[167,132653,1257],{"class":173},[167,132655,10302],{"class":177},[167,132657,7038],{"class":181},[167,132659,10307],{"class":181},[167,132661,267],{"class":173},[167,132663,10312],{"class":201},[167,132665,5325],{"class":173},[167,132667,132668,132670,132672],{"class":169,"line":11063},[167,132669,504],{"class":173},[167,132671,10117],{"class":177},[167,132673,185],{"class":173},[167,132675,132676,132678,132680],{"class":169,"line":11072},[167,132677,282],{"class":173},[167,132679,299],{"class":177},[167,132681,185],{"class":173},[15,132683,132684],{},"The key pattern is straightforward: the error happens in the child, the parent captures it, logs context, and switches to a fallback state without affecting the rest of the tree.",[5367,132686,132687],{},[15,132688,132689],{},"In both approaches, the responsibility is the same: the parent component defines the risk boundary and decides how the experience should degrade if something fails in its descendant tree.",[22,132691,60191],{"id":60190},[15,132693,132694,132696],{},[87,132695,9185],{}," does not exist to hide exceptions. It exists to handle their impact more deliberately. Used well, it helps you build more resilient interfaces: one part can fail without compromising the whole flow.",[15,132698,132699],{},"The core idea is simple: capture locally, log with context, and give the user a clear way forward.",[924,132701,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":132703},[132704,132705,132706,132707,132708,132715,132720,132721],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":57819,"depth":188,"text":57820,"children":132709},[132710,132711,132713,132714],{"id":131123,"depth":205,"text":131124},{"id":131133,"depth":205,"text":132712},"2. Returning false all the time",{"id":131149,"depth":205,"text":131150},{"id":131159,"depth":205,"text":131160},{"id":57925,"depth":188,"text":57926,"children":132716},[132717,132718,132719],{"id":131171,"depth":205,"text":131172},{"id":131178,"depth":205,"text":131179},{"id":131185,"depth":205,"text":131186},{"id":87571,"depth":188,"text":131192},{"id":60190,"depth":188,"text":60191},"Illustration of a Vue component with a protective shield, representing error handling with errorCaptured.","How to use errorCaptured and onErrorCaptured to isolate failures in child components, show fallback states, and log errors without breaking the entire interface.",{"updatedAt":11124,"coverCaption":132725,"author":946,"keywords":132726},"With errorCaptured, you can protect specific parts of your UI without compromising the whole experience.",[3258,9185,9920,132727,11128],"error handling","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.en",[132730],{"headline":130944,"author":132731,"datePublished":11124,"@type":961},{"name":946,"@type":959},{"title":130944,"description":132723},"blog\u002Fvue-lifecycle-error-handling-errorcaptured.en",[132735,132736,132738,132739],{"tag":129945,"color":7725},{"tag":132737,"color":11139},"Error Handling",{"tag":98745,"color":1639},{"tag":60271,"color":7731},"D6O6sgQhuIfqGwKCwGqfJDP30DbfIjRqTrH7lgNyLAc",{"id":9175,"title":9176,"body":132742,"cover":11119,"coverAlt":11120,"date":11121,"description":11122,"draft":940,"extension":941,"lab":942,"locale":943,"meta":134439,"navigation":208,"path":11129,"schemaOrg":134441,"seo":134444,"series":7718,"seriesDescription":7719,"seriesOrder":261,"seriesTitle":7720,"slug":942,"stem":11134,"tags":134445,"__hash__":11142},{"type":8,"value":132743,"toc":134420},[132744,132748,132750,132754,132756,132758,132762,132764,132772,132774,132792,132794,132808,132810,132822,132826,132828,132832,132834,132844,132848,132850,132854,132856,132874,132878,132880,132882,132884,132886,132890,132894,132896,132898,132900,132902,132904,132908,132910,132912,132914,132916,132918,132920,132922,132924,133706,134404,134406,134410,134412,134416,134418],[11,132745,9182,132746],{"id":9181},[87,132747,9185],{},[15,132749,9188],{},[15,132751,9191,132752,9194],{},[87,132753,9185],{},[22,132755,6231],{"id":6230},[15,132757,9199],{},[15,132759,9202,132760,9205],{},[87,132761,9185],{},[22,132763,6257],{"id":6256},[15,132765,132766,9212,132768,9216,132770,9220],{},[87,132767,9185],{},[87,132769,9215],{},[3933,132771,9219],{},[15,132773,9223],{},[33,132775,132776,132778,132780,132782,132786,132788,132790],{},[36,132777,9169],{},[36,132779,9230],{},[36,132781,9233],{},[36,132783,132784],{},[87,132785,9238],{},[36,132787,9241],{},[36,132789,9244],{},[36,132791,9247],{},[15,132793,9250],{},[33,132795,132796,132800,132804],{},[36,132797,132798,9258],{},[87,132799,9257],{},[36,132801,132802,9264],{},[87,132803,9263],{},[36,132805,132806,9270],{},[87,132807,9269],{},[15,132809,9273],{},[33,132811,132812,132814],{},[36,132813,9278],{},[36,132815,9281,132816,9284,132818,9287,132820,1679],{},[87,132817,3392],{},[87,132819,9185],{},[87,132821,9290],{},[15,132823,9293,132824,9298],{},[9295,132825,9297],{},[22,132827,6322],{"id":6321},[15,132829,132830,9305],{},[87,132831,9185],{},[15,132833,9308],{},[33,132835,132836,132838,132840,132842],{},[36,132837,9313],{},[36,132839,9316],{},[36,132841,9319],{},[36,132843,9322],{},[15,132845,9325,132846,9328],{},[87,132847,9185],{},[22,132849,6349],{"id":6348},[15,132851,9333,132852,9336],{},[87,132853,9185],{},[15,132855,6355],{},[33,132857,132858,132866,132870,132872],{},[36,132859,9343,132860,1025,132862,1025,132864,4270],{},[87,132861,9346],{},[87,132863,9349],{},[87,132865,9352],{},[36,132867,9355,132868,9359],{},[87,132869,9358],{},[36,132871,9362],{},[36,132873,9365],{},[15,132875,132876,9370],{},[87,132877,9185],{},[22,132879,3085],{"id":3084},[3087,132881,9376],{"id":9375},[15,132883,9379],{},[15,132885,9382],{},[3087,132887,9386,132888,9389],{"id":9385},[87,132889,3392],{},[15,132891,9392,132892,9395],{},[87,132893,3392],{},[15,132895,9398],{},[3087,132897,9402],{"id":9401},[15,132899,9405],{},[15,132901,9408],{},[3087,132903,9412],{"id":9411},[15,132905,9415,132906,9418],{},[87,132907,9185],{},[22,132909,7997],{"id":7996},[3087,132911,9424],{"id":9423},[15,132913,9427],{},[3087,132915,9431],{"id":9430},[15,132917,9434],{},[3087,132919,9438],{"id":9437},[15,132921,9441],{},[22,132923,8027],{"id":8026},[154,132925,132926],{"className":156,"code":9446,"filename":3260,"language":162,"meta":163,"style":163},[87,132927,132928,132944,132954,132958,132974,132990,133006,133022,133026,133038,133046,133052,133068,133072,133088,133094,133108,133112,133116,133122,133134,133146,133158,133162,133166,133170,133178,133192,133206,133212,133218,133222,133230,133240,133248,133252,133256,133260,133264,133270,133276,133288,133318,133322,133326,133330,133334,133338,133342,133364,133372,133378,133394,133402,133406,133418,133422,133426,133430,133434,133438,133444,133448,133452,133460,133468,133476,133484,133492,133496,133504,133508,133516,133530,133538,133550,133558,133562,133570,133578,133582,133602,133614,133626,133638,133662,133670,133674,133690,133698],{"__ignoreMap":163},[167,132929,132930,132932,132934,132936,132938,132940,132942],{"class":169,"line":170},[167,132931,174],{"class":173},[167,132933,178],{"class":177},[167,132935,182],{"class":181},[167,132937,1050],{"class":181},[167,132939,267],{"class":173},[167,132941,1055],{"class":201},[167,132943,185],{"class":173},[167,132945,132946,132948,132950,132952],{"class":169,"line":188},[167,132947,192],{"class":191},[167,132949,9471],{"class":173},[167,132951,198],{"class":191},[167,132953,202],{"class":201},[167,132955,132956],{"class":169,"line":205},[167,132957,209],{"emptyLinePlaceholder":208},[167,132959,132960,132962,132964,132966,132968,132970,132972],{"class":169,"line":160},[167,132961,216],{"class":191},[167,132963,9486],{"class":219},[167,132965,223],{"class":191},[167,132967,226],{"class":181},[167,132969,229],{"class":173},[167,132971,3392],{"class":219},[167,132973,235],{"class":173},[167,132975,132976,132978,132980,132982,132984,132986,132988],{"class":169,"line":238},[167,132977,216],{"class":191},[167,132979,6582],{"class":219},[167,132981,223],{"class":191},[167,132983,226],{"class":181},[167,132985,229],{"class":173},[167,132987,2184],{"class":201},[167,132989,235],{"class":173},[167,132991,132992,132994,132996,132998,133000,133002,133004],{"class":169,"line":243},[167,132993,216],{"class":191},[167,132995,9519],{"class":219},[167,132997,223],{"class":191},[167,132999,226],{"class":181},[167,133001,229],{"class":173},[167,133003,2184],{"class":201},[167,133005,235],{"class":173},[167,133007,133008,133010,133012,133014,133016,133018,133020],{"class":169,"line":261},[167,133009,216],{"class":191},[167,133011,9536],{"class":219},[167,133013,223],{"class":191},[167,133015,226],{"class":181},[167,133017,229],{"class":173},[167,133019,1960],{"class":219},[167,133021,235],{"class":173},[167,133023,133024],{"class":169,"line":273},[167,133025,209],{"emptyLinePlaceholder":208},[167,133027,133028,133030,133032,133034,133036],{"class":169,"line":279},[167,133029,216],{"class":191},[167,133031,9557],{"class":219},[167,133033,223],{"class":191},[167,133035,7156],{"class":181},[167,133037,372],{"class":173},[167,133039,133040,133042,133044],{"class":169,"line":289},[167,133041,4398],{"class":173},[167,133043,9570],{"class":201},[167,133045,393],{"class":173},[167,133047,133048,133050],{"class":169,"line":294},[167,133049,9577],{"class":181},[167,133051,763],{"class":173},[167,133053,133054,133056,133058,133060,133062,133064,133066],{"class":169,"line":304},[167,133055,8266],{"class":191},[167,133057,9586],{"class":219},[167,133059,223],{"class":191},[167,133061,226],{"class":181},[167,133063,229],{"class":173},[167,133065,3392],{"class":219},[167,133067,235],{"class":173},[167,133069,133070],{"class":169,"line":313},[167,133071,209],{"emptyLinePlaceholder":208},[167,133073,133074,133076,133078,133080,133082,133084,133086],{"class":169,"line":161},[167,133075,8266],{"class":191},[167,133077,9607],{"class":219},[167,133079,223],{"class":191},[167,133081,1898],{"class":181},[167,133083,1493],{"class":173},[167,133085,639],{"class":191},[167,133087,1905],{"class":173},[167,133089,133090,133092],{"class":169,"line":335},[167,133091,7261],{"class":191},[167,133093,9624],{"class":173},[167,133095,133096,133098,133100,133102,133104,133106],{"class":169,"line":341},[167,133097,7272],{"class":191},[167,133099,4224],{"class":191},[167,133101,6654],{"class":181},[167,133103,229],{"class":173},[167,133105,9637],{"class":201},[167,133107,235],{"class":173},[167,133109,133110],{"class":169,"line":489},[167,133111,7287],{"class":173},[167,133113,133114],{"class":169,"line":495},[167,133115,209],{"emptyLinePlaceholder":208},[167,133117,133118,133120],{"class":169,"line":501},[167,133119,8767],{"class":191},[167,133121,9654],{"class":173},[167,133123,133124,133126,133128,133130,133132],{"class":169,"line":512},[167,133125,9659],{"class":173},[167,133127,9662],{"class":201},[167,133129,9665],{"class":173},[167,133131,1872],{"class":219},[167,133133,1856],{"class":173},[167,133135,133136,133138,133140,133142,133144],{"class":169,"line":781},[167,133137,9659],{"class":173},[167,133139,9676],{"class":201},[167,133141,9665],{"class":173},[167,133143,9681],{"class":219},[167,133145,1856],{"class":173},[167,133147,133148,133150,133152,133154,133156],{"class":169,"line":786},[167,133149,9659],{"class":173},[167,133151,9690],{"class":201},[167,133153,9665],{"class":173},[167,133155,8203],{"class":219},[167,133157,599],{"class":173},[167,133159,133160],{"class":169,"line":2678},[167,133161,8738],{"class":173},[167,133163,133164],{"class":169,"line":2692},[167,133165,8926],{"class":173},[167,133167,133168],{"class":169,"line":3575},[167,133169,209],{"emptyLinePlaceholder":208},[167,133171,133172,133174,133176],{"class":169,"line":5028},[167,133173,1937],{"class":191},[167,133175,1469],{"class":173},[167,133177,9717],{"class":191},[167,133179,133180,133182,133184,133186,133188,133190],{"class":169,"line":5037},[167,133181,9722],{"class":181},[167,133183,229],{"class":173},[167,133185,9727],{"class":201},[167,133187,9730],{"class":173},[167,133189,9733],{"class":201},[167,133191,9736],{"class":173},[167,133193,133194,133196,133198,133200,133202,133204],{"class":169,"line":5046},[167,133195,9741],{"class":181},[167,133197,229],{"class":173},[167,133199,9746],{"class":201},[167,133201,1025],{"class":173},[167,133203,9751],{"class":201},[167,133205,9754],{"class":173},[167,133207,133208,133210],{"class":169,"line":6756},[167,133209,9741],{"class":181},[167,133211,9761],{"class":173},[167,133213,133214,133216],{"class":169,"line":6778},[167,133215,9766],{"class":201},[167,133217,393],{"class":173},[167,133219,133220],{"class":169,"line":6783},[167,133221,9773],{"class":173},[167,133223,133224,133226,133228],{"class":169,"line":6788},[167,133225,9778],{"class":173},[167,133227,9781],{"class":201},[167,133229,393],{"class":173},[167,133231,133232,133234,133236,133238],{"class":169,"line":6793},[167,133233,9788],{"class":181},[167,133235,636],{"class":173},[167,133237,639],{"class":191},[167,133239,1905],{"class":173},[167,133241,133242,133244,133246],{"class":169,"line":6809},[167,133243,9799],{"class":173},[167,133245,267],{"class":191},[167,133247,3487],{"class":219},[167,133249,133250],{"class":169,"line":6824},[167,133251,9808],{"class":173},[167,133253,133254],{"class":169,"line":6829},[167,133255,9813],{"class":173},[167,133257,133258],{"class":169,"line":6836},[167,133259,9818],{"class":201},[167,133261,133262],{"class":169,"line":6845},[167,133263,9823],{"class":173},[167,133265,133266,133268],{"class":169,"line":6854},[167,133267,9741],{"class":181},[167,133269,9761],{"class":173},[167,133271,133272,133274],{"class":169,"line":6861},[167,133273,9834],{"class":201},[167,133275,393],{"class":173},[167,133277,133278,133280,133282,133284,133286],{"class":169,"line":6879},[167,133279,9841],{"class":173},[167,133281,9844],{"class":181},[167,133283,229],{"class":173},[167,133285,9849],{"class":254},[167,133287,9852],{"class":191},[167,133289,133290,133292,133294,133296,133298,133300,133302,133304,133306,133308,133310,133312,133314,133316],{"class":169,"line":6884},[167,133291,9857],{"class":181},[167,133293,229],{"class":173},[167,133295,9862],{"class":201},[167,133297,9865],{"class":173},[167,133299,9868],{"class":201},[167,133301,9849],{"class":173},[167,133303,1679],{"class":201},[167,133305,9875],{"class":173},[167,133307,9878],{"class":201},[167,133309,9849],{"class":173},[167,133311,1679],{"class":201},[167,133313,2219],{"class":173},[167,133315,2360],{"class":201},[167,133317,235],{"class":173},[167,133319,133320],{"class":169,"line":6889},[167,133321,9893],{"class":173},[167,133323,133324],{"class":169,"line":6898},[167,133325,9898],{"class":173},[167,133327,133328],{"class":169,"line":6903},[167,133329,9903],{"class":173},[167,133331,133332],{"class":169,"line":6912},[167,133333,3492],{"class":173},[167,133335,133336],{"class":169,"line":6928},[167,133337,403],{"class":173},[167,133339,133340],{"class":169,"line":6949},[167,133341,209],{"emptyLinePlaceholder":208},[167,133343,133344,133346,133348,133350,133352,133354,133356,133358,133360,133362],{"class":169,"line":6954},[167,133345,9920],{"class":181},[167,133347,1918],{"class":173},[167,133349,9352],{"class":254},[167,133351,1025],{"class":173},[167,133353,9263],{"class":254},[167,133355,1025],{"class":173},[167,133357,9269],{"class":254},[167,133359,693],{"class":173},[167,133361,639],{"class":191},[167,133363,1905],{"class":173},[167,133365,133366,133368,133370],{"class":169,"line":6975},[167,133367,9943],{"class":173},[167,133369,267],{"class":191},[167,133371,3487],{"class":219},[167,133373,133374,133376],{"class":169,"line":6989},[167,133375,9952],{"class":173},[167,133377,6753],{"class":191},[167,133379,133380,133382,133384,133386,133388,133390,133392],{"class":169,"line":7003},[167,133381,9959],{"class":173},[167,133383,6762],{"class":191},[167,133385,6654],{"class":181},[167,133387,6767],{"class":191},[167,133389,6770],{"class":173},[167,133391,583],{"class":191},[167,133393,9972],{"class":201},[167,133395,133396,133398,133400],{"class":169,"line":7017},[167,133397,9977],{"class":173},[167,133399,267],{"class":191},[167,133401,9982],{"class":173},[167,133403,133404],{"class":169,"line":7026},[167,133405,209],{"emptyLinePlaceholder":208},[167,133407,133408,133410,133412,133414,133416],{"class":169,"line":7031},[167,133409,2608],{"class":173},[167,133411,9352],{"class":181},[167,133413,229],{"class":173},[167,133415,9997],{"class":201},[167,133417,627],{"class":173},[167,133419,133420],{"class":169,"line":7048},[167,133421,10004],{"class":173},[167,133423,133424],{"class":169,"line":7057},[167,133425,10009],{"class":173},[167,133427,133428],{"class":169,"line":7555},[167,133429,10014],{"class":173},[167,133431,133432],{"class":169,"line":7560},[167,133433,8347],{"class":173},[167,133435,133436],{"class":169,"line":7579},[167,133437,209],{"emptyLinePlaceholder":208},[167,133439,133440,133442],{"class":169,"line":7592},[167,133441,1539],{"class":191},[167,133443,5593],{"class":219},[167,133445,133446],{"class":169,"line":7605},[167,133447,403],{"class":173},[167,133449,133450],{"class":169,"line":7618},[167,133451,209],{"emptyLinePlaceholder":208},[167,133453,133454,133456,133458],{"class":169,"line":7627},[167,133455,246],{"class":191},[167,133457,10043],{"class":181},[167,133459,763],{"class":173},[167,133461,133462,133464,133466],{"class":169,"line":7632},[167,133463,9943],{"class":173},[167,133465,267],{"class":191},[167,133467,5593],{"class":219},[167,133469,133470,133472,133474],{"class":169,"line":7647},[167,133471,9952],{"class":173},[167,133473,267],{"class":191},[167,133475,10062],{"class":201},[167,133477,133478,133480,133482],{"class":169,"line":7656},[167,133479,9977],{"class":173},[167,133481,267],{"class":191},[167,133483,10062],{"class":201},[167,133485,133486,133488,133490],{"class":169,"line":10073},[167,133487,10076],{"class":173},[167,133489,10079],{"class":191},[167,133491,2570],{"class":219},[167,133493,133494],{"class":169,"line":10084},[167,133495,276],{"class":173},[167,133497,133498,133500,133502],{"class":169,"line":10089},[167,133499,282],{"class":173},[167,133501,178],{"class":177},[167,133503,185],{"class":173},[167,133505,133506],{"class":169,"line":10098},[167,133507,209],{"emptyLinePlaceholder":208},[167,133509,133510,133512,133514],{"class":169,"line":10103},[167,133511,174],{"class":173},[167,133513,299],{"class":177},[167,133515,185],{"class":173},[167,133517,133518,133520,133522,133524,133526,133528],{"class":169,"line":10112},[167,133519,307],{"class":173},[167,133521,10117],{"class":177},[167,133523,1245],{"class":181},[167,133525,267],{"class":173},[167,133527,10124],{"class":201},[167,133529,185],{"class":173},[167,133531,133532,133534,133536],{"class":169,"line":10129},[167,133533,1257],{"class":173},[167,133535,1260],{"class":177},[167,133537,185],{"class":173},[167,133539,133540,133542,133544,133546,133548],{"class":169,"line":10138},[167,133541,1268],{"class":173},[167,133543,22],{"class":177},[167,133545,10145],{"class":173},[167,133547,22],{"class":177},[167,133549,185],{"class":173},[167,133551,133552,133554,133556],{"class":169,"line":10152},[167,133553,1268],{"class":173},[167,133555,15],{"class":177},[167,133557,185],{"class":173},[167,133559,133560],{"class":169,"line":10161},[167,133561,10164],{"class":173},[167,133563,133564,133566,133568],{"class":169,"line":10167},[167,133565,10170],{"class":173},[167,133567,15],{"class":177},[167,133569,185],{"class":173},[167,133571,133572,133574,133576],{"class":169,"line":10177},[167,133573,1292],{"class":173},[167,133575,1260],{"class":177},[167,133577,185],{"class":173},[167,133579,133580],{"class":169,"line":10186},[167,133581,209],{"emptyLinePlaceholder":208},[167,133583,133584,133586,133588,133590,133592,133594,133596,133598,133600],{"class":169,"line":10191},[167,133585,1257],{"class":173},[167,133587,1242],{"class":177},[167,133589,5694],{"class":181},[167,133591,267],{"class":173},[167,133593,10202],{"class":201},[167,133595,1245],{"class":181},[167,133597,267],{"class":173},[167,133599,10209],{"class":201},[167,133601,185],{"class":173},[167,133603,133604,133606,133608,133610,133612],{"class":169,"line":10214},[167,133605,1268],{"class":173},[167,133607,3933],{"class":177},[167,133609,10221],{"class":173},[167,133611,3933],{"class":177},[167,133613,185],{"class":173},[167,133615,133616,133618,133620,133622,133624],{"class":169,"line":10228},[167,133617,1268],{"class":173},[167,133619,15],{"class":177},[167,133621,6942],{"class":173},[167,133623,15],{"class":177},[167,133625,185],{"class":173},[167,133627,133628,133630,133632,133634,133636],{"class":169,"line":10241},[167,133629,1268],{"class":173},[167,133631,10246],{"class":177},[167,133633,10249],{"class":173},[167,133635,10246],{"class":177},[167,133637,185],{"class":173},[167,133639,133640,133642,133644,133646,133648,133650,133652,133654,133656,133658,133660],{"class":169,"line":10256},[167,133641,1268],{"class":173},[167,133643,507],{"class":177},[167,133645,1174],{"class":181},[167,133647,267],{"class":173},[167,133649,1179],{"class":201},[167,133651,1182],{"class":181},[167,133653,267],{"class":173},[167,133655,10273],{"class":201},[167,133657,10276],{"class":173},[167,133659,507],{"class":177},[167,133661,185],{"class":173},[167,133663,133664,133666,133668],{"class":169,"line":10283},[167,133665,1292],{"class":173},[167,133667,1242],{"class":177},[167,133669,185],{"class":173},[167,133671,133672],{"class":169,"line":10292},[167,133673,209],{"emptyLinePlaceholder":208},[167,133675,133676,133678,133680,133682,133684,133686,133688],{"class":169,"line":10297},[167,133677,1257],{"class":173},[167,133679,10302],{"class":177},[167,133681,7038],{"class":181},[167,133683,10307],{"class":181},[167,133685,267],{"class":173},[167,133687,10312],{"class":201},[167,133689,5325],{"class":173},[167,133691,133692,133694,133696],{"class":169,"line":10317},[167,133693,504],{"class":173},[167,133695,10117],{"class":177},[167,133697,185],{"class":173},[167,133699,133700,133702,133704],{"class":169,"line":10326},[167,133701,282],{"class":173},[167,133703,299],{"class":177},[167,133705,185],{"class":173},[154,133707,133708],{"className":156,"code":10335,"filename":3973,"language":162,"meta":163,"style":163},[87,133709,133710,133724,133734,133742,133748,133754,133760,133764,133768,133772,133778,133788,133802,133806,133810,133816,133828,133840,133852,133856,133860,133864,133870,133874,133878,133882,133886,133890,133894,133898,133902,133906,133910,133914,133918,133922,133926,133930,133934,133938,133942,133946,133950,133954,133962,133970,133974,133978,133982,133988,133994,134002,134010,134018,134024,134028,134032,134050,134060,134068,134084,134094,134098,134110,134114,134118,134122,134126,134130,134136,134140,134144,134150,134160,134170,134180,134190,134194,134198,134202,134210,134214,134222,134236,134244,134256,134268,134276,134280,134300,134312,134324,134336,134360,134368,134372,134388,134396],{"__ignoreMap":163},[167,133711,133712,133714,133716,133718,133720,133722],{"class":169,"line":170},[167,133713,174],{"class":173},[167,133715,178],{"class":177},[167,133717,1050],{"class":181},[167,133719,267],{"class":173},[167,133721,1055],{"class":201},[167,133723,185],{"class":173},[167,133725,133726,133728,133730,133732],{"class":169,"line":188},[167,133727,216],{"class":191},[167,133729,9557],{"class":219},[167,133731,223],{"class":191},[167,133733,1905],{"class":173},[167,133735,133736,133738,133740],{"class":169,"line":205},[167,133737,4398],{"class":173},[167,133739,9570],{"class":201},[167,133741,393],{"class":173},[167,133743,133744,133746],{"class":169,"line":160},[167,133745,7176],{"class":181},[167,133747,763],{"class":173},[167,133749,133750,133752],{"class":169,"line":238},[167,133751,1937],{"class":191},[167,133753,1905],{"class":173},[167,133755,133756,133758],{"class":169,"line":243},[167,133757,10386],{"class":173},[167,133759,8093],{"class":219},[167,133761,133762],{"class":169,"line":261},[167,133763,4049],{"class":173},[167,133765,133766],{"class":169,"line":273},[167,133767,398],{"class":173},[167,133769,133770],{"class":169,"line":279},[167,133771,8755],{"class":173},[167,133773,133774,133776],{"class":169,"line":289},[167,133775,10405],{"class":181},[167,133777,763],{"class":173},[167,133779,133780,133782,133784,133786],{"class":169,"line":294},[167,133781,7261],{"class":191},[167,133783,2526],{"class":173},[167,133785,4927],{"class":219},[167,133787,10418],{"class":173},[167,133789,133790,133792,133794,133796,133798,133800],{"class":169,"line":304},[167,133791,7272],{"class":191},[167,133793,4224],{"class":191},[167,133795,6654],{"class":181},[167,133797,229],{"class":173},[167,133799,9637],{"class":201},[167,133801,235],{"class":173},[167,133803,133804],{"class":169,"line":313},[167,133805,7287],{"class":173},[167,133807,133808],{"class":169,"line":161},[167,133809,209],{"emptyLinePlaceholder":208},[167,133811,133812,133814],{"class":169,"line":335},[167,133813,8767],{"class":191},[167,133815,9654],{"class":173},[167,133817,133818,133820,133822,133824,133826],{"class":169,"line":341},[167,133819,9659],{"class":173},[167,133821,9662],{"class":201},[167,133823,9665],{"class":173},[167,133825,1872],{"class":219},[167,133827,1856],{"class":173},[167,133829,133830,133832,133834,133836,133838],{"class":169,"line":489},[167,133831,9659],{"class":173},[167,133833,9676],{"class":201},[167,133835,9665],{"class":173},[167,133837,9681],{"class":219},[167,133839,1856],{"class":173},[167,133841,133842,133844,133846,133848,133850],{"class":169,"line":495},[167,133843,9659],{"class":173},[167,133845,9690],{"class":201},[167,133847,9665],{"class":173},[167,133849,8203],{"class":219},[167,133851,599],{"class":173},[167,133853,133854],{"class":169,"line":501},[167,133855,8738],{"class":173},[167,133857,133858],{"class":169,"line":512},[167,133859,4049],{"class":173},[167,133861,133862],{"class":169,"line":781},[167,133863,398],{"class":173},[167,133865,133866,133868],{"class":169,"line":786},[167,133867,10499],{"class":173},[167,133869,10502],{"class":201},[167,133871,133872],{"class":169,"line":2678},[167,133873,10507],{"class":201},[167,133875,133876],{"class":169,"line":2692},[167,133877,10512],{"class":201},[167,133879,133880],{"class":169,"line":3575},[167,133881,10517],{"class":201},[167,133883,133884],{"class":169,"line":5028},[167,133885,10522],{"class":201},[167,133887,133888],{"class":169,"line":5037},[167,133889,10527],{"class":201},[167,133891,133892],{"class":169,"line":5046},[167,133893,10532],{"class":201},[167,133895,133896],{"class":169,"line":6756},[167,133897,10537],{"class":201},[167,133899,133900],{"class":169,"line":6778},[167,133901,10542],{"class":201},[167,133903,133904],{"class":169,"line":6783},[167,133905,209],{"emptyLinePlaceholder":208},[167,133907,133908],{"class":169,"line":6788},[167,133909,10551],{"class":201},[167,133911,133912],{"class":169,"line":6793},[167,133913,10556],{"class":201},[167,133915,133916],{"class":169,"line":6809},[167,133917,10561],{"class":201},[167,133919,133920],{"class":169,"line":6824},[167,133921,10566],{"class":201},[167,133923,133924],{"class":169,"line":6829},[167,133925,10571],{"class":201},[167,133927,133928],{"class":169,"line":6836},[167,133929,10576],{"class":201},[167,133931,133932],{"class":169,"line":6845},[167,133933,10581],{"class":201},[167,133935,133936],{"class":169,"line":6854},[167,133937,10586],{"class":201},[167,133939,133940],{"class":169,"line":6861},[167,133941,10591],{"class":201},[167,133943,133944],{"class":169,"line":6879},[167,133945,10596],{"class":201},[167,133947,133948],{"class":169,"line":6884},[167,133949,276],{"class":173},[167,133951,133952],{"class":169,"line":6889},[167,133953,209],{"emptyLinePlaceholder":208},[167,133955,133956,133958,133960],{"class":169,"line":6898},[167,133957,608],{"class":191},[167,133959,3991],{"class":191},[167,133961,1905],{"class":173},[167,133963,133964,133966,133968],{"class":169,"line":6903},[167,133965,4398],{"class":173},[167,133967,10619],{"class":201},[167,133969,393],{"class":173},[167,133971,133972],{"class":169,"line":6912},[167,133973,10626],{"class":173},[167,133975,133976],{"class":169,"line":6928},[167,133977,10631],{"class":173},[167,133979,133980],{"class":169,"line":6949},[167,133981,398],{"class":173},[167,133983,133984,133986],{"class":169,"line":6954},[167,133985,7176],{"class":181},[167,133987,763],{"class":173},[167,133989,133990,133992],{"class":169,"line":6975},[167,133991,1937],{"class":191},[167,133993,1905],{"class":173},[167,133995,133996,133998,134000],{"class":169,"line":6989},[167,133997,10652],{"class":173},[167,133999,3392],{"class":219},[167,134001,393],{"class":173},[167,134003,134004,134006,134008],{"class":169,"line":7003},[167,134005,7206],{"class":173},[167,134007,2184],{"class":201},[167,134009,393],{"class":173},[167,134011,134012,134014,134016],{"class":169,"line":7017},[167,134013,10669],{"class":173},[167,134015,2184],{"class":201},[167,134017,393],{"class":173},[167,134019,134020,134022],{"class":169,"line":7026},[167,134021,10678],{"class":173},[167,134023,10681],{"class":219},[167,134025,134026],{"class":169,"line":7031},[167,134027,4049],{"class":173},[167,134029,134030],{"class":169,"line":7048},[167,134031,398],{"class":173},[167,134033,134034,134036,134038,134040,134042,134044,134046,134048],{"class":169,"line":7057},[167,134035,10694],{"class":181},[167,134037,229],{"class":173},[167,134039,9352],{"class":254},[167,134041,1025],{"class":173},[167,134043,9263],{"class":254},[167,134045,1025],{"class":173},[167,134047,9269],{"class":254},[167,134049,258],{"class":173},[167,134051,134052,134054,134056,134058],{"class":169,"line":7555},[167,134053,879],{"class":219},[167,134055,10715],{"class":173},[167,134057,267],{"class":191},[167,134059,3487],{"class":219},[167,134061,134062,134064,134066],{"class":169,"line":7560},[167,134063,879],{"class":219},[167,134065,7374],{"class":173},[167,134067,6753],{"class":191},[167,134069,134070,134072,134074,134076,134078,134080,134082],{"class":169,"line":7579},[167,134071,6759],{"class":173},[167,134073,6762],{"class":191},[167,134075,6654],{"class":181},[167,134077,6767],{"class":191},[167,134079,6770],{"class":173},[167,134081,583],{"class":191},[167,134083,9972],{"class":201},[167,134085,134086,134088,134090,134092],{"class":169,"line":7592},[167,134087,879],{"class":219},[167,134089,10750],{"class":173},[167,134091,267],{"class":191},[167,134093,9982],{"class":173},[167,134095,134096],{"class":169,"line":7605},[167,134097,209],{"emptyLinePlaceholder":208},[167,134099,134100,134102,134104,134106,134108],{"class":169,"line":7618},[167,134101,8894],{"class":173},[167,134103,9352],{"class":181},[167,134105,229],{"class":173},[167,134107,9997],{"class":201},[167,134109,627],{"class":173},[167,134111,134112],{"class":169,"line":7627},[167,134113,10775],{"class":173},[167,134115,134116],{"class":169,"line":7632},[167,134117,10780],{"class":173},[167,134119,134120],{"class":169,"line":7647},[167,134121,10785],{"class":173},[167,134123,134124],{"class":169,"line":7656},[167,134125,8926],{"class":173},[167,134127,134128],{"class":169,"line":10073},[167,134129,209],{"emptyLinePlaceholder":208},[167,134131,134132,134134],{"class":169,"line":10084},[167,134133,1937],{"class":191},[167,134135,5593],{"class":219},[167,134137,134138],{"class":169,"line":10089},[167,134139,398],{"class":173},[167,134141,134142],{"class":169,"line":10098},[167,134143,4419],{"class":173},[167,134145,134146,134148],{"class":169,"line":10103},[167,134147,10812],{"class":181},[167,134149,763],{"class":173},[167,134151,134152,134154,134156,134158],{"class":169,"line":10112},[167,134153,741],{"class":219},[167,134155,10715],{"class":173},[167,134157,267],{"class":191},[167,134159,5593],{"class":219},[167,134161,134162,134164,134166,134168],{"class":169,"line":10129},[167,134163,741],{"class":219},[167,134165,7374],{"class":173},[167,134167,267],{"class":191},[167,134169,10062],{"class":201},[167,134171,134172,134174,134176,134178],{"class":169,"line":10138},[167,134173,741],{"class":219},[167,134175,10750],{"class":173},[167,134177,267],{"class":191},[167,134179,10062],{"class":201},[167,134181,134182,134184,134186,134188],{"class":169,"line":10152},[167,134183,741],{"class":219},[167,134185,10851],{"class":173},[167,134187,10079],{"class":191},[167,134189,2570],{"class":219},[167,134191,134192],{"class":169,"line":10161},[167,134193,4049],{"class":173},[167,134195,134196],{"class":169,"line":10167},[167,134197,3492],{"class":173},[167,134199,134200],{"class":169,"line":10177},[167,134201,276],{"class":173},[167,134203,134204,134206,134208],{"class":169,"line":10186},[167,134205,282],{"class":173},[167,134207,178],{"class":177},[167,134209,185],{"class":173},[167,134211,134212],{"class":169,"line":10191},[167,134213,209],{"emptyLinePlaceholder":208},[167,134215,134216,134218,134220],{"class":169,"line":10214},[167,134217,174],{"class":173},[167,134219,299],{"class":177},[167,134221,185],{"class":173},[167,134223,134224,134226,134228,134230,134232,134234],{"class":169,"line":10228},[167,134225,307],{"class":173},[167,134227,10117],{"class":177},[167,134229,1245],{"class":181},[167,134231,267],{"class":173},[167,134233,10124],{"class":201},[167,134235,185],{"class":173},[167,134237,134238,134240,134242],{"class":169,"line":10241},[167,134239,1257],{"class":173},[167,134241,1260],{"class":177},[167,134243,185],{"class":173},[167,134245,134246,134248,134250,134252,134254],{"class":169,"line":10256},[167,134247,1268],{"class":173},[167,134249,22],{"class":177},[167,134251,10145],{"class":173},[167,134253,22],{"class":177},[167,134255,185],{"class":173},[167,134257,134258,134260,134262,134264,134266],{"class":169,"line":10283},[167,134259,1268],{"class":173},[167,134261,15],{"class":177},[167,134263,10930],{"class":173},[167,134265,15],{"class":177},[167,134267,185],{"class":173},[167,134269,134270,134272,134274],{"class":169,"line":10292},[167,134271,1292],{"class":173},[167,134273,1260],{"class":177},[167,134275,185],{"class":173},[167,134277,134278],{"class":169,"line":10297},[167,134279,209],{"emptyLinePlaceholder":208},[167,134281,134282,134284,134286,134288,134290,134292,134294,134296,134298],{"class":169,"line":10317},[167,134283,1257],{"class":173},[167,134285,1242],{"class":177},[167,134287,5694],{"class":181},[167,134289,267],{"class":173},[167,134291,10202],{"class":201},[167,134293,1245],{"class":181},[167,134295,267],{"class":173},[167,134297,10209],{"class":201},[167,134299,185],{"class":173},[167,134301,134302,134304,134306,134308,134310],{"class":169,"line":10326},[167,134303,1268],{"class":173},[167,134305,3933],{"class":177},[167,134307,10221],{"class":173},[167,134309,3933],{"class":177},[167,134311,185],{"class":173},[167,134313,134314,134316,134318,134320,134322],{"class":169,"line":10981},[167,134315,1268],{"class":173},[167,134317,15],{"class":177},[167,134319,6942],{"class":173},[167,134321,15],{"class":177},[167,134323,185],{"class":173},[167,134325,134326,134328,134330,134332,134334],{"class":169,"line":10994},[167,134327,1268],{"class":173},[167,134329,10246],{"class":177},[167,134331,10249],{"class":173},[167,134333,10246],{"class":177},[167,134335,185],{"class":173},[167,134337,134338,134340,134342,134344,134346,134348,134350,134352,134354,134356,134358],{"class":169,"line":11007},[167,134339,1268],{"class":173},[167,134341,507],{"class":177},[167,134343,1174],{"class":181},[167,134345,267],{"class":173},[167,134347,1179],{"class":201},[167,134349,1182],{"class":181},[167,134351,267],{"class":173},[167,134353,10273],{"class":201},[167,134355,10276],{"class":173},[167,134357,507],{"class":177},[167,134359,185],{"class":173},[167,134361,134362,134364,134366],{"class":169,"line":11032},[167,134363,1292],{"class":173},[167,134365,1242],{"class":177},[167,134367,185],{"class":173},[167,134369,134370],{"class":169,"line":11041},[167,134371,209],{"emptyLinePlaceholder":208},[167,134373,134374,134376,134378,134380,134382,134384,134386],{"class":169,"line":11046},[167,134375,1257],{"class":173},[167,134377,10302],{"class":177},[167,134379,7038],{"class":181},[167,134381,10307],{"class":181},[167,134383,267],{"class":173},[167,134385,10312],{"class":201},[167,134387,5325],{"class":173},[167,134389,134390,134392,134394],{"class":169,"line":11063},[167,134391,504],{"class":173},[167,134393,10117],{"class":177},[167,134395,185],{"class":173},[167,134397,134398,134400,134402],{"class":169,"line":11072},[167,134399,282],{"class":173},[167,134401,299],{"class":177},[167,134403,185],{"class":173},[15,134405,11081],{},[5367,134407,134408],{},[15,134409,11086],{},[22,134411,7678],{"id":7677},[15,134413,134414,11093],{},[87,134415,9185],{},[15,134417,11096],{},[924,134419,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":134421},[134422,134423,134424,134425,134426,134432,134437,134438],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":134427},[134428,134429,134430,134431],{"id":9375,"depth":205,"text":9376},{"id":9385,"depth":205,"text":11109},{"id":9401,"depth":205,"text":9402},{"id":9411,"depth":205,"text":9412},{"id":7996,"depth":188,"text":7997,"children":134433},[134434,134435,134436],{"id":9423,"depth":205,"text":9424},{"id":9430,"depth":205,"text":9431},{"id":9437,"depth":205,"text":9438},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},{"updatedAt":11124,"coverCaption":11125,"author":946,"keywords":134440},[3258,9185,9920,11127,11128],[134442],{"headline":9176,"author":134443,"datePublished":11124,"@type":961},{"name":946,"@type":959},{"title":9176,"description":11122},[134446,134447,134448,134449],{"tag":7724,"color":7725},{"tag":11138,"color":11139},{"tag":1625,"color":1639},{"tag":7730,"color":7731},{"id":134451,"title":134452,"body":134453,"cover":21593,"coverAlt":134452,"date":21594,"description":136984,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":136985,"navigation":208,"path":136988,"schemaOrg":136989,"seo":136992,"series":7718,"seriesDescription":129940,"seriesOrder":170,"seriesTitle":129941,"slug":942,"stem":136993,"tags":136994,"__hash__":136999},"blog\u002Fblog\u002Fvue-lifecycle-hooks-overview.en.md","Vue Lifecycle Hooks: An Overview",{"type":8,"value":134454,"toc":136963},[134455,134459,134462,134473,134475,134480,134502,134505,134522,134529,134531,134534,134582,134586,134596,134599,134603,134609,134665,134675,134679,134685,134688,134699,134801,134809,134813,134819,134822,134834,134906,134913,134917,134923,134926,134937,134943,134948,134951,135017,135075,135081,135086,135092,135095,135109,135175,135233,135237,135243,135246,135252,135257,135260,135326,135384,135390,135395,135398,135407,135473,135531,135535,135538,135543,135549,135554,135620,135678,135684,135689,135692,135700,135821,135922,135928,135937,135943,135949,136015,136073,136079,136084,136150,136207,136210,136216,136222,136298,136365,136369,136375,136378,136382,136388,136458,136519,136523,136529,136599,136660,136662,136668,136674,136677,136745,136803,136807,136811,136841,136845,136866,136873,136875,136881,136953,136961],[11,134456,134458],{"id":134457},"vue-lifecycle-hooks-practical-guide-and-when-to-use-each-one","Vue lifecycle hooks: practical guide and when to use each one",[22,134460,134461],{"id":57635},"Why this matters",[15,134463,134464,134465,134468,134469,134472],{},"Understanding the ",[3933,134466,134467],{},"component lifecycle"," helps you know exactly ",[3933,134470,134471],{},"when to run each type of logic",": initialization, DOM access, API synchronization, side effect cleanup, or debugging.",[11,134474,62839],{"id":57680},[15,134476,96881,134477,134479],{},[3933,134478,951],{}," component goes through several phases:",[3035,134481,134482,134487,134492,134497],{},[36,134483,134484],{},[3933,134485,134486],{},"Creation",[36,134488,134489],{},[3933,134490,134491],{},"Mounting",[36,134493,134494],{},[3933,134495,134496],{},"Updating",[36,134498,134499],{},[3933,134500,134501],{},"Unmounting",[15,134503,134504],{},"There are also special hooks for:",[33,134506,134507,134512,134515,134518],{},[36,134508,134509,134510],{},"Components cached with ",[87,134511,11158],{},[36,134513,134514],{},"Error handling",[36,134516,134517],{},"Reactive render debugging",[36,134519,134520],{},[3933,134521,19072],{},[15,134523,134524,134525,134528],{},"In the next sections, we will see ",[3933,134526,134527],{},"when each hook runs and what it is for",", with examples.",[22,134530,122360],{"id":122359},[15,134532,134533],{},"If you want to go deeper into each hook group, here is the full path for this series:",[33,134535,134536,134541,134547,134553,134559,134565,134570,134576],{},[36,134537,134538],{},[19092,134539,128840],{"href":134540},"\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.en\u002F",[36,134542,134543],{},[19092,134544,134546],{"href":134545},"\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en\u002F","Vue Lifecycle: mounting phase (beforeMount, mounted)",[36,134548,134549],{},[19092,134550,134552],{"href":134551},"\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en\u002F","Vue Lifecycle: update phase (beforeUpdate, updated)",[36,134554,134555],{},[19092,134556,134558],{"href":134557},"\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en\u002F","Vue Lifecycle: unmounting phase (beforeUnmount, unmounted)",[36,134560,134561],{},[19092,134562,134564],{"href":134563},"\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.en\u002F","Vue Lifecycle: cached components with KeepAlive (activated, deactivated)",[36,134566,134567],{},[19092,134568,130944],{"href":134569},"\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.en\u002F",[36,134571,134572],{},[19092,134573,134575],{"href":134574},"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en\u002F","Vue Lifecycle: render debugging (renderTracked, renderTriggered)",[36,134577,134578],{},[19092,134579,134581],{"href":134580},"\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.en\u002F","Vue Lifecycle: server-side rendering with serverPrefetch",[11,134583,134585],{"id":134584},"component-creation","Component creation",[15,134587,134588,134589,134592,134593,1679],{},"In this phase, Vue ",[3933,134590,134591],{},"creates the component instance and sets up reactivity",", but ",[3933,134594,134595],{},"the DOM does not exist yet",[15,134597,134598],{},"This is where you usually initialize state, configuration, or early requests.",[22,134600,134601],{"id":19150},[87,134602,17862],{},[15,134604,134605,134606,1679],{},"Runs ",[3933,134607,134608],{},"before Vue configures reactivity",[154,134610,134612],{"className":156,"code":128990,"filename":15284,"highlights":134611,"language":162,"meta":163,"style":163},[205],[87,134613,134614,134622,134630,134637,134649,134653,134657],{"__ignoreMap":163},[167,134615,134616,134618,134620],{"class":169,"line":170},[167,134617,174],{"class":173},[167,134619,178],{"class":177},[167,134621,185],{"class":173},[167,134623,134624,134626,134628],{"class":169,"line":188},[167,134625,608],{"class":191},[167,134627,3991],{"class":191},[167,134629,1905],{"class":173},[167,134631,134633,134635],{"class":134632,"line":205},[169,213],[167,134634,18033],{"class":181},[167,134636,763],{"class":173},[167,134638,134639,134641,134643,134645,134647],{"class":169,"line":160},[167,134640,8894],{"class":173},[167,134642,2611],{"class":181},[167,134644,229],{"class":173},[167,134646,129028],{"class":201},[167,134648,235],{"class":173},[167,134650,134651],{"class":169,"line":238},[167,134652,3492],{"class":173},[167,134654,134655],{"class":169,"line":243},[167,134656,276],{"class":173},[167,134658,134659,134661,134663],{"class":169,"line":261},[167,134660,282],{"class":173},[167,134662,178],{"class":177},[167,134664,185],{"class":173},[5367,134666,134667],{},[15,134668,134669,134671,134672,134674],{},[87,134670,17862],{}," is not available in Composition API, because ",[87,134673,9238],{}," runs before any other hook.",[22,134676,134677],{"id":17865},[87,134678,17865],{},[15,134680,134681,134682,1679],{},"Reactive state is already available, but ",[3933,134683,134684],{},"the DOM still does not exist",[15,134686,134687],{},"It is commonly used for:",[33,134689,134690,134693,134696],{},[36,134691,134692],{},"HTTP requests",[36,134694,134695],{},"State initialization",[36,134697,134698],{},"Business logic preparation",[154,134700,134702],{"className":156,"code":19254,"filename":15284,"highlights":134701,"language":162,"meta":163,"style":163},[273],[87,134703,134704,134712,134720,134726,134732,134736,134740,134744,134753,134785,134789,134793],{"__ignoreMap":163},[167,134705,134706,134708,134710],{"class":169,"line":170},[167,134707,174],{"class":173},[167,134709,178],{"class":177},[167,134711,185],{"class":173},[167,134713,134714,134716,134718],{"class":169,"line":188},[167,134715,608],{"class":191},[167,134717,3991],{"class":191},[167,134719,1905],{"class":173},[167,134721,134722,134724],{"class":169,"line":205},[167,134723,7176],{"class":181},[167,134725,763],{"class":173},[167,134727,134728,134730],{"class":169,"line":160},[167,134729,1937],{"class":191},[167,134731,1905],{"class":173},[167,134733,134734],{"class":169,"line":238},[167,134735,18138],{"class":173},[167,134737,134738],{"class":169,"line":243},[167,134739,4049],{"class":173},[167,134741,134742],{"class":169,"line":261},[167,134743,398],{"class":173},[167,134745,134747,134749,134751],{"class":134746,"line":273},[169,213],[167,134748,7331],{"class":191},[167,134750,18154],{"class":181},[167,134752,763],{"class":173},[167,134754,134755,134757,134759,134761,134763,134765,134767,134769,134771,134773,134775,134777,134779,134781,134783],{"class":169,"line":279},[167,134756,879],{"class":219},[167,134758,18164],{"class":173},[167,134760,267],{"class":191},[167,134762,3009],{"class":191},[167,134764,6621],{"class":181},[167,134766,229],{"class":173},[167,134768,16994],{"class":201},[167,134770,4270],{"class":173},[167,134772,18179],{"class":181},[167,134774,229],{"class":173},[167,134776,18184],{"class":254},[167,134778,8259],{"class":191},[167,134780,18191],{"class":173},[167,134782,6686],{"class":181},[167,134784,2509],{"class":173},[167,134786,134787],{"class":169,"line":289},[167,134788,3492],{"class":173},[167,134790,134791],{"class":169,"line":294},[167,134792,276],{"class":173},[167,134794,134795,134797,134799],{"class":169,"line":304},[167,134796,282],{"class":173},[167,134798,178],{"class":177},[167,134800,185],{"class":173},[5367,134802,134803],{},[15,134804,134805,134671,134807,134674],{},[87,134806,17865],{},[87,134808,9238],{},[22,134810,134811],{"id":16667},[87,134812,9238],{},[15,134814,134815,134816,1679],{},"It is the ",[3933,134817,134818],{},"main entry point in Composition API",[15,134820,134821],{},"Here you define:",[33,134823,134824,134827,134829,134831],{},[36,134825,134826],{},"Reactive state",[36,134828,954],{},[36,134830,9241],{},[36,134832,134833],{},"Initial component logic",[154,134835,134838],{"className":156,"code":134836,"filename":15284,"highlights":134837,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nconsole.log('Setup executed')\n\u003C\u002Fscript>\n",[170],[87,134839,134840,134851,134861,134865,134881,134885,134898],{"__ignoreMap":163},[167,134841,134843,134845,134847,134849],{"class":134842,"line":170},[169,213],[167,134844,174],{"class":173},[167,134846,178],{"class":177},[167,134848,182],{"class":181},[167,134850,185],{"class":173},[167,134852,134853,134855,134857,134859],{"class":169,"line":188},[167,134854,192],{"class":191},[167,134856,195],{"class":173},[167,134858,198],{"class":191},[167,134860,202],{"class":201},[167,134862,134863],{"class":169,"line":205},[167,134864,209],{"emptyLinePlaceholder":208},[167,134866,134867,134869,134871,134873,134875,134877,134879],{"class":169,"line":160},[167,134868,216],{"class":191},[167,134870,15325],{"class":219},[167,134872,223],{"class":191},[167,134874,226],{"class":181},[167,134876,229],{"class":173},[167,134878,1960],{"class":219},[167,134880,235],{"class":173},[167,134882,134883],{"class":169,"line":238},[167,134884,209],{"emptyLinePlaceholder":208},[167,134886,134887,134889,134891,134893,134896],{"class":169,"line":243},[167,134888,18344],{"class":173},[167,134890,2611],{"class":181},[167,134892,229],{"class":173},[167,134894,134895],{"class":201},"'Setup executed'",[167,134897,235],{"class":173},[167,134899,134900,134902,134904],{"class":169,"line":261},[167,134901,282],{"class":173},[167,134903,178],{"class":177},[167,134905,185],{"class":173},[5367,134907,134908],{},[15,134909,134910,134912],{},[87,134911,9238],{}," is not available in Options API, because it is exclusive to Composition API.",[11,134914,134916],{"id":134915},"component-mounting","Component mounting",[15,134918,134919,134920,1679],{},"In this phase Vue ",[3933,134921,134922],{},"creates and inserts the component DOM",[15,134924,134925],{},"At this point it is safe to use:",[33,134927,134928,134931,134934],{},[36,134929,134930],{},"Browser APIs",[36,134932,134933],{},"External libraries",[36,134935,134936],{},"DOM manipulation",[22,134938,134939,11227,134941],{"id":19492},[87,134940,17367],{},[87,134942,16604],{},[15,134944,134605,134945,1679],{},[3933,134946,134947],{},"right before inserting the DOM into the page",[15,134949,134950],{},"It is not very common, but it can be useful for final pre-render logic.",[154,134952,134955],{"className":156,"code":134953,"filename":3260,"highlights":134954,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeMount } from 'vue'\n\nonBeforeMount(() => {\n  console.log('Component is about to mount')\n})\n\u003C\u002Fscript>\n",[160],[87,134956,134957,134967,134977,134981,134992,135005,135009],{"__ignoreMap":163},[167,134958,134959,134961,134963,134965],{"class":169,"line":170},[167,134960,174],{"class":173},[167,134962,178],{"class":177},[167,134964,182],{"class":181},[167,134966,185],{"class":173},[167,134968,134969,134971,134973,134975],{"class":169,"line":188},[167,134970,192],{"class":191},[167,134972,19527],{"class":173},[167,134974,198],{"class":191},[167,134976,202],{"class":201},[167,134978,134979],{"class":169,"line":205},[167,134980,209],{"emptyLinePlaceholder":208},[167,134982,134984,134986,134988,134990],{"class":134983,"line":160},[169,213],[167,134985,17367],{"class":181},[167,134987,1493],{"class":173},[167,134989,639],{"class":191},[167,134991,1905],{"class":173},[167,134993,134994,134996,134998,135000,135003],{"class":169,"line":238},[167,134995,2608],{"class":173},[167,134997,2611],{"class":181},[167,134999,229],{"class":173},[167,135001,135002],{"class":201},"'Component is about to mount'",[167,135004,235],{"class":173},[167,135006,135007],{"class":169,"line":243},[167,135008,403],{"class":173},[167,135010,135011,135013,135015],{"class":169,"line":261},[167,135012,282],{"class":173},[167,135014,178],{"class":177},[167,135016,185],{"class":173},[154,135018,135021],{"className":156,"code":135019,"filename":3973,"highlights":135020,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeMount() {\n    console.log('Before mounting the component')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,135022,135023,135031,135039,135046,135059,135063,135067],{"__ignoreMap":163},[167,135024,135025,135027,135029],{"class":169,"line":170},[167,135026,174],{"class":173},[167,135028,178],{"class":177},[167,135030,185],{"class":173},[167,135032,135033,135035,135037],{"class":169,"line":188},[167,135034,608],{"class":191},[167,135036,3991],{"class":191},[167,135038,1905],{"class":173},[167,135040,135042,135044],{"class":135041,"line":205},[169,213],[167,135043,17586],{"class":181},[167,135045,763],{"class":173},[167,135047,135048,135050,135052,135054,135057],{"class":169,"line":160},[167,135049,8894],{"class":173},[167,135051,2611],{"class":181},[167,135053,229],{"class":173},[167,135055,135056],{"class":201},"'Before mounting the component'",[167,135058,235],{"class":173},[167,135060,135061],{"class":169,"line":238},[167,135062,3492],{"class":173},[167,135064,135065],{"class":169,"line":243},[167,135066,276],{"class":173},[167,135068,135069,135071,135073],{"class":169,"line":261},[167,135070,282],{"class":173},[167,135072,178],{"class":177},[167,135074,185],{"class":173},[22,135076,135077,11227,135079],{"id":19632},[87,135078,6796],{},[87,135080,6393],{},[15,135082,134605,135083,1679],{},[3933,135084,135085],{},"after the component has been inserted into the DOM",[15,135087,135088,135089,1679],{},"This is one of the ",[3933,135090,135091],{},"most used hooks",[15,135093,135094],{},"Typical uses:",[33,135096,135097,135100,135103,135106],{},[36,135098,135099],{},"Initializing charts",[36,135101,135102],{},"Registering listeners",[36,135104,135105],{},"Focusing inputs",[36,135107,135108],{},"Integrating third-party libraries",[154,135110,135113],{"className":156,"code":135111,"filename":3260,"highlights":135112,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onMounted } from 'vue'\n\nonMounted(() => {\n  console.log('Component mounted in the DOM')\n})\n\u003C\u002Fscript>\n",[160],[87,135114,135115,135125,135135,135139,135150,135163,135167],{"__ignoreMap":163},[167,135116,135117,135119,135121,135123],{"class":169,"line":170},[167,135118,174],{"class":173},[167,135120,178],{"class":177},[167,135122,182],{"class":181},[167,135124,185],{"class":173},[167,135126,135127,135129,135131,135133],{"class":169,"line":188},[167,135128,192],{"class":191},[167,135130,19687],{"class":173},[167,135132,198],{"class":191},[167,135134,202],{"class":201},[167,135136,135137],{"class":169,"line":205},[167,135138,209],{"emptyLinePlaceholder":208},[167,135140,135142,135144,135146,135148],{"class":135141,"line":160},[169,213],[167,135143,6796],{"class":181},[167,135145,1493],{"class":173},[167,135147,639],{"class":191},[167,135149,1905],{"class":173},[167,135151,135152,135154,135156,135158,135161],{"class":169,"line":238},[167,135153,2608],{"class":173},[167,135155,2611],{"class":181},[167,135157,229],{"class":173},[167,135159,135160],{"class":201},"'Component mounted in the DOM'",[167,135162,235],{"class":173},[167,135164,135165],{"class":169,"line":243},[167,135166,403],{"class":173},[167,135168,135169,135171,135173],{"class":169,"line":261},[167,135170,282],{"class":173},[167,135172,178],{"class":177},[167,135174,185],{"class":173},[154,135176,135179],{"className":156,"code":135177,"filename":3973,"highlights":135178,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  mounted() {\n    console.log('Component mounted')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,135180,135181,135189,135197,135204,135217,135221,135225],{"__ignoreMap":163},[167,135182,135183,135185,135187],{"class":169,"line":170},[167,135184,174],{"class":173},[167,135186,178],{"class":177},[167,135188,185],{"class":173},[167,135190,135191,135193,135195],{"class":169,"line":188},[167,135192,608],{"class":191},[167,135194,3991],{"class":191},[167,135196,1905],{"class":173},[167,135198,135200,135202],{"class":135199,"line":205},[169,213],[167,135201,12749],{"class":181},[167,135203,763],{"class":173},[167,135205,135206,135208,135210,135212,135215],{"class":169,"line":160},[167,135207,8894],{"class":173},[167,135209,2611],{"class":181},[167,135211,229],{"class":173},[167,135213,135214],{"class":201},"'Component mounted'",[167,135216,235],{"class":173},[167,135218,135219],{"class":169,"line":238},[167,135220,3492],{"class":173},[167,135222,135223],{"class":169,"line":243},[167,135224,276],{"class":173},[167,135226,135227,135229,135231],{"class":169,"line":261},[167,135228,282],{"class":173},[167,135230,178],{"class":177},[167,135232,185],{"class":173},[11,135234,135236],{"id":135235},"component-update","Component update",[15,135238,135239,135240,1679],{},"When reactive state changes, Vue ",[3933,135241,135242],{},"re-renders the component",[15,135244,135245],{},"These hooks let you react before or after the DOM changes.",[22,135247,135248,11227,135250],{"id":19805},[87,135249,15509],{},[87,135251,15034],{},[15,135253,134605,135254,1679],{},[3933,135255,135256],{},"before Vue updates the DOM",[15,135258,135259],{},"Can be used to inspect previous state.",[154,135261,135264],{"className":156,"code":135262,"filename":3260,"highlights":135263,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeUpdate } from 'vue'\n\nonBeforeUpdate(() => {\n  console.log('Before updating the DOM')\n})\n\u003C\u002Fscript>\n",[160],[87,135265,135266,135276,135286,135290,135301,135314,135318],{"__ignoreMap":163},[167,135267,135268,135270,135272,135274],{"class":169,"line":170},[167,135269,174],{"class":173},[167,135271,178],{"class":177},[167,135273,182],{"class":181},[167,135275,185],{"class":173},[167,135277,135278,135280,135282,135284],{"class":169,"line":188},[167,135279,192],{"class":191},[167,135281,19840],{"class":173},[167,135283,198],{"class":191},[167,135285,202],{"class":201},[167,135287,135288],{"class":169,"line":205},[167,135289,209],{"emptyLinePlaceholder":208},[167,135291,135293,135295,135297,135299],{"class":135292,"line":160},[169,213],[167,135294,15509],{"class":181},[167,135296,1493],{"class":173},[167,135298,639],{"class":191},[167,135300,1905],{"class":173},[167,135302,135303,135305,135307,135309,135312],{"class":169,"line":238},[167,135304,2608],{"class":173},[167,135306,2611],{"class":181},[167,135308,229],{"class":173},[167,135310,135311],{"class":201},"'Before updating the DOM'",[167,135313,235],{"class":173},[167,135315,135316],{"class":169,"line":243},[167,135317,403],{"class":173},[167,135319,135320,135322,135324],{"class":169,"line":261},[167,135321,282],{"class":173},[167,135323,178],{"class":177},[167,135325,185],{"class":173},[154,135327,135330],{"className":156,"code":135328,"filename":3973,"highlights":135329,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeUpdate() {\n    console.log('Before update')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,135331,135332,135340,135348,135355,135368,135372,135376],{"__ignoreMap":163},[167,135333,135334,135336,135338],{"class":169,"line":170},[167,135335,174],{"class":173},[167,135337,178],{"class":177},[167,135339,185],{"class":173},[167,135341,135342,135344,135346],{"class":169,"line":188},[167,135343,608],{"class":191},[167,135345,3991],{"class":191},[167,135347,1905],{"class":173},[167,135349,135351,135353],{"class":135350,"line":205},[169,213],[167,135352,16208],{"class":181},[167,135354,763],{"class":173},[167,135356,135357,135359,135361,135363,135366],{"class":169,"line":160},[167,135358,8894],{"class":173},[167,135360,2611],{"class":181},[167,135362,229],{"class":173},[167,135364,135365],{"class":201},"'Before update'",[167,135367,235],{"class":173},[167,135369,135370],{"class":169,"line":238},[167,135371,3492],{"class":173},[167,135373,135374],{"class":169,"line":243},[167,135375,276],{"class":173},[167,135377,135378,135380,135382],{"class":169,"line":261},[167,135379,282],{"class":173},[167,135381,178],{"class":177},[167,135383,185],{"class":173},[22,135385,135386,11227,135388],{"id":19945},[87,135387,15345],{},[87,135389,15037],{},[15,135391,134605,135392,1679],{},[3933,135393,135394],{},"after Vue updates the DOM",[15,135396,135397],{},"Useful when you need to measure or interact with the updated DOM.",[5367,135399,135400],{},[15,135401,135402,135404,135405,1679],{},[87,135403,15345],{}," should not be used as a replacement for ",[87,135406,1665],{},[154,135408,135411],{"className":156,"code":135409,"filename":3260,"highlights":135410,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onUpdated } from 'vue'\n\nonUpdated(() => {\n  console.log('DOM has been updated')\n})\n\u003C\u002Fscript>\n",[160],[87,135412,135413,135423,135433,135437,135448,135461,135465],{"__ignoreMap":163},[167,135414,135415,135417,135419,135421],{"class":169,"line":170},[167,135416,174],{"class":173},[167,135418,178],{"class":177},[167,135420,182],{"class":181},[167,135422,185],{"class":173},[167,135424,135425,135427,135429,135431],{"class":169,"line":188},[167,135426,192],{"class":191},[167,135428,19987],{"class":173},[167,135430,198],{"class":191},[167,135432,202],{"class":201},[167,135434,135435],{"class":169,"line":205},[167,135436,209],{"emptyLinePlaceholder":208},[167,135438,135440,135442,135444,135446],{"class":135439,"line":160},[169,213],[167,135441,15345],{"class":181},[167,135443,1493],{"class":173},[167,135445,639],{"class":191},[167,135447,1905],{"class":173},[167,135449,135450,135452,135454,135456,135459],{"class":169,"line":238},[167,135451,2608],{"class":173},[167,135453,2611],{"class":181},[167,135455,229],{"class":173},[167,135457,135458],{"class":201},"'DOM has been updated'",[167,135460,235],{"class":173},[167,135462,135463],{"class":169,"line":243},[167,135464,403],{"class":173},[167,135466,135467,135469,135471],{"class":169,"line":261},[167,135468,282],{"class":173},[167,135470,178],{"class":177},[167,135472,185],{"class":173},[154,135474,135477],{"className":156,"code":135475,"filename":3973,"highlights":135476,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  updated() {\n    console.log('DOM updated')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,135478,135479,135487,135495,135502,135515,135519,135523],{"__ignoreMap":163},[167,135480,135481,135483,135485],{"class":169,"line":170},[167,135482,174],{"class":173},[167,135484,178],{"class":177},[167,135486,185],{"class":173},[167,135488,135489,135491,135493],{"class":169,"line":188},[167,135490,608],{"class":191},[167,135492,3991],{"class":191},[167,135494,1905],{"class":173},[167,135496,135498,135500],{"class":135497,"line":205},[169,213],[167,135499,16259],{"class":181},[167,135501,763],{"class":173},[167,135503,135504,135506,135508,135510,135513],{"class":169,"line":160},[167,135505,8894],{"class":173},[167,135507,2611],{"class":181},[167,135509,229],{"class":173},[167,135511,135512],{"class":201},"'DOM updated'",[167,135514,235],{"class":173},[167,135516,135517],{"class":169,"line":238},[167,135518,3492],{"class":173},[167,135520,135521],{"class":169,"line":243},[167,135522,276],{"class":173},[167,135524,135525,135527,135529],{"class":169,"line":261},[167,135526,282],{"class":173},[167,135528,178],{"class":177},[167,135530,185],{"class":173},[11,135532,135534],{"id":135533},"component-unmounting","Component unmounting",[15,135536,135537],{},"When a component stops existing, Vue runs cleanup hooks.",[15,135539,86135,135540,1679],{},[3933,135541,135542],{},"key to avoid memory leaks",[22,135544,135545,11227,135547],{"id":20105},[87,135546,14250],{},[87,135548,13472],{},[15,135550,134605,135551,1679],{},[3933,135552,135553],{},"right before destroying the component",[154,135555,135558],{"className":156,"code":135556,"filename":3260,"highlights":135557,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onBeforeUnmount } from 'vue'\n\nonBeforeUnmount(() => {\n  console.log('Component will be destroyed')\n})\n\u003C\u002Fscript>\n",[160],[87,135559,135560,135570,135580,135584,135595,135608,135612],{"__ignoreMap":163},[167,135561,135562,135564,135566,135568],{"class":169,"line":170},[167,135563,174],{"class":173},[167,135565,178],{"class":177},[167,135567,182],{"class":181},[167,135569,185],{"class":173},[167,135571,135572,135574,135576,135578],{"class":169,"line":188},[167,135573,192],{"class":191},[167,135575,20137],{"class":173},[167,135577,198],{"class":191},[167,135579,202],{"class":201},[167,135581,135582],{"class":169,"line":205},[167,135583,209],{"emptyLinePlaceholder":208},[167,135585,135587,135589,135591,135593],{"class":135586,"line":160},[169,213],[167,135588,14250],{"class":181},[167,135590,1493],{"class":173},[167,135592,639],{"class":191},[167,135594,1905],{"class":173},[167,135596,135597,135599,135601,135603,135606],{"class":169,"line":238},[167,135598,2608],{"class":173},[167,135600,2611],{"class":181},[167,135602,229],{"class":173},[167,135604,135605],{"class":201},"'Component will be destroyed'",[167,135607,235],{"class":173},[167,135609,135610],{"class":169,"line":243},[167,135611,403],{"class":173},[167,135613,135614,135616,135618],{"class":169,"line":261},[167,135615,282],{"class":173},[167,135617,178],{"class":177},[167,135619,185],{"class":173},[154,135621,135624],{"className":156,"code":135622,"filename":3973,"highlights":135623,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  beforeUnmount() {\n    console.log('Before unmounting')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,135625,135626,135634,135642,135649,135662,135666,135670],{"__ignoreMap":163},[167,135627,135628,135630,135632],{"class":169,"line":170},[167,135629,174],{"class":173},[167,135631,178],{"class":177},[167,135633,185],{"class":173},[167,135635,135636,135638,135640],{"class":169,"line":188},[167,135637,608],{"class":191},[167,135639,3991],{"class":191},[167,135641,1905],{"class":173},[167,135643,135645,135647],{"class":135644,"line":205},[169,213],[167,135646,14564],{"class":181},[167,135648,763],{"class":173},[167,135650,135651,135653,135655,135657,135660],{"class":169,"line":160},[167,135652,8894],{"class":173},[167,135654,2611],{"class":181},[167,135656,229],{"class":173},[167,135658,135659],{"class":201},"'Before unmounting'",[167,135661,235],{"class":173},[167,135663,135664],{"class":169,"line":238},[167,135665,3492],{"class":173},[167,135667,135668],{"class":169,"line":243},[167,135669,276],{"class":173},[167,135671,135672,135674,135676],{"class":169,"line":261},[167,135673,282],{"class":173},[167,135675,178],{"class":177},[167,135677,185],{"class":173},[22,135679,135680,11227,135682],{"id":20242},[87,135681,14303],{},[87,135683,11276],{},[15,135685,134605,135686,1679],{},[3933,135687,135688],{},"after the component has been destroyed",[15,135690,135691],{},"Ideal for cleaning:",[33,135693,135694,135696,135698],{},[36,135695,20259],{},[36,135697,20262],{},[36,135699,20265],{},[154,135701,135703],{"className":156,"code":20268,"filename":3260,"highlights":135702,"language":162,"meta":163,"style":163},[243,304],[87,135704,135705,135715,135725,135729,135735,135739,135750,135764,135776,135784,135788,135792,135803,135809,135813],{"__ignoreMap":163},[167,135706,135707,135709,135711,135713],{"class":169,"line":170},[167,135708,174],{"class":173},[167,135710,178],{"class":177},[167,135712,182],{"class":181},[167,135714,185],{"class":173},[167,135716,135717,135719,135721,135723],{"class":169,"line":188},[167,135718,192],{"class":191},[167,135720,20288],{"class":173},[167,135722,198],{"class":191},[167,135724,202],{"class":201},[167,135726,135727],{"class":169,"line":205},[167,135728,209],{"emptyLinePlaceholder":208},[167,135730,135731,135733],{"class":169,"line":160},[167,135732,13948],{"class":191},[167,135734,20303],{"class":173},[167,135736,135737],{"class":169,"line":238},[167,135738,209],{"emptyLinePlaceholder":208},[167,135740,135742,135744,135746,135748],{"class":135741,"line":243},[169,213],[167,135743,6796],{"class":181},[167,135745,1493],{"class":173},[167,135747,639],{"class":191},[167,135749,1905],{"class":173},[167,135751,135752,135754,135756,135758,135760,135762],{"class":169,"line":261},[167,135753,20323],{"class":173},[167,135755,267],{"class":191},[167,135757,12070],{"class":181},[167,135759,1493],{"class":173},[167,135761,639],{"class":191},[167,135763,1905],{"class":173},[167,135765,135766,135768,135770,135772,135774],{"class":169,"line":273},[167,135767,8894],{"class":173},[167,135769,2611],{"class":181},[167,135771,229],{"class":173},[167,135773,17171],{"class":201},[167,135775,235],{"class":173},[167,135777,135778,135780,135782],{"class":169,"line":279},[167,135779,1957],{"class":173},[167,135781,17180],{"class":219},[167,135783,235],{"class":173},[167,135785,135786],{"class":169,"line":289},[167,135787,403],{"class":173},[167,135789,135790],{"class":169,"line":294},[167,135791,209],{"emptyLinePlaceholder":208},[167,135793,135795,135797,135799,135801],{"class":135794,"line":304},[169,213],[167,135796,14303],{"class":181},[167,135798,1493],{"class":173},[167,135800,639],{"class":191},[167,135802,1905],{"class":173},[167,135804,135805,135807],{"class":169,"line":313},[167,135806,12134],{"class":181},[167,135808,20379],{"class":173},[167,135810,135811],{"class":169,"line":161},[167,135812,403],{"class":173},[167,135814,135815,135817,135819],{"class":169,"line":335},[167,135816,282],{"class":173},[167,135818,178],{"class":177},[167,135820,185],{"class":173},[154,135822,135824],{"className":156,"code":20394,"filename":3973,"highlights":135823,"language":162,"meta":163,"style":163},[205,273],[87,135825,135826,135834,135842,135849,135865,135877,135885,135889,135896,135906,135910,135914],{"__ignoreMap":163},[167,135827,135828,135830,135832],{"class":169,"line":170},[167,135829,174],{"class":173},[167,135831,178],{"class":177},[167,135833,185],{"class":173},[167,135835,135836,135838,135840],{"class":169,"line":188},[167,135837,608],{"class":191},[167,135839,3991],{"class":191},[167,135841,1905],{"class":173},[167,135843,135845,135847],{"class":135844,"line":205},[169,213],[167,135846,12749],{"class":181},[167,135848,763],{"class":173},[167,135850,135851,135853,135855,135857,135859,135861,135863],{"class":169,"line":160},[167,135852,879],{"class":219},[167,135854,20427],{"class":173},[167,135856,267],{"class":191},[167,135858,12070],{"class":181},[167,135860,1493],{"class":173},[167,135862,639],{"class":191},[167,135864,1905],{"class":173},[167,135866,135867,135869,135871,135873,135875],{"class":169,"line":238},[167,135868,20442],{"class":173},[167,135870,2611],{"class":181},[167,135872,229],{"class":173},[167,135874,17171],{"class":201},[167,135876,235],{"class":173},[167,135878,135879,135881,135883],{"class":169,"line":243},[167,135880,20455],{"class":173},[167,135882,17180],{"class":219},[167,135884,235],{"class":173},[167,135886,135887],{"class":169,"line":261},[167,135888,398],{"class":173},[167,135890,135892,135894],{"class":135891,"line":273},[169,213],[167,135893,14622],{"class":181},[167,135895,763],{"class":173},[167,135897,135898,135900,135902,135904],{"class":169,"line":279},[167,135899,20475],{"class":181},[167,135901,229],{"class":173},[167,135903,4927],{"class":219},[167,135905,20482],{"class":173},[167,135907,135908],{"class":169,"line":289},[167,135909,3492],{"class":173},[167,135911,135912],{"class":169,"line":294},[167,135913,276],{"class":173},[167,135915,135916,135918,135920],{"class":169,"line":304},[167,135917,282],{"class":173},[167,135919,178],{"class":177},[167,135921,185],{"class":173},[11,135923,135925,135927],{"id":135924},"keepalive-hooks",[87,135926,11158],{}," hooks",[15,135929,135930,135931,1025,135933,135936],{},"When a component is inside ",[87,135932,11158],{},[3933,135934,135935],{},"it is not destroyed",", it is only activated or deactivated.",[22,135938,135939,11227,135941],{"id":20516},[87,135940,12186],{},[87,135942,11161],{},[15,135944,135945,135946,1679],{},"Runs when the component ",[3933,135947,135948],{},"becomes active again",[154,135950,135953],{"className":156,"code":135951,"filename":3260,"highlights":135952,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onActivated } from 'vue'\n\nonActivated(() => {\n  console.log('Component activated again')\n})\n\u003C\u002Fscript>\n",[160],[87,135954,135955,135965,135975,135979,135990,136003,136007],{"__ignoreMap":163},[167,135956,135957,135959,135961,135963],{"class":169,"line":170},[167,135958,174],{"class":173},[167,135960,178],{"class":177},[167,135962,182],{"class":181},[167,135964,185],{"class":173},[167,135966,135967,135969,135971,135973],{"class":169,"line":188},[167,135968,192],{"class":191},[167,135970,20549],{"class":173},[167,135972,198],{"class":191},[167,135974,202],{"class":201},[167,135976,135977],{"class":169,"line":205},[167,135978,209],{"emptyLinePlaceholder":208},[167,135980,135982,135984,135986,135988],{"class":135981,"line":160},[169,213],[167,135983,12186],{"class":181},[167,135985,1493],{"class":173},[167,135987,639],{"class":191},[167,135989,1905],{"class":173},[167,135991,135992,135994,135996,135998,136001],{"class":169,"line":238},[167,135993,2608],{"class":173},[167,135995,2611],{"class":181},[167,135997,229],{"class":173},[167,135999,136000],{"class":201},"'Component activated again'",[167,136002,235],{"class":173},[167,136004,136005],{"class":169,"line":243},[167,136006,403],{"class":173},[167,136008,136009,136011,136013],{"class":169,"line":261},[167,136010,282],{"class":173},[167,136012,178],{"class":177},[167,136014,185],{"class":173},[154,136016,136019],{"className":156,"code":136017,"filename":3973,"highlights":136018,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  activated() {\n    console.log('Component activated')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,136020,136021,136029,136037,136044,136057,136061,136065],{"__ignoreMap":163},[167,136022,136023,136025,136027],{"class":169,"line":170},[167,136024,174],{"class":173},[167,136026,178],{"class":177},[167,136028,185],{"class":173},[167,136030,136031,136033,136035],{"class":169,"line":188},[167,136032,608],{"class":191},[167,136034,3991],{"class":191},[167,136036,1905],{"class":173},[167,136038,136040,136042],{"class":136039,"line":205},[169,213],[167,136041,20621],{"class":181},[167,136043,763],{"class":173},[167,136045,136046,136048,136050,136052,136055],{"class":169,"line":160},[167,136047,8894],{"class":173},[167,136049,2611],{"class":181},[167,136051,229],{"class":173},[167,136053,136054],{"class":201},"'Component activated'",[167,136056,235],{"class":173},[167,136058,136059],{"class":169,"line":238},[167,136060,3492],{"class":173},[167,136062,136063],{"class":169,"line":243},[167,136064,276],{"class":173},[167,136066,136067,136069,136071],{"class":169,"line":261},[167,136068,282],{"class":173},[167,136070,178],{"class":177},[167,136072,185],{"class":173},[22,136074,136075,11227,136077],{"id":20654},[87,136076,12243],{},[87,136078,11164],{},[15,136080,135945,136081,1679],{},[3933,136082,136083],{},"is hidden but stays in memory",[154,136085,136088],{"className":156,"code":136086,"filename":3260,"highlights":136087,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onDeactivated } from 'vue'\n\nonDeactivated(() => {\n  console.log('Component deactivated')\n})\n\u003C\u002Fscript>\n",[160],[87,136089,136090,136100,136110,136114,136125,136138,136142],{"__ignoreMap":163},[167,136091,136092,136094,136096,136098],{"class":169,"line":170},[167,136093,174],{"class":173},[167,136095,178],{"class":177},[167,136097,182],{"class":181},[167,136099,185],{"class":173},[167,136101,136102,136104,136106,136108],{"class":169,"line":188},[167,136103,192],{"class":191},[167,136105,20686],{"class":173},[167,136107,198],{"class":191},[167,136109,202],{"class":201},[167,136111,136112],{"class":169,"line":205},[167,136113,209],{"emptyLinePlaceholder":208},[167,136115,136117,136119,136121,136123],{"class":136116,"line":160},[169,213],[167,136118,12243],{"class":181},[167,136120,1493],{"class":173},[167,136122,639],{"class":191},[167,136124,1905],{"class":173},[167,136126,136127,136129,136131,136133,136136],{"class":169,"line":238},[167,136128,2608],{"class":173},[167,136130,2611],{"class":181},[167,136132,229],{"class":173},[167,136134,136135],{"class":201},"'Component deactivated'",[167,136137,235],{"class":173},[167,136139,136140],{"class":169,"line":243},[167,136141,403],{"class":173},[167,136143,136144,136146,136148],{"class":169,"line":261},[167,136145,282],{"class":173},[167,136147,178],{"class":177},[167,136149,185],{"class":173},[154,136151,136154],{"className":156,"code":136152,"filename":3973,"highlights":136153,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  deactivated() {\n    console.log('Component deactivated')\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,136155,136156,136164,136172,136179,136191,136195,136199],{"__ignoreMap":163},[167,136157,136158,136160,136162],{"class":169,"line":170},[167,136159,174],{"class":173},[167,136161,178],{"class":177},[167,136163,185],{"class":173},[167,136165,136166,136168,136170],{"class":169,"line":188},[167,136167,608],{"class":191},[167,136169,3991],{"class":191},[167,136171,1905],{"class":173},[167,136173,136175,136177],{"class":136174,"line":205},[169,213],[167,136176,12837],{"class":181},[167,136178,763],{"class":173},[167,136180,136181,136183,136185,136187,136189],{"class":169,"line":160},[167,136182,8894],{"class":173},[167,136184,2611],{"class":181},[167,136186,229],{"class":173},[167,136188,136135],{"class":201},[167,136190,235],{"class":173},[167,136192,136193],{"class":169,"line":238},[167,136194,3492],{"class":173},[167,136196,136197],{"class":169,"line":243},[167,136198,276],{"class":173},[167,136200,136201,136203,136205],{"class":169,"line":261},[167,136202,282],{"class":173},[167,136204,178],{"class":177},[167,136206,185],{"class":173},[11,136208,134514],{"id":136209},"error-handling",[22,136211,136212,11227,136214],{"id":20793},[87,136213,9920],{},[87,136215,9185],{},[15,136217,136218,136219,1679],{},"Allows capturing errors from ",[3933,136220,136221],{},"child components",[154,136223,136226],{"className":156,"code":136224,"filename":3260,"highlights":136225,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onErrorCaptured } from 'vue'\n\nonErrorCaptured((error) => {\n  console.error('Captured error:', error)\n  return false\n})\n\u003C\u002Fscript>\n",[160],[87,136227,136228,136238,136248,136252,136267,136280,136286,136290],{"__ignoreMap":163},[167,136229,136230,136232,136234,136236],{"class":169,"line":170},[167,136231,174],{"class":173},[167,136233,178],{"class":177},[167,136235,182],{"class":181},[167,136237,185],{"class":173},[167,136239,136240,136242,136244,136246],{"class":169,"line":188},[167,136241,192],{"class":191},[167,136243,20826],{"class":173},[167,136245,198],{"class":191},[167,136247,202],{"class":201},[167,136249,136250],{"class":169,"line":205},[167,136251,209],{"emptyLinePlaceholder":208},[167,136253,136255,136257,136259,136261,136263,136265],{"class":136254,"line":160},[169,213],[167,136256,9920],{"class":181},[167,136258,1918],{"class":173},[167,136260,9352],{"class":254},[167,136262,693],{"class":173},[167,136264,639],{"class":191},[167,136266,1905],{"class":173},[167,136268,136269,136271,136273,136275,136278],{"class":169,"line":238},[167,136270,2608],{"class":173},[167,136272,9352],{"class":181},[167,136274,229],{"class":173},[167,136276,136277],{"class":201},"'Captured error:'",[167,136279,14172],{"class":173},[167,136281,136282,136284],{"class":169,"line":243},[167,136283,1539],{"class":191},[167,136285,5593],{"class":219},[167,136287,136288],{"class":169,"line":261},[167,136289,403],{"class":173},[167,136291,136292,136294,136296],{"class":169,"line":273},[167,136293,282],{"class":173},[167,136295,178],{"class":177},[167,136297,185],{"class":173},[154,136299,136302],{"className":156,"code":136300,"filename":3973,"highlights":136301,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  errorCaptured(error) {\n    console.error('Captured error:', error)\n    return false\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,136303,136304,136312,136320,136331,136343,136349,136353,136357],{"__ignoreMap":163},[167,136305,136306,136308,136310],{"class":169,"line":170},[167,136307,174],{"class":173},[167,136309,178],{"class":177},[167,136311,185],{"class":173},[167,136313,136314,136316,136318],{"class":169,"line":188},[167,136315,608],{"class":191},[167,136317,3991],{"class":191},[167,136319,1905],{"class":173},[167,136321,136323,136325,136327,136329],{"class":136322,"line":205},[169,213],[167,136324,10694],{"class":181},[167,136326,229],{"class":173},[167,136328,9352],{"class":254},[167,136330,258],{"class":173},[167,136332,136333,136335,136337,136339,136341],{"class":169,"line":160},[167,136334,8894],{"class":173},[167,136336,9352],{"class":181},[167,136338,229],{"class":173},[167,136340,136277],{"class":201},[167,136342,14172],{"class":173},[167,136344,136345,136347],{"class":169,"line":238},[167,136346,1937],{"class":191},[167,136348,5593],{"class":219},[167,136350,136351],{"class":169,"line":243},[167,136352,3492],{"class":173},[167,136354,136355],{"class":169,"line":261},[167,136356,276],{"class":173},[167,136358,136359,136361,136363],{"class":169,"line":273},[167,136360,282],{"class":173},[167,136362,178],{"class":177},[167,136364,185],{"class":173},[11,136366,136368],{"id":136367},"render-debugging-hooks","Render debugging hooks",[15,136370,136371,136372,1679],{},"These hooks help understand ",[3933,136373,136374],{},"why a component is re-rendering",[15,136376,136377],{},"They should not be used by default in production.",[22,136379,136380],{"id":20963},[87,136381,8360],{},[15,136383,136384,136385,1679],{},"Runs when Vue ",[3933,136386,136387],{},"tracks a reactive dependency during render",[154,136389,136392],{"className":156,"code":136390,"filename":3260,"highlights":136391,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onRenderTracked } from 'vue'\n\nonRenderTracked((event) => {\n  console.debug('Tracked dependency:', event.key)\n})\n\u003C\u002Fscript>\n",[160],[87,136393,136394,136404,136414,136418,136433,136446,136450],{"__ignoreMap":163},[167,136395,136396,136398,136400,136402],{"class":169,"line":170},[167,136397,174],{"class":173},[167,136399,178],{"class":177},[167,136401,182],{"class":181},[167,136403,185],{"class":173},[167,136405,136406,136408,136410,136412],{"class":169,"line":188},[167,136407,192],{"class":191},[167,136409,20994],{"class":173},[167,136411,198],{"class":191},[167,136413,202],{"class":201},[167,136415,136416],{"class":169,"line":205},[167,136417,209],{"emptyLinePlaceholder":208},[167,136419,136421,136423,136425,136427,136429,136431],{"class":136420,"line":160},[169,213],[167,136422,8360],{"class":181},[167,136424,1918],{"class":173},[167,136426,4195],{"class":254},[167,136428,693],{"class":173},[167,136430,639],{"class":191},[167,136432,1905],{"class":173},[167,136434,136435,136437,136439,136441,136444],{"class":169,"line":238},[167,136436,2608],{"class":173},[167,136438,21024],{"class":181},[167,136440,229],{"class":173},[167,136442,136443],{"class":201},"'Tracked dependency:'",[167,136445,21032],{"class":173},[167,136447,136448],{"class":169,"line":243},[167,136449,403],{"class":173},[167,136451,136452,136454,136456],{"class":169,"line":261},[167,136453,282],{"class":173},[167,136455,178],{"class":177},[167,136457,185],{"class":173},[154,136459,136462],{"className":156,"code":136460,"filename":3973,"highlights":136461,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  renderTracked(event) {\n    console.debug('Tracked dependency:', event.key)\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,136463,136464,136472,136480,136491,136503,136507,136511],{"__ignoreMap":163},[167,136465,136466,136468,136470],{"class":169,"line":170},[167,136467,174],{"class":173},[167,136469,178],{"class":177},[167,136471,185],{"class":173},[167,136473,136474,136476,136478],{"class":169,"line":188},[167,136475,608],{"class":191},[167,136477,3991],{"class":191},[167,136479,1905],{"class":173},[167,136481,136483,136485,136487,136489],{"class":136482,"line":205},[169,213],[167,136484,8883],{"class":181},[167,136486,229],{"class":173},[167,136488,4195],{"class":254},[167,136490,258],{"class":173},[167,136492,136493,136495,136497,136499,136501],{"class":169,"line":160},[167,136494,8894],{"class":173},[167,136496,21024],{"class":181},[167,136498,229],{"class":173},[167,136500,136443],{"class":201},[167,136502,21032],{"class":173},[167,136504,136505],{"class":169,"line":238},[167,136506,3492],{"class":173},[167,136508,136509],{"class":169,"line":243},[167,136510,276],{"class":173},[167,136512,136513,136515,136517],{"class":169,"line":261},[167,136514,282],{"class":173},[167,136516,178],{"class":177},[167,136518,185],{"class":173},[22,136520,136521],{"id":21108},[87,136522,8420],{},[15,136524,136525,136526,1679],{},"Runs when ",[3933,136527,136528],{},"a dependency triggers a re-render",[154,136530,136533],{"className":156,"code":136531,"filename":3260,"highlights":136532,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { onRenderTriggered } from 'vue'\n\nonRenderTriggered((event) => {\n  console.debug('Re-render caused by:', event.key)\n})\n\u003C\u002Fscript>\n",[160],[87,136534,136535,136545,136555,136559,136574,136587,136591],{"__ignoreMap":163},[167,136536,136537,136539,136541,136543],{"class":169,"line":170},[167,136538,174],{"class":173},[167,136540,178],{"class":177},[167,136542,182],{"class":181},[167,136544,185],{"class":173},[167,136546,136547,136549,136551,136553],{"class":169,"line":188},[167,136548,192],{"class":191},[167,136550,21139],{"class":173},[167,136552,198],{"class":191},[167,136554,202],{"class":201},[167,136556,136557],{"class":169,"line":205},[167,136558,209],{"emptyLinePlaceholder":208},[167,136560,136562,136564,136566,136568,136570,136572],{"class":136561,"line":160},[169,213],[167,136563,8420],{"class":181},[167,136565,1918],{"class":173},[167,136567,4195],{"class":254},[167,136569,693],{"class":173},[167,136571,639],{"class":191},[167,136573,1905],{"class":173},[167,136575,136576,136578,136580,136582,136585],{"class":169,"line":238},[167,136577,2608],{"class":173},[167,136579,21024],{"class":181},[167,136581,229],{"class":173},[167,136583,136584],{"class":201},"'Re-render caused by:'",[167,136586,21032],{"class":173},[167,136588,136589],{"class":169,"line":243},[167,136590,403],{"class":173},[167,136592,136593,136595,136597],{"class":169,"line":261},[167,136594,282],{"class":173},[167,136596,178],{"class":177},[167,136598,185],{"class":173},[154,136600,136603],{"className":156,"code":136601,"filename":3973,"highlights":136602,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  renderTriggered(event) {\n    console.debug('Re-render caused by:', event.key)\n  }\n}\n\u003C\u002Fscript>\n",[205],[87,136604,136605,136613,136621,136632,136644,136648,136652],{"__ignoreMap":163},[167,136606,136607,136609,136611],{"class":169,"line":170},[167,136608,174],{"class":173},[167,136610,178],{"class":177},[167,136612,185],{"class":173},[167,136614,136615,136617,136619],{"class":169,"line":188},[167,136616,608],{"class":191},[167,136618,3991],{"class":191},[167,136620,1905],{"class":173},[167,136622,136624,136626,136628,136630],{"class":136623,"line":205},[169,213],[167,136625,8939],{"class":181},[167,136627,229],{"class":173},[167,136629,4195],{"class":254},[167,136631,258],{"class":173},[167,136633,136634,136636,136638,136640,136642],{"class":169,"line":160},[167,136635,8894],{"class":173},[167,136637,21024],{"class":181},[167,136639,229],{"class":173},[167,136641,136584],{"class":201},[167,136643,21032],{"class":173},[167,136645,136646],{"class":169,"line":238},[167,136647,3492],{"class":173},[167,136649,136650],{"class":169,"line":243},[167,136651,276],{"class":173},[167,136653,136654,136656,136658],{"class":169,"line":261},[167,136655,282],{"class":173},[167,136657,178],{"class":177},[167,136659,185],{"class":173},[11,136661,19072],{"id":21251},[22,136663,136664,11227,136666],{"id":21255},[87,136665,6708],{},[87,136667,6218],{},[15,136669,136670,136671,1679],{},"Allows ",[3933,136672,136673],{},"loading data before rendering HTML on the server",[15,136675,136676],{},"This prevents empty screens during first render.",[154,136678,136680],{"className":156,"code":21271,"filename":3260,"highlights":136679,"language":162,"meta":163,"style":163},[160],[87,136681,136682,136692,136702,136706,136721,136733,136737],{"__ignoreMap":163},[167,136683,136684,136686,136688,136690],{"class":169,"line":170},[167,136685,174],{"class":173},[167,136687,178],{"class":177},[167,136689,182],{"class":181},[167,136691,185],{"class":173},[167,136693,136694,136696,136698,136700],{"class":169,"line":188},[167,136695,192],{"class":191},[167,136697,21291],{"class":173},[167,136699,198],{"class":191},[167,136701,202],{"class":201},[167,136703,136704],{"class":169,"line":205},[167,136705,209],{"emptyLinePlaceholder":208},[167,136707,136709,136711,136713,136715,136717,136719],{"class":136708,"line":160},[169,213],[167,136710,6708],{"class":181},[167,136712,229],{"class":173},[167,136714,2523],{"class":191},[167,136716,1469],{"class":173},[167,136718,639],{"class":191},[167,136720,1905],{"class":173},[167,136722,136723,136725,136727,136729,136731],{"class":169,"line":238},[167,136724,2575],{"class":191},[167,136726,6621],{"class":181},[167,136728,229],{"class":173},[167,136730,21325],{"class":201},[167,136732,235],{"class":173},[167,136734,136735],{"class":169,"line":243},[167,136736,403],{"class":173},[167,136738,136739,136741,136743],{"class":169,"line":261},[167,136740,282],{"class":173},[167,136742,178],{"class":177},[167,136744,185],{"class":173},[154,136746,136748],{"className":156,"code":21342,"filename":3973,"highlights":136747,"language":162,"meta":163,"style":163},[205],[87,136749,136750,136758,136766,136775,136787,136791,136795],{"__ignoreMap":163},[167,136751,136752,136754,136756],{"class":169,"line":170},[167,136753,174],{"class":173},[167,136755,178],{"class":177},[167,136757,185],{"class":173},[167,136759,136760,136762,136764],{"class":169,"line":188},[167,136761,608],{"class":191},[167,136763,3991],{"class":191},[167,136765,1905],{"class":173},[167,136767,136769,136771,136773],{"class":136768,"line":205},[169,213],[167,136770,7331],{"class":191},[167,136772,7334],{"class":181},[167,136774,763],{"class":173},[167,136776,136777,136779,136781,136783,136785],{"class":169,"line":160},[167,136778,6730],{"class":191},[167,136780,6621],{"class":181},[167,136782,229],{"class":173},[167,136784,21325],{"class":201},[167,136786,235],{"class":173},[167,136788,136789],{"class":169,"line":238},[167,136790,3492],{"class":173},[167,136792,136793],{"class":169,"line":243},[167,136794,276],{"class":173},[167,136796,136797,136799,136801],{"class":169,"line":261},[167,136798,282],{"class":173},[167,136800,178],{"class":177},[167,136802,185],{"class":173},[11,136804,136806],{"id":136805},"when-to-use-hooks-and-when-not-to","When to use hooks (and when not to)",[22,136808,136810],{"id":136809},"use-them-when","Use them when:",[33,136812,136813,136821,136828,136835],{},[36,136814,136815,136816,2526,136819,6219],{},"You need ",[3933,136817,136818],{},"real DOM access",[87,136820,6796],{},[36,136822,136815,136823,2526,136826,6219],{},[3933,136824,136825],{},"resource cleanup",[87,136827,14303],{},[36,136829,136830,136831,2526,136833,6219],{},"You are working with ",[3933,136832,978],{},[87,136834,6708],{},[36,136836,136837,136838],{},"You need to react to ",[3933,136839,136840],{},"component lifecycle phases",[22,136842,136844],{"id":136843},"avoid-them-when","Avoid them when:",[33,136846,136847,136854,136860],{},[36,136848,96881,136849,136853],{},[3933,136850,136851],{},[87,136852,1661],{}," solves the problem",[36,136855,96881,136856,116232],{},[3933,136857,136858],{},[87,136859,1665],{},[36,136861,136862,136863],{},"You only need to react to ",[3933,136864,136865],{},"specific state changes",[15,136867,136868,136869,136872],{},"Hooks coordinate ",[3933,136870,136871],{},"lifecycle moments"," and should not hold all component logic.",[11,136874,60191],{"id":60190},[15,136876,136877,136878,583],{},"Lifecycle hooks let you control ",[3933,136879,136880],{},"key component moments",[56,136882,136883,136893],{},[59,136884,136885],{},[62,136886,136887,136890],{},[65,136888,136889],{},"Phase",[65,136891,136892],{},"Main hooks",[75,136894,136895,136905,136915,136925,136935,136945],{},[62,136896,136897,136899],{},[80,136898,134486],{},[80,136900,136901,1025,136903],{},[87,136902,16667],{},[87,136904,17865],{},[62,136906,136907,136909],{},[80,136908,134491],{},[80,136910,136911,1025,136913],{},[87,136912,6796],{},[87,136914,6393],{},[62,136916,136917,136919],{},[80,136918,134496],{},[80,136920,136921,1025,136923],{},[87,136922,15345],{},[87,136924,15037],{},[62,136926,136927,136929],{},[80,136928,134501],{},[80,136930,136931,1025,136933],{},[87,136932,14303],{},[87,136934,11276],{},[62,136936,136937,136939],{},[80,136938,21536],{},[80,136940,136941,1025,136943],{},[87,136942,12186],{},[87,136944,12243],{},[62,136946,136947,136949],{},[80,136948,978],{},[80,136950,136951],{},[87,136952,6708],{},[5367,136954,136955],{},[15,136956,136957,136958],{},"If you are not sure which hook to use, ask first:\n",[3933,136959,136960],{},"At what point in the component lifecycle do I need this logic to run?",[924,136962,21561],{},{"title":163,"searchDepth":188,"depth":188,"links":136964},[136965,136966,136967,136968,136969,136970,136971,136972,136973,136974,136975,136976,136977,136978,136979,136980,136981,136982,136983],{"id":57635,"depth":188,"text":134461},{"id":122359,"depth":188,"text":122360},{"id":19150,"depth":188,"text":17862},{"id":17865,"depth":188,"text":17865},{"id":16667,"depth":188,"text":9238},{"id":19492,"depth":188,"text":21570},{"id":19632,"depth":188,"text":21572},{"id":19805,"depth":188,"text":21574},{"id":19945,"depth":188,"text":21576},{"id":20105,"depth":188,"text":21578},{"id":20242,"depth":188,"text":21580},{"id":20516,"depth":188,"text":21582},{"id":20654,"depth":188,"text":21584},{"id":20793,"depth":188,"text":21586},{"id":20963,"depth":188,"text":8360},{"id":21108,"depth":188,"text":8420},{"id":21255,"depth":188,"text":21590},{"id":136809,"depth":188,"text":136810},{"id":136843,"depth":188,"text":136844},"A clear map of all Vue 3 lifecycle hooks to understand when to use each one.",{"updatedAt":21597,"readingTime":273,"coverCaption":136986,"author":946,"keywords":136987},"Overview of lifecycle hooks in Vue 3.",[3258,130999,3260,3973,21601],"\u002Fblog\u002Fvue-lifecycle-hooks-overview.en",[136990],{"headline":134452,"author":136991,"datePublished":21597,"@type":961},{"name":946,"@type":959},{"title":134452,"description":136984},"blog\u002Fvue-lifecycle-hooks-overview.en",[136995,136996,136997,136998],{"tag":129945,"color":7725},{"tag":98745,"color":1639},{"tag":60269,"color":3270},{"tag":65670,"color":5425},"eKL7WbNdfy7YCgu4kuXQo2-usXKNEx-NzC0RBSf6EQM",{"id":19001,"title":19002,"body":137001,"cover":21593,"coverAlt":19002,"date":21594,"description":21595,"draft":940,"extension":941,"lab":942,"locale":943,"meta":139352,"navigation":208,"path":21602,"schemaOrg":139354,"seo":139357,"series":7718,"seriesDescription":7719,"seriesOrder":170,"seriesTitle":7720,"slug":942,"stem":21607,"tags":139358,"__hash__":21613},{"type":8,"value":137002,"toc":139331},[137003,137005,137007,137013,137015,137019,137037,137039,137053,137057,137059,137061,137095,137097,137103,137105,137109,137113,137169,137177,137181,137185,137187,137195,137297,137305,137309,137313,137315,137325,137395,137401,137403,137407,137409,137417,137423,137427,137429,137493,137549,137555,137559,137563,137565,137575,137639,137695,137697,137701,137703,137709,137713,137715,137779,137835,137841,137845,137847,137853,137917,137973,137975,137977,137981,137987,137991,138055,138111,138117,138121,138123,138131,138252,138353,138357,138363,138369,138373,138437,138493,138499,138503,138567,138623,138625,138631,138635,138709,138775,138777,138781,138783,138787,138791,138859,138919,138923,138927,138995,139055,139057,139063,139067,139069,139137,139195,139197,139199,139223,139225,139243,139247,139249,139253,139323,139329],[11,137004,19008],{"id":19007},[22,137006,6231],{"id":6230},[15,137008,19013,137009,19017,137011,19021],{},[3933,137010,19016],{},[3933,137012,19020],{},[11,137014,6257],{"id":6256},[15,137016,19026,137017,19029],{},[3933,137018,951],{},[3035,137020,137021,137025,137029,137033],{},[36,137022,137023],{},[3933,137024,19036],{},[36,137026,137027],{},[3933,137028,19041],{},[36,137030,137031],{},[3933,137032,19046],{},[36,137034,137035],{},[3933,137036,19051],{},[15,137038,19054],{},[33,137040,137041,137045,137047,137049],{},[36,137042,19059,137043],{},[87,137044,11158],{},[36,137046,19064],{},[36,137048,19067],{},[36,137050,137051],{},[3933,137052,19072],{},[15,137054,19075,137055,19079],{},[3933,137056,19078],{},[22,137058,19083],{"id":19082},[15,137060,19086],{},[33,137062,137063,137067,137071,137075,137079,137083,137087,137091],{},[36,137064,137065],{},[19092,137066,17853],{"href":19094},[36,137068,137069],{},[19092,137070,16595],{"href":19099},[36,137072,137073],{},[19092,137074,15025],{"href":19104},[36,137076,137077],{},[19092,137078,13463],{"href":19109},[36,137080,137081],{},[19092,137082,19115],{"href":19114},[36,137084,137085],{},[19092,137086,9176],{"href":19120},[36,137088,137089],{},[19092,137090,7735],{"href":19125},[36,137092,137093],{},[19092,137094,6209],{"href":19130},[11,137096,19134],{"id":19133},[15,137098,19137,137099,19141,137101,1679],{},[3933,137100,19140],{},[3933,137102,19144],{},[15,137104,19147],{},[22,137106,137107],{"id":19150},[87,137108,17862],{},[15,137110,19155,137111,1679],{},[3933,137112,19158],{},[154,137114,137116],{"className":156,"code":19161,"filename":15284,"highlights":137115,"language":162,"meta":163,"style":163},[205],[87,137117,137118,137126,137134,137141,137153,137157,137161],{"__ignoreMap":163},[167,137119,137120,137122,137124],{"class":169,"line":170},[167,137121,174],{"class":173},[167,137123,178],{"class":177},[167,137125,185],{"class":173},[167,137127,137128,137130,137132],{"class":169,"line":188},[167,137129,608],{"class":191},[167,137131,3991],{"class":191},[167,137133,1905],{"class":173},[167,137135,137137,137139],{"class":137136,"line":205},[169,213],[167,137138,18033],{"class":181},[167,137140,763],{"class":173},[167,137142,137143,137145,137147,137149,137151],{"class":169,"line":160},[167,137144,8894],{"class":173},[167,137146,2611],{"class":181},[167,137148,229],{"class":173},[167,137150,19198],{"class":201},[167,137152,235],{"class":173},[167,137154,137155],{"class":169,"line":238},[167,137156,3492],{"class":173},[167,137158,137159],{"class":169,"line":243},[167,137160,276],{"class":173},[167,137162,137163,137165,137167],{"class":169,"line":261},[167,137164,282],{"class":173},[167,137166,178],{"class":177},[167,137168,185],{"class":173},[5367,137170,137171],{},[15,137172,19221,137173,19224,137175,19227],{},[87,137174,17862],{},[87,137176,9238],{},[22,137178,137179],{"id":17865},[87,137180,17865],{},[15,137182,19234,137183,1679],{},[3933,137184,19237],{},[15,137186,19240],{},[33,137188,137189,137191,137193],{},[36,137190,19245],{},[36,137192,19248],{},[36,137194,19251],{},[154,137196,137198],{"className":156,"code":19254,"filename":15284,"highlights":137197,"language":162,"meta":163,"style":163},[273],[87,137199,137200,137208,137216,137222,137228,137232,137236,137240,137249,137281,137285,137289],{"__ignoreMap":163},[167,137201,137202,137204,137206],{"class":169,"line":170},[167,137203,174],{"class":173},[167,137205,178],{"class":177},[167,137207,185],{"class":173},[167,137209,137210,137212,137214],{"class":169,"line":188},[167,137211,608],{"class":191},[167,137213,3991],{"class":191},[167,137215,1905],{"class":173},[167,137217,137218,137220],{"class":169,"line":205},[167,137219,7176],{"class":181},[167,137221,763],{"class":173},[167,137223,137224,137226],{"class":169,"line":160},[167,137225,1937],{"class":191},[167,137227,1905],{"class":173},[167,137229,137230],{"class":169,"line":238},[167,137231,18138],{"class":173},[167,137233,137234],{"class":169,"line":243},[167,137235,4049],{"class":173},[167,137237,137238],{"class":169,"line":261},[167,137239,398],{"class":173},[167,137241,137243,137245,137247],{"class":137242,"line":273},[169,213],[167,137244,7331],{"class":191},[167,137246,18154],{"class":181},[167,137248,763],{"class":173},[167,137250,137251,137253,137255,137257,137259,137261,137263,137265,137267,137269,137271,137273,137275,137277,137279],{"class":169,"line":279},[167,137252,879],{"class":219},[167,137254,18164],{"class":173},[167,137256,267],{"class":191},[167,137258,3009],{"class":191},[167,137260,6621],{"class":181},[167,137262,229],{"class":173},[167,137264,16994],{"class":201},[167,137266,4270],{"class":173},[167,137268,18179],{"class":181},[167,137270,229],{"class":173},[167,137272,18184],{"class":254},[167,137274,8259],{"class":191},[167,137276,18191],{"class":173},[167,137278,6686],{"class":181},[167,137280,2509],{"class":173},[167,137282,137283],{"class":169,"line":289},[167,137284,3492],{"class":173},[167,137286,137287],{"class":169,"line":294},[167,137288,276],{"class":173},[167,137290,137291,137293,137295],{"class":169,"line":304},[167,137292,282],{"class":173},[167,137294,178],{"class":177},[167,137296,185],{"class":173},[5367,137298,137299],{},[15,137300,19221,137301,19224,137303,19227],{},[87,137302,17865],{},[87,137304,9238],{},[22,137306,137307],{"id":16667},[87,137308,9238],{},[15,137310,19369,137311,1679],{},[3933,137312,19372],{},[15,137314,19375],{},[33,137316,137317,137319,137321,137323],{},[36,137318,19380],{},[36,137320,954],{},[36,137322,9241],{},[36,137324,19387],{},[154,137326,137328],{"className":156,"code":19390,"filename":15284,"highlights":137327,"language":162,"meta":163,"style":163},[170],[87,137329,137330,137341,137351,137355,137371,137375,137387],{"__ignoreMap":163},[167,137331,137333,137335,137337,137339],{"class":137332,"line":170},[169,213],[167,137334,174],{"class":173},[167,137336,178],{"class":177},[167,137338,182],{"class":181},[167,137340,185],{"class":173},[167,137342,137343,137345,137347,137349],{"class":169,"line":188},[167,137344,192],{"class":191},[167,137346,195],{"class":173},[167,137348,198],{"class":191},[167,137350,202],{"class":201},[167,137352,137353],{"class":169,"line":205},[167,137354,209],{"emptyLinePlaceholder":208},[167,137356,137357,137359,137361,137363,137365,137367,137369],{"class":169,"line":160},[167,137358,216],{"class":191},[167,137360,15325],{"class":219},[167,137362,223],{"class":191},[167,137364,226],{"class":181},[167,137366,229],{"class":173},[167,137368,1960],{"class":219},[167,137370,235],{"class":173},[167,137372,137373],{"class":169,"line":238},[167,137374,209],{"emptyLinePlaceholder":208},[167,137376,137377,137379,137381,137383,137385],{"class":169,"line":243},[167,137378,18344],{"class":173},[167,137380,2611],{"class":181},[167,137382,229],{"class":173},[167,137384,19449],{"class":201},[167,137386,235],{"class":173},[167,137388,137389,137391,137393],{"class":169,"line":261},[167,137390,282],{"class":173},[167,137392,178],{"class":177},[167,137394,185],{"class":173},[5367,137396,137397],{},[15,137398,19221,137399,19466],{},[87,137400,9238],{},[11,137402,19470],{"id":19469},[15,137404,19137,137405,1679],{},[3933,137406,19475],{},[15,137408,19478],{},[33,137410,137411,137413,137415],{},[36,137412,19483],{},[36,137414,19486],{},[36,137416,19489],{},[22,137418,137419,11227,137421],{"id":19492},[87,137420,17367],{},[87,137422,16604],{},[15,137424,19155,137425,1679],{},[3933,137426,19501],{},[15,137428,19504],{},[154,137430,137432],{"className":156,"code":19507,"filename":3260,"highlights":137431,"language":162,"meta":163,"style":163},[160],[87,137433,137434,137444,137454,137458,137469,137481,137485],{"__ignoreMap":163},[167,137435,137436,137438,137440,137442],{"class":169,"line":170},[167,137437,174],{"class":173},[167,137439,178],{"class":177},[167,137441,182],{"class":181},[167,137443,185],{"class":173},[167,137445,137446,137448,137450,137452],{"class":169,"line":188},[167,137447,192],{"class":191},[167,137449,19527],{"class":173},[167,137451,198],{"class":191},[167,137453,202],{"class":201},[167,137455,137456],{"class":169,"line":205},[167,137457,209],{"emptyLinePlaceholder":208},[167,137459,137461,137463,137465,137467],{"class":137460,"line":160},[169,213],[167,137462,17367],{"class":181},[167,137464,1493],{"class":173},[167,137466,639],{"class":191},[167,137468,1905],{"class":173},[167,137470,137471,137473,137475,137477,137479],{"class":169,"line":238},[167,137472,2608],{"class":173},[167,137474,2611],{"class":181},[167,137476,229],{"class":173},[167,137478,19557],{"class":201},[167,137480,235],{"class":173},[167,137482,137483],{"class":169,"line":243},[167,137484,403],{"class":173},[167,137486,137487,137489,137491],{"class":169,"line":261},[167,137488,282],{"class":173},[167,137490,178],{"class":177},[167,137492,185],{"class":173},[154,137494,137496],{"className":156,"code":19574,"filename":3973,"highlights":137495,"language":162,"meta":163,"style":163},[205],[87,137497,137498,137506,137514,137521,137533,137537,137541],{"__ignoreMap":163},[167,137499,137500,137502,137504],{"class":169,"line":170},[167,137501,174],{"class":173},[167,137503,178],{"class":177},[167,137505,185],{"class":173},[167,137507,137508,137510,137512],{"class":169,"line":188},[167,137509,608],{"class":191},[167,137511,3991],{"class":191},[167,137513,1905],{"class":173},[167,137515,137517,137519],{"class":137516,"line":205},[169,213],[167,137518,17586],{"class":181},[167,137520,763],{"class":173},[167,137522,137523,137525,137527,137529,137531],{"class":169,"line":160},[167,137524,8894],{"class":173},[167,137526,2611],{"class":181},[167,137528,229],{"class":173},[167,137530,19611],{"class":201},[167,137532,235],{"class":173},[167,137534,137535],{"class":169,"line":238},[167,137536,3492],{"class":173},[167,137538,137539],{"class":169,"line":243},[167,137540,276],{"class":173},[167,137542,137543,137545,137547],{"class":169,"line":261},[167,137544,282],{"class":173},[167,137546,178],{"class":177},[167,137548,185],{"class":173},[22,137550,137551,11227,137553],{"id":19632},[87,137552,6796],{},[87,137554,6393],{},[15,137556,19155,137557,1679],{},[3933,137558,19641],{},[15,137560,19644,137561,1679],{},[3933,137562,19647],{},[15,137564,19650],{},[33,137566,137567,137569,137571,137573],{},[36,137568,19655],{},[36,137570,19658],{},[36,137572,19661],{},[36,137574,19664],{},[154,137576,137578],{"className":156,"code":19667,"filename":3260,"highlights":137577,"language":162,"meta":163,"style":163},[160],[87,137579,137580,137590,137600,137604,137615,137627,137631],{"__ignoreMap":163},[167,137581,137582,137584,137586,137588],{"class":169,"line":170},[167,137583,174],{"class":173},[167,137585,178],{"class":177},[167,137587,182],{"class":181},[167,137589,185],{"class":173},[167,137591,137592,137594,137596,137598],{"class":169,"line":188},[167,137593,192],{"class":191},[167,137595,19687],{"class":173},[167,137597,198],{"class":191},[167,137599,202],{"class":201},[167,137601,137602],{"class":169,"line":205},[167,137603,209],{"emptyLinePlaceholder":208},[167,137605,137607,137609,137611,137613],{"class":137606,"line":160},[169,213],[167,137608,6796],{"class":181},[167,137610,1493],{"class":173},[167,137612,639],{"class":191},[167,137614,1905],{"class":173},[167,137616,137617,137619,137621,137623,137625],{"class":169,"line":238},[167,137618,2608],{"class":173},[167,137620,2611],{"class":181},[167,137622,229],{"class":173},[167,137624,19717],{"class":201},[167,137626,235],{"class":173},[167,137628,137629],{"class":169,"line":243},[167,137630,403],{"class":173},[167,137632,137633,137635,137637],{"class":169,"line":261},[167,137634,282],{"class":173},[167,137636,178],{"class":177},[167,137638,185],{"class":173},[154,137640,137642],{"className":156,"code":19734,"filename":3973,"highlights":137641,"language":162,"meta":163,"style":163},[205],[87,137643,137644,137652,137660,137667,137679,137683,137687],{"__ignoreMap":163},[167,137645,137646,137648,137650],{"class":169,"line":170},[167,137647,174],{"class":173},[167,137649,178],{"class":177},[167,137651,185],{"class":173},[167,137653,137654,137656,137658],{"class":169,"line":188},[167,137655,608],{"class":191},[167,137657,3991],{"class":191},[167,137659,1905],{"class":173},[167,137661,137663,137665],{"class":137662,"line":205},[169,213],[167,137664,12749],{"class":181},[167,137666,763],{"class":173},[167,137668,137669,137671,137673,137675,137677],{"class":169,"line":160},[167,137670,8894],{"class":173},[167,137672,2611],{"class":181},[167,137674,229],{"class":173},[167,137676,19771],{"class":201},[167,137678,235],{"class":173},[167,137680,137681],{"class":169,"line":238},[167,137682,3492],{"class":173},[167,137684,137685],{"class":169,"line":243},[167,137686,276],{"class":173},[167,137688,137689,137691,137693],{"class":169,"line":261},[167,137690,282],{"class":173},[167,137692,178],{"class":177},[167,137694,185],{"class":173},[11,137696,19793],{"id":19792},[15,137698,19796,137699,1679],{},[3933,137700,19799],{},[15,137702,19802],{},[22,137704,137705,11227,137707],{"id":19805},[87,137706,15509],{},[87,137708,15034],{},[15,137710,19155,137711,1679],{},[3933,137712,19814],{},[15,137714,19817],{},[154,137716,137718],{"className":156,"code":19820,"filename":3260,"highlights":137717,"language":162,"meta":163,"style":163},[160],[87,137719,137720,137730,137740,137744,137755,137767,137771],{"__ignoreMap":163},[167,137721,137722,137724,137726,137728],{"class":169,"line":170},[167,137723,174],{"class":173},[167,137725,178],{"class":177},[167,137727,182],{"class":181},[167,137729,185],{"class":173},[167,137731,137732,137734,137736,137738],{"class":169,"line":188},[167,137733,192],{"class":191},[167,137735,19840],{"class":173},[167,137737,198],{"class":191},[167,137739,202],{"class":201},[167,137741,137742],{"class":169,"line":205},[167,137743,209],{"emptyLinePlaceholder":208},[167,137745,137747,137749,137751,137753],{"class":137746,"line":160},[169,213],[167,137748,15509],{"class":181},[167,137750,1493],{"class":173},[167,137752,639],{"class":191},[167,137754,1905],{"class":173},[167,137756,137757,137759,137761,137763,137765],{"class":169,"line":238},[167,137758,2608],{"class":173},[167,137760,2611],{"class":181},[167,137762,229],{"class":173},[167,137764,19870],{"class":201},[167,137766,235],{"class":173},[167,137768,137769],{"class":169,"line":243},[167,137770,403],{"class":173},[167,137772,137773,137775,137777],{"class":169,"line":261},[167,137774,282],{"class":173},[167,137776,178],{"class":177},[167,137778,185],{"class":173},[154,137780,137782],{"className":156,"code":19887,"filename":3973,"highlights":137781,"language":162,"meta":163,"style":163},[205],[87,137783,137784,137792,137800,137807,137819,137823,137827],{"__ignoreMap":163},[167,137785,137786,137788,137790],{"class":169,"line":170},[167,137787,174],{"class":173},[167,137789,178],{"class":177},[167,137791,185],{"class":173},[167,137793,137794,137796,137798],{"class":169,"line":188},[167,137795,608],{"class":191},[167,137797,3991],{"class":191},[167,137799,1905],{"class":173},[167,137801,137803,137805],{"class":137802,"line":205},[169,213],[167,137804,16208],{"class":181},[167,137806,763],{"class":173},[167,137808,137809,137811,137813,137815,137817],{"class":169,"line":160},[167,137810,8894],{"class":173},[167,137812,2611],{"class":181},[167,137814,229],{"class":173},[167,137816,19924],{"class":201},[167,137818,235],{"class":173},[167,137820,137821],{"class":169,"line":238},[167,137822,3492],{"class":173},[167,137824,137825],{"class":169,"line":243},[167,137826,276],{"class":173},[167,137828,137829,137831,137833],{"class":169,"line":261},[167,137830,282],{"class":173},[167,137832,178],{"class":177},[167,137834,185],{"class":173},[22,137836,137837,11227,137839],{"id":19945},[87,137838,15345],{},[87,137840,15037],{},[15,137842,19155,137843,1679],{},[3933,137844,19954],{},[15,137846,19957],{},[5367,137848,137849],{},[15,137850,19962,137851,1679],{},[87,137852,1665],{},[154,137854,137856],{"className":156,"code":19967,"filename":3260,"highlights":137855,"language":162,"meta":163,"style":163},[160],[87,137857,137858,137868,137878,137882,137893,137905,137909],{"__ignoreMap":163},[167,137859,137860,137862,137864,137866],{"class":169,"line":170},[167,137861,174],{"class":173},[167,137863,178],{"class":177},[167,137865,182],{"class":181},[167,137867,185],{"class":173},[167,137869,137870,137872,137874,137876],{"class":169,"line":188},[167,137871,192],{"class":191},[167,137873,19987],{"class":173},[167,137875,198],{"class":191},[167,137877,202],{"class":201},[167,137879,137880],{"class":169,"line":205},[167,137881,209],{"emptyLinePlaceholder":208},[167,137883,137885,137887,137889,137891],{"class":137884,"line":160},[169,213],[167,137886,15345],{"class":181},[167,137888,1493],{"class":173},[167,137890,639],{"class":191},[167,137892,1905],{"class":173},[167,137894,137895,137897,137899,137901,137903],{"class":169,"line":238},[167,137896,2608],{"class":173},[167,137898,2611],{"class":181},[167,137900,229],{"class":173},[167,137902,20017],{"class":201},[167,137904,235],{"class":173},[167,137906,137907],{"class":169,"line":243},[167,137908,403],{"class":173},[167,137910,137911,137913,137915],{"class":169,"line":261},[167,137912,282],{"class":173},[167,137914,178],{"class":177},[167,137916,185],{"class":173},[154,137918,137920],{"className":156,"code":20034,"filename":3973,"highlights":137919,"language":162,"meta":163,"style":163},[205],[87,137921,137922,137930,137938,137945,137957,137961,137965],{"__ignoreMap":163},[167,137923,137924,137926,137928],{"class":169,"line":170},[167,137925,174],{"class":173},[167,137927,178],{"class":177},[167,137929,185],{"class":173},[167,137931,137932,137934,137936],{"class":169,"line":188},[167,137933,608],{"class":191},[167,137935,3991],{"class":191},[167,137937,1905],{"class":173},[167,137939,137941,137943],{"class":137940,"line":205},[169,213],[167,137942,16259],{"class":181},[167,137944,763],{"class":173},[167,137946,137947,137949,137951,137953,137955],{"class":169,"line":160},[167,137948,8894],{"class":173},[167,137950,2611],{"class":181},[167,137952,229],{"class":173},[167,137954,20071],{"class":201},[167,137956,235],{"class":173},[167,137958,137959],{"class":169,"line":238},[167,137960,3492],{"class":173},[167,137962,137963],{"class":169,"line":243},[167,137964,276],{"class":173},[167,137966,137967,137969,137971],{"class":169,"line":261},[167,137968,282],{"class":173},[167,137970,178],{"class":177},[167,137972,185],{"class":173},[11,137974,20093],{"id":20092},[15,137976,20096],{},[15,137978,20099,137979,1679],{},[3933,137980,20102],{},[22,137982,137983,11227,137985],{"id":20105},[87,137984,14250],{},[87,137986,13472],{},[15,137988,19155,137989,1679],{},[3933,137990,20114],{},[154,137992,137994],{"className":156,"code":20117,"filename":3260,"highlights":137993,"language":162,"meta":163,"style":163},[160],[87,137995,137996,138006,138016,138020,138031,138043,138047],{"__ignoreMap":163},[167,137997,137998,138000,138002,138004],{"class":169,"line":170},[167,137999,174],{"class":173},[167,138001,178],{"class":177},[167,138003,182],{"class":181},[167,138005,185],{"class":173},[167,138007,138008,138010,138012,138014],{"class":169,"line":188},[167,138009,192],{"class":191},[167,138011,20137],{"class":173},[167,138013,198],{"class":191},[167,138015,202],{"class":201},[167,138017,138018],{"class":169,"line":205},[167,138019,209],{"emptyLinePlaceholder":208},[167,138021,138023,138025,138027,138029],{"class":138022,"line":160},[169,213],[167,138024,14250],{"class":181},[167,138026,1493],{"class":173},[167,138028,639],{"class":191},[167,138030,1905],{"class":173},[167,138032,138033,138035,138037,138039,138041],{"class":169,"line":238},[167,138034,2608],{"class":173},[167,138036,2611],{"class":181},[167,138038,229],{"class":173},[167,138040,20167],{"class":201},[167,138042,235],{"class":173},[167,138044,138045],{"class":169,"line":243},[167,138046,403],{"class":173},[167,138048,138049,138051,138053],{"class":169,"line":261},[167,138050,282],{"class":173},[167,138052,178],{"class":177},[167,138054,185],{"class":173},[154,138056,138058],{"className":156,"code":20184,"filename":3973,"highlights":138057,"language":162,"meta":163,"style":163},[205],[87,138059,138060,138068,138076,138083,138095,138099,138103],{"__ignoreMap":163},[167,138061,138062,138064,138066],{"class":169,"line":170},[167,138063,174],{"class":173},[167,138065,178],{"class":177},[167,138067,185],{"class":173},[167,138069,138070,138072,138074],{"class":169,"line":188},[167,138071,608],{"class":191},[167,138073,3991],{"class":191},[167,138075,1905],{"class":173},[167,138077,138079,138081],{"class":138078,"line":205},[169,213],[167,138080,14564],{"class":181},[167,138082,763],{"class":173},[167,138084,138085,138087,138089,138091,138093],{"class":169,"line":160},[167,138086,8894],{"class":173},[167,138088,2611],{"class":181},[167,138090,229],{"class":173},[167,138092,20221],{"class":201},[167,138094,235],{"class":173},[167,138096,138097],{"class":169,"line":238},[167,138098,3492],{"class":173},[167,138100,138101],{"class":169,"line":243},[167,138102,276],{"class":173},[167,138104,138105,138107,138109],{"class":169,"line":261},[167,138106,282],{"class":173},[167,138108,178],{"class":177},[167,138110,185],{"class":173},[22,138112,138113,11227,138115],{"id":20242},[87,138114,14303],{},[87,138116,11276],{},[15,138118,19155,138119,1679],{},[3933,138120,20251],{},[15,138122,20254],{},[33,138124,138125,138127,138129],{},[36,138126,20259],{},[36,138128,20262],{},[36,138130,20265],{},[154,138132,138134],{"className":156,"code":20268,"filename":3260,"highlights":138133,"language":162,"meta":163,"style":163},[243,304],[87,138135,138136,138146,138156,138160,138166,138170,138181,138195,138207,138215,138219,138223,138234,138240,138244],{"__ignoreMap":163},[167,138137,138138,138140,138142,138144],{"class":169,"line":170},[167,138139,174],{"class":173},[167,138141,178],{"class":177},[167,138143,182],{"class":181},[167,138145,185],{"class":173},[167,138147,138148,138150,138152,138154],{"class":169,"line":188},[167,138149,192],{"class":191},[167,138151,20288],{"class":173},[167,138153,198],{"class":191},[167,138155,202],{"class":201},[167,138157,138158],{"class":169,"line":205},[167,138159,209],{"emptyLinePlaceholder":208},[167,138161,138162,138164],{"class":169,"line":160},[167,138163,13948],{"class":191},[167,138165,20303],{"class":173},[167,138167,138168],{"class":169,"line":238},[167,138169,209],{"emptyLinePlaceholder":208},[167,138171,138173,138175,138177,138179],{"class":138172,"line":243},[169,213],[167,138174,6796],{"class":181},[167,138176,1493],{"class":173},[167,138178,639],{"class":191},[167,138180,1905],{"class":173},[167,138182,138183,138185,138187,138189,138191,138193],{"class":169,"line":261},[167,138184,20323],{"class":173},[167,138186,267],{"class":191},[167,138188,12070],{"class":181},[167,138190,1493],{"class":173},[167,138192,639],{"class":191},[167,138194,1905],{"class":173},[167,138196,138197,138199,138201,138203,138205],{"class":169,"line":273},[167,138198,8894],{"class":173},[167,138200,2611],{"class":181},[167,138202,229],{"class":173},[167,138204,17171],{"class":201},[167,138206,235],{"class":173},[167,138208,138209,138211,138213],{"class":169,"line":279},[167,138210,1957],{"class":173},[167,138212,17180],{"class":219},[167,138214,235],{"class":173},[167,138216,138217],{"class":169,"line":289},[167,138218,403],{"class":173},[167,138220,138221],{"class":169,"line":294},[167,138222,209],{"emptyLinePlaceholder":208},[167,138224,138226,138228,138230,138232],{"class":138225,"line":304},[169,213],[167,138227,14303],{"class":181},[167,138229,1493],{"class":173},[167,138231,639],{"class":191},[167,138233,1905],{"class":173},[167,138235,138236,138238],{"class":169,"line":313},[167,138237,12134],{"class":181},[167,138239,20379],{"class":173},[167,138241,138242],{"class":169,"line":161},[167,138243,403],{"class":173},[167,138245,138246,138248,138250],{"class":169,"line":335},[167,138247,282],{"class":173},[167,138249,178],{"class":177},[167,138251,185],{"class":173},[154,138253,138255],{"className":156,"code":20394,"filename":3973,"highlights":138254,"language":162,"meta":163,"style":163},[205,273],[87,138256,138257,138265,138273,138280,138296,138308,138316,138320,138327,138337,138341,138345],{"__ignoreMap":163},[167,138258,138259,138261,138263],{"class":169,"line":170},[167,138260,174],{"class":173},[167,138262,178],{"class":177},[167,138264,185],{"class":173},[167,138266,138267,138269,138271],{"class":169,"line":188},[167,138268,608],{"class":191},[167,138270,3991],{"class":191},[167,138272,1905],{"class":173},[167,138274,138276,138278],{"class":138275,"line":205},[169,213],[167,138277,12749],{"class":181},[167,138279,763],{"class":173},[167,138281,138282,138284,138286,138288,138290,138292,138294],{"class":169,"line":160},[167,138283,879],{"class":219},[167,138285,20427],{"class":173},[167,138287,267],{"class":191},[167,138289,12070],{"class":181},[167,138291,1493],{"class":173},[167,138293,639],{"class":191},[167,138295,1905],{"class":173},[167,138297,138298,138300,138302,138304,138306],{"class":169,"line":238},[167,138299,20442],{"class":173},[167,138301,2611],{"class":181},[167,138303,229],{"class":173},[167,138305,17171],{"class":201},[167,138307,235],{"class":173},[167,138309,138310,138312,138314],{"class":169,"line":243},[167,138311,20455],{"class":173},[167,138313,17180],{"class":219},[167,138315,235],{"class":173},[167,138317,138318],{"class":169,"line":261},[167,138319,398],{"class":173},[167,138321,138323,138325],{"class":138322,"line":273},[169,213],[167,138324,14622],{"class":181},[167,138326,763],{"class":173},[167,138328,138329,138331,138333,138335],{"class":169,"line":279},[167,138330,20475],{"class":181},[167,138332,229],{"class":173},[167,138334,4927],{"class":219},[167,138336,20482],{"class":173},[167,138338,138339],{"class":169,"line":289},[167,138340,3492],{"class":173},[167,138342,138343],{"class":169,"line":294},[167,138344,276],{"class":173},[167,138346,138347,138349,138351],{"class":169,"line":304},[167,138348,282],{"class":173},[167,138350,178],{"class":177},[167,138352,185],{"class":173},[11,138354,20502,138355],{"id":20501},[87,138356,11158],{},[15,138358,20507,138359,1025,138361,20513],{},[87,138360,11158],{},[3933,138362,20512],{},[22,138364,138365,11227,138367],{"id":20516},[87,138366,12186],{},[87,138368,11161],{},[15,138370,20523,138371,1679],{},[3933,138372,20526],{},[154,138374,138376],{"className":156,"code":20529,"filename":3260,"highlights":138375,"language":162,"meta":163,"style":163},[160],[87,138377,138378,138388,138398,138402,138413,138425,138429],{"__ignoreMap":163},[167,138379,138380,138382,138384,138386],{"class":169,"line":170},[167,138381,174],{"class":173},[167,138383,178],{"class":177},[167,138385,182],{"class":181},[167,138387,185],{"class":173},[167,138389,138390,138392,138394,138396],{"class":169,"line":188},[167,138391,192],{"class":191},[167,138393,20549],{"class":173},[167,138395,198],{"class":191},[167,138397,202],{"class":201},[167,138399,138400],{"class":169,"line":205},[167,138401,209],{"emptyLinePlaceholder":208},[167,138403,138405,138407,138409,138411],{"class":138404,"line":160},[169,213],[167,138406,12186],{"class":181},[167,138408,1493],{"class":173},[167,138410,639],{"class":191},[167,138412,1905],{"class":173},[167,138414,138415,138417,138419,138421,138423],{"class":169,"line":238},[167,138416,2608],{"class":173},[167,138418,2611],{"class":181},[167,138420,229],{"class":173},[167,138422,20579],{"class":201},[167,138424,235],{"class":173},[167,138426,138427],{"class":169,"line":243},[167,138428,403],{"class":173},[167,138430,138431,138433,138435],{"class":169,"line":261},[167,138432,282],{"class":173},[167,138434,178],{"class":177},[167,138436,185],{"class":173},[154,138438,138440],{"className":156,"code":20596,"filename":3973,"highlights":138439,"language":162,"meta":163,"style":163},[205],[87,138441,138442,138450,138458,138465,138477,138481,138485],{"__ignoreMap":163},[167,138443,138444,138446,138448],{"class":169,"line":170},[167,138445,174],{"class":173},[167,138447,178],{"class":177},[167,138449,185],{"class":173},[167,138451,138452,138454,138456],{"class":169,"line":188},[167,138453,608],{"class":191},[167,138455,3991],{"class":191},[167,138457,1905],{"class":173},[167,138459,138461,138463],{"class":138460,"line":205},[169,213],[167,138462,20621],{"class":181},[167,138464,763],{"class":173},[167,138466,138467,138469,138471,138473,138475],{"class":169,"line":160},[167,138468,8894],{"class":173},[167,138470,2611],{"class":181},[167,138472,229],{"class":173},[167,138474,20579],{"class":201},[167,138476,235],{"class":173},[167,138478,138479],{"class":169,"line":238},[167,138480,3492],{"class":173},[167,138482,138483],{"class":169,"line":243},[167,138484,276],{"class":173},[167,138486,138487,138489,138491],{"class":169,"line":261},[167,138488,282],{"class":173},[167,138490,178],{"class":177},[167,138492,185],{"class":173},[22,138494,138495,11227,138497],{"id":20654},[87,138496,12243],{},[87,138498,11164],{},[15,138500,20523,138501,1679],{},[3933,138502,20663],{},[154,138504,138506],{"className":156,"code":20666,"filename":3260,"highlights":138505,"language":162,"meta":163,"style":163},[160],[87,138507,138508,138518,138528,138532,138543,138555,138559],{"__ignoreMap":163},[167,138509,138510,138512,138514,138516],{"class":169,"line":170},[167,138511,174],{"class":173},[167,138513,178],{"class":177},[167,138515,182],{"class":181},[167,138517,185],{"class":173},[167,138519,138520,138522,138524,138526],{"class":169,"line":188},[167,138521,192],{"class":191},[167,138523,20686],{"class":173},[167,138525,198],{"class":191},[167,138527,202],{"class":201},[167,138529,138530],{"class":169,"line":205},[167,138531,209],{"emptyLinePlaceholder":208},[167,138533,138535,138537,138539,138541],{"class":138534,"line":160},[169,213],[167,138536,12243],{"class":181},[167,138538,1493],{"class":173},[167,138540,639],{"class":191},[167,138542,1905],{"class":173},[167,138544,138545,138547,138549,138551,138553],{"class":169,"line":238},[167,138546,2608],{"class":173},[167,138548,2611],{"class":181},[167,138550,229],{"class":173},[167,138552,20716],{"class":201},[167,138554,235],{"class":173},[167,138556,138557],{"class":169,"line":243},[167,138558,403],{"class":173},[167,138560,138561,138563,138565],{"class":169,"line":261},[167,138562,282],{"class":173},[167,138564,178],{"class":177},[167,138566,185],{"class":173},[154,138568,138570],{"className":156,"code":20733,"filename":3973,"highlights":138569,"language":162,"meta":163,"style":163},[205],[87,138571,138572,138580,138588,138595,138607,138611,138615],{"__ignoreMap":163},[167,138573,138574,138576,138578],{"class":169,"line":170},[167,138575,174],{"class":173},[167,138577,178],{"class":177},[167,138579,185],{"class":173},[167,138581,138582,138584,138586],{"class":169,"line":188},[167,138583,608],{"class":191},[167,138585,3991],{"class":191},[167,138587,1905],{"class":173},[167,138589,138591,138593],{"class":138590,"line":205},[169,213],[167,138592,12837],{"class":181},[167,138594,763],{"class":173},[167,138596,138597,138599,138601,138603,138605],{"class":169,"line":160},[167,138598,8894],{"class":173},[167,138600,2611],{"class":181},[167,138602,229],{"class":173},[167,138604,20716],{"class":201},[167,138606,235],{"class":173},[167,138608,138609],{"class":169,"line":238},[167,138610,3492],{"class":173},[167,138612,138613],{"class":169,"line":243},[167,138614,276],{"class":173},[167,138616,138617,138619,138621],{"class":169,"line":261},[167,138618,282],{"class":173},[167,138620,178],{"class":177},[167,138622,185],{"class":173},[11,138624,19064],{"id":20790},[22,138626,138627,11227,138629],{"id":20793},[87,138628,9920],{},[87,138630,9185],{},[15,138632,20800,138633,1679],{},[3933,138634,20803],{},[154,138636,138638],{"className":156,"code":20806,"filename":3260,"highlights":138637,"language":162,"meta":163,"style":163},[160],[87,138639,138640,138650,138660,138664,138679,138691,138697,138701],{"__ignoreMap":163},[167,138641,138642,138644,138646,138648],{"class":169,"line":170},[167,138643,174],{"class":173},[167,138645,178],{"class":177},[167,138647,182],{"class":181},[167,138649,185],{"class":173},[167,138651,138652,138654,138656,138658],{"class":169,"line":188},[167,138653,192],{"class":191},[167,138655,20826],{"class":173},[167,138657,198],{"class":191},[167,138659,202],{"class":201},[167,138661,138662],{"class":169,"line":205},[167,138663,209],{"emptyLinePlaceholder":208},[167,138665,138667,138669,138671,138673,138675,138677],{"class":138666,"line":160},[169,213],[167,138668,9920],{"class":181},[167,138670,1918],{"class":173},[167,138672,9352],{"class":254},[167,138674,693],{"class":173},[167,138676,639],{"class":191},[167,138678,1905],{"class":173},[167,138680,138681,138683,138685,138687,138689],{"class":169,"line":238},[167,138682,2608],{"class":173},[167,138684,9352],{"class":181},[167,138686,229],{"class":173},[167,138688,20860],{"class":201},[167,138690,14172],{"class":173},[167,138692,138693,138695],{"class":169,"line":243},[167,138694,1539],{"class":191},[167,138696,5593],{"class":219},[167,138698,138699],{"class":169,"line":261},[167,138700,403],{"class":173},[167,138702,138703,138705,138707],{"class":169,"line":273},[167,138704,282],{"class":173},[167,138706,178],{"class":177},[167,138708,185],{"class":173},[154,138710,138712],{"className":156,"code":20883,"filename":3973,"highlights":138711,"language":162,"meta":163,"style":163},[205],[87,138713,138714,138722,138730,138741,138753,138759,138763,138767],{"__ignoreMap":163},[167,138715,138716,138718,138720],{"class":169,"line":170},[167,138717,174],{"class":173},[167,138719,178],{"class":177},[167,138721,185],{"class":173},[167,138723,138724,138726,138728],{"class":169,"line":188},[167,138725,608],{"class":191},[167,138727,3991],{"class":191},[167,138729,1905],{"class":173},[167,138731,138733,138735,138737,138739],{"class":138732,"line":205},[169,213],[167,138734,10694],{"class":181},[167,138736,229],{"class":173},[167,138738,9352],{"class":254},[167,138740,258],{"class":173},[167,138742,138743,138745,138747,138749,138751],{"class":169,"line":160},[167,138744,8894],{"class":173},[167,138746,9352],{"class":181},[167,138748,229],{"class":173},[167,138750,20860],{"class":201},[167,138752,14172],{"class":173},[167,138754,138755,138757],{"class":169,"line":238},[167,138756,1937],{"class":191},[167,138758,5593],{"class":219},[167,138760,138761],{"class":169,"line":243},[167,138762,3492],{"class":173},[167,138764,138765],{"class":169,"line":261},[167,138766,276],{"class":173},[167,138768,138769,138771,138773],{"class":169,"line":273},[167,138770,282],{"class":173},[167,138772,178],{"class":177},[167,138774,185],{"class":173},[11,138776,20951],{"id":20950},[15,138778,20954,138779,1679],{},[3933,138780,20957],{},[15,138782,20960],{},[22,138784,138785],{"id":20963},[87,138786,8360],{},[15,138788,20968,138789,1679],{},[3933,138790,20971],{},[154,138792,138794],{"className":156,"code":20974,"filename":3260,"highlights":138793,"language":162,"meta":163,"style":163},[160],[87,138795,138796,138806,138816,138820,138835,138847,138851],{"__ignoreMap":163},[167,138797,138798,138800,138802,138804],{"class":169,"line":170},[167,138799,174],{"class":173},[167,138801,178],{"class":177},[167,138803,182],{"class":181},[167,138805,185],{"class":173},[167,138807,138808,138810,138812,138814],{"class":169,"line":188},[167,138809,192],{"class":191},[167,138811,20994],{"class":173},[167,138813,198],{"class":191},[167,138815,202],{"class":201},[167,138817,138818],{"class":169,"line":205},[167,138819,209],{"emptyLinePlaceholder":208},[167,138821,138823,138825,138827,138829,138831,138833],{"class":138822,"line":160},[169,213],[167,138824,8360],{"class":181},[167,138826,1918],{"class":173},[167,138828,4195],{"class":254},[167,138830,693],{"class":173},[167,138832,639],{"class":191},[167,138834,1905],{"class":173},[167,138836,138837,138839,138841,138843,138845],{"class":169,"line":238},[167,138838,2608],{"class":173},[167,138840,21024],{"class":181},[167,138842,229],{"class":173},[167,138844,21029],{"class":201},[167,138846,21032],{"class":173},[167,138848,138849],{"class":169,"line":243},[167,138850,403],{"class":173},[167,138852,138853,138855,138857],{"class":169,"line":261},[167,138854,282],{"class":173},[167,138856,178],{"class":177},[167,138858,185],{"class":173},[154,138860,138862],{"className":156,"code":21047,"filename":3973,"highlights":138861,"language":162,"meta":163,"style":163},[205],[87,138863,138864,138872,138880,138891,138903,138907,138911],{"__ignoreMap":163},[167,138865,138866,138868,138870],{"class":169,"line":170},[167,138867,174],{"class":173},[167,138869,178],{"class":177},[167,138871,185],{"class":173},[167,138873,138874,138876,138878],{"class":169,"line":188},[167,138875,608],{"class":191},[167,138877,3991],{"class":191},[167,138879,1905],{"class":173},[167,138881,138883,138885,138887,138889],{"class":138882,"line":205},[169,213],[167,138884,8883],{"class":181},[167,138886,229],{"class":173},[167,138888,4195],{"class":254},[167,138890,258],{"class":173},[167,138892,138893,138895,138897,138899,138901],{"class":169,"line":160},[167,138894,8894],{"class":173},[167,138896,21024],{"class":181},[167,138898,229],{"class":173},[167,138900,21029],{"class":201},[167,138902,21032],{"class":173},[167,138904,138905],{"class":169,"line":238},[167,138906,3492],{"class":173},[167,138908,138909],{"class":169,"line":243},[167,138910,276],{"class":173},[167,138912,138913,138915,138917],{"class":169,"line":261},[167,138914,282],{"class":173},[167,138916,178],{"class":177},[167,138918,185],{"class":173},[22,138920,138921],{"id":21108},[87,138922,8420],{},[15,138924,21113,138925,1679],{},[3933,138926,21116],{},[154,138928,138930],{"className":156,"code":21119,"filename":3260,"highlights":138929,"language":162,"meta":163,"style":163},[160],[87,138931,138932,138942,138952,138956,138971,138983,138987],{"__ignoreMap":163},[167,138933,138934,138936,138938,138940],{"class":169,"line":170},[167,138935,174],{"class":173},[167,138937,178],{"class":177},[167,138939,182],{"class":181},[167,138941,185],{"class":173},[167,138943,138944,138946,138948,138950],{"class":169,"line":188},[167,138945,192],{"class":191},[167,138947,21139],{"class":173},[167,138949,198],{"class":191},[167,138951,202],{"class":201},[167,138953,138954],{"class":169,"line":205},[167,138955,209],{"emptyLinePlaceholder":208},[167,138957,138959,138961,138963,138965,138967,138969],{"class":138958,"line":160},[169,213],[167,138960,8420],{"class":181},[167,138962,1918],{"class":173},[167,138964,4195],{"class":254},[167,138966,693],{"class":173},[167,138968,639],{"class":191},[167,138970,1905],{"class":173},[167,138972,138973,138975,138977,138979,138981],{"class":169,"line":238},[167,138974,2608],{"class":173},[167,138976,21024],{"class":181},[167,138978,229],{"class":173},[167,138980,21173],{"class":201},[167,138982,21032],{"class":173},[167,138984,138985],{"class":169,"line":243},[167,138986,403],{"class":173},[167,138988,138989,138991,138993],{"class":169,"line":261},[167,138990,282],{"class":173},[167,138992,178],{"class":177},[167,138994,185],{"class":173},[154,138996,138998],{"className":156,"code":21190,"filename":3973,"highlights":138997,"language":162,"meta":163,"style":163},[205],[87,138999,139000,139008,139016,139027,139039,139043,139047],{"__ignoreMap":163},[167,139001,139002,139004,139006],{"class":169,"line":170},[167,139003,174],{"class":173},[167,139005,178],{"class":177},[167,139007,185],{"class":173},[167,139009,139010,139012,139014],{"class":169,"line":188},[167,139011,608],{"class":191},[167,139013,3991],{"class":191},[167,139015,1905],{"class":173},[167,139017,139019,139021,139023,139025],{"class":139018,"line":205},[169,213],[167,139020,8939],{"class":181},[167,139022,229],{"class":173},[167,139024,4195],{"class":254},[167,139026,258],{"class":173},[167,139028,139029,139031,139033,139035,139037],{"class":169,"line":160},[167,139030,8894],{"class":173},[167,139032,21024],{"class":181},[167,139034,229],{"class":173},[167,139036,21173],{"class":201},[167,139038,21032],{"class":173},[167,139040,139041],{"class":169,"line":238},[167,139042,3492],{"class":173},[167,139044,139045],{"class":169,"line":243},[167,139046,276],{"class":173},[167,139048,139049,139051,139053],{"class":169,"line":261},[167,139050,282],{"class":173},[167,139052,178],{"class":177},[167,139054,185],{"class":173},[11,139056,21252],{"id":21251},[22,139058,139059,11227,139061],{"id":21255},[87,139060,6708],{},[87,139062,6218],{},[15,139064,21262,139065,1679],{},[3933,139066,21265],{},[15,139068,21268],{},[154,139070,139072],{"className":156,"code":21271,"filename":3260,"highlights":139071,"language":162,"meta":163,"style":163},[160],[87,139073,139074,139084,139094,139098,139113,139125,139129],{"__ignoreMap":163},[167,139075,139076,139078,139080,139082],{"class":169,"line":170},[167,139077,174],{"class":173},[167,139079,178],{"class":177},[167,139081,182],{"class":181},[167,139083,185],{"class":173},[167,139085,139086,139088,139090,139092],{"class":169,"line":188},[167,139087,192],{"class":191},[167,139089,21291],{"class":173},[167,139091,198],{"class":191},[167,139093,202],{"class":201},[167,139095,139096],{"class":169,"line":205},[167,139097,209],{"emptyLinePlaceholder":208},[167,139099,139101,139103,139105,139107,139109,139111],{"class":139100,"line":160},[169,213],[167,139102,6708],{"class":181},[167,139104,229],{"class":173},[167,139106,2523],{"class":191},[167,139108,1469],{"class":173},[167,139110,639],{"class":191},[167,139112,1905],{"class":173},[167,139114,139115,139117,139119,139121,139123],{"class":169,"line":238},[167,139116,2575],{"class":191},[167,139118,6621],{"class":181},[167,139120,229],{"class":173},[167,139122,21325],{"class":201},[167,139124,235],{"class":173},[167,139126,139127],{"class":169,"line":243},[167,139128,403],{"class":173},[167,139130,139131,139133,139135],{"class":169,"line":261},[167,139132,282],{"class":173},[167,139134,178],{"class":177},[167,139136,185],{"class":173},[154,139138,139140],{"className":156,"code":21342,"filename":3973,"highlights":139139,"language":162,"meta":163,"style":163},[205],[87,139141,139142,139150,139158,139167,139179,139183,139187],{"__ignoreMap":163},[167,139143,139144,139146,139148],{"class":169,"line":170},[167,139145,174],{"class":173},[167,139147,178],{"class":177},[167,139149,185],{"class":173},[167,139151,139152,139154,139156],{"class":169,"line":188},[167,139153,608],{"class":191},[167,139155,3991],{"class":191},[167,139157,1905],{"class":173},[167,139159,139161,139163,139165],{"class":139160,"line":205},[169,213],[167,139162,7331],{"class":191},[167,139164,7334],{"class":181},[167,139166,763],{"class":173},[167,139168,139169,139171,139173,139175,139177],{"class":169,"line":160},[167,139170,6730],{"class":191},[167,139172,6621],{"class":181},[167,139174,229],{"class":173},[167,139176,21325],{"class":201},[167,139178,235],{"class":173},[167,139180,139181],{"class":169,"line":238},[167,139182,3492],{"class":173},[167,139184,139185],{"class":169,"line":243},[167,139186,276],{"class":173},[167,139188,139189,139191,139193],{"class":169,"line":261},[167,139190,282],{"class":173},[167,139192,178],{"class":177},[167,139194,185],{"class":173},[11,139196,21402],{"id":21401},[22,139198,21406],{"id":21405},[33,139200,139201,139207,139213,139219],{},[36,139202,21411,139203,2526,139205,6219],{},[3933,139204,21414],{},[87,139206,6796],{},[36,139208,21419,139209,2526,139211,6219],{},[3933,139210,21422],{},[87,139212,14303],{},[36,139214,21427,139215,2526,139217,6219],{},[3933,139216,978],{},[87,139218,6708],{},[36,139220,21434,139221],{},[3933,139222,21437],{},[22,139224,7929],{"id":21440},[33,139226,139227,139233,139239],{},[36,139228,7915,139229,21449],{},[3933,139230,139231],{},[87,139232,1661],{},[36,139234,7915,139235,21456],{},[3933,139236,139237],{},[87,139238,1665],{},[36,139240,21459,139241],{},[3933,139242,21462],{},[15,139244,21465,139245,21469],{},[3933,139246,21468],{},[11,139248,7678],{"id":7677},[15,139250,21474,139251,583],{},[3933,139252,21477],{},[56,139254,139255,139263],{},[59,139256,139257],{},[62,139258,139259,139261],{},[65,139260,21486],{},[65,139262,21489],{},[75,139264,139265,139275,139285,139295,139305,139315],{},[62,139266,139267,139269],{},[80,139268,19036],{},[80,139270,139271,1025,139273],{},[87,139272,16667],{},[87,139274,17865],{},[62,139276,139277,139279],{},[80,139278,19041],{},[80,139280,139281,1025,139283],{},[87,139282,6796],{},[87,139284,6393],{},[62,139286,139287,139289],{},[80,139288,19046],{},[80,139290,139291,1025,139293],{},[87,139292,15345],{},[87,139294,15037],{},[62,139296,139297,139299],{},[80,139298,19051],{},[80,139300,139301,1025,139303],{},[87,139302,14303],{},[87,139304,11276],{},[62,139306,139307,139309],{},[80,139308,21536],{},[80,139310,139311,1025,139313],{},[87,139312,12186],{},[87,139314,12243],{},[62,139316,139317,139319],{},[80,139318,978],{},[80,139320,139321],{},[87,139322,6708],{},[5367,139324,139325],{},[15,139326,21555,139327],{},[3933,139328,21558],{},[924,139330,21561],{},{"title":163,"searchDepth":188,"depth":188,"links":139332},[139333,139334,139335,139336,139337,139338,139339,139340,139341,139342,139343,139344,139345,139346,139347,139348,139349,139350,139351],{"id":6230,"depth":188,"text":6231},{"id":19082,"depth":188,"text":19083},{"id":19150,"depth":188,"text":17862},{"id":17865,"depth":188,"text":17865},{"id":16667,"depth":188,"text":9238},{"id":19492,"depth":188,"text":21570},{"id":19632,"depth":188,"text":21572},{"id":19805,"depth":188,"text":21574},{"id":19945,"depth":188,"text":21576},{"id":20105,"depth":188,"text":21578},{"id":20242,"depth":188,"text":21580},{"id":20516,"depth":188,"text":21582},{"id":20654,"depth":188,"text":21584},{"id":20793,"depth":188,"text":21586},{"id":20963,"depth":188,"text":8360},{"id":21108,"depth":188,"text":8420},{"id":21255,"depth":188,"text":21590},{"id":21405,"depth":188,"text":21406},{"id":21440,"depth":188,"text":7929},{"updatedAt":21597,"readingTime":273,"coverCaption":21598,"author":946,"keywords":139353},[3258,21600,3260,3973,21601],[139355],{"headline":19002,"author":139356,"datePublished":21597,"@type":961},{"name":946,"@type":959},{"title":19002,"description":21595},[139359,139360,139361,139362],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":139364,"title":139365,"body":139366,"cover":13438,"coverAlt":141554,"date":13440,"description":141555,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":141556,"navigation":208,"path":141560,"schemaOrg":141561,"seo":141564,"series":7718,"seriesDescription":129940,"seriesOrder":243,"seriesTitle":129941,"slug":942,"stem":141565,"tags":141566,"__hash__":141571},"blog\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.en.md","Vue Lifecycle: cached components with \u003CKeepAlive> (activated, deactivated)",{"type":8,"value":139367,"toc":141534},[139368,139378,139384,139387,139394,139396,139401,139404,139415,139418,139429,139432,139446,139449,139461,139464,139486,139488,139495,139497,139511,139514,139526,139528,139534,139537,139551,139554,139576,139578,139657,139660,139662,139668,139674,139679,139683,139689,139698,139705,139711,139717,139721,139726,139729,139731,139735,139744,139748,139754,139758,139767,140676,141487,141507,141509,141532],[11,139369,139371,139372,2526,139374,1025,139376,6219],{"id":139370},"vue-lifecycle-cached-components-with-keepalive-activated-deactivated","Vue Lifecycle: cached components with ",[87,139373,11158],{},[87,139375,11161],{},[87,139377,11164],{},[15,139379,139380,139381,139383],{},"Not every component truly disappears when it stops being visible. In Vue, a component wrapped in ",[87,139382,11158],{}," can leave the active DOM and still remain alive in memory. That detail completely changes how you should think about its lifecycle.",[15,139385,139386],{},"If you treat a cached component as if it always mounts from scratch, it becomes easy to reload data unnecessarily, leave timers or polling running while the view is no longer visible, or show stale information when the user returns to a tab.",[15,139388,57723,139389,57920,139391,139393],{},[87,139390,11161],{},[87,139392,11164],{}," hooks exist for exactly that scenario: components that move in and out of view without being destroyed on every switch.",[22,139395,57681],{"id":57680},[15,139397,139398,139400],{},[87,139399,11158],{}," caches dynamic component instances so their state survives between switches. Instead of unmounting the component when it stops being shown, Vue moves it into a deactivated state.",[15,139402,139403],{},"That means the lifecycle is no longer just:",[33,139405,139406,139409,139412],{},[36,139407,139408],{},"Mount",[36,139410,139411],{},"Update",[36,139413,139414],{},"Unmount",[15,139416,139417],{},"There is now another important intermediate state:",[33,139419,139420,139423,139426],{},[36,139421,139422],{},"Activate",[36,139424,139425],{},"Deactivate",[36,139427,139428],{},"Activate again",[15,139430,139431],{},"The relevant hooks are:",[33,139433,139434,139440],{},[36,139435,139436,11227,139438],{},[87,139437,11226],{},[87,139439,11161],{},[36,139441,139442,11227,139444],{},[87,139443,11234],{},[87,139445,11164],{},[15,139447,139448],{},"There are two key details worth keeping in mind:",[33,139450,139451,139456],{},[36,139452,139453,139455],{},[87,139454,11161],{}," also runs on the initial mount of the cached component.",[36,139457,139458,139460],{},[87,139459,11164],{}," runs when the component leaves the active DOM for the cache and also when it is finally unmounted.",[15,139462,139463],{},"In practical terms:",[33,139465,139466,139471,139476,139481],{},[36,139467,139468,139470],{},[87,139469,6393],{}," is for one-time initialization.",[36,139472,139473,139475],{},[87,139474,11161],{}," is for every moment the view becomes active again.",[36,139477,139478,139480],{},[87,139479,11164],{}," is for pausing, saving, or cleaning up work while the instance stays in the background.",[36,139482,139483,139485],{},[87,139484,11276],{}," only matters when the instance truly stops existing.",[22,139487,57775],{"id":57774},[15,139489,139490,57920,139492,139494],{},[87,139491,11161],{},[87,139493,11164],{}," fit best when the component needs to behave differently depending on whether it is visible or only cached.",[15,139496,80740],{},[33,139498,139499,139502,139505,139508],{},[36,139500,139501],{},"Revalidating data when returning to a tab without losing local form state or filters.",[36,139503,139504],{},"Pausing polling, listeners, or observers when the view stops being active.",[36,139506,139507],{},"Restoring scroll, focus, or sync with external libraries when the component reappears.",[36,139509,139510],{},"Keeping navigation smooth between tabs, dashboards, or dynamic views without reinstantiating everything from scratch.",[15,139512,139513],{},"The practical rule is simple:",[33,139515,139516,139521],{},[36,139517,139518,139519,1679],{},"If you need to react to the component coming back, think about ",[87,139520,11161],{},[36,139522,139523,139524,1679],{},"If you need to stop work while the instance stays cached, think about ",[87,139525,11164],{},[22,139527,57799],{"id":57798},[15,139529,139530,139531,139533],{},"Not every component needs ",[87,139532,11158],{}," or these hooks.",[15,139535,139536],{},"It is usually better to avoid them when:",[33,139538,139539,139542,139545,139548],{},[36,139540,139541],{},"The component should start clean on every visit and should not preserve state.",[36,139543,139544],{},"The logic fits better in global state or derived data, without caching the whole view.",[36,139546,139547],{},"The real problem is a confusing navigation flow, not state loss.",[36,139549,139550],{},"You want to force a full refresh on every visit; in that case, the cache works against you.",[15,139552,139553],{},"It is also worth keeping logic in the right place:",[33,139555,139556,139562,139570],{},[36,139557,139558,139559,139561],{},"If you depend on one specific piece of data, a ",[87,139560,5475],{}," usually expresses the intent more clearly.",[36,139563,139564,139565,63104,139567,139569],{},"If you only need one-time initialization, ",[87,139566,6393],{},[87,139568,9238],{}," is usually enough.",[36,139571,139572,139573,139575],{},"If the component is not inside ",[87,139574,11158],{},", these hooks will not run.",[22,139577,91741],{"id":91740},[56,139579,139580,139595],{},[59,139581,139582],{},[62,139583,139584,139586,139589,139592],{},[65,139585,11380],{},[65,139587,139588],{},"When it runs",[65,139590,139591],{},"Best fit",[65,139593,139594],{},"Common mistake",[75,139596,139597,139612,139627,139642],{},[62,139598,139599,139603,139606,139609],{},[80,139600,139601],{},[87,139602,6393],{},[80,139604,139605],{},"When the instance mounts for the first time",[80,139607,139608],{},"One-time initialization",[80,139610,139611],{},"Putting logic here that should run every time the view returns",[62,139613,139614,139618,139621,139624],{},[80,139615,139616],{},[87,139617,11161],{},[80,139619,139620],{},"On initial mount and on every reactivation from cache",[80,139622,139623],{},"Refreshing, re-syncing, or resuming visible work",[80,139625,139626],{},"Assuming the component comes back from a clean state",[62,139628,139629,139633,139636,139639],{},[80,139630,139631],{},[87,139632,11164],{},[80,139634,139635],{},"When the component leaves the active DOM for cache and also on unmount",[80,139637,139638],{},"Pausing polling, timers, observers, or persisting temporary state",[80,139640,139641],{},"Treating it as if it meant full destruction",[62,139643,139644,139648,139651,139654],{},[80,139645,139646],{},[87,139647,11276],{},[80,139649,139650],{},"When the instance is actually destroyed",[80,139652,139653],{},"Final cleanup",[80,139655,139656],{},"Expecting it to happen on every switch between cached views",[15,139658,139659],{},"The decisive difference is this: a cached component does not die when it leaves the screen. It simply goes idle.",[22,139661,57820],{"id":57819},[3087,139663,139665,139666],{"id":139664},"_1-loading-data-only-in-mounted","1. Loading data only in ",[87,139667,6393],{},[15,139669,139670,139671,139673],{},"That works the first time, but it often fails once the user leaves and comes back. Because the component stays cached, ",[87,139672,6393],{}," does not run again and you can end up showing stale data.",[15,139675,139676,139677,1679],{},"The usual fix is to move light revalidation into ",[87,139678,11161],{},[3087,139680,139682],{"id":139681},"_2-leaving-polling-or-timers-running-while-the-view-is-hidden","2. Leaving polling or timers running while the view is hidden",[15,139684,139685,139686,139688],{},"A deactivated component still exists in memory. If you do not stop ",[87,139687,11483],{},", sockets, or listeners, that work keeps running even though the screen is no longer visible.",[15,139690,139691,139692,139694,139695,139697],{},"The solution is to pause in ",[87,139693,11164],{}," and resume in ",[87,139696,11161],{}," when appropriate.",[3087,139699,139701,139702,139704],{"id":139700},"_3-expecting-unmounted-when-switching-between-cached-tabs","3. Expecting ",[87,139703,11276],{}," when switching between cached tabs",[15,139706,139707,139708,139710],{},"When you switch between components inside ",[87,139709,11158],{},", there is often no immediate unmount. What happens instead is deactivation.",[15,139712,139713,139714,139716],{},"If all your cleanup depends on ",[87,139715,11276],{},", it will happen late or not when you expected it to.",[3087,139718,139720],{"id":139719},"_4-confusing-state-preservation-with-data-freshness","4. Confusing state preservation with data freshness",[15,139722,139723,139725],{},[87,139724,11158],{}," preserves local state, but it does not guarantee that your data is still current. You can return to a form with all its values intact and, at the same time, to a list backed by outdated data.",[15,139727,139728],{},"Caching the instance does not replace a refresh strategy.",[22,139730,57926],{"id":57925},[3087,139732,139734],{"id":139733},"returning-to-a-tab-without-losing-filters","Returning to a tab without losing filters",[15,139736,139737,139738,139740,139741,139743],{},"Imagine a reporting view with filters, sorting, and internal scroll. Without ",[87,139739,11158],{},", each tab change can destroy the instance and force the user to start over. With caching, the experience stays intact. With ",[87,139742,11161],{},", you can also refresh only the summary or the last sync timestamp.",[3087,139745,139747],{"id":139746},"pausing-background-work","Pausing background work",[15,139749,139750,139751,139753],{},"If a view fetches metrics every 30 seconds, it should not keep doing that after the user moves to another section while the instance remains cached. ",[87,139752,11164],{}," is the natural place to stop that work.",[3087,139755,139757],{"id":139756},"resuming-visual-synchronization","Resuming visual synchronization",[15,139759,139760,139761,139763,139764,139766],{},"Some views need to recalculate sizes, charts, or panels when they reappear. Because the component is not recreated, ",[87,139762,6393],{}," is already behind you. In that situation, ",[87,139765,11161],{}," is the right point to resync the UI.",[154,139768,139770],{"className":156,"code":139769,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, onActivated, onDeactivated, onMounted, ref } from 'vue'\n\ntype Task = {\n  id: number\n  title: string\n  done: boolean\n}\n\nconst tasks = ref\u003CTask[]>([])\nconst filter = ref\u003C'all' | 'pending' | 'done'>('all')\nconst status = ref('Waiting for load...')\nconst lastSync = ref\u003Cstring | null>(null)\nconst poller = ref\u003CReturnType\u003Ctypeof setInterval> | null>(null)\nconst initialized = ref(false)\n\nconst visibleTasks = computed(() => {\n  if (filter.value === 'pending') {\n    return tasks.value.filter(task => !task.done)\n  }\n\n  if (filter.value === 'done') {\n    return tasks.value.filter(task => task.done)\n  }\n\n  return tasks.value\n})\n\nasync function fetchTasks() {\n  status.value = 'Syncing...'\n\n  const response = await fetch('\u002Fapi\u002Ftasks')\n  const data = (await response.json()) as { tasks: Task[] }\n\n  tasks.value = data.tasks\n  lastSync.value = new Date().toLocaleTimeString('en-US')\n  status.value = 'Data updated'\n}\n\nfunction startPolling() {\n  if (poller.value !== null) return\n\n  poller.value = setInterval(() => {\n    void fetchTasks()\n  }, 30000)\n}\n\nfunction stopPolling() {\n  if (poller.value === null) return\n\n  clearInterval(poller.value)\n  poller.value = null\n}\n\nonMounted(() => {\n  initialized.value = true\n})\n\nonActivated(async () => {\n  status.value = initialized.value ? 'View reactivated' : 'Loading view...'\n  await fetchTasks()\n  startPolling()\n})\n\nonDeactivated(() => {\n  status.value = 'View paused'\n  stopPolling()\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-report\">\n    \u003Cheader>\n      \u003Ch2>Task report\u003C\u002Fh2>\n      \u003Cp>{{ status }}\u003C\u002Fp>\n      \u003Cp v-if=\"lastSync\">Last sync: {{ lastSync }}\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cnav class=\"filters\">\n      \u003Cbutton @click=\"filter = 'all'\">All\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'pending'\">Pending\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'done'\">Completed\u003C\u002Fbutton>\n    \u003C\u002Fnav>\n\n    \u003Cul>\n      \u003Cli\n        v-for=\"task in visibleTasks\"\n        :key=\"task.id\"\n      >\n        {{ task.title }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,139771,139772,139788,139798,139802,139812,139820,139828,139836,139840,139844,139860,139888,139905,139929,139959,139975,139979,139995,140007,140025,140029,140033,140045,140061,140065,140069,140075,140079,140083,140093,140102,140106,140124,140154,140158,140166,140187,140196,140200,140204,140212,140226,140230,140244,140252,140260,140264,140268,140276,140290,140294,140300,140308,140312,140316,140326,140334,140338,140342,140356,140374,140382,140388,140392,140396,140406,140415,140421,140425,140433,140437,140445,140459,140467,140480,140492,140511,140519,140523,140537,140556,140575,140594,140602,140606,140614,140620,140628,140636,140640,140644,140652,140660,140668],{"__ignoreMap":163},[167,139773,139774,139776,139778,139780,139782,139784,139786],{"class":169,"line":170},[167,139775,174],{"class":173},[167,139777,178],{"class":177},[167,139779,182],{"class":181},[167,139781,1050],{"class":181},[167,139783,267],{"class":173},[167,139785,1055],{"class":201},[167,139787,185],{"class":173},[167,139789,139790,139792,139794,139796],{"class":169,"line":188},[167,139791,192],{"class":191},[167,139793,11590],{"class":173},[167,139795,198],{"class":191},[167,139797,202],{"class":201},[167,139799,139800],{"class":169,"line":205},[167,139801,209],{"emptyLinePlaceholder":208},[167,139803,139804,139806,139808,139810],{"class":169,"line":160},[167,139805,569],{"class":191},[167,139807,11605],{"class":181},[167,139809,223],{"class":191},[167,139811,1905],{"class":173},[167,139813,139814,139816,139818],{"class":169,"line":238},[167,139815,6505],{"class":254},[167,139817,583],{"class":191},[167,139819,6510],{"class":219},[167,139821,139822,139824,139826],{"class":169,"line":243},[167,139823,11622],{"class":254},[167,139825,583],{"class":191},[167,139827,6520],{"class":219},[167,139829,139830,139832,139834],{"class":169,"line":261},[167,139831,11631],{"class":254},[167,139833,583],{"class":191},[167,139835,11636],{"class":219},[167,139837,139838],{"class":169,"line":273},[167,139839,276],{"class":173},[167,139841,139842],{"class":169,"line":279},[167,139843,209],{"emptyLinePlaceholder":208},[167,139845,139846,139848,139850,139852,139854,139856,139858],{"class":169,"line":289},[167,139847,216],{"class":191},[167,139849,3368],{"class":219},[167,139851,223],{"class":191},[167,139853,226],{"class":181},[167,139855,174],{"class":173},[167,139857,11659],{"class":181},[167,139859,11662],{"class":173},[167,139861,139862,139864,139866,139868,139870,139872,139874,139876,139878,139880,139882,139884,139886],{"class":169,"line":294},[167,139863,216],{"class":191},[167,139865,11669],{"class":219},[167,139867,223],{"class":191},[167,139869,226],{"class":181},[167,139871,174],{"class":173},[167,139873,232],{"class":201},[167,139875,659],{"class":191},[167,139877,11682],{"class":201},[167,139879,659],{"class":191},[167,139881,11687],{"class":201},[167,139883,6570],{"class":173},[167,139885,232],{"class":201},[167,139887,235],{"class":173},[167,139889,139890,139892,139894,139896,139898,139900,139903],{"class":169,"line":304},[167,139891,216],{"class":191},[167,139893,11700],{"class":219},[167,139895,223],{"class":191},[167,139897,226],{"class":181},[167,139899,229],{"class":173},[167,139901,139902],{"class":201},"'Waiting for load...'",[167,139904,235],{"class":173},[167,139906,139907,139909,139911,139913,139915,139917,139919,139921,139923,139925,139927],{"class":169,"line":313},[167,139908,216],{"class":191},[167,139910,11718],{"class":219},[167,139912,223],{"class":191},[167,139914,226],{"class":181},[167,139916,174],{"class":173},[167,139918,1111],{"class":219},[167,139920,659],{"class":191},[167,139922,6567],{"class":219},[167,139924,6570],{"class":173},[167,139926,6573],{"class":219},[167,139928,235],{"class":173},[167,139930,139931,139933,139935,139937,139939,139941,139943,139945,139947,139949,139951,139953,139955,139957],{"class":169,"line":161},[167,139932,216],{"class":191},[167,139934,11743],{"class":219},[167,139936,223],{"class":191},[167,139938,226],{"class":181},[167,139940,174],{"class":173},[167,139942,11752],{"class":181},[167,139944,174],{"class":173},[167,139946,11757],{"class":191},[167,139948,11760],{"class":173},[167,139950,11763],{"class":191},[167,139952,6567],{"class":219},[167,139954,6570],{"class":173},[167,139956,6573],{"class":219},[167,139958,235],{"class":173},[167,139960,139961,139963,139965,139967,139969,139971,139973],{"class":169,"line":335},[167,139962,216],{"class":191},[167,139964,11778],{"class":219},[167,139966,223],{"class":191},[167,139968,226],{"class":181},[167,139970,229],{"class":173},[167,139972,3392],{"class":219},[167,139974,235],{"class":173},[167,139976,139977],{"class":169,"line":341},[167,139978,209],{"emptyLinePlaceholder":208},[167,139980,139981,139983,139985,139987,139989,139991,139993],{"class":169,"line":489},[167,139982,216],{"class":191},[167,139984,8233],{"class":219},[167,139986,223],{"class":191},[167,139988,1898],{"class":181},[167,139990,1493],{"class":173},[167,139992,639],{"class":191},[167,139994,1905],{"class":173},[167,139996,139997,139999,140001,140003,140005],{"class":169,"line":495},[167,139998,2544],{"class":191},[167,140000,11815],{"class":173},[167,140002,2550],{"class":191},[167,140004,11682],{"class":201},[167,140006,258],{"class":173},[167,140008,140009,140011,140013,140015,140017,140019,140021,140023],{"class":169,"line":501},[167,140010,1937],{"class":191},[167,140012,3451],{"class":173},[167,140014,8252],{"class":181},[167,140016,229],{"class":173},[167,140018,5075],{"class":254},[167,140020,8259],{"class":191},[167,140022,5625],{"class":191},[167,140024,11840],{"class":173},[167,140026,140027],{"class":169,"line":512},[167,140028,3492],{"class":173},[167,140030,140031],{"class":169,"line":781},[167,140032,209],{"emptyLinePlaceholder":208},[167,140034,140035,140037,140039,140041,140043],{"class":169,"line":786},[167,140036,2544],{"class":191},[167,140038,11815],{"class":173},[167,140040,2550],{"class":191},[167,140042,11687],{"class":201},[167,140044,258],{"class":173},[167,140046,140047,140049,140051,140053,140055,140057,140059],{"class":169,"line":2678},[167,140048,1937],{"class":191},[167,140050,3451],{"class":173},[167,140052,8252],{"class":181},[167,140054,229],{"class":173},[167,140056,5075],{"class":254},[167,140058,8259],{"class":191},[167,140060,11877],{"class":173},[167,140062,140063],{"class":169,"line":2692},[167,140064,3492],{"class":173},[167,140066,140067],{"class":169,"line":3575},[167,140068,209],{"emptyLinePlaceholder":208},[167,140070,140071,140073],{"class":169,"line":5028},[167,140072,1539],{"class":191},[167,140074,11892],{"class":173},[167,140076,140077],{"class":169,"line":5037},[167,140078,403],{"class":173},[167,140080,140081],{"class":169,"line":5046},[167,140082,209],{"emptyLinePlaceholder":208},[167,140084,140085,140087,140089,140091],{"class":169,"line":6756},[167,140086,2523],{"class":191},[167,140088,1432],{"class":191},[167,140090,11909],{"class":181},[167,140092,763],{"class":173},[167,140094,140095,140097,140099],{"class":169,"line":6778},[167,140096,11916],{"class":173},[167,140098,267],{"class":191},[167,140100,140101],{"class":201}," 'Syncing...'\n",[167,140103,140104],{"class":169,"line":6783},[167,140105,209],{"emptyLinePlaceholder":208},[167,140107,140108,140110,140112,140114,140116,140118,140120,140122],{"class":169,"line":6788},[167,140109,1443],{"class":191},[167,140111,6614],{"class":219},[167,140113,223],{"class":191},[167,140115,3009],{"class":191},[167,140117,6621],{"class":181},[167,140119,229],{"class":173},[167,140121,11942],{"class":201},[167,140123,235],{"class":173},[167,140125,140126,140128,140130,140132,140134,140136,140138,140140,140142,140144,140146,140148,140150,140152],{"class":169,"line":6793},[167,140127,1443],{"class":191},[167,140129,11951],{"class":219},[167,140131,223],{"class":191},[167,140133,2526],{"class":173},[167,140135,2927],{"class":191},[167,140137,6683],{"class":173},[167,140139,6686],{"class":181},[167,140141,6689],{"class":173},[167,140143,6692],{"class":191},[167,140145,577],{"class":173},[167,140147,11970],{"class":254},[167,140149,583],{"class":191},[167,140151,11605],{"class":181},[167,140153,11977],{"class":173},[167,140155,140156],{"class":169,"line":6809},[167,140157,209],{"emptyLinePlaceholder":208},[167,140159,140160,140162,140164],{"class":169,"line":6824},[167,140161,11986],{"class":173},[167,140163,267],{"class":191},[167,140165,11991],{"class":173},[167,140167,140168,140170,140172,140174,140176,140178,140180,140182,140185],{"class":169,"line":6829},[167,140169,11996],{"class":173},[167,140171,267],{"class":191},[167,140173,4224],{"class":191},[167,140175,12003],{"class":181},[167,140177,2503],{"class":173},[167,140179,12008],{"class":181},[167,140181,229],{"class":173},[167,140183,140184],{"class":201},"'en-US'",[167,140186,235],{"class":173},[167,140188,140189,140191,140193],{"class":169,"line":6836},[167,140190,11916],{"class":173},[167,140192,267],{"class":191},[167,140194,140195],{"class":201}," 'Data updated'\n",[167,140197,140198],{"class":169,"line":6845},[167,140199,276],{"class":173},[167,140201,140202],{"class":169,"line":6854},[167,140203,209],{"emptyLinePlaceholder":208},[167,140205,140206,140208,140210],{"class":169,"line":6861},[167,140207,246],{"class":191},[167,140209,12039],{"class":181},[167,140211,763],{"class":173},[167,140213,140214,140216,140218,140220,140222,140224],{"class":169,"line":6879},[167,140215,2544],{"class":191},[167,140217,12048],{"class":173},[167,140219,701],{"class":191},[167,140221,6567],{"class":219},[167,140223,693],{"class":173},[167,140225,2556],{"class":191},[167,140227,140228],{"class":169,"line":6884},[167,140229,209],{"emptyLinePlaceholder":208},[167,140231,140232,140234,140236,140238,140240,140242],{"class":169,"line":6889},[167,140233,12065],{"class":173},[167,140235,267],{"class":191},[167,140237,12070],{"class":181},[167,140239,1493],{"class":173},[167,140241,639],{"class":191},[167,140243,1905],{"class":173},[167,140245,140246,140248,140250],{"class":169,"line":6898},[167,140247,12081],{"class":191},[167,140249,11909],{"class":181},[167,140251,2917],{"class":173},[167,140253,140254,140256,140258],{"class":169,"line":6903},[167,140255,1957],{"class":173},[167,140257,12092],{"class":219},[167,140259,235],{"class":173},[167,140261,140262],{"class":169,"line":6912},[167,140263,276],{"class":173},[167,140265,140266],{"class":169,"line":6928},[167,140267,209],{"emptyLinePlaceholder":208},[167,140269,140270,140272,140274],{"class":169,"line":6949},[167,140271,246],{"class":191},[167,140273,12109],{"class":181},[167,140275,763],{"class":173},[167,140277,140278,140280,140282,140284,140286,140288],{"class":169,"line":6954},[167,140279,2544],{"class":191},[167,140281,12048],{"class":173},[167,140283,2550],{"class":191},[167,140285,6567],{"class":219},[167,140287,693],{"class":173},[167,140289,2556],{"class":191},[167,140291,140292],{"class":169,"line":6975},[167,140293,209],{"emptyLinePlaceholder":208},[167,140295,140296,140298],{"class":169,"line":6989},[167,140297,12134],{"class":181},[167,140299,12137],{"class":173},[167,140301,140302,140304,140306],{"class":169,"line":7003},[167,140303,12065],{"class":173},[167,140305,267],{"class":191},[167,140307,12146],{"class":219},[167,140309,140310],{"class":169,"line":7017},[167,140311,276],{"class":173},[167,140313,140314],{"class":169,"line":7026},[167,140315,209],{"emptyLinePlaceholder":208},[167,140317,140318,140320,140322,140324],{"class":169,"line":7031},[167,140319,6796],{"class":181},[167,140321,1493],{"class":173},[167,140323,639],{"class":191},[167,140325,1905],{"class":173},[167,140327,140328,140330,140332],{"class":169,"line":7048},[167,140329,12169],{"class":173},[167,140331,267],{"class":191},[167,140333,3487],{"class":219},[167,140335,140336],{"class":169,"line":7057},[167,140337,403],{"class":173},[167,140339,140340],{"class":169,"line":7555},[167,140341,209],{"emptyLinePlaceholder":208},[167,140343,140344,140346,140348,140350,140352,140354],{"class":169,"line":7560},[167,140345,12186],{"class":181},[167,140347,229],{"class":173},[167,140349,2523],{"class":191},[167,140351,1469],{"class":173},[167,140353,639],{"class":191},[167,140355,1905],{"class":173},[167,140357,140358,140360,140362,140364,140366,140369,140371],{"class":169,"line":7579},[167,140359,11916],{"class":173},[167,140361,267],{"class":191},[167,140363,12205],{"class":173},[167,140365,8316],{"class":191},[167,140367,140368],{"class":201}," 'View reactivated'",[167,140370,5312],{"class":191},[167,140372,140373],{"class":201}," 'Loading view...'\n",[167,140375,140376,140378,140380],{"class":169,"line":7592},[167,140377,2575],{"class":191},[167,140379,11909],{"class":181},[167,140381,2917],{"class":173},[167,140383,140384,140386],{"class":169,"line":7605},[167,140385,12228],{"class":181},[167,140387,2917],{"class":173},[167,140389,140390],{"class":169,"line":7618},[167,140391,403],{"class":173},[167,140393,140394],{"class":169,"line":7627},[167,140395,209],{"emptyLinePlaceholder":208},[167,140397,140398,140400,140402,140404],{"class":169,"line":7632},[167,140399,12243],{"class":181},[167,140401,1493],{"class":173},[167,140403,639],{"class":191},[167,140405,1905],{"class":173},[167,140407,140408,140410,140412],{"class":169,"line":7647},[167,140409,11916],{"class":173},[167,140411,267],{"class":191},[167,140413,140414],{"class":201}," 'View paused'\n",[167,140416,140417,140419],{"class":169,"line":7656},[167,140418,12263],{"class":181},[167,140420,2917],{"class":173},[167,140422,140423],{"class":169,"line":10073},[167,140424,403],{"class":173},[167,140426,140427,140429,140431],{"class":169,"line":10084},[167,140428,282],{"class":173},[167,140430,178],{"class":177},[167,140432,185],{"class":173},[167,140434,140435],{"class":169,"line":10089},[167,140436,209],{"emptyLinePlaceholder":208},[167,140438,140439,140441,140443],{"class":169,"line":10098},[167,140440,174],{"class":173},[167,140442,299],{"class":177},[167,140444,185],{"class":173},[167,140446,140447,140449,140451,140453,140455,140457],{"class":169,"line":10103},[167,140448,307],{"class":173},[167,140450,10117],{"class":177},[167,140452,1245],{"class":181},[167,140454,267],{"class":173},[167,140456,12302],{"class":201},[167,140458,185],{"class":173},[167,140460,140461,140463,140465],{"class":169,"line":10112},[167,140462,1257],{"class":173},[167,140464,1260],{"class":177},[167,140466,185],{"class":173},[167,140468,140469,140471,140473,140476,140478],{"class":169,"line":10129},[167,140470,1268],{"class":173},[167,140472,22],{"class":177},[167,140474,140475],{"class":173},">Task report\u003C\u002F",[167,140477,22],{"class":177},[167,140479,185],{"class":173},[167,140481,140482,140484,140486,140488,140490],{"class":169,"line":10138},[167,140483,1268],{"class":173},[167,140485,15],{"class":177},[167,140487,12334],{"class":173},[167,140489,15],{"class":177},[167,140491,185],{"class":173},[167,140493,140494,140496,140498,140500,140502,140504,140507,140509],{"class":169,"line":10152},[167,140495,1268],{"class":173},[167,140497,15],{"class":177},[167,140499,5694],{"class":181},[167,140501,267],{"class":173},[167,140503,12351],{"class":201},[167,140505,140506],{"class":173},">Last sync: {{ lastSync }}\u003C\u002F",[167,140508,15],{"class":177},[167,140510,185],{"class":173},[167,140512,140513,140515,140517],{"class":169,"line":10161},[167,140514,1292],{"class":173},[167,140516,1260],{"class":177},[167,140518,185],{"class":173},[167,140520,140521],{"class":169,"line":10167},[167,140522,209],{"emptyLinePlaceholder":208},[167,140524,140525,140527,140529,140531,140533,140535],{"class":169,"line":10177},[167,140526,1257],{"class":173},[167,140528,5691],{"class":177},[167,140530,1245],{"class":181},[167,140532,267],{"class":173},[167,140534,12383],{"class":201},[167,140536,185],{"class":173},[167,140538,140539,140541,140543,140545,140547,140549,140552,140554],{"class":169,"line":10186},[167,140540,1268],{"class":173},[167,140542,507],{"class":177},[167,140544,1182],{"class":181},[167,140546,267],{"class":173},[167,140548,12398],{"class":201},[167,140550,140551],{"class":173},">All\u003C\u002F",[167,140553,507],{"class":177},[167,140555,185],{"class":173},[167,140557,140558,140560,140562,140564,140566,140568,140571,140573],{"class":169,"line":10191},[167,140559,1268],{"class":173},[167,140561,507],{"class":177},[167,140563,1182],{"class":181},[167,140565,267],{"class":173},[167,140567,12418],{"class":201},[167,140569,140570],{"class":173},">Pending\u003C\u002F",[167,140572,507],{"class":177},[167,140574,185],{"class":173},[167,140576,140577,140579,140581,140583,140585,140587,140590,140592],{"class":169,"line":10214},[167,140578,1268],{"class":173},[167,140580,507],{"class":177},[167,140582,1182],{"class":181},[167,140584,267],{"class":173},[167,140586,12438],{"class":201},[167,140588,140589],{"class":173},">Completed\u003C\u002F",[167,140591,507],{"class":177},[167,140593,185],{"class":173},[167,140595,140596,140598,140600],{"class":169,"line":10228},[167,140597,1292],{"class":173},[167,140599,5691],{"class":177},[167,140601,185],{"class":173},[167,140603,140604],{"class":169,"line":10241},[167,140605,209],{"emptyLinePlaceholder":208},[167,140607,140608,140610,140612],{"class":169,"line":10256},[167,140609,1257],{"class":173},[167,140611,33],{"class":177},[167,140613,185],{"class":173},[167,140615,140616,140618],{"class":169,"line":10283},[167,140617,1268],{"class":173},[167,140619,12472],{"class":177},[167,140621,140622,140624,140626],{"class":169,"line":10292},[167,140623,12477],{"class":181},[167,140625,267],{"class":173},[167,140627,12482],{"class":201},[167,140629,140630,140632,140634],{"class":169,"line":10297},[167,140631,12487],{"class":181},[167,140633,267],{"class":173},[167,140635,3546],{"class":201},[167,140637,140638],{"class":169,"line":10317},[167,140639,10532],{"class":173},[167,140641,140642],{"class":169,"line":10326},[167,140643,12500],{"class":173},[167,140645,140646,140648,140650],{"class":169,"line":10981},[167,140647,10170],{"class":173},[167,140649,36],{"class":177},[167,140651,185],{"class":173},[167,140653,140654,140656,140658],{"class":169,"line":10994},[167,140655,1292],{"class":173},[167,140657,33],{"class":177},[167,140659,185],{"class":173},[167,140661,140662,140664,140666],{"class":169,"line":11007},[167,140663,504],{"class":173},[167,140665,10117],{"class":177},[167,140667,185],{"class":173},[167,140669,140670,140672,140674],{"class":169,"line":11032},[167,140671,282],{"class":173},[167,140673,299],{"class":177},[167,140675,185],{"class":173},[154,140677,140679],{"className":156,"code":140678,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      tasks: [],\n      filter: 'all',\n      status: 'Waiting for load...',\n      lastSync: null,\n      poller: null,\n      initialized: false\n    }\n  },\n\n  computed: {\n    visibleTasks() {\n      if (this.filter === 'pending') {\n        return this.tasks.filter(task => !task.done)\n      }\n\n      if (this.filter === 'done') {\n        return this.tasks.filter(task => task.done)\n      }\n\n      return this.tasks\n    }\n  },\n\n  mounted() {\n    this.initialized = true\n  },\n\n  async activated() {\n    this.status = this.initialized ? 'View reactivated' : 'Loading view...'\n    await this.fetchTasks()\n    this.startPolling()\n  },\n\n  deactivated() {\n    this.status = 'View paused'\n    this.stopPolling()\n  },\n\n  methods: {\n    async fetchTasks() {\n      this.status = 'Syncing...'\n\n      const response = await fetch('\u002Fapi\u002Ftasks')\n      const data = await response.json()\n\n      this.tasks = data.tasks\n      this.lastSync = new Date().toLocaleTimeString('en-US')\n      this.status = 'Data updated'\n    },\n\n    startPolling() {\n      if (this.poller !== null) return\n\n      this.poller = setInterval(() => {\n        void this.fetchTasks()\n      }, 30000)\n    },\n\n    stopPolling() {\n      if (this.poller === null) return\n\n      clearInterval(this.poller)\n      this.poller = null\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-report\">\n    \u003Cheader>\n      \u003Ch2>Task report\u003C\u002Fh2>\n      \u003Cp>{{ status }}\u003C\u002Fp>\n      \u003Cp v-if=\"lastSync\">Last sync: {{ lastSync }}\u003C\u002Fp>\n    \u003C\u002Fheader>\n\n    \u003Cnav class=\"filters\">\n      \u003Cbutton @click=\"filter = 'all'\">All\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'pending'\">Pending\u003C\u002Fbutton>\n      \u003Cbutton @click=\"filter = 'done'\">Completed\u003C\u002Fbutton>\n    \u003C\u002Fnav>\n\n    \u003Cul>\n      \u003Cli\n        v-for=\"task in visibleTasks\"\n        :key=\"task.id\"\n      >\n        {{ task.title }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,140680,140681,140689,140697,140703,140709,140713,140721,140729,140737,140745,140751,140755,140759,140763,140767,140773,140789,140809,140813,140817,140833,140851,140855,140859,140867,140871,140875,140879,140885,140895,140899,140903,140911,140931,140943,140953,140957,140961,140967,140977,140987,140991,140995,140999,141007,141017,141021,141039,141055,141059,141069,141091,141101,141105,141109,141115,141133,141137,141153,141165,141173,141177,141181,141187,141205,141209,141219,141229,141233,141237,141241,141249,141253,141261,141275,141283,141295,141307,141325,141333,141337,141351,141369,141387,141405,141413,141417,141425,141431,141439,141447,141451,141455,141463,141471,141479],{"__ignoreMap":163},[167,140682,140683,140685,140687],{"class":169,"line":170},[167,140684,174],{"class":173},[167,140686,178],{"class":177},[167,140688,185],{"class":173},[167,140690,140691,140693,140695],{"class":169,"line":188},[167,140692,608],{"class":191},[167,140694,3991],{"class":191},[167,140696,1905],{"class":173},[167,140698,140699,140701],{"class":169,"line":205},[167,140700,7176],{"class":181},[167,140702,763],{"class":173},[167,140704,140705,140707],{"class":169,"line":160},[167,140706,1937],{"class":191},[167,140708,1905],{"class":173},[167,140710,140711],{"class":169,"line":238},[167,140712,12571],{"class":173},[167,140714,140715,140717,140719],{"class":169,"line":243},[167,140716,12576],{"class":173},[167,140718,232],{"class":201},[167,140720,393],{"class":173},[167,140722,140723,140725,140727],{"class":169,"line":261},[167,140724,12585],{"class":173},[167,140726,139902],{"class":201},[167,140728,393],{"class":173},[167,140730,140731,140733,140735],{"class":169,"line":273},[167,140732,12594],{"class":173},[167,140734,6573],{"class":219},[167,140736,393],{"class":173},[167,140738,140739,140741,140743],{"class":169,"line":279},[167,140740,12603],{"class":173},[167,140742,6573],{"class":219},[167,140744,393],{"class":173},[167,140746,140747,140749],{"class":169,"line":289},[167,140748,12612],{"class":173},[167,140750,8093],{"class":219},[167,140752,140753],{"class":169,"line":294},[167,140754,4049],{"class":173},[167,140756,140757],{"class":169,"line":304},[167,140758,398],{"class":173},[167,140760,140761],{"class":169,"line":313},[167,140762,209],{"emptyLinePlaceholder":208},[167,140764,140765],{"class":169,"line":161},[167,140766,8755],{"class":173},[167,140768,140769,140771],{"class":169,"line":335},[167,140770,8760],{"class":181},[167,140772,763],{"class":173},[167,140774,140775,140777,140779,140781,140783,140785,140787],{"class":169,"line":341},[167,140776,7261],{"class":191},[167,140778,2526],{"class":173},[167,140780,4927],{"class":219},[167,140782,12647],{"class":173},[167,140784,2550],{"class":191},[167,140786,11682],{"class":201},[167,140788,258],{"class":173},[167,140790,140791,140793,140795,140797,140799,140801,140803,140805,140807],{"class":169,"line":489},[167,140792,8855],{"class":191},[167,140794,7351],{"class":219},[167,140796,8772],{"class":173},[167,140798,8252],{"class":181},[167,140800,229],{"class":173},[167,140802,5075],{"class":254},[167,140804,8259],{"class":191},[167,140806,5625],{"class":191},[167,140808,11840],{"class":173},[167,140810,140811],{"class":169,"line":495},[167,140812,7287],{"class":173},[167,140814,140815],{"class":169,"line":501},[167,140816,209],{"emptyLinePlaceholder":208},[167,140818,140819,140821,140823,140825,140827,140829,140831],{"class":169,"line":512},[167,140820,7261],{"class":191},[167,140822,2526],{"class":173},[167,140824,4927],{"class":219},[167,140826,12647],{"class":173},[167,140828,2550],{"class":191},[167,140830,11687],{"class":201},[167,140832,258],{"class":173},[167,140834,140835,140837,140839,140841,140843,140845,140847,140849],{"class":169,"line":781},[167,140836,8855],{"class":191},[167,140838,7351],{"class":219},[167,140840,8772],{"class":173},[167,140842,8252],{"class":181},[167,140844,229],{"class":173},[167,140846,5075],{"class":254},[167,140848,8259],{"class":191},[167,140850,11877],{"class":173},[167,140852,140853],{"class":169,"line":786},[167,140854,7287],{"class":173},[167,140856,140857],{"class":169,"line":2678},[167,140858,209],{"emptyLinePlaceholder":208},[167,140860,140861,140863,140865],{"class":169,"line":2692},[167,140862,8767],{"class":191},[167,140864,7351],{"class":219},[167,140866,12732],{"class":173},[167,140868,140869],{"class":169,"line":3575},[167,140870,4049],{"class":173},[167,140872,140873],{"class":169,"line":5028},[167,140874,398],{"class":173},[167,140876,140877],{"class":169,"line":5037},[167,140878,209],{"emptyLinePlaceholder":208},[167,140880,140881,140883],{"class":169,"line":5046},[167,140882,12749],{"class":181},[167,140884,763],{"class":173},[167,140886,140887,140889,140891,140893],{"class":169,"line":6756},[167,140888,879],{"class":219},[167,140890,12758],{"class":173},[167,140892,267],{"class":191},[167,140894,3487],{"class":219},[167,140896,140897],{"class":169,"line":6778},[167,140898,398],{"class":173},[167,140900,140901],{"class":169,"line":6783},[167,140902,209],{"emptyLinePlaceholder":208},[167,140904,140905,140907,140909],{"class":169,"line":6788},[167,140906,7331],{"class":191},[167,140908,12777],{"class":181},[167,140910,763],{"class":173},[167,140912,140913,140915,140917,140919,140921,140923,140925,140927,140929],{"class":169,"line":6793},[167,140914,879],{"class":219},[167,140916,12786],{"class":173},[167,140918,267],{"class":191},[167,140920,7351],{"class":219},[167,140922,12758],{"class":173},[167,140924,8316],{"class":191},[167,140926,140368],{"class":201},[167,140928,5312],{"class":191},[167,140930,140373],{"class":201},[167,140932,140933,140935,140937,140939,140941],{"class":169,"line":6809},[167,140934,6730],{"class":191},[167,140936,7351],{"class":219},[167,140938,1679],{"class":173},[167,140940,12811],{"class":181},[167,140942,2917],{"class":173},[167,140944,140945,140947,140949,140951],{"class":169,"line":6824},[167,140946,879],{"class":219},[167,140948,1679],{"class":173},[167,140950,12822],{"class":181},[167,140952,2917],{"class":173},[167,140954,140955],{"class":169,"line":6829},[167,140956,398],{"class":173},[167,140958,140959],{"class":169,"line":6836},[167,140960,209],{"emptyLinePlaceholder":208},[167,140962,140963,140965],{"class":169,"line":6845},[167,140964,12837],{"class":181},[167,140966,763],{"class":173},[167,140968,140969,140971,140973,140975],{"class":169,"line":6854},[167,140970,879],{"class":219},[167,140972,12786],{"class":173},[167,140974,267],{"class":191},[167,140976,140414],{"class":201},[167,140978,140979,140981,140983,140985],{"class":169,"line":6861},[167,140980,879],{"class":219},[167,140982,1679],{"class":173},[167,140984,12858],{"class":181},[167,140986,2917],{"class":173},[167,140988,140989],{"class":169,"line":6879},[167,140990,398],{"class":173},[167,140992,140993],{"class":169,"line":6884},[167,140994,209],{"emptyLinePlaceholder":208},[167,140996,140997],{"class":169,"line":6889},[167,140998,4419],{"class":173},[167,141000,141001,141003,141005],{"class":169,"line":6898},[167,141002,7230],{"class":191},[167,141004,11909],{"class":181},[167,141006,763],{"class":173},[167,141008,141009,141011,141013,141015],{"class":169,"line":6903},[167,141010,741],{"class":219},[167,141012,12786],{"class":173},[167,141014,267],{"class":191},[167,141016,140101],{"class":201},[167,141018,141019],{"class":169,"line":6912},[167,141020,209],{"emptyLinePlaceholder":208},[167,141022,141023,141025,141027,141029,141031,141033,141035,141037],{"class":169,"line":6928},[167,141024,4435],{"class":191},[167,141026,6614],{"class":219},[167,141028,223],{"class":191},[167,141030,3009],{"class":191},[167,141032,6621],{"class":181},[167,141034,229],{"class":173},[167,141036,11942],{"class":201},[167,141038,235],{"class":173},[167,141040,141041,141043,141045,141047,141049,141051,141053],{"class":169,"line":6949},[167,141042,4435],{"class":191},[167,141044,11951],{"class":219},[167,141046,223],{"class":191},[167,141048,3009],{"class":191},[167,141050,6683],{"class":173},[167,141052,6686],{"class":181},[167,141054,2917],{"class":173},[167,141056,141057],{"class":169,"line":6954},[167,141058,209],{"emptyLinePlaceholder":208},[167,141060,141061,141063,141065,141067],{"class":169,"line":6975},[167,141062,741],{"class":219},[167,141064,12939],{"class":173},[167,141066,267],{"class":191},[167,141068,11991],{"class":173},[167,141070,141071,141073,141075,141077,141079,141081,141083,141085,141087,141089],{"class":169,"line":6989},[167,141072,741],{"class":219},[167,141074,12950],{"class":173},[167,141076,267],{"class":191},[167,141078,4224],{"class":191},[167,141080,12003],{"class":181},[167,141082,2503],{"class":173},[167,141084,12008],{"class":181},[167,141086,229],{"class":173},[167,141088,140184],{"class":201},[167,141090,235],{"class":173},[167,141092,141093,141095,141097,141099],{"class":169,"line":7003},[167,141094,741],{"class":219},[167,141096,12786],{"class":173},[167,141098,267],{"class":191},[167,141100,140195],{"class":201},[167,141102,141103],{"class":169,"line":7017},[167,141104,755],{"class":173},[167,141106,141107],{"class":169,"line":7026},[167,141108,209],{"emptyLinePlaceholder":208},[167,141110,141111,141113],{"class":169,"line":7031},[167,141112,12989],{"class":181},[167,141114,763],{"class":173},[167,141116,141117,141119,141121,141123,141125,141127,141129,141131],{"class":169,"line":7048},[167,141118,7261],{"class":191},[167,141120,2526],{"class":173},[167,141122,4927],{"class":219},[167,141124,13002],{"class":173},[167,141126,701],{"class":191},[167,141128,6567],{"class":219},[167,141130,693],{"class":173},[167,141132,2556],{"class":191},[167,141134,141135],{"class":169,"line":7057},[167,141136,209],{"emptyLinePlaceholder":208},[167,141138,141139,141141,141143,141145,141147,141149,141151],{"class":169,"line":7555},[167,141140,741],{"class":219},[167,141142,13002],{"class":173},[167,141144,267],{"class":191},[167,141146,12070],{"class":181},[167,141148,1493],{"class":173},[167,141150,639],{"class":191},[167,141152,1905],{"class":173},[167,141154,141155,141157,141159,141161,141163],{"class":169,"line":7560},[167,141156,13035],{"class":191},[167,141158,7351],{"class":219},[167,141160,1679],{"class":173},[167,141162,12811],{"class":181},[167,141164,2917],{"class":173},[167,141166,141167,141169,141171],{"class":169,"line":7579},[167,141168,13048],{"class":173},[167,141170,12092],{"class":219},[167,141172,235],{"class":173},[167,141174,141175],{"class":169,"line":7592},[167,141176,755],{"class":173},[167,141178,141179],{"class":169,"line":7605},[167,141180,209],{"emptyLinePlaceholder":208},[167,141182,141183,141185],{"class":169,"line":7618},[167,141184,13065],{"class":181},[167,141186,763],{"class":173},[167,141188,141189,141191,141193,141195,141197,141199,141201,141203],{"class":169,"line":7627},[167,141190,7261],{"class":191},[167,141192,2526],{"class":173},[167,141194,4927],{"class":219},[167,141196,13002],{"class":173},[167,141198,2550],{"class":191},[167,141200,6567],{"class":219},[167,141202,693],{"class":173},[167,141204,2556],{"class":191},[167,141206,141207],{"class":169,"line":7632},[167,141208,209],{"emptyLinePlaceholder":208},[167,141210,141211,141213,141215,141217],{"class":169,"line":7647},[167,141212,13094],{"class":181},[167,141214,229],{"class":173},[167,141216,4927],{"class":219},[167,141218,13101],{"class":173},[167,141220,141221,141223,141225,141227],{"class":169,"line":7656},[167,141222,741],{"class":219},[167,141224,13002],{"class":173},[167,141226,267],{"class":191},[167,141228,12146],{"class":219},[167,141230,141231],{"class":169,"line":10073},[167,141232,4049],{"class":173},[167,141234,141235],{"class":169,"line":10084},[167,141236,3492],{"class":173},[167,141238,141239],{"class":169,"line":10089},[167,141240,276],{"class":173},[167,141242,141243,141245,141247],{"class":169,"line":10098},[167,141244,282],{"class":173},[167,141246,178],{"class":177},[167,141248,185],{"class":173},[167,141250,141251],{"class":169,"line":10103},[167,141252,209],{"emptyLinePlaceholder":208},[167,141254,141255,141257,141259],{"class":169,"line":10112},[167,141256,174],{"class":173},[167,141258,299],{"class":177},[167,141260,185],{"class":173},[167,141262,141263,141265,141267,141269,141271,141273],{"class":169,"line":10129},[167,141264,307],{"class":173},[167,141266,10117],{"class":177},[167,141268,1245],{"class":181},[167,141270,267],{"class":173},[167,141272,12302],{"class":201},[167,141274,185],{"class":173},[167,141276,141277,141279,141281],{"class":169,"line":10138},[167,141278,1257],{"class":173},[167,141280,1260],{"class":177},[167,141282,185],{"class":173},[167,141284,141285,141287,141289,141291,141293],{"class":169,"line":10152},[167,141286,1268],{"class":173},[167,141288,22],{"class":177},[167,141290,140475],{"class":173},[167,141292,22],{"class":177},[167,141294,185],{"class":173},[167,141296,141297,141299,141301,141303,141305],{"class":169,"line":10161},[167,141298,1268],{"class":173},[167,141300,15],{"class":177},[167,141302,12334],{"class":173},[167,141304,15],{"class":177},[167,141306,185],{"class":173},[167,141308,141309,141311,141313,141315,141317,141319,141321,141323],{"class":169,"line":10167},[167,141310,1268],{"class":173},[167,141312,15],{"class":177},[167,141314,5694],{"class":181},[167,141316,267],{"class":173},[167,141318,12351],{"class":201},[167,141320,140506],{"class":173},[167,141322,15],{"class":177},[167,141324,185],{"class":173},[167,141326,141327,141329,141331],{"class":169,"line":10177},[167,141328,1292],{"class":173},[167,141330,1260],{"class":177},[167,141332,185],{"class":173},[167,141334,141335],{"class":169,"line":10186},[167,141336,209],{"emptyLinePlaceholder":208},[167,141338,141339,141341,141343,141345,141347,141349],{"class":169,"line":10191},[167,141340,1257],{"class":173},[167,141342,5691],{"class":177},[167,141344,1245],{"class":181},[167,141346,267],{"class":173},[167,141348,12383],{"class":201},[167,141350,185],{"class":173},[167,141352,141353,141355,141357,141359,141361,141363,141365,141367],{"class":169,"line":10214},[167,141354,1268],{"class":173},[167,141356,507],{"class":177},[167,141358,1182],{"class":181},[167,141360,267],{"class":173},[167,141362,12398],{"class":201},[167,141364,140551],{"class":173},[167,141366,507],{"class":177},[167,141368,185],{"class":173},[167,141370,141371,141373,141375,141377,141379,141381,141383,141385],{"class":169,"line":10228},[167,141372,1268],{"class":173},[167,141374,507],{"class":177},[167,141376,1182],{"class":181},[167,141378,267],{"class":173},[167,141380,12418],{"class":201},[167,141382,140570],{"class":173},[167,141384,507],{"class":177},[167,141386,185],{"class":173},[167,141388,141389,141391,141393,141395,141397,141399,141401,141403],{"class":169,"line":10241},[167,141390,1268],{"class":173},[167,141392,507],{"class":177},[167,141394,1182],{"class":181},[167,141396,267],{"class":173},[167,141398,12438],{"class":201},[167,141400,140589],{"class":173},[167,141402,507],{"class":177},[167,141404,185],{"class":173},[167,141406,141407,141409,141411],{"class":169,"line":10256},[167,141408,1292],{"class":173},[167,141410,5691],{"class":177},[167,141412,185],{"class":173},[167,141414,141415],{"class":169,"line":10283},[167,141416,209],{"emptyLinePlaceholder":208},[167,141418,141419,141421,141423],{"class":169,"line":10292},[167,141420,1257],{"class":173},[167,141422,33],{"class":177},[167,141424,185],{"class":173},[167,141426,141427,141429],{"class":169,"line":10297},[167,141428,1268],{"class":173},[167,141430,12472],{"class":177},[167,141432,141433,141435,141437],{"class":169,"line":10317},[167,141434,12477],{"class":181},[167,141436,267],{"class":173},[167,141438,12482],{"class":201},[167,141440,141441,141443,141445],{"class":169,"line":10326},[167,141442,12487],{"class":181},[167,141444,267],{"class":173},[167,141446,3546],{"class":201},[167,141448,141449],{"class":169,"line":10981},[167,141450,10532],{"class":173},[167,141452,141453],{"class":169,"line":10994},[167,141454,12500],{"class":173},[167,141456,141457,141459,141461],{"class":169,"line":11007},[167,141458,10170],{"class":173},[167,141460,36],{"class":177},[167,141462,185],{"class":173},[167,141464,141465,141467,141469],{"class":169,"line":11032},[167,141466,1292],{"class":173},[167,141468,33],{"class":177},[167,141470,185],{"class":173},[167,141472,141473,141475,141477],{"class":169,"line":11041},[167,141474,504],{"class":173},[167,141476,10117],{"class":177},[167,141478,185],{"class":173},[167,141480,141481,141483,141485],{"class":169,"line":11046},[167,141482,282],{"class":173},[167,141484,299],{"class":177},[167,141486,185],{"class":173},[33,141488,141489,141494,141499,141502],{},[36,141490,141491,141493],{},[87,141492,11226],{}," covers both the first activation and every return from cache.",[36,141495,141496,141498],{},[87,141497,11234],{}," pauses polling so it does not keep consuming resources off screen.",[36,141500,141501],{},"The local filter stays intact because the instance is not destroyed.",[36,141503,141504,141506],{},[87,141505,6400],{}," stays reserved for truly initial work; here it only marks that the instance has already gone through its first mount.",[22,141508,60191],{"id":60190},[33,141510,141511,141516,141521,141526,141529],{},[36,141512,141513,141515],{},[87,141514,11158],{}," preserves the instance and its local state between view switches.",[36,141517,141518,141520],{},[87,141519,11161],{}," does not mean \"mount again\"; it means \"become active again\".",[36,141522,141523,141525],{},[87,141524,11164],{}," is the right hook for pausing work while the instance stays cached.",[36,141527,141528],{},"Preserving state does not remove the need to revalidate data when the view returns.",[36,141530,141531],{},"If the component should always restart from scratch, you probably should not cache it.",[924,141533,7689],{},{"title":163,"searchDepth":188,"depth":188,"links":141535},[141536,141537,141538,141539,141540,141548,141553],{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":91740,"depth":188,"text":91741},{"id":57819,"depth":188,"text":57820,"children":141541},[141542,141544,141545,141547],{"id":139664,"depth":205,"text":141543},"1. Loading data only in mounted",{"id":139681,"depth":205,"text":139682},{"id":139700,"depth":205,"text":141546},"3. Expecting unmounted when switching between cached tabs",{"id":139719,"depth":205,"text":139720},{"id":57925,"depth":188,"text":57926,"children":141549},[141550,141551,141552],{"id":139733,"depth":205,"text":139734},{"id":139746,"depth":205,"text":139747},{"id":139756,"depth":205,"text":139757},{"id":60190,"depth":188,"text":60191},"Illustration of cached Vue components with KeepAlive using activated and deactivated","How activated and deactivated work in components cached with \u003CKeepAlive>, when to use them, and how to avoid stale data, running timers, and misplaced lifecycle logic.",{"updatedAt":13443,"coverCaption":141557,"author":946,"keywords":141558},"KeepAlive lets Vue deactivate and reactivate components without destroying their local state",[3258,13446,11161,11164,141559],"component cache","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.en",[141562],{"headline":139365,"author":141563,"datePublished":13443,"@type":961},{"name":946,"@type":959},{"title":139365,"description":141555},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.en",[141567,141568,141569,141570],{"tag":129945,"color":7725},{"tag":13446,"color":13457},{"tag":98745,"color":1639},{"tag":60271,"color":7731},"LYoP5k_2lVZvskyBmowX2_EwO3_O4yaxCZC0wsXlxP0",{"id":11144,"title":11145,"body":141573,"cover":13438,"coverAlt":13439,"date":13440,"description":13441,"draft":940,"extension":941,"lab":942,"locale":943,"meta":143640,"navigation":208,"path":13448,"schemaOrg":143642,"seo":143645,"series":7718,"seriesDescription":7719,"seriesOrder":243,"seriesTitle":7720,"slug":942,"stem":13453,"tags":143646,"__hash__":13460},{"type":8,"value":141574,"toc":143621},[141575,141577,141585,141589,141591,141597,141599,141603,141605,141613,141615,141623,141625,141639,141641,141651,141653,141671,141673,141679,141681,141691,141693,141703,141705,141709,141711,141721,141723,141739,141741,141805,141807,141809,141813,141817,141821,141823,141827,141833,141837,141841,141845,141847,141851,141853,141855,141857,141863,141865,141869,141871,141877,142773,143583,143599,143601,143619],[22,141576,11151],{"id":11150},[11,141578,11155,141579,2526,141581,1025,141583,6219],{"id":11154},[87,141580,11158],{},[87,141582,11161],{},[87,141584,11164],{},[15,141586,11167,141587,11170],{},[87,141588,11158],{},[15,141590,11173],{},[15,141592,11176,141593,1028,141595,11181],{},[87,141594,11161],{},[87,141596,11164],{},[22,141598,6257],{"id":6256},[15,141600,141601,11188],{},[87,141602,11158],{},[15,141604,11191],{},[33,141606,141607,141609,141611],{},[36,141608,11196],{},[36,141610,11199],{},[36,141612,11202],{},[15,141614,11205],{},[33,141616,141617,141619,141621],{},[36,141618,11210],{},[36,141620,11213],{},[36,141622,11216],{},[15,141624,11219],{},[33,141626,141627,141633],{},[36,141628,141629,11227,141631],{},[87,141630,11226],{},[87,141632,11161],{},[36,141634,141635,11227,141637],{},[87,141636,11234],{},[87,141638,11164],{},[15,141640,11239],{},[33,141642,141643,141647],{},[36,141644,141645,11246],{},[87,141646,11161],{},[36,141648,141649,11251],{},[87,141650,11164],{},[15,141652,11254],{},[33,141654,141655,141659,141663,141667],{},[36,141656,141657,11261],{},[87,141658,6393],{},[36,141660,141661,11266],{},[87,141662,11161],{},[36,141664,141665,11271],{},[87,141666,11164],{},[36,141668,141669,11277],{},[87,141670,11276],{},[22,141672,6322],{"id":6321},[15,141674,141675,1028,141677,11286],{},[87,141676,11161],{},[87,141678,11164],{},[15,141680,9308],{},[33,141682,141683,141685,141687,141689],{},[36,141684,11293],{},[36,141686,11296],{},[36,141688,11299],{},[36,141690,11302],{},[15,141692,11305],{},[33,141694,141695,141699],{},[36,141696,11310,141697,1679],{},[87,141698,11161],{},[36,141700,11315,141701,1679],{},[87,141702,11164],{},[22,141704,6349],{"id":6348},[15,141706,11322,141707,11325],{},[87,141708,11158],{},[15,141710,11328],{},[33,141712,141713,141715,141717,141719],{},[36,141714,11333],{},[36,141716,11336],{},[36,141718,11339],{},[36,141720,11342],{},[15,141722,11345],{},[33,141724,141725,141729,141735],{},[36,141726,11350,141727,11353],{},[87,141728,5475],{},[36,141730,11356,141731,90,141733,11361],{},[87,141732,6393],{},[87,141734,9238],{},[36,141736,11364,141737,11367],{},[87,141738,11158],{},[22,141740,11371],{"id":11370},[56,141742,141743,141755],{},[59,141744,141745],{},[62,141746,141747,141749,141751,141753],{},[65,141748,11380],{},[65,141750,11383],{},[65,141752,11386],{},[65,141754,11389],{},[75,141756,141757,141769,141781,141793],{},[62,141758,141759,141763,141765,141767],{},[80,141760,141761],{},[87,141762,6393],{},[80,141764,11400],{},[80,141766,11403],{},[80,141768,11406],{},[62,141770,141771,141775,141777,141779],{},[80,141772,141773],{},[87,141774,11161],{},[80,141776,11415],{},[80,141778,11418],{},[80,141780,11421],{},[62,141782,141783,141787,141789,141791],{},[80,141784,141785],{},[87,141786,11164],{},[80,141788,11430],{},[80,141790,11433],{},[80,141792,11436],{},[62,141794,141795,141799,141801,141803],{},[80,141796,141797],{},[87,141798,11276],{},[80,141800,11445],{},[80,141802,11448],{},[80,141804,11451],{},[15,141806,11454],{},[22,141808,3085],{"id":3084},[3087,141810,11460,141811],{"id":11459},[87,141812,6393],{},[15,141814,11465,141815,11468],{},[87,141816,6393],{},[15,141818,11471,141819,1679],{},[87,141820,11161],{},[3087,141822,11477],{"id":11476},[15,141824,11480,141825,11484],{},[87,141826,11483],{},[15,141828,11487,141829,11490,141831,11493],{},[87,141830,11164],{},[87,141832,11161],{},[3087,141834,11497,141835,11500],{"id":11496},[87,141836,11276],{},[15,141838,11503,141839,11506],{},[87,141840,11158],{},[15,141842,11509,141843,11512],{},[87,141844,11276],{},[3087,141846,11516],{"id":11515},[15,141848,141849,11521],{},[87,141850,11158],{},[15,141852,11524],{},[22,141854,7997],{"id":7996},[3087,141856,11530],{"id":11529},[15,141858,11533,141859,11536,141861,11539],{},[87,141860,11158],{},[87,141862,11161],{},[3087,141864,11543],{"id":11542},[15,141866,11546,141867,11549],{},[87,141868,11164],{},[3087,141870,11553],{"id":11552},[15,141872,11556,141873,11559,141875,11562],{},[87,141874,6393],{},[87,141876,11161],{},[154,141878,141879],{"className":156,"code":11565,"filename":3260,"language":162,"meta":163,"style":163},[87,141880,141881,141897,141907,141911,141921,141929,141937,141945,141949,141953,141969,141997,142013,142037,142067,142083,142087,142103,142115,142133,142137,142141,142153,142169,142173,142177,142183,142187,142191,142201,142209,142213,142231,142261,142265,142273,142293,142301,142305,142309,142317,142331,142335,142349,142357,142365,142369,142373,142381,142395,142399,142405,142413,142417,142421,142431,142439,142443,142447,142461,142477,142485,142491,142495,142499,142509,142517,142523,142527,142535,142539,142547,142561,142569,142581,142593,142611,142619,142623,142637,142655,142673,142691,142699,142703,142711,142717,142725,142733,142737,142741,142749,142757,142765],{"__ignoreMap":163},[167,141882,141883,141885,141887,141889,141891,141893,141895],{"class":169,"line":170},[167,141884,174],{"class":173},[167,141886,178],{"class":177},[167,141888,182],{"class":181},[167,141890,1050],{"class":181},[167,141892,267],{"class":173},[167,141894,1055],{"class":201},[167,141896,185],{"class":173},[167,141898,141899,141901,141903,141905],{"class":169,"line":188},[167,141900,192],{"class":191},[167,141902,11590],{"class":173},[167,141904,198],{"class":191},[167,141906,202],{"class":201},[167,141908,141909],{"class":169,"line":205},[167,141910,209],{"emptyLinePlaceholder":208},[167,141912,141913,141915,141917,141919],{"class":169,"line":160},[167,141914,569],{"class":191},[167,141916,11605],{"class":181},[167,141918,223],{"class":191},[167,141920,1905],{"class":173},[167,141922,141923,141925,141927],{"class":169,"line":238},[167,141924,6505],{"class":254},[167,141926,583],{"class":191},[167,141928,6510],{"class":219},[167,141930,141931,141933,141935],{"class":169,"line":243},[167,141932,11622],{"class":254},[167,141934,583],{"class":191},[167,141936,6520],{"class":219},[167,141938,141939,141941,141943],{"class":169,"line":261},[167,141940,11631],{"class":254},[167,141942,583],{"class":191},[167,141944,11636],{"class":219},[167,141946,141947],{"class":169,"line":273},[167,141948,276],{"class":173},[167,141950,141951],{"class":169,"line":279},[167,141952,209],{"emptyLinePlaceholder":208},[167,141954,141955,141957,141959,141961,141963,141965,141967],{"class":169,"line":289},[167,141956,216],{"class":191},[167,141958,3368],{"class":219},[167,141960,223],{"class":191},[167,141962,226],{"class":181},[167,141964,174],{"class":173},[167,141966,11659],{"class":181},[167,141968,11662],{"class":173},[167,141970,141971,141973,141975,141977,141979,141981,141983,141985,141987,141989,141991,141993,141995],{"class":169,"line":294},[167,141972,216],{"class":191},[167,141974,11669],{"class":219},[167,141976,223],{"class":191},[167,141978,226],{"class":181},[167,141980,174],{"class":173},[167,141982,232],{"class":201},[167,141984,659],{"class":191},[167,141986,11682],{"class":201},[167,141988,659],{"class":191},[167,141990,11687],{"class":201},[167,141992,6570],{"class":173},[167,141994,232],{"class":201},[167,141996,235],{"class":173},[167,141998,141999,142001,142003,142005,142007,142009,142011],{"class":169,"line":304},[167,142000,216],{"class":191},[167,142002,11700],{"class":219},[167,142004,223],{"class":191},[167,142006,226],{"class":181},[167,142008,229],{"class":173},[167,142010,11709],{"class":201},[167,142012,235],{"class":173},[167,142014,142015,142017,142019,142021,142023,142025,142027,142029,142031,142033,142035],{"class":169,"line":313},[167,142016,216],{"class":191},[167,142018,11718],{"class":219},[167,142020,223],{"class":191},[167,142022,226],{"class":181},[167,142024,174],{"class":173},[167,142026,1111],{"class":219},[167,142028,659],{"class":191},[167,142030,6567],{"class":219},[167,142032,6570],{"class":173},[167,142034,6573],{"class":219},[167,142036,235],{"class":173},[167,142038,142039,142041,142043,142045,142047,142049,142051,142053,142055,142057,142059,142061,142063,142065],{"class":169,"line":161},[167,142040,216],{"class":191},[167,142042,11743],{"class":219},[167,142044,223],{"class":191},[167,142046,226],{"class":181},[167,142048,174],{"class":173},[167,142050,11752],{"class":181},[167,142052,174],{"class":173},[167,142054,11757],{"class":191},[167,142056,11760],{"class":173},[167,142058,11763],{"class":191},[167,142060,6567],{"class":219},[167,142062,6570],{"class":173},[167,142064,6573],{"class":219},[167,142066,235],{"class":173},[167,142068,142069,142071,142073,142075,142077,142079,142081],{"class":169,"line":335},[167,142070,216],{"class":191},[167,142072,11778],{"class":219},[167,142074,223],{"class":191},[167,142076,226],{"class":181},[167,142078,229],{"class":173},[167,142080,3392],{"class":219},[167,142082,235],{"class":173},[167,142084,142085],{"class":169,"line":341},[167,142086,209],{"emptyLinePlaceholder":208},[167,142088,142089,142091,142093,142095,142097,142099,142101],{"class":169,"line":489},[167,142090,216],{"class":191},[167,142092,8233],{"class":219},[167,142094,223],{"class":191},[167,142096,1898],{"class":181},[167,142098,1493],{"class":173},[167,142100,639],{"class":191},[167,142102,1905],{"class":173},[167,142104,142105,142107,142109,142111,142113],{"class":169,"line":495},[167,142106,2544],{"class":191},[167,142108,11815],{"class":173},[167,142110,2550],{"class":191},[167,142112,11682],{"class":201},[167,142114,258],{"class":173},[167,142116,142117,142119,142121,142123,142125,142127,142129,142131],{"class":169,"line":501},[167,142118,1937],{"class":191},[167,142120,3451],{"class":173},[167,142122,8252],{"class":181},[167,142124,229],{"class":173},[167,142126,5075],{"class":254},[167,142128,8259],{"class":191},[167,142130,5625],{"class":191},[167,142132,11840],{"class":173},[167,142134,142135],{"class":169,"line":512},[167,142136,3492],{"class":173},[167,142138,142139],{"class":169,"line":781},[167,142140,209],{"emptyLinePlaceholder":208},[167,142142,142143,142145,142147,142149,142151],{"class":169,"line":786},[167,142144,2544],{"class":191},[167,142146,11815],{"class":173},[167,142148,2550],{"class":191},[167,142150,11687],{"class":201},[167,142152,258],{"class":173},[167,142154,142155,142157,142159,142161,142163,142165,142167],{"class":169,"line":2678},[167,142156,1937],{"class":191},[167,142158,3451],{"class":173},[167,142160,8252],{"class":181},[167,142162,229],{"class":173},[167,142164,5075],{"class":254},[167,142166,8259],{"class":191},[167,142168,11877],{"class":173},[167,142170,142171],{"class":169,"line":2692},[167,142172,3492],{"class":173},[167,142174,142175],{"class":169,"line":3575},[167,142176,209],{"emptyLinePlaceholder":208},[167,142178,142179,142181],{"class":169,"line":5028},[167,142180,1539],{"class":191},[167,142182,11892],{"class":173},[167,142184,142185],{"class":169,"line":5037},[167,142186,403],{"class":173},[167,142188,142189],{"class":169,"line":5046},[167,142190,209],{"emptyLinePlaceholder":208},[167,142192,142193,142195,142197,142199],{"class":169,"line":6756},[167,142194,2523],{"class":191},[167,142196,1432],{"class":191},[167,142198,11909],{"class":181},[167,142200,763],{"class":173},[167,142202,142203,142205,142207],{"class":169,"line":6778},[167,142204,11916],{"class":173},[167,142206,267],{"class":191},[167,142208,11921],{"class":201},[167,142210,142211],{"class":169,"line":6783},[167,142212,209],{"emptyLinePlaceholder":208},[167,142214,142215,142217,142219,142221,142223,142225,142227,142229],{"class":169,"line":6788},[167,142216,1443],{"class":191},[167,142218,6614],{"class":219},[167,142220,223],{"class":191},[167,142222,3009],{"class":191},[167,142224,6621],{"class":181},[167,142226,229],{"class":173},[167,142228,11942],{"class":201},[167,142230,235],{"class":173},[167,142232,142233,142235,142237,142239,142241,142243,142245,142247,142249,142251,142253,142255,142257,142259],{"class":169,"line":6793},[167,142234,1443],{"class":191},[167,142236,11951],{"class":219},[167,142238,223],{"class":191},[167,142240,2526],{"class":173},[167,142242,2927],{"class":191},[167,142244,6683],{"class":173},[167,142246,6686],{"class":181},[167,142248,6689],{"class":173},[167,142250,6692],{"class":191},[167,142252,577],{"class":173},[167,142254,11970],{"class":254},[167,142256,583],{"class":191},[167,142258,11605],{"class":181},[167,142260,11977],{"class":173},[167,142262,142263],{"class":169,"line":6809},[167,142264,209],{"emptyLinePlaceholder":208},[167,142266,142267,142269,142271],{"class":169,"line":6824},[167,142268,11986],{"class":173},[167,142270,267],{"class":191},[167,142272,11991],{"class":173},[167,142274,142275,142277,142279,142281,142283,142285,142287,142289,142291],{"class":169,"line":6829},[167,142276,11996],{"class":173},[167,142278,267],{"class":191},[167,142280,4224],{"class":191},[167,142282,12003],{"class":181},[167,142284,2503],{"class":173},[167,142286,12008],{"class":181},[167,142288,229],{"class":173},[167,142290,12013],{"class":201},[167,142292,235],{"class":173},[167,142294,142295,142297,142299],{"class":169,"line":6836},[167,142296,11916],{"class":173},[167,142298,267],{"class":191},[167,142300,12024],{"class":201},[167,142302,142303],{"class":169,"line":6845},[167,142304,276],{"class":173},[167,142306,142307],{"class":169,"line":6854},[167,142308,209],{"emptyLinePlaceholder":208},[167,142310,142311,142313,142315],{"class":169,"line":6861},[167,142312,246],{"class":191},[167,142314,12039],{"class":181},[167,142316,763],{"class":173},[167,142318,142319,142321,142323,142325,142327,142329],{"class":169,"line":6879},[167,142320,2544],{"class":191},[167,142322,12048],{"class":173},[167,142324,701],{"class":191},[167,142326,6567],{"class":219},[167,142328,693],{"class":173},[167,142330,2556],{"class":191},[167,142332,142333],{"class":169,"line":6884},[167,142334,209],{"emptyLinePlaceholder":208},[167,142336,142337,142339,142341,142343,142345,142347],{"class":169,"line":6889},[167,142338,12065],{"class":173},[167,142340,267],{"class":191},[167,142342,12070],{"class":181},[167,142344,1493],{"class":173},[167,142346,639],{"class":191},[167,142348,1905],{"class":173},[167,142350,142351,142353,142355],{"class":169,"line":6898},[167,142352,12081],{"class":191},[167,142354,11909],{"class":181},[167,142356,2917],{"class":173},[167,142358,142359,142361,142363],{"class":169,"line":6903},[167,142360,1957],{"class":173},[167,142362,12092],{"class":219},[167,142364,235],{"class":173},[167,142366,142367],{"class":169,"line":6912},[167,142368,276],{"class":173},[167,142370,142371],{"class":169,"line":6928},[167,142372,209],{"emptyLinePlaceholder":208},[167,142374,142375,142377,142379],{"class":169,"line":6949},[167,142376,246],{"class":191},[167,142378,12109],{"class":181},[167,142380,763],{"class":173},[167,142382,142383,142385,142387,142389,142391,142393],{"class":169,"line":6954},[167,142384,2544],{"class":191},[167,142386,12048],{"class":173},[167,142388,2550],{"class":191},[167,142390,6567],{"class":219},[167,142392,693],{"class":173},[167,142394,2556],{"class":191},[167,142396,142397],{"class":169,"line":6975},[167,142398,209],{"emptyLinePlaceholder":208},[167,142400,142401,142403],{"class":169,"line":6989},[167,142402,12134],{"class":181},[167,142404,12137],{"class":173},[167,142406,142407,142409,142411],{"class":169,"line":7003},[167,142408,12065],{"class":173},[167,142410,267],{"class":191},[167,142412,12146],{"class":219},[167,142414,142415],{"class":169,"line":7017},[167,142416,276],{"class":173},[167,142418,142419],{"class":169,"line":7026},[167,142420,209],{"emptyLinePlaceholder":208},[167,142422,142423,142425,142427,142429],{"class":169,"line":7031},[167,142424,6796],{"class":181},[167,142426,1493],{"class":173},[167,142428,639],{"class":191},[167,142430,1905],{"class":173},[167,142432,142433,142435,142437],{"class":169,"line":7048},[167,142434,12169],{"class":173},[167,142436,267],{"class":191},[167,142438,3487],{"class":219},[167,142440,142441],{"class":169,"line":7057},[167,142442,403],{"class":173},[167,142444,142445],{"class":169,"line":7555},[167,142446,209],{"emptyLinePlaceholder":208},[167,142448,142449,142451,142453,142455,142457,142459],{"class":169,"line":7560},[167,142450,12186],{"class":181},[167,142452,229],{"class":173},[167,142454,2523],{"class":191},[167,142456,1469],{"class":173},[167,142458,639],{"class":191},[167,142460,1905],{"class":173},[167,142462,142463,142465,142467,142469,142471,142473,142475],{"class":169,"line":7579},[167,142464,11916],{"class":173},[167,142466,267],{"class":191},[167,142468,12205],{"class":173},[167,142470,8316],{"class":191},[167,142472,12210],{"class":201},[167,142474,5312],{"class":191},[167,142476,12215],{"class":201},[167,142478,142479,142481,142483],{"class":169,"line":7592},[167,142480,2575],{"class":191},[167,142482,11909],{"class":181},[167,142484,2917],{"class":173},[167,142486,142487,142489],{"class":169,"line":7605},[167,142488,12228],{"class":181},[167,142490,2917],{"class":173},[167,142492,142493],{"class":169,"line":7618},[167,142494,403],{"class":173},[167,142496,142497],{"class":169,"line":7627},[167,142498,209],{"emptyLinePlaceholder":208},[167,142500,142501,142503,142505,142507],{"class":169,"line":7632},[167,142502,12243],{"class":181},[167,142504,1493],{"class":173},[167,142506,639],{"class":191},[167,142508,1905],{"class":173},[167,142510,142511,142513,142515],{"class":169,"line":7647},[167,142512,11916],{"class":173},[167,142514,267],{"class":191},[167,142516,12258],{"class":201},[167,142518,142519,142521],{"class":169,"line":7656},[167,142520,12263],{"class":181},[167,142522,2917],{"class":173},[167,142524,142525],{"class":169,"line":10073},[167,142526,403],{"class":173},[167,142528,142529,142531,142533],{"class":169,"line":10084},[167,142530,282],{"class":173},[167,142532,178],{"class":177},[167,142534,185],{"class":173},[167,142536,142537],{"class":169,"line":10089},[167,142538,209],{"emptyLinePlaceholder":208},[167,142540,142541,142543,142545],{"class":169,"line":10098},[167,142542,174],{"class":173},[167,142544,299],{"class":177},[167,142546,185],{"class":173},[167,142548,142549,142551,142553,142555,142557,142559],{"class":169,"line":10103},[167,142550,307],{"class":173},[167,142552,10117],{"class":177},[167,142554,1245],{"class":181},[167,142556,267],{"class":173},[167,142558,12302],{"class":201},[167,142560,185],{"class":173},[167,142562,142563,142565,142567],{"class":169,"line":10112},[167,142564,1257],{"class":173},[167,142566,1260],{"class":177},[167,142568,185],{"class":173},[167,142570,142571,142573,142575,142577,142579],{"class":169,"line":10129},[167,142572,1268],{"class":173},[167,142574,22],{"class":177},[167,142576,12321],{"class":173},[167,142578,22],{"class":177},[167,142580,185],{"class":173},[167,142582,142583,142585,142587,142589,142591],{"class":169,"line":10138},[167,142584,1268],{"class":173},[167,142586,15],{"class":177},[167,142588,12334],{"class":173},[167,142590,15],{"class":177},[167,142592,185],{"class":173},[167,142594,142595,142597,142599,142601,142603,142605,142607,142609],{"class":169,"line":10152},[167,142596,1268],{"class":173},[167,142598,15],{"class":177},[167,142600,5694],{"class":181},[167,142602,267],{"class":173},[167,142604,12351],{"class":201},[167,142606,12354],{"class":173},[167,142608,15],{"class":177},[167,142610,185],{"class":173},[167,142612,142613,142615,142617],{"class":169,"line":10161},[167,142614,1292],{"class":173},[167,142616,1260],{"class":177},[167,142618,185],{"class":173},[167,142620,142621],{"class":169,"line":10167},[167,142622,209],{"emptyLinePlaceholder":208},[167,142624,142625,142627,142629,142631,142633,142635],{"class":169,"line":10177},[167,142626,1257],{"class":173},[167,142628,5691],{"class":177},[167,142630,1245],{"class":181},[167,142632,267],{"class":173},[167,142634,12383],{"class":201},[167,142636,185],{"class":173},[167,142638,142639,142641,142643,142645,142647,142649,142651,142653],{"class":169,"line":10186},[167,142640,1268],{"class":173},[167,142642,507],{"class":177},[167,142644,1182],{"class":181},[167,142646,267],{"class":173},[167,142648,12398],{"class":201},[167,142650,12401],{"class":173},[167,142652,507],{"class":177},[167,142654,185],{"class":173},[167,142656,142657,142659,142661,142663,142665,142667,142669,142671],{"class":169,"line":10191},[167,142658,1268],{"class":173},[167,142660,507],{"class":177},[167,142662,1182],{"class":181},[167,142664,267],{"class":173},[167,142666,12418],{"class":201},[167,142668,12421],{"class":173},[167,142670,507],{"class":177},[167,142672,185],{"class":173},[167,142674,142675,142677,142679,142681,142683,142685,142687,142689],{"class":169,"line":10214},[167,142676,1268],{"class":173},[167,142678,507],{"class":177},[167,142680,1182],{"class":181},[167,142682,267],{"class":173},[167,142684,12438],{"class":201},[167,142686,12441],{"class":173},[167,142688,507],{"class":177},[167,142690,185],{"class":173},[167,142692,142693,142695,142697],{"class":169,"line":10228},[167,142694,1292],{"class":173},[167,142696,5691],{"class":177},[167,142698,185],{"class":173},[167,142700,142701],{"class":169,"line":10241},[167,142702,209],{"emptyLinePlaceholder":208},[167,142704,142705,142707,142709],{"class":169,"line":10256},[167,142706,1257],{"class":173},[167,142708,33],{"class":177},[167,142710,185],{"class":173},[167,142712,142713,142715],{"class":169,"line":10283},[167,142714,1268],{"class":173},[167,142716,12472],{"class":177},[167,142718,142719,142721,142723],{"class":169,"line":10292},[167,142720,12477],{"class":181},[167,142722,267],{"class":173},[167,142724,12482],{"class":201},[167,142726,142727,142729,142731],{"class":169,"line":10297},[167,142728,12487],{"class":181},[167,142730,267],{"class":173},[167,142732,3546],{"class":201},[167,142734,142735],{"class":169,"line":10317},[167,142736,10532],{"class":173},[167,142738,142739],{"class":169,"line":10326},[167,142740,12500],{"class":173},[167,142742,142743,142745,142747],{"class":169,"line":10981},[167,142744,10170],{"class":173},[167,142746,36],{"class":177},[167,142748,185],{"class":173},[167,142750,142751,142753,142755],{"class":169,"line":10994},[167,142752,1292],{"class":173},[167,142754,33],{"class":177},[167,142756,185],{"class":173},[167,142758,142759,142761,142763],{"class":169,"line":11007},[167,142760,504],{"class":173},[167,142762,10117],{"class":177},[167,142764,185],{"class":173},[167,142766,142767,142769,142771],{"class":169,"line":11032},[167,142768,282],{"class":173},[167,142770,299],{"class":177},[167,142772,185],{"class":173},[154,142774,142775],{"className":156,"code":12535,"filename":12536,"language":162,"meta":163,"style":163},[87,142776,142777,142785,142793,142799,142805,142809,142817,142825,142833,142841,142847,142851,142855,142859,142863,142869,142885,142905,142909,142913,142929,142947,142951,142955,142963,142967,142971,142975,142981,142991,142995,142999,143007,143027,143039,143049,143053,143057,143063,143073,143083,143087,143091,143095,143103,143113,143117,143135,143151,143155,143165,143187,143197,143201,143205,143211,143229,143233,143249,143261,143269,143273,143277,143283,143301,143305,143315,143325,143329,143333,143337,143345,143349,143357,143371,143379,143391,143403,143421,143429,143433,143447,143465,143483,143501,143509,143513,143521,143527,143535,143543,143547,143551,143559,143567,143575],{"__ignoreMap":163},[167,142778,142779,142781,142783],{"class":169,"line":170},[167,142780,174],{"class":173},[167,142782,178],{"class":177},[167,142784,185],{"class":173},[167,142786,142787,142789,142791],{"class":169,"line":188},[167,142788,608],{"class":191},[167,142790,3991],{"class":191},[167,142792,1905],{"class":173},[167,142794,142795,142797],{"class":169,"line":205},[167,142796,7176],{"class":181},[167,142798,763],{"class":173},[167,142800,142801,142803],{"class":169,"line":160},[167,142802,1937],{"class":191},[167,142804,1905],{"class":173},[167,142806,142807],{"class":169,"line":238},[167,142808,12571],{"class":173},[167,142810,142811,142813,142815],{"class":169,"line":243},[167,142812,12576],{"class":173},[167,142814,232],{"class":201},[167,142816,393],{"class":173},[167,142818,142819,142821,142823],{"class":169,"line":261},[167,142820,12585],{"class":173},[167,142822,11709],{"class":201},[167,142824,393],{"class":173},[167,142826,142827,142829,142831],{"class":169,"line":273},[167,142828,12594],{"class":173},[167,142830,6573],{"class":219},[167,142832,393],{"class":173},[167,142834,142835,142837,142839],{"class":169,"line":279},[167,142836,12603],{"class":173},[167,142838,6573],{"class":219},[167,142840,393],{"class":173},[167,142842,142843,142845],{"class":169,"line":289},[167,142844,12612],{"class":173},[167,142846,8093],{"class":219},[167,142848,142849],{"class":169,"line":294},[167,142850,4049],{"class":173},[167,142852,142853],{"class":169,"line":304},[167,142854,398],{"class":173},[167,142856,142857],{"class":169,"line":313},[167,142858,209],{"emptyLinePlaceholder":208},[167,142860,142861],{"class":169,"line":161},[167,142862,8755],{"class":173},[167,142864,142865,142867],{"class":169,"line":335},[167,142866,8760],{"class":181},[167,142868,763],{"class":173},[167,142870,142871,142873,142875,142877,142879,142881,142883],{"class":169,"line":341},[167,142872,7261],{"class":191},[167,142874,2526],{"class":173},[167,142876,4927],{"class":219},[167,142878,12647],{"class":173},[167,142880,2550],{"class":191},[167,142882,11682],{"class":201},[167,142884,258],{"class":173},[167,142886,142887,142889,142891,142893,142895,142897,142899,142901,142903],{"class":169,"line":489},[167,142888,8855],{"class":191},[167,142890,7351],{"class":219},[167,142892,8772],{"class":173},[167,142894,8252],{"class":181},[167,142896,229],{"class":173},[167,142898,5075],{"class":254},[167,142900,8259],{"class":191},[167,142902,5625],{"class":191},[167,142904,11840],{"class":173},[167,142906,142907],{"class":169,"line":495},[167,142908,7287],{"class":173},[167,142910,142911],{"class":169,"line":501},[167,142912,209],{"emptyLinePlaceholder":208},[167,142914,142915,142917,142919,142921,142923,142925,142927],{"class":169,"line":512},[167,142916,7261],{"class":191},[167,142918,2526],{"class":173},[167,142920,4927],{"class":219},[167,142922,12647],{"class":173},[167,142924,2550],{"class":191},[167,142926,11687],{"class":201},[167,142928,258],{"class":173},[167,142930,142931,142933,142935,142937,142939,142941,142943,142945],{"class":169,"line":781},[167,142932,8855],{"class":191},[167,142934,7351],{"class":219},[167,142936,8772],{"class":173},[167,142938,8252],{"class":181},[167,142940,229],{"class":173},[167,142942,5075],{"class":254},[167,142944,8259],{"class":191},[167,142946,11877],{"class":173},[167,142948,142949],{"class":169,"line":786},[167,142950,7287],{"class":173},[167,142952,142953],{"class":169,"line":2678},[167,142954,209],{"emptyLinePlaceholder":208},[167,142956,142957,142959,142961],{"class":169,"line":2692},[167,142958,8767],{"class":191},[167,142960,7351],{"class":219},[167,142962,12732],{"class":173},[167,142964,142965],{"class":169,"line":3575},[167,142966,4049],{"class":173},[167,142968,142969],{"class":169,"line":5028},[167,142970,398],{"class":173},[167,142972,142973],{"class":169,"line":5037},[167,142974,209],{"emptyLinePlaceholder":208},[167,142976,142977,142979],{"class":169,"line":5046},[167,142978,12749],{"class":181},[167,142980,763],{"class":173},[167,142982,142983,142985,142987,142989],{"class":169,"line":6756},[167,142984,879],{"class":219},[167,142986,12758],{"class":173},[167,142988,267],{"class":191},[167,142990,3487],{"class":219},[167,142992,142993],{"class":169,"line":6778},[167,142994,398],{"class":173},[167,142996,142997],{"class":169,"line":6783},[167,142998,209],{"emptyLinePlaceholder":208},[167,143000,143001,143003,143005],{"class":169,"line":6788},[167,143002,7331],{"class":191},[167,143004,12777],{"class":181},[167,143006,763],{"class":173},[167,143008,143009,143011,143013,143015,143017,143019,143021,143023,143025],{"class":169,"line":6793},[167,143010,879],{"class":219},[167,143012,12786],{"class":173},[167,143014,267],{"class":191},[167,143016,7351],{"class":219},[167,143018,12758],{"class":173},[167,143020,8316],{"class":191},[167,143022,12210],{"class":201},[167,143024,5312],{"class":191},[167,143026,12215],{"class":201},[167,143028,143029,143031,143033,143035,143037],{"class":169,"line":6809},[167,143030,6730],{"class":191},[167,143032,7351],{"class":219},[167,143034,1679],{"class":173},[167,143036,12811],{"class":181},[167,143038,2917],{"class":173},[167,143040,143041,143043,143045,143047],{"class":169,"line":6824},[167,143042,879],{"class":219},[167,143044,1679],{"class":173},[167,143046,12822],{"class":181},[167,143048,2917],{"class":173},[167,143050,143051],{"class":169,"line":6829},[167,143052,398],{"class":173},[167,143054,143055],{"class":169,"line":6836},[167,143056,209],{"emptyLinePlaceholder":208},[167,143058,143059,143061],{"class":169,"line":6845},[167,143060,12837],{"class":181},[167,143062,763],{"class":173},[167,143064,143065,143067,143069,143071],{"class":169,"line":6854},[167,143066,879],{"class":219},[167,143068,12786],{"class":173},[167,143070,267],{"class":191},[167,143072,12258],{"class":201},[167,143074,143075,143077,143079,143081],{"class":169,"line":6861},[167,143076,879],{"class":219},[167,143078,1679],{"class":173},[167,143080,12858],{"class":181},[167,143082,2917],{"class":173},[167,143084,143085],{"class":169,"line":6879},[167,143086,398],{"class":173},[167,143088,143089],{"class":169,"line":6884},[167,143090,209],{"emptyLinePlaceholder":208},[167,143092,143093],{"class":169,"line":6889},[167,143094,4419],{"class":173},[167,143096,143097,143099,143101],{"class":169,"line":6898},[167,143098,7230],{"class":191},[167,143100,11909],{"class":181},[167,143102,763],{"class":173},[167,143104,143105,143107,143109,143111],{"class":169,"line":6903},[167,143106,741],{"class":219},[167,143108,12786],{"class":173},[167,143110,267],{"class":191},[167,143112,11921],{"class":201},[167,143114,143115],{"class":169,"line":6912},[167,143116,209],{"emptyLinePlaceholder":208},[167,143118,143119,143121,143123,143125,143127,143129,143131,143133],{"class":169,"line":6928},[167,143120,4435],{"class":191},[167,143122,6614],{"class":219},[167,143124,223],{"class":191},[167,143126,3009],{"class":191},[167,143128,6621],{"class":181},[167,143130,229],{"class":173},[167,143132,11942],{"class":201},[167,143134,235],{"class":173},[167,143136,143137,143139,143141,143143,143145,143147,143149],{"class":169,"line":6949},[167,143138,4435],{"class":191},[167,143140,11951],{"class":219},[167,143142,223],{"class":191},[167,143144,3009],{"class":191},[167,143146,6683],{"class":173},[167,143148,6686],{"class":181},[167,143150,2917],{"class":173},[167,143152,143153],{"class":169,"line":6954},[167,143154,209],{"emptyLinePlaceholder":208},[167,143156,143157,143159,143161,143163],{"class":169,"line":6975},[167,143158,741],{"class":219},[167,143160,12939],{"class":173},[167,143162,267],{"class":191},[167,143164,11991],{"class":173},[167,143166,143167,143169,143171,143173,143175,143177,143179,143181,143183,143185],{"class":169,"line":6989},[167,143168,741],{"class":219},[167,143170,12950],{"class":173},[167,143172,267],{"class":191},[167,143174,4224],{"class":191},[167,143176,12003],{"class":181},[167,143178,2503],{"class":173},[167,143180,12008],{"class":181},[167,143182,229],{"class":173},[167,143184,12013],{"class":201},[167,143186,235],{"class":173},[167,143188,143189,143191,143193,143195],{"class":169,"line":7003},[167,143190,741],{"class":219},[167,143192,12786],{"class":173},[167,143194,267],{"class":191},[167,143196,12024],{"class":201},[167,143198,143199],{"class":169,"line":7017},[167,143200,755],{"class":173},[167,143202,143203],{"class":169,"line":7026},[167,143204,209],{"emptyLinePlaceholder":208},[167,143206,143207,143209],{"class":169,"line":7031},[167,143208,12989],{"class":181},[167,143210,763],{"class":173},[167,143212,143213,143215,143217,143219,143221,143223,143225,143227],{"class":169,"line":7048},[167,143214,7261],{"class":191},[167,143216,2526],{"class":173},[167,143218,4927],{"class":219},[167,143220,13002],{"class":173},[167,143222,701],{"class":191},[167,143224,6567],{"class":219},[167,143226,693],{"class":173},[167,143228,2556],{"class":191},[167,143230,143231],{"class":169,"line":7057},[167,143232,209],{"emptyLinePlaceholder":208},[167,143234,143235,143237,143239,143241,143243,143245,143247],{"class":169,"line":7555},[167,143236,741],{"class":219},[167,143238,13002],{"class":173},[167,143240,267],{"class":191},[167,143242,12070],{"class":181},[167,143244,1493],{"class":173},[167,143246,639],{"class":191},[167,143248,1905],{"class":173},[167,143250,143251,143253,143255,143257,143259],{"class":169,"line":7560},[167,143252,13035],{"class":191},[167,143254,7351],{"class":219},[167,143256,1679],{"class":173},[167,143258,12811],{"class":181},[167,143260,2917],{"class":173},[167,143262,143263,143265,143267],{"class":169,"line":7579},[167,143264,13048],{"class":173},[167,143266,12092],{"class":219},[167,143268,235],{"class":173},[167,143270,143271],{"class":169,"line":7592},[167,143272,755],{"class":173},[167,143274,143275],{"class":169,"line":7605},[167,143276,209],{"emptyLinePlaceholder":208},[167,143278,143279,143281],{"class":169,"line":7618},[167,143280,13065],{"class":181},[167,143282,763],{"class":173},[167,143284,143285,143287,143289,143291,143293,143295,143297,143299],{"class":169,"line":7627},[167,143286,7261],{"class":191},[167,143288,2526],{"class":173},[167,143290,4927],{"class":219},[167,143292,13002],{"class":173},[167,143294,2550],{"class":191},[167,143296,6567],{"class":219},[167,143298,693],{"class":173},[167,143300,2556],{"class":191},[167,143302,143303],{"class":169,"line":7632},[167,143304,209],{"emptyLinePlaceholder":208},[167,143306,143307,143309,143311,143313],{"class":169,"line":7647},[167,143308,13094],{"class":181},[167,143310,229],{"class":173},[167,143312,4927],{"class":219},[167,143314,13101],{"class":173},[167,143316,143317,143319,143321,143323],{"class":169,"line":7656},[167,143318,741],{"class":219},[167,143320,13002],{"class":173},[167,143322,267],{"class":191},[167,143324,12146],{"class":219},[167,143326,143327],{"class":169,"line":10073},[167,143328,4049],{"class":173},[167,143330,143331],{"class":169,"line":10084},[167,143332,3492],{"class":173},[167,143334,143335],{"class":169,"line":10089},[167,143336,276],{"class":173},[167,143338,143339,143341,143343],{"class":169,"line":10098},[167,143340,282],{"class":173},[167,143342,178],{"class":177},[167,143344,185],{"class":173},[167,143346,143347],{"class":169,"line":10103},[167,143348,209],{"emptyLinePlaceholder":208},[167,143350,143351,143353,143355],{"class":169,"line":10112},[167,143352,174],{"class":173},[167,143354,299],{"class":177},[167,143356,185],{"class":173},[167,143358,143359,143361,143363,143365,143367,143369],{"class":169,"line":10129},[167,143360,307],{"class":173},[167,143362,10117],{"class":177},[167,143364,1245],{"class":181},[167,143366,267],{"class":173},[167,143368,12302],{"class":201},[167,143370,185],{"class":173},[167,143372,143373,143375,143377],{"class":169,"line":10138},[167,143374,1257],{"class":173},[167,143376,1260],{"class":177},[167,143378,185],{"class":173},[167,143380,143381,143383,143385,143387,143389],{"class":169,"line":10152},[167,143382,1268],{"class":173},[167,143384,22],{"class":177},[167,143386,12321],{"class":173},[167,143388,22],{"class":177},[167,143390,185],{"class":173},[167,143392,143393,143395,143397,143399,143401],{"class":169,"line":10161},[167,143394,1268],{"class":173},[167,143396,15],{"class":177},[167,143398,12334],{"class":173},[167,143400,15],{"class":177},[167,143402,185],{"class":173},[167,143404,143405,143407,143409,143411,143413,143415,143417,143419],{"class":169,"line":10167},[167,143406,1268],{"class":173},[167,143408,15],{"class":177},[167,143410,5694],{"class":181},[167,143412,267],{"class":173},[167,143414,12351],{"class":201},[167,143416,12354],{"class":173},[167,143418,15],{"class":177},[167,143420,185],{"class":173},[167,143422,143423,143425,143427],{"class":169,"line":10177},[167,143424,1292],{"class":173},[167,143426,1260],{"class":177},[167,143428,185],{"class":173},[167,143430,143431],{"class":169,"line":10186},[167,143432,209],{"emptyLinePlaceholder":208},[167,143434,143435,143437,143439,143441,143443,143445],{"class":169,"line":10191},[167,143436,1257],{"class":173},[167,143438,5691],{"class":177},[167,143440,1245],{"class":181},[167,143442,267],{"class":173},[167,143444,12383],{"class":201},[167,143446,185],{"class":173},[167,143448,143449,143451,143453,143455,143457,143459,143461,143463],{"class":169,"line":10214},[167,143450,1268],{"class":173},[167,143452,507],{"class":177},[167,143454,1182],{"class":181},[167,143456,267],{"class":173},[167,143458,12398],{"class":201},[167,143460,12401],{"class":173},[167,143462,507],{"class":177},[167,143464,185],{"class":173},[167,143466,143467,143469,143471,143473,143475,143477,143479,143481],{"class":169,"line":10228},[167,143468,1268],{"class":173},[167,143470,507],{"class":177},[167,143472,1182],{"class":181},[167,143474,267],{"class":173},[167,143476,12418],{"class":201},[167,143478,12421],{"class":173},[167,143480,507],{"class":177},[167,143482,185],{"class":173},[167,143484,143485,143487,143489,143491,143493,143495,143497,143499],{"class":169,"line":10241},[167,143486,1268],{"class":173},[167,143488,507],{"class":177},[167,143490,1182],{"class":181},[167,143492,267],{"class":173},[167,143494,12438],{"class":201},[167,143496,12441],{"class":173},[167,143498,507],{"class":177},[167,143500,185],{"class":173},[167,143502,143503,143505,143507],{"class":169,"line":10256},[167,143504,1292],{"class":173},[167,143506,5691],{"class":177},[167,143508,185],{"class":173},[167,143510,143511],{"class":169,"line":10283},[167,143512,209],{"emptyLinePlaceholder":208},[167,143514,143515,143517,143519],{"class":169,"line":10292},[167,143516,1257],{"class":173},[167,143518,33],{"class":177},[167,143520,185],{"class":173},[167,143522,143523,143525],{"class":169,"line":10297},[167,143524,1268],{"class":173},[167,143526,12472],{"class":177},[167,143528,143529,143531,143533],{"class":169,"line":10317},[167,143530,12477],{"class":181},[167,143532,267],{"class":173},[167,143534,12482],{"class":201},[167,143536,143537,143539,143541],{"class":169,"line":10326},[167,143538,12487],{"class":181},[167,143540,267],{"class":173},[167,143542,3546],{"class":201},[167,143544,143545],{"class":169,"line":10981},[167,143546,10532],{"class":173},[167,143548,143549],{"class":169,"line":10994},[167,143550,12500],{"class":173},[167,143552,143553,143555,143557],{"class":169,"line":11007},[167,143554,10170],{"class":173},[167,143556,36],{"class":177},[167,143558,185],{"class":173},[167,143560,143561,143563,143565],{"class":169,"line":11032},[167,143562,1292],{"class":173},[167,143564,33],{"class":177},[167,143566,185],{"class":173},[167,143568,143569,143571,143573],{"class":169,"line":11041},[167,143570,504],{"class":173},[167,143572,10117],{"class":177},[167,143574,185],{"class":173},[167,143576,143577,143579,143581],{"class":169,"line":11046},[167,143578,282],{"class":173},[167,143580,299],{"class":177},[167,143582,185],{"class":173},[33,143584,143585,143589,143593,143595],{},[36,143586,143587,13376],{},[87,143588,11226],{},[36,143590,143591,13381],{},[87,143592,11234],{},[36,143594,13384],{},[36,143596,143597,13389],{},[87,143598,6400],{},[22,143600,7678],{"id":7677},[33,143602,143603,143607,143611,143615,143617],{},[36,143604,143605,13398],{},[87,143606,11158],{},[36,143608,143609,13403],{},[87,143610,11161],{},[36,143612,143613,13408],{},[87,143614,11164],{},[36,143616,13411],{},[36,143618,13414],{},[924,143620,7689],{},{"title":163,"searchDepth":188,"depth":188,"links":143622},[143623,143624,143625,143626,143627,143628,143634,143639],{"id":11150,"depth":188,"text":11151},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":11370,"depth":188,"text":11371},{"id":3084,"depth":188,"text":3085,"children":143629},[143630,143631,143632,143633],{"id":11459,"depth":205,"text":13427},{"id":11476,"depth":205,"text":11477},{"id":11496,"depth":205,"text":13430},{"id":11515,"depth":205,"text":11516},{"id":7996,"depth":188,"text":7997,"children":143635},[143636,143637,143638],{"id":11529,"depth":205,"text":11530},{"id":11542,"depth":205,"text":11543},{"id":11552,"depth":205,"text":11553},{"id":7677,"depth":188,"text":7678},{"updatedAt":13443,"coverCaption":13444,"author":946,"keywords":143641},[3258,13446,11161,11164,13447],[143643],{"headline":11145,"author":143644,"datePublished":13443,"@type":961},{"name":946,"@type":959},{"title":11145,"description":13441},[143647,143648,143649,143650],{"tag":7724,"color":7725},{"tag":13446,"color":13457},{"tag":1625,"color":1639},{"tag":7730,"color":7731},{"id":143652,"title":134546,"body":143653,"cover":17830,"coverAlt":144847,"date":17832,"description":144848,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":144849,"navigation":208,"path":144852,"schemaOrg":144853,"seo":144856,"series":7718,"seriesDescription":129940,"seriesOrder":205,"seriesTitle":129941,"slug":942,"stem":144857,"tags":144858,"__hash__":144863},"blog\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en.md",{"type":8,"value":143654,"toc":144826},[143655,143663,143669,143672,143674,143680,143683,143695,143698,143708,143711,143739,143752,143754,143757,143759,143773,143778,143789,143791,143794,143800,143830,143833,143835,143884,143899,143901,143907,143913,143916,143929,143934,143940,143949,143957,143962,144076,144083,144090,144093,144096,144113,144123,144253,144261,144265,144271,144280,144285,144287,144291,144296,144300,144305,144309,144312,144551,144786,144800,144802,144824],[11,143656,143658,143659,1025,143661,6219],{"id":143657},"vue-lifecycle-mounting-phase-beforemount-mounted","Vue Lifecycle: mounting phase (",[87,143660,16604],{},[87,143662,6393],{},[15,143664,143665,143666,143668],{},"Many day-to-day problems in Vue come from the same source: trying to interact with the DOM too early or piling logic into ",[87,143667,6393],{}," that could have run earlier.",[15,143670,143671],{},"The mounting phase is exactly where that boundary sits. It is the moment when Vue stops preparing the component internally and finally inserts it into the page. Understanding that transition makes it easier to decide when to focus an input, when to initialize an external library, and when you simply do not need any hook at all.",[22,143673,57681],{"id":57680},[15,143675,143676,143677,1679],{},"During the mounting phase, Vue already has the component reactivity in place: props, state, watchers, and the render tree are ready. What changes at this stage is that ",[3933,143678,143679],{},"the real DOM starts to exist",[15,143681,143682],{},"This is where two classic lifecycle hooks appear:",[33,143684,143685,143690],{},[36,143686,143687,143689],{},[87,143688,16604],{},": runs when Vue is about to mount the component, but the real DOM has not been inserted yet.",[36,143691,143692,143694],{},[87,143693,6393],{},": runs when the component has already been mounted and you can interact with real DOM nodes.",[15,143696,143697],{},"If you are working with the Composition API, the equivalents are:",[33,143699,143700,143704],{},[36,143701,143702],{},[87,143703,16648],{},[36,143705,143706],{},[87,143707,6400],{},[15,143709,143710],{},"A practical way to think about it:",[33,143712,143713,143722,143731],{},[36,143714,143715,143716,143719,143720,1679],{},"If you need to prepare ",[3933,143717,143718],{},"state or logic that does not depend on the DOM",", that usually belongs in ",[87,143721,16667],{},[36,143723,143724,143725,1025,143728,143730],{},"If you need to ",[3933,143726,143727],{},"interact with real interface elements",[87,143729,6393],{}," is usually the natural place.",[36,143732,143733,143734,143736,143737,1679],{},"If you are considering ",[87,143735,16604],{},", it is worth checking whether that code fits better earlier, for example inside ",[87,143738,16667],{},[15,143740,143741,143742,143751],{},"Also, in SSR applications, ",[3933,143743,143744,143745,143747,143748,143750],{},"neither ",[87,143746,16604],{}," nor ",[87,143749,6393],{}," runs on the server",". These hooks exist only on the client.",[22,143753,57775],{"id":57774},[15,143755,143756],{},"The mounting phase makes sense when the component needs to cross the boundary between reactive state and the real browser environment.",[15,143758,80740],{},[33,143760,143761,143764,143767,143770],{},[36,143762,143763],{},"Focusing a search field when the view appears.",[36,143765,143766],{},"Initializing an external library that needs a DOM container, such as a chart or editor.",[36,143768,143769],{},"Measuring sizes, positions, or scroll after the first render.",[36,143771,143772],{},"Registering browser API integrations that depend on real DOM nodes.",[15,143774,143775,143777],{},[87,143776,16604],{}," sees much less use in practice, but it can still help when you need to:",[33,143779,143780,143783,143786],{},[36,143781,143782],{},"Leave debug traces or performance markers before mounting.",[36,143784,143785],{},"Adjust some state right before the first browser render happens.",[36,143787,143788],{},"Prepare integrations that need to know mounting is imminent, even if they do not touch the DOM yet.",[22,143790,57799],{"id":57798},[15,143792,143793],{},"Not everything should be solved in this phase.",[15,143795,80766,143796,57920,143798,68578],{},[87,143797,16604],{},[87,143799,6393],{},[33,143801,143802,143808,143818,143824],{},[36,143803,143804,143805,1679],{},"You are only loading data that ",[3933,143806,143807],{},"does not depend on the DOM",[36,143809,143810,143811,103445,143813,143815,143816,1679],{},"The logic belongs in a ",[87,143812,1665],{},[87,143814,1661],{},", or a ",[3933,143817,16763],{},[36,143819,143820,143821,143823],{},"You are using ",[87,143822,6393],{}," as a dumping ground for \"whatever was left\".",[36,143825,143826,143827,1679],{},"You need logic that must work with ",[3933,143828,143829],{},"SSR from the first render",[15,143831,143832],{},"If the work can happen before mounting, it is usually better to do it earlier. That way the component reaches the screen in a cleaner state and the first render is not burdened with unnecessary tasks.",[22,143834,91741],{"id":91740},[56,143836,143837,143852],{},[59,143838,143839],{},[62,143840,143841,143843,143846,143849],{},[65,143842,11380],{},[65,143844,143845],{},"What already exists",[65,143847,143848],{},"What you still should not assume",[65,143850,143851],{},"Typical use",[75,143853,143854,143869],{},[62,143855,143856,143860,143863,143866],{},[80,143857,143858],{},[87,143859,16604],{},[80,143861,143862],{},"Reactive state, props, methods, and prepared render output",[80,143864,143865],{},"Real DOM availability",[80,143867,143868],{},"Very targeted logic right before mounting",[62,143870,143871,143875,143878,143881],{},[80,143872,143873],{},[87,143874,6393],{},[80,143876,143877],{},"Component inserted into the DOM",[80,143879,143880],{},"That external libraries or async work have already finished on their own",[80,143882,143883],{},"Focusing, measuring, integrating browser APIs",[15,143885,143886,143887,143889,143890,143892,143893,143895,143896,1679],{},"In most modern projects, ",[87,143888,6393],{}," shows up often and ",[87,143891,16604],{}," very rarely. That does not mean ",[87,143894,16604],{}," is wrong, only that ",[3933,143897,143898],{},"there is usually a better place for that logic",[22,143900,57820],{"id":57819},[3087,143902,143904,143905],{"id":143903},"_1-trying-to-read-or-modify-the-dom-in-beforemount","1. Trying to read or modify the DOM in ",[87,143906,16604],{},[15,143908,143909,143910,143912],{},"This is a classic mistake. In ",[87,143911,16604],{},", Vue is about to mount the component, but the real nodes do not exist yet.",[15,143914,143915],{},"If you need to do something like:",[33,143917,143918,143922,143926],{},[36,143919,143920],{},[87,143921,16868],{},[36,143923,143924],{},[87,143925,16873],{},[36,143927,143928],{},"initialize a library on top of a container",[15,143930,143931,143932,1679],{},"Then you need to wait for ",[87,143933,6393],{},[3087,143935,143937,143938,129485],{"id":143936},"_2-moving-every-initial-load-into-mounted-out-of-habit","2. Moving every initial load into ",[87,143939,6393],{},[15,143941,143942,143943,143945,143946,143948],{},"Not every ",[87,143944,16894],{}," belongs in ",[87,143947,6393],{},". If the request does not depend on the DOM, you can start it earlier and avoid delaying the visual experience for no good reason.",[15,143950,143951,16903,143953,143956],{},[87,143952,6393],{},[3933,143954,143955],{},"is not the main hook",". It is simply the right hook when the real browser environment becomes part of the problem.",[15,143958,143959,143960,583],{},"For example, this kind of logic does not need ",[87,143961,6393],{},[154,143963,143964],{"className":156,"code":16915,"filename":15284,"language":162,"meta":163,"style":163},[87,143965,143966,143982,143992,143996,144008,144012,144022,144040,144054,144058,144062,144068],{"__ignoreMap":163},[167,143967,143968,143970,143972,143974,143976,143978,143980],{"class":169,"line":170},[167,143969,174],{"class":173},[167,143971,178],{"class":177},[167,143973,182],{"class":181},[167,143975,1050],{"class":181},[167,143977,267],{"class":173},[167,143979,1055],{"class":201},[167,143981,185],{"class":173},[167,143983,143984,143986,143988,143990],{"class":169,"line":188},[167,143985,192],{"class":191},[167,143987,195],{"class":173},[167,143989,198],{"class":191},[167,143991,202],{"class":201},[167,143993,143994],{"class":169,"line":205},[167,143995,209],{"emptyLinePlaceholder":208},[167,143997,143998,144000,144002,144004,144006],{"class":169,"line":160},[167,143999,216],{"class":191},[167,144001,16954],{"class":219},[167,144003,223],{"class":191},[167,144005,226],{"class":181},[167,144007,16961],{"class":173},[167,144009,144010],{"class":169,"line":238},[167,144011,209],{"emptyLinePlaceholder":208},[167,144013,144014,144016,144018,144020],{"class":169,"line":243},[167,144015,2523],{"class":191},[167,144017,1432],{"class":191},[167,144019,16974],{"class":181},[167,144021,763],{"class":173},[167,144023,144024,144026,144028,144030,144032,144034,144036,144038],{"class":169,"line":261},[167,144025,1443],{"class":191},[167,144027,16983],{"class":219},[167,144029,223],{"class":191},[167,144031,3009],{"class":191},[167,144033,6621],{"class":181},[167,144035,229],{"class":173},[167,144037,16994],{"class":201},[167,144039,235],{"class":173},[167,144041,144042,144044,144046,144048,144050,144052],{"class":169,"line":273},[167,144043,17001],{"class":173},[167,144045,267],{"class":191},[167,144047,3009],{"class":191},[167,144049,17008],{"class":173},[167,144051,6686],{"class":181},[167,144053,2917],{"class":173},[167,144055,144056],{"class":169,"line":279},[167,144057,276],{"class":173},[167,144059,144060],{"class":169,"line":289},[167,144061,209],{"emptyLinePlaceholder":208},[167,144063,144064,144066],{"class":169,"line":294},[167,144065,17025],{"class":181},[167,144067,2917],{"class":173},[167,144069,144070,144072,144074],{"class":169,"line":304},[167,144071,282],{"class":173},[167,144073,178],{"class":177},[167,144075,185],{"class":173},[5367,144077,144078],{},[15,144079,144080,144081,1679],{},"Here, the load can start directly in ",[87,144082,16667],{},[3087,144084,144086,144087,144089],{"id":144085},"_3-creating-listeners-or-timers-in-mounted-and-forgetting-to-clean-them-up","3. Creating listeners or timers in ",[87,144088,6393],{}," and forgetting to clean them up",[15,144091,144092],{},"This mistake does not show up during mounting, but it shows up later.",[15,144094,144095],{},"If you register:",[33,144097,144098,144101,144105,144109],{},[36,144099,144100],{},"global events",[36,144102,144103],{},[87,144104,11483],{},[36,144106,144107],{},[87,144108,13586],{},[36,144110,144111],{},[87,144112,13761],{},[15,144114,144115,144116,144118,144119,63104,144121,1679],{},"inside ",[87,144117,6393],{},", you should clean them up in ",[87,144120,13472],{},[87,144122,14250],{},[154,144124,144125],{"className":156,"code":17085,"filename":15284,"language":162,"meta":163,"style":163},[87,144126,144127,144143,144153,144157,144167,144171,144181,144197,144209,144217,144221,144225,144235,144241,144245],{"__ignoreMap":163},[167,144128,144129,144131,144133,144135,144137,144139,144141],{"class":169,"line":170},[167,144130,174],{"class":173},[167,144132,178],{"class":177},[167,144134,182],{"class":181},[167,144136,1050],{"class":181},[167,144138,267],{"class":173},[167,144140,1055],{"class":201},[167,144142,185],{"class":173},[167,144144,144145,144147,144149,144151],{"class":169,"line":188},[167,144146,192],{"class":191},[167,144148,17110],{"class":173},[167,144150,198],{"class":191},[167,144152,202],{"class":201},[167,144154,144155],{"class":169,"line":205},[167,144156,209],{"emptyLinePlaceholder":208},[167,144158,144159,144161,144163,144165],{"class":169,"line":160},[167,144160,13948],{"class":191},[167,144162,17125],{"class":173},[167,144164,583],{"class":191},[167,144166,6510],{"class":219},[167,144168,144169],{"class":169,"line":238},[167,144170,209],{"emptyLinePlaceholder":208},[167,144172,144173,144175,144177,144179],{"class":169,"line":243},[167,144174,6796],{"class":181},[167,144176,1493],{"class":173},[167,144178,639],{"class":191},[167,144180,1905],{"class":173},[167,144182,144183,144185,144187,144189,144191,144193,144195],{"class":169,"line":261},[167,144184,17148],{"class":173},[167,144186,267],{"class":191},[167,144188,1498],{"class":173},[167,144190,11483],{"class":181},[167,144192,1493],{"class":173},[167,144194,639],{"class":191},[167,144196,1905],{"class":173},[167,144198,144199,144201,144203,144205,144207],{"class":169,"line":273},[167,144200,8894],{"class":173},[167,144202,2611],{"class":181},[167,144204,229],{"class":173},[167,144206,17171],{"class":201},[167,144208,235],{"class":173},[167,144210,144211,144213,144215],{"class":169,"line":279},[167,144212,1957],{"class":173},[167,144214,17180],{"class":219},[167,144216,235],{"class":173},[167,144218,144219],{"class":169,"line":289},[167,144220,403],{"class":173},[167,144222,144223],{"class":169,"line":294},[167,144224,209],{"emptyLinePlaceholder":208},[167,144226,144227,144229,144231,144233],{"class":169,"line":304},[167,144228,14250],{"class":181},[167,144230,1493],{"class":173},[167,144232,639],{"class":191},[167,144234,1905],{"class":173},[167,144236,144237,144239],{"class":169,"line":313},[167,144238,12134],{"class":181},[167,144240,17207],{"class":173},[167,144242,144243],{"class":169,"line":161},[167,144244,403],{"class":173},[167,144246,144247,144249,144251],{"class":169,"line":335},[167,144248,282],{"class":173},[167,144250,178],{"class":177},[167,144252,185],{"class":173},[5367,144254,144255],{},[15,144256,144257,144258,1679],{},"Mounting well also means ",[3933,144259,144260],{},"being ready for unmounting",[3087,144262,144264],{"id":144263},"_4-assuming-these-hooks-also-run-in-ssr","4. Assuming these hooks also run in SSR",[15,144266,144267,144268,1679],{},"In Nuxt or any server-side rendering flow, these hooks ",[3933,144269,144270],{},"run only on the client",[15,144272,144273,144274,144276,144277,1679],{},"If you put critical initial HTML logic inside ",[87,144275,6393],{},", that logic ",[3933,144278,144279],{},"will not be part of the server's first render",[15,144281,144282,144283,1679],{},"In Nuxt, for example, initial data loading usually lives in composables or helpers such as ",[87,144284,17252],{},[22,144286,57926],{"id":57925},[3087,144288,144290],{"id":144289},"focusing-an-input-when-a-view-opens","Focusing an input when a view opens",[15,144292,144293,144294,1679],{},"This is one of the simplest and most useful examples: the element needs to exist before you can call ",[87,144295,16868],{},[3087,144297,144299],{"id":144298},"initializing-a-third-party-library","Initializing a third-party library",[15,144301,144302,144303,1679],{},"If you use a chart, calendar, or rich text editor, the library normally needs a DOM container. That is a natural job for ",[87,144304,6393],{},[3087,144306,144308],{"id":144307},"measuring-a-block-after-the-first-render","Measuring a block after the first render",[15,144310,144311],{},"Some components need to know their height or width to decide animations, layout, or scroll behavior. That measurement also belongs to the mounting phase.",[154,144313,144315],{"className":156,"code":144314,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeMount, onMounted, ref } from 'vue'\n\nconst searchInput = ref\u003CHTMLInputElement | null>(null)\nconst status = ref('Preparing component...')\n\nonBeforeMount(() => {\n  status.value = 'Vue has prepared the instance, but the input does not exist in the DOM yet.'\n})\n\nonMounted(() => {\n  searchInput.value?.focus()\n  status.value = 'Component mounted. The input can now receive focus.'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"search-panel\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n\n    \u003Cinput\n      ref=\"searchInput\"\n      type=\"search\"\n      placeholder=\"Search tasks\"\n    >\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,144316,144317,144333,144343,144347,144371,144388,144392,144402,144411,144415,144419,144429,144437,144446,144450,144458,144462,144470,144484,144496,144500,144506,144514,144522,144531,144535,144543],{"__ignoreMap":163},[167,144318,144319,144321,144323,144325,144327,144329,144331],{"class":169,"line":170},[167,144320,174],{"class":173},[167,144322,178],{"class":177},[167,144324,182],{"class":181},[167,144326,1050],{"class":181},[167,144328,267],{"class":173},[167,144330,1055],{"class":201},[167,144332,185],{"class":173},[167,144334,144335,144337,144339,144341],{"class":169,"line":188},[167,144336,192],{"class":191},[167,144338,17307],{"class":173},[167,144340,198],{"class":191},[167,144342,202],{"class":201},[167,144344,144345],{"class":169,"line":205},[167,144346,209],{"emptyLinePlaceholder":208},[167,144348,144349,144351,144353,144355,144357,144359,144361,144363,144365,144367,144369],{"class":169,"line":160},[167,144350,216],{"class":191},[167,144352,17322],{"class":219},[167,144354,223],{"class":191},[167,144356,226],{"class":181},[167,144358,174],{"class":173},[167,144360,17331],{"class":181},[167,144362,659],{"class":191},[167,144364,6567],{"class":219},[167,144366,6570],{"class":173},[167,144368,6573],{"class":219},[167,144370,235],{"class":173},[167,144372,144373,144375,144377,144379,144381,144383,144386],{"class":169,"line":238},[167,144374,216],{"class":191},[167,144376,11700],{"class":219},[167,144378,223],{"class":191},[167,144380,226],{"class":181},[167,144382,229],{"class":173},[167,144384,144385],{"class":201},"'Preparing component...'",[167,144387,235],{"class":173},[167,144389,144390],{"class":169,"line":243},[167,144391,209],{"emptyLinePlaceholder":208},[167,144393,144394,144396,144398,144400],{"class":169,"line":261},[167,144395,17367],{"class":181},[167,144397,1493],{"class":173},[167,144399,639],{"class":191},[167,144401,1905],{"class":173},[167,144403,144404,144406,144408],{"class":169,"line":273},[167,144405,11916],{"class":173},[167,144407,267],{"class":191},[167,144409,144410],{"class":201}," 'Vue has prepared the instance, but the input does not exist in the DOM yet.'\n",[167,144412,144413],{"class":169,"line":279},[167,144414,403],{"class":173},[167,144416,144417],{"class":169,"line":289},[167,144418,209],{"emptyLinePlaceholder":208},[167,144420,144421,144423,144425,144427],{"class":169,"line":294},[167,144422,6796],{"class":181},[167,144424,1493],{"class":173},[167,144426,639],{"class":191},[167,144428,1905],{"class":173},[167,144430,144431,144433,144435],{"class":169,"line":304},[167,144432,17405],{"class":173},[167,144434,17408],{"class":181},[167,144436,2917],{"class":173},[167,144438,144439,144441,144443],{"class":169,"line":313},[167,144440,11916],{"class":173},[167,144442,267],{"class":191},[167,144444,144445],{"class":201}," 'Component mounted. The input can now receive focus.'\n",[167,144447,144448],{"class":169,"line":161},[167,144449,403],{"class":173},[167,144451,144452,144454,144456],{"class":169,"line":335},[167,144453,282],{"class":173},[167,144455,178],{"class":177},[167,144457,185],{"class":173},[167,144459,144460],{"class":169,"line":341},[167,144461,209],{"emptyLinePlaceholder":208},[167,144463,144464,144466,144468],{"class":169,"line":489},[167,144465,174],{"class":173},[167,144467,299],{"class":177},[167,144469,185],{"class":173},[167,144471,144472,144474,144476,144478,144480,144482],{"class":169,"line":495},[167,144473,307],{"class":173},[167,144475,10117],{"class":177},[167,144477,1245],{"class":181},[167,144479,267],{"class":173},[167,144481,17456],{"class":201},[167,144483,185],{"class":173},[167,144485,144486,144488,144490,144492,144494],{"class":169,"line":501},[167,144487,1257],{"class":173},[167,144489,15],{"class":177},[167,144491,12334],{"class":173},[167,144493,15],{"class":177},[167,144495,185],{"class":173},[167,144497,144498],{"class":169,"line":512},[167,144499,209],{"emptyLinePlaceholder":208},[167,144501,144502,144504],{"class":169,"line":781},[167,144503,1257],{"class":173},[167,144505,17481],{"class":177},[167,144507,144508,144510,144512],{"class":169,"line":786},[167,144509,15963],{"class":181},[167,144511,267],{"class":173},[167,144513,17490],{"class":201},[167,144515,144516,144518,144520],{"class":169,"line":2678},[167,144517,3739],{"class":181},[167,144519,267],{"class":173},[167,144521,17499],{"class":201},[167,144523,144524,144526,144528],{"class":169,"line":2692},[167,144525,17504],{"class":181},[167,144527,267],{"class":173},[167,144529,144530],{"class":201},"\"Search tasks\"\n",[167,144532,144533],{"class":169,"line":3575},[167,144534,3769],{"class":173},[167,144536,144537,144539,144541],{"class":169,"line":5028},[167,144538,504],{"class":173},[167,144540,10117],{"class":177},[167,144542,185],{"class":173},[167,144544,144545,144547,144549],{"class":169,"line":5037},[167,144546,282],{"class":173},[167,144548,299],{"class":177},[167,144550,185],{"class":173},[154,144552,144554],{"className":156,"code":144553,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      status: 'Preparing component...'\n    }\n  },\n\n  beforeMount() {\n    this.status = 'Vue is about to insert the component DOM.'\n  },\n\n  mounted() {\n    this.status = 'Component mounted. The input can now receive focus.'\n\n    if (this.$refs.searchInput instanceof HTMLInputElement) {\n      this.$refs.searchInput.focus()\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"search-panel\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n\n    \u003Cinput\n      ref=\"searchInput\"\n      type=\"search\"\n      placeholder=\"Search tasks\"\n    >\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,144555,144556,144564,144572,144578,144584,144591,144595,144599,144603,144609,144620,144624,144628,144634,144644,144648,144664,144674,144678,144682,144686,144694,144698,144706,144720,144732,144736,144742,144750,144758,144766,144770,144778],{"__ignoreMap":163},[167,144557,144558,144560,144562],{"class":169,"line":170},[167,144559,174],{"class":173},[167,144561,178],{"class":177},[167,144563,185],{"class":173},[167,144565,144566,144568,144570],{"class":169,"line":188},[167,144567,608],{"class":191},[167,144569,3991],{"class":191},[167,144571,1905],{"class":173},[167,144573,144574,144576],{"class":169,"line":205},[167,144575,7176],{"class":181},[167,144577,763],{"class":173},[167,144579,144580,144582],{"class":169,"line":160},[167,144581,1937],{"class":191},[167,144583,1905],{"class":173},[167,144585,144586,144588],{"class":169,"line":238},[167,144587,12585],{"class":173},[167,144589,144590],{"class":201},"'Preparing component...'\n",[167,144592,144593],{"class":169,"line":243},[167,144594,4049],{"class":173},[167,144596,144597],{"class":169,"line":261},[167,144598,398],{"class":173},[167,144600,144601],{"class":169,"line":273},[167,144602,209],{"emptyLinePlaceholder":208},[167,144604,144605,144607],{"class":169,"line":279},[167,144606,17586],{"class":181},[167,144608,763],{"class":173},[167,144610,144611,144613,144615,144617],{"class":169,"line":289},[167,144612,879],{"class":219},[167,144614,12786],{"class":173},[167,144616,267],{"class":191},[167,144618,144619],{"class":201}," 'Vue is about to insert the component DOM.'\n",[167,144621,144622],{"class":169,"line":294},[167,144623,398],{"class":173},[167,144625,144626],{"class":169,"line":304},[167,144627,209],{"emptyLinePlaceholder":208},[167,144629,144630,144632],{"class":169,"line":313},[167,144631,12749],{"class":181},[167,144633,763],{"class":173},[167,144635,144636,144638,144640,144642],{"class":169,"line":161},[167,144637,879],{"class":219},[167,144639,12786],{"class":173},[167,144641,267],{"class":191},[167,144643,144445],{"class":201},[167,144645,144646],{"class":169,"line":335},[167,144647,209],{"emptyLinePlaceholder":208},[167,144649,144650,144652,144654,144656,144658,144660,144662],{"class":169,"line":341},[167,144651,7419],{"class":191},[167,144653,2526],{"class":173},[167,144655,4927],{"class":219},[167,144657,17638],{"class":173},[167,144659,6762],{"class":191},[167,144661,17643],{"class":181},[167,144663,258],{"class":173},[167,144665,144666,144668,144670,144672],{"class":169,"line":489},[167,144667,741],{"class":219},[167,144669,17652],{"class":173},[167,144671,17408],{"class":181},[167,144673,2917],{"class":173},[167,144675,144676],{"class":169,"line":495},[167,144677,4049],{"class":173},[167,144679,144680],{"class":169,"line":501},[167,144681,3492],{"class":173},[167,144683,144684],{"class":169,"line":512},[167,144685,276],{"class":173},[167,144687,144688,144690,144692],{"class":169,"line":781},[167,144689,282],{"class":173},[167,144691,178],{"class":177},[167,144693,185],{"class":173},[167,144695,144696],{"class":169,"line":786},[167,144697,209],{"emptyLinePlaceholder":208},[167,144699,144700,144702,144704],{"class":169,"line":2678},[167,144701,174],{"class":173},[167,144703,299],{"class":177},[167,144705,185],{"class":173},[167,144707,144708,144710,144712,144714,144716,144718],{"class":169,"line":2692},[167,144709,307],{"class":173},[167,144711,10117],{"class":177},[167,144713,1245],{"class":181},[167,144715,267],{"class":173},[167,144717,17456],{"class":201},[167,144719,185],{"class":173},[167,144721,144722,144724,144726,144728,144730],{"class":169,"line":3575},[167,144723,1257],{"class":173},[167,144725,15],{"class":177},[167,144727,12334],{"class":173},[167,144729,15],{"class":177},[167,144731,185],{"class":173},[167,144733,144734],{"class":169,"line":5028},[167,144735,209],{"emptyLinePlaceholder":208},[167,144737,144738,144740],{"class":169,"line":5037},[167,144739,1257],{"class":173},[167,144741,17481],{"class":177},[167,144743,144744,144746,144748],{"class":169,"line":5046},[167,144745,15963],{"class":181},[167,144747,267],{"class":173},[167,144749,17490],{"class":201},[167,144751,144752,144754,144756],{"class":169,"line":6756},[167,144753,3739],{"class":181},[167,144755,267],{"class":173},[167,144757,17499],{"class":201},[167,144759,144760,144762,144764],{"class":169,"line":6778},[167,144761,17504],{"class":181},[167,144763,267],{"class":173},[167,144765,144530],{"class":201},[167,144767,144768],{"class":169,"line":6783},[167,144769,3769],{"class":173},[167,144771,144772,144774,144776],{"class":169,"line":6788},[167,144773,504],{"class":173},[167,144775,10117],{"class":177},[167,144777,185],{"class":173},[167,144779,144780,144782,144784],{"class":169,"line":6793},[167,144781,282],{"class":173},[167,144783,299],{"class":177},[167,144785,185],{"class":173},[5367,144787,144788],{},[15,144789,144790,144791,144793,144794,144796,144797,144799],{},"Here, ",[87,144792,16648],{}," only updates an informational state. ",[87,144795,16868],{},", on the other hand, stays in ",[87,144798,6400],{}," because it needs a real DOM node.",[22,144801,60191],{"id":60190},[33,144803,144804,144809,144818],{},[36,144805,144806,144808],{},[87,144807,16604],{}," exists, but in most components it will not be your main tool. If you do not need the DOM, it is usually better to solve the logic earlier.",[36,144810,144811,144813,144814,144817],{},[87,144812,6393],{},", on the other hand, has a very clear role: ",[3933,144815,144816],{},"it is the hook where the component meets the real browser",". Inputs, measurements, charts, observers, and third-party libraries often start there.",[36,144819,144820,144821,1679],{},"The best way to use this phase is not to put more into it, but to ",[3933,144822,144823],{},"reserve it only for what truly depends on the DOM",[924,144825,16558],{},{"title":163,"searchDepth":188,"depth":188,"links":144827},[144828,144829,144830,144831,144832,144841,144846],{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":91740,"depth":188,"text":91741},{"id":57819,"depth":188,"text":57820,"children":144833},[144834,144836,144838,144840],{"id":143903,"depth":205,"text":144835},"1. Trying to read or modify the DOM in beforeMount",{"id":143936,"depth":205,"text":144837},"2. Moving every initial load into mounted out of habit",{"id":144085,"depth":205,"text":144839},"3. Creating listeners or timers in mounted and forgetting to clean them up",{"id":144263,"depth":205,"text":144264},{"id":57925,"depth":188,"text":57926,"children":144842},[144843,144844,144845],{"id":144289,"depth":205,"text":144290},{"id":144298,"depth":205,"text":144299},{"id":144307,"depth":205,"text":144308},{"id":60190,"depth":188,"text":60191},"Illustration of a Vue component lifecycle focused on the DOM mounting phase","What happens right before and right after Vue inserts a component into the DOM, and how to use beforeMount and mounted without turning them into a dumping ground.",{"updatedAt":17835,"coverCaption":144850,"author":946,"keywords":144851},"The mounting phase is the moment when Vue creates and inserts the component DOM into the page.",[3258,16604,6393,6796,17838],"\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en",[144854],{"headline":134546,"author":144855,"datePublished":17835,"@type":961},{"name":946,"@type":959},{"title":134546,"description":144848},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.en",[144859,144860,144861,144862],{"tag":129945,"color":7725},{"tag":98745,"color":1639},{"tag":69637,"color":9170},{"tag":65670,"color":5425},"5uh-6RgLyum4IuL1Eyjp9GUu1sSmDc0l7P2QHxsueAc",{"id":16594,"title":16595,"body":144865,"cover":17830,"coverAlt":17831,"date":17832,"description":17833,"draft":940,"extension":941,"lab":942,"locale":943,"meta":145937,"navigation":208,"path":17839,"schemaOrg":145939,"seo":145942,"series":7718,"seriesDescription":7719,"seriesOrder":205,"seriesTitle":7720,"slug":942,"stem":17844,"tags":145943,"__hash__":17850},{"type":8,"value":144866,"toc":145919},[144867,144873,144877,144879,144881,144885,144887,144897,144899,144909,144911,144931,144939,144941,144943,144945,144955,144959,144967,144969,144971,144977,144999,145001,145003,145043,145053,145055,145059,145063,145065,145077,145081,145085,145091,145097,145101,145215,145221,145225,145227,145229,145245,145253,145383,145389,145391,145395,145401,145405,145407,145409,145413,145415,145419,145421,145423,145657,145889,145899,145901,145917],[11,144868,16601,144869,1025,144871,6219],{"id":16600},[87,144870,16604],{},[87,144872,6393],{},[15,144874,16609,144875,16612],{},[87,144876,6393],{},[15,144878,16615],{},[22,144880,6257],{"id":6256},[15,144882,16620,144883,1679],{},[3933,144884,16623],{},[15,144886,16626],{},[33,144888,144889,144893],{},[36,144890,144891,16633],{},[87,144892,16604],{},[36,144894,144895,16638],{},[87,144896,6393],{},[15,144898,16641],{},[33,144900,144901,144905],{},[36,144902,144903],{},[87,144904,16648],{},[36,144906,144907],{},[87,144908,6400],{},[15,144910,16655],{},[33,144912,144913,144919,144925],{},[36,144914,16660,144915,16664,144917,1679],{},[3933,144916,16663],{},[87,144918,16667],{},[36,144920,13600,144921,16673,144923,1679],{},[3933,144922,16672],{},[87,144924,6393],{},[36,144926,16678,144927,16681,144929,1679],{},[87,144928,16604],{},[87,144930,16667],{},[15,144932,16686,144933,16695],{},[3933,144934,16689,144935,6418,144937,16694],{},[87,144936,16604],{},[87,144938,6393],{},[22,144940,6322],{"id":6321},[15,144942,16700],{},[15,144944,9308],{},[33,144946,144947,144949,144951,144953],{},[36,144948,16707],{},[36,144950,16710],{},[36,144952,16713],{},[36,144954,16716],{},[15,144956,144957,16721],{},[87,144958,16604],{},[33,144960,144961,144963,144965],{},[36,144962,16726],{},[36,144964,16729],{},[36,144966,16732],{},[22,144968,6349],{"id":6348},[15,144970,16737],{},[15,144972,13622,144973,1028,144975,13627],{},[87,144974,16604],{},[87,144976,6393],{},[33,144978,144979,144983,144991,144995],{},[36,144980,16748,144981,1679],{},[3933,144982,16751],{},[36,144984,16754,144985,16757,144987,16760,144989,1679],{},[87,144986,1665],{},[87,144988,1661],{},[3933,144990,16763],{},[36,144992,16766,144993,16769],{},[87,144994,6393],{},[36,144996,16772,144997,1679],{},[3933,144998,16775],{},[15,145000,16778],{},[22,145002,13673],{"id":13672},[56,145004,145005,145017],{},[59,145006,145007],{},[62,145008,145009,145011,145013,145015],{},[65,145010,11380],{},[65,145012,16791],{},[65,145014,16794],{},[65,145016,16797],{},[75,145018,145019,145031],{},[62,145020,145021,145025,145027,145029],{},[80,145022,145023],{},[87,145024,16604],{},[80,145026,16808],{},[80,145028,16811],{},[80,145030,16814],{},[62,145032,145033,145037,145039,145041],{},[80,145034,145035],{},[87,145036,6393],{},[80,145038,16823],{},[80,145040,16826],{},[80,145042,16829],{},[15,145044,16832,145045,16835,145047,16838,145049,16841,145051,1679],{},[87,145046,6393],{},[87,145048,16604],{},[87,145050,16604],{},[3933,145052,16844],{},[22,145054,3085],{"id":3084},[3087,145056,16850,145057],{"id":16849},[87,145058,16604],{},[15,145060,16855,145061,16858],{},[87,145062,16604],{},[15,145064,16861],{},[33,145066,145067,145071,145075],{},[36,145068,145069],{},[87,145070,16868],{},[36,145072,145073],{},[87,145074,16873],{},[36,145076,16876],{},[15,145078,16879,145079,1679],{},[87,145080,6393],{},[3087,145082,16885,145083,16888],{"id":16884},[87,145084,6393],{},[15,145086,16891,145087,16895,145089,16898],{},[87,145088,16894],{},[87,145090,6393],{},[15,145092,145093,16903,145095,16907],{},[87,145094,6393],{},[3933,145096,16906],{},[15,145098,16910,145099,583],{},[87,145100,6393],{},[154,145102,145103],{"className":156,"code":16915,"filename":15284,"language":162,"meta":163,"style":163},[87,145104,145105,145121,145131,145135,145147,145151,145161,145179,145193,145197,145201,145207],{"__ignoreMap":163},[167,145106,145107,145109,145111,145113,145115,145117,145119],{"class":169,"line":170},[167,145108,174],{"class":173},[167,145110,178],{"class":177},[167,145112,182],{"class":181},[167,145114,1050],{"class":181},[167,145116,267],{"class":173},[167,145118,1055],{"class":201},[167,145120,185],{"class":173},[167,145122,145123,145125,145127,145129],{"class":169,"line":188},[167,145124,192],{"class":191},[167,145126,195],{"class":173},[167,145128,198],{"class":191},[167,145130,202],{"class":201},[167,145132,145133],{"class":169,"line":205},[167,145134,209],{"emptyLinePlaceholder":208},[167,145136,145137,145139,145141,145143,145145],{"class":169,"line":160},[167,145138,216],{"class":191},[167,145140,16954],{"class":219},[167,145142,223],{"class":191},[167,145144,226],{"class":181},[167,145146,16961],{"class":173},[167,145148,145149],{"class":169,"line":238},[167,145150,209],{"emptyLinePlaceholder":208},[167,145152,145153,145155,145157,145159],{"class":169,"line":243},[167,145154,2523],{"class":191},[167,145156,1432],{"class":191},[167,145158,16974],{"class":181},[167,145160,763],{"class":173},[167,145162,145163,145165,145167,145169,145171,145173,145175,145177],{"class":169,"line":261},[167,145164,1443],{"class":191},[167,145166,16983],{"class":219},[167,145168,223],{"class":191},[167,145170,3009],{"class":191},[167,145172,6621],{"class":181},[167,145174,229],{"class":173},[167,145176,16994],{"class":201},[167,145178,235],{"class":173},[167,145180,145181,145183,145185,145187,145189,145191],{"class":169,"line":273},[167,145182,17001],{"class":173},[167,145184,267],{"class":191},[167,145186,3009],{"class":191},[167,145188,17008],{"class":173},[167,145190,6686],{"class":181},[167,145192,2917],{"class":173},[167,145194,145195],{"class":169,"line":279},[167,145196,276],{"class":173},[167,145198,145199],{"class":169,"line":289},[167,145200,209],{"emptyLinePlaceholder":208},[167,145202,145203,145205],{"class":169,"line":294},[167,145204,17025],{"class":181},[167,145206,2917],{"class":173},[167,145208,145209,145211,145213],{"class":169,"line":304},[167,145210,282],{"class":173},[167,145212,178],{"class":177},[167,145214,185],{"class":173},[5367,145216,145217],{},[15,145218,17040,145219,1679],{},[87,145220,16667],{},[3087,145222,17046,145223,17049],{"id":17045},[87,145224,6393],{},[15,145226,17052],{},[15,145228,17055],{},[33,145230,145231,145233,145237,145241],{},[36,145232,17060],{},[36,145234,145235],{},[87,145236,11483],{},[36,145238,145239],{},[87,145240,13586],{},[36,145242,145243],{},[87,145244,13761],{},[15,145246,17075,145247,17078,145249,90,145251,1679],{},[87,145248,6393],{},[87,145250,13472],{},[87,145252,14250],{},[154,145254,145255],{"className":156,"code":17085,"filename":15284,"language":162,"meta":163,"style":163},[87,145256,145257,145273,145283,145287,145297,145301,145311,145327,145339,145347,145351,145355,145365,145371,145375],{"__ignoreMap":163},[167,145258,145259,145261,145263,145265,145267,145269,145271],{"class":169,"line":170},[167,145260,174],{"class":173},[167,145262,178],{"class":177},[167,145264,182],{"class":181},[167,145266,1050],{"class":181},[167,145268,267],{"class":173},[167,145270,1055],{"class":201},[167,145272,185],{"class":173},[167,145274,145275,145277,145279,145281],{"class":169,"line":188},[167,145276,192],{"class":191},[167,145278,17110],{"class":173},[167,145280,198],{"class":191},[167,145282,202],{"class":201},[167,145284,145285],{"class":169,"line":205},[167,145286,209],{"emptyLinePlaceholder":208},[167,145288,145289,145291,145293,145295],{"class":169,"line":160},[167,145290,13948],{"class":191},[167,145292,17125],{"class":173},[167,145294,583],{"class":191},[167,145296,6510],{"class":219},[167,145298,145299],{"class":169,"line":238},[167,145300,209],{"emptyLinePlaceholder":208},[167,145302,145303,145305,145307,145309],{"class":169,"line":243},[167,145304,6796],{"class":181},[167,145306,1493],{"class":173},[167,145308,639],{"class":191},[167,145310,1905],{"class":173},[167,145312,145313,145315,145317,145319,145321,145323,145325],{"class":169,"line":261},[167,145314,17148],{"class":173},[167,145316,267],{"class":191},[167,145318,1498],{"class":173},[167,145320,11483],{"class":181},[167,145322,1493],{"class":173},[167,145324,639],{"class":191},[167,145326,1905],{"class":173},[167,145328,145329,145331,145333,145335,145337],{"class":169,"line":273},[167,145330,8894],{"class":173},[167,145332,2611],{"class":181},[167,145334,229],{"class":173},[167,145336,17171],{"class":201},[167,145338,235],{"class":173},[167,145340,145341,145343,145345],{"class":169,"line":279},[167,145342,1957],{"class":173},[167,145344,17180],{"class":219},[167,145346,235],{"class":173},[167,145348,145349],{"class":169,"line":289},[167,145350,403],{"class":173},[167,145352,145353],{"class":169,"line":294},[167,145354,209],{"emptyLinePlaceholder":208},[167,145356,145357,145359,145361,145363],{"class":169,"line":304},[167,145358,14250],{"class":181},[167,145360,1493],{"class":173},[167,145362,639],{"class":191},[167,145364,1905],{"class":173},[167,145366,145367,145369],{"class":169,"line":313},[167,145368,12134],{"class":181},[167,145370,17207],{"class":173},[167,145372,145373],{"class":169,"line":161},[167,145374,403],{"class":173},[167,145376,145377,145379,145381],{"class":169,"line":335},[167,145378,282],{"class":173},[167,145380,178],{"class":177},[167,145382,185],{"class":173},[5367,145384,145385],{},[15,145386,17224,145387,1679],{},[3933,145388,17227],{},[3087,145390,17231],{"id":17230},[15,145392,17234,145393,1679],{},[3933,145394,17237],{},[15,145396,17240,145397,17243,145399,1679],{},[87,145398,6393],{},[3933,145400,17246],{},[15,145402,17249,145403,1679],{},[87,145404,17252],{},[22,145406,7997],{"id":7996},[3087,145408,17258],{"id":17257},[15,145410,17261,145411,1679],{},[87,145412,16868],{},[3087,145414,17267],{"id":17266},[15,145416,17270,145417,1679],{},[87,145418,6393],{},[3087,145420,17276],{"id":17275},[15,145422,17279],{},[154,145424,145425],{"className":156,"code":17282,"filename":3260,"language":162,"meta":163,"style":163},[87,145426,145427,145443,145453,145457,145481,145497,145501,145511,145519,145523,145527,145537,145545,145553,145557,145565,145569,145577,145591,145603,145607,145613,145621,145629,145637,145641,145649],{"__ignoreMap":163},[167,145428,145429,145431,145433,145435,145437,145439,145441],{"class":169,"line":170},[167,145430,174],{"class":173},[167,145432,178],{"class":177},[167,145434,182],{"class":181},[167,145436,1050],{"class":181},[167,145438,267],{"class":173},[167,145440,1055],{"class":201},[167,145442,185],{"class":173},[167,145444,145445,145447,145449,145451],{"class":169,"line":188},[167,145446,192],{"class":191},[167,145448,17307],{"class":173},[167,145450,198],{"class":191},[167,145452,202],{"class":201},[167,145454,145455],{"class":169,"line":205},[167,145456,209],{"emptyLinePlaceholder":208},[167,145458,145459,145461,145463,145465,145467,145469,145471,145473,145475,145477,145479],{"class":169,"line":160},[167,145460,216],{"class":191},[167,145462,17322],{"class":219},[167,145464,223],{"class":191},[167,145466,226],{"class":181},[167,145468,174],{"class":173},[167,145470,17331],{"class":181},[167,145472,659],{"class":191},[167,145474,6567],{"class":219},[167,145476,6570],{"class":173},[167,145478,6573],{"class":219},[167,145480,235],{"class":173},[167,145482,145483,145485,145487,145489,145491,145493,145495],{"class":169,"line":238},[167,145484,216],{"class":191},[167,145486,11700],{"class":219},[167,145488,223],{"class":191},[167,145490,226],{"class":181},[167,145492,229],{"class":173},[167,145494,17356],{"class":201},[167,145496,235],{"class":173},[167,145498,145499],{"class":169,"line":243},[167,145500,209],{"emptyLinePlaceholder":208},[167,145502,145503,145505,145507,145509],{"class":169,"line":261},[167,145504,17367],{"class":181},[167,145506,1493],{"class":173},[167,145508,639],{"class":191},[167,145510,1905],{"class":173},[167,145512,145513,145515,145517],{"class":169,"line":273},[167,145514,11916],{"class":173},[167,145516,267],{"class":191},[167,145518,17382],{"class":201},[167,145520,145521],{"class":169,"line":279},[167,145522,403],{"class":173},[167,145524,145525],{"class":169,"line":289},[167,145526,209],{"emptyLinePlaceholder":208},[167,145528,145529,145531,145533,145535],{"class":169,"line":294},[167,145530,6796],{"class":181},[167,145532,1493],{"class":173},[167,145534,639],{"class":191},[167,145536,1905],{"class":173},[167,145538,145539,145541,145543],{"class":169,"line":304},[167,145540,17405],{"class":173},[167,145542,17408],{"class":181},[167,145544,2917],{"class":173},[167,145546,145547,145549,145551],{"class":169,"line":313},[167,145548,11916],{"class":173},[167,145550,267],{"class":191},[167,145552,17419],{"class":201},[167,145554,145555],{"class":169,"line":161},[167,145556,403],{"class":173},[167,145558,145559,145561,145563],{"class":169,"line":335},[167,145560,282],{"class":173},[167,145562,178],{"class":177},[167,145564,185],{"class":173},[167,145566,145567],{"class":169,"line":341},[167,145568,209],{"emptyLinePlaceholder":208},[167,145570,145571,145573,145575],{"class":169,"line":489},[167,145572,174],{"class":173},[167,145574,299],{"class":177},[167,145576,185],{"class":173},[167,145578,145579,145581,145583,145585,145587,145589],{"class":169,"line":495},[167,145580,307],{"class":173},[167,145582,10117],{"class":177},[167,145584,1245],{"class":181},[167,145586,267],{"class":173},[167,145588,17456],{"class":201},[167,145590,185],{"class":173},[167,145592,145593,145595,145597,145599,145601],{"class":169,"line":501},[167,145594,1257],{"class":173},[167,145596,15],{"class":177},[167,145598,12334],{"class":173},[167,145600,15],{"class":177},[167,145602,185],{"class":173},[167,145604,145605],{"class":169,"line":512},[167,145606,209],{"emptyLinePlaceholder":208},[167,145608,145609,145611],{"class":169,"line":781},[167,145610,1257],{"class":173},[167,145612,17481],{"class":177},[167,145614,145615,145617,145619],{"class":169,"line":786},[167,145616,15963],{"class":181},[167,145618,267],{"class":173},[167,145620,17490],{"class":201},[167,145622,145623,145625,145627],{"class":169,"line":2678},[167,145624,3739],{"class":181},[167,145626,267],{"class":173},[167,145628,17499],{"class":201},[167,145630,145631,145633,145635],{"class":169,"line":2692},[167,145632,17504],{"class":181},[167,145634,267],{"class":173},[167,145636,17509],{"class":201},[167,145638,145639],{"class":169,"line":3575},[167,145640,3769],{"class":173},[167,145642,145643,145645,145647],{"class":169,"line":5028},[167,145644,504],{"class":173},[167,145646,10117],{"class":177},[167,145648,185],{"class":173},[167,145650,145651,145653,145655],{"class":169,"line":5037},[167,145652,282],{"class":173},[167,145654,299],{"class":177},[167,145656,185],{"class":173},[154,145658,145659],{"className":156,"code":17532,"filename":3973,"language":162,"meta":163,"style":163},[87,145660,145661,145669,145677,145683,145689,145695,145699,145703,145707,145713,145723,145727,145731,145737,145747,145751,145767,145777,145781,145785,145789,145797,145801,145809,145823,145835,145839,145845,145853,145861,145869,145873,145881],{"__ignoreMap":163},[167,145662,145663,145665,145667],{"class":169,"line":170},[167,145664,174],{"class":173},[167,145666,178],{"class":177},[167,145668,185],{"class":173},[167,145670,145671,145673,145675],{"class":169,"line":188},[167,145672,608],{"class":191},[167,145674,3991],{"class":191},[167,145676,1905],{"class":173},[167,145678,145679,145681],{"class":169,"line":205},[167,145680,7176],{"class":181},[167,145682,763],{"class":173},[167,145684,145685,145687],{"class":169,"line":160},[167,145686,1937],{"class":191},[167,145688,1905],{"class":173},[167,145690,145691,145693],{"class":169,"line":238},[167,145692,12585],{"class":173},[167,145694,17569],{"class":201},[167,145696,145697],{"class":169,"line":243},[167,145698,4049],{"class":173},[167,145700,145701],{"class":169,"line":261},[167,145702,398],{"class":173},[167,145704,145705],{"class":169,"line":273},[167,145706,209],{"emptyLinePlaceholder":208},[167,145708,145709,145711],{"class":169,"line":279},[167,145710,17586],{"class":181},[167,145712,763],{"class":173},[167,145714,145715,145717,145719,145721],{"class":169,"line":289},[167,145716,879],{"class":219},[167,145718,12786],{"class":173},[167,145720,267],{"class":191},[167,145722,17599],{"class":201},[167,145724,145725],{"class":169,"line":294},[167,145726,398],{"class":173},[167,145728,145729],{"class":169,"line":304},[167,145730,209],{"emptyLinePlaceholder":208},[167,145732,145733,145735],{"class":169,"line":313},[167,145734,12749],{"class":181},[167,145736,763],{"class":173},[167,145738,145739,145741,145743,145745],{"class":169,"line":161},[167,145740,879],{"class":219},[167,145742,12786],{"class":173},[167,145744,267],{"class":191},[167,145746,17419],{"class":201},[167,145748,145749],{"class":169,"line":335},[167,145750,209],{"emptyLinePlaceholder":208},[167,145752,145753,145755,145757,145759,145761,145763,145765],{"class":169,"line":341},[167,145754,7419],{"class":191},[167,145756,2526],{"class":173},[167,145758,4927],{"class":219},[167,145760,17638],{"class":173},[167,145762,6762],{"class":191},[167,145764,17643],{"class":181},[167,145766,258],{"class":173},[167,145768,145769,145771,145773,145775],{"class":169,"line":489},[167,145770,741],{"class":219},[167,145772,17652],{"class":173},[167,145774,17408],{"class":181},[167,145776,2917],{"class":173},[167,145778,145779],{"class":169,"line":495},[167,145780,4049],{"class":173},[167,145782,145783],{"class":169,"line":501},[167,145784,3492],{"class":173},[167,145786,145787],{"class":169,"line":512},[167,145788,276],{"class":173},[167,145790,145791,145793,145795],{"class":169,"line":781},[167,145792,282],{"class":173},[167,145794,178],{"class":177},[167,145796,185],{"class":173},[167,145798,145799],{"class":169,"line":786},[167,145800,209],{"emptyLinePlaceholder":208},[167,145802,145803,145805,145807],{"class":169,"line":2678},[167,145804,174],{"class":173},[167,145806,299],{"class":177},[167,145808,185],{"class":173},[167,145810,145811,145813,145815,145817,145819,145821],{"class":169,"line":2692},[167,145812,307],{"class":173},[167,145814,10117],{"class":177},[167,145816,1245],{"class":181},[167,145818,267],{"class":173},[167,145820,17456],{"class":201},[167,145822,185],{"class":173},[167,145824,145825,145827,145829,145831,145833],{"class":169,"line":3575},[167,145826,1257],{"class":173},[167,145828,15],{"class":177},[167,145830,12334],{"class":173},[167,145832,15],{"class":177},[167,145834,185],{"class":173},[167,145836,145837],{"class":169,"line":5028},[167,145838,209],{"emptyLinePlaceholder":208},[167,145840,145841,145843],{"class":169,"line":5037},[167,145842,1257],{"class":173},[167,145844,17481],{"class":177},[167,145846,145847,145849,145851],{"class":169,"line":5046},[167,145848,15963],{"class":181},[167,145850,267],{"class":173},[167,145852,17490],{"class":201},[167,145854,145855,145857,145859],{"class":169,"line":6756},[167,145856,3739],{"class":181},[167,145858,267],{"class":173},[167,145860,17499],{"class":201},[167,145862,145863,145865,145867],{"class":169,"line":6778},[167,145864,17504],{"class":181},[167,145866,267],{"class":173},[167,145868,17509],{"class":201},[167,145870,145871],{"class":169,"line":6783},[167,145872,3769],{"class":173},[167,145874,145875,145877,145879],{"class":169,"line":6788},[167,145876,504],{"class":173},[167,145878,10117],{"class":177},[167,145880,185],{"class":173},[167,145882,145883,145885,145887],{"class":169,"line":6793},[167,145884,282],{"class":173},[167,145886,299],{"class":177},[167,145888,185],{"class":173},[5367,145890,145891],{},[15,145892,17773,145893,17776,145895,17779,145897,17782],{},[87,145894,16648],{},[87,145896,16868],{},[87,145898,6400],{},[22,145900,7678],{"id":7677},[33,145902,145903,145907,145913],{},[36,145904,145905,17791],{},[87,145906,16604],{},[36,145908,145909,17796,145911,17800],{},[87,145910,6393],{},[3933,145912,17799],{},[36,145914,17803,145915,1679],{},[3933,145916,17806],{},[924,145918,16558],{},{"title":163,"searchDepth":188,"depth":188,"links":145920},[145921,145922,145923,145924,145925,145931,145936],{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":13672,"depth":188,"text":13673},{"id":3084,"depth":188,"text":3085,"children":145926},[145927,145928,145929,145930],{"id":16849,"depth":205,"text":17818},{"id":16884,"depth":205,"text":17820},{"id":17045,"depth":205,"text":17822},{"id":17230,"depth":205,"text":17231},{"id":7996,"depth":188,"text":7997,"children":145932},[145933,145934,145935],{"id":17257,"depth":205,"text":17258},{"id":17266,"depth":205,"text":17267},{"id":17275,"depth":205,"text":17276},{"id":7677,"depth":188,"text":7678},{"updatedAt":17835,"coverCaption":17836,"author":946,"keywords":145938},[3258,16604,6393,6796,17838],[145940],{"headline":16595,"author":145941,"datePublished":17835,"@type":961},{"name":946,"@type":959},{"title":16595,"description":17833},[145944,145945,145946,145947],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":9169,"color":9170},{"tag":5424,"color":5425},{"id":145949,"title":134575,"body":145950,"cover":9149,"coverAlt":147272,"date":9151,"description":147273,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":147274,"navigation":208,"path":147277,"schemaOrg":147278,"seo":147281,"series":7718,"seriesDescription":129940,"seriesOrder":273,"seriesTitle":129941,"slug":942,"stem":147282,"tags":147283,"__hash__":147290},"blog\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en.md",{"type":8,"value":145951,"toc":147253},[145952,145960,145963,145971,145974,145982,145984,145987,146006,146014,146016,146022,146025,146042,146045,146078,146081,146094,146097,146099,146102,146105,146122,146125,146127,146130,146132,146157,146160,146162,146166,146174,146178,146184,146188,146191,146195,146198,146200,146204,146210,146214,146219,146223,146226,146228,146720,147207,147210,147221,147223,147230,147233,147246,147251],[11,145953,145955,145956,1025,145958,6219],{"id":145954},"vue-lifecycle-render-debugging-rendertracked-rendertriggered","Vue Lifecycle: render debugging (",[87,145957,7744],{},[87,145959,7747],{},[15,145961,145962],{},"Some bugs are not in business logic or in an API call. They live one layer deeper: a component that re-renders too often, a list that recalculates more than it should, or a view that depends on reactive state you did not even realize it was reading.",[15,145964,145965,145966,57920,145968,145970],{},"That kind of issue is hard to spot because Vue abstracts the reactive system so well. It updates when it should, and from the outside it can feel like magic. That is exactly why ",[87,145967,7744],{},[87,145969,7747],{}," exist: to open that black box and show what is happening inside the render cycle.",[15,145972,145973],{},"These are not lifecycle hooks for application logic. They are diagnostic tools. When a component updates for \"no obvious reason\", they help answer two practical questions:",[33,145975,145976,145979],{},[36,145977,145978],{},"Which reactive dependencies were registered during render?",[36,145980,145981],{},"Which specific change triggered the next render?",[22,145983,57636],{"id":57635},[15,145985,145986],{},"As an interface grows, the cost of rendering \"a little too much\" stops being invisible. You start to notice symptoms like:",[33,145988,145989,145992,145995,145998],{},[36,145990,145991],{},"Inputs that feel sluggish.",[36,145993,145994],{},"Tables that recalculate or reorder unnecessarily.",[36,145996,145997],{},"Child components updating because of irrelevant changes.",[36,145999,146000,146002,146003,146005],{},[87,146001,1661],{}," properties and ",[87,146004,1665],{}," logic that look correct, but still participate in noisy render cycles.",[15,146007,146008,146009,57920,146011,146013],{},"In those situations, reading the template is not enough. You need to understand the relationship between the render effect and the reactive system. That is where ",[87,146010,7744],{},[87,146012,7747],{}," become useful: they show which dependencies were registered and which mutations led to fresh updates.",[22,146015,57681],{"id":57680},[15,146017,146018,146019,146021],{},"Vue tracks reactive dependencies while a component is rendering. If the template, a ",[87,146020,1661],{},", or any reactive expression touches a property during that process, Vue associates it with the component's render effect.",[15,146023,146024],{},"The render debugging hooks let you observe that flow:",[33,146026,146027,146035],{},[36,146028,146029,146031,146032,146034],{},[87,146030,7744],{}," in the Options API and ",[87,146033,7820],{}," in the Composition API run when a dependency is collected during render.",[36,146036,146037,146031,146039,146041],{},[87,146038,7747],{},[87,146040,7828],{}," in the Composition API run when one of those dependencies changes and causes a new render.",[15,146043,146044],{},"Both hooks receive a debugger event object with details such as:",[33,146046,146047,146052,146057,146071],{},[36,146048,146049,146051],{},[87,146050,7839],{},": the reactive object involved.",[36,146053,146054,146056],{},[87,146055,7845],{},": the property that was accessed or mutated.",[36,146058,146059,146061,146062,1025,146064,1025,146066,1025,146068,146070],{},[87,146060,569],{},": the kind of operation (",[87,146063,4233],{},[87,146065,7856],{},[87,146067,7859],{},[87,146069,7862],{},", and so on).",[36,146072,146073,57920,146075,146077],{},[87,146074,7868],{},[87,146076,7871],{},", when they apply.",[15,146079,146080],{},"Two details matter here:",[33,146082,146083,146086],{},[36,146084,146085],{},"These hooks are meant for development, not business logic.",[36,146087,146088,146089,63104,146091,146093],{},"The normal way to use them is with ",[87,146090,7886],{},[87,146092,7889],{},", not by mutating reactive state from inside the hook.",[15,146095,146096],{},"Once you try to turn them into application behavior, they usually create more noise than clarity.",[22,146098,57775],{"id":57774},[15,146100,146101],{},"These hooks make sense when you need to understand why a component renders or re-renders.",[15,146103,146104],{},"Common cases:",[33,146106,146107,146110,146113,146116],{},[36,146108,146109],{},"A component changes unexpectedly when you edit state that looked unrelated.",[36,146111,146112],{},"A complex view refreshes too often.",[36,146114,146115],{},"You are tuning performance and suspect the render depends on more state than necessary.",[36,146117,146118,146119,146121],{},"A seemingly harmless ",[87,146120,1661],{}," is pulling a much wider render than expected.",[15,146123,146124],{},"Practical rule: if the real question is \"why is this component rendering?\", these hooks are a strong fit.",[22,146126,57799],{"id":57798},[15,146128,146129],{},"They are not a permanent tool, and they do not replace a clear component architecture.",[15,146131,136844],{},[33,146133,146134,146145,146151,146154],{},[36,146135,146136,146137,1025,146139,1025,146141,109827,146143,1679],{},"The issue is better understood by reviewing ",[87,146138,3300],{},[87,146140,3307],{},[87,146142,1661],{},[87,146144,1665],{},[36,146146,146147,146148,146150],{},"You only need to react to one specific change, in which case ",[87,146149,1665],{}," is clearer.",[36,146152,146153],{},"You plan to store traces in reactive state inside the same component.",[36,146155,146156],{},"You want to use them as production telemetry.",[15,146158,146159],{},"It is also worth avoiding a common trap: proving your theory with these hooks and then leaving them in the codebase. They are excellent for debugging and bad as permanent noise.",[22,146161,57820],{"id":57819},[3087,146163,146165],{"id":146164},"_1-using-them-for-business-logic","1. Using them for business logic",[15,146167,146168,146169,63104,146171,146173],{},"They are not designed to trigger functional side effects. If you need to respond to data changes, ",[87,146170,1665],{},[87,146172,1661],{}," is the right tool.",[3087,146175,146177],{"id":146176},"_2-mutating-state-inside-the-hook","2. Mutating state inside the hook",[15,146179,146180,146181,146183],{},"Saving debugger events in a ",[87,146182,2085],{}," can introduce extra renders and pollute the very thing you are trying to inspect.",[3087,146185,146187],{"id":146186},"_3-blaming-vue-instead-of-the-components-reactive-scope","3. Blaming Vue instead of the component's reactive scope",[15,146189,146190],{},"If the template touches a large reactive object, Vue is doing the correct thing: subscribing the render effect to everything it reads.",[3087,146192,146194],{"id":146193},"_4-assuming-stable-production-behavior","4. Assuming stable production behavior",[15,146196,146197],{},"These are debugging hooks, not APIs you should rely on for functional behavior.",[22,146199,57926],{"id":57925},[3087,146201,146203],{"id":146202},"detecting-accidental-dependencies","Detecting accidental dependencies",[15,146205,146206,146207,146209],{},"A table may be reading more state than it actually needs: filters, visual flags, form drafts, or unrelated metadata. ",[87,146208,7744],{}," makes that visible.",[3087,146211,146213],{"id":146212},"identifying-what-is-firing-a-render","Identifying what is firing a render",[15,146215,146216,146218],{},[87,146217,7747],{}," shows the exact key that caused the update, which removes a lot of guesswork.",[3087,146220,146222],{"id":146221},"optimizing-components-connected-to-stores","Optimizing components connected to stores",[15,146224,146225],{},"It helps confirm whether a component depends only on what it should, or whether it is over-subscribed to global state.",[22,146227,131192],{"id":87571},[154,146229,146231],{"className":156,"code":146230,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { computed, onRenderTracked, onRenderTriggered, reactive, ref } from 'vue'\n\nconst filters = reactive({\n  search: '',\n  showOnlyOpen: false\n})\n\nconst ui = reactive({\n  selectedId: 1,\n  panelOpen: true\n})\n\nconst tasks = ref([\n  { id: 1, title: 'Review PR', done: false, owner: 'Ana' },\n  { id: 2, title: 'Update dependencies', done: true, owner: 'Luis' },\n  { id: 3, title: 'Document composable', done: false, owner: 'Ana' }\n])\n\nconst visibleTasks = computed(() => {\n  return tasks.value.filter(task => {\n    const matchesSearch = task.title\n      .toLowerCase()\n      .includes(filters.search.toLowerCase())\n\n    const matchesStatus = filters.showOnlyOpen ? !task.done : true\n\n    return matchesSearch && matchesStatus\n  })\n})\n\nonRenderTracked((event) => {\n  console.log('[renderTracked]', {\n    type: event.type,\n    key: String(event.key),\n    target: event.target\n  })\n})\n\nonRenderTriggered((event) => {\n  console.log('[renderTriggered]', {\n    type: event.type,\n    key: String(event.key),\n    oldValue: event.oldValue,\n    newValue: event.newValue\n  })\n})\n\nfunction toggleTask(taskId: number) {\n  const task = tasks.value.find(item => item.id === taskId)\n\n  if (!task) return\n\n  task.done = !task.done\n}\n\u003C\u002Fscript>\n",[87,146232,146233,146249,146259,146263,146275,146283,146289,146293,146297,146309,146317,146323,146327,146331,146343,146364,146385,146406,146410,146414,146430,146446,146456,146464,146476,146480,146500,146504,146514,146518,146522,146526,146540,146552,146556,146564,146568,146572,146576,146580,146594,146606,146610,146618,146622,146626,146630,146634,146638,146654,146678,146682,146694,146698,146708,146712],{"__ignoreMap":163},[167,146234,146235,146237,146239,146241,146243,146245,146247],{"class":169,"line":170},[167,146236,174],{"class":173},[167,146238,178],{"class":177},[167,146240,182],{"class":181},[167,146242,1050],{"class":181},[167,146244,267],{"class":173},[167,146246,1055],{"class":201},[167,146248,185],{"class":173},[167,146250,146251,146253,146255,146257],{"class":169,"line":188},[167,146252,192],{"class":191},[167,146254,8055],{"class":173},[167,146256,198],{"class":191},[167,146258,202],{"class":201},[167,146260,146261],{"class":169,"line":205},[167,146262,209],{"emptyLinePlaceholder":208},[167,146264,146265,146267,146269,146271,146273],{"class":169,"line":160},[167,146266,216],{"class":191},[167,146268,8070],{"class":219},[167,146270,223],{"class":191},[167,146272,846],{"class":181},[167,146274,372],{"class":173},[167,146276,146277,146279,146281],{"class":169,"line":238},[167,146278,8081],{"class":173},[167,146280,2184],{"class":201},[167,146282,393],{"class":173},[167,146284,146285,146287],{"class":169,"line":243},[167,146286,8090],{"class":173},[167,146288,8093],{"class":219},[167,146290,146291],{"class":169,"line":261},[167,146292,403],{"class":173},[167,146294,146295],{"class":169,"line":273},[167,146296,209],{"emptyLinePlaceholder":208},[167,146298,146299,146301,146303,146305,146307],{"class":169,"line":279},[167,146300,216],{"class":191},[167,146302,8108],{"class":219},[167,146304,223],{"class":191},[167,146306,846],{"class":181},[167,146308,372],{"class":173},[167,146310,146311,146313,146315],{"class":169,"line":289},[167,146312,8119],{"class":173},[167,146314,1835],{"class":219},[167,146316,393],{"class":173},[167,146318,146319,146321],{"class":169,"line":294},[167,146320,8128],{"class":173},[167,146322,3637],{"class":219},[167,146324,146325],{"class":169,"line":304},[167,146326,403],{"class":173},[167,146328,146329],{"class":169,"line":313},[167,146330,209],{"emptyLinePlaceholder":208},[167,146332,146333,146335,146337,146339,146341],{"class":169,"line":161},[167,146334,216],{"class":191},[167,146336,3368],{"class":219},[167,146338,223],{"class":191},[167,146340,226],{"class":181},[167,146342,1827],{"class":173},[167,146344,146345,146347,146349,146351,146354,146356,146358,146360,146362],{"class":169,"line":335},[167,146346,1832],{"class":173},[167,146348,1835],{"class":219},[167,146350,3383],{"class":173},[167,146352,146353],{"class":201},"'Review PR'",[167,146355,8164],{"class":173},[167,146357,3392],{"class":219},[167,146359,8169],{"class":173},[167,146361,8172],{"class":201},[167,146363,1856],{"class":173},[167,146365,146366,146368,146370,146372,146375,146377,146379,146381,146383],{"class":169,"line":341},[167,146367,1832],{"class":173},[167,146369,1853],{"class":219},[167,146371,3383],{"class":173},[167,146373,146374],{"class":201},"'Update dependencies'",[167,146376,8164],{"class":173},[167,146378,390],{"class":219},[167,146380,8169],{"class":173},[167,146382,8194],{"class":201},[167,146384,1856],{"class":173},[167,146386,146387,146389,146391,146393,146396,146398,146400,146402,146404],{"class":169,"line":489},[167,146388,1832],{"class":173},[167,146390,8203],{"class":219},[167,146392,3383],{"class":173},[167,146394,146395],{"class":201},"'Document composable'",[167,146397,8164],{"class":173},[167,146399,3392],{"class":219},[167,146401,8169],{"class":173},[167,146403,8172],{"class":201},[167,146405,599],{"class":173},[167,146407,146408],{"class":169,"line":495},[167,146409,429],{"class":173},[167,146411,146412],{"class":169,"line":501},[167,146413,209],{"emptyLinePlaceholder":208},[167,146415,146416,146418,146420,146422,146424,146426,146428],{"class":169,"line":512},[167,146417,216],{"class":191},[167,146419,8233],{"class":219},[167,146421,223],{"class":191},[167,146423,1898],{"class":181},[167,146425,1493],{"class":173},[167,146427,639],{"class":191},[167,146429,1905],{"class":173},[167,146431,146432,146434,146436,146438,146440,146442,146444],{"class":169,"line":781},[167,146433,1539],{"class":191},[167,146435,3451],{"class":173},[167,146437,8252],{"class":181},[167,146439,229],{"class":173},[167,146441,5075],{"class":254},[167,146443,8259],{"class":191},[167,146445,1905],{"class":173},[167,146447,146448,146450,146452,146454],{"class":169,"line":786},[167,146449,8266],{"class":191},[167,146451,8269],{"class":219},[167,146453,223],{"class":191},[167,146455,8274],{"class":173},[167,146457,146458,146460,146462],{"class":169,"line":2678},[167,146459,8279],{"class":173},[167,146461,2506],{"class":181},[167,146463,2917],{"class":173},[167,146465,146466,146468,146470,146472,146474],{"class":169,"line":2692},[167,146467,8279],{"class":173},[167,146469,8290],{"class":181},[167,146471,8293],{"class":173},[167,146473,2506],{"class":181},[167,146475,2509],{"class":173},[167,146477,146478],{"class":169,"line":3575},[167,146479,209],{"emptyLinePlaceholder":208},[167,146481,146482,146484,146486,146488,146490,146492,146494,146496,146498],{"class":169,"line":5028},[167,146483,8266],{"class":191},[167,146485,8308],{"class":219},[167,146487,223],{"class":191},[167,146489,8313],{"class":173},[167,146491,8316],{"class":191},[167,146493,5625],{"class":191},[167,146495,8321],{"class":173},[167,146497,583],{"class":191},[167,146499,3487],{"class":219},[167,146501,146502],{"class":169,"line":5037},[167,146503,209],{"emptyLinePlaceholder":208},[167,146505,146506,146508,146510,146512],{"class":169,"line":5046},[167,146507,1937],{"class":191},[167,146509,8336],{"class":173},[167,146511,8339],{"class":191},[167,146513,8342],{"class":173},[167,146515,146516],{"class":169,"line":6756},[167,146517,8347],{"class":173},[167,146519,146520],{"class":169,"line":6778},[167,146521,403],{"class":173},[167,146523,146524],{"class":169,"line":6783},[167,146525,209],{"emptyLinePlaceholder":208},[167,146527,146528,146530,146532,146534,146536,146538],{"class":169,"line":6788},[167,146529,8360],{"class":181},[167,146531,1918],{"class":173},[167,146533,4195],{"class":254},[167,146535,693],{"class":173},[167,146537,639],{"class":191},[167,146539,1905],{"class":173},[167,146541,146542,146544,146546,146548,146550],{"class":169,"line":6793},[167,146543,2608],{"class":173},[167,146545,2611],{"class":181},[167,146547,229],{"class":173},[167,146549,8381],{"class":201},[167,146551,627],{"class":173},[167,146553,146554],{"class":169,"line":6809},[167,146555,8388],{"class":173},[167,146557,146558,146560,146562],{"class":169,"line":6824},[167,146559,8393],{"class":173},[167,146561,4258],{"class":181},[167,146563,8398],{"class":173},[167,146565,146566],{"class":169,"line":6829},[167,146567,8403],{"class":173},[167,146569,146570],{"class":169,"line":6836},[167,146571,8347],{"class":173},[167,146573,146574],{"class":169,"line":6845},[167,146575,403],{"class":173},[167,146577,146578],{"class":169,"line":6854},[167,146579,209],{"emptyLinePlaceholder":208},[167,146581,146582,146584,146586,146588,146590,146592],{"class":169,"line":6861},[167,146583,8420],{"class":181},[167,146585,1918],{"class":173},[167,146587,4195],{"class":254},[167,146589,693],{"class":173},[167,146591,639],{"class":191},[167,146593,1905],{"class":173},[167,146595,146596,146598,146600,146602,146604],{"class":169,"line":6879},[167,146597,2608],{"class":173},[167,146599,2611],{"class":181},[167,146601,229],{"class":173},[167,146603,8441],{"class":201},[167,146605,627],{"class":173},[167,146607,146608],{"class":169,"line":6884},[167,146609,8388],{"class":173},[167,146611,146612,146614,146616],{"class":169,"line":6889},[167,146613,8393],{"class":173},[167,146615,4258],{"class":181},[167,146617,8398],{"class":173},[167,146619,146620],{"class":169,"line":6898},[167,146621,8460],{"class":173},[167,146623,146624],{"class":169,"line":6903},[167,146625,8465],{"class":173},[167,146627,146628],{"class":169,"line":6912},[167,146629,8347],{"class":173},[167,146631,146632],{"class":169,"line":6928},[167,146633,403],{"class":173},[167,146635,146636],{"class":169,"line":6949},[167,146637,209],{"emptyLinePlaceholder":208},[167,146639,146640,146642,146644,146646,146648,146650,146652],{"class":169,"line":6954},[167,146641,246],{"class":191},[167,146643,8484],{"class":181},[167,146645,229],{"class":173},[167,146647,3433],{"class":254},[167,146649,583],{"class":191},[167,146651,8493],{"class":219},[167,146653,258],{"class":173},[167,146655,146656,146658,146660,146662,146664,146666,146668,146670,146672,146674,146676],{"class":169,"line":6975},[167,146657,1443],{"class":191},[167,146659,3446],{"class":219},[167,146661,223],{"class":191},[167,146663,3451],{"class":173},[167,146665,3454],{"class":181},[167,146667,229],{"class":173},[167,146669,1926],{"class":254},[167,146671,8259],{"class":191},[167,146673,3465],{"class":173},[167,146675,2550],{"class":191},[167,146677,3470],{"class":173},[167,146679,146680],{"class":169,"line":6989},[167,146681,209],{"emptyLinePlaceholder":208},[167,146683,146684,146686,146688,146690,146692],{"class":169,"line":7003},[167,146685,2544],{"class":191},[167,146687,2526],{"class":173},[167,146689,6641],{"class":191},[167,146691,8534],{"class":173},[167,146693,2556],{"class":191},[167,146695,146696],{"class":169,"line":7017},[167,146697,209],{"emptyLinePlaceholder":208},[167,146699,146700,146702,146704,146706],{"class":169,"line":7026},[167,146701,8545],{"class":173},[167,146703,267],{"class":191},[167,146705,5625],{"class":191},[167,146707,8552],{"class":173},[167,146709,146710],{"class":169,"line":7031},[167,146711,276],{"class":173},[167,146713,146714,146716,146718],{"class":169,"line":7048},[167,146715,282],{"class":173},[167,146717,178],{"class":177},[167,146719,185],{"class":173},[154,146721,146723],{"className":156,"code":146722,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nexport default {\n  name: 'TaskRenderDebugger',\n\n  data() {\n    return {\n      filters: {\n        search: '',\n        showOnlyOpen: false\n      },\n      ui: {\n        selectedId: 1,\n        panelOpen: true\n      },\n      tasks: [\n        { id: 1, title: 'Review PR', done: false, owner: 'Ana' },\n        { id: 2, title: 'Update dependencies', done: true, owner: 'Luis' },\n        { id: 3, title: 'Document composable', done: false, owner: 'Ana' }\n      ]\n    }\n  },\n\n  computed: {\n    visibleTasks() {\n      return this.tasks.filter(task => {\n        const matchesSearch = task.title\n          .toLowerCase()\n          .includes(this.filters.search.toLowerCase())\n\n        const matchesStatus = this.filters.showOnlyOpen ? !task.done : true\n\n        return matchesSearch && matchesStatus\n      })\n    }\n  },\n\n  renderTracked(event) {\n    console.log('[renderTracked]', {\n      type: event.type,\n      key: String(event.key),\n      target: event.target\n    })\n  },\n\n  renderTriggered(event) {\n    console.log('[renderTriggered]', {\n      type: event.type,\n      key: String(event.key),\n      oldValue: event.oldValue,\n      newValue: event.newValue\n    })\n  },\n\n  methods: {\n    toggleTask(taskId) {\n      const task = this.tasks.find(item => item.id === taskId)\n\n      if (!task) return\n\n      task.done = !task.done\n    }\n  }\n}\n\u003C\u002Fscript>\n",[87,146724,146725,146739,146747,146755,146759,146765,146771,146775,146783,146789,146793,146797,146805,146811,146815,146819,146839,146859,146879,146883,146887,146891,146895,146899,146905,146923,146933,146941,146957,146961,146983,146987,146997,147001,147005,147009,147013,147023,147035,147039,147047,147051,147055,147059,147063,147073,147085,147089,147097,147101,147105,147109,147113,147117,147121,147131,147157,147161,147173,147177,147187,147191,147195,147199],{"__ignoreMap":163},[167,146726,146727,146729,146731,146733,146735,146737],{"class":169,"line":170},[167,146728,174],{"class":173},[167,146730,178],{"class":177},[167,146732,1050],{"class":181},[167,146734,267],{"class":173},[167,146736,1055],{"class":201},[167,146738,185],{"class":173},[167,146740,146741,146743,146745],{"class":169,"line":188},[167,146742,608],{"class":191},[167,146744,3991],{"class":191},[167,146746,1905],{"class":173},[167,146748,146749,146751,146753],{"class":169,"line":205},[167,146750,4398],{"class":173},[167,146752,8598],{"class":201},[167,146754,393],{"class":173},[167,146756,146757],{"class":169,"line":160},[167,146758,209],{"emptyLinePlaceholder":208},[167,146760,146761,146763],{"class":169,"line":238},[167,146762,7176],{"class":181},[167,146764,763],{"class":173},[167,146766,146767,146769],{"class":169,"line":243},[167,146768,1937],{"class":191},[167,146770,1905],{"class":173},[167,146772,146773],{"class":169,"line":261},[167,146774,8621],{"class":173},[167,146776,146777,146779,146781],{"class":169,"line":273},[167,146778,8626],{"class":173},[167,146780,2184],{"class":201},[167,146782,393],{"class":173},[167,146784,146785,146787],{"class":169,"line":279},[167,146786,8635],{"class":173},[167,146788,8093],{"class":219},[167,146790,146791],{"class":169,"line":289},[167,146792,8642],{"class":173},[167,146794,146795],{"class":169,"line":294},[167,146796,8647],{"class":173},[167,146798,146799,146801,146803],{"class":169,"line":304},[167,146800,8652],{"class":173},[167,146802,1835],{"class":219},[167,146804,393],{"class":173},[167,146806,146807,146809],{"class":169,"line":313},[167,146808,8661],{"class":173},[167,146810,3637],{"class":219},[167,146812,146813],{"class":169,"line":161},[167,146814,8642],{"class":173},[167,146816,146817],{"class":169,"line":335},[167,146818,8672],{"class":173},[167,146820,146821,146823,146825,146827,146829,146831,146833,146835,146837],{"class":169,"line":341},[167,146822,8677],{"class":173},[167,146824,1835],{"class":219},[167,146826,3383],{"class":173},[167,146828,146353],{"class":201},[167,146830,8164],{"class":173},[167,146832,3392],{"class":219},[167,146834,8169],{"class":173},[167,146836,8172],{"class":201},[167,146838,1856],{"class":173},[167,146840,146841,146843,146845,146847,146849,146851,146853,146855,146857],{"class":169,"line":489},[167,146842,8677],{"class":173},[167,146844,1853],{"class":219},[167,146846,3383],{"class":173},[167,146848,146374],{"class":201},[167,146850,8164],{"class":173},[167,146852,390],{"class":219},[167,146854,8169],{"class":173},[167,146856,8194],{"class":201},[167,146858,1856],{"class":173},[167,146860,146861,146863,146865,146867,146869,146871,146873,146875,146877],{"class":169,"line":495},[167,146862,8677],{"class":173},[167,146864,8203],{"class":219},[167,146866,3383],{"class":173},[167,146868,146395],{"class":201},[167,146870,8164],{"class":173},[167,146872,3392],{"class":219},[167,146874,8169],{"class":173},[167,146876,8172],{"class":201},[167,146878,599],{"class":173},[167,146880,146881],{"class":169,"line":501},[167,146882,8738],{"class":173},[167,146884,146885],{"class":169,"line":512},[167,146886,4049],{"class":173},[167,146888,146889],{"class":169,"line":781},[167,146890,398],{"class":173},[167,146892,146893],{"class":169,"line":786},[167,146894,209],{"emptyLinePlaceholder":208},[167,146896,146897],{"class":169,"line":2678},[167,146898,8755],{"class":173},[167,146900,146901,146903],{"class":169,"line":2692},[167,146902,8760],{"class":181},[167,146904,763],{"class":173},[167,146906,146907,146909,146911,146913,146915,146917,146919,146921],{"class":169,"line":3575},[167,146908,8767],{"class":191},[167,146910,7351],{"class":219},[167,146912,8772],{"class":173},[167,146914,8252],{"class":181},[167,146916,229],{"class":173},[167,146918,5075],{"class":254},[167,146920,8259],{"class":191},[167,146922,1905],{"class":173},[167,146924,146925,146927,146929,146931],{"class":169,"line":5028},[167,146926,8787],{"class":191},[167,146928,8269],{"class":219},[167,146930,223],{"class":191},[167,146932,8274],{"class":173},[167,146934,146935,146937,146939],{"class":169,"line":5037},[167,146936,8798],{"class":173},[167,146938,2506],{"class":181},[167,146940,2917],{"class":173},[167,146942,146943,146945,146947,146949,146951,146953,146955],{"class":169,"line":5046},[167,146944,8798],{"class":173},[167,146946,8290],{"class":181},[167,146948,229],{"class":173},[167,146950,4927],{"class":219},[167,146952,8815],{"class":173},[167,146954,2506],{"class":181},[167,146956,2509],{"class":173},[167,146958,146959],{"class":169,"line":6756},[167,146960,209],{"emptyLinePlaceholder":208},[167,146962,146963,146965,146967,146969,146971,146973,146975,146977,146979,146981],{"class":169,"line":6778},[167,146964,8787],{"class":191},[167,146966,8308],{"class":219},[167,146968,223],{"class":191},[167,146970,7351],{"class":219},[167,146972,8836],{"class":173},[167,146974,8316],{"class":191},[167,146976,5625],{"class":191},[167,146978,8321],{"class":173},[167,146980,583],{"class":191},[167,146982,3487],{"class":219},[167,146984,146985],{"class":169,"line":6783},[167,146986,209],{"emptyLinePlaceholder":208},[167,146988,146989,146991,146993,146995],{"class":169,"line":6788},[167,146990,8855],{"class":191},[167,146992,8336],{"class":173},[167,146994,8339],{"class":191},[167,146996,8342],{"class":173},[167,146998,146999],{"class":169,"line":6793},[167,147000,8866],{"class":173},[167,147002,147003],{"class":169,"line":6809},[167,147004,4049],{"class":173},[167,147006,147007],{"class":169,"line":6824},[167,147008,398],{"class":173},[167,147010,147011],{"class":169,"line":6829},[167,147012,209],{"emptyLinePlaceholder":208},[167,147014,147015,147017,147019,147021],{"class":169,"line":6836},[167,147016,8883],{"class":181},[167,147018,229],{"class":173},[167,147020,4195],{"class":254},[167,147022,258],{"class":173},[167,147024,147025,147027,147029,147031,147033],{"class":169,"line":6845},[167,147026,8894],{"class":173},[167,147028,2611],{"class":181},[167,147030,229],{"class":173},[167,147032,8381],{"class":201},[167,147034,627],{"class":173},[167,147036,147037],{"class":169,"line":6854},[167,147038,8907],{"class":173},[167,147040,147041,147043,147045],{"class":169,"line":6861},[167,147042,8912],{"class":173},[167,147044,4258],{"class":181},[167,147046,8398],{"class":173},[167,147048,147049],{"class":169,"line":6879},[167,147050,8921],{"class":173},[167,147052,147053],{"class":169,"line":6884},[167,147054,8926],{"class":173},[167,147056,147057],{"class":169,"line":6889},[167,147058,398],{"class":173},[167,147060,147061],{"class":169,"line":6898},[167,147062,209],{"emptyLinePlaceholder":208},[167,147064,147065,147067,147069,147071],{"class":169,"line":6903},[167,147066,8939],{"class":181},[167,147068,229],{"class":173},[167,147070,4195],{"class":254},[167,147072,258],{"class":173},[167,147074,147075,147077,147079,147081,147083],{"class":169,"line":6912},[167,147076,8894],{"class":173},[167,147078,2611],{"class":181},[167,147080,229],{"class":173},[167,147082,8441],{"class":201},[167,147084,627],{"class":173},[167,147086,147087],{"class":169,"line":6928},[167,147088,8907],{"class":173},[167,147090,147091,147093,147095],{"class":169,"line":6949},[167,147092,8912],{"class":173},[167,147094,4258],{"class":181},[167,147096,8398],{"class":173},[167,147098,147099],{"class":169,"line":6954},[167,147100,8974],{"class":173},[167,147102,147103],{"class":169,"line":6975},[167,147104,8979],{"class":173},[167,147106,147107],{"class":169,"line":6989},[167,147108,8926],{"class":173},[167,147110,147111],{"class":169,"line":7003},[167,147112,398],{"class":173},[167,147114,147115],{"class":169,"line":7017},[167,147116,209],{"emptyLinePlaceholder":208},[167,147118,147119],{"class":169,"line":7026},[167,147120,4419],{"class":173},[167,147122,147123,147125,147127,147129],{"class":169,"line":7031},[167,147124,9000],{"class":181},[167,147126,229],{"class":173},[167,147128,3433],{"class":254},[167,147130,258],{"class":173},[167,147132,147133,147135,147137,147139,147141,147143,147145,147147,147149,147151,147153,147155],{"class":169,"line":7048},[167,147134,4435],{"class":191},[167,147136,3446],{"class":219},[167,147138,223],{"class":191},[167,147140,7351],{"class":219},[167,147142,8772],{"class":173},[167,147144,3454],{"class":181},[167,147146,229],{"class":173},[167,147148,1926],{"class":254},[167,147150,8259],{"class":191},[167,147152,3465],{"class":173},[167,147154,2550],{"class":191},[167,147156,3470],{"class":173},[167,147158,147159],{"class":169,"line":7057},[167,147160,209],{"emptyLinePlaceholder":208},[167,147162,147163,147165,147167,147169,147171],{"class":169,"line":7555},[167,147164,7261],{"class":191},[167,147166,2526],{"class":173},[167,147168,6641],{"class":191},[167,147170,8534],{"class":173},[167,147172,2556],{"class":191},[167,147174,147175],{"class":169,"line":7560},[167,147176,209],{"emptyLinePlaceholder":208},[167,147178,147179,147181,147183,147185],{"class":169,"line":7579},[167,147180,9057],{"class":173},[167,147182,267],{"class":191},[167,147184,5625],{"class":191},[167,147186,8552],{"class":173},[167,147188,147189],{"class":169,"line":7592},[167,147190,4049],{"class":173},[167,147192,147193],{"class":169,"line":7605},[167,147194,3492],{"class":173},[167,147196,147197],{"class":169,"line":7618},[167,147198,276],{"class":173},[167,147200,147201,147203,147205],{"class":169,"line":7627},[167,147202,282],{"class":173},[167,147204,178],{"class":177},[167,147206,185],{"class":173},[15,147208,147209],{},"This example makes three things easy to inspect:",[33,147211,147212,147215,147218],{},[36,147213,147214],{},"Which dependencies are collected during render.",[36,147216,147217],{},"Which changes cause fresh updates.",[36,147219,147220],{},"How the component's scope affects its reactive surface area.",[22,147222,60191],{"id":60190},[15,147224,147225,57920,147227,147229],{},[87,147226,7744],{},[87,147228,7747],{}," are not decorative lifecycle hooks or generic observability tools. They are diagnostic instruments for understanding render behavior from the inside.",[15,147231,147232],{},"Used well, they help you:",[33,147234,147235,147238,147241],{},[36,147236,147237],{},"Detect accidental dependencies.",[36,147239,147240],{},"Reduce unnecessary renders.",[36,147242,147243,147244,1679],{},"Understand the relationship between template code, reactive state, and ",[87,147245,1661],{},[5367,147247,147248],{},[15,147249,147250],{},"Before you optimize blindly, inspect which dependencies are being collected and which changes are actually firing the render.",[924,147252,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":147254},[147255,147256,147257,147258,147259,147265,147270,147271],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":57819,"depth":188,"text":57820,"children":147260},[147261,147262,147263,147264],{"id":146164,"depth":205,"text":146165},{"id":146176,"depth":205,"text":146177},{"id":146186,"depth":205,"text":146187},{"id":146193,"depth":205,"text":146194},{"id":57925,"depth":188,"text":57926,"children":147266},[147267,147268,147269],{"id":146202,"depth":205,"text":146203},{"id":146212,"depth":205,"text":146213},{"id":146221,"depth":205,"text":146222},{"id":87571,"depth":188,"text":131192},{"id":60190,"depth":188,"text":60191},"Illustration of render debugging in Vue with renderTracked and renderTriggered","How to use renderTracked, renderTriggered, onRenderTracked, and onRenderTriggered to understand which dependencies enter a render and which changes are forcing new updates.",{"updatedAt":9154,"coverCaption":147275,"author":946,"keywords":147276},"renderTracked and renderTriggered help you see which dependency enters render and which one triggers it again.",[3258,7744,7747,8360,8420],"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en",[147279],{"headline":134575,"author":147280,"datePublished":9154,"@type":961},{"name":946,"@type":959},{"title":134575,"description":147273},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en",[147284,147285,147287,147288,147289],{"tag":129945,"color":7725},{"tag":147286,"color":9167},"Debugging",{"tag":69637,"color":9170},{"tag":60269,"color":3270},{"tag":60271,"color":7731},"xPMZSwH6-42TJ7SSTzYhMU39QuSJoq6S7WTM5ZO8tn8",{"id":7734,"title":7735,"body":147292,"cover":9149,"coverAlt":9150,"date":9151,"description":9152,"draft":940,"extension":941,"lab":942,"locale":943,"meta":148527,"navigation":208,"path":9157,"schemaOrg":148529,"seo":148532,"series":7718,"seriesDescription":7719,"seriesOrder":273,"seriesTitle":7720,"slug":942,"stem":9162,"tags":148533,"__hash__":9173},{"type":8,"value":147293,"toc":148508},[147294,147300,147302,147308,147310,147316,147318,147320,147334,147340,147342,147346,147348,147362,147364,147392,147394,147404,147406,147408,147410,147412,147424,147426,147428,147430,147432,147452,147454,147456,147458,147464,147466,147470,147472,147474,147476,147478,147480,147482,147486,147488,147492,147494,147496,147498,147986,148472,148474,148482,148484,148490,148492,148502,148506],[11,147295,7741,147296,1025,147298,6219],{"id":7740},[87,147297,7744],{},[87,147299,7747],{},[15,147301,7750],{},[15,147303,7753,147304,1028,147306,7758],{},[87,147305,7744],{},[87,147307,7747],{},[15,147309,7761],{},[33,147311,147312,147314],{},[36,147313,7766],{},[36,147315,7769],{},[22,147317,6231],{"id":6230},[15,147319,7774],{},[33,147321,147322,147324,147326,147328],{},[36,147323,7779],{},[36,147325,7782],{},[36,147327,7785],{},[36,147329,147330,1028,147332,7792],{},[87,147331,1661],{},[87,147333,1665],{},[15,147335,7795,147336,1028,147338,7800],{},[87,147337,7744],{},[87,147339,7747],{},[22,147341,6257],{"id":6256},[15,147343,7805,147344,7808],{},[87,147345,1661],{},[15,147347,7811],{},[33,147349,147350,147356],{},[36,147351,147352,6262,147354,7821],{},[87,147353,7744],{},[87,147355,7820],{},[36,147357,147358,6262,147360,7829],{},[87,147359,7747],{},[87,147361,7828],{},[15,147363,7832],{},[33,147365,147366,147370,147374,147386],{},[36,147367,147368,7840],{},[87,147369,7839],{},[36,147371,147372,7846],{},[87,147373,7845],{},[36,147375,147376,7851,147378,1025,147380,1025,147382,1025,147384,7863],{},[87,147377,569],{},[87,147379,4233],{},[87,147381,7856],{},[87,147383,7859],{},[87,147385,7862],{},[36,147387,147388,1028,147390,7872],{},[87,147389,7868],{},[87,147391,7871],{},[15,147393,7875],{},[33,147395,147396,147398],{},[36,147397,7880],{},[36,147399,7883,147400,90,147402,7890],{},[87,147401,7886],{},[87,147403,7889],{},[15,147405,7893],{},[22,147407,6322],{"id":6321},[15,147409,7898],{},[15,147411,7901],{},[33,147413,147414,147416,147418,147420],{},[36,147415,7906],{},[36,147417,7909],{},[36,147419,7912],{},[36,147421,7915,147422,7918],{},[87,147423,1661],{},[15,147425,7921],{},[22,147427,6349],{"id":6348},[15,147429,7926],{},[15,147431,7929],{},[33,147433,147434,147444,147448,147450],{},[36,147435,7934,147436,1025,147438,1025,147440,90,147442,1679],{},[87,147437,3300],{},[87,147439,3307],{},[87,147441,1661],{},[87,147443,1665],{},[36,147445,7945,147446,4270],{},[87,147447,1665],{},[36,147449,7950],{},[36,147451,7953],{},[15,147453,7956],{},[22,147455,3085],{"id":3084},[3087,147457,7962],{"id":7961},[15,147459,7965,147460,90,147462,1679],{},[87,147461,1665],{},[87,147463,1661],{},[3087,147465,7973],{"id":7972},[15,147467,7976,147468,7979],{},[87,147469,2085],{},[3087,147471,7983],{"id":7982},[15,147473,7986],{},[3087,147475,7990],{"id":7989},[15,147477,7993],{},[22,147479,7997],{"id":7996},[3087,147481,8001],{"id":8000},[15,147483,8004,147484,8007],{},[87,147485,7744],{},[3087,147487,8011],{"id":8010},[15,147489,147490,8016],{},[87,147491,7747],{},[3087,147493,8020],{"id":8019},[15,147495,8023],{},[22,147497,8027],{"id":8026},[154,147499,147500],{"className":156,"code":8030,"filename":3260,"language":162,"meta":163,"style":163},[87,147501,147502,147518,147528,147532,147544,147552,147558,147562,147566,147578,147586,147592,147596,147600,147612,147632,147652,147672,147676,147680,147696,147712,147722,147730,147742,147746,147766,147770,147780,147784,147788,147792,147806,147818,147822,147830,147834,147838,147842,147846,147860,147872,147876,147884,147888,147892,147896,147900,147904,147920,147944,147948,147960,147964,147974,147978],{"__ignoreMap":163},[167,147503,147504,147506,147508,147510,147512,147514,147516],{"class":169,"line":170},[167,147505,174],{"class":173},[167,147507,178],{"class":177},[167,147509,182],{"class":181},[167,147511,1050],{"class":181},[167,147513,267],{"class":173},[167,147515,1055],{"class":201},[167,147517,185],{"class":173},[167,147519,147520,147522,147524,147526],{"class":169,"line":188},[167,147521,192],{"class":191},[167,147523,8055],{"class":173},[167,147525,198],{"class":191},[167,147527,202],{"class":201},[167,147529,147530],{"class":169,"line":205},[167,147531,209],{"emptyLinePlaceholder":208},[167,147533,147534,147536,147538,147540,147542],{"class":169,"line":160},[167,147535,216],{"class":191},[167,147537,8070],{"class":219},[167,147539,223],{"class":191},[167,147541,846],{"class":181},[167,147543,372],{"class":173},[167,147545,147546,147548,147550],{"class":169,"line":238},[167,147547,8081],{"class":173},[167,147549,2184],{"class":201},[167,147551,393],{"class":173},[167,147553,147554,147556],{"class":169,"line":243},[167,147555,8090],{"class":173},[167,147557,8093],{"class":219},[167,147559,147560],{"class":169,"line":261},[167,147561,403],{"class":173},[167,147563,147564],{"class":169,"line":273},[167,147565,209],{"emptyLinePlaceholder":208},[167,147567,147568,147570,147572,147574,147576],{"class":169,"line":279},[167,147569,216],{"class":191},[167,147571,8108],{"class":219},[167,147573,223],{"class":191},[167,147575,846],{"class":181},[167,147577,372],{"class":173},[167,147579,147580,147582,147584],{"class":169,"line":289},[167,147581,8119],{"class":173},[167,147583,1835],{"class":219},[167,147585,393],{"class":173},[167,147587,147588,147590],{"class":169,"line":294},[167,147589,8128],{"class":173},[167,147591,3637],{"class":219},[167,147593,147594],{"class":169,"line":304},[167,147595,403],{"class":173},[167,147597,147598],{"class":169,"line":313},[167,147599,209],{"emptyLinePlaceholder":208},[167,147601,147602,147604,147606,147608,147610],{"class":169,"line":161},[167,147603,216],{"class":191},[167,147605,3368],{"class":219},[167,147607,223],{"class":191},[167,147609,226],{"class":181},[167,147611,1827],{"class":173},[167,147613,147614,147616,147618,147620,147622,147624,147626,147628,147630],{"class":169,"line":335},[167,147615,1832],{"class":173},[167,147617,1835],{"class":219},[167,147619,3383],{"class":173},[167,147621,8161],{"class":201},[167,147623,8164],{"class":173},[167,147625,3392],{"class":219},[167,147627,8169],{"class":173},[167,147629,8172],{"class":201},[167,147631,1856],{"class":173},[167,147633,147634,147636,147638,147640,147642,147644,147646,147648,147650],{"class":169,"line":341},[167,147635,1832],{"class":173},[167,147637,1853],{"class":219},[167,147639,3383],{"class":173},[167,147641,8185],{"class":201},[167,147643,8164],{"class":173},[167,147645,390],{"class":219},[167,147647,8169],{"class":173},[167,147649,8194],{"class":201},[167,147651,1856],{"class":173},[167,147653,147654,147656,147658,147660,147662,147664,147666,147668,147670],{"class":169,"line":489},[167,147655,1832],{"class":173},[167,147657,8203],{"class":219},[167,147659,3383],{"class":173},[167,147661,8208],{"class":201},[167,147663,8164],{"class":173},[167,147665,3392],{"class":219},[167,147667,8169],{"class":173},[167,147669,8172],{"class":201},[167,147671,599],{"class":173},[167,147673,147674],{"class":169,"line":495},[167,147675,429],{"class":173},[167,147677,147678],{"class":169,"line":501},[167,147679,209],{"emptyLinePlaceholder":208},[167,147681,147682,147684,147686,147688,147690,147692,147694],{"class":169,"line":512},[167,147683,216],{"class":191},[167,147685,8233],{"class":219},[167,147687,223],{"class":191},[167,147689,1898],{"class":181},[167,147691,1493],{"class":173},[167,147693,639],{"class":191},[167,147695,1905],{"class":173},[167,147697,147698,147700,147702,147704,147706,147708,147710],{"class":169,"line":781},[167,147699,1539],{"class":191},[167,147701,3451],{"class":173},[167,147703,8252],{"class":181},[167,147705,229],{"class":173},[167,147707,5075],{"class":254},[167,147709,8259],{"class":191},[167,147711,1905],{"class":173},[167,147713,147714,147716,147718,147720],{"class":169,"line":786},[167,147715,8266],{"class":191},[167,147717,8269],{"class":219},[167,147719,223],{"class":191},[167,147721,8274],{"class":173},[167,147723,147724,147726,147728],{"class":169,"line":2678},[167,147725,8279],{"class":173},[167,147727,2506],{"class":181},[167,147729,2917],{"class":173},[167,147731,147732,147734,147736,147738,147740],{"class":169,"line":2692},[167,147733,8279],{"class":173},[167,147735,8290],{"class":181},[167,147737,8293],{"class":173},[167,147739,2506],{"class":181},[167,147741,2509],{"class":173},[167,147743,147744],{"class":169,"line":3575},[167,147745,209],{"emptyLinePlaceholder":208},[167,147747,147748,147750,147752,147754,147756,147758,147760,147762,147764],{"class":169,"line":5028},[167,147749,8266],{"class":191},[167,147751,8308],{"class":219},[167,147753,223],{"class":191},[167,147755,8313],{"class":173},[167,147757,8316],{"class":191},[167,147759,5625],{"class":191},[167,147761,8321],{"class":173},[167,147763,583],{"class":191},[167,147765,3487],{"class":219},[167,147767,147768],{"class":169,"line":5037},[167,147769,209],{"emptyLinePlaceholder":208},[167,147771,147772,147774,147776,147778],{"class":169,"line":5046},[167,147773,1937],{"class":191},[167,147775,8336],{"class":173},[167,147777,8339],{"class":191},[167,147779,8342],{"class":173},[167,147781,147782],{"class":169,"line":6756},[167,147783,8347],{"class":173},[167,147785,147786],{"class":169,"line":6778},[167,147787,403],{"class":173},[167,147789,147790],{"class":169,"line":6783},[167,147791,209],{"emptyLinePlaceholder":208},[167,147793,147794,147796,147798,147800,147802,147804],{"class":169,"line":6788},[167,147795,8360],{"class":181},[167,147797,1918],{"class":173},[167,147799,4195],{"class":254},[167,147801,693],{"class":173},[167,147803,639],{"class":191},[167,147805,1905],{"class":173},[167,147807,147808,147810,147812,147814,147816],{"class":169,"line":6793},[167,147809,2608],{"class":173},[167,147811,2611],{"class":181},[167,147813,229],{"class":173},[167,147815,8381],{"class":201},[167,147817,627],{"class":173},[167,147819,147820],{"class":169,"line":6809},[167,147821,8388],{"class":173},[167,147823,147824,147826,147828],{"class":169,"line":6824},[167,147825,8393],{"class":173},[167,147827,4258],{"class":181},[167,147829,8398],{"class":173},[167,147831,147832],{"class":169,"line":6829},[167,147833,8403],{"class":173},[167,147835,147836],{"class":169,"line":6836},[167,147837,8347],{"class":173},[167,147839,147840],{"class":169,"line":6845},[167,147841,403],{"class":173},[167,147843,147844],{"class":169,"line":6854},[167,147845,209],{"emptyLinePlaceholder":208},[167,147847,147848,147850,147852,147854,147856,147858],{"class":169,"line":6861},[167,147849,8420],{"class":181},[167,147851,1918],{"class":173},[167,147853,4195],{"class":254},[167,147855,693],{"class":173},[167,147857,639],{"class":191},[167,147859,1905],{"class":173},[167,147861,147862,147864,147866,147868,147870],{"class":169,"line":6879},[167,147863,2608],{"class":173},[167,147865,2611],{"class":181},[167,147867,229],{"class":173},[167,147869,8441],{"class":201},[167,147871,627],{"class":173},[167,147873,147874],{"class":169,"line":6884},[167,147875,8388],{"class":173},[167,147877,147878,147880,147882],{"class":169,"line":6889},[167,147879,8393],{"class":173},[167,147881,4258],{"class":181},[167,147883,8398],{"class":173},[167,147885,147886],{"class":169,"line":6898},[167,147887,8460],{"class":173},[167,147889,147890],{"class":169,"line":6903},[167,147891,8465],{"class":173},[167,147893,147894],{"class":169,"line":6912},[167,147895,8347],{"class":173},[167,147897,147898],{"class":169,"line":6928},[167,147899,403],{"class":173},[167,147901,147902],{"class":169,"line":6949},[167,147903,209],{"emptyLinePlaceholder":208},[167,147905,147906,147908,147910,147912,147914,147916,147918],{"class":169,"line":6954},[167,147907,246],{"class":191},[167,147909,8484],{"class":181},[167,147911,229],{"class":173},[167,147913,3433],{"class":254},[167,147915,583],{"class":191},[167,147917,8493],{"class":219},[167,147919,258],{"class":173},[167,147921,147922,147924,147926,147928,147930,147932,147934,147936,147938,147940,147942],{"class":169,"line":6975},[167,147923,1443],{"class":191},[167,147925,3446],{"class":219},[167,147927,223],{"class":191},[167,147929,3451],{"class":173},[167,147931,3454],{"class":181},[167,147933,229],{"class":173},[167,147935,1926],{"class":254},[167,147937,8259],{"class":191},[167,147939,3465],{"class":173},[167,147941,2550],{"class":191},[167,147943,3470],{"class":173},[167,147945,147946],{"class":169,"line":6989},[167,147947,209],{"emptyLinePlaceholder":208},[167,147949,147950,147952,147954,147956,147958],{"class":169,"line":7003},[167,147951,2544],{"class":191},[167,147953,2526],{"class":173},[167,147955,6641],{"class":191},[167,147957,8534],{"class":173},[167,147959,2556],{"class":191},[167,147961,147962],{"class":169,"line":7017},[167,147963,209],{"emptyLinePlaceholder":208},[167,147965,147966,147968,147970,147972],{"class":169,"line":7026},[167,147967,8545],{"class":173},[167,147969,267],{"class":191},[167,147971,5625],{"class":191},[167,147973,8552],{"class":173},[167,147975,147976],{"class":169,"line":7031},[167,147977,276],{"class":173},[167,147979,147980,147982,147984],{"class":169,"line":7048},[167,147981,282],{"class":173},[167,147983,178],{"class":177},[167,147985,185],{"class":173},[154,147987,147988],{"className":156,"code":8567,"filename":3973,"language":162,"meta":163,"style":163},[87,147989,147990,148004,148012,148020,148024,148030,148036,148040,148048,148054,148058,148062,148070,148076,148080,148084,148104,148124,148144,148148,148152,148156,148160,148164,148170,148188,148198,148206,148222,148226,148248,148252,148262,148266,148270,148274,148278,148288,148300,148304,148312,148316,148320,148324,148328,148338,148350,148354,148362,148366,148370,148374,148378,148382,148386,148396,148422,148426,148438,148442,148452,148456,148460,148464],{"__ignoreMap":163},[167,147991,147992,147994,147996,147998,148000,148002],{"class":169,"line":170},[167,147993,174],{"class":173},[167,147995,178],{"class":177},[167,147997,1050],{"class":181},[167,147999,267],{"class":173},[167,148001,1055],{"class":201},[167,148003,185],{"class":173},[167,148005,148006,148008,148010],{"class":169,"line":188},[167,148007,608],{"class":191},[167,148009,3991],{"class":191},[167,148011,1905],{"class":173},[167,148013,148014,148016,148018],{"class":169,"line":205},[167,148015,4398],{"class":173},[167,148017,8598],{"class":201},[167,148019,393],{"class":173},[167,148021,148022],{"class":169,"line":160},[167,148023,209],{"emptyLinePlaceholder":208},[167,148025,148026,148028],{"class":169,"line":238},[167,148027,7176],{"class":181},[167,148029,763],{"class":173},[167,148031,148032,148034],{"class":169,"line":243},[167,148033,1937],{"class":191},[167,148035,1905],{"class":173},[167,148037,148038],{"class":169,"line":261},[167,148039,8621],{"class":173},[167,148041,148042,148044,148046],{"class":169,"line":273},[167,148043,8626],{"class":173},[167,148045,2184],{"class":201},[167,148047,393],{"class":173},[167,148049,148050,148052],{"class":169,"line":279},[167,148051,8635],{"class":173},[167,148053,8093],{"class":219},[167,148055,148056],{"class":169,"line":289},[167,148057,8642],{"class":173},[167,148059,148060],{"class":169,"line":294},[167,148061,8647],{"class":173},[167,148063,148064,148066,148068],{"class":169,"line":304},[167,148065,8652],{"class":173},[167,148067,1835],{"class":219},[167,148069,393],{"class":173},[167,148071,148072,148074],{"class":169,"line":313},[167,148073,8661],{"class":173},[167,148075,3637],{"class":219},[167,148077,148078],{"class":169,"line":161},[167,148079,8642],{"class":173},[167,148081,148082],{"class":169,"line":335},[167,148083,8672],{"class":173},[167,148085,148086,148088,148090,148092,148094,148096,148098,148100,148102],{"class":169,"line":341},[167,148087,8677],{"class":173},[167,148089,1835],{"class":219},[167,148091,3383],{"class":173},[167,148093,8161],{"class":201},[167,148095,8164],{"class":173},[167,148097,3392],{"class":219},[167,148099,8169],{"class":173},[167,148101,8172],{"class":201},[167,148103,1856],{"class":173},[167,148105,148106,148108,148110,148112,148114,148116,148118,148120,148122],{"class":169,"line":489},[167,148107,8677],{"class":173},[167,148109,1853],{"class":219},[167,148111,3383],{"class":173},[167,148113,8185],{"class":201},[167,148115,8164],{"class":173},[167,148117,390],{"class":219},[167,148119,8169],{"class":173},[167,148121,8194],{"class":201},[167,148123,1856],{"class":173},[167,148125,148126,148128,148130,148132,148134,148136,148138,148140,148142],{"class":169,"line":495},[167,148127,8677],{"class":173},[167,148129,8203],{"class":219},[167,148131,3383],{"class":173},[167,148133,8208],{"class":201},[167,148135,8164],{"class":173},[167,148137,3392],{"class":219},[167,148139,8169],{"class":173},[167,148141,8172],{"class":201},[167,148143,599],{"class":173},[167,148145,148146],{"class":169,"line":501},[167,148147,8738],{"class":173},[167,148149,148150],{"class":169,"line":512},[167,148151,4049],{"class":173},[167,148153,148154],{"class":169,"line":781},[167,148155,398],{"class":173},[167,148157,148158],{"class":169,"line":786},[167,148159,209],{"emptyLinePlaceholder":208},[167,148161,148162],{"class":169,"line":2678},[167,148163,8755],{"class":173},[167,148165,148166,148168],{"class":169,"line":2692},[167,148167,8760],{"class":181},[167,148169,763],{"class":173},[167,148171,148172,148174,148176,148178,148180,148182,148184,148186],{"class":169,"line":3575},[167,148173,8767],{"class":191},[167,148175,7351],{"class":219},[167,148177,8772],{"class":173},[167,148179,8252],{"class":181},[167,148181,229],{"class":173},[167,148183,5075],{"class":254},[167,148185,8259],{"class":191},[167,148187,1905],{"class":173},[167,148189,148190,148192,148194,148196],{"class":169,"line":5028},[167,148191,8787],{"class":191},[167,148193,8269],{"class":219},[167,148195,223],{"class":191},[167,148197,8274],{"class":173},[167,148199,148200,148202,148204],{"class":169,"line":5037},[167,148201,8798],{"class":173},[167,148203,2506],{"class":181},[167,148205,2917],{"class":173},[167,148207,148208,148210,148212,148214,148216,148218,148220],{"class":169,"line":5046},[167,148209,8798],{"class":173},[167,148211,8290],{"class":181},[167,148213,229],{"class":173},[167,148215,4927],{"class":219},[167,148217,8815],{"class":173},[167,148219,2506],{"class":181},[167,148221,2509],{"class":173},[167,148223,148224],{"class":169,"line":6756},[167,148225,209],{"emptyLinePlaceholder":208},[167,148227,148228,148230,148232,148234,148236,148238,148240,148242,148244,148246],{"class":169,"line":6778},[167,148229,8787],{"class":191},[167,148231,8308],{"class":219},[167,148233,223],{"class":191},[167,148235,7351],{"class":219},[167,148237,8836],{"class":173},[167,148239,8316],{"class":191},[167,148241,5625],{"class":191},[167,148243,8321],{"class":173},[167,148245,583],{"class":191},[167,148247,3487],{"class":219},[167,148249,148250],{"class":169,"line":6783},[167,148251,209],{"emptyLinePlaceholder":208},[167,148253,148254,148256,148258,148260],{"class":169,"line":6788},[167,148255,8855],{"class":191},[167,148257,8336],{"class":173},[167,148259,8339],{"class":191},[167,148261,8342],{"class":173},[167,148263,148264],{"class":169,"line":6793},[167,148265,8866],{"class":173},[167,148267,148268],{"class":169,"line":6809},[167,148269,4049],{"class":173},[167,148271,148272],{"class":169,"line":6824},[167,148273,398],{"class":173},[167,148275,148276],{"class":169,"line":6829},[167,148277,209],{"emptyLinePlaceholder":208},[167,148279,148280,148282,148284,148286],{"class":169,"line":6836},[167,148281,8883],{"class":181},[167,148283,229],{"class":173},[167,148285,4195],{"class":254},[167,148287,258],{"class":173},[167,148289,148290,148292,148294,148296,148298],{"class":169,"line":6845},[167,148291,8894],{"class":173},[167,148293,2611],{"class":181},[167,148295,229],{"class":173},[167,148297,8381],{"class":201},[167,148299,627],{"class":173},[167,148301,148302],{"class":169,"line":6854},[167,148303,8907],{"class":173},[167,148305,148306,148308,148310],{"class":169,"line":6861},[167,148307,8912],{"class":173},[167,148309,4258],{"class":181},[167,148311,8398],{"class":173},[167,148313,148314],{"class":169,"line":6879},[167,148315,8921],{"class":173},[167,148317,148318],{"class":169,"line":6884},[167,148319,8926],{"class":173},[167,148321,148322],{"class":169,"line":6889},[167,148323,398],{"class":173},[167,148325,148326],{"class":169,"line":6898},[167,148327,209],{"emptyLinePlaceholder":208},[167,148329,148330,148332,148334,148336],{"class":169,"line":6903},[167,148331,8939],{"class":181},[167,148333,229],{"class":173},[167,148335,4195],{"class":254},[167,148337,258],{"class":173},[167,148339,148340,148342,148344,148346,148348],{"class":169,"line":6912},[167,148341,8894],{"class":173},[167,148343,2611],{"class":181},[167,148345,229],{"class":173},[167,148347,8441],{"class":201},[167,148349,627],{"class":173},[167,148351,148352],{"class":169,"line":6928},[167,148353,8907],{"class":173},[167,148355,148356,148358,148360],{"class":169,"line":6949},[167,148357,8912],{"class":173},[167,148359,4258],{"class":181},[167,148361,8398],{"class":173},[167,148363,148364],{"class":169,"line":6954},[167,148365,8974],{"class":173},[167,148367,148368],{"class":169,"line":6975},[167,148369,8979],{"class":173},[167,148371,148372],{"class":169,"line":6989},[167,148373,8926],{"class":173},[167,148375,148376],{"class":169,"line":7003},[167,148377,398],{"class":173},[167,148379,148380],{"class":169,"line":7017},[167,148381,209],{"emptyLinePlaceholder":208},[167,148383,148384],{"class":169,"line":7026},[167,148385,4419],{"class":173},[167,148387,148388,148390,148392,148394],{"class":169,"line":7031},[167,148389,9000],{"class":181},[167,148391,229],{"class":173},[167,148393,3433],{"class":254},[167,148395,258],{"class":173},[167,148397,148398,148400,148402,148404,148406,148408,148410,148412,148414,148416,148418,148420],{"class":169,"line":7048},[167,148399,4435],{"class":191},[167,148401,3446],{"class":219},[167,148403,223],{"class":191},[167,148405,7351],{"class":219},[167,148407,8772],{"class":173},[167,148409,3454],{"class":181},[167,148411,229],{"class":173},[167,148413,1926],{"class":254},[167,148415,8259],{"class":191},[167,148417,3465],{"class":173},[167,148419,2550],{"class":191},[167,148421,3470],{"class":173},[167,148423,148424],{"class":169,"line":7057},[167,148425,209],{"emptyLinePlaceholder":208},[167,148427,148428,148430,148432,148434,148436],{"class":169,"line":7555},[167,148429,7261],{"class":191},[167,148431,2526],{"class":173},[167,148433,6641],{"class":191},[167,148435,8534],{"class":173},[167,148437,2556],{"class":191},[167,148439,148440],{"class":169,"line":7560},[167,148441,209],{"emptyLinePlaceholder":208},[167,148443,148444,148446,148448,148450],{"class":169,"line":7579},[167,148445,9057],{"class":173},[167,148447,267],{"class":191},[167,148449,5625],{"class":191},[167,148451,8552],{"class":173},[167,148453,148454],{"class":169,"line":7592},[167,148455,4049],{"class":173},[167,148457,148458],{"class":169,"line":7605},[167,148459,3492],{"class":173},[167,148461,148462],{"class":169,"line":7618},[167,148463,276],{"class":173},[167,148465,148466,148468,148470],{"class":169,"line":7627},[167,148467,282],{"class":173},[167,148469,178],{"class":177},[167,148471,185],{"class":173},[15,148473,9086],{},[33,148475,148476,148478,148480],{},[36,148477,9091],{},[36,148479,9094],{},[36,148481,9097],{},[22,148483,7678],{"id":7677},[15,148485,148486,1028,148488,9106],{},[87,148487,7744],{},[87,148489,7747],{},[15,148491,9109],{},[33,148493,148494,148496,148498],{},[36,148495,9114],{},[36,148497,9117],{},[36,148499,9120,148500,1679],{},[87,148501,1661],{},[5367,148503,148504],{},[15,148505,9127],{},[924,148507,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":148509},[148510,148511,148512,148513,148514,148520,148525,148526],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":148515},[148516,148517,148518,148519],{"id":7961,"depth":205,"text":7962},{"id":7972,"depth":205,"text":7973},{"id":7982,"depth":205,"text":7983},{"id":7989,"depth":205,"text":7990},{"id":7996,"depth":188,"text":7997,"children":148521},[148522,148523,148524],{"id":8000,"depth":205,"text":8001},{"id":8010,"depth":205,"text":8011},{"id":8019,"depth":205,"text":8020},{"id":8026,"depth":188,"text":8027},{"id":7677,"depth":188,"text":7678},{"updatedAt":9154,"coverCaption":9155,"author":946,"keywords":148528},[3258,7744,7747,8360,8420],[148530],{"headline":7735,"author":148531,"datePublished":9154,"@type":961},{"name":946,"@type":959},{"title":7735,"description":9152},[148534,148535,148536,148537,148538],{"tag":7724,"color":7725},{"tag":9166,"color":9167},{"tag":9169,"color":9170},{"tag":3269,"color":3270},{"tag":7730,"color":7731},{"id":148540,"title":134581,"body":148541,"cover":7704,"coverAlt":149895,"date":7706,"description":149896,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":149897,"navigation":208,"path":149901,"schemaOrg":149902,"seo":149905,"series":7718,"seriesDescription":129940,"seriesOrder":279,"seriesTitle":129941,"slug":942,"stem":149906,"tags":149907,"__hash__":149913},"blog\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.en.md",{"type":8,"value":148542,"toc":149881},[148543,148549,148552,148557,148559,148562,148576,148581,148583,148594,148597,148611,148614,148634,148637,148639,148644,148646,148657,148664,148666,148669,148671,148689,148695,148697,148701,148709,148717,148721,148734,148738,148741,148746,148750,148755,148758,148762,149292,149857,149863,149869,149871,149876,149879],[11,148544,148546,148547],{"id":148545},"vue-lifecycle-server-side-rendering-with-serverprefetch","Vue Lifecycle: server-side rendering with ",[87,148548,6218],{},[15,148550,148551],{},"When an application uses SSR (Server-Side Rendering), the first render no longer happens only in the browser. The server generates the HTML before sending it, and if important data arrives too late, the user gets a page that feels incomplete or not especially useful until the client requests that data again.",[15,148553,148554,148556],{},[87,148555,6218],{}," exists to solve exactly that moment. It lets Vue wait for asynchronous data before rendering the component on the server, so the initial HTML already includes real content instead of depending on skeletons or placeholders that change during hydration.",[22,148558,57636],{"id":57635},[15,148560,148561],{},"With SSR, the first impression depends on the HTML generated on the server. If a product, an article, or a dashboard summary loads only after the component mounts in the client, several advantages are lost at once:",[33,148563,148564,148567,148570,148573],{},[36,148565,148566],{},"The user sees less useful content on the first paint.",[36,148568,148569],{},"SEO gets a weaker document.",[36,148571,148572],{},"Hydration can feel inconsistent.",[36,148574,148575],{},"Work is duplicated between server and client.",[15,148577,148578,148580],{},[87,148579,6218],{}," helps make sure critical data is available in time for the initial render. It does not replace your entire data-fetching strategy, but it fits very well in the phase before the server render happens.",[22,148582,57681],{"id":57680},[15,148584,148585,146031,148587,148589,148590,148593],{},[87,148586,6218],{},[87,148588,6265],{}," in the Composition API let you register an asynchronous function that Vue resolves ",[3933,148591,148592],{},"before"," rendering the component on the server.",[15,148595,148596],{},"Simplified flow:",[33,148598,148599,148602,148605,148608],{},[36,148600,148601],{},"The component enters the SSR tree.",[36,148603,148604],{},"Vue runs the hook.",[36,148606,148607],{},"If the hook returns a promise, the renderer waits.",[36,148609,148610],{},"Once the promise resolves, Vue generates the HTML with the data already available.",[15,148612,148613],{},"Important details:",[33,148615,148616,148621,148624],{},[36,148617,148618,148619,1679],{},"It only runs during ",[3933,148620,6298],{},[36,148622,148623],{},"It does not replace client-side loading when the component appears outside the initial render.",[36,148625,59009,148626,148628,148629,63104,148631,148633],{},[3933,148627,6307],{},", it is usually better to use ",[87,148630,6311],{},[87,148632,6314],{},", since those utilities integrate serialization, caching, and hydration automatically.",[15,148635,148636],{},"You can think of this hook as a lower-level SSR tool: useful when you need fine-grained control inside a component rendered on the server.",[22,148638,57775],{"id":57774},[15,148640,148641,148643],{},[87,148642,6218],{}," makes sense when the initial HTML is important enough that the data should already be there.",[15,148645,80740],{},[33,148647,148648,148651,148654],{},[36,148649,148650],{},"Product pages that need name, price, and availability in the first response.",[36,148652,148653],{},"Articles or public content that should be indexable and visible from the start.",[36,148655,148656],{},"Components that depend on the current request before rendering.",[15,148658,148659,148660,148663],{},"Practical rule: if the data must exist ",[3933,148661,148662],{},"before the server render",", this hook is a strong option.",[22,148665,57799],{"id":57798},[15,148667,148668],{},"It should not become a generic answer for every fetch.",[15,148670,62983],{},[33,148672,148673,148676,148679,148686],{},[36,148674,148675],{},"The component only renders on the client.",[36,148677,148678],{},"The information is not critical for the initial HTML.",[36,148680,148681,148682,63104,148684,1679],{},"You are already using Nuxt and the case fits better in ",[87,148683,6311],{},[87,148685,6314],{},[36,148687,148688],{},"The fetch depends on browser-only APIs.",[15,148690,148691,148692,148694],{},"Also avoid expensive or unnecessary work here: everything you run inside ",[87,148693,6218],{}," directly affects the server response time.",[22,148696,57820],{"id":57819},[3087,148698,148700],{"id":148699},"_1-assuming-it-also-runs-during-client-navigation","1. Assuming it also runs during client navigation",[15,148702,148703,148705,148706,148708],{},[87,148704,6218],{}," does not replace ",[87,148707,6393],{},", nor does it cover an entire loading strategy by itself. If the component only renders on the client, this hook will not run.",[15,148710,148711,148712,63104,148714,148716],{},"Fix: add a fallback in ",[87,148713,6400],{},[87,148715,6403],{}," when the data is still missing.",[3087,148718,148720],{"id":148719},"_2-using-browser-apis-inside-the-hook","2. Using browser APIs inside the hook",[15,148722,148723,148724,1025,148726,109827,148728,148730,148731,148733],{},"During SSR, there is no ",[87,148725,6414],{},[87,148727,6417],{},[87,148729,2398],{},". Code inside ",[87,148732,6218],{}," must be safe to run on the server.",[3087,148735,148737],{"id":148736},"_3-repeating-the-fetch-unnecessarily","3. Repeating the fetch unnecessarily",[15,148739,148740],{},"If the server already fetched the data, there is no reason to request it again on the client.",[15,148742,148743,148744,1679],{},"Fix: check whether the state already exists before fetching in ",[87,148745,6393],{},[3087,148747,148749],{"id":148748},"_4-overloading-deep-components","4. Overloading deep components",[15,148751,70888,148752,148754],{},[87,148753,6218],{}," across too many components can increase response time and make the data flow harder to reason about.",[15,148756,148757],{},"Distribute responsibilities carefully: the page, layout, and inner components should each have a clear role.",[22,148759,148761],{"id":148760},"practical-example","Practical Example",[154,148763,148765],{"className":156,"code":148764,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onMounted, onServerPrefetch, ref } from 'vue'\n\ntype Product = {\n  id: number\n  name: string\n  price: number\n  stock: number\n}\n\nconst product = ref\u003CProduct | null>(null)\nconst errorMessage = ref('')\n\nasync function fetchProduct() {\n  const response = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts\u002F42')\n\n  if (!response.ok) {\n    throw new Error('The product could not be loaded.')\n  }\n\n  product.value = (await response.json()) as Product\n}\n\nonServerPrefetch(async () => {\n  try {\n    await fetchProduct()\n  } catch (error) {\n    errorMessage.value =\n      error instanceof Error ? error.message : 'Unexpected SSR error.'\n  }\n})\n\nonMounted(async () => {\n  if (product.value || errorMessage.value) return\n\n  try {\n    await fetchProduct()\n  } catch (error) {\n    errorMessage.value =\n      error instanceof Error ? error.message : 'Unexpected client error.'\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle class=\"product-card\">\n    \u003Cp v-if=\"errorMessage\">{{ errorMessage }}\u003C\u002Fp>\n\n    \u003Ctemplate v-else-if=\"product\">\n      \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n      \u003Cp>Price: {{ product.price }} USD\u003C\u002Fp>\n      \u003Cp>Stock: {{ product.stock }}\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n\n    \u003Cp v-else>Loading product...\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[87,148766,148767,148783,148793,148797,148807,148815,148823,148831,148839,148843,148847,148871,148887,148891,148901,148919,148923,148933,148948,148952,148956,148976,148980,148984,148998,149004,149012,149020,149026,149043,149047,149051,149055,149069,149081,149085,149091,149099,149107,149113,149130,149134,149138,149146,149150,149158,149172,149190,149194,149212,149224,149237,149249,149257,149261,149276,149284],{"__ignoreMap":163},[167,148768,148769,148771,148773,148775,148777,148779,148781],{"class":169,"line":170},[167,148770,174],{"class":173},[167,148772,178],{"class":177},[167,148774,182],{"class":181},[167,148776,1050],{"class":181},[167,148778,267],{"class":173},[167,148780,1055],{"class":201},[167,148782,185],{"class":173},[167,148784,148785,148787,148789,148791],{"class":169,"line":188},[167,148786,192],{"class":191},[167,148788,6481],{"class":173},[167,148790,198],{"class":191},[167,148792,202],{"class":201},[167,148794,148795],{"class":169,"line":205},[167,148796,209],{"emptyLinePlaceholder":208},[167,148798,148799,148801,148803,148805],{"class":169,"line":160},[167,148800,569],{"class":191},[167,148802,6496],{"class":181},[167,148804,223],{"class":191},[167,148806,1905],{"class":173},[167,148808,148809,148811,148813],{"class":169,"line":238},[167,148810,6505],{"class":254},[167,148812,583],{"class":191},[167,148814,6510],{"class":219},[167,148816,148817,148819,148821],{"class":169,"line":243},[167,148818,6515],{"class":254},[167,148820,583],{"class":191},[167,148822,6520],{"class":219},[167,148824,148825,148827,148829],{"class":169,"line":261},[167,148826,6525],{"class":254},[167,148828,583],{"class":191},[167,148830,6510],{"class":219},[167,148832,148833,148835,148837],{"class":169,"line":273},[167,148834,6534],{"class":254},[167,148836,583],{"class":191},[167,148838,6510],{"class":219},[167,148840,148841],{"class":169,"line":279},[167,148842,276],{"class":173},[167,148844,148845],{"class":169,"line":289},[167,148846,209],{"emptyLinePlaceholder":208},[167,148848,148849,148851,148853,148855,148857,148859,148861,148863,148865,148867,148869],{"class":169,"line":294},[167,148850,216],{"class":191},[167,148852,6553],{"class":219},[167,148854,223],{"class":191},[167,148856,226],{"class":181},[167,148858,174],{"class":173},[167,148860,6562],{"class":181},[167,148862,659],{"class":191},[167,148864,6567],{"class":219},[167,148866,6570],{"class":173},[167,148868,6573],{"class":219},[167,148870,235],{"class":173},[167,148872,148873,148875,148877,148879,148881,148883,148885],{"class":169,"line":304},[167,148874,216],{"class":191},[167,148876,6582],{"class":219},[167,148878,223],{"class":191},[167,148880,226],{"class":181},[167,148882,229],{"class":173},[167,148884,2184],{"class":201},[167,148886,235],{"class":173},[167,148888,148889],{"class":169,"line":313},[167,148890,209],{"emptyLinePlaceholder":208},[167,148892,148893,148895,148897,148899],{"class":169,"line":161},[167,148894,2523],{"class":191},[167,148896,1432],{"class":191},[167,148898,6605],{"class":181},[167,148900,763],{"class":173},[167,148902,148903,148905,148907,148909,148911,148913,148915,148917],{"class":169,"line":335},[167,148904,1443],{"class":191},[167,148906,6614],{"class":219},[167,148908,223],{"class":191},[167,148910,3009],{"class":191},[167,148912,6621],{"class":181},[167,148914,229],{"class":173},[167,148916,6626],{"class":201},[167,148918,235],{"class":173},[167,148920,148921],{"class":169,"line":341},[167,148922,209],{"emptyLinePlaceholder":208},[167,148924,148925,148927,148929,148931],{"class":169,"line":489},[167,148926,2544],{"class":191},[167,148928,2526],{"class":173},[167,148930,6641],{"class":191},[167,148932,6644],{"class":173},[167,148934,148935,148937,148939,148941,148943,148946],{"class":169,"line":495},[167,148936,6649],{"class":191},[167,148938,4224],{"class":191},[167,148940,6654],{"class":181},[167,148942,229],{"class":173},[167,148944,148945],{"class":201},"'The product could not be loaded.'",[167,148947,235],{"class":173},[167,148949,148950],{"class":169,"line":501},[167,148951,3492],{"class":173},[167,148953,148954],{"class":169,"line":512},[167,148955,209],{"emptyLinePlaceholder":208},[167,148957,148958,148960,148962,148964,148966,148968,148970,148972,148974],{"class":169,"line":781},[167,148959,6674],{"class":173},[167,148961,267],{"class":191},[167,148963,2526],{"class":173},[167,148965,2927],{"class":191},[167,148967,6683],{"class":173},[167,148969,6686],{"class":181},[167,148971,6689],{"class":173},[167,148973,6692],{"class":191},[167,148975,6695],{"class":181},[167,148977,148978],{"class":169,"line":786},[167,148979,276],{"class":173},[167,148981,148982],{"class":169,"line":2678},[167,148983,209],{"emptyLinePlaceholder":208},[167,148985,148986,148988,148990,148992,148994,148996],{"class":169,"line":2692},[167,148987,6708],{"class":181},[167,148989,229],{"class":173},[167,148991,2523],{"class":191},[167,148993,1469],{"class":173},[167,148995,639],{"class":191},[167,148997,1905],{"class":173},[167,148999,149000,149002],{"class":169,"line":3575},[167,149001,6723],{"class":191},[167,149003,1905],{"class":173},[167,149005,149006,149008,149010],{"class":169,"line":5028},[167,149007,6730],{"class":191},[167,149009,6605],{"class":181},[167,149011,2917],{"class":173},[167,149013,149014,149016,149018],{"class":169,"line":5037},[167,149015,6739],{"class":173},[167,149017,6742],{"class":191},[167,149019,6745],{"class":173},[167,149021,149022,149024],{"class":169,"line":5046},[167,149023,6750],{"class":173},[167,149025,6753],{"class":191},[167,149027,149028,149030,149032,149034,149036,149038,149040],{"class":169,"line":6756},[167,149029,6759],{"class":173},[167,149031,6762],{"class":191},[167,149033,6654],{"class":181},[167,149035,6767],{"class":191},[167,149037,6770],{"class":173},[167,149039,583],{"class":191},[167,149041,149042],{"class":201}," 'Unexpected SSR error.'\n",[167,149044,149045],{"class":169,"line":6778},[167,149046,3492],{"class":173},[167,149048,149049],{"class":169,"line":6783},[167,149050,403],{"class":173},[167,149052,149053],{"class":169,"line":6788},[167,149054,209],{"emptyLinePlaceholder":208},[167,149056,149057,149059,149061,149063,149065,149067],{"class":169,"line":6793},[167,149058,6796],{"class":181},[167,149060,229],{"class":173},[167,149062,2523],{"class":191},[167,149064,1469],{"class":173},[167,149066,639],{"class":191},[167,149068,1905],{"class":173},[167,149070,149071,149073,149075,149077,149079],{"class":169,"line":6809},[167,149072,2544],{"class":191},[167,149074,6814],{"class":173},[167,149076,4264],{"class":191},[167,149078,6819],{"class":173},[167,149080,2556],{"class":191},[167,149082,149083],{"class":169,"line":6824},[167,149084,209],{"emptyLinePlaceholder":208},[167,149086,149087,149089],{"class":169,"line":6829},[167,149088,6723],{"class":191},[167,149090,1905],{"class":173},[167,149092,149093,149095,149097],{"class":169,"line":6836},[167,149094,6730],{"class":191},[167,149096,6605],{"class":181},[167,149098,2917],{"class":173},[167,149100,149101,149103,149105],{"class":169,"line":6845},[167,149102,6739],{"class":173},[167,149104,6742],{"class":191},[167,149106,6745],{"class":173},[167,149108,149109,149111],{"class":169,"line":6854},[167,149110,6750],{"class":173},[167,149112,6753],{"class":191},[167,149114,149115,149117,149119,149121,149123,149125,149127],{"class":169,"line":6861},[167,149116,6759],{"class":173},[167,149118,6762],{"class":191},[167,149120,6654],{"class":181},[167,149122,6767],{"class":191},[167,149124,6770],{"class":173},[167,149126,583],{"class":191},[167,149128,149129],{"class":201}," 'Unexpected client error.'\n",[167,149131,149132],{"class":169,"line":6879},[167,149133,3492],{"class":173},[167,149135,149136],{"class":169,"line":6884},[167,149137,403],{"class":173},[167,149139,149140,149142,149144],{"class":169,"line":6889},[167,149141,282],{"class":173},[167,149143,178],{"class":177},[167,149145,185],{"class":173},[167,149147,149148],{"class":169,"line":6898},[167,149149,209],{"emptyLinePlaceholder":208},[167,149151,149152,149154,149156],{"class":169,"line":6903},[167,149153,174],{"class":173},[167,149155,299],{"class":177},[167,149157,185],{"class":173},[167,149159,149160,149162,149164,149166,149168,149170],{"class":169,"line":6912},[167,149161,307],{"class":173},[167,149163,3696],{"class":177},[167,149165,1245],{"class":181},[167,149167,267],{"class":173},[167,149169,6923],{"class":201},[167,149171,185],{"class":173},[167,149173,149174,149176,149178,149180,149182,149184,149186,149188],{"class":169,"line":6928},[167,149175,1257],{"class":173},[167,149177,15],{"class":177},[167,149179,5694],{"class":181},[167,149181,267],{"class":173},[167,149183,6939],{"class":201},[167,149185,6942],{"class":173},[167,149187,15],{"class":177},[167,149189,185],{"class":173},[167,149191,149192],{"class":169,"line":6949},[167,149193,209],{"emptyLinePlaceholder":208},[167,149195,149196,149198,149200,149202,149204,149206,149208,149210],{"class":169,"line":6954},[167,149197,1257],{"class":173},[167,149199,299],{"class":177},[167,149201,6961],{"class":191},[167,149203,267],{"class":173},[167,149205,5080],{"class":201},[167,149207,6968],{"class":173},[167,149209,5080],{"class":201},[167,149211,185],{"class":173},[167,149213,149214,149216,149218,149220,149222],{"class":169,"line":6975},[167,149215,1268],{"class":173},[167,149217,11],{"class":177},[167,149219,6982],{"class":173},[167,149221,11],{"class":177},[167,149223,185],{"class":173},[167,149225,149226,149228,149230,149233,149235],{"class":169,"line":6989},[167,149227,1268],{"class":173},[167,149229,15],{"class":177},[167,149231,149232],{"class":173},">Price: {{ product.price }} USD\u003C\u002F",[167,149234,15],{"class":177},[167,149236,185],{"class":173},[167,149238,149239,149241,149243,149245,149247],{"class":169,"line":7003},[167,149240,1268],{"class":173},[167,149242,15],{"class":177},[167,149244,7010],{"class":173},[167,149246,15],{"class":177},[167,149248,185],{"class":173},[167,149250,149251,149253,149255],{"class":169,"line":7017},[167,149252,1292],{"class":173},[167,149254,299],{"class":177},[167,149256,185],{"class":173},[167,149258,149259],{"class":169,"line":7026},[167,149260,209],{"emptyLinePlaceholder":208},[167,149262,149263,149265,149267,149269,149272,149274],{"class":169,"line":7031},[167,149264,1257],{"class":173},[167,149266,15],{"class":177},[167,149268,7038],{"class":181},[167,149270,149271],{"class":173},">Loading product...\u003C\u002F",[167,149273,15],{"class":177},[167,149275,185],{"class":173},[167,149277,149278,149280,149282],{"class":169,"line":7048},[167,149279,504],{"class":173},[167,149281,3696],{"class":177},[167,149283,185],{"class":173},[167,149285,149286,149288,149290],{"class":169,"line":7057},[167,149287,282],{"class":173},[167,149289,299],{"class":177},[167,149291,185],{"class":173},[154,149293,149295],{"className":156,"code":149294,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript lang=\"ts\">\nimport { defineComponent } from 'vue'\n\ntype Product = {\n  id: number\n  name: string\n  price: number\n  stock: number\n}\n\nexport default defineComponent({\n  name: 'ProductCardSsr',\n\n  data() {\n    return {\n      product: null as Product | null,\n      errorMessage: ''\n    }\n  },\n\n  methods: {\n    async fetchProduct() {\n      const response = await fetch('https:\u002F\u002Fapi.example.com\u002Fproducts\u002F42')\n\n      if (!response.ok) {\n        throw new Error('The product could not be loaded.')\n      }\n\n      this.product = (await response.json()) as Product\n    }\n  },\n\n  async serverPrefetch() {\n    try {\n      await this.fetchProduct()\n    } catch (error) {\n      this.errorMessage =\n        error instanceof Error ? error.message : 'Unexpected SSR error.'\n    }\n  },\n\n  async mounted() {\n    if (this.product || this.errorMessage) return\n\n    try {\n      await this.fetchProduct()\n    } catch (error) {\n      this.errorMessage =\n        error instanceof Error ? error.message : 'Unexpected client error.'\n    }\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle class=\"product-card\">\n    \u003Cp v-if=\"errorMessage\">{{ errorMessage }}\u003C\u002Fp>\n\n    \u003Ctemplate v-else-if=\"product\">\n      \u003Ch1>{{ product.name }}\u003C\u002Fh1>\n      \u003Cp>Price: {{ product.price }} USD\u003C\u002Fp>\n      \u003Cp>Stock: {{ product.stock }}\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n\n    \u003Cp v-else>Loading product...\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[87,149296,149297,149311,149321,149325,149335,149343,149351,149359,149367,149371,149375,149385,149393,149397,149403,149409,149425,149431,149435,149439,149443,149447,149455,149473,149477,149487,149501,149505,149509,149531,149535,149539,149543,149551,149557,149569,149577,149585,149601,149605,149609,149613,149621,149639,149643,149649,149661,149669,149677,149693,149697,149701,149705,149713,149717,149725,149739,149757,149761,149779,149791,149803,149815,149823,149827,149841,149849],{"__ignoreMap":163},[167,149298,149299,149301,149303,149305,149307,149309],{"class":169,"line":170},[167,149300,174],{"class":173},[167,149302,178],{"class":177},[167,149304,1050],{"class":181},[167,149306,267],{"class":173},[167,149308,1055],{"class":201},[167,149310,185],{"class":173},[167,149312,149313,149315,149317,149319],{"class":169,"line":188},[167,149314,192],{"class":191},[167,149316,7089],{"class":173},[167,149318,198],{"class":191},[167,149320,202],{"class":201},[167,149322,149323],{"class":169,"line":205},[167,149324,209],{"emptyLinePlaceholder":208},[167,149326,149327,149329,149331,149333],{"class":169,"line":160},[167,149328,569],{"class":191},[167,149330,6496],{"class":181},[167,149332,223],{"class":191},[167,149334,1905],{"class":173},[167,149336,149337,149339,149341],{"class":169,"line":238},[167,149338,6505],{"class":254},[167,149340,583],{"class":191},[167,149342,6510],{"class":219},[167,149344,149345,149347,149349],{"class":169,"line":243},[167,149346,6515],{"class":254},[167,149348,583],{"class":191},[167,149350,6520],{"class":219},[167,149352,149353,149355,149357],{"class":169,"line":261},[167,149354,6525],{"class":254},[167,149356,583],{"class":191},[167,149358,6510],{"class":219},[167,149360,149361,149363,149365],{"class":169,"line":273},[167,149362,6534],{"class":254},[167,149364,583],{"class":191},[167,149366,6510],{"class":219},[167,149368,149369],{"class":169,"line":279},[167,149370,276],{"class":173},[167,149372,149373],{"class":169,"line":289},[167,149374,209],{"emptyLinePlaceholder":208},[167,149376,149377,149379,149381,149383],{"class":169,"line":294},[167,149378,608],{"class":191},[167,149380,3991],{"class":191},[167,149382,7156],{"class":181},[167,149384,372],{"class":173},[167,149386,149387,149389,149391],{"class":169,"line":304},[167,149388,4398],{"class":173},[167,149390,7165],{"class":201},[167,149392,393],{"class":173},[167,149394,149395],{"class":169,"line":313},[167,149396,209],{"emptyLinePlaceholder":208},[167,149398,149399,149401],{"class":169,"line":161},[167,149400,7176],{"class":181},[167,149402,763],{"class":173},[167,149404,149405,149407],{"class":169,"line":335},[167,149406,1937],{"class":191},[167,149408,1905],{"class":173},[167,149410,149411,149413,149415,149417,149419,149421,149423],{"class":169,"line":341},[167,149412,7189],{"class":173},[167,149414,6573],{"class":219},[167,149416,654],{"class":191},[167,149418,6496],{"class":181},[167,149420,659],{"class":191},[167,149422,6567],{"class":219},[167,149424,393],{"class":173},[167,149426,149427,149429],{"class":169,"line":489},[167,149428,7206],{"class":173},[167,149430,7209],{"class":201},[167,149432,149433],{"class":169,"line":495},[167,149434,4049],{"class":173},[167,149436,149437],{"class":169,"line":501},[167,149438,398],{"class":173},[167,149440,149441],{"class":169,"line":512},[167,149442,209],{"emptyLinePlaceholder":208},[167,149444,149445],{"class":169,"line":781},[167,149446,4419],{"class":173},[167,149448,149449,149451,149453],{"class":169,"line":786},[167,149450,7230],{"class":191},[167,149452,6605],{"class":181},[167,149454,763],{"class":173},[167,149456,149457,149459,149461,149463,149465,149467,149469,149471],{"class":169,"line":2678},[167,149458,4435],{"class":191},[167,149460,6614],{"class":219},[167,149462,223],{"class":191},[167,149464,3009],{"class":191},[167,149466,6621],{"class":181},[167,149468,229],{"class":173},[167,149470,6626],{"class":201},[167,149472,235],{"class":173},[167,149474,149475],{"class":169,"line":2692},[167,149476,209],{"emptyLinePlaceholder":208},[167,149478,149479,149481,149483,149485],{"class":169,"line":3575},[167,149480,7261],{"class":191},[167,149482,2526],{"class":173},[167,149484,6641],{"class":191},[167,149486,6644],{"class":173},[167,149488,149489,149491,149493,149495,149497,149499],{"class":169,"line":5028},[167,149490,7272],{"class":191},[167,149492,4224],{"class":191},[167,149494,6654],{"class":181},[167,149496,229],{"class":173},[167,149498,148945],{"class":201},[167,149500,235],{"class":173},[167,149502,149503],{"class":169,"line":5037},[167,149504,7287],{"class":173},[167,149506,149507],{"class":169,"line":5046},[167,149508,209],{"emptyLinePlaceholder":208},[167,149510,149511,149513,149515,149517,149519,149521,149523,149525,149527,149529],{"class":169,"line":6756},[167,149512,741],{"class":219},[167,149514,7298],{"class":173},[167,149516,267],{"class":191},[167,149518,2526],{"class":173},[167,149520,2927],{"class":191},[167,149522,6683],{"class":173},[167,149524,6686],{"class":181},[167,149526,6689],{"class":173},[167,149528,6692],{"class":191},[167,149530,6695],{"class":181},[167,149532,149533],{"class":169,"line":6778},[167,149534,4049],{"class":173},[167,149536,149537],{"class":169,"line":6783},[167,149538,398],{"class":173},[167,149540,149541],{"class":169,"line":6788},[167,149542,209],{"emptyLinePlaceholder":208},[167,149544,149545,149547,149549],{"class":169,"line":6793},[167,149546,7331],{"class":191},[167,149548,7334],{"class":181},[167,149550,763],{"class":173},[167,149552,149553,149555],{"class":169,"line":6809},[167,149554,7341],{"class":191},[167,149556,1905],{"class":173},[167,149558,149559,149561,149563,149565,149567],{"class":169,"line":6824},[167,149560,7348],{"class":191},[167,149562,7351],{"class":219},[167,149564,1679],{"class":173},[167,149566,7356],{"class":181},[167,149568,2917],{"class":173},[167,149570,149571,149573,149575],{"class":169,"line":6829},[167,149572,7363],{"class":173},[167,149574,6742],{"class":191},[167,149576,6745],{"class":173},[167,149578,149579,149581,149583],{"class":169,"line":6836},[167,149580,741],{"class":219},[167,149582,7374],{"class":173},[167,149584,6753],{"class":191},[167,149586,149587,149589,149591,149593,149595,149597,149599],{"class":169,"line":6845},[167,149588,7381],{"class":173},[167,149590,6762],{"class":191},[167,149592,6654],{"class":181},[167,149594,6767],{"class":191},[167,149596,6770],{"class":173},[167,149598,583],{"class":191},[167,149600,149042],{"class":201},[167,149602,149603],{"class":169,"line":6854},[167,149604,4049],{"class":173},[167,149606,149607],{"class":169,"line":6861},[167,149608,398],{"class":173},[167,149610,149611],{"class":169,"line":6879},[167,149612,209],{"emptyLinePlaceholder":208},[167,149614,149615,149617,149619],{"class":169,"line":6884},[167,149616,7331],{"class":191},[167,149618,7412],{"class":181},[167,149620,763],{"class":173},[167,149622,149623,149625,149627,149629,149631,149633,149635,149637],{"class":169,"line":6889},[167,149624,7419],{"class":191},[167,149626,2526],{"class":173},[167,149628,4927],{"class":219},[167,149630,7298],{"class":173},[167,149632,4264],{"class":191},[167,149634,7351],{"class":219},[167,149636,7432],{"class":173},[167,149638,2556],{"class":191},[167,149640,149641],{"class":169,"line":6898},[167,149642,209],{"emptyLinePlaceholder":208},[167,149644,149645,149647],{"class":169,"line":6903},[167,149646,7341],{"class":191},[167,149648,1905],{"class":173},[167,149650,149651,149653,149655,149657,149659],{"class":169,"line":6912},[167,149652,7348],{"class":191},[167,149654,7351],{"class":219},[167,149656,1679],{"class":173},[167,149658,7356],{"class":181},[167,149660,2917],{"class":173},[167,149662,149663,149665,149667],{"class":169,"line":6928},[167,149664,7363],{"class":173},[167,149666,6742],{"class":191},[167,149668,6745],{"class":173},[167,149670,149671,149673,149675],{"class":169,"line":6949},[167,149672,741],{"class":219},[167,149674,7374],{"class":173},[167,149676,6753],{"class":191},[167,149678,149679,149681,149683,149685,149687,149689,149691],{"class":169,"line":6954},[167,149680,7381],{"class":173},[167,149682,6762],{"class":191},[167,149684,6654],{"class":181},[167,149686,6767],{"class":191},[167,149688,6770],{"class":173},[167,149690,583],{"class":191},[167,149692,149129],{"class":201},[167,149694,149695],{"class":169,"line":6975},[167,149696,4049],{"class":173},[167,149698,149699],{"class":169,"line":6989},[167,149700,3492],{"class":173},[167,149702,149703],{"class":169,"line":7003},[167,149704,403],{"class":173},[167,149706,149707,149709,149711],{"class":169,"line":7017},[167,149708,282],{"class":173},[167,149710,178],{"class":177},[167,149712,185],{"class":173},[167,149714,149715],{"class":169,"line":7026},[167,149716,209],{"emptyLinePlaceholder":208},[167,149718,149719,149721,149723],{"class":169,"line":7031},[167,149720,174],{"class":173},[167,149722,299],{"class":177},[167,149724,185],{"class":173},[167,149726,149727,149729,149731,149733,149735,149737],{"class":169,"line":7048},[167,149728,307],{"class":173},[167,149730,3696],{"class":177},[167,149732,1245],{"class":181},[167,149734,267],{"class":173},[167,149736,6923],{"class":201},[167,149738,185],{"class":173},[167,149740,149741,149743,149745,149747,149749,149751,149753,149755],{"class":169,"line":7057},[167,149742,1257],{"class":173},[167,149744,15],{"class":177},[167,149746,5694],{"class":181},[167,149748,267],{"class":173},[167,149750,6939],{"class":201},[167,149752,6942],{"class":173},[167,149754,15],{"class":177},[167,149756,185],{"class":173},[167,149758,149759],{"class":169,"line":7555},[167,149760,209],{"emptyLinePlaceholder":208},[167,149762,149763,149765,149767,149769,149771,149773,149775,149777],{"class":169,"line":7560},[167,149764,1257],{"class":173},[167,149766,299],{"class":177},[167,149768,6961],{"class":191},[167,149770,267],{"class":173},[167,149772,5080],{"class":201},[167,149774,6968],{"class":173},[167,149776,5080],{"class":201},[167,149778,185],{"class":173},[167,149780,149781,149783,149785,149787,149789],{"class":169,"line":7579},[167,149782,1268],{"class":173},[167,149784,11],{"class":177},[167,149786,6982],{"class":173},[167,149788,11],{"class":177},[167,149790,185],{"class":173},[167,149792,149793,149795,149797,149799,149801],{"class":169,"line":7592},[167,149794,1268],{"class":173},[167,149796,15],{"class":177},[167,149798,149232],{"class":173},[167,149800,15],{"class":177},[167,149802,185],{"class":173},[167,149804,149805,149807,149809,149811,149813],{"class":169,"line":7605},[167,149806,1268],{"class":173},[167,149808,15],{"class":177},[167,149810,7010],{"class":173},[167,149812,15],{"class":177},[167,149814,185],{"class":173},[167,149816,149817,149819,149821],{"class":169,"line":7618},[167,149818,1292],{"class":173},[167,149820,299],{"class":177},[167,149822,185],{"class":173},[167,149824,149825],{"class":169,"line":7627},[167,149826,209],{"emptyLinePlaceholder":208},[167,149828,149829,149831,149833,149835,149837,149839],{"class":169,"line":7632},[167,149830,1257],{"class":173},[167,149832,15],{"class":177},[167,149834,7038],{"class":181},[167,149836,149271],{"class":173},[167,149838,15],{"class":177},[167,149840,185],{"class":173},[167,149842,149843,149845,149847],{"class":169,"line":7647},[167,149844,504],{"class":173},[167,149846,3696],{"class":177},[167,149848,185],{"class":173},[167,149850,149851,149853,149855],{"class":169,"line":7656},[167,149852,282],{"class":173},[167,149854,299],{"class":177},[167,149856,185],{"class":173},[15,149858,149859,149860,149862],{},"This pattern lets the server deliver resolved content on the first load. If the component later renders during a client-side navigation, ",[87,149861,6400],{}," works as a fallback without duplicating the request.",[15,149864,149865,149866,149868],{},"This version keeps the same intent: resolve the data before the SSR render and use ",[87,149867,6393],{}," as a backup when no previous state is available.",[22,149870,60191],{"id":60190},[15,149872,149873,149875],{},[87,149874,6218],{}," lets you move critical data earlier into the server render and produce useful HTML from the very first response. Its value is in improving the first render, not in replacing your entire fetching strategy.",[15,149877,149878],{},"In manual Vue SSR, it is a precise and powerful tool. In Nuxt, higher-level utilities are usually the better fit. In both cases, the key idea is the same: important content should be ready before the initial page is rendered.",[924,149880,7689],{},{"title":163,"searchDepth":188,"depth":188,"links":149882},[149883,149884,149885,149886,149887,149893,149894],{"id":57635,"depth":188,"text":57636},{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":57819,"depth":188,"text":57820,"children":149888},[149889,149890,149891,149892],{"id":148699,"depth":205,"text":148700},{"id":148719,"depth":205,"text":148720},{"id":148736,"depth":205,"text":148737},{"id":148748,"depth":205,"text":148749},{"id":148760,"depth":188,"text":148761},{"id":60190,"depth":188,"text":60191},"Illustration of a server delivering HTML with resolved data while a client hydrates without needing an extra fetch.","How to use serverPrefetch and onServerPrefetch to load data before SSR rendering, avoid incomplete HTML, and coordinate the server's first render with client hydration.",{"updatedAt":149898,"readingTime":273,"coverCaption":149899,"author":946,"keywords":149900},"2026-03-20T19:15:00-05:00","With `serverPrefetch`, the server can deliver complete HTML, improving both experience and SEO from the very first render.",[3258,6218,6708,978,27746],"\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.en",[149903],{"headline":134581,"author":149904,"datePublished":149898,"@type":961},{"name":946,"@type":959},{"title":134581,"description":149896},"blog\u002Fvue-lifecycle-ssr-serverprefetch.en",[149908,149909,149910,149911,149912],{"tag":129945,"color":7725},{"tag":978,"color":979},{"tag":60267,"color":971},{"tag":98745,"color":1639},{"tag":60271,"color":7731},"s1UahE15BFUQsBRmMaDyakFgtwEo9EKWl6zD4PqpGlM",{"id":6208,"title":6209,"body":149915,"cover":7704,"coverAlt":7705,"date":7706,"description":7707,"draft":940,"extension":941,"lab":942,"locale":943,"meta":151195,"navigation":208,"path":7713,"schemaOrg":151197,"seo":151200,"series":7718,"seriesDescription":7719,"seriesOrder":279,"seriesTitle":7720,"slug":942,"stem":7721,"tags":151201,"__hash__":7732},{"type":8,"value":149916,"toc":151181},[149917,149921,149923,149927,149929,149931,149941,149945,149947,149955,149957,149967,149969,149985,149987,149989,149993,150001,150005,150007,150009,150011,150025,150029,150031,150033,150039,150045,150047,150057,150059,150061,150065,150067,150071,150073,150075,150599,151163,151167,151171,151173,151177,151179],[11,149918,6215,149919,6219],{"id":6214},[87,149920,6218],{},[15,149922,6222],{},[15,149924,149925,6227],{},[87,149926,6218],{},[22,149928,6231],{"id":6230},[15,149930,6234],{},[33,149932,149933,149935,149937,149939],{},[36,149934,6239],{},[36,149936,6242],{},[36,149938,6245],{},[36,149940,6248],{},[15,149942,149943,6253],{},[87,149944,6218],{},[22,149946,6257],{"id":6256},[15,149948,149949,6262,149951,6266,149953,6270],{},[87,149950,6218],{},[87,149952,6265],{},[3933,149954,6269],{},[15,149956,6273],{},[33,149958,149959,149961,149963,149965],{},[36,149960,6278],{},[36,149962,6281],{},[36,149964,6284],{},[36,149966,6287],{},[15,149968,6290],{},[33,149970,149971,149975,149977],{},[36,149972,6295,149973,1679],{},[3933,149974,6298],{},[36,149976,6301],{},[36,149978,6304,149979,6308,149981,90,149983,6315],{},[3933,149980,6307],{},[87,149982,6311],{},[87,149984,6314],{},[15,149986,6318],{},[22,149988,6322],{"id":6321},[15,149990,149991,6327],{},[87,149992,6218],{},[33,149994,149995,149997,149999],{},[36,149996,6332],{},[36,149998,6335],{},[36,150000,6338],{},[15,150002,6341,150003,6345],{},[3933,150004,6344],{},[22,150006,6349],{"id":6348},[15,150008,6352],{},[15,150010,6355],{},[33,150012,150013,150015,150017,150023],{},[36,150014,6360],{},[36,150016,6363],{},[36,150018,6366,150019,90,150021,1679],{},[87,150020,6311],{},[87,150022,6314],{},[36,150024,6373],{},[15,150026,6376,150027,6379],{},[87,150028,6218],{},[22,150030,3085],{"id":3084},[3087,150032,6385],{"id":6384},[15,150034,150035,6390,150037,6394],{},[87,150036,6218],{},[87,150038,6393],{},[15,150040,6397,150041,90,150043,6404],{},[87,150042,6400],{},[87,150044,6403],{},[3087,150046,6408],{"id":6407},[15,150048,6411,150049,1025,150051,6418,150053,6421,150055,6424],{},[87,150050,6414],{},[87,150052,6417],{},[87,150054,2398],{},[87,150056,6218],{},[3087,150058,6428],{"id":6427},[15,150060,6431],{},[15,150062,6434,150063,1679],{},[87,150064,6393],{},[3087,150066,6440],{"id":6439},[15,150068,6443,150069,6446],{},[87,150070,6218],{},[15,150072,6449],{},[22,150074,6453],{"id":6452},[154,150076,150077],{"className":156,"code":6456,"filename":3260,"language":162,"meta":163,"style":163},[87,150078,150079,150095,150105,150109,150119,150127,150135,150143,150151,150155,150159,150183,150199,150203,150213,150231,150235,150245,150259,150263,150267,150287,150291,150295,150309,150315,150323,150331,150337,150353,150357,150361,150365,150379,150391,150395,150401,150409,150417,150423,150439,150443,150447,150455,150459,150467,150481,150499,150503,150521,150533,150545,150557,150565,150569,150583,150591],{"__ignoreMap":163},[167,150080,150081,150083,150085,150087,150089,150091,150093],{"class":169,"line":170},[167,150082,174],{"class":173},[167,150084,178],{"class":177},[167,150086,182],{"class":181},[167,150088,1050],{"class":181},[167,150090,267],{"class":173},[167,150092,1055],{"class":201},[167,150094,185],{"class":173},[167,150096,150097,150099,150101,150103],{"class":169,"line":188},[167,150098,192],{"class":191},[167,150100,6481],{"class":173},[167,150102,198],{"class":191},[167,150104,202],{"class":201},[167,150106,150107],{"class":169,"line":205},[167,150108,209],{"emptyLinePlaceholder":208},[167,150110,150111,150113,150115,150117],{"class":169,"line":160},[167,150112,569],{"class":191},[167,150114,6496],{"class":181},[167,150116,223],{"class":191},[167,150118,1905],{"class":173},[167,150120,150121,150123,150125],{"class":169,"line":238},[167,150122,6505],{"class":254},[167,150124,583],{"class":191},[167,150126,6510],{"class":219},[167,150128,150129,150131,150133],{"class":169,"line":243},[167,150130,6515],{"class":254},[167,150132,583],{"class":191},[167,150134,6520],{"class":219},[167,150136,150137,150139,150141],{"class":169,"line":261},[167,150138,6525],{"class":254},[167,150140,583],{"class":191},[167,150142,6510],{"class":219},[167,150144,150145,150147,150149],{"class":169,"line":273},[167,150146,6534],{"class":254},[167,150148,583],{"class":191},[167,150150,6510],{"class":219},[167,150152,150153],{"class":169,"line":279},[167,150154,276],{"class":173},[167,150156,150157],{"class":169,"line":289},[167,150158,209],{"emptyLinePlaceholder":208},[167,150160,150161,150163,150165,150167,150169,150171,150173,150175,150177,150179,150181],{"class":169,"line":294},[167,150162,216],{"class":191},[167,150164,6553],{"class":219},[167,150166,223],{"class":191},[167,150168,226],{"class":181},[167,150170,174],{"class":173},[167,150172,6562],{"class":181},[167,150174,659],{"class":191},[167,150176,6567],{"class":219},[167,150178,6570],{"class":173},[167,150180,6573],{"class":219},[167,150182,235],{"class":173},[167,150184,150185,150187,150189,150191,150193,150195,150197],{"class":169,"line":304},[167,150186,216],{"class":191},[167,150188,6582],{"class":219},[167,150190,223],{"class":191},[167,150192,226],{"class":181},[167,150194,229],{"class":173},[167,150196,2184],{"class":201},[167,150198,235],{"class":173},[167,150200,150201],{"class":169,"line":313},[167,150202,209],{"emptyLinePlaceholder":208},[167,150204,150205,150207,150209,150211],{"class":169,"line":161},[167,150206,2523],{"class":191},[167,150208,1432],{"class":191},[167,150210,6605],{"class":181},[167,150212,763],{"class":173},[167,150214,150215,150217,150219,150221,150223,150225,150227,150229],{"class":169,"line":335},[167,150216,1443],{"class":191},[167,150218,6614],{"class":219},[167,150220,223],{"class":191},[167,150222,3009],{"class":191},[167,150224,6621],{"class":181},[167,150226,229],{"class":173},[167,150228,6626],{"class":201},[167,150230,235],{"class":173},[167,150232,150233],{"class":169,"line":341},[167,150234,209],{"emptyLinePlaceholder":208},[167,150236,150237,150239,150241,150243],{"class":169,"line":489},[167,150238,2544],{"class":191},[167,150240,2526],{"class":173},[167,150242,6641],{"class":191},[167,150244,6644],{"class":173},[167,150246,150247,150249,150251,150253,150255,150257],{"class":169,"line":495},[167,150248,6649],{"class":191},[167,150250,4224],{"class":191},[167,150252,6654],{"class":181},[167,150254,229],{"class":173},[167,150256,6659],{"class":201},[167,150258,235],{"class":173},[167,150260,150261],{"class":169,"line":501},[167,150262,3492],{"class":173},[167,150264,150265],{"class":169,"line":512},[167,150266,209],{"emptyLinePlaceholder":208},[167,150268,150269,150271,150273,150275,150277,150279,150281,150283,150285],{"class":169,"line":781},[167,150270,6674],{"class":173},[167,150272,267],{"class":191},[167,150274,2526],{"class":173},[167,150276,2927],{"class":191},[167,150278,6683],{"class":173},[167,150280,6686],{"class":181},[167,150282,6689],{"class":173},[167,150284,6692],{"class":191},[167,150286,6695],{"class":181},[167,150288,150289],{"class":169,"line":786},[167,150290,276],{"class":173},[167,150292,150293],{"class":169,"line":2678},[167,150294,209],{"emptyLinePlaceholder":208},[167,150296,150297,150299,150301,150303,150305,150307],{"class":169,"line":2692},[167,150298,6708],{"class":181},[167,150300,229],{"class":173},[167,150302,2523],{"class":191},[167,150304,1469],{"class":173},[167,150306,639],{"class":191},[167,150308,1905],{"class":173},[167,150310,150311,150313],{"class":169,"line":3575},[167,150312,6723],{"class":191},[167,150314,1905],{"class":173},[167,150316,150317,150319,150321],{"class":169,"line":5028},[167,150318,6730],{"class":191},[167,150320,6605],{"class":181},[167,150322,2917],{"class":173},[167,150324,150325,150327,150329],{"class":169,"line":5037},[167,150326,6739],{"class":173},[167,150328,6742],{"class":191},[167,150330,6745],{"class":173},[167,150332,150333,150335],{"class":169,"line":5046},[167,150334,6750],{"class":173},[167,150336,6753],{"class":191},[167,150338,150339,150341,150343,150345,150347,150349,150351],{"class":169,"line":6756},[167,150340,6759],{"class":173},[167,150342,6762],{"class":191},[167,150344,6654],{"class":181},[167,150346,6767],{"class":191},[167,150348,6770],{"class":173},[167,150350,583],{"class":191},[167,150352,6775],{"class":201},[167,150354,150355],{"class":169,"line":6778},[167,150356,3492],{"class":173},[167,150358,150359],{"class":169,"line":6783},[167,150360,403],{"class":173},[167,150362,150363],{"class":169,"line":6788},[167,150364,209],{"emptyLinePlaceholder":208},[167,150366,150367,150369,150371,150373,150375,150377],{"class":169,"line":6793},[167,150368,6796],{"class":181},[167,150370,229],{"class":173},[167,150372,2523],{"class":191},[167,150374,1469],{"class":173},[167,150376,639],{"class":191},[167,150378,1905],{"class":173},[167,150380,150381,150383,150385,150387,150389],{"class":169,"line":6809},[167,150382,2544],{"class":191},[167,150384,6814],{"class":173},[167,150386,4264],{"class":191},[167,150388,6819],{"class":173},[167,150390,2556],{"class":191},[167,150392,150393],{"class":169,"line":6824},[167,150394,209],{"emptyLinePlaceholder":208},[167,150396,150397,150399],{"class":169,"line":6829},[167,150398,6723],{"class":191},[167,150400,1905],{"class":173},[167,150402,150403,150405,150407],{"class":169,"line":6836},[167,150404,6730],{"class":191},[167,150406,6605],{"class":181},[167,150408,2917],{"class":173},[167,150410,150411,150413,150415],{"class":169,"line":6845},[167,150412,6739],{"class":173},[167,150414,6742],{"class":191},[167,150416,6745],{"class":173},[167,150418,150419,150421],{"class":169,"line":6854},[167,150420,6750],{"class":173},[167,150422,6753],{"class":191},[167,150424,150425,150427,150429,150431,150433,150435,150437],{"class":169,"line":6861},[167,150426,6759],{"class":173},[167,150428,6762],{"class":191},[167,150430,6654],{"class":181},[167,150432,6767],{"class":191},[167,150434,6770],{"class":173},[167,150436,583],{"class":191},[167,150438,6876],{"class":201},[167,150440,150441],{"class":169,"line":6879},[167,150442,3492],{"class":173},[167,150444,150445],{"class":169,"line":6884},[167,150446,403],{"class":173},[167,150448,150449,150451,150453],{"class":169,"line":6889},[167,150450,282],{"class":173},[167,150452,178],{"class":177},[167,150454,185],{"class":173},[167,150456,150457],{"class":169,"line":6898},[167,150458,209],{"emptyLinePlaceholder":208},[167,150460,150461,150463,150465],{"class":169,"line":6903},[167,150462,174],{"class":173},[167,150464,299],{"class":177},[167,150466,185],{"class":173},[167,150468,150469,150471,150473,150475,150477,150479],{"class":169,"line":6912},[167,150470,307],{"class":173},[167,150472,3696],{"class":177},[167,150474,1245],{"class":181},[167,150476,267],{"class":173},[167,150478,6923],{"class":201},[167,150480,185],{"class":173},[167,150482,150483,150485,150487,150489,150491,150493,150495,150497],{"class":169,"line":6928},[167,150484,1257],{"class":173},[167,150486,15],{"class":177},[167,150488,5694],{"class":181},[167,150490,267],{"class":173},[167,150492,6939],{"class":201},[167,150494,6942],{"class":173},[167,150496,15],{"class":177},[167,150498,185],{"class":173},[167,150500,150501],{"class":169,"line":6949},[167,150502,209],{"emptyLinePlaceholder":208},[167,150504,150505,150507,150509,150511,150513,150515,150517,150519],{"class":169,"line":6954},[167,150506,1257],{"class":173},[167,150508,299],{"class":177},[167,150510,6961],{"class":191},[167,150512,267],{"class":173},[167,150514,5080],{"class":201},[167,150516,6968],{"class":173},[167,150518,5080],{"class":201},[167,150520,185],{"class":173},[167,150522,150523,150525,150527,150529,150531],{"class":169,"line":6975},[167,150524,1268],{"class":173},[167,150526,11],{"class":177},[167,150528,6982],{"class":173},[167,150530,11],{"class":177},[167,150532,185],{"class":173},[167,150534,150535,150537,150539,150541,150543],{"class":169,"line":6989},[167,150536,1268],{"class":173},[167,150538,15],{"class":177},[167,150540,6996],{"class":173},[167,150542,15],{"class":177},[167,150544,185],{"class":173},[167,150546,150547,150549,150551,150553,150555],{"class":169,"line":7003},[167,150548,1268],{"class":173},[167,150550,15],{"class":177},[167,150552,7010],{"class":173},[167,150554,15],{"class":177},[167,150556,185],{"class":173},[167,150558,150559,150561,150563],{"class":169,"line":7017},[167,150560,1292],{"class":173},[167,150562,299],{"class":177},[167,150564,185],{"class":173},[167,150566,150567],{"class":169,"line":7026},[167,150568,209],{"emptyLinePlaceholder":208},[167,150570,150571,150573,150575,150577,150579,150581],{"class":169,"line":7031},[167,150572,1257],{"class":173},[167,150574,15],{"class":177},[167,150576,7038],{"class":181},[167,150578,7041],{"class":173},[167,150580,15],{"class":177},[167,150582,185],{"class":173},[167,150584,150585,150587,150589],{"class":169,"line":7048},[167,150586,504],{"class":173},[167,150588,3696],{"class":177},[167,150590,185],{"class":173},[167,150592,150593,150595,150597],{"class":169,"line":7057},[167,150594,282],{"class":173},[167,150596,299],{"class":177},[167,150598,185],{"class":173},[154,150600,150601],{"className":156,"code":7066,"filename":3973,"language":162,"meta":163,"style":163},[87,150602,150603,150617,150627,150631,150641,150649,150657,150665,150673,150677,150681,150691,150699,150703,150709,150715,150731,150737,150741,150745,150749,150753,150761,150779,150783,150793,150807,150811,150815,150837,150841,150845,150849,150857,150863,150875,150883,150891,150907,150911,150915,150919,150927,150945,150949,150955,150967,150975,150983,150999,151003,151007,151011,151019,151023,151031,151045,151063,151067,151085,151097,151109,151121,151129,151133,151147,151155],{"__ignoreMap":163},[167,150604,150605,150607,150609,150611,150613,150615],{"class":169,"line":170},[167,150606,174],{"class":173},[167,150608,178],{"class":177},[167,150610,1050],{"class":181},[167,150612,267],{"class":173},[167,150614,1055],{"class":201},[167,150616,185],{"class":173},[167,150618,150619,150621,150623,150625],{"class":169,"line":188},[167,150620,192],{"class":191},[167,150622,7089],{"class":173},[167,150624,198],{"class":191},[167,150626,202],{"class":201},[167,150628,150629],{"class":169,"line":205},[167,150630,209],{"emptyLinePlaceholder":208},[167,150632,150633,150635,150637,150639],{"class":169,"line":160},[167,150634,569],{"class":191},[167,150636,6496],{"class":181},[167,150638,223],{"class":191},[167,150640,1905],{"class":173},[167,150642,150643,150645,150647],{"class":169,"line":238},[167,150644,6505],{"class":254},[167,150646,583],{"class":191},[167,150648,6510],{"class":219},[167,150650,150651,150653,150655],{"class":169,"line":243},[167,150652,6515],{"class":254},[167,150654,583],{"class":191},[167,150656,6520],{"class":219},[167,150658,150659,150661,150663],{"class":169,"line":261},[167,150660,6525],{"class":254},[167,150662,583],{"class":191},[167,150664,6510],{"class":219},[167,150666,150667,150669,150671],{"class":169,"line":273},[167,150668,6534],{"class":254},[167,150670,583],{"class":191},[167,150672,6510],{"class":219},[167,150674,150675],{"class":169,"line":279},[167,150676,276],{"class":173},[167,150678,150679],{"class":169,"line":289},[167,150680,209],{"emptyLinePlaceholder":208},[167,150682,150683,150685,150687,150689],{"class":169,"line":294},[167,150684,608],{"class":191},[167,150686,3991],{"class":191},[167,150688,7156],{"class":181},[167,150690,372],{"class":173},[167,150692,150693,150695,150697],{"class":169,"line":304},[167,150694,4398],{"class":173},[167,150696,7165],{"class":201},[167,150698,393],{"class":173},[167,150700,150701],{"class":169,"line":313},[167,150702,209],{"emptyLinePlaceholder":208},[167,150704,150705,150707],{"class":169,"line":161},[167,150706,7176],{"class":181},[167,150708,763],{"class":173},[167,150710,150711,150713],{"class":169,"line":335},[167,150712,1937],{"class":191},[167,150714,1905],{"class":173},[167,150716,150717,150719,150721,150723,150725,150727,150729],{"class":169,"line":341},[167,150718,7189],{"class":173},[167,150720,6573],{"class":219},[167,150722,654],{"class":191},[167,150724,6496],{"class":181},[167,150726,659],{"class":191},[167,150728,6567],{"class":219},[167,150730,393],{"class":173},[167,150732,150733,150735],{"class":169,"line":489},[167,150734,7206],{"class":173},[167,150736,7209],{"class":201},[167,150738,150739],{"class":169,"line":495},[167,150740,4049],{"class":173},[167,150742,150743],{"class":169,"line":501},[167,150744,398],{"class":173},[167,150746,150747],{"class":169,"line":512},[167,150748,209],{"emptyLinePlaceholder":208},[167,150750,150751],{"class":169,"line":781},[167,150752,4419],{"class":173},[167,150754,150755,150757,150759],{"class":169,"line":786},[167,150756,7230],{"class":191},[167,150758,6605],{"class":181},[167,150760,763],{"class":173},[167,150762,150763,150765,150767,150769,150771,150773,150775,150777],{"class":169,"line":2678},[167,150764,4435],{"class":191},[167,150766,6614],{"class":219},[167,150768,223],{"class":191},[167,150770,3009],{"class":191},[167,150772,6621],{"class":181},[167,150774,229],{"class":173},[167,150776,6626],{"class":201},[167,150778,235],{"class":173},[167,150780,150781],{"class":169,"line":2692},[167,150782,209],{"emptyLinePlaceholder":208},[167,150784,150785,150787,150789,150791],{"class":169,"line":3575},[167,150786,7261],{"class":191},[167,150788,2526],{"class":173},[167,150790,6641],{"class":191},[167,150792,6644],{"class":173},[167,150794,150795,150797,150799,150801,150803,150805],{"class":169,"line":5028},[167,150796,7272],{"class":191},[167,150798,4224],{"class":191},[167,150800,6654],{"class":181},[167,150802,229],{"class":173},[167,150804,6659],{"class":201},[167,150806,235],{"class":173},[167,150808,150809],{"class":169,"line":5037},[167,150810,7287],{"class":173},[167,150812,150813],{"class":169,"line":5046},[167,150814,209],{"emptyLinePlaceholder":208},[167,150816,150817,150819,150821,150823,150825,150827,150829,150831,150833,150835],{"class":169,"line":6756},[167,150818,741],{"class":219},[167,150820,7298],{"class":173},[167,150822,267],{"class":191},[167,150824,2526],{"class":173},[167,150826,2927],{"class":191},[167,150828,6683],{"class":173},[167,150830,6686],{"class":181},[167,150832,6689],{"class":173},[167,150834,6692],{"class":191},[167,150836,6695],{"class":181},[167,150838,150839],{"class":169,"line":6778},[167,150840,4049],{"class":173},[167,150842,150843],{"class":169,"line":6783},[167,150844,398],{"class":173},[167,150846,150847],{"class":169,"line":6788},[167,150848,209],{"emptyLinePlaceholder":208},[167,150850,150851,150853,150855],{"class":169,"line":6793},[167,150852,7331],{"class":191},[167,150854,7334],{"class":181},[167,150856,763],{"class":173},[167,150858,150859,150861],{"class":169,"line":6809},[167,150860,7341],{"class":191},[167,150862,1905],{"class":173},[167,150864,150865,150867,150869,150871,150873],{"class":169,"line":6824},[167,150866,7348],{"class":191},[167,150868,7351],{"class":219},[167,150870,1679],{"class":173},[167,150872,7356],{"class":181},[167,150874,2917],{"class":173},[167,150876,150877,150879,150881],{"class":169,"line":6829},[167,150878,7363],{"class":173},[167,150880,6742],{"class":191},[167,150882,6745],{"class":173},[167,150884,150885,150887,150889],{"class":169,"line":6836},[167,150886,741],{"class":219},[167,150888,7374],{"class":173},[167,150890,6753],{"class":191},[167,150892,150893,150895,150897,150899,150901,150903,150905],{"class":169,"line":6845},[167,150894,7381],{"class":173},[167,150896,6762],{"class":191},[167,150898,6654],{"class":181},[167,150900,6767],{"class":191},[167,150902,6770],{"class":173},[167,150904,583],{"class":191},[167,150906,6775],{"class":201},[167,150908,150909],{"class":169,"line":6854},[167,150910,4049],{"class":173},[167,150912,150913],{"class":169,"line":6861},[167,150914,398],{"class":173},[167,150916,150917],{"class":169,"line":6879},[167,150918,209],{"emptyLinePlaceholder":208},[167,150920,150921,150923,150925],{"class":169,"line":6884},[167,150922,7331],{"class":191},[167,150924,7412],{"class":181},[167,150926,763],{"class":173},[167,150928,150929,150931,150933,150935,150937,150939,150941,150943],{"class":169,"line":6889},[167,150930,7419],{"class":191},[167,150932,2526],{"class":173},[167,150934,4927],{"class":219},[167,150936,7298],{"class":173},[167,150938,4264],{"class":191},[167,150940,7351],{"class":219},[167,150942,7432],{"class":173},[167,150944,2556],{"class":191},[167,150946,150947],{"class":169,"line":6898},[167,150948,209],{"emptyLinePlaceholder":208},[167,150950,150951,150953],{"class":169,"line":6903},[167,150952,7341],{"class":191},[167,150954,1905],{"class":173},[167,150956,150957,150959,150961,150963,150965],{"class":169,"line":6912},[167,150958,7348],{"class":191},[167,150960,7351],{"class":219},[167,150962,1679],{"class":173},[167,150964,7356],{"class":181},[167,150966,2917],{"class":173},[167,150968,150969,150971,150973],{"class":169,"line":6928},[167,150970,7363],{"class":173},[167,150972,6742],{"class":191},[167,150974,6745],{"class":173},[167,150976,150977,150979,150981],{"class":169,"line":6949},[167,150978,741],{"class":219},[167,150980,7374],{"class":173},[167,150982,6753],{"class":191},[167,150984,150985,150987,150989,150991,150993,150995,150997],{"class":169,"line":6954},[167,150986,7381],{"class":173},[167,150988,6762],{"class":191},[167,150990,6654],{"class":181},[167,150992,6767],{"class":191},[167,150994,6770],{"class":173},[167,150996,583],{"class":191},[167,150998,6876],{"class":201},[167,151000,151001],{"class":169,"line":6975},[167,151002,4049],{"class":173},[167,151004,151005],{"class":169,"line":6989},[167,151006,3492],{"class":173},[167,151008,151009],{"class":169,"line":7003},[167,151010,403],{"class":173},[167,151012,151013,151015,151017],{"class":169,"line":7017},[167,151014,282],{"class":173},[167,151016,178],{"class":177},[167,151018,185],{"class":173},[167,151020,151021],{"class":169,"line":7026},[167,151022,209],{"emptyLinePlaceholder":208},[167,151024,151025,151027,151029],{"class":169,"line":7031},[167,151026,174],{"class":173},[167,151028,299],{"class":177},[167,151030,185],{"class":173},[167,151032,151033,151035,151037,151039,151041,151043],{"class":169,"line":7048},[167,151034,307],{"class":173},[167,151036,3696],{"class":177},[167,151038,1245],{"class":181},[167,151040,267],{"class":173},[167,151042,6923],{"class":201},[167,151044,185],{"class":173},[167,151046,151047,151049,151051,151053,151055,151057,151059,151061],{"class":169,"line":7057},[167,151048,1257],{"class":173},[167,151050,15],{"class":177},[167,151052,5694],{"class":181},[167,151054,267],{"class":173},[167,151056,6939],{"class":201},[167,151058,6942],{"class":173},[167,151060,15],{"class":177},[167,151062,185],{"class":173},[167,151064,151065],{"class":169,"line":7555},[167,151066,209],{"emptyLinePlaceholder":208},[167,151068,151069,151071,151073,151075,151077,151079,151081,151083],{"class":169,"line":7560},[167,151070,1257],{"class":173},[167,151072,299],{"class":177},[167,151074,6961],{"class":191},[167,151076,267],{"class":173},[167,151078,5080],{"class":201},[167,151080,6968],{"class":173},[167,151082,5080],{"class":201},[167,151084,185],{"class":173},[167,151086,151087,151089,151091,151093,151095],{"class":169,"line":7579},[167,151088,1268],{"class":173},[167,151090,11],{"class":177},[167,151092,6982],{"class":173},[167,151094,11],{"class":177},[167,151096,185],{"class":173},[167,151098,151099,151101,151103,151105,151107],{"class":169,"line":7592},[167,151100,1268],{"class":173},[167,151102,15],{"class":177},[167,151104,6996],{"class":173},[167,151106,15],{"class":177},[167,151108,185],{"class":173},[167,151110,151111,151113,151115,151117,151119],{"class":169,"line":7605},[167,151112,1268],{"class":173},[167,151114,15],{"class":177},[167,151116,7010],{"class":173},[167,151118,15],{"class":177},[167,151120,185],{"class":173},[167,151122,151123,151125,151127],{"class":169,"line":7618},[167,151124,1292],{"class":173},[167,151126,299],{"class":177},[167,151128,185],{"class":173},[167,151130,151131],{"class":169,"line":7627},[167,151132,209],{"emptyLinePlaceholder":208},[167,151134,151135,151137,151139,151141,151143,151145],{"class":169,"line":7632},[167,151136,1257],{"class":173},[167,151138,15],{"class":177},[167,151140,7038],{"class":181},[167,151142,7041],{"class":173},[167,151144,15],{"class":177},[167,151146,185],{"class":173},[167,151148,151149,151151,151153],{"class":169,"line":7647},[167,151150,504],{"class":173},[167,151152,3696],{"class":177},[167,151154,185],{"class":173},[167,151156,151157,151159,151161],{"class":169,"line":7656},[167,151158,282],{"class":173},[167,151160,299],{"class":177},[167,151162,185],{"class":173},[15,151164,7665,151165,7668],{},[87,151166,6400],{},[15,151168,7671,151169,7674],{},[87,151170,6393],{},[22,151172,7678],{"id":7677},[15,151174,151175,7683],{},[87,151176,6218],{},[15,151178,7686],{},[924,151180,7689],{},{"title":163,"searchDepth":188,"depth":188,"links":151182},[151183,151184,151185,151186,151187,151193,151194],{"id":6230,"depth":188,"text":6231},{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":3084,"depth":188,"text":3085,"children":151188},[151189,151190,151191,151192],{"id":6384,"depth":205,"text":6385},{"id":6407,"depth":205,"text":6408},{"id":6427,"depth":205,"text":6428},{"id":6439,"depth":205,"text":6440},{"id":6452,"depth":188,"text":6453},{"id":7677,"depth":188,"text":7678},{"updatedAt":7709,"readingTime":273,"coverCaption":7710,"author":946,"keywords":151196},[3258,6218,6708,978,7712],[151198],{"headline":6209,"author":151199,"datePublished":7709,"@type":961},{"name":946,"@type":959},{"title":6209,"description":7707},[151202,151203,151204,151205,151206],{"tag":7724,"color":7725},{"tag":978,"color":979},{"tag":953,"color":971},{"tag":1625,"color":1639},{"tag":7730,"color":7731},{"id":151208,"title":134558,"body":151209,"cover":15003,"coverAlt":152670,"date":15005,"description":152671,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":152672,"navigation":208,"path":152675,"schemaOrg":152676,"seo":152679,"series":7718,"seriesDescription":129940,"seriesOrder":238,"seriesTitle":129941,"slug":942,"stem":152680,"tags":152681,"__hash__":152685},"blog\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en.md",{"type":8,"value":151210,"toc":152650},[151211,151219,151225,151233,151235,151244,151247,151264,151267,151277,151280,151292,151297,151299,151302,151304,151331,151334,151352,151354,151357,151363,151379,151382,151400,151403,151405,151454,151462,151464,151471,151474,151477,151498,151501,151507,151515,151520,151524,151533,151541,151544,151548,151554,151557,151559,151563,151566,151570,151576,151580,151585,152108,152611,152628,152630,152648],[11,151212,151214,151215,1025,151217,6219],{"id":151213},"vue-lifecycle-unmounting-phase-beforeunmount-unmounted","Vue Lifecycle: unmounting phase (",[87,151216,13472],{},[87,151218,11276],{},[15,151220,151221,151222,151224],{},"Many bugs do not start when a component appears, but when it disappears. A global listener left running, a ",[87,151223,11483],{}," that was never cleared, or a request that is still in flight after the user already changed views usually begins there.",[15,151226,151227,151228,57920,151230,151232],{},"The unmounting phase is what lets you close that story properly. It is not only about \"removing things\", but about leaving the component in a clean state when Vue takes it out of the tree. If you understand the difference between ",[87,151229,13472],{},[87,151231,11276],{},", you can avoid memory leaks, duplicated side effects, and components that keep doing work even though they are no longer on screen.",[22,151234,57681],{"id":57680},[15,151236,151237,151238,151240,151241,151243],{},"Unmounting happens when Vue decides to remove a component from the active tree. That can happen, for example, when a ",[87,151239,13496],{}," flips to ",[87,151242,3392],{},", when the route changes, or when a dynamic component stops rendering.",[15,151245,151246],{},"During that phase, two hooks appear:",[33,151248,151249,151257],{},[36,151250,151251,151253,151254,1679],{},[87,151252,13472],{},": runs ",[3933,151255,151256],{},"right before Vue unmounts the component",[36,151258,151259,151253,151261,1679],{},[87,151260,11276],{},[3933,151262,151263],{},"after the component has already been unmounted",[15,151265,151266],{},"In the Composition API, the equivalents are:",[33,151268,151269,151273],{},[36,151270,151271],{},[87,151272,13530],{},[36,151274,151275],{},[87,151276,13535],{},[15,151278,151279],{},"The important difference is this:",[33,151281,151282,151287],{},[36,151283,114654,151284,151286],{},[87,151285,13472],{},", the instance still exists and you can still access its state, refs, and active resources to clean them up.",[36,151288,114654,151289,151291],{},[87,151290,11276],{},", Vue has already finished unmounting the component and stopped its reactive effects. That point is more useful for final confirmations, traces, or very specific integrations.",[15,151293,151294,151295,1679],{},"In practice, most meaningful cleanup happens in ",[87,151296,13472],{},[22,151298,57775],{"id":57774},[15,151300,151301],{},"The unmounting phase makes sense when the component opened resources that should not stay alive afterward.",[15,151303,80740],{},[33,151305,151306,151314,151325,151328],{},[36,151307,151308,151309,1025,151311,151313],{},"Removing listeners registered on ",[87,151310,6414],{},[87,151312,6417],{},", or any external object.",[36,151315,151316,151317,1025,151319,1025,151321,109827,151323,1679],{},"Clearing ",[87,151318,11483],{},[87,151320,13580],{},[87,151322,13583],{},[87,151324,13586],{},[36,151326,151327],{},"Closing sockets, disconnecting observers, or aborting pending requests.",[36,151329,151330],{},"Leaving one final debug trace or telemetry signal after the component has fully left.",[15,151332,151333],{},"A simple rule:",[33,151335,151336,151344],{},[36,151337,143724,151338,151341,151342,1679],{},[3933,151339,151340],{},"disconnect or cancel something",", start by thinking about ",[87,151343,13472],{},[36,151345,143724,151346,151349,151350,1679],{},[3933,151347,151348],{},"know that the component has fully finished leaving",", think about ",[87,151351,11276],{},[22,151353,57799],{"id":57798},[15,151355,151356],{},"Not everything belongs in these hooks.",[15,151358,80766,151359,57920,151361,68578],{},[87,151360,13472],{},[87,151362,11276],{},[33,151364,151365,151370,151373,151376],{},[36,151366,151367,151368,1679],{},"The logic can live inside a composable with ",[87,151369,13635],{},[36,151371,151372],{},"The resource already cleans itself up and does not need manual teardown.",[36,151374,151375],{},"You are using the hook to compensate for a problem that really comes from poor component structure.",[36,151377,151378],{},"The component is not truly being unmounted and is only being hidden.",[15,151380,151381],{},"That last point matters a lot:",[33,151383,151384,151389,151394],{},[36,151385,151386,151388],{},[87,151387,13496],{}," can unmount a component.",[36,151390,151391,151393],{},[87,151392,13659],{}," only hides it.",[36,151395,151396,151397,151399],{},"A component cached with ",[87,151398,11158],{}," can be deactivated without being unmounted.",[15,151401,151402],{},"If you mix up those cases, you will wait for a hook that never runs.",[22,151404,91741],{"id":91740},[56,151406,151407,151422],{},[59,151408,151409],{},[62,151410,151411,151413,151416,151419],{},[65,151412,11380],{},[65,151414,151415],{},"What is still available",[65,151417,151418],{},"Natural use",[65,151420,151421],{},"Typical risk",[75,151423,151424,151439],{},[62,151425,151426,151430,151433,151436],{},[80,151427,151428],{},[87,151429,13472],{},[80,151431,151432],{},"Instance, refs, state, and active resources",[80,151434,151435],{},"Cleaning listeners, timers, observers, or aborting requests",[80,151437,151438],{},"Leaving too much work for later",[62,151440,151441,151445,151448,151451],{},[80,151442,151443],{},[87,151444,11276],{},[80,151446,151447],{},"The component is already out of the tree and its effects have been stopped",[80,151449,151450],{},"Final traces or very specific integrations",[80,151452,151453],{},"Trying to do cleanup that depended on the live instance",[15,151455,151456,151458,151459,151461],{},[87,151457,11276],{}," exists, but that does not mean it should carry the whole burden of teardown. If you need to touch something the component opened, waiting for ",[87,151460,11276],{}," is usually too late.",[22,151463,57820],{"id":57819},[3087,151465,151467,151468,151470],{"id":151466},"_1-registering-resources-in-mounted-and-forgetting-to-close-them","1. Registering resources in ",[87,151469,6393],{}," and forgetting to close them",[15,151472,151473],{},"This is the most common mistake. The component mounts correctly, works for a while, and then starts acting strangely because an old listener is still responding even though the view already changed.",[15,151475,151476],{},"This often happens with:",[33,151478,151479,151483,151487,151491,151495],{},[36,151480,151481],{},[87,151482,13751],{},[36,151484,151485],{},[87,151486,13756],{},[36,151488,151489],{},[87,151490,13761],{},[36,151492,151493],{},[87,151494,13586],{},[36,151496,151497],{},"websockets or external subscriptions",[15,151499,151500],{},"If you opened it manually, you should assume it is also your job to close it.",[3087,151502,151504,151505],{"id":151503},"_2-leaving-all-cleanup-for-unmounted","2. Leaving all cleanup for ",[87,151506,11276],{},[15,151508,151509,151511,151512,151514],{},[87,151510,11276],{}," is not the ideal place for everything. If you need to abort a request, disconnect an observer, or remove listeners while the instance is still accessible, ",[87,151513,13472],{}," is clearer and safer.",[15,151516,123199,151517,151519],{},[87,151518,13472],{}," as taking the table apart before carrying it out of the room.",[3087,151521,151523],{"id":151522},"_3-confusing-hiding-with-unmounting","3. Confusing hiding with unmounting",[15,151525,151526,151527,151529,151530,151532],{},"Many developers expect ",[87,151528,13472],{}," to run when a panel stops being visible. But if that panel uses ",[87,151531,13659],{},", the component is still alive.",[15,151534,151535,151536,151538,151539,1679],{},"The same thing happens with ",[87,151537,11158],{},": when the view changes, the component can be deactivated and later reactivated without ever going through ",[87,151540,11276],{},[15,151542,151543],{},"If the real problem is activation or deactivation, the correct hooks may be different.",[3087,151545,151547],{"id":151546},"_4-starting-new-work-while-the-component-is-already-leaving","4. Starting new work while the component is already leaving",[15,151549,151550,151551,151553],{},"It is a bad idea to start heavy new work during unmounting. If you open another request or start another subscription inside ",[87,151552,13472],{},", you make the exact moment Vue is trying to close the component more complicated than it needs to be.",[15,151555,151556],{},"The unmounting phase should reduce work, not create more of it.",[22,151558,57926],{"id":57925},[3087,151560,151562],{"id":151561},"cleaning-global-listeners-when-leaving-a-view","Cleaning global listeners when leaving a view",[15,151564,151565],{},"If a view listens to browser events, those listeners should disappear when the route changes. Otherwise, you end up reacting twice to the same event when the user comes back.",[3087,151567,151569],{"id":151568},"aborting-a-pending-request","Aborting a pending request",[15,151571,151572,151573,151575],{},"In components with fast navigation, it is normal for a request to still be running while the user has already left the page. Cancelling it in ",[87,151574,13472],{}," avoids unnecessary work and inconsistent state.",[3087,151577,151579],{"id":151578},"leaving-a-final-debug-trace","Leaving a final debug trace",[15,151581,151582,151584],{},[87,151583,11276],{}," can be useful when you want to confirm that the component really did leave while you are debugging unexpected remounts, caching, or conditional rendering.",[154,151586,151588],{"className":156,"code":151587,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'\n\nconst status = ref('Loading status...')\nconst totalTasks = ref\u003Cnumber | null>(null)\n\nlet controller: AbortController | null = null\n\nfunction syncOnlineStatus() {\n  status.value = navigator.onLine ? 'Online' : 'Offline'\n}\n\nasync function loadSummary() {\n  controller = new AbortController()\n\n  try {\n    const response = await fetch('\u002Fapi\u002Ftasks\u002Fsummary', {\n      signal: controller.signal\n    })\n\n    const data = await response.json() as { total: number }\n    totalTasks.value = data.total\n  }\n  catch (error) {\n    if (error instanceof DOMException && error.name === 'AbortError') {\n      return\n    }\n\n    console.error('Failed to load the summary', error)\n  }\n}\n\nonMounted(() => {\n  syncOnlineStatus()\n  window.addEventListener('online', syncOnlineStatus)\n  window.addEventListener('offline', syncOnlineStatus)\n  void loadSummary()\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('online', syncOnlineStatus)\n  window.removeEventListener('offline', syncOnlineStatus)\n  controller?.abort()\n})\n\nonUnmounted(() => {\n  console.info('TaskSummary has left the tree')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-summary\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n    \u003Cp v-if=\"totalTasks !== null\">\n      Registered tasks: {{ totalTasks }}\n    \u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,151589,151590,151606,151616,151620,151637,151661,151665,151683,151687,151695,151713,151717,151721,151731,151743,151747,151753,151771,151775,151779,151783,151811,151819,151823,151829,151849,151853,151857,151861,151874,151878,151882,151886,151896,151902,151914,151926,151934,151938,151942,151952,151964,151976,151984,151988,151992,152002,152015,152019,152027,152031,152039,152053,152065,152079,152084,152092,152100],{"__ignoreMap":163},[167,151591,151592,151594,151596,151598,151600,151602,151604],{"class":169,"line":170},[167,151593,174],{"class":173},[167,151595,178],{"class":177},[167,151597,182],{"class":181},[167,151599,1050],{"class":181},[167,151601,267],{"class":173},[167,151603,1055],{"class":201},[167,151605,185],{"class":173},[167,151607,151608,151610,151612,151614],{"class":169,"line":188},[167,151609,192],{"class":191},[167,151611,13888],{"class":173},[167,151613,198],{"class":191},[167,151615,202],{"class":201},[167,151617,151618],{"class":169,"line":205},[167,151619,209],{"emptyLinePlaceholder":208},[167,151621,151622,151624,151626,151628,151630,151632,151635],{"class":169,"line":160},[167,151623,216],{"class":191},[167,151625,11700],{"class":219},[167,151627,223],{"class":191},[167,151629,226],{"class":181},[167,151631,229],{"class":173},[167,151633,151634],{"class":201},"'Loading status...'",[167,151636,235],{"class":173},[167,151638,151639,151641,151643,151645,151647,151649,151651,151653,151655,151657,151659],{"class":169,"line":238},[167,151640,216],{"class":191},[167,151642,13920],{"class":219},[167,151644,223],{"class":191},[167,151646,226],{"class":181},[167,151648,174],{"class":173},[167,151650,13929],{"class":219},[167,151652,659],{"class":191},[167,151654,6567],{"class":219},[167,151656,6570],{"class":173},[167,151658,6573],{"class":219},[167,151660,235],{"class":173},[167,151662,151663],{"class":169,"line":243},[167,151664,209],{"emptyLinePlaceholder":208},[167,151666,151667,151669,151671,151673,151675,151677,151679,151681],{"class":169,"line":261},[167,151668,13948],{"class":191},[167,151670,13951],{"class":173},[167,151672,583],{"class":191},[167,151674,13956],{"class":181},[167,151676,659],{"class":191},[167,151678,6567],{"class":219},[167,151680,223],{"class":191},[167,151682,12146],{"class":219},[167,151684,151685],{"class":169,"line":273},[167,151686,209],{"emptyLinePlaceholder":208},[167,151688,151689,151691,151693],{"class":169,"line":279},[167,151690,246],{"class":191},[167,151692,13975],{"class":181},[167,151694,763],{"class":173},[167,151696,151697,151699,151701,151703,151705,151708,151710],{"class":169,"line":289},[167,151698,11916],{"class":173},[167,151700,267],{"class":191},[167,151702,13986],{"class":173},[167,151704,8316],{"class":191},[167,151706,151707],{"class":201}," 'Online'",[167,151709,5312],{"class":191},[167,151711,151712],{"class":201}," 'Offline'\n",[167,151714,151715],{"class":169,"line":294},[167,151716,276],{"class":173},[167,151718,151719],{"class":169,"line":304},[167,151720,209],{"emptyLinePlaceholder":208},[167,151722,151723,151725,151727,151729],{"class":169,"line":313},[167,151724,2523],{"class":191},[167,151726,1432],{"class":191},[167,151728,14013],{"class":181},[167,151730,763],{"class":173},[167,151732,151733,151735,151737,151739,151741],{"class":169,"line":161},[167,151734,14020],{"class":173},[167,151736,267],{"class":191},[167,151738,4224],{"class":191},[167,151740,13956],{"class":181},[167,151742,2917],{"class":173},[167,151744,151745],{"class":169,"line":335},[167,151746,209],{"emptyLinePlaceholder":208},[167,151748,151749,151751],{"class":169,"line":341},[167,151750,6723],{"class":191},[167,151752,1905],{"class":173},[167,151754,151755,151757,151759,151761,151763,151765,151767,151769],{"class":169,"line":489},[167,151756,8266],{"class":191},[167,151758,6614],{"class":219},[167,151760,223],{"class":191},[167,151762,3009],{"class":191},[167,151764,6621],{"class":181},[167,151766,229],{"class":173},[167,151768,14055],{"class":201},[167,151770,627],{"class":173},[167,151772,151773],{"class":169,"line":495},[167,151774,14062],{"class":173},[167,151776,151777],{"class":169,"line":501},[167,151778,8926],{"class":173},[167,151780,151781],{"class":169,"line":512},[167,151782,209],{"emptyLinePlaceholder":208},[167,151784,151785,151787,151789,151791,151793,151795,151797,151799,151801,151803,151805,151807,151809],{"class":169,"line":781},[167,151786,8266],{"class":191},[167,151788,11951],{"class":219},[167,151790,223],{"class":191},[167,151792,3009],{"class":191},[167,151794,6683],{"class":173},[167,151796,6686],{"class":181},[167,151798,14087],{"class":173},[167,151800,6692],{"class":191},[167,151802,577],{"class":173},[167,151804,1921],{"class":254},[167,151806,583],{"class":191},[167,151808,8493],{"class":219},[167,151810,599],{"class":173},[167,151812,151813,151815,151817],{"class":169,"line":786},[167,151814,14104],{"class":173},[167,151816,267],{"class":191},[167,151818,14109],{"class":173},[167,151820,151821],{"class":169,"line":2678},[167,151822,3492],{"class":173},[167,151824,151825,151827],{"class":169,"line":2692},[167,151826,14118],{"class":191},[167,151828,6745],{"class":173},[167,151830,151831,151833,151835,151837,151839,151841,151843,151845,151847],{"class":169,"line":3575},[167,151832,7419],{"class":191},[167,151834,14127],{"class":173},[167,151836,6762],{"class":191},[167,151838,14132],{"class":181},[167,151840,14135],{"class":191},[167,151842,14138],{"class":173},[167,151844,2550],{"class":191},[167,151846,14143],{"class":201},[167,151848,258],{"class":173},[167,151850,151851],{"class":169,"line":5028},[167,151852,14150],{"class":191},[167,151854,151855],{"class":169,"line":5037},[167,151856,4049],{"class":173},[167,151858,151859],{"class":169,"line":5046},[167,151860,209],{"emptyLinePlaceholder":208},[167,151862,151863,151865,151867,151869,151872],{"class":169,"line":6756},[167,151864,8894],{"class":173},[167,151866,9352],{"class":181},[167,151868,229],{"class":173},[167,151870,151871],{"class":201},"'Failed to load the summary'",[167,151873,14172],{"class":173},[167,151875,151876],{"class":169,"line":6778},[167,151877,3492],{"class":173},[167,151879,151880],{"class":169,"line":6783},[167,151881,276],{"class":173},[167,151883,151884],{"class":169,"line":6788},[167,151885,209],{"emptyLinePlaceholder":208},[167,151887,151888,151890,151892,151894],{"class":169,"line":6793},[167,151889,6796],{"class":181},[167,151891,1493],{"class":173},[167,151893,639],{"class":191},[167,151895,1905],{"class":173},[167,151897,151898,151900],{"class":169,"line":6809},[167,151899,14199],{"class":181},[167,151901,2917],{"class":173},[167,151903,151904,151906,151908,151910,151912],{"class":169,"line":6824},[167,151905,14206],{"class":173},[167,151907,1501],{"class":181},[167,151909,229],{"class":173},[167,151911,1506],{"class":201},[167,151913,14215],{"class":173},[167,151915,151916,151918,151920,151922,151924],{"class":169,"line":6829},[167,151917,14206],{"class":173},[167,151919,1501],{"class":181},[167,151921,229],{"class":173},[167,151923,14226],{"class":201},[167,151925,14215],{"class":173},[167,151927,151928,151930,151932],{"class":169,"line":6836},[167,151929,14233],{"class":191},[167,151931,14013],{"class":181},[167,151933,2917],{"class":173},[167,151935,151936],{"class":169,"line":6845},[167,151937,403],{"class":173},[167,151939,151940],{"class":169,"line":6854},[167,151941,209],{"emptyLinePlaceholder":208},[167,151943,151944,151946,151948,151950],{"class":169,"line":6861},[167,151945,14250],{"class":181},[167,151947,1493],{"class":173},[167,151949,639],{"class":191},[167,151951,1905],{"class":173},[167,151953,151954,151956,151958,151960,151962],{"class":169,"line":6879},[167,151955,14206],{"class":173},[167,151957,1524],{"class":181},[167,151959,229],{"class":173},[167,151961,1506],{"class":201},[167,151963,14215],{"class":173},[167,151965,151966,151968,151970,151972,151974],{"class":169,"line":6884},[167,151967,14206],{"class":173},[167,151969,1524],{"class":181},[167,151971,229],{"class":173},[167,151973,14226],{"class":201},[167,151975,14215],{"class":173},[167,151977,151978,151980,151982],{"class":169,"line":6889},[167,151979,14285],{"class":173},[167,151981,14288],{"class":181},[167,151983,2917],{"class":173},[167,151985,151986],{"class":169,"line":6898},[167,151987,403],{"class":173},[167,151989,151990],{"class":169,"line":6903},[167,151991,209],{"emptyLinePlaceholder":208},[167,151993,151994,151996,151998,152000],{"class":169,"line":6912},[167,151995,14303],{"class":181},[167,151997,1493],{"class":173},[167,151999,639],{"class":191},[167,152001,1905],{"class":173},[167,152003,152004,152006,152008,152010,152013],{"class":169,"line":6928},[167,152005,2608],{"class":173},[167,152007,9269],{"class":181},[167,152009,229],{"class":173},[167,152011,152012],{"class":201},"'TaskSummary has left the tree'",[167,152014,235],{"class":173},[167,152016,152017],{"class":169,"line":6949},[167,152018,403],{"class":173},[167,152020,152021,152023,152025],{"class":169,"line":6954},[167,152022,282],{"class":173},[167,152024,178],{"class":177},[167,152026,185],{"class":173},[167,152028,152029],{"class":169,"line":6975},[167,152030,209],{"emptyLinePlaceholder":208},[167,152032,152033,152035,152037],{"class":169,"line":6989},[167,152034,174],{"class":173},[167,152036,299],{"class":177},[167,152038,185],{"class":173},[167,152040,152041,152043,152045,152047,152049,152051],{"class":169,"line":7003},[167,152042,307],{"class":173},[167,152044,10117],{"class":177},[167,152046,1245],{"class":181},[167,152048,267],{"class":173},[167,152050,14359],{"class":201},[167,152052,185],{"class":173},[167,152054,152055,152057,152059,152061,152063],{"class":169,"line":7017},[167,152056,1257],{"class":173},[167,152058,15],{"class":177},[167,152060,12334],{"class":173},[167,152062,15],{"class":177},[167,152064,185],{"class":173},[167,152066,152067,152069,152071,152073,152075,152077],{"class":169,"line":7026},[167,152068,1257],{"class":173},[167,152070,15],{"class":177},[167,152072,5694],{"class":181},[167,152074,267],{"class":173},[167,152076,14386],{"class":201},[167,152078,185],{"class":173},[167,152080,152081],{"class":169,"line":7031},[167,152082,152083],{"class":173},"      Registered tasks: {{ totalTasks }}\n",[167,152085,152086,152088,152090],{"class":169,"line":7048},[167,152087,1292],{"class":173},[167,152089,15],{"class":177},[167,152091,185],{"class":173},[167,152093,152094,152096,152098],{"class":169,"line":7057},[167,152095,504],{"class":173},[167,152097,10117],{"class":177},[167,152099,185],{"class":173},[167,152101,152102,152104,152106],{"class":169,"line":7555},[167,152103,282],{"class":173},[167,152105,299],{"class":177},[167,152107,185],{"class":173},[154,152109,152111],{"className":156,"code":152110,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      status: 'Loading status...',\n      totalTasks: null,\n      controller: null\n    }\n  },\n\n  mounted() {\n    this.syncOnlineStatus()\n    window.addEventListener('online', this.syncOnlineStatus)\n    window.addEventListener('offline', this.syncOnlineStatus)\n    void this.loadSummary()\n  },\n\n  beforeUnmount() {\n    window.removeEventListener('online', this.syncOnlineStatus)\n    window.removeEventListener('offline', this.syncOnlineStatus)\n    this.controller?.abort()\n  },\n\n  unmounted() {\n    console.info('TaskSummary has left the tree')\n  },\n\n  methods: {\n    syncOnlineStatus() {\n      this.status = navigator.onLine ? 'Online' : 'Offline'\n    },\n\n    async loadSummary() {\n      this.controller = new AbortController()\n\n      try {\n        const response = await fetch('\u002Fapi\u002Ftasks\u002Fsummary', {\n          signal: this.controller.signal\n        })\n\n        const data = await response.json()\n        this.totalTasks = data.total\n      }\n      catch (error) {\n        if (error instanceof DOMException && error.name === 'AbortError') {\n          return\n        }\n\n        console.error('Failed to load the summary', error)\n      }\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"task-summary\">\n    \u003Cp>{{ status }}\u003C\u002Fp>\n    \u003Cp v-if=\"totalTasks !== null\">\n      Registered tasks: {{ totalTasks }}\n    \u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,152112,152113,152121,152129,152135,152141,152149,152157,152163,152167,152171,152175,152181,152191,152207,152223,152235,152239,152243,152249,152265,152281,152291,152295,152299,152305,152317,152321,152325,152329,152335,152353,152357,152361,152369,152383,152387,152393,152411,152419,152423,152427,152443,152453,152457,152463,152483,152487,152491,152495,152507,152511,152515,152519,152523,152531,152535,152543,152557,152569,152583,152587,152595,152603],{"__ignoreMap":163},[167,152114,152115,152117,152119],{"class":169,"line":170},[167,152116,174],{"class":173},[167,152118,178],{"class":177},[167,152120,185],{"class":173},[167,152122,152123,152125,152127],{"class":169,"line":188},[167,152124,608],{"class":191},[167,152126,3991],{"class":191},[167,152128,1905],{"class":173},[167,152130,152131,152133],{"class":169,"line":205},[167,152132,7176],{"class":181},[167,152134,763],{"class":173},[167,152136,152137,152139],{"class":169,"line":160},[167,152138,1937],{"class":191},[167,152140,1905],{"class":173},[167,152142,152143,152145,152147],{"class":169,"line":238},[167,152144,12585],{"class":173},[167,152146,151634],{"class":201},[167,152148,393],{"class":173},[167,152150,152151,152153,152155],{"class":169,"line":243},[167,152152,14463],{"class":173},[167,152154,6573],{"class":219},[167,152156,393],{"class":173},[167,152158,152159,152161],{"class":169,"line":261},[167,152160,14472],{"class":173},[167,152162,14475],{"class":219},[167,152164,152165],{"class":169,"line":273},[167,152166,4049],{"class":173},[167,152168,152169],{"class":169,"line":279},[167,152170,398],{"class":173},[167,152172,152173],{"class":169,"line":289},[167,152174,209],{"emptyLinePlaceholder":208},[167,152176,152177,152179],{"class":169,"line":294},[167,152178,12749],{"class":181},[167,152180,763],{"class":173},[167,152182,152183,152185,152187,152189],{"class":169,"line":304},[167,152184,879],{"class":219},[167,152186,1679],{"class":173},[167,152188,14502],{"class":181},[167,152190,2917],{"class":173},[167,152192,152193,152195,152197,152199,152201,152203,152205],{"class":169,"line":313},[167,152194,14509],{"class":173},[167,152196,1501],{"class":181},[167,152198,229],{"class":173},[167,152200,1506],{"class":201},[167,152202,1025],{"class":173},[167,152204,4927],{"class":219},[167,152206,14522],{"class":173},[167,152208,152209,152211,152213,152215,152217,152219,152221],{"class":169,"line":161},[167,152210,14509],{"class":173},[167,152212,1501],{"class":181},[167,152214,229],{"class":173},[167,152216,14226],{"class":201},[167,152218,1025],{"class":173},[167,152220,4927],{"class":219},[167,152222,14522],{"class":173},[167,152224,152225,152227,152229,152231,152233],{"class":169,"line":335},[167,152226,12081],{"class":191},[167,152228,7351],{"class":219},[167,152230,1679],{"class":173},[167,152232,14549],{"class":181},[167,152234,2917],{"class":173},[167,152236,152237],{"class":169,"line":341},[167,152238,398],{"class":173},[167,152240,152241],{"class":169,"line":489},[167,152242,209],{"emptyLinePlaceholder":208},[167,152244,152245,152247],{"class":169,"line":495},[167,152246,14564],{"class":181},[167,152248,763],{"class":173},[167,152250,152251,152253,152255,152257,152259,152261,152263],{"class":169,"line":501},[167,152252,14509],{"class":173},[167,152254,1524],{"class":181},[167,152256,229],{"class":173},[167,152258,1506],{"class":201},[167,152260,1025],{"class":173},[167,152262,4927],{"class":219},[167,152264,14522],{"class":173},[167,152266,152267,152269,152271,152273,152275,152277,152279],{"class":169,"line":512},[167,152268,14509],{"class":173},[167,152270,1524],{"class":181},[167,152272,229],{"class":173},[167,152274,14226],{"class":201},[167,152276,1025],{"class":173},[167,152278,4927],{"class":219},[167,152280,14522],{"class":173},[167,152282,152283,152285,152287,152289],{"class":169,"line":781},[167,152284,879],{"class":219},[167,152286,14605],{"class":173},[167,152288,14288],{"class":181},[167,152290,2917],{"class":173},[167,152292,152293],{"class":169,"line":786},[167,152294,398],{"class":173},[167,152296,152297],{"class":169,"line":2678},[167,152298,209],{"emptyLinePlaceholder":208},[167,152300,152301,152303],{"class":169,"line":2692},[167,152302,14622],{"class":181},[167,152304,763],{"class":173},[167,152306,152307,152309,152311,152313,152315],{"class":169,"line":3575},[167,152308,8894],{"class":173},[167,152310,9269],{"class":181},[167,152312,229],{"class":173},[167,152314,152012],{"class":201},[167,152316,235],{"class":173},[167,152318,152319],{"class":169,"line":5028},[167,152320,398],{"class":173},[167,152322,152323],{"class":169,"line":5037},[167,152324,209],{"emptyLinePlaceholder":208},[167,152326,152327],{"class":169,"line":5046},[167,152328,4419],{"class":173},[167,152330,152331,152333],{"class":169,"line":6756},[167,152332,14653],{"class":181},[167,152334,763],{"class":173},[167,152336,152337,152339,152341,152343,152345,152347,152349,152351],{"class":169,"line":6778},[167,152338,741],{"class":219},[167,152340,12786],{"class":173},[167,152342,267],{"class":191},[167,152344,13986],{"class":173},[167,152346,8316],{"class":191},[167,152348,151707],{"class":201},[167,152350,5312],{"class":191},[167,152352,151712],{"class":201},[167,152354,152355],{"class":169,"line":6783},[167,152356,755],{"class":173},[167,152358,152359],{"class":169,"line":6788},[167,152360,209],{"emptyLinePlaceholder":208},[167,152362,152363,152365,152367],{"class":169,"line":6793},[167,152364,7230],{"class":191},[167,152366,14013],{"class":181},[167,152368,763],{"class":173},[167,152370,152371,152373,152375,152377,152379,152381],{"class":169,"line":6809},[167,152372,741],{"class":219},[167,152374,14696],{"class":173},[167,152376,267],{"class":191},[167,152378,4224],{"class":191},[167,152380,13956],{"class":181},[167,152382,2917],{"class":173},[167,152384,152385],{"class":169,"line":6824},[167,152386,209],{"emptyLinePlaceholder":208},[167,152388,152389,152391],{"class":169,"line":6829},[167,152390,14713],{"class":191},[167,152392,1905],{"class":173},[167,152394,152395,152397,152399,152401,152403,152405,152407,152409],{"class":169,"line":6836},[167,152396,8787],{"class":191},[167,152398,6614],{"class":219},[167,152400,223],{"class":191},[167,152402,3009],{"class":191},[167,152404,6621],{"class":181},[167,152406,229],{"class":173},[167,152408,14055],{"class":201},[167,152410,627],{"class":173},[167,152412,152413,152415,152417],{"class":169,"line":6845},[167,152414,14738],{"class":173},[167,152416,4927],{"class":219},[167,152418,14743],{"class":173},[167,152420,152421],{"class":169,"line":6854},[167,152422,14748],{"class":173},[167,152424,152425],{"class":169,"line":6861},[167,152426,209],{"emptyLinePlaceholder":208},[167,152428,152429,152431,152433,152435,152437,152439,152441],{"class":169,"line":6879},[167,152430,8787],{"class":191},[167,152432,11951],{"class":219},[167,152434,223],{"class":191},[167,152436,3009],{"class":191},[167,152438,6683],{"class":173},[167,152440,6686],{"class":181},[167,152442,2917],{"class":173},[167,152444,152445,152447,152449,152451],{"class":169,"line":6884},[167,152446,14773],{"class":219},[167,152448,14776],{"class":173},[167,152450,267],{"class":191},[167,152452,14109],{"class":173},[167,152454,152455],{"class":169,"line":6889},[167,152456,7287],{"class":173},[167,152458,152459,152461],{"class":169,"line":6898},[167,152460,14789],{"class":191},[167,152462,6745],{"class":173},[167,152464,152465,152467,152469,152471,152473,152475,152477,152479,152481],{"class":169,"line":6903},[167,152466,14796],{"class":191},[167,152468,14127],{"class":173},[167,152470,6762],{"class":191},[167,152472,14132],{"class":181},[167,152474,14135],{"class":191},[167,152476,14138],{"class":173},[167,152478,2550],{"class":191},[167,152480,14143],{"class":201},[167,152482,258],{"class":173},[167,152484,152485],{"class":169,"line":6912},[167,152486,14817],{"class":191},[167,152488,152489],{"class":169,"line":6928},[167,152490,14822],{"class":173},[167,152492,152493],{"class":169,"line":6949},[167,152494,209],{"emptyLinePlaceholder":208},[167,152496,152497,152499,152501,152503,152505],{"class":169,"line":6954},[167,152498,14831],{"class":173},[167,152500,9352],{"class":181},[167,152502,229],{"class":173},[167,152504,151871],{"class":201},[167,152506,14172],{"class":173},[167,152508,152509],{"class":169,"line":6975},[167,152510,7287],{"class":173},[167,152512,152513],{"class":169,"line":6989},[167,152514,4049],{"class":173},[167,152516,152517],{"class":169,"line":7003},[167,152518,3492],{"class":173},[167,152520,152521],{"class":169,"line":7017},[167,152522,276],{"class":173},[167,152524,152525,152527,152529],{"class":169,"line":7026},[167,152526,282],{"class":173},[167,152528,178],{"class":177},[167,152530,185],{"class":173},[167,152532,152533],{"class":169,"line":7031},[167,152534,209],{"emptyLinePlaceholder":208},[167,152536,152537,152539,152541],{"class":169,"line":7048},[167,152538,174],{"class":173},[167,152540,299],{"class":177},[167,152542,185],{"class":173},[167,152544,152545,152547,152549,152551,152553,152555],{"class":169,"line":7057},[167,152546,307],{"class":173},[167,152548,10117],{"class":177},[167,152550,1245],{"class":181},[167,152552,267],{"class":173},[167,152554,14359],{"class":201},[167,152556,185],{"class":173},[167,152558,152559,152561,152563,152565,152567],{"class":169,"line":7555},[167,152560,1257],{"class":173},[167,152562,15],{"class":177},[167,152564,12334],{"class":173},[167,152566,15],{"class":177},[167,152568,185],{"class":173},[167,152570,152571,152573,152575,152577,152579,152581],{"class":169,"line":7560},[167,152572,1257],{"class":173},[167,152574,15],{"class":177},[167,152576,5694],{"class":181},[167,152578,267],{"class":173},[167,152580,14386],{"class":201},[167,152582,185],{"class":173},[167,152584,152585],{"class":169,"line":7579},[167,152586,152083],{"class":173},[167,152588,152589,152591,152593],{"class":169,"line":7592},[167,152590,1292],{"class":173},[167,152592,15],{"class":177},[167,152594,185],{"class":173},[167,152596,152597,152599,152601],{"class":169,"line":7605},[167,152598,504],{"class":173},[167,152600,10117],{"class":177},[167,152602,185],{"class":173},[167,152604,152605,152607,152609],{"class":169,"line":7618},[167,152606,282],{"class":173},[167,152608,299],{"class":177},[167,152610,185],{"class":173},[33,152612,152613,152618,152623],{},[36,152614,152615,152617],{},[87,152616,6400],{}," opens external resources.",[36,152619,152620,152622],{},[87,152621,13530],{}," performs the real cleanup.",[36,152624,152625,152627],{},[87,152626,13535],{}," leaves a final confirmation that the component has fully exited.",[22,152629,60191],{"id":60190},[33,152631,152632,152637,152642,152645],{},[36,152633,152634,152636],{},[87,152635,13472],{}," is the main hook for cleaning up what the component opened.",[36,152638,152639,152641],{},[87,152640,11276],{}," confirms that unmounting has already finished.",[36,152643,152644],{},"If the component is only hidden or cached, these hooks may never run.",[36,152646,152647],{},"The most useful rule is simple: if you registered listeners, timers, observers, or manual requests, define their teardown too.",[924,152649,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":152651},[152652,152653,152654,152655,152656,152664,152669],{"id":57680,"depth":188,"text":57681},{"id":57774,"depth":188,"text":57775},{"id":57798,"depth":188,"text":57799},{"id":91740,"depth":188,"text":91741},{"id":57819,"depth":188,"text":57820,"children":152657},[152658,152660,152662,152663],{"id":151466,"depth":205,"text":152659},"1. Registering resources in mounted and forgetting to close them",{"id":151503,"depth":205,"text":152661},"2. Leaving all cleanup for unmounted",{"id":151522,"depth":205,"text":151523},{"id":151546,"depth":205,"text":151547},{"id":57925,"depth":188,"text":57926,"children":152665},[152666,152667,152668],{"id":151561,"depth":205,"text":151562},{"id":151568,"depth":205,"text":151569},{"id":151578,"depth":205,"text":151579},{"id":60190,"depth":188,"text":60191},"Illustration of the unmounting phase of the Vue lifecycle with beforeUnmount and unmounted","What happens when a component leaves the screen and how to use beforeUnmount and unmounted to clean up listeners, timers, and side effects without leaks or strange behavior.",{"updatedAt":15008,"coverCaption":152673,"author":946,"keywords":152674},"The unmounting phase happens when Vue removes a component from the active tree",[3258,13472,11276,14250,15011],"\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en",[152677],{"headline":134558,"author":152678,"datePublished":15008,"@type":961},{"name":946,"@type":959},{"title":134558,"description":152671},"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.en",[152682,152683,152684],{"tag":129945,"color":7725},{"tag":98745,"color":1639},{"tag":65670,"color":5425},"2LAxkkS33i-vGNnTWe2sQaba4DuOd0cNKaRxDgUi_ls",{"id":13462,"title":13463,"body":152687,"cover":15003,"coverAlt":15004,"date":15005,"description":15006,"draft":940,"extension":941,"lab":942,"locale":943,"meta":154047,"navigation":208,"path":15012,"schemaOrg":154049,"seo":154052,"series":7718,"seriesDescription":7719,"seriesOrder":238,"seriesTitle":7720,"slug":942,"stem":15017,"tags":154053,"__hash__":15022},{"type":8,"value":152688,"toc":154029},[152689,152695,152699,152705,152707,152713,152715,152729,152731,152741,152743,152753,152757,152759,152761,152763,152785,152787,152801,152803,152805,152811,152823,152825,152839,152841,152843,152883,152889,152891,152895,152897,152899,152919,152921,152925,152931,152935,152937,152943,152949,152951,152953,152957,152959,152961,152963,152965,152967,152971,152973,152979,153495,153997,154011,154013,154027],[11,152690,13469,152691,1025,152693,6219],{"id":13468},[87,152692,13472],{},[87,152694,11276],{},[15,152696,13477,152697,13480],{},[87,152698,11483],{},[15,152700,13483,152701,1028,152703,13488],{},[87,152702,13472],{},[87,152704,11276],{},[22,152706,6257],{"id":6256},[15,152708,13493,152709,13497,152711,13500],{},[87,152710,13496],{},[87,152712,3392],{},[15,152714,13503],{},[33,152716,152717,152723],{},[36,152718,152719,13510,152721,1679],{},[87,152720,13472],{},[3933,152722,13513],{},[36,152724,152725,13510,152727,1679],{},[87,152726,11276],{},[3933,152728,13520],{},[15,152730,13523],{},[33,152732,152733,152737],{},[36,152734,152735],{},[87,152736,13530],{},[36,152738,152739],{},[87,152740,13535],{},[15,152742,13538],{},[33,152744,152745,152749],{},[36,152746,6304,152747,13545],{},[87,152748,13472],{},[36,152750,6304,152751,13550],{},[87,152752,11276],{},[15,152754,13553,152755,1679],{},[87,152756,13472],{},[22,152758,6322],{"id":6321},[15,152760,13560],{},[15,152762,9308],{},[33,152764,152765,152771,152781,152783],{},[36,152766,13567,152767,1025,152769,13572],{},[87,152768,6414],{},[87,152770,6417],{},[36,152772,13575,152773,1025,152775,1025,152777,90,152779,1679],{},[87,152774,11483],{},[87,152776,13580],{},[87,152778,13583],{},[87,152780,13586],{},[36,152782,13589],{},[36,152784,13592],{},[15,152786,13595],{},[33,152788,152789,152795],{},[36,152790,13600,152791,13604,152793,1679],{},[3933,152792,13603],{},[87,152794,13472],{},[36,152796,13600,152797,13612,152799,1679],{},[3933,152798,13611],{},[87,152800,11276],{},[22,152802,6349],{"id":6348},[15,152804,13619],{},[15,152806,13622,152807,1028,152809,13627],{},[87,152808,13472],{},[87,152810,11276],{},[33,152812,152813,152817,152819,152821],{},[36,152814,13632,152815,1679],{},[87,152816,13635],{},[36,152818,13638],{},[36,152820,13641],{},[36,152822,13644],{},[15,152824,13647],{},[33,152826,152827,152831,152835],{},[36,152828,152829,13654],{},[87,152830,13496],{},[36,152832,152833,13660],{},[87,152834,13659],{},[36,152836,13663,152837,13666],{},[87,152838,11158],{},[15,152840,13669],{},[22,152842,13673],{"id":13672},[56,152844,152845,152857],{},[59,152846,152847],{},[62,152848,152849,152851,152853,152855],{},[65,152850,11380],{},[65,152852,13684],{},[65,152854,13687],{},[65,152856,13690],{},[75,152858,152859,152871],{},[62,152860,152861,152865,152867,152869],{},[80,152862,152863],{},[87,152864,13472],{},[80,152866,13701],{},[80,152868,13704],{},[80,152870,13707],{},[62,152872,152873,152877,152879,152881],{},[80,152874,152875],{},[87,152876,11276],{},[80,152878,13716],{},[80,152880,13719],{},[80,152882,13722],{},[15,152884,152885,13727,152887,1679],{},[87,152886,11276],{},[87,152888,11276],{},[22,152890,3085],{"id":3084},[3087,152892,13735,152893,13738],{"id":13734},[87,152894,6393],{},[15,152896,13741],{},[15,152898,13744],{},[33,152900,152901,152905,152909,152913,152917],{},[36,152902,152903],{},[87,152904,13751],{},[36,152906,152907],{},[87,152908,13756],{},[36,152910,152911],{},[87,152912,13761],{},[36,152914,152915],{},[87,152916,13586],{},[36,152918,13768],{},[15,152920,13771],{},[3087,152922,13775,152923],{"id":13774},[87,152924,11276],{},[15,152926,152927,13782,152929,13785],{},[87,152928,11276],{},[87,152930,13472],{},[15,152932,13788,152933,13791],{},[87,152934,13472],{},[3087,152936,13795],{"id":13794},[15,152938,13798,152939,13801,152941,13804],{},[87,152940,13472],{},[87,152942,13659],{},[15,152944,13807,152945,13810,152947,1679],{},[87,152946,11158],{},[87,152948,11276],{},[15,152950,13815],{},[3087,152952,13819],{"id":13818},[15,152954,13822,152955,13825],{},[87,152956,13472],{},[15,152958,13828],{},[22,152960,7997],{"id":7996},[3087,152962,13834],{"id":13833},[15,152964,13837],{},[3087,152966,13841],{"id":13840},[15,152968,13844,152969,13847],{},[87,152970,13472],{},[3087,152972,13851],{"id":13850},[15,152974,152975,13856,152977,13860],{},[87,152976,11276],{},[9295,152978,13859],{},[154,152980,152981],{"className":156,"code":13863,"filename":3260,"language":162,"meta":163,"style":163},[87,152982,152983,152999,153009,153013,153029,153053,153057,153075,153079,153087,153103,153107,153111,153121,153133,153137,153143,153161,153165,153169,153173,153201,153209,153213,153219,153239,153243,153247,153251,153263,153267,153271,153275,153285,153291,153303,153315,153323,153327,153331,153341,153353,153365,153373,153377,153381,153391,153403,153407,153415,153419,153427,153441,153453,153467,153471,153479,153487],{"__ignoreMap":163},[167,152984,152985,152987,152989,152991,152993,152995,152997],{"class":169,"line":170},[167,152986,174],{"class":173},[167,152988,178],{"class":177},[167,152990,182],{"class":181},[167,152992,1050],{"class":181},[167,152994,267],{"class":173},[167,152996,1055],{"class":201},[167,152998,185],{"class":173},[167,153000,153001,153003,153005,153007],{"class":169,"line":188},[167,153002,192],{"class":191},[167,153004,13888],{"class":173},[167,153006,198],{"class":191},[167,153008,202],{"class":201},[167,153010,153011],{"class":169,"line":205},[167,153012,209],{"emptyLinePlaceholder":208},[167,153014,153015,153017,153019,153021,153023,153025,153027],{"class":169,"line":160},[167,153016,216],{"class":191},[167,153018,11700],{"class":219},[167,153020,223],{"class":191},[167,153022,226],{"class":181},[167,153024,229],{"class":173},[167,153026,13911],{"class":201},[167,153028,235],{"class":173},[167,153030,153031,153033,153035,153037,153039,153041,153043,153045,153047,153049,153051],{"class":169,"line":238},[167,153032,216],{"class":191},[167,153034,13920],{"class":219},[167,153036,223],{"class":191},[167,153038,226],{"class":181},[167,153040,174],{"class":173},[167,153042,13929],{"class":219},[167,153044,659],{"class":191},[167,153046,6567],{"class":219},[167,153048,6570],{"class":173},[167,153050,6573],{"class":219},[167,153052,235],{"class":173},[167,153054,153055],{"class":169,"line":243},[167,153056,209],{"emptyLinePlaceholder":208},[167,153058,153059,153061,153063,153065,153067,153069,153071,153073],{"class":169,"line":261},[167,153060,13948],{"class":191},[167,153062,13951],{"class":173},[167,153064,583],{"class":191},[167,153066,13956],{"class":181},[167,153068,659],{"class":191},[167,153070,6567],{"class":219},[167,153072,223],{"class":191},[167,153074,12146],{"class":219},[167,153076,153077],{"class":169,"line":273},[167,153078,209],{"emptyLinePlaceholder":208},[167,153080,153081,153083,153085],{"class":169,"line":279},[167,153082,246],{"class":191},[167,153084,13975],{"class":181},[167,153086,763],{"class":173},[167,153088,153089,153091,153093,153095,153097,153099,153101],{"class":169,"line":289},[167,153090,11916],{"class":173},[167,153092,267],{"class":191},[167,153094,13986],{"class":173},[167,153096,8316],{"class":191},[167,153098,13991],{"class":201},[167,153100,5312],{"class":191},[167,153102,13996],{"class":201},[167,153104,153105],{"class":169,"line":294},[167,153106,276],{"class":173},[167,153108,153109],{"class":169,"line":304},[167,153110,209],{"emptyLinePlaceholder":208},[167,153112,153113,153115,153117,153119],{"class":169,"line":313},[167,153114,2523],{"class":191},[167,153116,1432],{"class":191},[167,153118,14013],{"class":181},[167,153120,763],{"class":173},[167,153122,153123,153125,153127,153129,153131],{"class":169,"line":161},[167,153124,14020],{"class":173},[167,153126,267],{"class":191},[167,153128,4224],{"class":191},[167,153130,13956],{"class":181},[167,153132,2917],{"class":173},[167,153134,153135],{"class":169,"line":335},[167,153136,209],{"emptyLinePlaceholder":208},[167,153138,153139,153141],{"class":169,"line":341},[167,153140,6723],{"class":191},[167,153142,1905],{"class":173},[167,153144,153145,153147,153149,153151,153153,153155,153157,153159],{"class":169,"line":489},[167,153146,8266],{"class":191},[167,153148,6614],{"class":219},[167,153150,223],{"class":191},[167,153152,3009],{"class":191},[167,153154,6621],{"class":181},[167,153156,229],{"class":173},[167,153158,14055],{"class":201},[167,153160,627],{"class":173},[167,153162,153163],{"class":169,"line":495},[167,153164,14062],{"class":173},[167,153166,153167],{"class":169,"line":501},[167,153168,8926],{"class":173},[167,153170,153171],{"class":169,"line":512},[167,153172,209],{"emptyLinePlaceholder":208},[167,153174,153175,153177,153179,153181,153183,153185,153187,153189,153191,153193,153195,153197,153199],{"class":169,"line":781},[167,153176,8266],{"class":191},[167,153178,11951],{"class":219},[167,153180,223],{"class":191},[167,153182,3009],{"class":191},[167,153184,6683],{"class":173},[167,153186,6686],{"class":181},[167,153188,14087],{"class":173},[167,153190,6692],{"class":191},[167,153192,577],{"class":173},[167,153194,1921],{"class":254},[167,153196,583],{"class":191},[167,153198,8493],{"class":219},[167,153200,599],{"class":173},[167,153202,153203,153205,153207],{"class":169,"line":786},[167,153204,14104],{"class":173},[167,153206,267],{"class":191},[167,153208,14109],{"class":173},[167,153210,153211],{"class":169,"line":2678},[167,153212,3492],{"class":173},[167,153214,153215,153217],{"class":169,"line":2692},[167,153216,14118],{"class":191},[167,153218,6745],{"class":173},[167,153220,153221,153223,153225,153227,153229,153231,153233,153235,153237],{"class":169,"line":3575},[167,153222,7419],{"class":191},[167,153224,14127],{"class":173},[167,153226,6762],{"class":191},[167,153228,14132],{"class":181},[167,153230,14135],{"class":191},[167,153232,14138],{"class":173},[167,153234,2550],{"class":191},[167,153236,14143],{"class":201},[167,153238,258],{"class":173},[167,153240,153241],{"class":169,"line":5028},[167,153242,14150],{"class":191},[167,153244,153245],{"class":169,"line":5037},[167,153246,4049],{"class":173},[167,153248,153249],{"class":169,"line":5046},[167,153250,209],{"emptyLinePlaceholder":208},[167,153252,153253,153255,153257,153259,153261],{"class":169,"line":6756},[167,153254,8894],{"class":173},[167,153256,9352],{"class":181},[167,153258,229],{"class":173},[167,153260,14169],{"class":201},[167,153262,14172],{"class":173},[167,153264,153265],{"class":169,"line":6778},[167,153266,3492],{"class":173},[167,153268,153269],{"class":169,"line":6783},[167,153270,276],{"class":173},[167,153272,153273],{"class":169,"line":6788},[167,153274,209],{"emptyLinePlaceholder":208},[167,153276,153277,153279,153281,153283],{"class":169,"line":6793},[167,153278,6796],{"class":181},[167,153280,1493],{"class":173},[167,153282,639],{"class":191},[167,153284,1905],{"class":173},[167,153286,153287,153289],{"class":169,"line":6809},[167,153288,14199],{"class":181},[167,153290,2917],{"class":173},[167,153292,153293,153295,153297,153299,153301],{"class":169,"line":6824},[167,153294,14206],{"class":173},[167,153296,1501],{"class":181},[167,153298,229],{"class":173},[167,153300,1506],{"class":201},[167,153302,14215],{"class":173},[167,153304,153305,153307,153309,153311,153313],{"class":169,"line":6829},[167,153306,14206],{"class":173},[167,153308,1501],{"class":181},[167,153310,229],{"class":173},[167,153312,14226],{"class":201},[167,153314,14215],{"class":173},[167,153316,153317,153319,153321],{"class":169,"line":6836},[167,153318,14233],{"class":191},[167,153320,14013],{"class":181},[167,153322,2917],{"class":173},[167,153324,153325],{"class":169,"line":6845},[167,153326,403],{"class":173},[167,153328,153329],{"class":169,"line":6854},[167,153330,209],{"emptyLinePlaceholder":208},[167,153332,153333,153335,153337,153339],{"class":169,"line":6861},[167,153334,14250],{"class":181},[167,153336,1493],{"class":173},[167,153338,639],{"class":191},[167,153340,1905],{"class":173},[167,153342,153343,153345,153347,153349,153351],{"class":169,"line":6879},[167,153344,14206],{"class":173},[167,153346,1524],{"class":181},[167,153348,229],{"class":173},[167,153350,1506],{"class":201},[167,153352,14215],{"class":173},[167,153354,153355,153357,153359,153361,153363],{"class":169,"line":6884},[167,153356,14206],{"class":173},[167,153358,1524],{"class":181},[167,153360,229],{"class":173},[167,153362,14226],{"class":201},[167,153364,14215],{"class":173},[167,153366,153367,153369,153371],{"class":169,"line":6889},[167,153368,14285],{"class":173},[167,153370,14288],{"class":181},[167,153372,2917],{"class":173},[167,153374,153375],{"class":169,"line":6898},[167,153376,403],{"class":173},[167,153378,153379],{"class":169,"line":6903},[167,153380,209],{"emptyLinePlaceholder":208},[167,153382,153383,153385,153387,153389],{"class":169,"line":6912},[167,153384,14303],{"class":181},[167,153386,1493],{"class":173},[167,153388,639],{"class":191},[167,153390,1905],{"class":173},[167,153392,153393,153395,153397,153399,153401],{"class":169,"line":6928},[167,153394,2608],{"class":173},[167,153396,9269],{"class":181},[167,153398,229],{"class":173},[167,153400,14320],{"class":201},[167,153402,235],{"class":173},[167,153404,153405],{"class":169,"line":6949},[167,153406,403],{"class":173},[167,153408,153409,153411,153413],{"class":169,"line":6954},[167,153410,282],{"class":173},[167,153412,178],{"class":177},[167,153414,185],{"class":173},[167,153416,153417],{"class":169,"line":6975},[167,153418,209],{"emptyLinePlaceholder":208},[167,153420,153421,153423,153425],{"class":169,"line":6989},[167,153422,174],{"class":173},[167,153424,299],{"class":177},[167,153426,185],{"class":173},[167,153428,153429,153431,153433,153435,153437,153439],{"class":169,"line":7003},[167,153430,307],{"class":173},[167,153432,10117],{"class":177},[167,153434,1245],{"class":181},[167,153436,267],{"class":173},[167,153438,14359],{"class":201},[167,153440,185],{"class":173},[167,153442,153443,153445,153447,153449,153451],{"class":169,"line":7017},[167,153444,1257],{"class":173},[167,153446,15],{"class":177},[167,153448,12334],{"class":173},[167,153450,15],{"class":177},[167,153452,185],{"class":173},[167,153454,153455,153457,153459,153461,153463,153465],{"class":169,"line":7026},[167,153456,1257],{"class":173},[167,153458,15],{"class":177},[167,153460,5694],{"class":181},[167,153462,267],{"class":173},[167,153464,14386],{"class":201},[167,153466,185],{"class":173},[167,153468,153469],{"class":169,"line":7031},[167,153470,14393],{"class":173},[167,153472,153473,153475,153477],{"class":169,"line":7048},[167,153474,1292],{"class":173},[167,153476,15],{"class":177},[167,153478,185],{"class":173},[167,153480,153481,153483,153485],{"class":169,"line":7057},[167,153482,504],{"class":173},[167,153484,10117],{"class":177},[167,153486,185],{"class":173},[167,153488,153489,153491,153493],{"class":169,"line":7555},[167,153490,282],{"class":173},[167,153492,299],{"class":177},[167,153494,185],{"class":173},[154,153496,153497],{"className":156,"code":14420,"filename":3973,"language":162,"meta":163,"style":163},[87,153498,153499,153507,153515,153521,153527,153535,153543,153549,153553,153557,153561,153567,153577,153593,153609,153621,153625,153629,153635,153651,153667,153677,153681,153685,153691,153703,153707,153711,153715,153721,153739,153743,153747,153755,153769,153773,153779,153797,153805,153809,153813,153829,153839,153843,153849,153869,153873,153877,153881,153893,153897,153901,153905,153909,153917,153921,153929,153943,153955,153969,153973,153981,153989],{"__ignoreMap":163},[167,153500,153501,153503,153505],{"class":169,"line":170},[167,153502,174],{"class":173},[167,153504,178],{"class":177},[167,153506,185],{"class":173},[167,153508,153509,153511,153513],{"class":169,"line":188},[167,153510,608],{"class":191},[167,153512,3991],{"class":191},[167,153514,1905],{"class":173},[167,153516,153517,153519],{"class":169,"line":205},[167,153518,7176],{"class":181},[167,153520,763],{"class":173},[167,153522,153523,153525],{"class":169,"line":160},[167,153524,1937],{"class":191},[167,153526,1905],{"class":173},[167,153528,153529,153531,153533],{"class":169,"line":238},[167,153530,12585],{"class":173},[167,153532,13911],{"class":201},[167,153534,393],{"class":173},[167,153536,153537,153539,153541],{"class":169,"line":243},[167,153538,14463],{"class":173},[167,153540,6573],{"class":219},[167,153542,393],{"class":173},[167,153544,153545,153547],{"class":169,"line":261},[167,153546,14472],{"class":173},[167,153548,14475],{"class":219},[167,153550,153551],{"class":169,"line":273},[167,153552,4049],{"class":173},[167,153554,153555],{"class":169,"line":279},[167,153556,398],{"class":173},[167,153558,153559],{"class":169,"line":289},[167,153560,209],{"emptyLinePlaceholder":208},[167,153562,153563,153565],{"class":169,"line":294},[167,153564,12749],{"class":181},[167,153566,763],{"class":173},[167,153568,153569,153571,153573,153575],{"class":169,"line":304},[167,153570,879],{"class":219},[167,153572,1679],{"class":173},[167,153574,14502],{"class":181},[167,153576,2917],{"class":173},[167,153578,153579,153581,153583,153585,153587,153589,153591],{"class":169,"line":313},[167,153580,14509],{"class":173},[167,153582,1501],{"class":181},[167,153584,229],{"class":173},[167,153586,1506],{"class":201},[167,153588,1025],{"class":173},[167,153590,4927],{"class":219},[167,153592,14522],{"class":173},[167,153594,153595,153597,153599,153601,153603,153605,153607],{"class":169,"line":161},[167,153596,14509],{"class":173},[167,153598,1501],{"class":181},[167,153600,229],{"class":173},[167,153602,14226],{"class":201},[167,153604,1025],{"class":173},[167,153606,4927],{"class":219},[167,153608,14522],{"class":173},[167,153610,153611,153613,153615,153617,153619],{"class":169,"line":335},[167,153612,12081],{"class":191},[167,153614,7351],{"class":219},[167,153616,1679],{"class":173},[167,153618,14549],{"class":181},[167,153620,2917],{"class":173},[167,153622,153623],{"class":169,"line":341},[167,153624,398],{"class":173},[167,153626,153627],{"class":169,"line":489},[167,153628,209],{"emptyLinePlaceholder":208},[167,153630,153631,153633],{"class":169,"line":495},[167,153632,14564],{"class":181},[167,153634,763],{"class":173},[167,153636,153637,153639,153641,153643,153645,153647,153649],{"class":169,"line":501},[167,153638,14509],{"class":173},[167,153640,1524],{"class":181},[167,153642,229],{"class":173},[167,153644,1506],{"class":201},[167,153646,1025],{"class":173},[167,153648,4927],{"class":219},[167,153650,14522],{"class":173},[167,153652,153653,153655,153657,153659,153661,153663,153665],{"class":169,"line":512},[167,153654,14509],{"class":173},[167,153656,1524],{"class":181},[167,153658,229],{"class":173},[167,153660,14226],{"class":201},[167,153662,1025],{"class":173},[167,153664,4927],{"class":219},[167,153666,14522],{"class":173},[167,153668,153669,153671,153673,153675],{"class":169,"line":781},[167,153670,879],{"class":219},[167,153672,14605],{"class":173},[167,153674,14288],{"class":181},[167,153676,2917],{"class":173},[167,153678,153679],{"class":169,"line":786},[167,153680,398],{"class":173},[167,153682,153683],{"class":169,"line":2678},[167,153684,209],{"emptyLinePlaceholder":208},[167,153686,153687,153689],{"class":169,"line":2692},[167,153688,14622],{"class":181},[167,153690,763],{"class":173},[167,153692,153693,153695,153697,153699,153701],{"class":169,"line":3575},[167,153694,8894],{"class":173},[167,153696,9269],{"class":181},[167,153698,229],{"class":173},[167,153700,14320],{"class":201},[167,153702,235],{"class":173},[167,153704,153705],{"class":169,"line":5028},[167,153706,398],{"class":173},[167,153708,153709],{"class":169,"line":5037},[167,153710,209],{"emptyLinePlaceholder":208},[167,153712,153713],{"class":169,"line":5046},[167,153714,4419],{"class":173},[167,153716,153717,153719],{"class":169,"line":6756},[167,153718,14653],{"class":181},[167,153720,763],{"class":173},[167,153722,153723,153725,153727,153729,153731,153733,153735,153737],{"class":169,"line":6778},[167,153724,741],{"class":219},[167,153726,12786],{"class":173},[167,153728,267],{"class":191},[167,153730,13986],{"class":173},[167,153732,8316],{"class":191},[167,153734,13991],{"class":201},[167,153736,5312],{"class":191},[167,153738,13996],{"class":201},[167,153740,153741],{"class":169,"line":6783},[167,153742,755],{"class":173},[167,153744,153745],{"class":169,"line":6788},[167,153746,209],{"emptyLinePlaceholder":208},[167,153748,153749,153751,153753],{"class":169,"line":6793},[167,153750,7230],{"class":191},[167,153752,14013],{"class":181},[167,153754,763],{"class":173},[167,153756,153757,153759,153761,153763,153765,153767],{"class":169,"line":6809},[167,153758,741],{"class":219},[167,153760,14696],{"class":173},[167,153762,267],{"class":191},[167,153764,4224],{"class":191},[167,153766,13956],{"class":181},[167,153768,2917],{"class":173},[167,153770,153771],{"class":169,"line":6824},[167,153772,209],{"emptyLinePlaceholder":208},[167,153774,153775,153777],{"class":169,"line":6829},[167,153776,14713],{"class":191},[167,153778,1905],{"class":173},[167,153780,153781,153783,153785,153787,153789,153791,153793,153795],{"class":169,"line":6836},[167,153782,8787],{"class":191},[167,153784,6614],{"class":219},[167,153786,223],{"class":191},[167,153788,3009],{"class":191},[167,153790,6621],{"class":181},[167,153792,229],{"class":173},[167,153794,14055],{"class":201},[167,153796,627],{"class":173},[167,153798,153799,153801,153803],{"class":169,"line":6845},[167,153800,14738],{"class":173},[167,153802,4927],{"class":219},[167,153804,14743],{"class":173},[167,153806,153807],{"class":169,"line":6854},[167,153808,14748],{"class":173},[167,153810,153811],{"class":169,"line":6861},[167,153812,209],{"emptyLinePlaceholder":208},[167,153814,153815,153817,153819,153821,153823,153825,153827],{"class":169,"line":6879},[167,153816,8787],{"class":191},[167,153818,11951],{"class":219},[167,153820,223],{"class":191},[167,153822,3009],{"class":191},[167,153824,6683],{"class":173},[167,153826,6686],{"class":181},[167,153828,2917],{"class":173},[167,153830,153831,153833,153835,153837],{"class":169,"line":6884},[167,153832,14773],{"class":219},[167,153834,14776],{"class":173},[167,153836,267],{"class":191},[167,153838,14109],{"class":173},[167,153840,153841],{"class":169,"line":6889},[167,153842,7287],{"class":173},[167,153844,153845,153847],{"class":169,"line":6898},[167,153846,14789],{"class":191},[167,153848,6745],{"class":173},[167,153850,153851,153853,153855,153857,153859,153861,153863,153865,153867],{"class":169,"line":6903},[167,153852,14796],{"class":191},[167,153854,14127],{"class":173},[167,153856,6762],{"class":191},[167,153858,14132],{"class":181},[167,153860,14135],{"class":191},[167,153862,14138],{"class":173},[167,153864,2550],{"class":191},[167,153866,14143],{"class":201},[167,153868,258],{"class":173},[167,153870,153871],{"class":169,"line":6912},[167,153872,14817],{"class":191},[167,153874,153875],{"class":169,"line":6928},[167,153876,14822],{"class":173},[167,153878,153879],{"class":169,"line":6949},[167,153880,209],{"emptyLinePlaceholder":208},[167,153882,153883,153885,153887,153889,153891],{"class":169,"line":6954},[167,153884,14831],{"class":173},[167,153886,9352],{"class":181},[167,153888,229],{"class":173},[167,153890,14169],{"class":201},[167,153892,14172],{"class":173},[167,153894,153895],{"class":169,"line":6975},[167,153896,7287],{"class":173},[167,153898,153899],{"class":169,"line":6989},[167,153900,4049],{"class":173},[167,153902,153903],{"class":169,"line":7003},[167,153904,3492],{"class":173},[167,153906,153907],{"class":169,"line":7017},[167,153908,276],{"class":173},[167,153910,153911,153913,153915],{"class":169,"line":7026},[167,153912,282],{"class":173},[167,153914,178],{"class":177},[167,153916,185],{"class":173},[167,153918,153919],{"class":169,"line":7031},[167,153920,209],{"emptyLinePlaceholder":208},[167,153922,153923,153925,153927],{"class":169,"line":7048},[167,153924,174],{"class":173},[167,153926,299],{"class":177},[167,153928,185],{"class":173},[167,153930,153931,153933,153935,153937,153939,153941],{"class":169,"line":7057},[167,153932,307],{"class":173},[167,153934,10117],{"class":177},[167,153936,1245],{"class":181},[167,153938,267],{"class":173},[167,153940,14359],{"class":201},[167,153942,185],{"class":173},[167,153944,153945,153947,153949,153951,153953],{"class":169,"line":7555},[167,153946,1257],{"class":173},[167,153948,15],{"class":177},[167,153950,12334],{"class":173},[167,153952,15],{"class":177},[167,153954,185],{"class":173},[167,153956,153957,153959,153961,153963,153965,153967],{"class":169,"line":7560},[167,153958,1257],{"class":173},[167,153960,15],{"class":177},[167,153962,5694],{"class":181},[167,153964,267],{"class":173},[167,153966,14386],{"class":201},[167,153968,185],{"class":173},[167,153970,153971],{"class":169,"line":7579},[167,153972,14393],{"class":173},[167,153974,153975,153977,153979],{"class":169,"line":7592},[167,153976,1292],{"class":173},[167,153978,15],{"class":177},[167,153980,185],{"class":173},[167,153982,153983,153985,153987],{"class":169,"line":7605},[167,153984,504],{"class":173},[167,153986,10117],{"class":177},[167,153988,185],{"class":173},[167,153990,153991,153993,153995],{"class":169,"line":7618},[167,153992,282],{"class":173},[167,153994,299],{"class":177},[167,153996,185],{"class":173},[33,153998,153999,154003,154007],{},[36,154000,154001,14950],{},[87,154002,6400],{},[36,154004,154005,14955],{},[87,154006,13530],{},[36,154008,154009,14960],{},[87,154010,13535],{},[22,154012,7678],{"id":7677},[33,154014,154015,154019,154023,154025],{},[36,154016,154017,14969],{},[87,154018,13472],{},[36,154020,154021,14974],{},[87,154022,11276],{},[36,154024,14977],{},[36,154026,14980],{},[924,154028,1609],{},{"title":163,"searchDepth":188,"depth":188,"links":154030},[154031,154032,154033,154034,154035,154041,154046],{"id":6256,"depth":188,"text":6257},{"id":6321,"depth":188,"text":6322},{"id":6348,"depth":188,"text":6349},{"id":13672,"depth":188,"text":13673},{"id":3084,"depth":188,"text":3085,"children":154036},[154037,154038,154039,154040],{"id":13734,"depth":205,"text":14992},{"id":13774,"depth":205,"text":14994},{"id":13794,"depth":205,"text":13795},{"id":13818,"depth":205,"text":13819},{"id":7996,"depth":188,"text":7997,"children":154042},[154043,154044,154045],{"id":13833,"depth":205,"text":13834},{"id":13840,"depth":205,"text":13841},{"id":13850,"depth":205,"text":13851},{"id":7677,"depth":188,"text":7678},{"updatedAt":15008,"coverCaption":15009,"author":946,"keywords":154048},[3258,13472,11276,14250,15011],[154050],{"headline":13463,"author":154051,"datePublished":15008,"@type":961},{"name":946,"@type":959},{"title":13463,"description":15006},[154054,154055,154056],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":5424,"color":5425},{"id":154058,"title":134552,"body":154059,"cover":16571,"coverAlt":155532,"date":16573,"description":155533,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":155534,"navigation":208,"path":155537,"schemaOrg":155538,"seo":155541,"series":7718,"seriesDescription":129940,"seriesOrder":160,"seriesTitle":129941,"slug":942,"stem":155542,"tags":155543,"__hash__":155549},"blog\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en.md",{"type":8,"value":154060,"toc":155520},[154061,154069,154075,154082,154085,154087,154090,154093,154109,154115,154125,154128,154157,154168,154173,154178,154180,154186,154188,154205,154213,154222,154224,154227,154233,154252,154262,154264,154272,154275,154283,154296,154302,154305,154389,154392,154399,154412,154418,154426,154429,154434,154438,154444,154447,154458,154461,154470,154472,154476,154479,154482,154485,154489,154496,154501,154505,154508,154590,154593,155026,155461,155473,155475,155518],[11,154062,154064,154065,1025,154067,6219],{"id":154063},"vue-lifecycle-update-phase-beforeupdate-updated","Vue Lifecycle: update phase (",[87,154066,15034],{},[87,154068,15037],{},[15,154070,154071,154072,154074],{},"Many components do not fail when they are created or mounted. They fail later, when state changes and the interface starts re-rendering several times. That is when incorrect measurements, duplicated effects, or hooks used as if they were a global ",[87,154073,1665],{}," begin to show up.",[15,154076,154077,154078,154081],{},"The update phase exists precisely to understand that moment: ",[3933,154079,154080],{},"when Vue still has not reflected the change in the DOM and when it already has",". If you handle that distinction well, you avoid confusing reactive code and components that become harder to maintain.",[15,154083,154084],{},"In real applications, many UI problems like broken scroll, incorrect measurements, or external library integrations that drift out of sync appear right at this point in the lifecycle.",[11,154086,57681],{"id":57680},[15,154088,154089],{},"Every time a reactive dependency used by the component changes, Vue schedules another render.",[15,154091,154092],{},"During that process, two hooks appear:",[33,154094,154095,154102],{},[36,154096,154097,151253,154099,1679],{},[87,154098,15034],{},[3933,154100,154101],{},"after state changed, but before Vue updates the DOM",[36,154103,154104,151253,154106,1679],{},[87,154105,15037],{},[3933,154107,154108],{},"after Vue has already applied the DOM changes",[15,154110,154111,154112,154114],{},"In the ",[3933,154113,3260],{},", the equivalents are:",[33,154116,154117,154121],{},[36,154118,154119],{},[87,154120,15089],{},[36,154122,154123],{},[87,154124,15094],{},[15,154126,154127],{},"The practical idea is fairly simple:",[33,154129,154130,154138,154145],{},[36,154131,143724,154132,1025,154135,154137],{},[3933,154133,154134],{},"see the previous DOM state before it changes",[87,154136,15034],{}," is the moment.",[36,154139,143724,154140,1025,154143,154137],{},[3933,154141,154142],{},"read or manipulate the already updated DOM",[87,154144,15037],{},[36,154146,154147,154148,103445,154151,154153,154154,154156],{},"If what you want is to ",[3933,154149,154150],{},"react to one specific value",[87,154152,1665],{}," or a ",[87,154155,1661],{}," will usually be clearer than either of these hooks.",[15,154158,154159,154160,154163,154164,154167],{},"It also helps to remember something important: ",[3933,154161,154162],{},"Vue batches reactive changes and DOM updates",". That means these hooks do not express ",[9295,154165,154166],{},"\"this variable changed\"",", but something broader:",[5367,154169,154170],{},[15,154171,154172],{},"\"The component is entering or leaving a full update cycle.\"",[15,154174,154175,154176,1679],{},"That is why they are not good substitutes for ",[87,154177,1665],{},[11,154179,57775],{"id":57774},[15,154181,154182,154183,1679],{},"The update phase fits well when your logic depends on the ",[3933,154184,154185],{},"transition between one render and the next",[15,154187,80740],{},[33,154189,154190,154193,154196,154199,154202],{},[36,154191,154192],{},"Comparing the visible DOM before and after an update.",[36,154194,154195],{},"Adjusting scroll or focus after a rendered list changed.",[36,154197,154198],{},"Refreshing an external library integration once the markup is already up to date.",[36,154200,154201],{},"Syncing dynamic layouts.",[36,154203,154204],{},"Debugging excessive re-renders or understanding why a view keeps refreshing.",[15,154206,154207,154209,154210,1679],{},[87,154208,15034],{}," is usually helpful when you want to ",[3933,154211,154212],{},"read or clean up something from the previous DOM before Vue replaces it",[15,154214,154215,154217,154218,154221],{},[87,154216,15037],{}," makes sense when you need to ",[3933,154219,154220],{},"confirm that the HTML already reflects the new state"," and only then measure, scroll, or sync a library.",[11,154223,57799],{"id":57798},[15,154225,154226],{},"Not every reactive change needs these hooks.",[15,154228,80766,154229,57920,154231,68578],{},[87,154230,15034],{},[87,154232,15037],{},[33,154234,154235,154238,154243,154246],{},[36,154236,154237],{},"You only want to react to one specific property.",[36,154239,96881,154240,154242],{},[87,154241,1661],{}," can solve the problem.",[36,154244,154245],{},"The logic does not depend on the DOM.",[36,154247,154248,154249,154251],{},"You are thinking about ",[87,154250,15037],{}," as a place to trigger more state changes without a clear condition.",[15,154253,154254,154255,154257,154258,154261],{},"In particular, ",[87,154256,15037],{}," can become dangerous if you mutate the same state that triggered the render. That is where ",[3933,154259,154260],{},"update loops"," and unnecessary renders begin.",[11,154263,57820],{"id":57819},[22,154265,70888,154267,154269,154270],{"id":154266},"using-updated-as-a-replacement-for-watch",[87,154268,15037],{}," as a replacement for ",[87,154271,1665],{},[15,154273,154274],{},"This is a very common mistake.",[15,154276,154277,128954,154279,154282],{},[87,154278,15037],{},[3933,154280,154281],{},"when the component has already re-rendered",", not when one specific variable changed with clear semantic intent.",[15,154284,154285,154286,1025,154288,1025,154290,154292,154293,154295],{},"If you need to react to ",[87,154287,15260],{},[87,154289,15263],{},[87,154291,15266],{},", or any other specific value, a ",[87,154294,1665],{}," communicates the goal better and avoids unnecessary work.",[22,154297,120821,154299,154301],{"id":154298},"mutating-state-inside-updated-without-control",[87,154300,15037],{}," without control",[15,154303,154304],{},"This is the classic path into a loop:",[154,154306,154308],{"className":156,"code":15283,"filename":15284,"highlights":154307,"language":162,"meta":163,"style":163},[243],[87,154309,154310,154326,154336,154340,154356,154360,154371,154377,154381],{"__ignoreMap":163},[167,154311,154312,154314,154316,154318,154320,154322,154324],{"class":169,"line":170},[167,154313,174],{"class":173},[167,154315,178],{"class":177},[167,154317,182],{"class":181},[167,154319,1050],{"class":181},[167,154321,267],{"class":173},[167,154323,1055],{"class":201},[167,154325,185],{"class":173},[167,154327,154328,154330,154332,154334],{"class":169,"line":188},[167,154329,192],{"class":191},[167,154331,15310],{"class":173},[167,154333,198],{"class":191},[167,154335,202],{"class":201},[167,154337,154338],{"class":169,"line":205},[167,154339,209],{"emptyLinePlaceholder":208},[167,154341,154342,154344,154346,154348,154350,154352,154354],{"class":169,"line":160},[167,154343,216],{"class":191},[167,154345,15325],{"class":219},[167,154347,223],{"class":191},[167,154349,226],{"class":181},[167,154351,229],{"class":173},[167,154353,1960],{"class":219},[167,154355,235],{"class":173},[167,154357,154358],{"class":169,"line":238},[167,154359,209],{"emptyLinePlaceholder":208},[167,154361,154363,154365,154367,154369],{"class":154362,"line":243},[169,213],[167,154364,15345],{"class":181},[167,154366,1493],{"class":173},[167,154368,639],{"class":191},[167,154370,1905],{"class":173},[167,154372,154373,154375],{"class":169,"line":261},[167,154374,15356],{"class":173},[167,154376,3126],{"class":191},[167,154378,154379],{"class":169,"line":273},[167,154380,403],{"class":173},[167,154382,154383,154385,154387],{"class":169,"line":279},[167,154384,282],{"class":173},[167,154386,178],{"class":177},[167,154388,185],{"class":173},[15,154390,154391],{},"Every update triggers another update.",[15,154393,154394,154395,154398],{},"If you need to correct state, do it with a ",[3933,154396,154397],{},"very clear condition"," or move that logic into:",[33,154400,154401,154405,154409],{},[36,154402,154403],{},[87,154404,1665],{},[36,154406,154407],{},[87,154408,1661],{},[36,154410,154411],{},"the action that originated the change",[22,154413,154415,154416],{"id":154414},"reading-the-new-dom-in-beforeupdate","Reading the new DOM in ",[87,154417,15034],{},[15,154419,114654,154420,154422,154423,1679],{},[87,154421,15034],{},", the visible DOM still represents the ",[3933,154424,154425],{},"previous render",[15,154427,154428],{},"If you measure there expecting the new size, the value will be stale.",[15,154430,62955,154431,154433],{},[87,154432,15037],{}," if you need the final rendered result.",[22,154435,154437],{"id":154436},"putting-heavy-logic-into-every-update","Putting heavy logic into every update",[15,154439,154440,154441,1679],{},"These hooks can fire ",[3933,154442,154443],{},"many times",[15,154445,154446],{},"If you put the following inside them:",[33,154448,154449,154452,154455],{},[36,154450,154451],{},"Expensive calculations",[36,154453,154454],{},"Heavy integrations",[36,154456,154457],{},"Repeated DOM queries",[15,154459,154460],{},"The component will degrade quickly.",[5367,154462,154463],{},[15,154464,154465,154466,154469],{},"If a task does not need to run on ",[3933,154467,154468],{},"every render",", it probably should not live here.",[11,154471,57926],{"id":57925},[22,154473,154475],{"id":154474},"keeping-scroll-pinned-to-the-end-in-a-chat","Keeping scroll pinned to the end in a chat",[15,154477,154478],{},"When a new message arrives, the array changes first and the DOM updates afterward.",[15,154480,154481],{},"If you scroll too early, the container's new height does not exist yet.",[15,154483,154484],{},"The solution is to wait for the moment when the DOM has already been updated.",[22,154486,154488],{"id":154487},"recalculating-a-visual-library-after-updating-a-list","Recalculating a visual library after updating a list",[15,154490,154491,154492,154495],{},"Some libraries such as diagrams, grids, tooltips, or layout libraries need ",[3933,154493,154494],{},"the markup to already be on screen"," before they can recalculate positions or sizes.",[15,154497,154498,154500],{},[87,154499,15037],{}," lets you run that synchronization right after render.",[22,154502,154504],{"id":154503},"detecting-repeated-renders-during-debugging","Detecting repeated renders during debugging",[15,154506,154507],{},"These hooks are also useful when you want to understand whether a component updates more often than expected.",[154,154509,154512],{"className":156,"code":154510,"filename":15284,"highlights":154511,"language":162,"meta":163,"style":163},"\u003Cscript>\nonBeforeUpdate(() => {\n  console.log('The component is about to update')\n})\n\nonUpdated(() => {\n  console.log('The component finished updating')\n})\n\u003C\u002Fscript>\n",[188,243],[87,154513,154514,154522,154533,154546,154550,154554,154565,154578,154582],{"__ignoreMap":163},[167,154515,154516,154518,154520],{"class":169,"line":170},[167,154517,174],{"class":173},[167,154519,178],{"class":177},[167,154521,185],{"class":173},[167,154523,154525,154527,154529,154531],{"class":154524,"line":188},[169,213],[167,154526,15509],{"class":181},[167,154528,1493],{"class":173},[167,154530,639],{"class":191},[167,154532,1905],{"class":173},[167,154534,154535,154537,154539,154541,154544],{"class":169,"line":205},[167,154536,2608],{"class":173},[167,154538,2611],{"class":181},[167,154540,229],{"class":173},[167,154542,154543],{"class":201},"'The component is about to update'",[167,154545,235],{"class":173},[167,154547,154548],{"class":169,"line":160},[167,154549,403],{"class":173},[167,154551,154552],{"class":169,"line":238},[167,154553,209],{"emptyLinePlaceholder":208},[167,154555,154557,154559,154561,154563],{"class":154556,"line":243},[169,213],[167,154558,15345],{"class":181},[167,154560,1493],{"class":173},[167,154562,639],{"class":191},[167,154564,1905],{"class":173},[167,154566,154567,154569,154571,154573,154576],{"class":169,"line":261},[167,154568,2608],{"class":173},[167,154570,2611],{"class":181},[167,154572,229],{"class":173},[167,154574,154575],{"class":201},"'The component finished updating'",[167,154577,235],{"class":173},[167,154579,154580],{"class":169,"line":273},[167,154581,403],{"class":173},[167,154583,154584,154586,154588],{"class":169,"line":279},[167,154585,282],{"class":173},[167,154587,178],{"class":177},[167,154589,185],{"class":173},[15,154591,154592],{},"This helps reveal reactive dependencies that are causing unnecessary renders.",[154,154594,154596],{"className":156,"code":154595,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup lang=\"ts\">\nimport { onBeforeUpdate, onUpdated, ref } from 'vue'\n\nconst messages = ref([\n  { id: 1, text: 'First message' },\n  { id: 2, text: 'Second message' }\n])\n\nconst listRef = ref\u003CHTMLOListElement | null>(null)\nconst previousHeight = ref(0)\n\nfunction addMessage() {\n  messages.value.push({\n    id: Date.now(),\n    text: `Message ${messages.value.length + 1}`\n  })\n}\n\nonBeforeUpdate(() => {\n  previousHeight.value = listRef.value?.scrollHeight ?? 0\n})\n\nonUpdated(() => {\n  if (!listRef.value) return\n\n  const nextHeight = listRef.value.scrollHeight\n\n  if (nextHeight > previousHeight.value) {\n    listRef.value.scrollTop = nextHeight\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"chat-panel\">\n    \u003Cbutton @click=\"addMessage\">\n      Add message\n    \u003C\u002Fbutton>\n\n    \u003Col\n      ref=\"listRef\"\n      class=\"messages\"\n    >\n      \u003Cli\n        v-for=\"message in messages\"\n        :key=\"message.id\"\n      >\n        {{ message.text }}\n      \u003C\u002Fli>\n    \u003C\u002Fol>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,154597,154598,154614,154624,154628,154640,154653,154666,154670,154674,154698,154714,154718,154726,154734,154742,154765,154769,154773,154777,154787,154799,154803,154807,154817,154829,154833,154843,154847,154857,154865,154869,154873,154881,154885,154893,154907,154921,154926,154934,154938,154944,154952,154960,154964,154970,154978,154986,154990,154994,155002,155010,155018],{"__ignoreMap":163},[167,154599,154600,154602,154604,154606,154608,154610,154612],{"class":169,"line":170},[167,154601,174],{"class":173},[167,154603,178],{"class":177},[167,154605,182],{"class":181},[167,154607,1050],{"class":181},[167,154609,267],{"class":173},[167,154611,1055],{"class":201},[167,154613,185],{"class":173},[167,154615,154616,154618,154620,154622],{"class":169,"line":188},[167,154617,192],{"class":191},[167,154619,15603],{"class":173},[167,154621,198],{"class":191},[167,154623,202],{"class":201},[167,154625,154626],{"class":169,"line":205},[167,154627,209],{"emptyLinePlaceholder":208},[167,154629,154630,154632,154634,154636,154638],{"class":169,"line":160},[167,154631,216],{"class":191},[167,154633,15618],{"class":219},[167,154635,223],{"class":191},[167,154637,226],{"class":181},[167,154639,1827],{"class":173},[167,154641,154642,154644,154646,154648,154651],{"class":169,"line":238},[167,154643,1832],{"class":173},[167,154645,1835],{"class":219},[167,154647,15633],{"class":173},[167,154649,154650],{"class":201},"'First message'",[167,154652,1856],{"class":173},[167,154654,154655,154657,154659,154661,154664],{"class":169,"line":243},[167,154656,1832],{"class":173},[167,154658,1853],{"class":219},[167,154660,15633],{"class":173},[167,154662,154663],{"class":201},"'Second message'",[167,154665,599],{"class":173},[167,154667,154668],{"class":169,"line":261},[167,154669,429],{"class":173},[167,154671,154672],{"class":169,"line":273},[167,154673,209],{"emptyLinePlaceholder":208},[167,154675,154676,154678,154680,154682,154684,154686,154688,154690,154692,154694,154696],{"class":169,"line":279},[167,154677,216],{"class":191},[167,154679,15666],{"class":219},[167,154681,223],{"class":191},[167,154683,226],{"class":181},[167,154685,174],{"class":173},[167,154687,15675],{"class":181},[167,154689,659],{"class":191},[167,154691,6567],{"class":219},[167,154693,6570],{"class":173},[167,154695,6573],{"class":219},[167,154697,235],{"class":173},[167,154699,154700,154702,154704,154706,154708,154710,154712],{"class":169,"line":289},[167,154701,216],{"class":191},[167,154703,15692],{"class":219},[167,154705,223],{"class":191},[167,154707,226],{"class":181},[167,154709,229],{"class":173},[167,154711,1960],{"class":219},[167,154713,235],{"class":173},[167,154715,154716],{"class":169,"line":294},[167,154717,209],{"emptyLinePlaceholder":208},[167,154719,154720,154722,154724],{"class":169,"line":304},[167,154721,246],{"class":191},[167,154723,15713],{"class":181},[167,154725,763],{"class":173},[167,154727,154728,154730,154732],{"class":169,"line":313},[167,154729,15720],{"class":173},[167,154731,15723],{"class":181},[167,154733,372],{"class":173},[167,154735,154736,154738,154740],{"class":169,"line":161},[167,154737,15730],{"class":173},[167,154739,15733],{"class":181},[167,154741,15736],{"class":173},[167,154743,154744,154746,154749,154751,154753,154755,154757,154759,154761,154763],{"class":169,"line":335},[167,154745,15741],{"class":173},[167,154747,154748],{"class":201},"`Message ${",[167,154750,15747],{"class":173},[167,154752,1679],{"class":201},[167,154754,2219],{"class":173},[167,154756,1679],{"class":201},[167,154758,15756],{"class":219},[167,154760,15759],{"class":191},[167,154762,15762],{"class":219},[167,154764,2232],{"class":201},[167,154766,154767],{"class":169,"line":341},[167,154768,8347],{"class":173},[167,154770,154771],{"class":169,"line":489},[167,154772,276],{"class":173},[167,154774,154775],{"class":169,"line":495},[167,154776,209],{"emptyLinePlaceholder":208},[167,154778,154779,154781,154783,154785],{"class":169,"line":501},[167,154780,15509],{"class":181},[167,154782,1493],{"class":173},[167,154784,639],{"class":191},[167,154786,1905],{"class":173},[167,154788,154789,154791,154793,154795,154797],{"class":169,"line":512},[167,154790,15791],{"class":173},[167,154792,267],{"class":191},[167,154794,15796],{"class":173},[167,154796,15799],{"class":191},[167,154798,15802],{"class":219},[167,154800,154801],{"class":169,"line":781},[167,154802,403],{"class":173},[167,154804,154805],{"class":169,"line":786},[167,154806,209],{"emptyLinePlaceholder":208},[167,154808,154809,154811,154813,154815],{"class":169,"line":2678},[167,154810,15345],{"class":181},[167,154812,1493],{"class":173},[167,154814,639],{"class":191},[167,154816,1905],{"class":173},[167,154818,154819,154821,154823,154825,154827],{"class":169,"line":2692},[167,154820,2544],{"class":191},[167,154822,2526],{"class":173},[167,154824,6641],{"class":191},[167,154826,15831],{"class":173},[167,154828,2556],{"class":191},[167,154830,154831],{"class":169,"line":3575},[167,154832,209],{"emptyLinePlaceholder":208},[167,154834,154835,154837,154839,154841],{"class":169,"line":5028},[167,154836,1443],{"class":191},[167,154838,15844],{"class":219},[167,154840,223],{"class":191},[167,154842,15849],{"class":173},[167,154844,154845],{"class":169,"line":5037},[167,154846,209],{"emptyLinePlaceholder":208},[167,154848,154849,154851,154853,154855],{"class":169,"line":5046},[167,154850,2544],{"class":191},[167,154852,15860],{"class":173},[167,154854,15863],{"class":191},[167,154856,15866],{"class":173},[167,154858,154859,154861,154863],{"class":169,"line":6756},[167,154860,15871],{"class":173},[167,154862,267],{"class":191},[167,154864,15876],{"class":173},[167,154866,154867],{"class":169,"line":6778},[167,154868,3492],{"class":173},[167,154870,154871],{"class":169,"line":6783},[167,154872,403],{"class":173},[167,154874,154875,154877,154879],{"class":169,"line":6788},[167,154876,282],{"class":173},[167,154878,178],{"class":177},[167,154880,185],{"class":173},[167,154882,154883],{"class":169,"line":6793},[167,154884,209],{"emptyLinePlaceholder":208},[167,154886,154887,154889,154891],{"class":169,"line":6809},[167,154888,174],{"class":173},[167,154890,299],{"class":177},[167,154892,185],{"class":173},[167,154894,154895,154897,154899,154901,154903,154905],{"class":169,"line":6824},[167,154896,307],{"class":173},[167,154898,10117],{"class":177},[167,154900,1245],{"class":181},[167,154902,267],{"class":173},[167,154904,15917],{"class":201},[167,154906,185],{"class":173},[167,154908,154909,154911,154913,154915,154917,154919],{"class":169,"line":6829},[167,154910,1257],{"class":173},[167,154912,507],{"class":177},[167,154914,1182],{"class":181},[167,154916,267],{"class":173},[167,154918,15932],{"class":201},[167,154920,185],{"class":173},[167,154922,154923],{"class":169,"line":6836},[167,154924,154925],{"class":173},"      Add message\n",[167,154927,154928,154930,154932],{"class":169,"line":6845},[167,154929,1292],{"class":173},[167,154931,507],{"class":177},[167,154933,185],{"class":173},[167,154935,154936],{"class":169,"line":6854},[167,154937,209],{"emptyLinePlaceholder":208},[167,154939,154940,154942],{"class":169,"line":6861},[167,154941,1257],{"class":173},[167,154943,15958],{"class":177},[167,154945,154946,154948,154950],{"class":169,"line":6879},[167,154947,15963],{"class":181},[167,154949,267],{"class":173},[167,154951,15968],{"class":201},[167,154953,154954,154956,154958],{"class":169,"line":6884},[167,154955,15973],{"class":181},[167,154957,267],{"class":173},[167,154959,15978],{"class":201},[167,154961,154962],{"class":169,"line":6889},[167,154963,3769],{"class":173},[167,154965,154966,154968],{"class":169,"line":6898},[167,154967,1268],{"class":173},[167,154969,12472],{"class":177},[167,154971,154972,154974,154976],{"class":169,"line":6903},[167,154973,12477],{"class":181},[167,154975,267],{"class":173},[167,154977,15997],{"class":201},[167,154979,154980,154982,154984],{"class":169,"line":6912},[167,154981,12487],{"class":181},[167,154983,267],{"class":173},[167,154985,16006],{"class":201},[167,154987,154988],{"class":169,"line":6928},[167,154989,10532],{"class":173},[167,154991,154992],{"class":169,"line":6949},[167,154993,16015],{"class":173},[167,154995,154996,154998,155000],{"class":169,"line":6954},[167,154997,10170],{"class":173},[167,154999,36],{"class":177},[167,155001,185],{"class":173},[167,155003,155004,155006,155008],{"class":169,"line":6975},[167,155005,1292],{"class":173},[167,155007,3035],{"class":177},[167,155009,185],{"class":173},[167,155011,155012,155014,155016],{"class":169,"line":6989},[167,155013,504],{"class":173},[167,155015,10117],{"class":177},[167,155017,185],{"class":173},[167,155019,155020,155022,155024],{"class":169,"line":7003},[167,155021,282],{"class":173},[167,155023,299],{"class":177},[167,155025,185],{"class":173},[154,155027,155029],{"className":156,"code":155028,"filename":12536,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      messages: [\n        { id: 1, text: 'First message' },\n        { id: 2, text: 'Second message' }\n      ],\n      previousHeight: 0\n    }\n  },\n\n  methods: {\n    addMessage() {\n      this.messages.push({\n        id: Date.now(),\n        text: `Message ${this.messages.length + 1}`\n      })\n    }\n  },\n\n  beforeUpdate() {\n    if (this.$refs.listRef instanceof HTMLOListElement) {\n      this.previousHeight = this.$refs.listRef.scrollHeight\n    }\n  },\n\n  updated() {\n    if (!(this.$refs.listRef instanceof HTMLOListElement)) {\n      return\n    }\n\n    const nextHeight = this.$refs.listRef.scrollHeight\n\n    if (nextHeight > this.previousHeight) {\n      this.$refs.listRef.scrollTop = nextHeight\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"chat-panel\">\n    \u003Cbutton @click=\"addMessage\">\n      Add message\n    \u003C\u002Fbutton>\n\n    \u003Col\n      ref=\"listRef\"\n      class=\"messages\"\n    >\n      \u003Cli\n        v-for=\"message in messages\"\n        :key=\"message.id\"\n      >\n        {{ message.text }}\n      \u003C\u002Fli>\n    \u003C\u002Fol>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[87,155030,155031,155039,155047,155053,155059,155063,155075,155087,155091,155097,155101,155105,155109,155113,155119,155129,155137,155159,155163,155167,155171,155175,155181,155197,155209,155213,155217,155221,155227,155247,155251,155255,155259,155271,155275,155287,155297,155301,155305,155309,155317,155321,155329,155343,155357,155361,155369,155373,155379,155387,155395,155399,155405,155413,155421,155425,155429,155437,155445,155453],{"__ignoreMap":163},[167,155032,155033,155035,155037],{"class":169,"line":170},[167,155034,174],{"class":173},[167,155036,178],{"class":177},[167,155038,185],{"class":173},[167,155040,155041,155043,155045],{"class":169,"line":188},[167,155042,608],{"class":191},[167,155044,3991],{"class":191},[167,155046,1905],{"class":173},[167,155048,155049,155051],{"class":169,"line":205},[167,155050,7176],{"class":181},[167,155052,763],{"class":173},[167,155054,155055,155057],{"class":169,"line":160},[167,155056,1937],{"class":191},[167,155058,1905],{"class":173},[167,155060,155061],{"class":169,"line":238},[167,155062,16085],{"class":173},[167,155064,155065,155067,155069,155071,155073],{"class":169,"line":243},[167,155066,8677],{"class":173},[167,155068,1835],{"class":219},[167,155070,15633],{"class":173},[167,155072,154650],{"class":201},[167,155074,1856],{"class":173},[167,155076,155077,155079,155081,155083,155085],{"class":169,"line":261},[167,155078,8677],{"class":173},[167,155080,1853],{"class":219},[167,155082,15633],{"class":173},[167,155084,154663],{"class":201},[167,155086,599],{"class":173},[167,155088,155089],{"class":169,"line":273},[167,155090,16114],{"class":173},[167,155092,155093,155095],{"class":169,"line":279},[167,155094,16119],{"class":173},[167,155096,10681],{"class":219},[167,155098,155099],{"class":169,"line":289},[167,155100,4049],{"class":173},[167,155102,155103],{"class":169,"line":294},[167,155104,398],{"class":173},[167,155106,155107],{"class":169,"line":304},[167,155108,209],{"emptyLinePlaceholder":208},[167,155110,155111],{"class":169,"line":313},[167,155112,4419],{"class":173},[167,155114,155115,155117],{"class":169,"line":161},[167,155116,16142],{"class":181},[167,155118,763],{"class":173},[167,155120,155121,155123,155125,155127],{"class":169,"line":335},[167,155122,741],{"class":219},[167,155124,16151],{"class":173},[167,155126,15723],{"class":181},[167,155128,372],{"class":173},[167,155130,155131,155133,155135],{"class":169,"line":341},[167,155132,16160],{"class":173},[167,155134,15733],{"class":181},[167,155136,15736],{"class":173},[167,155138,155139,155141,155143,155145,155147,155149,155151,155153,155155,155157],{"class":169,"line":489},[167,155140,16169],{"class":173},[167,155142,154748],{"class":201},[167,155144,4927],{"class":219},[167,155146,1679],{"class":201},[167,155148,15747],{"class":173},[167,155150,1679],{"class":201},[167,155152,15756],{"class":219},[167,155154,15759],{"class":191},[167,155156,15762],{"class":219},[167,155158,2232],{"class":201},[167,155160,155161],{"class":169,"line":495},[167,155162,8866],{"class":173},[167,155164,155165],{"class":169,"line":501},[167,155166,4049],{"class":173},[167,155168,155169],{"class":169,"line":512},[167,155170,398],{"class":173},[167,155172,155173],{"class":169,"line":781},[167,155174,209],{"emptyLinePlaceholder":208},[167,155176,155177,155179],{"class":169,"line":786},[167,155178,16208],{"class":181},[167,155180,763],{"class":173},[167,155182,155183,155185,155187,155189,155191,155193,155195],{"class":169,"line":2678},[167,155184,7419],{"class":191},[167,155186,2526],{"class":173},[167,155188,4927],{"class":219},[167,155190,16221],{"class":173},[167,155192,6762],{"class":191},[167,155194,16226],{"class":181},[167,155196,258],{"class":173},[167,155198,155199,155201,155203,155205,155207],{"class":169,"line":2692},[167,155200,741],{"class":219},[167,155202,16235],{"class":173},[167,155204,267],{"class":191},[167,155206,7351],{"class":219},[167,155208,16242],{"class":173},[167,155210,155211],{"class":169,"line":3575},[167,155212,4049],{"class":173},[167,155214,155215],{"class":169,"line":5028},[167,155216,398],{"class":173},[167,155218,155219],{"class":169,"line":5037},[167,155220,209],{"emptyLinePlaceholder":208},[167,155222,155223,155225],{"class":169,"line":5046},[167,155224,16259],{"class":181},[167,155226,763],{"class":173},[167,155228,155229,155231,155233,155235,155237,155239,155241,155243,155245],{"class":169,"line":6756},[167,155230,7419],{"class":191},[167,155232,2526],{"class":173},[167,155234,6641],{"class":191},[167,155236,229],{"class":173},[167,155238,4927],{"class":219},[167,155240,16221],{"class":173},[167,155242,6762],{"class":191},[167,155244,16226],{"class":181},[167,155246,16282],{"class":173},[167,155248,155249],{"class":169,"line":6778},[167,155250,14150],{"class":191},[167,155252,155253],{"class":169,"line":6783},[167,155254,4049],{"class":173},[167,155256,155257],{"class":169,"line":6788},[167,155258,209],{"emptyLinePlaceholder":208},[167,155260,155261,155263,155265,155267,155269],{"class":169,"line":6793},[167,155262,8266],{"class":191},[167,155264,15844],{"class":219},[167,155266,223],{"class":191},[167,155268,7351],{"class":219},[167,155270,16242],{"class":173},[167,155272,155273],{"class":169,"line":6809},[167,155274,209],{"emptyLinePlaceholder":208},[167,155276,155277,155279,155281,155283,155285],{"class":169,"line":6824},[167,155278,7419],{"class":191},[167,155280,15860],{"class":173},[167,155282,15863],{"class":191},[167,155284,7351],{"class":219},[167,155286,16323],{"class":173},[167,155288,155289,155291,155293,155295],{"class":169,"line":6829},[167,155290,741],{"class":219},[167,155292,16330],{"class":173},[167,155294,267],{"class":191},[167,155296,15876],{"class":173},[167,155298,155299],{"class":169,"line":6836},[167,155300,4049],{"class":173},[167,155302,155303],{"class":169,"line":6845},[167,155304,3492],{"class":173},[167,155306,155307],{"class":169,"line":6854},[167,155308,276],{"class":173},[167,155310,155311,155313,155315],{"class":169,"line":6861},[167,155312,282],{"class":173},[167,155314,178],{"class":177},[167,155316,185],{"class":173},[167,155318,155319],{"class":169,"line":6879},[167,155320,209],{"emptyLinePlaceholder":208},[167,155322,155323,155325,155327],{"class":169,"line":6884},[167,155324,174],{"class":173},[167,155326,299],{"class":177},[167,155328,185],{"class":173},[167,155330,155331,155333,155335,155337,155339,155341],{"class":169,"line":6889},[167,155332,307],{"class":173},[167,155334,10117],{"class":177},[167,155336,1245],{"class":181},[167,155338,267],{"class":173},[167,155340,15917],{"class":201},[167,155342,185],{"class":173},[167,155344,155345,155347,155349,155351,155353,155355],{"class":169,"line":6898},[167,155346,1257],{"class":173},[167,155348,507],{"class":177},[167,155350,1182],{"class":181},[167,155352,267],{"class":173},[167,155354,15932],{"class":201},[167,155356,185],{"class":173},[167,155358,155359],{"class":169,"line":6903},[167,155360,154925],{"class":173},[167,155362,155363,155365,155367],{"class":169,"line":6912},[167,155364,1292],{"class":173},[167,155366,507],{"class":177},[167,155368,185],{"class":173},[167,155370,155371],{"class":169,"line":6928},[167,155372,209],{"emptyLinePlaceholder":208},[167,155374,155375,155377],{"class":169,"line":6949},[167,155376,1257],{"class":173},[167,155378,15958],{"class":177},[167,155380,155381,155383,155385],{"class":169,"line":6954},[167,155382,15963],{"class":181},[167,155384,267],{"class":173},[167,155386,15968],{"class":201},[167,155388,155389,155391,155393],{"class":169,"line":6975},[167,155390,15973],{"class":181},[167,155392,267],{"class":173},[167,155394,15978],{"class":201},[167,155396,155397],{"class":169,"line":6989},[167,155398,3769],{"class":173},[167,155400,155401,155403],{"class":169,"line":7003},[167,155402,1268],{"class":173},[167,155404,12472],{"class":177},[167,155406,155407,155409,155411],{"class":169,"line":7017},[167,155408,12477],{"class":181},[167,155410,267],{"class":173},[167,155412,15997],{"class":201},[167,155414,155415,155417,155419],{"class":169,"line":7026},[167,155416,12487],{"class":181},[167,155418,267],{"class":173},[167,155420,16006],{"class":201},[167,155422,155423],{"class":169,"line":7031},[167,155424,10532],{"class":173},[167,155426,155427],{"class":169,"line":7048},[167,155428,16015],{"class":173},[167,155430,155431,155433,155435],{"class":169,"line":7057},[167,155432,10170],{"class":173},[167,155434,36],{"class":177},[167,155436,185],{"class":173},[167,155438,155439,155441,155443],{"class":169,"line":7555},[167,155440,1292],{"class":173},[167,155442,3035],{"class":177},[167,155444,185],{"class":173},[167,155446,155447,155449,155451],{"class":169,"line":7560},[167,155448,504],{"class":173},[167,155450,10117],{"class":177},[167,155452,185],{"class":173},[167,155454,155455,155457,155459],{"class":169,"line":7579},[167,155456,282],{"class":173},[167,155458,299],{"class":177},[167,155460,185],{"class":173},[33,155462,155463,155468],{},[36,155464,155465,155467],{},[87,155466,15089],{}," stores the previous render height.",[36,155469,155470,155472],{},[87,155471,15094],{}," decides whether it should adjust scroll once the new message already exists in the DOM.",[11,155474,60191],{"id":60190},[33,155476,155477,155485,155494,155502,155509],{},[36,155478,155479,155481,155482,1679],{},[87,155480,15034],{}," lets you observe ",[3933,155483,155484],{},"the exact moment right before the DOM patch",[36,155486,155487,155489,155490,155493],{},[87,155488,15037],{}," is useful when ",[3933,155491,155492],{},"the interface already reflects the new state"," and you need to act on that result.",[36,155495,155496,155497,1679],{},"If the problem revolves around one specific piece of data, ",[3933,155498,155499,155501],{},[87,155500,1665],{}," is usually more expressive",[36,155503,155504,155505,155508],{},"These hooks describe ",[3933,155506,155507],{},"the component update cycle",", not the change of one specific variable.",[36,155510,155511,155512],{},"The most important rule is this: ",[3933,155513,155514,155515,155517],{},"do not turn ",[87,155516,15037],{}," into a state-mutation machine after every render.",[924,155519,16558],{},{"title":163,"searchDepth":188,"depth":188,"links":155521},[155522,155524,155526,155528,155529,155530,155531],{"id":154266,"depth":188,"text":155523},"Using updated as a replacement for watch",{"id":154298,"depth":188,"text":155525},"Mutating state inside updated without control",{"id":154414,"depth":188,"text":155527},"Reading the new DOM in beforeUpdate",{"id":154436,"depth":188,"text":154437},{"id":154474,"depth":188,"text":154475},{"id":154487,"depth":188,"text":154488},{"id":154503,"depth":188,"text":154504},"Illustration of the Vue lifecycle update phase with beforeUpdate and updated","What happens when Vue re-renders a component and how to use beforeUpdate and updated without treating them as stand-ins for watch or computed.",{"updatedAt":16576,"coverCaption":155535,"author":946,"keywords":155536},"The update phase happens when a reactive change forces Vue to render the component again.",[3258,15034,15037,15345,73983],"\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en",[155539],{"headline":134552,"author":155540,"datePublished":16576,"@type":961},{"name":946,"@type":959},{"title":134552,"description":155533},"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.en",[155544,155545,155546,155547,155548],{"tag":129945,"color":7725},{"tag":98745,"color":1639},{"tag":69637,"color":9170},{"tag":60269,"color":3270},{"tag":65670,"color":5425},"ExkRJ70KcrcvSaTYorHh4tOF8RHMUZ3btA0BS7quCk4",{"id":15024,"title":15025,"body":155551,"cover":16571,"coverAlt":16572,"date":16573,"description":16574,"draft":940,"extension":941,"lab":942,"locale":943,"meta":156897,"navigation":208,"path":16580,"schemaOrg":156899,"seo":156902,"series":7718,"seriesDescription":7719,"seriesOrder":160,"seriesTitle":7720,"slug":942,"stem":16585,"tags":156903,"__hash__":16592},{"type":8,"value":155552,"toc":156888},[155553,155559,155563,155567,155569,155571,155573,155575,155589,155593,155603,155605,155627,155633,155637,155641,155643,155647,155649,155661,155667,155673,155675,155677,155683,155697,155703,155705,155711,155713,155719,155729,155733,155735,155819,155821,155825,155837,155841,155847,155849,155853,155855,155859,155861,155869,155871,155877,155879,155881,155883,155885,155887,155889,155893,155897,155899,155901,155980,155982,156410,156844,156854,156856,156886],[11,155554,15031,155555,1025,155557,6219],{"id":15030},[87,155556,15034],{},[87,155558,15037],{},[15,155560,15040,155561,15043],{},[87,155562,1665],{},[15,155564,15046,155565,15050],{},[3933,155566,15049],{},[15,155568,15053],{},[11,155570,6257],{"id":6256},[15,155572,15058],{},[15,155574,15061],{},[33,155576,155577,155583],{},[36,155578,155579,13510,155581,1679],{},[87,155580,15034],{},[3933,155582,15070],{},[36,155584,155585,13510,155587,1679],{},[87,155586,15037],{},[3933,155588,15077],{},[15,155590,6304,155591,15082],{},[3933,155592,3260],{},[33,155594,155595,155599],{},[36,155596,155597],{},[87,155598,15089],{},[36,155600,155601],{},[87,155602,15094],{},[15,155604,15097],{},[33,155606,155607,155613,155619],{},[36,155608,13600,155609,1025,155611,15107],{},[3933,155610,15104],{},[87,155612,15034],{},[36,155614,13600,155615,1025,155617,15107],{},[3933,155616,15112],{},[87,155618,15037],{},[36,155620,15117,155621,15121,155623,15124,155625,15127],{},[3933,155622,15120],{},[87,155624,1665],{},[87,155626,1661],{},[15,155628,15130,155629,15134,155631,15138],{},[3933,155630,15133],{},[9295,155632,15137],{},[5367,155634,155635],{},[15,155636,15143],{},[15,155638,15146,155639,1679],{},[87,155640,1665],{},[11,155642,6322],{"id":6321},[15,155644,15153,155645,1679],{},[3933,155646,15156],{},[15,155648,9308],{},[33,155650,155651,155653,155655,155657,155659],{},[36,155652,15163],{},[36,155654,15166],{},[36,155656,15169],{},[36,155658,15172],{},[36,155660,15175],{},[15,155662,155663,15180,155665,1679],{},[87,155664,15034],{},[3933,155666,15183],{},[15,155668,155669,15188,155671,15192],{},[87,155670,15037],{},[3933,155672,15191],{},[11,155674,6349],{"id":6348},[15,155676,15197],{},[15,155678,13622,155679,1028,155681,13627],{},[87,155680,15034],{},[87,155682,15037],{},[33,155684,155685,155687,155691,155693],{},[36,155686,15208],{},[36,155688,15211,155689,1679],{},[87,155690,1661],{},[36,155692,15216],{},[36,155694,15219,155695,15222],{},[87,155696,15037],{},[15,155698,15225,155699,15228,155701,15232],{},[87,155700,15037],{},[3933,155702,15231],{},[11,155704,3085],{"id":3084},[22,155706,3180,155707,15240,155709],{"id":15237},[87,155708,15037],{},[87,155710,1665],{},[15,155712,15245],{},[15,155714,155715,15250,155717,15254],{},[87,155716,15037],{},[3933,155718,15253],{},[15,155720,15257,155721,1025,155723,1025,155725,15267,155727,15270],{},[87,155722,15260],{},[87,155724,15263],{},[87,155726,15266],{},[87,155728,1665],{},[22,155730,15274,155731,15277],{"id":15273},[87,155732,15037],{},[15,155734,15280],{},[154,155736,155738],{"className":156,"code":15283,"filename":15284,"highlights":155737,"language":162,"meta":163,"style":163},[243],[87,155739,155740,155756,155766,155770,155786,155790,155801,155807,155811],{"__ignoreMap":163},[167,155741,155742,155744,155746,155748,155750,155752,155754],{"class":169,"line":170},[167,155743,174],{"class":173},[167,155745,178],{"class":177},[167,155747,182],{"class":181},[167,155749,1050],{"class":181},[167,155751,267],{"class":173},[167,155753,1055],{"class":201},[167,155755,185],{"class":173},[167,155757,155758,155760,155762,155764],{"class":169,"line":188},[167,155759,192],{"class":191},[167,155761,15310],{"class":173},[167,155763,198],{"class":191},[167,155765,202],{"class":201},[167,155767,155768],{"class":169,"line":205},[167,155769,209],{"emptyLinePlaceholder":208},[167,155771,155772,155774,155776,155778,155780,155782,155784],{"class":169,"line":160},[167,155773,216],{"class":191},[167,155775,15325],{"class":219},[167,155777,223],{"class":191},[167,155779,226],{"class":181},[167,155781,229],{"class":173},[167,155783,1960],{"class":219},[167,155785,235],{"class":173},[167,155787,155788],{"class":169,"line":238},[167,155789,209],{"emptyLinePlaceholder":208},[167,155791,155793,155795,155797,155799],{"class":155792,"line":243},[169,213],[167,155794,15345],{"class":181},[167,155796,1493],{"class":173},[167,155798,639],{"class":191},[167,155800,1905],{"class":173},[167,155802,155803,155805],{"class":169,"line":261},[167,155804,15356],{"class":173},[167,155806,3126],{"class":191},[167,155808,155809],{"class":169,"line":273},[167,155810,403],{"class":173},[167,155812,155813,155815,155817],{"class":169,"line":279},[167,155814,282],{"class":173},[167,155816,178],{"class":177},[167,155818,185],{"class":173},[15,155820,15373],{},[15,155822,15376,155823,15380],{},[3933,155824,15379],{},[33,155826,155827,155831,155835],{},[36,155828,155829],{},[87,155830,1665],{},[36,155832,155833],{},[87,155834,1661],{},[36,155836,15393],{},[22,155838,15397,155839],{"id":15396},[87,155840,15034],{},[15,155842,6304,155843,15404,155845,1679],{},[87,155844,15034],{},[3933,155846,15407],{},[15,155848,15410],{},[15,155850,15413,155851,1679],{},[87,155852,15037],{},[22,155854,15419],{"id":15418},[15,155856,15422,155857,1679],{},[3933,155858,15425],{},[15,155860,15428],{},[33,155862,155863,155865,155867],{},[36,155864,15433],{},[36,155866,15436],{},[36,155868,15439],{},[15,155870,15442],{},[5367,155872,155873],{},[15,155874,15447,155875,15451],{},[3933,155876,15450],{},[11,155878,7997],{"id":7996},[22,155880,15457],{"id":15456},[15,155882,15460],{},[15,155884,15463],{},[15,155886,15466],{},[22,155888,15470],{"id":15469},[15,155890,15473,155891,15477],{},[3933,155892,15476],{},[15,155894,155895,15482],{},[87,155896,15037],{},[22,155898,15486],{"id":15485},[15,155900,15489],{},[154,155902,155904],{"className":156,"code":15492,"filename":15284,"highlights":155903,"language":162,"meta":163,"style":163},[188,243],[87,155905,155906,155914,155925,155937,155941,155945,155956,155968,155972],{"__ignoreMap":163},[167,155907,155908,155910,155912],{"class":169,"line":170},[167,155909,174],{"class":173},[167,155911,178],{"class":177},[167,155913,185],{"class":173},[167,155915,155917,155919,155921,155923],{"class":155916,"line":188},[169,213],[167,155918,15509],{"class":181},[167,155920,1493],{"class":173},[167,155922,639],{"class":191},[167,155924,1905],{"class":173},[167,155926,155927,155929,155931,155933,155935],{"class":169,"line":205},[167,155928,2608],{"class":173},[167,155930,2611],{"class":181},[167,155932,229],{"class":173},[167,155934,15526],{"class":201},[167,155936,235],{"class":173},[167,155938,155939],{"class":169,"line":160},[167,155940,403],{"class":173},[167,155942,155943],{"class":169,"line":238},[167,155944,209],{"emptyLinePlaceholder":208},[167,155946,155948,155950,155952,155954],{"class":155947,"line":243},[169,213],[167,155949,15345],{"class":181},[167,155951,1493],{"class":173},[167,155953,639],{"class":191},[167,155955,1905],{"class":173},[167,155957,155958,155960,155962,155964,155966],{"class":169,"line":261},[167,155959,2608],{"class":173},[167,155961,2611],{"class":181},[167,155963,229],{"class":173},[167,155965,15558],{"class":201},[167,155967,235],{"class":173},[167,155969,155970],{"class":169,"line":273},[167,155971,403],{"class":173},[167,155973,155974,155976,155978],{"class":169,"line":279},[167,155975,282],{"class":173},[167,155977,178],{"class":177},[167,155979,185],{"class":173},[15,155981,15575],{},[154,155983,155984],{"className":156,"code":15578,"filename":3260,"language":162,"meta":163,"style":163},[87,155985,155986,156002,156012,156016,156028,156040,156052,156056,156060,156084,156100,156104,156112,156120,156128,156150,156154,156158,156162,156172,156184,156188,156192,156202,156214,156218,156228,156232,156242,156250,156254,156258,156266,156270,156278,156292,156306,156310,156318,156322,156328,156336,156344,156348,156354,156362,156370,156374,156378,156386,156394,156402],{"__ignoreMap":163},[167,155987,155988,155990,155992,155994,155996,155998,156000],{"class":169,"line":170},[167,155989,174],{"class":173},[167,155991,178],{"class":177},[167,155993,182],{"class":181},[167,155995,1050],{"class":181},[167,155997,267],{"class":173},[167,155999,1055],{"class":201},[167,156001,185],{"class":173},[167,156003,156004,156006,156008,156010],{"class":169,"line":188},[167,156005,192],{"class":191},[167,156007,15603],{"class":173},[167,156009,198],{"class":191},[167,156011,202],{"class":201},[167,156013,156014],{"class":169,"line":205},[167,156015,209],{"emptyLinePlaceholder":208},[167,156017,156018,156020,156022,156024,156026],{"class":169,"line":160},[167,156019,216],{"class":191},[167,156021,15618],{"class":219},[167,156023,223],{"class":191},[167,156025,226],{"class":181},[167,156027,1827],{"class":173},[167,156029,156030,156032,156034,156036,156038],{"class":169,"line":238},[167,156031,1832],{"class":173},[167,156033,1835],{"class":219},[167,156035,15633],{"class":173},[167,156037,15636],{"class":201},[167,156039,1856],{"class":173},[167,156041,156042,156044,156046,156048,156050],{"class":169,"line":243},[167,156043,1832],{"class":173},[167,156045,1853],{"class":219},[167,156047,15633],{"class":173},[167,156049,15649],{"class":201},[167,156051,599],{"class":173},[167,156053,156054],{"class":169,"line":261},[167,156055,429],{"class":173},[167,156057,156058],{"class":169,"line":273},[167,156059,209],{"emptyLinePlaceholder":208},[167,156061,156062,156064,156066,156068,156070,156072,156074,156076,156078,156080,156082],{"class":169,"line":279},[167,156063,216],{"class":191},[167,156065,15666],{"class":219},[167,156067,223],{"class":191},[167,156069,226],{"class":181},[167,156071,174],{"class":173},[167,156073,15675],{"class":181},[167,156075,659],{"class":191},[167,156077,6567],{"class":219},[167,156079,6570],{"class":173},[167,156081,6573],{"class":219},[167,156083,235],{"class":173},[167,156085,156086,156088,156090,156092,156094,156096,156098],{"class":169,"line":289},[167,156087,216],{"class":191},[167,156089,15692],{"class":219},[167,156091,223],{"class":191},[167,156093,226],{"class":181},[167,156095,229],{"class":173},[167,156097,1960],{"class":219},[167,156099,235],{"class":173},[167,156101,156102],{"class":169,"line":294},[167,156103,209],{"emptyLinePlaceholder":208},[167,156105,156106,156108,156110],{"class":169,"line":304},[167,156107,246],{"class":191},[167,156109,15713],{"class":181},[167,156111,763],{"class":173},[167,156113,156114,156116,156118],{"class":169,"line":313},[167,156115,15720],{"class":173},[167,156117,15723],{"class":181},[167,156119,372],{"class":173},[167,156121,156122,156124,156126],{"class":169,"line":161},[167,156123,15730],{"class":173},[167,156125,15733],{"class":181},[167,156127,15736],{"class":173},[167,156129,156130,156132,156134,156136,156138,156140,156142,156144,156146,156148],{"class":169,"line":335},[167,156131,15741],{"class":173},[167,156133,15744],{"class":201},[167,156135,15747],{"class":173},[167,156137,1679],{"class":201},[167,156139,2219],{"class":173},[167,156141,1679],{"class":201},[167,156143,15756],{"class":219},[167,156145,15759],{"class":191},[167,156147,15762],{"class":219},[167,156149,2232],{"class":201},[167,156151,156152],{"class":169,"line":341},[167,156153,8347],{"class":173},[167,156155,156156],{"class":169,"line":489},[167,156157,276],{"class":173},[167,156159,156160],{"class":169,"line":495},[167,156161,209],{"emptyLinePlaceholder":208},[167,156163,156164,156166,156168,156170],{"class":169,"line":501},[167,156165,15509],{"class":181},[167,156167,1493],{"class":173},[167,156169,639],{"class":191},[167,156171,1905],{"class":173},[167,156173,156174,156176,156178,156180,156182],{"class":169,"line":512},[167,156175,15791],{"class":173},[167,156177,267],{"class":191},[167,156179,15796],{"class":173},[167,156181,15799],{"class":191},[167,156183,15802],{"class":219},[167,156185,156186],{"class":169,"line":781},[167,156187,403],{"class":173},[167,156189,156190],{"class":169,"line":786},[167,156191,209],{"emptyLinePlaceholder":208},[167,156193,156194,156196,156198,156200],{"class":169,"line":2678},[167,156195,15345],{"class":181},[167,156197,1493],{"class":173},[167,156199,639],{"class":191},[167,156201,1905],{"class":173},[167,156203,156204,156206,156208,156210,156212],{"class":169,"line":2692},[167,156205,2544],{"class":191},[167,156207,2526],{"class":173},[167,156209,6641],{"class":191},[167,156211,15831],{"class":173},[167,156213,2556],{"class":191},[167,156215,156216],{"class":169,"line":3575},[167,156217,209],{"emptyLinePlaceholder":208},[167,156219,156220,156222,156224,156226],{"class":169,"line":5028},[167,156221,1443],{"class":191},[167,156223,15844],{"class":219},[167,156225,223],{"class":191},[167,156227,15849],{"class":173},[167,156229,156230],{"class":169,"line":5037},[167,156231,209],{"emptyLinePlaceholder":208},[167,156233,156234,156236,156238,156240],{"class":169,"line":5046},[167,156235,2544],{"class":191},[167,156237,15860],{"class":173},[167,156239,15863],{"class":191},[167,156241,15866],{"class":173},[167,156243,156244,156246,156248],{"class":169,"line":6756},[167,156245,15871],{"class":173},[167,156247,267],{"class":191},[167,156249,15876],{"class":173},[167,156251,156252],{"class":169,"line":6778},[167,156253,3492],{"class":173},[167,156255,156256],{"class":169,"line":6783},[167,156257,403],{"class":173},[167,156259,156260,156262,156264],{"class":169,"line":6788},[167,156261,282],{"class":173},[167,156263,178],{"class":177},[167,156265,185],{"class":173},[167,156267,156268],{"class":169,"line":6793},[167,156269,209],{"emptyLinePlaceholder":208},[167,156271,156272,156274,156276],{"class":169,"line":6809},[167,156273,174],{"class":173},[167,156275,299],{"class":177},[167,156277,185],{"class":173},[167,156279,156280,156282,156284,156286,156288,156290],{"class":169,"line":6824},[167,156281,307],{"class":173},[167,156283,10117],{"class":177},[167,156285,1245],{"class":181},[167,156287,267],{"class":173},[167,156289,15917],{"class":201},[167,156291,185],{"class":173},[167,156293,156294,156296,156298,156300,156302,156304],{"class":169,"line":6829},[167,156295,1257],{"class":173},[167,156297,507],{"class":177},[167,156299,1182],{"class":181},[167,156301,267],{"class":173},[167,156303,15932],{"class":201},[167,156305,185],{"class":173},[167,156307,156308],{"class":169,"line":6836},[167,156309,15939],{"class":173},[167,156311,156312,156314,156316],{"class":169,"line":6845},[167,156313,1292],{"class":173},[167,156315,507],{"class":177},[167,156317,185],{"class":173},[167,156319,156320],{"class":169,"line":6854},[167,156321,209],{"emptyLinePlaceholder":208},[167,156323,156324,156326],{"class":169,"line":6861},[167,156325,1257],{"class":173},[167,156327,15958],{"class":177},[167,156329,156330,156332,156334],{"class":169,"line":6879},[167,156331,15963],{"class":181},[167,156333,267],{"class":173},[167,156335,15968],{"class":201},[167,156337,156338,156340,156342],{"class":169,"line":6884},[167,156339,15973],{"class":181},[167,156341,267],{"class":173},[167,156343,15978],{"class":201},[167,156345,156346],{"class":169,"line":6889},[167,156347,3769],{"class":173},[167,156349,156350,156352],{"class":169,"line":6898},[167,156351,1268],{"class":173},[167,156353,12472],{"class":177},[167,156355,156356,156358,156360],{"class":169,"line":6903},[167,156357,12477],{"class":181},[167,156359,267],{"class":173},[167,156361,15997],{"class":201},[167,156363,156364,156366,156368],{"class":169,"line":6912},[167,156365,12487],{"class":181},[167,156367,267],{"class":173},[167,156369,16006],{"class":201},[167,156371,156372],{"class":169,"line":6928},[167,156373,10532],{"class":173},[167,156375,156376],{"class":169,"line":6949},[167,156377,16015],{"class":173},[167,156379,156380,156382,156384],{"class":169,"line":6954},[167,156381,10170],{"class":173},[167,156383,36],{"class":177},[167,156385,185],{"class":173},[167,156387,156388,156390,156392],{"class":169,"line":6975},[167,156389,1292],{"class":173},[167,156391,3035],{"class":177},[167,156393,185],{"class":173},[167,156395,156396,156398,156400],{"class":169,"line":6989},[167,156397,504],{"class":173},[167,156399,10117],{"class":177},[167,156401,185],{"class":173},[167,156403,156404,156406,156408],{"class":169,"line":7003},[167,156405,282],{"class":173},[167,156407,299],{"class":177},[167,156409,185],{"class":173},[154,156411,156412],{"className":156,"code":16050,"filename":12536,"language":162,"meta":163,"style":163},[87,156413,156414,156422,156430,156436,156442,156446,156458,156470,156474,156480,156484,156488,156492,156496,156502,156512,156520,156542,156546,156550,156554,156558,156564,156580,156592,156596,156600,156604,156610,156630,156634,156638,156642,156654,156658,156670,156680,156684,156688,156692,156700,156704,156712,156726,156740,156744,156752,156756,156762,156770,156778,156782,156788,156796,156804,156808,156812,156820,156828,156836],{"__ignoreMap":163},[167,156415,156416,156418,156420],{"class":169,"line":170},[167,156417,174],{"class":173},[167,156419,178],{"class":177},[167,156421,185],{"class":173},[167,156423,156424,156426,156428],{"class":169,"line":188},[167,156425,608],{"class":191},[167,156427,3991],{"class":191},[167,156429,1905],{"class":173},[167,156431,156432,156434],{"class":169,"line":205},[167,156433,7176],{"class":181},[167,156435,763],{"class":173},[167,156437,156438,156440],{"class":169,"line":160},[167,156439,1937],{"class":191},[167,156441,1905],{"class":173},[167,156443,156444],{"class":169,"line":238},[167,156445,16085],{"class":173},[167,156447,156448,156450,156452,156454,156456],{"class":169,"line":243},[167,156449,8677],{"class":173},[167,156451,1835],{"class":219},[167,156453,15633],{"class":173},[167,156455,15636],{"class":201},[167,156457,1856],{"class":173},[167,156459,156460,156462,156464,156466,156468],{"class":169,"line":261},[167,156461,8677],{"class":173},[167,156463,1853],{"class":219},[167,156465,15633],{"class":173},[167,156467,15649],{"class":201},[167,156469,599],{"class":173},[167,156471,156472],{"class":169,"line":273},[167,156473,16114],{"class":173},[167,156475,156476,156478],{"class":169,"line":279},[167,156477,16119],{"class":173},[167,156479,10681],{"class":219},[167,156481,156482],{"class":169,"line":289},[167,156483,4049],{"class":173},[167,156485,156486],{"class":169,"line":294},[167,156487,398],{"class":173},[167,156489,156490],{"class":169,"line":304},[167,156491,209],{"emptyLinePlaceholder":208},[167,156493,156494],{"class":169,"line":313},[167,156495,4419],{"class":173},[167,156497,156498,156500],{"class":169,"line":161},[167,156499,16142],{"class":181},[167,156501,763],{"class":173},[167,156503,156504,156506,156508,156510],{"class":169,"line":335},[167,156505,741],{"class":219},[167,156507,16151],{"class":173},[167,156509,15723],{"class":181},[167,156511,372],{"class":173},[167,156513,156514,156516,156518],{"class":169,"line":341},[167,156515,16160],{"class":173},[167,156517,15733],{"class":181},[167,156519,15736],{"class":173},[167,156521,156522,156524,156526,156528,156530,156532,156534,156536,156538,156540],{"class":169,"line":489},[167,156523,16169],{"class":173},[167,156525,15744],{"class":201},[167,156527,4927],{"class":219},[167,156529,1679],{"class":201},[167,156531,15747],{"class":173},[167,156533,1679],{"class":201},[167,156535,15756],{"class":219},[167,156537,15759],{"class":191},[167,156539,15762],{"class":219},[167,156541,2232],{"class":201},[167,156543,156544],{"class":169,"line":495},[167,156545,8866],{"class":173},[167,156547,156548],{"class":169,"line":501},[167,156549,4049],{"class":173},[167,156551,156552],{"class":169,"line":512},[167,156553,398],{"class":173},[167,156555,156556],{"class":169,"line":781},[167,156557,209],{"emptyLinePlaceholder":208},[167,156559,156560,156562],{"class":169,"line":786},[167,156561,16208],{"class":181},[167,156563,763],{"class":173},[167,156565,156566,156568,156570,156572,156574,156576,156578],{"class":169,"line":2678},[167,156567,7419],{"class":191},[167,156569,2526],{"class":173},[167,156571,4927],{"class":219},[167,156573,16221],{"class":173},[167,156575,6762],{"class":191},[167,156577,16226],{"class":181},[167,156579,258],{"class":173},[167,156581,156582,156584,156586,156588,156590],{"class":169,"line":2692},[167,156583,741],{"class":219},[167,156585,16235],{"class":173},[167,156587,267],{"class":191},[167,156589,7351],{"class":219},[167,156591,16242],{"class":173},[167,156593,156594],{"class":169,"line":3575},[167,156595,4049],{"class":173},[167,156597,156598],{"class":169,"line":5028},[167,156599,398],{"class":173},[167,156601,156602],{"class":169,"line":5037},[167,156603,209],{"emptyLinePlaceholder":208},[167,156605,156606,156608],{"class":169,"line":5046},[167,156607,16259],{"class":181},[167,156609,763],{"class":173},[167,156611,156612,156614,156616,156618,156620,156622,156624,156626,156628],{"class":169,"line":6756},[167,156613,7419],{"class":191},[167,156615,2526],{"class":173},[167,156617,6641],{"class":191},[167,156619,229],{"class":173},[167,156621,4927],{"class":219},[167,156623,16221],{"class":173},[167,156625,6762],{"class":191},[167,156627,16226],{"class":181},[167,156629,16282],{"class":173},[167,156631,156632],{"class":169,"line":6778},[167,156633,14150],{"class":191},[167,156635,156636],{"class":169,"line":6783},[167,156637,4049],{"class":173},[167,156639,156640],{"class":169,"line":6788},[167,156641,209],{"emptyLinePlaceholder":208},[167,156643,156644,156646,156648,156650,156652],{"class":169,"line":6793},[167,156645,8266],{"class":191},[167,156647,15844],{"class":219},[167,156649,223],{"class":191},[167,156651,7351],{"class":219},[167,156653,16242],{"class":173},[167,156655,156656],{"class":169,"line":6809},[167,156657,209],{"emptyLinePlaceholder":208},[167,156659,156660,156662,156664,156666,156668],{"class":169,"line":6824},[167,156661,7419],{"class":191},[167,156663,15860],{"class":173},[167,156665,15863],{"class":191},[167,156667,7351],{"class":219},[167,156669,16323],{"class":173},[167,156671,156672,156674,156676,156678],{"class":169,"line":6829},[167,156673,741],{"class":219},[167,156675,16330],{"class":173},[167,156677,267],{"class":191},[167,156679,15876],{"class":173},[167,156681,156682],{"class":169,"line":6836},[167,156683,4049],{"class":173},[167,156685,156686],{"class":169,"line":6845},[167,156687,3492],{"class":173},[167,156689,156690],{"class":169,"line":6854},[167,156691,276],{"class":173},[167,156693,156694,156696,156698],{"class":169,"line":6861},[167,156695,282],{"class":173},[167,156697,178],{"class":177},[167,156699,185],{"class":173},[167,156701,156702],{"class":169,"line":6879},[167,156703,209],{"emptyLinePlaceholder":208},[167,156705,156706,156708,156710],{"class":169,"line":6884},[167,156707,174],{"class":173},[167,156709,299],{"class":177},[167,156711,185],{"class":173},[167,156713,156714,156716,156718,156720,156722,156724],{"class":169,"line":6889},[167,156715,307],{"class":173},[167,156717,10117],{"class":177},[167,156719,1245],{"class":181},[167,156721,267],{"class":173},[167,156723,15917],{"class":201},[167,156725,185],{"class":173},[167,156727,156728,156730,156732,156734,156736,156738],{"class":169,"line":6898},[167,156729,1257],{"class":173},[167,156731,507],{"class":177},[167,156733,1182],{"class":181},[167,156735,267],{"class":173},[167,156737,15932],{"class":201},[167,156739,185],{"class":173},[167,156741,156742],{"class":169,"line":6903},[167,156743,15939],{"class":173},[167,156745,156746,156748,156750],{"class":169,"line":6912},[167,156747,1292],{"class":173},[167,156749,507],{"class":177},[167,156751,185],{"class":173},[167,156753,156754],{"class":169,"line":6928},[167,156755,209],{"emptyLinePlaceholder":208},[167,156757,156758,156760],{"class":169,"line":6949},[167,156759,1257],{"class":173},[167,156761,15958],{"class":177},[167,156763,156764,156766,156768],{"class":169,"line":6954},[167,156765,15963],{"class":181},[167,156767,267],{"class":173},[167,156769,15968],{"class":201},[167,156771,156772,156774,156776],{"class":169,"line":6975},[167,156773,15973],{"class":181},[167,156775,267],{"class":173},[167,156777,15978],{"class":201},[167,156779,156780],{"class":169,"line":6989},[167,156781,3769],{"class":173},[167,156783,156784,156786],{"class":169,"line":7003},[167,156785,1268],{"class":173},[167,156787,12472],{"class":177},[167,156789,156790,156792,156794],{"class":169,"line":7017},[167,156791,12477],{"class":181},[167,156793,267],{"class":173},[167,156795,15997],{"class":201},[167,156797,156798,156800,156802],{"class":169,"line":7026},[167,156799,12487],{"class":181},[167,156801,267],{"class":173},[167,156803,16006],{"class":201},[167,156805,156806],{"class":169,"line":7031},[167,156807,10532],{"class":173},[167,156809,156810],{"class":169,"line":7048},[167,156811,16015],{"class":173},[167,156813,156814,156816,156818],{"class":169,"line":7057},[167,156815,10170],{"class":173},[167,156817,36],{"class":177},[167,156819,185],{"class":173},[167,156821,156822,156824,156826],{"class":169,"line":7555},[167,156823,1292],{"class":173},[167,156825,3035],{"class":177},[167,156827,185],{"class":173},[167,156829,156830,156832,156834],{"class":169,"line":7560},[167,156831,504],{"class":173},[167,156833,10117],{"class":177},[167,156835,185],{"class":173},[167,156837,156838,156840,156842],{"class":169,"line":7579},[167,156839,282],{"class":173},[167,156841,299],{"class":177},[167,156843,185],{"class":173},[33,156845,156846,156850],{},[36,156847,156848,16505],{},[87,156849,15089],{},[36,156851,156852,16510],{},[87,156853,15094],{},[11,156855,7678],{"id":7677},[33,156857,156858,156864,156870,156876,156880],{},[36,156859,156860,16519,156862,1679],{},[87,156861,15034],{},[3933,156863,16522],{},[36,156865,156866,16527,156868,16531],{},[87,156867,15037],{},[3933,156869,16530],{},[36,156871,16534,156872,1679],{},[3933,156873,156874,16539],{},[87,156875,1665],{},[36,156877,16542,156878,16546],{},[3933,156879,16545],{},[36,156881,16549,156882],{},[3933,156883,16552,156884,16555],{},[87,156885,15037],{},[924,156887,16558],{},{"title":163,"searchDepth":188,"depth":188,"links":156889},[156890,156891,156892,156893,156894,156895,156896],{"id":15237,"depth":188,"text":16562},{"id":15273,"depth":188,"text":16564},{"id":15396,"depth":188,"text":16566},{"id":15418,"depth":188,"text":15419},{"id":15456,"depth":188,"text":15457},{"id":15469,"depth":188,"text":15470},{"id":15485,"depth":188,"text":15486},{"updatedAt":16576,"coverCaption":16577,"author":946,"keywords":156898},[3258,15034,15037,15345,16579],[156900],{"headline":15025,"author":156901,"datePublished":16576,"@type":961},{"name":946,"@type":959},{"title":15025,"description":16574},[156904,156905,156906,156907,156908],{"tag":7724,"color":7725},{"tag":1625,"color":1639},{"tag":9169,"color":9170},{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"id":156910,"title":156911,"body":156912,"cover":54060,"coverAlt":156911,"date":54061,"description":158775,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":158776,"navigation":208,"path":158779,"schemaOrg":158780,"seo":158783,"series":963,"seriesDescription":104126,"seriesOrder":160,"seriesTitle":104127,"slug":942,"stem":158784,"tags":158785,"__hash__":158793},"blog\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.en.md","Provide and Inject in Vue 3: The Definitive Guide to Eliminating Prop Drilling",{"type":8,"value":156913,"toc":158760},[156914,156918,156924,156931,156935,156961,156968,156971,156983,156987,156990,156996,157114,157193,157199,157293,157370,157374,157387,157406,157417,157434,157440,157445,157575,157765,157770,157904,158129,158133,158139,158177,158181,158184,158195,158201,158354,158360,158555,158559,158570,158579,158583,158592,158612,158615,158619,158692,158696,158716,158718,158728,158755,158758],[11,156915,156917],{"id":156916},"provide-and-inject-how-to-avoid-prop-drilling-in-vuejs","Provide and Inject: How to Avoid Prop Drilling in Vue.js",[15,156919,156920,156921,156923],{},"Imagine that in your project you have a \"Grandparent\" component that needs to send data to a \"Grandchild\" component. Traditionally, you would have to pass that data through the \"Parent\" component, even though the latter doesn't use it at all. This phenomenon is known as ",[3933,156922,52153],{},", and it's one of the main causes of code becoming complex and difficult to maintain.",[15,156925,156926,57920,156928,156930],{},[87,156927,52159],{},[87,156929,52163],{}," allow an ancestor component to expose data so that any descendant can \"catch\" it directly, without needing to manually pass it through each level of the hierarchy.",[22,156932,156934],{"id":156933},"common-problems-with-prop-drilling","Common Problems with Prop Drilling",[3035,156936,156937,156946,156952],{},[36,156938,156939,156942,156943,156945],{},[3933,156940,156941],{},"Costly Maintenance:"," If you decide to rename a ",[87,156944,52179],{}," or modify its structure, you must update each intermediate component, even if they don't consume the data.",[36,156947,156948,156951],{},[3933,156949,156950],{},"Fragility:"," By depending on multiple levels of nesting, it's easier to break the data chain due to an error in an intermediate component.",[36,156953,156954,156957,156958,156960],{},[3933,156955,156956],{},"Low Reusability:"," Intermediate components lose versatility, as they are forced to receive and transmit ",[87,156959,3300],{}," that don't belong to their internal logic.",[22,156962,156964,156965],{"id":156963},"the-native-solution-provide-and-inject","The Native Solution: ",[3933,156966,156967],{},"Provide and Inject",[15,156969,156970],{},"Vue offers us an integrated solution without the need to resort to external state management libraries (like Pinia):",[33,156972,156973,156978],{},[36,156974,156975,156977],{},[3933,156976,52212],{}," The ancestor component defines and \"provides\" the data to the component tree.",[36,156979,156980,156982],{},[3933,156981,52218],{}," Any descendant component, regardless of its depth, \"injects\" and consumes that data.",[22,156984,156986],{"id":156985},"implementation-in-vue-3-composition-api-and-options-api","Implementation in Vue 3 (Composition API and Options API)",[15,156988,156989],{},"To implement this communication, we follow a key-value structure.",[29777,156991,156993],{"id":156992},"provider-component-grandparent",[3933,156994,156995],{},"Provider Component (Grandparent):",[154,156997,157000],{"className":156,"code":156998,"filename":3260,"highlights":156999,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, provide } from 'vue'\nimport Child from '.\u002FChild.vue'\n\nconst appName = ref('TODOvue')\n\n\u002F\u002F Provide the data using a unique \"key\"\nprovide('app-name-key', appName)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChild \u002F>\n\u003C\u002Ftemplate>\n",[188,273],[87,157001,157002,157012,157023,157035,157039,157056,157060,157065,157077,157085,157089,157097,157106],{"__ignoreMap":163},[167,157003,157004,157006,157008,157010],{"class":169,"line":170},[167,157005,174],{"class":173},[167,157007,178],{"class":177},[167,157009,182],{"class":181},[167,157011,185],{"class":173},[167,157013,157015,157017,157019,157021],{"class":157014,"line":188},[169,213],[167,157016,192],{"class":191},[167,157018,52256],{"class":173},[167,157020,198],{"class":191},[167,157022,202],{"class":201},[167,157024,157025,157027,157030,157032],{"class":169,"line":205},[167,157026,192],{"class":191},[167,157028,157029],{"class":173}," Child ",[167,157031,198],{"class":191},[167,157033,157034],{"class":201}," '.\u002FChild.vue'\n",[167,157036,157037],{"class":169,"line":160},[167,157038,209],{"emptyLinePlaceholder":208},[167,157040,157041,157043,157046,157048,157050,157052,157054],{"class":169,"line":238},[167,157042,216],{"class":191},[167,157044,157045],{"class":219}," appName",[167,157047,223],{"class":191},[167,157049,226],{"class":181},[167,157051,229],{"class":173},[167,157053,52292],{"class":201},[167,157055,235],{"class":173},[167,157057,157058],{"class":169,"line":243},[167,157059,209],{"emptyLinePlaceholder":208},[167,157061,157062],{"class":169,"line":261},[167,157063,157064],{"class":18662},"\u002F\u002F Provide the data using a unique \"key\"\n",[167,157066,157068,157070,157072,157074],{"class":157067,"line":273},[169,213],[167,157069,52309],{"class":181},[167,157071,229],{"class":173},[167,157073,52314],{"class":201},[167,157075,157076],{"class":173},", appName)\n",[167,157078,157079,157081,157083],{"class":169,"line":279},[167,157080,282],{"class":173},[167,157082,178],{"class":177},[167,157084,185],{"class":173},[167,157086,157087],{"class":169,"line":289},[167,157088,209],{"emptyLinePlaceholder":208},[167,157090,157091,157093,157095],{"class":169,"line":294},[167,157092,174],{"class":173},[167,157094,299],{"class":177},[167,157096,185],{"class":173},[167,157098,157099,157101,157104],{"class":169,"line":304},[167,157100,307],{"class":173},[167,157102,157103],{"class":177},"Child",[167,157105,5325],{"class":173},[167,157107,157108,157110,157112],{"class":169,"line":313},[167,157109,282],{"class":173},[167,157111,299],{"class":177},[167,157113,185],{"class":173},[154,157115,157118],{"className":156,"code":157116,"filename":3973,"highlights":157117,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\nprovide: {\n  appName : 'TODOvue'\n}\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CChild \u002F>\n\u003C\u002Ftemplate>\n",[205],[87,157119,157120,157128,157136,157142,157149,157153,157157,157165,157169,157177,157185],{"__ignoreMap":163},[167,157121,157122,157124,157126],{"class":169,"line":170},[167,157123,174],{"class":173},[167,157125,178],{"class":177},[167,157127,185],{"class":173},[167,157129,157130,157132,157134],{"class":169,"line":188},[167,157131,608],{"class":191},[167,157133,3991],{"class":191},[167,157135,1905],{"class":173},[167,157137,157139],{"class":157138,"line":205},[169,213],[167,157140,157141],{"class":173},"provide: {\n",[167,157143,157144,157147],{"class":169,"line":160},[167,157145,157146],{"class":173},"  appName : ",[167,157148,52390],{"class":201},[167,157150,157151],{"class":169,"line":238},[167,157152,276],{"class":173},[167,157154,157155],{"class":169,"line":243},[167,157156,276],{"class":173},[167,157158,157159,157161,157163],{"class":169,"line":261},[167,157160,282],{"class":173},[167,157162,178],{"class":177},[167,157164,185],{"class":173},[167,157166,157167],{"class":169,"line":273},[167,157168,209],{"emptyLinePlaceholder":208},[167,157170,157171,157173,157175],{"class":169,"line":279},[167,157172,174],{"class":173},[167,157174,299],{"class":177},[167,157176,185],{"class":173},[167,157178,157179,157181,157183],{"class":169,"line":289},[167,157180,307],{"class":173},[167,157182,157103],{"class":177},[167,157184,5325],{"class":173},[167,157186,157187,157189,157191],{"class":169,"line":294},[167,157188,282],{"class":173},[167,157190,299],{"class":177},[167,157192,185],{"class":173},[29777,157194,157196],{"id":157195},"consumer-component-grandchild",[3933,157197,157198],{},"Consumer Component (Grandchild):",[154,157200,157203],{"className":156,"code":157201,"filename":3260,"highlights":157202,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\n\u002F\u002F \"Catch\" the data using the same key defined in the ancestor\nconst appName = inject('app-name-key')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ appName }}\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n",[188,238],[87,157204,157205,157215,157226,157230,157235,157252,157260,157264,157272,157285],{"__ignoreMap":163},[167,157206,157207,157209,157211,157213],{"class":169,"line":170},[167,157208,174],{"class":173},[167,157210,178],{"class":177},[167,157212,182],{"class":181},[167,157214,185],{"class":173},[167,157216,157218,157220,157222,157224],{"class":157217,"line":188},[169,213],[167,157219,192],{"class":191},[167,157221,52464],{"class":173},[167,157223,198],{"class":191},[167,157225,202],{"class":201},[167,157227,157228],{"class":169,"line":205},[167,157229,209],{"emptyLinePlaceholder":208},[167,157231,157232],{"class":169,"line":160},[167,157233,157234],{"class":18662},"\u002F\u002F \"Catch\" the data using the same key defined in the ancestor\n",[167,157236,157238,157240,157242,157244,157246,157248,157250],{"class":157237,"line":238},[169,213],[167,157239,216],{"class":191},[167,157241,157045],{"class":219},[167,157243,223],{"class":191},[167,157245,52489],{"class":181},[167,157247,229],{"class":173},[167,157249,52314],{"class":201},[167,157251,235],{"class":173},[167,157253,157254,157256,157258],{"class":169,"line":243},[167,157255,282],{"class":173},[167,157257,178],{"class":177},[167,157259,185],{"class":173},[167,157261,157262],{"class":169,"line":261},[167,157263,209],{"emptyLinePlaceholder":208},[167,157265,157266,157268,157270],{"class":169,"line":273},[167,157267,174],{"class":173},[167,157269,299],{"class":177},[167,157271,185],{"class":173},[167,157273,157274,157276,157278,157281,157283],{"class":169,"line":279},[167,157275,307],{"class":173},[167,157277,11],{"class":177},[167,157279,157280],{"class":173},">{{ appName }}\u003C\u002F",[167,157282,11],{"class":177},[167,157284,185],{"class":173},[167,157286,157287,157289,157291],{"class":169,"line":289},[167,157288,282],{"class":173},[167,157290,299],{"class":177},[167,157292,185],{"class":173},[154,157294,157297],{"className":156,"code":157295,"filename":3973,"highlights":157296,"language":162,"meta":163,"style":163},"\u003Cscript>\n  export default {\n    inject: ['appName'],\n  }\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch1>{{ appName }}\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n",[205],[87,157298,157299,157307,157315,157326,157330,157338,157342,157350,157362],{"__ignoreMap":163},[167,157300,157301,157303,157305],{"class":169,"line":170},[167,157302,174],{"class":173},[167,157304,178],{"class":177},[167,157306,185],{"class":173},[167,157308,157309,157311,157313],{"class":169,"line":188},[167,157310,51585],{"class":191},[167,157312,3991],{"class":191},[167,157314,1905],{"class":173},[167,157316,157318,157321,157324],{"class":157317,"line":205},[169,213],[167,157319,157320],{"class":173},"    inject: [",[167,157322,157323],{"class":201},"'appName'",[167,157325,4414],{"class":173},[167,157327,157328],{"class":169,"line":160},[167,157329,3492],{"class":173},[167,157331,157332,157334,157336],{"class":169,"line":238},[167,157333,282],{"class":173},[167,157335,178],{"class":177},[167,157337,185],{"class":173},[167,157339,157340],{"class":169,"line":243},[167,157341,209],{"emptyLinePlaceholder":208},[167,157343,157344,157346,157348],{"class":169,"line":261},[167,157345,174],{"class":173},[167,157347,299],{"class":177},[167,157349,185],{"class":173},[167,157351,157352,157354,157356,157358,157360],{"class":169,"line":273},[167,157353,307],{"class":173},[167,157355,11],{"class":177},[167,157357,157280],{"class":173},[167,157359,11],{"class":177},[167,157361,185],{"class":173},[167,157363,157364,157366,157368],{"class":169,"line":279},[167,157365,282],{"class":173},[167,157367,299],{"class":177},[167,157369,185],{"class":173},[22,157371,157373],{"id":157372},"the-challenge-of-reactivity-and-safety","The Challenge of Reactivity and Safety",[15,157375,157376,157377,154153,157379,157381,157382,157386],{},"For changes in the data to flow correctly, we must pass a ",[87,157378,2085],{},[87,157380,18243],{},". If you want to dive deeper into how reactivity works in Vue 3, you can check out our post ",[19092,157383,157385],{"href":157384},"\u002Fblog\u002Fvue-reactivity-explained\u002F","What is Reactivity? The magic behind Vue.js explained clearly",". However, this introduces a risk: a child component could attempt to modify the value directly.",[154,157388,157390],{"className":51866,"code":157389,"filename":52634,"language":51870,"meta":163,"style":163},"\u002F\u002F Danger! Modifying state from a child makes debugging difficult\nlanguage.value = 'en'\n",[87,157391,157392,157397],{"__ignoreMap":163},[167,157393,157394],{"class":169,"line":170},[167,157395,157396],{"class":18662},"\u002F\u002F Danger! Modifying state from a child makes debugging difficult\n",[167,157398,157399,157402,157404],{"class":169,"line":188},[167,157400,157401],{"class":173},"language.value ",[167,157403,267],{"class":191},[167,157405,52651],{"class":201},[15,157407,157408,157409,157412,157413,157416],{},"If any component can alter the injected state, we lose track of ",[3933,157410,157411],{},"who, when, and why"," the data changed. To solve this, we apply the ",[3933,157414,157415],{},"Read-Only Injection"," pattern:",[3035,157418,157419,157428],{},[36,157420,157421,157424,157425,157427],{},[3933,157422,157423],{},"The data:"," It's protected with ",[87,157426,52672],{}," to avoid accidental modifications.",[36,157429,157430,157433],{},[3933,157431,157432],{},"The function:"," A specific function is provided to make the change, centralizing the logic in the ancestor.",[22,157435,157437,157438],{"id":157436},"example-of-correct-usage-with-readonly","Example of Correct Usage with ",[87,157439,52686],{},[29777,157441,157443],{"id":157442},"provider-component-grandparent-1",[3933,157444,156995],{},[154,157446,157449],{"className":156,"code":157447,"filename":3260,"highlights":157448,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, provide, readonly } from 'vue'\n\nconst language = ref('en')\nconst changeLanguage = (newLang) => {\n  language.value = newLang\n}\n\nprovide('config-language', {\n  language: readonly(language), \u002F\u002F We protect the state\n  changeLanguage                \u002F\u002F We expose the modification pathway\n})\n\u003C\u002Fscript>\n",[289],[87,157450,157451,157461,157471,157475,157492,157512,157522,157526,157530,157541,157555,157563,157567],{"__ignoreMap":163},[167,157452,157453,157455,157457,157459],{"class":169,"line":170},[167,157454,174],{"class":173},[167,157456,178],{"class":177},[167,157458,182],{"class":181},[167,157460,185],{"class":173},[167,157462,157463,157465,157467,157469],{"class":169,"line":188},[167,157464,192],{"class":191},[167,157466,52714],{"class":173},[167,157468,198],{"class":191},[167,157470,202],{"class":201},[167,157472,157473],{"class":169,"line":205},[167,157474,209],{"emptyLinePlaceholder":208},[167,157476,157477,157479,157482,157484,157486,157488,157490],{"class":169,"line":160},[167,157478,216],{"class":191},[167,157480,157481],{"class":219}," language",[167,157483,223],{"class":191},[167,157485,226],{"class":181},[167,157487,229],{"class":173},[167,157489,53291],{"class":201},[167,157491,235],{"class":173},[167,157493,157494,157496,157499,157501,157503,157506,157508,157510],{"class":169,"line":238},[167,157495,216],{"class":191},[167,157497,157498],{"class":181}," changeLanguage",[167,157500,223],{"class":191},[167,157502,2526],{"class":173},[167,157504,157505],{"class":254},"newLang",[167,157507,693],{"class":173},[167,157509,639],{"class":191},[167,157511,1905],{"class":173},[167,157513,157514,157517,157519],{"class":169,"line":243},[167,157515,157516],{"class":173},"  language.value ",[167,157518,267],{"class":191},[167,157520,157521],{"class":173}," newLang\n",[167,157523,157524],{"class":169,"line":261},[167,157525,276],{"class":173},[167,157527,157528],{"class":169,"line":273},[167,157529,209],{"emptyLinePlaceholder":208},[167,157531,157532,157534,157536,157539],{"class":169,"line":279},[167,157533,52309],{"class":181},[167,157535,229],{"class":173},[167,157537,157538],{"class":201},"'config-language'",[167,157540,627],{"class":173},[167,157542,157544,157547,157549,157552],{"class":157543,"line":289},[169,213],[167,157545,157546],{"class":173},"  language: ",[167,157548,52686],{"class":181},[167,157550,157551],{"class":173},"(language), ",[167,157553,157554],{"class":18662},"\u002F\u002F We protect the state\n",[167,157556,157557,157560],{"class":169,"line":294},[167,157558,157559],{"class":173},"  changeLanguage                ",[167,157561,157562],{"class":18662},"\u002F\u002F We expose the modification pathway\n",[167,157564,157565],{"class":169,"line":304},[167,157566,403],{"class":173},[167,157568,157569,157571,157573],{"class":169,"line":313},[167,157570,282],{"class":173},[167,157572,178],{"class":177},[167,157574,185],{"class":173},[154,157576,157579],{"className":156,"code":157577,"filename":3973,"highlights":157578,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport { computed } from 'vue'\n\nexport default {\ndata() {\n  return {\n    language: 'en'\n  }\n},\nmethods: {\n  changeLanguage(newLang) {\n    this.language = newLang\n  }\n},\nprovide() {\n  return {\n    \u002F\u002F IMPORTANT: In Options API, 'provide' is evaluated only once.\n    \u002F\u002F To maintain reactivity, we wrap the value with computed()\n    \u002F\u002F which creates a getter function that Vue reevaluates automatically\n    'config-language': {\n      \u002F\u002F We use computed so the child sees changes to this.language\n      language: computed(() => this.language),\n      changeLanguage: this.changeLanguage\n    }\n  }\n}\n}\n\u003C\u002Fscript>\n",[2678],[87,157580,157581,157589,157599,157603,157611,157617,157623,157631,157635,157640,157645,157656,157667,157671,157675,157681,157687,157692,157697,157702,157709,157714,157730,157741,157745,157749,157753,157757],{"__ignoreMap":163},[167,157582,157583,157585,157587],{"class":169,"line":170},[167,157584,174],{"class":173},[167,157586,178],{"class":177},[167,157588,185],{"class":173},[167,157590,157591,157593,157595,157597],{"class":169,"line":188},[167,157592,192],{"class":191},[167,157594,52843],{"class":173},[167,157596,198],{"class":191},[167,157598,202],{"class":201},[167,157600,157601],{"class":169,"line":205},[167,157602,209],{"emptyLinePlaceholder":208},[167,157604,157605,157607,157609],{"class":169,"line":160},[167,157606,608],{"class":191},[167,157608,3991],{"class":191},[167,157610,1905],{"class":173},[167,157612,157613,157615],{"class":169,"line":238},[167,157614,17983],{"class":181},[167,157616,763],{"class":173},[167,157618,157619,157621],{"class":169,"line":243},[167,157620,1539],{"class":191},[167,157622,1905],{"class":173},[167,157624,157625,157628],{"class":169,"line":261},[167,157626,157627],{"class":173},"    language: ",[167,157629,157630],{"class":201},"'en'\n",[167,157632,157633],{"class":169,"line":273},[167,157634,3492],{"class":173},[167,157636,157637],{"class":169,"line":279},[167,157638,157639],{"class":173},"},\n",[167,157641,157642],{"class":169,"line":289},[167,157643,157644],{"class":173},"methods: {\n",[167,157646,157647,157650,157652,157654],{"class":169,"line":294},[167,157648,157649],{"class":181},"  changeLanguage",[167,157651,229],{"class":173},[167,157653,157505],{"class":254},[167,157655,258],{"class":173},[167,157657,157658,157660,157663,157665],{"class":169,"line":304},[167,157659,879],{"class":219},[167,157661,157662],{"class":173},".language ",[167,157664,267],{"class":191},[167,157666,157521],{"class":173},[167,157668,157669],{"class":169,"line":313},[167,157670,3492],{"class":173},[167,157672,157673],{"class":169,"line":161},[167,157674,157639],{"class":173},[167,157676,157677,157679],{"class":169,"line":335},[167,157678,52309],{"class":181},[167,157680,763],{"class":173},[167,157682,157683,157685],{"class":169,"line":341},[167,157684,1539],{"class":191},[167,157686,1905],{"class":173},[167,157688,157689],{"class":169,"line":489},[167,157690,157691],{"class":18662},"    \u002F\u002F IMPORTANT: In Options API, 'provide' is evaluated only once.\n",[167,157693,157694],{"class":169,"line":495},[167,157695,157696],{"class":18662},"    \u002F\u002F To maintain reactivity, we wrap the value with computed()\n",[167,157698,157699],{"class":169,"line":501},[167,157700,157701],{"class":18662},"    \u002F\u002F which creates a getter function that Vue reevaluates automatically\n",[167,157703,157704,157707],{"class":169,"line":512},[167,157705,157706],{"class":201},"    'config-language'",[167,157708,52957],{"class":173},[167,157710,157711],{"class":169,"line":781},[167,157712,157713],{"class":18662},"      \u002F\u002F We use computed so the child sees changes to this.language\n",[167,157715,157716,157719,157721,157723,157725,157727],{"class":169,"line":786},[167,157717,157718],{"class":173},"      language: ",[167,157720,1661],{"class":181},[167,157722,1493],{"class":173},[167,157724,639],{"class":191},[167,157726,7351],{"class":219},[167,157728,157729],{"class":173},".language),\n",[167,157731,157733,157736,157738],{"class":157732,"line":2678},[169,213],[167,157734,157735],{"class":173},"      changeLanguage: ",[167,157737,4927],{"class":219},[167,157739,157740],{"class":173},".changeLanguage\n",[167,157742,157743],{"class":169,"line":2692},[167,157744,4049],{"class":173},[167,157746,157747],{"class":169,"line":3575},[167,157748,3492],{"class":173},[167,157750,157751],{"class":169,"line":5028},[167,157752,276],{"class":173},[167,157754,157755],{"class":169,"line":5037},[167,157756,276],{"class":173},[167,157758,157759,157761,157763],{"class":169,"line":5046},[167,157760,282],{"class":173},[167,157762,178],{"class":177},[167,157764,185],{"class":173},[29777,157766,157768],{"id":157767},"consumer-component-grandchild-1",[3933,157769,157198],{},[154,157771,157774],{"className":156,"code":157772,"filename":3260,"highlights":157773,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst { language, changeLanguage } = inject('config-language')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Current language: {{ language }}\u003C\u002Fp>\n    \u003Cbutton @click=\"changeLanguage('es')\">Change to Spanish\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[160],[87,157775,157776,157786,157796,157800,157827,157835,157839,157847,157855,157868,157888,157896],{"__ignoreMap":163},[167,157777,157778,157780,157782,157784],{"class":169,"line":170},[167,157779,174],{"class":173},[167,157781,178],{"class":177},[167,157783,182],{"class":181},[167,157785,185],{"class":173},[167,157787,157788,157790,157792,157794],{"class":169,"line":188},[167,157789,192],{"class":191},[167,157791,52464],{"class":173},[167,157793,198],{"class":191},[167,157795,202],{"class":201},[167,157797,157798],{"class":169,"line":205},[167,157799,209],{"emptyLinePlaceholder":208},[167,157801,157803,157805,157807,157810,157812,157815,157817,157819,157821,157823,157825],{"class":157802,"line":160},[169,213],[167,157804,216],{"class":191},[167,157806,577],{"class":173},[167,157808,157809],{"class":219},"language",[167,157811,1025],{"class":173},[167,157813,157814],{"class":219},"changeLanguage",[167,157816,23409],{"class":173},[167,157818,267],{"class":191},[167,157820,52489],{"class":181},[167,157822,229],{"class":173},[167,157824,157538],{"class":201},[167,157826,235],{"class":173},[167,157828,157829,157831,157833],{"class":169,"line":238},[167,157830,282],{"class":173},[167,157832,178],{"class":177},[167,157834,185],{"class":173},[167,157836,157837],{"class":169,"line":243},[167,157838,209],{"emptyLinePlaceholder":208},[167,157840,157841,157843,157845],{"class":169,"line":261},[167,157842,174],{"class":173},[167,157844,299],{"class":177},[167,157846,185],{"class":173},[167,157848,157849,157851,157853],{"class":169,"line":273},[167,157850,307],{"class":173},[167,157852,1242],{"class":177},[167,157854,185],{"class":173},[167,157856,157857,157859,157861,157864,157866],{"class":169,"line":279},[167,157858,1257],{"class":173},[167,157860,15],{"class":177},[167,157862,157863],{"class":173},">Current language: {{ language }}\u003C\u002F",[167,157865,15],{"class":177},[167,157867,185],{"class":173},[167,157869,157870,157872,157874,157876,157878,157881,157884,157886],{"class":169,"line":289},[167,157871,1257],{"class":173},[167,157873,507],{"class":177},[167,157875,1182],{"class":181},[167,157877,267],{"class":173},[167,157879,157880],{"class":201},"\"changeLanguage('es')\"",[167,157882,157883],{"class":173},">Change to Spanish\u003C\u002F",[167,157885,507],{"class":177},[167,157887,185],{"class":173},[167,157889,157890,157892,157894],{"class":169,"line":294},[167,157891,504],{"class":173},[167,157893,1242],{"class":177},[167,157895,185],{"class":173},[167,157897,157898,157900,157902],{"class":169,"line":304},[167,157899,282],{"class":173},[167,157901,299],{"class":177},[167,157903,185],{"class":173},[154,157905,157908],{"className":156,"code":157906,"filename":3973,"highlights":157907,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  inject: {\n    configLanguage: {\n      from: 'config-language',\n      default: () => ({\n        language: { value: 'en' },\n        changeLanguage: () => {}\n      })\n    }\n  },\n  computed: {\n    currentLanguage() {\n      return this.configLanguage.language.value\n    }\n  },\n  methods: {\n    changeToSpanish() {\n      this.configLanguage.changeLanguage('es')\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Current language: {{ currentLanguage }}\u003C\u002Fp>\n    \u003Cbutton @click=\"changeToSpanish\">Change to Spanish\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[261,161],[87,157909,157910,157918,157926,157930,157935,157943,157953,157963,157974,157978,157982,157986,157990,157997,158007,158011,158015,158019,158026,158041,158045,158049,158053,158061,158065,158073,158081,158094,158113,158121],{"__ignoreMap":163},[167,157911,157912,157914,157916],{"class":169,"line":170},[167,157913,174],{"class":173},[167,157915,178],{"class":177},[167,157917,185],{"class":173},[167,157919,157920,157922,157924],{"class":169,"line":188},[167,157921,608],{"class":191},[167,157923,3991],{"class":191},[167,157925,1905],{"class":173},[167,157927,157928],{"class":169,"line":205},[167,157929,53179],{"class":173},[167,157931,157932],{"class":169,"line":160},[167,157933,157934],{"class":173},"    configLanguage: {\n",[167,157936,157937,157939,157941],{"class":169,"line":238},[167,157938,53189],{"class":173},[167,157940,157538],{"class":201},[167,157942,393],{"class":173},[167,157944,157945,157947,157949,157951],{"class":169,"line":243},[167,157946,53198],{"class":181},[167,157948,636],{"class":173},[167,157950,639],{"class":191},[167,157952,642],{"class":173},[167,157954,157956,157959,157961],{"class":157955,"line":261},[169,213],[167,157957,157958],{"class":173},"        language: { value: ",[167,157960,53291],{"class":201},[167,157962,1856],{"class":173},[167,157964,157965,157968,157970,157972],{"class":169,"line":273},[167,157966,157967],{"class":181},"        changeLanguage",[167,157969,636],{"class":173},[167,157971,639],{"class":191},[167,157973,50942],{"class":173},[167,157975,157976],{"class":169,"line":279},[167,157977,8866],{"class":173},[167,157979,157980],{"class":169,"line":289},[167,157981,4049],{"class":173},[167,157983,157984],{"class":169,"line":294},[167,157985,398],{"class":173},[167,157987,157988],{"class":169,"line":304},[167,157989,8755],{"class":173},[167,157991,157992,157995],{"class":169,"line":313},[167,157993,157994],{"class":181},"    currentLanguage",[167,157996,763],{"class":173},[167,157998,158000,158002,158004],{"class":157999,"line":161},[169,213],[167,158001,8767],{"class":191},[167,158003,7351],{"class":219},[167,158005,158006],{"class":173},".configLanguage.language.value\n",[167,158008,158009],{"class":169,"line":335},[167,158010,4049],{"class":173},[167,158012,158013],{"class":169,"line":341},[167,158014,398],{"class":173},[167,158016,158017],{"class":169,"line":489},[167,158018,4419],{"class":173},[167,158020,158021,158024],{"class":169,"line":495},[167,158022,158023],{"class":181},"    changeToSpanish",[167,158025,763],{"class":173},[167,158027,158028,158030,158033,158035,158037,158039],{"class":169,"line":501},[167,158029,741],{"class":219},[167,158031,158032],{"class":173},".configLanguage.",[167,158034,157814],{"class":181},[167,158036,229],{"class":173},[167,158038,2788],{"class":201},[167,158040,235],{"class":173},[167,158042,158043],{"class":169,"line":512},[167,158044,4049],{"class":173},[167,158046,158047],{"class":169,"line":781},[167,158048,3492],{"class":173},[167,158050,158051],{"class":169,"line":786},[167,158052,276],{"class":173},[167,158054,158055,158057,158059],{"class":169,"line":2678},[167,158056,282],{"class":173},[167,158058,178],{"class":177},[167,158060,185],{"class":173},[167,158062,158063],{"class":169,"line":2692},[167,158064,209],{"emptyLinePlaceholder":208},[167,158066,158067,158069,158071],{"class":169,"line":3575},[167,158068,174],{"class":173},[167,158070,299],{"class":177},[167,158072,185],{"class":173},[167,158074,158075,158077,158079],{"class":169,"line":5028},[167,158076,307],{"class":173},[167,158078,1242],{"class":177},[167,158080,185],{"class":173},[167,158082,158083,158085,158087,158090,158092],{"class":169,"line":5037},[167,158084,1257],{"class":173},[167,158086,15],{"class":177},[167,158088,158089],{"class":173},">Current language: {{ currentLanguage }}\u003C\u002F",[167,158091,15],{"class":177},[167,158093,185],{"class":173},[167,158095,158096,158098,158100,158102,158104,158107,158109,158111],{"class":169,"line":5046},[167,158097,1257],{"class":173},[167,158099,507],{"class":177},[167,158101,1182],{"class":181},[167,158103,267],{"class":173},[167,158105,158106],{"class":201},"\"changeToSpanish\"",[167,158108,157883],{"class":173},[167,158110,507],{"class":177},[167,158112,185],{"class":173},[167,158114,158115,158117,158119],{"class":169,"line":6756},[167,158116,504],{"class":173},[167,158118,1242],{"class":177},[167,158120,185],{"class":173},[167,158122,158123,158125,158127],{"class":169,"line":6778},[167,158124,282],{"class":173},[167,158126,299],{"class":177},[167,158128,185],{"class":173},[22,158130,158132],{"id":158131},"handling-default-values","Handling Default Values",[15,158134,158135,158136,158138],{},"To make your components more robust, you can define a default value in the ",[87,158137,53391],{},". If the component is used outside of a tree that provides the key, you'll avoid runtime errors:",[154,158140,158143],{"className":51866,"code":158141,"filename":53396,"highlights":158142,"language":51870,"meta":163,"style":163},"\u002F\u002F If it doesn't find 'user-data', it will use the default object\nconst user = inject('user-data', { name: 'Guest', premium: false })\n",[188],[87,158144,158145,158150],{"__ignoreMap":163},[167,158146,158147],{"class":169,"line":170},[167,158148,158149],{"class":18662},"\u002F\u002F If it doesn't find 'user-data', it will use the default object\n",[167,158151,158153,158155,158157,158159,158161,158163,158165,158168,158171,158173,158175],{"class":158152,"line":188},[169,213],[167,158154,216],{"class":191},[167,158156,23476],{"class":219},[167,158158,223],{"class":191},[167,158160,52489],{"class":181},[167,158162,229],{"class":173},[167,158164,53421],{"class":201},[167,158166,158167],{"class":173},", { name: ",[167,158169,158170],{"class":201},"'Guest'",[167,158172,53430],{"class":173},[167,158174,3392],{"class":219},[167,158176,2242],{"class":173},[22,158178,158180],{"id":158179},"provideinject-at-application-level","Provide\u002FInject at Application Level",[15,158182,158183],{},"In addition to using it between components, you can define global values directly in the application instance. This is useful for:",[33,158185,158186,158189,158192],{},[36,158187,158188],{},"Application configuration (API URLs, service keys)",[36,158190,158191],{},"Global themes or preferences",[36,158193,158194],{},"Shared plugins or utilities",[29777,158196,158198],{"id":158197},"implementation",[3933,158199,158200],{},"Implementation:",[154,158202,158205],{"className":51866,"code":158203,"filename":25323,"highlights":158204,"language":51870,"meta":163,"style":163},"import { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\n\n\u002F\u002F Provide global values available throughout the entire application\napp.provide('api-url', 'https:\u002F\u002Fapi.example.com')\napp.provide('theme', 'dark')\napp.provide('analytics', {\n  trackEvent: (eventName) => {\n    console.log(`Event: ${eventName}`)\n  }\n})\n\napp.mount('#app')\n",[261,273],[87,158206,158207,158217,158227,158231,158243,158247,158252,158270,158287,158299,158313,158330,158334,158338,158342],{"__ignoreMap":163},[167,158208,158209,158211,158213,158215],{"class":169,"line":170},[167,158210,192],{"class":191},[167,158212,51166],{"class":173},[167,158214,198],{"class":191},[167,158216,202],{"class":201},[167,158218,158219,158221,158223,158225],{"class":169,"line":188},[167,158220,192],{"class":191},[167,158222,51177],{"class":173},[167,158224,198],{"class":191},[167,158226,51182],{"class":201},[167,158228,158229],{"class":169,"line":205},[167,158230,209],{"emptyLinePlaceholder":208},[167,158232,158233,158235,158237,158239,158241],{"class":169,"line":160},[167,158234,216],{"class":191},[167,158236,51189],{"class":219},[167,158238,223],{"class":191},[167,158240,51194],{"class":181},[167,158242,51197],{"class":173},[167,158244,158245],{"class":169,"line":238},[167,158246,209],{"emptyLinePlaceholder":208},[167,158248,158249],{"class":169,"line":243},[167,158250,158251],{"class":18662},"\u002F\u002F Provide global values available throughout the entire application\n",[167,158253,158255,158257,158259,158261,158263,158265,158268],{"class":158254,"line":261},[169,213],[167,158256,51203],{"class":173},[167,158258,52309],{"class":181},[167,158260,229],{"class":173},[167,158262,53521],{"class":201},[167,158264,1025],{"class":173},[167,158266,158267],{"class":201},"'https:\u002F\u002Fapi.example.com'",[167,158269,235],{"class":173},[167,158271,158273,158275,158277,158279,158281,158283,158285],{"class":158272,"line":273},[169,213],[167,158274,51203],{"class":173},[167,158276,52309],{"class":181},[167,158278,229],{"class":173},[167,158280,53540],{"class":201},[167,158282,1025],{"class":173},[167,158284,53545],{"class":201},[167,158286,235],{"class":173},[167,158288,158289,158291,158293,158295,158297],{"class":169,"line":279},[167,158290,51203],{"class":173},[167,158292,52309],{"class":181},[167,158294,229],{"class":173},[167,158296,53558],{"class":201},[167,158298,627],{"class":173},[167,158300,158301,158303,158305,158307,158309,158311],{"class":169,"line":289},[167,158302,53565],{"class":181},[167,158304,688],{"class":173},[167,158306,53570],{"class":254},[167,158308,693],{"class":173},[167,158310,639],{"class":191},[167,158312,1905],{"class":173},[167,158314,158315,158317,158319,158321,158324,158326,158328],{"class":169,"line":294},[167,158316,8894],{"class":173},[167,158318,2611],{"class":181},[167,158320,229],{"class":173},[167,158322,158323],{"class":201},"`Event: ${",[167,158325,53570],{"class":173},[167,158327,2360],{"class":201},[167,158329,235],{"class":173},[167,158331,158332],{"class":169,"line":304},[167,158333,3492],{"class":173},[167,158335,158336],{"class":169,"line":313},[167,158337,403],{"class":173},[167,158339,158340],{"class":169,"line":161},[167,158341,209],{"emptyLinePlaceholder":208},[167,158343,158344,158346,158348,158350,158352],{"class":169,"line":335},[167,158345,51203],{"class":173},[167,158347,53612],{"class":181},[167,158349,229],{"class":173},[167,158351,53617],{"class":201},[167,158353,235],{"class":173},[29777,158355,158357],{"id":158356},"consuming-in-any-component",[3933,158358,158359],{},"Consuming in any component:",[154,158361,158364],{"className":156,"code":158362,"filename":53629,"highlights":158363,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst apiUrl = inject('api-url')\nconst theme = inject('theme')\nconst analytics = inject('analytics')\n\nconst handleClick = () => {\n  analytics.trackEvent('button-click')\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"`theme-${theme}`\">\n    \u003Cp>API Base: {{ apiUrl }}\u003C\u002Fp>\n    \u003Cbutton @click=\"handleClick\">Click\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[160,238],[87,158365,158366,158376,158386,158390,158407,158424,158440,158444,158458,158470,158474,158482,158486,158494,158508,158520,158539,158547],{"__ignoreMap":163},[167,158367,158368,158370,158372,158374],{"class":169,"line":170},[167,158369,174],{"class":173},[167,158371,178],{"class":177},[167,158373,182],{"class":181},[167,158375,185],{"class":173},[167,158377,158378,158380,158382,158384],{"class":169,"line":188},[167,158379,192],{"class":191},[167,158381,52464],{"class":173},[167,158383,198],{"class":191},[167,158385,202],{"class":201},[167,158387,158388],{"class":169,"line":205},[167,158389,209],{"emptyLinePlaceholder":208},[167,158391,158393,158395,158397,158399,158401,158403,158405],{"class":158392,"line":160},[169,213],[167,158394,216],{"class":191},[167,158396,53664],{"class":219},[167,158398,223],{"class":191},[167,158400,52489],{"class":181},[167,158402,229],{"class":173},[167,158404,53521],{"class":201},[167,158406,235],{"class":173},[167,158408,158410,158412,158414,158416,158418,158420,158422],{"class":158409,"line":238},[169,213],[167,158411,216],{"class":191},[167,158413,53682],{"class":219},[167,158415,223],{"class":191},[167,158417,52489],{"class":181},[167,158419,229],{"class":173},[167,158421,53540],{"class":201},[167,158423,235],{"class":173},[167,158425,158426,158428,158430,158432,158434,158436,158438],{"class":169,"line":243},[167,158427,216],{"class":191},[167,158429,53699],{"class":219},[167,158431,223],{"class":191},[167,158433,52489],{"class":181},[167,158435,229],{"class":173},[167,158437,53558],{"class":201},[167,158439,235],{"class":173},[167,158441,158442],{"class":169,"line":261},[167,158443,209],{"emptyLinePlaceholder":208},[167,158445,158446,158448,158450,158452,158454,158456],{"class":169,"line":273},[167,158447,216],{"class":191},[167,158449,53720],{"class":181},[167,158451,223],{"class":191},[167,158453,1469],{"class":173},[167,158455,639],{"class":191},[167,158457,1905],{"class":173},[167,158459,158460,158462,158464,158466,158468],{"class":169,"line":279},[167,158461,53733],{"class":173},[167,158463,53736],{"class":181},[167,158465,229],{"class":173},[167,158467,53741],{"class":201},[167,158469,235],{"class":173},[167,158471,158472],{"class":169,"line":289},[167,158473,276],{"class":173},[167,158475,158476,158478,158480],{"class":169,"line":294},[167,158477,282],{"class":173},[167,158479,178],{"class":177},[167,158481,185],{"class":173},[167,158483,158484],{"class":169,"line":304},[167,158485,209],{"emptyLinePlaceholder":208},[167,158487,158488,158490,158492],{"class":169,"line":313},[167,158489,174],{"class":173},[167,158491,299],{"class":177},[167,158493,185],{"class":173},[167,158495,158496,158498,158500,158502,158504,158506],{"class":169,"line":161},[167,158497,307],{"class":173},[167,158499,1242],{"class":177},[167,158501,42135],{"class":181},[167,158503,267],{"class":173},[167,158505,53780],{"class":201},[167,158507,185],{"class":173},[167,158509,158510,158512,158514,158516,158518],{"class":169,"line":335},[167,158511,1257],{"class":173},[167,158513,15],{"class":177},[167,158515,53791],{"class":173},[167,158517,15],{"class":177},[167,158519,185],{"class":173},[167,158521,158522,158524,158526,158528,158530,158532,158535,158537],{"class":169,"line":341},[167,158523,1257],{"class":173},[167,158525,507],{"class":177},[167,158527,1182],{"class":181},[167,158529,267],{"class":173},[167,158531,53808],{"class":201},[167,158533,158534],{"class":173},">Click\u003C\u002F",[167,158536,507],{"class":177},[167,158538,185],{"class":173},[167,158540,158541,158543,158545],{"class":169,"line":489},[167,158542,504],{"class":173},[167,158544,1242],{"class":177},[167,158546,185],{"class":173},[167,158548,158549,158551,158553],{"class":169,"line":495},[167,158550,282],{"class":173},[167,158552,299],{"class":177},[167,158554,185],{"class":173},[29777,158556,158558],{"id":158557},"advantages","Advantages",[33,158560,158561,158564,158567],{},[36,158562,158563],{},"You don't need to create a root component just to provide values",[36,158565,158566],{},"Ideal for configurations that don't change during the application's lifetime",[36,158568,158569],{},"Simplifies testing by allowing easy override of these values",[5367,158571,158572],{},[15,158573,158574,158576,158577,1679],{},[3933,158575,106421],{}," For reactive values at the application level that change frequently, consider using Pinia instead of ",[87,158578,53857],{},[22,158580,158582],{"id":158581},"under-the-hood-how-does-it-work","Under the Hood: How Does it Work?",[15,158584,158585,158586,158588,158589,1679],{},"The efficiency of ",[87,158587,997],{}," lies in its use of JavaScript's ",[3933,158590,158591],{},"prototype chain",[3035,158593,158594,158607],{},[36,158595,158596,158598,158599,158601,158602,158604,158605,1679],{},[3933,158597,52212],{}," When a component provides something, Vue creates a new ",[87,158600,53881],{}," object for that component which inherits from its parent's ",[87,158603,53881],{}," object via ",[87,158606,53888],{},[36,158608,158609,158611],{},[3933,158610,52218],{}," Vue simply looks for the key in the object. If it's not in the immediate parent, JavaScript's engine climbs up the prototype chain until it finds it or reaches the end.",[15,158613,158614],{},"This architecture allows a child to \"override\" a value for its own descendants without affecting its siblings or ancestors, ensuring complete isolation.",[22,158616,158618],{"id":158617},"capability-summary","Capability Summary",[56,158620,158621,158633],{},[59,158622,158623],{},[62,158624,158625,158627,158630],{},[65,158626,103980],{},[65,158628,158629],{},"Basic Level",[65,158631,158632],{},"Professional Level",[75,158634,158635,158648,158664,158677],{},[62,158636,158637,158642,158645],{},[80,158638,158639],{},[3933,158640,158641],{},"Flow",[80,158643,158644],{},"Pass data from A to B",[80,158646,158647],{},"Hierarchical state architecture",[62,158649,158650,158655,158658],{},[80,158651,158652],{},[3933,158653,158654],{},"Safety",[80,158656,158657],{},"Mutable data (risky)",[80,158659,158660,158661,158663],{},"Use of ",[87,158662,52672],{}," to protect state",[62,158665,158666,158671,158674],{},[80,158667,158668],{},[3933,158669,158670],{},"Robustness",[80,158672,158673],{},"Can fail if key is missing",[80,158675,158676],{},"Use of default values",[62,158678,158679,158683,158686],{},[80,158680,158681],{},[3933,158682,104019],{},[80,158684,158685],{},"Between local components",[80,158687,158688,158689,158691],{},"Global configuration at ",[87,158690,53974],{}," level",[22,158693,158695],{"id":158694},"when-not-to-use-provideinject","When NOT to Use Provide\u002FInject",[33,158697,158698,158704,158710],{},[36,158699,158700,158703],{},[3933,158701,158702],{},"For complex global state:"," Use Pinia or Vuex",[36,158705,158706,158709],{},[3933,158707,158708],{},"For sibling communication:"," Use composables or the Event Bus pattern",[36,158711,158712,158715],{},[3933,158713,158714],{},"For simple 2-level state:"," Props are more explicit and easier to follow",[22,158717,73913],{"id":73912},[15,158719,158720,57920,158722,158724,158725,158727],{},[87,158721,52159],{},[87,158723,53391],{}," are powerful tools that, when used correctly, eliminate ",[3933,158726,52153],{}," without compromising code maintainability. The key is to:",[3035,158729,158730,158737,158743,158749],{},[36,158731,158732,78795,158735],{},[3933,158733,158734],{},"Protect the state",[87,158736,52672],{},[36,158738,158739,158742],{},[3933,158740,158741],{},"Provide functions"," to modify it in a controlled way",[36,158744,158745,158748],{},[3933,158746,158747],{},"Define default values"," for greater robustness",[36,158750,158751,158754],{},[3933,158752,158753],{},"Use it at the appropriate level:"," components for hierarchical state, Pinia for complex global state",[15,158756,158757],{},"Mastering this pattern will allow you to build more scalable and maintainable Vue applications.",[924,158759,54044],{},{"title":163,"searchDepth":188,"depth":188,"links":158761},[158762,158763,158765,158766,158767,158769,158770,158771,158772,158773,158774],{"id":156933,"depth":188,"text":156934},{"id":156963,"depth":188,"text":158764},"The Native Solution: Provide and Inject",{"id":156985,"depth":188,"text":156986},{"id":157372,"depth":188,"text":157373},{"id":157436,"depth":188,"text":158768},"Example of Correct Usage with readonly",{"id":158131,"depth":188,"text":158132},{"id":158179,"depth":188,"text":158180},{"id":158581,"depth":188,"text":158582},{"id":158617,"depth":188,"text":158618},{"id":158694,"depth":188,"text":158695},{"id":73912,"depth":188,"text":73913},"Learn how to use provide and inject in Vue.js to eliminate Prop Drilling, manage reactivity safely with readonly, and improve your component architecture.",{"updatedAt":945,"coverCaption":158777,"author":946,"keywords":158778},"Provide and Inject in Vue 3 by TODOvue",[3258,52159,52163,52153,3260,116317],"\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.en",[158781],{"headline":156911,"author":158782,"datePublished":54070,"@type":961},{"name":946,"@type":959},{"title":156911,"description":158775},"blog\u002Fvue-provide-inject-avoid-prop-drilling.en",[158786,158788,158789,158790,158791,158792],{"tag":158787,"color":54076},"Dependency Injection",{"tag":105551,"color":969},{"tag":60267,"color":971},{"tag":104119,"color":52133},{"tag":98745,"color":1639},{"tag":104136,"color":974},"intwlMa6NNQsYsAQ9hNg5ddcLIlsEx1CgezWeET3XC8",{"id":52140,"title":52141,"body":158795,"cover":54060,"coverAlt":52141,"date":54061,"description":54062,"draft":940,"extension":941,"lab":942,"locale":943,"meta":160469,"navigation":208,"path":54066,"schemaOrg":160471,"seo":160474,"series":963,"seriesDescription":964,"seriesOrder":160,"seriesTitle":965,"slug":942,"stem":54072,"tags":160475,"__hash__":54082},{"type":8,"value":158796,"toc":160456},[158797,158799,158803,158809,158811,158829,158833,158835,158845,158847,158849,158853,158964,159040,159044,159135,159209,159211,159219,159235,159241,159253,159257,159261,159379,159553,159557,159685,159900,159902,159906,159940,159942,159944,159952,159956,160105,160109,160302,160304,160312,160320,160322,160328,160344,160346,160348,160406,160408,160422,160424,160432,160452,160454],[11,158798,52147],{"id":52146},[15,158800,52150,158801,52154],{},[3933,158802,52153],{},[15,158804,158805,52160,158807,52164],{},[87,158806,52159],{},[87,158808,52163],{},[22,158810,52168],{"id":52167},[3035,158812,158813,158819,158823],{},[36,158814,158815,52176,158817,52180],{},[3933,158816,52175],{},[87,158818,52179],{},[36,158820,158821,52186],{},[3933,158822,52185],{},[36,158824,158825,52192,158827,52195],{},[3933,158826,52191],{},[87,158828,3300],{},[22,158830,52199,158831],{"id":52198},[3933,158832,52202],{},[15,158834,52205],{},[33,158836,158837,158841],{},[36,158838,158839,52213],{},[3933,158840,52212],{},[36,158842,158843,52219],{},[3933,158844,52218],{},[22,158846,52223],{"id":52222},[15,158848,52226],{},[29777,158850,158851],{"id":52229},[3933,158852,52232],{},[154,158854,158856],{"className":156,"code":52235,"filename":3260,"highlights":158855,"language":162,"meta":163,"style":163},[188,273],[87,158857,158858,158868,158879,158889,158893,158909,158913,158917,158928,158936,158940,158948,158956],{"__ignoreMap":163},[167,158859,158860,158862,158864,158866],{"class":169,"line":170},[167,158861,174],{"class":173},[167,158863,178],{"class":177},[167,158865,182],{"class":181},[167,158867,185],{"class":173},[167,158869,158871,158873,158875,158877],{"class":158870,"line":188},[169,213],[167,158872,192],{"class":191},[167,158874,52256],{"class":173},[167,158876,198],{"class":191},[167,158878,202],{"class":201},[167,158880,158881,158883,158885,158887],{"class":169,"line":205},[167,158882,192],{"class":191},[167,158884,52267],{"class":173},[167,158886,198],{"class":191},[167,158888,52272],{"class":201},[167,158890,158891],{"class":169,"line":160},[167,158892,209],{"emptyLinePlaceholder":208},[167,158894,158895,158897,158899,158901,158903,158905,158907],{"class":169,"line":238},[167,158896,216],{"class":191},[167,158898,52283],{"class":219},[167,158900,223],{"class":191},[167,158902,226],{"class":181},[167,158904,229],{"class":173},[167,158906,52292],{"class":201},[167,158908,235],{"class":173},[167,158910,158911],{"class":169,"line":243},[167,158912,209],{"emptyLinePlaceholder":208},[167,158914,158915],{"class":169,"line":261},[167,158916,52303],{"class":18662},[167,158918,158920,158922,158924,158926],{"class":158919,"line":273},[169,213],[167,158921,52309],{"class":181},[167,158923,229],{"class":173},[167,158925,52314],{"class":201},[167,158927,52317],{"class":173},[167,158929,158930,158932,158934],{"class":169,"line":279},[167,158931,282],{"class":173},[167,158933,178],{"class":177},[167,158935,185],{"class":173},[167,158937,158938],{"class":169,"line":289},[167,158939,209],{"emptyLinePlaceholder":208},[167,158941,158942,158944,158946],{"class":169,"line":294},[167,158943,174],{"class":173},[167,158945,299],{"class":177},[167,158947,185],{"class":173},[167,158949,158950,158952,158954],{"class":169,"line":304},[167,158951,307],{"class":173},[167,158953,52344],{"class":177},[167,158955,5325],{"class":173},[167,158957,158958,158960,158962],{"class":169,"line":313},[167,158959,282],{"class":173},[167,158961,299],{"class":177},[167,158963,185],{"class":173},[154,158965,158967],{"className":156,"code":52357,"filename":3973,"highlights":158966,"language":162,"meta":163,"style":163},[205],[87,158968,158969,158977,158985,158990,158996,159000,159004,159012,159016,159024,159032],{"__ignoreMap":163},[167,158970,158971,158973,158975],{"class":169,"line":170},[167,158972,174],{"class":173},[167,158974,178],{"class":177},[167,158976,185],{"class":173},[167,158978,158979,158981,158983],{"class":169,"line":188},[167,158980,608],{"class":191},[167,158982,3991],{"class":191},[167,158984,1905],{"class":173},[167,158986,158988],{"class":158987,"line":205},[169,213],[167,158989,52382],{"class":173},[167,158991,158992,158994],{"class":169,"line":160},[167,158993,52387],{"class":173},[167,158995,52390],{"class":201},[167,158997,158998],{"class":169,"line":238},[167,158999,3492],{"class":173},[167,159001,159002],{"class":169,"line":243},[167,159003,276],{"class":173},[167,159005,159006,159008,159010],{"class":169,"line":261},[167,159007,282],{"class":173},[167,159009,178],{"class":177},[167,159011,185],{"class":173},[167,159013,159014],{"class":169,"line":273},[167,159015,209],{"emptyLinePlaceholder":208},[167,159017,159018,159020,159022],{"class":169,"line":279},[167,159019,174],{"class":173},[167,159021,299],{"class":177},[167,159023,185],{"class":173},[167,159025,159026,159028,159030],{"class":169,"line":289},[167,159027,307],{"class":173},[167,159029,52344],{"class":177},[167,159031,5325],{"class":173},[167,159033,159034,159036,159038],{"class":169,"line":294},[167,159035,282],{"class":173},[167,159037,299],{"class":177},[167,159039,185],{"class":173},[29777,159041,159042],{"id":52437},[3933,159043,52440],{},[154,159045,159047],{"className":156,"code":52443,"filename":3260,"highlights":159046,"language":162,"meta":163,"style":163},[188,238],[87,159048,159049,159059,159070,159074,159078,159095,159103,159107,159115,159127],{"__ignoreMap":163},[167,159050,159051,159053,159055,159057],{"class":169,"line":170},[167,159052,174],{"class":173},[167,159054,178],{"class":177},[167,159056,182],{"class":181},[167,159058,185],{"class":173},[167,159060,159062,159064,159066,159068],{"class":159061,"line":188},[169,213],[167,159063,192],{"class":191},[167,159065,52464],{"class":173},[167,159067,198],{"class":191},[167,159069,202],{"class":201},[167,159071,159072],{"class":169,"line":205},[167,159073,209],{"emptyLinePlaceholder":208},[167,159075,159076],{"class":169,"line":160},[167,159077,52477],{"class":18662},[167,159079,159081,159083,159085,159087,159089,159091,159093],{"class":159080,"line":238},[169,213],[167,159082,216],{"class":191},[167,159084,52283],{"class":219},[167,159086,223],{"class":191},[167,159088,52489],{"class":181},[167,159090,229],{"class":173},[167,159092,52314],{"class":201},[167,159094,235],{"class":173},[167,159096,159097,159099,159101],{"class":169,"line":243},[167,159098,282],{"class":173},[167,159100,178],{"class":177},[167,159102,185],{"class":173},[167,159104,159105],{"class":169,"line":261},[167,159106,209],{"emptyLinePlaceholder":208},[167,159108,159109,159111,159113],{"class":169,"line":273},[167,159110,174],{"class":173},[167,159112,299],{"class":177},[167,159114,185],{"class":173},[167,159116,159117,159119,159121,159123,159125],{"class":169,"line":279},[167,159118,307],{"class":173},[167,159120,11],{"class":177},[167,159122,52524],{"class":173},[167,159124,11],{"class":177},[167,159126,185],{"class":173},[167,159128,159129,159131,159133],{"class":169,"line":289},[167,159130,282],{"class":173},[167,159132,299],{"class":177},[167,159134,185],{"class":173},[154,159136,159138],{"className":156,"code":52539,"filename":3973,"highlights":159137,"language":162,"meta":163,"style":163},[205],[87,159139,159140,159148,159156,159165,159169,159177,159181,159189,159201],{"__ignoreMap":163},[167,159141,159142,159144,159146],{"class":169,"line":170},[167,159143,174],{"class":173},[167,159145,178],{"class":177},[167,159147,185],{"class":173},[167,159149,159150,159152,159154],{"class":169,"line":188},[167,159151,608],{"class":191},[167,159153,3991],{"class":191},[167,159155,1905],{"class":173},[167,159157,159159,159161,159163],{"class":159158,"line":205},[169,213],[167,159160,52564],{"class":173},[167,159162,52567],{"class":201},[167,159164,4414],{"class":173},[167,159166,159167],{"class":169,"line":160},[167,159168,276],{"class":173},[167,159170,159171,159173,159175],{"class":169,"line":238},[167,159172,282],{"class":173},[167,159174,178],{"class":177},[167,159176,185],{"class":173},[167,159178,159179],{"class":169,"line":243},[167,159180,209],{"emptyLinePlaceholder":208},[167,159182,159183,159185,159187],{"class":169,"line":261},[167,159184,174],{"class":173},[167,159186,299],{"class":177},[167,159188,185],{"class":173},[167,159190,159191,159193,159195,159197,159199],{"class":169,"line":273},[167,159192,307],{"class":173},[167,159194,11],{"class":177},[167,159196,52524],{"class":173},[167,159198,11],{"class":177},[167,159200,185],{"class":173},[167,159202,159203,159205,159207],{"class":169,"line":279},[167,159204,282],{"class":173},[167,159206,299],{"class":177},[167,159208,185],{"class":173},[22,159210,52617],{"id":52616},[15,159212,52620,159213,15124,159215,52625,159217,52630],{},[87,159214,2085],{},[87,159216,18243],{},[19092,159218,52629],{"href":52628},[154,159220,159221],{"className":51866,"code":52633,"filename":52634,"language":51870,"meta":163,"style":163},[87,159222,159223,159227],{"__ignoreMap":163},[167,159224,159225],{"class":169,"line":170},[167,159226,52641],{"class":18662},[167,159228,159229,159231,159233],{"class":169,"line":188},[167,159230,52646],{"class":173},[167,159232,267],{"class":191},[167,159234,52651],{"class":201},[15,159236,52654,159237,52658,159239,583],{},[3933,159238,52657],{},[3933,159240,52661],{},[3035,159242,159243,159249],{},[36,159244,159245,52669,159247,52673],{},[3933,159246,52668],{},[87,159248,52672],{},[36,159250,159251,52679],{},[3933,159252,52678],{},[22,159254,52683,159255],{"id":52682},[87,159256,52686],{},[29777,159258,159259],{"id":52689},[3933,159260,52232],{},[154,159262,159264],{"className":156,"code":52694,"filename":3260,"highlights":159263,"language":162,"meta":163,"style":163},[289],[87,159265,159266,159276,159286,159290,159306,159324,159332,159336,159340,159350,159361,159367,159371],{"__ignoreMap":163},[167,159267,159268,159270,159272,159274],{"class":169,"line":170},[167,159269,174],{"class":173},[167,159271,178],{"class":177},[167,159273,182],{"class":181},[167,159275,185],{"class":173},[167,159277,159278,159280,159282,159284],{"class":169,"line":188},[167,159279,192],{"class":191},[167,159281,52714],{"class":173},[167,159283,198],{"class":191},[167,159285,202],{"class":201},[167,159287,159288],{"class":169,"line":205},[167,159289,209],{"emptyLinePlaceholder":208},[167,159291,159292,159294,159296,159298,159300,159302,159304],{"class":169,"line":160},[167,159293,216],{"class":191},[167,159295,52729],{"class":219},[167,159297,223],{"class":191},[167,159299,226],{"class":181},[167,159301,229],{"class":173},[167,159303,2788],{"class":201},[167,159305,235],{"class":173},[167,159307,159308,159310,159312,159314,159316,159318,159320,159322],{"class":169,"line":238},[167,159309,216],{"class":191},[167,159311,52746],{"class":181},[167,159313,223],{"class":191},[167,159315,2526],{"class":173},[167,159317,52753],{"class":254},[167,159319,693],{"class":173},[167,159321,639],{"class":191},[167,159323,1905],{"class":173},[167,159325,159326,159328,159330],{"class":169,"line":243},[167,159327,52764],{"class":173},[167,159329,267],{"class":191},[167,159331,52769],{"class":173},[167,159333,159334],{"class":169,"line":261},[167,159335,276],{"class":173},[167,159337,159338],{"class":169,"line":273},[167,159339,209],{"emptyLinePlaceholder":208},[167,159341,159342,159344,159346,159348],{"class":169,"line":279},[167,159343,52309],{"class":181},[167,159345,229],{"class":173},[167,159347,52786],{"class":201},[167,159349,627],{"class":173},[167,159351,159353,159355,159357,159359],{"class":159352,"line":289},[169,213],[167,159354,52794],{"class":173},[167,159356,52686],{"class":181},[167,159358,52799],{"class":173},[167,159360,52802],{"class":18662},[167,159362,159363,159365],{"class":169,"line":294},[167,159364,52807],{"class":173},[167,159366,52810],{"class":18662},[167,159368,159369],{"class":169,"line":304},[167,159370,403],{"class":173},[167,159372,159373,159375,159377],{"class":169,"line":313},[167,159374,282],{"class":173},[167,159376,178],{"class":177},[167,159378,185],{"class":173},[154,159380,159382],{"className":156,"code":52825,"filename":3973,"highlights":159381,"language":162,"meta":163,"style":163},[2678],[87,159383,159384,159392,159402,159406,159414,159420,159426,159432,159436,159440,159444,159454,159464,159468,159472,159478,159484,159488,159492,159496,159502,159506,159520,159529,159533,159537,159541,159545],{"__ignoreMap":163},[167,159385,159386,159388,159390],{"class":169,"line":170},[167,159387,174],{"class":173},[167,159389,178],{"class":177},[167,159391,185],{"class":173},[167,159393,159394,159396,159398,159400],{"class":169,"line":188},[167,159395,192],{"class":191},[167,159397,52843],{"class":173},[167,159399,198],{"class":191},[167,159401,202],{"class":201},[167,159403,159404],{"class":169,"line":205},[167,159405,209],{"emptyLinePlaceholder":208},[167,159407,159408,159410,159412],{"class":169,"line":160},[167,159409,608],{"class":191},[167,159411,3991],{"class":191},[167,159413,1905],{"class":173},[167,159415,159416,159418],{"class":169,"line":238},[167,159417,7176],{"class":181},[167,159419,763],{"class":173},[167,159421,159422,159424],{"class":169,"line":243},[167,159423,1937],{"class":191},[167,159425,1905],{"class":173},[167,159427,159428,159430],{"class":169,"line":261},[167,159429,52876],{"class":173},[167,159431,52879],{"class":201},[167,159433,159434],{"class":169,"line":273},[167,159435,4049],{"class":173},[167,159437,159438],{"class":169,"line":279},[167,159439,398],{"class":173},[167,159441,159442],{"class":169,"line":289},[167,159443,51623],{"class":173},[167,159445,159446,159448,159450,159452],{"class":169,"line":294},[167,159447,52896],{"class":181},[167,159449,229],{"class":173},[167,159451,52753],{"class":254},[167,159453,258],{"class":173},[167,159455,159456,159458,159460,159462],{"class":169,"line":304},[167,159457,14773],{"class":219},[167,159459,52909],{"class":173},[167,159461,267],{"class":191},[167,159463,52769],{"class":173},[167,159465,159466],{"class":169,"line":313},[167,159467,7287],{"class":173},[167,159469,159470],{"class":169,"line":161},[167,159471,398],{"class":173},[167,159473,159474,159476],{"class":169,"line":335},[167,159475,52926],{"class":181},[167,159477,763],{"class":173},[167,159479,159480,159482],{"class":169,"line":341},[167,159481,1937],{"class":191},[167,159483,1905],{"class":173},[167,159485,159486],{"class":169,"line":489},[167,159487,52939],{"class":18662},[167,159489,159490],{"class":169,"line":495},[167,159491,52944],{"class":18662},[167,159493,159494],{"class":169,"line":501},[167,159495,52949],{"class":18662},[167,159497,159498,159500],{"class":169,"line":512},[167,159499,52954],{"class":201},[167,159501,52957],{"class":173},[167,159503,159504],{"class":169,"line":781},[167,159505,52962],{"class":18662},[167,159507,159508,159510,159512,159514,159516,159518],{"class":169,"line":786},[167,159509,52967],{"class":173},[167,159511,1661],{"class":181},[167,159513,1493],{"class":173},[167,159515,639],{"class":191},[167,159517,7351],{"class":219},[167,159519,52978],{"class":173},[167,159521,159523,159525,159527],{"class":159522,"line":2678},[169,213],[167,159524,52984],{"class":173},[167,159526,4927],{"class":219},[167,159528,52989],{"class":173},[167,159530,159531],{"class":169,"line":2692},[167,159532,7287],{"class":173},[167,159534,159535],{"class":169,"line":3575},[167,159536,4049],{"class":173},[167,159538,159539],{"class":169,"line":5028},[167,159540,3492],{"class":173},[167,159542,159543],{"class":169,"line":5037},[167,159544,276],{"class":173},[167,159546,159547,159549,159551],{"class":169,"line":5046},[167,159548,282],{"class":173},[167,159550,178],{"class":177},[167,159552,185],{"class":173},[29777,159554,159555],{"id":53016},[3933,159556,52440],{},[154,159558,159560],{"className":156,"code":53021,"filename":3260,"highlights":159559,"language":162,"meta":163,"style":163},[160],[87,159561,159562,159572,159582,159586,159611,159619,159623,159631,159639,159651,159669,159677],{"__ignoreMap":163},[167,159563,159564,159566,159568,159570],{"class":169,"line":170},[167,159565,174],{"class":173},[167,159567,178],{"class":177},[167,159569,182],{"class":181},[167,159571,185],{"class":173},[167,159573,159574,159576,159578,159580],{"class":169,"line":188},[167,159575,192],{"class":191},[167,159577,52464],{"class":173},[167,159579,198],{"class":191},[167,159581,202],{"class":201},[167,159583,159584],{"class":169,"line":205},[167,159585,209],{"emptyLinePlaceholder":208},[167,159587,159589,159591,159593,159595,159597,159599,159601,159603,159605,159607,159609],{"class":159588,"line":160},[169,213],[167,159590,216],{"class":191},[167,159592,577],{"class":173},[167,159594,53058],{"class":219},[167,159596,1025],{"class":173},[167,159598,53063],{"class":219},[167,159600,23409],{"class":173},[167,159602,267],{"class":191},[167,159604,52489],{"class":181},[167,159606,229],{"class":173},[167,159608,52786],{"class":201},[167,159610,235],{"class":173},[167,159612,159613,159615,159617],{"class":169,"line":238},[167,159614,282],{"class":173},[167,159616,178],{"class":177},[167,159618,185],{"class":173},[167,159620,159621],{"class":169,"line":243},[167,159622,209],{"emptyLinePlaceholder":208},[167,159624,159625,159627,159629],{"class":169,"line":261},[167,159626,174],{"class":173},[167,159628,299],{"class":177},[167,159630,185],{"class":173},[167,159632,159633,159635,159637],{"class":169,"line":273},[167,159634,307],{"class":173},[167,159636,1242],{"class":177},[167,159638,185],{"class":173},[167,159640,159641,159643,159645,159647,159649],{"class":169,"line":279},[167,159642,1257],{"class":173},[167,159644,15],{"class":177},[167,159646,53112],{"class":173},[167,159648,15],{"class":177},[167,159650,185],{"class":173},[167,159652,159653,159655,159657,159659,159661,159663,159665,159667],{"class":169,"line":289},[167,159654,1257],{"class":173},[167,159656,507],{"class":177},[167,159658,1182],{"class":181},[167,159660,267],{"class":173},[167,159662,53129],{"class":201},[167,159664,53132],{"class":173},[167,159666,507],{"class":177},[167,159668,185],{"class":173},[167,159670,159671,159673,159675],{"class":169,"line":294},[167,159672,504],{"class":173},[167,159674,1242],{"class":177},[167,159676,185],{"class":173},[167,159678,159679,159681,159683],{"class":169,"line":304},[167,159680,282],{"class":173},[167,159682,299],{"class":177},[167,159684,185],{"class":173},[154,159686,159688],{"className":156,"code":53155,"filename":3973,"highlights":159687,"language":162,"meta":163,"style":163},[261,161],[87,159689,159690,159698,159706,159710,159714,159722,159732,159741,159751,159755,159759,159763,159767,159773,159782,159786,159790,159794,159800,159814,159818,159822,159826,159834,159838,159846,159854,159866,159884,159892],{"__ignoreMap":163},[167,159691,159692,159694,159696],{"class":169,"line":170},[167,159693,174],{"class":173},[167,159695,178],{"class":177},[167,159697,185],{"class":173},[167,159699,159700,159702,159704],{"class":169,"line":188},[167,159701,608],{"class":191},[167,159703,3991],{"class":191},[167,159705,1905],{"class":173},[167,159707,159708],{"class":169,"line":205},[167,159709,53179],{"class":173},[167,159711,159712],{"class":169,"line":160},[167,159713,53184],{"class":173},[167,159715,159716,159718,159720],{"class":169,"line":238},[167,159717,53189],{"class":173},[167,159719,52786],{"class":201},[167,159721,393],{"class":173},[167,159723,159724,159726,159728,159730],{"class":169,"line":243},[167,159725,53198],{"class":181},[167,159727,636],{"class":173},[167,159729,639],{"class":191},[167,159731,642],{"class":173},[167,159733,159735,159737,159739],{"class":159734,"line":261},[169,213],[167,159736,53210],{"class":173},[167,159738,2788],{"class":201},[167,159740,1856],{"class":173},[167,159742,159743,159745,159747,159749],{"class":169,"line":273},[167,159744,53219],{"class":181},[167,159746,636],{"class":173},[167,159748,639],{"class":191},[167,159750,50942],{"class":173},[167,159752,159753],{"class":169,"line":279},[167,159754,8866],{"class":173},[167,159756,159757],{"class":169,"line":289},[167,159758,4049],{"class":173},[167,159760,159761],{"class":169,"line":294},[167,159762,398],{"class":173},[167,159764,159765],{"class":169,"line":304},[167,159766,8755],{"class":173},[167,159768,159769,159771],{"class":169,"line":313},[167,159770,53246],{"class":181},[167,159772,763],{"class":173},[167,159774,159776,159778,159780],{"class":159775,"line":161},[169,213],[167,159777,8767],{"class":191},[167,159779,7351],{"class":219},[167,159781,53258],{"class":173},[167,159783,159784],{"class":169,"line":335},[167,159785,4049],{"class":173},[167,159787,159788],{"class":169,"line":341},[167,159789,398],{"class":173},[167,159791,159792],{"class":169,"line":489},[167,159793,4419],{"class":173},[167,159795,159796,159798],{"class":169,"line":495},[167,159797,53275],{"class":181},[167,159799,763],{"class":173},[167,159801,159802,159804,159806,159808,159810,159812],{"class":169,"line":501},[167,159803,741],{"class":219},[167,159805,53284],{"class":173},[167,159807,53063],{"class":181},[167,159809,229],{"class":173},[167,159811,53291],{"class":201},[167,159813,235],{"class":173},[167,159815,159816],{"class":169,"line":512},[167,159817,4049],{"class":173},[167,159819,159820],{"class":169,"line":781},[167,159821,3492],{"class":173},[167,159823,159824],{"class":169,"line":786},[167,159825,276],{"class":173},[167,159827,159828,159830,159832],{"class":169,"line":2678},[167,159829,282],{"class":173},[167,159831,178],{"class":177},[167,159833,185],{"class":173},[167,159835,159836],{"class":169,"line":2692},[167,159837,209],{"emptyLinePlaceholder":208},[167,159839,159840,159842,159844],{"class":169,"line":3575},[167,159841,174],{"class":173},[167,159843,299],{"class":177},[167,159845,185],{"class":173},[167,159847,159848,159850,159852],{"class":169,"line":5028},[167,159849,307],{"class":173},[167,159851,1242],{"class":177},[167,159853,185],{"class":173},[167,159855,159856,159858,159860,159862,159864],{"class":169,"line":5037},[167,159857,1257],{"class":173},[167,159859,15],{"class":177},[167,159861,53342],{"class":173},[167,159863,15],{"class":177},[167,159865,185],{"class":173},[167,159867,159868,159870,159872,159874,159876,159878,159880,159882],{"class":169,"line":5046},[167,159869,1257],{"class":173},[167,159871,507],{"class":177},[167,159873,1182],{"class":181},[167,159875,267],{"class":173},[167,159877,53359],{"class":201},[167,159879,53132],{"class":173},[167,159881,507],{"class":177},[167,159883,185],{"class":173},[167,159885,159886,159888,159890],{"class":169,"line":6756},[167,159887,504],{"class":173},[167,159889,1242],{"class":177},[167,159891,185],{"class":173},[167,159893,159894,159896,159898],{"class":169,"line":6778},[167,159895,282],{"class":173},[167,159897,299],{"class":177},[167,159899,185],{"class":173},[22,159901,53385],{"id":53384},[15,159903,53388,159904,53392],{},[87,159905,53391],{},[154,159907,159909],{"className":51866,"code":53395,"filename":53396,"highlights":159908,"language":51870,"meta":163,"style":163},[188],[87,159910,159911,159915],{"__ignoreMap":163},[167,159912,159913],{"class":169,"line":170},[167,159914,53404],{"class":18662},[167,159916,159918,159920,159922,159924,159926,159928,159930,159932,159934,159936,159938],{"class":159917,"line":188},[169,213],[167,159919,216],{"class":191},[167,159921,53412],{"class":219},[167,159923,223],{"class":191},[167,159925,52489],{"class":181},[167,159927,229],{"class":173},[167,159929,53421],{"class":201},[167,159931,53424],{"class":173},[167,159933,53427],{"class":201},[167,159935,53430],{"class":173},[167,159937,3392],{"class":219},[167,159939,2242],{"class":173},[22,159941,53438],{"id":53437},[15,159943,53441],{},[33,159945,159946,159948,159950],{},[36,159947,53446],{},[36,159949,53449],{},[36,159951,53452],{},[29777,159953,159954],{"id":53455},[3933,159955,53458],{},[154,159957,159959],{"className":51866,"code":53461,"filename":25323,"highlights":159958,"language":51870,"meta":163,"style":163},[261,273],[87,159960,159961,159971,159981,159985,159997,160001,160005,160022,160039,160051,160065,160081,160085,160089,160093],{"__ignoreMap":163},[167,159962,159963,159965,159967,159969],{"class":169,"line":170},[167,159964,192],{"class":191},[167,159966,51166],{"class":173},[167,159968,198],{"class":191},[167,159970,202],{"class":201},[167,159972,159973,159975,159977,159979],{"class":169,"line":188},[167,159974,192],{"class":191},[167,159976,51177],{"class":173},[167,159978,198],{"class":191},[167,159980,51182],{"class":201},[167,159982,159983],{"class":169,"line":205},[167,159984,209],{"emptyLinePlaceholder":208},[167,159986,159987,159989,159991,159993,159995],{"class":169,"line":160},[167,159988,216],{"class":191},[167,159990,51189],{"class":219},[167,159992,223],{"class":191},[167,159994,51194],{"class":181},[167,159996,51197],{"class":173},[167,159998,159999],{"class":169,"line":238},[167,160000,209],{"emptyLinePlaceholder":208},[167,160002,160003],{"class":169,"line":243},[167,160004,53509],{"class":18662},[167,160006,160008,160010,160012,160014,160016,160018,160020],{"class":160007,"line":261},[169,213],[167,160009,51203],{"class":173},[167,160011,52309],{"class":181},[167,160013,229],{"class":173},[167,160015,53521],{"class":201},[167,160017,1025],{"class":173},[167,160019,53526],{"class":201},[167,160021,235],{"class":173},[167,160023,160025,160027,160029,160031,160033,160035,160037],{"class":160024,"line":273},[169,213],[167,160026,51203],{"class":173},[167,160028,52309],{"class":181},[167,160030,229],{"class":173},[167,160032,53540],{"class":201},[167,160034,1025],{"class":173},[167,160036,53545],{"class":201},[167,160038,235],{"class":173},[167,160040,160041,160043,160045,160047,160049],{"class":169,"line":279},[167,160042,51203],{"class":173},[167,160044,52309],{"class":181},[167,160046,229],{"class":173},[167,160048,53558],{"class":201},[167,160050,627],{"class":173},[167,160052,160053,160055,160057,160059,160061,160063],{"class":169,"line":289},[167,160054,53565],{"class":181},[167,160056,688],{"class":173},[167,160058,53570],{"class":254},[167,160060,693],{"class":173},[167,160062,639],{"class":191},[167,160064,1905],{"class":173},[167,160066,160067,160069,160071,160073,160075,160077,160079],{"class":169,"line":294},[167,160068,8894],{"class":173},[167,160070,2611],{"class":181},[167,160072,229],{"class":173},[167,160074,53587],{"class":201},[167,160076,53570],{"class":173},[167,160078,2360],{"class":201},[167,160080,235],{"class":173},[167,160082,160083],{"class":169,"line":304},[167,160084,3492],{"class":173},[167,160086,160087],{"class":169,"line":313},[167,160088,403],{"class":173},[167,160090,160091],{"class":169,"line":161},[167,160092,209],{"emptyLinePlaceholder":208},[167,160094,160095,160097,160099,160101,160103],{"class":169,"line":335},[167,160096,51203],{"class":173},[167,160098,53612],{"class":181},[167,160100,229],{"class":173},[167,160102,53617],{"class":201},[167,160104,235],{"class":173},[29777,160106,160107],{"id":53622},[3933,160108,53625],{},[154,160110,160112],{"className":156,"code":53628,"filename":53629,"highlights":160111,"language":162,"meta":163,"style":163},[160,238],[87,160113,160114,160124,160134,160138,160155,160172,160188,160192,160206,160218,160222,160230,160234,160242,160256,160268,160286,160294],{"__ignoreMap":163},[167,160115,160116,160118,160120,160122],{"class":169,"line":170},[167,160117,174],{"class":173},[167,160119,178],{"class":177},[167,160121,182],{"class":181},[167,160123,185],{"class":173},[167,160125,160126,160128,160130,160132],{"class":169,"line":188},[167,160127,192],{"class":191},[167,160129,52464],{"class":173},[167,160131,198],{"class":191},[167,160133,202],{"class":201},[167,160135,160136],{"class":169,"line":205},[167,160137,209],{"emptyLinePlaceholder":208},[167,160139,160141,160143,160145,160147,160149,160151,160153],{"class":160140,"line":160},[169,213],[167,160142,216],{"class":191},[167,160144,53664],{"class":219},[167,160146,223],{"class":191},[167,160148,52489],{"class":181},[167,160150,229],{"class":173},[167,160152,53521],{"class":201},[167,160154,235],{"class":173},[167,160156,160158,160160,160162,160164,160166,160168,160170],{"class":160157,"line":238},[169,213],[167,160159,216],{"class":191},[167,160161,53682],{"class":219},[167,160163,223],{"class":191},[167,160165,52489],{"class":181},[167,160167,229],{"class":173},[167,160169,53540],{"class":201},[167,160171,235],{"class":173},[167,160173,160174,160176,160178,160180,160182,160184,160186],{"class":169,"line":243},[167,160175,216],{"class":191},[167,160177,53699],{"class":219},[167,160179,223],{"class":191},[167,160181,52489],{"class":181},[167,160183,229],{"class":173},[167,160185,53558],{"class":201},[167,160187,235],{"class":173},[167,160189,160190],{"class":169,"line":261},[167,160191,209],{"emptyLinePlaceholder":208},[167,160193,160194,160196,160198,160200,160202,160204],{"class":169,"line":273},[167,160195,216],{"class":191},[167,160197,53720],{"class":181},[167,160199,223],{"class":191},[167,160201,1469],{"class":173},[167,160203,639],{"class":191},[167,160205,1905],{"class":173},[167,160207,160208,160210,160212,160214,160216],{"class":169,"line":279},[167,160209,53733],{"class":173},[167,160211,53736],{"class":181},[167,160213,229],{"class":173},[167,160215,53741],{"class":201},[167,160217,235],{"class":173},[167,160219,160220],{"class":169,"line":289},[167,160221,276],{"class":173},[167,160223,160224,160226,160228],{"class":169,"line":294},[167,160225,282],{"class":173},[167,160227,178],{"class":177},[167,160229,185],{"class":173},[167,160231,160232],{"class":169,"line":304},[167,160233,209],{"emptyLinePlaceholder":208},[167,160235,160236,160238,160240],{"class":169,"line":313},[167,160237,174],{"class":173},[167,160239,299],{"class":177},[167,160241,185],{"class":173},[167,160243,160244,160246,160248,160250,160252,160254],{"class":169,"line":161},[167,160245,307],{"class":173},[167,160247,1242],{"class":177},[167,160249,42135],{"class":181},[167,160251,267],{"class":173},[167,160253,53780],{"class":201},[167,160255,185],{"class":173},[167,160257,160258,160260,160262,160264,160266],{"class":169,"line":335},[167,160259,1257],{"class":173},[167,160261,15],{"class":177},[167,160263,53791],{"class":173},[167,160265,15],{"class":177},[167,160267,185],{"class":173},[167,160269,160270,160272,160274,160276,160278,160280,160282,160284],{"class":169,"line":341},[167,160271,1257],{"class":173},[167,160273,507],{"class":177},[167,160275,1182],{"class":181},[167,160277,267],{"class":173},[167,160279,53808],{"class":201},[167,160281,53811],{"class":173},[167,160283,507],{"class":177},[167,160285,185],{"class":173},[167,160287,160288,160290,160292],{"class":169,"line":489},[167,160289,504],{"class":173},[167,160291,1242],{"class":177},[167,160293,185],{"class":173},[167,160295,160296,160298,160300],{"class":169,"line":495},[167,160297,282],{"class":173},[167,160299,299],{"class":177},[167,160301,185],{"class":173},[29777,160303,53835],{"id":53834},[33,160305,160306,160308,160310],{},[36,160307,53840],{},[36,160309,53843],{},[36,160311,53846],{},[5367,160313,160314],{},[15,160315,160316,53854,160318,1679],{},[3933,160317,53853],{},[87,160319,53857],{},[22,160321,53861],{"id":53860},[15,160323,53864,160324,53867,160326,53871],{},[87,160325,997],{},[3933,160327,53870],{},[3035,160329,160330,160340],{},[36,160331,160332,53878,160334,53882,160336,53885,160338,1679],{},[3933,160333,52212],{},[87,160335,53881],{},[87,160337,53881],{},[87,160339,53888],{},[36,160341,160342,53893],{},[3933,160343,52218],{},[15,160345,53896],{},[22,160347,53900],{"id":53899},[56,160349,160350,160360],{},[59,160351,160352],{},[62,160353,160354,160356,160358],{},[65,160355,51979],{},[65,160357,53911],{},[65,160359,53914],{},[75,160361,160362,160372,160384,160394],{},[62,160363,160364,160368,160370],{},[80,160365,160366],{},[3933,160367,53923],{},[80,160369,53926],{},[80,160371,53929],{},[62,160373,160374,160378,160380],{},[80,160375,160376],{},[3933,160377,53936],{},[80,160379,53939],{},[80,160381,53942,160382,53945],{},[87,160383,52672],{},[62,160385,160386,160390,160392],{},[80,160387,160388],{},[3933,160389,53952],{},[80,160391,53955],{},[80,160393,53958],{},[62,160395,160396,160400,160402],{},[80,160397,160398],{},[3933,160399,53965],{},[80,160401,53968],{},[80,160403,53971,160404],{},[87,160405,53974],{},[22,160407,53978],{"id":53977},[33,160409,160410,160414,160418],{},[36,160411,160412,53986],{},[3933,160413,53985],{},[36,160415,160416,53992],{},[3933,160417,53991],{},[36,160419,160420,53998],{},[3933,160421,53997],{},[22,160423,23574],{"id":23573},[15,160425,160426,52160,160428,54007,160430,54010],{},[87,160427,52159],{},[87,160429,53391],{},[3933,160431,52153],{},[3035,160433,160434,160440,160444,160448],{},[36,160435,160436,54018,160438],{},[3933,160437,54017],{},[87,160439,52672],{},[36,160441,160442,54026],{},[3933,160443,54025],{},[36,160445,160446,54032],{},[3933,160447,54031],{},[36,160449,160450,54038],{},[3933,160451,54037],{},[15,160453,54041],{},[924,160455,54044],{},{"title":163,"searchDepth":188,"depth":188,"links":160457},[160458,160459,160460,160461,160462,160463,160464,160465,160466,160467,160468],{"id":52167,"depth":188,"text":52168},{"id":52198,"depth":188,"text":54049},{"id":52222,"depth":188,"text":52223},{"id":52616,"depth":188,"text":52617},{"id":52682,"depth":188,"text":54053},{"id":53384,"depth":188,"text":53385},{"id":53437,"depth":188,"text":53438},{"id":53860,"depth":188,"text":53861},{"id":53899,"depth":188,"text":53900},{"id":53977,"depth":188,"text":53978},{"id":23573,"depth":188,"text":23574},{"updatedAt":945,"coverCaption":54064,"author":946,"keywords":160470},[3258,52159,52163,52153,3260,3259],[160472],{"headline":52141,"author":160473,"datePublished":54070,"@type":961},{"name":946,"@type":959},{"title":52141,"description":54062},[160476,160477,160478,160479,160480,160481],{"tag":54075,"color":54076},{"tag":952,"color":969},{"tag":953,"color":971},{"tag":52122,"color":52133},{"tag":1625,"color":1639},{"tag":973,"color":974},{"id":160483,"title":160484,"body":160485,"cover":54721,"coverAlt":161111,"date":54723,"description":161112,"draft":940,"extension":941,"lab":161113,"locale":60249,"meta":161123,"navigation":208,"path":161126,"schemaOrg":161127,"seo":161130,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":161131,"tags":161132,"__hash__":161136},"blog\u002Fblog\u002Fvue-reactivity-explained.en.md","What Is Reactivity? The Magic Behind Vue.js Explained Clearly",{"type":8,"value":160486,"toc":161098},[160487,160490,160493,160496,160500,160503,160519,160522,160530,160534,160537,160541,160551,160565,160571,160576,160579,160587,160595,160598,160661,160669,160673,160676,160693,160696,160700,160703,160720,160743,160746,160800,160804,160938,161093,161096],[11,160488,160484],{"id":160489},"what-is-reactivity-the-magic-behind-vuejs-explained-clearly",[15,160491,160492],{},"Reactivity is the heart of Vue.js. It’s what makes the interface not just a pretty decoration, but a living system that responds to state changes without you having to chase the DOM like it’s 2012.",[15,160494,160495],{},"In this article, we’ll break the concept down without unnecessary mysticism: first with a simple analogy, then with what actually happens at a technical level, and finally with best practices that will save you bugs and performance headaches.",[22,160497,160499],{"id":160498},"the-analogy-the-excel-effect","The analogy: the Excel effect",[15,160501,160502],{},"You don’t need a PhD in computer science to understand reactivity. You just need to have used Excel without breaking anything.",[15,160504,160505,160506,160508,160509,1025,160511,160513,160514,63104,160516,160518],{},"If in cell ",[3933,160507,54108],{}," you write the formula ",[87,160510,54112],{},[3933,160512,54108],{}," updates automatically when ",[3933,160515,54119],{},[3933,160517,54122],{}," change. You don’t click “refresh,” you don’t rewrite the formula. It just happens.",[15,160520,160521],{},"That’s reactivity: an automatic relationship between data and results.",[5367,160523,160524],{},[15,160525,160526,160529],{},[3933,160527,160528],{},"Real-world analogy:"," imagine a smart coffee maker. The moment it detects a cup is placed, the start button becomes enabled. Not because someone programs it each time, but because the system is watching the state.",[22,160531,160533],{"id":160532},"the-technical-evolution-from-vue-2-to-vue-3","The technical evolution: from Vue 2 to Vue 3",[15,160535,160536],{},"Vue didn’t always have the elegant reactivity system we know today. Understanding its evolution helps you write better code and avoid fighting the framework.",[3087,160538,54145,160539],{"id":54144},[87,160540,54148],{},[15,160542,160543,160544,57920,160546,160548,160549,1679],{},"In Vue 2, each reactive property was turned into a pair of ",[9295,160545,54154],{},[9295,160547,54157],{}," using ",[87,160550,54148],{},[33,160552,160553],{},[36,160554,160555,160558,160559,160561,160562,160564],{},[3933,160556,160557],{},"The limitation:"," Vue had to walk the entire object when initializing it. If you added a new property or changed an array index directly (",[87,160560,54171],{},"), Vue wouldn’t notice. That’s why solutions like ",[87,160563,54175],{}," existed.",[3087,160566,160568,160569],{"id":160567},"vue-3-the-power-of-proxy","Vue 3: the power of ",[87,160570,22880],{},[15,160572,160573,160574,1679],{},"Vue 3 completely changed the approach by using JavaScript ",[3933,160575,54187],{},[15,160577,160578],{},"A Proxy wraps an object and can intercept almost any operation: reading, writing, deleting, or adding properties.",[33,160580,160581],{},[36,160582,160583,160586],{},[3933,160584,160585],{},"The advantage:"," it doesn’t matter when or how the object changes. Vue can detect it. The result is deeper, more predictable reactivity with better performance.",[22,160588,160590,160591,1662,160593],{"id":160589},"the-two-pillars-ref-vs-reactive","The two pillars: ",[87,160592,89],{},[87,160594,93],{},[15,160596,160597],{},"If you use the Composition API, this question shows up before you finish your first coffee.",[56,160599,160600,160614],{},[59,160601,160602],{},[62,160603,160604,160606,160610],{},[65,160605,103980],{},[65,160607,160608],{},[87,160609,89],{},[65,160611,160612],{},[87,160613,93],{},[75,160615,160616,160627,160639,160650],{},[62,160617,160618,160621,160624],{},[80,160619,160620],{},"Data type",[80,160622,160623],{},"Primitives and objects",[80,160625,160626],{},"Only objects and collections",[62,160628,160629,160632,160636],{},[80,160630,160631],{},"Access in JS",[80,160633,160634],{},[87,160635,22979],{},[80,160637,160638],{},"Direct access",[62,160640,160641,160645,160648],{},[80,160642,59009,160643],{},[87,160644,31997],{},[80,160646,160647],{},"Auto-unwrapped",[80,160649,160638],{},[62,160651,160652,160655,160658],{},[80,160653,160654],{},"Ideal use",[80,160656,160657],{},"Simple, isolated state",[80,160659,160660],{},"Complex or nested state",[15,160662,160663,160664,160666,160667,1679],{},"A quick mental rule: if it’s one thing, use ",[87,160665,2085],{},". If it’s a structure, use ",[87,160668,18243],{},[22,160670,160672],{"id":160671},"the-internal-cycle-track-and-trigger","The internal cycle: track and trigger",[15,160674,160675],{},"Vue’s reactivity engine works with a surprisingly elegant system:",[3035,160677,160678,160683,160688],{},[36,160679,160680,160682],{},[3933,160681,54294],{}," when a function reads a reactive variable, Vue records that relationship.",[36,160684,160685,160687],{},[3933,160686,54300],{}," when the value changes, Vue notifies all functions that depend on it.",[36,160689,160690,160692],{},[3933,160691,54306],{}," the component re-renders. The Virtual DOM takes care of updating only what’s necessary.",[15,160694,160695],{},"You change data. Vue decides what to touch in the DOM. Separation of responsibilities at its finest.",[22,160697,160699],{"id":160698},"performance-tips-2026-level","Performance tips (2026 level)",[15,160701,160702],{},"If your application starts to grow, these decisions matter more than they seem.",[33,160704,160705,160714],{},[36,160706,160707,160713],{},[3933,160708,160709,57920,160711,583],{},[87,160710,23453],{},[87,160712,54328],{}," useful when you’re working with large objects that don’t need deep reactivity.",[36,160715,160716,160719],{},[3933,160717,160718],{},"Be careful when destructuring:"," doing this breaks reactivity:",[154,160721,160723],{"className":51866,"code":160722,"filename":54339,"language":51870,"meta":163,"style":163},"const { name } = reactiveState; \u002F\u002F wrong\n",[87,160724,160725],{"__ignoreMap":163},[167,160726,160727,160729,160731,160733,160735,160737,160740],{"class":169,"line":170},[167,160728,216],{"class":191},[167,160730,577],{"class":173},[167,160732,592],{"class":219},[167,160734,23409],{"class":173},[167,160736,267],{"class":191},[167,160738,160739],{"class":173}," reactiveState; ",[167,160741,160742],{"class":18662},"\u002F\u002F wrong\n",[15,160744,160745],{},"The correct way is:",[154,160747,160749],{"className":51866,"code":160748,"filename":54339,"language":51870,"meta":163,"style":163},"import { reactive, toRefs } from 'vue';\n\nconst state = reactive({ name: 'Vue' });\nconst { name } = toRefs(state);\n",[87,160750,160751,160763,160767,160783],{"__ignoreMap":163},[167,160752,160753,160755,160757,160759,160761],{"class":169,"line":170},[167,160754,192],{"class":191},[167,160756,54375],{"class":173},[167,160758,198],{"class":191},[167,160760,51444],{"class":201},[167,160762,24044],{"class":173},[167,160764,160765],{"class":169,"line":188},[167,160766,209],{"emptyLinePlaceholder":208},[167,160768,160769,160771,160773,160775,160777,160779,160781],{"class":169,"line":205},[167,160770,216],{"class":191},[167,160772,22773],{"class":219},[167,160774,223],{"class":191},[167,160776,846],{"class":181},[167,160778,23484],{"class":173},[167,160780,42925],{"class":201},[167,160782,35217],{"class":173},[167,160784,160785,160787,160789,160791,160793,160795,160797],{"class":169,"line":160},[167,160786,216],{"class":191},[167,160788,577],{"class":173},[167,160790,592],{"class":219},[167,160792,23409],{"class":173},[167,160794,267],{"class":191},[167,160796,54418],{"class":181},[167,160798,160799],{"class":173},"(state);\n",[22,160801,160803],{"id":160802},"practical-example-the-most-honest-counter-in-the-world","Practical example: the most honest counter in the world",[154,160805,160807],{"className":156,"code":160806,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref } from 'vue';\n\nconst coffeeCups = ref(0);\n\nconst increment = () => {\n  coffeeCups.value++;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"increment\">\n    Cups consumed: {{ coffeeCups }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,160808,160809,160819,160831,160835,160852,160856,160870,160879,160883,160891,160895,160903,160917,160922,160930],{"__ignoreMap":163},[167,160810,160811,160813,160815,160817],{"class":169,"line":170},[167,160812,174],{"class":173},[167,160814,178],{"class":177},[167,160816,182],{"class":181},[167,160818,185],{"class":173},[167,160820,160821,160823,160825,160827,160829],{"class":169,"line":188},[167,160822,192],{"class":191},[167,160824,195],{"class":173},[167,160826,198],{"class":191},[167,160828,51444],{"class":201},[167,160830,24044],{"class":173},[167,160832,160833],{"class":169,"line":205},[167,160834,209],{"emptyLinePlaceholder":208},[167,160836,160837,160839,160842,160844,160846,160848,160850],{"class":169,"line":160},[167,160838,216],{"class":191},[167,160840,160841],{"class":219}," coffeeCups",[167,160843,223],{"class":191},[167,160845,226],{"class":181},[167,160847,229],{"class":173},[167,160849,1960],{"class":219},[167,160851,24169],{"class":173},[167,160853,160854],{"class":169,"line":238},[167,160855,209],{"emptyLinePlaceholder":208},[167,160857,160858,160860,160862,160864,160866,160868],{"class":169,"line":243},[167,160859,216],{"class":191},[167,160861,49389],{"class":181},[167,160863,223],{"class":191},[167,160865,1469],{"class":173},[167,160867,639],{"class":191},[167,160869,1905],{"class":173},[167,160871,160872,160875,160877],{"class":169,"line":261},[167,160873,160874],{"class":173},"  coffeeCups.value",[167,160876,54500],{"class":191},[167,160878,24044],{"class":173},[167,160880,160881],{"class":169,"line":273},[167,160882,24148],{"class":173},[167,160884,160885,160887,160889],{"class":169,"line":279},[167,160886,282],{"class":173},[167,160888,178],{"class":177},[167,160890,185],{"class":173},[167,160892,160893],{"class":169,"line":289},[167,160894,209],{"emptyLinePlaceholder":208},[167,160896,160897,160899,160901],{"class":169,"line":294},[167,160898,174],{"class":173},[167,160900,299],{"class":177},[167,160902,185],{"class":173},[167,160904,160905,160907,160909,160911,160913,160915],{"class":169,"line":304},[167,160906,307],{"class":173},[167,160908,507],{"class":177},[167,160910,1182],{"class":181},[167,160912,267],{"class":173},[167,160914,49442],{"class":201},[167,160916,185],{"class":173},[167,160918,160919],{"class":169,"line":313},[167,160920,160921],{"class":173},"    Cups consumed: {{ coffeeCups }}\n",[167,160923,160924,160926,160928],{"class":169,"line":161},[167,160925,504],{"class":173},[167,160927,507],{"class":177},[167,160929,185],{"class":173},[167,160931,160932,160934,160936],{"class":169,"line":335},[167,160933,282],{"class":173},[167,160935,299],{"class":177},[167,160937,185],{"class":173},[154,160939,160941],{"className":156,"code":160940,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript>\nimport { ref } from 'vue';\n\nexport default {\n  setup() {\n    const coffeeCups = ref(0);\n    const increment = () => {\n      coffeeCups.value++;\n    };\n    return { coffeeCups, increment };\n  },\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"increment\">\n    Cups consumed: {{ coffeeCups }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[87,160942,160943,160951,160963,160967,160975,160981,160997,161011,161020,161024,161031,161035,161039,161047,161051,161059,161073,161077,161085],{"__ignoreMap":163},[167,160944,160945,160947,160949],{"class":169,"line":170},[167,160946,174],{"class":173},[167,160948,178],{"class":177},[167,160950,185],{"class":173},[167,160952,160953,160955,160957,160959,160961],{"class":169,"line":188},[167,160954,192],{"class":191},[167,160956,195],{"class":173},[167,160958,198],{"class":191},[167,160960,51444],{"class":201},[167,160962,24044],{"class":173},[167,160964,160965],{"class":169,"line":205},[167,160966,209],{"emptyLinePlaceholder":208},[167,160968,160969,160971,160973],{"class":169,"line":160},[167,160970,608],{"class":191},[167,160972,3991],{"class":191},[167,160974,1905],{"class":173},[167,160976,160977,160979],{"class":169,"line":238},[167,160978,9577],{"class":181},[167,160980,763],{"class":173},[167,160982,160983,160985,160987,160989,160991,160993,160995],{"class":169,"line":243},[167,160984,8266],{"class":191},[167,160986,160841],{"class":219},[167,160988,223],{"class":191},[167,160990,226],{"class":181},[167,160992,229],{"class":173},[167,160994,1960],{"class":219},[167,160996,24169],{"class":173},[167,160998,160999,161001,161003,161005,161007,161009],{"class":169,"line":261},[167,161000,8266],{"class":191},[167,161002,49389],{"class":181},[167,161004,223],{"class":191},[167,161006,1469],{"class":173},[167,161008,639],{"class":191},[167,161010,1905],{"class":173},[167,161012,161013,161016,161018],{"class":169,"line":273},[167,161014,161015],{"class":173},"      coffeeCups.value",[167,161017,54500],{"class":191},[167,161019,24044],{"class":173},[167,161021,161022],{"class":169,"line":279},[167,161023,24370],{"class":173},[167,161025,161026,161028],{"class":169,"line":289},[167,161027,1937],{"class":191},[167,161029,161030],{"class":173}," { coffeeCups, increment };\n",[167,161032,161033],{"class":169,"line":294},[167,161034,398],{"class":173},[167,161036,161037],{"class":169,"line":304},[167,161038,24148],{"class":173},[167,161040,161041,161043,161045],{"class":169,"line":313},[167,161042,282],{"class":173},[167,161044,178],{"class":177},[167,161046,185],{"class":173},[167,161048,161049],{"class":169,"line":161},[167,161050,209],{"emptyLinePlaceholder":208},[167,161052,161053,161055,161057],{"class":169,"line":335},[167,161054,174],{"class":173},[167,161056,299],{"class":177},[167,161058,185],{"class":173},[167,161060,161061,161063,161065,161067,161069,161071],{"class":169,"line":341},[167,161062,307],{"class":173},[167,161064,507],{"class":177},[167,161066,1182],{"class":181},[167,161068,267],{"class":173},[167,161070,49442],{"class":201},[167,161072,185],{"class":173},[167,161074,161075],{"class":169,"line":489},[167,161076,160921],{"class":173},[167,161078,161079,161081,161083],{"class":169,"line":495},[167,161080,504],{"class":173},[167,161082,507],{"class":177},[167,161084,185],{"class":173},[167,161086,161087,161089,161091],{"class":169,"line":501},[167,161088,282],{"class":173},[167,161090,299],{"class":177},[167,161092,185],{"class":173},[15,161094,161095],{},"Each click updates the state. Vue detects the change, re-renders what’s necessary, and you never touch the DOM. That’s reactivity understood properly: less imperative code, fewer mental errors, and an interface that does exactly what it should.",[924,161097,54706],{},{"title":163,"searchDepth":188,"depth":188,"links":161099},[161100,161101,161106,161108,161109,161110],{"id":160498,"depth":188,"text":160499},{"id":160532,"depth":188,"text":160533,"children":161102},[161103,161104],{"id":54144,"depth":205,"text":54713},{"id":160567,"depth":205,"text":161105},"Vue 3: the power of Proxy",{"id":160589,"depth":188,"text":161107},"The two pillars: ref() vs reactive()",{"id":160671,"depth":188,"text":160672},{"id":160698,"depth":188,"text":160699},{"id":160802,"depth":188,"text":160803},"Illustration of a magical Vue.js coding laboratory","Explore Vue.js’s reactivity system, from simple analogies to its technical implementation with Proxies, and learn to optimize your applications.",{"title":161114,"goal":161115,"tasks":161116,"starterCode":161121,"solutionHint":161122},"Build a tiny reactive counter","Practice the difference between state, derived state, and effects by creating a small counter with Vue reactivity primitives.",[161117,161118,161119,161120],"Create a counter with ref() and render its current value.","Add a computed value that doubles the counter.","Use watch() to log when the counter reaches 5.","Explain in one sentence which reads are tracked and which writes trigger updates.","\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nwatch(count, (value) => {\n  if (value === 5) {\n    console.log('The counter reached 5')\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Count: {{ count }}\u003C\u002Fbutton>\n  \u003Cp>Doubled: {{ doubled }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","The template and computed getter read count, so Vue tracks those dependencies. Clicking the button writes to count, so Vue triggers the dependent updates.",{"updatedAt":54736,"coverCaption":161124,"author":946,"keywords":161125},"Illustration of a magical Vue.js coding laboratory by TODOvue",[3258,60269,54187,3260,2085,18243],"\u002Fblog\u002Fvue-reactivity-explained.en",[161128],{"headline":160484,"author":161129,"datePublished":54744,"@type":961},{"name":946,"@type":959},{"title":160484,"description":161112},"blog\u002Fvue-reactivity-explained.en",[161133,161134,161135],{"tag":60269,"color":3270},{"tag":65670,"color":5425},{"tag":103272,"color":54752},"qya5EIj1ICg26ginLpti2daetFX6mWUYjNAEjJboDKY",{"id":54084,"title":52629,"body":161138,"cover":54721,"coverAlt":54722,"date":54723,"description":54724,"draft":940,"extension":941,"lab":161673,"locale":943,"meta":161675,"navigation":208,"path":54739,"schemaOrg":161677,"seo":161680,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":54746,"tags":161681,"__hash__":54753},{"type":8,"value":161139,"toc":161662},[161140,161142,161144,161146,161148,161150,161162,161164,161170,161172,161174,161178,161186,161196,161200,161204,161206,161212,161218,161220,161274,161280,161282,161284,161298,161300,161302,161304,161318,161338,161340,161392,161394,161524,161658,161660],[11,161141,52629],{"id":54089},[15,161143,54092],{},[15,161145,54095],{},[22,161147,54099],{"id":54098},[15,161149,54102],{},[15,161151,54105,161152,54109,161154,54113,161156,54116,161158,90,161160,54123],{},[3933,161153,54108],{},[87,161155,54112],{},[3933,161157,54108],{},[3933,161159,54119],{},[3933,161161,54122],{},[15,161163,54126],{},[5367,161165,161166],{},[15,161167,161168,54134],{},[3933,161169,54133],{},[22,161171,54138],{"id":54137},[15,161173,54141],{},[3087,161175,54145,161176],{"id":54144},[87,161177,54148],{},[15,161179,54151,161180,1028,161182,54158,161184,1679],{},[9295,161181,54154],{},[9295,161183,54157],{},[87,161185,54148],{},[33,161187,161188],{},[36,161189,161190,54168,161192,54172,161194,1679],{},[3933,161191,54167],{},[87,161193,54171],{},[87,161195,54175],{},[3087,161197,54179,161198],{"id":54178},[87,161199,22880],{},[15,161201,54184,161202,53871],{},[3933,161203,54187],{},[15,161205,54190],{},[33,161207,161208],{},[36,161209,161210,54198],{},[3933,161211,54197],{},[22,161213,54202,161214,1662,161216],{"id":54201},[87,161215,89],{},[87,161217,93],{},[15,161219,54209],{},[56,161221,161222,161236],{},[59,161223,161224],{},[62,161225,161226,161228,161232],{},[65,161227,51979],{},[65,161229,161230],{},[87,161231,89],{},[65,161233,161234],{},[87,161235,93],{},[75,161237,161238,161246,161256,161266],{},[62,161239,161240,161242,161244],{},[80,161241,54232],{},[80,161243,54235],{},[80,161245,54238],{},[62,161247,161248,161250,161254],{},[80,161249,54243],{},[80,161251,161252],{},[87,161253,22979],{},[80,161255,54250],{},[62,161257,161258,161262,161264],{},[80,161259,6304,161260],{},[87,161261,31997],{},[80,161263,54259],{},[80,161265,54250],{},[62,161267,161268,161270,161272],{},[80,161269,54266],{},[80,161271,54269],{},[80,161273,54272],{},[15,161275,54275,161276,54278,161278,1679],{},[87,161277,2085],{},[87,161279,18243],{},[22,161281,54284],{"id":54283},[15,161283,54287],{},[3035,161285,161286,161290,161294],{},[36,161287,161288,54295],{},[3933,161289,54294],{},[36,161291,161292,54301],{},[3933,161293,54300],{},[36,161295,161296,54307],{},[3933,161297,54306],{},[15,161299,54310],{},[22,161301,54314],{"id":54313},[15,161303,54317],{},[33,161305,161306,161314],{},[36,161307,161308,54329],{},[3933,161309,161310,1028,161312,583],{},[87,161311,23453],{},[87,161313,54328],{},[36,161315,161316,54335],{},[3933,161317,54334],{},[154,161319,161320],{"className":51866,"code":54338,"filename":54339,"language":51870,"meta":163,"style":163},[87,161321,161322],{"__ignoreMap":163},[167,161323,161324,161326,161328,161330,161332,161334,161336],{"class":169,"line":170},[167,161325,216],{"class":191},[167,161327,577],{"class":173},[167,161329,54350],{"class":219},[167,161331,23409],{"class":173},[167,161333,267],{"class":191},[167,161335,54357],{"class":173},[167,161337,54360],{"class":18662},[15,161339,54363],{},[154,161341,161342],{"className":51866,"code":54366,"filename":54339,"language":51870,"meta":163,"style":163},[87,161343,161344,161356,161360,161376],{"__ignoreMap":163},[167,161345,161346,161348,161350,161352,161354],{"class":169,"line":170},[167,161347,192],{"class":191},[167,161349,54375],{"class":173},[167,161351,198],{"class":191},[167,161353,51444],{"class":201},[167,161355,24044],{"class":173},[167,161357,161358],{"class":169,"line":188},[167,161359,209],{"emptyLinePlaceholder":208},[167,161361,161362,161364,161366,161368,161370,161372,161374],{"class":169,"line":205},[167,161363,216],{"class":191},[167,161365,54392],{"class":219},[167,161367,223],{"class":191},[167,161369,846],{"class":181},[167,161371,54399],{"class":173},[167,161373,42925],{"class":201},[167,161375,35217],{"class":173},[167,161377,161378,161380,161382,161384,161386,161388,161390],{"class":169,"line":160},[167,161379,216],{"class":191},[167,161381,577],{"class":173},[167,161383,54350],{"class":219},[167,161385,23409],{"class":173},[167,161387,267],{"class":191},[167,161389,54418],{"class":181},[167,161391,54421],{"class":173},[22,161393,54425],{"id":54424},[154,161395,161396],{"className":156,"code":54428,"filename":3260,"language":162,"meta":163,"style":163},[87,161397,161398,161408,161420,161424,161440,161444,161458,161466,161470,161478,161482,161490,161504,161508,161516],{"__ignoreMap":163},[167,161399,161400,161402,161404,161406],{"class":169,"line":170},[167,161401,174],{"class":173},[167,161403,178],{"class":177},[167,161405,182],{"class":181},[167,161407,185],{"class":173},[167,161409,161410,161412,161414,161416,161418],{"class":169,"line":188},[167,161411,192],{"class":191},[167,161413,195],{"class":173},[167,161415,198],{"class":191},[167,161417,51444],{"class":201},[167,161419,24044],{"class":173},[167,161421,161422],{"class":169,"line":205},[167,161423,209],{"emptyLinePlaceholder":208},[167,161425,161426,161428,161430,161432,161434,161436,161438],{"class":169,"line":160},[167,161427,216],{"class":191},[167,161429,54463],{"class":219},[167,161431,223],{"class":191},[167,161433,226],{"class":181},[167,161435,229],{"class":173},[167,161437,1960],{"class":219},[167,161439,24169],{"class":173},[167,161441,161442],{"class":169,"line":238},[167,161443,209],{"emptyLinePlaceholder":208},[167,161445,161446,161448,161450,161452,161454,161456],{"class":169,"line":243},[167,161447,216],{"class":191},[167,161449,54484],{"class":181},[167,161451,223],{"class":191},[167,161453,1469],{"class":173},[167,161455,639],{"class":191},[167,161457,1905],{"class":173},[167,161459,161460,161462,161464],{"class":169,"line":261},[167,161461,54497],{"class":173},[167,161463,54500],{"class":191},[167,161465,24044],{"class":173},[167,161467,161468],{"class":169,"line":273},[167,161469,24148],{"class":173},[167,161471,161472,161474,161476],{"class":169,"line":279},[167,161473,282],{"class":173},[167,161475,178],{"class":177},[167,161477,185],{"class":173},[167,161479,161480],{"class":169,"line":289},[167,161481,209],{"emptyLinePlaceholder":208},[167,161483,161484,161486,161488],{"class":169,"line":294},[167,161485,174],{"class":173},[167,161487,299],{"class":177},[167,161489,185],{"class":173},[167,161491,161492,161494,161496,161498,161500,161502],{"class":169,"line":304},[167,161493,307],{"class":173},[167,161495,507],{"class":177},[167,161497,1182],{"class":181},[167,161499,267],{"class":173},[167,161501,54539],{"class":201},[167,161503,185],{"class":173},[167,161505,161506],{"class":169,"line":313},[167,161507,54546],{"class":173},[167,161509,161510,161512,161514],{"class":169,"line":161},[167,161511,504],{"class":173},[167,161513,507],{"class":177},[167,161515,185],{"class":173},[167,161517,161518,161520,161522],{"class":169,"line":335},[167,161519,282],{"class":173},[167,161521,299],{"class":177},[167,161523,185],{"class":173},[154,161525,161526],{"className":156,"code":54565,"filename":3973,"language":162,"meta":163,"style":163},[87,161527,161528,161536,161544,161550,161556,161564,161568,161572,161576,161582,161592,161596,161600,161604,161612,161616,161624,161638,161642,161650],{"__ignoreMap":163},[167,161529,161530,161532,161534],{"class":169,"line":170},[167,161531,174],{"class":173},[167,161533,178],{"class":177},[167,161535,185],{"class":173},[167,161537,161538,161540,161542],{"class":169,"line":188},[167,161539,608],{"class":191},[167,161541,3991],{"class":191},[167,161543,1905],{"class":173},[167,161545,161546,161548],{"class":169,"line":205},[167,161547,7176],{"class":181},[167,161549,763],{"class":173},[167,161551,161552,161554],{"class":169,"line":160},[167,161553,1937],{"class":191},[167,161555,1905],{"class":173},[167,161557,161558,161560,161562],{"class":169,"line":238},[167,161559,54600],{"class":173},[167,161561,1960],{"class":219},[167,161563,393],{"class":173},[167,161565,161566],{"class":169,"line":243},[167,161567,24370],{"class":173},[167,161569,161570],{"class":169,"line":261},[167,161571,398],{"class":173},[167,161573,161574],{"class":169,"line":273},[167,161575,4419],{"class":173},[167,161577,161578,161580],{"class":169,"line":279},[167,161579,54621],{"class":181},[167,161581,763],{"class":173},[167,161583,161584,161586,161588,161590],{"class":169,"line":289},[167,161585,741],{"class":219},[167,161587,54630],{"class":173},[167,161589,54500],{"class":191},[167,161591,24044],{"class":173},[167,161593,161594],{"class":169,"line":294},[167,161595,755],{"class":173},[167,161597,161598],{"class":169,"line":304},[167,161599,398],{"class":173},[167,161601,161602],{"class":169,"line":313},[167,161603,24148],{"class":173},[167,161605,161606,161608,161610],{"class":169,"line":161},[167,161607,282],{"class":173},[167,161609,178],{"class":177},[167,161611,185],{"class":173},[167,161613,161614],{"class":169,"line":335},[167,161615,209],{"emptyLinePlaceholder":208},[167,161617,161618,161620,161622],{"class":169,"line":341},[167,161619,174],{"class":173},[167,161621,299],{"class":177},[167,161623,185],{"class":173},[167,161625,161626,161628,161630,161632,161634,161636],{"class":169,"line":489},[167,161627,307],{"class":173},[167,161629,507],{"class":177},[167,161631,1182],{"class":181},[167,161633,267],{"class":173},[167,161635,54539],{"class":201},[167,161637,185],{"class":173},[167,161639,161640],{"class":169,"line":495},[167,161641,54546],{"class":173},[167,161643,161644,161646,161648],{"class":169,"line":501},[167,161645,504],{"class":173},[167,161647,507],{"class":177},[167,161649,185],{"class":173},[167,161651,161652,161654,161656],{"class":169,"line":512},[167,161653,282],{"class":173},[167,161655,299],{"class":177},[167,161657,185],{"class":173},[15,161659,54703],{},[924,161661,54706],{},{"title":163,"searchDepth":188,"depth":188,"links":161663},[161664,161665,161669,161670,161671,161672],{"id":54098,"depth":188,"text":54099},{"id":54137,"depth":188,"text":54138,"children":161666},[161667,161668],{"id":54144,"depth":205,"text":54713},{"id":54178,"depth":205,"text":54715},{"id":54201,"depth":188,"text":54717},{"id":54283,"depth":188,"text":54284},{"id":54313,"depth":188,"text":54314},{"id":54424,"depth":188,"text":54425},{"title":54726,"goal":54727,"tasks":161674,"starterCode":54733,"solutionHint":54734},[54729,54730,54731,54732],{"updatedAt":54736,"coverCaption":54737,"author":946,"keywords":161676},[3258,3269,54187,3260,2085,18243],[161678],{"headline":54742,"author":161679,"datePublished":54744,"@type":961},{"name":946,"@type":959},{"title":52629,"description":54724},[161682,161683,161684],{"tag":3269,"color":3270},{"tag":5424,"color":5425},{"tag":54751,"color":54752},{"id":161686,"title":161687,"body":161688,"cover":57603,"coverAlt":161829,"date":57605,"description":161830,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":161831,"navigation":208,"path":161833,"schemaOrg":161834,"seo":161837,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":161838,"tags":161839,"__hash__":161843},"blog\u002Fblog\u002Fwelcome-to-todovue.en.md","TODOvue: A space dedicated to the Vue.js ecosystem",{"type":8,"value":161689,"toc":161823},[161690,161696,161702,161712,161716,161719,161768,161772,161778,161784,161790,161794,161800,161804,161810,161813,161815],[11,161691,161693,161694,6641],{"id":161692},"welcome-to-todovue","Welcome to ",[3933,161695,946],{},[15,161697,161698,161699,161701],{},"This space was born from a clear need: to establish a meeting point for developers who, like me, find the ",[3933,161700,3258],{}," ecosystem to be one of the most powerful, elegant, and efficient toolsets for building the modern web.",[15,161703,161704,161706,161707,1025,161709,161711],{},[3933,161705,946],{}," is more than just a blog; it is a technical project dedicated to breaking down every corner of ",[3933,161708,951],{},[3933,161710,6307],{},", and the array of libraries that optimize our daily workflow.",[22,161713,161715],{"id":161714},"what-to-expect-from-this-blog","What to expect from this blog?",[15,161717,161718],{},"Our goal is to go beyond introductory tutorials. At TODOvue, we will deep-dive into core pillars for professional development:",[33,161720,161721,161733,161746,161755],{},[36,161722,161723,161726,161727,161729,161730,161732],{},[3933,161724,161725],{},"Design Patterns and Composition",": Advanced use of the ",[3933,161728,3260],{},", reusability patterns, and professional ",[9295,161731,16763],{}," design.",[36,161734,161735,161738,161739,1025,161741,1025,161743,161745],{},[3933,161736,161737],{},"The Nuxt Ecosystem",": Advanced rendering strategies (",[3933,161740,978],{},[3933,161742,57502],{},[3933,161744,57505],{},"), module management, and optimized deployment.",[36,161747,161748,1108,161751,161754],{},[3933,161749,161750],{},"Performance and Optimization",[9295,161752,161753],{},"Code-splitting"," techniques, bundle optimization, and strategies to achieve peak client-side performance.",[36,161756,161757,161760,161761,1025,161763,1025,161765,161767],{},[3933,161758,161759],{},"Tools and Libraries",": In-depth analysis of ",[3933,161762,950],{},[3933,161764,56669],{},[3933,161766,55634],{},", and the most disruptive emerging proposals from the community.",[22,161769,161771],{"id":161770},"dogfooding-built-with-what-we-teach","\"Dogfooding\": Built with what we teach",[15,161773,161774,161775,161777],{},"A distinguishing aspect of this blog is its own architecture. Everything you interact with on this platform has been developed following ",[3933,161776,57539],{}," principles.",[15,161779,161780,161781,161783],{},"I have decided that every piece of TODOvue—from the atoms (buttons) to the article rendering engine—lives as an independent component published on ",[3933,161782,57545],{},". While the primary focus is educational content, the infrastructure is fully transparent and open for anyone wishing to integrate it into their own projects.",[15,161785,161786,161787,161789],{},"We believe in ",[3933,161788,57552],{}," not just as a philosophy, but as an engineering practice. If a component is robust enough to power this blog, it should be available to the community in the NPM registry.",[22,161791,161793],{"id":161792},"why-now","Why now?",[15,161795,161796,161797,161799],{},"Vue 3 has reached an exceptional state of maturity. Thanks to the adoption of ",[87,161798,1008],{},", the stability of Nuxt 3, and the speed of Vite, frontend development has never been more rewarding. However, evolution is constant: new challenges, breaking changes, and architectural patterns emerge that deserve to be documented and analyzed with technical rigor.",[22,161801,161803],{"id":161802},"join-the-conversation","Join the conversation",[15,161805,161806,161807,161809],{},"This is the beginning of a continuous learning journey. ",[3933,161808,946],{}," aims to be a reliable source of information and a space for knowledge exchange.",[15,161811,161812],{},"I invite you to explore the content, experiment with the components that power this site, and, above all, maintain your curiosity for this framework that we are so passionate about.",[44267,161814],{},[15,161816,161817,161820,161821],{},[3933,161818,161819],{},"Is there a specific Vue or Nuxt topic you'd like us to cover first?","\nGet in touch! ",[19092,161822,57596],{"href":57595},{"title":163,"searchDepth":188,"depth":188,"links":161824},[161825,161826,161827,161828],{"id":161714,"depth":188,"text":161715},{"id":161770,"depth":188,"text":161771},{"id":161792,"depth":188,"text":161793},{"id":161802,"depth":188,"text":161803},"TODOvue logo with source code background","Welcome to TODOvue. A technical blog designed by and for developers, where we deep-dive into Vue 3, Nuxt, and modern component architecture.",{"updatedAt":54736,"coverCaption":161832},"Exploring the Vue.js universe from end to end","\u002Fblog\u002Fwelcome-to-todovue.en",[161835],{"headline":161687,"author":161836,"datePublished":57613,"@type":961},{"name":946,"@type":959},{"title":161687,"description":161830},"blog\u002Fwelcome-to-todovue.en",[161840,161841,161842],{"tag":946,"color":55611},{"tag":57619,"color":57620},{"tag":103274,"color":55617},"B8SdY6ptY_TGW3ZjHN6IVtVoYvhSxQU-ew7NnmQ0TnI",{"id":57446,"title":57447,"body":161845,"cover":57603,"coverAlt":57604,"date":57605,"description":57606,"draft":940,"extension":941,"lab":942,"locale":943,"meta":161949,"navigation":208,"path":57609,"schemaOrg":161950,"seo":161953,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":57615,"tags":161954,"__hash__":57622},{"type":8,"value":161846,"toc":161943},[161847,161851,161855,161863,161865,161867,161903,161905,161909,161913,161917,161919,161927,161929,161933,161935,161937],[11,161848,57453,161849,6641],{"id":57452},[3933,161850,946],{},[15,161852,57458,161853,57461],{},[3933,161854,3258],{},[15,161856,161857,57466,161859,1025,161861,57471],{},[3933,161858,946],{},[3933,161860,951],{},[3933,161862,6307],{},[22,161864,57475],{"id":57474},[15,161866,57478],{},[33,161868,161869,161877,161887,161893],{},[36,161870,161871,57486,161873,57489,161875,1679],{},[3933,161872,57485],{},[3933,161874,3260],{},[9295,161876,1629],{},[36,161878,161879,57497,161881,1025,161883,1025,161885,57506],{},[3933,161880,57496],{},[3933,161882,978],{},[3933,161884,57502],{},[3933,161886,57505],{},[36,161888,161889,57512,161891,57516],{},[3933,161890,57511],{},[9295,161892,57515],{},[36,161894,161895,57522,161897,1025,161899,1025,161901,57529],{},[3933,161896,57521],{},[3933,161898,950],{},[3933,161900,56669],{},[3933,161902,55634],{},[22,161904,57533],{"id":57532},[15,161906,57536,161907,1679],{},[3933,161908,57539],{},[15,161910,57542,161911,57546],{},[3933,161912,57545],{},[15,161914,57549,161915,57553],{},[3933,161916,57552],{},[22,161918,57557],{"id":57556},[15,161920,57560,161921,57563,161923,57567,161925,57571],{},[87,161922,1008],{},[9295,161924,57566],{},[9295,161926,57570],{},[22,161928,57575],{"id":57574},[15,161930,57578,161931,57581],{},[3933,161932,946],{},[15,161934,57584],{},[44267,161936],{},[15,161938,161939,57592,161941],{},[3933,161940,57591],{},[19092,161942,57596],{"href":57595},{"title":163,"searchDepth":188,"depth":188,"links":161944},[161945,161946,161947,161948],{"id":57474,"depth":188,"text":57475},{"id":57532,"depth":188,"text":57533},{"id":57556,"depth":188,"text":57557},{"id":57574,"depth":188,"text":57575},{"updatedAt":54736,"coverCaption":57608},[161951],{"headline":57447,"author":161952,"datePublished":57613,"@type":961},{"name":946,"@type":959},{"title":57447,"description":57606},[161955,161956,161957],{"tag":946,"color":55611},{"tag":57619,"color":57620},{"tag":55616,"color":55617},{"id":161959,"title":161960,"body":161961,"cover":162585,"coverAlt":118825,"date":57428,"description":162586,"draft":940,"extension":941,"lab":942,"locale":60249,"meta":162587,"navigation":208,"path":162590,"schemaOrg":162591,"seo":162594,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":162595,"tags":162596,"__hash__":162600},"blog\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en.md","What is Vue.js and Why Should You Use It?",{"type":8,"value":161962,"toc":162567},[161963,161967,161973,161979,161982,161986,161992,161998,162003,162009,162020,162024,162030,162243,162452,162463,162467,162470,162474,162486,162490,162500,162504,162510,162515,162521,162535,162541,162546,162552,162557,162559,162562,162565],[11,161964,161966],{"id":161965},"vuejs-the-progressive-framework-for-the-modern-web","Vue.js: The Progressive Framework for the Modern Web",[15,161968,161969,161970,161972],{},"In the saturated JavaScript ecosystem, choosing a frontend tool can feel like trying to hit a moving target. However, ",[3933,161971,3258],{}," has managed to position itself not only as an alternative to giants like React or Angular, but as the preferred choice for those seeking a balance between power, simplicity, and performance.",[15,161974,161975,161978],{},[3933,161976,161977],{},"Vue.js is an open-source JavaScript framework"," created by Evan You in 2014, specifically designed to build interactive user interfaces and single-page applications (SPA). Its philosophy centers on being accessible, versatile, and efficient, prioritizing developer experience without compromising performance.",[15,161980,161981],{},"But what exactly makes Vue special and why should you consider it for your next project in 2025?",[22,161983,161985],{"id":161984},"the-progressive-framework-concept","The \"Progressive Framework\" Concept",[15,161987,161988,161989,161991],{},"Unlike other monolithic frameworks that force you to adopt their entire structure from day one, Vue defines itself as ",[3933,161990,103140],{},". This means its complexity scales according to your needs:",[3087,161993,161995],{"id":161994},"use-as-a-library",[3933,161996,161997],{},"Use as a library:",[33,161999,162000],{},[36,162001,162002],{},"You can integrate Vue into an existing page via a simple CDN to handle small widgets or add light interactivity without rewriting your entire backend.",[3087,162004,162006],{"id":162005},"use-as-a-framework-spa",[3933,162007,162008],{},"Use as a Framework (SPA):",[33,162010,162011],{},[36,162012,162013,162014,162016,162017,162019],{},"You can build robust Single Page Applications using its complete official ecosystem: ",[3933,162015,56669],{}," for navigation and ",[3933,162018,950],{}," for global state management.",[22,162021,162023],{"id":162022},"transparent-and-efficient-reactivity","Transparent and Efficient Reactivity",[15,162025,162026,162027,162029],{},"The heart of Vue is its reactivity system. In version 3, Vue uses native JavaScript ",[87,162028,22880],{}," to intercept data changes. This allows the framework to know exactly which part of the DOM needs to be updated, avoiding unnecessary renders and heavy node comparison processes.",[154,162031,162033],{"className":156,"code":162032,"filename":3260,"language":162,"meta":163,"style":163},"\u003Cscript setup>\nimport { ref, computed } from 'vue';\n\n\u002F\u002F Simple reactive state\nconst counter = ref(0);\n\n\u002F\u002F Computed property: recalculates only when 'counter' changes\nconst isEven = computed(() => counter.value % 2 === 0);\n\nconst increment = () => {\n  counter.value++;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"counter\">\n    \u003Ch3>Counter: {{ counter }}\u003C\u002Fh3>\n    \u003Cp>The number is: {{ isEven ? 'Even' : 'Odd' }}\u003C\u002Fp>\n    \u003Cbutton @click=\"increment\">Increment\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[87,162034,162035,162045,162057,162061,162066,162082,162086,162091,162119,162123,162137,162145,162149,162157,162161,162169,162184,162196,162209,162227,162235],{"__ignoreMap":163},[167,162036,162037,162039,162041,162043],{"class":169,"line":170},[167,162038,174],{"class":173},[167,162040,178],{"class":177},[167,162042,182],{"class":181},[167,162044,185],{"class":173},[167,162046,162047,162049,162051,162053,162055],{"class":169,"line":188},[167,162048,192],{"class":191},[167,162050,18285],{"class":173},[167,162052,198],{"class":191},[167,162054,51444],{"class":201},[167,162056,24044],{"class":173},[167,162058,162059],{"class":169,"line":205},[167,162060,209],{"emptyLinePlaceholder":208},[167,162062,162063],{"class":169,"line":160},[167,162064,162065],{"class":18662},"\u002F\u002F Simple reactive state\n",[167,162067,162068,162070,162072,162074,162076,162078,162080],{"class":169,"line":238},[167,162069,216],{"class":191},[167,162071,28100],{"class":219},[167,162073,223],{"class":191},[167,162075,226],{"class":181},[167,162077,229],{"class":173},[167,162079,1960],{"class":219},[167,162081,24169],{"class":173},[167,162083,162084],{"class":169,"line":243},[167,162085,209],{"emptyLinePlaceholder":208},[167,162087,162088],{"class":169,"line":261},[167,162089,162090],{"class":18662},"\u002F\u002F Computed property: recalculates only when 'counter' changes\n",[167,162092,162093,162095,162098,162100,162102,162104,162106,162109,162111,162113,162115,162117],{"class":169,"line":273},[167,162094,216],{"class":191},[167,162096,162097],{"class":219}," isEven",[167,162099,223],{"class":191},[167,162101,1898],{"class":181},[167,162103,1493],{"class":173},[167,162105,639],{"class":191},[167,162107,162108],{"class":173}," counter.value ",[167,162110,56946],{"class":191},[167,162112,18332],{"class":219},[167,162114,56951],{"class":191},[167,162116,44659],{"class":219},[167,162118,24169],{"class":173},[167,162120,162121],{"class":169,"line":279},[167,162122,209],{"emptyLinePlaceholder":208},[167,162124,162125,162127,162129,162131,162133,162135],{"class":169,"line":289},[167,162126,216],{"class":191},[167,162128,49389],{"class":181},[167,162130,223],{"class":191},[167,162132,1469],{"class":173},[167,162134,639],{"class":191},[167,162136,1905],{"class":173},[167,162138,162139,162141,162143],{"class":169,"line":294},[167,162140,106793],{"class":173},[167,162142,54500],{"class":191},[167,162144,24044],{"class":173},[167,162146,162147],{"class":169,"line":304},[167,162148,24148],{"class":173},[167,162150,162151,162153,162155],{"class":169,"line":313},[167,162152,282],{"class":173},[167,162154,178],{"class":177},[167,162156,185],{"class":173},[167,162158,162159],{"class":169,"line":161},[167,162160,209],{"emptyLinePlaceholder":208},[167,162162,162163,162165,162167],{"class":169,"line":335},[167,162164,174],{"class":173},[167,162166,299],{"class":177},[167,162168,185],{"class":173},[167,162170,162171,162173,162175,162177,162179,162182],{"class":169,"line":341},[167,162172,307],{"class":173},[167,162174,1242],{"class":177},[167,162176,1245],{"class":181},[167,162178,267],{"class":173},[167,162180,162181],{"class":201},"\"counter\"",[167,162183,185],{"class":173},[167,162185,162186,162188,162190,162192,162194],{"class":169,"line":489},[167,162187,1257],{"class":173},[167,162189,3087],{"class":177},[167,162191,106681],{"class":173},[167,162193,3087],{"class":177},[167,162195,185],{"class":173},[167,162197,162198,162200,162202,162205,162207],{"class":169,"line":495},[167,162199,1257],{"class":173},[167,162201,15],{"class":177},[167,162203,162204],{"class":173},">The number is: {{ isEven ? 'Even' : 'Odd' }}\u003C\u002F",[167,162206,15],{"class":177},[167,162208,185],{"class":173},[167,162210,162211,162213,162215,162217,162219,162221,162223,162225],{"class":169,"line":501},[167,162212,1257],{"class":173},[167,162214,507],{"class":177},[167,162216,1182],{"class":181},[167,162218,267],{"class":173},[167,162220,49442],{"class":201},[167,162222,124777],{"class":173},[167,162224,507],{"class":177},[167,162226,185],{"class":173},[167,162228,162229,162231,162233],{"class":169,"line":512},[167,162230,504],{"class":173},[167,162232,1242],{"class":177},[167,162234,185],{"class":173},[167,162236,162237,162239,162241],{"class":169,"line":781},[167,162238,282],{"class":173},[167,162240,299],{"class":177},[167,162242,185],{"class":173},[154,162244,162246],{"className":156,"code":162245,"filename":3973,"language":162,"meta":163,"style":163},"\u003Cscript>\nexport default {\n  data() {\n    return {\n      counter: 0\n    };\n  },\n  computed: {\n    isEven() {\n      return this.counter % 2 === 0;\n    }\n  },\n  methods: {\n    increment() {\n      this.counter++;\n    }\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"counter\">\n    \u003Ch3>Counter: {{ counter }}\u003C\u002Fh3>\n    \u003Cp>The number is: {{ isEven ? 'Even' : 'Odd' }}\u003C\u002Fp>\n    \u003Cbutton @click=\"increment\">Increment\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[87,162247,162248,162256,162264,162270,162276,162282,162286,162290,162294,162301,162320,162324,162328,162332,162338,162348,162352,162356,162360,162368,162372,162380,162394,162406,162418,162436,162444],{"__ignoreMap":163},[167,162249,162250,162252,162254],{"class":169,"line":170},[167,162251,174],{"class":173},[167,162253,178],{"class":177},[167,162255,185],{"class":173},[167,162257,162258,162260,162262],{"class":169,"line":188},[167,162259,608],{"class":191},[167,162261,3991],{"class":191},[167,162263,1905],{"class":173},[167,162265,162266,162268],{"class":169,"line":205},[167,162267,7176],{"class":181},[167,162269,763],{"class":173},[167,162271,162272,162274],{"class":169,"line":160},[167,162273,1937],{"class":191},[167,162275,1905],{"class":173},[167,162277,162278,162280],{"class":169,"line":238},[167,162279,28238],{"class":173},[167,162281,10681],{"class":219},[167,162283,162284],{"class":169,"line":243},[167,162285,24370],{"class":173},[167,162287,162288],{"class":169,"line":261},[167,162289,398],{"class":173},[167,162291,162292],{"class":169,"line":273},[167,162293,8755],{"class":173},[167,162295,162296,162299],{"class":169,"line":279},[167,162297,162298],{"class":181},"    isEven",[167,162300,763],{"class":173},[167,162302,162303,162305,162307,162310,162312,162314,162316,162318],{"class":169,"line":289},[167,162304,8767],{"class":191},[167,162306,7351],{"class":219},[167,162308,162309],{"class":173},".counter ",[167,162311,56946],{"class":191},[167,162313,18332],{"class":219},[167,162315,56951],{"class":191},[167,162317,44659],{"class":219},[167,162319,24044],{"class":173},[167,162321,162322],{"class":169,"line":294},[167,162323,4049],{"class":173},[167,162325,162326],{"class":169,"line":304},[167,162327,398],{"class":173},[167,162329,162330],{"class":169,"line":313},[167,162331,4419],{"class":173},[167,162333,162334,162336],{"class":169,"line":161},[167,162335,49514],{"class":181},[167,162337,763],{"class":173},[167,162339,162340,162342,162344,162346],{"class":169,"line":335},[167,162341,741],{"class":219},[167,162343,107036],{"class":173},[167,162345,54500],{"class":191},[167,162347,24044],{"class":173},[167,162349,162350],{"class":169,"line":341},[167,162351,4049],{"class":173},[167,162353,162354],{"class":169,"line":489},[167,162355,3492],{"class":173},[167,162357,162358],{"class":169,"line":495},[167,162359,24148],{"class":173},[167,162361,162362,162364,162366],{"class":169,"line":501},[167,162363,282],{"class":173},[167,162365,178],{"class":177},[167,162367,185],{"class":173},[167,162369,162370],{"class":169,"line":512},[167,162371,209],{"emptyLinePlaceholder":208},[167,162373,162374,162376,162378],{"class":169,"line":781},[167,162375,174],{"class":173},[167,162377,299],{"class":177},[167,162379,185],{"class":173},[167,162381,162382,162384,162386,162388,162390,162392],{"class":169,"line":786},[167,162383,307],{"class":173},[167,162385,1242],{"class":177},[167,162387,1245],{"class":181},[167,162389,267],{"class":173},[167,162391,162181],{"class":201},[167,162393,185],{"class":173},[167,162395,162396,162398,162400,162402,162404],{"class":169,"line":2678},[167,162397,1257],{"class":173},[167,162399,3087],{"class":177},[167,162401,106681],{"class":173},[167,162403,3087],{"class":177},[167,162405,185],{"class":173},[167,162407,162408,162410,162412,162414,162416],{"class":169,"line":2692},[167,162409,1257],{"class":173},[167,162411,15],{"class":177},[167,162413,162204],{"class":173},[167,162415,15],{"class":177},[167,162417,185],{"class":173},[167,162419,162420,162422,162424,162426,162428,162430,162432,162434],{"class":169,"line":3575},[167,162421,1257],{"class":173},[167,162423,507],{"class":177},[167,162425,1182],{"class":181},[167,162427,267],{"class":173},[167,162429,49442],{"class":201},[167,162431,124777],{"class":173},[167,162433,507],{"class":177},[167,162435,185],{"class":173},[167,162437,162438,162440,162442],{"class":169,"line":5028},[167,162439,504],{"class":173},[167,162441,1242],{"class":177},[167,162443,185],{"class":173},[167,162445,162446,162448,162450],{"class":169,"line":5037},[167,162447,282],{"class":173},[167,162449,299],{"class":177},[167,162451,185],{"class":173},[15,162453,162454,162455,162458,162459,162462],{},"This simple example demonstrates how Vue automatically tracks dependencies: when ",[87,162456,162457],{},"counter"," changes, both the number display and the computed property ",[87,162460,162461],{},"isEven"," update without manual intervention.",[22,162464,162466],{"id":162465},"api-versatility-options-vs-composition","API Versatility: Options vs. Composition",[15,162468,162469],{},"One of Vue's greatest strengths is its duality, adapting to the team's experience level and the scale of the problem:",[3087,162471,162472],{"id":57309},[3933,162473,57312],{},[33,162475,162476],{},[36,162477,162478,162479,1025,162481,1025,162483,162485],{},"The classic approach. Organizes code by \"options\" (",[87,162480,17983],{},[87,162482,17992],{},[87,162484,1661],{},"). It's extremely readable and recommended for those making the transition from basic HTML\u002FJS or jQuery.",[3087,162487,162488],{"id":57327},[3933,162489,56731],{},[33,162491,162492],{},[36,162493,162494,162495,162497,162498,1679],{},"Introduced in Vue 3, it allows grouping logic by functionality instead of by option types. It's the ultimate tool for large projects, as it facilitates the creation of reusable logic (",[3933,162496,954],{},") and offers native and robust integration with ",[3933,162499,55813],{},[22,162501,162503],{"id":162502},"why-choose-vuejs-today","Why Choose Vue.js Today?",[3087,162505,162507],{"id":162506},"gentle-learning-curve",[3933,162508,162509],{},"Gentle Learning Curve:",[33,162511,162512],{},[36,162513,162514],{},"If you master the fundamentals of the web (HTML, CSS, and JS), you'll be productive in Vue within hours. Its template syntax is familiar and reduces cognitive load.",[3087,162516,162518],{"id":162517},"unified-ecosystem",[3933,162519,162520],{},"Unified Ecosystem:",[33,162522,162523],{},[36,162524,162525,162526,162528,162529,162531,162532,162534],{},"Vue's official team maintains critical tools: ",[3933,162527,55634],{}," (the fastest bundler on the market), ",[3933,162530,950],{}," (state management), and ",[3933,162533,57374],{},". This ensures all pieces fit perfectly after each update.",[3087,162536,162538],{"id":162537},"elite-performance",[3933,162539,162540],{},"Elite Performance:",[33,162542,162543],{},[36,162544,162545],{},"Thanks to an intelligent compiler that optimizes templates at build time, Vue generates lightweight runtime code that often surpasses frameworks with larger market share in speed.",[3087,162547,162549],{"id":162548},"reference-documentation",[3933,162550,162551],{},"Reference Documentation:",[33,162553,162554],{},[36,162555,162556],{},"It's widely considered the gold standard in the industry for being clear, always up-to-date, and offering examples that work \"right out of the box\".",[22,162558,73913],{"id":73912},[15,162560,162561],{},"Vue.js doesn't try to reinvent the web, but rather to make working with it more pleasant and efficient. It's the logical choice if you're looking for a framework that grows with your project, offering the flexibility of a small library with the power of a high-level enterprise environment.",[15,162563,162564],{},"Whether you're building your first web application or migrating a legacy project, Vue accompanies you at every stage without imposing premature architectural decisions. Its active community, corporate support from companies like Alibaba, and constant innovation from the core team ensure that Vue will remain relevant in the years to come.",[924,162566,57408],{},{"title":163,"searchDepth":188,"depth":188,"links":162568},[162569,162573,162574,162578,162584],{"id":161984,"depth":188,"text":161985,"children":162570},[162571,162572],{"id":161994,"depth":205,"text":161997},{"id":162005,"depth":205,"text":162008},{"id":162022,"depth":188,"text":162023},{"id":162465,"depth":188,"text":162466,"children":162575},[162576,162577],{"id":57309,"depth":205,"text":57312},{"id":57327,"depth":205,"text":56731},{"id":162502,"depth":188,"text":162503,"children":162579},[162580,162581,162582,162583],{"id":162506,"depth":205,"text":162509},{"id":162517,"depth":205,"text":162520},{"id":162537,"depth":205,"text":162540},{"id":162548,"depth":205,"text":162551},{"id":73912,"depth":188,"text":73913},"https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1766101056\u002FWhat_is_Vuejs_and_Why_Should_You_Use_It_mk5pmg.png","Discover Vue.js, a progressive JavaScript framework, and learn why it's an excellent choice for developing modern and reactive web applications.",{"updatedAt":54736,"coverCaption":162588,"author":946,"keywords":162589},"Exploring Vue.js: The progressive framework for the modern web","vue.js, javascript, framework, frontend, spa, reactivity, composition api, vue 3","\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en",[162592],{"headline":161960,"author":162593,"datePublished":57437,"@type":961},{"name":946,"@type":959},{"title":161960,"description":162586},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.en",[162597,162598,162599],{"tag":103274,"color":55617},{"tag":65670,"color":5425},{"tag":103272,"color":54752},"ccmKez_9DmTyQhWGubjPap61sk5CUTOpTGPi2oGnPKU",{"id":56794,"title":56795,"body":162602,"cover":57427,"coverAlt":55595,"date":57428,"description":57429,"draft":940,"extension":941,"lab":942,"locale":943,"meta":163162,"navigation":208,"path":57433,"schemaOrg":163163,"seo":163166,"series":942,"seriesDescription":942,"seriesOrder":942,"seriesTitle":942,"slug":942,"stem":57439,"tags":163167,"__hash__":57444},{"type":8,"value":162603,"toc":163144},[162604,162606,162610,162614,162616,162618,162622,162626,162630,162634,162642,162644,162648,162854,163060,163066,163068,163070,163074,163084,163088,163096,163098,163102,163106,163110,163120,163124,163128,163132,163136,163138,163140,163142],[11,162605,56801],{"id":56800},[15,162607,56804,162608,56807],{},[3933,162609,3258],{},[15,162611,162612,56813],{},[3933,162613,56812],{},[15,162615,56816],{},[22,162617,56820],{"id":56819},[15,162619,56823,162620,56826],{},[3933,162621,56645],{},[3087,162623,162624],{"id":56829},[3933,162625,56832],{},[33,162627,162628],{},[36,162629,56837],{},[3087,162631,162632],{"id":56840},[3933,162633,56843],{},[33,162635,162636],{},[36,162637,56848,162638,56851,162640,56854],{},[3933,162639,56669],{},[3933,162641,950],{},[22,162643,56858],{"id":56857},[15,162645,56861,162646,56864],{},[87,162647,22880],{},[154,162649,162650],{"className":156,"code":56867,"filename":3260,"language":162,"meta":163,"style":163},[87,162651,162652,162662,162674,162678,162682,162698,162702,162706,162732,162736,162750,162758,162762,162770,162774,162782,162796,162808,162820,162838,162846],{"__ignoreMap":163},[167,162653,162654,162656,162658,162660],{"class":169,"line":170},[167,162655,174],{"class":173},[167,162657,178],{"class":177},[167,162659,182],{"class":181},[167,162661,185],{"class":173},[167,162663,162664,162666,162668,162670,162672],{"class":169,"line":188},[167,162665,192],{"class":191},[167,162667,18285],{"class":173},[167,162669,198],{"class":191},[167,162671,51444],{"class":201},[167,162673,24044],{"class":173},[167,162675,162676],{"class":169,"line":205},[167,162677,209],{"emptyLinePlaceholder":208},[167,162679,162680],{"class":169,"line":160},[167,162681,56900],{"class":18662},[167,162683,162684,162686,162688,162690,162692,162694,162696],{"class":169,"line":238},[167,162685,216],{"class":191},[167,162687,56138],{"class":219},[167,162689,223],{"class":191},[167,162691,226],{"class":181},[167,162693,229],{"class":173},[167,162695,1960],{"class":219},[167,162697,24169],{"class":173},[167,162699,162700],{"class":169,"line":243},[167,162701,209],{"emptyLinePlaceholder":208},[167,162703,162704],{"class":169,"line":261},[167,162705,56925],{"class":18662},[167,162707,162708,162710,162712,162714,162716,162718,162720,162722,162724,162726,162728,162730],{"class":169,"line":273},[167,162709,216],{"class":191},[167,162711,56932],{"class":219},[167,162713,223],{"class":191},[167,162715,1898],{"class":181},[167,162717,1493],{"class":173},[167,162719,639],{"class":191},[167,162721,56943],{"class":173},[167,162723,56946],{"class":191},[167,162725,18332],{"class":219},[167,162727,56951],{"class":191},[167,162729,44659],{"class":219},[167,162731,24169],{"class":173},[167,162733,162734],{"class":169,"line":279},[167,162735,209],{"emptyLinePlaceholder":208},[167,162737,162738,162740,162742,162744,162746,162748],{"class":169,"line":289},[167,162739,216],{"class":191},[167,162741,54484],{"class":181},[167,162743,223],{"class":191},[167,162745,1469],{"class":173},[167,162747,639],{"class":191},[167,162749,1905],{"class":173},[167,162751,162752,162754,162756],{"class":169,"line":294},[167,162753,56176],{"class":173},[167,162755,54500],{"class":191},[167,162757,24044],{"class":173},[167,162759,162760],{"class":169,"line":304},[167,162761,24148],{"class":173},[167,162763,162764,162766,162768],{"class":169,"line":313},[167,162765,282],{"class":173},[167,162767,178],{"class":177},[167,162769,185],{"class":173},[167,162771,162772],{"class":169,"line":161},[167,162773,209],{"emptyLinePlaceholder":208},[167,162775,162776,162778,162780],{"class":169,"line":335},[167,162777,174],{"class":173},[167,162779,299],{"class":177},[167,162781,185],{"class":173},[167,162783,162784,162786,162788,162790,162792,162794],{"class":169,"line":341},[167,162785,307],{"class":173},[167,162787,1242],{"class":177},[167,162789,1245],{"class":181},[167,162791,267],{"class":173},[167,162793,57018],{"class":201},[167,162795,185],{"class":173},[167,162797,162798,162800,162802,162804,162806],{"class":169,"line":489},[167,162799,1257],{"class":173},[167,162801,3087],{"class":177},[167,162803,56062],{"class":173},[167,162805,3087],{"class":177},[167,162807,185],{"class":173},[167,162809,162810,162812,162814,162816,162818],{"class":169,"line":495},[167,162811,1257],{"class":173},[167,162813,15],{"class":177},[167,162815,57041],{"class":173},[167,162817,15],{"class":177},[167,162819,185],{"class":173},[167,162821,162822,162824,162826,162828,162830,162832,162834,162836],{"class":169,"line":501},[167,162823,1257],{"class":173},[167,162825,507],{"class":177},[167,162827,1182],{"class":181},[167,162829,267],{"class":173},[167,162831,54539],{"class":201},[167,162833,50453],{"class":173},[167,162835,507],{"class":177},[167,162837,185],{"class":173},[167,162839,162840,162842,162844],{"class":169,"line":512},[167,162841,504],{"class":173},[167,162843,1242],{"class":177},[167,162845,185],{"class":173},[167,162847,162848,162850,162852],{"class":169,"line":781},[167,162849,282],{"class":173},[167,162851,299],{"class":177},[167,162853,185],{"class":173},[154,162855,162856],{"className":156,"code":57082,"filename":3973,"language":162,"meta":163,"style":163},[87,162857,162858,162866,162874,162880,162886,162892,162896,162900,162904,162910,162928,162932,162936,162940,162946,162956,162960,162964,162968,162976,162980,162988,163002,163014,163026,163044,163052],{"__ignoreMap":163},[167,162859,162860,162862,162864],{"class":169,"line":170},[167,162861,174],{"class":173},[167,162863,178],{"class":177},[167,162865,185],{"class":173},[167,162867,162868,162870,162872],{"class":169,"line":188},[167,162869,608],{"class":191},[167,162871,3991],{"class":191},[167,162873,1905],{"class":173},[167,162875,162876,162878],{"class":169,"line":205},[167,162877,7176],{"class":181},[167,162879,763],{"class":173},[167,162881,162882,162884],{"class":169,"line":160},[167,162883,1937],{"class":191},[167,162885,1905],{"class":173},[167,162887,162888,162890],{"class":169,"line":238},[167,162889,56399],{"class":173},[167,162891,10681],{"class":219},[167,162893,162894],{"class":169,"line":243},[167,162895,24370],{"class":173},[167,162897,162898],{"class":169,"line":261},[167,162899,398],{"class":173},[167,162901,162902],{"class":169,"line":273},[167,162903,8755],{"class":173},[167,162905,162906,162908],{"class":169,"line":279},[167,162907,57135],{"class":181},[167,162909,763],{"class":173},[167,162911,162912,162914,162916,162918,162920,162922,162924,162926],{"class":169,"line":289},[167,162913,8767],{"class":191},[167,162915,7351],{"class":219},[167,162917,57146],{"class":173},[167,162919,56946],{"class":191},[167,162921,18332],{"class":219},[167,162923,56951],{"class":191},[167,162925,44659],{"class":219},[167,162927,24044],{"class":173},[167,162929,162930],{"class":169,"line":294},[167,162931,4049],{"class":173},[167,162933,162934],{"class":169,"line":304},[167,162935,398],{"class":173},[167,162937,162938],{"class":169,"line":313},[167,162939,4419],{"class":173},[167,162941,162942,162944],{"class":169,"line":161},[167,162943,54621],{"class":181},[167,162945,763],{"class":173},[167,162947,162948,162950,162952,162954],{"class":169,"line":335},[167,162949,741],{"class":219},[167,162951,56426],{"class":173},[167,162953,54500],{"class":191},[167,162955,24044],{"class":173},[167,162957,162958],{"class":169,"line":341},[167,162959,4049],{"class":173},[167,162961,162962],{"class":169,"line":489},[167,162963,3492],{"class":173},[167,162965,162966],{"class":169,"line":495},[167,162967,24148],{"class":173},[167,162969,162970,162972,162974],{"class":169,"line":501},[167,162971,282],{"class":173},[167,162973,178],{"class":177},[167,162975,185],{"class":173},[167,162977,162978],{"class":169,"line":512},[167,162979,209],{"emptyLinePlaceholder":208},[167,162981,162982,162984,162986],{"class":169,"line":781},[167,162983,174],{"class":173},[167,162985,299],{"class":177},[167,162987,185],{"class":173},[167,162989,162990,162992,162994,162996,162998,163000],{"class":169,"line":786},[167,162991,307],{"class":173},[167,162993,1242],{"class":177},[167,162995,1245],{"class":181},[167,162997,267],{"class":173},[167,162999,57018],{"class":201},[167,163001,185],{"class":173},[167,163003,163004,163006,163008,163010,163012],{"class":169,"line":2678},[167,163005,1257],{"class":173},[167,163007,3087],{"class":177},[167,163009,56062],{"class":173},[167,163011,3087],{"class":177},[167,163013,185],{"class":173},[167,163015,163016,163018,163020,163022,163024],{"class":169,"line":2692},[167,163017,1257],{"class":173},[167,163019,15],{"class":177},[167,163021,57041],{"class":173},[167,163023,15],{"class":177},[167,163025,185],{"class":173},[167,163027,163028,163030,163032,163034,163036,163038,163040,163042],{"class":169,"line":3575},[167,163029,1257],{"class":173},[167,163031,507],{"class":177},[167,163033,1182],{"class":181},[167,163035,267],{"class":173},[167,163037,54539],{"class":201},[167,163039,50453],{"class":173},[167,163041,507],{"class":177},[167,163043,185],{"class":173},[167,163045,163046,163048,163050],{"class":169,"line":5028},[167,163047,504],{"class":173},[167,163049,1242],{"class":177},[167,163051,185],{"class":173},[167,163053,163054,163056,163058],{"class":169,"line":5037},[167,163055,282],{"class":173},[167,163057,299],{"class":177},[167,163059,185],{"class":173},[15,163061,57291,163062,57295,163064,57299],{},[87,163063,57294],{},[87,163065,57298],{},[22,163067,57303],{"id":57302},[15,163069,57306],{},[3087,163071,163072],{"id":57309},[3933,163073,57312],{},[33,163075,163076],{},[36,163077,57317,163078,1025,163080,1025,163082,57324],{},[87,163079,17983],{},[87,163081,17992],{},[87,163083,1661],{},[3087,163085,163086],{"id":57327},[3933,163087,56731],{},[33,163089,163090],{},[36,163091,57334,163092,57337,163094,1679],{},[3933,163093,954],{},[3933,163095,55813],{},[22,163097,57343],{"id":57342},[3087,163099,163100],{"id":57346},[3933,163101,57349],{},[33,163103,163104],{},[36,163105,57354],{},[3087,163107,163108],{"id":57357},[3933,163109,57360],{},[33,163111,163112],{},[36,163113,57365,163114,57368,163116,57371,163118,57375],{},[3933,163115,55634],{},[3933,163117,950],{},[3933,163119,57374],{},[3087,163121,163122],{"id":57378},[3933,163123,57381],{},[33,163125,163126],{},[36,163127,57386],{},[3087,163129,163130],{"id":57389},[3933,163131,57392],{},[33,163133,163134],{},[36,163135,57397],{},[22,163137,23574],{"id":23573},[15,163139,57402],{},[15,163141,57405],{},[924,163143,57408],{},{"title":163,"searchDepth":188,"depth":188,"links":163145},[163146,163150,163151,163155,163161],{"id":56819,"depth":188,"text":56820,"children":163147},[163148,163149],{"id":56829,"depth":205,"text":56832},{"id":56840,"depth":205,"text":56843},{"id":56857,"depth":188,"text":56858},{"id":57302,"depth":188,"text":57303,"children":163152},[163153,163154],{"id":57309,"depth":205,"text":57312},{"id":57327,"depth":205,"text":56731},{"id":57342,"depth":188,"text":57343,"children":163156},[163157,163158,163159,163160],{"id":57346,"depth":205,"text":57349},{"id":57357,"depth":205,"text":57360},{"id":57378,"depth":205,"text":57381},{"id":57389,"depth":205,"text":57392},{"id":23573,"depth":188,"text":23574},{"updatedAt":54736,"coverCaption":57431,"author":946,"keywords":57432},[163164],{"headline":56795,"author":163165,"datePublished":57437,"@type":961},{"name":946,"@type":959},{"title":56795,"description":57429},[163168,163169,163170],{"tag":55616,"color":55617},{"tag":5424,"color":5425},{"tag":54751,"color":54752},1785120444559]