[{"data":1,"prerenderedAt":2834},["ShallowReactive",2],{"app-menu-posts":3,"blog-ref-vs-reactive-como-modelar-el-estado-en-vue-3.es-es":1052,"blog-slug-sidebar-posts":2401},[4,59,93,130,172,211,246,282,314,344,372,399,428,455,481,506,531,566,595,623,649,677,705,730,757,784,815,840,868,897,934,965,988,1008,1029],{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"lab":13,"locale":14,"meta":15,"navigation":26,"path":27,"schemaOrg":28,"seo":33,"series":34,"seriesDescription":35,"seriesOrder":36,"seriesTitle":37,"slug":13,"stem":38,"tags":39,"__hash__":58},"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.",false,"md",null,"es",{"updatedAt":16,"author":17,"coverCaption":18,"keywords":19},"2026-07-27T18:31:41-05:00","TODOvue","Referencia oficial de Vue sobre los fundamentos de la reactividad",[20,21,22,23,24,25],"ref() vs reactive()","reactividad en Vue 3","estado en Vue 3","toRefs()","useState() en Nuxt","Composition API",true,"\u002Fblog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[29],{"headline":6,"author":30,"datePublished":16,"@type":32},{"name":17,"@type":31},"Person","BlogPosting",{"title":6,"description":10},"vue-reactivity","Ruta práctica para entender cómo Vue rastrea el estado, elegir la API reactiva correcta y optimizar actualizaciones sin perder claridad.",2,"Reactividad práctica en Vue 3","blog\u002Fref-vs-reactive-como-modelar-el-estado-en-vue-3.es",[40,43,46,49,52,55],{"tag":41,"color":42},"Reactividad","#1D5BA1",{"tag":44,"color":45},"Gestión de Estado","#FF9800",{"tag":47,"color":48},"Guías","#42B983",{"tag":50,"color":51},"Composables","#14B8A6",{"tag":53,"color":54},"SSR","#0E9AA7",{"tag":56,"color":57},"Buenas Prácticas","#2196F3","4ri62At3pbdif7nXeHjvnk4eA0dEP-DbZgMfGU_ZNFM",{"id":60,"title":61,"cover":62,"coverAlt":63,"date":64,"description":65,"draft":11,"extension":12,"lab":13,"locale":14,"meta":66,"navigation":26,"path":74,"schemaOrg":75,"seo":79,"series":80,"seriesDescription":81,"seriesOrder":82,"seriesTitle":83,"slug":13,"stem":84,"tags":85,"__hash__":92},"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":67,"author":17,"coverCaption":68,"keywords":69},"2026-07-26T00:00:00-05:00","Referencia visual para decidir el alcance del estado en Vue 3.",[70,71,72,44,73,50],"State","Pinia","Vue 3","Arquitectura","\u002Fblog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[76],{"headline":61,"author":77,"datePublished":78,"@type":32},{"name":17,"@type":31},"2026-07-24T23:20:00-05:00",{"title":61,"description":65},"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.",6,"Arquitectura de aplicaciones en Vue 3","blog\u002Fpinia-in-vue-3-when-to-use-global-state-and-when-not-to.es",[86,87,89,90,91],{"tag":44,"color":45},{"tag":73,"color":88},"#4CAF50",{"tag":56,"color":57},{"tag":50,"color":51},{"tag":53,"color":54},"HOD-MgWjq0ELvp4Sgos3olc_qJbRXYe26_GuDpSXnio",{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"lab":13,"locale":14,"meta":100,"navigation":26,"path":109,"schemaOrg":110,"seo":114,"series":80,"seriesDescription":81,"seriesOrder":115,"seriesTitle":83,"slug":13,"stem":116,"tags":117,"__hash__":129},"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":67,"author":17,"coverCaption":101,"keywords":102},"Referencia oficial de Vue.js sobre componentes",[103,104,105,106,107,108],"Componentes","arquitectura de componentes en Vue 3","props y eventos","slots en Vue 3","composables","provide\u002Finject","\u002Fblog\u002Fvue-3-component-architecture.es",[111],{"headline":95,"author":112,"datePublished":113,"@type":32},{"name":17,"@type":31},"2026-07-10T17:19:30-05:00",{"title":95,"description":99},1,"blog\u002Fvue-3-component-architecture.es",[118,120,121,122,123,126],{"tag":103,"color":119},"#41B883",{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":124,"color":125},"Eventos","#2D98DA",{"tag":127,"color":128},"Slots","#8E44AD","BaFZob8eRi9VR8OCyHwWlNIYLAdT7a-5PZC1sFT00E8",{"id":131,"title":132,"cover":133,"coverAlt":134,"date":135,"description":136,"draft":11,"extension":12,"lab":137,"locale":14,"meta":147,"navigation":26,"path":156,"schemaOrg":157,"seo":161,"series":34,"seriesDescription":35,"seriesOrder":162,"seriesTitle":37,"slug":13,"stem":163,"tags":164,"__hash__":171},"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.",{"title":138,"goal":139,"tasks":140,"starterCode":145,"solutionHint":146},"Elige la herramienta reactiva correcta","Practica el uso de computed para estado derivado, watch para efectos secundarios explícitos y watchEffect para rastreo automático de dependencias.",[141,142,143,144],"Crea un input de búsqueda guardado en un ref.","Usa computed para normalizar la búsqueda.","Usa watch para disparar una función tipo fetch solo cuando cambie la búsqueda normalizada.","Usa watchEffect para registrar cada valor reactivo leído dentro del efecto y explica por qué se ejecuta.","\u003Cscript setup>\nimport { computed, ref, watch, watchEffect } from 'vue'\n\nconst query = ref('')\nconst page = ref(1)\n\nconst normalizedQuery = computed(() => query.value.trim().toLowerCase())\n\nwatch(normalizedQuery, (value) => {\n  page.value = 1\n  console.log('Buscar resultados para:', value)\n})\n\nwatchEffect(() => {\n  console.log('Estado actual de búsqueda:', normalizedQuery.value, page.value)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cinput v-model=\"query\" placeholder=\"Buscar artículos\">\n  \u003Cp>Búsqueda normalizada: {{ normalizedQuery }}\u003C\u002Fp>\n  \u003Cp>Página: {{ page }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El computed deriva datos sin causar efectos secundarios. El watch reacciona a una fuente explícita. El watchEffect se vuelve a ejecutar cuando cambia cualquier valor que lee.",{"updatedAt":148,"coverCaption":149,"author":17,"keywords":150},"2026-07-27T00:00:00-05:00","Computed, watchers y efectos en Vue 3 por TODOvue",[151,72,152,153,154,155,25],"Vue.js","computed","watch","watchEffect","reactividad","\u002Fblog\u002Fvue-computed-watch-watcheffect-guide.es",[158],{"headline":132,"author":159,"datePublished":160,"@type":32},{"name":17,"@type":31},"2026-07-06T20:00:00-05:00",{"title":132,"description":136},3,"blog\u002Fvue-computed-watch-watcheffect-guide.es",[165,166,167,170],{"tag":41,"color":42},{"tag":56,"color":57},{"tag":168,"color":169},"Rendimiento","#D4A017",{"tag":47,"color":48},"a8l5u3F8H-uZBX5TmLAKFBuRfvIoE5kOjfOeaSHyk-A",{"id":173,"title":174,"cover":175,"coverAlt":174,"date":176,"description":177,"draft":11,"extension":12,"lab":178,"locale":14,"meta":188,"navigation":26,"path":196,"schemaOrg":197,"seo":201,"series":80,"seriesDescription":81,"seriesOrder":36,"seriesTitle":83,"slug":13,"stem":202,"tags":203,"__hash__":210},"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.",{"title":179,"goal":180,"tasks":181,"starterCode":186,"solutionHint":187},"Crea una tarjeta de tarea con props y emits","Construye un componente pequeño que recibe una tarea por props y avisa al padre cuando el usuario quiere marcarla como completada.",[182,183,184,185],"Crea un componente TaskCard.vue.","Recibe una prop task con title y completed.","Muestra el estado de la tarea en el template.","Emite un evento complete cuando el usuario haga clic en el botón.","\u003C!-- TaskCard.vue -->\n\u003Cscript setup>\nconst props = defineProps({\n  task: {\n    type: Object,\n    required: true\n  }\n})\n\nconst emit = defineEmits(['complete'])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ props.task.title }}\u003C\u002Fh2>\n    \u003Cp>{{ props.task.completed ? 'Completada' : 'Pendiente' }}\u003C\u002Fp>\n\n    \u003Cbutton @click=\"emit('complete', props.task.id)\">\n      Marcar como completada\n    \u003C\u002Fbutton>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","El componente hijo no necesita cambiar la lista directamente. Solo comunica la intención; el padre decide cómo actualizar el estado.",{"updatedAt":67,"coverCaption":189,"author":17,"keywords":190},"Comunicación entre componentes en Vue 3 por TODOvue",[151,72,191,192,193,194,195],"props","emits","componentes","defineProps","defineEmits","\u002Fblog\u002Fvue-3-props-emits-component-communication.es",[198],{"headline":174,"author":199,"datePublished":200,"@type":32},{"name":17,"@type":31},"2026-06-30T20:00:00-05:00",{"title":174,"description":177},"blog\u002Fvue-3-props-emits-component-communication.es",[204,205,206,207],{"tag":103,"color":119},{"tag":124,"color":125},{"tag":47,"color":48},{"tag":208,"color":209},"Básico","#B173BF","dLcA6qwTAutjayKo9BSZ8VD27UMroxba5SkIczwtVII",{"id":212,"title":213,"cover":214,"coverAlt":215,"date":216,"description":217,"draft":11,"extension":12,"lab":218,"locale":14,"meta":228,"navigation":26,"path":233,"schemaOrg":234,"seo":238,"series":80,"seriesDescription":81,"seriesOrder":162,"seriesTitle":83,"slug":13,"stem":239,"tags":240,"__hash__":245},"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.",{"title":219,"goal":220,"tasks":221,"starterCode":226,"solutionHint":227},"Crea tu primer composable: useToggle","Extrae una lógica pequeña y repetible para abrir, cerrar y alternar un estado booleano desde cualquier componente.",[222,223,224,225],"Crea un archivo useToggle.js o useToggle.ts.","Usa ref() para guardar el estado activo o inactivo.","Expón las funciones open(), close() y toggle().","Usa el composable desde un componente con un botón.","\u003Cscript setup>\nimport { ref } from 'vue'\n\nfunction useToggle(initialValue = false) {\n  const isActive = ref(initialValue)\n\n  const open = () => {\n    isActive.value = true\n  }\n\n  const close = () => {\n    isActive.value = false\n  }\n\n  const toggle = () => {\n    isActive.value = !isActive.value\n  }\n\n  return {\n    isActive,\n    open,\n    close,\n    toggle\n  }\n}\n\nconst menu = useToggle()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"menu.toggle()\">\n    {{ menu.isActive ? 'Cerrar menu' : 'Abrir menu' }}\n  \u003C\u002Fbutton>\n\n  \u003Cnav v-if=\"menu.isActive\">\n    Menu visible\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n","Si el componente ya no necesita saber cómo cambia el estado, solo cuándo usarlo, el composable está haciendo bien su trabajo.",{"updatedAt":67,"coverCaption":229,"author":17,"keywords":230},"Código reutilizable en Vue 3 por TODOvue",[151,72,50,25,231,232],"useToggle","lógica reutilizable","\u002Fblog\u002Fvue-3-composables-extract-reusable-logic.es",[235],{"headline":213,"author":236,"datePublished":237,"@type":32},{"name":17,"@type":31},"2026-06-22T20:00:00-05:00",{"title":213,"description":217},"blog\u002Fvue-3-composables-extract-reusable-logic.es",[241,242,243,244],{"tag":50,"color":51},{"tag":103,"color":119},{"tag":56,"color":57},{"tag":208,"color":209},"fUGaAtyXtTvA6HVDF8xZfMxwmMsfGc4zmxB1UCsyhQs",{"id":247,"title":248,"cover":249,"coverAlt":250,"date":251,"description":252,"draft":11,"extension":12,"lab":13,"locale":14,"meta":253,"navigation":26,"path":261,"schemaOrg":262,"seo":265,"series":266,"seriesDescription":267,"seriesOrder":268,"seriesTitle":269,"slug":13,"stem":270,"tags":271,"__hash__":281},"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":254,"readingTime":255,"coverCaption":256,"author":17,"keywords":257},"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.",[151,258,259,53,260],"serverPrefetch","onServerPrefetch","hidratación","\u002Fblog\u002Fvue-lifecycle-ssr-serverprefetch.es",[263],{"headline":248,"author":264,"datePublished":254,"@type":32},{"name":17,"@type":31},{"title":248,"description":252},"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",[272,275,276,277,278],{"tag":273,"color":274},"Ciclo de Vida","#FF6B6B",{"tag":53,"color":54},{"tag":73,"color":88},{"tag":103,"color":119},{"tag":279,"color":280},"Avanzado","#F54927","gpVQi88PJ9GPzNJNjmGEweIYhWKcd-KIwq-VxiZMkTQ",{"id":283,"title":284,"cover":285,"coverAlt":286,"date":287,"description":288,"draft":11,"extension":12,"lab":13,"locale":14,"meta":289,"navigation":26,"path":297,"schemaOrg":298,"seo":301,"series":266,"seriesDescription":267,"seriesOrder":255,"seriesTitle":269,"slug":13,"stem":302,"tags":303,"__hash__":313},"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":290,"coverCaption":291,"author":17,"keywords":292},"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.",[151,293,294,295,296],"renderTracked","renderTriggered","onRenderTracked","onRenderTriggered","\u002Fblog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[299],{"headline":284,"author":300,"datePublished":290,"@type":32},{"name":17,"@type":31},{"title":284,"description":288},"blog\u002Fvue-lifecycle-render-debug-rendertracked-rendertriggered.es",[304,305,308,311,312],{"tag":273,"color":274},{"tag":306,"color":307},"Depuración","#C44569",{"tag":309,"color":310},"Renderizado","#E17055",{"tag":41,"color":42},{"tag":279,"color":280},"5mr-vMalD_jw1VlwSiz5cmZRVM9obP8ZlRFNu2rgR88",{"id":315,"title":316,"cover":317,"coverAlt":318,"date":319,"description":320,"draft":11,"extension":12,"lab":13,"locale":14,"meta":321,"navigation":26,"path":329,"schemaOrg":330,"seo":333,"series":266,"seriesDescription":267,"seriesOrder":334,"seriesTitle":269,"slug":13,"stem":335,"tags":336,"__hash__":343},"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":322,"coverCaption":323,"author":17,"keywords":324},"2026-03-16T22:00:00-05:00","Con errorCaptured, puedes proteger partes específicas de tu UI sin comprometer toda la experiencia.",[151,325,326,327,328],"errorCaptured","onErrorCaptured","manejo de errores","error boundaries","\u002Fblog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[331],{"headline":316,"author":332,"datePublished":322,"@type":32},{"name":17,"@type":31},{"title":316,"description":320},7,"blog\u002Fvue-lifecycle-error-handling-errorcaptured.es",[337,338,341,342],{"tag":273,"color":274},{"tag":339,"color":340},"Manejo de Errores","#E55039",{"tag":103,"color":119},{"tag":279,"color":280},"epm2rTVpqLV5pyIW1xBngTSC9yZ0Hdu43YNcWNkm4xw",{"id":345,"title":346,"cover":347,"coverAlt":348,"date":349,"description":350,"draft":11,"extension":12,"lab":13,"locale":14,"meta":351,"navigation":26,"path":359,"schemaOrg":360,"seo":363,"series":266,"seriesDescription":267,"seriesOrder":82,"seriesTitle":269,"slug":13,"stem":364,"tags":365,"__hash__":371},"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":352,"coverCaption":353,"author":17,"keywords":354},"2026-03-12T23:00:00-05:00","KeepAlive permite desactivar y reactivar componentes sin destruir su estado local",[151,355,356,357,358],"KeepAlive","activated","deactivated","cache de componentes","\u002Fblog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[361],{"headline":346,"author":362,"datePublished":352,"@type":32},{"name":17,"@type":31},{"title":346,"description":350},"blog\u002Fvue-lifecycle-keepalive-activated-deactivated.es",[366,367,369,370],{"tag":273,"color":274},{"tag":355,"color":368},"#27AE60",{"tag":103,"color":119},{"tag":279,"color":280},"LTJL6v4mw6lt5Nb8vhKocgwmO5u1q1TkDLjAgpE1abw",{"id":373,"title":374,"cover":375,"coverAlt":376,"date":377,"description":378,"draft":11,"extension":12,"lab":13,"locale":14,"meta":379,"navigation":26,"path":387,"schemaOrg":388,"seo":391,"series":266,"seriesDescription":267,"seriesOrder":392,"seriesTitle":269,"slug":13,"stem":393,"tags":394,"__hash__":398},"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":380,"coverCaption":381,"author":17,"keywords":382},"2026-03-11T22:00:00-05:00","La fase de desmontaje ocurre cuando Vue retira un componente del árbol activo",[151,383,384,385,386],"beforeUnmount","unmounted","onBeforeUnmount","cleanup","\u002Fblog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[389],{"headline":374,"author":390,"datePublished":380,"@type":32},{"name":17,"@type":31},{"title":374,"description":378},5,"blog\u002Fvue-lifecycle-unmounting-phase-beforeunmount-unmounted.es",[395,396,397],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":208,"color":209},"smji8WZsDewTRrh-7nuJ-1afgxZeubOV6QESqNZQknk",{"id":400,"title":401,"cover":402,"coverAlt":403,"date":404,"description":405,"draft":11,"extension":12,"lab":13,"locale":14,"meta":406,"navigation":26,"path":414,"schemaOrg":415,"seo":418,"series":266,"seriesDescription":267,"seriesOrder":419,"seriesTitle":269,"slug":13,"stem":420,"tags":421,"__hash__":427},"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":407,"coverCaption":408,"author":17,"keywords":409},"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.",[151,410,411,412,413],"beforeUpdate","updated","onUpdated","renderizado","\u002Fblog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[416],{"headline":401,"author":417,"datePublished":407,"@type":32},{"name":17,"@type":31},{"title":401,"description":405},4,"blog\u002Fvue-lifecycle-update-phase-beforeupdate-updated.es",[422,423,424,425,426],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":208,"color":209},"98z2JKjTHZwuUniJlvBcSw0oAKPwayH9G9A608P_wSQ",{"id":429,"title":430,"cover":431,"coverAlt":432,"date":433,"description":434,"draft":11,"extension":12,"lab":13,"locale":14,"meta":435,"navigation":26,"path":443,"schemaOrg":444,"seo":447,"series":266,"seriesDescription":267,"seriesOrder":162,"seriesTitle":269,"slug":13,"stem":448,"tags":449,"__hash__":454},"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":436,"coverCaption":437,"author":17,"keywords":438},"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.",[151,439,440,441,442],"beforeMount","mounted","onMounted","DOM","\u002Fblog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[445],{"headline":430,"author":446,"datePublished":436,"@type":32},{"name":17,"@type":31},{"title":430,"description":434},"blog\u002Fvue-lifecycle-mounting-phase-beforemount-mounted.es",[450,451,452,453],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":208,"color":209},"GQ-lIt1QfPL-Vw50b8qQ3uquMQjxzjBexBGH1U_jPMM",{"id":456,"title":457,"cover":458,"coverAlt":459,"date":460,"description":461,"draft":11,"extension":12,"lab":13,"locale":14,"meta":462,"navigation":26,"path":469,"schemaOrg":470,"seo":473,"series":266,"seriesDescription":267,"seriesOrder":36,"seriesTitle":269,"slug":13,"stem":474,"tags":475,"__hash__":480},"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":463,"coverCaption":464,"author":17,"keywords":465},"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.",[151,466,467,468,25],"beforeCreate","created","setup","\u002Fblog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[471],{"headline":457,"author":472,"datePublished":463,"@type":32},{"name":17,"@type":31},{"title":457,"description":461},"blog\u002Fvue-lifecycle-creation-phase-beforecreate-created-setup.es",[476,477,478,479],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},"gD0R9mljoBWBraFYutY3GdOI6IFtdYK-ul1RE0pCfVo",{"id":482,"title":483,"cover":484,"coverAlt":483,"date":485,"description":486,"draft":11,"extension":12,"lab":13,"locale":14,"meta":487,"navigation":26,"path":494,"schemaOrg":495,"seo":498,"series":266,"seriesDescription":267,"seriesOrder":115,"seriesTitle":269,"slug":13,"stem":499,"tags":500,"__hash__":505},"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":488,"readingTime":255,"coverCaption":489,"author":17,"keywords":490},"2026-03-04T21:30:00-05:00","Panorama de los hooks del ciclo de vida en Vue 3.",[151,491,25,492,493],"Ciclos de vida","Options API","Hooks","\u002Fblog\u002Fvue-lifecycle-hooks-overview.es",[496],{"headline":483,"author":497,"datePublished":488,"@type":32},{"name":17,"@type":31},{"title":483,"description":486},"blog\u002Fvue-lifecycle-hooks-overview.es",[501,502,503,504],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},"SBKJnT6tEFXx0FslfjbqCoy_-zKjHKGzNv961L2uqmc",{"id":507,"title":508,"cover":509,"coverAlt":508,"date":510,"description":511,"draft":11,"extension":12,"lab":13,"locale":14,"meta":512,"navigation":26,"path":518,"schemaOrg":519,"seo":523,"series":34,"seriesDescription":35,"seriesOrder":392,"seriesTitle":37,"slug":13,"stem":524,"tags":525,"__hash__":530},"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":148,"coverCaption":513,"author":17,"keywords":514},"Portada temporal: reemplazar por arte final de TODOvue",[72,155,515,516,517,152],"dependency tracking","scheduler","batching","\u002Fblog\u002Fvue-3-reactivity-internals.es",[520],{"headline":508,"author":521,"datePublished":522,"@type":32},{"name":17,"@type":31},"2026-03-02T20:00:00-05:00",{"title":508,"description":511},"blog\u002Fvue-3-reactivity-internals.es",[526,527,528,529],{"tag":41,"color":42},{"tag":73,"color":88},{"tag":168,"color":169},{"tag":279,"color":280},"hSP4l_wcWdf1tErUej5yTDbc2Tt0ZF4eiL1QPmqxGm4",{"id":532,"title":533,"cover":534,"coverAlt":535,"date":536,"description":537,"draft":11,"extension":12,"lab":13,"locale":14,"meta":538,"navigation":26,"path":544,"schemaOrg":545,"seo":549,"series":550,"seriesDescription":551,"seriesOrder":552,"seriesTitle":553,"slug":13,"stem":554,"tags":555,"__hash__":565},"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":539,"coverCaption":535,"author":17,"keywords":540},"2026-02-27T12:30:00-05:00",[151,541,542,543,25,492],"directivas personalizadas","custom directives","ciclo de vida","\u002Fblog\u002Fdirectives-vue-custom-directives-guide.es",[546],{"headline":547,"author":548,"datePublished":539,"@type":32},"Directivas personalizadas en Vue 3",{"name":17,"@type":31},{"title":533,"description":537},"vue-directives","Ruta paso a paso para dominar las directivas principales de Vue.",11,"Directivas en Vue","blog\u002Fdirectives-vue-custom-directives-guide.es",[556,559,562,563,564],{"tag":557,"color":558},"Directivas","#6C5CE7",{"tag":560,"color":561},"Directivas Personalizadas","#7D5FFF",{"tag":73,"color":88},{"tag":41,"color":42},{"tag":279,"color":280},"wVpr_e--WXOvyGkAScAp5eWTfVDbzY9Te6sVUdj96GA",{"id":567,"title":568,"cover":569,"coverAlt":570,"date":571,"description":572,"draft":11,"extension":12,"lab":13,"locale":14,"meta":573,"navigation":26,"path":579,"schemaOrg":580,"seo":584,"series":550,"seriesDescription":551,"seriesOrder":585,"seriesTitle":553,"slug":13,"stem":586,"tags":587,"__hash__":594},"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":574,"coverCaption":513,"author":17,"keywords":575},"2026-02-25T12:30:00-05:00",[151,576,577,578,25,492],"v-cloak","FOUC","hydration","\u002Fblog\u002Fdirectives-vue-v-cloak-guide.es",[581],{"headline":582,"author":583,"datePublished":574,"@type":32},"Directiva v-cloak en Vue: evita parpadeos antes del montaje",{"name":17,"@type":31},{"title":568,"description":572},10,"blog\u002Fdirectives-vue-v-cloak-guide.es",[588,589,592,593],{"tag":557,"color":558},{"tag":590,"color":591},"Templates","#00B894",{"tag":309,"color":310},{"tag":208,"color":209},"JfS7unY1XQ1HsdW8oWBHbTqDpzHjl2-9BrnPQZr3SRE",{"id":596,"title":597,"cover":598,"coverAlt":599,"date":600,"description":601,"draft":11,"extension":12,"lab":13,"locale":14,"meta":602,"navigation":26,"path":609,"schemaOrg":610,"seo":614,"series":550,"seriesDescription":551,"seriesOrder":268,"seriesTitle":553,"slug":13,"stem":615,"tags":616,"__hash__":622},"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":603,"coverCaption":513,"author":17,"keywords":604},"2026-02-23T21:00:00-05:00",[151,605,606,607,608],"v-once","v-memo","v-pre","optimización render","\u002Fblog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[611],{"headline":612,"author":613,"datePublished":603,"@type":32},"Directivas en Vue: v-once, v-memo y v-pre para renderizado eficiente",{"name":17,"@type":31},{"title":597,"description":601},"blog\u002Fdirectives-vue-v-once-v-memo-v-pre-guide.es",[617,618,619,620,621],{"tag":557,"color":558},{"tag":168,"color":169},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},"ltUtJZ-ViSqRogEpVIS3x2XdEz345biUTyEg7SJpXLo",{"id":624,"title":625,"cover":626,"coverAlt":627,"date":628,"description":629,"draft":11,"extension":12,"lab":13,"locale":13,"meta":630,"navigation":26,"path":637,"schemaOrg":638,"seo":641,"series":550,"seriesDescription":551,"seriesOrder":255,"seriesTitle":553,"slug":13,"stem":642,"tags":643,"__hash__":648},"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":631,"coverCaption":632,"keywords":633},"2026-02-20T20:00:00-05:00","Aprende a usar v-text y v-html de forma segura y efectiva en tus proyectos Vue",[151,634,635,636,413,25,492],"v-text","v-html","XSS","\u002Fblog\u002Fdirectives-vue-v-text-v-html-guide.es",[639],{"headline":625,"author":640,"datePublished":631,"@type":32},{"name":17,"@type":31},{"title":625,"description":629},"blog\u002Fdirectives-vue-v-text-v-html-guide.es",[644,645,646,647],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},"nRl4DrJhzsMVrCXStftR_-Go1SJK8NAAhi0uuGqgmkI",{"id":650,"title":651,"cover":652,"coverAlt":653,"date":654,"description":655,"draft":11,"extension":12,"lab":13,"locale":14,"meta":656,"navigation":26,"path":664,"schemaOrg":665,"seo":669,"series":550,"seriesDescription":551,"seriesOrder":334,"seriesTitle":553,"slug":13,"stem":670,"tags":671,"__hash__":676},"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":657,"coverCaption":658,"author":17,"keywords":659},"2026-02-19T08:00:00-05:00","Usa v-slot para construir componentes más flexibles y reutilizables.",[151,660,661,662,663,25,492],"v-slot","slots","scoped slots","componentes reutilizables","\u002Fblog\u002Fdirectives-vue-v-slot-guide.es",[666],{"headline":667,"author":668,"datePublished":657,"@type":32},"Directivas en Vue: v-slot con ejemplos claros y prácticos",{"name":17,"@type":31},{"title":651,"description":655},"blog\u002Fdirectives-vue-v-slot-guide.es",[672,673,674,675],{"tag":557,"color":558},{"tag":127,"color":128},{"tag":103,"color":119},{"tag":279,"color":280},"DxshI1c7MLWMpiJg_QZh4QLABHouxeRnejywUpaJAOU",{"id":678,"title":679,"cover":680,"coverAlt":681,"date":682,"description":683,"draft":11,"extension":12,"lab":13,"locale":14,"meta":684,"navigation":26,"path":690,"schemaOrg":691,"seo":695,"series":550,"seriesDescription":551,"seriesOrder":82,"seriesTitle":553,"slug":13,"stem":696,"tags":697,"__hash__":704},"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":685,"coverCaption":513,"author":17,"keywords":686},"2026-02-16T13:30:00-05:00",[151,687,688,689,25,492],"v-model","formularios","two-way binding","\u002Fblog\u002Fdirectives-vue-v-model-guide.es",[692],{"headline":693,"author":694,"datePublished":685,"@type":32},"Directiva v-model en Vue: guía completa para formularios y componentes",{"name":17,"@type":31},{"title":679,"description":683},"blog\u002Fdirectives-vue-v-model-guide.es",[698,699,702,703],{"tag":557,"color":558},{"tag":700,"color":701},"Formularios","#E67E22",{"tag":41,"color":42},{"tag":208,"color":209},"O_hXXsF2G3Nazt5a_Ggj8OT6_GTMtHDuGhVbwudOzcU",{"id":706,"title":707,"cover":708,"coverAlt":709,"date":710,"description":711,"draft":11,"extension":12,"lab":13,"locale":14,"meta":712,"navigation":26,"path":718,"schemaOrg":719,"seo":723,"series":550,"seriesDescription":551,"seriesOrder":392,"seriesTitle":553,"slug":13,"stem":724,"tags":725,"__hash__":729},"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":713,"coverCaption":513,"author":17,"keywords":714},"2026-02-13T10:30:00-05:00",[151,715,716,717,25,492],"v-on","eventos","event modifiers","\u002Fblog\u002Fdirectives-vue-v-on-guide.es",[720],{"headline":721,"author":722,"datePublished":713,"@type":32},"Directiva v-on en Vue: guia practica para manejar eventos",{"name":17,"@type":31},{"title":707,"description":711},"blog\u002Fdirectives-vue-v-on-guide.es",[726,727,728],{"tag":557,"color":558},{"tag":124,"color":125},{"tag":208,"color":209},"WAEXmV8fTD0ITkOvmyn62Tdvu5vw7wpMPNxDrqfLAt4",{"id":731,"title":732,"cover":733,"coverAlt":734,"date":735,"description":736,"draft":11,"extension":12,"lab":13,"locale":14,"meta":737,"navigation":26,"path":744,"schemaOrg":745,"seo":749,"series":550,"seriesDescription":551,"seriesOrder":419,"seriesTitle":553,"slug":13,"stem":750,"tags":751,"__hash__":756},"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":738,"coverCaption":513,"author":17,"keywords":739},"2026-02-11T18:00:00-05:00",[151,740,741,742,743,25,492],"v-bind","atributos dinámicos","class binding","style binding","\u002Fblog\u002Fdirectives-vue-v-bind-guide.es",[746],{"headline":747,"author":748,"datePublished":738,"@type":32},"Directiva v-bind en Vue: guía de básico a avanzado",{"name":17,"@type":31},{"title":732,"description":736},"blog\u002Fdirectives-vue-v-bind-guide.es",[752,753,754,755],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":41,"color":42},{"tag":208,"color":209},"ggicPee9rp0vgescxGeL26jTmua2py715WKhjmXHpp0",{"id":758,"title":759,"cover":760,"coverAlt":761,"date":762,"description":763,"draft":11,"extension":12,"lab":13,"locale":14,"meta":764,"navigation":26,"path":770,"schemaOrg":771,"seo":775,"series":550,"seriesDescription":551,"seriesOrder":162,"seriesTitle":553,"slug":13,"stem":776,"tags":777,"__hash__":783},"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":765,"coverCaption":513,"author":17,"keywords":766},"2026-02-09T21:30:00-05:00",[151,767,768,769,25,492,413],"v-for","listas","key","\u002Fblog\u002Fdirectives-vue-v-for-guide.es",[772],{"headline":773,"author":774,"datePublished":765,"@type":32},"Directiva v-for en Vue: guía completa de básico a avanzado",{"name":17,"@type":31},{"title":759,"description":763},"blog\u002Fdirectives-vue-v-for-guide.es",[778,779,781,782],{"tag":557,"color":558},{"tag":780,"color":42},"Listas",{"tag":590,"color":591},{"tag":208,"color":209},"h_Z-6C71ir_sIzxviVE8eEY3vMd8ZVXbADx8GTll9U8",{"id":785,"title":786,"cover":787,"coverAlt":788,"date":789,"description":790,"draft":11,"extension":12,"lab":13,"locale":14,"meta":791,"navigation":26,"path":800,"schemaOrg":801,"seo":805,"series":550,"seriesDescription":551,"seriesOrder":36,"seriesTitle":553,"slug":13,"stem":806,"tags":807,"__hash__":814},"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":792,"coverCaption":793,"author":17,"keywords":794},"2026-02-05T12:30:00-05:00","Renderizado condicional en Vue.js ilustrado por TODOvue",[151,795,796,797,798,799,25,492],"v-if","v-else","v-show","conditional rendering","directives","\u002Fblog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[802],{"headline":803,"author":804,"datePublished":792,"@type":32},"v-if, v-else y v-show en Vue: cuándo usar cada uno",{"name":17,"@type":31},{"title":786,"description":790},"blog\u002Fdirectives-vue-v-if-v-else-v-show-guide.es",[808,809,812,813],{"tag":557,"color":558},{"tag":810,"color":811},"Renderizado Condicional","#E056FD",{"tag":590,"color":591},{"tag":208,"color":209},"b5lwqC2_R5GDZNjdpBMFknx2dcvVk_FQOPGFJOy4LmQ",{"id":816,"title":817,"cover":818,"coverAlt":817,"date":819,"description":820,"draft":11,"extension":12,"lab":13,"locale":14,"meta":821,"navigation":26,"path":825,"schemaOrg":826,"seo":830,"series":550,"seriesDescription":551,"seriesOrder":115,"seriesTitle":553,"slug":13,"stem":831,"tags":832,"__hash__":839},"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":657,"readingTime":82,"coverCaption":822,"author":17,"keywords":823},"Imagen destacada que representa las directivas en Vue.js.",[151,557,824,56],"Desarrollo Frontend","\u002Fblog\u002Fvue-directives-overview.es",[827],{"headline":817,"author":828,"datePublished":829,"@type":32},{"name":17,"@type":31},"2026-02-03T20:00:00-05:00",{"title":817,"description":820},"blog\u002Fvue-directives-overview.es",[833,834,835,836,837,838],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":810,"color":811},{"tag":780,"color":42},{"tag":41,"color":42},{"tag":208,"color":209},"JwLOQaBKN45DaJoFg7X918rNjFPTm8MZd7iOm0BuH68",{"id":841,"title":842,"cover":843,"coverAlt":842,"date":844,"description":845,"draft":11,"extension":12,"lab":13,"locale":14,"meta":846,"navigation":26,"path":852,"schemaOrg":853,"seo":857,"series":80,"seriesDescription":81,"seriesOrder":392,"seriesTitle":83,"slug":13,"stem":858,"tags":859,"__hash__":867},"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":67,"coverCaption":847,"author":17,"keywords":848},"Imagen destacada que representa el concepto de Renderless Components en Vue 3.",[72,849,850,851,824],"Renderless Components","Reutilización de Código","Patrones de Diseño","\u002Fblog\u002Fmastering-renderless-components-vue-3.es",[854],{"headline":842,"author":855,"datePublished":856,"@type":32},{"name":17,"@type":31},"2026-01-30T17:00:00-05:00",{"title":842,"description":845},"blog\u002Fmastering-renderless-components-vue-3.es",[860,861,863,864,865,866],{"tag":73,"color":88},{"tag":851,"color":862},"#9C27B0",{"tag":103,"color":119},{"tag":41,"color":42},{"tag":279,"color":280},{"tag":56,"color":57},"yhkSM0r6ZSd16RBB-_Wkgi8QVsIgmic3u6hkdzzyLog",{"id":869,"title":870,"cover":871,"coverAlt":870,"date":872,"description":873,"draft":11,"extension":12,"lab":13,"locale":14,"meta":874,"navigation":26,"path":880,"schemaOrg":881,"seo":885,"series":80,"seriesDescription":81,"seriesOrder":419,"seriesTitle":83,"slug":13,"stem":886,"tags":887,"__hash__":896},"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":67,"coverCaption":875,"author":17,"keywords":876},"Provide e Inject en Vue 3 por TODOvue",[151,877,878,879,25,155],"Provide","Inject","Prop Drilling","\u002Fblog\u002Fvue-provide-inject-avoid-prop-drilling.es",[882],{"headline":870,"author":883,"datePublished":884,"@type":32},{"name":17,"@type":31},"2026-01-22T23:30:00-05:00",{"title":870,"description":873},"blog\u002Fvue-provide-inject-avoid-prop-drilling.es",[888,891,892,893,894,895],{"tag":889,"color":890},"Inyección de Dependencias","#2E86DE",{"tag":44,"color":45},{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":56,"color":57},"CBAqb072PTyDEOYcOpi9rvDl3rIQYoWB3nPWEjCk12M",{"id":898,"title":899,"cover":900,"coverAlt":901,"date":902,"description":903,"draft":11,"extension":12,"lab":904,"locale":14,"meta":914,"navigation":26,"path":920,"schemaOrg":921,"seo":925,"series":34,"seriesDescription":35,"seriesOrder":115,"seriesTitle":37,"slug":13,"stem":926,"tags":927,"__hash__":933},"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.",{"title":905,"goal":906,"tasks":907,"starterCode":912,"solutionHint":913},"Construye un contador reactivo pequeno","Practica la diferencia entre estado, estado derivado y efectos creando un contador pequeno con primitivas de reactividad de Vue.",[908,909,910,911],"Crea un contador con ref() y muestra su valor actual.","Agrega un computed que duplique el contador.","Usa watch() para registrar cuando el contador llegue a 5.","Explica en una frase que lecturas se rastrean y que escrituras disparan actualizaciones.","\u003Cscript setup>\nimport { computed, ref, watch } from 'vue'\n\nconst count = ref(0)\nconst doubled = computed(() => count.value * 2)\n\nwatch(count, (value) => {\n  if (value === 5) {\n    console.log('El contador llego a 5')\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">Contador: {{ count }}\u003C\u002Fbutton>\n  \u003Cp>Doble: {{ doubled }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","El template y el getter de computed leen count, por eso Vue rastrea esas dependencias. Al hacer clic en el boton se escribe en count, asi que Vue dispara las actualizaciones dependientes.",{"updatedAt":148,"coverCaption":915,"author":17,"keywords":916},"Ilustración de un laboratorio de codificación mágica de Vue.js por TODOvue",[151,41,917,25,918,919],"Proxies","ref","reactive","\u002Fblog\u002Fvue-reactivity-explained.es",[922],{"headline":899,"author":923,"datePublished":924,"@type":32},{"name":17,"@type":31},"2026-01-05T22:00:00-05:00",{"title":899,"description":903},"blog\u002Fvue-reactivity-explained.es",[928,929,930],{"tag":41,"color":42},{"tag":208,"color":209},{"tag":931,"color":932},"Historia","#F27E68","UT2z0_WltHsFRpzRs-XkCaBzok7q9HIAWFb_2lDXzwk",{"id":935,"title":936,"cover":937,"coverAlt":938,"date":939,"description":940,"draft":11,"extension":12,"lab":13,"locale":14,"meta":941,"navigation":26,"path":945,"schemaOrg":946,"seo":950,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":951,"tags":952,"__hash__":964},"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":942,"coverCaption":943,"author":17,"keywords":944},"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",[947],{"headline":936,"author":948,"datePublished":949,"@type":32},{"name":17,"@type":31},"2025-12-27T00:00:00-05",{"title":936,"description":940},"blog\u002Fvue-beta-vapor-mode-revealed.es",[953,956,959,960,963],{"tag":954,"color":955},"Beta","#42B883",{"tag":957,"color":958},"Vapor Mode","#41B2A6",{"tag":41,"color":42},{"tag":961,"color":962},"Ecosistema","#68D4F2",{"tag":279,"color":280},"OoT1wXBWbx7Nm_VxKBcOVEX_68taHaHv5lb5JWYp_3Q",{"id":966,"title":967,"cover":968,"coverAlt":969,"date":970,"description":971,"draft":11,"extension":12,"lab":13,"locale":14,"meta":972,"navigation":26,"path":974,"schemaOrg":975,"seo":979,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":980,"tags":981,"__hash__":987},"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":942,"coverCaption":973},"Configura tu entorno de desarrollo con Vue y Vite en minutos","\u002Fblog\u002Fsetting-up-vue-with-vite.es",[976],{"headline":967,"author":977,"datePublished":978,"@type":32},{"name":17,"@type":31},"2025-12-24T00:00:00-05",{"title":967,"description":971},"blog\u002Fsetting-up-vue-with-vite.es",[982,985,986],{"tag":983,"color":984},"Vite","#646CFF",{"tag":961,"color":962},{"tag":208,"color":209},"MUgSVDrbxUy7t0OhAKC7RQ8Mxme-tp8kojsvtX1_Uoo",{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"lab":13,"locale":14,"meta":995,"navigation":26,"path":997,"schemaOrg":998,"seo":1002,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1003,"tags":1004,"__hash__":1007},"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":942,"coverCaption":996},"Explorando la evolución de Vue.js desde sus inicios hasta la actualidad","\u002Fblog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[999],{"headline":990,"author":1000,"datePublished":1001,"@type":32},{"name":17,"@type":31},"2025-12-19T00:00:00-05",{"title":990,"description":994},"blog\u002Fhistory-evolution-philosophy-vue-progressive-framework.es",[1005,1006],{"tag":931,"color":932},{"tag":961,"color":962},"rJyCA4jjvQiJ_sw3YqFOoiddKcMhFEHJpq4Aw3J5Uzg",{"id":1009,"title":1010,"cover":1011,"coverAlt":938,"date":1012,"description":1013,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1014,"navigation":26,"path":1017,"schemaOrg":1018,"seo":1022,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1023,"tags":1024,"__hash__":1028},"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":942,"coverCaption":1015,"author":17,"keywords":1016},"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",[1019],{"headline":1010,"author":1020,"datePublished":1021,"@type":32},{"name":17,"@type":31},"2025-12-18T00:00:00-05",{"title":1010,"description":1013},"blog\u002Fwhat-is-vue-js-and-why-you-should-use-it.es",[1025,1026,1027],{"tag":961,"color":962},{"tag":208,"color":209},{"tag":931,"color":932},"3oUGsbaCuwOgI_KyRJd-09Ixe2vRBkwOj4YxwJT8Nks",{"id":1030,"title":1031,"cover":1032,"coverAlt":1033,"date":1034,"description":1035,"draft":11,"extension":12,"lab":13,"locale":14,"meta":1036,"navigation":26,"path":1038,"schemaOrg":1039,"seo":1043,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1044,"tags":1045,"__hash__":1051},"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":942,"coverCaption":1037},"Explorando el universo de Vue.js de principio a fin","\u002Fblog\u002Fwelcome-to-todovue.es",[1040],{"headline":1031,"author":1041,"datePublished":1042,"@type":32},{"name":17,"@type":31},"2025-12-17T00:00:00-05:00",{"title":1031,"description":1035},"blog\u002Fwelcome-to-todovue.es",[1046,1047,1050],{"tag":17,"color":955},{"tag":1048,"color":1049},"Offtopic","#605AD1",{"tag":961,"color":962},"QCC1KEhGX4J18VW5hhPy_dY_G47DK7o6kElWExWVHwg",{"id":5,"title":6,"body":1053,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2388,"navigation":26,"path":27,"schemaOrg":2390,"seo":2393,"series":34,"seriesDescription":35,"seriesOrder":36,"seriesTitle":37,"slug":13,"stem":38,"tags":2394,"__hash__":58},{"type":1054,"value":1055,"toc":2375},"minimark",[1056,1060,1073,1082,1089,1097,1185,1188,1195,1204,1218,1426,1433,1446,1456,1462,1467,1772,1788,1804,1808,1811,1836,1849,2000,2011,2020,2023,2027,2030,2044,2059,2063,2069,2078,2218,2224,2236,2240,2258,2261,2308,2312,2315,2332,2368,2371],[1057,1058,6],"h1",{"id":1059},"ref-vs-reactive-cómo-modelar-el-estado-en-vue-3",[1061,1062,1063,1064,1068,1069,1072],"p",{},"Elegir entre ",[1065,1066,1067],"code",{},"ref()"," y ",[1065,1070,1071],{},"reactive()"," no consiste en memorizar dos formas equivalentes de escribir estado. La decisión afecta a cómo reemplazas valores, cómo expones datos desde un composable y cómo conservas la reactividad al desestructurar.",[1061,1074,1075,1076,1078,1079,1081],{},"Como regla general, empieza con ",[1065,1077,1067],{},". Es adecuado para valores primitivos, resultados asíncronos, valores que pueden reemplazarse y estado que viajará entre composables. Elige ",[1065,1080,1071],{}," deliberadamente cuando tengas un objeto estable y quieras modificar sus propiedades directamente.",[1061,1083,1084,1085,1088],{},"En Nuxt aparece una decisión adicional: el alcance del estado. El estado local puede vivir dentro de ",[1065,1086,1087],{},"setup()",", mientras que el estado compartido entre componentes o instancias debe mantener aislada cada solicitud SSR y tener en cuenta la serialización y la hidratación.",[1090,1091,1093,1094,1096],"h2",{"id":1092},"la-decisión-rápida-ref-como-opción-general","La decisión rápida: ",[1065,1095,1067],{}," como opción general",[1098,1099,1100,1116],"table",{},[1101,1102,1103],"thead",{},[1104,1105,1106,1110,1113],"tr",{},[1107,1108,1109],"th",{},"Necesidad",[1107,1111,1112],{},"Opción habitual",[1107,1114,1115],{},"Motivo",[1117,1118,1119,1132,1148,1160,1172],"tbody",{},[1104,1120,1121,1125,1129],{},[1122,1123,1124],"td",{},"Booleano, número o string",[1122,1126,1127],{},[1065,1128,1067],{},[1122,1130,1131],{},"Puede contener cualquier tipo de valor.",[1104,1133,1134,1137,1141],{},[1122,1135,1136],{},"Resultado asíncrono reemplazable",[1122,1138,1139],{},[1065,1140,1067],{},[1122,1142,1143,1144,1147],{},"El valor puede pasar de ",[1065,1145,1146],{},"null"," a un resultado nuevo.",[1104,1149,1150,1153,1157],{},[1122,1151,1152],{},"Estado entre composables",[1122,1154,1155],{},[1065,1156,1067],{},[1122,1158,1159],{},"Se puede devolver y desestructurar sin perder el vínculo.",[1104,1161,1162,1165,1169],{},[1122,1163,1164],{},"Objeto estable con varias propiedades",[1122,1166,1167],{},[1065,1168,1071],{},[1122,1170,1171],{},"Las propiedades se modifican in situ.",[1104,1173,1174,1177,1182],{},[1122,1175,1176],{},"Estado compartido compatible con SSR en Nuxt",[1122,1178,1179],{},[1065,1180,1181],{},"useState()",[1122,1183,1184],{},"Añade una clave y participa en la hidratación de Nuxt.",[1061,1186,1187],{},"La elección describe el contrato del estado: qué se reemplaza, qué se muta y quién lo consume.",[1090,1189,1191,1192,1194],{"id":1190},"qué-ofrece-ref-un-contenedor-explícito-y-reemplazable","Qué ofrece ",[1065,1193,1067],{},": un contenedor explícito y reemplazable",[1061,1196,1197,1199,1200,1203],{},[1065,1198,1067],{}," devuelve un objeto reactivo mutable. En JavaScript, lees y escribes su valor mediante ",[1065,1201,1202],{},".value",". Esto hace explícita la operación que modifica el estado y funciona igual para un booleano, un número, un string o un objeto.",[1061,1205,1206,1207,1209,1210,1213,1214,1217],{},"Este ejemplo se centra en el modelo de estado con ",[1065,1208,1067],{},". El botón usa semántica nativa y actualiza un resultado visible. Para un toggle de producción, añade ",[1065,1211,1212],{},"aria-pressed"," enlazado a ",[1065,1215,1216],{},"isEnabled"," para exponer programáticamente su estado; el texto cambiante no sustituye esa semántica.",[1219,1220,1227],"pre",{"className":1221,"code":1222,"filename":1223,"highlights":1224,"language":1225,"meta":1226,"style":1226},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang='ts'>\nimport { ref } from 'vue'\n\nconst isEnabled = ref(false)\n\nfunction toggleEnabled() {\n  isEnabled.value = !isEnabled.value\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type='button' @click='toggleEnabled'>\n    {{ isEnabled ? 'Disable' : 'Enable' }}\n  \u003C\u002Fbutton>\n  \u003Cp>{{ isEnabled ? 'Feature enabled' : 'Feature disabled' }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","FeatureToggle.vue",[36,419],"vue","",[1065,1228,1229,1258,1275,1280,1305,1309,1320,1333,1338,1347,1351,1360,1387,1393,1403,1417],{"__ignoreMap":1226},[1230,1231,1233,1237,1241,1245,1248,1251,1255],"span",{"class":1232,"line":115},"line",[1230,1234,1236],{"class":1235},"sVt8B","\u003C",[1230,1238,1240],{"class":1239},"s9eBZ","script",[1230,1242,1244],{"class":1243},"sScJk"," setup",[1230,1246,1247],{"class":1243}," lang",[1230,1249,1250],{"class":1235},"=",[1230,1252,1254],{"class":1253},"sZZnC","'ts'",[1230,1256,1257],{"class":1235},">\n",[1230,1259,1262,1266,1269,1272],{"class":1260,"line":36},[1232,1261],"highlight",[1230,1263,1265],{"class":1264},"szBVR","import",[1230,1267,1268],{"class":1235}," { ref } ",[1230,1270,1271],{"class":1264},"from",[1230,1273,1274],{"class":1253}," 'vue'\n",[1230,1276,1277],{"class":1232,"line":162},[1230,1278,1279],{"emptyLinePlaceholder":26},"\n",[1230,1281,1283,1286,1290,1293,1296,1299,1302],{"class":1282,"line":419},[1232,1261],[1230,1284,1285],{"class":1264},"const",[1230,1287,1289],{"class":1288},"sj4cs"," isEnabled",[1230,1291,1292],{"class":1264}," =",[1230,1294,1295],{"class":1243}," ref",[1230,1297,1298],{"class":1235},"(",[1230,1300,1301],{"class":1288},"false",[1230,1303,1304],{"class":1235},")\n",[1230,1306,1307],{"class":1232,"line":392},[1230,1308,1279],{"emptyLinePlaceholder":26},[1230,1310,1311,1314,1317],{"class":1232,"line":82},[1230,1312,1313],{"class":1264},"function",[1230,1315,1316],{"class":1243}," toggleEnabled",[1230,1318,1319],{"class":1235},"() {\n",[1230,1321,1322,1325,1327,1330],{"class":1232,"line":334},[1230,1323,1324],{"class":1235},"  isEnabled.value ",[1230,1326,1250],{"class":1264},[1230,1328,1329],{"class":1264}," !",[1230,1331,1332],{"class":1235},"isEnabled.value\n",[1230,1334,1335],{"class":1232,"line":255},[1230,1336,1337],{"class":1235},"}\n",[1230,1339,1340,1343,1345],{"class":1232,"line":268},[1230,1341,1342],{"class":1235},"\u003C\u002F",[1230,1344,1240],{"class":1239},[1230,1346,1257],{"class":1235},[1230,1348,1349],{"class":1232,"line":585},[1230,1350,1279],{"emptyLinePlaceholder":26},[1230,1352,1353,1355,1358],{"class":1232,"line":552},[1230,1354,1236],{"class":1235},[1230,1356,1357],{"class":1239},"template",[1230,1359,1257],{"class":1235},[1230,1361,1363,1366,1369,1372,1374,1377,1380,1382,1385],{"class":1232,"line":1362},12,[1230,1364,1365],{"class":1235},"  \u003C",[1230,1367,1368],{"class":1239},"button",[1230,1370,1371],{"class":1243}," type",[1230,1373,1250],{"class":1235},[1230,1375,1376],{"class":1253},"'button'",[1230,1378,1379],{"class":1243}," @click",[1230,1381,1250],{"class":1235},[1230,1383,1384],{"class":1253},"'toggleEnabled'",[1230,1386,1257],{"class":1235},[1230,1388,1390],{"class":1232,"line":1389},13,[1230,1391,1392],{"class":1235},"    {{ isEnabled ? 'Disable' : 'Enable' }}\n",[1230,1394,1396,1399,1401],{"class":1232,"line":1395},14,[1230,1397,1398],{"class":1235},"  \u003C\u002F",[1230,1400,1368],{"class":1239},[1230,1402,1257],{"class":1235},[1230,1404,1406,1408,1410,1413,1415],{"class":1232,"line":1405},15,[1230,1407,1365],{"class":1235},[1230,1409,1061],{"class":1239},[1230,1411,1412],{"class":1235},">{{ isEnabled ? 'Feature enabled' : 'Feature disabled' }}\u003C\u002F",[1230,1414,1061],{"class":1239},[1230,1416,1257],{"class":1235},[1230,1418,1420,1422,1424],{"class":1232,"line":1419},16,[1230,1421,1342],{"class":1235},[1230,1423,1357],{"class":1239},[1230,1425,1257],{"class":1235},[1061,1427,1428,1429,1432],{},"La diferencia importante está en JavaScript: ",[1065,1430,1431],{},"isEnabled.value"," es la lectura o escritura del valor. En un template, Vue puede desempaquetar automáticamente refs que son propiedades de primer nivel del contexto de renderizado.",[1061,1434,1435,1437,1438,1441,1442,1445],{},[1065,1436,1067],{}," también resulta natural para un resultado que empieza vacío y después se reemplaza. En TypeScript, por ejemplo, ",[1065,1439,1440],{},"ref\u003CUser | null>(null)"," expresa que el estado todavía no contiene una persona y que más adelante recibirá un objeto ",[1065,1443,1444],{},"User",". La misma idea se aplica a respuestas HTTP, selecciones y resultados de búsquedas.",[1061,1447,1448,1449,1451,1452,1455],{},"Si el valor interno de un ref es un objeto, Vue lo convierte profundamente en reactivo. Cuando quieres conservar la reactividad solo en ",[1065,1450,1202],{}," y evitar esa conversión profunda, ",[1065,1453,1454],{},"shallowRef()"," es una alternativa específica; no es el punto de partida habitual para formularios u objetos pequeños.",[1090,1457,1191,1459,1461],{"id":1458},"qué-ofrece-reactive-un-proxy-para-objetos-estables",[1065,1460,1071],{},": un proxy para objetos estables",[1061,1463,1464,1466],{},[1065,1465,1071],{}," recibe un objeto, un array o una colección y devuelve un proxy profundamente reactivo. Es cómodo cuando el dominio se entiende como una unidad con varias propiedades relacionadas: un formulario, filtros o una configuración local.",[1219,1468,1472],{"className":1221,"code":1469,"filename":1470,"highlights":1471,"language":1225,"meta":1226,"style":1226},"\u003Cscript setup lang='ts'>\nimport { reactive } from 'vue'\n\nconst profile = reactive({\n  displayName: '',\n  email: ''\n})\n\nfunction resetProfile() {\n  profile.displayName = ''\n  profile.email = ''\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cform @submit.prevent='resetProfile'>\n    \u003Clabel>\n      Display name\n      \u003Cinput v-model='profile.displayName' type='text' \u002F>\n    \u003C\u002Flabel>\n\n    \u003Clabel>\n      Email\n      \u003Cinput v-model='profile.email' type='email' \u002F>\n    \u003C\u002Flabel>\n\n    \u003Cbutton type='submit'>Reset\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Ftemplate>\n","ProfileForm.vue",[36,419,392,82,334],[1065,1473,1474,1490,1502,1506,1522,1534,1543,1549,1553,1562,1572,1581,1585,1593,1597,1605,1622,1633,1639,1666,1676,1681,1690,1696,1719,1728,1733,1754,1763],{"__ignoreMap":1226},[1230,1475,1476,1478,1480,1482,1484,1486,1488],{"class":1232,"line":115},[1230,1477,1236],{"class":1235},[1230,1479,1240],{"class":1239},[1230,1481,1244],{"class":1243},[1230,1483,1247],{"class":1243},[1230,1485,1250],{"class":1235},[1230,1487,1254],{"class":1253},[1230,1489,1257],{"class":1235},[1230,1491,1493,1495,1498,1500],{"class":1492,"line":36},[1232,1261],[1230,1494,1265],{"class":1264},[1230,1496,1497],{"class":1235}," { reactive } ",[1230,1499,1271],{"class":1264},[1230,1501,1274],{"class":1253},[1230,1503,1504],{"class":1232,"line":162},[1230,1505,1279],{"emptyLinePlaceholder":26},[1230,1507,1509,1511,1514,1516,1519],{"class":1508,"line":419},[1232,1261],[1230,1510,1285],{"class":1264},[1230,1512,1513],{"class":1288}," profile",[1230,1515,1292],{"class":1264},[1230,1517,1518],{"class":1243}," reactive",[1230,1520,1521],{"class":1235},"({\n",[1230,1523,1525,1528,1531],{"class":1524,"line":392},[1232,1261],[1230,1526,1527],{"class":1235},"  displayName: ",[1230,1529,1530],{"class":1253},"''",[1230,1532,1533],{"class":1235},",\n",[1230,1535,1537,1540],{"class":1536,"line":82},[1232,1261],[1230,1538,1539],{"class":1235},"  email: ",[1230,1541,1542],{"class":1253},"''\n",[1230,1544,1546],{"class":1545,"line":334},[1232,1261],[1230,1547,1548],{"class":1235},"})\n",[1230,1550,1551],{"class":1232,"line":255},[1230,1552,1279],{"emptyLinePlaceholder":26},[1230,1554,1555,1557,1560],{"class":1232,"line":268},[1230,1556,1313],{"class":1264},[1230,1558,1559],{"class":1243}," resetProfile",[1230,1561,1319],{"class":1235},[1230,1563,1564,1567,1569],{"class":1232,"line":585},[1230,1565,1566],{"class":1235},"  profile.displayName ",[1230,1568,1250],{"class":1264},[1230,1570,1571],{"class":1253}," ''\n",[1230,1573,1574,1577,1579],{"class":1232,"line":552},[1230,1575,1576],{"class":1235},"  profile.email ",[1230,1578,1250],{"class":1264},[1230,1580,1571],{"class":1253},[1230,1582,1583],{"class":1232,"line":1362},[1230,1584,1337],{"class":1235},[1230,1586,1587,1589,1591],{"class":1232,"line":1389},[1230,1588,1342],{"class":1235},[1230,1590,1240],{"class":1239},[1230,1592,1257],{"class":1235},[1230,1594,1595],{"class":1232,"line":1395},[1230,1596,1279],{"emptyLinePlaceholder":26},[1230,1598,1599,1601,1603],{"class":1232,"line":1405},[1230,1600,1236],{"class":1235},[1230,1602,1357],{"class":1239},[1230,1604,1257],{"class":1235},[1230,1606,1607,1609,1612,1615,1617,1620],{"class":1232,"line":1419},[1230,1608,1365],{"class":1235},[1230,1610,1611],{"class":1239},"form",[1230,1613,1614],{"class":1243}," @submit.prevent",[1230,1616,1250],{"class":1235},[1230,1618,1619],{"class":1253},"'resetProfile'",[1230,1621,1257],{"class":1235},[1230,1623,1625,1628,1631],{"class":1232,"line":1624},17,[1230,1626,1627],{"class":1235},"    \u003C",[1230,1629,1630],{"class":1239},"label",[1230,1632,1257],{"class":1235},[1230,1634,1636],{"class":1232,"line":1635},18,[1230,1637,1638],{"class":1235},"      Display name\n",[1230,1640,1642,1645,1648,1651,1653,1656,1658,1660,1663],{"class":1232,"line":1641},19,[1230,1643,1644],{"class":1235},"      \u003C",[1230,1646,1647],{"class":1239},"input",[1230,1649,1650],{"class":1243}," v-model",[1230,1652,1250],{"class":1235},[1230,1654,1655],{"class":1253},"'profile.displayName'",[1230,1657,1371],{"class":1243},[1230,1659,1250],{"class":1235},[1230,1661,1662],{"class":1253},"'text'",[1230,1664,1665],{"class":1235}," \u002F>\n",[1230,1667,1669,1672,1674],{"class":1232,"line":1668},20,[1230,1670,1671],{"class":1235},"    \u003C\u002F",[1230,1673,1630],{"class":1239},[1230,1675,1257],{"class":1235},[1230,1677,1679],{"class":1232,"line":1678},21,[1230,1680,1279],{"emptyLinePlaceholder":26},[1230,1682,1684,1686,1688],{"class":1232,"line":1683},22,[1230,1685,1627],{"class":1235},[1230,1687,1630],{"class":1239},[1230,1689,1257],{"class":1235},[1230,1691,1693],{"class":1232,"line":1692},23,[1230,1694,1695],{"class":1235},"      Email\n",[1230,1697,1699,1701,1703,1705,1707,1710,1712,1714,1717],{"class":1232,"line":1698},24,[1230,1700,1644],{"class":1235},[1230,1702,1647],{"class":1239},[1230,1704,1650],{"class":1243},[1230,1706,1250],{"class":1235},[1230,1708,1709],{"class":1253},"'profile.email'",[1230,1711,1371],{"class":1243},[1230,1713,1250],{"class":1235},[1230,1715,1716],{"class":1253},"'email'",[1230,1718,1665],{"class":1235},[1230,1720,1722,1724,1726],{"class":1232,"line":1721},25,[1230,1723,1671],{"class":1235},[1230,1725,1630],{"class":1239},[1230,1727,1257],{"class":1235},[1230,1729,1731],{"class":1232,"line":1730},26,[1230,1732,1279],{"emptyLinePlaceholder":26},[1230,1734,1736,1738,1740,1742,1744,1747,1750,1752],{"class":1232,"line":1735},27,[1230,1737,1627],{"class":1235},[1230,1739,1368],{"class":1239},[1230,1741,1371],{"class":1243},[1230,1743,1250],{"class":1235},[1230,1745,1746],{"class":1253},"'submit'",[1230,1748,1749],{"class":1235},">Reset\u003C\u002F",[1230,1751,1368],{"class":1239},[1230,1753,1257],{"class":1235},[1230,1755,1757,1759,1761],{"class":1232,"line":1756},28,[1230,1758,1398],{"class":1235},[1230,1760,1611],{"class":1239},[1230,1762,1257],{"class":1235},[1230,1764,1766,1768,1770],{"class":1232,"line":1765},29,[1230,1767,1342],{"class":1235},[1230,1769,1357],{"class":1239},[1230,1771,1257],{"class":1235},[1061,1773,1774,1775,1068,1778,1781,1782,1784,1785,1787],{},"Aquí ",[1065,1776,1777],{},"profile.displayName",[1065,1779,1780],{},"profile.email"," son operaciones directas sobre el proxy. ",[1065,1783,1071],{}," no sirve para contener directamente un string, un número o un booleano como valor raíz. Para esos casos, ",[1065,1786,1067],{}," expresa mejor la intención.",[1061,1789,1790,1791,1793,1794,1796,1797,1800,1801,1803],{},"También debes conservar la referencia creada por ",[1065,1792,1071],{},". Modificar ",[1065,1795,1780],{}," mantiene la conexión reactiva; reemplazar libremente todo ",[1065,1798,1799],{},"profile"," por otro objeto no conserva la conexión con el proxy original. Si necesitas reemplazar el objeto completo, un ",[1065,1802,1067],{}," de objeto suele ser una representación más adecuada.",[1090,1805,1807],{"id":1806},"los-límites-que-cambian-la-decisión-referencias-desestructuración-y-desempaquetado","Los límites que cambian la decisión: referencias, desestructuración y desempaquetado",[1061,1809,1810],{},"Una fuente frecuente de errores es desestructurar directamente propiedades primitivas de un objeto reactivo:",[1219,1812,1816],{"className":1813,"code":1814,"language":1815,"meta":1226,"style":1226},"language-ts shiki shiki-themes github-light github-dark","const { email } = profile\n","ts",[1065,1817,1818],{"__ignoreMap":1226},[1230,1819,1820,1822,1825,1828,1831,1833],{"class":1232,"line":115},[1230,1821,1285],{"class":1264},[1230,1823,1824],{"class":1235}," { ",[1230,1826,1827],{"class":1288},"email",[1230,1829,1830],{"class":1235}," } ",[1230,1832,1250],{"class":1264},[1230,1834,1835],{"class":1235}," profile\n",[1061,1837,1838,1839,1841,1842,1845,1846,1848],{},"La variable ",[1065,1840,1827],{}," deja de estar conectada a la propiedad reactiva. Cuando necesitas exponer una propiedad concreta, usa ",[1065,1843,1844],{},"toRef()",". Cuando quieres exponer varias propiedades, usa ",[1065,1847,23],{},".",[1219,1850,1854],{"className":1813,"code":1851,"filename":1852,"highlights":1853,"language":1815,"meta":1226,"style":1226},"import { reactive, toRefs } from 'vue'\n\nexport function useProfileFilters() {\n  const filters = reactive({\n    query: '',\n    activeOnly: false\n  })\n\n  function resetFilters() {\n    filters.query = ''\n    filters.activeOnly = false\n  }\n\n  return {\n    ...toRefs(filters),\n    resetFilters\n  }\n}\n","useProfileFilters.ts",[115,419,392,82,334,1405],[1065,1855,1856,1868,1872,1885,1900,1910,1919,1925,1929,1939,1948,1958,1963,1967,1975,1987,1992,1996],{"__ignoreMap":1226},[1230,1857,1859,1861,1864,1866],{"class":1858,"line":115},[1232,1261],[1230,1860,1265],{"class":1264},[1230,1862,1863],{"class":1235}," { reactive, toRefs } ",[1230,1865,1271],{"class":1264},[1230,1867,1274],{"class":1253},[1230,1869,1870],{"class":1232,"line":36},[1230,1871,1279],{"emptyLinePlaceholder":26},[1230,1873,1874,1877,1880,1883],{"class":1232,"line":162},[1230,1875,1876],{"class":1264},"export",[1230,1878,1879],{"class":1264}," function",[1230,1881,1882],{"class":1243}," useProfileFilters",[1230,1884,1319],{"class":1235},[1230,1886,1888,1891,1894,1896,1898],{"class":1887,"line":419},[1232,1261],[1230,1889,1890],{"class":1264},"  const",[1230,1892,1893],{"class":1288}," filters",[1230,1895,1292],{"class":1264},[1230,1897,1518],{"class":1243},[1230,1899,1521],{"class":1235},[1230,1901,1903,1906,1908],{"class":1902,"line":392},[1232,1261],[1230,1904,1905],{"class":1235},"    query: ",[1230,1907,1530],{"class":1253},[1230,1909,1533],{"class":1235},[1230,1911,1913,1916],{"class":1912,"line":82},[1232,1261],[1230,1914,1915],{"class":1235},"    activeOnly: ",[1230,1917,1918],{"class":1288},"false\n",[1230,1920,1922],{"class":1921,"line":334},[1232,1261],[1230,1923,1924],{"class":1235},"  })\n",[1230,1926,1927],{"class":1232,"line":255},[1230,1928,1279],{"emptyLinePlaceholder":26},[1230,1930,1931,1934,1937],{"class":1232,"line":268},[1230,1932,1933],{"class":1264},"  function",[1230,1935,1936],{"class":1243}," resetFilters",[1230,1938,1319],{"class":1235},[1230,1940,1941,1944,1946],{"class":1232,"line":585},[1230,1942,1943],{"class":1235},"    filters.query ",[1230,1945,1250],{"class":1264},[1230,1947,1571],{"class":1253},[1230,1949,1950,1953,1955],{"class":1232,"line":552},[1230,1951,1952],{"class":1235},"    filters.activeOnly ",[1230,1954,1250],{"class":1264},[1230,1956,1957],{"class":1288}," false\n",[1230,1959,1960],{"class":1232,"line":1362},[1230,1961,1962],{"class":1235},"  }\n",[1230,1964,1965],{"class":1232,"line":1389},[1230,1966,1279],{"emptyLinePlaceholder":26},[1230,1968,1969,1972],{"class":1232,"line":1395},[1230,1970,1971],{"class":1264},"  return",[1230,1973,1974],{"class":1235}," {\n",[1230,1976,1978,1981,1984],{"class":1977,"line":1405},[1232,1261],[1230,1979,1980],{"class":1264},"    ...",[1230,1982,1983],{"class":1243},"toRefs",[1230,1985,1986],{"class":1235},"(filters),\n",[1230,1988,1989],{"class":1232,"line":1419},[1230,1990,1991],{"class":1235},"    resetFilters\n",[1230,1993,1994],{"class":1232,"line":1624},[1230,1995,1962],{"class":1235},[1230,1997,1998],{"class":1232,"line":1635},[1230,1999,1337],{"class":1235},[1061,2001,2002,2003,2006,2007,2010],{},"El objeto devuelto es plano y contiene refs enlazados. Por eso quien consume el composable puede escribir ",[1065,2004,2005],{},"const { query, activeOnly } = useProfileFilters()"," sin romper la reactividad. ",[1065,2008,2009],{},"toRef(filters, 'query')"," sería la opción apropiada si solo necesitas una propiedad.",[1061,2012,2013,2014,2017,2018,1848],{},"El desempaquetado también tiene límites. Un ref puede desempaquetarse como propiedad de un objeto profundamente reactivo, pero no necesariamente al accederlo como elemento de un array reactivo o de una colección nativa como ",[1065,2015,2016],{},"Map",". En esos casos, sigue siendo necesario acceder a ",[1065,2019,1202],{},[1061,2021,2022],{},"Tampoco conviene confundir JavaScript con templates. En templates, el desempaquetado automático se aplica a propiedades de primer nivel del contexto de renderizado; una propiedad anidada no obtiene necesariamente el mismo tratamiento.",[1090,2024,2026],{"id":2025},"diseñar-composables-y-tipos-alrededor-del-contrato-del-estado","Diseñar composables y tipos alrededor del contrato del estado",[1061,2028,2029],{},"La documentación de composables recomienda devolver un objeto plano con varias refs. Este formato representa bien una API reutilizable: cada consumidor puede desestructurar las refs y conservar sus vínculos reactivos.",[1061,2031,2032,2033,2035,2036,2039,2040,2043],{},"Devuelve un objeto ",[1065,2034,1071],{}," cuando quieras que la identidad del objeto forme parte del contrato y esperes que el consumidor trabaje con ",[1065,2037,2038],{},"state.field",". Devuelve refs cuando el consumidor deba reemplazar valores, desestructurarlos o combinar algunos de ellos con ",[1065,2041,2042],{},"computed()"," y otras APIs.",[1061,2045,2046,2047,2049,2050,2052,2053,2055,2056,2058],{},"TypeScript infiere el tipo de ",[1065,2048,1067],{}," desde su valor inicial. Si el estado empieza vacío, usa un tipo explícito, como ",[1065,2051,1440],{},". ",[1065,2054,1071],{}," también infiere tipos, pero Vue desaconseja pasarle directamente un genérico sin considerar que el tipo resultante incorpora el desempaquetado anidado de refs. En la práctica, suele ser más claro tipar la estructura inicial y dejar que ",[1065,2057,1071],{}," la infiera.",[1090,2060,2062],{"id":2061},"en-nuxt-elegir-según-el-alcance-ssr","En Nuxt: elegir según el alcance SSR",[1061,2064,2065,2066,2068],{},"El estado local debe permanecer dentro de ",[1065,2067,1087],{}," cuando pertenece a un componente o a una instancia concreta. Evita exportar un singleton mutable desde el ámbito de módulo en una aplicación con SSR: varias solicitudes podrían observar o modificar el mismo estado.",[1061,2070,2071,2072,2074,2075,2077],{},"Cuando necesitas compartir estado entre componentes o instancias de Nuxt y quieres conservarlo durante la hidratación, ",[1065,2073,1181],{}," ofrece una alternativa compatible con SSR mediante una clave única. Cada solicitud debe conservar su propio aislamiento; ",[1065,2076,1181],{}," no convierte el estado en almacenamiento mutable compartido entre requests:",[1219,2079,2083],{"className":1221,"code":2080,"filename":2081,"highlights":2082,"language":1225,"meta":1226,"style":1226},"\u003Cscript setup lang='ts'>\nconst cartCount = useState('cart-count', () => 0)\n\nfunction addToCart() {\n  cartCount.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type='button' @click='addToCart'>\n    Add item ({{ cartCount }})\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","CartBadge.vue",[36,552],[1065,2084,2085,2101,2130,2134,2143,2151,2155,2163,2167,2175,2196,2202,2210],{"__ignoreMap":1226},[1230,2086,2087,2089,2091,2093,2095,2097,2099],{"class":1232,"line":115},[1230,2088,1236],{"class":1235},[1230,2090,1240],{"class":1239},[1230,2092,1244],{"class":1243},[1230,2094,1247],{"class":1243},[1230,2096,1250],{"class":1235},[1230,2098,1254],{"class":1253},[1230,2100,1257],{"class":1235},[1230,2102,2104,2106,2109,2111,2114,2116,2119,2122,2125,2128],{"class":2103,"line":36},[1232,1261],[1230,2105,1285],{"class":1264},[1230,2107,2108],{"class":1288}," cartCount",[1230,2110,1292],{"class":1264},[1230,2112,2113],{"class":1243}," useState",[1230,2115,1298],{"class":1235},[1230,2117,2118],{"class":1253},"'cart-count'",[1230,2120,2121],{"class":1235},", () ",[1230,2123,2124],{"class":1264},"=>",[1230,2126,2127],{"class":1288}," 0",[1230,2129,1304],{"class":1235},[1230,2131,2132],{"class":1232,"line":162},[1230,2133,1279],{"emptyLinePlaceholder":26},[1230,2135,2136,2138,2141],{"class":1232,"line":419},[1230,2137,1313],{"class":1264},[1230,2139,2140],{"class":1243}," addToCart",[1230,2142,1319],{"class":1235},[1230,2144,2145,2148],{"class":1232,"line":392},[1230,2146,2147],{"class":1235},"  cartCount.value",[1230,2149,2150],{"class":1264},"++\n",[1230,2152,2153],{"class":1232,"line":82},[1230,2154,1337],{"class":1235},[1230,2156,2157,2159,2161],{"class":1232,"line":334},[1230,2158,1342],{"class":1235},[1230,2160,1240],{"class":1239},[1230,2162,1257],{"class":1235},[1230,2164,2165],{"class":1232,"line":255},[1230,2166,1279],{"emptyLinePlaceholder":26},[1230,2168,2169,2171,2173],{"class":1232,"line":268},[1230,2170,1236],{"class":1235},[1230,2172,1357],{"class":1239},[1230,2174,1257],{"class":1235},[1230,2176,2177,2179,2181,2183,2185,2187,2189,2191,2194],{"class":1232,"line":585},[1230,2178,1365],{"class":1235},[1230,2180,1368],{"class":1239},[1230,2182,1371],{"class":1243},[1230,2184,1250],{"class":1235},[1230,2186,1376],{"class":1253},[1230,2188,1379],{"class":1243},[1230,2190,1250],{"class":1235},[1230,2192,2193],{"class":1253},"'addToCart'",[1230,2195,1257],{"class":1235},[1230,2197,2199],{"class":2198,"line":552},[1232,1261],[1230,2200,2201],{"class":1235},"    Add item ({{ cartCount }})\n",[1230,2203,2204,2206,2208],{"class":1232,"line":1362},[1230,2205,1398],{"class":1235},[1230,2207,1368],{"class":1239},[1230,2209,1257],{"class":1235},[1230,2211,2212,2214,2216],{"class":1232,"line":1389},[1230,2213,1342],{"class":1235},[1230,2215,1357],{"class":1239},[1230,2217,1257],{"class":1235},[1061,2219,2220,2221,2223],{},"El valor de ",[1065,2222,1181],{}," debe ser serializable. No guardes clases, funciones o símbolos en ese estado compartido. Nuxt puede serializar y restaurar refs y objetos reactivos dentro de su payload de datos, mientras que las respuestas de rutas API se serializan mediante JSON.",[1061,2225,2226,2227,1068,2229,2231,2232,2235],{},"Nuxt autoimporta APIs de Vue como ",[1065,2228,1067],{},[1065,2230,2042],{}," en el contexto de la aplicación. Si prefieres imports explícitos, Nuxt también proporciona el alias ",[1065,2233,2234],{},"#imports",". La elección entre autoimport y import explícito no cambia el contrato de reactividad.",[1090,2237,2239],{"id":2238},"regla-práctica-y-errores-frecuentes","Regla práctica y errores frecuentes",[1061,2241,2242,2243,2245,2246,2248,2249,2251,2252,2254,2255,2257],{},"Empieza con ",[1065,2244,1067],{},". Cambia a ",[1065,2247,1071],{}," cuando tengas un objeto estable que se modifica por propiedades y esa forma haga más claro el código. Usa ",[1065,2250,1844],{}," o ",[1065,2253,23],{}," cuando necesites exponer propiedades sin perder el vínculo. Reserva ",[1065,2256,1181],{}," para el estado compartido de Nuxt cuyo alcance y ciclo de hidratación requieren integración con SSR.",[1061,2259,2260],{},"Revisa estos errores antes de cerrar una implementación:",[2262,2263,2264,2271,2277,2283,2291,2297,2300,2303],"ul",{},[2265,2266,2267,2268,2270],"li",{},"olvidar ",[1065,2269,1202],{}," en JavaScript;",[2265,2272,2273,2274,2276],{},"usar ",[1065,2275,1071],{}," con un primitivo;",[2265,2278,2279,2280,2282],{},"reemplazar un objeto ",[1065,2281,1071],{}," esperando conservar su conexión;",[2265,2284,2285,2286,2251,2288,2290],{},"desestructurar propiedades sin ",[1065,2287,1844],{},[1065,2289,23],{},";",[2265,2292,2293,2294,2296],{},"asumir que refs dentro de arrays o ",[1065,2295,2016],{}," se desempaquetan;",[2265,2298,2299],{},"confundir el desempaquetado de templates con el de JavaScript;",[2265,2301,2302],{},"exportar estado mutable en el ámbito de módulo durante SSR;",[2265,2304,2305,2306,1848],{},"guardar valores no serializables en ",[1065,2307,1181],{},[1090,2309,2311],{"id":2310},"laboratorio-justificar-la-api-elegida","Laboratorio: justificar la API elegida",[1061,2313,2314],{},"Modela tres casos y escribe una breve justificación para cada uno:",[2316,2317,2318,2326,2329],"ol",{},[2265,2319,2320,2321,1068,2324,1848],{},"Un toggle local que cambia entre ",[1065,2322,2323],{},"true",[1065,2325,1301],{},[2265,2327,2328],{},"Un formulario con nombre y correo que se edita campo por campo.",[2265,2330,2331],{},"Un contador compartido entre componentes de Nuxt que debe sobrevivir a la hidratación.",[1061,2333,2334,2335,2337,2338,1068,2340,2342,2343,2345,2346,2349,2350,2353,2354,2357,2358,2361,2362,2365,2366,1848],{},"Usa ",[1065,2336,1067],{},", ",[1065,2339,1071],{},[1065,2341,1181],{}," respectivamente. Después, transforma el formulario en un composable que devuelva refs mediante ",[1065,2344,23],{},". Para estudiar el reemplazo de referencias, realiza una prueba separada con ",[1065,2347,2348],{},"let state = reactive({ email: '' })"," y una variable ",[1065,2351,2352],{},"replacement",": asignar ",[1065,2355,2356],{},"state = replacement"," deja de usar el proxy original, mientras que ",[1065,2359,2360],{},"Object.assign(state, replacement)"," conserva el proxy y actualiza sus propiedades. Si necesitas reemplazar el objeto completo como operación habitual, compara ese diseño con ",[1065,2363,2364],{},"ref({ email: '' })",". Finalmente, desestructura las propiedades y explica qué vínculo se rompe sin ",[1065,2367,23],{},[1061,2369,2370],{},"La decisión no es elegir una API para siempre. Es hacer explícito si el estado representa un valor reemplazable, un objeto estable o un recurso compartido cuyo alcance incluye SSR.",[2372,2373,2374],"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 .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":1226,"searchDepth":36,"depth":36,"links":2376},[2377,2379,2381,2383,2384,2385,2386,2387],{"id":1092,"depth":36,"text":2378},"La decisión rápida: ref() como opción general",{"id":1190,"depth":36,"text":2380},"Qué ofrece ref(): un contenedor explícito y reemplazable",{"id":1458,"depth":36,"text":2382},"Qué ofrece reactive(): un proxy para objetos estables",{"id":1806,"depth":36,"text":1807},{"id":2025,"depth":36,"text":2026},{"id":2061,"depth":36,"text":2062},{"id":2238,"depth":36,"text":2239},{"id":2310,"depth":36,"text":2311},{"updatedAt":16,"author":17,"coverCaption":18,"keywords":2389},[20,21,22,23,24,25],[2391],{"headline":6,"author":2392,"datePublished":16,"@type":32},{"name":17,"@type":31},{"title":6,"description":10},[2395,2396,2397,2398,2399,2400],{"tag":41,"color":42},{"tag":44,"color":45},{"tag":47,"color":48},{"tag":50,"color":51},{"tag":53,"color":54},{"tag":56,"color":57},[2402,2416,2429,2443,2457,2471,2485,2498,2511,2523,2535,2546,2559,2571,2583,2595,2607,2620,2632,2645,2657,2669,2681,2692,2704,2716,2728,2742,2756,2770,2783,2795,2805,2814,2824],{"id":5,"title":6,"cover":7,"coverAlt":8,"date":9,"description":10,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2403,"navigation":26,"path":27,"schemaOrg":2405,"seo":2408,"series":34,"seriesDescription":35,"seriesOrder":36,"seriesTitle":37,"slug":13,"stem":38,"tags":2409,"__hash__":58},{"updatedAt":16,"author":17,"coverCaption":18,"keywords":2404},[20,21,22,23,24,25],[2406],{"headline":6,"author":2407,"datePublished":16,"@type":32},{"name":17,"@type":31},{"title":6,"description":10},[2410,2411,2412,2413,2414,2415],{"tag":41,"color":42},{"tag":44,"color":45},{"tag":47,"color":48},{"tag":50,"color":51},{"tag":53,"color":54},{"tag":56,"color":57},{"id":60,"title":61,"cover":62,"coverAlt":63,"date":64,"description":65,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2417,"navigation":26,"path":74,"schemaOrg":2419,"seo":2422,"series":80,"seriesDescription":81,"seriesOrder":82,"seriesTitle":83,"slug":13,"stem":84,"tags":2423,"__hash__":92},{"updatedAt":67,"author":17,"coverCaption":68,"keywords":2418},[70,71,72,44,73,50],[2420],{"headline":61,"author":2421,"datePublished":78,"@type":32},{"name":17,"@type":31},{"title":61,"description":65},[2424,2425,2426,2427,2428],{"tag":44,"color":45},{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":53,"color":54},{"id":94,"title":95,"cover":96,"coverAlt":97,"date":98,"description":99,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2430,"navigation":26,"path":109,"schemaOrg":2432,"seo":2435,"series":80,"seriesDescription":81,"seriesOrder":115,"seriesTitle":83,"slug":13,"stem":116,"tags":2436,"__hash__":129},{"updatedAt":67,"author":17,"coverCaption":101,"keywords":2431},[103,104,105,106,107,108],[2433],{"headline":95,"author":2434,"datePublished":113,"@type":32},{"name":17,"@type":31},{"title":95,"description":99},[2437,2438,2439,2440,2441,2442],{"tag":103,"color":119},{"tag":73,"color":88},{"tag":56,"color":57},{"tag":50,"color":51},{"tag":124,"color":125},{"tag":127,"color":128},{"id":131,"title":132,"cover":133,"coverAlt":134,"date":135,"description":136,"draft":11,"extension":12,"lab":2444,"locale":14,"meta":2446,"navigation":26,"path":156,"schemaOrg":2448,"seo":2451,"series":34,"seriesDescription":35,"seriesOrder":162,"seriesTitle":37,"slug":13,"stem":163,"tags":2452,"__hash__":171},{"title":138,"goal":139,"tasks":2445,"starterCode":145,"solutionHint":146},[141,142,143,144],{"updatedAt":148,"coverCaption":149,"author":17,"keywords":2447},[151,72,152,153,154,155,25],[2449],{"headline":132,"author":2450,"datePublished":160,"@type":32},{"name":17,"@type":31},{"title":132,"description":136},[2453,2454,2455,2456],{"tag":41,"color":42},{"tag":56,"color":57},{"tag":168,"color":169},{"tag":47,"color":48},{"id":173,"title":174,"cover":175,"coverAlt":174,"date":176,"description":177,"draft":11,"extension":12,"lab":2458,"locale":14,"meta":2460,"navigation":26,"path":196,"schemaOrg":2462,"seo":2465,"series":80,"seriesDescription":81,"seriesOrder":36,"seriesTitle":83,"slug":13,"stem":202,"tags":2466,"__hash__":210},{"title":179,"goal":180,"tasks":2459,"starterCode":186,"solutionHint":187},[182,183,184,185],{"updatedAt":67,"coverCaption":189,"author":17,"keywords":2461},[151,72,191,192,193,194,195],[2463],{"headline":174,"author":2464,"datePublished":200,"@type":32},{"name":17,"@type":31},{"title":174,"description":177},[2467,2468,2469,2470],{"tag":103,"color":119},{"tag":124,"color":125},{"tag":47,"color":48},{"tag":208,"color":209},{"id":212,"title":213,"cover":214,"coverAlt":215,"date":216,"description":217,"draft":11,"extension":12,"lab":2472,"locale":14,"meta":2474,"navigation":26,"path":233,"schemaOrg":2476,"seo":2479,"series":80,"seriesDescription":81,"seriesOrder":162,"seriesTitle":83,"slug":13,"stem":239,"tags":2480,"__hash__":245},{"title":219,"goal":220,"tasks":2473,"starterCode":226,"solutionHint":227},[222,223,224,225],{"updatedAt":67,"coverCaption":229,"author":17,"keywords":2475},[151,72,50,25,231,232],[2477],{"headline":213,"author":2478,"datePublished":237,"@type":32},{"name":17,"@type":31},{"title":213,"description":217},[2481,2482,2483,2484],{"tag":50,"color":51},{"tag":103,"color":119},{"tag":56,"color":57},{"tag":208,"color":209},{"id":247,"title":248,"cover":249,"coverAlt":250,"date":251,"description":252,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2486,"navigation":26,"path":261,"schemaOrg":2488,"seo":2491,"series":266,"seriesDescription":267,"seriesOrder":268,"seriesTitle":269,"slug":13,"stem":270,"tags":2492,"__hash__":281},{"updatedAt":254,"readingTime":255,"coverCaption":256,"author":17,"keywords":2487},[151,258,259,53,260],[2489],{"headline":248,"author":2490,"datePublished":254,"@type":32},{"name":17,"@type":31},{"title":248,"description":252},[2493,2494,2495,2496,2497],{"tag":273,"color":274},{"tag":53,"color":54},{"tag":73,"color":88},{"tag":103,"color":119},{"tag":279,"color":280},{"id":283,"title":284,"cover":285,"coverAlt":286,"date":287,"description":288,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2499,"navigation":26,"path":297,"schemaOrg":2501,"seo":2504,"series":266,"seriesDescription":267,"seriesOrder":255,"seriesTitle":269,"slug":13,"stem":302,"tags":2505,"__hash__":313},{"updatedAt":290,"coverCaption":291,"author":17,"keywords":2500},[151,293,294,295,296],[2502],{"headline":284,"author":2503,"datePublished":290,"@type":32},{"name":17,"@type":31},{"title":284,"description":288},[2506,2507,2508,2509,2510],{"tag":273,"color":274},{"tag":306,"color":307},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},{"id":315,"title":316,"cover":317,"coverAlt":318,"date":319,"description":320,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2512,"navigation":26,"path":329,"schemaOrg":2514,"seo":2517,"series":266,"seriesDescription":267,"seriesOrder":334,"seriesTitle":269,"slug":13,"stem":335,"tags":2518,"__hash__":343},{"updatedAt":322,"coverCaption":323,"author":17,"keywords":2513},[151,325,326,327,328],[2515],{"headline":316,"author":2516,"datePublished":322,"@type":32},{"name":17,"@type":31},{"title":316,"description":320},[2519,2520,2521,2522],{"tag":273,"color":274},{"tag":339,"color":340},{"tag":103,"color":119},{"tag":279,"color":280},{"id":345,"title":346,"cover":347,"coverAlt":348,"date":349,"description":350,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2524,"navigation":26,"path":359,"schemaOrg":2526,"seo":2529,"series":266,"seriesDescription":267,"seriesOrder":82,"seriesTitle":269,"slug":13,"stem":364,"tags":2530,"__hash__":371},{"updatedAt":352,"coverCaption":353,"author":17,"keywords":2525},[151,355,356,357,358],[2527],{"headline":346,"author":2528,"datePublished":352,"@type":32},{"name":17,"@type":31},{"title":346,"description":350},[2531,2532,2533,2534],{"tag":273,"color":274},{"tag":355,"color":368},{"tag":103,"color":119},{"tag":279,"color":280},{"id":373,"title":374,"cover":375,"coverAlt":376,"date":377,"description":378,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2536,"navigation":26,"path":387,"schemaOrg":2538,"seo":2541,"series":266,"seriesDescription":267,"seriesOrder":392,"seriesTitle":269,"slug":13,"stem":393,"tags":2542,"__hash__":398},{"updatedAt":380,"coverCaption":381,"author":17,"keywords":2537},[151,383,384,385,386],[2539],{"headline":374,"author":2540,"datePublished":380,"@type":32},{"name":17,"@type":31},{"title":374,"description":378},[2543,2544,2545],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":208,"color":209},{"id":400,"title":401,"cover":402,"coverAlt":403,"date":404,"description":405,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2547,"navigation":26,"path":414,"schemaOrg":2549,"seo":2552,"series":266,"seriesDescription":267,"seriesOrder":419,"seriesTitle":269,"slug":13,"stem":420,"tags":2553,"__hash__":427},{"updatedAt":407,"coverCaption":408,"author":17,"keywords":2548},[151,410,411,412,413],[2550],{"headline":401,"author":2551,"datePublished":407,"@type":32},{"name":17,"@type":31},{"title":401,"description":405},[2554,2555,2556,2557,2558],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":208,"color":209},{"id":429,"title":430,"cover":431,"coverAlt":432,"date":433,"description":434,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2560,"navigation":26,"path":443,"schemaOrg":2562,"seo":2565,"series":266,"seriesDescription":267,"seriesOrder":162,"seriesTitle":269,"slug":13,"stem":448,"tags":2566,"__hash__":454},{"updatedAt":436,"coverCaption":437,"author":17,"keywords":2561},[151,439,440,441,442],[2563],{"headline":430,"author":2564,"datePublished":436,"@type":32},{"name":17,"@type":31},{"title":430,"description":434},[2567,2568,2569,2570],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":309,"color":310},{"tag":208,"color":209},{"id":456,"title":457,"cover":458,"coverAlt":459,"date":460,"description":461,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2572,"navigation":26,"path":469,"schemaOrg":2574,"seo":2577,"series":266,"seriesDescription":267,"seriesOrder":36,"seriesTitle":269,"slug":13,"stem":474,"tags":2578,"__hash__":480},{"updatedAt":463,"coverCaption":464,"author":17,"keywords":2573},[151,466,467,468,25],[2575],{"headline":457,"author":2576,"datePublished":463,"@type":32},{"name":17,"@type":31},{"title":457,"description":461},[2579,2580,2581,2582],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},{"id":482,"title":483,"cover":484,"coverAlt":483,"date":485,"description":486,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2584,"navigation":26,"path":494,"schemaOrg":2586,"seo":2589,"series":266,"seriesDescription":267,"seriesOrder":115,"seriesTitle":269,"slug":13,"stem":499,"tags":2590,"__hash__":505},{"updatedAt":488,"readingTime":255,"coverCaption":489,"author":17,"keywords":2585},[151,491,25,492,493],[2587],{"headline":483,"author":2588,"datePublished":488,"@type":32},{"name":17,"@type":31},{"title":483,"description":486},[2591,2592,2593,2594],{"tag":273,"color":274},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":208,"color":209},{"id":507,"title":508,"cover":509,"coverAlt":508,"date":510,"description":511,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2596,"navigation":26,"path":518,"schemaOrg":2598,"seo":2601,"series":34,"seriesDescription":35,"seriesOrder":392,"seriesTitle":37,"slug":13,"stem":524,"tags":2602,"__hash__":530},{"updatedAt":148,"coverCaption":513,"author":17,"keywords":2597},[72,155,515,516,517,152],[2599],{"headline":508,"author":2600,"datePublished":522,"@type":32},{"name":17,"@type":31},{"title":508,"description":511},[2603,2604,2605,2606],{"tag":41,"color":42},{"tag":73,"color":88},{"tag":168,"color":169},{"tag":279,"color":280},{"id":532,"title":533,"cover":534,"coverAlt":535,"date":536,"description":537,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2608,"navigation":26,"path":544,"schemaOrg":2610,"seo":2613,"series":550,"seriesDescription":551,"seriesOrder":552,"seriesTitle":553,"slug":13,"stem":554,"tags":2614,"__hash__":565},{"updatedAt":539,"coverCaption":535,"author":17,"keywords":2609},[151,541,542,543,25,492],[2611],{"headline":547,"author":2612,"datePublished":539,"@type":32},{"name":17,"@type":31},{"title":533,"description":537},[2615,2616,2617,2618,2619],{"tag":557,"color":558},{"tag":560,"color":561},{"tag":73,"color":88},{"tag":41,"color":42},{"tag":279,"color":280},{"id":567,"title":568,"cover":569,"coverAlt":570,"date":571,"description":572,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2621,"navigation":26,"path":579,"schemaOrg":2623,"seo":2626,"series":550,"seriesDescription":551,"seriesOrder":585,"seriesTitle":553,"slug":13,"stem":586,"tags":2627,"__hash__":594},{"updatedAt":574,"coverCaption":513,"author":17,"keywords":2622},[151,576,577,578,25,492],[2624],{"headline":582,"author":2625,"datePublished":574,"@type":32},{"name":17,"@type":31},{"title":568,"description":572},[2628,2629,2630,2631],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},{"id":596,"title":597,"cover":598,"coverAlt":599,"date":600,"description":601,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2633,"navigation":26,"path":609,"schemaOrg":2635,"seo":2638,"series":550,"seriesDescription":551,"seriesOrder":268,"seriesTitle":553,"slug":13,"stem":615,"tags":2639,"__hash__":622},{"updatedAt":603,"coverCaption":513,"author":17,"keywords":2634},[151,605,606,607,608],[2636],{"headline":612,"author":2637,"datePublished":603,"@type":32},{"name":17,"@type":31},{"title":597,"description":601},[2640,2641,2642,2643,2644],{"tag":557,"color":558},{"tag":168,"color":169},{"tag":309,"color":310},{"tag":41,"color":42},{"tag":279,"color":280},{"id":624,"title":625,"cover":626,"coverAlt":627,"date":628,"description":629,"draft":11,"extension":12,"lab":13,"locale":13,"meta":2646,"navigation":26,"path":637,"schemaOrg":2648,"seo":2651,"series":550,"seriesDescription":551,"seriesOrder":255,"seriesTitle":553,"slug":13,"stem":642,"tags":2652,"__hash__":648},{"updatedAt":631,"coverCaption":632,"keywords":2647},[151,634,635,636,413,25,492],[2649],{"headline":625,"author":2650,"datePublished":631,"@type":32},{"name":17,"@type":31},{"title":625,"description":629},[2653,2654,2655,2656],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":309,"color":310},{"tag":208,"color":209},{"id":650,"title":651,"cover":652,"coverAlt":653,"date":654,"description":655,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2658,"navigation":26,"path":664,"schemaOrg":2660,"seo":2663,"series":550,"seriesDescription":551,"seriesOrder":334,"seriesTitle":553,"slug":13,"stem":670,"tags":2664,"__hash__":676},{"updatedAt":657,"coverCaption":658,"author":17,"keywords":2659},[151,660,661,662,663,25,492],[2661],{"headline":667,"author":2662,"datePublished":657,"@type":32},{"name":17,"@type":31},{"title":651,"description":655},[2665,2666,2667,2668],{"tag":557,"color":558},{"tag":127,"color":128},{"tag":103,"color":119},{"tag":279,"color":280},{"id":678,"title":679,"cover":680,"coverAlt":681,"date":682,"description":683,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2670,"navigation":26,"path":690,"schemaOrg":2672,"seo":2675,"series":550,"seriesDescription":551,"seriesOrder":82,"seriesTitle":553,"slug":13,"stem":696,"tags":2676,"__hash__":704},{"updatedAt":685,"coverCaption":513,"author":17,"keywords":2671},[151,687,688,689,25,492],[2673],{"headline":693,"author":2674,"datePublished":685,"@type":32},{"name":17,"@type":31},{"title":679,"description":683},[2677,2678,2679,2680],{"tag":557,"color":558},{"tag":700,"color":701},{"tag":41,"color":42},{"tag":208,"color":209},{"id":706,"title":707,"cover":708,"coverAlt":709,"date":710,"description":711,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2682,"navigation":26,"path":718,"schemaOrg":2684,"seo":2687,"series":550,"seriesDescription":551,"seriesOrder":392,"seriesTitle":553,"slug":13,"stem":724,"tags":2688,"__hash__":729},{"updatedAt":713,"coverCaption":513,"author":17,"keywords":2683},[151,715,716,717,25,492],[2685],{"headline":721,"author":2686,"datePublished":713,"@type":32},{"name":17,"@type":31},{"title":707,"description":711},[2689,2690,2691],{"tag":557,"color":558},{"tag":124,"color":125},{"tag":208,"color":209},{"id":731,"title":732,"cover":733,"coverAlt":734,"date":735,"description":736,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2693,"navigation":26,"path":744,"schemaOrg":2695,"seo":2698,"series":550,"seriesDescription":551,"seriesOrder":419,"seriesTitle":553,"slug":13,"stem":750,"tags":2699,"__hash__":756},{"updatedAt":738,"coverCaption":513,"author":17,"keywords":2694},[151,740,741,742,743,25,492],[2696],{"headline":747,"author":2697,"datePublished":738,"@type":32},{"name":17,"@type":31},{"title":732,"description":736},[2700,2701,2702,2703],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":41,"color":42},{"tag":208,"color":209},{"id":758,"title":759,"cover":760,"coverAlt":761,"date":762,"description":763,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2705,"navigation":26,"path":770,"schemaOrg":2707,"seo":2710,"series":550,"seriesDescription":551,"seriesOrder":162,"seriesTitle":553,"slug":13,"stem":776,"tags":2711,"__hash__":783},{"updatedAt":765,"coverCaption":513,"author":17,"keywords":2706},[151,767,768,769,25,492,413],[2708],{"headline":773,"author":2709,"datePublished":765,"@type":32},{"name":17,"@type":31},{"title":759,"description":763},[2712,2713,2714,2715],{"tag":557,"color":558},{"tag":780,"color":42},{"tag":590,"color":591},{"tag":208,"color":209},{"id":785,"title":786,"cover":787,"coverAlt":788,"date":789,"description":790,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2717,"navigation":26,"path":800,"schemaOrg":2719,"seo":2722,"series":550,"seriesDescription":551,"seriesOrder":36,"seriesTitle":553,"slug":13,"stem":806,"tags":2723,"__hash__":814},{"updatedAt":792,"coverCaption":793,"author":17,"keywords":2718},[151,795,796,797,798,799,25,492],[2720],{"headline":803,"author":2721,"datePublished":792,"@type":32},{"name":17,"@type":31},{"title":786,"description":790},[2724,2725,2726,2727],{"tag":557,"color":558},{"tag":810,"color":811},{"tag":590,"color":591},{"tag":208,"color":209},{"id":816,"title":817,"cover":818,"coverAlt":817,"date":819,"description":820,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2729,"navigation":26,"path":825,"schemaOrg":2731,"seo":2734,"series":550,"seriesDescription":551,"seriesOrder":115,"seriesTitle":553,"slug":13,"stem":831,"tags":2735,"__hash__":839},{"updatedAt":657,"readingTime":82,"coverCaption":822,"author":17,"keywords":2730},[151,557,824,56],[2732],{"headline":817,"author":2733,"datePublished":829,"@type":32},{"name":17,"@type":31},{"title":817,"description":820},[2736,2737,2738,2739,2740,2741],{"tag":557,"color":558},{"tag":590,"color":591},{"tag":810,"color":811},{"tag":780,"color":42},{"tag":41,"color":42},{"tag":208,"color":209},{"id":841,"title":842,"cover":843,"coverAlt":842,"date":844,"description":845,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2743,"navigation":26,"path":852,"schemaOrg":2745,"seo":2748,"series":80,"seriesDescription":81,"seriesOrder":392,"seriesTitle":83,"slug":13,"stem":858,"tags":2749,"__hash__":867},{"updatedAt":67,"coverCaption":847,"author":17,"keywords":2744},[72,849,850,851,824],[2746],{"headline":842,"author":2747,"datePublished":856,"@type":32},{"name":17,"@type":31},{"title":842,"description":845},[2750,2751,2752,2753,2754,2755],{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":41,"color":42},{"tag":279,"color":280},{"tag":56,"color":57},{"id":869,"title":870,"cover":871,"coverAlt":870,"date":872,"description":873,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2757,"navigation":26,"path":880,"schemaOrg":2759,"seo":2762,"series":80,"seriesDescription":81,"seriesOrder":419,"seriesTitle":83,"slug":13,"stem":886,"tags":2763,"__hash__":896},{"updatedAt":67,"coverCaption":875,"author":17,"keywords":2758},[151,877,878,879,25,155],[2760],{"headline":870,"author":2761,"datePublished":884,"@type":32},{"name":17,"@type":31},{"title":870,"description":873},[2764,2765,2766,2767,2768,2769],{"tag":889,"color":890},{"tag":44,"color":45},{"tag":73,"color":88},{"tag":851,"color":862},{"tag":103,"color":119},{"tag":56,"color":57},{"id":898,"title":899,"cover":900,"coverAlt":901,"date":902,"description":903,"draft":11,"extension":12,"lab":2771,"locale":14,"meta":2773,"navigation":26,"path":920,"schemaOrg":2775,"seo":2778,"series":34,"seriesDescription":35,"seriesOrder":115,"seriesTitle":37,"slug":13,"stem":926,"tags":2779,"__hash__":933},{"title":905,"goal":906,"tasks":2772,"starterCode":912,"solutionHint":913},[908,909,910,911],{"updatedAt":148,"coverCaption":915,"author":17,"keywords":2774},[151,41,917,25,918,919],[2776],{"headline":899,"author":2777,"datePublished":924,"@type":32},{"name":17,"@type":31},{"title":899,"description":903},[2780,2781,2782],{"tag":41,"color":42},{"tag":208,"color":209},{"tag":931,"color":932},{"id":935,"title":936,"cover":937,"coverAlt":938,"date":939,"description":940,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2784,"navigation":26,"path":945,"schemaOrg":2785,"seo":2788,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":951,"tags":2789,"__hash__":964},{"updatedAt":942,"coverCaption":943,"author":17,"keywords":944},[2786],{"headline":936,"author":2787,"datePublished":949,"@type":32},{"name":17,"@type":31},{"title":936,"description":940},[2790,2791,2792,2793,2794],{"tag":954,"color":955},{"tag":957,"color":958},{"tag":41,"color":42},{"tag":961,"color":962},{"tag":279,"color":280},{"id":966,"title":967,"cover":968,"coverAlt":969,"date":970,"description":971,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2796,"navigation":26,"path":974,"schemaOrg":2797,"seo":2800,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":980,"tags":2801,"__hash__":987},{"updatedAt":942,"coverCaption":973},[2798],{"headline":967,"author":2799,"datePublished":978,"@type":32},{"name":17,"@type":31},{"title":967,"description":971},[2802,2803,2804],{"tag":983,"color":984},{"tag":961,"color":962},{"tag":208,"color":209},{"id":989,"title":990,"cover":991,"coverAlt":992,"date":993,"description":994,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2806,"navigation":26,"path":997,"schemaOrg":2807,"seo":2810,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1003,"tags":2811,"__hash__":1007},{"updatedAt":942,"coverCaption":996},[2808],{"headline":990,"author":2809,"datePublished":1001,"@type":32},{"name":17,"@type":31},{"title":990,"description":994},[2812,2813],{"tag":931,"color":932},{"tag":961,"color":962},{"id":1009,"title":1010,"cover":1011,"coverAlt":938,"date":1012,"description":1013,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2815,"navigation":26,"path":1017,"schemaOrg":2816,"seo":2819,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1023,"tags":2820,"__hash__":1028},{"updatedAt":942,"coverCaption":1015,"author":17,"keywords":1016},[2817],{"headline":1010,"author":2818,"datePublished":1021,"@type":32},{"name":17,"@type":31},{"title":1010,"description":1013},[2821,2822,2823],{"tag":961,"color":962},{"tag":208,"color":209},{"tag":931,"color":932},{"id":1030,"title":1031,"cover":1032,"coverAlt":1033,"date":1034,"description":1035,"draft":11,"extension":12,"lab":13,"locale":14,"meta":2825,"navigation":26,"path":1038,"schemaOrg":2826,"seo":2829,"series":13,"seriesDescription":13,"seriesOrder":13,"seriesTitle":13,"slug":13,"stem":1044,"tags":2830,"__hash__":1051},{"updatedAt":942,"coverCaption":1037},[2827],{"headline":1031,"author":2828,"datePublished":1042,"@type":32},{"name":17,"@type":31},{"title":1031,"description":1035},[2831,2832,2833],{"tag":17,"color":955},{"tag":1048,"color":1049},{"tag":961,"color":962},1785203024902]