[{"data":1,"prerenderedAt":230},["ShallowReactive",2],{"term-r\u002Freactive":3,"related-r\u002Freactive":213},{"id":4,"title":5,"acronym":6,"body":7,"category":193,"description":194,"difficulty":195,"extension":196,"letter":197,"meta":198,"navigation":81,"path":199,"related":200,"seo":207,"sitemap":208,"stem":211,"subcategory":6,"__hash__":212},"terms\u002Fterms\u002Fr\u002Freactive.md","Reactive",null,{"type":8,"value":9,"toc":187},"minimark",[10,15,19,23,26,30,176,180,183],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic. You don't have to manually tell the browser 'hey, go redraw that number'. The framework watches your data and handles it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Reactive data is data that, when mutated, automatically triggers UI updates. In Vue, reactive() wraps an object in a Proxy that intercepts get\u002Fset operations to track dependencies and trigger re-renders. In React, reactive updates happen via setState calls.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { reactive } from 'vue';\n\nconst state = reactive({\n  count: 0,\n  name: 'vibecoder'\n});\n\n\u002F\u002F Changing state.count automatically updates the template\nstate.count++;\n","javascript","",[38,39,40,76,83,105,122,138,149,154,161],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,66,70,73],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"s7zQu","import",[41,50,52],{"class":51},"sMK4o"," {",[41,54,56],{"class":55},"sTEyZ"," reactive",[41,58,59],{"class":51}," }",[41,61,62],{"class":47}," from",[41,64,65],{"class":51}," '",[41,67,69],{"class":68},"sfazB","vue",[41,71,72],{"class":51},"'",[41,74,75],{"class":51},";\n",[41,77,79],{"class":43,"line":78},2,[41,80,82],{"emptyLinePlaceholder":81},true,"\n",[41,84,86,90,93,96,99,102],{"class":43,"line":85},3,[41,87,89],{"class":88},"spNyl","const",[41,91,92],{"class":55}," state ",[41,94,95],{"class":51},"=",[41,97,56],{"class":98},"s2Zo4",[41,100,101],{"class":55},"(",[41,103,104],{"class":51},"{\n",[41,106,108,112,115,119],{"class":43,"line":107},4,[41,109,111],{"class":110},"swJcz","  count",[41,113,114],{"class":51},":",[41,116,118],{"class":117},"sbssI"," 0",[41,120,121],{"class":51},",\n",[41,123,125,128,130,132,135],{"class":43,"line":124},5,[41,126,127],{"class":110},"  name",[41,129,114],{"class":51},[41,131,65],{"class":51},[41,133,134],{"class":68},"vibecoder",[41,136,137],{"class":51},"'\n",[41,139,141,144,147],{"class":43,"line":140},6,[41,142,143],{"class":51},"}",[41,145,146],{"class":55},")",[41,148,75],{"class":51},[41,150,152],{"class":43,"line":151},7,[41,153,82],{"emptyLinePlaceholder":81},[41,155,157],{"class":43,"line":156},8,[41,158,160],{"class":159},"sHwdD","\u002F\u002F Changing state.count automatically updates the template\n",[41,162,164,167,170,173],{"class":43,"line":163},9,[41,165,166],{"class":55},"state",[41,168,169],{"class":51},".",[41,171,172],{"class":55},"count",[41,174,175],{"class":51},"++;\n",[11,177,179],{"id":178},"when-youll-hear-this","When You'll Hear This",[16,181,182],{},"\"Use reactive() for objects and ref() for primitives in Vue.\" \u002F \"The UI isn't updating because you replaced the reactive object instead of mutating it.\"",[184,185,186],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":78,"depth":78,"links":188},[189,190,191,192],{"id":13,"depth":78,"text":14},{"id":21,"depth":78,"text":22},{"id":28,"depth":78,"text":29},{"id":178,"depth":78,"text":179},"frontend","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.","intermediate","md","r",{},"\u002Fterms\u002Fr\u002Freactive",[201,202,203,204,205,206],"Reactivity","State","ref","Composable","Vue","Binding",{"title":5,"description":194},{"changefreq":209,"priority":210},"weekly",0.7,"terms\u002Fr\u002Freactive","nOZ1G6FDAjzs1MvRVOOtcmTCaPIZWqtaFqvTZTSDbRc",[214,218,221,224,227],{"title":206,"path":215,"acronym":6,"category":193,"difficulty":216,"description":217},"\u002Fterms\u002Fb\u002Fbinding","beginner","Binding is connecting your data to your HTML so they stay in sync.",{"title":204,"path":219,"acronym":6,"category":193,"difficulty":195,"description":220},"\u002Fterms\u002Fc\u002Fcomposable","Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together.",{"title":201,"path":222,"acronym":6,"category":193,"difficulty":195,"description":223},"\u002Fterms\u002Fr\u002Freactivity","Reactivity is the system that makes your UI automatically keep up with your data.",{"title":202,"path":225,"acronym":6,"category":193,"difficulty":216,"description":226},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",{"title":205,"path":228,"acronym":6,"category":193,"difficulty":216,"description":229},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518306325]