[{"data":1,"prerenderedAt":997},["ShallowReactive",2],{"post-index":3,"post-vue-3-6-reactividad-alien-signals":170},[4,15,25,33,41,49,63,75,87,99,109,121,131,141,150,160],{"slug":5,"title":6,"description":7,"excerpt":8,"category":9,"level":10,"publishedAt":11,"updatedAt":11,"readingTime":12,"image":13,"tags":14},"vue-vapor-adopcion-interop-bundle","Adoptar Vapor en una app Vue real: interop, componentes y bundle","Cómo migrar una app Vue a Vapor sin reescribirla: activar la interop, migrar componentes hoja, medir y entender el peso del bundle.","Migra una app Vue a Vapor sin reescribirla: activa la interop, migra componentes hoja, mide y entiende el peso del bundle.","performance","intermediate","2026-11-14T14:38:14.852Z",6,"",[10,9],{"slug":16,"title":17,"description":18,"excerpt":19,"category":20,"level":21,"publishedAt":22,"updatedAt":22,"readingTime":23,"image":13,"tags":24},"vue-3-6-reactividad-alien-signals","Reactividad de Vue 3.6: qué cambió con alien-signals y cómo medirlo","Qué cambió en el sistema de reactividad de Vue 3.6 con alien-signals, cuánto mejora medido en tu máquina y cómo comprobarlo en tu app.","Qué cambió en la reactividad de Vue 3.6 con alien-signals, cuánto mejora medido en tu máquina y cómo comprobarlo.","reactivity","advanced","2026-11-14T14:29:47.062Z",5,[21,9],{"slug":26,"title":27,"description":28,"excerpt":29,"category":9,"level":21,"publishedAt":30,"updatedAt":31,"readingTime":12,"image":13,"tags":32},"vue-vapor-compilador-v-if-v-for-v-model-slots","Dentro del compilador de Vapor: v-if, v-for, v-model y slots en Vue 3.6","Qué código genera Vapor para v-if, v-for, v-model y slots frente al Virtual DOM, leído con el compilador de Vue 3.6.","Compara el código que genera Vapor y Virtual DOM para v-if, v-for, v-model y slots, con el compilador de Vue 3.6.","2026-11-14T14:11:32.855Z","2026-11-14T14:18:07.483Z",[21,9],{"slug":34,"title":35,"description":36,"excerpt":37,"category":9,"level":21,"publishedAt":38,"updatedAt":38,"readingTime":39,"image":13,"tags":40},"vue-vapor-benchmark-metodologia","Medir sin engañarse: benchmark de Virtual DOM frente a Vapor en Vue 3.6","Cómo medir Virtual DOM frente a Vapor en Vue 3.6 sin engañarse: apps aisladas, calentamiento, orden alternado, mediana y medición en producción.","Mide Virtual DOM frente a Vapor sin engañarse: apps aisladas, calentamiento, orden alternado, mediana y pruebas en producción.","2026-11-14T14:07:52.145Z",7,[21,9],{"slug":42,"title":43,"description":44,"excerpt":45,"category":9,"level":10,"publishedAt":46,"updatedAt":46,"readingTime":47,"image":13,"tags":48},"vue-vapor-mode-sin-virtual-dom","Vapor Mode en Vue 3.6: Vue sin Virtual DOM, explicado y medido","Qué es Vapor Mode en Vue 3.6, cómo activarlo, qué código genera el compilador y cuánto mejora frente al Virtual DOM, con mediciones reales.","Activa Vapor Mode en Vue 3.6 con una sola palabra, mira qué compila y mide cuánto mejora frente al Virtual DOM, con cifras reales.","2026-11-14T14:01:56.481Z",9,[10,9],{"slug":50,"title":51,"description":52,"excerpt":53,"rank":54,"category":20,"level":10,"publishedAt":55,"updatedAt":56,"readingTime":39,"image":57,"tags":58},"watch-vs-watcheffect-cotizador-envios-vue-3","watch vs. watchEffect en Vue 3: evita cotizaciones de envío desactualizadas","Construye un cotizador de envíos con Vue 3.5+: usa watch, debounce y onWatcherCleanup para evitar tarifas obsoletas en un checkout real.","Evita respuestas HTTP desactualizadas con watch, debounce y cancelación en un cotizador de envíos.",1,"2026-09-27T18:12:58.826Z","2026-10-05T04:27:15.492Z","https://a-us.storyblok.com/f/1022875/1672x941/2033377396/watch-vs-watcheffect-cotizador-envios-vue-3.png",[59,60,10,61,62],"backend","composition-api","watch","watch-effect",{"slug":64,"title":65,"description":66,"excerpt":66,"rank":12,"category":67,"level":10,"publishedAt":68,"updatedAt":69,"readingTime":70,"image":71,"tags":72},"how-to-use-teleport-in-vue-3","Teleport en Vue 3: notificaciones con limpieza y claves estables","Mueve notificaciones al body con Teleport, claves estables y limpieza de temporizadores.","components","2025-07-26T01:49:43.552Z","2026-10-05T04:02:39.181Z",3,"https://a-us.storyblok.com/f/1022875/1376x768/9bbb639e1d/teleport.jpg",[67,10,73,74],"teleport","ui-patterns",{"slug":76,"title":77,"description":78,"excerpt":78,"rank":39,"category":67,"level":79,"publishedAt":80,"updatedAt":81,"readingTime":82,"image":83,"tags":84},"use-definemodel","defineModel() en Vue 3.4+: La evolución elegante del v-model en componentes","Crea un input reutilizable con defineModel y aplica un modificador personalizado sin duplicar el modelo.","beginner","2025-07-21T03:03:33.292Z","2026-10-05T03:55:33.832Z",2,"https://a-us.storyblok.com/f/1022875/1536x1024/7c8b51e1ae/definemodel2.png",[67,85,10,86],"define-model","v-model",{"slug":88,"title":89,"description":90,"excerpt":90,"rank":91,"category":92,"level":10,"publishedAt":93,"updatedAt":94,"readingTime":82,"image":95,"tags":96},"vue-fire","Autenticación con Google en Vue 3 y VueFire","Conecta Firebase Auth con VueFire y añade acceso con Google, cierre de sesión y errores visibles.",10,"integrations","2025-06-10T03:22:00.345Z","2026-10-05T04:03:20.036Z","https://a-us.storyblok.com/f/1022875/1376x768/9774bccf90/vuefire.jpg",[59,97,10,98],"firebase","vuefire",{"slug":100,"title":101,"description":102,"excerpt":102,"rank":47,"category":92,"level":21,"publishedAt":103,"updatedAt":104,"readingTime":70,"image":105,"tags":106},"web-components-with-modern-vue","Web Components con Vue 3: distribuye un contador con defineCustomElement","Publica un contador Vue como Custom Element con estilos encapsulados y eventos para HTML.","2025-04-15T02:46:47.631Z","2026-10-05T04:02:55.512Z","https://a-us.storyblok.com/f/1022875/1536x1024/7b5cd5a452/web-components.png",[21,67,107,108],"define-custom-element","interoperability",{"slug":110,"title":111,"description":112,"excerpt":112,"rank":113,"category":92,"level":10,"publishedAt":114,"updatedAt":115,"readingTime":82,"image":116,"tags":117},"tailwind-4-integration-with-vue-cli","Tailwind CSS 4 con Vue CLI: guía para proyectos existentes","Mantén un proyecto existente con Vue CLI y compila Tailwind 4 sin desactivar la optimización de producción.",11,"2025-03-16T16:48:02.739Z","2026-10-05T04:03:28.685Z","https://a-us.storyblok.com/f/1022875/1792x1024/71cb200538/vue-cli-and-tailwind-4.webp",[10,118,119,120],"styling","tailwind","vue-cli",{"slug":122,"title":123,"description":124,"excerpt":124,"rank":125,"category":67,"level":79,"publishedAt":126,"updatedAt":127,"readingTime":82,"image":128,"tags":129},"how-to-use-defineexpose","¿Cómo usar defineExpose?","Expón una API pequeña desde un modal y contrólala desde el padre con una referencia tipada.",4,"2025-02-26T02:23:58.312Z","2026-10-05T04:06:26.788Z","https://a-us.storyblok.com/f/1022875/1376x768/487e84614f/defineexpose.jpg",[79,67,60,130],"define-expose",{"slug":132,"title":133,"description":134,"excerpt":134,"rank":23,"category":9,"level":21,"publishedAt":135,"updatedAt":136,"readingTime":23,"image":137,"tags":138},"how-to-use-v-memo","Cómo usar v-memo en Vue 3: dependencias y medición de rendimiento","Optimiza una lista con v-memo, elige dependencias completas y compara el resultado antes de adoptarlo.","2025-02-08T18:55:25.441Z","2026-10-05T04:06:52.708Z","https://a-us.storyblok.com/f/1022875/1376x768/b989b9ebdf/v-memo-image.jpg",[139,10,9,140],"directives","v-memo",{"slug":142,"title":143,"description":144,"excerpt":144,"rank":70,"category":20,"level":10,"publishedAt":145,"updatedAt":146,"readingTime":70,"image":147,"tags":148},"what-is-a-composable","¿Qué es un Composable?","Extrae consultas HTTP a un composable tipado que cancela peticiones anteriores y maneja errores.","2025-02-05T03:00:11.569Z","2026-10-05T04:00:35.499Z","https://a-us.storyblok.com/f/1022875/1376x768/0c48bd03b4/vue-composables.jpg",[79,149,60],"composables",{"slug":151,"title":152,"description":153,"excerpt":153,"rank":82,"category":9,"level":10,"publishedAt":154,"updatedAt":155,"readingTime":70,"image":156,"tags":157},"use-defineasynccomponent","defineAsyncComponent en Vue 3: Implementación y casos de uso.","Carga componentes bajo demanda y muestra estados de carga y error con defineAsyncComponent.","2025-01-15T03:44:46.169Z","2026-10-05T04:01:11.606Z","https://a-us.storyblok.com/f/1022875/1376x768/ff546597c5/vue_defineasync_img.jpg",[67,158,10,159,9],"define-async-component","lazy-loading",{"slug":161,"title":162,"description":163,"excerpt":163,"rank":164,"category":92,"level":79,"publishedAt":165,"updatedAt":166,"readingTime":82,"image":167,"tags":168},"tailwind-4-integration-in-vue-js-3","¿Cómo integrar Tailwind 4 en Vue.js 3 + Vite?","Configura Tailwind CSS 4 en Vue 3 con los plugins de Vue y Tailwind para Vite.",8,"2025-01-12T02:34:06.176Z","2026-10-05T04:02:46.836Z","https://a-us.storyblok.com/f/1022875/1376x768/626e80a702/taiwlind4_vue_3.jpg",[10,118,119,169],"vite",{"name":17,"created_at":171,"published_at":22,"updated_at":172,"id":173,"uuid":174,"content":175,"slug":16,"full_slug":989,"sort_by_date":179,"position":990,"tag_list":991,"is_startpage":992,"parent_id":993,"meta_data":179,"group_id":994,"first_published_at":22,"release_id":179,"lang":995,"path":179,"alternates":996,"default_full_slug":179,"translated_slugs":179},"2026-11-14T14:20:10.884Z","2026-11-14T14:29:47.084Z",241567379002446,"7c1dfab3-f047-4943-9a5a-dcb547b8ef6c",{"_uid":176,"demo":177,"image":178,"level":21,"title":17,"video":182,"content":184,"excerpt":19,"category":20,"component":988,"description":18,"youtube_url":13,"editorial_rank":13},"48d6ffed-4638-4b62-8508-6e7de88cbd93",[],{"id":179,"alt":179,"name":13,"focus":179,"title":179,"source":179,"filename":13,"copyright":179,"fieldtype":180,"meta_data":181},null,"asset",{},{"id":179,"alt":179,"name":13,"focus":179,"title":179,"source":179,"filename":13,"copyright":179,"fieldtype":180,"meta_data":183},{},{"type":185,"attrs":186,"content":187},"doc",{"backgroundColor":179},[188,195,208,237,243,260,265,294,320,384,406,447,452,462,467,482,487,503,508,513,688,693,748,753,758,771,785,790,807,812,865,870,922,927,975],{"type":189,"attrs":190,"content":191},"heading",{"level":82,"textAlign":179},[192],{"text":193,"type":194},"Objetivo y requisitos","text",{"type":196,"attrs":197,"content":198},"paragraph",{"textAlign":179},[199,201,206],{"text":200,"type":194},"Cuando hablamos de Vapor Mode, casi siempre hablamos del compilador. Pero debajo de Vapor hay otra pieza que cambió en Vue 3.6: el sistema de reactividad, que ahora usa una implementación derivada de ",{"text":202,"type":194,"marks":203},"alien-signals",[204],{"type":205},"code",{"text":207,"type":194},". Lo bueno es que no tienes que cambiar tu código para aprovecharlo.",{"type":196,"attrs":209,"content":210},{"textAlign":179},[211,213,217,219,223,225,229,231,235],{"text":212,"type":194},"En este artículo vemos qué cambió, cómo medirlo sin engañarte y qué esperar en una aplicación real. Necesitas Vue ",{"text":214,"type":194,"marks":215},"3.6.0-rc.15",[216],{"type":205},{"text":218,"type":194}," (la última RC al escribir esto) y Node.js ",{"text":220,"type":194,"marks":221},"^22.18.0",[222],{"type":205},{"text":224,"type":194}," o ",{"text":226,"type":194,"marks":227},">=24.12.0",[228],{"type":205},{"text":230,"type":194},", el rango que usa create-vue. Para las mediciones, usé Node ",{"text":232,"type":194,"marks":233},"v24.21.0",[234],{"type":205},{"text":236,"type":194}," en Windows 11.",{"type":238,"attrs":239,"content":240},"code_block",{"class":179},[241],{"text":242,"type":194},"npm install vue@3.6.0-rc.15\n",{"type":196,"attrs":244,"content":245},{"textAlign":179},[246,248,252,254,258],{"text":247,"type":194},"Si tu proyecto usa Vue Router 5, recuerda el ",{"text":249,"type":194,"marks":250},"overrides",[251],{"type":205},{"text":253,"type":194}," de los posts anteriores: el router declara peer ",{"text":255,"type":194,"marks":256},"vue ^3.5.34",[257],{"type":205},{"text":259,"type":194}," y npm no acepta una RC dentro de ese rango.",{"type":189,"attrs":261,"content":262},{"level":82,"textAlign":179},[263],{"text":264,"type":194},"Qué cambió por dentro",{"type":196,"attrs":266,"content":267},{"textAlign":179},[268,270,275,277,281,283,287,289,292],{"text":269,"type":194},"Vue 3.5 tenía un sistema de reactividad de ",{"text":271,"type":194,"marks":272},"pull",[273],{"type":274},"italic",{"text":276,"type":194},": cuando cambia un ",{"text":278,"type":194,"marks":279},"ref",[280],{"type":205},{"text":282,"type":194},", marca como sucios a sus dependientes, y un ",{"text":284,"type":194,"marks":285},"computed",[286],{"type":205},{"text":288,"type":194}," se recalcula solo cuando alguien lo lee. Ese diseño es correcto, pero en escenas con muchos ",{"text":284,"type":194,"marks":290},[291],{"type":205},{"text":293,"type":194}," leídos después de un mismo cambio, la forma en que Vue recorría y marcaba dependencias era cara.",{"type":196,"attrs":295,"content":296},{"textAlign":179},[297,299,307,309,313,315,318],{"text":298,"type":194},"En diciembre de 2024, el PR ",{"text":300,"type":194,"marks":301},"#12349",[302],{"type":303,"attrs":304},"link",{"href":305,"uuid":179,"anchor":179,"target":179,"linktype":306},"https://github.com/vuejs/core/pull/12349","url",{"text":308,"type":194}," portó a ",{"text":310,"type":194,"marks":311},"@vue/reactivity",[312],{"type":205},{"text":314,"type":194}," el núcleo de ",{"text":202,"type":194,"marks":316},[317],{"type":205},{"text":319,"type":194}," (versión 0.4.4). Según la descripción del PR, el cambio busca tres cosas:",{"type":321,"content":322},"bullet_list",[323,352,373],{"type":324,"content":325},"list_item",[326],{"type":196,"attrs":327,"content":328},{"textAlign":179},[329,334,336,339,341,344,346,350],{"text":330,"type":194,"marks":331},"Menos memoria.",[332],{"type":333},"bold",{"text":335,"type":194}," El autor reporta una reducción de alrededor del 13 % al crear muchos ",{"text":278,"type":194,"marks":337},[338],{"type":205},{"text":340,"type":194},", ",{"text":284,"type":194,"marks":342},[343],{"type":205},{"text":345,"type":194}," y ",{"text":347,"type":194,"marks":348},"effect",[349],{"type":205},{"text":351,"type":194}," (de 2,3 MB a 2,0 MB en su prueba).",{"type":324,"content":353},[354],{"type":196,"attrs":355,"content":356},{"textAlign":179},[357,361,363,366,368,371],{"text":358,"type":194,"marks":359},"Mejor rendimiento en lecturas masivas.",[360],{"type":333},{"text":362,"type":194}," El autor describe mejoras grandes en escenas donde muchos ",{"text":284,"type":194,"marks":364},[365],{"type":205},{"text":367,"type":194}," se leen después de cambiar un ",{"text":278,"type":194,"marks":369},[370],{"type":205},{"text":372,"type":194},". Menciona más de 30 veces, proporcional a la escala, en un caso específico.",{"type":324,"content":374},[375],{"type":196,"attrs":376,"content":377},{"textAlign":179},[378,382],{"text":379,"type":194,"marks":380},"Código más simple.",[381],{"type":333},{"text":383,"type":194}," La planificación ya no depende de detalles externos como la limpieza de dependencias o los eventos de depuración.",{"type":196,"attrs":385,"content":386},{"textAlign":179},[387,389,392,393,396,397,400,401,404],{"text":388,"type":194},"La API no cambia: ",{"text":278,"type":194,"marks":390},[391],{"type":205},{"text":340,"type":194},{"text":284,"type":194,"marks":394},[395],{"type":205},{"text":340,"type":194},{"text":61,"type":194,"marks":398},[399],{"type":205},{"text":345,"type":194},{"text":347,"type":194,"marks":402},[403],{"type":205},{"text":405,"type":194}," se escriben igual. Lo que cambia es cómo el sistema decide qué recalcular.",{"type":196,"attrs":407,"content":408},{"textAlign":179},[409,411,415,417,420,422,426,427,431,432,436,437,440,442,445],{"text":410,"type":194},"Este mismo paquete es la base de Vapor. Si abres ",{"text":412,"type":194,"marks":413},"runtime-vapor",[414],{"type":205},{"text":416,"type":194}," en ",{"text":214,"type":194,"marks":418},[419],{"type":205},{"text":421,"type":194},", verás que importa ",{"text":423,"type":194,"marks":424},"ReactiveEffect",[425],{"type":205},{"text":340,"type":194},{"text":428,"type":194,"marks":429},"Dep",[430],{"type":205},{"text":340,"type":194},{"text":433,"type":194,"marks":434},"startBatch",[435],{"type":205},{"text":345,"type":194},{"text":284,"type":194,"marks":438},[439],{"type":205},{"text":441,"type":194}," desde ",{"text":310,"type":194,"marks":443},[444],{"type":205},{"text":446,"type":194},". Por eso el rendimiento de Vapor depende en parte de esta reactividad.",{"type":189,"attrs":448,"content":449},{"level":82,"textAlign":179},[450],{"text":451,"type":194},"Mide la misma escena en las dos versiones",{"type":196,"attrs":453,"content":454},{"textAlign":179},[455,457,460],{"text":456,"type":194},"Las cifras del PR son del autor, en su máquina y su escena. Para saber qué pasa en la tuya, mide la misma escena en las dos versiones. Instala ambas versiones de ",{"text":310,"type":194,"marks":458},[459],{"type":205},{"text":461,"type":194}," con alias:",{"type":238,"attrs":463,"content":464},{"class":179},[465],{"text":466,"type":194},"npm install r35@npm:@vue/reactivity@3.5.45 r36@npm:@vue/reactivity@3.6.0-rc.15\n",{"type":196,"attrs":468,"content":469},{"textAlign":179},[470,472,475,477,480],{"text":471,"type":194},"Luego escribe una escena que cambie un ",{"text":278,"type":194,"marks":473},[474],{"type":205},{"text":476,"type":194}," y lea muchos ",{"text":284,"type":194,"marks":478},[479],{"type":205},{"text":481,"type":194},":",{"type":238,"attrs":483,"content":484},{"class":179},[485],{"text":486,"type":194},"import * as v35 from 'r35'\nimport * as v36 from 'r36'\n\nfunction scene(api, { computeds, refs, readAll, withEffect }) {\n  const { ref, computed, effect } = api\n  const sources = Array.from({ length: refs }, (_, i) => ref(i))\n  const comps = Array.from({ length: computeds }, (_, i) =>\n    computed(() => sources[i % refs].value * 2),\n  )\n  let sink = 0\n  if (withEffect) effect(() => { for (const c of comps) sink += c.value })\n  return () => {\n    sources[0].value++\n    if (readAll) for (const c of comps) sink += c.value\n  }\n}\n",{"type":196,"attrs":488,"content":489},{"textAlign":179},[490,492,496,497,501],{"text":491,"type":194},"Cada operación se repite muchas veces, con calentamiento previo y la mediana de cinco rondas. Compara la misma escena con ",{"text":493,"type":194,"marks":494},"v35",[495],{"type":205},{"text":345,"type":194},{"text":498,"type":194,"marks":499},"v36",[500],{"type":205},{"text":502,"type":194},".",{"type":189,"attrs":504,"content":505},{"level":82,"textAlign":179},[506],{"text":507,"type":194},"Los resultados en mi máquina",{"type":196,"attrs":509,"content":510},{"textAlign":179},[511],{"text":512,"type":194},"Estos son los tiempos por operación (en microsegundos, mediana de cinco rondas):",{"type":514,"content":515},"table",[516,551,586,620,654],{"type":517,"content":518},"tableRow",[519,528,536,543],{"type":520,"attrs":521,"content":522},"tableHeader",{"colspan":54,"rowspan":54,"colwidth":179},[523],{"type":196,"attrs":524,"content":525},{"textAlign":179},[526],{"text":527,"type":194},"Escena",{"type":520,"attrs":529,"content":530},{"colspan":54,"rowspan":54,"colwidth":179},[531],{"type":196,"attrs":532,"content":533},{"textAlign":179},[534],{"text":535,"type":194},"3.5.45",{"type":520,"attrs":537,"content":538},{"colspan":54,"rowspan":54,"colwidth":179},[539],{"type":196,"attrs":540,"content":541},{"textAlign":179},[542],{"text":214,"type":194},{"type":520,"attrs":544,"content":545},{"colspan":54,"rowspan":54,"colwidth":179},[546],{"type":196,"attrs":547,"content":548},{"textAlign":179},[549],{"text":550,"type":194},"Mejora",{"type":517,"content":552},[553,562,570,578],{"type":554,"attrs":555,"content":556},"tableCell",{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[557],{"type":196,"attrs":558,"content":559},{"textAlign":179},[560],{"text":561,"type":194},"1.000 computeds: escribir y leer todos (sin efecto)",{"type":554,"attrs":563,"content":564},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[565],{"type":196,"attrs":566,"content":567},{"textAlign":179},[568],{"text":569,"type":194},"12,47 µs",{"type":554,"attrs":571,"content":572},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[573],{"type":196,"attrs":574,"content":575},{"textAlign":179},[576],{"text":577,"type":194},"7,53 µs",{"type":554,"attrs":579,"content":580},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[581],{"type":196,"attrs":582,"content":583},{"textAlign":179},[584],{"text":585,"type":194},"1,65×",{"type":517,"content":587},[588,596,604,612],{"type":554,"attrs":589,"content":590},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[591],{"type":196,"attrs":592,"content":593},{"textAlign":179},[594],{"text":595,"type":194},"1.000 computeds: escribir y leer todos (con efecto)",{"type":554,"attrs":597,"content":598},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[599],{"type":196,"attrs":600,"content":601},{"textAlign":179},[602],{"text":603,"type":194},"32,86 µs",{"type":554,"attrs":605,"content":606},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[607],{"type":196,"attrs":608,"content":609},{"textAlign":179},[610],{"text":611,"type":194},"18,52 µs",{"type":554,"attrs":613,"content":614},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[615],{"type":196,"attrs":616,"content":617},{"textAlign":179},[618],{"text":619,"type":194},"1,77×",{"type":517,"content":621},[622,630,638,646],{"type":554,"attrs":623,"content":624},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[625],{"type":196,"attrs":626,"content":627},{"textAlign":179},[628],{"text":629,"type":194},"1.000 computeds: escribir sin leer (con efecto)",{"type":554,"attrs":631,"content":632},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[633],{"type":196,"attrs":634,"content":635},{"textAlign":179},[636],{"text":637,"type":194},"19,28 µs",{"type":554,"attrs":639,"content":640},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[641],{"type":196,"attrs":642,"content":643},{"textAlign":179},[644],{"text":645,"type":194},"14,53 µs",{"type":554,"attrs":647,"content":648},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[649],{"type":196,"attrs":650,"content":651},{"textAlign":179},[652],{"text":653,"type":194},"1,33×",{"type":517,"content":655},[656,664,672,680],{"type":554,"attrs":657,"content":658},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[659],{"type":196,"attrs":660,"content":661},{"textAlign":179},[662],{"text":663,"type":194},"1 computed: escribir y leer (sin efecto)",{"type":554,"attrs":665,"content":666},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[667],{"type":196,"attrs":668,"content":669},{"textAlign":179},[670],{"text":671,"type":194},"0,05 µs",{"type":554,"attrs":673,"content":674},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[675],{"type":196,"attrs":676,"content":677},{"textAlign":179},[678],{"text":679,"type":194},"0,04 µs",{"type":554,"attrs":681,"content":682},{"colspan":54,"rowspan":54,"colwidth":179,"backgroundColor":179},[683],{"type":196,"attrs":684,"content":685},{"textAlign":179},[686],{"text":687,"type":194},"1,08×",{"type":196,"attrs":689,"content":690},{"textAlign":179},[691],{"text":692,"type":194},"Tres lecturas:",{"type":694,"attrs":695,"content":696},"ordered_list",{"order":54},[697,708,724],{"type":324,"content":698},[699],{"type":196,"attrs":700,"content":701},{"textAlign":179},[702,706],{"text":703,"type":194,"marks":704},"La mejora es real, pero es de 1,3× a 1,8×.",[705],{"type":333},{"text":707,"type":194}," Está lejos del 30× del PR. Ese número corresponde a una escena concreta a gran escala, y es distinto de lo que vas a notar en una aplicación.",{"type":324,"content":709},[710],{"type":196,"attrs":711,"content":712},{"textAlign":179},[713,717,719,722],{"text":714,"type":194,"marks":715},"Donde más se nota es en lecturas masivas.",[716],{"type":333},{"text":718,"type":194}," Cuando lees muchos ",{"text":284,"type":194,"marks":720},[721],{"type":205},{"text":723,"type":194}," después de cada cambio, la mejora llega a 1,8×.",{"type":324,"content":725},[726],{"type":196,"attrs":727,"content":728},{"textAlign":179},[729,733,736,740,742,746],{"text":730,"type":194,"marks":731},"Con un solo ",[732],{"type":333},{"text":284,"type":194,"marks":734},[735],{"type":205},{"text":737,"type":194,"marks":738}," no hay diferencia medible.",[739],{"type":333},{"text":741,"type":194}," El valor es 0,04 a 0,05 µs, cerca de la resolución de ",{"text":743,"type":194,"marks":744},"performance.now()",[745],{"type":205},{"text":747,"type":194},". No lo tomes como cifra.",{"type":196,"attrs":749,"content":750},{"textAlign":179},[751],{"text":752,"type":194},"Para la memoria no medí nada: el 13 % es del PR.",{"type":189,"attrs":754,"content":755},{"level":82,"textAlign":179},[756],{"text":757,"type":194},"Lo que esto no significa",{"type":196,"attrs":759,"content":760},{"textAlign":179},[761,763,769],{"text":762,"type":194},"Estas son microbenchmarks de reactividad. No miden el render, el layout ni el paint. Una mejora de 1,8× en la reactividad se traduce en menos trabajo en el JavaScript, pero el tiempo que ve el usuario depende del resto de la pantalla. Lo vimos en el ",{"text":764,"type":194,"marks":765},"benchmark de Vapor",[766],{"type":303,"attrs":767},{"href":768,"uuid":179,"anchor":179,"target":179,"linktype":306},"https://elrincondevue.com/article-list/vue-vapor-benchmark-metodologia",{"text":770,"type":194},": el layout del navegador se mantiene igual con los dos motores.",{"type":196,"attrs":772,"content":773},{"textAlign":179},[774,776,779,780,783],{"text":775,"type":194},"Tampoco hay que cambiar nada en tu código para obtener esta mejora. Eso es lo más valioso: si actualizas a 3.6 cuando salga la versión estable, tus ",{"text":284,"type":194,"marks":777},[778],{"type":205},{"text":345,"type":194},{"text":61,"type":194,"marks":781},[782],{"type":205},{"text":784,"type":194}," se benefician sin tocarlos. Pero también significa que no puedes medirla por cambios de código, sino por tus propias escenas.",{"type":189,"attrs":786,"content":787},{"level":82,"textAlign":179},[788],{"text":789,"type":194},"Cómo medirlo en tu aplicación",{"type":196,"attrs":791,"content":792},{"textAlign":179},[793,795,800,802,805],{"text":794,"type":194},"Si quieres saber si la reactividad es el cuello de botella de una pantalla, no empieces por el benchmark. Primero mide la pantalla completa con la metodología del ",{"text":796,"type":194,"marks":797},"post de benchmark",[798],{"type":303,"attrs":799},{"href":768,"uuid":179,"anchor":179,"target":179,"linktype":306},{"text":801,"type":194},": build de producción, varias corridas, mediana. Si el tiempo está en el JavaScript de tus ",{"text":284,"type":194,"marks":803},[804],{"type":205},{"text":806,"type":194}," y no en el render, la reactividad puede importar. Si está en el render o en el layout, no.",{"type":189,"attrs":808,"content":809},{"level":82,"textAlign":179},[810],{"text":811,"type":194},"Comprueba el resultado",{"type":694,"attrs":813,"content":814},{"order":54},[815,833,851,858],{"type":324,"content":816},[817],{"type":196,"attrs":818,"content":819},{"textAlign":179},[820,822,826,827,831],{"text":821,"type":194},"Instala ",{"text":823,"type":194,"marks":824},"r35",[825],{"type":205},{"text":345,"type":194},{"text":828,"type":194,"marks":829},"r36",[830],{"type":205},{"text":832,"type":194}," como arriba.",{"type":324,"content":834},[835],{"type":196,"attrs":836,"content":837},{"textAlign":179},[838,840,844,845,849],{"text":839,"type":194},"Ejecuta la escena con tus números de ",{"text":841,"type":194,"marks":842},"computeds",[843],{"type":205},{"text":345,"type":194},{"text":846,"type":194,"marks":847},"refs",[848],{"type":205},{"text":850,"type":194},", aproximándolos a los de tu pantalla.",{"type":324,"content":852},[853],{"type":196,"attrs":854,"content":855},{"textAlign":179},[856],{"text":857,"type":194},"Repite la medición en build de producción, no en desarrollo.",{"type":324,"content":859},[860],{"type":196,"attrs":861,"content":862},{"textAlign":179},[863],{"text":864,"type":194},"Compara la mediana de varias rondas, no una sola corrida.",{"type":189,"attrs":866,"content":867},{"level":82,"textAlign":179},[868],{"text":869,"type":194},"Errores frecuentes",{"type":321,"content":871},[872,883,900,911],{"type":324,"content":873},[874],{"type":196,"attrs":875,"content":876},{"textAlign":179},[877,881],{"text":878,"type":194,"marks":879},"Citar el 30× como si fuera tu mejora.",[880],{"type":333},{"text":882,"type":194}," Es el caso del autor. Mide tu escena.",{"type":324,"content":884},[885],{"type":196,"attrs":886,"content":887},{"textAlign":179},[888,892,895,898],{"text":889,"type":194,"marks":890},"Medir un solo ",[891],{"type":333},{"text":284,"type":194,"marks":893},[894],{"type":205},{"text":502,"type":194,"marks":896},[897],{"type":333},{"text":899,"type":194}," La diferencia queda por debajo de la resolución del reloj.",{"type":324,"content":901},[902],{"type":196,"attrs":903,"content":904},{"textAlign":179},[905,909],{"text":906,"type":194,"marks":907},"Medir en desarrollo.",[908],{"type":333},{"text":910,"type":194}," Las comprobaciones de Vue distorsionan los tiempos.",{"type":324,"content":912},[913],{"type":196,"attrs":914,"content":915},{"textAlign":179},[916,920],{"text":917,"type":194,"marks":918},"Atribuir a la reactividad cambios de render.",[919],{"type":333},{"text":921,"type":194}," Si la pantalla mejora, separa el JavaScript de la reactividad y del render antes de concluir.",{"type":189,"attrs":923,"content":924},{"level":82,"textAlign":179},[925],{"text":926,"type":194},"Cuándo importa",{"type":321,"content":928},[929,953,964],{"type":324,"content":930},[931],{"type":196,"attrs":932,"content":933},{"textAlign":179},[934,938,941,945,948,951],{"text":935,"type":194,"marks":936},"Pantallas con muchos ",[937],{"type":333},{"text":284,"type":194,"marks":939},[940],{"type":205},{"text":942,"type":194,"marks":943}," derivados de pocos ",[944],{"type":333},{"text":278,"type":194,"marks":946},[947],{"type":205},{"text":502,"type":194,"marks":949},[950],{"type":333},{"text":952,"type":194}," Tablas, dashboards, filtros.",{"type":324,"content":954},[955],{"type":196,"attrs":956,"content":957},{"textAlign":179},[958,962],{"text":959,"type":194,"marks":960},"Listas con cambios frecuentes",[961],{"type":333},{"text":963,"type":194},", donde cada cambio lee muchos valores derivados.",{"type":324,"content":965},[966],{"type":196,"attrs":967,"content":968},{"textAlign":179},[969,973],{"text":970,"type":194,"marks":971},"Antes de migrar a Vapor.",[972],{"type":333},{"text":974,"type":194}," La reactividad mejora ambos mundos; si ya tienes una pantalla con mucha reactividad, el beneficio se suma.",{"type":196,"attrs":976,"content":977},{"textAlign":179},[978,980,986],{"text":979,"type":194},"Si quieres ver cómo Vapor usa esta reactividad para actualizar solo el nodo afectado, el ",{"text":981,"type":194,"marks":982},"post sobre el compilador",[983],{"type":303,"attrs":984},{"href":985,"uuid":179,"anchor":179,"target":179,"linktype":306},"https://elrincondevue.com/article-list/vue-vapor-compilador-v-if-v-for-v-model-slots",{"text":987,"type":194}," muestra la salida real.","posts","posts/vue-3-6-reactividad-alien-signals",-150,[21,9],false,20030325,"ac0746b3-45b3-47b2-9e9a-c11238eb6c98","default",[],1794670871718]