[{"data":1,"prerenderedAt":3351},["ShallowReactive",2],{"app-menu-posts":3,"blog-reactive-performance-shallowref-readonly-markraw-unnecessary-updates.en-en":1129,"blog-slug-sidebar-posts":2878},[4,55,93,126,154,186,219,256,286,315,340,374,406,436,464,491,519,546,572,597,622,657,686,714,740,768,796,821,848,875,906,931,959,988,1015,1042,1065,1085,1106],{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"locale":13,"meta":14,"navigation":25,"path":26,"schemaOrg":27,"seo":32,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":34,"tags":35,"__hash__":54},"blog\u002Fblog\u002Fusefetch-vs-useasyncdata-vs-fetch-nuxt-4.es.md","useFetch vs useAsyncData vs $fetch en Nuxt 4","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1786757439\u002Fnuxt-4-usefetch-useasyncdata-dollarfetch-ssr_bhosyq.png","Comparación visual entre useFetch, useAsyncData y $fetch en Nuxt 4 para SSR, payload e hidratación.","2026-08-15","Aprende a elegir entre useFetch, useAsyncData y $fetch en Nuxt 4 según el tipo de carga, el flujo SSR, el payload, la reactividad y la propiedad del estado con Pinia.",false,"md","es",{"updatedAt":15,"author":16,"coverCaption":17,"keywords":18},"2026-08-14T21:30:00-05:00","TODOvue","Guía visual para elegir la API de datos adecuada en Nuxt 4.",[19,20,21,22,23,24],"useFetch vs useAsyncData vs $fetch","Nuxt 4 SSR","payload de Nuxt","hidratación en Nuxt","peticiones duplicadas","Pinia en Nuxt",true,"\u002Fblog\u002Fusefetch-vs-useasyncdata-vs-fetch-nuxt-4.es",[28],{"headline":6,"author":29,"datePublished":15,"@type":31},{"name":16,"@type":30},"Person","BlogPosting",{"title":6,"description":10},null,"blog\u002Fusefetch-vs-useasyncdata-vs-fetch-nuxt-4.es",[36,39,42,45,48,51],{"tag":37,"color":38},"Guías","#42B983",{"tag":40,"color":41},"SSR","#0E9AA7",{"tag":43,"color":44},"Composables","#14B8A6",{"tag":46,"color":47},"Reactividad","#1D5BA1",{"tag":49,"color":50},"Gestión de Estado","#FF9800",{"tag":52,"color":53},"Buenas Prácticas","#2196F3","CNtJm5gHXAQmsXaJjQNAyxsd9AYxM00UMJqaCSaFeCw",{"id":56,"title":57,"cover":58,"coverAlt":59,"date":60,"description":61,"draft":11,"extension":12,"locale":13,"meta":62,"navigation":25,"path":72,"schemaOrg":73,"seo":77,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":78,"tags":79,"__hash__":92},"blog\u002Fblog\u002Fvue-3-6-rc-vapor-mode-status-limits-evaluation-2026.es.md","Vue 3.6 RC y Vapor Mode: estado real, límites y cómo evaluarlo en 2026","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1786479202\u002Fvue-3-6-rc-vapor-mode-status-limits-evaluation-2026_zadbpu.png","Comparación técnica entre el compilador estándar de Vue y Vapor Mode durante la etapa RC de Vue 3.6.","2026-08-11","Conoce el estado de Vue 3.6 RC y Vapor Mode, sus límites, riesgos y cómo evaluarlo con pruebas reproducibles antes de adoptarlo.",{"updatedAt":63,"author":16,"coverCaption":64,"keywords":65},"2026-08-11T15:22:20-05:00","Estado, límites y evaluación práctica de Vapor Mode durante la etapa RC de Vue 3.6.",[66,67,68,69,70,71],"Vue 3.6 RC y Vapor Mode","estado de Vapor Mode","límites de Vapor Mode","evaluar Vapor Mode","Vue 3.6.0-rc.3","rendimiento de Vue","\u002Fblog\u002Fvue-3-6-rc-vapor-mode-status-limits-evaluation-2026.es",[74],{"headline":57,"author":75,"datePublished":76,"@type":31},{"name":16,"@type":30},"2026-08-11T10:00:29.882-05:00",{"title":57,"description":61},"blog\u002Fvue-3-6-rc-vapor-mode-status-limits-evaluation-2026.es",[80,83,86,89],{"tag":81,"color":82},"Vapor Mode","#41B2A6",{"tag":84,"color":85},"Avanzado","#F54927",{"tag":87,"color":88},"Rendimiento","#D4A017",{"tag":90,"color":91},"Ecosistema","#68D4F2","7NVPCXoC3K80BryEzbsgejukHOsDW41C52eX5ekFJr8",{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"locale":13,"meta":100,"navigation":25,"path":111,"schemaOrg":112,"seo":115,"series":116,"seriesDescription":117,"seriesOrder":118,"seriesTitle":119,"slug":33,"stem":120,"tags":121,"__hash__":125},"blog\u002Fblog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.es.md","Rendimiento reactivo en Vue: shallowRef, readonly, markRaw y actualizaciones innecesarias","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1785888143\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates_ngtda7.png","Diagrama de límites de reactividad en Vue con shallowRef, readonly y markRaw.","2026-08-05","Aprende a elegir límites de reactividad en Vue, actualizar estado superficial correctamente y distinguir conversiones profundas de renderizados evitables.",{"updatedAt":101,"author":16,"coverCaption":102,"keywords":103},"2026-08-04T19:00:00-05:00","Diagrama sobre límites de reactividad en Vue.",[104,105,106,107,108,109,110],"rendimiento reactivo en Vue","shallowRef","readonly","markRaw","actualizaciones innecesarias en Vue","triggerRef","computed estable","\u002Fblog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.es",[113],{"headline":95,"author":114,"datePublished":101,"@type":31},{"name":16,"@type":30},{"title":95,"description":99},"vue-reactivity","Ruta práctica para entender cómo Vue rastrea el estado, elegir la API reactiva correcta y optimizar actualizaciones sin perder claridad.",6,"Reactividad práctica en Vue 3","blog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.es",[122,123,124],{"tag":46,"color":47},{"tag":87,"color":88},{"tag":52,"color":53},"oBAJ89cVLgN74tg-dtsqL34rlWOQlxtnr53Uhsnho-Q",{"id":127,"title":128,"cover":129,"coverAlt":130,"date":131,"description":132,"draft":11,"extension":12,"locale":13,"meta":133,"navigation":25,"path":142,"schemaOrg":143,"seo":146,"series":116,"seriesDescription":117,"seriesOrder":147,"seriesTitle":119,"slug":33,"stem":148,"tags":149,"__hash__":153},"blog\u002Fblog\u002Freactivity-in-composables-toref-torefs-and-how-not-to-lose-it-when-destructuring.es.md","Reactividad en composables: `toRef`, `toRefs` y cómo no perderla al desestructurar","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1785525834\u002Freactivity-in-composables-toref-torefs-and-how-not-to-lose-it-when-destructuring_tvgcff.png","Diagrama de un composable Vue que conserva la reactividad con toRef y toRefs.","2026-08-01","Aprende por qué la desestructuración puede desconectar el estado reactivo y cuándo usar refs directas, `toRef()` o `toRefs()` en composables de Vue.",{"updatedAt":134,"author":16,"coverCaption":135,"keywords":136},"2026-07-31T19:00:00-05:00","Referencia visual para una guía sobre utilidades de reactividad de Vue.",[137,138,139,140,141],"reactividad en composables Vue","toRef Vue","toRefs Vue","desestructurar reactive Vue","composables Vue","\u002Fblog\u002Freactivity-in-composables-toref-torefs-and-how-not-to-lose-it-when-destructuring.es",[144],{"headline":128,"author":145,"datePublished":134,"@type":31},{"name":16,"@type":30},{"title":128,"description":132},4,"blog\u002Freactivity-in-composables-toref-torefs-and-how-not-to-lose-it-when-destructuring.es",[150,151,152],{"tag":46,"color":47},{"tag":43,"color":44},{"tag":37,"color":38},"eDzhgQ-HLcrcD7ryWRdK_UUJSnNR3CKaWxkSg1Am9G4",{"id":155,"title":156,"cover":157,"coverAlt":158,"date":159,"description":160,"draft":11,"extension":12,"locale":13,"meta":161,"navigation":25,"path":171,"schemaOrg":172,"seo":175,"series":116,"seriesDescription":117,"seriesOrder":176,"seriesTitle":119,"slug":33,"stem":177,"tags":178,"__hash__":185},"blog\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es.md","ref() vs reactive(): cómo modelar el estado en Vue 3","https:\u002F\u002Fres.cloudinary.com\u002Fdenj4fg7f\u002Fimage\u002Fupload\u002Fv1785199207\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3_j8hzro.png","Comparación entre ref() y reactive() para modelar estado reactivo en Vue 3","2026-07-27","Aprende a elegir entre ref(), reactive(), toRefs() y useState() según el tipo de dato, la desestructuración y el alcance SSR.",{"updatedAt":162,"author":16,"coverCaption":163,"keywords":164},"2026-07-27T18:31:41-05:00","Referencia oficial de Vue sobre los fundamentos de la reactividad",[165,166,167,168,169,170],"ref() vs reactive()","reactividad en Vue 3","estado en Vue 3","toRefs()","useState() en Nuxt","Composition API","\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[173],{"headline":156,"author":174,"datePublished":162,"@type":31},{"name":16,"@type":30},{"title":156,"description":160},2,"blog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[179,180,181,182,183,184],{"tag":46,"color":47},{"tag":49,"color":50},{"tag":37,"color":38},{"tag":43,"color":44},{"tag":40,"color":41},{"tag":52,"color":53},"4ri62At3pbdif7nXeHjvnk4eA0dEP-DbZgMfGU_ZNFM",{"id":187,"title":188,"cover":189,"coverAlt":190,"date":191,"description":192,"draft":11,"extension":12,"locale":13,"meta":193,"navigation":25,"path":201,"schemaOrg":202,"seo":206,"series":207,"seriesDescription":208,"seriesOrder":118,"seriesTitle":209,"slug":33,"stem":210,"tags":211,"__hash__":218},"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","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.",{"updatedAt":194,"author":16,"coverCaption":195,"keywords":196},"2026-07-26T00:00:00-05:00","Referencia visual para decidir el alcance del estado en Vue 3.",[197,198,199,49,200,43],"State","Pinia","Vue 3","Arquitectura","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[203],{"headline":188,"author":204,"datePublished":205,"@type":31},{"name":16,"@type":30},"2026-07-24T23:20:00-05:00",{"title":188,"description":192},"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",[212,213,215,216,217],{"tag":49,"color":50},{"tag":200,"color":214},"#4CAF50",{"tag":52,"color":53},{"tag":43,"color":44},{"tag":40,"color":41},"HOD-MgWjq0ELvp4Sgos3olc_qJbRXYe26_GuDpSXnio",{"id":220,"title":221,"cover":222,"coverAlt":223,"date":224,"description":225,"draft":11,"extension":12,"locale":13,"meta":226,"navigation":25,"path":235,"schemaOrg":236,"seo":240,"series":207,"seriesDescription":208,"seriesOrder":241,"seriesTitle":209,"slug":33,"stem":242,"tags":243,"__hash__":255},"blog\u002Fblog\u002Fvue-3-component-architecture.es.md","Arquitectura de componentes en Vue 3: comunicación, reutilización y dependencias","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":194,"author":16,"coverCaption":227,"keywords":228},"Referencia oficial de Vue.js sobre componentes",[229,230,231,232,233,234],"Componentes","arquitectura de componentes en Vue 3","props y eventos","slots en Vue 3","composables","provide\u002Finject","\u002Fblog\u002Fvue-3-component-architecture.es",[237],{"headline":221,"author":238,"datePublished":239,"@type":31},{"name":16,"@type":30},"2026-07-10T17:19:30-05:00",{"title":221,"description":225},1,"blog\u002Fvue-3-component-architecture.es",[244,246,247,248,249,252],{"tag":229,"color":245},"#41B883",{"tag":200,"color":214},{"tag":52,"color":53},{"tag":43,"color":44},{"tag":250,"color":251},"Eventos","#2D98DA",{"tag":253,"color":254},"Slots","#8E44AD","BaFZob8eRi9VR8OCyHwWlNIYLAdT7a-5PZC1sFT00E8",{"id":257,"title":258,"cover":259,"coverAlt":260,"date":261,"description":262,"draft":11,"extension":12,"locale":13,"meta":263,"navigation":25,"path":272,"schemaOrg":273,"seo":277,"series":116,"seriesDescription":117,"seriesOrder":278,"seriesTitle":119,"slug":33,"stem":279,"tags":280,"__hash__":285},"blog\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es.md","Vue computed vs watch vs watchEffect: cuándo usar cada uno","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.",{"updatedAt":264,"coverCaption":265,"author":16,"keywords":266},"2026-07-27T00:00:00-05:00","Computed, watchers y efectos en Vue 3 por TODOvue",[267,199,268,269,270,271,170],"Vue.js","computed","watch","watchEffect","reactividad","\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es",[274],{"headline":258,"author":275,"datePublished":276,"@type":31},{"name":16,"@type":30},"2026-07-06T20:00:00-05:00",{"title":258,"description":262},3,"blog\u002Fvue-computed-watch-watcheffect-guide.es",[281,282,283,284],{"tag":46,"color":47},{"tag":52,"color":53},{"tag":87,"color":88},{"tag":37,"color":38},"a8l5u3F8H-uZBX5TmLAKFBuRfvIoE5kOjfOeaSHyk-A",{"id":287,"title":288,"cover":289,"coverAlt":288,"date":290,"description":291,"draft":11,"extension":12,"locale":13,"meta":292,"navigation":25,"path":300,"schemaOrg":301,"seo":305,"series":207,"seriesDescription":208,"seriesOrder":176,"seriesTitle":209,"slug":33,"stem":306,"tags":307,"__hash__":314},"blog\u002Fblog\u002Fvue-3-props-emits-component-communication.es.md","Props y Emits en Vue 3: comunicación entre componentes","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.",{"updatedAt":194,"coverCaption":293,"author":16,"keywords":294},"Comunicación entre componentes en Vue 3 por TODOvue",[267,199,295,296,297,298,299],"props","emits","componentes","defineProps","defineEmits","\u002Fblog\u002Fvue-3-props-emits-component-communication.es",[302],{"headline":288,"author":303,"datePublished":304,"@type":31},{"name":16,"@type":30},"2026-06-30T20:00:00-05:00",{"title":288,"description":291},"blog\u002Fvue-3-props-emits-component-communication.es",[308,309,310,311],{"tag":229,"color":245},{"tag":250,"color":251},{"tag":37,"color":38},{"tag":312,"color":313},"Básico","#B173BF","dLcA6qwTAutjayKo9BSZ8VD27UMroxba5SkIczwtVII",{"id":316,"title":317,"cover":318,"coverAlt":319,"date":320,"description":321,"draft":11,"extension":12,"locale":13,"meta":322,"navigation":25,"path":327,"schemaOrg":328,"seo":332,"series":207,"seriesDescription":208,"seriesOrder":278,"seriesTitle":209,"slug":33,"stem":333,"tags":334,"__hash__":339},"blog\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es.md","Composables en Vue 3: cómo extraer lógica reutilizable sin complicarte","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.",{"updatedAt":194,"coverCaption":323,"author":16,"keywords":324},"Código reutilizable en Vue 3 por TODOvue",[267,199,43,170,325,326],"useToggle","lógica reutilizable","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es",[329],{"headline":317,"author":330,"datePublished":331,"@type":31},{"name":16,"@type":30},"2026-06-22T20:00:00-05:00",{"title":317,"description":321},"blog\u002Fvue-3-composables-extract-reusable-logic.es",[335,336,337,338],{"tag":43,"color":44},{"tag":229,"color":245},{"tag":52,"color":53},{"tag":312,"color":313},"fUGaAtyXtTvA6HVDF8xZfMxwmMsfGc4zmxB1UCsyhQs",{"id":341,"title":342,"cover":343,"coverAlt":344,"date":345,"description":346,"draft":11,"extension":12,"locale":13,"meta":347,"navigation":25,"path":355,"schemaOrg":356,"seo":359,"series":360,"seriesDescription":361,"seriesOrder":362,"seriesTitle":363,"slug":33,"stem":364,"tags":365,"__hash__":373},"blog\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es.md","Ciclos de vida en Vue: renderizado del lado del servidor (serverPrefetch)","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":348,"readingTime":349,"coverCaption":350,"author":16,"keywords":351},"2026-03-20T20:00:00-05:00",8,"Con `serverPrefetch`, el servidor puede entregar HTML ya completo, mejorando la experiencia y el SEO desde el primer render.",[267,352,353,40,354],"serverPrefetch","onServerPrefetch","hidratación","\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es",[357],{"headline":342,"author":358,"datePublished":348,"@type":31},{"name":16,"@type":30},{"title":342,"description":346},"vue-lifecycle-hooks","Serie práctica para dominar cada hook del ciclo de vida de Vue, desde los básicos hasta los avanzados.",9,"Ciclos de vida en Vue","blog\u002Fvue-lifecycle-ssr-serverprefetch.es",[366,369,370,371,372],{"tag":367,"color":368},"Ciclo de Vida","#FF6B6B",{"tag":40,"color":41},{"tag":200,"color":214},{"tag":229,"color":245},{"tag":84,"color":85},"gpVQi88PJ9GPzNJNjmGEweIYhWKcd-KIwq-VxiZMkTQ",{"id":375,"title":376,"cover":377,"coverAlt":378,"date":379,"description":380,"draft":11,"extension":12,"locale":13,"meta":381,"navigation":25,"path":389,"schemaOrg":390,"seo":393,"series":360,"seriesDescription":361,"seriesOrder":349,"seriesTitle":363,"slug":33,"stem":394,"tags":395,"__hash__":405},"blog\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es.md","Ciclos de vida en Vue: depuración del render (renderTracked, renderTriggered)","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":382,"coverCaption":383,"author":16,"keywords":384},"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.",[267,385,386,387,388],"renderTracked","renderTriggered","onRenderTracked","onRenderTriggered","\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[391],{"headline":376,"author":392,"datePublished":382,"@type":31},{"name":16,"@type":30},{"title":376,"description":380},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[396,397,400,403,404],{"tag":367,"color":368},{"tag":398,"color":399},"Depuración","#C44569",{"tag":401,"color":402},"Renderizado","#E17055",{"tag":46,"color":47},{"tag":84,"color":85},"5mr-vMalD_jw1VlwSiz5cmZRVM9obP8ZlRFNu2rgR88",{"id":407,"title":408,"cover":409,"coverAlt":410,"date":411,"description":412,"draft":11,"extension":12,"locale":13,"meta":413,"navigation":25,"path":421,"schemaOrg":422,"seo":425,"series":360,"seriesDescription":361,"seriesOrder":426,"seriesTitle":363,"slug":33,"stem":427,"tags":428,"__hash__":435},"blog\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es.md","Ciclos de vida en Vue: manejo de errores con errorCaptured","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":414,"coverCaption":415,"author":16,"keywords":416},"2026-03-16T22:00:00-05:00","Con errorCaptured, puedes proteger partes específicas de tu UI sin comprometer toda la experiencia.",[267,417,418,419,420],"errorCaptured","onErrorCaptured","manejo de errores","error boundaries","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[423],{"headline":408,"author":424,"datePublished":414,"@type":31},{"name":16,"@type":30},{"title":408,"description":412},7,"blog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[429,430,433,434],{"tag":367,"color":368},{"tag":431,"color":432},"Manejo de Errores","#E55039",{"tag":229,"color":245},{"tag":84,"color":85},"epm2rTVpqLV5pyIW1xBngTSC9yZ0Hdu43YNcWNkm4xw",{"id":437,"title":438,"cover":439,"coverAlt":440,"date":441,"description":442,"draft":11,"extension":12,"locale":13,"meta":443,"navigation":25,"path":451,"schemaOrg":452,"seo":455,"series":360,"seriesDescription":361,"seriesOrder":118,"seriesTitle":363,"slug":33,"stem":456,"tags":457,"__hash__":463},"blog\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es.md","Ciclos de vida en Vue: componentes cacheados con \u003CKeepAlive> (activated, deactivated)","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":444,"coverCaption":445,"author":16,"keywords":446},"2026-03-12T23:00:00-05:00","KeepAlive permite desactivar y reactivar componentes sin destruir su estado local",[267,447,448,449,450],"KeepAlive","activated","deactivated","cache de componentes","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[453],{"headline":438,"author":454,"datePublished":444,"@type":31},{"name":16,"@type":30},{"title":438,"description":442},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[458,459,461,462],{"tag":367,"color":368},{"tag":447,"color":460},"#27AE60",{"tag":229,"color":245},{"tag":84,"color":85},"LTJL6v4mw6lt5Nb8vhKocgwmO5u1q1TkDLjAgpE1abw",{"id":465,"title":466,"cover":467,"coverAlt":468,"date":469,"description":470,"draft":11,"extension":12,"locale":13,"meta":471,"navigation":25,"path":479,"schemaOrg":480,"seo":483,"series":360,"seriesDescription":361,"seriesOrder":484,"seriesTitle":363,"slug":33,"stem":485,"tags":486,"__hash__":490},"blog\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es.md","Ciclos de vida en Vue: fase de desmontaje (beforeUnmount, unmounted)","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":472,"coverCaption":473,"author":16,"keywords":474},"2026-03-11T22:00:00-05:00","La fase de desmontaje ocurre cuando Vue retira un componente del árbol activo",[267,475,476,477,478],"beforeUnmount","unmounted","onBeforeUnmount","cleanup","\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[481],{"headline":466,"author":482,"datePublished":472,"@type":31},{"name":16,"@type":30},{"title":466,"description":470},5,"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[487,488,489],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":312,"color":313},"smji8WZsDewTRrh-7nuJ-1afgxZeubOV6QESqNZQknk",{"id":492,"title":493,"cover":494,"coverAlt":495,"date":496,"description":497,"draft":11,"extension":12,"locale":13,"meta":498,"navigation":25,"path":506,"schemaOrg":507,"seo":510,"series":360,"seriesDescription":361,"seriesOrder":147,"seriesTitle":363,"slug":33,"stem":511,"tags":512,"__hash__":518},"blog\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es.md","Ciclos de vida en Vue: fase de actualización (beforeUpdate, updated)","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":499,"coverCaption":500,"author":16,"keywords":501},"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.",[267,502,503,504,505],"beforeUpdate","updated","onUpdated","renderizado","\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[508],{"headline":493,"author":509,"datePublished":499,"@type":31},{"name":16,"@type":30},{"title":493,"description":497},"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[513,514,515,516,517],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":401,"color":402},{"tag":46,"color":47},{"tag":312,"color":313},"98z2JKjTHZwuUniJlvBcSw0oAKPwayH9G9A608P_wSQ",{"id":520,"title":521,"cover":522,"coverAlt":523,"date":524,"description":525,"draft":11,"extension":12,"locale":13,"meta":526,"navigation":25,"path":534,"schemaOrg":535,"seo":538,"series":360,"seriesDescription":361,"seriesOrder":278,"seriesTitle":363,"slug":33,"stem":539,"tags":540,"__hash__":545},"blog\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es.md","Ciclos de vida en Vue: fase de montaje (beforeMount, mounted)","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":527,"coverCaption":528,"author":16,"keywords":529},"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.",[267,530,531,532,533],"beforeMount","mounted","onMounted","DOM","\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[536],{"headline":521,"author":537,"datePublished":527,"@type":31},{"name":16,"@type":30},{"title":521,"description":525},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[541,542,543,544],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":401,"color":402},{"tag":312,"color":313},"GQ-lIt1QfPL-Vw50b8qQ3uquMQjxzjBexBGH1U_jPMM",{"id":547,"title":548,"cover":549,"coverAlt":550,"date":551,"description":552,"draft":11,"extension":12,"locale":13,"meta":553,"navigation":25,"path":560,"schemaOrg":561,"seo":564,"series":360,"seriesDescription":361,"seriesOrder":176,"seriesTitle":363,"slug":33,"stem":565,"tags":566,"__hash__":571},"blog\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es.md","Ciclos de vida en Vue: fase de creación (beforeCreate, created, setup)","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":554,"coverCaption":555,"author":16,"keywords":556},"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.",[267,557,558,559,170],"beforeCreate","created","setup","\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[562],{"headline":548,"author":563,"datePublished":554,"@type":31},{"name":16,"@type":30},{"title":548,"description":552},"blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[567,568,569,570],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":46,"color":47},{"tag":312,"color":313},"gD0R9mljoBWBraFYutY3GdOI6IFtdYK-ul1RE0pCfVo",{"id":573,"title":574,"cover":575,"coverAlt":574,"date":576,"description":577,"draft":11,"extension":12,"locale":13,"meta":578,"navigation":25,"path":585,"schemaOrg":586,"seo":589,"series":360,"seriesDescription":361,"seriesOrder":241,"seriesTitle":363,"slug":33,"stem":590,"tags":591,"__hash__":596},"blog\u002Fblog\u002Fvue-lifecycle-hooks-overview.es.md","Ciclos de vida en Vue: Una visión general","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":579,"readingTime":349,"coverCaption":580,"author":16,"keywords":581},"2026-03-04T21:30:00-05:00","Panorama de los hooks del ciclo de vida en Vue 3.",[267,582,170,583,584],"Ciclos de vida","Options API","Hooks","\u002Fblog\u002Fvue-lifecycle-hooks-overview.es",[587],{"headline":574,"author":588,"datePublished":579,"@type":31},{"name":16,"@type":30},{"title":574,"description":577},"blog\u002Fvue-lifecycle-hooks-overview.es",[592,593,594,595],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":46,"color":47},{"tag":312,"color":313},"SBKJnT6tEFXx0FslfjbqCoy_-zKjHKGzNv961L2uqmc",{"id":598,"title":599,"cover":600,"coverAlt":599,"date":601,"description":602,"draft":11,"extension":12,"locale":13,"meta":603,"navigation":25,"path":609,"schemaOrg":610,"seo":614,"series":116,"seriesDescription":117,"seriesOrder":484,"seriesTitle":119,"slug":33,"stem":615,"tags":616,"__hash__":621},"blog\u002Fblog\u002Fvue-3-reactivity-internals.es.md","Cómo funciona internamente el sistema de reactividad en Vue 3","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":264,"coverCaption":604,"author":16,"keywords":605},"Portada temporal: reemplazar por arte final de TODOvue",[199,271,606,607,608,268],"dependency tracking","scheduler","batching","\u002Fblog\u002Fvue-3-reactivity-internals.es",[611],{"headline":599,"author":612,"datePublished":613,"@type":31},{"name":16,"@type":30},"2026-03-02T20:00:00-05:00",{"title":599,"description":602},"blog\u002Fvue-3-reactivity-internals.es",[617,618,619,620],{"tag":46,"color":47},{"tag":200,"color":214},{"tag":87,"color":88},{"tag":84,"color":85},"hSP4l_wcWdf1tErUej5yTDbc2Tt0ZF4eiL1QPmqxGm4",{"id":623,"title":624,"cover":625,"coverAlt":626,"date":627,"description":628,"draft":11,"extension":12,"locale":13,"meta":629,"navigation":25,"path":635,"schemaOrg":636,"seo":640,"series":641,"seriesDescription":642,"seriesOrder":643,"seriesTitle":644,"slug":33,"stem":645,"tags":646,"__hash__":656},"blog\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es.md","Directivas en Vue: Directivas personalizadas","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":630,"coverCaption":626,"author":16,"keywords":631},"2026-02-27T12:30:00-05:00",[267,632,633,634,170,583],"directivas personalizadas","custom directives","ciclo de vida","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es",[637],{"headline":638,"author":639,"datePublished":630,"@type":31},"Directivas personalizadas en Vue 3",{"name":16,"@type":30},{"title":624,"description":628},"vue-directives","Ruta paso a paso para dominar las directivas principales de Vue.",11,"Directivas en Vue","blog\u002Fdirectives-vue-custom-directives-guide.es",[647,650,653,654,655],{"tag":648,"color":649},"Directivas","#6C5CE7",{"tag":651,"color":652},"Directivas Personalizadas","#7D5FFF",{"tag":200,"color":214},{"tag":46,"color":47},{"tag":84,"color":85},"wVpr_e--WXOvyGkAScAp5eWTfVDbzY9Te6sVUdj96GA",{"id":658,"title":659,"cover":660,"coverAlt":661,"date":662,"description":663,"draft":11,"extension":12,"locale":13,"meta":664,"navigation":25,"path":670,"schemaOrg":671,"seo":675,"series":641,"seriesDescription":642,"seriesOrder":676,"seriesTitle":644,"slug":33,"stem":677,"tags":678,"__hash__":685},"blog\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es.md","Directivas en Vue: v-cloak","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":665,"coverCaption":604,"author":16,"keywords":666},"2026-02-25T12:30:00-05:00",[267,667,668,669,170,583],"v-cloak","FOUC","hydration","\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es",[672],{"headline":673,"author":674,"datePublished":665,"@type":31},"Directiva v-cloak en Vue: evita parpadeos antes del montaje",{"name":16,"@type":30},{"title":659,"description":663},10,"blog\u002Fdirectives-vue-v-cloak-guide.es",[679,680,683,684],{"tag":648,"color":649},{"tag":681,"color":682},"Templates","#00B894",{"tag":401,"color":402},{"tag":312,"color":313},"JfS7unY1XQ1HsdW8oWBHbTqDpzHjl2-9BrnPQZr3SRE",{"id":687,"title":688,"cover":689,"coverAlt":690,"date":691,"description":692,"draft":11,"extension":12,"locale":13,"meta":693,"navigation":25,"path":700,"schemaOrg":701,"seo":705,"series":641,"seriesDescription":642,"seriesOrder":362,"seriesTitle":644,"slug":33,"stem":706,"tags":707,"__hash__":713},"blog\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es.md","Directivas en Vue: v-once \u002F v-memo \u002F v-pre","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":694,"coverCaption":604,"author":16,"keywords":695},"2026-02-23T21:00:00-05:00",[267,696,697,698,699],"v-once","v-memo","v-pre","optimización render","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[702],{"headline":703,"author":704,"datePublished":694,"@type":31},"Directivas en Vue: v-once, v-memo y v-pre para renderizado eficiente",{"name":16,"@type":30},{"title":688,"description":692},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[708,709,710,711,712],{"tag":648,"color":649},{"tag":87,"color":88},{"tag":401,"color":402},{"tag":46,"color":47},{"tag":84,"color":85},"ltUtJZ-ViSqRogEpVIS3x2XdEz345biUTyEg7SJpXLo",{"id":715,"title":716,"cover":717,"coverAlt":718,"date":719,"description":720,"draft":11,"extension":12,"locale":33,"meta":721,"navigation":25,"path":728,"schemaOrg":729,"seo":732,"series":641,"seriesDescription":642,"seriesOrder":349,"seriesTitle":644,"slug":33,"stem":733,"tags":734,"__hash__":739},"blog\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es.md","Directivas en Vue: v-text y v-html","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":722,"coverCaption":723,"keywords":724},"2026-02-20T20:00:00-05:00","Aprende a usar v-text y v-html de forma segura y efectiva en tus proyectos Vue",[267,725,726,727,505,170,583],"v-text","v-html","XSS","\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es",[730],{"headline":716,"author":731,"datePublished":722,"@type":31},{"name":16,"@type":30},{"title":716,"description":720},"blog\u002Fdirectives-vue-v-text-v-html-guide.es",[735,736,737,738],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":401,"color":402},{"tag":312,"color":313},"nRl4DrJhzsMVrCXStftR_-Go1SJK8NAAhi0uuGqgmkI",{"id":741,"title":742,"cover":743,"coverAlt":744,"date":745,"description":746,"draft":11,"extension":12,"locale":13,"meta":747,"navigation":25,"path":755,"schemaOrg":756,"seo":760,"series":641,"seriesDescription":642,"seriesOrder":426,"seriesTitle":644,"slug":33,"stem":761,"tags":762,"__hash__":767},"blog\u002Fblog\u002Fdirectives-vue-v-slot-guide.es.md","Directivas en Vue: v-slot","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":748,"coverCaption":749,"author":16,"keywords":750},"2026-02-19T08:00:00-05:00","Usa v-slot para construir componentes más flexibles y reutilizables.",[267,751,752,753,754,170,583],"v-slot","slots","scoped slots","componentes reutilizables","\u002Fblog\u002Fdirectives-vue-v-slot-guide.es",[757],{"headline":758,"author":759,"datePublished":748,"@type":31},"Directivas en Vue: v-slot con ejemplos claros y prácticos",{"name":16,"@type":30},{"title":742,"description":746},"blog\u002Fdirectives-vue-v-slot-guide.es",[763,764,765,766],{"tag":648,"color":649},{"tag":253,"color":254},{"tag":229,"color":245},{"tag":84,"color":85},"DxshI1c7MLWMpiJg_QZh4QLABHouxeRnejywUpaJAOU",{"id":769,"title":770,"cover":771,"coverAlt":772,"date":773,"description":774,"draft":11,"extension":12,"locale":13,"meta":775,"navigation":25,"path":781,"schemaOrg":782,"seo":786,"series":641,"seriesDescription":642,"seriesOrder":118,"seriesTitle":644,"slug":33,"stem":787,"tags":788,"__hash__":795},"blog\u002Fblog\u002Fdirectives-vue-v-model-guide.es.md","Directivas en Vue: v-model","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":776,"coverCaption":604,"author":16,"keywords":777},"2026-02-16T13:30:00-05:00",[267,778,779,780,170,583],"v-model","formularios","two-way binding","\u002Fblog\u002Fdirectives-vue-v-model-guide.es",[783],{"headline":784,"author":785,"datePublished":776,"@type":31},"Directiva v-model en Vue: guía completa para formularios y componentes",{"name":16,"@type":30},{"title":770,"description":774},"blog\u002Fdirectives-vue-v-model-guide.es",[789,790,793,794],{"tag":648,"color":649},{"tag":791,"color":792},"Formularios","#E67E22",{"tag":46,"color":47},{"tag":312,"color":313},"O_hXXsF2G3Nazt5a_Ggj8OT6_GTMtHDuGhVbwudOzcU",{"id":797,"title":798,"cover":799,"coverAlt":800,"date":801,"description":802,"draft":11,"extension":12,"locale":13,"meta":803,"navigation":25,"path":809,"schemaOrg":810,"seo":814,"series":641,"seriesDescription":642,"seriesOrder":484,"seriesTitle":644,"slug":33,"stem":815,"tags":816,"__hash__":820},"blog\u002Fblog\u002Fdirectives-vue-v-on-guide.es.md","Directivas en Vue: v-on","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":804,"coverCaption":604,"author":16,"keywords":805},"2026-02-13T10:30:00-05:00",[267,806,807,808,170,583],"v-on","eventos","event modifiers","\u002Fblog\u002Fdirectives-vue-v-on-guide.es",[811],{"headline":812,"author":813,"datePublished":804,"@type":31},"Directiva v-on en Vue: guia practica para manejar eventos",{"name":16,"@type":30},{"title":798,"description":802},"blog\u002Fdirectives-vue-v-on-guide.es",[817,818,819],{"tag":648,"color":649},{"tag":250,"color":251},{"tag":312,"color":313},"WAEXmV8fTD0ITkOvmyn62Tdvu5vw7wpMPNxDrqfLAt4",{"id":822,"title":823,"cover":824,"coverAlt":825,"date":826,"description":827,"draft":11,"extension":12,"locale":13,"meta":828,"navigation":25,"path":835,"schemaOrg":836,"seo":840,"series":641,"seriesDescription":642,"seriesOrder":147,"seriesTitle":644,"slug":33,"stem":841,"tags":842,"__hash__":847},"blog\u002Fblog\u002Fdirectives-vue-v-bind-guide.es.md","Directivas en Vue: v-bind","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":829,"coverCaption":604,"author":16,"keywords":830},"2026-02-11T18:00:00-05:00",[267,831,832,833,834,170,583],"v-bind","atributos dinámicos","class binding","style binding","\u002Fblog\u002Fdirectives-vue-v-bind-guide.es",[837],{"headline":838,"author":839,"datePublished":829,"@type":31},"Directiva v-bind en Vue: guía de básico a avanzado",{"name":16,"@type":30},{"title":823,"description":827},"blog\u002Fdirectives-vue-v-bind-guide.es",[843,844,845,846],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":46,"color":47},{"tag":312,"color":313},"ggicPee9rp0vgescxGeL26jTmua2py715WKhjmXHpp0",{"id":849,"title":850,"cover":851,"coverAlt":852,"date":853,"description":854,"draft":11,"extension":12,"locale":13,"meta":855,"navigation":25,"path":861,"schemaOrg":862,"seo":866,"series":641,"seriesDescription":642,"seriesOrder":278,"seriesTitle":644,"slug":33,"stem":867,"tags":868,"__hash__":874},"blog\u002Fblog\u002Fdirectives-vue-v-for-guide.es.md","Directivas en Vue: v-for","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":856,"coverCaption":604,"author":16,"keywords":857},"2026-02-09T21:30:00-05:00",[267,858,859,860,170,583,505],"v-for","listas","key","\u002Fblog\u002Fdirectives-vue-v-for-guide.es",[863],{"headline":864,"author":865,"datePublished":856,"@type":31},"Directiva v-for en Vue: guía completa de básico a avanzado",{"name":16,"@type":30},{"title":850,"description":854},"blog\u002Fdirectives-vue-v-for-guide.es",[869,870,872,873],{"tag":648,"color":649},{"tag":871,"color":47},"Listas",{"tag":681,"color":682},{"tag":312,"color":313},"h_Z-6C71ir_sIzxviVE8eEY3vMd8ZVXbADx8GTll9U8",{"id":876,"title":877,"cover":878,"coverAlt":879,"date":880,"description":881,"draft":11,"extension":12,"locale":13,"meta":882,"navigation":25,"path":891,"schemaOrg":892,"seo":896,"series":641,"seriesDescription":642,"seriesOrder":176,"seriesTitle":644,"slug":33,"stem":897,"tags":898,"__hash__":905},"blog\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es.md","Directivas en Vue: v-if, v-else y v-show","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":883,"coverCaption":884,"author":16,"keywords":885},"2026-02-05T12:30:00-05:00","Renderizado condicional en Vue.js ilustrado por TODOvue",[267,886,887,888,889,890,170,583],"v-if","v-else","v-show","conditional rendering","directives","\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[893],{"headline":894,"author":895,"datePublished":883,"@type":31},"v-if, v-else y v-show en Vue: cuándo usar cada uno",{"name":16,"@type":30},{"title":877,"description":881},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[899,900,903,904],{"tag":648,"color":649},{"tag":901,"color":902},"Renderizado Condicional","#E056FD",{"tag":681,"color":682},{"tag":312,"color":313},"b5lwqC2_R5GDZNjdpBMFknx2dcvVk_FQOPGFJOy4LmQ",{"id":907,"title":908,"cover":909,"coverAlt":908,"date":910,"description":911,"draft":11,"extension":12,"locale":13,"meta":912,"navigation":25,"path":916,"schemaOrg":917,"seo":921,"series":641,"seriesDescription":642,"seriesOrder":241,"seriesTitle":644,"slug":33,"stem":922,"tags":923,"__hash__":930},"blog\u002Fblog\u002Fvue-directives-overview.es.md","Directivas en Vue: Una Visión General","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":748,"readingTime":118,"coverCaption":913,"author":16,"keywords":914},"Imagen destacada que representa las directivas en Vue.js.",[267,648,915,52],"Desarrollo Frontend","\u002Fblog\u002Fvue-directives-overview.es",[918],{"headline":908,"author":919,"datePublished":920,"@type":31},{"name":16,"@type":30},"2026-02-03T20:00:00-05:00",{"title":908,"description":911},"blog\u002Fvue-directives-overview.es",[924,925,926,927,928,929],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":901,"color":902},{"tag":871,"color":47},{"tag":46,"color":47},{"tag":312,"color":313},"JwLOQaBKN45DaJoFg7X918rNjFPTm8MZd7iOm0BuH68",{"id":932,"title":933,"cover":934,"coverAlt":933,"date":935,"description":936,"draft":11,"extension":12,"locale":13,"meta":937,"navigation":25,"path":943,"schemaOrg":944,"seo":948,"series":207,"seriesDescription":208,"seriesOrder":484,"seriesTitle":209,"slug":33,"stem":949,"tags":950,"__hash__":958},"blog\u002Fblog\u002Fmastering-renderless-components-vue-3.es.md","Patrones Avanzados en Vue 3: El Poder de los Renderless Components","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":194,"coverCaption":938,"author":16,"keywords":939},"Imagen destacada que representa el concepto de Renderless Components en Vue 3.",[199,940,941,942,915],"Renderless Components","Reutilización de Código","Patrones de Diseño","\u002Fblog\u002Fmastering-renderless-components-vue-3.es",[945],{"headline":933,"author":946,"datePublished":947,"@type":31},{"name":16,"@type":30},"2026-01-30T17:00:00-05:00",{"title":933,"description":936},"blog\u002Fmastering-renderless-components-vue-3.es",[951,952,954,955,956,957],{"tag":200,"color":214},{"tag":942,"color":953},"#9C27B0",{"tag":229,"color":245},{"tag":46,"color":47},{"tag":84,"color":85},{"tag":52,"color":53},"-earh1fov0s8QNrnVX2RteTSesXEwXENosxo9pj6k9w",{"id":960,"title":961,"cover":962,"coverAlt":961,"date":963,"description":964,"draft":11,"extension":12,"locale":13,"meta":965,"navigation":25,"path":971,"schemaOrg":972,"seo":976,"series":207,"seriesDescription":208,"seriesOrder":147,"seriesTitle":209,"slug":33,"stem":977,"tags":978,"__hash__":987},"blog\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es.md","Provide e Inject en Vue 3: Guía definitiva para eliminar el Prop Drilling","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":194,"coverCaption":966,"author":16,"keywords":967},"Provide e Inject en Vue 3 por TODOvue",[267,968,969,970,170,271],"Provide","Inject","Prop Drilling","\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es",[973],{"headline":961,"author":974,"datePublished":975,"@type":31},{"name":16,"@type":30},"2026-01-22T23:30:00-05:00",{"title":961,"description":964},"blog\u002Fvue-provide-inject-avoid-prop-drilling.es",[979,982,983,984,985,986],{"tag":980,"color":981},"Inyección de Dependencias","#2E86DE",{"tag":49,"color":50},{"tag":200,"color":214},{"tag":942,"color":953},{"tag":229,"color":245},{"tag":52,"color":53},"CBAqb072PTyDEOYcOpi9rvDl3rIQYoWB3nPWEjCk12M",{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"locale":13,"meta":995,"navigation":25,"path":1001,"schemaOrg":1002,"seo":1006,"series":116,"seriesDescription":117,"seriesOrder":241,"seriesTitle":119,"slug":33,"stem":1007,"tags":1008,"__hash__":1014},"blog\u002Fblog\u002Fvue-reactivity-explained.es.md","¿Qué es la reactividad? La magia detrás de Vue.js explicada con claridad","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.",{"updatedAt":264,"coverCaption":996,"author":16,"keywords":997},"Ilustración de un laboratorio de codificación mágica de Vue.js por TODOvue",[267,46,998,170,999,1000],"Proxies","ref","reactive","\u002Fblog\u002Fvue-reactivity-explained.es",[1003],{"headline":990,"author":1004,"datePublished":1005,"@type":31},{"name":16,"@type":30},"2026-01-05T22:00:00-05:00",{"title":990,"description":994},"blog\u002Fvue-reactivity-explained.es",[1009,1010,1011],{"tag":46,"color":47},{"tag":312,"color":313},{"tag":1012,"color":1013},"Historia","#F27E68","UT2z0_WltHsFRpzRs-XkCaBzok7q9HIAWFb_2lDXzwk",{"id":1016,"title":1017,"cover":1018,"coverAlt":1019,"date":1020,"description":1021,"draft":11,"extension":12,"locale":13,"meta":1022,"navigation":25,"path":1026,"schemaOrg":1027,"seo":1031,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1032,"tags":1033,"__hash__":1041},"blog\u002Fblog\u002Fvue-beta-vapor-mode-revealed.es.md","Vue 3.6 Beta: La Revolución de Vapor Mode y el Nuevo Motor de Reactividad","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":1023,"coverCaption":1024,"author":16,"keywords":1025},"2026-02-11T00:00:00-05:00","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",[1028],{"headline":1017,"author":1029,"datePublished":1030,"@type":31},{"name":16,"@type":30},"2025-12-27T00:00:00-05",{"title":1017,"description":1021},"blog\u002Fvue-beta-vapor-mode-revealed.es",[1034,1037,1038,1039,1040],{"tag":1035,"color":1036},"Beta","#42B883",{"tag":81,"color":82},{"tag":46,"color":47},{"tag":90,"color":91},{"tag":84,"color":85},"OoT1wXBWbx7Nm_VxKBcOVEX_68taHaHv5lb5JWYp_3Q",{"id":1043,"title":1044,"cover":1045,"coverAlt":1046,"date":1047,"description":1048,"draft":11,"extension":12,"locale":13,"meta":1049,"navigation":25,"path":1051,"schemaOrg":1052,"seo":1056,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1057,"tags":1058,"__hash__":1064},"blog\u002Fblog\u002Fsetting-up-vue-with-vite.es.md","¿Cómo crear tu primer proyecto con Vue usando Vite?","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":1023,"coverCaption":1050},"Configura tu entorno de desarrollo con Vue y Vite en minutos","\u002Fblog\u002Fsetting-up-vue-with-vite.es",[1053],{"headline":1044,"author":1054,"datePublished":1055,"@type":31},{"name":16,"@type":30},"2025-12-24T00:00:00-05",{"title":1044,"description":1048},"blog\u002Fsetting-up-vue-with-vite.es",[1059,1062,1063],{"tag":1060,"color":1061},"Vite","#646CFF",{"tag":90,"color":91},{"tag":312,"color":313},"ID3RcMYIQmxPmT53eZ4R0DE5wAx-pz-SvPR2vkFFjRc",{"id":1066,"title":1067,"cover":1068,"coverAlt":1069,"date":1070,"description":1071,"draft":11,"extension":12,"locale":13,"meta":1072,"navigation":25,"path":1074,"schemaOrg":1075,"seo":1079,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1080,"tags":1081,"__hash__":1084},"blog\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es.md","Historia y Evolución de Vue.js: El Framework Progresivo","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":1023,"coverCaption":1073},"Explorando la evolución de Vue.js desde sus inicios hasta la actualidad","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[1076],{"headline":1067,"author":1077,"datePublished":1078,"@type":31},{"name":16,"@type":30},"2025-12-19T00:00:00-05",{"title":1067,"description":1071},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[1082,1083],{"tag":1012,"color":1013},{"tag":90,"color":91},"rJyCA4jjvQiJ_sw3YqFOoiddKcMhFEHJpq4Aw3J5Uzg",{"id":1086,"title":1087,"cover":1088,"coverAlt":1019,"date":1089,"description":1090,"draft":11,"extension":12,"locale":13,"meta":1091,"navigation":25,"path":1094,"schemaOrg":1095,"seo":1099,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1100,"tags":1101,"__hash__":1105},"blog\u002Fblog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es.md","¿Qué es Vue.js y por qué deberías usarlo?","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":1023,"coverCaption":1092,"author":16,"keywords":1093},"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",[1096],{"headline":1087,"author":1097,"datePublished":1098,"@type":31},{"name":16,"@type":30},"2025-12-18T00:00:00-05",{"title":1087,"description":1090},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[1102,1103,1104],{"tag":90,"color":91},{"tag":312,"color":313},{"tag":1012,"color":1013},"3oUGsbaCuwOgI_KyRJd-09Ixe2vRBkwOj4YxwJT8Nks",{"id":1107,"title":1108,"cover":1109,"coverAlt":1110,"date":1111,"description":1112,"draft":11,"extension":12,"locale":13,"meta":1113,"navigation":25,"path":1115,"schemaOrg":1116,"seo":1120,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1121,"tags":1122,"__hash__":1128},"blog\u002Fblog\u002Fwelcome-to-todovue.es.md","TODOvue: Un espacio dedicado al ecosistema de Vue.js","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":1023,"coverCaption":1114},"Explorando el universo de Vue.js de principio a fin","\u002Fblog\u002Fwelcome-to-todovue.es",[1117],{"headline":1108,"author":1118,"datePublished":1119,"@type":31},{"name":16,"@type":30},"2025-12-17T00:00:00-05:00",{"title":1108,"description":1112},"blog\u002Fwelcome-to-todovue.es",[1123,1124,1127],{"tag":16,"color":1036},{"tag":1125,"color":1126},"Offtopic","#605AD1",{"tag":90,"color":91},"QCC1KEhGX4J18VW5hhPy_dY_G47DK7o6kElWExWVHwg",{"id":1130,"title":1131,"body":1132,"cover":96,"coverAlt":2844,"date":98,"description":2845,"draft":11,"extension":12,"lab":2846,"locale":2855,"meta":2856,"navigation":25,"path":2862,"schemaOrg":2863,"seo":2866,"series":116,"seriesDescription":2867,"seriesOrder":118,"seriesTitle":2868,"slug":33,"stem":2869,"tags":2870,"__hash__":2877},"blog\u002Fblog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.en.md","Reactive Performance in Vue: shallowRef, readonly, markRaw, and Unnecessary Updates",{"type":1133,"value":1134,"toc":2835},"minimark",[1135,1139,1143,1146,1151,1161,1418,1421,1434,1445,1449,1461,1464,1856,1865,1885,1889,1899,2072,2075,2079,2085,2088,2258,2264,2268,2274,2459,2465,2469,2475,2722,2732,2753,2757,2760,2819,2822,2831],[1136,1137,1131],"h1",{"id":1138},"reactive-performance-in-vue-shallowref-readonly-markraw-and-unnecessary-updates",[1140,1141,1142],"p",{},"A slow interface does not by itself prove that Vue is doing too much deep reactivity. Extra work may come from converting and tracking a large object, unstable props that update child components, or a list with too many DOM nodes. These problems are related, but they require different decisions.",[1140,1144,1145],{},"The right decision starts by observing which dependency triggers rendering. Then define the reactivity boundary that expresses your state contract: deep reactivity for frequent nested changes, root replacement for large immutable structures, a readonly view to protect who can mutate, and focused opt-outs for instances Vue should not proxy.",[1147,1148,1150],"h2",{"id":1149},"before-optimizing-identify-which-work-is-unnecessary","Before Optimizing: Identify Which Work Is Unnecessary",[1140,1152,1153,1154,1157,1158,1160],{},"First, find out what causes the update. ",[1155,1156,387],"code",{}," shows the dependencies read during rendering, and ",[1155,1159,388],{}," shows which one triggered another render. These hooks are for development-time diagnosis; they are not a performance solution by themselves.",[1162,1163,1171],"pre",{"className":1164,"code":1165,"filename":1166,"highlights":1167,"language":1169,"meta":1170,"style":1170},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { onRenderTracked, onRenderTriggered, ref } from 'vue'\n\nconst selectedId = ref\u003Cstring | null>(null)\n\nonRenderTracked((event) => {\n  console.debug('render tracked', event)\n})\n\nonRenderTriggered((event) => {\n  console.debug('render triggered', event)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"selectedId = 'catalog-1'\">Select catalog item\u003C\u002Fbutton>\n  \u003Cp>Selected: {{ selectedId ?? 'none' }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","RenderDiagnosis.vue",[118,426,349,362,676,643,1168],12,"vue","",[1155,1172,1173,1202,1217,1222,1257,1261,1283,1301,1307,1312,1327,1341,1346,1356,1361,1371,1395,1409],{"__ignoreMap":1170},[1174,1175,1177,1181,1185,1189,1192,1195,1199],"span",{"class":1176,"line":241},"line",[1174,1178,1180],{"class":1179},"sVt8B","\u003C",[1174,1182,1184],{"class":1183},"s9eBZ","script",[1174,1186,1188],{"class":1187},"sScJk"," setup",[1174,1190,1191],{"class":1187}," lang",[1174,1193,1194],{"class":1179},"=",[1174,1196,1198],{"class":1197},"sZZnC","\"ts\"",[1174,1200,1201],{"class":1179},">\n",[1174,1203,1204,1208,1211,1214],{"class":1176,"line":176},[1174,1205,1207],{"class":1206},"szBVR","import",[1174,1209,1210],{"class":1179}," { onRenderTracked, onRenderTriggered, ref } ",[1174,1212,1213],{"class":1206},"from",[1174,1215,1216],{"class":1197}," 'vue'\n",[1174,1218,1219],{"class":1176,"line":278},[1174,1220,1221],{"emptyLinePlaceholder":25},"\n",[1174,1223,1224,1227,1231,1234,1237,1239,1242,1245,1248,1251,1254],{"class":1176,"line":147},[1174,1225,1226],{"class":1206},"const",[1174,1228,1230],{"class":1229},"sj4cs"," selectedId",[1174,1232,1233],{"class":1206}," =",[1174,1235,1236],{"class":1187}," ref",[1174,1238,1180],{"class":1179},[1174,1240,1241],{"class":1229},"string",[1174,1243,1244],{"class":1206}," |",[1174,1246,1247],{"class":1229}," null",[1174,1249,1250],{"class":1179},">(",[1174,1252,1253],{"class":1229},"null",[1174,1255,1256],{"class":1179},")\n",[1174,1258,1259],{"class":1176,"line":484},[1174,1260,1221],{"emptyLinePlaceholder":25},[1174,1262,1265,1267,1270,1274,1277,1280],{"class":1263,"line":118},[1176,1264],"highlight",[1174,1266,387],{"class":1187},[1174,1268,1269],{"class":1179},"((",[1174,1271,1273],{"class":1272},"s4XuR","event",[1174,1275,1276],{"class":1179},") ",[1174,1278,1279],{"class":1206},"=>",[1174,1281,1282],{"class":1179}," {\n",[1174,1284,1286,1289,1292,1295,1298],{"class":1285,"line":426},[1176,1264],[1174,1287,1288],{"class":1179},"  console.",[1174,1290,1291],{"class":1187},"debug",[1174,1293,1294],{"class":1179},"(",[1174,1296,1297],{"class":1197},"'render tracked'",[1174,1299,1300],{"class":1179},", event)\n",[1174,1302,1304],{"class":1303,"line":349},[1176,1264],[1174,1305,1306],{"class":1179},"})\n",[1174,1308,1310],{"class":1309,"line":362},[1176,1264],[1174,1311,1221],{"emptyLinePlaceholder":25},[1174,1313,1315,1317,1319,1321,1323,1325],{"class":1314,"line":676},[1176,1264],[1174,1316,388],{"class":1187},[1174,1318,1269],{"class":1179},[1174,1320,1273],{"class":1272},[1174,1322,1276],{"class":1179},[1174,1324,1279],{"class":1206},[1174,1326,1282],{"class":1179},[1174,1328,1330,1332,1334,1336,1339],{"class":1329,"line":643},[1176,1264],[1174,1331,1288],{"class":1179},[1174,1333,1291],{"class":1187},[1174,1335,1294],{"class":1179},[1174,1337,1338],{"class":1197},"'render triggered'",[1174,1340,1300],{"class":1179},[1174,1342,1344],{"class":1343,"line":1168},[1176,1264],[1174,1345,1306],{"class":1179},[1174,1347,1349,1352,1354],{"class":1176,"line":1348},13,[1174,1350,1351],{"class":1179},"\u003C\u002F",[1174,1353,1184],{"class":1183},[1174,1355,1201],{"class":1179},[1174,1357,1359],{"class":1176,"line":1358},14,[1174,1360,1221],{"emptyLinePlaceholder":25},[1174,1362,1364,1366,1369],{"class":1176,"line":1363},15,[1174,1365,1180],{"class":1179},[1174,1367,1368],{"class":1183},"template",[1174,1370,1201],{"class":1179},[1174,1372,1374,1377,1380,1383,1385,1388,1391,1393],{"class":1176,"line":1373},16,[1174,1375,1376],{"class":1179},"  \u003C",[1174,1378,1379],{"class":1183},"button",[1174,1381,1382],{"class":1187}," @click",[1174,1384,1194],{"class":1179},[1174,1386,1387],{"class":1197},"\"selectedId = 'catalog-1'\"",[1174,1389,1390],{"class":1179},">Select catalog item\u003C\u002F",[1174,1392,1379],{"class":1183},[1174,1394,1201],{"class":1179},[1174,1396,1398,1400,1402,1405,1407],{"class":1176,"line":1397},17,[1174,1399,1376],{"class":1179},[1174,1401,1140],{"class":1183},[1174,1403,1404],{"class":1179},">Selected: {{ selectedId ?? 'none' }}\u003C\u002F",[1174,1406,1140],{"class":1183},[1174,1408,1201],{"class":1179},[1174,1410,1412,1414,1416],{"class":1176,"line":1411},18,[1174,1413,1351],{"class":1179},[1174,1415,1368],{"class":1183},[1174,1417,1201],{"class":1179},[1140,1419,1420],{},"With that evidence, separate three questions:",[1422,1423,1424,1428,1431],"ul",{},[1425,1426,1427],"li",{},"Is the cost in accessing a large structure that Vue converts and tracks deeply?",[1425,1429,1430],{},"Does a child component receive props or derived objects with a new identity even though their meaning did not change?",[1425,1432,1433],{},"Is the bottleneck the number of nodes that must render?",[1140,1435,1436,1437,1440,1441,1444],{},"Replacing ",[1155,1438,1439],{},"ref()"," with ",[1155,1442,1443],{},"shallowRef()"," only addresses the first question. If a list still has too many visible items, evaluate virtualization. If the problem is at component boundaries, stabilize props and derived values before adding rendering directives.",[1147,1446,1448],{"id":1447},"shallowref-large-state-with-replacement-updates","shallowRef(): Large State with Replacement Updates",[1140,1450,1451,1453,1454,1456,1457,1460],{},[1155,1452,1439],{}," deeply converts object values. By contrast, ",[1155,1455,1443],{}," makes only ",[1155,1458,1459],{},".value"," access reactive. This difference reduces access and tracking work for large structures treated as immutable, but it changes the update contract: a nested write does not notify on its own; replacing the root value does.",[1140,1462,1463],{},"The following catalog uses root replacement to express an edit. The second button illustrates the operation you should not expect to update the interface automatically.",[1162,1465,1469],{"className":1164,"code":1466,"filename":1467,"highlights":1468,"language":1169,"meta":1170,"style":1170},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from 'vue'\n\ntype CatalogItem = {\n  id: string\n  name: string\n}\n\nconst catalog = shallowRef\u003CCatalogItem[]>([\n  { id: 'catalog-1', name: 'Starter plan' },\n  { id: 'catalog-2', name: 'Team plan' }\n])\n\nfunction renameFirstItem() {\n  catalog.value = catalog.value.map((item, index) =>\n    index === 0 ? { ...item, name: 'Updated starter plan' } : item\n  )\n}\n\nfunction mutateFirstItemInPlace() {\n  catalog.value[0].name = 'Changed without replacing the root'\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"renameFirstItem\">Rename with root replacement\u003C\u002Fbutton>\n  \u003Cbutton @click=\"mutateFirstItemInPlace\">Mutate nested value\u003C\u002Fbutton>\n\n  \u003Cul>\n    \u003Cli v-for=\"item in catalog\" :key=\"item.id\">{{ item.name }}\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","LargeCatalog.vue",[1348,1358,1363],[1155,1470,1471,1487,1498,1502,1514,1525,1534,1539,1543,1563,1580,1595,1600,1605,1617,1647,1681,1686,1690,1695,1705,1722,1727,1736,1741,1750,1771,1792,1797,1806,1837,1847],{"__ignoreMap":1170},[1174,1472,1473,1475,1477,1479,1481,1483,1485],{"class":1176,"line":241},[1174,1474,1180],{"class":1179},[1174,1476,1184],{"class":1183},[1174,1478,1188],{"class":1187},[1174,1480,1191],{"class":1187},[1174,1482,1194],{"class":1179},[1174,1484,1198],{"class":1197},[1174,1486,1201],{"class":1179},[1174,1488,1489,1491,1494,1496],{"class":1176,"line":176},[1174,1490,1207],{"class":1206},[1174,1492,1493],{"class":1179}," { shallowRef } ",[1174,1495,1213],{"class":1206},[1174,1497,1216],{"class":1197},[1174,1499,1500],{"class":1176,"line":278},[1174,1501,1221],{"emptyLinePlaceholder":25},[1174,1503,1504,1507,1510,1512],{"class":1176,"line":147},[1174,1505,1506],{"class":1206},"type",[1174,1508,1509],{"class":1187}," CatalogItem",[1174,1511,1233],{"class":1206},[1174,1513,1282],{"class":1179},[1174,1515,1516,1519,1522],{"class":1176,"line":484},[1174,1517,1518],{"class":1272},"  id",[1174,1520,1521],{"class":1206},":",[1174,1523,1524],{"class":1229}," string\n",[1174,1526,1527,1530,1532],{"class":1176,"line":118},[1174,1528,1529],{"class":1272},"  name",[1174,1531,1521],{"class":1206},[1174,1533,1524],{"class":1229},[1174,1535,1536],{"class":1176,"line":426},[1174,1537,1538],{"class":1179},"}\n",[1174,1540,1541],{"class":1176,"line":349},[1174,1542,1221],{"emptyLinePlaceholder":25},[1174,1544,1545,1547,1550,1552,1555,1557,1560],{"class":1176,"line":362},[1174,1546,1226],{"class":1206},[1174,1548,1549],{"class":1229}," catalog",[1174,1551,1233],{"class":1206},[1174,1553,1554],{"class":1187}," shallowRef",[1174,1556,1180],{"class":1179},[1174,1558,1559],{"class":1187},"CatalogItem",[1174,1561,1562],{"class":1179},"[]>([\n",[1174,1564,1565,1568,1571,1574,1577],{"class":1176,"line":676},[1174,1566,1567],{"class":1179},"  { id: ",[1174,1569,1570],{"class":1197},"'catalog-1'",[1174,1572,1573],{"class":1179},", name: ",[1174,1575,1576],{"class":1197},"'Starter plan'",[1174,1578,1579],{"class":1179}," },\n",[1174,1581,1582,1584,1587,1589,1592],{"class":1176,"line":643},[1174,1583,1567],{"class":1179},[1174,1585,1586],{"class":1197},"'catalog-2'",[1174,1588,1573],{"class":1179},[1174,1590,1591],{"class":1197},"'Team plan'",[1174,1593,1594],{"class":1179}," }\n",[1174,1596,1597],{"class":1176,"line":1168},[1174,1598,1599],{"class":1179},"])\n",[1174,1601,1603],{"class":1602,"line":1348},[1176,1264],[1174,1604,1221],{"emptyLinePlaceholder":25},[1174,1606,1608,1611,1614],{"class":1607,"line":1358},[1176,1264],[1174,1609,1610],{"class":1206},"function",[1174,1612,1613],{"class":1187}," renameFirstItem",[1174,1615,1616],{"class":1179},"() {\n",[1174,1618,1620,1623,1625,1628,1631,1633,1636,1639,1642,1644],{"class":1619,"line":1363},[1176,1264],[1174,1621,1622],{"class":1179},"  catalog.value ",[1174,1624,1194],{"class":1206},[1174,1626,1627],{"class":1179}," catalog.value.",[1174,1629,1630],{"class":1187},"map",[1174,1632,1269],{"class":1179},[1174,1634,1635],{"class":1272},"item",[1174,1637,1638],{"class":1179},", ",[1174,1640,1641],{"class":1272},"index",[1174,1643,1276],{"class":1179},[1174,1645,1646],{"class":1206},"=>\n",[1174,1648,1649,1652,1655,1658,1661,1664,1667,1670,1673,1676,1678],{"class":1176,"line":1373},[1174,1650,1651],{"class":1179},"    index ",[1174,1653,1654],{"class":1206},"===",[1174,1656,1657],{"class":1229}," 0",[1174,1659,1660],{"class":1206}," ?",[1174,1662,1663],{"class":1179}," { ",[1174,1665,1666],{"class":1206},"...",[1174,1668,1669],{"class":1179},"item, name: ",[1174,1671,1672],{"class":1197},"'Updated starter plan'",[1174,1674,1675],{"class":1179}," } ",[1174,1677,1521],{"class":1206},[1174,1679,1680],{"class":1179}," item\n",[1174,1682,1683],{"class":1176,"line":1397},[1174,1684,1685],{"class":1179},"  )\n",[1174,1687,1688],{"class":1176,"line":1411},[1174,1689,1538],{"class":1179},[1174,1691,1693],{"class":1176,"line":1692},19,[1174,1694,1221],{"emptyLinePlaceholder":25},[1174,1696,1698,1700,1703],{"class":1176,"line":1697},20,[1174,1699,1610],{"class":1206},[1174,1701,1702],{"class":1187}," mutateFirstItemInPlace",[1174,1704,1616],{"class":1179},[1174,1706,1708,1711,1714,1717,1719],{"class":1176,"line":1707},21,[1174,1709,1710],{"class":1179},"  catalog.value[",[1174,1712,1713],{"class":1229},"0",[1174,1715,1716],{"class":1179},"].name ",[1174,1718,1194],{"class":1206},[1174,1720,1721],{"class":1197}," 'Changed without replacing the root'\n",[1174,1723,1725],{"class":1176,"line":1724},22,[1174,1726,1538],{"class":1179},[1174,1728,1730,1732,1734],{"class":1176,"line":1729},23,[1174,1731,1351],{"class":1179},[1174,1733,1184],{"class":1183},[1174,1735,1201],{"class":1179},[1174,1737,1739],{"class":1176,"line":1738},24,[1174,1740,1221],{"emptyLinePlaceholder":25},[1174,1742,1744,1746,1748],{"class":1176,"line":1743},25,[1174,1745,1180],{"class":1179},[1174,1747,1368],{"class":1183},[1174,1749,1201],{"class":1179},[1174,1751,1753,1755,1757,1759,1761,1764,1767,1769],{"class":1176,"line":1752},26,[1174,1754,1376],{"class":1179},[1174,1756,1379],{"class":1183},[1174,1758,1382],{"class":1187},[1174,1760,1194],{"class":1179},[1174,1762,1763],{"class":1197},"\"renameFirstItem\"",[1174,1765,1766],{"class":1179},">Rename with root replacement\u003C\u002F",[1174,1768,1379],{"class":1183},[1174,1770,1201],{"class":1179},[1174,1772,1774,1776,1778,1780,1782,1785,1788,1790],{"class":1176,"line":1773},27,[1174,1775,1376],{"class":1179},[1174,1777,1379],{"class":1183},[1174,1779,1382],{"class":1187},[1174,1781,1194],{"class":1179},[1174,1783,1784],{"class":1197},"\"mutateFirstItemInPlace\"",[1174,1786,1787],{"class":1179},">Mutate nested value\u003C\u002F",[1174,1789,1379],{"class":1183},[1174,1791,1201],{"class":1179},[1174,1793,1795],{"class":1176,"line":1794},28,[1174,1796,1221],{"emptyLinePlaceholder":25},[1174,1798,1800,1802,1804],{"class":1176,"line":1799},29,[1174,1801,1376],{"class":1179},[1174,1803,1422],{"class":1183},[1174,1805,1201],{"class":1179},[1174,1807,1809,1812,1814,1817,1819,1822,1825,1827,1830,1833,1835],{"class":1176,"line":1808},30,[1174,1810,1811],{"class":1179},"    \u003C",[1174,1813,1425],{"class":1183},[1174,1815,1816],{"class":1187}," v-for",[1174,1818,1194],{"class":1179},[1174,1820,1821],{"class":1197},"\"item in catalog\"",[1174,1823,1824],{"class":1187}," :key",[1174,1826,1194],{"class":1179},[1174,1828,1829],{"class":1197},"\"item.id\"",[1174,1831,1832],{"class":1179},">{{ item.name }}\u003C\u002F",[1174,1834,1425],{"class":1183},[1174,1836,1201],{"class":1179},[1174,1838,1840,1843,1845],{"class":1176,"line":1839},31,[1174,1841,1842],{"class":1179},"  \u003C\u002F",[1174,1844,1422],{"class":1183},[1174,1846,1201],{"class":1179},[1174,1848,1850,1852,1854],{"class":1176,"line":1849},32,[1174,1851,1351],{"class":1179},[1174,1853,1368],{"class":1183},[1174,1855,1201],{"class":1179},[1140,1857,1858,1859,1861,1862,1864],{},"The highlighted lines create a new array and assign a new reference to ",[1155,1860,1459],{},", so reactive consumers receive the update. The nested mutation may change the JavaScript object, but it does not trigger effects that depend on the ",[1155,1863,105],{}," by itself.",[1140,1866,1867,1868,1870,1871,1874,1875,1884],{},"Use this pattern when state is large and mostly immutable, or when Vue only needs to observe the container for external state. For a small object that your application commonly mutates deeply, ",[1155,1869,1439],{}," or ",[1155,1872,1873],{},"reactive()"," retain a clearer contract. If you need to revisit that foundation, see the guide to ",[1876,1877,1879,1881,1882],"a",{"href":1878},"\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.en\u002F",[1155,1880,999],{}," and ",[1155,1883,1000],{},".",[1147,1886,1888],{"id":1887},"triggerref-and-external-state-controlled-exceptions","triggerRef() and External State: Controlled Exceptions",[1140,1890,1891,1892,1894,1895,1898],{},"Sometimes an external system mutates internally a value you hold in a ",[1155,1893,105],{},". ",[1155,1896,1897],{},"triggerRef()"," lets you explicitly notify dependent effects after that mutation. It is useful as a controlled bridge, not as the primary update model for data you can update immutably.",[1162,1900,1904],{"className":1164,"code":1901,"filename":1902,"highlights":1903,"language":1169,"meta":1170,"style":1170},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef, triggerRef } from 'vue'\n\nconst draft = shallowRef({\n  title: 'Quarterly plan',\n  status: 'editing'\n})\n\nfunction saveDraft() {\n  draft.value.status = 'saved'\n  triggerRef(draft)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"saveDraft\">Save draft\u003C\u002Fbutton>\n  \u003Cp>{{ draft.title }} — {{ draft.status }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","ExplicitShallowTrigger.vue",[362,676],[1155,1905,1906,1922,1933,1937,1951,1962,1970,1974,1978,1988,1999,2007,2011,2019,2023,2031,2051,2064],{"__ignoreMap":1170},[1174,1907,1908,1910,1912,1914,1916,1918,1920],{"class":1176,"line":241},[1174,1909,1180],{"class":1179},[1174,1911,1184],{"class":1183},[1174,1913,1188],{"class":1187},[1174,1915,1191],{"class":1187},[1174,1917,1194],{"class":1179},[1174,1919,1198],{"class":1197},[1174,1921,1201],{"class":1179},[1174,1923,1924,1926,1929,1931],{"class":1176,"line":176},[1174,1925,1207],{"class":1206},[1174,1927,1928],{"class":1179}," { shallowRef, triggerRef } ",[1174,1930,1213],{"class":1206},[1174,1932,1216],{"class":1197},[1174,1934,1935],{"class":1176,"line":278},[1174,1936,1221],{"emptyLinePlaceholder":25},[1174,1938,1939,1941,1944,1946,1948],{"class":1176,"line":147},[1174,1940,1226],{"class":1206},[1174,1942,1943],{"class":1229}," draft",[1174,1945,1233],{"class":1206},[1174,1947,1554],{"class":1187},[1174,1949,1950],{"class":1179},"({\n",[1174,1952,1953,1956,1959],{"class":1176,"line":484},[1174,1954,1955],{"class":1179},"  title: ",[1174,1957,1958],{"class":1197},"'Quarterly plan'",[1174,1960,1961],{"class":1179},",\n",[1174,1963,1964,1967],{"class":1176,"line":118},[1174,1965,1966],{"class":1179},"  status: ",[1174,1968,1969],{"class":1197},"'editing'\n",[1174,1971,1972],{"class":1176,"line":426},[1174,1973,1306],{"class":1179},[1174,1975,1976],{"class":1176,"line":349},[1174,1977,1221],{"emptyLinePlaceholder":25},[1174,1979,1981,1983,1986],{"class":1980,"line":362},[1176,1264],[1174,1982,1610],{"class":1206},[1174,1984,1985],{"class":1187}," saveDraft",[1174,1987,1616],{"class":1179},[1174,1989,1991,1994,1996],{"class":1990,"line":676},[1176,1264],[1174,1992,1993],{"class":1179},"  draft.value.status ",[1174,1995,1194],{"class":1206},[1174,1997,1998],{"class":1197}," 'saved'\n",[1174,2000,2001,2004],{"class":1176,"line":643},[1174,2002,2003],{"class":1187},"  triggerRef",[1174,2005,2006],{"class":1179},"(draft)\n",[1174,2008,2009],{"class":1176,"line":1168},[1174,2010,1538],{"class":1179},[1174,2012,2013,2015,2017],{"class":1176,"line":1348},[1174,2014,1351],{"class":1179},[1174,2016,1184],{"class":1183},[1174,2018,1201],{"class":1179},[1174,2020,2021],{"class":1176,"line":1358},[1174,2022,1221],{"emptyLinePlaceholder":25},[1174,2024,2025,2027,2029],{"class":1176,"line":1363},[1174,2026,1180],{"class":1179},[1174,2028,1368],{"class":1183},[1174,2030,1201],{"class":1179},[1174,2032,2033,2035,2037,2039,2041,2044,2047,2049],{"class":1176,"line":1373},[1174,2034,1376],{"class":1179},[1174,2036,1379],{"class":1183},[1174,2038,1382],{"class":1187},[1174,2040,1194],{"class":1179},[1174,2042,2043],{"class":1197},"\"saveDraft\"",[1174,2045,2046],{"class":1179},">Save draft\u003C\u002F",[1174,2048,1379],{"class":1183},[1174,2050,1201],{"class":1179},[1174,2052,2053,2055,2057,2060,2062],{"class":1176,"line":1397},[1174,2054,1376],{"class":1179},[1174,2056,1140],{"class":1183},[1174,2058,2059],{"class":1179},">{{ draft.title }} — {{ draft.status }}\u003C\u002F",[1174,2061,1140],{"class":1183},[1174,2063,1201],{"class":1179},[1174,2065,2066,2068,2070],{"class":1176,"line":1411},[1174,2067,1351],{"class":1179},[1174,2069,1368],{"class":1183},[1174,2071,1201],{"class":1179},[1140,2073,2074],{},"Here, the explicit trigger makes a deep mutation visible. If you control the data shape, prefer replacing the root: it communicates what changed more clearly and prevents the rest of the code from relying on manual notifications.",[1147,2076,2078],{"id":2077},"readonly-protecting-mutation-ownership","readonly(): Protecting Mutation Ownership",[1140,2080,2081,2084],{},[1155,2082,2083],{},"readonly()"," creates a deeply readonly view. Reads from that view still participate in reactive tracking, and updates made to the original state can reach consumers of the view. Its main purpose is not performance optimization: it makes clear who owns mutations.",[1140,2086,2087],{},"This composable exposes items as readonly and keeps writing in an explicit function. The state lives inside the exported function, so every use receives its own instance.",[1162,2089,2095],{"className":2090,"code":2091,"filename":2092,"highlights":2093,"language":2094,"meta":1170,"style":1170},"language-ts shiki shiki-themes github-light github-dark","import { readonly, ref } from 'vue'\n\ntype CartItem = {\n  id: string\n  name: string\n}\n\nexport function useCart() {\n  const items = ref\u003CCartItem[]>([])\n\n  function addItem(item: CartItem) {\n    items.value = [...items.value, item]\n  }\n\n  return {\n    items: readonly(items),\n    addItem\n  }\n}\n","useCart.ts",[1373],"ts",[1155,2096,2097,2108,2112,2123,2131,2139,2143,2147,2160,2180,2184,2203,2218,2223,2227,2234,2245,2250,2254],{"__ignoreMap":1170},[1174,2098,2099,2101,2104,2106],{"class":1176,"line":241},[1174,2100,1207],{"class":1206},[1174,2102,2103],{"class":1179}," { readonly, ref } ",[1174,2105,1213],{"class":1206},[1174,2107,1216],{"class":1197},[1174,2109,2110],{"class":1176,"line":176},[1174,2111,1221],{"emptyLinePlaceholder":25},[1174,2113,2114,2116,2119,2121],{"class":1176,"line":278},[1174,2115,1506],{"class":1206},[1174,2117,2118],{"class":1187}," CartItem",[1174,2120,1233],{"class":1206},[1174,2122,1282],{"class":1179},[1174,2124,2125,2127,2129],{"class":1176,"line":147},[1174,2126,1518],{"class":1272},[1174,2128,1521],{"class":1206},[1174,2130,1524],{"class":1229},[1174,2132,2133,2135,2137],{"class":1176,"line":484},[1174,2134,1529],{"class":1272},[1174,2136,1521],{"class":1206},[1174,2138,1524],{"class":1229},[1174,2140,2141],{"class":1176,"line":118},[1174,2142,1538],{"class":1179},[1174,2144,2145],{"class":1176,"line":426},[1174,2146,1221],{"emptyLinePlaceholder":25},[1174,2148,2149,2152,2155,2158],{"class":1176,"line":349},[1174,2150,2151],{"class":1206},"export",[1174,2153,2154],{"class":1206}," function",[1174,2156,2157],{"class":1187}," useCart",[1174,2159,1616],{"class":1179},[1174,2161,2162,2165,2168,2170,2172,2174,2177],{"class":1176,"line":362},[1174,2163,2164],{"class":1206},"  const",[1174,2166,2167],{"class":1229}," items",[1174,2169,1233],{"class":1206},[1174,2171,1236],{"class":1187},[1174,2173,1180],{"class":1179},[1174,2175,2176],{"class":1187},"CartItem",[1174,2178,2179],{"class":1179},"[]>([])\n",[1174,2181,2182],{"class":1176,"line":676},[1174,2183,1221],{"emptyLinePlaceholder":25},[1174,2185,2186,2189,2192,2194,2196,2198,2200],{"class":1176,"line":643},[1174,2187,2188],{"class":1206},"  function",[1174,2190,2191],{"class":1187}," addItem",[1174,2193,1294],{"class":1179},[1174,2195,1635],{"class":1272},[1174,2197,1521],{"class":1206},[1174,2199,2118],{"class":1187},[1174,2201,2202],{"class":1179},") {\n",[1174,2204,2205,2208,2210,2213,2215],{"class":1176,"line":1168},[1174,2206,2207],{"class":1179},"    items.value ",[1174,2209,1194],{"class":1206},[1174,2211,2212],{"class":1179}," [",[1174,2214,1666],{"class":1206},[1174,2216,2217],{"class":1179},"items.value, item]\n",[1174,2219,2220],{"class":1176,"line":1348},[1174,2221,2222],{"class":1179},"  }\n",[1174,2224,2225],{"class":1176,"line":1358},[1174,2226,1221],{"emptyLinePlaceholder":25},[1174,2228,2229,2232],{"class":1176,"line":1363},[1174,2230,2231],{"class":1206},"  return",[1174,2233,1282],{"class":1179},[1174,2235,2237,2240,2242],{"class":2236,"line":1373},[1176,1264],[1174,2238,2239],{"class":1179},"    items: ",[1174,2241,106],{"class":1187},[1174,2243,2244],{"class":1179},"(items),\n",[1174,2246,2247],{"class":1176,"line":1397},[1174,2248,2249],{"class":1179},"    addItem\n",[1174,2251,2252],{"class":1176,"line":1411},[1174,2253,2222],{"class":1179},[1174,2255,2256],{"class":1176,"line":1692},[1174,2257,1538],{"class":1179},[1140,2259,2260,2261,2263],{},"This boundary answers API ownership and safety, not whether state should be deep or shallow. You can expose a ",[1155,2262,2083],{}," view of deep state or of a shallow container according to the update contract you chose.",[1147,2265,2267],{"id":2266},"markraw-excluding-instances-vue-should-not-proxy","markRaw(): Excluding Instances Vue Should Not Proxy",[1140,2269,2270,2273],{},[1155,2271,2272],{},"markRaw()"," prevents Vue from converting one specific object into a proxy. Reserve it for complex instances that should not be proxied, such as an instance managed by an external library. It is not a general optimization for application objects.",[1162,2275,2279],{"className":2090,"code":2276,"filename":2277,"highlights":2278,"language":2094,"meta":1170,"style":1170},"import { markRaw, reactive } from 'vue'\n\nclass ExternalEngine {\n  private connected = false\n\n  connect() {\n    this.connected = true\n  }\n\n  get status() {\n    return this.connected ? 'connected' : 'idle'\n  }\n}\n\nconst engine = markRaw(new ExternalEngine())\nconst state = reactive({ engine })\n\nstate.engine.connect()\nconsole.log(state.engine.status)\n","external-engine.ts",[1363],[1155,2280,2281,2292,2296,2306,2319,2323,2330,2343,2347,2351,2361,2383,2387,2391,2395,2418,2433,2437,2448],{"__ignoreMap":1170},[1174,2282,2283,2285,2288,2290],{"class":1176,"line":241},[1174,2284,1207],{"class":1206},[1174,2286,2287],{"class":1179}," { markRaw, reactive } ",[1174,2289,1213],{"class":1206},[1174,2291,1216],{"class":1197},[1174,2293,2294],{"class":1176,"line":176},[1174,2295,1221],{"emptyLinePlaceholder":25},[1174,2297,2298,2301,2304],{"class":1176,"line":278},[1174,2299,2300],{"class":1206},"class",[1174,2302,2303],{"class":1187}," ExternalEngine",[1174,2305,1282],{"class":1179},[1174,2307,2308,2311,2314,2316],{"class":1176,"line":147},[1174,2309,2310],{"class":1206},"  private",[1174,2312,2313],{"class":1272}," connected",[1174,2315,1233],{"class":1206},[1174,2317,2318],{"class":1229}," false\n",[1174,2320,2321],{"class":1176,"line":484},[1174,2322,1221],{"emptyLinePlaceholder":25},[1174,2324,2325,2328],{"class":1176,"line":118},[1174,2326,2327],{"class":1187},"  connect",[1174,2329,1616],{"class":1179},[1174,2331,2332,2335,2338,2340],{"class":1176,"line":426},[1174,2333,2334],{"class":1229},"    this",[1174,2336,2337],{"class":1179},".connected ",[1174,2339,1194],{"class":1206},[1174,2341,2342],{"class":1229}," true\n",[1174,2344,2345],{"class":1176,"line":349},[1174,2346,2222],{"class":1179},[1174,2348,2349],{"class":1176,"line":362},[1174,2350,1221],{"emptyLinePlaceholder":25},[1174,2352,2353,2356,2359],{"class":1176,"line":676},[1174,2354,2355],{"class":1206},"  get",[1174,2357,2358],{"class":1187}," status",[1174,2360,1616],{"class":1179},[1174,2362,2363,2366,2369,2371,2374,2377,2380],{"class":1176,"line":643},[1174,2364,2365],{"class":1206},"    return",[1174,2367,2368],{"class":1229}," this",[1174,2370,2337],{"class":1179},[1174,2372,2373],{"class":1206},"?",[1174,2375,2376],{"class":1197}," 'connected'",[1174,2378,2379],{"class":1206}," :",[1174,2381,2382],{"class":1197}," 'idle'\n",[1174,2384,2385],{"class":1176,"line":1168},[1174,2386,2222],{"class":1179},[1174,2388,2389],{"class":1176,"line":1348},[1174,2390,1538],{"class":1179},[1174,2392,2393],{"class":1176,"line":1358},[1174,2394,1221],{"emptyLinePlaceholder":25},[1174,2396,2398,2400,2403,2405,2408,2410,2413,2415],{"class":2397,"line":1363},[1176,1264],[1174,2399,1226],{"class":1206},[1174,2401,2402],{"class":1229}," engine",[1174,2404,1233],{"class":1206},[1174,2406,2407],{"class":1187}," markRaw",[1174,2409,1294],{"class":1179},[1174,2411,2412],{"class":1206},"new",[1174,2414,2303],{"class":1187},[1174,2416,2417],{"class":1179},"())\n",[1174,2419,2420,2422,2425,2427,2430],{"class":1176,"line":1373},[1174,2421,1226],{"class":1206},[1174,2423,2424],{"class":1229}," state",[1174,2426,1233],{"class":1206},[1174,2428,2429],{"class":1187}," reactive",[1174,2431,2432],{"class":1179},"({ engine })\n",[1174,2434,2435],{"class":1176,"line":1397},[1174,2436,1221],{"emptyLinePlaceholder":25},[1174,2438,2439,2442,2445],{"class":1176,"line":1411},[1174,2440,2441],{"class":1179},"state.engine.",[1174,2443,2444],{"class":1187},"connect",[1174,2446,2447],{"class":1179},"()\n",[1174,2449,2450,2453,2456],{"class":1176,"line":1692},[1174,2451,2452],{"class":1179},"console.",[1174,2454,2455],{"class":1187},"log",[1174,2457,2458],{"class":1179},"(state.engine.status)\n",[1140,2460,2461,2462,2464],{},"The ",[1155,2463,2272],{}," opt-out applies at the root. If nested objects enter a reactive graph again through another path, you may end up comparing a raw reference with a proxied version. This identity risk is a reason to keep the boundary small and avoid mixing raw and proxied references without a clear need.",[1147,2466,2468],{"id":2467},"unnecessary-updates-that-shallowref-does-not-solve","Unnecessary Updates That shallowRef Does Not Solve",[1140,2470,2471,2472,2474],{},"Even with the right reactivity boundary, a derived value can create extra work if it creates a new object every time. In Vue 3.4 or later, a ",[1155,2473,268],{}," can reuse its previous value when a safe comparison shows that the semantic result did not change.",[1162,2476,2480],{"className":1164,"code":2477,"filename":2478,"highlights":2479,"language":1169,"meta":1170,"style":1170},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nconst quantity = ref(1)\n\nconst availability = computed\u003C{ label: string }>((previous) => {\n  const next = {\n    label: quantity.value > 0 ? 'In stock' : 'Sold out'\n  }\n\n  if (previous?.label === next.label) return previous\n  return next\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"quantity += 1\">Add one\u003C\u002Fbutton>\n  \u003Cbutton @click=\"quantity -= 1\">Remove one\u003C\u002Fbutton>\n  \u003Cp>{{ availability.label }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","AvailabilityLabel.vue",[643,1168],[1155,2481,2482,2498,2509,2513,2531,2535,2570,2581,2601,2605,2609,2629,2637,2641,2649,2653,2661,2681,2701,2714],{"__ignoreMap":1170},[1174,2483,2484,2486,2488,2490,2492,2494,2496],{"class":1176,"line":241},[1174,2485,1180],{"class":1179},[1174,2487,1184],{"class":1183},[1174,2489,1188],{"class":1187},[1174,2491,1191],{"class":1187},[1174,2493,1194],{"class":1179},[1174,2495,1198],{"class":1197},[1174,2497,1201],{"class":1179},[1174,2499,2500,2502,2505,2507],{"class":1176,"line":176},[1174,2501,1207],{"class":1206},[1174,2503,2504],{"class":1179}," { computed, ref } ",[1174,2506,1213],{"class":1206},[1174,2508,1216],{"class":1197},[1174,2510,2511],{"class":1176,"line":278},[1174,2512,1221],{"emptyLinePlaceholder":25},[1174,2514,2515,2517,2520,2522,2524,2526,2529],{"class":1176,"line":147},[1174,2516,1226],{"class":1206},[1174,2518,2519],{"class":1229}," quantity",[1174,2521,1233],{"class":1206},[1174,2523,1236],{"class":1187},[1174,2525,1294],{"class":1179},[1174,2527,2528],{"class":1229},"1",[1174,2530,1256],{"class":1179},[1174,2532,2533],{"class":1176,"line":484},[1174,2534,1221],{"emptyLinePlaceholder":25},[1174,2536,2537,2539,2542,2544,2547,2550,2553,2555,2558,2561,2564,2566,2568],{"class":1176,"line":118},[1174,2538,1226],{"class":1206},[1174,2540,2541],{"class":1229}," availability",[1174,2543,1233],{"class":1206},[1174,2545,2546],{"class":1187}," computed",[1174,2548,2549],{"class":1179},"\u003C{ ",[1174,2551,2552],{"class":1272},"label",[1174,2554,1521],{"class":1206},[1174,2556,2557],{"class":1229}," string",[1174,2559,2560],{"class":1179}," }>((",[1174,2562,2563],{"class":1272},"previous",[1174,2565,1276],{"class":1179},[1174,2567,1279],{"class":1206},[1174,2569,1282],{"class":1179},[1174,2571,2572,2574,2577,2579],{"class":1176,"line":426},[1174,2573,2164],{"class":1206},[1174,2575,2576],{"class":1229}," next",[1174,2578,1233],{"class":1206},[1174,2580,1282],{"class":1179},[1174,2582,2583,2586,2589,2591,2593,2596,2598],{"class":1176,"line":349},[1174,2584,2585],{"class":1179},"    label: quantity.value ",[1174,2587,2588],{"class":1206},">",[1174,2590,1657],{"class":1229},[1174,2592,1660],{"class":1206},[1174,2594,2595],{"class":1197}," 'In stock'",[1174,2597,2379],{"class":1206},[1174,2599,2600],{"class":1197}," 'Sold out'\n",[1174,2602,2603],{"class":1176,"line":362},[1174,2604,2222],{"class":1179},[1174,2606,2607],{"class":1176,"line":676},[1174,2608,1221],{"emptyLinePlaceholder":25},[1174,2610,2612,2615,2618,2620,2623,2626],{"class":2611,"line":643},[1176,1264],[1174,2613,2614],{"class":1206},"  if",[1174,2616,2617],{"class":1179}," (previous?.label ",[1174,2619,1654],{"class":1206},[1174,2621,2622],{"class":1179}," next.label) ",[1174,2624,2625],{"class":1206},"return",[1174,2627,2628],{"class":1179}," previous\n",[1174,2630,2632,2634],{"class":2631,"line":1168},[1176,1264],[1174,2633,2231],{"class":1206},[1174,2635,2636],{"class":1179}," next\n",[1174,2638,2639],{"class":1176,"line":1348},[1174,2640,1306],{"class":1179},[1174,2642,2643,2645,2647],{"class":1176,"line":1358},[1174,2644,1351],{"class":1179},[1174,2646,1184],{"class":1183},[1174,2648,1201],{"class":1179},[1174,2650,2651],{"class":1176,"line":1363},[1174,2652,1221],{"emptyLinePlaceholder":25},[1174,2654,2655,2657,2659],{"class":1176,"line":1373},[1174,2656,1180],{"class":1179},[1174,2658,1368],{"class":1183},[1174,2660,1201],{"class":1179},[1174,2662,2663,2665,2667,2669,2671,2674,2677,2679],{"class":1176,"line":1397},[1174,2664,1376],{"class":1179},[1174,2666,1379],{"class":1183},[1174,2668,1382],{"class":1187},[1174,2670,1194],{"class":1179},[1174,2672,2673],{"class":1197},"\"quantity += 1\"",[1174,2675,2676],{"class":1179},">Add one\u003C\u002F",[1174,2678,1379],{"class":1183},[1174,2680,1201],{"class":1179},[1174,2682,2683,2685,2687,2689,2691,2694,2697,2699],{"class":1176,"line":1411},[1174,2684,1376],{"class":1179},[1174,2686,1379],{"class":1183},[1174,2688,1382],{"class":1187},[1174,2690,1194],{"class":1179},[1174,2692,2693],{"class":1197},"\"quantity -= 1\"",[1174,2695,2696],{"class":1179},">Remove one\u003C\u002F",[1174,2698,1379],{"class":1183},[1174,2700,1201],{"class":1179},[1174,2702,2703,2705,2707,2710,2712],{"class":1176,"line":1692},[1174,2704,1376],{"class":1179},[1174,2706,1140],{"class":1183},[1174,2708,2709],{"class":1179},">{{ availability.label }}\u003C\u002F",[1174,2711,1140],{"class":1183},[1174,2713,1201],{"class":1179},[1174,2715,2716,2718,2720],{"class":1176,"line":1697},[1174,2717,1351],{"class":1179},[1174,2719,1368],{"class":1183},[1174,2721,1201],{"class":1179},[1140,2723,2724,2725,2728,2729,2731],{},"The comparison happens after building ",[1155,2726,2727],{},"next",", so the ",[1155,2730,268],{}," reads its dependencies before deciding whether it can reuse the result. When quantity moves from one to two, the label remains the same and the previous identity is retained. Apply this technique only when you can safely compare the meaning consumed by descendants.",[1140,2733,2734,2735,1870,2737,2739,2740,2744,2745,2752],{},"Stable props remain just as important: move calculations to the component that owns the data when doing so lets children receive values that do not change. Consider ",[1155,2736,697],{},[1155,2738,696],{}," only after measuring and stabilizing data flow. The ",[1876,2741,2743],{"href":2742},"\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.en\u002F","render debugging"," guide and the ",[1876,2746,2748,1881,2750],{"href":2747},"\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.en\u002F",[1155,2749,697],{},[1155,2751,696],{}," guide help evaluate those cases.",[1147,2754,2756],{"id":2755},"decision-rule","Decision Rule",[1140,2758,2759],{},"Choose the API by the state contract, not its name:",[2761,2762,2763,2776],"table",{},[2764,2765,2766],"thead",{},[2767,2768,2769,2773],"tr",{},[2770,2771,2772],"th",{},"Situation",[2770,2774,2775],{},"Initial decision",[2777,2778,2779,2791,2801,2810],"tbody",{},[2767,2780,2781,2785],{},[2782,2783,2784],"td",{},"Small state with frequent nested mutations",[2782,2786,2787,1870,2789],{},[1155,2788,1439],{},[1155,2790,1873],{},[2767,2792,2793,2796],{},[2782,2794,2795],{},"Large immutable structure, or a container for external state",[2782,2797,2798,2800],{},[1155,2799,1443],{}," and root replacement",[2767,2802,2803,2806],{},[2782,2804,2805],{},"Public view that consumers must not mutate",[2782,2807,2808],{},[1155,2809,2083],{},[2767,2811,2812,2815],{},[2782,2813,2814],{},"A specific instance Vue should not proxy",[2782,2816,2817],{},[1155,2818,2272],{},[1140,2820,2821],{},"Before applying any of these options, measure or inspect rendering in development. Then confirm whether the remaining work belongs to reactivity, component updates, or DOM volume.",[1140,2823,2824,2825,2827,2828,2830],{},"Useful optimization means setting the right boundary. Keep deep reactivity when nested mutations are part of the contract; use shallow replacement when immutability makes it viable; expose ",[1155,2826,2083],{}," to protect ownership of writes; and reserve ",[1155,2829,2272],{}," for focused exceptions. This reduces unnecessary work without hiding updates the interface actually needs.",[2832,2833,2834],"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 .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":1170,"searchDepth":176,"depth":176,"links":2836},[2837,2838,2839,2840,2841,2842,2843],{"id":1149,"depth":176,"text":1150},{"id":1447,"depth":176,"text":1448},{"id":1887,"depth":176,"text":1888},{"id":2077,"depth":176,"text":2078},{"id":2266,"depth":176,"text":2267},{"id":2467,"depth":176,"text":2468},{"id":2755,"depth":176,"text":2756},"Vue reactivity boundary diagram showing shallowRef, readonly, and markRaw.","Learn to choose Vue reactivity boundaries, update shallow state correctly, and distinguish deep conversion from avoidable renders.",{"title":2847,"goal":2848,"tasks":2849,"starterCode":2853,"solutionHint":2854},"Repair the catalog update flow","Update a shallow catalog through root replacement and classify the remaining work as reactive, component-level, or DOM-level.",[2850,2851,2852],"Make the button update the first item's name without mutating the nested array.","Explain whether an observed extra render belongs to reactivity, child-component props, or DOM-node volume.","Use onRenderTriggered() in development before adding another optimization.","\u003Cscript setup lang=\"ts\">\nimport { shallowRef } from 'vue'\n\ntype CatalogItem = {\n  id: string\n  name: string\n}\n\nconst catalog = shallowRef\u003CCatalogItem[]>([\n  { id: 'catalog-1', name: 'Starter plan' }\n])\n\nfunction renameFirstItem() {\n  catalog.value[0].name = 'Updated starter plan'\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"renameFirstItem\">Rename first item\u003C\u002Fbutton>\n  \u003Cp>{{ catalog[0].name }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","Create a new array with map() and assign it to catalog.value. A nested mutation does not by itself notify shallowRef() dependencies.","en",{"updatedAt":101,"author":16,"coverCaption":2857,"keywords":2858},"Diagram about Vue reactivity boundaries.",[2859,105,106,107,2860,109,2861],"reactive performance in Vue","unnecessary Vue updates","computed stability","\u002Fblog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.en",[2864],{"headline":1131,"author":2865,"datePublished":101,"@type":31},{"name":16,"@type":30},{"title":1131,"description":2845},"A practical path to understand how Vue tracks state, choose the right reactive API, and optimize updates without losing clarity.","Practical Reactivity in Vue 3","blog\u002Freactive-performance-shallowref-readonly-markraw-unnecessary-updates.en",[2871,2873,2875],{"tag":2872,"color":47},"Reactivity",{"tag":2874,"color":88},"Performance",{"tag":2876,"color":53},"Best Practices","jr3PeWMIKOfO-R_Na3Sksrlj1WdTto_EomxUTOs9ZnM",[2879,2893,2905,2916,2927,2941,2954,2968,2980,2992,3004,3017,3030,3042,3054,3065,3078,3090,3102,3114,3126,3139,3151,3164,3176,3188,3200,3211,3223,3235,3247,3261,3275,3289,3300,3312,3322,3331,3341],{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"locale":13,"meta":2880,"navigation":25,"path":26,"schemaOrg":2882,"seo":2885,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":34,"tags":2886,"__hash__":54},{"updatedAt":15,"author":16,"coverCaption":17,"keywords":2881},[19,20,21,22,23,24],[2883],{"headline":6,"author":2884,"datePublished":15,"@type":31},{"name":16,"@type":30},{"title":6,"description":10},[2887,2888,2889,2890,2891,2892],{"tag":37,"color":38},{"tag":40,"color":41},{"tag":43,"color":44},{"tag":46,"color":47},{"tag":49,"color":50},{"tag":52,"color":53},{"id":56,"title":57,"cover":58,"coverAlt":59,"date":60,"description":61,"draft":11,"extension":12,"locale":13,"meta":2894,"navigation":25,"path":72,"schemaOrg":2896,"seo":2899,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":78,"tags":2900,"__hash__":92},{"updatedAt":63,"author":16,"coverCaption":64,"keywords":2895},[66,67,68,69,70,71],[2897],{"headline":57,"author":2898,"datePublished":76,"@type":31},{"name":16,"@type":30},{"title":57,"description":61},[2901,2902,2903,2904],{"tag":81,"color":82},{"tag":84,"color":85},{"tag":87,"color":88},{"tag":90,"color":91},{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"locale":13,"meta":2906,"navigation":25,"path":111,"schemaOrg":2908,"seo":2911,"series":116,"seriesDescription":117,"seriesOrder":118,"seriesTitle":119,"slug":33,"stem":120,"tags":2912,"__hash__":125},{"updatedAt":101,"author":16,"coverCaption":102,"keywords":2907},[104,105,106,107,108,109,110],[2909],{"headline":95,"author":2910,"datePublished":101,"@type":31},{"name":16,"@type":30},{"title":95,"description":99},[2913,2914,2915],{"tag":46,"color":47},{"tag":87,"color":88},{"tag":52,"color":53},{"id":127,"title":128,"cover":129,"coverAlt":130,"date":131,"description":132,"draft":11,"extension":12,"locale":13,"meta":2917,"navigation":25,"path":142,"schemaOrg":2919,"seo":2922,"series":116,"seriesDescription":117,"seriesOrder":147,"seriesTitle":119,"slug":33,"stem":148,"tags":2923,"__hash__":153},{"updatedAt":134,"author":16,"coverCaption":135,"keywords":2918},[137,138,139,140,141],[2920],{"headline":128,"author":2921,"datePublished":134,"@type":31},{"name":16,"@type":30},{"title":128,"description":132},[2924,2925,2926],{"tag":46,"color":47},{"tag":43,"color":44},{"tag":37,"color":38},{"id":155,"title":156,"cover":157,"coverAlt":158,"date":159,"description":160,"draft":11,"extension":12,"locale":13,"meta":2928,"navigation":25,"path":171,"schemaOrg":2930,"seo":2933,"series":116,"seriesDescription":117,"seriesOrder":176,"seriesTitle":119,"slug":33,"stem":177,"tags":2934,"__hash__":185},{"updatedAt":162,"author":16,"coverCaption":163,"keywords":2929},[165,166,167,168,169,170],[2931],{"headline":156,"author":2932,"datePublished":162,"@type":31},{"name":16,"@type":30},{"title":156,"description":160},[2935,2936,2937,2938,2939,2940],{"tag":46,"color":47},{"tag":49,"color":50},{"tag":37,"color":38},{"tag":43,"color":44},{"tag":40,"color":41},{"tag":52,"color":53},{"id":187,"title":188,"cover":189,"coverAlt":190,"date":191,"description":192,"draft":11,"extension":12,"locale":13,"meta":2942,"navigation":25,"path":201,"schemaOrg":2944,"seo":2947,"series":207,"seriesDescription":208,"seriesOrder":118,"seriesTitle":209,"slug":33,"stem":210,"tags":2948,"__hash__":218},{"updatedAt":194,"author":16,"coverCaption":195,"keywords":2943},[197,198,199,49,200,43],[2945],{"headline":188,"author":2946,"datePublished":205,"@type":31},{"name":16,"@type":30},{"title":188,"description":192},[2949,2950,2951,2952,2953],{"tag":49,"color":50},{"tag":200,"color":214},{"tag":52,"color":53},{"tag":43,"color":44},{"tag":40,"color":41},{"id":220,"title":221,"cover":222,"coverAlt":223,"date":224,"description":225,"draft":11,"extension":12,"locale":13,"meta":2955,"navigation":25,"path":235,"schemaOrg":2957,"seo":2960,"series":207,"seriesDescription":208,"seriesOrder":241,"seriesTitle":209,"slug":33,"stem":242,"tags":2961,"__hash__":255},{"updatedAt":194,"author":16,"coverCaption":227,"keywords":2956},[229,230,231,232,233,234],[2958],{"headline":221,"author":2959,"datePublished":239,"@type":31},{"name":16,"@type":30},{"title":221,"description":225},[2962,2963,2964,2965,2966,2967],{"tag":229,"color":245},{"tag":200,"color":214},{"tag":52,"color":53},{"tag":43,"color":44},{"tag":250,"color":251},{"tag":253,"color":254},{"id":257,"title":258,"cover":259,"coverAlt":260,"date":261,"description":262,"draft":11,"extension":12,"locale":13,"meta":2969,"navigation":25,"path":272,"schemaOrg":2971,"seo":2974,"series":116,"seriesDescription":117,"seriesOrder":278,"seriesTitle":119,"slug":33,"stem":279,"tags":2975,"__hash__":285},{"updatedAt":264,"coverCaption":265,"author":16,"keywords":2970},[267,199,268,269,270,271,170],[2972],{"headline":258,"author":2973,"datePublished":276,"@type":31},{"name":16,"@type":30},{"title":258,"description":262},[2976,2977,2978,2979],{"tag":46,"color":47},{"tag":52,"color":53},{"tag":87,"color":88},{"tag":37,"color":38},{"id":287,"title":288,"cover":289,"coverAlt":288,"date":290,"description":291,"draft":11,"extension":12,"locale":13,"meta":2981,"navigation":25,"path":300,"schemaOrg":2983,"seo":2986,"series":207,"seriesDescription":208,"seriesOrder":176,"seriesTitle":209,"slug":33,"stem":306,"tags":2987,"__hash__":314},{"updatedAt":194,"coverCaption":293,"author":16,"keywords":2982},[267,199,295,296,297,298,299],[2984],{"headline":288,"author":2985,"datePublished":304,"@type":31},{"name":16,"@type":30},{"title":288,"description":291},[2988,2989,2990,2991],{"tag":229,"color":245},{"tag":250,"color":251},{"tag":37,"color":38},{"tag":312,"color":313},{"id":316,"title":317,"cover":318,"coverAlt":319,"date":320,"description":321,"draft":11,"extension":12,"locale":13,"meta":2993,"navigation":25,"path":327,"schemaOrg":2995,"seo":2998,"series":207,"seriesDescription":208,"seriesOrder":278,"seriesTitle":209,"slug":33,"stem":333,"tags":2999,"__hash__":339},{"updatedAt":194,"coverCaption":323,"author":16,"keywords":2994},[267,199,43,170,325,326],[2996],{"headline":317,"author":2997,"datePublished":331,"@type":31},{"name":16,"@type":30},{"title":317,"description":321},[3000,3001,3002,3003],{"tag":43,"color":44},{"tag":229,"color":245},{"tag":52,"color":53},{"tag":312,"color":313},{"id":341,"title":342,"cover":343,"coverAlt":344,"date":345,"description":346,"draft":11,"extension":12,"locale":13,"meta":3005,"navigation":25,"path":355,"schemaOrg":3007,"seo":3010,"series":360,"seriesDescription":361,"seriesOrder":362,"seriesTitle":363,"slug":33,"stem":364,"tags":3011,"__hash__":373},{"updatedAt":348,"readingTime":349,"coverCaption":350,"author":16,"keywords":3006},[267,352,353,40,354],[3008],{"headline":342,"author":3009,"datePublished":348,"@type":31},{"name":16,"@type":30},{"title":342,"description":346},[3012,3013,3014,3015,3016],{"tag":367,"color":368},{"tag":40,"color":41},{"tag":200,"color":214},{"tag":229,"color":245},{"tag":84,"color":85},{"id":375,"title":376,"cover":377,"coverAlt":378,"date":379,"description":380,"draft":11,"extension":12,"locale":13,"meta":3018,"navigation":25,"path":389,"schemaOrg":3020,"seo":3023,"series":360,"seriesDescription":361,"seriesOrder":349,"seriesTitle":363,"slug":33,"stem":394,"tags":3024,"__hash__":405},{"updatedAt":382,"coverCaption":383,"author":16,"keywords":3019},[267,385,386,387,388],[3021],{"headline":376,"author":3022,"datePublished":382,"@type":31},{"name":16,"@type":30},{"title":376,"description":380},[3025,3026,3027,3028,3029],{"tag":367,"color":368},{"tag":398,"color":399},{"tag":401,"color":402},{"tag":46,"color":47},{"tag":84,"color":85},{"id":407,"title":408,"cover":409,"coverAlt":410,"date":411,"description":412,"draft":11,"extension":12,"locale":13,"meta":3031,"navigation":25,"path":421,"schemaOrg":3033,"seo":3036,"series":360,"seriesDescription":361,"seriesOrder":426,"seriesTitle":363,"slug":33,"stem":427,"tags":3037,"__hash__":435},{"updatedAt":414,"coverCaption":415,"author":16,"keywords":3032},[267,417,418,419,420],[3034],{"headline":408,"author":3035,"datePublished":414,"@type":31},{"name":16,"@type":30},{"title":408,"description":412},[3038,3039,3040,3041],{"tag":367,"color":368},{"tag":431,"color":432},{"tag":229,"color":245},{"tag":84,"color":85},{"id":437,"title":438,"cover":439,"coverAlt":440,"date":441,"description":442,"draft":11,"extension":12,"locale":13,"meta":3043,"navigation":25,"path":451,"schemaOrg":3045,"seo":3048,"series":360,"seriesDescription":361,"seriesOrder":118,"seriesTitle":363,"slug":33,"stem":456,"tags":3049,"__hash__":463},{"updatedAt":444,"coverCaption":445,"author":16,"keywords":3044},[267,447,448,449,450],[3046],{"headline":438,"author":3047,"datePublished":444,"@type":31},{"name":16,"@type":30},{"title":438,"description":442},[3050,3051,3052,3053],{"tag":367,"color":368},{"tag":447,"color":460},{"tag":229,"color":245},{"tag":84,"color":85},{"id":465,"title":466,"cover":467,"coverAlt":468,"date":469,"description":470,"draft":11,"extension":12,"locale":13,"meta":3055,"navigation":25,"path":479,"schemaOrg":3057,"seo":3060,"series":360,"seriesDescription":361,"seriesOrder":484,"seriesTitle":363,"slug":33,"stem":485,"tags":3061,"__hash__":490},{"updatedAt":472,"coverCaption":473,"author":16,"keywords":3056},[267,475,476,477,478],[3058],{"headline":466,"author":3059,"datePublished":472,"@type":31},{"name":16,"@type":30},{"title":466,"description":470},[3062,3063,3064],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":312,"color":313},{"id":492,"title":493,"cover":494,"coverAlt":495,"date":496,"description":497,"draft":11,"extension":12,"locale":13,"meta":3066,"navigation":25,"path":506,"schemaOrg":3068,"seo":3071,"series":360,"seriesDescription":361,"seriesOrder":147,"seriesTitle":363,"slug":33,"stem":511,"tags":3072,"__hash__":518},{"updatedAt":499,"coverCaption":500,"author":16,"keywords":3067},[267,502,503,504,505],[3069],{"headline":493,"author":3070,"datePublished":499,"@type":31},{"name":16,"@type":30},{"title":493,"description":497},[3073,3074,3075,3076,3077],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":401,"color":402},{"tag":46,"color":47},{"tag":312,"color":313},{"id":520,"title":521,"cover":522,"coverAlt":523,"date":524,"description":525,"draft":11,"extension":12,"locale":13,"meta":3079,"navigation":25,"path":534,"schemaOrg":3081,"seo":3084,"series":360,"seriesDescription":361,"seriesOrder":278,"seriesTitle":363,"slug":33,"stem":539,"tags":3085,"__hash__":545},{"updatedAt":527,"coverCaption":528,"author":16,"keywords":3080},[267,530,531,532,533],[3082],{"headline":521,"author":3083,"datePublished":527,"@type":31},{"name":16,"@type":30},{"title":521,"description":525},[3086,3087,3088,3089],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":401,"color":402},{"tag":312,"color":313},{"id":547,"title":548,"cover":549,"coverAlt":550,"date":551,"description":552,"draft":11,"extension":12,"locale":13,"meta":3091,"navigation":25,"path":560,"schemaOrg":3093,"seo":3096,"series":360,"seriesDescription":361,"seriesOrder":176,"seriesTitle":363,"slug":33,"stem":565,"tags":3097,"__hash__":571},{"updatedAt":554,"coverCaption":555,"author":16,"keywords":3092},[267,557,558,559,170],[3094],{"headline":548,"author":3095,"datePublished":554,"@type":31},{"name":16,"@type":30},{"title":548,"description":552},[3098,3099,3100,3101],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":46,"color":47},{"tag":312,"color":313},{"id":573,"title":574,"cover":575,"coverAlt":574,"date":576,"description":577,"draft":11,"extension":12,"locale":13,"meta":3103,"navigation":25,"path":585,"schemaOrg":3105,"seo":3108,"series":360,"seriesDescription":361,"seriesOrder":241,"seriesTitle":363,"slug":33,"stem":590,"tags":3109,"__hash__":596},{"updatedAt":579,"readingTime":349,"coverCaption":580,"author":16,"keywords":3104},[267,582,170,583,584],[3106],{"headline":574,"author":3107,"datePublished":579,"@type":31},{"name":16,"@type":30},{"title":574,"description":577},[3110,3111,3112,3113],{"tag":367,"color":368},{"tag":229,"color":245},{"tag":46,"color":47},{"tag":312,"color":313},{"id":598,"title":599,"cover":600,"coverAlt":599,"date":601,"description":602,"draft":11,"extension":12,"locale":13,"meta":3115,"navigation":25,"path":609,"schemaOrg":3117,"seo":3120,"series":116,"seriesDescription":117,"seriesOrder":484,"seriesTitle":119,"slug":33,"stem":615,"tags":3121,"__hash__":621},{"updatedAt":264,"coverCaption":604,"author":16,"keywords":3116},[199,271,606,607,608,268],[3118],{"headline":599,"author":3119,"datePublished":613,"@type":31},{"name":16,"@type":30},{"title":599,"description":602},[3122,3123,3124,3125],{"tag":46,"color":47},{"tag":200,"color":214},{"tag":87,"color":88},{"tag":84,"color":85},{"id":623,"title":624,"cover":625,"coverAlt":626,"date":627,"description":628,"draft":11,"extension":12,"locale":13,"meta":3127,"navigation":25,"path":635,"schemaOrg":3129,"seo":3132,"series":641,"seriesDescription":642,"seriesOrder":643,"seriesTitle":644,"slug":33,"stem":645,"tags":3133,"__hash__":656},{"updatedAt":630,"coverCaption":626,"author":16,"keywords":3128},[267,632,633,634,170,583],[3130],{"headline":638,"author":3131,"datePublished":630,"@type":31},{"name":16,"@type":30},{"title":624,"description":628},[3134,3135,3136,3137,3138],{"tag":648,"color":649},{"tag":651,"color":652},{"tag":200,"color":214},{"tag":46,"color":47},{"tag":84,"color":85},{"id":658,"title":659,"cover":660,"coverAlt":661,"date":662,"description":663,"draft":11,"extension":12,"locale":13,"meta":3140,"navigation":25,"path":670,"schemaOrg":3142,"seo":3145,"series":641,"seriesDescription":642,"seriesOrder":676,"seriesTitle":644,"slug":33,"stem":677,"tags":3146,"__hash__":685},{"updatedAt":665,"coverCaption":604,"author":16,"keywords":3141},[267,667,668,669,170,583],[3143],{"headline":673,"author":3144,"datePublished":665,"@type":31},{"name":16,"@type":30},{"title":659,"description":663},[3147,3148,3149,3150],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":401,"color":402},{"tag":312,"color":313},{"id":687,"title":688,"cover":689,"coverAlt":690,"date":691,"description":692,"draft":11,"extension":12,"locale":13,"meta":3152,"navigation":25,"path":700,"schemaOrg":3154,"seo":3157,"series":641,"seriesDescription":642,"seriesOrder":362,"seriesTitle":644,"slug":33,"stem":706,"tags":3158,"__hash__":713},{"updatedAt":694,"coverCaption":604,"author":16,"keywords":3153},[267,696,697,698,699],[3155],{"headline":703,"author":3156,"datePublished":694,"@type":31},{"name":16,"@type":30},{"title":688,"description":692},[3159,3160,3161,3162,3163],{"tag":648,"color":649},{"tag":87,"color":88},{"tag":401,"color":402},{"tag":46,"color":47},{"tag":84,"color":85},{"id":715,"title":716,"cover":717,"coverAlt":718,"date":719,"description":720,"draft":11,"extension":12,"locale":33,"meta":3165,"navigation":25,"path":728,"schemaOrg":3167,"seo":3170,"series":641,"seriesDescription":642,"seriesOrder":349,"seriesTitle":644,"slug":33,"stem":733,"tags":3171,"__hash__":739},{"updatedAt":722,"coverCaption":723,"keywords":3166},[267,725,726,727,505,170,583],[3168],{"headline":716,"author":3169,"datePublished":722,"@type":31},{"name":16,"@type":30},{"title":716,"description":720},[3172,3173,3174,3175],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":401,"color":402},{"tag":312,"color":313},{"id":741,"title":742,"cover":743,"coverAlt":744,"date":745,"description":746,"draft":11,"extension":12,"locale":13,"meta":3177,"navigation":25,"path":755,"schemaOrg":3179,"seo":3182,"series":641,"seriesDescription":642,"seriesOrder":426,"seriesTitle":644,"slug":33,"stem":761,"tags":3183,"__hash__":767},{"updatedAt":748,"coverCaption":749,"author":16,"keywords":3178},[267,751,752,753,754,170,583],[3180],{"headline":758,"author":3181,"datePublished":748,"@type":31},{"name":16,"@type":30},{"title":742,"description":746},[3184,3185,3186,3187],{"tag":648,"color":649},{"tag":253,"color":254},{"tag":229,"color":245},{"tag":84,"color":85},{"id":769,"title":770,"cover":771,"coverAlt":772,"date":773,"description":774,"draft":11,"extension":12,"locale":13,"meta":3189,"navigation":25,"path":781,"schemaOrg":3191,"seo":3194,"series":641,"seriesDescription":642,"seriesOrder":118,"seriesTitle":644,"slug":33,"stem":787,"tags":3195,"__hash__":795},{"updatedAt":776,"coverCaption":604,"author":16,"keywords":3190},[267,778,779,780,170,583],[3192],{"headline":784,"author":3193,"datePublished":776,"@type":31},{"name":16,"@type":30},{"title":770,"description":774},[3196,3197,3198,3199],{"tag":648,"color":649},{"tag":791,"color":792},{"tag":46,"color":47},{"tag":312,"color":313},{"id":797,"title":798,"cover":799,"coverAlt":800,"date":801,"description":802,"draft":11,"extension":12,"locale":13,"meta":3201,"navigation":25,"path":809,"schemaOrg":3203,"seo":3206,"series":641,"seriesDescription":642,"seriesOrder":484,"seriesTitle":644,"slug":33,"stem":815,"tags":3207,"__hash__":820},{"updatedAt":804,"coverCaption":604,"author":16,"keywords":3202},[267,806,807,808,170,583],[3204],{"headline":812,"author":3205,"datePublished":804,"@type":31},{"name":16,"@type":30},{"title":798,"description":802},[3208,3209,3210],{"tag":648,"color":649},{"tag":250,"color":251},{"tag":312,"color":313},{"id":822,"title":823,"cover":824,"coverAlt":825,"date":826,"description":827,"draft":11,"extension":12,"locale":13,"meta":3212,"navigation":25,"path":835,"schemaOrg":3214,"seo":3217,"series":641,"seriesDescription":642,"seriesOrder":147,"seriesTitle":644,"slug":33,"stem":841,"tags":3218,"__hash__":847},{"updatedAt":829,"coverCaption":604,"author":16,"keywords":3213},[267,831,832,833,834,170,583],[3215],{"headline":838,"author":3216,"datePublished":829,"@type":31},{"name":16,"@type":30},{"title":823,"description":827},[3219,3220,3221,3222],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":46,"color":47},{"tag":312,"color":313},{"id":849,"title":850,"cover":851,"coverAlt":852,"date":853,"description":854,"draft":11,"extension":12,"locale":13,"meta":3224,"navigation":25,"path":861,"schemaOrg":3226,"seo":3229,"series":641,"seriesDescription":642,"seriesOrder":278,"seriesTitle":644,"slug":33,"stem":867,"tags":3230,"__hash__":874},{"updatedAt":856,"coverCaption":604,"author":16,"keywords":3225},[267,858,859,860,170,583,505],[3227],{"headline":864,"author":3228,"datePublished":856,"@type":31},{"name":16,"@type":30},{"title":850,"description":854},[3231,3232,3233,3234],{"tag":648,"color":649},{"tag":871,"color":47},{"tag":681,"color":682},{"tag":312,"color":313},{"id":876,"title":877,"cover":878,"coverAlt":879,"date":880,"description":881,"draft":11,"extension":12,"locale":13,"meta":3236,"navigation":25,"path":891,"schemaOrg":3238,"seo":3241,"series":641,"seriesDescription":642,"seriesOrder":176,"seriesTitle":644,"slug":33,"stem":897,"tags":3242,"__hash__":905},{"updatedAt":883,"coverCaption":884,"author":16,"keywords":3237},[267,886,887,888,889,890,170,583],[3239],{"headline":894,"author":3240,"datePublished":883,"@type":31},{"name":16,"@type":30},{"title":877,"description":881},[3243,3244,3245,3246],{"tag":648,"color":649},{"tag":901,"color":902},{"tag":681,"color":682},{"tag":312,"color":313},{"id":907,"title":908,"cover":909,"coverAlt":908,"date":910,"description":911,"draft":11,"extension":12,"locale":13,"meta":3248,"navigation":25,"path":916,"schemaOrg":3250,"seo":3253,"series":641,"seriesDescription":642,"seriesOrder":241,"seriesTitle":644,"slug":33,"stem":922,"tags":3254,"__hash__":930},{"updatedAt":748,"readingTime":118,"coverCaption":913,"author":16,"keywords":3249},[267,648,915,52],[3251],{"headline":908,"author":3252,"datePublished":920,"@type":31},{"name":16,"@type":30},{"title":908,"description":911},[3255,3256,3257,3258,3259,3260],{"tag":648,"color":649},{"tag":681,"color":682},{"tag":901,"color":902},{"tag":871,"color":47},{"tag":46,"color":47},{"tag":312,"color":313},{"id":932,"title":933,"cover":934,"coverAlt":933,"date":935,"description":936,"draft":11,"extension":12,"locale":13,"meta":3262,"navigation":25,"path":943,"schemaOrg":3264,"seo":3267,"series":207,"seriesDescription":208,"seriesOrder":484,"seriesTitle":209,"slug":33,"stem":949,"tags":3268,"__hash__":958},{"updatedAt":194,"coverCaption":938,"author":16,"keywords":3263},[199,940,941,942,915],[3265],{"headline":933,"author":3266,"datePublished":947,"@type":31},{"name":16,"@type":30},{"title":933,"description":936},[3269,3270,3271,3272,3273,3274],{"tag":200,"color":214},{"tag":942,"color":953},{"tag":229,"color":245},{"tag":46,"color":47},{"tag":84,"color":85},{"tag":52,"color":53},{"id":960,"title":961,"cover":962,"coverAlt":961,"date":963,"description":964,"draft":11,"extension":12,"locale":13,"meta":3276,"navigation":25,"path":971,"schemaOrg":3278,"seo":3281,"series":207,"seriesDescription":208,"seriesOrder":147,"seriesTitle":209,"slug":33,"stem":977,"tags":3282,"__hash__":987},{"updatedAt":194,"coverCaption":966,"author":16,"keywords":3277},[267,968,969,970,170,271],[3279],{"headline":961,"author":3280,"datePublished":975,"@type":31},{"name":16,"@type":30},{"title":961,"description":964},[3283,3284,3285,3286,3287,3288],{"tag":980,"color":981},{"tag":49,"color":50},{"tag":200,"color":214},{"tag":942,"color":953},{"tag":229,"color":245},{"tag":52,"color":53},{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"locale":13,"meta":3290,"navigation":25,"path":1001,"schemaOrg":3292,"seo":3295,"series":116,"seriesDescription":117,"seriesOrder":241,"seriesTitle":119,"slug":33,"stem":1007,"tags":3296,"__hash__":1014},{"updatedAt":264,"coverCaption":996,"author":16,"keywords":3291},[267,46,998,170,999,1000],[3293],{"headline":990,"author":3294,"datePublished":1005,"@type":31},{"name":16,"@type":30},{"title":990,"description":994},[3297,3298,3299],{"tag":46,"color":47},{"tag":312,"color":313},{"tag":1012,"color":1013},{"id":1016,"title":1017,"cover":1018,"coverAlt":1019,"date":1020,"description":1021,"draft":11,"extension":12,"locale":13,"meta":3301,"navigation":25,"path":1026,"schemaOrg":3302,"seo":3305,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1032,"tags":3306,"__hash__":1041},{"updatedAt":1023,"coverCaption":1024,"author":16,"keywords":1025},[3303],{"headline":1017,"author":3304,"datePublished":1030,"@type":31},{"name":16,"@type":30},{"title":1017,"description":1021},[3307,3308,3309,3310,3311],{"tag":1035,"color":1036},{"tag":81,"color":82},{"tag":46,"color":47},{"tag":90,"color":91},{"tag":84,"color":85},{"id":1043,"title":1044,"cover":1045,"coverAlt":1046,"date":1047,"description":1048,"draft":11,"extension":12,"locale":13,"meta":3313,"navigation":25,"path":1051,"schemaOrg":3314,"seo":3317,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1057,"tags":3318,"__hash__":1064},{"updatedAt":1023,"coverCaption":1050},[3315],{"headline":1044,"author":3316,"datePublished":1055,"@type":31},{"name":16,"@type":30},{"title":1044,"description":1048},[3319,3320,3321],{"tag":1060,"color":1061},{"tag":90,"color":91},{"tag":312,"color":313},{"id":1066,"title":1067,"cover":1068,"coverAlt":1069,"date":1070,"description":1071,"draft":11,"extension":12,"locale":13,"meta":3323,"navigation":25,"path":1074,"schemaOrg":3324,"seo":3327,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1080,"tags":3328,"__hash__":1084},{"updatedAt":1023,"coverCaption":1073},[3325],{"headline":1067,"author":3326,"datePublished":1078,"@type":31},{"name":16,"@type":30},{"title":1067,"description":1071},[3329,3330],{"tag":1012,"color":1013},{"tag":90,"color":91},{"id":1086,"title":1087,"cover":1088,"coverAlt":1019,"date":1089,"description":1090,"draft":11,"extension":12,"locale":13,"meta":3332,"navigation":25,"path":1094,"schemaOrg":3333,"seo":3336,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1100,"tags":3337,"__hash__":1105},{"updatedAt":1023,"coverCaption":1092,"author":16,"keywords":1093},[3334],{"headline":1087,"author":3335,"datePublished":1098,"@type":31},{"name":16,"@type":30},{"title":1087,"description":1090},[3338,3339,3340],{"tag":90,"color":91},{"tag":312,"color":313},{"tag":1012,"color":1013},{"id":1107,"title":1108,"cover":1109,"coverAlt":1110,"date":1111,"description":1112,"draft":11,"extension":12,"locale":13,"meta":3342,"navigation":25,"path":1115,"schemaOrg":3343,"seo":3346,"series":33,"seriesDescription":33,"seriesOrder":33,"seriesTitle":33,"slug":33,"stem":1121,"tags":3347,"__hash__":1128},{"updatedAt":1023,"coverCaption":1114},[3344],{"headline":1108,"author":3345,"datePublished":1119,"@type":31},{"name":16,"@type":30},{"title":1108,"description":1112},[3348,3349,3350],{"tag":16,"color":1036},{"tag":1125,"color":1126},{"tag":90,"color":91},1786764857936]