[{"data":1,"prerenderedAt":182},["ShallowReactive",2],{"term-r\u002Freactivity":3,"related-r\u002Freactivity":165},{"id":4,"title":5,"acronym":6,"body":7,"category":144,"description":145,"difficulty":146,"extension":147,"letter":148,"meta":149,"navigation":150,"path":151,"related":152,"seo":159,"sitemap":160,"stem":163,"subcategory":6,"__hash__":164},"terms\u002Fterms\u002Fr\u002Freactivity.md","Reactivity",null,{"type":8,"value":9,"toc":138},"minimark",[10,15,19,23,26,30,127,131,134],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Reactivity is the system that makes your UI automatically keep up with your data. It's like having a personal assistant who watches your variables and redraws the screen the moment anything changes. Vue is famous for its reactivity system being really clean.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Reactivity is the framework mechanism that tracks data dependencies and automatically re-renders affected parts of the UI when data changes. Vue 3 uses ES6 Proxies for fine-grained reactivity. React uses an immutable state model with diffing. Svelte compiles reactivity into direct DOM updates.",[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","\u002F\u002F Vue tracks that the template depends on count\n\u002F\u002F When count changes, only that part re-renders\nconst count = ref(0);\nconst doubled = computed(() => count.value * 2);\n","javascript","",[38,39,40,49,55,87],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Vue tracks that the template depends on count\n",[41,50,52],{"class":43,"line":51},2,[41,53,54],{"class":47},"\u002F\u002F When count changes, only that part re-renders\n",[41,56,58,62,66,70,74,77,81,84],{"class":43,"line":57},3,[41,59,61],{"class":60},"spNyl","const",[41,63,65],{"class":64},"sTEyZ"," count ",[41,67,69],{"class":68},"sMK4o","=",[41,71,73],{"class":72},"s2Zo4"," ref",[41,75,76],{"class":64},"(",[41,78,80],{"class":79},"sbssI","0",[41,82,83],{"class":64},")",[41,85,86],{"class":68},";\n",[41,88,90,92,95,97,100,102,105,108,111,114,117,120,123,125],{"class":43,"line":89},4,[41,91,61],{"class":60},[41,93,94],{"class":64}," doubled ",[41,96,69],{"class":68},[41,98,99],{"class":72}," computed",[41,101,76],{"class":64},[41,103,104],{"class":68},"()",[41,106,107],{"class":60}," =>",[41,109,110],{"class":64}," count",[41,112,113],{"class":68},".",[41,115,116],{"class":64},"value ",[41,118,119],{"class":68},"*",[41,121,122],{"class":79}," 2",[41,124,83],{"class":64},[41,126,86],{"class":68},[11,128,130],{"id":129},"when-youll-hear-this","When You'll Hear This",[16,132,133],{},"\"Vue's reactivity system automatically tracks dependencies so you don't manage updates manually.\" \u002F \"Svelte's reactivity is compile-time, React's is runtime.\"",[135,136,137],"style",{},"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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":51,"depth":51,"links":139},[140,141,142,143],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":129,"depth":51,"text":130},"frontend","Reactivity is the system that makes your UI automatically keep up with your data.","intermediate","md","r",{},true,"\u002Fterms\u002Fr\u002Freactivity",[153,154,155,156,157,158],"Reactive","State","Virtual DOM","Computed","Vue","Svelte",{"title":5,"description":145},{"changefreq":161,"priority":162},"weekly",0.7,"terms\u002Fr\u002Freactivity","qaZ-uDRkcsH6hfnZ0Ly7RtWPe_QjMJsazoJT9Kdj7CE",[166,169,173,176,179],{"title":153,"path":167,"acronym":6,"category":144,"difficulty":146,"description":168},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",{"title":154,"path":170,"acronym":6,"category":144,"difficulty":171,"description":172},"\u002Fterms\u002Fs\u002Fstate","beginner","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":158,"path":174,"acronym":6,"category":144,"difficulty":146,"description":175},"\u002Fterms\u002Fs\u002Fsvelte","Svelte is a framework that disappears at build time.",{"title":155,"path":177,"acronym":6,"category":144,"difficulty":146,"description":178},"\u002Fterms\u002Fv\u002Fvirtual-dom","The Virtual DOM is a lightweight copy of the real DOM that lives in memory.",{"title":157,"path":180,"acronym":6,"category":144,"difficulty":171,"description":181},"\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.",1776518306348]